@godxjp/ui 31.17.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.17.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.

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. 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, shows the full text as a native `title` on hover (antd `Typography ellipsis`). A caller's own `title` on the Badge wins. 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.",
+      "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: a label wider than its container ellipsizes, with the full text as a hover `title` (gh#1101).",
+  "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-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: a label wider than its container ellipsizes, with the full text as a hover `title` (gh#1101)."
+    "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

@@ -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. 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, shows the full text as a native `title` on hover (antd `Typography ellipsis`). A caller's own `title` on the Badge wins. 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.",
+        "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: a label wider than its container ellipsizes, with the full text as a hover `title` (gh#1101).",
+    "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/index.json

@@ -48,7 +48,7 @@
   "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.17.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",
@@ -62,5 +62,5 @@
     "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.17.0"
+  "version": "31.17.1"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
 > 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.0.
+> 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.17.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
@@ -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.17.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/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,
@@ -105,14 +106,6 @@ const badgeToneClass = {
   muted: cn("border-transparent", toneMutedClass),
   neutral: cn("border-transparent", toneNeutralClass)
 };
-function titleTruncatedLabel(event) {
-  const label = event.currentTarget;
-  if (label.scrollWidth > label.clientWidth) {
-    label.title = label.textContent?.replace(/\s+/g, " ").trim() ?? "";
-  } else {
-    label.removeAttribute("title");
-  }
-}
 function Badge({
   as: Element = "div",
   className,
@@ -148,58 +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",
-            onPointerEnter: props.title == null ? titleTruncatedLabel : void 0,
-            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/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",
       {
@@ -248,7 +249,7 @@ const TableCell = React.forwardRef(
         ...props,
         children: [
           label !== void 0 && children != null && children !== false && children !== "" ? /* @__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 ? /* @__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/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.17.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/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.17.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/table-layout.css

@@ -558,6 +558,10 @@
     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);
@@ -932,7 +936,9 @@
       overflow-wrap: anywhere;
     }
 
-    [data-collapse-below="sm"] [data-slot="table-cell"]:empty {
+    [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;
     }
 
@@ -981,7 +987,9 @@
       overflow-wrap: anywhere;
     }
 
-    [data-collapse-below="md"] [data-slot="table-cell"]:empty {
+    [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;
     }
 
@@ -1030,7 +1038,9 @@
       overflow-wrap: anywhere;
     }
 
-    [data-collapse-below="lg"] [data-slot="table-cell"]:empty {
+    [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;
     }
 
@@ -1079,7 +1089,9 @@
       overflow-wrap: anywhere;
     }
 
-    [data-collapse-below="xl"] [data-slot="table-cell"]:empty {
+    [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;
     }
 

package/docs/i18n/messages/en.json

@@ -1570,7 +1570,7 @@
   "badgeDocs": {
     "longLabels": {
       "title": "Long labels",
-      "description": "A chip never wraps: a label wider than its container ends in an ellipsis (gh#1101), and the full text shows as a title on hover when it was cut. No extra props in a table cell or a Card.",
+      "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

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

package/docs/i18n/messages/vi.json

@@ -1563,7 +1563,7 @@
   "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 thành title khi rê chuột. Trong ô bảng hay Card đều không cần thêm prop.",
+      "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.17.0",
-  "godxUiMcp": "31.17.0",
+  "version": "31.17.1",
+  "godxUiMcp": "31.17.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",