<baht-tabs>

The tab strip comes from tabs; the panels are your own children, matched by data-tab="<key>". They get role="tabpanel", ids and hidden for you, so any markup works as a panel.

Ticket tabs

Request details live here.

Three updates since Monday.

Audit log (no access).

invoice-1042.pdf

<baht-tabs label="Ticket">
  <p data-tab="details">Request details live here.</p>
  <p data-tab="history">Three updates since Monday.</p>
  <p data-tab="locked">Audit log (no access).</p>
  <p data-tab="files">invoice-1042.pdf</p>
</baht-tabs>

<script>
  const el = document.querySelector('baht-tabs');
  el.tabs = [
    {
      "key": "details",
      "label": "Details"
    },
    {
      "key": "history",
      "label": "History",
      "badge": "3"
    },
    {
      "key": "locked",
      "label": "Audit",
      "disabled": true
    },
    {
      "key": "files",
      "label": "Files"
    }
  ];
</script>

Pill tabs as a strip

variant="pill" draws chips; with no data-tab children it is just the switch, and your page renders the content (no aria-controls pointing at nothing). The active fill is --baht-tabs-pill-active.

<baht-tabs variant="pill" label="Bills"></baht-tabs>

<script>
  const el = document.querySelector('baht-tabs');
  el.tabs = [
    {
      "key": "recurring",
      "label": "Repeating"
    },
    {
      "key": "installments",
      "label": "Installments",
      "badge": "2"
    }
  ];
</script>

tabs.tabs = [
  { key: 'details', label: 'Details' },
  { key: 'history', label: 'History', badge: '3' },
];
tabs.value = 'history'; // switch from code: no event
tabs.addEventListener('baht-change', (e) => (location.hash = e.detail.value));

Keyboard: ← / → move between tabs (wrapping, skipping disabled), Home / End jump. With activation="manual" the arrows only move focus and Enter / Space selects. Only the selected tab is in the Tab order.

Props

Name	Type	Default	Description
`tabs`JS	`TabItem[]`	`[]`	Tab strip { key, label, disabled?, badge? } (property)
`value`	`string`	`''`	Selected key; falls back to the first enabled tab
`label`	`string`	`''`	Accessible name of the tab list
`activation`	`'automatic' \| 'manual'`	`'automatic'`	automatic (arrows select) \| manual (Enter / Space selects)
`variant`	`'line' \| 'pill'`	`'line'`	line (underline strip) \| pill (chips; active fill --baht-tabs-pill-active / -ink)
`selected`JS	`string`	`—`	The tab actually shown: `value` when it names an enabled tab, else the first enabled one.

Events

Event	detail	Description
`baht-change`	`{ value }`	The user selected a tab (setting value does not fire it)
`name`	CustomEvent