@godxjp/ui 18.6.0 → 18.8.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-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/feedback/alert.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { ToneProp } from "../../props/vocabulary/index.js";
-import type { AlertQueryErrorProp } from "../../props/components/feedback.prop.js";
-export type { AlertProp, AlertProp as AlertProps, AlertTitleProp, AlertTitleProp as AlertTitleProps, AlertContentProp, AlertContentProp as AlertContentProps, AlertDescriptionProp, AlertDescriptionProp as AlertDescriptionProps, AlertActionsProp, AlertActionsProp as AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProp as AlertQueryErrorProps, } from "../../props/components/feedback.prop.js";
+import type { AlertQueryErrorProp, BannerProp } from "../../props/components/feedback.prop.js";
+export type { BannerProp, BannerProp as BannerProps, AlertProp, AlertProp as AlertProps, AlertTitleProp, AlertTitleProp as AlertTitleProps, AlertContentProp, AlertContentProp as AlertContentProps, AlertDescriptionProp, AlertDescriptionProp as AlertDescriptionProps, AlertActionsProp, AlertActionsProp as AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProp as AlertQueryErrorProps, } from "../../props/components/feedback.prop.js";
 declare const AlertBase: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     variant?: import("../../props/index.js").AlertVariantProp;
     tone?: ToneProp;
@@ -63,4 +63,22 @@ export declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes
     } & React.RefAttributes<HTMLDivElement>>;
     QueryError: typeof AlertQueryError;
 };
+export declare const Banner: React.ForwardRefExoticComponent<BannerProp & React.RefAttributes<HTMLDivElement>> & {
+    Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Actions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
 export { AlertBase };

package/dist/components/feedback/alert.js

@@ -159,6 +159,15 @@ const Alert = Object.assign(AlertBase, {
   Actions: AlertActions,
   QueryError: AlertQueryError
 });
+const BannerBase = React.forwardRef(function Banner(props, ref) {
+  return /* @__PURE__ */ jsx(AlertBase, { ...props, ref, variant: "banner" });
+});
+const Banner2 = Object.assign(BannerBase, {
+  Title: AlertTitle,
+  Content: AlertContent,
+  Description: AlertDescription,
+  Actions: AlertActions
+});
 export {
   Alert,
   AlertActions,
@@ -166,5 +175,6 @@ export {
   AlertContent,
   AlertDescription,
   AlertQueryError,
-  AlertTitle
+  AlertTitle,
+  Banner2 as Banner
 };

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

@@ -8,6 +8,6 @@ export { Toaster } from "./sonner.js";
 export { toast } from "./use-toast.js";
 export { Skeleton, SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonStat } from "./skeleton.js";
 export type { SkeletonProps } from "./skeleton.js";
-export { Alert, AlertTitle, AlertContent, AlertDescription, AlertActions, AlertQueryError, } from "./alert.js";
-export type { AlertProp, AlertProps, AlertTitleProp, AlertTitleProps, AlertContentProp, AlertContentProps, AlertDescriptionProp, AlertDescriptionProps, AlertActionsProp, AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProps, } from "./alert.js";
+export { Alert, AlertTitle, AlertContent, AlertDescription, AlertActions, AlertQueryError, Banner, } from "./alert.js";
+export type { BannerProp, BannerProps, AlertProp, AlertProps, AlertTitleProp, AlertTitleProps, AlertContentProp, AlertContentProps, AlertDescriptionProp, AlertDescriptionProps, AlertActionsProp, AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProps, } from "./alert.js";
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip.js";

package/dist/components/feedback/index.js

@@ -49,7 +49,8 @@ import {
   AlertContent,
   AlertDescription,
   AlertActions,
-  AlertQueryError
+  AlertQueryError,
+  Banner
 } from "./alert.js";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip.js";
 export {
@@ -71,6 +72,7 @@ export {
   AlertDialogTrigger,
   AlertQueryError,
   AlertTitle,
+  Banner,
   Dialog,
   DialogAction,
   DialogBody,

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

@@ -10,8 +10,10 @@ export type { AuthShellProp, AuthShellProp as AuthShellProps, } from "../../prop
  *
  * `preset` names the flow MEASURE (card max-width + desktop/mobile page gutters) so a consumer
  * never overrides page geometry by hand: `"login"` = SCR-001's stable identity/card/footer anchor
- * for standalone and real requester states; `"device-authorization"` = 380px card with a 5px
- * inline gutter at 390px; `"context-selection"` = 25rem card, edge-to-edge on mobile;
+ * for standalone and real requester states; `"registration"` = the 360px sign-up measure, the only
+ * START-aligned preset (a tall sign-up card must scroll, not clip its own top above the scroll
+ * origin) and the only one with its own footer clearance; `"device-authorization"` = 380px card
+ * with a 5px inline gutter at 390px; `"context-selection"` = 25rem card, edge-to-edge on mobile;
  * `"account-recovery"` = the 432px SCR-008 panel measure shared by password recovery and the
  * sign-in MFA challenge, with a 15px inline gutter at 390px. It is orthogonal to `variant` —
  * combine `variant="canonical"` with any preset.

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

@@ -1,5 +1,7 @@
 export { PageContainer } from "./page-container.js";
 export type { PageContainerProp, PageContainerProps, BreadcrumbItem, BreadcrumbItemProp, } from "./page-container.js";
+export { PageHeader } from "./page-header.js";
+export type { PageHeaderProp, PageHeaderProps } from "./page-header.js";
 export { Flex } from "./flex.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProps, } from "./flex.js";
 export { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";

package/dist/components/layout/index.js

@@ -1,4 +1,5 @@
 import { PageContainer } from "./page-container.js";
+import { PageHeader } from "./page-header.js";
 import { Flex } from "./flex.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 import { AppShell } from "./app-shell.js";
@@ -37,6 +38,7 @@ export {
   MasterDetail,
   OrgSwitcher,
   PageContainer,
+  PageHeader,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,

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, 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, meta, headerLoading, extra, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, 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

@@ -1,10 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { ChevronRight } from "lucide-react";
-import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { densityClass, pageContainerVariantClass } from "../../lib/variants.js";
+import { PageHeader } from "./page-header.js";
 function scrollParent(el) {
   let node = el?.parentElement ?? null;
   while (node) {
@@ -36,6 +35,8 @@ function PageContainerInset({ className, children, ...props }) {
 function PageContainerRoot({
   title,
   subtitle,
+  meta,
+  headerLoading,
   extra,
   footer,
   breadcrumb,
@@ -55,7 +56,6 @@ function PageContainerRoot({
 }) {
   const reveal = stickyFooter && footer != null && footerReveal === "onScroll";
   const { headerRef, revealed } = useFooterReveal(reveal);
-  const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -74,44 +74,22 @@ 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: [
-              /* @__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__ */ jsx(
+          PageHeader,
+          {
+            ref: headerRef,
+            title,
+            subtitle,
+            meta,
+            extra,
+            breadcrumb,
+            breadcrumbLabel,
+            breadcrumbAriaLabel,
+            linkComponent: LinkComponent,
+            layout: headerLayout,
+            loading: headerLoading
+          }
+        ),
         children != null && /* @__PURE__ */ jsx("div", { className: "ui-page-body", children }),
         footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", children: footer })
       ]

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

@@ -0,0 +1,22 @@
+/**
+ * PageHeader — the canonical page title band (gh#255).
+ *
+ * This is the geometry `PageContainer` has always rendered, lifted into its own export so a
+ * consumer can mount it OUTSIDE a full page shell — a Sheet detail, a `MasterDetail` detail pane, a
+ * tab body, a nested route header — without re-authoring `.ui-page-header` CSS locally. There is
+ * exactly ONE implementation: `PageContainer` renders this component, so the two can never drift.
+ *
+ * The band owns: breadcrumbs (a named `<nav>` landmark with `aria-current="page"` on the leaf), the
+ * `<h1>` title, the subtitle/description, a status/meta slot, the `extra` action region, the
+ * responsive overflow arrangement (`layout`), and the pending state (`loading`). It owns no page
+ * chrome — padding, measure and body rhythm stay with `PageContainer`.
+ *
+ * DENIED / ERROR are deliberately NOT states of this component: a page the user may not see must
+ * not render its title, breadcrumb trail or actions at all (they leak the resource's existence and
+ * its name). That whole-surface contract belongs to `ErrorSurface`, which is the canonical public
+ * replacement — see `docs/CANONICAL-CONTRACTS.md`.
+ */
+import * as React from "react";
+import type { PageHeaderProp } from "../../props/components/layout.prop.js";
+export type { PageHeaderProp, PageHeaderProp as PageHeaderProps, } from "../../props/components/layout.prop.js";
+export declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProp & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+const PageHeader = React.forwardRef(function PageHeader2({
+  title,
+  subtitle,
+  meta,
+  extra,
+  breadcrumb,
+  breadcrumbLabel,
+  breadcrumbAriaLabel,
+  linkComponent: LinkComponent = "a",
+  layout = "stack",
+  loading = false,
+  className
+}, ref) {
+  const { t } = useTranslation();
+  return (
+    // `data-layout` is the only hook the header arrangement needs: `stack` (the default)
+    // matches no rule, so the historical geometry is untouched, while `responsive-inline`
+    // selects the compact-range rules that keep `extra` beside the title band (gh#231).
+    /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref,
+        className: cn("ui-page-header", className),
+        "data-layout": layout,
+        "aria-busy": loading ? "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: [
+              loading ? /* @__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") }) }) : meta != null ? /* @__PURE__ */ jsxs("div", { className: "ui-page-title-band", children: [
+                /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
+                /* @__PURE__ */ jsx("div", { className: "ui-page-header-meta", children: meta })
+              ] }) : /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
+              loading ? (
+                // 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 })
+          ] })
+        ]
+      }
+    )
+  );
+});
+export {
+  PageHeader
+};

package/dist/components/navigation/filter-bar.d.ts

@@ -1,6 +1,6 @@
 import type { ToolbarGroupProp, ToolbarProp } from "../../props/components/navigation.prop.js";
-export type { FilterBarOverflowProp, ToolbarGroupProp, ToolbarGroupProp as ToolbarGroupProps, ToolbarGroupProp as FilterBarGroupProp, ToolbarGroupProp as FilterBarGroupProps, ToolbarProp, ToolbarProp as ToolbarProps, ToolbarProp as FilterBarProp, ToolbarProp as FilterBarProps, } from "../../props/components/navigation.prop.js";
-export declare function Toolbar({ onClear, hasActiveFilters, sticky, overflow, className, children, }: ToolbarProp): import("react").JSX.Element;
+export type { FilterBarChipProp, FilterBarChipProp as FilterBarChipProps, FilterBarOverflowProp, ToolbarGroupProp, ToolbarGroupProp as ToolbarGroupProps, ToolbarGroupProp as FilterBarGroupProp, ToolbarGroupProp as FilterBarGroupProps, ToolbarProp, ToolbarProp as ToolbarProps, ToolbarProp as FilterBarProp, ToolbarProp as FilterBarProps, } from "../../props/components/navigation.prop.js";
+export declare function Toolbar({ onClear, hasActiveFilters, sticky, overflow, search, chips, onChipRemove, resultCount, actions, className, children, }: ToolbarProp): import("react").JSX.Element;
 export declare function ToolbarGroup({ label, controlId, className, children }: ToolbarGroupProp): import("react").JSX.Element;
 /**
  * Canonical list-page filter strip.

package/dist/components/navigation/filter-bar.js

@@ -10,10 +10,16 @@ function Toolbar({
   hasActiveFilters = true,
   sticky = false,
   overflow = "wrap",
+  search,
+  chips,
+  onChipRemove,
+  resultCount,
+  actions,
   className,
   children
 }) {
   const { t } = useTranslation();
+  const hasChips = chips != null && chips.length > 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -22,11 +28,48 @@ function Toolbar({
       "data-overflow": overflow,
       className: cn("ui-toolbar", sticky && "ui-toolbar-sticky", className),
       children: [
+        search != null && // A region, not a bare child, so the search control gets ONE measure
+        // (--filter-bar-search-width) across every list page instead of whatever width the
+        // caller's control happened to have.
+        /* @__PURE__ */ jsx("div", { className: "ui-filter-bar-search", children: search }),
         children,
+        hasChips && // `group` (not a second toolbar) — a toolbar may own a group, and the chips are a labelled
+        // set of related controls rather than an independent toolbar competing for the same role.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "group",
+            "aria-label": t("navigation.filterBar.appliedFilters"),
+            className: "ui-filter-bar-chips",
+            children: chips.map((chip) => /* @__PURE__ */ jsxs("span", { className: "ui-filter-bar-chip", children: [
+              /* @__PURE__ */ jsx("span", { className: "ui-filter-bar-chip-label", children: chip.label }),
+              (chip.onRemove || onChipRemove) && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "xs",
+                  className: "ui-filter-bar-chip-remove",
+                  "aria-label": t("navigation.filterBar.removeFilter", { label: chip.label }),
+                  onClick: () => {
+                    chip.onRemove?.();
+                    onChipRemove?.(chip.id);
+                  },
+                  children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                }
+              )
+            ] }, chip.id))
+          }
+        ),
+        resultCount !== void 0 && // The whole reason this is a prop rather than caller markup: a sighted user SEES the table
+        // change, and a polite live region is what tells everyone else that filtering happened.
+        // The number is grouped by `Intl.NumberFormat` and the noun selected by CLDR plural rules
+        // for the active locale — never a hand-built "N items".
+        /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "ui-filter-bar-count", children: t("navigation.filterBar.resultCount", { count: resultCount }) }),
         onClear && hasActiveFilters && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: onClear, className: "ui-toolbar-clear", children: [
           /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
           t("common.clearFilters")
-        ] })
+        ] }),
+        actions != null && /* @__PURE__ */ jsx("div", { className: "ui-filter-bar-actions", children: actions })
       ]
     }
   );

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

@@ -5,7 +5,7 @@ export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarLabel
 export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, } from "./navigation-menu.js";
 export { Steps } from "./steps.js";
 export { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.js";
-export type { FilterBarGroupProp, FilterBarGroupProps, FilterBarProp, FilterBarProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";
+export type { FilterBarChipProp, FilterBarChipProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarProp, FilterBarProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";
 export { AppSettingPicker } from "./app-setting-picker.js";
 export type { AppSettingPickerProp, AppSettingPickerProps, AppSettingKind, } from "./app-setting-picker.js";
 export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop.js";

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"

package/dist/components/ui/avatar.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import type { AvatarProp } from "../../props/components/data-display.prop.js";
-export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & Pick<AvatarProp, "shape"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & Pick<AvatarProp, "shape" | "appearance"> & React.RefAttributes<HTMLSpanElement>>;
 export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
 export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/ui/avatar.js

@@ -3,12 +3,13 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cn } from "../../lib/utils.js";
-const Avatar = React.forwardRef(({ className, shape = "circle", ...props }, ref) => /* @__PURE__ */ jsx(
+const Avatar = React.forwardRef(({ className, shape = "circle", appearance = "default", ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
   {
     ref,
     "data-slot": "avatar",
     "data-shape": shape === "square" ? "square" : void 0,
+    "data-appearance": appearance === "tinted" ? "tinted" : void 0,
     className: cn("ui-avatar", className),
     ...props
   }

package/dist/components/ui/input-otp.d.ts

@@ -1,5 +1,15 @@
 import * as React from "react";
-export declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+import type { InputOTPAlignProp } from "../../props/components/data-entry.prop.js";
+/**
+ * InputOTP — the code-challenge field.
+ *
+ * `align` positions the whole row (groups + separators) on the main axis: `start` (default,
+ * unchanged), `center` — the canonical auth challenge — or `end`. The attribute lands on the
+ * hidden input because `input-otp` owns the container element; `.ui-otp-container` reads it back
+ * through `:has()`, exactly as it already does for the invalid and disabled states. A service that
+ * wants every code field centred sets `--otp-container-align` once instead.
+ */
+export declare const InputOTP: React.ForwardRefExoticComponent<((Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
     value?: string;
     onChange?: (newValue: string) => unknown;
     maxLength: number;
@@ -25,8 +35,10 @@ export declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.
 } & {
     render?: never;
     children: React.ReactNode;
-} & React.RefAttributes<HTMLInputElement>, "ref">) & React.RefAttributes<HTMLInputElement>>;
-export type { InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProp as InputOTPGroupProps, } from "../../props/components/data-entry.prop.js";
+} & React.RefAttributes<HTMLInputElement>, "ref">) & {
+    align?: InputOTPAlignProp;
+}) & React.RefAttributes<HTMLInputElement>>;
+export type { InputOTPAlignProp, InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProp as InputOTPGroupProps, } from "../../props/components/data-entry.prop.js";
 export declare const InputOTPGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     appearance?: import("./input-otp.js").InputOTPGroupAppearanceProp;
 } & React.RefAttributes<HTMLDivElement>>;