Tabs

fandhe-frontend-pre-styled-ui の tabs mod が提供するスタイル済み Tabs 部品です。WAI-ARIA APG の Tabs パターン（role="tablist"/"tab"/"tabpanel"・aria-selected・相互参照する aria-controls/aria-labelledby）に準拠したマークアップを SSR 時点の静的な選択状態から組み立てます。ページ内に収まるコンテンツ切り替え UI であり、他のセクションを覆うオーバーレイではないため、掲示位置を中和する専用 CSS は不要です。tabs() の第 1 引数 variant（TabsVariant）で下線スタイル（Line、既定）とセグメント/ピル型スタイル（Enclosed、shadcn/ui 既定 variant 相当）を選べます。

Demo

headless-ui の Tabs（WAI-ARIA Tabs パターン）に pre-styled-ui の data-scope / data-part セレクタ CSS を適用した静的掲示です。variant（line/enclosed）を選べます。

選択中のタブは data-state="active" で強調されます。

Enclosed は選択中 trigger を白背景 + 微小な影で浮き上がらせます。

vertical 対応の Enclosed（区切り線なし・全角丸）。

Features

WAI-ARIA APG の Tabs パターン（role="tablist"/"tab"/"tabpanel"、aria-selected、相互参照する aria-controls/aria-labelledby、roving tabindex）に準拠したマークアップを組み立てる。
root / list / trigger / content の 4 パーツに加え、選択タブの位置を示す装飾パーツ indicator（opt-in）を持つ 5 パーツ構成。
ActivationMode（Automatic/Manual）と Orientation（Horizontal/Vertical）を data-activation-mode / data-orientation として出力する。
size / color-palette variant で root にクラスを付与する。
data-orientation="vertical" 時は list の下線を右罫線へ、trigger の下線を右側の強調線へ切り替えて縦並び表示する（イシュー #1542）。
hover（背景・文字色）・disabled（data-disabled、半透明表示）・focus-visible（trigger/content 双方）を視覚的に反映する（イシュー #1542）。
variant で下線スタイル（Line、既定）とセグメント/ピル型スタイル（Enclosed、shadcn/ui 既定 variant 相当。list を淡色の角丸コンテナに、選択中 trigger を白背景 + 微小な影で浮き上がらせる）を選べる（イシュー #2039）。

Anatomy

root
  list
    trigger
  content

API Reference

Arguments

Name	Type	Default	Description
`variant`	`TabsVariant`	`TabsVariant::Line`	root へ付与する見た目 variant（Line/Enclosed）。
`size`	`Size`	`Size::Md`	root へ付与するサイズ variant。
`palette`	`ColorPalette`	—	root へ付与する配色 variant。
`props`	`&TabsProps<'_>`	—	id/selected/orientation/activation_mode/loop_focus/indicator を束ねる SSR 静的設定値。

Data Attributes

Part	Attribute	Observed Values
`content`	`data-orientation`	`horizontal`, `vertical`
`content`	`data-state`	`active`, `inactive`
`list`	`data-activation-mode`	`automatic`
`list`	`data-loop-focus`	`true`
`list`	`data-orientation`	`horizontal`, `vertical`
`root`	`data-orientation`	`horizontal`, `vertical`
`trigger`	`data-disabled`	（値なし）
`trigger`	`data-orientation`	`horizontal`, `vertical`
`trigger`	`data-state`	`active`, `inactive`
`trigger`	`data-value`	`archived`, `overview`, `usage`

CSS Variables

Variable	Default
`--fandhe-tabs-content-padding`	`var(--fandhe-space-4) 0`
`--fandhe-tabs-content-padding-inline`	`var(--fandhe-space-4)`
`--fandhe-tabs-font-size`	`var(--fandhe-font-font-size-sm)`
`--fandhe-tabs-hover-bg`	`var(--fandhe-color-bg-muted)`
`--fandhe-tabs-list-background`	`transparent`
`--fandhe-tabs-list-border-bottom`	`1px solid var(--fandhe-color-border)`
`--fandhe-tabs-list-padding`	`0`
`--fandhe-tabs-list-radius`	`0`
`--fandhe-tabs-trigger-active-background`	`transparent`
`--fandhe-tabs-trigger-active-shadow`	`none`
`--fandhe-tabs-trigger-background`	`transparent`
`--fandhe-tabs-trigger-border-bottom`	`2px solid transparent`
`--fandhe-tabs-trigger-margin-bottom`	`-1px`
`--fandhe-tabs-trigger-padding`	`var(--fandhe-space-2) var(--fandhe-space-4)`
`--fandhe-tabs-trigger-radius`	`var(--fandhe-radius-sm, 0.25rem) var(--fandhe-radius-sm, 0.25rem) 0 0`
`--fandhe-tabs-vertical-list-border-inline-end`	`1px solid var(--fandhe-color-border)`
`--fandhe-tabs-vertical-trigger-border-inline-end`	`2px solid transparent`
`--fandhe-tabs-vertical-trigger-margin-inline-end`	`-1px`
`--fandhe-tabs-vertical-trigger-radius-end`	`0`
`--fandhe-tabs-vertical-trigger-radius-start`	`var(--fandhe-radius-sm, 0.25rem)`

Accessibility

WAI-ARIA

Attribute	Description
role="tablist" / aria-orientation	list に付与。
role="tab" / aria-selected / aria-controls	trigger に付与。選択状態と対応する content の id を表す。
role="tabpanel" / aria-labelledby	content に付与。対応する trigger の id を指す。