@godxjp/ui 21.0.0 → 22.0.0

package/docs/TOKENS.md

@@ -44,6 +44,71 @@ src/styles/
 
 Default brand tokens use the GodX Agent Portal palette: navy primary, 朱 orange focus/accent, warm neutral surfaces. App or customer identity colors belong in the consuming app theme, not in package tokens.
 
+#### The three tone tiers — FILL, TEXT, MARK
+
+A status tone can be painted three ways, and each way is judged against a different thing. Reading
+the wrong tier is this palette's most expensive recurring bug, because nothing about it looks wrong
+in the source.
+
+| Tier     | Tokens                                      | What it paints                                                     | Contrast bar                                              |
+| -------- | ------------------------------------------- | ------------------------------------------------------------------ | --------------------------------------------------------- |
+| **FILL** | `--success`, `--warning`, `--info`, `--destructive` | A solid chip, band or bar with a label ON it                        | AA **4.5:1** against its own `*-foreground` label          |
+| **TEXT** | `--text-success`, `--text-warning`, `--text-info`, `--text-error` | Small coloured type — a StatCard delta, an outline badge label      | AA **4.5:1** against the surface BEHIND it                 |
+| **MARK** | `--mark-success`, `--mark-warning`, `--mark-info`, `--mark-destructive`, `--mark-primary`, `--mark-attention` | A thin shape carrying meaning with nothing written on it — a `Card accent` rail, a `DataTable rowTone` rail | SC 1.4.11 **3:1** against the surface it sits on |
+
+The MARK tier exists because both rails were reading FILL, and two of them were effectively
+invisible. Measured in Chromium on the light card: `Card accent="warning"` drew its 6px rail at
+**1.74:1**, `accent="success"` at **2.18:1**. `--warning` is a bright 山吹 tuned to carry dark text
+on top of it; on a near-white card it is barely a colour at all.
+
+`--mark-*` resolve THROUGH the TEXT tier rather than restating its numbers, so a theme retunes one
+place and both follow — and since 3:1 is looser than 4.5:1, anything legible as text is legible as
+a mark by construction. `--mark-attention` is the exception: there is no `--text-attention`, and
+the fill already clears the floor in both themes (3.32 / 6.75).
+
+Two guards, because one was not enough:
+`src/tokens/__tests__/tone-mark-contrast.test.ts` recomputes every tone × ground × theme off the
+committed tokens and reads the alias out of the CSS (so repointing a mark back at FILL fails the
+ratio, not just a name check); and `check:contrast` grew a **rail pass** — its graphic pass only
+ever measured elements ≤24px on both axes, and a rail is 6px by the full height of a card, so no
+gate had ever looked at one.
+
+**Progress and Legend joined the tier, and the wa-iro question is settled.** `.ui-legend-swatch`,
+`.ui-progress-bar` and `.ui-progress-segment` all read FILL as standalone graphics and all failed
+the same floor. The floor applies: nothing is written on a progress fill, so *where the colour
+stops* is the entire datum, and a slice of a partition carries its share of the whole with no words
+on it — that is precisely a "graphical object required to understand the content". The hue loses.
+The two moved together because a swatch is a SAMPLE of the bar beside it; a key that is not the
+colour it is a key to is not a key.
+
+| surface | tone | ground | FILL (before) | MARK (after) |
+| --- | --- | --- | --- | --- |
+| `.ui-legend-swatch` | warning | light card | **1.74** | **5.90** |
+| `.ui-legend-swatch` | success | light card | **2.18** | **6.84** |
+| `.ui-legend-swatch` | destructive | dark card | **2.95** | **5.52** |
+| `.ui-progress-segment` | warning | light track | **1.60** | **5.41** |
+| `.ui-progress-segment` | success | light track | **2.00** | **6.28** |
+| `.ui-progress-segment` | destructive | dark track | **2.42** | **4.52** |
+
+Worst case anywhere on the two routes after the move: **4.52:1**. `.ui-progress-bar` (meter and
+over-capacity) reads the same tokens as the slice, so a `tone="warning"` meter and a `warning`
+slice on one screen stay the same colour.
+
+**A theme that repoints `--secondary` owes `--progress-track-background`.** The track defaults to
+`hsl(var(--secondary))`, which is a pale neutral in the stock palette. `docs/showcase/acme-portal`
+repurposes `--secondary` as a navy *button* colour, so its bars were drawn on a near-black track
+and the mark fills measured 2.50 (success) / 2.90 (warning) on it. Naming the track explicitly is
+the fix — 6.49 / 5.59 after — not dragging the tier back.
+
+Three guards now, and each sees something the others cannot: the ratio tests in
+`tone-mark-contrast.test.ts` (rails against card/background, progress marks against the track);
+the *same file's* CSS-alias assertions, which fail if a rule is repointed at the fill tier and
+which also pin the swatch and the slice to the **same** token per tone; and `check:contrast`'s
+**thin fill** pass — added because adding `/isolate/data-display-progress` to that gate's route
+list on its own changed nothing at all. The graphic pass wants ≤24px on both axes and the rail
+pass wants a one-sided border; a progress fill is 8px (meter) or 22px (slice) tall by whatever
+width its share makes it, so the sweep printed "AA clean" over a bar sitting at 1.60:1.
+
 #### `--border` vs `--input` — decorative chrome vs control boundary (gh#315)
 
 These two look like synonyms and are not. Keep them apart:

package/docs/data-display/badge.tsx

@@ -262,6 +262,43 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>tabular · 数字を桁で揃える</CardTitle>
+            <CardDescription>
+              件数のチップが縦に並ぶときは tabular を。プロポーショナル数字だと 1 が 0
+              より狭いので、列で見たときに桁がずれてチップ幅も揺れます。既定はオフ — 語を載せる
+              チップまで幅の広い数字を払う必要はありません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="lg">
+              <Flex direction="col" align="start" gap="xs">
+                <Text size="xs" tone="muted">
+                  既定（比例数字）
+                </Text>
+                <Badge tone="info">11</Badge>
+                <Badge tone="info">100</Badge>
+                <Badge tone="warning">1811</Badge>
+              </Flex>
+              <Flex direction="col" align="start" gap="xs">
+                <Text size="xs" tone="muted">
+                  tabular
+                </Text>
+                <Badge tone="info" tabular>
+                  11
+                </Badge>
+                <Badge tone="info" tabular>
+                  100
+                </Badge>
+                <Badge tone="warning" tabular>
+                  1811
+                </Badge>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Icon overrides</CardTitle>

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

@@ -140,6 +140,24 @@ export default function Demo() {
             getRowId={(row) => row.id}
           />
         </Flex>
+        {/* Row TONE — the leading-edge rail + wash for a row in a named state. The status Badge
+            stays in its own cell: the rail makes the row findable, it does not carry the meaning
+            (WCAG 1.4.1). */}
+        <Flex direction="col" gap="sm" id="row-tone">
+          <Text weight="medium">行のトーン（要対応の行）</Text>
+          <DataTable
+            data={invoices}
+            columns={columns}
+            getRowId={(row) => row.id}
+            rowTone={(row) =>
+              row.status === "failed"
+                ? "destructive"
+                : row.status === "pending"
+                  ? "attention"
+                  : undefined
+            }
+          />
+        </Flex>
         {/* Primary: sorted (amount desc), one row preselected, clickable rows,
             controlled density (comfortable), kebab row actions, pagination footer. */}
         <DataTable

package/docs/data-display/popover.tsx

@@ -15,7 +15,7 @@ import {
   PopoverTrigger,
 } from "@godxjp/ui/data-display";
 import { Checkbox, FormField, Input, Label } from "@godxjp/ui/data-entry";
-import { Button } from "@godxjp/ui/general";
+import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { Info, SlidersHorizontal } from "lucide-react";
 
@@ -209,6 +209,46 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>width · パネルの測り方</CardTitle>
+            <CardDescription>
+              既定の panel は --popover-width（18rem）。auto は中身に測らせます — 自前の幅を持つもの
+              （Calendar、チャート、固定幅のプレビュー）はこれ以外に正解がありません。trigger
+              はアンカーに合わせます。className に w-* を書くのは呼び出し側の定数で、どのテーマからも
+              retune できません。flush が padding 側で避けているのと同じ話です。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap gap="sm">
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline">panel（既定）</Button>
+                </PopoverTrigger>
+                <PopoverContent aria-label="既定の幅">
+                  <Text size="sm">18rem のパネル幅。散文や、パネル自身が測るリスト向け。</Text>
+                </PopoverContent>
+              </Popover>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline">auto</Button>
+                </PopoverTrigger>
+                <PopoverContent width="auto" aria-label="内容に合わせた幅">
+                  <Text size="sm">中身が幅を決めます。</Text>
+                </PopoverContent>
+              </Popover>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline">trigger に合わせる</Button>
+                </PopoverTrigger>
+                <PopoverContent width="trigger" aria-label="トリガーと同じ幅">
+                  <Text size="sm">アンカーと同じ幅。</Text>
+                </PopoverContent>
+              </Popover>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Modal</CardTitle>

package/docs/data-display/progress.tsx

@@ -33,6 +33,34 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>shape=&quot;ring&quot;</CardTitle>
+            <CardDescription>
+              同じメーターを弧で描きます。バーと同じ value / tone / size / ARIA
+              のまま、label がリングの内側に入ります。狭いアプリバーで「18 / 42
+              件」を見出しの横に出したいとき、バー＋キャプションの 2
+              段ではなく 1 マスで済むのが理由です。数値が重要なときではなく、
+              場所が正方形のときに選びます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap align="center" gap="lg">
+              {/* label はリング内の表示であり、同時に読み上げ名でもあります。「何の 18/42 か」を
+                  名前にしたいときは、画面にすでにある見出しを aria-labelledby で指します
+                  — bar と同じ規約です。 */}
+              <Progress shape="ring" value={43} label="18/42" />
+              <Progress shape="ring" value={43} size="sm" label="18/42" />
+              <Progress shape="ring" value={0} label="0/42" />
+              <Progress shape="ring" value={100} label="42/42" />
+              <Progress shape="ring" value={62} tone="warning" label="26/42" />
+              <Progress shape="ring" value={88} tone="destructive" label="37/42" />
+              {/* label なし＝読み出しのないリング。名前は aria-label から。 */}
+              <Progress shape="ring" value={43} aria-label="実施済みの点検" />
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Breakdown（segments）</CardTitle>

package/docs/data-entry/calendar.tsx

@@ -20,7 +20,7 @@ import type { DateRange } from "react-day-picker";
 /**
  * Calendar — styled react-day-picker grid for single, multiple, or range
  * selection. Embed inside a Popover for picker UX; use DatePicker /
- * DateRangePicker for form-submittable inputs instead. Composed only from
+ * `DatePicker range` for form-submittable inputs instead. Composed only from
  * real @godxjp/ui components.
  */
 export default function Demo() {
@@ -71,7 +71,7 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>範囲選択 · Popover 内</CardTitle>
             <CardDescription>
-              mode="range" でポップオーバー内に配置。DateRangePicker
+              mode="range" でポップオーバー内に配置。DatePicker range
               はこのパターンにフォーム送信を加えた上位コンポーネント。
             </CardDescription>
           </CardHeader>

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

@@ -4,11 +4,14 @@ import { ja } from "date-fns/locale";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { DatePicker, FormField } from "@godxjp/ui/data-entry";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
+import type { DateRange } from "react-day-picker";
 
 /**
- * DatePicker — WAI-ARIA date combobox with a real typeable ISO-8601 input.
- * Always give it a `name` for form submission. Use `fromDate`/`toDate` to
- * constrain the selectable range. Never hand-roll a date input + calendar.
+ * DatePicker — ONE date control. `picker` sets the granularity (day · week · month · quarter ·
+ * year), `range` turns it into a two-endpoint field, `multiple` into a set. Always give it a
+ * `name` for form submission; it emits ISO-8601 at the picker's own precision. Use
+ * `minDate`/`maxDate` to constrain what is selectable. Never hand-roll a date input + calendar,
+ * and never compose two DatePickers side-by-side to fake a range — that is `range`.
  * Composed only from real @godxjp/ui components.
  */
 export default function Demo() {
@@ -17,6 +20,11 @@ export default function Demo() {
   const [closingDate, setClosingDate] = useState<Date | undefined>(undefined);
   const [meetingDate, setMeetingDate] = useState<Date | undefined>(new Date(2026, 5, 25));
   const [settlementDate, setSettlementDate] = useState<Date | undefined>(undefined);
+  const [period, setPeriod] = useState<DateRange | undefined>({
+    from: new Date(2026, 3, 1),
+    to: new Date(2027, 2, 31),
+  });
+  const [term, setTerm] = useState<DateRange | undefined>(undefined);
 
   return (
     <PageContainer
@@ -271,6 +279,138 @@ export default function Demo() {
             </FormField>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>期間 (range)</CardTitle>
+            <CardDescription>
+              range を付けると値は DateRange になり、開始/終了の 2 入力を 1
+              つのコントロールにまとめる。 name=&#34;period&#34; は period_from / period_to として
+              ISO 送信される。 開始 &gt; 終了で入力しても order (既定 true) が昇順に正規化する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent data-axe-open>
+            <FormField id="period" label="会計期間" required>
+              <DatePicker
+                range
+                id="period"
+                name="period"
+                value={period}
+                onValueChange={setPeriod}
+                minDate={new Date(2020, 0, 1)}
+                maxDate={new Date(2030, 11, 31)}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>月次の期間 (range × picker)</CardTitle>
+            <CardDescription>
+              range と picker は直交する。picker=&#34;month&#34; の期間は月グリッドで選び、
+              term_from / term_to を ISO yyyy-MM で送信する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="term" label="対象期間">
+              <DatePicker
+                range
+                picker="month"
+                id="term"
+                name="term"
+                value={term}
+                onValueChange={setTerm}
+                minDate={new Date(2024, 0, 1)}
+                maxDate={new Date(2027, 11, 31)}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>期間プリセットと確定</CardTitle>
+            <CardDescription>
+              presets · needConfirm · allowEmpty は range でも同じ綴りで効く。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="preset-range" label="集計期間">
+              <DatePicker
+                range
+                id="preset-range"
+                name="report"
+                format="yyyy/MM/dd"
+                needConfirm
+                allowEmpty={[false, true]}
+                showWeek
+                minDate={new Date(2026, 0, 1)}
+                maxDate={new Date(2026, 11, 31)}
+                presets={[
+                  {
+                    label: "9月",
+                    value: () => ({ from: new Date(2026, 8, 1), to: new Date(2026, 8, 30) }),
+                  },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>パネルの初期表示 (defaultPickerValue)</CardTitle>
+            <CardDescription>
+              値とは独立に「パネルがどの期間を開くか」を指定する。会計年度の開始月で開く、
+              編集中の行の月で開く、といった要求はこれでしか表現できない。antd と同じく
+              開くたびに再適用される。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="fiscal-open" label="会計年度開始月">
+              <DatePicker
+                id="fiscal-open"
+                name="fiscal_open"
+                picker="month"
+                defaultPickerValue={new Date(2027, 3, 1)}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>片側だけ固定した期間</CardTitle>
+            <CardDescription>
+              range のとき disabled は [from, to] のタプルを取り、片方だけロックできる。
+              「開始日は契約で確定、終了日だけ交渉中」がこれで表現できる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="contract-period" label="契約期間">
+              <DatePicker
+                range
+                id="contract-period"
+                name="contract_period"
+                defaultValue={{ from: new Date(2026, 3, 1), to: new Date(2027, 2, 31) }}
+                disabled={[true, false]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>disabled な期間</CardTitle>
+            <CardDescription>確定済み期間や読み取り専用フィールドに使用。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="locked-period" label="確定期間">
+              <DatePicker
+                range
+                id="locked-period"
+                name="locked_period"
+                value={{ from: new Date(2025, 3, 1), to: new Date(2026, 2, 31) }}
+                disabled
+              />
+            </FormField>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-entry/form/examples/invoice-form.tsx

@@ -3,7 +3,6 @@ import { useState } from "react";
 import {
   Cascader,
   DatePicker,
-  DateRangePicker,
   Field,
   Form,
   FormField,
@@ -294,7 +293,8 @@ export default function Demo() {
                     />
                   </FormField>
                   <FormField id="iv-period" label="対象期間">
-                    <DateRangePicker
+                    <DatePicker
+                      range
                       id="iv-period"
                       name="period"
                       value={v.period}

package/docs/data-entry/form-field/examples/a11y-contract.tsx

@@ -5,11 +5,9 @@ import {
   CheckboxGroup,
   ColorPicker,
   DatePicker,
-  DateRangePicker,
   Form,
   FormField,
   Input,
-  MonthPicker,
   RadioGroup,
   SearchInput,
   Select,
@@ -129,14 +127,14 @@ export default function Demo() {
               <FormField id="ac-date" label="取引日" helper="yyyy-MM-dd">
                 <DatePicker id="ac-date" name="date" />
               </FormField>
-              <FormField id="ac-month" label="対象月" helper="yyyy/MM">
-                <MonthPicker id="ac-month" name="month" />
+              <FormField id="ac-month" label="対象月" helper="yyyy-MM">
+                <DatePicker picker="month" id="ac-month" name="month" />
               </FormField>
               <FormField id="ac-time" label="締め時刻" helper="24時間表記">
                 <TimePicker id="ac-time" name="time" />
               </FormField>
               <FormField id="ac-period" label="対象期間" helper="開始日と終了日">
-                <DateRangePicker id="ac-period" name="period" />
+                <DatePicker range id="ac-period" name="period" />
               </FormField>
               <FormField id="ac-color" label="タグ色" helper="16進カラー">
                 <ColorPicker id="ac-color" onValueChange={() => {}} />

package/docs/data-entry/form.tsx

@@ -5,7 +5,6 @@ import {
   Checkbox,
   CheckboxGroup,
   DatePicker,
-  DateRangePicker,
   Field,
   Form,
   FormErrors,
@@ -425,7 +424,7 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>日時系 · DatePicker / DateRangePicker / TimePicker</CardTitle>
+            <CardTitle level={2}>日時系 · DatePicker / DatePicker range / TimePicker</CardTitle>
             <CardDescription>
               単一日付・期間・時刻。ISO-8601 / IANA タイムゾーンに準拠し locale
               連動でフォーマットする。
@@ -483,12 +482,13 @@ export default function Demo() {
                 />
               </FormField>
               <FormField id="f-period" label="会計期間" colSpan={2}>
-                <DateRangePicker
+                <DatePicker
+                  range
                   id="f-period"
                   name="period"
                   value={period}
                   onValueChange={setPeriod}
-                  // 土日は選べない。fromDate/toDate では表せない規則。
+                  // 土日は選べない。minDate/maxDate では表せない規則。
                   disabledDate={(date) => date.getDay() === 0 || date.getDay() === 6}
                 />
               </FormField>

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

@@ -223,6 +223,37 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* prefix / suffix — all THREE combinations, because the two-affix case is the only one
+            that used to be exercised and the suffix-only one is where the bug lived. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>prefix · suffix · 単位つきの数値</CardTitle>
+            <CardDescription>
+              通貨記号や単位はフィールドの内側に重ねる装飾。読み上げからは外れる (aria-hidden)
+              ので、意味は必ずラベル側に置く。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md" id="number-input-affixes">
+              <FormField id="ni-prefix" label="金額（前置き）">
+                <NumberInput id="ni-prefix" prefix="¥" defaultValue={1980} aria-label="金額" />
+              </FormField>
+              <FormField id="ni-suffix" label="日数（後置き）">
+                <NumberInput id="ni-suffix" suffix="日" defaultValue={7} aria-label="日数" />
+              </FormField>
+              <FormField id="ni-both" label="率（前後）">
+                <NumberInput
+                  id="ni-both"
+                  prefix="+"
+                  suffix="%"
+                  defaultValue={12}
+                  aria-label="率"
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <Heading level={2}>キーボード操作</Heading>

package/docs/data-entry/segmented.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { FormField, Segmented } from "@godxjp/ui/data-entry";
-import { Text } from "@godxjp/ui/general";
+import { Text, VisuallyHidden } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { CalendarDays, Columns3, LayoutList, Monitor, Moon, Sun } from "lucide-react";
 
@@ -84,6 +84,108 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>size · vertical · block</CardTitle>
+            <CardDescription>
+              size は 3 段（sm / md / lg）。トラックの高さは --control-height そのもので、
+              MobileShell のようにその変数をスコープする領域では自動的にタッチ段（44px）になります。
+              vertical では 1 行ぶんが 1 コントロールの高さになります — 横 1 行のときだけトラック
+              内側の余白を引くので、積んだときは引きません。block は幅いっぱいに広げます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md" align="start">
+              <Segmented
+                aria-label="サイズ sm"
+                size="sm"
+                defaultValue="a"
+                options={[
+                  { value: "a", label: "小" },
+                  { value: "b", label: "中" },
+                  { value: "c", label: "大" },
+                ]}
+              />
+              <Segmented
+                aria-label="サイズ md"
+                defaultValue="b"
+                options={[
+                  { value: "a", label: "小" },
+                  { value: "b", label: "中" },
+                  { value: "c", label: "大" },
+                ]}
+              />
+              <Segmented
+                aria-label="サイズ lg"
+                size="lg"
+                defaultValue="c"
+                options={[
+                  { value: "a", label: "小" },
+                  { value: "b", label: "中" },
+                  { value: "c", label: "大" },
+                ]}
+              />
+              <Segmented
+                aria-label="縦積み"
+                vertical
+                block
+                defaultValue="ok"
+                options={[
+                  { value: "ok", label: "実施" },
+                  { value: "warn", label: "要改善" },
+                  { value: "none", label: "未実施" },
+                ]}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>短い記号を出して、長い名前を読ませる</CardTitle>
+            <CardDescription>
+              `label` は ReactNode なので、見える記号を aria-hidden にして VisuallyHidden に
+              読み上げ名を置けます。専用の prop は要りません。○ と読み上げられても意味が伝わらない
+              ため、色や記号だけに意味を持たせないという WCAG 1.4.1 の要求そのものです。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Segmented
+              aria-label="監査結果"
+              defaultValue="ok"
+              options={[
+                {
+                  value: "ok",
+                  label: (
+                    <>
+                      <span aria-hidden="true">○</span>
+                      <VisuallyHidden>実施</VisuallyHidden>
+                    </>
+                  ),
+                },
+                {
+                  value: "warn",
+                  label: (
+                    <>
+                      <span aria-hidden="true">△</span>
+                      <VisuallyHidden>要改善</VisuallyHidden>
+                    </>
+                  ),
+                },
+                {
+                  value: "none",
+                  label: (
+                    <>
+                      <span aria-hidden="true">×</span>
+                      <VisuallyHidden>未実施</VisuallyHidden>
+                    </>
+                  ),
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>フォームの中で</CardTitle>