トグルグループ
stimeo--toggle-group
aria-pressed・単一/複数選択・Toolbar 風ロービングを備えたトグルボタン群。
stimeo--toggle-group コントローラは、APG の Button(toggle)パターンを Toolbar 風のロービングナビゲーションとともに実装します。押下状態は aria-pressed で表し(アクセシブルネームは不変)、グループは 1 タブストップです。 single モードでは 1 つを押すと他が解除され、multiple は複数を許可します。Toolbar に倣い矢印はフォーカス移動のみで、トグルは Space/Enter(またはクリック)。トグルごとに stimeo--toggle-group:change を発火します。
キーボード操作
| キー | 動作 |
|---|---|
| Space / Enter | フォーカス中のボタンをトグル。 |
| → / ↓ | 次のボタンへフォーカス移動(ループ)。 |
| ← / ↑ | 前のボタンへフォーカス移動(ループ)。 |
| Home / End | 先頭 / 末尾のボタンへフォーカス移動。 |
<%# Markup for the toggle-group (APG Button toggle + Toolbar roving) demo.
Pressed state is aria-pressed; the single tab stop is roving tabindex. Arrows only
move focus; toggling is Space/Enter and click. Multiple selection (multiple). The look
switches on [aria-pressed="true"]. %>
<div class="toggle-group-demo" role="group"
aria-label="<%= t('components.toggle_group.demo.label') %>"
data-controller="stimeo--toggle-group">
<button type="button" class="toggle-group-demo__item" aria-pressed="false" tabindex="0"
aria-label="<%= t('components.toggle_group.demo.bold') %>" data-value="bold"
data-stimeo--toggle-group-target="item"
data-action="click->stimeo--toggle-group#toggle
keydown->stimeo--toggle-group#onKeydown">
<svg class="demo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M6 4h8a4 4 0 0 1 0 8H6z"></path>
<path d="M6 12h9a4 4 0 0 1 0 8H6z"></path>
</svg>
</button>
<button type="button" class="toggle-group-demo__item" aria-pressed="false" tabindex="-1"
aria-label="<%= t('components.toggle_group.demo.italic') %>" data-value="italic"
data-stimeo--toggle-group-target="item"
data-action="click->stimeo--toggle-group#toggle
keydown->stimeo--toggle-group#onKeydown">
<svg class="demo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<line x1="19" y1="4" x2="10" y2="4"></line>
<line x1="14" y1="20" x2="5" y2="20"></line>
<line x1="15" y1="4" x2="9" y2="20"></line>
</svg>
</button>
<button type="button" class="toggle-group-demo__item" aria-pressed="false" tabindex="-1"
aria-label="<%= t('components.toggle_group.demo.underline') %>" data-value="underline"
data-stimeo--toggle-group-target="item"
data-action="click->stimeo--toggle-group#toggle
keydown->stimeo--toggle-group#onKeydown">
<svg class="demo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M6 3v7a6 6 0 0 0 12 0V3"></path>
<line x1="4" y1="21" x2="20" y2="21"></line>
</svg>
</button>
</div>
/*
* Presentation-only styles for the toggle-group demo.
* The pressed state is expressed via [aria-pressed="true"] (set by the library).
*/
.toggle-group-demo {
display: inline-flex;
gap: 0.25rem;
padding: 0.25rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 0.5rem;
}
.toggle-group-demo__item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
color: var(--fg);
background: transparent;
border: 1px solid transparent;
border-radius: 0.375rem;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.toggle-group-demo__item:hover {
border-color: var(--accent);
}
.toggle-group-demo__item:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Fill with the accent color while pressed. */
.toggle-group-demo__item[aria-pressed="true"] {
color: var(--white);
background: var(--accent);
border-color: var(--accent);
}
.toggle-group-demo__item .demo-icon {
width: 1.1rem;
height: 1.1rem;
}
このデモに固有の消費側 JS はありません(挙動はコントローラが担います)。
これらのスタイルは共通のデザイントークン(ライト/ダーク両対応)を使います。 共通スタイルも一緒にコピーし、ルート要素の data-theme を切り替えればダークになります。
このコンポーネントを動かすために HTML へ記述する data-* 属性です。ルート要素に下の data-controller を付け、その内側に各 target / value / action を配置します。
ルート要素に付与
data-controller="stimeo--toggle-group"
ターゲット
| 名前 | 説明 | 属性 |
|---|---|---|
item
必須
|
グループ内のトグルボタン。押下状態は aria-pressed で表す。 |
data-stimeo--toggle-group-target="item" |
値(Values)
| 名前 | 説明 | 属性 |
|---|---|---|
mode
|
single(押下0〜1、他は解除)か multiple(任意数、既定)。 | data-stimeo--toggle-group-mode-value |
アクション
| 名前 | 説明 | アクション |
|---|---|---|
onKeydown
|
矢印・Home/End はフォーカス移動のみ(ラップ)。Space/Enter はボタン以外で切り替え。 | stimeo--toggle-group#onKeydown |
toggle
|
現在のモードに従い対象項目を切り替える。 | stimeo--toggle-group#toggle |
イベント
| 名前 | 説明 | イベント |
|---|---|---|
change
|
切り替えごとに発火。detail に値・押下状態・押下中の全値を載せる。 | stimeo--toggle-group:change |
状態フック
ライブラリが操作するのはこれらの ARIA / data 属性、カスタムプロパティだけです。見た目は利用側 CSS がこれらに反応して作ります([aria-selected] / [aria-expanded] / var(--stimeo--…) などのセレクタでフックします)。
| フック | 対象 | 意味 |
|---|---|---|
aria-pressed |
アイテム | "true" / "false"(押下状態)。 |
tabindex |
アイテム | アクティブが 0、他は -1(ロービング)。 |