@godxjp/ui 33.12.8 → 33.14.0

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 169 components, 2241 design tokens,
-> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.12.8.
+> A Japanese-enterprise React design system: 170 components, 2251 design tokens,
+> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.14.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@33.12.8`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@33.14.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -16,10 +16,10 @@ that can only fetch URLs.
 ## Catalog
 
 - [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 28 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): 53 KB — all 169 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): 53 KB — all 170 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–37 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.3 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` — 218 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 113 `semantic` roles, 1910 `component` knobs.
+- [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` — 218 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 113 `semantic` roles, 1920 `component` knobs.
 - [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
 - [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 44 cardinal rules.
 - [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 35 shapes that make generated UI look generated, each with its fix.
@@ -27,7 +27,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/v33.12.8/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v33.14.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/agent/tokens.json

@@ -10073,6 +10073,66 @@
     "tier": "component",
     "value": "var(--space-2)"
   },
+  {
+    "description": "Default var(--space-2).",
+    "name": "--persona-avatar-gap",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Default zero, set at the call site.",
+    "name": "--persona-label-gap",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Default var(--space-1).",
+    "name": "--persona-trailing-gap",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Identity geometry. Initial spacing/type defaults resolve against the local density.",
+    "name": "--persona-label-line-height",
+    "tier": "component",
+    "value": "1.5"
+  },
+  {
+    "description": "Default var(--font-size-sm).",
+    "name": "--persona-name-font-size",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Default var(--font-size-xs).",
+    "name": "--persona-name-font-size-sm",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Default var(--font-weight-medium).",
+    "name": "--persona-name-font-weight",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Default var(--font-size-xs).",
+    "name": "--persona-description-font-size",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Role mirror: hsl(var(--foreground)).",
+    "name": "--persona-name-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Role mirror: hsl(var(--muted-foreground)).",
+    "name": "--persona-description-color",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Separator layout thickness; focus paint must not reserve extra space.",
     "name": "--resizable-handle-size",
@@ -12534,10 +12594,10 @@
     "value": "var(--space-stack-sm)"
   },
   {
-    "description": "Table component tokens: row height, cell padding.",
+    "description": "default = Card inset, resolved at the row",
     "name": "--table-stacked-collection-card-padding-x",
     "tier": "component",
-    "value": "var(--space-inline-md)"
+    "value": "initial"
   },
   {
     "description": "Table component tokens: row height, cell padding.",

package/agent/vocabulary.json

@@ -1,4 +1,17 @@
 [
+  {
+    "concept": "Which breadcrumb item represents the current page.",
+    "name": "BreadcrumbCurrentItemProp",
+    "notes": "Defaults to last. none retains ancestor links without aria-current; supply to for each ancestor.",
+    "usedBy": [
+      "Breadcrumb",
+      "PageContainer"
+    ],
+    "values": [
+      "last",
+      "none"
+    ]
+  },
   {
     "concept": "Abstract controlled value.",
     "name": "ValueProp<T = string>",

package/dist/components/data-display/data-table.js

@@ -80,6 +80,33 @@ import {
 } from "../../lib/control-styles.js";
 import { isDevelopment } from "../../lib/dev.js";
 import { pageSizeOptionsWith } from "../navigation/pagination-utils.js";
+function recoverCellText(cell) {
+  if (!cell) return;
+  const part = truncatedPart(cell);
+  const value = part && part !== cell ? part : cell.querySelector(".ui-table-stacked-collection-value") ?? cell;
+  const selector = '[title]:not([title=""]), [aria-describedby]';
+  const carrier = value.closest(selector);
+  const recovery = carrier && carrier !== cell ? carrier : value.querySelector(selector);
+  if (recovery) {
+    if (cell.dataset.cellTitle !== void 0) {
+      cell.removeAttribute("title");
+      delete cell.dataset.cellTitle;
+    }
+    return;
+  }
+  if (!cell.title || cell.dataset.cellTitle !== void 0) {
+    const content = value.cloneNode(true);
+    content.querySelectorAll('[aria-hidden="true"], [hidden], .sr-only, [role="tooltip"]').forEach((node) => node.remove());
+    const text = (content.textContent ?? "").replace(/\s+/g, " ").trim();
+    if (text) {
+      if (cell.title !== text) cell.title = text;
+      cell.dataset.cellTitle = "";
+    } else {
+      cell.removeAttribute("title");
+      delete cell.dataset.cellTitle;
+    }
+  }
+}
 function resolveColumnHideBelow(col) {
   if (col.hideBelow) return col.hideBelow;
   if (col.hiddenOnMobile) return "md";
@@ -913,27 +940,40 @@ DataTable.Content = function DataTableContent() {
       observer.disconnect();
     };
   }, [fixedSignature]);
-  const hasEllipsis = !stacked && visibleColumns.some((col) => col.ellipsis);
+  const ellipsisEnabled = visibleColumns.some((col) => col.ellipsis);
+  const hasEllipsis = !stacked && ellipsisEnabled;
+  React.useLayoutEffect(() => {
+    const root = scrollRef.current;
+    if (!root || !ellipsisEnabled) return;
+    const sync = () => {
+      for (const cell of root.querySelectorAll(
+        "tbody td.ui-data-table-ellipsis"
+      ))
+        recoverCellText(cell);
+    };
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(root, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["title", "aria-describedby"]
+    });
+    return () => observer.disconnect();
+  });
   const markTruncated = React.useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
     for (const cell of el.querySelectorAll("tbody td.ui-data-table-ellipsis")) {
       if (cell.contains(document.activeElement)) continue;
-      const ownTitle = cell.dataset.truncatedTitle !== void 0;
+      recoverCellText(cell);
       const part = truncatedPart(cell);
       if (part) {
         cell.dataset.truncated = "";
-        if ((!cell.title || ownTitle) && (part === cell || !part.title)) {
-          cell.title = (part.textContent ?? "").replace(/\s+/g, " ").trim();
-          cell.dataset.truncatedTitle = "";
-        }
         if (!cell.querySelector(TRUNCATION_FOCUSABLE)) cell.tabIndex = 0;
       } else if (cell.dataset.truncated !== void 0) {
         delete cell.dataset.truncated;
-        if (ownTitle) {
-          cell.removeAttribute("title");
-          delete cell.dataset.truncatedTitle;
-        }
         cell.removeAttribute("tabindex");
       }
     }
@@ -1380,6 +1420,7 @@ DataTable.Content = function DataTableContent() {
                               return /* @__PURE__ */ jsx(
                                 TableCell,
                                 {
+                                  ref: col.ellipsis ? recoverCellText : void 0,
                                   priority: col.priority,
                                   "data-align": col.align,
                                   title,

package/dist/components/data-display/index.d.ts

@@ -1,3 +1,5 @@
+export { Persona } from "./persona.js";
+export type { PersonaProp, PersonaProps } from "./persona.js";
 export { Badge, StatusBadge } from "./badge.js";
 export type { BadgeProps, BadgeTone } from "./badge.js";
 export { Legend } from "./legend.js";

package/dist/components/data-display/index.js

@@ -1,3 +1,4 @@
+import { Persona } from "./persona.js";
 import { Badge, StatusBadge } from "./badge.js";
 import { Legend } from "./legend.js";
 import { Swatch } from "./swatch.js";
@@ -78,6 +79,7 @@ export {
   Legend,
   ListRow,
   PermissionMatrix,
+  Persona,
   Popover,
   PopoverAnchor,
   PopoverContent,

package/dist/components/data-display/persona.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type { PersonaProp, PersonaProp as PersonaProps, } from "../../props/components/data-display.prop.js";
+/** A person's identity, independent of row chrome, navigation and account actions. */
+export declare const Persona: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    name: string;
+    description?: string;
+    avatarSrc?: string;
+    avatarFallback?: React.ReactNode;
+    trailing?: React.ReactNode;
+    size?: Extract<import("../../props/index.js").SizeProp, "sm" | "md">;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/data-display/persona.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+const Persona = React.forwardRef(
+  ({ name, description, avatarSrc, avatarFallback, trailing, size = "md", className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      "data-slot": "persona",
+      "data-size": size,
+      className: cn("ui-persona", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(Avatar, { size, "aria-hidden": "true", children: [
+          avatarSrc ? /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: "" }) : null,
+          /* @__PURE__ */ jsx(AvatarFallback, { children: avatarFallback ?? Array.from(name)[0] })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { "data-slot": "persona-body", children: [
+          /* @__PURE__ */ jsxs("span", { "data-slot": "persona-name-line", children: [
+            /* @__PURE__ */ jsx("span", { "data-slot": "persona-name", dir: "auto", title: name, children: name }),
+            trailing != null ? /* @__PURE__ */ jsx("span", { "data-slot": "persona-trailing", children: trailing }) : null
+          ] }),
+          description != null ? /* @__PURE__ */ jsx("span", { "data-slot": "persona-description", dir: "auto", title: description, children: description }) : null
+        ] })
+      ]
+    }
+  )
+);
+Persona.displayName = "Persona";
+export {
+  Persona
+};

package/dist/components/data-entry/branch-scope-picker.d.ts

@@ -10,6 +10,9 @@ export declare const BranchScopePicker: React.ForwardRefExoticComponent<import("
     value?: BranchScopeValueProp;
     defaultValue?: BranchScopeValueProp;
     onValueChange?: (value: BranchScopeValueProp) => void;
+    selectionMode?: "single" | "multiple";
+    allowAll?: boolean;
+    hideWhenSingle?: boolean;
     disabled?: import("../../props/index.js").DisabledProp;
     readOnly?: boolean;
     searchable?: boolean;

package/dist/components/data-entry/branch-scope-picker.js

@@ -11,17 +11,21 @@ import { SkeletonRows } from "../feedback/skeleton.js";
 import { Text } from "../general/typography.js";
 import { CheckboxGroup } from "./checkbox-group.js";
 import { RadioGroup } from "./radio.js";
+import { Select } from "./select.js";
 import { SearchInput } from "./search-input.js";
 const DEFAULT_VALUE = { mode: "all" };
 const BranchScopePicker = React.forwardRef(
   function BranchScopePicker2({
     branches,
     value: controlledValue,
-    defaultValue = DEFAULT_VALUE,
+    defaultValue,
     onValueChange,
     disabled = false,
     readOnly = false,
     searchable = true,
+    selectionMode = "multiple",
+    allowAll = true,
+    hideWhenSingle = false,
     error,
     loading = false,
     empty,
@@ -39,7 +43,9 @@ const BranchScopePicker = React.forwardRef(
     const reactId = React.useId();
     const rootId = id ?? `branch-scope-${reactId}`;
     const errorId = `${rootId}-error`;
-    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+    const [uncontrolled, setUncontrolled] = React.useState(
+      defaultValue ?? (allowAll ? DEFAULT_VALUE : { mode: "selected", branchIds: [] })
+    );
     const value = controlledValue ?? uncontrolled;
     const branchIds = React.useMemo(() => value.branchIds ?? [], [value.branchIds]);
     const commit = (next) => {
@@ -109,12 +115,58 @@ const BranchScopePicker = React.forwardRef(
         /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: empty ?? /* @__PURE__ */ jsx(EmptyState, { variant: "compact", title: t("dataEntry.branchScope.empty"), titleAs: "p" }) })
       );
     }
+    if (hideWhenSingle && branches.length === 1 && !branches[0].disabled && !invalid) return null;
+    if (selectionMode === "single") {
+      const selected = value.mode === "selected" && branchIds.length === 1 && branches.some((branch) => branch.id === branchIds[0]) ? `branch:${branchIds[0]}` : value.mode === "all" && allowAll ? "all" : "";
+      return surface(
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: selected,
+              onValueChange: (next) => {
+                if (next === "all" && allowAll) commit({ mode: "all" });
+                else if (next.startsWith("branch:"))
+                  commit({ mode: "selected", branchIds: [next.slice(7)] });
+              },
+              options: [
+                ...allowAll ? [
+                  {
+                    value: "all",
+                    label: typeof resolvedAllLabel === "string" ? resolvedAllLabel : t("dataEntry.branchScope.all")
+                  }
+                ] : [],
+                ...branches.map((branch) => ({
+                  value: `branch:${branch.id}`,
+                  label: branch.name,
+                  disabled: branch.disabled
+                }))
+              ],
+              optionRender: (option) => option.value === "all" ? resolvedAllLabel : option.label,
+              labelRender: (option) => option.value === "all" ? resolvedAllLabel : option.label,
+              showSearch: searchable,
+              searchPlaceholder: t("dataEntry.branchScope.searchPlaceholder"),
+              placeholder: t("dataEntry.branchScope.choose"),
+              notFoundContent: notFoundContent ?? t("dataEntry.branchScope.noMatches"),
+              disabled,
+              readOnly,
+              name,
+              ...fieldA11y,
+              "aria-label": fieldA11y["aria-label"] ?? t("dataEntry.branchScope.listLabel"),
+              "aria-invalid": invalid ? true : fieldA11y["aria-invalid"],
+              "aria-errormessage": invalid ? mergeAriaIds(errorId, fieldA11y["aria-errormessage"]) : void 0
+            }
+          ),
+          invalid && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-error-strong text-xs", children: error })
+        ] })
+      );
+    }
     if (readOnly) {
       const selectedBranches = branches.filter((branch) => branchIds.includes(branch.id));
       return surface(
         /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Text, { size: "sm", weight: "medium", children: value.mode === "all" ? resolvedAllLabel : resolvedSelectedLabel }),
-          value.mode === "selected" && /* @__PURE__ */ jsx("div", { className: "ui-branch-scope-picker-badges", children: selectedBranches.map((branch) => /* @__PURE__ */ jsx(Badge, { variant: "outline", children: branch.name }, branch.id)) })
+          /* @__PURE__ */ jsx(Text, { size: "sm", weight: "medium", children: value.mode === "all" && allowAll ? resolvedAllLabel : resolvedSelectedLabel }),
+          (value.mode === "selected" || !allowAll) && /* @__PURE__ */ jsx("div", { className: "ui-branch-scope-picker-badges", children: selectedBranches.map((branch) => /* @__PURE__ */ jsx(Badge, { variant: "outline", children: branch.name }, branch.id)) })
         ] })
       );
     }
@@ -123,16 +175,18 @@ const BranchScopePicker = React.forwardRef(
         /* @__PURE__ */ jsx(
           RadioGroup,
           {
-            value: value.mode,
+            value: allowAll ? value.mode : "selected",
             onValueChange: (mode) => {
               commit({ ...value, mode });
             },
             options: [
-              {
-                value: "all",
-                label: resolvedAllLabel,
-                description: allLabel === void 0 ? t("dataEntry.branchScope.allDescription") : void 0
-              },
+              ...allowAll ? [
+                {
+                  value: "all",
+                  label: resolvedAllLabel,
+                  description: allLabel === void 0 ? t("dataEntry.branchScope.allDescription") : void 0
+                }
+              ] : [],
               {
                 value: "selected",
                 label: resolvedSelectedLabel,
@@ -146,7 +200,7 @@ const BranchScopePicker = React.forwardRef(
             "aria-errormessage": invalid ? mergeAriaIds(errorId, fieldA11y["aria-errormessage"]) : void 0
           }
         ),
-        value.mode === "selected" && /* @__PURE__ */ jsxs("div", { className: "ui-branch-scope-picker-subset", children: [
+        (value.mode === "selected" || !allowAll) && /* @__PURE__ */ jsxs("div", { className: "ui-branch-scope-picker-subset", children: [
           searchable && branches.length > 0 && /* @__PURE__ */ jsx(
             SearchInput,
             {

package/dist/components/layout/breadcrumb-ellipsis.js

@@ -1,8 +1,24 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cloneElement, useRef } from "react";
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useRef
+} from "react";
 import { cn } from "../../lib/utils.js";
 import { EllipsisTooltip } from "../feedback/tooltip.js";
+function labelText(label) {
+  return Children.toArray(label).map((node) => {
+    if (typeof node === "string" || typeof node === "number") return String(node);
+    if (!isValidElement(node))
+      return "";
+    if (node.props["aria-hidden"] === true || node.props["aria-hidden"] === "true" || node.props.hidden)
+      return "";
+    return labelText(node.props.children);
+  }).join("");
+}
 function trailEllipsis(items) {
   return items.some((item) => item.ellipsis) ? "" : void 0;
 }
@@ -11,12 +27,28 @@ function BreadcrumbCrumbText({
   children
 }) {
   const anchorRef = useRef(null);
+  const fullLabel = labelText(item.label);
+  useEffect(() => {
+    const node = anchorRef.current;
+    if (!node || !item.ellipsis) return;
+    const rendered = node.cloneNode(true);
+    rendered.querySelectorAll('[aria-hidden="true"], [hidden]').forEach((child) => child.remove());
+    const text = rendered.textContent || fullLabel;
+    if (text) {
+      node.setAttribute("aria-label", text);
+      node.setAttribute("title", text);
+    }
+  }, [fullLabel, item.label, item.ellipsis]);
   if (!item.ellipsis) return children;
   const tooltip = typeof item.ellipsis === "object" && "tooltip" in item.ellipsis ? item.ellipsis.tooltip === true ? item.label : item.ellipsis.tooltip : item.label;
   const hasTooltip = tooltip !== void 0 && tooltip !== null && tooltip !== false && tooltip !== "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     cloneElement(children, {
+      // Keep the label's own start visible regardless of the page direction (#1370).
+      dir: "auto",
       ref: anchorRef,
+      "aria-label": fullLabel || void 0,
+      title: fullLabel || void 0,
       className: cn(children.props.className, "ui-breadcrumb-ellipsis")
     }),
     hasTooltip ? /* @__PURE__ */ jsx(EllipsisTooltip, { anchorRef, title: tooltip }) : null

package/dist/components/layout/breadcrumb.d.ts

@@ -1,7 +1,9 @@
 import type { ElementType } from "react";
-import type { BreadcrumbItemRenderProp, BreadcrumbProp, BreadcrumbSeparatorProp } from "../../props/vocabulary/navigation.prop.js";
+import type { BreadcrumbCurrentItemProp, BreadcrumbItemRenderProp, BreadcrumbProp, BreadcrumbSeparatorProp } from "../../props/vocabulary/navigation.prop.js";
 export type BreadcrumbProps = {
     items: BreadcrumbProp;
+    /** Last item is current by default; none keeps an ancestor-only trail linked. */
+    currentItem?: BreadcrumbCurrentItemProp;
     linkComponent?: ElementType;
     /** Override the `<nav>` landmark's accessible name. Defaults to a localized "Breadcrumb". */
     ariaLabel?: string;
@@ -18,4 +20,4 @@ export type BreadcrumbProps = {
      */
     itemRender?: BreadcrumbItemRenderProp;
 };
-export declare function Breadcrumb({ items, linkComponent: LinkComponent, ariaLabel, separator, itemRender, }: BreadcrumbProps): import("react").JSX.Element;
+export declare function Breadcrumb({ items, currentItem, linkComponent: LinkComponent, ariaLabel, separator, itemRender, }: BreadcrumbProps): import("react").JSX.Element;

package/dist/components/layout/breadcrumb.js

@@ -11,6 +11,7 @@ import {
 } from "../navigation/dropdown-menu.js";
 function Breadcrumb({
   items,
+  currentItem = "last",
   linkComponent: LinkComponent = "a",
   ariaLabel,
   separator,
@@ -27,7 +28,15 @@ function Breadcrumb({
         "data-ellipsis": item.ellipsis ? "" : void 0,
         children: [
           index > 0 ? /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-separator", "aria-hidden": "true", children: separatorNode }) : null,
-          renderBreadcrumbSegment({ item, index, isLast, items, itemRender, LinkComponent })
+          renderBreadcrumbSegment({
+            item,
+            index,
+            isLast,
+            isCurrent: isLast && currentItem === "last",
+            items,
+            itemRender,
+            LinkComponent
+          })
         ]
       },
       item.to ?? index
@@ -38,6 +47,7 @@ function renderBreadcrumbSegment({
   item,
   index,
   isLast,
+  isCurrent,
   items,
   itemRender,
   LinkComponent
@@ -62,10 +72,10 @@ function renderBreadcrumbSegment({
       )) })
     ] });
   }
-  if (item.to && !isLast) {
+  if (item.to && !isCurrent) {
     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(BreadcrumbCrumbText, { item, children: /* @__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": isCurrent ? "page" : void 0, children: item.label }) });
 }
 export {
   Breadcrumb

package/dist/components/layout/page-container.d.ts

@@ -2,7 +2,7 @@ import type { PageContainerProp, PageInsetProp } from "../../props/components/la
 export type { PageContainerProp, PageContainerProp as PageContainerProps, PageContainerExtraProp, } from "../../props/components/layout.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop.js";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, status, extra, toolbar, footer, toolbarPad, footerPad, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, titleRef, density, variant, preset, headerLayout, headerScale, icon, cover, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, status, extra, toolbar, footer, toolbarPad, footerPad, breadcrumb, breadcrumbCurrentItem, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, titleRef, density, variant, preset, headerLayout, headerScale, icon, cover, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

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

@@ -42,6 +42,7 @@ function PageContainerRoot({
   toolbarPad,
   footerPad,
   breadcrumb,
+  breadcrumbCurrentItem = "last",
   breadcrumbLabel,
   breadcrumbAriaLabel,
   linkComponent: LinkComponent = "a",
@@ -111,6 +112,7 @@ function PageContainerRoot({
                   className: "ui-breadcrumb",
                   children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", "data-ellipsis": trailEllipsis(breadcrumb), children: breadcrumb.map((item, i) => {
                     const isLast = i === breadcrumb.length - 1;
+                    const isCurrent = isLast && breadcrumbCurrentItem === "last";
                     return (
                       // `--space-inline-xs` gap the previous `.ui-inline-xs` gave, and it brings
                       // `.ui-breadcrumb-item svg { 0.75rem }` with it, so the separator glyph no
@@ -124,7 +126,7 @@ function PageContainerRoot({
                           "data-ellipsis": item.ellipsis ? "" : void 0,
                           children: [
                             i > 0 ? /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) }) : null,
-                            item.to && !isLast ? /* @__PURE__ */ jsx(BreadcrumbCrumbText, { item, children: /* @__PURE__ */ jsx(
+                            item.to && !isCurrent ? /* @__PURE__ */ jsx(BreadcrumbCrumbText, { item, children: /* @__PURE__ */ jsx(
                               LinkComponent,
                               {
                                 href: item.to,
@@ -135,8 +137,8 @@ function PageContainerRoot({
                             ) }) : /* @__PURE__ */ jsx(BreadcrumbCrumbText, { item, children: /* @__PURE__ */ jsx(
                               "span",
                               {
-                                className: isLast ? "text-foreground" : "",
-                                "aria-current": isLast ? "page" : void 0,
+                                className: isCurrent ? "text-foreground" : "",
+                                "aria-current": isCurrent ? "page" : void 0,
                                 children: item.label
                               }
                             ) })

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": "33.12.8",
+  "version": "33.14.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

@@ -171,7 +171,8 @@
       "error": "Could not load branches",
       "denied": "You do not have permission to view branches",
       "loading": "Loading branches…",
-      "noMatches": "No branches match your search"
+      "noMatches": "No branches match your search",
+      "choose": "Choose a branch"
     },
     "formErrors": {
       "title": "Please review the following errors"