@godxjp/ui 31.17.0 → 31.18.0

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.18.0.** 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.
@@ -47,7 +47,7 @@ Then ask it: `search_components`, `get_component`, `get_tokens`, `get_rule`, `li
    task is a task** — "build a settings page", "confirm a destructive delete", "a list page with
    filters" — start HERE, not at the components. Then fetch `patterns/<name>.json` for complete,
    copy-paste-ready code. A component index answers "does X exist"; it cannot answer "build Y".
-1. `components-index.json` — 48 KB, all 179 components as name + group +
+1. `components-index.json` — 49 KB, all 179 components as name + group +
    tagline. Read this when you already know the SHAPE you need. Each entry may carry `absorbed`:
    names that **do not exist** and map to it — `Combobox`, `Autocomplete`, `CountrySelect` and
    `SearchSelect` are all `Select`. If you are about to hand-roll something, search this field

package/agent/components/Actions.json

@@ -6,7 +6,7 @@
   "name": "Actions",
   "props": [
     {
-      "description": "The actions: { key, label?, icon?, onItemClick?, danger?, subItems?, actionRender? }. `label` is the accessible name AND the tooltip. `subItems` folds the action into a menu; `actionRender` replaces it entirely.",
+      "description": "The actions: { key, label?, icon?, onItemClick?, disabled?, danger?, subItems?, actionRender? }. `label` is the accessible name AND the tooltip. `disabled` makes a plain action `aria-disabled` and ignores its click, but keeps it focusable and in the arrow-key order (WAI-ARIA toolbar) — use it for a formatting toolbar while previewing or read-only, not to hide an action (gh#1109). `subItems` folds the action into a menu; `actionRender` replaces it entirely.",
       "name": "items",
       "required": true,
       "type": "ActionsItemsProp[]"

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/Prose.json

@@ -35,7 +35,7 @@
   ],
   "rules": [],
   "storyPath": "data-display/Prose.stories.tsx",
-  "tagline": "Typography for rendered content (Markdown, CMS bodies, issue descriptions): styles the semantic HTML inside it from the tokens, with no opinion about where the HTML comes from.",
+  "tagline": "Typography for rendered content (Markdown, CMS bodies, issue descriptions): styles the semantic HTML inside it from the tokens, with no opinion about where the HTML comes from. To RENDER Markdown, use the sibling package `@godxjp/markdown` inside it — `<Prose><Markdown>{body}</Markdown></Prose>` — the one GFM renderer + sanitiser + Mermaid gate shared by every GoDX app; do not assemble react-markdown + rehype-sanitize per app (gh#1108).",
   "usage": [
     "DO import from `@godxjp/ui/data-display`: `import { Prose } from \"@godxjp/ui/data-display\";`",
     "DO wrap the OUTPUT of your Markdown pipeline (react-markdown + remark-gfm + rehype-sanitize), a sanitised CMS string via `dangerouslySetInnerHTML`, or plain JSX. Prose styles descendants: h1..h4, p, ul/ol/li, blockquote, code, pre, table/th/td, a, img, hr.",

package/agent/components/Textarea.json

@@ -104,7 +104,7 @@
   ],
   "rules": [],
   "storyPath": "data-entry/Textarea.stories.tsx",
-  "tagline": "Styled wrapper around native <textarea>. Pair with FormField for labelled fields.",
+  "tagline": "Styled wrapper around native <textarea>. Pair with FormField for labelled fields. For a Markdown body (wiki page, issue description, mail) use the sibling package `@godxjp/editor` `MarkdownEditor` — this Textarea plus a formatting toolbar, preview through `@godxjp/markdown`, and paste/drop upload through a host `upload` function (gh#1109).",
   "usage": [
     "DO reach for `variant=\"ghost\"` ONLY when a parent surface already draws the box and owns focus — the composer Card, an inline edit cell. A standalone field keeps the default: without its own border it reads as plain text, not something you can type into.",
     "DO always wrap Textarea in FormField when it appears in a form — FormField clones aria-describedby, aria-required, and aria-invalid onto the child, giving error/helper announcements and screen-reader labelling for free. Pass matching id props to both.",

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",
@@ -304,7 +304,7 @@
   {
     "group": "data-display",
     "name": "Prose",
-    "tagline": "Typography for rendered content (Markdown, CMS bodies, issue descriptions): styles the semantic HTML inside it from the tokens, with no opinion about where the HTML comes from."
+    "tagline": "Typography for rendered content (Markdown, CMS bodies, issue descriptions): styles the semantic HTML inside it from the tokens, with no opinion about where the HTML comes from. To RENDER Markdown, use the sibling package `@godxjp/markdown` inside it — `<Prose><Markdown>{body}</Markdown></Prose>` — the one GFM renderer + sanitiser + Mermaid gate shared by every GoDX app; do not assemble react-markdown + rehype-sanitize per app (gh#1108)."
   },
   {
     "group": "data-display",
@@ -392,7 +392,7 @@
   {
     "group": "data-entry",
     "name": "Textarea",
-    "tagline": "Styled wrapper around native <textarea>. Pair with FormField for labelled fields."
+    "tagline": "Styled wrapper around native <textarea>. Pair with FormField for labelled fields. For a Markdown body (wiki page, issue description, mail) use the sibling package `@godxjp/editor` `MarkdownEditor` — this Textarea plus a formatting toolbar, preview through `@godxjp/markdown`, and paste/drop upload through a host `upload` function (gh#1109)."
   },
   {
     "group": "data-entry",

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.",
@@ -5024,7 +5024,7 @@
     ],
     "rules": [],
     "storyPath": "data-display/Prose.stories.tsx",
-    "tagline": "Typography for rendered content (Markdown, CMS bodies, issue descriptions): styles the semantic HTML inside it from the tokens, with no opinion about where the HTML comes from.",
+    "tagline": "Typography for rendered content (Markdown, CMS bodies, issue descriptions): styles the semantic HTML inside it from the tokens, with no opinion about where the HTML comes from. To RENDER Markdown, use the sibling package `@godxjp/markdown` inside it — `<Prose><Markdown>{body}</Markdown></Prose>` — the one GFM renderer + sanitiser + Mermaid gate shared by every GoDX app; do not assemble react-markdown + rehype-sanitize per app (gh#1108).",
     "usage": [
       "DO import from `@godxjp/ui/data-display`: `import { Prose } from \"@godxjp/ui/data-display\";`",
       "DO wrap the OUTPUT of your Markdown pipeline (react-markdown + remark-gfm + rehype-sanitize), a sanitised CMS string via `dangerouslySetInnerHTML`, or plain JSX. Prose styles descendants: h1..h4, p, ul/ol/li, blockquote, code, pre, table/th/td, a, img, hr.",
@@ -6892,7 +6892,7 @@
     ],
     "rules": [],
     "storyPath": "data-entry/Textarea.stories.tsx",
-    "tagline": "Styled wrapper around native <textarea>. Pair with FormField for labelled fields.",
+    "tagline": "Styled wrapper around native <textarea>. Pair with FormField for labelled fields. For a Markdown body (wiki page, issue description, mail) use the sibling package `@godxjp/editor` `MarkdownEditor` — this Textarea plus a formatting toolbar, preview through `@godxjp/markdown`, and paste/drop upload through a host `upload` function (gh#1109).",
     "usage": [
       "DO reach for `variant=\"ghost\"` ONLY when a parent surface already draws the box and owns focus — the composer Card, an inline edit cell. A standalone field keeps the default: without its own border it reads as plain text, not something you can type into.",
       "DO always wrap Textarea in FormField when it appears in a form — FormField clones aria-describedby, aria-required, and aria-invalid onto the child, giving error/helper announcements and screen-reader labelling for free. Pass matching id props to both.",
@@ -15678,7 +15678,7 @@
     "name": "Actions",
     "props": [
       {
-        "description": "The actions: { key, label?, icon?, onItemClick?, danger?, subItems?, actionRender? }. `label` is the accessible name AND the tooltip. `subItems` folds the action into a menu; `actionRender` replaces it entirely.",
+        "description": "The actions: { key, label?, icon?, onItemClick?, disabled?, danger?, subItems?, actionRender? }. `label` is the accessible name AND the tooltip. `disabled` makes a plain action `aria-disabled` and ignores its click, but keeps it focusable and in the arrow-key order (WAI-ARIA toolbar) — use it for a formatting toolbar while previewing or read-only, not to hide an action (gh#1109). `subItems` folds the action into a menu; `actionRender` replaces it entirely.",
         "name": "items",
         "required": true,
         "type": "ActionsItemsProp[]"

package/agent/index.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "file": "components-index.json",
-      "note": "48 KB — name + group + tagline for all 179. FETCH THIS FIRST, then fetch only the components you chose.",
+      "note": "49 KB — name + group + tagline for all 179. FETCH THIS FIRST, then fetch only the components you chose.",
       "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-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.18.0/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.18.0"
 }

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.18.0.
 
 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.18.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -15,7 +15,7 @@ that can only fetch URLs.
 ## Catalog
 
 - [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 21 whole-task patterns (name, tagline, tags). Start here when the task is a TASK — "build a settings page" — then fetch `patterns/<name>.json` for complete code.
-- [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-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 49 KB — all 179 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/&lt;Name&gt;.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, 1814 `component` knobs.
@@ -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.18.0/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/components/general/actions.js

@@ -58,6 +58,7 @@ const Actions = React.forwardRef(
       }
     };
     const dispatch = (item, keyPath, domEvent) => {
+      if (item.disabled) return;
       if (item.onItemClick) {
         item.onItemClick(item);
         return;
@@ -118,6 +119,7 @@ const Actions = React.forwardRef(
             LabelledIconButton,
             {
               label: name,
+              "aria-disabled": item.disabled || void 0,
               onClick: (event) => dispatch(item, [item.key], event),
               ...shared,
               children: item.icon

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.18.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

@@ -645,6 +645,14 @@ export type ActionsItemsProp = {
     /** Per-item handler. When present it WINS over the strip's `onClick`. Ant Design X `onItemClick`. */
     onItemClick?: (item: ActionsItemsProp) => void;
     /** Paint the action as irreversible. Ant Design X `danger`. */
+    /**
+     * The action cannot run right now (a formatting toolbar while previewing, a read-only document).
+     * It stays FOCUSABLE and in the arrow-key order, as the WAI-ARIA toolbar pattern recommends, so a
+     * keyboard or screen-reader user can still find it: it is `aria-disabled="true"` and a click is
+     * ignored, rather than a native `disabled` that would drop it from the toolbar's focus order.
+     * Applies to a plain action; a `subItems` trigger and an `actionRender` own their own state.
+     */
+    disabled?: DisabledProp;
     danger?: boolean;
     /** Nest the action into a menu behind one trigger. Ant Design X `subItems`. */
     subItems?: readonly Omit<ActionsItemsProp, "subItems" | "actionRender">[];

package/dist/styles/layers.json

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

@@ -2001,6 +2001,11 @@
     border-radius: var(--actions-radius, var(--radius));
   }
 
+  .ui-actions [aria-disabled="true"] {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+  }
+
   .ui-actions[data-variant="filled"],
   .ui-actions[data-variant="outlined"] {
     padding-block: var(--actions-padding-block);

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/data-display/markdown.tsx

@@ -0,0 +1,86 @@
+import { Markdown, RENDERER_VERSION } from "@godxjp/markdown";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Prose,
+} from "@godxjp/ui/data-display";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+
+const page = `# 結合テスト計画
+
+決済モジュールの請求書再発行シナリオを対象にする。詳細は[設計書](/wiki/設計/決済)を参照[^1]。
+
+## 範囲
+
+| シナリオ | 担当 | 状態 |
+|:--|:--|--:|
+| 再発行（通常） | 田中 | 完了 |
+| 再発行（税率変更後） | 佐藤 | 進行中 |
+
+- [x] テストデータ作成
+- [ ] ステージング反映
+- [ ] 受入レビュー
+
+## 流れ
+
+\`\`\`mermaid
+graph LR
+  A[申請] --> B{承認}
+  B -->|承認| C[再発行]
+  B -->|差戻し| A
+\`\`\`
+
+\`\`\`ts
+await invoices.reissue(id, { reason: "tax-rate" });
+\`\`\`
+
+[^1]: 設計書は 2026-10 版。`;
+
+const hostile = `<script>alert(1)</script>
+
+[危険なリンク](javascript:alert(1)) と ![データ画像](data:image/svg+xml;base64,PHN2Zz4=)
+
+<img src=x onerror="alert(1)">`;
+
+/**
+ * @godxjp/markdown — the one Markdown renderer (gh#1108). A wiki page body rendered as the
+ * published page shows it, and a hostile body rendered by the same component.
+ */
+export default function Demo() {
+  const { t } = useTranslation();
+  return (
+    <PageContainer
+      title="Markdown"
+      subtitle={t("markdownDocs.subtitle", { version: String(RENDERER_VERSION) })}
+    >
+      <ResponsiveGrid columns={{ base: 1, lg: 2 }} gap="md">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("markdownDocs.page.title")}</CardTitle>
+            <CardDescription>{t("markdownDocs.page.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Prose>
+              <Markdown>{page}</Markdown>
+            </Prose>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("markdownDocs.hostile.title")}</CardTitle>
+            <CardDescription>{t("markdownDocs.hostile.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Prose>
+              <Markdown>{hostile}</Markdown>
+            </Prose>
+          </CardContent>
+        </Card>
+      </ResponsiveGrid>
+    </PageContainer>
+  );
+}

package/docs/data-entry/markdown-editor.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { MarkdownEditor } from "@godxjp/editor";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Form, FormField } from "@godxjp/ui/data-entry";
+import { Button } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+import shot from "../assets/shot-landscape.svg";
+
+const initial = `## 議事録 2026-10-02
+
+- 決済モジュールの再発行は **税率変更後** のケースを追加する
+- 次回レビュー：_10/9_
+
+画像はこの欄に貼り付けるか、ドラッグするか、クリップのボタンから添付します。`;
+
+/** Stands in for the host's storage: a real app uploads the file and returns its URL. */
+async function demoUpload(file: File) {
+  await new Promise((resolve) => setTimeout(resolve, 800));
+  return { url: shot, name: file.name };
+}
+
+/**
+ * @godxjp/editor — the Markdown editor (gh#1109). A page form: the editor inside a FormField,
+ * the preview through @godxjp/markdown, files through the host's `upload`.
+ */
+export default function Demo() {
+  const { t } = useTranslation();
+  const [body, setBody] = React.useState(initial);
+  return (
+    <PageContainer title="MarkdownEditor" subtitle={t("markdownEditorDocs.subtitle")}>
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>{t("markdownEditorDocs.edit.title")}</CardTitle>
+          <CardDescription>{t("markdownEditorDocs.edit.description")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form onSubmit={(event) => event.preventDefault()}>
+            <Flex direction="col" gap="md">
+              <FormField id="page-body" label={t("markdownEditorDocs.edit.label")}>
+                <MarkdownEditor
+                  value={body}
+                  onValueChange={setBody}
+                  upload={demoUpload}
+                  defaultMode="split"
+                />
+              </FormField>
+              <Flex justify="end">
+                <Button type="submit">{t("markdownEditorDocs.edit.save")}</Button>
+              </Flex>
+            </Flex>
+          </Form>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>{t("markdownEditorDocs.readOnly.title")}</CardTitle>
+          <CardDescription>{t("markdownEditorDocs.readOnly.description")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <FormField id="page-body-readonly" label={t("markdownEditorDocs.readOnly.label")}>
+            <MarkdownEditor defaultValue={initial} readOnly />
+          </FormField>
+        </CardContent>
+      </Card>
+    </PageContainer>
+  );
+}

package/docs/i18n/messages/en.json

@@ -1570,8 +1570,33 @@
   "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)"
     }
+  },
+  "markdownDocs": {
+    "subtitle": "@godxjp/markdown · GFM + heading anchors + sanitiser · renderer v{version}",
+    "page": {
+      "title": "Page body",
+      "description": "Tables, checklists, code, footnotes, Mermaid. A Mermaid fence becomes a diagram only after its generated SVG passes the check; until then it shows as code."
+    },
+    "hostile": {
+      "title": "A hostile body",
+      "description": "Raw HTML never becomes elements, and javascript: and data: URLs are removed."
+    }
+  },
+  "markdownEditorDocs": {
+    "subtitle": "@godxjp/editor · formatting toolbar · write / preview / side by side · paste or drop to attach",
+    "edit": {
+      "title": "Edit a page",
+      "description": "⌘/Ctrl + B, I, K for bold, italic, link. Shortcuts never fire during IME composition.",
+      "label": "Body",
+      "save": "Save"
+    },
+    "readOnly": {
+      "title": "Read-only",
+      "description": "The toolbar stays focusable, but its actions do nothing.",
+      "label": "Body (view only)"
+    }
   }
 }

package/docs/i18n/messages/ja.json

@@ -1563,8 +1563,33 @@
   "badgeDocs": {
     "longLabels": {
       "title": "長いラベル",
-      "description": "チップは折り返さず、コンテナより広いラベルは省略記号で切れます（gh#1101）。切れたときはホバーで全文が title に出ます。表のセルでも Card でも追加の指定は要りません。",
+      "description": "チップは折り返さず、コンテナより広いラベルは省略記号で切れます（gh#1101）。切れたときは、ホバーでも、チップを囲むリンクや行へのキーボードフォーカスでも、全文がツールチップに出ます（gh#1105）。表のセルでも Card でも追加の指定は要りません。",
       "sample": "チーム経由 · プラットフォーム基盤運用チーム（東日本リージョン・夜間当番ローテーション第二班）"
     }
+  },
+  "markdownDocs": {
+    "subtitle": "@godxjp/markdown · GFM + 見出しアンカー + サニタイズ · renderer v{version}",
+    "page": {
+      "title": "ページ本文",
+      "description": "表・チェックリスト・コード・脚注・Mermaid。Mermaid は生成された SVG が検査を通ったときだけ図になり、それまではコードのまま表示されます。"
+    },
+    "hostile": {
+      "title": "悪意のある本文",
+      "description": "生の HTML は要素にならず、javascript: や data: の URL は取り除かれます。"
+    }
+  },
+  "markdownEditorDocs": {
+    "subtitle": "@godxjp/editor · 書式ツールバー · 編集 / プレビュー / 並べて表示 · 貼り付け・ドロップで添付",
+    "edit": {
+      "title": "ページを編集",
+      "description": "⌘/Ctrl + B・I・K で太字・斜体・リンク。変換中（IME）はショートカットが働きません。",
+      "label": "本文",
+      "save": "保存"
+    },
+    "readOnly": {
+      "title": "読み取り専用",
+      "description": "ツールバーはフォーカスできますが、操作は無効です。",
+      "label": "本文（閲覧のみ）"
+    }
   }
 }

package/docs/i18n/messages/vi.json

@@ -1563,8 +1563,33 @@
   "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)"
     }
+  },
+  "markdownDocs": {
+    "subtitle": "@godxjp/markdown · GFM + neo tiêu đề + sanitize · renderer v{version}",
+    "page": {
+      "title": "Nội dung trang",
+      "description": "Bảng, danh sách việc, mã, chú thích, Mermaid. Khối mermaid chỉ thành sơ đồ khi SVG sinh ra qua được kiểm tra; trước đó hiện dạng mã."
+    },
+    "hostile": {
+      "title": "Nội dung độc hại",
+      "description": "HTML thô không bao giờ thành phần tử; URL javascript: và data: bị loại bỏ."
+    }
+  },
+  "markdownEditorDocs": {
+    "subtitle": "@godxjp/editor · thanh định dạng · soạn / xem trước / song song · dán hoặc kéo thả để đính kèm",
+    "edit": {
+      "title": "Sửa trang",
+      "description": "⌘/Ctrl + B, I, K: đậm, nghiêng, liên kết. Phím tắt không chạy khi đang gõ IME.",
+      "label": "Nội dung",
+      "save": "Lưu"
+    },
+    "readOnly": {
+      "title": "Chỉ đọc",
+      "description": "Thanh công cụ vẫn nhận focus nhưng thao tác bị vô hiệu.",
+      "label": "Nội dung (chỉ xem)"
+    }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.17.0",
-  "godxUiMcp": "31.17.0",
+  "version": "31.18.0",
+  "godxUiMcp": "31.18.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,7 +20,7 @@
     }
   },
   "sideEffects": false,
-  "description": "@godxjp/ui \u2014 shared React UI framework (shadcn + Radix + Tailwind v4).",
+  "description": "@godxjp/ui — shared React UI framework (shadcn + Radix + Tailwind v4).",
   "files": [
     "LICENSE",
     "agent",
@@ -315,6 +315,7 @@
     "audit:component-cases": "node scripts/check-component-case-evidence.mjs",
     "audit:examples": "node scripts/ui-audit.mjs docs",
     "build": "tsup && tsc -p tsconfig.build.json && node scripts/copy-styles.mjs && node scripts/fix-esm-extensions.mjs && node scripts/add-use-client.mjs",
+    "build:packages": "cd packages/markdown && node ../../node_modules/tsup/dist/cli-default.js && cd ../editor && node ../../node_modules/tsup/dist/cli-default.js",
     "build:jis-level1-fonts": "node scripts/build-jis-level1-fonts.mjs",
     "capture:voiceover": "node scripts/capture-voiceover-evidence.mjs",
     "check:agent-catalog": "node scripts/gen-agent-catalog.mjs --check",
@@ -415,7 +416,8 @@
     "test:visual:table-collection-cjk": "node scripts/table-collection-cjk-visual.mjs",
     "test:visual:topbar-collision": "node scripts/topbar-collision-visual.mjs",
     "test:watch": "vitest",
-    "typecheck": "node node_modules/typescript-7/bin/tsc --noEmit -p tsconfig.json",
+    "typecheck": "node node_modules/typescript-7/bin/tsc --noEmit -p tsconfig.json && pnpm typecheck:packages",
+    "typecheck:packages": "node node_modules/typescript-7/bin/tsc --noEmit -p packages/markdown/tsconfig.json && node node_modules/typescript-7/bin/tsc --noEmit -p packages/editor/tsconfig.json",
     "typecheck:docs": "node node_modules/typescript-7/bin/tsc --noEmit -p tsconfig.docs.json",
     "typecheck:mcp": "node node_modules/typescript-7/bin/tsc --noEmit -p mcp/tsconfig.json",
     "typecheck:ts6": "tsc --noEmit -p tsconfig.json",
@@ -513,6 +515,8 @@
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.6",
+    "@types/hast": "^3.0.5",
+    "@types/mdast": "^4.0.4",
     "@types/node": "^26.4.0",
     "@types/pngjs": "^6.0.5",
     "@types/react": "^19.2.18",
@@ -523,9 +527,11 @@
     "eslint": "^10.9.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
+    "github-slugger": "^2.0.0",
     "globals": "^17.11.0",
     "jsdom": "^30.0.1",
     "jsqr": "^1.4.0",
+    "mermaid": "^11.17.2",
     "playwright": "^1.62.1",
     "pngjs": "^7.0.0",
     "prettier": "^3.9.6",
@@ -533,13 +539,17 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-hook-form": "^7.86.0",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^7.18.3",
     "recharts": "^3.10.1",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
     "tailwindcss": "^4.3.3",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
     "typescript-7": "npm:typescript@7.0.2",
     "typescript-eslint": "^8.68.0",
+    "unist-util-visit": "^5.1.0",
     "vite": "^8.2.2",
     "vitest": "^4.1.11",
     "zod": "^4.5.4"