@godxjp/ui 22.0.0 → 23.0.0

package/dist/tokens/components/data-display.css

@@ -93,11 +93,6 @@
   --qr-code-size-md: 10rem;
   --qr-code-size-lg: 12.5rem;
 
-  --scroll-area-bar-size: 0.625rem;
-
-  --scroll-area-bar-padding: 1px;
-  --scroll-area-thumb-radius: var(--radius-pill);
-
   --timeline-grid-hour-height: 2.5rem;
   --timeline-grid-axis-width: 3.25rem;
   --timeline-grid-column-min-width: 6rem;

package/dist/tokens/components/navigation.css

@@ -37,7 +37,7 @@
   --breadcrumb-font-size: var(--font-size-xs);
 
   --breadcrumb-menu-trigger-gap: var(--space-inline-xs);
-  --menubar-shortcut-font-size: var(--font-size-xs);
+  --menu-shortcut-font-size: var(--font-size-xs);
   --tabs-list-max-inline-size: 100%;
   --tabs-list-overflow: auto;
 
@@ -89,8 +89,8 @@
   --tabs-tab-remove-icon-size: var(--icon-size-xs);
   --tabs-tab-remove-space-inline-end: var(--space-1);
 
-  --menubar-item-hover-background: initial;
-  --menubar-item-hover-foreground: initial;
+  --menu-item-hover-background: initial;
+  --menu-item-hover-foreground: initial;
 
   --filter-bar-sticky-offset: 0px;
 
@@ -128,8 +128,6 @@
   --menu-separator-space-block: var(--space-1);
   --menu-separator-space-inline: calc(var(--space-1) * -1);
 
-  --navigation-menu-trigger-icon-size: var(--icon-size-sm);
-
   --steps-dot-size: 0.625rem;
   --steps-dot-process-ring-width: var(--stroke-xl);
   --steps-marker-border-width: var(--stroke-md);

package/dist/tokens/components/scroll-area.css

@@ -1,5 +1,12 @@
 
 :root {
 
+  --scroll-area-scrollbar-width: thin;
+
+  --scroll-area-thumb-color: initial;
+  --scroll-area-track-color: initial;
+
+  --scroll-area-scrollbar-space: auto;
+
   --scroll-area-anchor-offset: 3rem;
 }

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: **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/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

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-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.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="担当拠点"

package/docs/data-entry/select.tsx

@@ -21,7 +21,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@godxjp/ui/data-entry";
+import { Button } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { X } from "lucide-react";
 
 /**
  * Select — the single-select control. Prefer the data-driven `options` API
@@ -38,6 +40,12 @@ export default function Demo() {
   const [reviewerAsync, setReviewerAsync] = useState("tanaka");
   const [reviewerCustom, setReviewerCustom] = useState("tanaka");
   const [reviewerLabel, setReviewerLabel] = useState("tanaka");
+  const [prefixed, setPrefixed] = useState("JPY");
+  const [tags, setTags] = useState<string[]>(["至急", "社内便"]);
+  // antd `labelInValue`: the record arrives carrying its own label, before any option list loads.
+  const [assignedTo, setAssignedTo] = useState<
+    { value: string; label: React.ReactNode } | undefined
+  >({ value: "52", label: "東京本社" });
 
   const people = [
     { value: "tanaka", label: "田中 太郎", sublabel: "tanaka@example.com" },
@@ -82,9 +90,7 @@ export default function Demo() {
               Pass an options array; name= submits the value with the form.
             </CardDescription>
           </CardHeader>
-          {/* data-axe-open: check-frame-axe opens this Select before scanning, so the
-              overlay-open a11y state is measured. See docs/FRAME-A11Y-CI.md. */}
-          <CardContent data-axe-open>
+          <CardContent>
             <FormField id="status" label="状態">
               <Select
                 id="status"
@@ -392,6 +398,105 @@ export default function Demo() {
             </FormField>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              Ant Design 6 · prefix・suffixIcon・placement・listHeight
+            </CardTitle>
+            <CardDescription>
+              グループは options のネスト（{`{ label, options }`}）でも、行の group
+              でも同じ一覧になります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="prefixed" label="通貨">
+              <Select
+                id="prefixed"
+                name="currency_prefixed"
+                value={prefixed}
+                onValueChange={setPrefixed}
+                prefix={<Badge tone="muted">¥</Badge>}
+                placement="bottomEnd"
+                listHeight={220}
+                options={[
+                  {
+                    label: "アジア",
+                    options: [
+                      { value: "JPY", label: "日本円" },
+                      { value: "VND", label: "ベトナムドン" },
+                    ],
+                  },
+                  {
+                    label: "ヨーロッパ",
+                    options: [{ value: "EUR", label: "ユーロ" }],
+                  },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>mode=&quot;tags&quot; · tokenSeparators・tagRender</CardTitle>
+            <CardDescription>
+              一覧にない値も入力できます。カンマ区切りの貼り付けは一度にまとめて確定します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="tags" label="ラベル">
+              <Select
+                id="tags"
+                name="labels[]"
+                mode="tags"
+                value={tags}
+                onValueChange={setTags}
+                tokenSeparators={[",", "\n"]}
+                maxTagTextLength={6}
+                options={[
+                  { value: "至急", label: "至急" },
+                  { value: "要確認", label: "要確認" },
+                ]}
+                tagRender={({ label, onClose }) => (
+                  <Badge tone="info">
+                    {label}
+                    <Button
+                      variant="ghost"
+                      size="icon-xs"
+                      aria-label={`${String(label)} を外す`}
+                      onClick={onClose}
+                    >
+                      <X aria-hidden="true" />
+                    </Button>
+                  </Badge>
+                )}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>labelInValue · 読み込み前でも名前が出る</CardTitle>
+            <CardDescription>
+              値が {`{ value, label }`} を持つので、選択肢がまだ届いていなくても ID
+              ではなく名前を表示できます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="assigned" label="担当拠点">
+              <Select
+                id="assigned"
+                name="office_id"
+                labelInValue
+                value={assignedTo}
+                onValueChange={setAssignedTo}
+                notFoundContent="拠点を読み込み中"
+                options={[]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );