Tab Layout

Preview

<esa-tab-layout id="tabs">
  <div slot="panel-0">Overview content — summary metrics and status.</div>
  <div slot="panel-1">Activity content — recent events log.</div>
  <div slot="panel-2">Settings content — configuration form.</div>
</esa-tab-layout>

<script>
  document.getElementById('tabs').tabs = [
    { label: 'Overview' }, { label: 'Activity' }, { label: 'Settings' },
  ];
</script>

Appearance

Two appearances, aligned to Beacon's UiTabsAppearance. underline (default) shows an underlined indicator on the active tab; segmented renders a segmented control — a sunken, bordered track with a filled selected segment and no indicator. (variant="pill" is the legacy alias for segmented.)

<esa-tab-layout appearance="underline">…</esa-tab-layout>
<esa-tab-layout appearance="segmented">…</esa-tab-layout>

Sizes

<esa-tab-layout size="xs">…</esa-tab-layout>
<esa-tab-layout size="sm">…</esa-tab-layout>
<esa-tab-layout size="md">…</esa-tab-layout>
<esa-tab-layout size="lg">…</esa-tab-layout>

States

Tabs accept badges, and any tab can be disabled — keyboard navigation skips disabled tabs.

<script>
  el.tabs = [
    { label: 'Inbox', badge: 4 },
    { label: 'Drafts', disabled: true },
    { label: 'Archive', badge: 128 },
  ];
</script>

API

Events

tabs is an array property — set it in JS, not as an attribute. Each EsaTab.icon is a raw inline SVG string.

Slots

The routed-tabs (RouterOutlet) branch of the Angular component is replaced here by content panels via the named slots above.

Accessibility

• Follows the ARIA tablist pattern: role="tablist" / role="tab" / role="tabpanel" with aria-selected.
• Roving tabindex — only the active tab is in the tab order; ArrowLeft / ArrowRight / Home / End move focus and selection, skipping disabled tabs.
• Disabled tabs are non-interactive and excluded from keyboard traversal.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.