@godxjp/ui 32.4.3 → 32.6.0

package/agent/patterns.json

@@ -1,6 +1,6 @@
 [
   {
-    "code": "// ───────────────────────────────────────────────────────────────────────\n// 0) ★ MOST COMMON: <Card> body has NO padding (content is flush against the edges)\n//    Cause: the bare <Card> has ZERO inner padding — it MUST contain <CardContent>.\n//    Don't hand-roll padding with className=\"p-4\" on the Card either.\n// ❌  <Card><Flex direction=\"col\" gap=\"md\">…fields…</Flex></Card>   // flush, no padding\n// ❌  <Card className=\"p-4\">…fields…</Card>                          // hand-rolled padding\n// ✅  <Card><CardContent><Flex direction=\"col\" gap=\"md\">…fields…</Flex></CardContent></Card>\n//    Titles → <CardHeader><CardTitle>. Only go flush deliberately for a full-bleed table:\n// ✅  <Card><CardContent flush><DataTable/></CardContent></Card>\n//    GENERAL RULE — compose godx-ui primitives FULLY; never hand-roll what one ships:\n//      padding → CardContent (not p-4) · controls → Input/Select/Button (not raw <input>/<select>/<button>)\n//      vertical spacing → Flex direction=\"col\" gap (not space-y-*) · empty rows → DataTable's built-in\n//      empty / <EmptyState> (not a custom data.length===0 guard). If a primitive exists, USE it.\n\n// 1) StatCard shows a DOUBLE border (too thick)\n//    Cause: StatCard IS already a bordered Card. Don't wrap it.\n// ❌  <Card><CardContent><StatCard label=\"x\" value=\"1\" /></CardContent></Card>\n// ✅  <ResponsiveGrid columns={4}><StatCard label=\"x\" value=\"1\" /></ResponsiveGrid>\n//    Need a section title? Use a heading, NOT a Card:\n// ✅  <Flex direction=\"col\" gap=\"sm\"><div className=\"text-sm font-medium\">KPI</div>\n//        <ResponsiveGrid columns={4}><StatCard .../></ResponsiveGrid></Flex>\n\n// 2) Badge renders grey with a ○ (no colour) for localized/tier labels\n//    Cause: it auto-maps only English lifecycle keys.\n// ❌  <Badge status=\"プレミアム\" />\n// ✅  <Badge status=\"プレミアム\" tone=\"success\" icon={null} />   // tier → pill, no icon\n// ✅  <Badge status=\"active\">公開中</Badge>                       // lifecycle → keep icon\n\n// 3) Table text collapses to one char per line, or a chip wraps\n// ✅  give long columns a width:  { key: \"name\", header: \"氏名\", width: \"w-64\" }\n//    (cells + chips are pinned white-space: nowrap by the library.)\n\n// 4) Empty (icon/action) column header shows a blank grey block\n// ✅  header: \"\" renders a transparent cell — leave it empty, don't inject a space.\n\n// 5) DataTable columns are crushed / squeezed\n//    Cause: the table is nested in a narrow grid column.\n// ❌  <ResponsiveGrid columns={3}><div className=\"lg:col-span-2\"><Card><DataTable/></Card></div></ResponsiveGrid>\n// ✅  Table gets its OWN full-width row: <Card><CardContent flush><DataTable/></CardContent></Card>\n\n// 6) Toolbar (filter bar) has no padding (sticks to the edge)\n//    Cause: it's inside CardContent flush (flush strips padding — that's for tables).\n// ❌  <Card><CardContent flush><Toolbar/><DataTable/></CardContent></Card>\n// ✅  <Toolbar/>  then  <Card><CardContent flush><DataTable/></CardContent></Card>\n\n// 7) Sidebar footer looks washed-out / off-design\n//    Cause: raw opacity-*/text-[11px]. Use semantic tokens.\n// ✅  <div className=\"text-muted-foreground text-xs\">\n//        <div className=\"text-foreground font-medium\">{name}</div><div>{role}</div></div>\n\n// 8) Inertia: \"Objects are not valid as a React child {errors, auth, …}\"\n//    Cause: persistent layout passed as a render fn. Use the ARRAY form.\n// ❌  Page.layout = (page) => <Layout>{page}</Layout>\n// ✅  Page.layout = [Layout]            // Layout is ({children}) => ...\n\n// 9) Inertia v3 hydration mismatch (\"server rendered text didn't match the client\")\n//    Cause: Math.random()/argless new Date() during render (SSR ≠ client).\n// ✅  seed deterministically by index, or compute in an event handler.\n\n// 10) Hide a column on mobile / sign-aware KPI delta\n// ✅  columns: [{ key: \"email\", header: \"メール\", hiddenOnMobile: true }]\n// ✅  <StatCard label=\"売上\" value=\"¥8.2M\" delta=\"+12%\" />   // + green / - red; inverse flips",
+    "code": "// ───────────────────────────────────────────────────────────────────────\n// 0) ★ MOST COMMON: <Card> body has NO padding (content is flush against the edges)\n//    Cause: the bare <Card> has ZERO inner padding — it MUST contain <CardContent>.\n//    Don't hand-roll padding with className=\"p-4\" on the Card either.\n// ❌  <Card><Flex direction=\"col\" gap=\"md\">…fields…</Flex></Card>   // flush, no padding\n// ❌  <Card className=\"p-4\">…fields…</Card>                          // hand-rolled padding\n// ✅  <Card><CardContent><Flex direction=\"col\" gap=\"md\">…fields…</Flex></CardContent></Card>\n//    Titles → <CardHeader><CardTitle>. Only go flush deliberately for a full-bleed table:\n// ✅  <Card><CardContent flush><DataTable/></CardContent></Card>\n//    GENERAL RULE — compose godx-ui primitives FULLY; never hand-roll what one ships:\n//      padding → CardContent (not p-4) · controls → Input/Select/Button (not raw <input>/<select>/<button>)\n//      vertical spacing → Flex direction=\"col\" gap (not space-y-*) · empty rows → DataTable's built-in\n//      empty / <EmptyState> (not a custom data.length===0 guard). If a primitive exists, USE it.\n\n// 1) StatCard shows a DOUBLE border (too thick)\n//    Cause: StatCard IS already a bordered Card. Don't wrap it.\n// ❌  <Card><CardContent><StatCard label=\"x\" value=\"1\" /></CardContent></Card>\n// ✅  dashboard only, with comparison/trend:\n//     <ResponsiveGrid columns={4}><StatCard label=\"売上\" value=\"¥8.2M\" delta=\"+12%\" /></ResponsiveGrid>\n//    A list or detail page has NO StatCard row — a row count is not a KPI (Pagination showTotal).\n\n// 2) Badge renders grey with a ○ (no colour) for localized/tier labels\n//    Cause: it auto-maps only English lifecycle keys.\n// ✅  <Badge status=\"active\">公開中</Badge>                       // lifecycle → keep icon\n// ✅  <Badge status=\"プレミアム\" tone=\"neutral\" icon={null} />   // tier → ONE neutral tone\n//    Colour is for status only; a tier/category/scope is plain text or a neutral pill.\n\n// 3) Table text collapses to one char per line, or a chip wraps\n// ✅  give long columns a width:  { key: \"name\", header: \"氏名\", width: \"w-64\" }\n//    (cells + chips are pinned white-space: nowrap by the library.)\n\n// 4) Empty (icon/action) column header shows a blank grey block\n// ✅  header: \"\" renders a transparent cell — leave it empty, don't inject a space.\n\n// 5) DataTable columns are crushed / squeezed\n//    Cause: the table is nested in a narrow grid column.\n// ❌  <ResponsiveGrid columns={3}><div className=\"lg:col-span-2\"><Card><DataTable/></Card></div></ResponsiveGrid>\n// ✅  Table gets its OWN full-width row: <Card><CardContent flush><DataTable/></CardContent></Card>\n\n// 6) Toolbar (filter bar) has no padding (sticks to the edge)\n//    Cause: it's inside CardContent flush (flush strips padding — that's for tables).\n// ❌  <Card><CardContent flush><Toolbar/><DataTable/></CardContent></Card>\n// ✅  <Toolbar/>  then  <Card><CardContent flush><DataTable/></CardContent></Card>\n\n// 7) Sidebar footer looks washed-out / off-design\n//    Cause: raw opacity-*/text-[11px]. Use semantic tokens.\n// ✅  <div className=\"text-muted-foreground text-xs\">\n//        <div className=\"text-foreground font-medium\">{name}</div><div>{role}</div></div>\n\n// 8) Inertia: \"Objects are not valid as a React child {errors, auth, …}\"\n//    Cause: persistent layout passed as a render fn. Use the ARRAY form.\n// ❌  Page.layout = (page) => <Layout>{page}</Layout>\n// ✅  Page.layout = [Layout]            // Layout is ({children}) => ...\n\n// 9) Inertia v3 hydration mismatch (\"server rendered text didn't match the client\")\n//    Cause: Math.random()/argless new Date() during render (SSR ≠ client).\n// ✅  seed deterministically by index, or compute in an event handler.\n\n// 10) Hide a column on mobile / sign-aware KPI delta\n// ✅  columns: [{ key: \"email\", header: \"メール\", hiddenOnMobile: true }]\n// ✅  <StatCard label=\"売上\" value=\"¥8.2M\" delta=\"+12%\" />   // + green / - red; inverse flips",
     "name": "common-fixes",
     "tagline": "Fix the most common @godxjp/ui consumer mistakes & visual bugs (StatCard double-border, grey Badge, crushed/empty table headers, washed-out sidebar footer, Inertia layout crash, SSR hydration). Before → after.",
     "tags": [
@@ -55,9 +55,9 @@
       "preferences-rows",
       "account-identity"
     ],
-    "code": "// Gate 0 (docs/COMPOSITION-VS-COMPONENT.md): a \"SettingsSection\"/\"SettingsRow\"/\n// \"DangerZone\" FAILS the Framework-Component Test — it owns no behavior (C2), is fully\n// expressible from existing primitives + tokens (C3), and its API would be screen-shaped (C4).\n// So compose it. Live reference screen: the \"settings account sections\" page in the preview\n// showcase gallery (docs/showcase/, served at /showcase/<id>).\nimport { ExternalLink, ShieldAlert } from \"lucide-react\";\nimport { Button, Text } from \"@godxjp/ui/general\";\nimport {\n  Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,\n  Descriptions, ListRow, StatusBadge,\n} from \"@godxjp/ui/data-display\";\nimport { Switch } from \"@godxjp/ui/data-entry\";\nimport { AlertDialog } from \"@godxjp/ui/feedback\";\nimport { Flex } from \"@godxjp/ui/layout\";\n\n// The sections stack in ONE bounded column. The gap between sibling Cards belongs to that stack,\n// never to the cards themselves — four bare <Card>s in a row is what the audit means by\n// sibling-cards-need-flex, and it is the same rule the DO list at the bottom of this file states.\n<Flex direction=\"col\" gap=\"lg\" className=\"max-w-3xl\">\n\n// 1) IDENTITY — metadata is a description list, so it is Descriptions (a real <dl>), never a\n//    two-column flex of styled divs. One header action goes in CardAction.\n<Card>\n  <CardHeader>\n    <CardTitle level={2}>アカウント情報</CardTitle>\n    <CardDescription>請求書・監査ログに表示される氏名とメールアドレスです。</CardDescription>\n    <CardAction><Button variant=\"outline\" size=\"sm\">編集</Button></CardAction>\n  </CardHeader>\n  <CardContent>\n    <Descriptions columns={2}>\n      <Descriptions.Item label=\"表示名\">藤原 慧</Descriptions.Item>\n      <Descriptions.Item label=\"メールアドレス\">satoshi@example.co.jp</Descriptions.Item>\n      <Descriptions.Item label=\"従業員番号\" mono>EMP-1042-JP</Descriptions.Item>\n      <Descriptions.Item label=\"利用開始日\">\n        {/* ISO-8601 in the machine attribute, Intl for the human text. */}\n        <time dateTime=\"2023-04-01\">\n          {new Intl.DateTimeFormat(locale, { dateStyle: \"long\", timeZone: \"UTC\" }).format(since)}\n        </time>\n      </Descriptions.Item>\n    </Descriptions>\n  </CardContent>\n</Card>\n\n// 2) PREFERENCE ROWS — THE setting row pattern: CardContent flush + ListRow, whose `trailing`\n//    slot IS the control. align=\"start\" + overflow=\"wrap\" keep long JA/VI titles readable and let\n//    the control drop to its own line at 390px (--list-row-body-min-width).\n// ⛔ NEVER: <div className=\"flex items-center justify-between border-b py-3\">…</div>\n<Card>\n  <CardHeader><CardTitle level={2}>通知の環境設定</CardTitle></CardHeader>\n  <CardContent flush>\n    <ListRow\n      align=\"start\"\n      overflow=\"wrap\"\n      title={<label htmlFor=\"pref-digest\">週次サマリーをメールで受け取る</label>}\n      description=\"毎週月曜日の朝に未処理の承認をまとめて送信します。\"\n      trailing={<Switch id=\"pref-digest\" checked={digest} onCheckedChange={setDigest} />}\n    />\n  </CardContent>\n</Card>\n\n// 3) BILLING HANDOFF — the subscription state is a CANONICAL StatusBadge; the tone + icon come\n//    from the library's shared domain-status map, so a page NEVER keeps its own status→colour\n//    table. Money/seats/dates go through Intl (ISO 4217 minor units come from the formatter).\n// ⛔ NEVER: const STATUS_COLORS = { past_due: \"red\", trialing: \"blue\" }\n<Card>\n  <CardHeader>\n    <CardTitle level={2}>請求とサブスクリプション</CardTitle>\n    <CardDescription>支払い方法と請求書は外部の請求ポータルで管理します。</CardDescription>\n    <CardAction><StatusBadge status=\"past_due\" variant=\"outline\" /></CardAction>\n  </CardHeader>\n  <CardContent>\n    <Descriptions columns={2}>\n      <Descriptions.Item label=\"契約プラン\">ビジネス（年額）</Descriptions.Item>\n      <Descriptions.Item label=\"次回請求予定額\">\n        {new Intl.NumberFormat(locale, { style: \"currency\", currency: \"JPY\" }).format(1536000)}\n      </Descriptions.Item>\n    </Descriptions>\n  </CardContent>\n  <CardFooter separated>\n    <Button variant=\"outline\" asChild>\n      <a href={portalUrl} target=\"_blank\" rel=\"noreferrer\">\n        <ExternalLink aria-hidden=\"true\" />\n        請求ポータルを開く\n        {/* Never signal \"leaves the app\" with the icon alone (WCAG 1.4.1 / 2.4.4). */}\n        <span className=\"sr-only\">（新しいタブで開きます）</span>\n      </a>\n    </Button>\n  </CardFooter>\n</Card>\n\n// 4) DANGER ZONE — Card accent=\"destructive\" paints the semantic leading rail from --destructive\n//    through the existing --card-accent-rail-width token. NO new component, NO new token, and no\n//    baked red. Colour never carries the meaning alone: the heading says \"irreversible\", each row\n//    says what is lost, and delete is gated behind type-to-confirm friction.\n<Card accent=\"destructive\">\n  <CardHeader>\n    <CardTitle level={2} className=\"text-destructive\">取り消せない操作</CardTitle>\n    <CardDescription>以下の操作は元に戻せません。</CardDescription>\n  </CardHeader>\n  <CardContent flush>\n    <ListRow\n      align=\"start\"\n      overflow=\"wrap\"\n      leading={<ShieldAlert className=\"text-destructive size-4\" aria-hidden=\"true\" />}\n      title=\"ワークスペースと全データを完全に削除する\"\n      description=\"勤怠記録・申請履歴・監査ログがすべて削除されます。\"\n      trailing={\n        <Button variant=\"destructive\" size=\"sm\" onClick={() => setConfirmOpen(true)}>削除</Button>\n      }\n    />\n  </CardContent>\n</Card>\n\n</Flex>\n\n<AlertDialog\n  open={confirmOpen}\n  onOpenChange={setConfirmOpen}\n  title=\"ワークスペースを完全に削除しますか？\"\n  description=\"この操作は取り消せません。確認のため識別子を入力してください。\"\n  challenge={workspaceSlug}\n  variant=\"destructive\"\n  onConfirm={destroy}\n/>\n\n// ── DO / DON'T ────────────────────────────────────────────────────────────────────────────\n// ✅ Sections stack in a bounded column: <Flex direction=\"col\" gap=\"lg\" className=\"max-w-3xl\">.\n// ✅ Every setting row is a ListRow; its control lives in `trailing`, and the visible row title is\n//    a <label htmlFor> pointing at that control so the switch/select is named by what you can read.\n// ⛔ Do NOT add SettingsSection / SettingsRow / DangerZone to src/components — they fail Gate 0.\n// ⛔ Do NOT wrap the WHOLE settings page in one Card (route-backed local nav owns the IA — see the\n//    responsive settings page pattern); each block is its own Card.\n// ⛔ Do NOT hand-roll padding (p-4) on a Card, a status colour map, or a <dl> replacement.",
+    "code": "// Gate 0 (docs/COMPOSITION-VS-COMPONENT.md): a \"SettingsSection\"/\"SettingsRow\"/\"DangerZone\"\n// FAILS the Framework-Component Test, so compose it. Reference screen: get_exemplar(\"settings\")\n// (docs/showcase/settings-account-sections.tsx). Composition rules: DESIGN.md → Admin Screen Anatomy.\nimport { ExternalLink } from \"lucide-react\";\nimport { Button, Heading } from \"@godxjp/ui/general\";\nimport { Card, CardContent, Descriptions, ListRow, StatusBadge } from \"@godxjp/ui/data-display\";\nimport { Switch } from \"@godxjp/ui/data-entry\";\nimport { AlertDialog } from \"@godxjp/ui/feedback\";\nimport { Flex } from \"@godxjp/ui/layout\";\n\n// Sections are a heading + spacing: the SECTION step (gap=\"xl\") is larger than the ITEM step\n// (gap=\"sm\"), which is what carries the hierarchy — not a box around every block.\n<Flex direction=\"col\" gap=\"xl\">\n\n  {/* 1) IDENTITY — a section, not a Card. Metadata is Descriptions (a real <dl>). */}\n  <Flex direction=\"col\" gap=\"sm\">\n    <Flex justify=\"between\" align=\"center\">\n      <Heading level={2}>アカウント情報</Heading>\n      <Button variant=\"outline\" size=\"sm\">編集</Button>\n    </Flex>\n    <Descriptions columns={2}>\n      <Descriptions.Item label=\"表示名\">藤原 慧</Descriptions.Item>\n      <Descriptions.Item label=\"メールアドレス\">satoshi@example.co.jp</Descriptions.Item>\n      <Descriptions.Item label=\"従業員番号\" mono>EMP-1042-JP</Descriptions.Item>\n      <Descriptions.Item label=\"利用開始日\">\n        <time dateTime=\"2023-04-01\">\n          {new Intl.DateTimeFormat(locale, { dateStyle: \"long\", timeZone: \"UTC\" }).format(since)}\n        </time>\n      </Descriptions.Item>\n    </Descriptions>\n  </Flex>\n\n  {/* 2) PREFERENCE ROWS — a list of setting rows IS a real boundary, so it gets one Card:\n       CardContent flush + ListRow, whose trailing slot is the control. The visible title is the\n       control's <label htmlFor>. NEVER a flex div with border-b rows. */}\n  <Flex direction=\"col\" gap=\"sm\">\n    <Heading level={2}>通知の環境設定</Heading>\n    <Card>\n      <CardContent flush>\n        <ListRow\n          align=\"start\"\n          overflow=\"wrap\"\n          title={<label htmlFor=\"pref-digest\">週次サマリーをメールで受け取る</label>}\n          description=\"毎週月曜日の朝に未処理の承認をまとめて送信します。\"\n          trailing={<Switch id=\"pref-digest\" checked={digest} onCheckedChange={setDigest} />}\n        />\n      </CardContent>\n    </Card>\n  </Flex>\n\n  {/* 3) BILLING HANDOFF — a section. The state is a canonical StatusBadge (never a page-local\n       status→colour map); money through Intl. */}\n  <Flex direction=\"col\" gap=\"sm\">\n    <Flex justify=\"between\" align=\"center\">\n      <Heading level={2}>請求とサブスクリプション</Heading>\n      <StatusBadge status=\"past_due\" variant=\"outline\" />\n    </Flex>\n    <Descriptions columns={2}>\n      <Descriptions.Item label=\"契約プラン\">ビジネス（年額）</Descriptions.Item>\n      <Descriptions.Item label=\"次回請求予定額\">\n        {new Intl.NumberFormat(locale, { style: \"currency\", currency: \"JPY\" }).format(1536000)}\n      </Descriptions.Item>\n    </Descriptions>\n    <div>\n      <Button variant=\"outline\" asChild>\n        <a href={portalUrl} target=\"_blank\" rel=\"noreferrer\">\n          <ExternalLink aria-hidden=\"true\" />\n          請求ポータルを開く\n          <span className=\"sr-only\">（新しいタブで開きます）</span>\n        </a>\n      </Button>\n    </div>\n  </Flex>\n\n  {/* 4) DANGER ZONE — a real boundary: Card accent=\"destructive\" (the rail comes from\n       --destructive). The heading and each row say what is lost; no decorative icon. */}\n  <Flex direction=\"col\" gap=\"sm\">\n    <Heading level={2}>取り消せない操作</Heading>\n    <Card accent=\"destructive\">\n      <CardContent flush>\n        <ListRow\n          align=\"start\"\n          overflow=\"wrap\"\n          title=\"ワークスペースと全データを完全に削除する\"\n          description=\"勤怠記録・申請履歴・監査ログがすべて削除されます。\"\n          trailing={<Button variant=\"destructive\" size=\"sm\" onClick={() => setConfirmOpen(true)}>削除</Button>}\n        />\n      </CardContent>\n    </Card>\n  </Flex>\n</Flex>\n\n<AlertDialog\n  open={confirmOpen}\n  onOpenChange={setConfirmOpen}\n  title=\"ワークスペースを完全に削除しますか？\"\n  description=\"この操作は取り消せません。確認のため識別子を入力してください。\"\n  challenge={workspaceSlug}\n  variant=\"destructive\"\n  onConfirm={destroy}\n/>\n\n// ── DO / DON'T ────────────────────────────────────────────────────────────────────────────\n// ✅ Section step > item step (gap=\"xl\" between sections, gap=\"sm\" inside one).\n// ✅ A Card only where there is a real boundary: a list of setting rows, the danger zone.\n// ✅ Every setting row is a ListRow; its control lives in `trailing`, titled by <label htmlFor>.\n// ⛔ Do NOT add SettingsSection / SettingsRow / DangerZone to src/components — they fail Gate 0.\n// ⛔ Do NOT give every block Card + CardHeader + CardTitle + CardDescription (ui-audit card-per-section).\n// ⛔ Do NOT hand-roll padding (p-4), a status colour map, or a <dl> replacement.",
     "name": "settings-section-rows",
-    "tagline": "The four canonical settings BLOCKS — identity · preference rows · billing handoff · danger zone — composed from Card + ListRow + Descriptions + StatusBadge + AlertDialog. A COMPOSITION pattern: godx-ui ships no SettingsSection/SettingsRow/DangerZone component and never will.",
+    "tagline": "The four canonical settings blocks — identity · preference rows · billing handoff · danger zone. Identity and billing are SECTIONS (Heading + Descriptions, no surface); preference rows and the danger zone are Cards because they are real boundaries. A COMPOSITION pattern: godx-ui ships no SettingsSection/SettingsRow/DangerZone component and never will.",
     "tags": [
       "settings",
       "account",
@@ -87,9 +87,9 @@
     ]
   },
   {
-    "code": "import { useState } from \"react\";\nimport { AlertDialogRoot, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from \"@godxjp/ui/feedback\";\nimport { Input } from \"@godxjp/ui/data-entry\";\nimport { Button } from \"@godxjp/ui/general\";\nimport { Flex } from \"@godxjp/ui/layout\";\nimport { toast } from \"sonner\";\n\nexport function DeleteProjectDialog({ open, onOpenChange, slug }: { open: boolean; onOpenChange: (v: boolean) => void; slug: string }) {\n  const [confirm, setConfirm] = useState(\"\");\n  return (\n    <AlertDialogRoot open={open} onOpenChange={onOpenChange}>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>プロジェクトを削除</AlertDialogTitle>\n          <AlertDialogDescription>この操作は取り消せません。確認のためプロジェクト名 \"{slug}\" と入力してください。</AlertDialogDescription>\n        </AlertDialogHeader>\n        <Flex direction=\"col\" gap=\"md\">\n          <Input value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder={slug} />\n        </Flex>\n        <AlertDialogFooter>\n          <AlertDialogCancel asChild><Button variant=\"outline\">キャンセル</Button></AlertDialogCancel>\n          <AlertDialogAction asChild>\n            <Button variant=\"destructive\" disabled={confirm !== slug} onClick={() => { toast.success(\"削除しました\"); onOpenChange(false); }}>完全に削除</Button>\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialogRoot>\n  );\n}",
+    "code": "import { AlertDialog, toast } from \"@godxjp/ui/feedback\";\n\n// The preset covers a typed challenge: confirm stays disabled until the input equals `slug`.\nexport function DeleteProjectDialog({ open, onOpenChange, slug }: { open: boolean; onOpenChange: (v: boolean) => void; slug: string }) {\n  return (\n    <AlertDialog\n      open={open}\n      onOpenChange={onOpenChange}\n      title=\"プロジェクトを削除\"\n      description={`この操作は取り消せません。確認のためプロジェクト名 \"${slug}\" と入力してください。`}\n      challenge={slug}\n      confirmLabel=\"完全に削除\"\n      onConfirm={() => {\n        toast.success(\"削除しました\");\n        onOpenChange(false);\n      }}\n    />\n  );\n}",
     "name": "confirm-destructive",
-    "tagline": "Type-to-confirm destructive dialog — AlertDialogRoot + Input gate + toast (real @godxjp/ui API).",
+    "tagline": "Type-to-confirm destructive dialog — the AlertDialog PRESET with `challenge` (the compound AlertDialog* parts are the older way in; a body the preset does not cover is Dialog variant=\"destructive\").",
     "tags": [
       "dialog",
       "confirm",
@@ -151,9 +151,9 @@
     ]
   },
   {
-    "code": "import { Head, router } from \"@inertiajs/react\"\nimport { useMemo, useState } from \"react\"\nimport { PageContainer, ResponsiveGrid, Flex } from \"@godxjp/ui/layout\"\nimport { Card, CardContent, StatCard, DataTable, EmptyState, Badge, type ColumnDef } from \"@godxjp/ui/data-display\"\nimport { SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@godxjp/ui/data-entry\"\nimport { Toolbar, ToolbarGroup, Pagination } from \"@godxjp/ui/navigation\"\nimport { formatDate } from \"@godxjp/ui/datetime\"\nimport { withCrmLayout } from \"@/layouts/crm-layout\" // see \"inertia-persistent-layout\"\n\ntype Coupon = { id: string; name: string; status: string; scope: string; validFrom: string; validTo: string; usage: number }\nconst PAGE_SIZE = 10\n\nfunction Coupons({ coupons }: { coupons: Coupon[] }) {\n  const [q, setQ] = useState(\"\")\n  const [status, setStatus] = useState(\"all\")\n  const [page, setPage] = useState(1)\n\n  const filtered = useMemo(() => coupons.filter((c) => {\n    if (q && !c.name.toLowerCase().includes(q.toLowerCase())) return false\n    if (status !== \"all\" && c.status !== status) return false\n    return true\n  }), [coupons, q, status])\n  const paged = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)\n\n  // ColumnDef = { key, header, render?, align?: \"left\"|\"center\"|\"right\", sortable?, width? }\n  const columns: ColumnDef<Coupon>[] = [\n    { key: \"name\", header: \"クーポン名\", render: (c) => <span className=\"font-medium\">{c.name}</span> },\n    { key: \"scope\", header: \"スコープ\", render: (c) => <Badge status={c.scope} tone=\"info\" icon={null} /> },\n    { key: \"status\", header: \"ステータス\", render: (c) => <Badge status={c.status} /> },\n    { key: \"valid\", header: \"有効期間\", render: (c) => `${formatDate(c.validFrom)} 〜 ${formatDate(c.validTo)}` },\n    { key: \"usage\", header: \"利用数\", align: \"right\", render: (c) => c.usage.toLocaleString() },\n  ]\n\n  return (\n    <>\n      <Head title=\"クーポン管理\" />\n      {/* RULE: every page wraps in PageContainer; vertical rhythm via Flex direction=\"col\"/ResponsiveGrid, never p-*/gap-* */}\n      <PageContainer title=\"クーポン管理\" subtitle=\"配信中のクーポン一覧\">\n        <Flex direction=\"col\" gap=\"lg\">\n          <ResponsiveGrid columns={3}>\n            <StatCard label=\"公開中\" value={coupons.filter((c) => c.status === \"公開中\").length} />\n            <StatCard label=\"総利用数\" value={coupons.reduce((s, c) => s + c.usage, 0).toLocaleString()} />\n            <StatCard label=\"件数\" value={coupons.length} />\n          </ResponsiveGrid>\n\n          {/* Toolbar is the filter-bar primitive (standalone, above the table surface). */}\n          <Toolbar hasActiveFilters={q !== \"\" || status !== \"all\"} onClear={() => { setQ(\"\"); setStatus(\"all\"); setPage(1) }}>\n            {/* SearchInput is value + onSearch(v) — NOT onChange */}\n            <SearchInput placeholder=\"クーポン名で検索\" value={q} onSearch={(v) => { setQ(v); setPage(1) }} />\n            <ToolbarGroup label=\"ステータス\">\n              <Select value={status} onValueChange={(v) => { setStatus(v); setPage(1) }}>\n                <SelectTrigger><SelectValue /></SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"all\">全ステータス</SelectItem>\n                  <SelectItem value=\"公開中\">公開中</SelectItem>\n                  <SelectItem value=\"下書き\">下書き</SelectItem>\n                </SelectContent>\n              </Select>\n            </ToolbarGroup>\n          </Toolbar>\n\n          <Card>\n            <CardContent flush>\n              {filtered.length === 0\n                ? <EmptyState title=\"該当するクーポンがありません\" description=\"検索条件を変更してください。\" />\n                : <DataTable data={paged} columns={columns} getRowId={(c) => c.id} onRowClick={(c) => router.visit(`/coupons/${c.id}`)} />}\n            </CardContent>\n          </Card>\n\n          {/* Pagination ONLY for real multi-page data — hide it while empty or single-page. */}\n          {filtered.length > PAGE_SIZE && (\n            <Pagination value={page} total={filtered.length} pageSize={PAGE_SIZE} showTotal onValueChange={(p) => setPage(p)} />\n          )}\n        </Flex>\n      </PageContainer>\n    </>\n  )\n}\n\nCoupons.layout = withCrmLayout\nexport default Coupons",
+    "code": "import { Head, router } from \"@inertiajs/react\"\nimport { useMemo, useState } from \"react\"\nimport { PageContainer, Flex } from \"@godxjp/ui/layout\"\nimport { Card, CardContent, DataTable, EmptyState, Badge, type ColumnDef } from \"@godxjp/ui/data-display\"\nimport { SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@godxjp/ui/data-entry\"\nimport { Toolbar, ToolbarGroup, Pagination } from \"@godxjp/ui/navigation\"\nimport { formatDate } from \"@godxjp/ui/datetime\"\nimport { withCrmLayout } from \"@/layouts/crm-layout\" // see \"inertia-persistent-layout\"\n\ntype Coupon = { id: string; name: string; status: string; scope: string; validFrom: string; validTo: string; usage: number }\nconst PAGE_SIZE = 10\n\nfunction Coupons({ coupons }: { coupons: Coupon[] }) {\n  const [q, setQ] = useState(\"\")\n  const [status, setStatus] = useState(\"all\")\n  const [page, setPage] = useState(1)\n\n  const filtered = useMemo(() => coupons.filter((c) => {\n    if (q && !c.name.toLowerCase().includes(q.toLowerCase())) return false\n    if (status !== \"all\" && c.status !== status) return false\n    return true\n  }), [coupons, q, status])\n  const paged = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)\n\n  // ColumnDef = { key, header, render?, align?: \"left\"|\"center\"|\"right\", sortable?, width? }\n  const columns: ColumnDef<Coupon>[] = [\n    { key: \"name\", header: \"クーポン名\", render: (c) => <span className=\"font-medium\">{c.name}</span> },\n    { key: \"scope\", header: \"スコープ\" }, // a category is plain text; Badge is for the status column only\n    { key: \"status\", header: \"ステータス\", render: (c) => <Badge status={c.status} /> },\n    { key: \"valid\", header: \"有効期間\", render: (c) => `${formatDate(c.validFrom)} 〜 ${formatDate(c.validTo)}` },\n    { key: \"usage\", header: \"利用数\", align: \"right\", render: (c) => c.usage.toLocaleString() },\n  ]\n\n  return (\n    <>\n      <Head title=\"クーポン管理\" />\n      {/* RULE: every page wraps in PageContainer; vertical rhythm via Flex direction=\"col\"/ResponsiveGrid, never p-* or gap-* */}\n      {/* No subtitle that restates the title, no StatCard row: the total is Pagination's showTotal. */}\n      <PageContainer title=\"クーポン管理\">\n        <Flex direction=\"col\" gap=\"lg\">\n          {/* Toolbar is the filter-bar primitive (standalone, above the table surface). */}\n          <Toolbar hasActiveFilters={q !== \"\" || status !== \"all\"} onClear={() => { setQ(\"\"); setStatus(\"all\"); setPage(1) }}>\n            {/* SearchInput is value + onSearch(v) — NOT onChange */}\n            <SearchInput placeholder=\"クーポン名で検索\" value={q} onSearch={(v) => { setQ(v); setPage(1) }} />\n            <ToolbarGroup label=\"ステータス\">\n              <Select value={status} onValueChange={(v) => { setStatus(v); setPage(1) }}>\n                <SelectTrigger><SelectValue /></SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"all\">全ステータス</SelectItem>\n                  <SelectItem value=\"公開中\">公開中</SelectItem>\n                  <SelectItem value=\"下書き\">下書き</SelectItem>\n                </SelectContent>\n              </Select>\n            </ToolbarGroup>\n          </Toolbar>\n\n          <Card>\n            <CardContent flush>\n              {filtered.length === 0\n                ? <EmptyState title=\"該当するクーポンがありません\" description=\"検索条件を変更してください。\" /> /* one sentence, no icon */\n                : <DataTable data={paged} columns={columns} getRowId={(c) => c.id} onRowClick={(c) => router.visit(`/coupons/${c.id}`)} />}\n            </CardContent>\n          </Card>\n\n          {/* Pagination ONLY for real multi-page data — hide it while empty or single-page. */}\n          {filtered.length > PAGE_SIZE && (\n            <Pagination value={page} total={filtered.length} pageSize={PAGE_SIZE} showTotal onValueChange={(p) => setPage(p)} />\n          )}\n        </Flex>\n      </PageContainer>\n    </>\n  )\n}\n\nCoupons.layout = withCrmLayout\nexport default Coupons",
     "name": "inertia-list-page",
-    "tagline": "Inertia + @godxjp/ui list page — PageContainer + Toolbar + DataTable + Badge + Pagination (current primitive API).",
+    "tagline": "Inertia + @godxjp/ui list page — PageContainer + Toolbar (above the table) + DataTable + Badge + Pagination. No KPI row, no restating subtitle.",
     "tags": [
       "inertia",
       "list",
@@ -166,9 +166,9 @@
     ]
   },
   {
-    "code": "import { Head, router } from \"@inertiajs/react\"\nimport { PageContainer, ResponsiveGrid, Flex } from \"@godxjp/ui/layout\"\nimport { Card, CardContent, StatCard, EmptyState, Descriptions, Badge } from \"@godxjp/ui/data-display\"\nimport { Button } from \"@godxjp/ui/general\"\nimport { formatDate } from \"@godxjp/ui/datetime\"\nimport { ArrowLeft } from \"lucide-react\"\nimport { withCrmLayout } from \"@/layouts/crm-layout\"\n\n// Detail routes pass the param as an Inertia prop:\n//   Route::get('/members/{id}', fn ($id) => Inertia::render('crm/members/show', ['id' => $id]))\nfunction MemberShow({ id }: { id: string }) {\n  const member = MEMBERS.find((m) => m.id === id)\n\n  if (!member) {\n    return (\n      <>\n        <Head title=\"会員詳細\" />\n        <PageContainer title=\"会員詳細\" subtitle=\"会員が見つかりません\">\n          <EmptyState title=\"会員が見つかりません\" description={`ID「${id}」は存在しません。`} />\n          <Button variant=\"outline\" onClick={() => router.visit(\"/members\")}><ArrowLeft className=\"size-4\" />一覧へ戻る</Button>\n        </PageContainer>\n      </>\n    )\n  }\n\n  return (\n    <>\n      <Head title={member.name} />\n      <PageContainer title={member.name} subtitle={`${member.id} / ${member.rank}`}>\n        <Flex direction=\"col\" gap=\"lg\">\n          <ResponsiveGrid columns={4}>\n            <StatCard label=\"累計購入額\" value={`¥${member.total.toLocaleString()}`} />\n            <StatCard label=\"来店回数\" value={member.visits} />\n            <StatCard label=\"ポイント\" value={member.points.toLocaleString()} />\n            <StatCard label=\"LTV\" value={`¥${member.ltv.toLocaleString()}`} />\n          </ResponsiveGrid>\n          <Card>\n            <CardContent>\n              {/* Descriptions is COMPOUND — value goes in children, not a prop */}\n              <Descriptions columns={2}>\n                <Descriptions.Item label=\"氏名\">{member.name}</Descriptions.Item>\n                <Descriptions.Item label=\"ランク\"><Badge status={member.rank} tone=\"info\" icon={null} /></Descriptions.Item>\n                <Descriptions.Item label=\"ステータス\"><Badge status={member.status} /></Descriptions.Item>\n                <Descriptions.Item label=\"登録日\">{formatDate(member.registeredAt)}</Descriptions.Item>\n              </Descriptions>\n            </CardContent>\n          </Card>\n        </Flex>\n      </PageContainer>\n    </>\n  )\n}\n\nMemberShow.layout = withCrmLayout\nexport default MemberShow",
+    "code": "import { Head, router } from \"@inertiajs/react\"\nimport { PageContainer } from \"@godxjp/ui/layout\"\nimport { Card, CardContent, EmptyState, Descriptions, Badge } from \"@godxjp/ui/data-display\"\nimport { Button } from \"@godxjp/ui/general\"\nimport { formatDate } from \"@godxjp/ui/datetime\"\nimport { ArrowLeft } from \"lucide-react\"\nimport { withCrmLayout } from \"@/layouts/crm-layout\"\n\n// Detail routes pass the param as an Inertia prop:\n//   Route::get('/members/{id}', fn ($id) => Inertia::render('crm/members/show', ['id' => $id]))\nfunction MemberShow({ id }: { id: string }) {\n  const member = MEMBERS.find((m) => m.id === id)\n\n  if (!member) {\n    return (\n      <>\n        <Head title=\"会員詳細\" />\n        <PageContainer title=\"会員詳細\">\n          <EmptyState title=\"会員が見つかりません\" description={`ID「${id}」は存在しません。`} />\n          <Button variant=\"outline\" onClick={() => router.visit(\"/members\")}><ArrowLeft className=\"size-4\" />一覧へ戻る</Button>\n        </PageContainer>\n      </>\n    )\n  }\n\n  return (\n    <>\n      <Head title={member.name} />\n      <PageContainer title={member.name}>\n        {/* Figures about one member are facts, not KPIs: Descriptions rows, not a StatCard row. */}\n        <Card>\n          <CardContent>\n            {/* Descriptions is COMPOUND — value goes in children, not a prop */}\n            <Descriptions columns={2}>\n              <Descriptions.Item label=\"会員ID\">{member.id}</Descriptions.Item>\n              <Descriptions.Item label=\"ランク\">{member.rank}</Descriptions.Item>\n              <Descriptions.Item label=\"ステータス\"><Badge status={member.status} /></Descriptions.Item>\n              <Descriptions.Item label=\"登録日\">{formatDate(member.registeredAt)}</Descriptions.Item>\n              <Descriptions.Item label=\"累計購入額\">{`¥${member.total.toLocaleString()}`}</Descriptions.Item>\n              <Descriptions.Item label=\"来店回数\">{member.visits}</Descriptions.Item>\n            </Descriptions>\n          </CardContent>\n        </Card>\n      </PageContainer>\n    </>\n  )\n}\n\nMemberShow.layout = withCrmLayout\nexport default MemberShow",
     "name": "inertia-detail-page",
-    "tagline": "Inertia detail page — receives {id} prop, Descriptions (compound) + StatCard + EmptyState fallback.",
+    "tagline": "Inertia detail page — receives {id} prop, Descriptions (compound) in one Card + EmptyState fallback. No KPI tile row.",
     "tags": [
       "inertia",
       "detail",
@@ -221,9 +221,9 @@
     ]
   },
   {
-    "code": "import { Badge } from \"@godxjp/ui/data-display\"\n\n// Badge auto-colours a fixed set of English LIFECYCLE keys:\n//   active/completed (success ✓) · draft (neutral ○) · pending/temporary (warning ⏱)\n//   scheduled/sending (info) · cancelled (neutral) · failed/deleted/bounced (destructive ✕)\n// Anything else (localized labels, tiers) falls back to neutral grey ○ unless you override.\n\n// 1) Lifecycle with localized text — map to the key, keep JP via children (icon stays):\n<Badge status=\"active\">公開中</Badge>        // green ✓ 公開中\n\n// 2) Unknown label — set tone explicitly (no icon, since the key is unknown):\n<Badge status=\"公開中\" tone=\"success\" />\n\n// 3) Tier / category — coloured pill, drop the misleading glyph with icon={null}:\n<Badge status=\"プレミアム\" tone=\"success\" icon={null} />\n<Badge status=\"ゴールド\"   tone=\"warning\" icon={null} />\n<Badge status=\"法人共通\"   tone=\"info\"    icon={null} />\n\n// tone: \"success\" | \"warning\" | \"destructive\" | \"info\" | \"neutral\"  (import type ToneProp)\n// RULE: a chip never wraps — it is pinned white-space: nowrap, so it stays one line in\n// narrow table cells. Centralize the domain→tone map in ONE small consumer wrapper and\n// import that instead of the raw Badge across pages.",
+    "code": "import { Badge } from \"@godxjp/ui/data-display\"\n\n// Badge auto-colours a fixed set of English LIFECYCLE keys:\n//   active/completed (success ✓) · draft (neutral ○) · pending/temporary (warning ⏱)\n//   scheduled/sending (info) · cancelled (neutral) · failed/deleted/bounced (destructive ✕)\n// Anything else (localized labels, tiers) falls back to neutral grey ○ unless you override.\n\n// 1) Lifecycle with localized text — map to the key, keep JP via children (icon stays):\n<Badge status=\"active\">公開中</Badge>        // green ✓ 公開中\n\n// 2) Unknown label — set tone explicitly (no icon, since the key is unknown):\n<Badge status=\"公開中\" tone=\"success\" />\n\n// 3) Tier / category — ONE neutral tone for all of them, no glyph. Colour means status;\n//    a rainbow of tiers reads as several statuses. Prefer plain text in a table column.\n<Badge status=\"プレミアム\" tone=\"neutral\" icon={null} />\n<Badge status=\"ゴールド\"   tone=\"neutral\" icon={null} />\n\n// tone: \"success\" | \"warning\" | \"destructive\" | \"info\" | \"neutral\"  (import type ToneProp)\n// RULE: a chip never wraps — it is pinned white-space: nowrap, so it stays one line in\n// narrow table cells. Centralize the domain→tone map in ONE small consumer wrapper and\n// import that instead of the raw Badge across pages.",
     "name": "badge-coloring",
-    "tagline": "Colour a Badge for localized labels and tiers via tone + icon (escape-hatch props).",
+    "tagline": "Colour a Badge for a localized STATUS via tone + icon; tiers and categories take one neutral tone (colour means status).",
     "tags": [
       "statusbadge",
       "badge",
@@ -367,16 +367,18 @@
       "page-layout",
       "stack-cards"
     ],
-    "code": "import { PageContainer, Flex, ResponsiveGrid } from \"@godxjp/ui/layout\";\nimport { Card, CardHeader, CardTitle, CardContent } from \"@godxjp/ui/data-display\";\nimport { Button } from \"@godxjp/ui/general\";\n\n// Every direct child of PageContainer is a page section — the page owns the gap between them\n// (--page-body-gap, the section step). Do NOT add gap-* / space-y-* / mt-* yourself.\nexport function ReportPage() {\n  return (\n    <PageContainer title=\"Bug report\" subtitle=\"https://app.example.com/orders\" extra={<Button>Send</Button>}>\n      <Card>\n        <CardHeader><CardTitle>Details</CardTitle></CardHeader>\n        <CardContent>…</CardContent>\n      </Card>\n      <Card>\n        <CardHeader><CardTitle>Screenshots</CardTitle></CardHeader>\n        <CardContent>\n          {/* items INSIDE a section: ResponsiveGrid for a grid, Flex for a stack/row */}\n          <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>…</ResponsiveGrid>\n        </CardContent>\n      </Card>\n      <Card>\n        <CardContent>\n          <Flex direction=\"col\" gap=\"md\">…</Flex>\n        </CardContent>\n      </Card>\n    </PageContainer>\n  );\n}\n",
+    "code": "import { PageContainer, Flex, ResponsiveGrid } from \"@godxjp/ui/layout\";\nimport { Card, CardContent, DataTable, Descriptions, type ColumnDef } from \"@godxjp/ui/data-display\";\nimport { Button, Heading } from \"@godxjp/ui/general\";\n\ntype Shot = { id: string; name: string };\nconst columns: ColumnDef<Shot>[] = [{ key: \"name\", header: \"File\" }];\n\n// Two steps, never one uniform gap:\n//   section step — between direct children of PageContainer (--page-body-gap). Do NOT add gap-*/mt-*.\n//   item step    — inside a section, Flex gap=\"sm\" between its heading and its content.\n// A section is a Heading, not a Card. Card is for a real boundary: here, the table surface.\nexport function ReportPage({ shots }: { shots: Shot[] }) {\n  return (\n    <PageContainer title=\"Bug report\" extra={<Button>Send</Button>}>\n      <Flex direction=\"col\" gap=\"sm\">\n        <Heading level={2}>Details</Heading>\n        <Descriptions columns={2}>\n          <Descriptions.Item label=\"URL\">https://app.example.com/orders</Descriptions.Item>\n          <Descriptions.Item label=\"Browser\">Safari 18</Descriptions.Item>\n        </Descriptions>\n      </Flex>\n      <Flex direction=\"col\" gap=\"sm\">\n        <Heading level={2}>Screenshots</Heading>\n        <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>…</ResponsiveGrid>\n      </Flex>\n      <Flex direction=\"col\" gap=\"sm\">\n        <Heading level={2}>Attachments</Heading>\n        <Card>\n          <CardContent flush>\n            <DataTable data={shots} columns={columns} getRowId={(r) => r.id} />\n          </CardContent>\n        </Card>\n      </Flex>\n    </PageContainer>\n  );\n}\n",
     "name": "page-sections",
-    "tagline": "A page made of several Card sections: PageContainer spaces its direct children by default; group items inside a section with Flex/ResponsiveGrid, never Tailwind gap-*/p-*.",
+    "tagline": "A page of several sections: a Heading + section spacing marks a section, not a Card. PageContainer spaces its direct children (section step); Flex gap spaces items inside one (item step). Card only for a real boundary.",
     "tags": [
       "layout",
       "page",
       "card",
       "spacing",
       "flex",
-      "grid"
+      "grid",
+      "section",
+      "heading"
     ]
   },
   {

package/dist/components/data-entry/select.js

@@ -632,10 +632,11 @@ function DataSelect(props) {
     "aria-label": props["aria-label"],
     "aria-labelledby": props["aria-labelledby"]
   });
-  const [hasNativeLabel, setHasNativeLabel] = React.useState(false);
+  const [nativeLabel, setNativeLabel] = React.useState(null);
+  const hasNativeLabel = nativeLabel !== null;
   useLayoutEffect(() => {
-    const labelled = typeof document !== "undefined" && props.id !== void 0 && document.querySelector(`label[for="${CSS.escape(props.id)}"]`) !== null;
-    setHasNativeLabel(labelled);
+    const label = typeof document !== "undefined" && props.id !== void 0 ? document.querySelector(`label[for="${CSS.escape(props.id)}"]`) : null;
+    setNativeLabel(label ? (label.textContent ?? "").trim() || null : null);
   }, [props.id]);
   if (props.mode !== void 0 || searchable) {
     const antdFilter = showSearchConfig?.filterOption;
@@ -742,7 +743,7 @@ function DataSelect(props) {
       },
       disabled: disabled || !hasOptions && !showEmptyPopup,
       allowsEmptyCollection: showEmptyPopup,
-      "aria-label": ariaProps["aria-label"] ?? nameFromPlaceholder,
+      "aria-label": ariaProps["aria-label"] ?? nameFromPlaceholder ?? nativeLabel ?? void 0,
       "aria-labelledby": ariaProps["aria-labelledby"] ?? inheritedName["aria-labelledby"],
       name: resolvedName,
       open,

package/dist/components/general/typography.js

@@ -416,9 +416,9 @@ const TextBase = React.forwardRef((props, ref) => {
         'Text: `truncate` and `whitespace="pre-wrap"` are mutually exclusive \u2014 `truncate` takes precedence (one line, one ellipsis); use `clamp` to keep preserved line breaks and still bound the height.'
       );
     }
-    if (breakMode === "anywhere" && truncating) {
+    if ((breakMode === "anywhere" || breakMode === "phrase") && truncating) {
       console.warn(
-        'Text: `truncate` and `break="anywhere"` are mutually exclusive \u2014 `truncate` takes precedence (one line has nowhere to break to); use `clamp` to split the token and still bound the height.'
+        `Text: \`truncate\` and \`break="${breakMode}"\` are mutually exclusive \u2014 \`truncate\` takes precedence (one line has nowhere to break to); use \`clamp\` to keep the breaking and still bound the height.`
       );
     }
     if (ellipsis && (truncate || clamp !== void 0)) {
@@ -450,8 +450,8 @@ const TextBase = React.forwardRef((props, ref) => {
     // Text inherits, e.g. from a table cell. `truncate` still wins by emitting nothing.
     "data-whitespace": whitespace && !truncating ? whitespace : void 0,
     // Same shape and the same precedence as `whitespace`: `normal` is inert, and one line has
-    // nowhere to break to, so `truncate` simply does not emit it (gh#927).
-    "data-break": breakMode === "anywhere" && !truncating ? "anywhere" : void 0,
+    // nowhere to break to, so `truncate` simply does not emit it (gh#927, and `phrase` likewise).
+    "data-break": breakMode && breakMode !== "normal" && !truncating ? breakMode : void 0,
     style: clampStyle,
     "data-tabular": tabular ? "" : void 0,
     "data-decoration": decoration,

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "32.4.3",
+  "version": "32.6.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/props/components/general.prop.d.ts

@@ -75,6 +75,12 @@ export type TextProp = Omit<React.HTMLAttributes<HTMLElement>, "color"> & Omit<T
      * also releases a `nowrap` it inherited (a table cell's default) back to `normal` — newlines
      * still collapse, because an identifier's whitespace is not content.
      *
+     * `phrase` is for Japanese PROSE in a narrow measure — a name, an organisation, a status in a
+     * table cell: it breaks between phrases (`word-break: auto-phrase`) instead of mid-word, never
+     * starts a line with a small kana or 「ー」 (`line-break: strict`), adds `text-wrap: pretty`, and
+     * releases an inherited `nowrap` too. Each phrase stays whole, so a column is as wide as its
+     * longest phrase. Browsers without `auto-phrase` keep their own CJK breaking.
+     *
      * Independent of `whitespace`: `whitespace="pre-wrap" break="anywhere"` keeps typed line breaks
      * AND splits a long token. `truncate` WINS (one line has nowhere to break to), so the attribute
      * is not emitted under it; `clamp` composes.

package/dist/props/registry.d.ts

@@ -477,7 +477,7 @@ export declare const VOCABULARY_REGISTRY: {
     readonly TextBreakProp: {
         readonly file: "vocabulary/interaction.prop.ts";
         readonly category: "interaction";
-        readonly description: "Where an over-long unbroken token may break normal | anywhere: `anywhere` (overflow-wrap: anywhere) lets a machine identifier (email, code, login id) split to fit a narrow table cell; independent of TextWhitespaceProp, and `truncate` outranks it";
+        readonly description: "Where an over-long unbroken token may break normal | anywhere | phrase: `anywhere` (overflow-wrap: anywhere) lets a machine identifier (email, code, login id) split to fit a narrow table cell; `phrase` (word-break: auto-phrase + line-break: strict + text-wrap: pretty) breaks Japanese prose between phrases, never mid-katakana, keeping each phrase whole (the column is as wide as its longest phrase); independent of TextWhitespaceProp, and `truncate` outranks both";
     };
     readonly TypographyTypeProp: {
         readonly file: "vocabulary/interaction.prop.ts";

package/dist/props/registry.js

@@ -476,7 +476,7 @@ const VOCABULARY_REGISTRY = {
   TextBreakProp: {
     file: "vocabulary/interaction.prop.ts",
     category: "interaction",
-    description: "Where an over-long unbroken token may break normal | anywhere: `anywhere` (overflow-wrap: anywhere) lets a machine identifier (email, code, login id) split to fit a narrow table cell; independent of TextWhitespaceProp, and `truncate` outranks it"
+    description: "Where an over-long unbroken token may break normal | anywhere | phrase: `anywhere` (overflow-wrap: anywhere) lets a machine identifier (email, code, login id) split to fit a narrow table cell; `phrase` (word-break: auto-phrase + line-break: strict + text-wrap: pretty) breaks Japanese prose between phrases, never mid-katakana, keeping each phrase whole (the column is as wide as its longest phrase); independent of TextWhitespaceProp, and `truncate` outranks both"
   },
   TypographyTypeProp: {
     file: "vocabulary/interaction.prop.ts",

package/dist/props/vocabulary/interaction.prop.d.ts

@@ -108,8 +108,16 @@ export type TextWhitespaceProp = "normal" | "pre-wrap";
  * typed are content, `break` says whether a machine identifier may be split to fit. Only `anywhere`
  * — not `break-word` — lowers the box's min-content size (CSS Text 3 §5.5), which is what a table
  * cell sizes its column from; `break-word` breaks in a block and still holds a `<td>` open.
+ *
+ * `phrase` (gh#1292) is for PROSE in a narrow measure — a Japanese name, an organisation, a status label in a
+ * table cell: lines break between phrases instead of between any two
+ * characters (`word-break: auto-phrase`), small kana and the long-vowel mark never start a line
+ * (`line-break: strict`), and a paragraph does not end on one short word (`text-wrap: pretty`).
+ * Like `anywhere` it releases an inherited `nowrap`. Unlike `anywhere` it does NOT lower min-content:
+ * a column is as wide as its longest phrase, so a very long compound scrolls the table instead of
+ * being cut. Browsers without `auto-phrase` keep their own CJK breaking.
  */
-export type TextBreakProp = "normal" | "anywhere";
+export type TextBreakProp = "normal" | "anywhere" | "phrase";
 /**
  * antd `Typography` `type` — its four-value emphasis axis (`BaseType`).
  *

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "32.4.3",
+  "version": "32.6.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/styles/text-layout.css

@@ -169,10 +169,23 @@
     overflow-wrap: anywhere;
     min-inline-size: 0;
   }
-  [data-slot="text"][data-break="anywhere"]:not([data-whitespace]) {
+  [data-slot="text"][data-break="anywhere"]:not([data-whitespace]),
+  [data-slot="text"][data-break="phrase"]:not([data-whitespace]) {
     white-space: normal;
   }
 
+  [data-slot="text"][data-break="phrase"] {
+    word-break: auto-phrase;
+    line-break: strict;
+    text-wrap: pretty;
+    min-inline-size: 0;
+  }
+  @supports not (word-break: auto-phrase) {
+    [data-slot="text"][data-break="phrase"] {
+      overflow-wrap: anywhere;
+    }
+  }
+
   [data-slot="text"][data-clamp] {
     display: -webkit-box;
     -webkit-box-orient: vertical;