Tab Bar Disclosure
Style
Token references resolve from the active theme.
Token Mapping
| Element | Token |
|---|---|
| Active accent (selected tab, once JS-enhanced) | {semantic.interactive-primary} |
| Panel/summary background | {semantic.surface-default} |
| Dividers between tabs | {semantic.border-subtle} |
| Label text | {semantic.ink-primary} |
Structure
- Root:
div.ps-tab-bar[role="tablist"](role added only once JS confirms it can coordinate the tabset — see Accessibility) - Each tab:
details.ps-tab - Trigger:
summary.ps-tab__summary - Panel:
div.ps-tab__panel
Compare against this app's own shipped ps-tab pattern
(templates/tab_bar.html + .tab-bar/.tab-bar a/.tab-bar a.active in
static/portal.css) — that's a plain link-based nav, not <details>, and
uses --cds-* token names rather than --ps-*; the two components solve
different problems (see Usage) and are not meant to share a token
namespace or markup shape.
Important Information
Design System disclosure
This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.