@godxjp/ui 17.0.1 → 18.0.1

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

@@ -4,6 +4,7 @@ import * as React from "react";
 import { ChevronDown, ChevronRight, ChevronsUpDown, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
+import { pickFieldA11y } from "../../lib/field-a11y.js";
 import { controlOpenRingClass } from "../../lib/control-styles.js";
 import { Button } from "../general/button.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
@@ -57,9 +58,13 @@ function TreeSelectRoot({
   allowClear = true,
   className,
   id,
-  fieldNames
+  fieldNames,
+  ...ariaProps
 }) {
   const { t } = useTranslation();
+  const fieldA11y = pickFieldA11y(ariaProps);
+  const reactId = React.useId();
+  const treeId = `${id ?? reactId}-tree`;
   const options = React.useMemo(
     () => normalizeTreeOptions(treeDataProp, fieldNames),
     [treeDataProp, fieldNames]
@@ -177,6 +182,9 @@ function TreeSelectRoot({
         variant: "outline",
         role: "combobox",
         "aria-expanded": open,
+        "aria-haspopup": "tree",
+        "aria-controls": open ? treeId : void 0,
+        ...fieldA11y,
         disabled,
         className: cn(
           "w-full justify-between font-normal",
@@ -211,6 +219,7 @@ function TreeSelectRoot({
       /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[min(300px,50vh)]", children: /* @__PURE__ */ jsx(
         "div",
         {
+          id: treeId,
           role: "tree",
           "aria-multiselectable": Boolean(checkable) || Boolean(multiple),
           className: "p-1",

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

@@ -3,4 +3,4 @@ export type { UploadProp, UploadProp as UploadProps, UploadFileItemProp, UploadV
 export type { UploadFileItem, UploadVariant, UploadCommitAction } from "./upload-types.js";
 export { collectUploadCommitActions, createUploadItem } from "./upload-types.js";
 export { useUploadDraft } from "./use-upload-draft.js";
-export declare function Upload({ variant, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled, removable, onUpload, className, children, }: UploadProp): import("react/jsx-runtime").JSX.Element;
+export declare function Upload({ variant, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): import("react/jsx-runtime").JSX.Element;

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

@@ -5,6 +5,7 @@ import { Camera, ImagePlus, RotateCcw, Trash2, Upload as UploadIcon, X } from "l
 import { useTranslation } from "../../i18n/use-translation.js";
 import { formatBytes } from "../../lib/format.js";
 import { cn } from "../../lib/utils.js";
+import { resolveFieldA11y } from "../../lib/field-a11y.js";
 import { controlIconClass } from "../../lib/control-styles.js";
 import { Button } from "../general/button.js";
 import { UploadCropDialog } from "./upload-crop-dialog.js";
@@ -84,10 +85,13 @@ function Upload({
   disabled,
   removable = true,
   onUpload,
+  id,
   className,
-  children
+  children,
+  ...ariaProps
 }) {
   const { t } = useTranslation();
+  const inputA11y = resolveFieldA11y(ariaProps, t("dataEntry.upload.inputLabel"));
   const accept = acceptProp ?? defaultAcceptForVariant(variant);
   const maxCount = maxCountProp ?? defaultMaxCount(variant);
   const multiple = multipleProp ?? (maxCount === 1 ? false : true);
@@ -144,12 +148,13 @@ function Upload({
     "input",
     {
       ref: inputRef,
+      id,
       type: "file",
       className: "sr-only",
       accept,
       multiple: multiple && !isSingleAvatar,
       disabled,
-      "aria-label": t("dataEntry.upload.inputLabel"),
+      ...inputA11y,
       onChange: (e) => {
         pickFiles(e.target.files);
         e.target.value = "";

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

@@ -1,3 +1,3 @@
 import type { AppShellProp } from "../../props/components/layout.prop.js";
 export type { AppShellProp, AppShellProp as AppShellProps, } from "../../props/components/layout.prop.js";
-export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, }: AppShellProp): import("react/jsx-runtime").JSX.Element;
+export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Menu } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { Button } from "../general/button.js";
+import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "../feedback/sheet.js";
 function AppShell({
   sidebar,
   topbar,
@@ -10,9 +14,25 @@ function AppShell({
   breadcrumb,
   footer,
   children,
-  sidebarCollapsed = false
+  sidebarCollapsed = false,
+  mobileNav,
+  mobileNavLabel,
+  mobileNavOpen,
+  onMobileNavOpenChange
 }) {
   const { t } = useTranslation();
+  const drawerNav = mobileNav !== void 0 ? mobileNav : sidebar;
+  const hasDrawer = drawerNav != null;
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const drawerOpen = mobileNavOpen ?? uncontrolledOpen;
+  const setDrawerOpen = onMobileNavOpenChange ?? setUncontrolledOpen;
+  const handleDrawerClick = (event) => {
+    const target = event.target;
+    const hit = target.closest("a[href], button, [role='menuitem']");
+    if (hit && !hit.classList.contains("sb-nav-group-trigger")) {
+      setDrawerOpen(false);
+    }
+  };
   const resolvedTopbar = topbar !== void 0 ? topbar : /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
     logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
     topbarLeft !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-left", children: topbarLeft }),
@@ -21,7 +41,27 @@ function AppShell({
   ] });
   return /* @__PURE__ */ jsxs("div", { className: "app-root", "data-collapsed": sidebarCollapsed ? "true" : void 0, children: [
     /* @__PURE__ */ jsx("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: sidebar }),
-    /* @__PURE__ */ jsx("header", { className: "app-topbar ui-scale-fixed", "aria-label": t("layout.appShell.headerLabel"), children: resolvedTopbar }),
+    /* @__PURE__ */ jsxs("header", { className: "app-topbar ui-scale-fixed", "aria-label": t("layout.appShell.headerLabel"), children: [
+      hasDrawer && /* @__PURE__ */ jsxs(Sheet, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [
+        /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "app-mobile-nav-trigger",
+            "aria-label": t("layout.appShell.openNav"),
+            "aria-haspopup": "dialog",
+            children: /* @__PURE__ */ jsx(Menu, { className: "size-5", "aria-hidden": "true" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "app-mobile-nav-drawer", children: [
+          /* @__PURE__ */ jsx(SheetHeader, { title: mobileNavLabel ?? t("layout.appShell.navLabel") }),
+          /* @__PURE__ */ jsx(SheetBody, { className: "app-mobile-nav-body", onClick: handleDrawerClick, children: drawerNav })
+        ] })
+      ] }),
+      resolvedTopbar
+    ] }),
     /* @__PURE__ */ jsxs("main", { className: "app-main", "aria-label": t("layout.appShell.mainLabel"), children: [
       breadcrumb !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-breadcrumb", children: breadcrumb }),
       children

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

@@ -3,5 +3,11 @@ import type { BreadcrumbProp } from "../../props/vocabulary/navigation.prop.js";
 export type BreadcrumbProps = {
     items: BreadcrumbProp;
     linkComponent?: ElementType;
+    /**
+     * Override the `<nav>` landmark's accessible name. Defaults to a localized "Breadcrumb".
+     * Multiple Breadcrumb instances on one page/view need a DISTINCT name each — two `<nav>`
+     * landmarks sharing one name/role fail axe's `landmark-unique` (WCAG 2.4.1 / 1.3.1).
+     */
+    "aria-label"?: string;
 };
-export declare function Breadcrumb({ items, linkComponent: LinkComponent }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export declare function Breadcrumb({ items, linkComponent: LinkComponent, "aria-label": ariaLabel, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/breadcrumb.js

@@ -2,9 +2,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
-function Breadcrumb({ items, linkComponent: LinkComponent = "a" }) {
+function Breadcrumb({
+  items,
+  linkComponent: LinkComponent = "a",
+  "aria-label": ariaLabel
+}) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx("nav", { "aria-label": t("navigation.breadcrumb.ariaLabel"), className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel ?? t("navigation.breadcrumb.ariaLabel"), className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxs("li", { className: "ui-breadcrumb-item", children: [
       item.to && !isLast ? /* @__PURE__ */ jsx(LinkComponent, { href: item.to, to: item.to, className: "ui-breadcrumb-link", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-current", "aria-current": isLast ? "page" : void 0, children: item.label }),

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-runtime").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, linkComponent: LinkComponent, density, variant, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react/jsx-runtime").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, breadcrumbAriaLabel, linkComponent: LinkComponent, density, variant, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react/jsx-runtime").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

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

@@ -2,6 +2,7 @@
 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";
 function scrollParent(el) {
@@ -38,6 +39,7 @@ function PageContainerRoot({
   extra,
   footer,
   breadcrumb,
+  breadcrumbAriaLabel,
   linkComponent: LinkComponent = "a",
   density,
   variant = "default",
@@ -49,6 +51,7 @@ function PageContainerRoot({
 }) {
   const reveal = stickyFooter && footer != null && footerReveal === "onScroll";
   const { headerRef, revealed } = useFooterReveal(reveal);
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -66,28 +69,35 @@ function PageContainerRoot({
       ),
       children: [
         /* @__PURE__ */ jsxs("header", { ref: headerRef, className: "ui-page-header", children: [
-          breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", 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);
-          }) }) }),
+          breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx(
+            "nav",
+            {
+              "aria-label": 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: "min-w-0", children: [
               /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),

package/dist/components/layout/responsive-grid.js

@@ -14,7 +14,7 @@ function resolveColumns(columns) {
   };
 }
 function ResponsiveGrid({ columns = 4, children }) {
-  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid", style: resolveColumns(columns), children });
+  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid", style: resolveColumns(columns), children }) });
 }
 export {
   ResponsiveGrid

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

@@ -18,4 +18,4 @@ type SidebarItemProps = {
 export declare function SidebarHeader({ children, className, ...props }: SidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarSection({ label, collapsed, children, className, ...props }: SidebarSectionProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarItem({ item, active, sub, onActivate, renderItem, children, ...props }: SidebarItemProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick">): import("react/jsx-runtime").JSX.Element;
-export declare function Sidebar({ activeId, onSelect, sections, product, onProductClick, brand, collapsed, children, renderItem, footer, }: SidebarProp): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ activeId, onSelect, sections, product, onProductClick, brand, collapsed, children, renderItem, footer, "aria-label": ariaLabel, }: SidebarProp): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/sidebar.js

@@ -1,6 +1,7 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { ChevronDown } from "lucide-react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../data-display/collapsible.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
@@ -34,25 +35,52 @@ function SidebarItem({
   const Icon = item.icon;
   const showBadge = item.badge !== void 0 && item.badge !== "";
   const disabled = item.disabled || props.disabled;
-  const content = children ?? (renderItem ? renderItem(item) : void 0);
-  return /* @__PURE__ */ jsx(
+  const custom = children ?? (renderItem ? renderItem(item) : void 0);
+  const rowClass = cn("sb-nav-item", sub && "sb-nav-item--sub");
+  const stateProps = {
+    className: rowClass,
+    "data-active": active ? "true" : void 0,
+    "aria-current": active ? "page" : void 0
+  };
+  if (custom !== void 0) {
+    return /* @__PURE__ */ jsx(Slot, { ...stateProps, "aria-disabled": disabled || void 0, children: custom });
+  }
+  if (item.href) {
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        ...props,
+        href: disabled ? void 0 : item.href,
+        ...stateProps,
+        "aria-disabled": disabled || void 0,
+        onClick: (event) => {
+          if (disabled) event.preventDefault();
+          else onActivate?.(item.id);
+        },
+        children: [
+          !sub ? /* @__PURE__ */ jsx("span", { className: "sb-icon", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) }) : null,
+          /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
+          showBadge ? /* @__PURE__ */ jsx("span", { className: "sb-badge", children: item.badge }) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      className: cn("sb-nav-item", sub && "sb-nav-item--sub"),
-      "data-active": active ? "true" : void 0,
-      "aria-current": active ? "page" : void 0,
+      ...stateProps,
       "aria-disabled": disabled,
       ...props,
       onClick: () => {
         if (disabled) return;
         onActivate?.(item.id);
       },
-      children: content ? content : /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: [
         !sub ? /* @__PURE__ */ jsx("span", { className: "sb-icon", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) }) : null,
         /* @__PURE__ */ jsx("span", { className: "sb-label", children: item.label }),
         showBadge ? /* @__PURE__ */ jsx("span", { className: "sb-badge", children: item.badge }) : null
-      ] })
+      ]
     }
   );
 }
@@ -95,7 +123,11 @@ function NavGroup({ item, activeId, onSelect, renderItem }) {
   const Icon = item.icon;
   const active = isItemActive(item, activeId);
   const children = item.children ?? [];
-  return /* @__PURE__ */ jsxs(Collapsible, { defaultOpen: active, className: "sb-nav-group", children: [
+  const [open, setOpen] = React.useState(active);
+  React.useEffect(() => {
+    if (active) setOpen(true);
+  }, [active]);
+  return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, className: "sb-nav-group", children: [
     /* @__PURE__ */ jsxs(
       CollapsibleTrigger,
       {
@@ -186,7 +218,8 @@ function Sidebar({
   collapsed = false,
   children,
   renderItem,
-  footer
+  footer,
+  "aria-label": ariaLabel
 }) {
   const { t } = useTranslation();
   const resolvedSections = sections ?? [];
@@ -223,7 +256,7 @@ function Sidebar({
         meta
       ] });
     })() : null,
-    /* @__PURE__ */ jsx("nav", { className: "sb-nav-scroll", "aria-label": t("layout.sidebar.ariaLabel"), children: children ?? resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("nav", { className: "sb-nav-scroll", "aria-label": ariaLabel ?? t("layout.sidebar.ariaLabel"), children: children ?? resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsx(
       SidebarSection,
       {
         label: section.label,

package/dist/components/layout/split-pane.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 function SplitPane({ children, aside, asideWidth = "md" }) {
-  return /* @__PURE__ */ jsxs("div", { className: "ui-split-pane", "data-aside-width": asideWidth, children: [
+  return /* @__PURE__ */ jsx("div", { className: "ui-split-pane-scope", children: /* @__PURE__ */ jsxs("div", { className: "ui-split-pane", "data-aside-width": asideWidth, children: [
     /* @__PURE__ */ jsx("div", { className: "ui-split-pane-main", children }),
     /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", children: aside })
-  ] });
+  ] }) });
 }
 export {
   SplitPane

package/dist/components/navigation/app-setting-picker.js

@@ -63,7 +63,8 @@ const ARIA_KEY = {
 };
 const BRAND_NONE = "__app__";
 const AppSettingPicker = React.forwardRef(
-  function AppSettingPicker2({ kind, appearance = "labeled", className, disabled, id, name, value, onValueChange }, ref) {
+  function AppSettingPicker2({ kind, appearance, className, disabled, id, name, value, onValueChange }, ref) {
+    const resolvedAppearance = appearance ?? (kind === "locale" ? "icon" : "labeled");
     const ctx = useOptionalAppContext();
     const { t, locale, fallbackLocale } = useTranslation();
     const raw = value ?? ctx?.[kind];
@@ -119,7 +120,7 @@ const AppSettingPicker = React.forwardRef(
     }, [kind, ctx?.timezoneOptions, current, t, locale, fallbackLocale]);
     const unbound = current === void 0 || !handleChange;
     const Icon = ICON[kind];
-    const iconOnly = appearance === "icon";
+    const iconOnly = resolvedAppearance === "icon";
     return /* @__PURE__ */ jsxs(
       Select,
       {
@@ -134,13 +135,20 @@ const AppSettingPicker = React.forwardRef(
             {
               ref,
               id,
+              showIndicator: !iconOnly,
               className: cn(
                 iconOnly ? (
-                  // Structurally icon-only: drop the owned width + value spacing, square the box to
-                  // the density-aware --control-height tap target, centre the icon and hide the
-                  // trailing chevron — no consumer descendant-selector overrides required.
-                  "w-[length:var(--control-height)] justify-center ps-0 pe-0 [&_[data-slot=select-chevron]]:hidden"
-                ) : cn("w-full", TRIGGER_WIDTH[kind]),
+                  // Structurally icon-only: drop the owned width + value spacing and square the box to
+                  // the density-aware --control-height tap target, centring the icon.
+                  "w-[length:var(--control-height)] justify-center ps-0 pe-0"
+                ) : (
+                  // Labeled: sized to a per-kind width from `sm` up; below `sm` it hugs its content and
+                  // caps at the container (`w-auto max-w-full`) instead of the old UNCONDITIONAL
+                  // `w-full` — so a labeled picker dropped into a narrow topbar no longer stretches to
+                  // fill the bar (gh#165). A form field that wants a full-width control passes
+                  // `className="w-full"`, which wins over `w-auto`.
+                  cn("w-auto max-w-full", TRIGGER_WIDTH[kind])
+                ),
                 className
               ),
               "aria-label": t(ARIA_KEY[kind]),

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({ value, total, pageSize, pageSizeOptions, showSizeChanger, showTotal, simple, disabled, className, onValueChange, }: PaginationProp): import("react/jsx-runtime").JSX.Element | null;
+export declare function Pagination({ value, total, pageSize, pageSizeOptions, showSizeChanger, showTotal, hideOnSinglePage, simple, disabled, className, onValueChange, "aria-label": ariaLabel, }: PaginationProp): import("react/jsx-runtime").JSX.Element | null;
 export { PaginationContent, PaginationItem, PaginationLink, PaginationEllipsis, PaginationPrevious, PaginationNext, };