@godxjp/ui 31.6.0 → 31.7.0

package/dist/components/layout/breadcrumb.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { BreadcrumbCrumbText, trailEllipsis } from "./breadcrumb-ellipsis.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -17,12 +18,20 @@ function Breadcrumb({
 }) {
   const { t } = useTranslation();
   const separatorNode = separator === void 0 ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) : separator;
-  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel ?? t("navigation.breadcrumb.ariaLabel"), className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel ?? t("navigation.breadcrumb.ariaLabel"), className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", "data-ellipsis": trailEllipsis(items), children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ jsxs("li", { className: "ui-breadcrumb-item", children: [
-      renderBreadcrumbSegment({ item, index, isLast, items, itemRender, LinkComponent }),
-      !isLast ? /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-separator", "aria-hidden": "true", children: separatorNode }) : null
-    ] }, item.to ?? index);
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "ui-breadcrumb-item",
+        "data-ellipsis": item.ellipsis ? "" : void 0,
+        children: [
+          renderBreadcrumbSegment({ item, index, isLast, items, itemRender, LinkComponent }),
+          !isLast ? /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-separator", "aria-hidden": "true", children: separatorNode }) : null
+        ]
+      },
+      item.to ?? index
+    );
   }) }) });
 }
 function renderBreadcrumbSegment({
@@ -54,9 +63,9 @@ function renderBreadcrumbSegment({
     ] });
   }
   if (item.to && !isLast) {
-    return /* @__PURE__ */ jsx(LinkComponent, { href: item.to, to: item.to, className: "ui-breadcrumb-link", children: item.label });
+    return /* @__PURE__ */ jsx(BreadcrumbCrumbText, { item, children: /* @__PURE__ */ jsx(LinkComponent, { href: item.to, to: item.to, className: "ui-breadcrumb-link", children: item.label }) });
   }
-  return /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-current", "aria-current": isLast ? "page" : void 0, children: item.label });
+  return /* @__PURE__ */ jsx(BreadcrumbCrumbText, { item, children: /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-current", "aria-current": isLast ? "page" : void 0, children: item.label }) });
 }
 export {
   Breadcrumb

package/dist/components/layout/page-container.js

@@ -5,6 +5,7 @@ import { ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { scrollParent, useInView } from "../../lib/hooks.js";
 import { cn } from "../../lib/utils.js";
+import { BreadcrumbCrumbText, trailEllipsis } from "./breadcrumb-ellipsis.js";
 import { densityClass, pageContainerVariantClass, padStyle } from "../../lib/variants.js";
 function useFooterReveal(enabled) {
   const headerRef = useRef(null);
@@ -92,7 +93,7 @@ function PageContainerRoot({
                 {
                   "aria-label": breadcrumbLabel ?? breadcrumbAriaLabel ?? t("navigation.breadcrumb.ariaLabel"),
                   className: "ui-breadcrumb",
-                  children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
+                  children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", "data-ellipsis": trailEllipsis(breadcrumb), children: breadcrumb.map((item, i) => {
                     const isLast = i === breadcrumb.length - 1;
                     return (
                       // `--space-inline-xs` gap the previous `.ui-inline-xs` gave, and it brings
@@ -100,25 +101,33 @@ function PageContainerRoot({
                       // longer carries a `size-3` literal. It also drops `.ui-inline-xs`'s
                       // `flex-wrap: wrap` — a crumb must not break between its label and its
                       // chevron; the LIST wraps instead, exactly as <Breadcrumb> already behaves.
-                      /* @__PURE__ */ jsxs("li", { className: "ui-breadcrumb-item", children: [
-                        item.to && !isLast ? /* @__PURE__ */ jsx(
-                          LinkComponent,
-                          {
-                            href: item.to,
-                            to: item.to,
-                            className: "hover:text-foreground hover:underline",
-                            children: item.label
-                          }
-                        ) : /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            className: isLast ? "text-foreground" : "",
-                            "aria-current": isLast ? "page" : void 0,
-                            children: item.label
-                          }
-                        ),
-                        !isLast && /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
-                      ] }, i)
+                      /* @__PURE__ */ jsxs(
+                        "li",
+                        {
+                          className: "ui-breadcrumb-item",
+                          "data-ellipsis": item.ellipsis ? "" : void 0,
+                          children: [
+                            item.to && !isLast ? /* @__PURE__ */ jsx(BreadcrumbCrumbText, { item, children: /* @__PURE__ */ jsx(
+                              LinkComponent,
+                              {
+                                href: item.to,
+                                to: item.to,
+                                className: "hover:text-foreground hover:underline",
+                                children: item.label
+                              }
+                            ) }) : /* @__PURE__ */ jsx(BreadcrumbCrumbText, { item, children: /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: isLast ? "text-foreground" : "",
+                                "aria-current": isLast ? "page" : void 0,
+                                children: item.label
+                              }
+                            ) }),
+                            !isLast && /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+                          ]
+                        },
+                        i
+                      )
                     );
                   }) })
                 }

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

package/dist/i18n/messages/en.json

@@ -350,7 +350,8 @@
     },
     "progress": {
       "ariaLabel": "Progress",
-      "breakdownSeparator": ", "
+      "breakdownSeparator": ", ",
+      "remainder": "Remaining"
     },
     "scrollArea": {
       "region": "Scrollable region"

package/dist/i18n/messages/ja.json

@@ -343,7 +343,8 @@
     },
     "progress": {
       "ariaLabel": "進捗",
-      "breakdownSeparator": "、"
+      "breakdownSeparator": "、",
+      "remainder": "残り"
     },
     "scrollArea": {
       "region": "スクロール可能な領域"

package/dist/i18n/messages/vi.json

@@ -344,7 +344,8 @@
     },
     "progress": {
       "ariaLabel": "Tiến độ",
-      "breakdownSeparator": ", "
+      "breakdownSeparator": ", ",
+      "remainder": "Còn lại"
     },
     "scrollArea": {
       "region": "Vùng có thể cuộn"

package/dist/props/registry.d.ts

@@ -604,6 +604,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "navigation";
         readonly description: "Single breadcrumb segment";
     };
+    readonly BreadcrumbItemEllipsisProp: {
+        readonly file: "vocabulary/navigation.prop.ts";
+        readonly category: "navigation";
+        readonly description: "One-line truncation of a breadcrumb segment, with the full label in a tooltip";
+    };
     readonly BreadcrumbProp: {
         readonly file: "vocabulary/navigation.prop.ts";
         readonly category: "navigation";

package/dist/props/registry.js

@@ -604,6 +604,11 @@ const VOCABULARY_REGISTRY = {
     category: "navigation",
     description: "Single breadcrumb segment"
   },
+  BreadcrumbItemEllipsisProp: {
+    file: "vocabulary/navigation.prop.ts",
+    category: "navigation",
+    description: "One-line truncation of a breadcrumb segment, with the full label in a tooltip"
+  },
   BreadcrumbProp: {
     file: "vocabulary/navigation.prop.ts",
     category: "navigation",

package/dist/props/vocabulary/index.d.ts

@@ -3,5 +3,5 @@ export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, On
 export type { TitleProp, SubtitleProp, StatusProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
 export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TableDensityProp, DensityProp, GapNameProp, PadProp, PadRawProp, PadSides, GapProp, GapStepProp, } from "./layout.prop.js";
 export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, AppSettingToggleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, TextWhitespaceProp, TextBreakProp, TypographyTypeProp, TitleLevelProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyActionsConfigProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, CalloutKindProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, RevealTriggerProp, InViewAmountProp, ActivityVariantProp, ActivityAnnounceProp, IconSizeProp, } from "./interaction.prop.js";
-export type { BreadcrumbItemProp, BreadcrumbProp, BreadcrumbItemMenuProp, BreadcrumbItemMenuEntryProp, BreadcrumbSeparatorProp, BreadcrumbItemRenderProp, } from "./navigation.prop.js";
+export type { BreadcrumbItemProp, BreadcrumbProp, BreadcrumbItemMenuProp, BreadcrumbItemEllipsisProp, BreadcrumbItemMenuEntryProp, BreadcrumbSeparatorProp, BreadcrumbItemRenderProp, } from "./navigation.prop.js";
 export type { GetRowIdProp, GetRowLabelProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, TableCellIndentProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, TableRowToneProp, RowToneProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, ColumnFixedProp, ColumnFilterValueProp, ColumnFilterItemProp, ColumnFilterStateProp, OnColumnFilterChangeProp, ColumnCompareProp, ColumnSorterProp, TableSelectionItemProp, TableSelectionBuiltInProp, TableSelectAllMatchingProp, TableRowSelectionProp, TableExpandableProp, TableSummaryProp, TableScrollProp, TableStickyProp, OnRowProp, TablePaginationProp, TablePaginationPositionProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.prop.js";

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

@@ -33,6 +33,20 @@ export type BreadcrumbItemProp = {
     to?: string;
     /** Ant Design `menu` — a sibling dropdown on this segment. @see BreadcrumbItemMenuProp */
     menu?: BreadcrumbItemMenuProp;
+    /**
+     * One line, a long label cut with "…" (gh#1046). antd's Breadcrumb has no per-item ellipsis;
+     * the name and shape are antd Typography's `ellipsis`. The full label shows in a tooltip on hover
+     * and on keyboard focus of the crumb link — `true` / `{}` use the label, `{ tooltip: node }`
+     * replaces it, `{ tooltip: false }` drops it. Applies to link and current crumbs, not to a
+     * `menu` segment or an `itemRender` body. The trail then stays on one line; a theme may cap
+     * each such crumb with `--breadcrumb-item-max-inline-size`.
+     * @see BreadcrumbItemEllipsisProp
+     */
+    ellipsis?: BreadcrumbItemEllipsisProp;
+};
+/** `BreadcrumbItemProp.ellipsis` — on, or on with an explicit tooltip (gh#1046). */
+export type BreadcrumbItemEllipsisProp = boolean | {
+    tooltip?: React.ReactNode;
 };
 /** Ordered breadcrumb trail above page title. */
 export type BreadcrumbProp = BreadcrumbItemProp[];

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.6.0",
+  "version": "31.7.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -702,7 +702,8 @@
     },
     "PageContainer": {
       "layers": [
-        "layout.css"
+        "layout.css",
+        "dialog-layout.css"
       ]
     },
     "Pagination": {

package/dist/styles/layout.css

@@ -1036,6 +1036,28 @@
     color: hsl(var(--foreground));
   }
 
+  .ui-breadcrumb-list[data-ellipsis] {
+    flex-wrap: nowrap;
+  }
+  .ui-breadcrumb-list[data-ellipsis] > .ui-breadcrumb-item:not([data-ellipsis]) {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+  .ui-breadcrumb-item[data-ellipsis] {
+    min-inline-size: 0;
+    max-inline-size: var(--breadcrumb-item-max-inline-size);
+  }
+  .ui-breadcrumb-item[data-ellipsis] > svg,
+  .ui-breadcrumb-item[data-ellipsis] > .ui-breadcrumb-separator {
+    flex-shrink: 0;
+  }
+  .ui-breadcrumb-ellipsis {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .ui-empty-state {
     display: flex;
     flex-direction: column;

package/dist/styles/table-layout.css

@@ -212,6 +212,9 @@
     font: inherit;
     cursor: pointer;
     outline: none;
+
+    max-inline-size: 100%;
+    min-inline-size: 0;
   }
 
   .ui-data-table-sort-button::after {
@@ -334,6 +337,11 @@
     display: inline-flex;
     align-items: center;
     gap: var(--space-inline-xs);
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+  .ui-data-table-sort-label > .ui-data-table-sort-icon {
+    flex-shrink: 0;
   }
 
   :is(th, td).text-center > .ui-data-table-sort-button > .ui-data-table-sort-label {

package/dist/tokens/components/navigation.css

@@ -46,6 +46,8 @@
   --breadcrumb-font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
 
   --breadcrumb-menu-trigger-gap: var(--space-inline-xs);
+
+  --breadcrumb-item-max-inline-size: none;
   --menu-shortcut-font-size: var(
     --font-size-xs,
     calc(var(--font-size-base) / var(--font-size-ratio))

package/docs/data-display/progress.tsx

@@ -6,6 +6,7 @@ import {
   CardTitle,
   Progress,
 } from "@godxjp/ui/data-display";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
@@ -13,6 +14,7 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
  * Composed only from real @godxjp/ui components.
  */
 export default function Demo() {
+  const { t, locale } = useTranslation();
   return (
     <PageContainer title="Progress" subtitle="0–100 bar · optional label + semantic tone">
       <Flex direction="col" gap="lg">
@@ -37,11 +39,10 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>shape=&quot;ring&quot;</CardTitle>
             <CardDescription>
-              同じメーターを弧で描きます。バーと同じ value / tone / size / ARIA
-              のまま、label がリングの内側に入ります。狭いアプリバーで「18 / 42
-              件」を見出しの横に出したいとき、バー＋キャプションの 2
-              段ではなく 1 マスで済むのが理由です。数値が重要なときではなく、
-              場所が正方形のときに選びます。
+              同じメーターを弧で描きます。バーと同じ value / tone / size / ARIA のまま、label
+              がリングの内側に入ります。狭いアプリバーで「18 / 42
+              件」を見出しの横に出したいとき、バー＋キャプションの 2 段ではなく 1
+              マスで済むのが理由です。数値が重要なときではなく、 場所が正方形のときに選びます。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -68,7 +69,10 @@ export default function Demo() {
               1 つの合計を状態ごとに分割します。割合ではなく実数を渡すと、各スライスの比率は
               コンポーネントが計算します。メーターより背の高いトラックになるのは、0.5rem の pill
               上に 3 色を並べると比率が読めなくなるためです。role=&quot;img&quot;
-              として、全スライスを 1 つの名前で読み上げます。
+              として、全スライスを 1 つの名前で読み上げます。total を渡すと全体は合計ではなく total
+              になり、残りはトラックのまま「残り」として読み上げます（antd の percent +
+              success.percent と同じく、未塗りのトラックが残り。antd の全体は常に 100
+              ですが、ここは実数の単位で total を指定します）。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -89,6 +93,20 @@ export default function Demo() {
                 ]}
                 label="みどり農産株式会社（0 件のスライスは幅 0）"
               />
+              {/* total を渡すと、スライスは合計ではなく total に対して描かれ、残りはトラックのまま。
+                  読み上げには残り（remainderLabel）が Intl 形式の数値で入ります。 */}
+              <Progress
+                segments={[
+                  { value: 3, tone: "success", label: t("progressDocs.testRun.passed") },
+                  { value: 1, tone: "destructive", label: t("progressDocs.testRun.failed") },
+                  { value: 2, tone: "warning", label: t("progressDocs.testRun.blocked") },
+                ]}
+                total={400}
+                remainderLabel={t("progressDocs.testRun.notRun")}
+                label={t("progressDocs.testRun.caption", {
+                  total: new Intl.NumberFormat(locale).format(400),
+                })}
+              />
             </Flex>
           </CardContent>
         </Card>

package/docs/general/typography.tsx

@@ -21,8 +21,10 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  DataTable,
+  Tree,
 } from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Breadcrumb, Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 
 /**
  * Text + Heading — the typographic primitives. Use these INSTEAD of a hand-rolled
@@ -46,8 +48,15 @@ const headingTones = [
   { tone: "info", title: "システムメンテナンスのお知らせ" },
 ] as const;
 
+type SuiteRow = { id: string; title: string };
+
 export default function Demo() {
   const { t } = useTranslation();
+  const longTitle = t("textExamples.ellipsisLongTitle");
+  const suiteRows: SuiteRow[] = [
+    { id: "TS-0412", title: longTitle },
+    { id: "TS-0413", title: t("textExamples.ellipsisShortTitle") },
+  ];
   return (
     <PageContainer
       title="Typography"
@@ -388,6 +397,80 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("textExamples.ellipsisTitle")}</CardTitle>
+            <CardDescription>{t("textExamples.ellipsisDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <ResponsiveGrid columns={{ sm: 2, lg: 3 }}>
+                <Flex direction="col" gap="xs">
+                  <Text size="xs" tone="muted">
+                    {t("textExamples.ellipsisPlain")}
+                  </Text>
+                  <Text ellipsis={{ tooltip: true }}>{longTitle}</Text>
+                </Flex>
+                <Flex direction="col" gap="xs">
+                  <Text size="xs" tone="muted">
+                    {t("textExamples.ellipsisLink")}
+                  </Text>
+                  <Text asChild link ellipsis={{ tooltip: true }}>
+                    <a href="#typography">{longTitle}</a>
+                  </Text>
+                </Flex>
+                <Flex direction="col" gap="xs">
+                  <Text size="xs" tone="muted">
+                    {t("textExamples.ellipsisTree")}
+                  </Text>
+                  <Tree
+                    aria-label={t("textExamples.ellipsisTree")}
+                    treeData={[
+                      {
+                        value: "suite",
+                        label: longTitle,
+                        children: [
+                          { value: "case-1", label: t("textExamples.ellipsisShortTitle") },
+                        ],
+                      },
+                    ]}
+                    defaultExpandedValues={["suite"]}
+                    titleRender={(node) => <Text ellipsis={{ tooltip: true }}>{node.label}</Text>}
+                  />
+                </Flex>
+              </ResponsiveGrid>
+              <DataTable<SuiteRow>
+                label={t("textExamples.ellipsisTable")}
+                data={suiteRows}
+                getRowId={(row) => row.id}
+                columns={[
+                  { key: "id", header: "ID", width: "7rem", render: (row) => row.id },
+                  {
+                    key: "title",
+                    header: (
+                      <Text ellipsis={{ tooltip: true }}>
+                        {t("textExamples.ellipsisLongHeader")}
+                      </Text>
+                    ),
+                    width: "12rem",
+                    ellipsis: true,
+                    sortable: true,
+                    sorter: (a, b) => a.title.localeCompare(b.title),
+                    render: (row) => <Text ellipsis={{ tooltip: true }}>{row.title}</Text>,
+                  },
+                ]}
+              />
+              <Breadcrumb
+                ariaLabel={t("textExamples.ellipsisBreadcrumb")}
+                items={[
+                  { label: t("textExamples.ellipsisCrumbHome"), to: "#typography" },
+                  { label: longTitle, to: "#typography", ellipsis: true },
+                  { label: longTitle, ellipsis: true },
+                ]}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
         <Card>
           <CardHeader>
             <CardTitle level={2}>copyable · editable · 装飾</CardTitle>

package/docs/i18n/messages/en.json

@@ -6,7 +6,18 @@
     "breakDescription": "An identifier with nowhere to break — an email address, a coupon code, a login ID — takes break=\"anywhere\", and the column stays inside the viewport even in a table cell. whitespace=\"pre-wrap\" is for newlines a person typed; it cannot wrap an identifier in a table cell.",
     "breakColumnOwner": "Owner",
     "breakColumnEmail": "Email address",
-    "breakSampleName": "Sato"
+    "breakSampleName": "Sato",
+    "ellipsisTitle": "ellipsis · the full text in a tooltip while it is cut",
+    "ellipsisDescription": "ellipsis={{ tooltip: true }} keeps one line and shows the whole text on hover and on keyboard focus of the control it sits in (the link, the tree item, the sort button). A title that fits shows no tooltip, and the Text never becomes a tab stop of its own.",
+    "ellipsisPlain": "Plain Text",
+    "ellipsisLink": "Text asChild · link",
+    "ellipsisTree": "Tree titleRender",
+    "ellipsisTable": "Test suites",
+    "ellipsisBreadcrumb": "Truncated breadcrumb",
+    "ellipsisCrumbHome": "Home",
+    "ellipsisLongTitle": "Q3 integration test · payment module · invoice re-issue scenarios and acceptance criteria review",
+    "ellipsisShortTitle": "Login smoke test",
+    "ellipsisLongHeader": "Latest run name (release candidate 2026-09)"
   },
   "themeShowcase": {
     "page": {
@@ -1469,5 +1480,22 @@
         "other": "Load {count} more"
       }
     }
+  },
+  "progressDocs": {
+    "testRun": {
+      "passed": "Passed",
+      "failed": "Failed",
+      "blocked": "Blocked",
+      "notRun": "Not run",
+      "caption": "Regression suite — {total} cases"
+    }
+  },
+  "breadcrumbExamples": {
+    "ellipsisTitle": "ellipsis · a long segment on one line",
+    "ellipsisDescription": "ellipsis on a segment keeps the trail on one line and cuts that label with \"…\"; the full label shows in a tooltip on hover and when the crumb link takes keyboard focus. antd Breadcrumb has no per-item ellipsis — the shape is Typography’s. PageContainer breadcrumb takes the same item field.",
+    "ellipsisAria": "Truncated breadcrumb",
+    "home": "Home",
+    "longSuite": "Q3 integration test · payment module · invoice re-issue scenarios",
+    "longSection": "Acceptance criteria review for the release candidate of September 2026"
   }
 }

package/docs/i18n/messages/ja.json

@@ -6,7 +6,18 @@
     "breakDescription": "メールアドレス・クーポンコード・ログイン ID のような区切りのない識別子は break=\"anywhere\"。表のセルでも列が画面幅に収まります。whitespace=\"pre-wrap\" は人が入力した改行のためのもので、表のセルでは識別子を折り返せません。",
     "breakColumnOwner": "担当者",
     "breakColumnEmail": "メールアドレス",
-    "breakSampleName": "佐藤"
+    "breakSampleName": "佐藤",
+    "ellipsisTitle": "ellipsis · 省略中は全文をツールチップで",
+    "ellipsisDescription": "ellipsis={{ tooltip: true }} は 1 行に収め、ホバーと、置かれたコントロール（リンク・ツリー項目・並べ替えボタン）へのキーボードフォーカスで全文を表示します。収まるタイトルにはツールチップを出さず、Text 自体はタブ移動先になりません。",
+    "ellipsisPlain": "通常の Text",
+    "ellipsisLink": "Text asChild · リンク",
+    "ellipsisTree": "Tree の titleRender",
+    "ellipsisTable": "テストスイート",
+    "ellipsisBreadcrumb": "省略付きパンくずリスト",
+    "ellipsisCrumbHome": "ホーム",
+    "ellipsisLongTitle": "第3四半期 結合テスト 決済モジュール 請求書再発行シナリオと受入基準のレビュー",
+    "ellipsisShortTitle": "ログインのスモークテスト",
+    "ellipsisLongHeader": "最新の実行名（2026年9月 リリース候補）"
   },
   "themeShowcase": {
     "page": {
@@ -1462,5 +1473,22 @@
         "other": "さらに {count} 件を読み込む"
       }
     }
+  },
+  "progressDocs": {
+    "testRun": {
+      "passed": "合格",
+      "failed": "失敗",
+      "blocked": "ブロック",
+      "notRun": "未実施",
+      "caption": "回帰テスト — 全 {total} 件"
+    }
+  },
+  "breadcrumbExamples": {
+    "ellipsisTitle": "ellipsis · 長いセグメントを 1 行に",
+    "ellipsisDescription": "セグメントに ellipsis を付けるとパンくずは 1 行のまま、そのラベルを「…」で省略します。全文はホバーと、パンくずのリンクへのキーボードフォーカスでツールチップに出ます。antd の Breadcrumb に項目単位の省略はなく、形は Typography に合わせています。PageContainer の breadcrumb も同じ項目フィールドを受け付けます。",
+    "ellipsisAria": "省略付きパンくずリスト",
+    "home": "ホーム",
+    "longSuite": "第3四半期 結合テスト 決済モジュール 請求書再発行シナリオ",
+    "longSection": "2026年9月 リリース候補の受入基準レビュー"
   }
 }

package/docs/i18n/messages/vi.json

@@ -6,7 +6,18 @@
     "breakDescription": "Định danh không có chỗ ngắt — địa chỉ email, mã giảm giá, ID đăng nhập — dùng break=\"anywhere\", và cột vẫn nằm gọn trong bề ngang màn hình kể cả trong ô của bảng. whitespace=\"pre-wrap\" dành cho ký tự xuống dòng do người nhập; nó không ngắt được một định danh trong ô bảng.",
     "breakColumnOwner": "Phụ trách",
     "breakColumnEmail": "Địa chỉ email",
-    "breakSampleName": "Sato"
+    "breakSampleName": "Sato",
+    "ellipsisTitle": "ellipsis · toàn văn trong tooltip khi bị cắt",
+    "ellipsisDescription": "ellipsis={{ tooltip: true }} giữ một dòng và hiện toàn văn khi rê chuột và khi bàn phím đưa tiêu điểm tới điều khiển chứa nó (liên kết, mục cây, nút sắp xếp). Tiêu đề vừa chỗ thì không có tooltip, và Text không bao giờ tự thành một điểm dừng Tab.",
+    "ellipsisPlain": "Text thường",
+    "ellipsisLink": "Text asChild · liên kết",
+    "ellipsisTree": "titleRender của Tree",
+    "ellipsisTable": "Bộ kiểm thử",
+    "ellipsisBreadcrumb": "Breadcrumb có cắt chữ",
+    "ellipsisCrumbHome": "Trang chủ",
+    "ellipsisLongTitle": "Kiểm thử tích hợp quý 3 · mô-đun thanh toán · kịch bản xuất lại hoá đơn và rà soát tiêu chí nghiệm thu",
+    "ellipsisShortTitle": "Kiểm thử nhanh đăng nhập",
+    "ellipsisLongHeader": "Tên lần chạy gần nhất (bản ứng viên 2026-09)"
   },
   "themeShowcase": {
     "page": {
@@ -1462,5 +1473,22 @@
         "other": "Tải thêm {count} ca"
       }
     }
+  },
+  "progressDocs": {
+    "testRun": {
+      "passed": "Đạt",
+      "failed": "Lỗi",
+      "blocked": "Bị chặn",
+      "notRun": "Chưa chạy",
+      "caption": "Bộ kiểm thử hồi quy — {total} ca"
+    }
+  },
+  "breadcrumbExamples": {
+    "ellipsisTitle": "ellipsis · một đoạn dài trên một dòng",
+    "ellipsisDescription": "ellipsis trên một đoạn giữ breadcrumb trên một dòng và cắt nhãn đó bằng \"…\"; toàn văn hiện trong tooltip khi rê chuột và khi liên kết của đoạn nhận tiêu điểm bàn phím. Breadcrumb của antd không có ellipsis theo từng mục — hình dạng lấy theo Typography. breadcrumb của PageContainer nhận cùng trường này.",
+    "ellipsisAria": "Breadcrumb có cắt chữ",
+    "home": "Trang chủ",
+    "longSuite": "Kiểm thử tích hợp quý 3 · mô-đun thanh toán · kịch bản xuất lại hoá đơn",
+    "longSection": "Rà soát tiêu chí nghiệm thu cho bản ứng viên tháng 9/2026"
   }
 }

package/docs/navigation/breadcrumb.tsx

@@ -9,6 +9,7 @@ import {
   CodeBlock,
 } from "@godxjp/ui/data-display";
 import { Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Breadcrumb } from "@godxjp/ui/layout";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
@@ -25,6 +26,9 @@ const RouterLink = forwardRef<
 });
 
 export default function Demo() {
+  const { t } = useTranslation();
+  const suite = t("breadcrumbExamples.longSuite");
+  const section = t("breadcrumbExamples.longSection");
   return (
     <PageContainer
       title="Breadcrumb"
@@ -177,6 +181,26 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        {/* gh#1046 — a long segment cut to one line, the full label in a tooltip. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("breadcrumbExamples.ellipsisTitle")}</CardTitle>
+            <CardDescription>{t("breadcrumbExamples.ellipsisDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div id="breadcrumb-ellipsis">
+              <Breadcrumb
+                ariaLabel={t("breadcrumbExamples.ellipsisAria")}
+                items={[
+                  { label: t("breadcrumbExamples.home"), to: "/" },
+                  { label: suite, to: "/suites/412", ellipsis: true },
+                  { label: section, ellipsis: true },
+                ]}
+              />
+            </div>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );