@godxjp/ui 31.15.0 → 31.17.0

package/dist/styles/data-display-layout.css

@@ -467,6 +467,58 @@
     block-size: var(--thumbnail-block-size-lg);
   }
 
+  .ui-text-diff {
+    min-inline-size: 0;
+  }
+
+  :is(.ui-text-diff-body, .ui-text-diff-cell) {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    min-inline-size: 0;
+  }
+
+  .ui-text-diff-removed {
+    background: var(
+      --surface-destructive,
+      hsl(var(--destructive) / var(--text-diff-removed-background-alpha))
+    );
+    color: inherit;
+    text-decoration-line: line-through;
+    text-decoration-thickness: var(--text-diff-mark-line-width);
+  }
+
+  .ui-text-diff-added {
+    background: var(
+      --surface-success,
+      hsl(var(--success) / var(--text-diff-added-background-alpha))
+    );
+    color: inherit;
+    text-decoration-line: underline;
+    text-decoration-thickness: var(--text-diff-mark-line-width);
+  }
+
+  .ui-text-diff-gap {
+    display: block;
+    padding-block: var(--text-diff-space-inset);
+  }
+
+  .ui-text-diff-split {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    column-gap: var(--text-diff-space-gap);
+  }
+
+  .ui-text-diff-split > .ui-text-diff-gap {
+    grid-column: 1 / -1;
+  }
+
+  .ui-text-diff-heading {
+    padding-block-end: var(--text-diff-space-inset);
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-sm, var(--font-size-base));
+    font-weight: var(--font-weight-medium);
+  }
+
   .ui-timeline {
     display: flex;
     flex-direction: column;

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.15.0",
+  "version": "31.17.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -1053,6 +1053,11 @@
         "dialog-layout.css"
       ]
     },
+    "TextDiff": {
+      "layers": [
+        "control.css"
+      ]
+    },
     "Textarea": {
       "layers": [
         "control.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,18 @@
     );
   }
 
+  .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-data-table-summary {
     background-color: var(--table-summary-background, hsl(var(--muted)));
     font-weight: var(--font-weight-medium);
@@ -914,10 +926,16 @@
     [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 {
+      display: none;
+    }
+
     [data-collapse-below="sm"] .ui-table-stacked-collection-label {
       display: block;
       font-size: var(--table-stacked-collection-label-font-size);
@@ -958,10 +976,15 @@
     [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 {
+      display: none;
+    }
+
     [data-collapse-below="md"] .ui-table-stacked-collection-label {
       display: block;
       font-size: var(--table-stacked-collection-label-font-size);
@@ -1002,10 +1025,15 @@
     [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 {
+      display: none;
+    }
+
     [data-collapse-below="lg"] .ui-table-stacked-collection-label {
       display: block;
       font-size: var(--table-stacked-collection-label-font-size);
@@ -1046,10 +1074,15 @@
     [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 {
+      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/data-display.css

@@ -173,6 +173,14 @@
   --thumbnail-border-width: initial;
   --thumbnail-radius: initial;
 
+  --text-diff-removed-background-alpha: 0.12;
+  --text-diff-added-background-alpha: 0.16;
+
+  --text-diff-mark-line-width: var(--stroke-hairline);
+
+  --text-diff-space-gap: var(--space-3);
+  --text-diff-space-inset: var(--space-2);
+
   --timeline-dot-done-background: initial;
   --timeline-dot-done-foreground: initial;
   --timeline-dot-current-background: initial;

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/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **178**
-- With ≥1 frame: **154** · zero-frame: **24**
+- Public components: **179**
+- With ≥1 frame: **155** · zero-frame: **24**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -88,6 +88,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Badge | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | Legend | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Swatch | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
+| TextDiff | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | FeatureList | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Thumbnail | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | ListRow | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |

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

@@ -0,0 +1,89 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  TextDiff,
+} from "@godxjp/ui/data-display";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+const PREVIOUS_ORIGINAL = "来週の定例会議までに、見積書を承認してください。";
+const CURRENT_ORIGINAL = "今週金曜までに、見積書と請求書を却下してください。";
+
+const PREVIOUS_POLICY = [
+  "1. 申請は月末までに提出する。",
+  "2. 領収書の原本を添付する。",
+  "3. 上長の承認を得る。",
+  "4. 経理部が内容を確認する。",
+  "5. 承認後、翌月の給与と合わせて支払う。",
+  "6. 不備がある場合は差し戻す。",
+  "7. 差し戻しから五営業日以内に再提出する。",
+  "8. 期限を過ぎた申請は受け付けない。",
+].join("\n");
+
+const CURRENT_POLICY = [
+  "1. 申請は毎月二十日までに提出する。",
+  "2. 領収書の原本を添付する。",
+  "3. 上長の承認を得る。",
+  "4. 経理部が内容を確認する。",
+  "5. 承認後、翌月の給与と合わせて支払う。",
+  "6. 不備がある場合は差し戻す。",
+  "7. 差し戻しから五営業日以内に再提出する。",
+  "8. 期限を過ぎた申請は、部長の承認があれば受け付ける。",
+].join("\n");
+
+/**
+ * TextDiff — what changed between two versions of a text (gh#1096).
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const { t } = useTranslation();
+  return (
+    <PageContainer title="TextDiff" subtitle={t("textDiffDocs.subtitle")}>
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("textDiffDocs.source.title")}</CardTitle>
+            <CardDescription>{t("textDiffDocs.source.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TextDiff before={PREVIOUS_ORIGINAL} after={CURRENT_ORIGINAL} lang="ja" />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("textDiffDocs.policy.title")}</CardTitle>
+            <CardDescription>{t("textDiffDocs.policy.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TextDiff
+              mode="split"
+              before={PREVIOUS_POLICY}
+              after={CURRENT_POLICY}
+              lang="ja"
+              beforeLabel={t("textDiffDocs.policy.before")}
+              afterLabel={t("textDiffDocs.policy.after")}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("textDiffDocs.words.title")}</CardTitle>
+            <CardDescription>{t("textDiffDocs.words.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TextDiff
+              before="Please approve the quotation before next week's meeting."
+              after="Please reject the quotation and the invoice by Friday."
+              lang="en"
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/i18n/messages/en.json

@@ -1549,5 +1549,29 @@
       "comment": "Nguyen commented",
       "assignee": "Tanaka changed the assignee"
     }
+  },
+  "textDiffDocs": {
+    "subtitle": "Show what changed between two versions of a text, as removals and additions",
+    "source": {
+      "title": "See what changed in the original",
+      "description": "The original a translation was written against, compared with the original now. Japanese is compared character by character, so changing one particle does not mark the whole sentence."
+    },
+    "policy": {
+      "title": "Policy revision (side by side)",
+      "description": "Unchanged lines fold away behind a button. Removals are struck through and additions underlined, so colour is never the only signal.",
+      "before": "Before revision",
+      "after": "After revision"
+    },
+    "words": {
+      "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 the full text shows as a title on hover when it was cut. 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

@@ -1542,5 +1542,29 @@
       "comment": "グエン がコメント",
       "assignee": "田中 が担当者を変更"
     }
+  },
+  "textDiffDocs": {
+    "subtitle": "二つの版のテキストの差分を、削除と追加で示す",
+    "source": {
+      "title": "原文の変更を見る",
+      "description": "翻訳を書いた時点の原文と、いまの原文の差分です。日本語は一文字ずつ比べるので、助詞ひとつの変更でも文全体が変わったようには見えません。"
+    },
+    "policy": {
+      "title": "規程の改訂（左右に並べる）",
+      "description": "変更のない行は折りたたまれ、ボタンで開けます。削除は取り消し線、追加は下線で示し、色だけに頼りません。",
+      "before": "改訂前",
+      "after": "改訂後"
+    },
+    "words": {
+      "title": "英文は単語単位で",
+      "description": "スペースで区切られる言語は単語ごとに比べます。行単位にしたい場合は granularity=\"line\" を指定します。"
+    }
+  },
+  "badgeDocs": {
+    "longLabels": {
+      "title": "長いラベル",
+      "description": "チップは折り返さず、コンテナより広いラベルは省略記号で切れます（gh#1101）。切れたときはホバーで全文が title に出ます。表のセルでも Card でも追加の指定は要りません。",
+      "sample": "チーム経由 · プラットフォーム基盤運用チーム（東日本リージョン・夜間当番ローテーション第二班）"
+    }
   }
 }

package/docs/i18n/messages/vi.json

@@ -1542,5 +1542,29 @@
       "comment": "Nguyễn đã bình luận",
       "assignee": "Tanaka đổi người phụ trách"
     }
+  },
+  "textDiffDocs": {
+    "subtitle": "Cho thấy điều gì đã đổi giữa hai phiên bản của một văn bản, dưới dạng phần xoá và phần thêm",
+    "source": {
+      "title": "Xem thay đổi của bản gốc",
+      "description": "Bản gốc lúc viết bản dịch so với bản gốc hiện tại. Tiếng Nhật được so từng ký tự, nên đổi một trợ từ không làm cả câu bị đánh dấu."
+    },
+    "policy": {
+      "title": "Sửa đổi quy định (đặt cạnh nhau)",
+      "description": "Các dòng không đổi được thu gọn sau một nút. Phần xoá bị gạch ngang, phần thêm được gạch chân, không chỉ dựa vào màu.",
+      "before": "Trước sửa đổi",
+      "after": "Sau sửa đổi"
+    },
+    "words": {
+      "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 thành title khi rê chuột. 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.15.0",
-  "godxUiMcp": "31.15.0",
+  "version": "31.17.0",
+  "godxUiMcp": "31.17.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",