tabs
v1.0.0WAI-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"
]
}
}