@godxjp/ui 20.0.0 → 20.1.0

package/dist/components/feedback/dialog.js

@@ -12,7 +12,7 @@ import { buttonVariants } from "../general/button.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Button } from "../general/button.js";
 import { Input } from "../data-entry/input.js";
-import { Label } from "../data-entry/label.js";
+import { FormField } from "../data-entry/form-field.js";
 function useOverlayOpenState({ open, defaultOpen, onOpenChange }) {
   const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false);
   const isOpen = open ?? uncontrolled;
@@ -407,24 +407,21 @@ function AlertDialog({
       /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
       description ? /* @__PURE__ */ jsx(AlertDialogDescription, { children: description }) : null
     ] }),
-    needsPhrase && /* @__PURE__ */ jsxs("div", { className: "ui-stack-xs", children: [
-      /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: t("common.typeToConfirm", { phrase }) }),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          id: inputId,
-          value: typed,
-          onChange: (e) => {
-            setTyped(e.target.value);
-          },
-          autoComplete: "off",
-          spellCheck: false,
-          placeholder: phrase,
-          "aria-required": "true",
-          disabled: busy
-        }
-      )
-    ] }),
+    needsPhrase && /* @__PURE__ */ jsx(FormField, { id: inputId, label: t("common.typeToConfirm", { phrase }), children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: inputId,
+        value: typed,
+        onChange: (e) => {
+          setTyped(e.target.value);
+        },
+        autoComplete: "off",
+        spellCheck: false,
+        placeholder: phrase,
+        "aria-required": "true",
+        disabled: busy
+      }
+    ) }),
     stepUpFailed && /* @__PURE__ */ jsx("p", { id: stepErrorId, role: "alert", className: "ui-dialog-step-up-error", children: t("feedback.alert.stepUpFailed") }),
     /* @__PURE__ */ jsxs(DialogFooter, { children: [
       /* @__PURE__ */ jsx(DialogCancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: busy, children: resolvedCancel }) }),

package/dist/components/general/button.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "dashed" | "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    variant?: "bare" | "dashed" | "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
     size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "md" | "sm" | "xs" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/general/button.js

@@ -20,7 +20,11 @@ const buttonVariants = cva("ui-button", {
       dashed: "ui-button--dashed border border-dashed bg-background hover:bg-accent hover:text-accent-foreground",
       secondary: "ui-button--secondary bg-secondary text-secondary-foreground hover:bg-secondary/80",
       ghost: "ui-button--ghost hover:bg-accent hover:text-accent-foreground",
-      link: "ui-button--link text-primary underline-offset-4 hover:underline"
+      link: "ui-button--link text-primary underline-offset-4 hover:underline",
+      // NO utilities, deliberately: `bare` is the absence of geometry, and every property it has
+      // to unset (the size tier's height and inline inset) is declared in the components layer.
+      // A utility here would be the only thing that could out-rank it. See `.ui-button--bare`.
+      bare: "ui-button--bare"
     },
     size: {
       default: "ui-button--default-size",

package/dist/components/general/index.d.ts

@@ -8,3 +8,4 @@ export { Reveal } from "./reveal.js";
 export type { RevealProp, RevealProps } from "./reveal.js";
 export { Activity } from "./activity.js";
 export type { ActivityProp, ActivityProps } from "./activity.js";
+export { VisuallyHidden } from "./visually-hidden.js";

package/dist/components/general/index.js

@@ -3,6 +3,7 @@ import { Text, Heading } from "./typography.js";
 import { Logo } from "./logo.js";
 import { Reveal } from "./reveal.js";
 import { Activity } from "./activity.js";
+import { VisuallyHidden } from "./visually-hidden.js";
 export {
   Activity,
   Button,
@@ -10,5 +11,6 @@ export {
   Logo,
   Reveal,
   Text,
+  VisuallyHidden,
   buttonVariants
 };

package/dist/components/general/typography.d.ts

@@ -14,7 +14,10 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttrib
     align?: import("../../props/index.js").TextAlignProp;
     truncate?: boolean;
     clamp?: number;
+    whitespace?: import("../../props/index.js").TextWhitespaceProp;
     tabular?: boolean;
+    decoration?: "none" | "underline" | "line-through";
+    chip?: boolean;
     mono?: boolean;
     htmlFor?: string;
     href?: string;

package/dist/components/general/typography.js

@@ -12,7 +12,10 @@ const Text = React.forwardRef(
     align,
     truncate,
     clamp,
+    whitespace,
     tabular,
+    decoration,
+    chip,
     mono,
     link,
     className,
@@ -21,6 +24,7 @@ const Text = React.forwardRef(
     ...props
   }, ref) => {
     const clampLines = typeof clamp === "number" && Number.isFinite(clamp) && clamp >= 1 ? Math.floor(clamp) : void 0;
+    const truncating = truncate === true && clampLines === void 0;
     if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
       if (clamp !== void 0 && clampLines === void 0) {
         console.warn(
@@ -32,6 +36,11 @@ const Text = React.forwardRef(
           "Text: `truncate` and `clamp` are mutually exclusive \u2014 `clamp` takes precedence; drop `truncate`."
         );
       }
+      if (whitespace === "pre-wrap" && truncating) {
+        console.warn(
+          'Text: `truncate` and `whitespace="pre-wrap"` are mutually exclusive \u2014 `truncate` takes precedence (one line, one ellipsis); use `clamp` to keep preserved line breaks and still bound the height.'
+        );
+      }
     }
     const typography = {
       "data-slot": "text",
@@ -40,10 +49,15 @@ const Text = React.forwardRef(
       "data-link": link ? "" : void 0,
       "data-weight": weight,
       "data-align": align,
-      "data-truncate": truncate && clampLines === void 0 ? "" : void 0,
+      "data-truncate": truncating ? "" : void 0,
       "data-clamp": clampLines !== void 0 ? "" : void 0,
+      // Inert default: `normal` is CSS's own behaviour, so it emits no attribute and there is no
+      // `[data-whitespace="normal"]` rule to lose a specificity argument with anything.
+      "data-whitespace": whitespace === "pre-wrap" && !truncating ? "pre-wrap" : void 0,
       style: clampLines !== void 0 ? { ...style, "--text-clamp": clampLines } : style,
       "data-tabular": tabular ? "" : void 0,
+      "data-decoration": decoration,
+      "data-chip": chip ? "" : void 0,
       "data-mono": mono ? "" : void 0,
       className: cn("ui-text", className),
       ...props

package/dist/components/general/visually-hidden.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+/** Accessible text without a visible layout box. */
+export declare const VisuallyHidden: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/general/visually-hidden.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const VisuallyHidden = React.forwardRef(function VisuallyHidden2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("span", { ...props, ref, className: cn("sr-only", className) });
+});
+export {
+  VisuallyHidden
+};

package/dist/components/layout/app-launcher.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { AppLauncherProp } from "../../props/components/layout.prop.js";
+export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppLauncherProp as AppLauncherProps, } from "../../props/components/layout.prop.js";
+/** Arbitrary `data-*` hooks — the one escape hatch this closed component keeps open. */
+type DataAttributes = {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
+/**
+ * AppLauncher — the nine-dot app grid in the topbar: the platform's standard way to change app.
+ *
+ * THE TRIGGER IS A `TopbarItem`, NOT A `Button`. A bar cell is as tall as the bar, its hover IS the
+ * bar's surface, and its focus mark is hosted inside it; a `Button variant="ghost"` in the same slot
+ * draws a `--control-height` pill floating in a taller strip, with its own hover fill and its own
+ * ring drawn around that pill. That was the 20.0.0 correction, and it is why nothing here emits a
+ * height: the cell stretches to whatever the bar's height happens to be (`--app-shell-bar-height`,
+ * `--topbar-height`, or the coarse-pointer override), so it names none of them.
+ *
+ * The panel is the SAME responsive contract as `OrgSwitcher`: a desktop popover above
+ * `--sheet-responsive-breakpoint-width` and a focus-trapped bottom Sheet at/below it, through the
+ * shared `useSheetResponsiveMode()` hook rather than a component-local media query.
+ *
+ * ## Related — two components this is repeatedly confused with
+ *
+ * - `ServiceLauncherCard` (data-display) is a launcher tile too, but a PAGE-SIZED one: status,
+ *   hostname, plan, an action button, a reason it is locked. It belongs on a service-catalogue page,
+ *   where choosing is a considered act. The tile here is bar-sized — mark plus name, the whole tile
+ *   one link — because changing app is a reflex. Neither is built out of the other, and a grid of
+ *   `ServiceLauncherCard`s inside a popover is the wrong component, not a smaller version of this.
+ * - `AppShellProp.navRail` says the SAME platform scope as a docked column. Pick ONE: the launcher
+ *   for a platform with MANY apps where switching is occasional (Google Workspace), the rail for a
+ *   single product where switching workspace is constant enough to be worth permanent screen width
+ *   (Slack). Shipping both puts one scope in two places and makes neither authoritative.
+ */
+export declare function AppLauncher({ apps, groups, labels, columns, linkComponent, loading, error, onRetry, responsive, open, onOpenChange, className, ...rest }: AppLauncherProp & Pick<React.ComponentPropsWithoutRef<"button">, "id"> & DataAttributes): React.JSX.Element;

package/dist/components/layout/app-launcher.js

@@ -0,0 +1,228 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Grip, Loader2, RotateCcw } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetHeader,
+  SheetTrigger,
+  useSheetResponsiveMode
+} from "../feedback/sheet.js";
+import { Button } from "../general/button.js";
+import { TopbarItem } from "./topbar-item.js";
+function AppMark({ app }) {
+  return /* @__PURE__ */ jsx("span", { className: "ui-app-launcher-mark", "aria-hidden": "true", children: app.icon ?? app.name.trim().charAt(0).toUpperCase() });
+}
+function AppLauncherTile({
+  app,
+  linkComponent: Link,
+  externalHint,
+  close
+}) {
+  const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AppMark, { app }),
+    /* @__PURE__ */ jsx("span", { className: "ui-app-launcher-name", children: app.name }),
+    app.external && externalHint != null ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: externalHint }) : null
+  ] });
+  const linkProps = {
+    href: app.href,
+    className: "ui-app-launcher-tile ui-focus-ring",
+    "data-active": app.current ? "true" : void 0,
+    "aria-current": app.current ? "page" : void 0,
+    onClick: close,
+    children
+  };
+  return /* @__PURE__ */ jsx("li", { className: "ui-app-launcher-cell", "data-app": app.id, children: app.external || Link == null ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...linkProps,
+      target: app.external ? "_blank" : void 0,
+      rel: app.external ? "noreferrer noopener" : void 0
+    }
+  ) : /* @__PURE__ */ jsx(Link, { ...linkProps }) });
+}
+function AppLauncherGrid({
+  apps,
+  linkComponent,
+  externalHint,
+  close,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("ul", { className: "ui-app-launcher-grid", ...props, children: apps.map((app) => /* @__PURE__ */ jsx(
+    AppLauncherTile,
+    {
+      app,
+      linkComponent,
+      externalHint,
+      close
+    },
+    app.id
+  )) });
+}
+function AppLauncherSection({
+  label,
+  apps,
+  linkComponent,
+  externalHint,
+  close
+}) {
+  const labelId = React.useId();
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": labelId, className: "ui-app-launcher-group", children: [
+    /* @__PURE__ */ jsx("span", { id: labelId, className: "ui-app-launcher-group-label", children: label }),
+    /* @__PURE__ */ jsx(
+      AppLauncherGrid,
+      {
+        apps,
+        linkComponent,
+        externalHint,
+        close
+      }
+    )
+  ] });
+}
+function AppLauncherPanel({
+  apps,
+  groups,
+  labels,
+  columns,
+  linkComponent,
+  loading,
+  error,
+  onRetry,
+  close
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "ui-app-launcher-state", role: "status", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "ui-app-launcher-spinner", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("span", { children: labels.loading })
+    ] });
+  }
+  if (error != null) {
+    return /* @__PURE__ */ jsxs("div", { className: "ui-app-launcher-state", role: "alert", children: [
+      /* @__PURE__ */ jsx("span", { children: error }),
+      onRetry != null ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: onRetry, children: [
+        /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" }),
+        labels.retry
+      ] }) : null
+    ] });
+  }
+  if (!apps.length && (groups ?? []).every((group) => !group.apps.length)) {
+    return /* @__PURE__ */ jsx("div", { className: "ui-app-launcher-state", role: "status", children: /* @__PURE__ */ jsx("span", { children: labels.empty }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ui-app-launcher-panel",
+      style: columns == null ? void 0 : { "--app-launcher-columns": String(columns) },
+      children: [
+        apps.length ? /* @__PURE__ */ jsx(
+          AppLauncherGrid,
+          {
+            apps,
+            linkComponent,
+            externalHint: labels.externalHint,
+            close,
+            "aria-label": labels.title
+          }
+        ) : null,
+        groups?.map((group) => /* @__PURE__ */ jsx(
+          AppLauncherSection,
+          {
+            label: group.label,
+            apps: group.apps,
+            linkComponent,
+            externalHint: labels.externalHint,
+            close
+          },
+          group.label
+        ))
+      ]
+    }
+  );
+}
+function AppLauncher({
+  apps,
+  groups,
+  labels,
+  columns,
+  linkComponent,
+  loading = false,
+  error,
+  onRetry,
+  responsive = "auto",
+  open,
+  onOpenChange,
+  className,
+  ...rest
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const controlled = open !== void 0;
+  const resolvedOpen = controlled ? open : uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (nextOpen) => {
+      if (!controlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [controlled, onOpenChange]
+  );
+  const compactViewport = useSheetResponsiveMode("auto") === "bottom";
+  const sheet = responsive === "sheet" || responsive === "auto" && compactViewport;
+  const close = React.useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const trigger = /* @__PURE__ */ jsx(
+    TopbarItem,
+    {
+      className: cn("ui-app-launcher-trigger", className),
+      "aria-label": labels.trigger,
+      ...rest,
+      children: /* @__PURE__ */ jsx(Grip, { "aria-hidden": "true" })
+    }
+  );
+  const panel = /* @__PURE__ */ jsx(
+    AppLauncherPanel,
+    {
+      apps,
+      groups,
+      labels,
+      columns,
+      linkComponent,
+      loading,
+      error,
+      onRetry,
+      close
+    }
+  );
+  if (sheet) {
+    return /* @__PURE__ */ jsxs(Sheet, { open: resolvedOpen, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxs(
+        SheetContent,
+        {
+          responsive: "bottom",
+          className: "ui-app-launcher-sheet",
+          style: {
+            "--sheet-bottom-max-height": "var(--app-launcher-sheet-max-height)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(SheetHeader, { title: labels.title }),
+            /* @__PURE__ */ jsx(SheetBody, { children: panel })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open: resolvedOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "end", className: "ui-app-launcher-popover", "aria-label": labels.title, children: panel })
+  ] });
+}
+export {
+  AppLauncher
+};

package/dist/components/layout/app-shell.d.ts

@@ -1,4 +1,6 @@
 import * as React from "react";
 import type { AppShellProp } from "../../props/components/layout.prop.js";
 export type { AppShellProp, AppShellProp as AppShellProps, } from "../../props/components/layout.prop.js";
+/** Same rail boundary as shell-layout.css; SSR starts in docked mode. */
+export declare function useAppShellNavigationMode(): "drawer" | "docked";
 export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, navRail, navRailLabel, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;

package/dist/components/layout/app-shell.js

@@ -2,10 +2,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Menu } from "lucide-react";
+import { useMediaQuery } from "../../lib/hooks.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Button } from "../general/button.js";
 import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "../feedback/sheet.js";
 import { NavSurfaceProvider } from "./nav-surface.js";
+function useAppShellNavigationMode() {
+  return useMediaQuery("(width <= 56.25rem)") ? "drawer" : "docked";
+}
 function AppShell({
   sidebar,
   topbar,
@@ -26,11 +30,13 @@ function AppShell({
   onMobileNavOpenChange
 }) {
   const { t } = useTranslation();
+  const navigationMode = useAppShellNavigationMode();
+  const hasSidebar = sidebar !== void 0 && sidebar !== null && sidebar !== false;
   const drawerNav = mobileNav !== void 0 ? mobileNav : navRail !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
     navRail,
     sidebar
   ] }) : sidebar;
-  const hasDrawer = responsiveNavigation === "drawer" && drawerNav != null;
+  const hasDrawer = responsiveNavigation === "drawer" && drawerNav != null && drawerNav !== false;
   const railInDrawer = mobileNav === void 0 && navRail !== void 0;
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
   const drawerOpen = mobileNavOpen ?? uncontrolledOpen;
@@ -38,7 +44,11 @@ function AppShell({
   const handleDrawerClick = (event) => {
     const target = event.target;
     const hit = target.closest("a[href], button, [role='menuitem']");
-    if (hit && !hit.classList.contains("sb-nav-group-trigger")) {
+    if (!hit) {
+      return;
+    }
+    const opensSomething = hit.hasAttribute("aria-expanded") || hit.hasAttribute("aria-haspopup") || hit.classList.contains("sb-nav-group-trigger");
+    if (!opensSomething) {
       setDrawerOpen(false);
     }
   };
@@ -54,7 +64,7 @@ function AppShell({
       );
     }
   }
-  const logoInRail = logo !== void 0 && topbarSpan !== "full";
+  const logoInRail = hasSidebar && logo !== void 0 && topbarSpan !== "full";
   const resolvedTopbar = topbar !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
     !logoInRail && logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
     /* @__PURE__ */ jsx("div", { className: "app-topbar-custom", children: topbar })
@@ -64,10 +74,10 @@ function AppShell({
     /* @__PURE__ */ jsx("div", { className: "app-topbar-spacer" }),
     topbarRight !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-right", children: topbarRight })
   ] });
-  const rail = /* @__PURE__ */ jsxs("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: [
+  const rail = hasSidebar ? /* @__PURE__ */ jsxs("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: [
     logoInRail && /* @__PURE__ */ jsx("div", { className: "app-sidebar-logo", children: logo }),
     sidebar
-  ] });
+  ] }) : null;
   const navRailRegion = navRail === void 0 ? null : /* @__PURE__ */ jsx(
     "aside",
     {
@@ -120,8 +130,10 @@ function AppShell({
     "div",
     {
       className: "app-root",
-      "data-collapsed": sidebarCollapsed ? "true" : void 0,
+      "data-collapsed": hasSidebar && sidebarCollapsed ? "true" : void 0,
+      "data-sidebar": hasSidebar ? void 0 : "none",
       "data-responsive-navigation": responsiveNavigation,
+      "data-navigation": navigationMode,
       "data-topbar": hasTopbarContent ? void 0 : "none",
       "data-topbar-span": topbarSpan === "full" ? "full" : void 0,
       "data-nav-rail": navRail !== void 0 ? "" : void 0,
@@ -145,5 +157,6 @@ function AppShell({
   );
 }
 export {
-  AppShell
+  AppShell,
+  useAppShellNavigationMode
 };

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

@@ -1,9 +1,21 @@
 import type { ElementType } from "react";
-import type { BreadcrumbProp } from "../../props/vocabulary/navigation.prop.js";
+import type { BreadcrumbItemRenderProp, BreadcrumbProp, BreadcrumbSeparatorProp } from "../../props/vocabulary/navigation.prop.js";
 export type BreadcrumbProps = {
     items: BreadcrumbProp;
     linkComponent?: ElementType;
     /** Override the `<nav>` landmark's accessible name. Defaults to a localized "Breadcrumb". */
     ariaLabel?: string;
+    /**
+     * Ant Design `separator`. Defaults to the chevron glyph. A string (`"/"`) or any node replaces
+     * it; `""` removes it. It is always `aria-hidden` — the trail's structure is carried by the
+     * `<ol>`/`<li>`, never by the glyph, so a screen reader never hears "slash" between segments.
+     */
+    separator?: BreadcrumbSeparatorProp;
+    /**
+     * Ant Design `itemRender`. Replaces the anchor/text of ONE segment while this component keeps
+     * owning the `<nav>`, the `<ol>`/`<li>`, the separators and `aria-current` — the parts that make
+     * the trail a landmark. Use it to hand the trail a router `<Link>` (Inertia, react-router).
+     */
+    itemRender?: BreadcrumbItemRenderProp;
 };
-export declare function Breadcrumb({ items, linkComponent: LinkComponent, ariaLabel, }: BreadcrumbProps): import("react").JSX.Element;
+export declare function Breadcrumb({ items, linkComponent: LinkComponent, ariaLabel, separator, itemRender, }: BreadcrumbProps): import("react").JSX.Element;

package/dist/components/layout/breadcrumb.js

@@ -1,21 +1,63 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../navigation/dropdown-menu.js";
 function Breadcrumb({
   items,
   linkComponent: LinkComponent = "a",
-  ariaLabel
+  ariaLabel,
+  separator,
+  itemRender
 }) {
   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) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxs("li", { className: "ui-breadcrumb-item", children: [
-      item.to && !isLast ? /* @__PURE__ */ jsx(LinkComponent, { href: item.to, to: item.to, className: "ui-breadcrumb-link", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-current", "aria-current": isLast ? "page" : void 0, children: item.label }),
-      !isLast ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) : null
+      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({
+  item,
+  index,
+  isLast,
+  items,
+  itemRender,
+  LinkComponent
+}) {
+  if (itemRender) return itemRender(item, { index, isLast, items });
+  if (item.menu) {
+    const { items: menuItems, onSelect } = item.menu;
+    return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenuTrigger, { className: "ui-breadcrumb-menu-trigger ui-focus-ring", children: [
+        item.label,
+        /* @__PURE__ */ jsx(ChevronDown, { className: "ui-breadcrumb-menu-icon", "aria-hidden": "true" })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { placement: "bottomStart", children: menuItems.map((entry) => /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          disabled: entry.disabled,
+          onSelect: onSelect ? () => onSelect(entry.value) : void 0,
+          asChild: entry.to !== void 0,
+          children: entry.to !== void 0 ? /* @__PURE__ */ jsx(LinkComponent, { href: entry.to, to: entry.to, children: entry.label }) : entry.label
+        },
+        entry.value
+      )) })
+    ] });
+  }
+  if (item.to && !isLast) {
+    return /* @__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 });
+}
 export {
   Breadcrumb
 };

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

@@ -1,3 +1,3 @@
 import type { FlexProp } from "../../props/components/layout.prop.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProp as FlexProps, } from "../../props/components/layout.prop.js";
-export declare function Flex({ as: Element, direction, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, fill, width, className, style, children, ...props }: FlexProp): import("react").JSX.Element;
+export declare function Flex({ as: Element, direction, grow, shrink, surface, bleed, reveal, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, fill, width, className, style, children, ...props }: FlexProp): import("react").JSX.Element;