@godxjp/ui 31.6.0 → 31.8.0

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/control.css

@@ -738,6 +738,85 @@
     text-transform: uppercase;
   }
 
+  .ui-color-picker[data-panel] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .ui-color-picker-picker {
+    display: flex;
+    align-items: center;
+    gap: var(--control-gap);
+  }
+
+  .ui-color-picker-presets {
+    display: flex;
+    flex-direction: column;
+    gap: var(--color-picker-presets-gap);
+  }
+
+  .ui-color-picker-presets-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    min-block-size: var(--touch-target-min);
+    color: hsl(var(--muted-foreground));
+    font-size: var(--color-picker-presets-font-size);
+    text-align: start;
+  }
+
+  .ui-color-picker-presets-chevron {
+    width: var(--control-icon-size);
+    height: var(--control-icon-size);
+    flex-shrink: 0;
+    transition: rotate 150ms;
+  }
+
+  .ui-color-picker-presets-trigger[data-state="closed"] .ui-color-picker-presets-chevron {
+    rotate: -90deg;
+  }
+
+  .ui-color-picker-presets-trigger[data-state="closed"]:dir(rtl) .ui-color-picker-presets-chevron {
+    rotate: 90deg;
+  }
+
+  .ui-color-picker-presets-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--color-picker-preset-gap);
+    padding-block: var(--space-1);
+  }
+
+  .ui-color-picker-presets-color {
+    display: inline-block;
+    flex-shrink: 0;
+    inline-size: var(--color-picker-preset-size);
+    block-size: var(--color-picker-preset-size);
+    border: var(--stroke-hairline) solid hsl(var(--input) / var(--input-alpha, 100%));
+    border-radius: var(--control-radius);
+    background-color: var(--color-picker-preset-color, transparent);
+    cursor: pointer;
+    forced-color-adjust: none;
+  }
+
+  .ui-color-picker-presets-color[data-selected] {
+    box-shadow:
+      0 0 0 var(--stroke-md) hsl(var(--background)),
+      0 0 0 calc(var(--stroke-md) * 2) hsl(var(--foreground));
+  }
+
+  .ui-color-picker-presets-color[data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+  }
+
+  .ui-color-picker-presets-empty {
+    display: block;
+    padding-block: var(--space-1);
+    color: hsl(var(--muted-foreground));
+    font-size: var(--color-picker-presets-font-size);
+  }
+
   .ui-query-refetch-icon[data-fetching="true"] {
     animation: spin 1s linear infinite;
   }

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.6.0",
+  "version": "31.8.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/control.css

@@ -157,6 +157,10 @@
 
   --color-picker-input-width: 6.5rem;
 
+  --color-picker-preset-size: var(--touch-target-min);
+  --color-picker-preset-gap: var(--space-2);
+  --color-picker-presets-gap: var(--space-1);
+
   --command-list-max-height: min(300px, 50vh);
   --command-input-padding-x: var(--space-3);
   --command-group-padding: var(--space-1);
@@ -192,6 +196,10 @@
     --font-size-xs,
     calc(var(--font-size-base) / var(--font-size-ratio))
   );
+  --color-picker-presets-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --command-group-heading-font-size: var(
     --font-size-xs,
     calc(var(--font-size-base) / var(--font-size-ratio))

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/data-entry/color-picker.tsx

@@ -3,19 +3,33 @@ import { useState } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { ColorPicker, FormField } from "@godxjp/ui/data-entry";
 import { Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
+/** A fixed tag palette (gh#1055): tags pick from it, never from free hex. */
+const TAG_PALETTE = ["#dc2626", "#ea580c", "#ca8a04", "#16a34a", "#0891b2", "#2563eb", "#9333ea"];
+
 /**
  * ColorPicker — hex color swatch + optional editable hex input.
  * Always initialize state to a valid 3- or 6-digit hex string.
  * Use controlled mode (value + onValueChange); no uncontrolled path.
  * Composed only from real @godxjp/ui components.
+ *
+ * `presets` / `panelRender` port antd ColorPicker (gh#1055). Deviations from antd, on purpose:
+ * - `colors` are hex strings only — the value is hex; antd also takes colour objects/gradients.
+ * - There is no popover: the picker is inline, so `panelRender` replaces the inline body. The
+ *   presets-only recipe is antd's own: `panelRender={(_, { components: { Presets } }) => <Presets />}`.
+ * - Each swatch is a real radio (APG radio group, named by its hex, arrow keys select); antd's
+ *   preset blocks are click-only divs.
  */
 export default function Demo() {
   const [brandColor, setBrandColor] = useState("#2563eb");
   const [accentColor, setAccentColor] = useState("#16a34a");
   const [categoryColor, setCategoryColor] = useState("#dc2626");
   const [validatedColor, setValidatedColor] = useState("#9333ea");
+  const [labelColor, setLabelColor] = useState("#16a34a");
+  const [tagColor, setTagColor] = useState("#2563eb");
+  const { t } = useTranslation();
 
   return (
     <PageContainer title="ColorPicker" subtitle="カラーピッカー · スウォッチ＋Hex入力">
@@ -75,6 +89,64 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("showcase.colorPicker.presetsTitle")}</CardTitle>
+            <CardDescription>{t("showcase.colorPicker.presetsDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="label-color" label={t("showcase.colorPicker.paletteLabel")}>
+              <ColorPicker
+                id="label-color"
+                value={labelColor}
+                onValueChange={setLabelColor}
+                presets={[
+                  {
+                    key: "recommended",
+                    label: t("showcase.colorPicker.recommendedGroup"),
+                    colors: TAG_PALETTE,
+                  },
+                  {
+                    key: "recent",
+                    label: t("showcase.colorPicker.recentGroup"),
+                    colors: ["#2563eb", "#16a34a"],
+                    defaultOpen: false,
+                  },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("showcase.colorPicker.presetsOnlyTitle")}</CardTitle>
+            <CardDescription>{t("showcase.colorPicker.presetsOnlyDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="tag-color"
+              label={t("showcase.colorPicker.tagColorLabel")}
+              helper={t("showcase.colorPicker.tagColorHelper")}
+            >
+              <ColorPicker
+                id="tag-color"
+                name="tag_color"
+                value={tagColor}
+                onValueChange={setTagColor}
+                presets={[
+                  {
+                    key: "tags",
+                    label: t("showcase.colorPicker.recommendedGroup"),
+                    colors: TAG_PALETTE,
+                  },
+                ]}
+                panelRender={(_, { components: { Presets } }) => <Presets />}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Hex バリデーションと確定動作</CardTitle>

package/docs/data-entry/select.tsx

@@ -23,6 +23,7 @@ import {
   SelectValue,
 } 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 { X } from "lucide-react";
 
@@ -32,6 +33,7 @@ import { X } from "lucide-react";
  * trigger. Never a raw <select>. Composed only from real @godxjp/ui components.
  */
 export default function Demo() {
+  const { t, locale } = useTranslation();
   const [status, setStatus] = useState("paid");
   const [currency, setCurrency] = useState("JPY");
   const [priority, setPriority] = useState("medium");
@@ -43,6 +45,8 @@ export default function Demo() {
   const [reviewerLabel, setReviewerLabel] = useState("tanaka");
   const [prefixed, setPrefixed] = useState("JPY");
   const [tags, setTags] = useState<string[]>(["至急", "社内便"]);
+  const [labels, setLabels] = useState<string[]>([]);
+  const [created, setCreated] = useState<string[]>([]);
   // antd `labelInValue`: the record arrives carrying its own label, before any option list loads.
   const [assignedTo, setAssignedTo] = useState<
     { value: string; label: React.ReactNode } | undefined
@@ -481,6 +485,40 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("showcase.select.createTitle")}</CardTitle>
+            <CardDescription>{t("showcase.select.createDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="issue-labels"
+              label={t("showcase.select.createField")}
+              helper={
+                created.length
+                  ? t("showcase.select.createdHelper", {
+                      list: new Intl.ListFormat(locale).format(created),
+                    })
+                  : t("showcase.select.createdNone")
+              }
+            >
+              <Select
+                id="issue-labels"
+                mode="tags"
+                value={labels}
+                onValueChange={setLabels}
+                onCreate={(text) => setCreated((previous) => [...previous, text])}
+                allowCreate={(text) => text.length <= 12}
+                options={[
+                  { value: "bug", label: "Bug" },
+                  { value: "feature", label: "Feature" },
+                  { value: "docs", label: "Docs" },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>labelInValue · 読み込み前でも名前が出る</CardTitle>

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": {
@@ -532,6 +543,24 @@
       "longIdTitle": "Long identifiers and +N",
       "ledgerLabel": "Ledger ID",
       "ledgerHelper": "A 71-character identifier still stays inside the control"
+    },
+    "select": {
+      "createTitle": "Tags: create row, onCreate and case-insensitive matching",
+      "createDescription": "Typed text that matches no option is offered as an explicit “Create” row. onCreate reports only invented text, never an option id. Typing “bug” finds “Bug” instead of creating a duplicate (caseSensitive restores exact matching). Unlike antd, the create row is labelled and text longer than 12 characters is refused through allowCreate.",
+      "createField": "Labels",
+      "createdHelper": "Created in this session: {list}",
+      "createdNone": "Nothing created yet"
+    },
+    "colorPicker": {
+      "presetsTitle": "Tag colour from a palette",
+      "presetsDescription": "presets — fixed swatch groups under the picker; each group collapses, and the free picker stays available.",
+      "paletteLabel": "Label colour",
+      "recommendedGroup": "Recommended",
+      "recentGroup": "Recently used",
+      "presetsOnlyTitle": "Palette only",
+      "presetsOnlyDescription": "panelRender returns only Presets — people pick from the palette and cannot type an arbitrary hex.",
+      "tagColorLabel": "Tag colour",
+      "tagColorHelper": "Arrow keys move between swatches; the selected one is announced."
     }
   },
   "serviceLauncherShowcase": {
@@ -1469,5 +1498,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"
   }
 }