@godxjp/ui 18.10.0 → 18.11.0

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

@@ -3,9 +3,21 @@ import { type VariantProps } from "class-variance-authority";
 import type { LucideIcon } from "lucide-react";
 import type { HeadingLevelProp } from "../../props/vocabulary/index.js";
 type CardSize = "md" | "compact";
-/** Semantic leading-edge accent stripe (border-inline-start; width via the
- *  --card-accent-rail-width token, default 6px). */
+/** Semantic accent tone. `accentPlacement` decides WHERE it is drawn — a leading-edge
+ *  stripe (default) or the full perimeter. */
 type CardAccent = "primary" | "success" | "warning" | "info" | "attention" | "destructive";
+/**
+ * Where the semantic `accent` tone is drawn.
+ *
+ * - `"edge"` (default) — the leading-edge stripe on `border-inline-start` only, at the
+ *   `--card-accent-rail-width` measure (6px). The classic "this row needs a look" rail.
+ * - `"perimeter"` — a full attention border around the WHOLE card in the same semantic
+ *   tone, measured by `--card-accent-perimeter-width` + `--card-accent-perimeter-ring-width`.
+ *   This is what `variant="featured"` does, except the tone is yours instead of `--primary`,
+ *   so a card can shout "action required" (`accent="attention"`) or "this failed"
+ *   (`accent="destructive"`) without borrowing the brand colour.
+ */
+type CardAccentPlacement = "edge" | "perimeter";
 /** Surface fill — plain card, muted band, borderless outline, or emphasized featured ring. */
 type CardVariant = "default" | "muted" | "outline" | "featured";
 /** Padding density — base 16px · tight 12px · cozy 20px. */
@@ -16,6 +28,11 @@ declare const cardVariants: (props?: ({
 export type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants> & {
     size?: CardSize;
     accent?: CardAccent;
+    /**
+     * Where `accent` is drawn — `"edge"` (default, the leading-edge stripe) or `"perimeter"`
+     * (a full attention border in the accent tone). Inert without `accent`.
+     */
+    accentPlacement?: CardAccentPlacement;
     variant?: CardVariant;
     density?: CardDensity;
 };
@@ -24,6 +41,11 @@ export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
     size?: CardSize;
     accent?: CardAccent;
+    /**
+     * Where `accent` is drawn — `"edge"` (default, the leading-edge stripe) or `"perimeter"`
+     * (a full attention border in the accent tone). Inert without `accent`.
+     */
+    accentPlacement?: CardAccentPlacement;
     variant?: CardVariant;
     density?: CardDensity;
 } & React.RefAttributes<HTMLDivElement>>;
@@ -136,9 +158,11 @@ export type StatCardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<
     inverse?: boolean;
     /** Semantic leading-edge rail (Card accent) — flags a KPI needing attention. */
     accent?: CardAccent;
+    /** Where `accent` is drawn — `"edge"` (default rail) or `"perimeter"` (full attention border). */
+    accentPlacement?: CardAccentPlacement;
 };
 /** KPI / stat tile — token-driven layout aligned to dashboard KPI cards. */
-export declare function StatCard({ label, value, hint, icon: Icon, delta, layout, align, inverse, accent, className, size, ...props }: StatCardProps): React.JSX.Element;
+export declare function StatCard({ label, value, hint, icon: Icon, delta, layout, align, inverse, accent, accentPlacement, className, size, ...props }: StatCardProps): React.JSX.Element;
 /** Header actions slot — pair with `CardHeader className="flex flex-row …"`. */
 export declare const CardAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -12,7 +12,7 @@ const cardVariants = cva("group/card", {
   defaultVariants: { size: "md" }
 });
 const Card = React.forwardRef(
-  ({ className, size = "md", accent, variant, density, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, size = "md", accent, accentPlacement, variant, density, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -20,6 +20,7 @@ const Card = React.forwardRef(
       "data-slot": "card",
       "data-size": size === "compact" ? "compact" : void 0,
       "data-accent": accent,
+      "data-accent-placement": accentPlacement === "perimeter" ? "perimeter" : void 0,
       "data-variant": variant && variant !== "default" ? variant : void 0,
       "data-density": density,
       ...props
@@ -108,6 +109,7 @@ function StatCard({
   align = "start",
   inverse = false,
   accent,
+  accentPlacement,
   className,
   size = "compact",
   ...props
@@ -118,6 +120,7 @@ function StatCard({
     {
       size: size ?? "compact",
       accent,
+      accentPlacement,
       className: cn("ui-stat-card", className),
       "data-stat-card": "",
       "data-stat-layout": layout,

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

@@ -636,9 +636,8 @@ DataTable.Content = function DataTableContent() {
                         ),
                         children: col.render ? col.render(original) : (() => {
                           const v = original[col.key];
-                          if (v == null) return "\u2014";
-                          if (typeof v === "string" || typeof v === "number") return String(v);
-                          return "\u2014";
+                          const text = v == null || !(typeof v === "string" || typeof v === "number") ? "\u2014" : String(v);
+                          return /* @__PURE__ */ jsx("span", { "data-slot": "table-cell-text", children: text });
                         })()
                       },
                       col.key

package/dist/components/data-entry/command-palette.d.ts

@@ -29,9 +29,50 @@ export type CommandPaletteProps = {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Controlled search-box query. Pairs with `onSearchChange`; leave it out for the uncontrolled
+     * palette (seeded by `defaultSearch`). Same idiom as `SearchSelect`'s `search`.
+     */
+    search?: string;
+    /** Initial uncontrolled query, and the value the palette resets to when it closes. Default `""`. */
+    defaultSearch?: string;
+    /**
+     * Fires on every keystroke with the current query — the seam a server-backed group needs to run
+     * search-as-you-type. Also fires with `defaultSearch` when the palette closes.
+     */
+    onSearchChange?: (query: string) => void;
+    /**
+     * Whether the palette filters `groups` itself (cmdk's client-side fuzzy match). Set `false` when
+     * the QUERY is answered by a server and `groups` already holds the matches — otherwise every row
+     * is scored a second time against the same string and late-arriving matches are dropped.
+     *
+     * It also decides who owns the empty node; see the component doc block. Default `true`.
+     */
+    shouldFilter?: boolean;
     loading?: boolean;
     error?: React.ReactNode;
     trigger?: React.ReactNode;
     shortcut?: boolean;
 };
-export declare function CommandPalette({ groups, labels, onSelect, open: controlledOpen, defaultOpen, onOpenChange, loading, error, trigger, shortcut, }: CommandPaletteProps): React.JSX.Element;
+/**
+ * CommandPalette — the ⌘K search dialog.
+ *
+ * ## The empty-state contract (gh#412)
+ *
+ * `labels.empty` renders under exactly one rule, and which mechanism decides follows `shouldFilter`:
+ *
+ * - **`shouldFilter` (default, client-side)** — cmdk owns it: the palette holds items, the query
+ *   matches none of them. Unchanged.
+ * - **`shouldFilter={false}` (server-side)** — the PALETTE owns it, derived synchronously from
+ *   props: the empty node renders when `groups` carries no items, and never while `loading` or
+ *   `error` is set. cmdk's own empty node cannot be trusted here, because it is driven by a
+ *   scheduled count of the items that have REGISTERED in the DOM, not by what the consumer knows —
+ *   so an async group that populates a frame late flips it on and off and any assertion over it
+ *   races. Reading `groups` instead makes "did we render the empty state?" a pure function of the
+ *   props at that render, which is what a contract test can assert.
+ *
+ * The practical consequence for search-as-you-type: hold `loading` true for the whole in-flight
+ * window. While it is true the palette shows `labels.loading` and never claims "no results" —
+ * a request that has not answered yet is not an empty result.
+ */
+export declare function CommandPalette({ groups, labels, onSelect, open: controlledOpen, defaultOpen, onOpenChange, search: controlledSearch, defaultSearch, onSearchChange, shouldFilter, loading, error, trigger, shortcut, }: CommandPaletteProps): React.JSX.Element;

package/dist/components/data-entry/command-palette.js

@@ -19,14 +19,20 @@ function CommandPalette({
   open: controlledOpen,
   defaultOpen = false,
   onOpenChange,
+  search: controlledSearch,
+  defaultSearch = "",
+  onSearchChange,
+  shouldFilter = true,
   loading = false,
   error,
   trigger,
   shortcut = true
 }) {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const [uncontrolledSearch, setUncontrolledSearch] = React.useState(defaultSearch);
   const shortcutRestoreFocusRef = React.useRef(null);
   const open = controlledOpen ?? uncontrolledOpen;
+  const search = controlledSearch ?? uncontrolledSearch;
   const setOpen = React.useCallback(
     (next) => {
       if (controlledOpen === void 0) {
@@ -36,6 +42,22 @@ function CommandPalette({
     },
     [controlledOpen, onOpenChange]
   );
+  const setSearch = React.useCallback(
+    (next) => {
+      if (controlledSearch === void 0) {
+        setUncontrolledSearch(next);
+      }
+      onSearchChange?.(next);
+    },
+    [controlledSearch, onSearchChange]
+  );
+  const previousOpenRef = React.useRef(open);
+  React.useEffect(() => {
+    const wasOpen = previousOpenRef.current;
+    previousOpenRef.current = open;
+    if (!wasOpen || open || search === defaultSearch) return;
+    setSearch(defaultSearch);
+  }, [open, search, defaultSearch, setSearch]);
   React.useEffect(() => {
     if (!shortcut) return;
     const handleKeyDown = (event) => {
@@ -50,6 +72,7 @@ function CommandPalette({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, setOpen, shortcut]);
+  const hasItems = React.useMemo(() => groups.some((group) => group.items.length > 0), [groups]);
   const triggerNode = trigger ?? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ui-command-palette-trigger", children: [
     /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" }),
     /* @__PURE__ */ jsx("span", { children: labels.open }),
@@ -79,17 +102,23 @@ function CommandPalette({
         children: [
           /* @__PURE__ */ jsx(Dialog.Title, { className: "sr-only", children: labels.title }),
           /* @__PURE__ */ jsx(Dialog.Description, { id: "ui-command-palette-description", className: "sr-only", children: labels.description }),
-          /* @__PURE__ */ jsxs(Command, { label: labels.title, children: [
+          /* @__PURE__ */ jsxs(Command, { label: labels.title, shouldFilter, children: [
             /* @__PURE__ */ jsx(
               CommandInput,
               {
                 autoFocus: true,
+                value: search,
+                onValueChange: setSearch,
                 placeholder: labels.placeholder,
                 "aria-label": labels.placeholder
               }
             ),
             /* @__PURE__ */ jsx(CommandList, { "aria-busy": loading, children: loading ? /* @__PURE__ */ jsx("div", { className: "ui-command-palette-state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ jsx("div", { className: "ui-command-palette-state", role: "alert", children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }),
+              shouldFilter ? /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }) : hasItems ? null : (
+                // Same node cmdk would have rendered (class + role), decided from `groups`
+                // instead of from its scheduled DOM-registration count — see the doc block.
+                /* @__PURE__ */ jsx("div", { className: "ui-command-empty", role: "presentation", children: labels.empty })
+              ),
               groups.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group.label, children: group.items.map((item) => /* @__PURE__ */ jsxs(
                 CommandItem,
                 {

package/dist/components/data-entry/input-otp.d.ts

@@ -1,2 +1,2 @@
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "../ui/input-otp.js";
-export type { InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProps, } from "../ui/input-otp.js";
+export type { InputOTPAlignProp, InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProps, } from "../ui/input-otp.js";

package/dist/components/data-entry/select.d.ts

@@ -1,7 +1,13 @@
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import type { FieldA11yProps } from "../../lib/field-a11y.js";
 import type { SelectDataProp } from "../../props/components/data-entry.prop.js";
-export type SelectProp = SelectDataProp | React.ComponentProps<typeof SelectPrimitive.Root>;
+/** Compound-API props: the Radix root's own props PLUS the FormField field-a11y contract, which
+ *  this component re-routes to the trigger (see {@link SelectFieldA11yContext}). */
+export type SelectCompoundProp = React.ComponentProps<typeof SelectPrimitive.Root> & FieldA11yProps & {
+    id?: string;
+};
+export type SelectProp = SelectDataProp | SelectCompoundProp;
 /**
  * Select — one component for every single-select. Use the compound API for full control
  * (`<Select><SelectTrigger/><SelectContent><SelectItem/></SelectContent></Select>`), OR the

package/dist/components/data-entry/select.js

@@ -5,15 +5,22 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { controlTriggerClass } from "../../lib/control-styles.js";
+import { mergeAriaIds, omitFieldA11y, pickFieldA11y } from "../../lib/field-a11y.js";
 import { SearchSelect } from "./search-select.js";
 function isDataSelect(props) {
   return "options" in props || "loadOptions" in props;
 }
+const SelectFieldA11yContext = React.createContext(null);
 function Select(props) {
   if (isDataSelect(props)) {
     return /* @__PURE__ */ jsx(DataSelect, { ...props });
   }
-  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx(CompoundSelect, { ...props });
+}
+function CompoundSelect({ id, ...props }) {
+  const fieldA11y = pickFieldA11y(props);
+  const rootProps = omitFieldA11y(props);
+  return /* @__PURE__ */ jsx(SelectFieldA11yContext.Provider, { value: { ...fieldA11y, id }, children: /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...rootProps }) });
 }
 function SelectGroup(props) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
@@ -21,31 +28,44 @@ function SelectGroup(props) {
 function SelectValue(props) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
-const SelectTrigger = React.forwardRef(({ className, children, size = "md", showIndicator = true, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    "data-slot": "select-trigger",
-    "data-size": size,
-    className: cn(
-      controlTriggerClass,
-      "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground w-full gap-2 whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      showIndicator ? /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
-        ChevronDown,
-        {
-          "data-slot": "select-chevron",
-          className: "size-4 shrink-0 opacity-50",
-          "aria-hidden": "true"
-        }
-      ) }) : null
-    ]
-  }
-));
+const SelectTrigger = React.forwardRef(({ className, children, size = "md", showIndicator = true, ...props }, ref) => {
+  const field = React.useContext(SelectFieldA11yContext);
+  const ownsName = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
+  const fieldA11y = field ? {
+    id: props.id ?? field.id,
+    ...ownsName ? {} : { "aria-label": field["aria-label"], "aria-labelledby": field["aria-labelledby"] },
+    "aria-describedby": mergeAriaIds(props["aria-describedby"], field["aria-describedby"]),
+    "aria-errormessage": mergeAriaIds(props["aria-errormessage"], field["aria-errormessage"]),
+    "aria-required": props["aria-required"] ?? field["aria-required"],
+    "aria-invalid": props["aria-invalid"] ?? field["aria-invalid"]
+  } : void 0;
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        controlTriggerClass,
+        "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground w-full gap-2 whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+        className
+      ),
+      ...props,
+      ...fieldA11y,
+      children: [
+        children,
+        showIndicator ? /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            "data-slot": "select-chevron",
+            className: "size-4 shrink-0 opacity-50",
+            "aria-hidden": "true"
+          }
+        ) }) : null
+      ]
+    }
+  );
+});
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,

package/dist/components/feedback/banner.js

@@ -2,7 +2,11 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { AlertActions, AlertBase, AlertContent, AlertDescription, AlertTitle } from "./alert.js";
-const BannerBase = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(AlertBase, { ref, variant: "banner", ...props }));
+const BannerBase = React.forwardRef((props, ref) => (
+  // `variant` sits AFTER the spread: the type already excludes it, and the runtime half of the
+  // same guarantee means a spread of leftover Alert props can never silently downgrade the strip.
+  /* @__PURE__ */ jsx(AlertBase, { ref, ...props, variant: "banner" })
+));
 BannerBase.displayName = "Banner";
 const Banner = Object.assign(BannerBase, {
   Title: AlertTitle,

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, } 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, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, density, variant, preset, headerLayout, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, status, extra, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, density, variant, preset, headerLayout, 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

@@ -43,6 +43,7 @@ function PageContainerRoot({
   breadcrumbLabel,
   breadcrumbAriaLabel,
   linkComponent: LinkComponent = "a",
+  headerLoading = false,
   density,
   variant = "default",
   preset = "default",
@@ -75,47 +76,66 @@ function PageContainerRoot({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("header", { ref: headerRef, className: "ui-page-header", "data-layout": headerLayout, children: [
-          breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx(
-            "nav",
-            {
-              "aria-label": breadcrumbLabel ?? breadcrumbAriaLabel ?? t("navigation.breadcrumb.ariaLabel"),
-              className: "ui-breadcrumb",
-              children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
-                const isLast = i === breadcrumb.length - 1;
-                return /* @__PURE__ */ jsxs("li", { className: "ui-inline-xs", 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, { className: "size-3", "aria-hidden": "true" })
-                ] }, i);
-              }) })
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "ui-page-header-row", children: [
-            /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading min-w-0", children: [
-              status != null ? /* @__PURE__ */ jsxs("div", { className: "ui-page-header-title-row", children: [
-                /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
-                /* @__PURE__ */ jsx("div", { className: "ui-page-header-status", children: status })
-              ] }) : /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
-              subtitle && /* @__PURE__ */ jsx("p", { className: "ui-page-subtitle", children: subtitle })
-            ] }),
-            extra && /* @__PURE__ */ jsx("div", { className: "ui-page-header-extra", children: extra })
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "header",
+          {
+            ref: headerRef,
+            className: "ui-page-header",
+            "data-layout": headerLayout,
+            "aria-busy": headerLoading ? "true" : void 0,
+            children: [
+              breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx(
+                "nav",
+                {
+                  "aria-label": breadcrumbLabel ?? breadcrumbAriaLabel ?? t("navigation.breadcrumb.ariaLabel"),
+                  className: "ui-breadcrumb",
+                  children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
+                    const isLast = i === breadcrumb.length - 1;
+                    return /* @__PURE__ */ jsxs("li", { className: "ui-inline-xs", 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, { className: "size-3", "aria-hidden": "true" })
+                    ] }, i);
+                  }) })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "ui-page-header-row", children: [
+                /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading min-w-0", children: [
+                  headerLoading ? /* @__PURE__ */ jsx("h1", { className: "ui-page-title ui-skeleton-block ui-page-title-placeholder", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("layout.pageHeader.loading") }) }) : status != null ? /* @__PURE__ */ jsxs("div", { className: "ui-page-header-title-row", children: [
+                    /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
+                    /* @__PURE__ */ jsx("div", { className: "ui-page-header-status", children: status })
+                  ] }) : /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
+                  headerLoading ? (
+                    // Decorative only — the pending state is already announced once by the heading above,
+                    // so a second live placeholder here would double-announce it.
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "ui-page-subtitle ui-skeleton-block ui-page-subtitle-placeholder",
+                        "aria-hidden": "true"
+                      }
+                    )
+                  ) : subtitle && /* @__PURE__ */ jsx("p", { className: "ui-page-subtitle", children: subtitle })
+                ] }),
+                extra && /* @__PURE__ */ jsx("div", { className: "ui-page-header-extra", children: extra })
+              ] })
+            ]
+          }
+        ),
         children != null && /* @__PURE__ */ jsx("div", { className: "ui-page-body", children }),
         footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", children: footer })
       ]

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

@@ -5,7 +5,7 @@ export declare const ResizablePanelGroup: {
     displayName: string;
 };
 export declare const ResizablePanel: {
-    ({ className, ...props }: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Panel>): React.JSX.Element;
+    ({ className, elementRef, ...props }: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Panel>): React.JSX.Element;
     displayName: string;
 };
 export declare const ResizableHandle: {

package/dist/components/layout/resizable.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import * as React from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
 import { cn } from "../../lib/utils.js";
+import { useScrollableRegionTabIndex } from "../../lib/hooks.js";
 const ResizablePanelGroup = ({
   className,
   ...props
@@ -16,15 +18,31 @@ const ResizablePanelGroup = ({
 ResizablePanelGroup.displayName = "ResizablePanelGroup";
 const ResizablePanel = ({
   className,
+  elementRef,
   ...props
-}) => /* @__PURE__ */ jsx(
-  ResizablePrimitive.Panel,
-  {
-    "data-slot": "resizable-panel",
-    className: cn("ui-resizable-panel", className),
-    ...props
-  }
-);
+}) => {
+  const [scrollRegion, setScrollRegion] = React.useState(null);
+  const setRootElement = React.useCallback(
+    (node) => {
+      setScrollRegion(
+        node?.firstElementChild instanceof HTMLElement ? node.firstElementChild : null
+      );
+      if (typeof elementRef === "function") elementRef(node);
+      else if (elementRef) elementRef.current = node;
+    },
+    [elementRef]
+  );
+  useScrollableRegionTabIndex(scrollRegion);
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Panel,
+    {
+      "data-slot": "resizable-panel",
+      className: cn("ui-resizable-panel", className),
+      elementRef: setRootElement,
+      ...props
+    }
+  );
+};
 ResizablePanel.displayName = "ResizablePanel";
 const ResizableHandle = ({
   className,

package/dist/components/navigation/pagination.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { useScrollableRegionTabIndex } from "../../lib/hooks.js";
 import { cn } from "../../lib/utils.js";
 import { Button } from "../general/button.js";
 import {
@@ -14,7 +15,25 @@ import {
 } from "../data-entry/select.js";
 import { buildPageRange } from "./pagination-utils.js";
 const PaginationContent = React.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("ul", { ref, className: cn("ui-pagination-list", className), role: "list", ...props });
+  const [scrollRegion, setScrollRegion] = React.useState(null);
+  const setListElement = React.useCallback(
+    (node) => {
+      setScrollRegion(node);
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  useScrollableRegionTabIndex(scrollRegion);
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref: setListElement,
+      className: cn("ui-pagination-list", className),
+      role: "list",
+      ...props
+    }
+  );
 });
 PaginationContent.displayName = "PaginationContent";
 const PaginationItem = React.forwardRef(

package/dist/components/navigation/steps.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { StepsProp } from "../../props/components/navigation.prop.js";
-export type { StepsProp, StepsProp as StepsProps, StepItemProp, StepStatusProp, } from "../../props/components/navigation.prop.js";
-export declare function Steps({ items, value: current, defaultValue, status: currentStatus, orientation, type, size, titlePlacement, onValueChange, className, }: StepsProp): React.JSX.Element;
+export type { StepsProp, StepsProp as StepsProps, StepItemProp, StepStatusProp, StepsSeparatorProp, } from "../../props/components/navigation.prop.js";
+export declare function Steps({ items, value: current, defaultValue, status: currentStatus, orientation, type, size, titlePlacement, separator, onValueChange, className, }: StepsProp): React.JSX.Element;

package/dist/components/navigation/steps.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Check, ChevronRight, Circle, Loader2, X } from "lucide-react";
+import { ArrowRight, Check, ChevronRight, Circle, Loader2, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { controlIconClass } from "../../lib/control-styles.js";
@@ -61,6 +61,7 @@ function Steps({
   type = "default",
   size = "md",
   titlePlacement = "horizontal",
+  separator = "chevron",
   onValueChange,
   className
 }) {
@@ -69,6 +70,7 @@ function Steps({
   const isVertical = orientation === "vertical";
   const compact = size === "sm";
   const inline = type === "inline";
+  const SeparatorIcon = separator === "arrow" ? ArrowRight : ChevronRight;
   return /* @__PURE__ */ jsx(
     "ol",
     {
@@ -151,7 +153,7 @@ function Steps({
                 }
               ) : /* @__PURE__ */ jsx("span", { className: stepClassName, children: stepInner }),
               inline && index < items.length - 1 ? /* @__PURE__ */ jsx(
-                ChevronRight,
+                SeparatorIcon,
                 {
                   className: "ui-steps-inline-separator rtl:rotate-180",
                   "aria-hidden": "true"