ui-component

tabs

v1.0.0

WAI-ARIA Tabs pattern (scratch build) — tablist only, with roving tabindex, arrow-key navigation, Home/End, and automatic activation. The consumer renders their own tabpanels in light DOM and toggles visibility on dsChange. shadow:false so tab ids are addressable from tabpanels via aria-labelledby.

Install

Preview

Usage

react
django-template

Spec details

Raw registry entry
{
  "name": "tabs",
  "type": "ui-component",
  "metadata": {
    "level": 2,
    "description": "WAI-ARIA Tabs pattern (scratch build) — tablist only, with roving tabindex, arrow-key navigation, Home/End, and automatic activation. The consumer renders their own tabpanels in light DOM and toggles visibility on dsChange. shadow:false so tab ids are addressable from tabpanels via aria-labelledby.",
    "author": "neo",
    "version": "1.0.0",
    "created_at": "2026-08-26",
    "dependencies": [],
    "translations": {
      "es": {
        "description": "Patrón WAI-ARIA Tabs (scratch build) — solo la tablist, con roving tabindex, navegación por arrow keys, Home/End y activación automática. El consumidor renderiza sus propios tabpanels en light DOM y togglea visibilidad en dsChange. shadow:false para que los ids de los tabs sean referenciables desde los tabpanels vía aria-labelledby."
      }
    }
  },
  "spec": {
    "tech": "stencil",
    "tag": "ds-tabs",
    "tokens_used": [
      "font.family",
      "font.size-md",
      "spacing.sm",
      "spacing.lg"
    ]
  }
}