@godxjp/ui 22.0.0 → 23.1.0

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **138**
-- With ≥1 frame: **133** · zero-frame: **5**
+- Public components: **135**
+- With ≥1 frame: **130** · zero-frame: **5**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -74,7 +74,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Input | ✓ | ✓ | · | · | · | · | · | · | · | · |
 | NumberInput | ✓ | ✓ | · | · | · | · | · | · | · | · |
 | SearchInput | ✓ | ✓ | · | · | · | · | · | · | · | · |
-| Select | ✓ | N/A | · | · | · | · | · | · | · | · |
+| Select | ✓ | · | · | · | · | · | · | · | · | · |
 | Switch | ✓ | ✓ | · | · | · | · | · | · | · | · |
 | Textarea | ✓ | ✓ | · | · | · | · | · | · | · | · |
 | Label | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
@@ -91,7 +91,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Toaster | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Tabs | ✓ | ✓ | N/A | · | · | · | · | · | · | · |
 | Pagination | ✓ | · | · | · | · | · | · | · | · | · |
-| DropdownMenu | ✓ | N/A | N/A | · | · | · | · | · | · | · |
+| DropdownMenu | ✓ | N/A | · | · | · | · | · | · | · | · |
 | Steps | ✓ | ✓ | N/A | · | · | · | · | · | · | · |
 | Toolbar | ✓ | N/A | · | N/A | · | · | · | · | · | · |
 | AppProvider | ✓ | · | · | · | · | · | · | · | · | · |
@@ -128,9 +128,6 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Rating | ✓ | N/A | · | · | · | · | · | · | · | · |
 | Segmented | ✓ | ✓ | · | · | · | · | · | · | · | · |
 | TagInput | ✓ | ✓ | · | · | · | · | · | · | · | · |
-| ContextMenu | ✓ | N/A | N/A | · | · | · | · | · | · | · |
-| Menubar | ✓ | N/A | N/A | · | · | · | · | · | · | · |
-| NavigationMenu | ✓ | N/A | N/A | · | · | · | · | · | · | · |
 | ResizablePanel | ✓ | N/A | · | N/A | · | · | · | · | · | · |
 | Carousel | ✓ | N/A | N/A | · | · | · | · | · | · | · |
 | AppSettingPicker | ✓ | N/A | · | · | · | · | · | · | · | · |

package/docs/SPACING.md

@@ -42,11 +42,11 @@ Implementation: `src/tokens/base.css` (values) · layout owners: `src/styles/*-l
 | `--card-space-body-y`                             | `--space-section-active` | Header↔body gap                            |
 | `--card-space-header-y` / `--card-space-footer-y` | `--space-stack-sm`       | Banded header + separated footer band      |
 
-| Component                 | Use                                         |
-| ------------------------- | ------------------------------------------- |
-| `StatCard`                | KPI / stat tile (`solo` path)               |
-| `CardContent solo`        | Body-only card (same padding as `StatCard`) |
-| `CardContent flush tight` | Edge-to-edge table/tabs in card             |
+| Component           | Use                                                                                                                                                                                     |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `StatCard`          | KPI / stat tile (`solo` path)                                                                                                                                                           |
+| `CardContent solo`  | Body-only card (same padding as `StatCard`)                                                                                                                                             |
+| `CardContent flush` | Edge-to-edge table/tabs in card — REQUIRED when the table IS the body (rule 10). `flush` alone drops the border, radius and inline padding; add `tight` only to change the HEADER band. |
 
 See preview **Data Display → Card** for live examples.
 
@@ -64,6 +64,36 @@ Pick by AXIS, and note that the three do **not** share one value: each reads a d
 
 Because `ui-card-inset-x` reads `--card-space-inset`, it follows the card it sits in: a `Card density="tight"` or `"cozy"` moves those cells with the shell. The other two read fixed steps (band and body) and do not.
 
+## Control interiors are NOT on this scale
+
+Everything above is the space **between** things — page sections, siblings in a stack, a card's
+shell against its content. A control's **inside** is a different measurement and it is derived from
+the control band (`--control-height`, `--control-padding-x`), never from `--space-*`. The two do not
+meet, and reading a step off the table above as a minimum for a control's interior gives the wrong
+answer.
+
+The case that keeps coming up is `Segmented`'s track (gh#503). Its padding is **2px**, and the
+label inside it therefore sits ~5px from the track's outer edge — under `--space-2` (8px), which is
+NOT a floor this document sets for anything.
+
+2px is the whole geometry of the control:
+
+```
+label height = --control-height − track padding × 2     →  32 − 4 = 28
+```
+
+so the track measures **exactly** `--control-height` and a `Segmented` sits level with the `Input`
+and the `Button` beside it on the same row. Raise the padding to 8px and one of two things has to
+give: either the label band drops to 16px — a 14px type size in a 16px box, under every hit target
+this library holds — or the track grows to 44px (28 + 8 × 2) and stops lining up with every other
+control. The same derivation is why a `Button`'s own label sits ~5px inside its border. A control
+is sized by its band; the band is what a dense enterprise UI is for.
+
+**The knob, if a service wants a roomier control.** `--segmented-track-padding` is a published
+component token (`src/tokens/components/segmented.css`); raising it re-derives the item height from
+the same formula, so the track stays exactly one control tall. Do not reach for a Tailwind `p-*` on
+the control — the audit rejects it, and it would break the identity above.
+
 ## MCP
 
 `get_pattern page-sections` (a page of Cards, spaced by the page) · `get_rule 40` (mobile-first spacing) · `list_audit_rules` (the spacing rules the CLI enforces).

package/docs/TOKENS.md

@@ -220,7 +220,7 @@ The census confirmed the number and rejected the diagnosis: **`width` is not one
 
 **Px, never rem.** A stroke is a _device_ line: its job is to read as one crisp rule at any type size, so it must not grow when the root font-size does. Every token that moved onto this scale was already `px` for that reason; a `rem` thickness (`--slider-track-height: 0.375rem`) is a different decision and stayed where it was. **Not `--scaling`-multiplied** either — `--scaling` is a density knob, and a 1px divider at 0.92px would blur rather than tighten.
 
-`--focus-ring-width` is now a member (`var(--stroke-md)`) rather than a parallel authority, so a high-contrast theme that wants every emphasis stroke at 3px sets one token.
+The focus mark reads this scale too, through `--focus-ring-weight` — `var(--focus-outline-weight)`, which is `var(--stroke-hairline)` (the light 1px mark the ON state ships). `--focus-ring-width` is DERIVED from it (`weight × --focus-outline`, the on/off switch) and must never be set directly; a theme that wants a 2px focus perimeter (WCAG 2.2 SC 2.4.13) sets `--focus-ring-weight: var(--stroke-md)`. See docs/CUSTOMER-THEMING.md.
 
 #### `--band-height-*` — the vertical extent of a horizontal band
 

package/docs/data-display/data-table/index.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from "react";
 
 import { AppProvider } from "@godxjp/ui/app";
-import { Badge, DataTable, type ColumnDef } from "@godxjp/ui/data-display";
+import { Badge, Card, CardContent, DataTable, type ColumnDef } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import {
@@ -93,6 +93,16 @@ const columns: ColumnDef<Invoice>[] = [
   },
 ];
 
+/* Five 240px columns: wider than the frame at every viewport the gates sweep, and wide for a
+ * reason no font can change — the width is declared, so the overflow is deterministic in CI. */
+const wideColumns: ColumnDef<Invoice>[] = [
+  { key: "id", header: "請求書番号", width: "240px" },
+  { key: "partner", header: "取引先", width: "240px" },
+  { key: "amount", header: "金額", align: "right", width: "240px" },
+  { key: "status", header: "状態", width: "240px" },
+  { key: "date", header: "期限日", width: "240px" },
+];
+
 export default function Demo() {
   const [selected, setSelected] = useState<Set<string>>(new Set(["INV-0311"]));
   const [sort, setSort] = useState<SortStateProp | undefined>({
@@ -117,6 +127,22 @@ export default function Demo() {
       subtitle="sortable · selectable · bulk actions · row actions · loading · clickable rows · empty state"
     >
       <Flex direction="col" gap="lg">
+        {/* A table WIDER than its frame, inside a flush Card — the shape a list page uses. It must
+            scroll inside its own box with the fade at the inline end, never cut its last columns
+            (WCAG 1.4.10). `check:data-table-overflow` measures this section. */}
+        <Flex direction="col" gap="sm" id="wide-overflow" className="max-w-3xl">
+          <Text weight="medium">枠より広い表（横スクロール · 列を切らない）</Text>
+          <Card>
+            <CardContent flush>
+              <DataTable
+                data={invoices}
+                columns={wideColumns}
+                getRowId={(row) => row.id}
+                selectable
+              />
+            </CardContent>
+          </Card>
+        </Flex>
         <Flex direction="col" gap="sm" id="text-action-width">
           <Text weight="medium">日本語の行アクション</Text>
           <DataTable
@@ -264,13 +290,28 @@ export default function Demo() {
           </AppProvider>
         </Flex>
 
-        <Flex direction="col" gap="sm">
+        <Flex direction="col" gap="sm" id="empty-builtin">
           <Text as="div" weight="medium">
             空の状態（data が空のとき自動表示）
           </Text>
           <DataTable data={[]} columns={columns} getRowId={(row) => row.id} />
         </Flex>
 
+        {/* The SAME cell with consumer content in it. `empty` takes a ReactNode, so a plain string
+            is a legal call — and the lifecycle cell used to be `padding: 0`, which put that string
+            flush against the table's edge. Measured here; see check:data-table-empty-inset. */}
+        <Flex direction="col" gap="sm" id="empty-plain-string">
+          <Text as="div" weight="medium">
+            空の状態（empty に文字列を渡す）
+          </Text>
+          <DataTable
+            data={[]}
+            columns={columns}
+            getRowId={(row) => row.id}
+            empty="まだ登録がありません"
+          />
+        </Flex>
+
         {/* — the two failure states, in the same table grid as empty/loading. */}
         <Flex direction="col" gap="sm">
           <Text as="div" weight="medium">
@@ -292,7 +333,7 @@ export default function Demo() {
           <DataTable data={[]} columns={columns} getRowId={(row) => row.id} error />
         </Flex>
 
-        <Flex direction="col" gap="sm">
+        <Flex direction="col" gap="sm" id="error-custom-node">
           <Text as="div" weight="medium">
             エラー（error にノードを渡して文言を差し替え）
           </Text>

package/docs/data-display/popover.tsx

@@ -135,10 +135,7 @@ export default function Demo() {
             <Flex direction="row" wrap gap="sm">
               <Popover>
                 <PopoverTrigger asChild>
-                  {/* data-axe-open: opened by check-frame-axe before its overlay scan. */}
-                  <Button data-axe-open variant="outline">
-                    side=top
-                  </Button>
+                  <Button variant="outline">side=top</Button>
                 </PopoverTrigger>
                 <PopoverContent side="top" aria-label="上側の配置例">
                   <PopoverDescription>上に開きます。</PopoverDescription>
@@ -215,8 +212,9 @@ export default function Demo() {
             <CardDescription>
               既定の panel は --popover-width（18rem）。auto は中身に測らせます — 自前の幅を持つもの
               （Calendar、チャート、固定幅のプレビュー）はこれ以外に正解がありません。trigger
-              はアンカーに合わせます。className に w-* を書くのは呼び出し側の定数で、どのテーマからも
-              retune できません。flush が padding 側で避けているのと同じ話です。
+              はアンカーに合わせます。className に w-*
+              を書くのは呼び出し側の定数で、どのテーマからも retune できません。flush が padding
+              側で避けているのと同じ話です。
             </CardDescription>
           </CardHeader>
           <CardContent>

package/docs/data-display/scroll-area.tsx

@@ -14,10 +14,10 @@ import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 
 /**
- * ScrollArea — custom scrollbar container. ALWAYS set an explicit height/max-height
- * (vertical) or width (horizontal) on the wrapper or the scrollbar never appears.
- * `type` controls when the bar is visible; `ScrollArea orientation="horizontal"`
- * adds a horizontal bar. Composed only from real @godxjp/ui components.
+ * ScrollArea — a native scrolling box. ALWAYS give it an explicit height/max-height
+ * (vertical) or width (horizontal), or nothing ever overflows and no scrollbar appears.
+ * `orientation` decides which axes may scroll; the browser draws the bar, styled from
+ * the --scroll-area-* tokens. Composed only from real @godxjp/ui components.
  */
 const entries = Array.from(
   { length: 18 },
@@ -97,7 +97,7 @@ export default function Demo() {
   return (
     <PageContainer
       title="ScrollArea"
-      subtitle="Custom scrollbar container · needs an explicit height"
+      subtitle="Native scrolling, token-styled scrollbar · needs an explicit height"
     >
       <Flex direction="col" gap="lg">
         <Card>
@@ -115,7 +115,6 @@ export default function Demo() {
                   anchor="bottom"
                   viewportRef={streamViewport}
                   onAnchoredChange={setAnchored}
-                  type="always"
                 >
                   <CardContent>
                     <Flex direction="col">
@@ -173,7 +172,7 @@ export default function Demo() {
           <CardContent>
             <Card variant="outline" className="h-40 w-full">
               <CardContent flush>
-                <ScrollArea anchor="bottom" anchorOffset={0} type="always">
+                <ScrollArea anchor="bottom" anchorOffset={0}>
                   <CardContent>
                     <Flex direction="col" gap="xs">
                       {entries.map((e) => (
@@ -215,40 +214,13 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>type=&quot;always&quot;（バーを常時表示）</CardTitle>
-            <CardDescription>
-              既定の hover はホバー時のみバーを表示します。always
-              は内容が溢れる限りバーを常に表示します。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Card variant="outline" className="h-56 w-full">
-              <CardContent flush>
-                <ScrollArea type="always">
-                  <CardContent>
-                    <Flex direction="col" gap="xs">
-                      {entries.map((e) => (
-                        <div key={e} className="text-sm tabular-nums">
-                          {e}
-                        </div>
-                      ))}
-                    </Flex>
-                  </CardContent>
-                </ScrollArea>
-              </CardContent>
-            </Card>
-          </CardContent>
-        </Card>
-
         <Card>
           <CardHeader>
             <CardTitle level={2}>ScrollArea</CardTitle>
             <CardDescription>orientation="horizontal"</CardDescription>
           </CardHeader>
           <CardContent>
-            <ScrollArea orientation="horizontal" type="always">
+            <ScrollArea orientation="horizontal">
               <ResponsiveGrid flow="columns">
                 {columns.map((column) => (
                   <Card key={column}>
@@ -264,17 +236,51 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>個別の ScrollBar を追加する</CardTitle>
+            <CardTitle level={2}>ScrollBar は何も描画しない（非推奨）</CardTitle>
+            <CardDescription>
+              v22 まではこの要素を置くことが軸を開く方法だったが、スクロールがブラウザ本来のものに
+              なったので ScrollBar は何も描画しない。下のカードには ScrollBar
+              が置いてあるが、横に動くのは orientation=&quot;both&quot; のおかげで、ScrollBar
+              のおかげではない。残っている &lt;ScrollBar&gt; は消して、軸は orientation で宣言する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card variant="outline" className="h-24 w-full">
+              <CardContent flush>
+                <ScrollArea orientation="both">
+                  <ResponsiveGrid flow="columns">
+                    {columns.map((column) => (
+                      <Text key={column}>{column}</Text>
+                    ))}
+                  </ResponsiveGrid>
+                  <ScrollBar orientation="horizontal" />
+                </ScrollArea>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>両方向スクロール（orientation=&quot;both&quot;）</CardTitle>
+            <CardDescription>
+              縦にも横にも溢れうる面は orientation=&quot;both&quot;。以前は縦の ScrollArea に
+              ScrollBar を足して横軸を開けていたが、スクロールはブラウザ本来のものになったので、
+              軸を決めるのは orientation だけになった。
+            </CardDescription>
           </CardHeader>
           <CardContent>
-            <ScrollArea type="always">
-              <ResponsiveGrid flow="columns">
-                {columns.map((column) => (
-                  <Text key={column}>{column}</Text>
-                ))}
-              </ResponsiveGrid>
-              <ScrollBar orientation="horizontal" />
-            </ScrollArea>
+            <Card variant="outline" className="h-32 w-full">
+              <CardContent flush>
+                <ScrollArea orientation="both">
+                  <ResponsiveGrid flow="columns">
+                    {columns.map((column) => (
+                      <Text key={column}>{column}</Text>
+                    ))}
+                  </ResponsiveGrid>
+                </ScrollArea>
+              </CardContent>
+            </Card>
           </CardContent>
         </Card>
 
@@ -288,7 +294,7 @@ export default function Demo() {
           <CardContent>
             <Card variant="outline" className="h-56 w-full">
               <CardContent flush>
-                <ScrollArea type="always">
+                <ScrollArea>
                   <CardContent>
                     <Flex direction="col" gap="xs">
                       {shortEntries.map((e) => (

package/docs/data-display/table.tsx

@@ -181,7 +181,7 @@ export default function Demo() {
               full frame. The suppression above is scoped to a flush body, never to `bordered`.
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          <CardContent flush>
             <Table bordered>
               <TableHeader>
                 <TableRow>

package/docs/data-entry/date-picker.tsx

@@ -41,8 +41,7 @@ export default function Demo() {
               形式に整形され、 解釈できない入力は元の値へ復帰する。
             </CardDescription>
           </CardHeader>
-          {/* data-axe-open: check-frame-axe opens the calendar before scanning. */}
-          <CardContent data-axe-open>
+          <CardContent>
             <FormField id="issue-date" label="発行日" required>
               <DatePicker
                 id="issue-date"
@@ -288,7 +287,7 @@ export default function Demo() {
               ISO 送信される。 開始 &gt; 終了で入力しても order (既定 true) が昇順に正規化する。
             </CardDescription>
           </CardHeader>
-          <CardContent data-axe-open>
+          <CardContent>
             <FormField id="period" label="会計期間" required>
               <DatePicker
                 range

package/docs/data-entry/input-otp.tsx

@@ -38,8 +38,11 @@ export default function Demo() {
             <CardDescription>6スロット 1グループ · ペースト・矢印キー操作に対応。</CardDescription>
           </CardHeader>
           <CardContent>
-            <FormField id="email-otp" label="認証コード" required>
-              <InputOTP maxLength={6} value={emailCode} onChange={setEmailCode}>
+            {/* この行の id は FIELD ではなく CONTROL 側にある。FormField はその id をそのまま
+                使い、ラベルのクリックもその id を見る（gh#477：以前は FormField 自身の id を
+                見ていたので、両者が食い違った瞬間にラベルがどこも指さなくなった）。 */}
+            <FormField label="認証コード" required>
+              <InputOTP id="email-otp" maxLength={6} value={emailCode} onChange={setEmailCode}>
                 <InputOTPGroup>
                   <InputOTPSlot index={0} />
                   <InputOTPSlot index={1} />

package/docs/data-entry/segmented-in-filter-row.tsx

@@ -0,0 +1,77 @@
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Segmented } from "@godxjp/ui/data-entry";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * The composition a consumer actually filters a list with: a Segmented that carries a count badge
+ * per option, sharing a WRAPPING flex row with the other filter controls, inside a Card.
+ *
+ * It is a separate frame from `segmented.tsx` because the row is the variable. `#four-with-counts`
+ * over there puts the track directly in a CardContent, where it is a block box and shrinks to the
+ * column; here it is a FLEX ITEM, and a flex item's `min-inline-size` defaults to `auto` — its
+ * max-content width — so nothing makes it give ground to the row.
+ */
+const OPTIONS = [
+  { value: "all", label: "すべて", count: 133 },
+  { value: "ginou", label: "技能実習", count: 82 },
+  { value: "tokutei", label: "特定技能", count: 51 },
+  { value: "ikusei", label: "育成就労", count: 0 },
+].map(({ value, label, count }) => ({
+  value,
+  label: (
+    <>
+      {label}
+      <Badge as="span" variant="secondary">
+        {count}
+      </Badge>
+    </>
+  ),
+}));
+
+export default function SegmentedInFilterRow() {
+  return (
+    <PageContainer title="Segmented in a filter row" subtitle="4 択 + 件数バッジ · Flex wrap の中">
+      <Card id="four-in-wrap-row">
+        <CardHeader>
+          <CardTitle level={2}>制度の絞り込み</CardTitle>
+          <CardDescription>
+            `check:segmented-wrap` がこのカードも測ります。トラックは行の中でも縮み、393px
+            でラベルも件数も切り詰めません。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Flex gap="sm" align="center" wrap>
+            <Segmented aria-label="制度" defaultValue="all" options={OPTIONS} />
+            <Button variant="outline" size="sm">
+              絞り込みを解除
+            </Button>
+          </Flex>
+        </CardContent>
+      </Card>
+
+      <Card id="four-in-wrap-row-alone">
+        <CardHeader>
+          <CardTitle level={2}>同じトラック、行の中に一つだけ</CardTitle>
+          <CardDescription>
+            <Text size="sm" tone="muted">
+              兄弟が無くても行は行。フレックス項目としての縮み方を切り分けるための対照。
+            </Text>
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Flex gap="sm" align="center" wrap>
+            <Segmented aria-label="制度（単独）" defaultValue="all" options={OPTIONS} />
+          </Flex>
+        </CardContent>
+      </Card>
+    </PageContainer>
+  );
+}

package/docs/data-entry/segmented.tsx

@@ -1,6 +1,13 @@
 import { useState } from "react";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
 import { FormField, Segmented } from "@godxjp/ui/data-entry";
 import { Text, VisuallyHidden } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
@@ -84,6 +91,38 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card id="four-with-counts">
+          <CardHeader>
+            <CardTitle level={2}>4 択 + 件数（スマホ幅では折り返す）</CardTitle>
+            <CardDescription>
+              一覧の上の状態フィルター。4 つが 1 行に収まらない幅では、トラックが 2 行目に折り返し
+              ます — ラベルも件数も切り詰めません。`check:segmented-wrap` がこのカードを測ります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Segmented
+              aria-label="状態"
+              defaultValue="all"
+              options={[
+                { value: "all", label: "すべて", count: 128 },
+                { value: "active", label: "実習中", count: 96 },
+                { value: "pending", label: "申請中", count: 12 },
+                { value: "gone", label: "失踪・帰国", count: 0 },
+              ].map(({ value, label, count }) => ({
+                value,
+                label: (
+                  <>
+                    {label}
+                    <Badge as="span" variant="secondary">
+                      {count}
+                    </Badge>
+                  </>
+                ),
+              }))}
+            />
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>size · vertical · block</CardTitle>

package/docs/data-entry/select-matrix.tsx

@@ -142,8 +142,7 @@ export default function Demo() {
               references. The internal search textbox has its own visible-purpose accessible name.
             </CardDescription>
           </CardHeader>
-          {/* data-axe-open: check-frame-axe opens the searchable panel before scanning. */}
-          <CardContent data-axe-open>
+          <CardContent>
             <FormField
               id="searchable-invalid"
               label="担当拠点"