@godxjp/ui 33.22.2 → 33.25.0

package/dist/components/layout/sidebar.js

@@ -33,6 +33,30 @@ function SidebarTrailingIcon({
 }) {
   return /* @__PURE__ */ jsx("span", { className: "sb-trailing-icon", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) });
 }
+function SidebarLabel({ children }) {
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const label = ref.current;
+    if (!label) return;
+    const sync = () => {
+      const cut = label.scrollWidth - label.clientWidth > 1;
+      if (cut) {
+        const text = (label.textContent ?? "").replace(/\s+/g, " ").trim();
+        if (label.title !== text) label.title = text;
+        label.dataset.truncated = "";
+      } else if (label.dataset.truncated !== void 0) {
+        label.removeAttribute("title");
+        delete label.dataset.truncated;
+      }
+    };
+    sync();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(sync);
+    observer.observe(label);
+    return () => observer.disconnect();
+  });
+  return /* @__PURE__ */ jsx("span", { ref, className: "sb-label", children });
+}
 function SidebarRowContent({
   item,
   sub = false,
@@ -42,7 +66,7 @@ function SidebarRowContent({
   const showBadge = item.badge !== void 0 && item.badge !== "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !sub ? /* @__PURE__ */ jsx(SidebarIcon, { icon: item.icon }) : null,
-    /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
+    /* @__PURE__ */ jsx(SidebarLabel, { children: item.label }),
     showBadge ? (
       // absent-when-off), so a rail that never sets `badgeTone` renders the exact same node it
       // always did and no consumer selector has to out-specify a marker meaning "unchanged".
@@ -147,20 +171,40 @@ function NavLeafsInGroup({
   linkComponent,
   renderItem
 }) {
-  return children.map((child) => /* @__PURE__ */ jsx(
-    NavLeaf,
-    {
-      item: child,
-      activeId,
-      onSelect,
-      sub: true,
-      linkComponent,
-      renderItem
-    },
-    child.id
-  ));
+  return children.map(
+    (child) => child.children && child.children.length > 0 ? /* @__PURE__ */ jsx(
+      NavGroup,
+      {
+        item: child,
+        activeId,
+        onSelect,
+        sub: true,
+        linkComponent,
+        renderItem
+      },
+      child.id
+    ) : /* @__PURE__ */ jsx(
+      NavLeaf,
+      {
+        item: child,
+        activeId,
+        onSelect,
+        sub: true,
+        linkComponent,
+        renderItem
+      },
+      child.id
+    )
+  );
 }
-function NavGroup({ item, activeId, onSelect, linkComponent, renderItem }) {
+function NavGroup({
+  item,
+  activeId,
+  onSelect,
+  sub = false,
+  linkComponent,
+  renderItem
+}) {
   const active = isItemActive(item, activeId);
   const children = item.children ?? [];
   const [open, setOpen] = React.useState(active);
@@ -171,10 +215,10 @@ function NavGroup({ item, activeId, onSelect, linkComponent, renderItem }) {
     /* @__PURE__ */ jsxs(
       CollapsibleTrigger,
       {
-        className: "sb-nav-item sb-nav-group-trigger",
+        className: cn("sb-nav-item sb-nav-group-trigger", sub && "sb-nav-item--sub"),
         "data-active": active ? "true" : void 0,
         children: [
-          /* @__PURE__ */ jsx(SidebarRowContent, { item }),
+          /* @__PURE__ */ jsx(SidebarRowContent, { item, sub }),
           /* @__PURE__ */ jsx(ChevronDown, { className: "sb-chevron", "aria-hidden": "true" })
         ]
       }
@@ -232,6 +276,45 @@ function CollapsedRow({ item, activeId, onSelect, linkComponent: LinkComponent }
       children: /* @__PURE__ */ jsx(SidebarRowContent, { item, iconOnly: true })
     }
   ) : null;
+  const renderFlyoutEntries = (entries) => entries.map((child) => {
+    if (child.children && child.children.length > 0) {
+      return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": child.label, className: "sb-flyout-group", children: [
+        /* @__PURE__ */ jsx("div", { className: "sb-flyout-title", "aria-hidden": "true", children: child.label }),
+        renderFlyoutEntries(child.children)
+      ] }, child.id);
+    }
+    const childActive = child.id === activeId;
+    const select = (event) => {
+      setMenuOpen(false);
+      if (child.disabled) {
+        event.preventDefault();
+        return;
+      }
+      onSelect?.(child.id);
+    };
+    const flyoutState = {
+      role: "menuitem",
+      className: "sb-nav-item",
+      "data-active": childActive ? "true" : void 0,
+      "aria-current": childActive ? "page" : void 0,
+      "aria-disabled": child.disabled || void 0
+    };
+    return LinkComponent && child.href ? /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        ...flyoutState,
+        href: child.disabled ? void 0 : child.href,
+        onClick: select,
+        children: /* @__PURE__ */ jsx(SidebarRowContent, { item: child, sub: true })
+      },
+      child.id
+    ) : (
+      // A collapsed-rail flyout entry is a `menuitem`-styled nav row owning `.sb-nav-item`
+      // composition, not a <Button> — same contract as the leaf row above.
+      // ui-audit-disable-next-line no-raw-button
+      /* @__PURE__ */ jsx("button", { type: "button", ...flyoutState, onClick: select, children: /* @__PURE__ */ jsx(SidebarRowContent, { item: child, sub: true }) }, child.id)
+    );
+  });
   if (!hasChildren) {
     return /* @__PURE__ */ jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: iconLink ?? iconButton }),
@@ -253,39 +336,7 @@ function CollapsedRow({ item, activeId, onSelect, linkComponent: LinkComponent }
         className: "sb-flyout-pop",
         children: [
           /* @__PURE__ */ jsx("div", { className: "sb-flyout-title", children: item.label }),
-          children.map((child) => {
-            const childActive = child.id === activeId;
-            const select = (event) => {
-              setMenuOpen(false);
-              if (child.disabled) {
-                event.preventDefault();
-                return;
-              }
-              onSelect?.(child.id);
-            };
-            const flyoutState = {
-              role: "menuitem",
-              className: "sb-nav-item",
-              "data-active": childActive ? "true" : void 0,
-              "aria-current": childActive ? "page" : void 0,
-              "aria-disabled": child.disabled || void 0
-            };
-            return LinkComponent && child.href ? /* @__PURE__ */ jsx(
-              LinkComponent,
-              {
-                ...flyoutState,
-                href: child.disabled ? void 0 : child.href,
-                onClick: select,
-                children: /* @__PURE__ */ jsx(SidebarRowContent, { item: child, sub: true })
-              },
-              child.id
-            ) : (
-              // A collapsed-rail flyout entry is a `menuitem`-styled nav row owning `.sb-nav-item`
-              // composition, not a <Button> — same contract as the leaf row above.
-              // ui-audit-disable-next-line no-raw-button
-              /* @__PURE__ */ jsx("button", { type: "button", ...flyoutState, onClick: select, children: /* @__PURE__ */ jsx(SidebarRowContent, { item: child, sub: true }) }, child.id)
-            );
-          })
+          renderFlyoutEntries(children)
         ]
       }
     )

package/dist/components/layout/topbar.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { revealKeyboardFocus } from "../../lib/focus-reveal.js";
 import { MoreHorizontal } from "lucide-react";
 import * as React from "react";
+import { createPortal } from "react-dom";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { padStyle } from "../../lib/variants.js";
 import { cn } from "../../lib/utils.js";
@@ -26,13 +27,54 @@ function Topbar({
   const controlsRef = React.useRef(null);
   const hasIdentity = identity != null && children == null;
   const foldable = overflow === "menu" && children == null;
-  const collapsed = useCollapsesToMenu(hasIdentity ? controlsRef : barRef, foldable);
-  const clusters = /* @__PURE__ */ jsxs(Fragment, { children: [
+  const hosts = useFoldHosts(foldable);
+  const present = { start: start != null, center: center != null, end: end != null };
+  const holderRef = React.useRef(null);
+  const overflowRef = React.useRef(null);
+  const placeClusters = React.useCallback(
+    (isCollapsed) => {
+      if (!hosts) return;
+      const target = !isCollapsed ? hasIdentity ? controlsRef.current : barRef.current : overflowRef.current ?? holderRef.current;
+      if (!target) return;
+      for (const key of CLUSTER_ORDER) {
+        const node = hosts[key];
+        if (!present[key]) node.remove();
+        else if (node.parentNode !== target || node !== target.lastElementChild) {
+          target.appendChild(node);
+        }
+      }
+    },
+    // `present` is derived from the three slots on every render; its booleans are what matter.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hosts, hasIdentity, present.start, present.center, present.end]
+  );
+  const collapsed = useCollapsesToMenu(
+    hasIdentity ? controlsRef : barRef,
+    foldable,
+    hosts ? placeClusters : void 0
+  );
+  const overflowNode = React.useCallback(
+    (node) => {
+      overflowRef.current = node;
+      placeClusters(true);
+    },
+    [placeClusters]
+  );
+  const clusters = hosts ? (
+    // Kept mounted in ONE place, whatever the bar is showing; `placeClusters` moves the elements.
+    /* @__PURE__ */ jsx(TopbarClusterHolder, { ref: holderRef, visible: collapsed })
+  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
     start != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-start", className: "ui-topbar-start", children: start }) : null,
     center != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-center", className: "ui-topbar-center", children: center }) : null,
     end != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-end", className: "ui-topbar-end", children: end }) : null
   ] });
-  return /* @__PURE__ */ jsx(
+  const portals = hosts ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    start != null ? createPortal(start, hosts.start) : null,
+    center != null ? createPortal(center, hosts.center) : null,
+    end != null ? createPortal(end, hosts.end) : null
+  ] }) : null;
+  const overflowMenu = /* @__PURE__ */ jsx(TopbarOverflowMenu, { contentRef: hosts ? overflowNode : void 0, children: hosts ? null : clusters });
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: barRef,
@@ -48,36 +90,81 @@ function Topbar({
       "data-slot": "topbar",
       className: cn("ui-topbar", className),
       ...props,
-      children: children ?? (hasIdentity ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: controlsRef,
-            onFocusCapture: revealKeyboardFocus,
-            "data-slot": "topbar-controls",
-            "data-overflow": overflow,
-            className: "ui-topbar ui-topbar-controls",
-            children: collapsed ? /* @__PURE__ */ jsx(TopbarOverflowMenu, { children: clusters }) : clusters
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { "data-slot": "topbar-identity", className: "ui-topbar-identity", children: identity })
-      ] }) : collapsed ? /* @__PURE__ */ jsx(TopbarOverflowMenu, { children: clusters }) : clusters)
+      children: [
+        children ?? (hasIdentity ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: controlsRef,
+              onFocusCapture: revealKeyboardFocus,
+              "data-slot": "topbar-controls",
+              "data-overflow": overflow,
+              className: "ui-topbar ui-topbar-controls",
+              children: [
+                collapsed ? overflowMenu : null,
+                collapsed && !hosts ? null : clusters
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { "data-slot": "topbar-identity", className: "ui-topbar-identity", children: identity })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          collapsed ? overflowMenu : null,
+          collapsed && !hosts ? null : clusters
+        ] })),
+        portals
+      ]
     }
   );
 }
-function TopbarOverflowMenu({ children }) {
+const CLUSTER_ORDER = ["start", "center", "end"];
+const subscribeNothing = () => () => {
+};
+function useFoldHosts(enabled) {
+  const isClient = React.useSyncExternalStore(
+    subscribeNothing,
+    () => true,
+    () => false
+  );
+  const [hosts] = React.useState(() => {
+    if (typeof document === "undefined") return null;
+    const make = (key) => {
+      const node = document.createElement("div");
+      node.dataset.slot = `topbar-${key}`;
+      node.className = `ui-topbar-${key}`;
+      return node;
+    };
+    return { start: make("start"), center: make("center"), end: make("end") };
+  });
+  React.useEffect(
+    () => () => {
+      if (hosts) for (const key of CLUSTER_ORDER) hosts[key].remove();
+    },
+    [hosts]
+  );
+  return enabled && isClient ? hosts : null;
+}
+const TopbarClusterHolder = React.forwardRef(
+  function TopbarClusterHolder2({ visible }, ref) {
+    return visible ? /* @__PURE__ */ jsx("div", { ref, hidden: true, "data-slot": "topbar-fold-holder" }) : null;
+  }
+);
+function TopbarOverflowMenu({
+  children,
+  contentRef
+}) {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(TopbarItem, { "data-topbar-overflow-trigger": "", "aria-label": t("layout.topbar.more"), children: /* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": "true" }) }) }),
-    /* @__PURE__ */ jsx(PopoverContent, { align: "end", width: "auto", children: /* @__PURE__ */ jsx("div", { "data-slot": "topbar-overflow", className: "ui-topbar-overflow", children }) })
+    /* @__PURE__ */ jsx(PopoverContent, { align: "end", width: "auto", children: /* @__PURE__ */ jsx("div", { ref: contentRef, "data-slot": "topbar-overflow", className: "ui-topbar-overflow", children }) })
   ] });
 }
-function useCollapsesToMenu(ref, enabled) {
+function useCollapsesToMenu(ref, enabled, place) {
   const [collapsed, setCollapsed] = React.useState(false);
   const needed = React.useRef(0);
   React.useLayoutEffect(() => {
     const bar = ref.current;
     if (!enabled || !bar) return void 0;
+    place?.(collapsed);
     const update = () => {
       if (!collapsed) {
         if (bar.clientWidth > 0 && bar.scrollWidth - bar.clientWidth > 1) {
@@ -100,7 +187,7 @@ function useCollapsesToMenu(ref, enabled) {
         }
       }
     return () => observer.disconnect();
-  }, [ref, enabled, collapsed]);
+  }, [ref, enabled, collapsed, place]);
   return enabled && collapsed;
 }
 export {

package/dist/components/navigation/dropdown-menu.d.ts

@@ -169,6 +169,14 @@ interface DropdownMenuItemPropsOwn {
     description?: React.ReactNode;
     /** Mượn thẻ của con thay vì dựng `<div>` riêng — chỗ để nhét một `<Link>` vào một mục menu. */
     asChild?: boolean;
+    /**
+     * The item is a link to this URL. With `asChild` it is read from the borrowed child's own `href`
+     * when there is one; pass it here when the child is a router link that takes something else
+     * (TanStack/React Router `<Link to>`), so react-aria renders its LINK item — an `<a>` — instead of
+     * an action `<div>` (and stops warning "Expected <div>, got <a>"). Without a react-aria
+     * `RouterProvider` the click stays the child's own: navigation is whatever the child does.
+     */
+    href?: string;
     /**
      * `id` và mọi `data-*` ĐI XUỐNG phần tử gốc của item (gh#631).
      *
@@ -183,7 +191,7 @@ interface DropdownMenuItemPropsOwn {
     id?: string;
 }
 type DropdownMenuItemProps = React.PropsWithChildren<DropdownMenuItemPropsOwn> & Record<`data-${string}`, unknown>;
-export declare function DropdownMenuItem({ children, className, inset, variant, disabled, onSelect, textValue, description, asChild, ...forwarded }: DropdownMenuItemProps): React.JSX.Element;
+export declare function DropdownMenuItem({ children, className, inset, variant, disabled, onSelect, textValue, description, asChild, href, ...forwarded }: DropdownMenuItemProps): React.JSX.Element;
 interface DropdownMenuLabelPropsOwn {
     className?: string;
     inset?: boolean;
@@ -197,10 +205,12 @@ type DropdownMenuLabelProps = React.PropsWithChildren<DropdownMenuLabelPropsOwn>
  * `Header` không đi qua `useRenderProps`, nên `props.children` trong `render` CHÍNH là children của
  * consumer — không có `Provider` chen vào như ở `MenuItem`. `Slot` vì thế nhận thẳng gói props.
  *
- * NHƯNG PHẢI RENDER RA `<div>`, KHÔNG PHẢI `<header>`. `<header>` mang vai trò ngầm `banner`, và
+ * `<header>` TRẦN thì không được: nó mang vai trò ngầm `banner`, và
  * `banner` không nằm trong danh sách con hợp lệ của `role="menu"` (axe: aria-required-children,
  * ARIA 1.2 — menu chỉ nhận menuitem / menuitemcheckbox / menuitemradio / group / separator). Radix
- * dựng `<div>`, vai trò `generic`, nên nó không bao giờ vấp lỗi này.
+ * dựng `<div>`, vai trò `generic`, nên nó không bao giờ vấp lỗi này. Còn `<div>` thì RAC cảnh báo
+ * "Expected <header>, got <div>" (gh#1452). Nên: `<header role="presentation">` — đúng thẻ RAC chờ,
+ * không có landmark.
  *
  * `Header` vẫn được dùng chứ không thay bằng `<div>` trần: bộ dựng collection của RAC chỉ nhận các
  * nút nó biết, một phần tử lạ đặt thẳng trong `Menu` sẽ bị nó bỏ. Nên giữ nút, đổi thẻ.

package/dist/components/navigation/dropdown-menu.js

@@ -22,6 +22,7 @@ import {
 import { Check, ChevronRight } from "lucide-react";
 import { ariaKeyShortcuts, parseShortcut, shouldHandleShortcut } from "../../lib/shortcut.js";
 import { cn } from "../../lib/utils.js";
+import { isDevelopment } from "../../lib/dev.js";
 import { Slot } from "../../lib/slot.js";
 const DROPDOWN_MENU_PLACEMENT = {
   top: { side: "top", align: "center" },
@@ -40,7 +41,7 @@ class MenuCollectionBoundary extends React.Component {
   // of gh#637 that cost the reporter a night of instrumenting `Object.prototype`.
   componentDidCatch(error) {
     console.error(
-      "[@godxjp/ui] DropdownMenu: the menu could not be built and was left empty; the rest of the application is unaffected. A menu's children must be collection nodes (DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuSub) or components returning one \u2014 an icon or a text label belongs INSIDE an item, not beside it. Underlying error:",
+      "[@godxjp/ui] DropdownMenu: the menu could not be built and was left empty; the rest of the application is unaffected. A menu's children must be collection nodes (DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuSub) or components returning one \u2014 an icon or a text label belongs INSIDE an item, not beside it. Use Popover + ListRow for arbitrary panel content. Underlying error:",
       error
     );
   }
@@ -51,6 +52,10 @@ class MenuCollectionBoundary extends React.Component {
 function borrowedTag(children, asChild) {
   return asChild ? React.Children.only(children) : null;
 }
+function borrowedHref(tag) {
+  const href = tag?.props?.href;
+  return typeof href === "string" ? href : void 0;
+}
 function renderItemTag(tag, domProps, content) {
   if (!tag) {
     return /* @__PURE__ */ jsx("div", { ...domProps, children: content });
@@ -331,6 +336,16 @@ function DropdownMenuSub({ children }) {
   const parts = React.Children.toArray(children).filter(React.isValidElement);
   return /* @__PURE__ */ jsx(SubmenuTrigger, { children: parts });
 }
+function hasNonMenuChildren(children) {
+  return React.Children.toArray(children).some((child) => {
+    if (!React.isValidElement(child)) return true;
+    if (typeof child.type === "string") return true;
+    if (child.type === React.Fragment || child.type === DropdownMenuGroup || child.type === DropdownMenuRadioGroup) {
+      return hasNonMenuChildren(child.props.children);
+    }
+    return false;
+  });
+}
 function DropdownMenuContent({
   children,
   className,
@@ -348,6 +363,13 @@ function DropdownMenuContent({
   sticky,
   forceMount
 }) {
+  React.useEffect(() => {
+    if (isDevelopment() && hasNonMenuChildren(children)) {
+      console.error(
+        "[@godxjp/ui] DropdownMenuContent accepts menu collection children only. Use DropdownMenuItem for actions; use Popover + ListRow for notifications, headers, lists and links."
+      );
+    }
+  }, [children]);
   void hideWhenDetached;
   void sticky;
   void forceMount;
@@ -417,6 +439,7 @@ function DropdownMenuItem({
   textValue,
   description,
   asChild,
+  href,
   ...forwarded
 }) {
   const tag = borrowedTag(children, asChild);
@@ -426,6 +449,7 @@ function DropdownMenuItem({
     MenuItem,
     {
       isDisabled: disabled,
+      href: href ?? borrowedHref(tag),
       textValue: textValue ?? (typeof label === "string" ? label : void 0),
       onAction: onSelect ? () => onSelect(selectEvent("dropdownmenu.itemSelect")) : void 0,
       className: cn(
@@ -477,11 +501,17 @@ function DropdownMenuLabel({ children, className, inset, asChild }) {
         {
           ...props
         }
-      ) : (props) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          ...props
-        }
+      ) : (props) => (
+        // RAC's `Header` element (it warns in dev when `render` returns another one, gh#1452),
+        // with the landmark dropped: `role="presentation"` is allowed on `header` and keeps
+        // the menu owning no `banner`.
+        /* @__PURE__ */ jsx(
+          "header",
+          {
+            role: "presentation",
+            ...props
+          }
+        )
       ),
       children
     }

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

@@ -22,5 +22,5 @@ declare const PaginationNext: React.ForwardRefExoticComponent<Omit<Omit<React.De
     disabled?: boolean;
     href?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
-export declare function Pagination({ ariaLabel, value, total, pageSize, pageSizeOptions, showSizeChanger, showTotal, hideOnSinglePage, simple, showQuickJumper, size, align, responsive, disabled, className, onValueChange, }: PaginationProp): React.JSX.Element | null;
+export declare function Pagination({ ariaLabel, value, total, pageSize, pageSizeOptions, showSizeChanger, showTotal, hideOnSinglePage, simple, showQuickJumper, size, align, responsive, disabled, className, onValueChange, onPageIntent, }: PaginationProp): React.JSX.Element | null;
 export { PaginationContent, PaginationItem, PaginationLink, PaginationEllipsis, PaginationPrevious, PaginationNext, };

package/dist/components/navigation/pagination.js

@@ -122,7 +122,8 @@ function Pagination({
   responsive = true,
   disabled,
   className,
-  onValueChange
+  onValueChange,
+  onPageIntent
 }) {
   const { t } = useTranslation();
   const jumperId = React.useId();
@@ -138,6 +139,12 @@ function Pagination({
     const nextPage = Math.min(Math.max(1, page), Math.max(1, Math.ceil(total / size2)));
     onValueChange?.(nextPage, size2);
   };
+  const intent = (page) => {
+    const notify = () => {
+      if (!disabled && page >= 1 && page <= totalPages) onPageIntent?.(page);
+    };
+    return { onPointerEnter: notify, onFocus: notify, onTouchStart: notify };
+  };
   const commitJump = () => {
     const parsed = Number.parseInt(jumperDraft, 10);
     setJumperDraft("");
@@ -204,6 +211,7 @@ function Pagination({
               size: "sm",
               disabled: Boolean(disabled) || safeCurrent <= 1,
               "aria-label": t("navigation.pagination.prev"),
+              ...intent(safeCurrent - 1),
               onClick: () => go(safeCurrent - 1),
               children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
             }
@@ -221,6 +229,7 @@ function Pagination({
               size: "sm",
               disabled: Boolean(disabled) || safeCurrent >= totalPages,
               "aria-label": t("navigation.pagination.next"),
+              ...intent(safeCurrent + 1),
               onClick: () => go(safeCurrent + 1),
               children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
             }
@@ -264,6 +273,7 @@ function Pagination({
             PaginationPrevious,
             {
               "aria-label": t("navigation.pagination.prev"),
+              ...intent(safeCurrent - 1),
               onClick: () => go(safeCurrent - 1),
               disabled: Boolean(disabled) || safeCurrent <= 1,
               children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
@@ -274,6 +284,7 @@ function Pagination({
               PaginationLink,
               {
                 isActive: page === safeCurrent,
+                ...intent(page),
                 "aria-label": t("navigation.pagination.page", { page }),
                 onClick: () => {
                   if (!disabled) go(page);
@@ -287,6 +298,7 @@ function Pagination({
             PaginationNext,
             {
               "aria-label": t("navigation.pagination.next"),
+              ...intent(safeCurrent + 1),
               onClick: () => go(safeCurrent + 1),
               disabled: Boolean(disabled) || safeCurrent >= totalPages,
               children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })

package/dist/components/navigation/toolbar.js

@@ -132,7 +132,8 @@ function Toolbar({
                         onValueChange: (selected) => filter.onSelectedChange?.(selected),
                         placeholder: filter.placeholder,
                         disabled: disabled || filter.disabled,
-                        allowClear: true,
+                        allowClear: filter.required ? false : filter.allowClear ?? true,
+                        "aria-required": filter.required || void 0,
                         clearLabel: typeof filter.label === "string" ? t("navigation.filterBar.clearFilter", { label: filter.label }) : void 0
                       }
                     )

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "33.22.2",
+  "version": "33.25.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -382,10 +382,16 @@
       "position": "Cover position",
       "hint": "Drag the image, or use the arrow keys, to reposition it",
       "valueText": "{value}% from the top"
+    },
+    "pageErrorBoundary": {
+      "title": "This page could not be displayed",
+      "description": "Something went wrong while showing this page. The rest of the app still works: reload the page, or go to another page from the menu.",
+      "reload": "Reload page"
     }
   },
   "dataDisplay": {
     "avatar": {
+      "agent": "AI agent",
       "presence": {
         "online": "Online",
         "away": "Away",
@@ -805,6 +811,7 @@
     "trendCurrent": "current",
     "heatmapSummary": "Heatmap, {rows} × {columns}",
     "heatmapHighest": "Highest: {value} at {row}, {column}",
+    "noData": "No data",
     "heatmapNoData": "No data",
     "heatmapTop": "Top {rank}",
     "heatmapLegend": "Color scale",

package/dist/i18n/messages/ja.json

@@ -374,10 +374,16 @@
       "position": "カバー画像の位置",
       "hint": "画像をドラッグするか矢印キーで位置を調整",
       "valueText": "上から {value}%"
+    },
+    "pageErrorBoundary": {
+      "title": "このページを表示できませんでした",
+      "description": "ページの表示中に問題が発生しました。アプリの他の部分は使えます。ページを再読み込みするか、メニューから別のページに移動してください。",
+      "reload": "ページを再読み込み"
     }
   },
   "dataDisplay": {
     "avatar": {
+      "agent": "AIエージェント",
       "presence": {
         "online": "オンライン",
         "away": "離席中",
@@ -779,6 +785,7 @@
     "trendCurrent": "現在",
     "heatmapSummary": "ヒートマップ（{rows}行×{columns}列）",
     "heatmapHighest": "最大 {value}（{row}・{column}）",
+    "noData": "データなし",
     "heatmapNoData": "データなし",
     "heatmapTop": "上位{rank}位",
     "heatmapLegend": "色の濃さの凡例",