@godxjp/ui 18.0.1 → 18.0.2

package/dist/components/charts/chart-cartesian.js

@@ -165,7 +165,7 @@ function CartesianChart({
       height: resolvedHeight,
       className,
       id,
-      children: hasData ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: chart() }) : /* @__PURE__ */ jsx(EmptyState, { title: emptyMessage ?? t("chart.empty") })
+      children: hasData ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, children: chart() }) : /* @__PURE__ */ jsx(EmptyState, { title: emptyMessage ?? t("chart.empty") })
     }
   );
 }

package/dist/components/charts/pie-chart.js

@@ -43,7 +43,7 @@ function PieChart({
       height: resolvedHeight,
       className,
       id,
-      children: hasData ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RPieChart, { children: [
+      children: hasData ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, children: /* @__PURE__ */ jsxs(RPieChart, { children: [
         /* @__PURE__ */ jsx(
           Pie,
           {

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

@@ -640,23 +640,31 @@ function NumberedPagination({
       justify: "between",
       gap: "md",
       wrap: true,
-      className: cn("ui-data-table-pagination", className),
+      className: cn("ui-data-table-pagination ui-data-table-pagination--numbered", className),
       children: [
-        /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "center", gap: "sm", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("dataGrid.rowsPerPage") }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "center", gap: "sm", className: "ui-data-table-page-size", children: [
+          /* @__PURE__ */ jsx("span", { className: "ui-data-table-page-size-label text-muted-foreground text-sm", children: t("dataGrid.rowsPerPage") }),
           /* @__PURE__ */ jsxs(
             Select,
             {
               value: String(pageSize),
               onValueChange: (v) => table.setPageSize(Number(v)),
               children: [
-                /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", "aria-label": t("dataGrid.rowsPerPage"), className: "tabular-nums", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(
+                  SelectTrigger,
+                  {
+                    size: "sm",
+                    "aria-label": t("dataGrid.rowsPerPage"),
+                    className: "ui-data-table-page-size-trigger w-auto shrink-0 tabular-nums",
+                    children: /* @__PURE__ */ jsx(SelectValue, {})
+                  }
+                ),
                 /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((n) => /* @__PURE__ */ jsx(SelectItem, { value: String(n), className: "tabular-nums", children: n }, n)) })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "center", gap: "sm", children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "center", gap: "sm", className: "ui-data-table-page-nav", children: [
           /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm tabular-nums", children: t("dataGrid.pageOf", { page: pageIndex + 1, total: Math.max(1, pageCount) }) }),
           /* @__PURE__ */ jsx(
             Button,

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

@@ -1,3 +1,3 @@
 import type { CalendarProp } from "../../props/components/data-entry.prop.js";
 export type { CalendarProp, CalendarProp as CalendarProps, } from "../../props/components/data-entry.prop.js";
-export declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProp): import("react/jsx-runtime").JSX.Element;
+export declare function Calendar({ className, classNames, showOutsideDays, "aria-label": ariaLabel, labels, ...props }: CalendarProp): import("react/jsx-runtime").JSX.Element;

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

@@ -9,6 +9,8 @@ function Calendar({
   className,
   classNames,
   showOutsideDays = true,
+  "aria-label": ariaLabel,
+  labels,
   ...props
 }) {
   const rangeDefaults = props.mode === "range" ? { resetOnSelect: props.resetOnSelect ?? true } : null;
@@ -16,6 +18,11 @@ function Calendar({
     DayPicker,
     {
       showOutsideDays,
+      "aria-label": ariaLabel,
+      labels: {
+        ...labels,
+        labelNav: labels?.labelNav ?? (() => `${ariaLabel ?? "Calendar"} navigation`)
+      },
       className: cn("relative w-fit p-3", className),
       classNames: {
         months: cn("flex flex-col gap-4 sm:flex-row", classNames?.months),

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

@@ -373,13 +373,20 @@ function SearchSelect({
                     ]
                   }
                 ),
-                renderLoadMore && hasMore ? /* @__PURE__ */ jsx("div", { className: "border-border shrink-0 border-t p-1", children: renderLoadMore({
-                  hasMore,
-                  loading,
-                  loadMore: () => {
-                    if (!loading) void fetchPage(page + 1, debouncedQuery, true);
+                renderLoadMore && hasMore ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "border-border shrink-0 border-t p-1",
+                    onKeyDown: (event) => event.stopPropagation(),
+                    children: renderLoadMore({
+                      hasMore,
+                      loading,
+                      loadMore: () => {
+                        if (!loading) void fetchPage(page + 1, debouncedQuery, true);
+                      }
+                    })
                   }
-                }) }) : null
+                ) : null
               ] })
             }
           )

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

@@ -76,7 +76,7 @@ function TransferPanel({
         className: cn(
           "flex cursor-pointer items-start gap-2 rounded-sm px-2 py-2 text-sm",
           "hover:bg-accent hover:text-accent-foreground",
-          item.disabled && "pointer-events-none opacity-50"
+          item.disabled && "bg-muted/40 text-muted-foreground pointer-events-none"
         ),
         children: [
           /* @__PURE__ */ jsx(

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

@@ -174,39 +174,43 @@ function TreeSelectRoot({
     }
   };
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        id,
-        type: "button",
-        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",
-          controlOpenRingClass,
-          !displayKeys.length && "text-muted-foreground",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: displayKeys.length ? displayLabel : resolvedPlaceholder }),
-          /* @__PURE__ */ jsx("span", { className: "ms-2 flex shrink-0 items-center", children: allowClear && displayKeys.length > 0 && !disabled ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": t("dataEntry.treeSelect.clear"),
-              className: "flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
-              onClick: clearValue,
-              children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
-            }
-          ) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 opacity-50", "aria-hidden": "true" }) })
-        ]
-      }
-    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          id,
+          type: "button",
+          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",
+            allowClear && displayKeys.length > 0 && !disabled && "pe-10",
+            controlOpenRingClass,
+            !displayKeys.length && "text-muted-foreground",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: displayKeys.length ? displayLabel : resolvedPlaceholder }),
+            /* @__PURE__ */ jsx("span", { className: "ms-2 flex shrink-0 items-center", children: !(allowClear && displayKeys.length > 0 && !disabled) && /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 opacity-50", "aria-hidden": "true" }) })
+          ]
+        }
+      ) }),
+      allowClear && displayKeys.length > 0 && !disabled && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": t("dataEntry.treeSelect.clear"),
+          className: "absolute end-3 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+          onClick: clearValue,
+          children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: [
       showSearch && /* @__PURE__ */ jsx(Command, { shouldFilter: false, children: /* @__PURE__ */ jsx(
         CommandInput,

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

@@ -319,7 +319,7 @@ function Upload({
           "aria-label": t("dataEntry.upload.avatarLabel"),
           children: [
             !showPlaceholder && item?.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground flex size-full items-center justify-center", children: /* @__PURE__ */ jsx(Camera, { className: controlIconClass, "aria-hidden": "true" }) }),
-            !disabled && /* @__PURE__ */ jsx("span", { className: "text-2xs absolute inset-x-0 bottom-0 bg-black/50 py-1 text-center text-white", children: t("dataEntry.upload.change") })
+            !disabled && /* @__PURE__ */ jsx("span", { className: "text-2xs absolute inset-x-0 bottom-0 bg-black/70 py-1 text-center text-white", children: t("dataEntry.upload.change") })
           ]
         }
       ),

package/dist/components/feedback/dialog.js

@@ -37,6 +37,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef(({ className, children, showClose, showCloseButton: showCloseButtonProp, ...props }, ref) => {
+  const { t } = useTranslation();
   const showCloseButton = showCloseButtonProp ?? showClose ?? true;
   return /* @__PURE__ */ jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
@@ -59,7 +60,7 @@ const DialogContent = React.forwardRef(({ className, children, showClose, showCl
               className: "ring-offset-background focus:ring-ring transition-opacity focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
               children: [
                 /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
               ]
             }
           ) : null
@@ -138,6 +139,7 @@ const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /*
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 const AlertDialogContent = React.forwardRef(({ className, children, showClose, showCloseButton: showCloseButtonProp, ...props }, ref) => {
+  const { t } = useTranslation();
   const showCloseButton = showCloseButtonProp ?? showClose ?? false;
   return /* @__PURE__ */ jsxs(
     AlertDialogPrimitive.Content,
@@ -156,7 +158,7 @@ const AlertDialogContent = React.forwardRef(({ className, children, showClose, s
           {
             type: "button",
             className: "ring-offset-background focus:ring-ring transition-opacity focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
-            "aria-label": "Close",
+            "aria-label": t("feedback.alert.dismiss"),
             children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
           }
         ) }) : null

package/dist/components/feedback/sheet.js

@@ -6,6 +6,7 @@ import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { overlayHeaderToneClass } from "./overlay-header-tone.js";
+import { useTranslation } from "../../i18n/use-translation.js";
 const toCssLength = (v) => typeof v === "number" ? `${v}px` : v;
 function Sheet(props) {
   return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "sheet", ...props });
@@ -55,6 +56,7 @@ const sheetVariants = cva(
 );
 const SheetContent = React.forwardRef(
   ({ side = "right", className, children, showCloseButton = true, width, style, ...props }, ref) => {
+    const { t } = useTranslation();
     const horizontal = side === "left" || side === "right";
     const widthSet = width != null && horizontal;
     const mergedStyle = widthSet ? { ...style, ["--sheet-width"]: toCssLength(width) } : style;
@@ -82,7 +84,7 @@ const SheetContent = React.forwardRef(
                 className: "ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
                 children: [
                   /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" }),
-                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
                 ]
               }
             ) : null
@@ -175,7 +177,7 @@ const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @
   {
     ref,
     "data-slot": "sheet-description",
-    className: cn("text-muted-foreground text-sm", className),
+    className: cn("text-foreground/80 text-sm", className),
     ...props
   }
 ));

package/dist/components/general/button.js

@@ -33,7 +33,7 @@ const buttonVariants = cva("ui-button", {
       sm: "ui-button--sm gap-1.5 has-[>svg]:px-2.5",
       lg: "ui-button--lg has-[>svg]:px-4",
       icon: "ui-button--icon",
-      "icon-xs": "size-[calc(var(--control-height)-0.75rem)] [&_svg:not([class*='size-'])]:size-3",
+      "icon-xs": "ui-button--icon-xs [&_svg]:size-3 [&_svg]:shrink-0",
       "icon-sm": "ui-button--icon-sm",
       "icon-lg": "ui-button--icon-lg"
     },
@@ -105,7 +105,7 @@ const Button = React.forwardRef(
           "disabled:pointer-events-none disabled:opacity-50",
           "data-[loading]:pointer-events-none",
           "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0",
           buttonVariants({ variant, size, shape, className })
         ),
         ref,

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

@@ -8,6 +8,6 @@ export type BreadcrumbProps = {
      * 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;
+    ariaLabel?: string;
 };
-export declare function Breadcrumb({ items, linkComponent: LinkComponent, "aria-label": ariaLabel, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export declare function Breadcrumb({ items, linkComponent: LinkComponent, ariaLabel, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/breadcrumb.js

@@ -5,7 +5,7 @@ import { useTranslation } from "../../i18n/use-translation.js";
 function Breadcrumb({
   items,
   linkComponent: LinkComponent = "a",
-  "aria-label": ariaLabel
+  ariaLabel
 }) {
   const { t } = useTranslation();
   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) => {

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

@@ -39,6 +39,7 @@ function PageContainerRoot({
   extra,
   footer,
   breadcrumb,
+  breadcrumbLabel,
   breadcrumbAriaLabel,
   linkComponent: LinkComponent = "a",
   density,
@@ -72,7 +73,7 @@ function PageContainerRoot({
           breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx(
             "nav",
             {
-              "aria-label": breadcrumbAriaLabel ?? t("navigation.breadcrumb.ariaLabel"),
+              "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;

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, "aria-label": ariaLabel, }: SidebarProp): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ ariaLabel: ariaLabelCamel, 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

@@ -209,6 +209,7 @@ function CollapsedRow({ item, activeId, onSelect }) {
   ] });
 }
 function Sidebar({
+  ariaLabel: ariaLabelCamel,
   activeId,
   onSelect,
   sections,
@@ -256,7 +257,7 @@ function Sidebar({
         meta
       ] });
     })() : null,
-    /* @__PURE__ */ jsx("nav", { className: "sb-nav-scroll", "aria-label": ariaLabel ?? t("layout.sidebar.ariaLabel"), children: children ?? resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("nav", { className: "sb-nav-scroll", "aria-label": ariaLabel ?? ariaLabelCamel ?? t("layout.sidebar.ariaLabel"), children: children ?? resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsx(
       SidebarSection,
       {
         label: section.label,

package/dist/components/layout/split-pane.d.ts

@@ -3,5 +3,7 @@ export type SplitPaneProps = {
     children: ReactNode;
     aside: ReactNode;
     asideWidth?: "sm" | "md";
+    /** Accessible complementary landmark name; required when multiple panes share a document. */
+    asideLabel?: string;
 };
-export declare function SplitPane({ children, aside, asideWidth }: SplitPaneProps): import("react/jsx-runtime").JSX.Element;
+export declare function SplitPane({ children, aside, asideWidth, asideLabel }: SplitPaneProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-function SplitPane({ children, aside, asideWidth = "md" }) {
+function SplitPane({ children, aside, asideWidth = "md", asideLabel }) {
   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 })
+    /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", "aria-label": asideLabel, children: aside })
   ] }) });
 }
 export {

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

package/dist/components/navigation/pagination.js

@@ -82,6 +82,7 @@ const PaginationNext = React.forwardRef(
 );
 PaginationNext.displayName = "PaginationNext";
 function Pagination({
+  ariaLabel,
   value = 1,
   total = 0,
   pageSize = 10,
@@ -92,8 +93,7 @@ function Pagination({
   simple,
   disabled,
   className,
-  onValueChange,
-  "aria-label": ariaLabel
+  onValueChange
 }) {
   const { t } = useTranslation();
   const navLabel = ariaLabel ?? t("navigation.pagination.ariaLabel");

package/dist/components/navigation/tabs.js

@@ -102,7 +102,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ref,
     "data-slot": "tabs-trigger",
     className: cn(
-      "text-foreground/60 ring-offset-background hover:text-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-ring/50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:ring-primary/25 after:bg-foreground relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:ring-1 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+      "text-muted-foreground ring-offset-background hover:text-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-ring/50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:ring-primary/25 after:bg-foreground relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:ring-1 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
       className
     ),
     ...props

package/dist/components/query/infinite-query-state.d.ts

@@ -10,4 +10,4 @@ export declare function flattenItemPages<TItem, TPage extends {
  * `useInfiniteQuery` lifecycle widget — flatten pages, load-more footer.
  * Cursor / activity feeds where user accumulates pages (vs DataTable cursor buttons).
  */
-export declare function InfiniteQueryState<TPage, TFlat>({ query, skeleton, empty, flatten, isEmpty, errorRenderer, showRetry, onRetry, loadingMore, loadMore, showLoadMore, children, }: InfiniteQueryStateProp<TPage, TFlat>): import("react/jsx-runtime").JSX.Element;
+export declare function InfiniteQueryState<TPage, TFlat>({ query, skeleton, empty, flatten, isEmpty, errorRenderer, showRetry, onRetry, onAuthError, loadingMore, loadMore, showLoadMore, children, }: InfiniteQueryStateProp<TPage, TFlat>): import("react/jsx-runtime").JSX.Element;

package/dist/components/query/infinite-query-state.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { AlertQueryError } from "../feedback/alert.js";
 import { Button } from "../general/button.js";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { classifyQueryError } from "../../lib/query-error.js";
 function flattenItemPages(data) {
   if (!data) return [];
   return data.pages.flatMap((page) => page.items);
@@ -19,8 +20,9 @@ function InfiniteQueryState({
   flatten,
   isEmpty = defaultIsEmptyFlat,
   errorRenderer,
-  showRetry = true,
+  showRetry = false,
   onRetry,
+  onAuthError,
   loadingMore,
   loadMore,
   showLoadMore = true,
@@ -38,7 +40,17 @@ function InfiniteQueryState({
   if (query.isError) {
     if (query.isFetching && !query.isFetchingNextPage) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
     if (errorRenderer) return /* @__PURE__ */ jsx(Fragment, { children: errorRenderer(query.error, retry) });
-    return /* @__PURE__ */ jsx(AlertQueryError, { error: query.error, onRetry: showRetry ? retry : void 0 });
+    const info = classifyQueryError(query.error);
+    const canRetry = (info.category === "transient" || info.category === "unknown") && (info.retryable || showRetry || Boolean(onRetry));
+    return /* @__PURE__ */ jsx(
+      AlertQueryError,
+      {
+        error: query.error,
+        category: info.category,
+        onRetry: canRetry ? retry : void 0,
+        onAuthAction: info.category === "auth" ? onAuthError : void 0
+      }
+    );
   }
   const data = query.data;
   if (!data) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });

package/dist/props/components/data-entry.prop.d.ts

@@ -449,6 +449,12 @@ export type CascaderProp = FieldA11yProps & {
     expandTrigger?: "click" | "hover";
     fieldNames?: TreeFieldNamesProp;
     allowClear?: boolean;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-errormessage"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+    "aria-required"?: boolean | "true" | "false";
 };
 export type ShowCheckedStrategyProp = "SHOW_CHILD" | "SHOW_PARENT" | "SHOW_ALL";
 /** @see TreeSelect — tree in Popover (cmdk search + expand/collapse). */
@@ -469,6 +475,12 @@ export type TreeSelectProp = FieldA11yProps & {
     className?: ClassNameProp;
     id?: IdProp;
     fieldNames?: TreeFieldNamesProp;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-errormessage"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+    "aria-required"?: boolean | "true" | "false";
 };
 /** @see TransferItem */
 export type TransferItemProp = {

package/dist/props/components/layout.prop.d.ts

@@ -15,6 +15,8 @@ export type PageContainerProp = {
      * renders on the same page/view — two `<nav>` landmarks sharing one name/role fail axe's
      * `landmark-unique` (WCAG 2.4.1 / 1.3.1).
      */
+    breadcrumbLabel?: string;
+    /** Kebab/DOM-style alias of `breadcrumbLabel` (same landmark-unique override). */
     breadcrumbAriaLabel?: string;
     linkComponent?: React.ElementType;
     density?: PageDensityProp;
@@ -138,6 +140,8 @@ export type SidebarSectionProp = {
 };
 /** @see Sidebar */
 export type SidebarProp = {
+    /** Accessible navigation landmark name; make it unique when multiple sidebars share a document. */
+    ariaLabel?: string;
     activeId: string;
     onSelect?: (id: string) => void;
     sections?: SidebarSectionProp[];

package/dist/props/components/navigation.prop.d.ts

@@ -16,6 +16,14 @@ export type ToolbarGroupProp = {
 };
 /** @see Pagination — offset/page-based (distinct from DataTable cursor pagination). */
 export type PaginationProp = {
+    /**
+     * Override the `<nav>` landmark's accessible name. Defaults to a localized "Pagination".
+     * Multiple Pagination instances on one page/view (e.g. two independent result lists) need a
+     * DISTINCT name each — two `<nav>` landmarks sharing one name/role fail axe's `landmark-unique`
+     * (WCAG 2.4.1 / 1.3.1). Pass something that names what is being paged, e.g. `"注文一覧の
+     * ページネーション"` vs `"請求書一覧のページネーション"`.
+     */
+    ariaLabel?: string;
     value?: number;
     total?: number;
     pageSize?: number;
@@ -34,14 +42,6 @@ export type PaginationProp = {
     disabled?: DisabledProp;
     className?: ClassNameProp;
     onValueChange?: (page: number, pageSize: number) => void;
-    /**
-     * Override the `<nav>` landmark's accessible name. Defaults to a localized "Pagination".
-     * Multiple Pagination instances on one page/view (e.g. two independent result lists) need a
-     * DISTINCT name each — two `<nav>` landmarks sharing one name/role fail axe's `landmark-unique`
-     * (WCAG 2.4.1 / 1.3.1). Pass something that names what is being paged, e.g. `"注文一覧の
-     * ページネーション"` vs `"請求書一覧のページネーション"`.
-     */
-    "aria-label"?: string;
 };
 export type StepStatusProp = "wait" | "process" | "finish" | "error";
 /** @see StepItem */

package/dist/props/components/query.prop.d.ts

@@ -57,6 +57,8 @@ export type InfiniteQueryStateProp<TPage, TFlat> = {
     errorRenderer?: (error: unknown, retry: () => void) => React.ReactNode;
     showRetry?: boolean;
     onRetry?: HandlerProp;
+    /** Recovery for authentication errors (401 / expired token), shown instead of Retry. */
+    onAuthError?: HandlerProp;
     loadingMore?: React.ReactNode;
     /** Custom load-more footer; `false` hides footer entirely. */
     loadMore?: React.ReactNode | false;

package/dist/styles/chart-layout.css

@@ -8,6 +8,7 @@
   gap: var(--space-stack-sm);
   margin: 0;
   inline-size: 100%;
+  min-inline-size: 0;
 }
 
 .ui-chart-title {
@@ -18,6 +19,7 @@
 
 .ui-chart-canvas {
   inline-size: 100%;
+  min-inline-size: 0;
 }
 
 /* recharts legend/axis text inherits the design typography + muted tone. */

package/dist/styles/control.css

@@ -202,6 +202,21 @@
    * icon button can sit flush beside a labelled one (split buttons, toolbars). Derive them from
    * the density tokens — never from a hand-written offset off the base --control-height, which
    * is how icon-sm drifted a step down to the xs height (issue #133). */
+  .ui-button--icon-xs {
+    width: var(--control-height-xs);
+    height: var(--control-height-xs);
+    padding: 0;
+  }
+
+  /* Rule #24: compact visual tiers never shrink the actual coarse-pointer hit target below 44px.
+   * The glyph remains 12px; only the interactive square expands. */
+  @media (pointer: coarse) {
+    .ui-button--icon-xs {
+      width: var(--control-height-default);
+      height: var(--control-height-default);
+    }
+  }
+
   .ui-button--icon-sm {
     width: var(--control-height-sm);
     height: var(--control-height-sm);

package/dist/styles/layout.css

@@ -403,13 +403,38 @@
   }
 
   .ui-page-title {
-    font-size: var(--heading-h1);
+    font-size: var(--page-title-font-size);
     font-weight: var(--font-weight-medium);
     letter-spacing: var(--letter-spacing-tight);
     line-height: var(--line-height-tight);
     overflow-wrap: anywhere;
   }
 
+  /* Compact viewports use a responsive type step, not compact density: body/control text and
+   * touch targets remain readable while page chrome stops competing with primary actions. A
+   * single Flex action group must wrap even when the consumer omitted `wrap`, because clipping
+   * header actions makes functionality unreachable. */
+  @media (max-width: 639px) {
+    .ui-page-container {
+      --space-page-active-x: var(--space-page-compact-x);
+      --space-page-active-y: var(--space-page-compact-y);
+      --space-section-active: var(--space-section-compact);
+    }
+
+    .ui-page-title {
+      font-size: var(--page-title-font-size-compact);
+    }
+
+    .ui-page-header .ui-page-subtitle {
+      font-size: var(--page-subtitle-font-size-compact);
+    }
+
+    .ui-page-header-extra > .ui-flex[data-direction="row"] {
+      flex-wrap: wrap;
+      max-width: 100%;
+    }
+  }
+
   @media (min-width: 640px) {
     .ui-page-header-row {
       flex-direction: row;
@@ -426,7 +451,7 @@
   }
 
   .ui-page-subtitle {
-    font-size: var(--font-size-base);
+    font-size: var(--page-subtitle-font-size);
     color: hsl(var(--muted-foreground));
     margin-top: var(--space-1);
   }

package/dist/styles/navigation-layout.css

@@ -1,4 +1,11 @@
 @layer components {
+  [data-slot="tabs-list"] {
+    max-inline-size: var(--tabs-list-max-inline-size);
+    overflow-x: var(--tabs-list-overflow);
+    overscroll-behavior-inline: contain;
+    scrollbar-width: thin;
+  }
+
   .ui-context-menu-content {
     z-index: 50;
     min-width: 10rem;

package/dist/styles/table-layout.css

@@ -82,6 +82,31 @@
     padding-top: var(--space-stack-sm);
   }
 
+  /* Numbered footer may wrap only between its two semantic groups. The supported JA/EN/VI locale
+   * label and select stay fully visible together (gh#184). */
+  .ui-data-table-pagination--numbered {
+    flex-wrap: wrap;
+    min-width: 0;
+  }
+
+  .ui-data-table-page-size {
+    flex: 0 0 auto;
+    flex-wrap: nowrap;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .ui-data-table-page-size-label {
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+
+  .ui-data-table-page-size-trigger,
+  .ui-data-table-page-nav {
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+
   .ui-data-table-root {
     display: flex;
     flex-direction: column;

package/dist/tokens/components/navigation.css

@@ -12,6 +12,8 @@
   --filter-picker-width-md: 14rem;
   --breadcrumb-font-size: var(--font-size-xs);
   --menubar-shortcut-font-size: var(--font-size-xs);
+  --tabs-list-max-inline-size: 100%;
+  --tabs-list-overflow: auto;
 
   /* Menu item hover/highlight tint — `initial` so the --accent default re-resolves at the call site
    * under a scoped theme (a :root binding to a role var freezes at :root).

package/dist/tokens/semantic/layout.css

@@ -21,6 +21,9 @@
   --space-page-active-x: var(--space-page-x);
   --space-page-active-y: var(--space-page-y);
   --space-section-active: var(--space-section);
+  --space-page-compact-x: var(--space-4); /* 16px mobile page gutter */
+  --space-page-compact-y: var(--space-4);
+  --space-section-compact: var(--space-4);
 
   /* Modal scrim — the single backdrop colour shared by EVERY overlay (Dialog, AlertDialog, Sheet,
    * Drawer). Themeable (rule #44) so a service tints the wash to its brand once, e.g. a navy
@@ -38,6 +41,13 @@
    * old fixed 16px pad that left 24 above vs 32 below. */
   --page-header-pad-bottom: calc(var(--space-page-active-y) - var(--space-section-active));
 
+  /* Responsive page typography is independent from density. Density changes information spacing;
+   * these tokens change only page chrome so mobile keeps readable body text and touch targets. */
+  --page-title-font-size: var(--heading-h1);
+  --page-title-font-size-compact: var(--heading-h2);
+  --page-subtitle-font-size: var(--font-size-base);
+  --page-subtitle-font-size-compact: var(--font-size-sm);
+
   /* Section "chrome" padding — the SHARED inset for header / body / footer of every overlay-ish
    * surface (Dialog · Sheet · Drawer · Card). One global knob: a service sets these once instead of
    * per-component. Vertical is tightened (16 vs the old 24) and density-aware (see density.css);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.0.1",
-  "godxUiMcp": "18.0.0",
+  "version": "18.0.2",
+  "godxUiMcp": "18.0.1",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,
@@ -276,8 +276,24 @@
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "check:example-imports": "node scripts/check-example-imports.mjs",
+    "check:frame-coverage": "node scripts/frame-coverage.mjs",
+    "check:screen-reader-evidence": "node scripts/check-screen-reader-evidence.mjs",
+    "check:data-entry-frame-runtime": "node scripts/check-data-entry-frame-runtime.mjs",
+    "check:data-entry-owner-source": "node scripts/check-data-entry-owner-source.mjs",
+    "check:data-entry-touch-aria": "node scripts/check-data-entry-touch-aria.mjs",
+    "check:layout-nav-frames": "node scripts/check-layout-nav-frames.mjs",
+    "check:provider-feedback-query-runtime": "for frames in navigation-app-setting-picker,feedback-dialog,feedback-sheet,feedback-alert-dialog feedback-tooltip,feedback-toast,feedback-skeleton,query-data-state query-infinite-query-state,query-mutation-feedback,query-prefetch-link; do FRAMES=$frames node scripts/check-provider-feedback-query-runtime.mjs || exit 1; done",
+    "check:layout-nav-closure": "for frames in layout-flex,layout-app-shell,layout-aspect-ratio,layout-auth-shell layout-page-container,layout-resizable-panel,layout-separator,layout-sidebar layout-split-pane,layout-topbar,navigation-breadcrumb,navigation-app-setting-picker navigation-context-menu,navigation-dropdown-menu,navigation-menubar,navigation-navigation-menu navigation-steps,navigation-toolbar,navigation-tabs,navigation-pagination; do FRAMES=$frames node scripts/check-layout-nav-closure.mjs || exit 1; done",
+    "check:display-runtime-evidence": "node scripts/check-display-runtime-evidence.mjs",
+    "check:data-table-pagination-wrap": "node scripts/check-data-table-pagination-wrap.mjs",
+    "check:button-icon-xs": "node scripts/check-button-icon-xs.mjs",
+    "check:frame-contracts": "pnpm check:frame-coverage && pnpm check:screen-reader-evidence && pnpm check:data-entry-owner-source && pnpm check:display-runtime-evidence",
+    "check:final-touch-rtl": "node scripts/check-final-touch-rtl.mjs",
+    "check:frame-runtime": "pnpm check:data-entry-frame-runtime && pnpm check:data-entry-touch-aria && pnpm check:layout-nav-frames && pnpm check:provider-feedback-query-runtime && pnpm check:layout-nav-closure && pnpm check:final-touch-rtl && pnpm check:data-table-pagination-wrap && pnpm check:button-icon-xs",
+    "pretest": "pnpm check:frame-coverage",
     "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
-    "verify:release": "pnpm build && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm check:frame-coverage && pnpm check:frame-axe && pnpm test",
+    "verify:static": "pnpm build && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
+    "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage && pnpm check:frame-axe",
     "check:mcp-lockstep": "node scripts/check-release-lockstep.mjs",
     "check:mcp-pattern-imports": "node scripts/check-mcp-pattern-imports.mjs",
     "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
@@ -307,7 +323,6 @@
     "check:visual-audit": "node scripts/visual-audit-smoke.mjs",
     "check:frame-axe": "node scripts/check-frame-axe.mjs",
     "check:frame-geometry": "node scripts/frame-geometry.mjs",
-    "check:frame-coverage": "node scripts/frame-coverage.mjs",
     "postinstall": "node scripts/postinstall.mjs",
     "init-agent": "node scripts/init-agent-kit.mjs",
     "check:use-client": "node scripts/check-use-client.mjs"