One component, four skins. The look comes from data-style on the parent — the component itself never knew there were variants.

This iframe loads with data-style on its body, so the cascade is isolated. The bar, indicator, and density all flip based on the theme.

Wrapper owns selection; Navigator owns keyboard. Triggers get data-tabs-trigger; panels get role="tabpanel".

Arrow keys walk the strip, Enter selects. role="tablist" / "tab" / "tabpanel" applied via the data-tabs attributes.

options + bind:value. Snippets per item for custom content. orientation flips horizontal ↔ vertical.