@godxjp/ui 18.9.0 → 18.11.0

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

@@ -1,9 +1,10 @@
 "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) {
@@ -35,14 +36,14 @@ function PageContainerInset({ className, children, ...props }) {
 function PageContainerRoot({
   title,
   subtitle,
-  meta,
-  headerLoading,
+  status,
   extra,
   footer,
   breadcrumb,
   breadcrumbLabel,
   breadcrumbAriaLabel,
   linkComponent: LinkComponent = "a",
+  headerLoading = false,
   density,
   variant = "default",
   preset = "default",
@@ -56,6 +57,7 @@ function PageContainerRoot({
 }) {
   const reveal = stickyFooter && footer != null && footerReveal === "onScroll";
   const { headerRef, revealed } = useFooterReveal(reveal);
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -74,20 +76,64 @@ function PageContainerRoot({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(
-          PageHeader,
+        /* @__PURE__ */ jsxs(
+          "header",
           {
             ref: headerRef,
-            title,
-            subtitle,
-            meta,
-            extra,
-            breadcrumb,
-            breadcrumbLabel,
-            breadcrumbAriaLabel,
-            linkComponent: LinkComponent,
-            layout: headerLayout,
-            loading: headerLoading
+            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 }),

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/layout/service-role-panel.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { ServiceRolePanelProp } from "../../props/components/layout.prop.js";
+export type { ServiceRoleItemProp, ServiceRolePanelProp, ServiceRolePanelProp as ServiceRolePanelProps, } from "../../props/components/layout.prop.js";
+/**
+ * ServiceRolePanel — the canonical role-collection ⇄ role-detail surface (gh#257 / DXS
+ * platform#311).
+ *
+ * A THIN formalized composition over `MasterDetail` (which owns ALL geometry: rail tracks, gap,
+ * stacking below the threshold — 1440/1024 two-track, 390 stacked list-then-detail) plus real
+ * primitives, exported because a consumer cannot import a docs page (the gh#251 lesson). What the
+ * panel adds is exactly the contract every service-role screen kept re-deriving:
+ *
+ * - **Selection** as the controlled triad (`value`/`defaultValue`/`onValueChange`, defaulting to
+ *   the first role). Each role row is a real `Button` carrying `aria-current`, and selecting moves
+ *   focus-target wiring through `MasterDetail`'s `detailId`/`tabIndex={-1}` detail region.
+ * - **Destructive confirmation built in**: `onDeleteRole`'s presence arms a per-role delete
+ *   affordance behind the package `AlertDialog` (variant `destructive`); the handler fires only
+ *   after the user confirms. Roles marked `locked` (system roles) never offer deletion and show a
+ *   localized lock badge; `readOnly` hides every mutating affordance.
+ * - **Lifecycle states** mirror the DataTable #216 vocabulary and precedence:
+ *   `loading` → `denied` → `error` → `empty` → content.
+ * - **Domain-neutral**: the roles and the detail surface (`children`, node or render-function) are
+ *   consumer-supplied; no platform role or permission is encoded.
+ */
+export declare const ServiceRolePanel: React.ForwardRefExoticComponent<ServiceRolePanelProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/service-role-panel.js

@@ -0,0 +1,206 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertCircle, Lock, RefreshCw, ShieldAlert, Trash2 } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../data-display/badge.js";
+import { EmptyState } from "../data-display/empty-state.js";
+import { AlertDialog } from "../feedback/dialog.js";
+import { SkeletonRows } from "../feedback/skeleton.js";
+import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import { MasterDetail } from "./master-detail.js";
+const ServiceRolePanel = React.forwardRef(
+  function ServiceRolePanel2({
+    roles,
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    children,
+    onDeleteRole,
+    readOnly = false,
+    loading = false,
+    empty,
+    error,
+    denied,
+    onRetry,
+    masterLabel,
+    detailLabel,
+    railWidth,
+    masterViewport,
+    collapseBelow,
+    id,
+    className
+  }, ref) {
+    const { t } = useTranslation();
+    const reactId = React.useId();
+    const rootId = id ?? `service-role-panel-${reactId}`;
+    const detailId = `${rootId}-detail`;
+    const [uncontrolled, setUncontrolled] = React.useState(
+      defaultValue ?? roles[0]?.id
+    );
+    const value = controlledValue ?? uncontrolled;
+    const selectedRole = roles.find((role) => role.id === value);
+    const select = (roleId) => {
+      if (controlledValue === void 0) setUncontrolled(roleId);
+      onValueChange?.(roleId);
+    };
+    const [pendingDelete, setPendingDelete] = React.useState(null);
+    const isDenied = denied !== void 0 && denied !== null && denied !== false;
+    const isError = error !== void 0 && error !== null && error !== false;
+    const deletable = typeof onDeleteRole === "function" && !readOnly;
+    const surface = (state) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id: rootId,
+        "data-slot": "service-role-panel",
+        className: cn("ui-service-role-panel", className),
+        children: state
+      }
+    );
+    if (loading) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-label": t("layout.serviceRolePanel.loading"), role: "status", children: /* @__PURE__ */ jsx(SkeletonRows, { rows: 5, columns: 3 }) })
+      );
+    }
+    if (isDenied) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: denied === true ? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: ShieldAlert,
+            tone: "warning",
+            variant: "section",
+            title: t("layout.serviceRolePanel.denied"),
+            description: t("layout.serviceRolePanel.deniedDescription"),
+            titleAs: "p"
+          }
+        ) : denied })
+      );
+    }
+    if (isError) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { role: "alert", children: error === true ? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: AlertCircle,
+            tone: "destructive",
+            variant: "section",
+            title: t("layout.serviceRolePanel.error"),
+            description: t("layout.serviceRolePanel.errorDescription"),
+            titleAs: "p",
+            action: onRetry ? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
+              /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" }),
+              t("common.retry")
+            ] }) : void 0
+          }
+        ) : error })
+      );
+    }
+    if (roles.length === 0) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: empty ?? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            variant: "section",
+            title: t("layout.serviceRolePanel.empty"),
+            description: t("layout.serviceRolePanel.emptyDescription"),
+            titleAs: "p"
+          }
+        ) })
+      );
+    }
+    const detail = typeof children === "function" ? children(selectedRole) : children ?? /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        variant: "compact",
+        title: t("layout.serviceRolePanel.noDetail"),
+        titleAs: "p"
+      }
+    );
+    return surface(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          MasterDetail,
+          {
+            rail: "master",
+            railWidth,
+            masterViewport,
+            collapseBelow,
+            masterLabel: masterLabel ?? t("layout.serviceRolePanel.rolesLabel"),
+            detailLabel: detailLabel ?? t("layout.serviceRolePanel.detailLabel"),
+            detailId,
+            master: /* @__PURE__ */ jsx("ul", { className: "flex list-none flex-col gap-1", "data-slot": "service-role-panel-list", children: roles.map((role) => {
+              const selected = role.id === value;
+              return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: selected ? "secondary" : "ghost",
+                    className: "h-auto flex-1 justify-start py-2 text-start",
+                    "aria-current": selected ? "true" : void 0,
+                    "aria-controls": detailId,
+                    onClick: () => select(role.id),
+                    children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col items-start leading-tight", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "inline-flex max-w-full items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx(Text, { weight: "medium", className: "truncate", children: role.name }),
+                        role.locked && /* @__PURE__ */ jsxs(Badge, { tone: "default", variant: "outline", children: [
+                          /* @__PURE__ */ jsx(Lock, { "aria-hidden": "true" }),
+                          t("layout.serviceRolePanel.locked")
+                        ] })
+                      ] }),
+                      (role.description !== void 0 || role.memberCount !== void 0) && /* @__PURE__ */ jsx(Text, { size: "2xs", tone: "muted", className: "max-w-full truncate", children: [
+                        role.description,
+                        role.memberCount !== void 0 ? (
+                          // `{count}` is Intl.NumberFormat-grouped by `interpolate`,
+                          // pluralized by CLDR category — no hand-built formatting.
+                          t("layout.serviceRolePanel.memberCount", {
+                            count: role.memberCount
+                          })
+                        ) : void 0
+                      ].filter((part) => part !== void 0).join(" \xB7 ") })
+                    ] })
+                  }
+                ),
+                deletable && !role.locked && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon-sm",
+                    "aria-label": t("layout.serviceRolePanel.deleteRole", { role: role.name }),
+                    onClick: () => setPendingDelete(role),
+                    children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" })
+                  }
+                )
+              ] }, role.id);
+            }) }),
+            children: detail
+          }
+        ),
+        deletable && /* @__PURE__ */ jsx(
+          AlertDialog,
+          {
+            open: pendingDelete !== null,
+            onOpenChange: (open) => {
+              if (!open) setPendingDelete(null);
+            },
+            title: t("layout.serviceRolePanel.deleteTitle"),
+            description: pendingDelete ? t("layout.serviceRolePanel.deleteDescription", { role: pendingDelete.name }) : void 0,
+            confirmLabel: t("layout.serviceRolePanel.deleteConfirm"),
+            variant: "destructive",
+            onConfirm: () => {
+              if (pendingDelete) onDeleteRole?.(pendingDelete.id);
+              setPendingDelete(null);
+            }
+          }
+        )
+      ] })
+    );
+  }
+);
+ServiceRolePanel.displayName = "ServiceRolePanel";
+export {
+  ServiceRolePanel
+};

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

@@ -1,6 +1,6 @@
 import type { ToolbarGroupProp, ToolbarProp } from "../../props/components/navigation.prop.js";
-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 type { FilterBarChipProp, FilterBarChipProp as FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProp as FilterBarFilterProps, FilterBarOverflowProp, FilterBarSearchProp, FilterBarSearchProp as FilterBarSearchProps, 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, filters, chips, onChipRemove, actions, resultCount, loading, disabled, error, 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

@@ -4,6 +4,9 @@ import { useId } from "react";
 import { X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Button } from "../general/button.js";
+import { Badge } from "../data-display/badge.js";
+import { SearchInput } from "../data-entry/search-input.js";
+import { Select } from "../data-entry/select.js";
 import { cn } from "../../lib/utils.js";
 function Toolbar({
   onClear,
@@ -11,65 +14,141 @@ function Toolbar({
   sticky = false,
   overflow = "wrap",
   search,
+  filters,
   chips,
   onChipRemove,
-  resultCount,
   actions,
+  resultCount,
+  loading,
+  disabled,
+  error,
   className,
   children
 }) {
   const { t } = useTranslation();
-  const hasChips = chips != null && chips.length > 0;
+  const reactId = useId();
+  const hasModel = search !== void 0 || filters !== void 0 || chips !== void 0 || onChipRemove !== void 0 || actions !== void 0 || resultCount !== void 0 || loading !== void 0 || disabled !== void 0 || error !== void 0;
+  if (!hasModel) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "toolbar",
+        "aria-label": t("navigation.toolbar.ariaLabel"),
+        "data-overflow": overflow,
+        className: cn("ui-toolbar", sticky && "ui-toolbar-sticky", className),
+        children: [
+          children,
+          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")
+          ] })
+        ]
+      }
+    );
+  }
+  const showClear = Boolean(onClear && hasActiveFilters);
+  const showChips = Boolean(chips && chips.length > 0);
+  const showMeta = error != null || resultCount !== void 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      role: "toolbar",
-      "aria-label": t("navigation.toolbar.ariaLabel"),
-      "data-overflow": overflow,
-      className: cn("ui-toolbar", sticky && "ui-toolbar-sticky", className),
+      className: cn("ui-filter-bar", sticky && "ui-toolbar-sticky", className),
+      "data-loading": loading || void 0,
       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(
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "toolbar",
+            "aria-label": t("navigation.toolbar.ariaLabel"),
+            "aria-busy": loading || void 0,
+            "data-overflow": overflow,
+            className: "ui-toolbar",
+            children: [
+              search && /* @__PURE__ */ jsx(
+                SearchInput,
+                {
+                  id: search.id,
+                  className: "ui-filter-bar-search",
+                  label: search.label,
+                  ariaLabel: search.ariaLabel,
+                  placeholder: search.placeholder,
+                  value: search.value,
+                  defaultValue: search.defaultValue,
+                  onValueChange: search.onValueChange,
+                  onSearch: search.onSearch,
+                  disabled: disabled || search.disabled
+                }
+              ),
+              filters?.map((filter) => {
+                const controlId = `${reactId}-filter-${filter.value}`;
+                return /* @__PURE__ */ jsx(
+                  ToolbarGroup,
+                  {
+                    label: filter.label,
+                    controlId,
+                    className: "ui-filter-bar-filter",
+                    children: /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        id: controlId,
+                        options: filter.options,
+                        value: filter.selected,
+                        defaultValue: filter.defaultSelected,
+                        onValueChange: (selected) => filter.onSelectedChange?.(selected),
+                        placeholder: filter.placeholder,
+                        disabled: disabled || filter.disabled
+                      }
+                    )
+                  },
+                  filter.value
+                );
+              }),
+              children,
+              (showClear || actions != null) && /* @__PURE__ */ jsxs("div", { className: "ui-filter-bar-end", children: [
+                showClear && /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: onClear,
+                    disabled,
+                    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 })
+              ] })
+            ]
+          }
+        ),
+        showChips && /* @__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(
+              /* @__PURE__ */ jsx(Badge, { variant: "outline", children: chip.label }),
+              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);
-                  },
+                  size: "icon-sm",
+                  disabled: disabled || chip.disabled,
+                  "aria-label": t("navigation.filterBar.removeFilter", {
+                    label: typeof chip.label === "string" ? chip.label : chip.value
+                  }),
+                  onClick: () => onChipRemove(chip.value),
                   children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
                 }
               )
-            ] }, chip.id))
+            ] }, chip.value))
           }
         ),
-        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 })
+        showMeta && /* @__PURE__ */ jsx("div", { className: "ui-filter-bar-meta", children: error != null ? /* @__PURE__ */ jsx("p", { role: "alert", className: "ui-filter-bar-error", children: error }) : /* @__PURE__ */ jsx("p", { role: "status", className: "ui-filter-bar-count", children: t("navigation.filterBar.resultCount", { count: resultCount }) }) })
       ]
     }
   );

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 { FilterBarChipProp, FilterBarChipProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarProp, FilterBarProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";
+export type { FilterBarChipProp, FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarOverflowProp, FilterBarProp, FilterBarProps, FilterBarSearchProp, FilterBarSearchProps, 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/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(