Sidebar

fandhe-frontend-pre-styled-ui の sidebar mod が提供するスタイル済み Sidebar 部品です。shadcn/ui Sidebar 相当の意匠を、headless 層（fandhe-frontend-headless-ui の sidebar）が出力する 22 パーツ（provider/root/header/content/footer/separator/input/ group/group-label/group-content/group-action/menu/menu-item/ menu-button/menu-action/menu-badge/menu-sub/menu-sub-item/ menu-sub-button/rail/trigger/inset）へ重ねます。

variant（sidebar / floating / inset）・collapsible（offcanvas / icon / none）・side（left / right）はいずれも class ベースのバリアント軸を持たず、headless が出力する data-variant / data-collapsible / data-side を CSS 属性セレクタとして参照するだけで見た目を切り替えます。--fandhe-sidebar-width / --fandhe-sidebar-width-icon / --fandhe-sidebar-width-mobile が展開幅・icon 折りたたみ幅・モバイル drawer 幅を制御し、--fandhe-color-sidebar-*（7 ロール: 背景 / 前景 / 枠線 / accent 背景・前景 / ring / border）が配色を担います。icon 折りたたみ時は menu-button のラベルテキストを clip 手法で視覚的に非表示化しつつアクセシブルネームは維持します（WCAG 4.1.2）。モバイル表示時は root が transform のみで drawer として開閉します。menu_skeleton はローディング装飾用のヘルパーで、ランダム幅を持たない決定的な固定幅の skeleton を返します。

Cmd/Ctrl+B のグローバルショートカット・モバイル判定（メディアクエリ）・menu-button の tooltip hover 配線はこの部品では実装しません（docs/policy/intentional-non-adoption.md §3.25 規則 1）。これらは fandhe-frontend-wasm-full 側の配線が担います。

Demo

アプリシェル用サイドバー。22 anatomy パーツすべてを 3 インスタンス（展開・icon 折りたたみ・floating）で示します。variant/collapsible/side は headless の data-* を CSS が参照するのみで class 軸を持ちません。Cmd/Ctrl+B・モバイル drawer 切替・tooltip 配線は fandhe-frontend-wasm-full の責務です。

Page content

Features

provider/root/header/content/footer/separator/input/group/group-label/group-content/group-action/menu/menu-item/menu-button/menu-action/menu-badge/menu-sub/menu-sub-item/menu-sub-button/rail/trigger/inset の 22 パーツでアプリシェル用サイドバーを構造化する
SidebarVariant（Sidebar/Floating/Inset）・SidebarCollapsible（Offcanvas/Icon/None）・SidebarSide（Left/Right）はいずれも class 軸を持たず、headless が出力する data-variant/data-collapsible/data-side を CSS 属性セレクタとして参照するのみで見た目を切り替える
--fandhe-sidebar-width / --fandhe-sidebar-width-icon / --fandhe-sidebar-width-mobile が展開幅・icon 折りたたみ幅・モバイル drawer 幅を制御し、--fandhe-color-sidebar-* 7 ロールが配色を担う
icon 折りたたみ時、menu-button のラベルテキストは clip 手法で視覚的に非表示化しつつアクセシブルネームは維持する（WCAG 4.1.2）
menu_skeleton はローディング装飾用ヘルパーで、ランダム幅を持たない決定的な固定幅の skeleton を返す
Cmd/Ctrl+B のグローバルショートカット・モバイル判定（メディアクエリ）・menu-button の tooltip hover 配線はこの部品では実装しない（docs/policy/intentional-non-adoption.md §3.25 規則 1、fandhe-frontend-wasm-full の責務）

Anatomy

provider
  root
    header
    content
      input
      separator
      group
        group-label
        group-action
        group-content
          menu
            menu-item
              menu-button
              menu-action
              menu-badge
            menu-sub
              menu-sub-item
                menu-sub-button
    footer
    rail
  trigger
  inset

API Reference

Arguments

Name	Type	Default	Description
`state`	`&Sidebar`	—	provider/root/rail/trigger が共有する状態機械（SidebarState::Expanded/Collapsed）。
`props`	`&SidebarProps`	`SidebarProps::default()`	collapsible（Offcanvas/Icon/None）・variant（Sidebar/Floating/Inset）・side（Left/Right）・mobile（bool）をまとめた静的設定。
`label`	`&str`	—	root（nav）の必須 aria-label。
`id`	`Option<&str>`	`None`	root の id。trigger の controls から aria-controls で関連付ける場合に指定する。
`icon`	`Option<Node>`	`None`	menu_button 固有の装飾アイコン引数（children の位置規約ではなく明示引数、PR #2245 対応）。
`controls`	`Option<&str>`	`None`	trigger が aria-controls として参照する root の id。
`show_icon`	`bool`	—	menu_skeleton がアイコン用の円形 skeleton を先頭に合成するかどうか。

Data Attributes

Part	Attribute	Observed Values
`menu-button`	`data-active`	（値なし）
`menu-button`	`data-size`	`default`
`menu-button`	`data-variant`	`default`
`menu-sub-button`	`data-active`	（値なし）
`menu-sub-button`	`data-size`	`sm`
`provider`	`data-collapsible`	`icon`, `offcanvas`
`provider`	`data-side`	`left`
`provider`	`data-state`	`collapsed`, `expanded`
`provider`	`data-variant`	`floating`, `sidebar`
`rail`	`data-state`	`collapsed`, `expanded`
`root`	`data-collapsible`	`icon`, `offcanvas`
`root`	`data-side`	`left`
`root`	`data-state`	`collapsed`, `expanded`
`root`	`data-variant`	`floating`, `sidebar`
`trigger`	`data-state`	`collapsed`, `expanded`

CSS Variables

Variable	Default
`--fandhe-sidebar-width`	`16rem`
`--fandhe-sidebar-width-icon`	`3rem`
`--fandhe-sidebar-width-mobile`	`18rem`

Examples

Expanded with a group

展開状態で group（label/action/content > menu）と menu-item（button/action/badge）を構造化する例です。

Icon-collapsed

SidebarCollapsible::Icon による折りたたみ状態（data-state="collapsed"）の例です。

Inset variant

SidebarVariant::Inset。inset パーツを provider の直接の子として配置します。

Page content

Accessibility

Keyboard Interactions

Key	Description
Tab / Shift+Tab	trigger・menu-button・menu-sub-button 間のフォーカス移動（ブラウザ既定のフォーカス順序）。
Enter / Space	trigger の開閉トグル（実際の開閉配線は fandhe-frontend-wasm-full、イシュー #2074 が担う）。
Cmd/Ctrl+B	サイドバーの開閉ショートカット（本部品には実装されず、fandhe-frontend-wasm-full の後続配線、#2074 が担う）。

WAI-ARIA

Attribute	Description
aria-label (root)	root（nav）の必須アクセシブルネーム。
aria-expanded / aria-controls (trigger)	trigger は開閉状態と操作対象の root を伝える。
aria-current="page" (menu-button/menu-sub-button)	href を持ち active な menu-button/menu-sub-button（a 要素）にのみ付与される。
role="group" / aria-labelledby (group)	group は role="group" を固定出力し、labelledby が Some のときのみ aria-labelledby を併記する。
tabindex="-1" (rail)	rail はマウス専用のドラッグ/クリック領域でありキーボードフォーカスの対象外。
aria-describedby (menu-button)	tooltip との関連付けにのみ用いる（describedby が Some のときのみ出力）。