@godxjp/ui 21.0.0 → 23.0.0

package/docs/CUSTOMER-THEMING.md

@@ -56,7 +56,13 @@ overwrites `--font-sans-base` (and `--font-sans-vi`) with the bundled stack —
 Noto Sans JP + Montserrat; v18.12.0–18.12.19 bundled M PLUS 2 + Noto Sans JP;
 v18.12.20+ bundles Noto Sans JP + M PLUS 2 (product override, direct
 instruction). If your design spec named an earlier bundle's faces, set the
-tokens yourself rather than relying on the bundle.) Headings read
+tokens yourself rather than relying on the bundle.) Second in that stack is
+`"Noto Sans JP Fallback"`: local faces (Arial / Liberation Sans for Latin, the
+platform's gothic face for Japanese) with `size-adjust` and ascent/descent
+overrides tuned to Noto Sans JP. The bundled faces are `font-display: swap`, so
+a cold visit paints in this fallback first; because it occupies the same line
+boxes and nearly the same advances, the swap does not reflow the page (#475).
+If you restate the stack yourself, keep it directly after "Noto Sans JP". Headings read
 `--font-family-display` and body reads `--font-family-body`, both defaulting to
 `--font-family-sans` — override them for a dual-font (display + body) brand.
 

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: **141**
-- With ≥1 frame: **136** · zero-frame: **5**
+- Public components: **135**
+- With ≥1 frame: **130** · zero-frame: **5**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -60,7 +60,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | QrCode | ✓ | ✓ | N/A | · | · | · | · | · | · | · |
 | Descriptions | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | EmptyState | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
-| Progress | ✓ | ✓ | N/A | · | · | · | · | · | · | · |
+| Progress | ✓ | · | N/A | · | · | · | · | · | · | · |
 | CodeBlock | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Prose | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Timeline | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
@@ -74,14 +74,12 @@ 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 | · | · | · | · | · | · |
 | Checkbox | ✓ | N/A | · | · | · | · | · | · | · | · |
 | RadioGroup | ✓ | N/A | · | · | · | · | · | · | · | · |
-| MonthPicker | ✓ | · | · | · | · | · | · | · | · | · |
-| MonthRangePicker | ✓ | · | · | · | · | · | · | · | · | · |
 | DatePicker | ✓ | · | · | · | · | · | · | · | · | · |
 | Dialog | ✓ | N/A | N/A | · | · | · | · | · | · | · |
 | AlertDialog | ✓ | ✓ | · | · | · | · | · | · | · | · |
@@ -93,13 +91,12 @@ 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 | ✓ | · | · | · | · | · | · | · | · | · |
 | formatDate | ✓ | · | · | · | · | · | · | · | · | · |
 | TimePicker | ✓ | · | · | · | · | · | · | · | · | · |
-| DateRangePicker | ✓ | · | · | · | · | · | · | · | · | · |
 | Cascader | ✓ | ✓ | · | · | · | · | · | · | · | · |
 | TreeSelect | ✓ | ✓ | · | · | · | · | · | · | · | · |
 | Transfer | ✓ | N/A | · | · | · | · | · | · | · | · |
@@ -131,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/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

@@ -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
@@ -140,6 +166,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";
 
@@ -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>
@@ -209,6 +206,47 @@ 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-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-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>