@godxjp/ui 31.16.0 → 31.17.1

package/agent/START-HERE.md

@@ -3,7 +3,7 @@
 You are about to write code against a design system you did not author. This file is the whole
 contract. Read it before you write JSX.
 
-**This catalog describes `@godxjp/ui` 31.16.0.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 31.17.1.** If the project you are editing has a different
 version in its `package.json`, read the pinned catalog for THAT version instead
 (`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
 not exist yet; older, and it hides props that do. Neither failure announces itself.
@@ -56,10 +56,10 @@ Then ask it: `search_components`, `get_component`, `get_tokens`, `get_rule`, `li
    its `importPath`, and its examples. Fetch only the handful you picked in step 1.
 3. `rules.json` — 50 cardinal rules. The ones about raw HTML and hardcoded colour are not
    style advice.
-4. `tokens.json` — 2126 design tokens, each tagged with its `tier`. **If you were handed a
+4. `tokens.json` — 2129 design tokens, each tagged with its `tier`. **If you were handed a
    brand, read the 211 `foundation` entries first** — `--primary`, `--background`,
    `--radius`, `--font-size-base` are the handful everything else derives from. The
-   1811 `component` entries are per-part knobs; reach for one only when a role is
+   1814 `component` entries are per-part knobs; reach for one only when a role is
    right everywhere except one component.
 5. `anti-ai-tells.json` — 26 shapes that make generated UI look generated, each with the
    fix. Read before you reach for a gradient hero or a wall of coloured chips.
@@ -145,7 +145,7 @@ has stopped following the brand.
 |---|---|---|---|
 | `foundation` | 211 | the seeds — `--primary`, `--background`, `--foreground`, `--radius`, `--font-size-base`, `--shadow-color`. Everything below is derived from these | **yes — this is the main road.** Handed a brand colour, this is where it goes: `:root { --primary: <H> <S>% <L>%; }` (HSL components, no `hsl()` wrapper) |
 | `semantic` | 104 | named roles that follow the seeds — `--ring`, `--text-link`, `--primary-hover`, `--overlay-background` | only when the seed is right and ONE role must differ. That role then stops following a later brand change |
-| `component` | 1811 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
+| `component` | 1814 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
 
 A token whose `value` is `initial` is not empty and not broken: `initial` is the guaranteed-invalid
 value, so the real default is computed where the element paints it. Set it and yours wins.

package/agent/components/Badge.json

@@ -49,7 +49,7 @@
       "type": "React.ComponentType<{ className?: string }> | null"
     },
     {
-      "description": "Badge label. When omitted with status, Badge renders the translated lifecycle label or raw status.",
+      "description": "Badge label. When omitted with status, Badge renders the translated lifecycle label or raw status. LONG LABEL CONTRACT (gh#1101): the chip is `max-inline-size: 100%` of its container and never wraps; the label ellipsizes and, when it was cut, opens the full text in the same tooltip as `Text ellipsis={{ tooltip: true }}` — on pointer hover of the label and on keyboard focus of the nearest focusable control around the chip (a row link, a treeitem, a cell button), only while it is actually cut; the chip never becomes a tab stop (gh#1105). A caller's own `title` on the Badge turns the tooltip off. So a Badge in a fixed-width DataTable cell or a narrow Card stays inside it with no extra props; `<Badge><Text ellipsis>` also works. Do not reach for `Text break=\"anywhere\"` to make a chip wrap.",
       "name": "children",
       "type": "ReactNode"
     },
@@ -74,7 +74,7 @@
   "subParts": [
     "StatusBadge"
   ],
-  "tagline": "Plain or lifecycle badge. Use `variant` for static chips, or `status` to auto-map lifecycle keys to semantic tone + icon. Labels never wrap.",
+  "tagline": "Plain or lifecycle badge. Use `variant` for static chips, or `status` to auto-map lifecycle keys to semantic tone + icon. Labels never wrap: a label wider than its container ellipsizes, and its full text opens in a tooltip on hover or on keyboard focus of the control around the chip (gh#1101, gh#1105).",
   "usage": [
     "DO pick the correct variant semantically: `success` (approved/paid), `warning` (pending/overdue), `destructive` (rejected/error), `secondary` (neutral category), `outline` (subtle label), `default` (primary accent). Never force a colour just for aesthetics — agents and screen readers read the variant as intent.",
     "DO use `status` for entity lifecycle statuses (active, draft, pending, cancelled, failed, scheduled, etc.) so the component resolves the correct tone, icon, and i18n label.",

package/agent/components/DataTable.json

@@ -86,7 +86,7 @@
     },
     {
       "defaultValue": "'default'",
-      "description": "Named collection contract — the SAME preset the Table primitive owns, forwarded to the table DataTable renders. 'default' emits NO attribute and matches no selector, so an existing DataTable is byte-identical. 'action-collection' is the canonical dense approval/action queue: below collapseBelow the desktop INTRINSIC column widths give way to the token-owned column-PRIORITY measures (--table-action-collection-*) under table-layout: fixed, cells wrap, and the bordered surface drops its --table-surface-min-inline-size floor — so requester · target · reason · requested date · row actions all stay inside a 390px frame with no horizontal scroll. Mark each column with `priority` on its ColumnDef. Semantics are untouched (no display change, no role rewriting, no card swap), so header association, aria-sort and screen-reader table navigation are identical at 390 and 1440. Measured: table 1182 / 766 / 388px at 1440 / 1024 / 390, document scrollWidth === clientWidth at every width, LTR and RTL. 'stacked-record-collection' is the other direction, for a WIDE, HETEROGENEOUS record set that has no sensible narrow column measure: below collapseBelow the <thead> hides and every <tr> becomes a bordered key-value card (--table-stacked-collection-*). Each cell then carries its column's header inline above the value, DERIVED from the same ColumnDef.header the <th> uses — so the card cannot drift from the table, and a column with a deliberately empty header names itself with ariaLabel (gh#864). The labels are aria-hidden: the real <th> is still in the DOM and remains the accessible-name source, so screen-reader table navigation is unchanged at every width. Reach for this instead of building a parallel Card tree beside the table; two trees for one dataset means two sets of labels to keep in sync.",
+      "description": "Named collection contract — the SAME preset the Table primitive owns, forwarded to the table DataTable renders. 'default' emits NO attribute and matches no selector, so an existing DataTable is byte-identical. 'action-collection' is the canonical dense approval/action queue: below collapseBelow the desktop INTRINSIC column widths give way to the token-owned column-PRIORITY measures (--table-action-collection-*) under table-layout: fixed, cells wrap, and the bordered surface drops its --table-surface-min-inline-size floor — so requester · target · reason · requested date · row actions all stay inside a 390px frame with no horizontal scroll. Mark each column with `priority` on its ColumnDef. Semantics are untouched (no display change, no role rewriting, no card swap), so header association, aria-sort and screen-reader table navigation are identical at 390 and 1440. Measured: table 1182 / 766 / 388px at 1440 / 1024 / 390, document scrollWidth === clientWidth at every width, LTR and RTL. 'stacked-record-collection' is the other direction, for a WIDE, HETEROGENEOUS record set that has no sensible narrow column measure: below collapseBelow the <thead> hides and every <tr> becomes a bordered key-value card (--table-stacked-collection-*). Each cell then carries its column's header inline above the value, DERIVED from the same ColumnDef.header the <th> uses — so the card cannot drift from the table, and a column with a deliberately empty header names itself with ariaLabel (gh#864). In card mode the CARD owns the inline inset: a folded cell has no inline padding of its own (--table-stacked-collection-cell-padding-x, default 0), and an EMPTY cell (content null) prints no label and drops out of the card (gh#1102). The labels are aria-hidden: the real <th> is still in the DOM and remains the accessible-name source, so screen-reader table navigation is unchanged at every width. Reach for this instead of building a parallel Card tree beside the table; two trees for one dataset means two sets of labels to keep in sync.",
       "name": "preset",
       "type": "'default' | 'action-collection' | 'stacked-record-collection'"
     },
@@ -164,9 +164,9 @@
       "type": "{ type?: 'checkbox'|'radio'; selectedRowKeys?: string[]; defaultSelectedRowKeys?: string[]; onChange?: (keys, rows) => void; getCheckboxProps?: (row) => { disabled?, 'aria-label'? }; preserveSelectedRowKeys?: boolean; selections?: true | ({ key, text, onSelect } | DataTable.SELECTION_ALL | DataTable.SELECTION_INVERT | DataTable.SELECTION_NONE)[]; hideSelectAll?: boolean; columnTitle?: ReactNode; selectAllLabel?: string; matching?: { total: number; selected: boolean; onSelectedChange: (selected: boolean) => void } }"
     },
     {
-      "description": "Expandable detail rows (antd expandable). Supplying expandedRowRender adds a leading expand column before the selection column and renders the panel in a real <tr> spanning every column, so the table's grid semantics survive. rowExpandable gates the affordance per row; expandedRowKeys + onExpandedRowsChange make it controlled.",
+      "description": "Expandable detail rows (antd expandable). Supplying expandedRowRender adds a leading expand column before the selection column and renders the panel in a real <tr> spanning every column, so the table's grid semantics survive. rowExpandable gates the affordance per row; expandedRowKeys + onExpandedRowsChange make it controlled. The detail cell is inset like any cell (antd) and wraps (white-space: normal) — retune the inset with --table-row-expanded-padding; flush: true drops it for a detail that owns its inset (a nested table, a ListRow list). Do NOT wrap the detail in Card/CardContent or Flex pad for spacing (gh#1083).",
       "name": "expandable",
-      "type": "{ expandedRowRender?: (row, index, expanded) => ReactNode; rowExpandable?: (row) => boolean; defaultExpandAllRows?: boolean; expandedRowKeys?: string[]; onExpandedRowsChange?: (keys) => void; expandRowByClick?: boolean; columnTitle?: ReactNode }"
+      "type": "{ expandedRowRender?: (row, index, expanded) => ReactNode; rowExpandable?: (row) => boolean; defaultExpandAllRows?: boolean; expandedRowKeys?: string[]; onExpandedRowsChange?: (keys) => void; expandRowByClick?: boolean; columnTitle?: ReactNode; flush?: boolean }"
     },
     {
       "description": "Footer totals row (antd summary), rendered in a real <tfoot> so it keeps the column widths and the screen-reader row navigation. Receives the rows currently rendered (post sort/filter/page), so a page total and a grand total are both expressible. Compose the return with <TableRow>/<TableCell> from the Table primitive.",

package/agent/components/Table.json

@@ -69,7 +69,7 @@
     },
     {
       "defaultValue": "\"default\"",
-      "description": "Named collection contract. \"default\" emits no attribute and keeps the plain table. \"action-collection\" is the canonical dense approval/action queue: the desktop INTRINSIC column widths (which make a five-column queue wider than its card and force a horizontal scroll at 390) are replaced by table-layout: fixed plus the token-owned column PRIORITY measures (--table-action-collection-*), and cells wrap. Mark each column with `priority` on its TableHead AND its TableCell. Semantics are untouched — no display change, no role rewriting, no card transformation — so header association, aria-sort and screen-reader table navigation are identical at 390 and 1440. \"stacked-record-collection\" is the other direction, for a WIDE, HETEROGENEOUS record set with no sensible narrow column measure: below collapseBelow the <thead> hides and every <tr> becomes a bordered key-value card (--table-stacked-collection-*). Give each TableCell a `label` — its column header — because the <th> association it normally reads from is the thing that just went away; DataTable derives that label from ColumnDef.header for you (gh#864). The label is aria-hidden and the real <th> stays in the DOM, so the accessible name and table navigation are unchanged.",
+      "description": "Named collection contract. \"default\" emits no attribute and keeps the plain table. \"action-collection\" is the canonical dense approval/action queue: the desktop INTRINSIC column widths (which make a five-column queue wider than its card and force a horizontal scroll at 390) are replaced by table-layout: fixed plus the token-owned column PRIORITY measures (--table-action-collection-*), and cells wrap. Mark each column with `priority` on its TableHead AND its TableCell. Semantics are untouched — no display change, no role rewriting, no card transformation — so header association, aria-sort and screen-reader table navigation are identical at 390 and 1440. \"stacked-record-collection\" is the other direction, for a WIDE, HETEROGENEOUS record set with no sensible narrow column measure: below collapseBelow the <thead> hides and every <tr> becomes a bordered key-value card (--table-stacked-collection-*). Give each TableCell a `label` — its column header — because the <th> association it normally reads from is the thing that just went away; DataTable derives that label from ColumnDef.header for you (gh#864). In card mode the CARD owns the inline inset: a folded cell has no inline padding of its own (--table-stacked-collection-cell-padding-x, default 0), and an EMPTY cell (content null) prints no label and drops out of the card (gh#1102). The label is aria-hidden and the real <th> stays in the DOM, so the accessible name and table navigation are unchanged.",
       "name": "preset",
       "type": "\"default\" | \"action-collection\" | \"stacked-record-collection\""
     },

package/agent/components/Text.json

@@ -49,7 +49,7 @@
     },
     {
       "defaultValue": "\"normal\"",
-      "description": "Whitespace handling. 'normal' is CSS's own behaviour (newlines and space runs collapse) and stays the default. 'pre-wrap' is for text a PERSON typed — a plain-text note, an issue description, a pasted log — where the line breaks and the indentation are CONTENT: it keeps both, still wraps long lines at the container edge, and breaks an over-long unbroken token (a URL, an id) instead of overflowing. Use it INSTEAD of `className=\"whitespace-pre-wrap\"`. Precedence is explicit: `truncate` is a single-line contract and wins (dev builds warn); `clamp` COMPOSES with it, showing the first N preserved lines. Not for rendered Markdown/HTML — that is `Prose`, which styles rendered elements and does nothing to whitespace.",
+      "description": "Whitespace handling. 'normal' is CSS's own behaviour (newlines and space runs collapse) and stays the default; passed explicitly it also releases a `nowrap` the text inherits (a table cell's, gh#1083). 'pre-wrap' is for text a PERSON typed — a plain-text note, an issue description, a pasted log — where the line breaks and the indentation are CONTENT: it keeps both, still wraps long lines at the container edge, and breaks an over-long unbroken token (a URL, an id) instead of overflowing. Use it INSTEAD of `className=\"whitespace-pre-wrap\"`. Precedence is explicit: `truncate` is a single-line contract and wins (dev builds warn); `clamp` COMPOSES with it, showing the first N preserved lines. Not for rendered Markdown/HTML — that is `Prose`, which styles rendered elements and does nothing to whitespace.",
       "name": "whitespace",
       "type": "\"normal\" | \"pre-wrap\""
     },

package/agent/components-index.json

@@ -239,7 +239,7 @@
   {
     "group": "data-display",
     "name": "Badge",
-    "tagline": "Plain or lifecycle badge. Use `variant` for static chips, or `status` to auto-map lifecycle keys to semantic tone + icon. Labels never wrap."
+    "tagline": "Plain or lifecycle badge. Use `variant` for static chips, or `status` to auto-map lifecycle keys to semantic tone + icon. Labels never wrap: a label wider than its container ellipsizes, and its full text opens in a tooltip on hover or on keyboard focus of the control around the chip (gh#1101, gh#1105)."
   },
   {
     "group": "data-display",

package/agent/components.json

@@ -2668,7 +2668,7 @@
       },
       {
         "defaultValue": "\"normal\"",
-        "description": "Whitespace handling. 'normal' is CSS's own behaviour (newlines and space runs collapse) and stays the default. 'pre-wrap' is for text a PERSON typed — a plain-text note, an issue description, a pasted log — where the line breaks and the indentation are CONTENT: it keeps both, still wraps long lines at the container edge, and breaks an over-long unbroken token (a URL, an id) instead of overflowing. Use it INSTEAD of `className=\"whitespace-pre-wrap\"`. Precedence is explicit: `truncate` is a single-line contract and wins (dev builds warn); `clamp` COMPOSES with it, showing the first N preserved lines. Not for rendered Markdown/HTML — that is `Prose`, which styles rendered elements and does nothing to whitespace.",
+        "description": "Whitespace handling. 'normal' is CSS's own behaviour (newlines and space runs collapse) and stays the default; passed explicitly it also releases a `nowrap` the text inherits (a table cell's, gh#1083). 'pre-wrap' is for text a PERSON typed — a plain-text note, an issue description, a pasted log — where the line breaks and the indentation are CONTENT: it keeps both, still wraps long lines at the container edge, and breaks an over-long unbroken token (a URL, an id) instead of overflowing. Use it INSTEAD of `className=\"whitespace-pre-wrap\"`. Precedence is explicit: `truncate` is a single-line contract and wins (dev builds warn); `clamp` COMPOSES with it, showing the first N preserved lines. Not for rendered Markdown/HTML — that is `Prose`, which styles rendered elements and does nothing to whitespace.",
         "name": "whitespace",
         "type": "\"normal\" | \"pre-wrap\""
       },
@@ -3465,7 +3465,7 @@
       },
       {
         "defaultValue": "'default'",
-        "description": "Named collection contract — the SAME preset the Table primitive owns, forwarded to the table DataTable renders. 'default' emits NO attribute and matches no selector, so an existing DataTable is byte-identical. 'action-collection' is the canonical dense approval/action queue: below collapseBelow the desktop INTRINSIC column widths give way to the token-owned column-PRIORITY measures (--table-action-collection-*) under table-layout: fixed, cells wrap, and the bordered surface drops its --table-surface-min-inline-size floor — so requester · target · reason · requested date · row actions all stay inside a 390px frame with no horizontal scroll. Mark each column with `priority` on its ColumnDef. Semantics are untouched (no display change, no role rewriting, no card swap), so header association, aria-sort and screen-reader table navigation are identical at 390 and 1440. Measured: table 1182 / 766 / 388px at 1440 / 1024 / 390, document scrollWidth === clientWidth at every width, LTR and RTL. 'stacked-record-collection' is the other direction, for a WIDE, HETEROGENEOUS record set that has no sensible narrow column measure: below collapseBelow the <thead> hides and every <tr> becomes a bordered key-value card (--table-stacked-collection-*). Each cell then carries its column's header inline above the value, DERIVED from the same ColumnDef.header the <th> uses — so the card cannot drift from the table, and a column with a deliberately empty header names itself with ariaLabel (gh#864). The labels are aria-hidden: the real <th> is still in the DOM and remains the accessible-name source, so screen-reader table navigation is unchanged at every width. Reach for this instead of building a parallel Card tree beside the table; two trees for one dataset means two sets of labels to keep in sync.",
+        "description": "Named collection contract — the SAME preset the Table primitive owns, forwarded to the table DataTable renders. 'default' emits NO attribute and matches no selector, so an existing DataTable is byte-identical. 'action-collection' is the canonical dense approval/action queue: below collapseBelow the desktop INTRINSIC column widths give way to the token-owned column-PRIORITY measures (--table-action-collection-*) under table-layout: fixed, cells wrap, and the bordered surface drops its --table-surface-min-inline-size floor — so requester · target · reason · requested date · row actions all stay inside a 390px frame with no horizontal scroll. Mark each column with `priority` on its ColumnDef. Semantics are untouched (no display change, no role rewriting, no card swap), so header association, aria-sort and screen-reader table navigation are identical at 390 and 1440. Measured: table 1182 / 766 / 388px at 1440 / 1024 / 390, document scrollWidth === clientWidth at every width, LTR and RTL. 'stacked-record-collection' is the other direction, for a WIDE, HETEROGENEOUS record set that has no sensible narrow column measure: below collapseBelow the <thead> hides and every <tr> becomes a bordered key-value card (--table-stacked-collection-*). Each cell then carries its column's header inline above the value, DERIVED from the same ColumnDef.header the <th> uses — so the card cannot drift from the table, and a column with a deliberately empty header names itself with ariaLabel (gh#864). In card mode the CARD owns the inline inset: a folded cell has no inline padding of its own (--table-stacked-collection-cell-padding-x, default 0), and an EMPTY cell (content null) prints no label and drops out of the card (gh#1102). The labels are aria-hidden: the real <th> is still in the DOM and remains the accessible-name source, so screen-reader table navigation is unchanged at every width. Reach for this instead of building a parallel Card tree beside the table; two trees for one dataset means two sets of labels to keep in sync.",
         "name": "preset",
         "type": "'default' | 'action-collection' | 'stacked-record-collection'"
       },
@@ -3543,9 +3543,9 @@
         "type": "{ type?: 'checkbox'|'radio'; selectedRowKeys?: string[]; defaultSelectedRowKeys?: string[]; onChange?: (keys, rows) => void; getCheckboxProps?: (row) => { disabled?, 'aria-label'? }; preserveSelectedRowKeys?: boolean; selections?: true | ({ key, text, onSelect } | DataTable.SELECTION_ALL | DataTable.SELECTION_INVERT | DataTable.SELECTION_NONE)[]; hideSelectAll?: boolean; columnTitle?: ReactNode; selectAllLabel?: string; matching?: { total: number; selected: boolean; onSelectedChange: (selected: boolean) => void } }"
       },
       {
-        "description": "Expandable detail rows (antd expandable). Supplying expandedRowRender adds a leading expand column before the selection column and renders the panel in a real <tr> spanning every column, so the table's grid semantics survive. rowExpandable gates the affordance per row; expandedRowKeys + onExpandedRowsChange make it controlled.",
+        "description": "Expandable detail rows (antd expandable). Supplying expandedRowRender adds a leading expand column before the selection column and renders the panel in a real <tr> spanning every column, so the table's grid semantics survive. rowExpandable gates the affordance per row; expandedRowKeys + onExpandedRowsChange make it controlled. The detail cell is inset like any cell (antd) and wraps (white-space: normal) — retune the inset with --table-row-expanded-padding; flush: true drops it for a detail that owns its inset (a nested table, a ListRow list). Do NOT wrap the detail in Card/CardContent or Flex pad for spacing (gh#1083).",
         "name": "expandable",
-        "type": "{ expandedRowRender?: (row, index, expanded) => ReactNode; rowExpandable?: (row) => boolean; defaultExpandAllRows?: boolean; expandedRowKeys?: string[]; onExpandedRowsChange?: (keys) => void; expandRowByClick?: boolean; columnTitle?: ReactNode }"
+        "type": "{ expandedRowRender?: (row, index, expanded) => ReactNode; rowExpandable?: (row) => boolean; defaultExpandAllRows?: boolean; expandedRowKeys?: string[]; onExpandedRowsChange?: (keys) => void; expandRowByClick?: boolean; columnTitle?: ReactNode; flush?: boolean }"
       },
       {
         "description": "Footer totals row (antd summary), rendered in a real <tfoot> so it keeps the column widths and the screen-reader row navigation. Receives the rows currently rendered (post sort/filter/page), so a page total and a grand total are both expressible. Compose the return with <TableRow>/<TableCell> from the Table primitive.",
@@ -4081,7 +4081,7 @@
         "type": "React.ComponentType<{ className?: string }> | null"
       },
       {
-        "description": "Badge label. When omitted with status, Badge renders the translated lifecycle label or raw status.",
+        "description": "Badge label. When omitted with status, Badge renders the translated lifecycle label or raw status. LONG LABEL CONTRACT (gh#1101): the chip is `max-inline-size: 100%` of its container and never wraps; the label ellipsizes and, when it was cut, opens the full text in the same tooltip as `Text ellipsis={{ tooltip: true }}` — on pointer hover of the label and on keyboard focus of the nearest focusable control around the chip (a row link, a treeitem, a cell button), only while it is actually cut; the chip never becomes a tab stop (gh#1105). A caller's own `title` on the Badge turns the tooltip off. So a Badge in a fixed-width DataTable cell or a narrow Card stays inside it with no extra props; `<Badge><Text ellipsis>` also works. Do not reach for `Text break=\"anywhere\"` to make a chip wrap.",
         "name": "children",
         "type": "ReactNode"
       },
@@ -4106,7 +4106,7 @@
     "subParts": [
       "StatusBadge"
     ],
-    "tagline": "Plain or lifecycle badge. Use `variant` for static chips, or `status` to auto-map lifecycle keys to semantic tone + icon. Labels never wrap.",
+    "tagline": "Plain or lifecycle badge. Use `variant` for static chips, or `status` to auto-map lifecycle keys to semantic tone + icon. Labels never wrap: a label wider than its container ellipsizes, and its full text opens in a tooltip on hover or on keyboard focus of the control around the chip (gh#1101, gh#1105).",
     "usage": [
       "DO pick the correct variant semantically: `success` (approved/paid), `warning` (pending/overdue), `destructive` (rejected/error), `secondary` (neutral category), `outline` (subtle label), `default` (primary accent). Never force a colour just for aesthetics — agents and screen readers read the variant as intent.",
       "DO use `status` for entity lifecycle statuses (active, draft, pending, cancelled, failed, scheduled, etc.) so the component resolves the correct tone, icon, and i18n label.",
@@ -5261,7 +5261,7 @@
       },
       {
         "defaultValue": "\"default\"",
-        "description": "Named collection contract. \"default\" emits no attribute and keeps the plain table. \"action-collection\" is the canonical dense approval/action queue: the desktop INTRINSIC column widths (which make a five-column queue wider than its card and force a horizontal scroll at 390) are replaced by table-layout: fixed plus the token-owned column PRIORITY measures (--table-action-collection-*), and cells wrap. Mark each column with `priority` on its TableHead AND its TableCell. Semantics are untouched — no display change, no role rewriting, no card transformation — so header association, aria-sort and screen-reader table navigation are identical at 390 and 1440. \"stacked-record-collection\" is the other direction, for a WIDE, HETEROGENEOUS record set with no sensible narrow column measure: below collapseBelow the <thead> hides and every <tr> becomes a bordered key-value card (--table-stacked-collection-*). Give each TableCell a `label` — its column header — because the <th> association it normally reads from is the thing that just went away; DataTable derives that label from ColumnDef.header for you (gh#864). The label is aria-hidden and the real <th> stays in the DOM, so the accessible name and table navigation are unchanged.",
+        "description": "Named collection contract. \"default\" emits no attribute and keeps the plain table. \"action-collection\" is the canonical dense approval/action queue: the desktop INTRINSIC column widths (which make a five-column queue wider than its card and force a horizontal scroll at 390) are replaced by table-layout: fixed plus the token-owned column PRIORITY measures (--table-action-collection-*), and cells wrap. Mark each column with `priority` on its TableHead AND its TableCell. Semantics are untouched — no display change, no role rewriting, no card transformation — so header association, aria-sort and screen-reader table navigation are identical at 390 and 1440. \"stacked-record-collection\" is the other direction, for a WIDE, HETEROGENEOUS record set with no sensible narrow column measure: below collapseBelow the <thead> hides and every <tr> becomes a bordered key-value card (--table-stacked-collection-*). Give each TableCell a `label` — its column header — because the <th> association it normally reads from is the thing that just went away; DataTable derives that label from ColumnDef.header for you (gh#864). In card mode the CARD owns the inline inset: a folded cell has no inline padding of its own (--table-stacked-collection-cell-padding-x, default 0), and an EMPTY cell (content null) prints no label and drops out of the card (gh#1102). The label is aria-hidden and the real <th> stays in the DOM, so the accessible name and table navigation are unchanged.",
         "name": "preset",
         "type": "\"default\" | \"action-collection\" | \"stacked-record-collection\""
       },

package/agent/index.json

@@ -4,7 +4,7 @@
     "components": 179,
     "patterns": 21,
     "rules": 50,
-    "tokens": 2126,
+    "tokens": 2129,
     "vocabulary": 14
   },
   "files": [
@@ -48,19 +48,19 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.16.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.17.1/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
   "tokenTiers": {
     "component": "per-part knobs, --{component}-{part}-{property}; usually leave these alone",
     "counts": {
-      "component": 1811,
+      "component": 1814,
       "foundation": 211,
       "semantic": 104
     },
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "31.16.0"
+  "version": "31.17.1"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 179 components, 2126 design tokens,
-> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.16.0.
+> A Japanese-enterprise React design system: 179 components, 2129 design tokens,
+> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.17.1.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@31.16.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@31.17.1`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -18,7 +18,7 @@ that can only fetch URLs.
 - [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 48 KB — all 179 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/<Name>.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–36 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
 - [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.2 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
-- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 104 `semantic` roles, 1811 `component` knobs.
+- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 104 `semantic` roles, 1814 `component` knobs.
 - [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
 - [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 50 cardinal rules.
 - [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 26 shapes that make generated UI look generated, each with its fix.
@@ -26,7 +26,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v31.16.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v31.17.1/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/agent/tokens.json

@@ -9089,6 +9089,12 @@
     "tier": "component",
     "value": "8rem"
   },
+  {
+    "description": "Ceiling of the menu surface's intrinsic width (gh#1103). The surface is `width: max-content` so its width never depends on the provisional `left` it is first laid out at; this keeps a long label inside the viewport, less React Aria's default 12px container padding each side.",
+    "name": "--dropdown-content-max-width",
+    "tier": "component",
+    "value": "calc(100vw - 1.5rem)"
+  },
   {
     "description": "THE MENU SURFACE (gh#880). `.ui-dropdown-menu-content` painted `hsl(var(--popover))` with no knob, while `.ui-popover-content` — the same kind of floating panel, in the same portal — had `--popover-surface-background`. That asymmetry is the shape of defect this repo keeps paying for: the theme reaches two of the three menu surfaces and the third silently stays opaque. A DROPDOWN IS THE MOST OPAQUE MEMBER OF THE FAMILY, by the standard's own rule (docs/GLASSMORPHISM-STANDARD.md §4): it is small, it sits over arbitrary content, and a 7-line menu over a photograph is unreadable at a card's alpha. It therefore gets its OWN fill knob rather than sharing the popover's — the two are meant to be able to differ. default = hsl(var(--popover)) at the call site",
     "name": "--dropdown-content-background",
@@ -11699,6 +11705,12 @@
     "tier": "component",
     "value": "initial"
   },
+  {
+    "description": "Inset of the expanded detail cell (gh#1083). `initial` so the default — the cell's own padding, var(--table-cell-padding-y) var(--table-cell-space-x), which follows density — re-resolves at the call site. `expandable.flush` drops it.",
+    "name": "--table-row-expanded-padding",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Gap between the header checkbox and the `selections` dropdown trigger beside it.",
     "name": "--table-selection-menu-gap",
@@ -11867,6 +11879,12 @@
     "tier": "component",
     "value": "var(--space-stack-xs)"
   },
+  {
+    "description": "Inline inset of a folded cell inside its card (gh#1102). 0: the card's own --table-stacked-collection-card-padding-x is the inset, so a value line gets the card's full content width instead of losing the table's cell padding on both sides.",
+    "name": "--table-stacked-collection-cell-padding-x",
+    "tier": "component",
+    "value": "0"
+  },
   {
     "description": "Table component tokens: row height, cell padding.",
     "name": "--table-stacked-collection-label-font-size",

package/dist/components/data-display/badge.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import {
@@ -14,6 +14,7 @@ import {
   XCircle
 } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { EllipsisTooltip } from "../feedback/tooltip.js";
 import { cn } from "../../lib/utils.js";
 import {
   toneDestructiveClass,
@@ -140,50 +141,54 @@ function Badge({
   const removeLabel = stringLabel ?? (deriveFromDom ? renderedLabel : void 0);
   const named = props["aria-label"] != null || props["aria-labelledby"] != null;
   const nameRole = named && props.role === void 0 && !onRemove ? "img" : void 0;
-  return /* @__PURE__ */ jsxs(
-    Element,
-    {
-      "data-slot": "badge",
-      role: nameRole,
-      "data-tone": tinted ? void 0 : resolvedTone,
-      "data-tinted": tinted ? "" : void 0,
-      "data-shape": shape ?? "default",
-      "data-tabular": tabular ? "" : void 0,
-      "data-removable": onRemove ? "" : void 0,
-      className: cn(
-        badgeVariants({
-          // A status tone paints the chip itself (`badgeToneClass` below), so the variant must not
-          // also paint one — see the `toned` variant. An EXPLICIT `variant` still wins, which is
-          // how `<Badge variant="outline" tone="success">` keeps its border treatment.
-          variant: tinted ? "tinted" : variant ?? (resolvedTone === "default" ? "default" : "toned"),
-          shape: shape ?? "default"
-        }),
-        tinted ? void 0 : badgeToneClass[resolvedTone],
-        className
-      ),
-      style: tinted ? { ...style, ["--badge-color"]: color } : style,
-      ...props,
-      children: [
-        ResolvedIcon ? /* @__PURE__ */ jsx(ResolvedIcon, { "data-slot": "badge-icon", "aria-hidden": "true" }) : null,
-        resolvedChildren != null ? /* @__PURE__ */ jsx("span", { ref: labelRef, "data-slot": "badge-label", children: resolvedChildren }) : null,
-        onRemove ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "data-slot": "badge-remove",
-            className: "ui-control-inline-affix-action ui-badge-remove",
-            "aria-label": removeLabelProp ?? (removeLabel != null ? t("navigation.filterBar.removeFilter", { label: removeLabel }) : t("common.delete")),
-            onClick: (event) => {
-              event.stopPropagation();
-              onRemove();
-            },
-            disabled: removeDisabled,
-            children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-          }
-        ) : null
-      ]
-    }
-  );
+  const labelTooltip = resolvedChildren != null && props.title == null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Element,
+      {
+        "data-slot": "badge",
+        role: nameRole,
+        "data-tone": tinted ? void 0 : resolvedTone,
+        "data-tinted": tinted ? "" : void 0,
+        "data-shape": shape ?? "default",
+        "data-tabular": tabular ? "" : void 0,
+        "data-removable": onRemove ? "" : void 0,
+        className: cn(
+          badgeVariants({
+            // A status tone paints the chip itself (`badgeToneClass` below), so the variant must not
+            // also paint one — see the `toned` variant. An EXPLICIT `variant` still wins, which is
+            // how `<Badge variant="outline" tone="success">` keeps its border treatment.
+            variant: tinted ? "tinted" : variant ?? (resolvedTone === "default" ? "default" : "toned"),
+            shape: shape ?? "default"
+          }),
+          tinted ? void 0 : badgeToneClass[resolvedTone],
+          className
+        ),
+        style: tinted ? { ...style, ["--badge-color"]: color } : style,
+        ...props,
+        children: [
+          ResolvedIcon ? /* @__PURE__ */ jsx(ResolvedIcon, { "data-slot": "badge-icon", "aria-hidden": "true" }) : null,
+          resolvedChildren != null ? /* @__PURE__ */ jsx("span", { ref: labelRef, "data-slot": "badge-label", children: resolvedChildren }) : null,
+          onRemove ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "badge-remove",
+              className: "ui-control-inline-affix-action ui-badge-remove",
+              "aria-label": removeLabelProp ?? (removeLabel != null ? t("navigation.filterBar.removeFilter", { label: removeLabel }) : t("common.delete")),
+              onClick: (event) => {
+                event.stopPropagation();
+                onRemove();
+              },
+              disabled: removeDisabled,
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+            }
+          ) : null
+        ]
+      }
+    ),
+    labelTooltip ? /* @__PURE__ */ jsx(EllipsisTooltip, { anchorRef: labelRef, title: resolvedChildren }) : null
+  ] });
 }
 const StatusBadge = Badge;
 export {

package/dist/components/data-display/data-table.js

@@ -1356,7 +1356,7 @@ DataTable.Content = function DataTableContent() {
                         {
                           className: "ui-data-table-expanded-row hover:bg-transparent",
                           "data-expanded-row": "",
-                          children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, flush: true, children: expandable.expandedRowRender(original, rowIndex, true) })
+                          children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, flush: expandable.flush, children: expandable.expandedRowRender(original, rowIndex, true) })
                         }
                       ) : null
                     ] }, row.id);

package/dist/components/data-display/image.js

@@ -412,7 +412,12 @@ const ImageRoot = React.forwardRef(function Image({
     status: "loading"
   });
   const status = load.src === src ? load.status : "loading";
-  const setStatus = React.useCallback((next) => setLoad({ src, status: next }), [src]);
+  const setStatus = React.useCallback(
+    (next) => setLoad(
+      (prev) => prev.src === src && prev.status === "error" ? prev : { src, status: next }
+    ),
+    [src]
+  );
   const imgRef = React.useRef(null);
   const setImgRef = React.useCallback(
     (node) => {

package/dist/components/data-display/table.js

@@ -228,6 +228,7 @@ const TableCell = React.forwardRef(
     ...props
   }, ref) => {
     const preset = React.useContext(TablePresetContext);
+    const body = priority === "actions" && preset === "action-collection" ? /* @__PURE__ */ jsx("span", { className: "ui-table-actions-content", children }) : children;
     return /* @__PURE__ */ jsxs(
       "td",
       {
@@ -247,8 +248,8 @@ const TableCell = React.forwardRef(
         },
         ...props,
         children: [
-          label !== void 0 ? /* @__PURE__ */ jsx("span", { className: "ui-table-stacked-collection-label", "aria-hidden": "true", children: label }) : null,
-          priority === "actions" && preset === "action-collection" ? /* @__PURE__ */ jsx("span", { className: "ui-table-actions-content", children }) : children
+          label !== void 0 && children != null && children !== false && children !== "" ? /* @__PURE__ */ jsx("span", { className: "ui-table-stacked-collection-label", "aria-hidden": "true", children: label }) : null,
+          label !== void 0 ? /* @__PURE__ */ jsx("span", { className: "ui-table-stacked-collection-value", children: body }) : body
         ]
       }
     );

package/dist/components/feedback/tooltip.js

@@ -125,7 +125,8 @@ function TooltipContent({
 const FOCUS_HOST = 'a[href], button, input, select, textarea, summary, [tabindex]:is([role="treeitem"], [role="gridcell"], [role="row"], [role="option"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="link"], [role="button"], [role="checkbox"], [role="radio"], [role="switch"])';
 function isClipping(node) {
   const box = node.querySelector(':scope > [data-slot="typography-content"]') ?? node;
-  return box.scrollWidth > box.clientWidth || box.scrollHeight > box.clientHeight;
+  if (box.scrollWidth > box.clientWidth) return true;
+  return box.scrollHeight > box.clientHeight && getComputedStyle(box).overflowY !== "visible";
 }
 function isFocusVisible(node) {
   try {

package/dist/components/general/typography.js

@@ -469,9 +469,9 @@ const TextBase = React.forwardRef((props, ref) => {
     // always been, on the element itself.
     "data-truncate": truncating && !block.wrapsContent ? "" : void 0,
     "data-clamp": effectiveClamp !== void 0 && !block.wrapsContent ? "" : void 0,
-    // Inert default: `normal` is CSS's own behaviour, so it emits no attribute and there is no
-    // `[data-whitespace="normal"]` rule to lose a specificity argument with anything.
-    "data-whitespace": whitespace === "pre-wrap" && !truncating ? "pre-wrap" : void 0,
+    // Unset emits nothing. An EXPLICIT `normal` is emitted (gh#1083): it releases a `nowrap` the
+    // 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,

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": "31.16.0",
+  "version": "31.17.1",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/props/registry.d.ts

@@ -322,7 +322,7 @@ export declare const VOCABULARY_REGISTRY: {
     readonly TableExpandableProp: {
         readonly file: "vocabulary/data.prop.ts";
         readonly category: "data";
-        readonly description: "DataTable expandable-row config — expandedRowRender | rowExpandable | defaultExpandAllRows | expandedRowKeys | onExpandedRowsChange | expandRowByClick (antd/rc-table ExpandableConfig)";
+        readonly description: "DataTable expandable-row config — expandedRowRender | rowExpandable | defaultExpandAllRows | expandedRowKeys | onExpandedRowsChange | expandRowByClick | flush (antd/rc-table ExpandableConfig; the detail cell is padded by default, gh#1083)";
     };
     readonly TableSummaryProp: {
         readonly file: "vocabulary/data.prop.ts";

package/dist/props/registry.js

@@ -320,7 +320,7 @@ const VOCABULARY_REGISTRY = {
   TableExpandableProp: {
     file: "vocabulary/data.prop.ts",
     category: "data",
-    description: "DataTable expandable-row config \u2014 expandedRowRender | rowExpandable | defaultExpandAllRows | expandedRowKeys | onExpandedRowsChange | expandRowByClick (antd/rc-table ExpandableConfig)"
+    description: "DataTable expandable-row config \u2014 expandedRowRender | rowExpandable | defaultExpandAllRows | expandedRowKeys | onExpandedRowsChange | expandRowByClick | flush (antd/rc-table ExpandableConfig; the detail cell is padded by default, gh#1083)"
   },
   TableSummaryProp: {
     file: "vocabulary/data.prop.ts",

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

@@ -271,6 +271,12 @@ export type TableExpandableProp<T> = {
     /** Clicking anywhere on the row toggles it (antd `expandRowByClick`). */
     expandRowByClick?: boolean;
     columnTitle?: React.ReactNode;
+    /**
+     * The detail reaches the cell edges: no inset (gh#1083). Off by default — the expanded cell is
+     * padded like any other cell (antd), retuned by `--table-row-expanded-padding`. Set it for a
+     * detail that owns its inset, such as a nested table or a `ListRow` list.
+     */
+    flush?: FlushProp;
 };
 /** Footer totals row — receives the rows currently rendered (antd/rc-table `summary`). */
 export type TableSummaryProp<T> = (rows: readonly T[]) => React.ReactNode;

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

@@ -90,6 +90,7 @@ export type TextAlignProp = "start" | "center" | "end";
  * `normal` is CSS's own behaviour and the default: newlines and runs of spaces collapse. That is
  * right for a label and wrong for text a PERSON typed into a textarea — a plain-text note, a
  * pasted log, an issue description — where the line breaks and the indentation ARE content.
+ * Passed explicitly, `normal` also releases a `nowrap` the text inherits (a table cell's, gh#1083).
  *
  * `pre-wrap` keeps both and still wraps at the container's edge, so the block cannot force a
  * horizontal scrollbar the way `pre` would. It is a closed union rather than a boolean because the

package/dist/styles/badge-layout.css

@@ -5,6 +5,11 @@
     display: inline-flex;
 
     inline-size: fit-content;
+
+    max-inline-size: 100%;
+    min-inline-size: 0;
+
+    box-sizing: border-box;
     align-items: center;
 
     vertical-align: middle;
@@ -21,6 +26,13 @@
     white-space: nowrap;
   }
 
+  [data-slot="badge-label"] {
+    min-inline-size: 0;
+    overflow-x: clip;
+    overflow-y: visible;
+    text-overflow: ellipsis;
+  }
+
   @supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
     [data-slot="badge-label"] {
       text-box-trim: trim-both;

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.16.0",
+  "version": "31.17.1",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -196,6 +196,7 @@
     },
     "Badge": {
       "layers": [
+        "dialog-layout.css",
         "badge-layout.css"
       ]
     },

package/dist/styles/navigation-layout.css

@@ -719,6 +719,9 @@
 
     z-index: var(--overlay-z-index);
     min-width: var(--menu-content-min-width);
+
+    width: max-content;
+    max-width: var(--dropdown-content-max-width);
     border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
     border: var(--stroke-hairline) solid hsl(var(--border));
 

package/dist/styles/table-layout.css

@@ -546,6 +546,22 @@
     );
   }
 
+  .ui-data-table-expanded-row > [data-slot="table-cell"]:not([data-flush]) {
+    white-space: normal;
+    padding: var(
+      --table-row-expanded-padding,
+      var(--table-cell-padding-y) var(--table-cell-space-x, var(--space-section-active))
+    );
+  }
+
+  .ui-data-table-expanded-row > [data-slot="table-cell"][data-flush] {
+    white-space: normal;
+  }
+
+  .ui-table-stacked-collection-value {
+    display: contents;
+  }
+
   .ui-data-table-summary {
     background-color: var(--table-summary-background, hsl(var(--muted)));
     font-weight: var(--font-weight-medium);
@@ -914,10 +930,18 @@
     [data-collapse-below="sm"] [data-slot="table-cell"] {
       display: block;
       padding-block: var(--table-stacked-collection-cell-padding-y);
+
+      padding-inline: var(--table-stacked-collection-cell-padding-x);
       white-space: normal;
       overflow-wrap: anywhere;
     }
 
+    [data-collapse-below="sm"] [data-slot="table-cell"]:empty,
+    [data-collapse-below="sm"]
+      [data-slot="table-cell"]:has(> .ui-table-stacked-collection-value:empty) {
+      display: none;
+    }
+
     [data-collapse-below="sm"] .ui-table-stacked-collection-label {
       display: block;
       font-size: var(--table-stacked-collection-label-font-size);
@@ -958,10 +982,17 @@
     [data-collapse-below="md"] [data-slot="table-cell"] {
       display: block;
       padding-block: var(--table-stacked-collection-cell-padding-y);
+      padding-inline: var(--table-stacked-collection-cell-padding-x);
       white-space: normal;
       overflow-wrap: anywhere;
     }
 
+    [data-collapse-below="md"] [data-slot="table-cell"]:empty,
+    [data-collapse-below="md"]
+      [data-slot="table-cell"]:has(> .ui-table-stacked-collection-value:empty) {
+      display: none;
+    }
+
     [data-collapse-below="md"] .ui-table-stacked-collection-label {
       display: block;
       font-size: var(--table-stacked-collection-label-font-size);
@@ -1002,10 +1033,17 @@
     [data-collapse-below="lg"] [data-slot="table-cell"] {
       display: block;
       padding-block: var(--table-stacked-collection-cell-padding-y);
+      padding-inline: var(--table-stacked-collection-cell-padding-x);
       white-space: normal;
       overflow-wrap: anywhere;
     }
 
+    [data-collapse-below="lg"] [data-slot="table-cell"]:empty,
+    [data-collapse-below="lg"]
+      [data-slot="table-cell"]:has(> .ui-table-stacked-collection-value:empty) {
+      display: none;
+    }
+
     [data-collapse-below="lg"] .ui-table-stacked-collection-label {
       display: block;
       font-size: var(--table-stacked-collection-label-font-size);
@@ -1046,10 +1084,17 @@
     [data-collapse-below="xl"] [data-slot="table-cell"] {
       display: block;
       padding-block: var(--table-stacked-collection-cell-padding-y);
+      padding-inline: var(--table-stacked-collection-cell-padding-x);
       white-space: normal;
       overflow-wrap: anywhere;
     }
 
+    [data-collapse-below="xl"] [data-slot="table-cell"]:empty,
+    [data-collapse-below="xl"]
+      [data-slot="table-cell"]:has(> .ui-table-stacked-collection-value:empty) {
+      display: none;
+    }
+
     [data-collapse-below="xl"] .ui-table-stacked-collection-label {
       display: block;
       font-size: var(--table-stacked-collection-label-font-size);

package/dist/styles/text-layout.css

@@ -155,6 +155,10 @@
     min-width: 0;
   }
 
+  [data-slot="text"][data-whitespace="normal"] {
+    white-space: normal;
+  }
+
   [data-slot="text"][data-whitespace="pre-wrap"] {
     white-space: pre-wrap;
     overflow-wrap: break-word;

package/dist/tokens/components/navigation.css

@@ -171,6 +171,8 @@
 
   --dropdown-content-min-width: 8rem;
 
+  --dropdown-content-max-width: calc(100vw - 1.5rem);
+
   --dropdown-content-background: initial;
   --dropdown-content-backdrop-blur-size: initial;
 

package/dist/tokens/components/table.css

@@ -41,6 +41,8 @@
 
   --table-row-expanded-background: initial;
 
+  --table-row-expanded-padding: initial;
+
   --table-selection-menu-gap: var(--space-1);
 
   --table-row-striped-background: initial;
@@ -85,6 +87,8 @@
   --table-stacked-collection-card-padding-x: var(--space-inline-md);
   --table-stacked-collection-card-gap: var(--space-stack-sm);
   --table-stacked-collection-cell-padding-y: var(--space-stack-xs);
+
+  --table-stacked-collection-cell-padding-x: 0;
   --table-stacked-collection-label-font-size: var(
     --font-size-xs,
     calc(var(--font-size-base) / var(--font-size-ratio))

package/docs/data-display/badge.tsx

@@ -8,6 +8,7 @@ import {
   StatusBadge,
 } from "@godxjp/ui/data-display";
 import { Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { Star } from "lucide-react";
 
@@ -91,6 +92,7 @@ const statusBadgeTones = [
 ];
 
 export default function Demo() {
+  const { t } = useTranslation();
   return (
     <PageContainer
       title="Badge"
@@ -299,6 +301,19 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("badgeDocs.longLabels.title")}</CardTitle>
+            <CardDescription>{t("badgeDocs.longLabels.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" align="start" gap="xs">
+              <Badge tone="info">{t("badgeDocs.longLabels.sample")}</Badge>
+              <Badge status="active" />
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Icon overrides</CardTitle>

package/docs/i18n/messages/en.json

@@ -1566,5 +1566,12 @@
       "title": "Alphabetic text, word by word",
       "description": "Languages that separate words with spaces are compared per word. Pass granularity=\"line\" to compare whole lines."
     }
+  },
+  "badgeDocs": {
+    "longLabels": {
+      "title": "Long labels",
+      "description": "A chip never wraps: a label wider than its container ends in an ellipsis (gh#1101), and when it was cut the full text opens in a tooltip on hover and on keyboard focus of the link or row around the chip (gh#1105). No extra props in a table cell or a Card.",
+      "sample": "Via team · Platform infrastructure operations (East Japan region, night-shift rotation group 2)"
+    }
   }
 }

package/docs/i18n/messages/ja.json

@@ -1559,5 +1559,12 @@
       "title": "英文は単語単位で",
       "description": "スペースで区切られる言語は単語ごとに比べます。行単位にしたい場合は granularity=\"line\" を指定します。"
     }
+  },
+  "badgeDocs": {
+    "longLabels": {
+      "title": "長いラベル",
+      "description": "チップは折り返さず、コンテナより広いラベルは省略記号で切れます（gh#1101）。切れたときは、ホバーでも、チップを囲むリンクや行へのキーボードフォーカスでも、全文がツールチップに出ます（gh#1105）。表のセルでも Card でも追加の指定は要りません。",
+      "sample": "チーム経由 · プラットフォーム基盤運用チーム（東日本リージョン・夜間当番ローテーション第二班）"
+    }
   }
 }

package/docs/i18n/messages/vi.json

@@ -1559,5 +1559,12 @@
       "title": "Văn bản chữ Latinh, theo từng từ",
       "description": "Ngôn ngữ tách từ bằng dấu cách được so theo từng từ. Truyền granularity=\"line\" để so cả dòng."
     }
+  },
+  "badgeDocs": {
+    "longLabels": {
+      "title": "Nhãn dài",
+      "description": "Chip không bao giờ xuống dòng: nhãn rộng hơn khung chứa sẽ kết thúc bằng dấu ba chấm (gh#1101), và khi bị cắt thì toàn văn hiện trong tooltip khi rê chuột hoặc khi focus bàn phím vào liên kết/hàng chứa chip (gh#1105). Trong ô bảng hay Card đều không cần thêm prop.",
+      "sample": "Qua nhóm · Đội vận hành hạ tầng nền tảng (vùng Đông Nhật Bản, ca trực đêm nhóm 2)"
+    }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.16.0",
-  "godxUiMcp": "31.16.0",
+  "version": "31.17.1",
+  "godxUiMcp": "31.17.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",