@godxjp/ui 18.15.4 → 19.1.0

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

@@ -29,7 +29,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
     "data-slot": "dropdown-menu-content",
     sideOffset,
     className: cn(
-      "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-32 origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+      "ui-dropdown-menu-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 origin-[var(--radix-dropdown-menu-content-transform-origin)]",
       className
     ),
     ...props
@@ -44,7 +44,7 @@ const DropdownMenuItem = React.forwardRef(({ className, inset, variant = "defaul
     "data-inset": inset,
     "data-variant": variant,
     className: cn(
-      "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset=true]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      "ui-dropdown-menu-item [&_svg:not([class*='text-'])]:text-muted-foreground",
       className
     ),
     ...props
@@ -57,7 +57,7 @@ const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref)
     ref,
     "data-slot": "dropdown-menu-label",
     "data-inset": inset,
-    className: cn("px-2 py-1.5 text-sm font-medium data-[inset=true]:ps-8", className),
+    className: cn("ui-dropdown-menu-label", className),
     ...props
   }
 ));
@@ -67,7 +67,7 @@ const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     "data-slot": "dropdown-menu-separator",
-    className: cn("bg-border -mx-1 my-1 h-px", className),
+    className: cn("ui-dropdown-menu-separator", className),
     ...props
   }
 ));
@@ -77,14 +77,11 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checke
   {
     ref,
     "data-slot": "dropdown-menu-checkbox-item",
-    className: cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-      className
-    ),
+    className: cn("ui-dropdown-menu-checkbox-item", className),
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute start-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4", "aria-hidden": "true" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "ui-dropdown-menu-indicator-slot", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "ui-dropdown-menu-check", "aria-hidden": "true" }) }) }),
       children
     ]
   }
@@ -95,10 +92,7 @@ const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props
   {
     ref,
     "data-slot": "dropdown-menu-radio-item",
-    className: cn(
-      "focus:bg-accent focus:text-accent-foreground data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary relative flex cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:font-medium [&_svg]:pointer-events-none [&_svg]:shrink-0",
-      className
-    ),
+    className: cn("ui-dropdown-menu-radio-item", className),
     ...props,
     children
   }
@@ -111,13 +105,13 @@ const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, .
     "data-slot": "dropdown-menu-sub-trigger",
     "data-inset": inset,
     className: cn(
-      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[inset=true]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      "ui-dropdown-menu-sub-trigger [&_svg:not([class*='text-'])]:text-muted-foreground",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ms-auto size-4", "aria-hidden": "true" })
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ui-dropdown-menu-sub-trigger-icon", "aria-hidden": "true" })
     ]
   }
 ));
@@ -128,7 +122,7 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
     ref,
     "data-slot": "dropdown-menu-sub-content",
     className: cn(
-      "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-32 origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-hidden rounded-md border p-1 shadow-lg",
+      "ui-dropdown-menu-sub-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 origin-[var(--radix-dropdown-menu-content-transform-origin)]",
       className
     ),
     ...props

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

@@ -1,12 +1,9 @@
 import * as React from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 export declare const Menubar: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>>;
-export declare const MenubarMenu: {
-    (props: MenubarPrimitive.MenubarMenuProps & {
-        __scopeMenubar?: import("@radix-ui/react-context").Scope;
-    }): React.JSX.Element;
-    displayName: string;
-};
+export declare const MenubarMenu: (props: MenubarPrimitive.MenubarMenuProps & {
+    __scopeMenubar?: import("@radix-ui/react-context").Scope;
+}) => React.JSX.Element;
 export declare function MenubarTrigger(props: React.ComponentProps<typeof MenubarPrimitive.Trigger>): React.JSX.Element;
 export declare const MenubarContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const MenubarItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {

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

@@ -1,2 +1,15 @@
-/** Build visible page numbers with ellipsis — Ant Design pagination style. */
-export declare function buildPageRange(current: number, totalPages: number, siblingCount?: number): (number | "ellipsis")[];
+/**
+ * Build visible page numbers with ellipsis — Ant Design / MUI pagination style.
+ *
+ * The item count is CONSTANT wherever the current page sits. The earlier version
+ * derived the window straight from `current ± siblingCount` and let it collapse
+ * against the edges, so a 1,060-page list opened as `1 2 … 1060` — four controls
+ * with a wide empty gap, and both a bad target size and a bad sense of scale
+ * (reported 2026-08-24). Ant Design and MUI both solve this by CLAMPING the
+ * window instead of shrinking it: near an edge the window slides inward so the
+ * strip keeps its full width. Same list now opens as `1 2 3 4 5 … 1060`.
+ *
+ * Slots = `boundaryCount * 2` edges + `siblingCount * 2 + 1` around current + 2
+ * ellipsis positions. With the defaults that is 7 controls.
+ */
+export declare function buildPageRange(current: number, totalPages: number, siblingCount?: number, boundaryCount?: number): (number | "ellipsis")[];

package/dist/components/navigation/pagination-utils.js

@@ -1,24 +1,30 @@
-function buildPageRange(current, totalPages, siblingCount = 1) {
-  if (totalPages <= 1) return totalPages === 1 ? [1] : [];
-  const totalNumbers = siblingCount * 2 + 5;
-  if (totalPages <= totalNumbers) {
-    return Array.from({ length: totalPages }, (_, i) => i + 1);
-  }
-  const left = Math.max(current - siblingCount, 1);
-  const right = Math.min(current + siblingCount, totalPages);
-  const showLeftEllipsis = left > 2;
-  const showRightEllipsis = right < totalPages - 1;
-  const range = [];
-  range.push(1);
-  if (showLeftEllipsis) range.push("ellipsis");
-  else for (let i = 2; i < left; i++) range.push(i);
-  for (let i = left; i <= right; i++) {
-    if (i !== 1 && i !== totalPages) range.push(i);
-  }
-  if (showRightEllipsis) range.push("ellipsis");
-  else for (let i = right + 1; i < totalPages; i++) range.push(i);
-  if (totalPages > 1) range.push(totalPages);
-  return range;
+function range(start, end) {
+  return end < start ? [] : Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+function buildPageRange(current, totalPages, siblingCount = 1, boundaryCount = 1) {
+  if (totalPages <= 0) return [];
+  if (totalPages === 1) return [1];
+  const totalNumbers = boundaryCount * 2 + siblingCount * 2 + 3;
+  if (totalPages <= totalNumbers) return range(1, totalPages);
+  const startPages = range(1, Math.min(boundaryCount, totalPages));
+  const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+  const siblingsStart = Math.max(
+    Math.min(current - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
+  );
+  const siblingsEnd = Math.min(
+    Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages.length > 0 ? endPages[0] - 2 : totalPages - 1
+  );
+  return [
+    ...startPages,
+    // An ellipsis that would hide exactly ONE page is pointless — spell that page out
+    // instead (Ant/MUI do the same), which is also what keeps the count constant.
+    ...siblingsStart > boundaryCount + 2 ? ["ellipsis"] : boundaryCount + 1 < totalPages - boundaryCount ? [boundaryCount + 1] : [],
+    ...range(siblingsStart, siblingsEnd),
+    ...siblingsEnd < totalPages - boundaryCount - 1 ? ["ellipsis"] : totalPages - boundaryCount > boundaryCount ? [totalPages - boundaryCount] : [],
+    ...endPages
+  ];
 }
 export {
   buildPageRange

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

@@ -8,10 +8,10 @@ declare const PaginationLink: React.ForwardRefExoticComponent<Omit<Omit<React.De
     disabled?: boolean;
     href?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
-declare const PaginationEllipsis: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
-    displayName: string;
-};
+declare function PaginationEllipsis({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+declare namespace PaginationEllipsis {
+    var displayName: string;
+}
 declare const PaginationPrevious: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "type"> & {
     isActive?: boolean;
     disabled?: boolean;

package/dist/components/navigation/pagination.js

@@ -142,7 +142,7 @@ function Pagination({
           disabled: Boolean(disabled) || safeCurrent <= 1,
           "aria-label": t("navigation.pagination.prev"),
           onClick: () => go(safeCurrent - 1),
-          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
         }
       ),
       /* @__PURE__ */ jsxs("span", { className: "ui-pagination-count", children: [
@@ -159,7 +159,7 @@ function Pagination({
           disabled: Boolean(disabled) || safeCurrent >= totalPages,
           "aria-label": t("navigation.pagination.next"),
           onClick: () => go(safeCurrent + 1),
-          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
         }
       )
     ] });

package/dist/components/navigation/steps.js

@@ -18,36 +18,18 @@ function StepIcon({
   if (icon)
     return /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center", controlIconClass), children: icon });
   if (type === "dot") {
-    return /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center", controlIconClass), children: /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          "block size-2.5 rounded-full",
-          status === "finish" && "bg-primary",
-          status === "process" && "bg-primary ring-primary/20 ring-4",
-          status === "error" && "bg-destructive",
-          status === "wait" && "bg-muted-foreground/30"
-        )
-      }
-    ) });
+    return /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center", controlIconClass), children: /* @__PURE__ */ jsx("span", { className: "ui-steps-dot", "data-status": status }) });
   }
   return /* @__PURE__ */ jsxs(
     "span",
     {
-      className: cn(
-        "flex items-center justify-center",
-        controlIconClass,
-        "rounded-full border-2 text-sm font-medium",
-        status === "finish" && "border-primary bg-primary text-primary-foreground",
-        status === "process" && "border-primary text-primary",
-        status === "error" && "border-destructive bg-destructive text-destructive-foreground",
-        status === "wait" && "border-muted-foreground/30 text-muted-foreground"
-      ),
+      "data-status": status,
+      className: cn("flex items-center justify-center", controlIconClass, "ui-steps-marker"),
       children: [
-        status === "finish" && /* @__PURE__ */ jsx(Check, { className: "size-4", "aria-hidden": "true" }),
-        status === "process" && /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }),
-        status === "error" && /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" }),
-        status === "wait" && /* @__PURE__ */ jsx(Circle, { className: "size-3 fill-current", "aria-hidden": "true" })
+        status === "finish" && /* @__PURE__ */ jsx(Check, { className: "ui-steps-marker-icon", "aria-hidden": "true" }),
+        status === "process" && /* @__PURE__ */ jsx(Loader2, { className: "ui-steps-marker-icon animate-spin", "aria-hidden": "true" }),
+        status === "error" && /* @__PURE__ */ jsx(X, { className: "ui-steps-marker-icon", "aria-hidden": "true" }),
+        status === "wait" && /* @__PURE__ */ jsx(Circle, { className: "ui-steps-wait-icon", "aria-hidden": "true" })
       ]
     }
   );
@@ -74,11 +56,8 @@ function Steps({
   return /* @__PURE__ */ jsx(
     "ol",
     {
-      className: cn(
-        "flex w-full",
-        inline ? "ui-steps-inline" : isVertical ? "flex-col gap-0" : "flex-row items-start",
-        className
-      ),
+      "data-direction": inline ? void 0 : isVertical ? "vertical" : "horizontal",
+      className: cn("flex w-full", inline ? "ui-steps-inline" : "ui-steps-list", className),
       "aria-label": t("navigation.steps.ariaLabel"),
       children: items.map((item, index) => {
         const absoluteIndex = base + index;
@@ -90,9 +69,10 @@ function Steps({
         const statusLabel = t(
           stepStatus === "finish" ? "navigation.steps.status.finish" : stepStatus === "process" ? "navigation.steps.status.process" : stepStatus === "error" ? "navigation.steps.status.error" : "navigation.steps.status.wait"
         );
+        const stepDirection = inline ? void 0 : isVertical ? "vertical" : "horizontal";
         const stepClassName = cn(
-          "group flex min-w-0",
-          inline ? "ui-steps-inline-control" : isVertical ? "flex-row items-start gap-3" : "flex-col items-center",
+          "group",
+          inline ? "ui-steps-inline-control" : "ui-steps-control",
           clickable ? "cursor-pointer" : "cursor-default"
         );
         const stepInner = inline ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -101,45 +81,28 @@ function Steps({
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: statusLabel })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(StepIcon, { status: stepStatus, icon: item.icon, type }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "min-w-0",
-                isVertical ? "pt-1 text-start" : "mt-2 px-2",
-                titlePlacement === "vertical" && !isVertical && "mt-1"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "font-medium",
-                      compact ? "text-xs" : "text-sm",
-                      stepStatus === "process" && "text-foreground",
-                      stepStatus === "wait" && "text-muted-foreground",
-                      stepStatus === "error" && "text-destructive"
-                    ),
-                    children: item.title
-                  }
-                ),
-                item.subtitle && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs", children: item.subtitle }),
-                description && /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", compact ? "text-xs" : "text-sm"), children: description })
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxs("div", { className: "ui-steps-text", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "ui-steps-title",
+                "data-status": stepStatus,
+                "data-compact": compact ? "" : void 0,
+                children: item.title
+              }
+            ),
+            item.subtitle && /* @__PURE__ */ jsx("div", { className: "ui-steps-subtitle", children: item.subtitle }),
+            description && /* @__PURE__ */ jsx("div", { className: "ui-steps-description", "data-compact": compact ? "" : void 0, children: description })
+          ] })
         ] });
         return /* @__PURE__ */ jsxs(
           "li",
           {
             "aria-current": isCurrent ? "step" : void 0,
-            className: cn(
-              "relative flex min-w-0",
-              !inline && "flex-1",
-              inline ? "ui-steps-inline-item" : isVertical ? "flex-row gap-3 pb-8 last:pb-0" : "flex-col items-center text-center",
-              !isVertical && !inline && index < items.length - 1 && "after:bg-border after:absolute after:top-4 after:h-px",
-              !isVertical && !inline && index < items.length - 1 && "after:left-[calc(50%+1.25rem)] after:w-[calc(100%-2.5rem)]"
-            ),
+            "data-direction": inline ? void 0 : isVertical ? "vertical" : "horizontal",
+            "data-title-placement": titlePlacement,
+            "data-connector": !isVertical && !inline && index < items.length - 1 ? "" : void 0,
+            className: cn(!inline && "flex-1", inline ? "ui-steps-inline-item" : "ui-steps-item"),
             "data-status": stepStatus,
             children: [
               interactive ? /* @__PURE__ */ jsx(
@@ -148,10 +111,11 @@ function Steps({
                   type: "button",
                   disabled: !clickable,
                   onClick: clickable ? () => onValueChange?.(absoluteIndex) : void 0,
+                  "data-direction": stepDirection,
                   className: stepClassName,
                   children: stepInner
                 }
-              ) : /* @__PURE__ */ jsx("span", { className: stepClassName, children: stepInner }),
+              ) : /* @__PURE__ */ jsx("span", { "data-direction": stepDirection, className: stepClassName, children: stepInner }),
               inline && index < items.length - 1 ? /* @__PURE__ */ jsx(
                 SeparatorIcon,
                 {

package/dist/components/navigation/tabs.js

@@ -29,11 +29,15 @@ function Tabs({
     {
       "data-slot": "tabs",
       "data-orientation": orientation,
+      "data-variant": variant,
       orientation,
       value,
       defaultValue: value === void 0 ? resolvedDefault : void 0,
       className: cn(
-        "group/tabs flex min-w-0 gap-2 data-[orientation=horizontal]:flex-col",
+        // Structure only. The shrink floor (`min-inline-size: 0`, gh#175) and the strip↔panel gap
+        // live in src/styles/navigation-layout.css so the gap reads --tabs-root-gap and a service
+        // can retune the tab rhythm without forking this file (#319).
+        "group/tabs flex data-[orientation=horizontal]:flex-col",
         className
       ),
       ...props,
@@ -44,7 +48,10 @@ function Tabs({
             "data-slot": "tabs-list",
             variant: variant === "line" ? "line" : "default",
             className: cn(
-              variant === "line" && "h-auto w-full justify-start border-b p-0",
+              // The padding override is an arbitrary value reading the knob (never `p-0`): it must
+              // stay a UTILITY so tailwind-merge still drops the strip's own padding step, and a
+              // components-layer rule could not beat that utility anyway (#319).
+              variant === "line" && "h-auto w-full justify-start border-b p-[var(--tabs-list-line-space-inset)]",
               variant === "card" && "w-full justify-start",
               listClassName
             ),
@@ -56,8 +63,13 @@ function Tabs({
                 className: cn(
                   // Geometry only — the active underline is the token-owned `::after` bar the
                   // line variant already owns (never a second, hand-rolled border-b indicator).
-                  variant === "line" && "rounded-none px-4 py-2",
-                  variant === "card" && "data-[state=active]:shadow-sm"
+                  // Token-reading arbitrary values, not Tailwind steps (#319): they have to stay
+                  // utilities so tailwind-merge keeps dropping the pill trigger's own radius /
+                  // padding steps from the base class list.
+                  // `card` adds NOTHING here — its list is forwarded as data-variant="default", so
+                  // the active lift already comes from the base trigger's
+                  // `group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm`.
+                  variant === "line" && "rounded-[var(--tabs-trigger-line-radius)] px-[var(--tabs-trigger-line-padding-x)] py-[var(--tabs-trigger-line-padding-y)]"
                 ),
                 children: item.label
               },
@@ -70,7 +82,7 @@ function Tabs({
           {
             value: item.value,
             "data-slot": "tabs-panel",
-            className: cn(variant === "line" && "mt-0", contentClassName),
+            className: contentClassName,
             children: item.content
           },
           item.value

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

@@ -56,7 +56,7 @@ function InfiniteQueryState({
   if (!data) return /* @__PURE__ */ jsx(Fragment, { children: skeleton });
   const flat = flatten(data);
   if (empty && isEmpty(flat)) return /* @__PURE__ */ jsx(Fragment, { children: empty });
-  const footer = showLoadMore && query.hasNextPage ? loadMore ?? /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-4", children: /* @__PURE__ */ jsx(
+  const footer = showLoadMore && query.hasNextPage ? loadMore ?? /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-[var(--query-load-more-space-block-start)]", children: /* @__PURE__ */ jsx(
     Button,
     {
       type: "button",
@@ -73,7 +73,7 @@ function InfiniteQueryState({
       hasNextPage: !!query.hasNextPage,
       isFetchingNextPage: query.isFetchingNextPage
     }),
-    query.isFetchingNextPage && (loadingMore ?? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground pt-2 text-center text-xs", children: t("common.working") })),
+    query.isFetchingNextPage && (loadingMore ?? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground pt-[var(--query-loading-more-space-block-start)] text-center text-xs", children: t("common.working") })),
     footer
   ] });
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-export declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+export declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionMultipleProps | AccordionPrimitive.AccordionSingleProps) & React.RefAttributes<HTMLDivElement>>;
 export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

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

package/dist/components/ui/avatar.js

@@ -1,19 +1,38 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-const Avatar = React.forwardRef(({ className, shape = "circle", appearance = "default", ...props }, ref) => /* @__PURE__ */ jsx(
-  AvatarPrimitive.Root,
-  {
-    ref,
-    "data-slot": "avatar",
-    "data-shape": shape === "square" ? "square" : void 0,
-    "data-appearance": appearance === "tinted" ? "tinted" : void 0,
-    className: cn("ui-avatar", className),
+const Avatar = React.forwardRef(
+  ({
+    className,
+    shape = "circle",
+    appearance = "default",
+    presence,
+    presenceLabel,
+    children,
     ...props
+  }, ref) => {
+    const { t } = useTranslation();
+    return /* @__PURE__ */ jsxs(
+      AvatarPrimitive.Root,
+      {
+        ref,
+        "data-slot": "avatar",
+        "data-shape": shape === "square" ? "square" : void 0,
+        "data-appearance": appearance === "tinted" ? "tinted" : void 0,
+        "data-presence": presence,
+        className: cn("ui-avatar", className),
+        ...props,
+        children: [
+          children,
+          presence !== void 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "avatar-presence", "data-presence": presence, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: presenceLabel ?? t(`dataDisplay.avatar.presence.${presence}`) }) }) : null
+        ]
+      }
+    );
   }
-));
+);
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 const AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Image,

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

@@ -9,29 +9,31 @@ import type { InputOTPAlignProp } from "../../props/components/data-entry.prop.j
  * through `:has()`, exactly as it already does for the invalid and disabled states. A service that
  * wants every code field centred sets `--otp-container-align` once instead.
  */
-export declare const InputOTP: React.ForwardRefExoticComponent<((Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+export declare const InputOTP: React.ForwardRefExoticComponent<((Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "containerClassName" | "maxLength" | "noScriptCSSFallback" | "nonce" | "onChange" | "onComplete" | "pasteTransformer" | "pushPasswordManagerStrategy" | "textAlign" | "value"> & {
     value?: string;
     onChange?: (newValue: string) => unknown;
     maxLength: number;
-    textAlign?: "left" | "center" | "right";
+    textAlign?: 'left' | 'center' | 'right';
     onComplete?: (...args: any[]) => unknown;
-    pushPasswordManagerStrategy?: "increase-width" | "none";
+    pushPasswordManagerStrategy?: 'increase-width' | 'none';
     pasteTransformer?: (pasted: string) => string;
     containerClassName?: string;
     noScriptCSSFallback?: string | null;
+    nonce?: string;
 } & {
     render: (props: import("input-otp").RenderProps) => React.ReactNode;
     children?: never;
-} & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+} & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "containerClassName" | "maxLength" | "noScriptCSSFallback" | "nonce" | "onChange" | "onComplete" | "pasteTransformer" | "pushPasswordManagerStrategy" | "textAlign" | "value"> & {
     value?: string;
     onChange?: (newValue: string) => unknown;
     maxLength: number;
-    textAlign?: "left" | "center" | "right";
+    textAlign?: 'left' | 'center' | 'right';
     onComplete?: (...args: any[]) => unknown;
-    pushPasswordManagerStrategy?: "increase-width" | "none";
+    pushPasswordManagerStrategy?: 'increase-width' | 'none';
     pasteTransformer?: (pasted: string) => string;
     containerClassName?: string;
     noScriptCSSFallback?: string | null;
+    nonce?: string;
 } & {
     render?: never;
     children: React.ReactNode;

package/dist/components/ui/rating.js

@@ -30,7 +30,7 @@ const Rating = React.forwardRef(
     const focusableStar = current > 0 ? current : 1;
     const onKeyDown = (e, star) => {
       if (!interactive) return;
-      let next = null;
+      let next;
       switch (e.key) {
         case "ArrowRight":
         case "ArrowUp":

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

@@ -1,3 +1,28 @@
 import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type { SeparatorProp, SeparatorProp as SeparatorProps, } from "../../props/components/layout.prop.js";
+/**
+ * Separator — a tokenized horizontal/vertical rule, optionally INTERRUPTED by a localized label
+ * (gh#308): a message stream's day divider, a "new messages" unread watermark, an auth
+ * conjunction. Before #308 the only labelled rule in the library was the auth-scoped
+ * `AuthDivider`, so a chat stream had to either misuse it (inheriting the `--auth-shell-divider-*`
+ * type ramp) or hand-roll a `<div>` grid; `AuthDivider` is now a thin preset over this.
+ *
+ * ACCESSIBILITY — the whole point of the labelled form is that the label is ANNOUNCED, exactly
+ * ONCE. Without a label the rule stays `decorative` (Radix emits `role="none"`), which is right:
+ * a section rule carries no information. With a label the default flips to `decorative={false}`,
+ * so Radix emits a real `role="separator"` (plus `aria-orientation` when vertical, which is what
+ * the ARIA default already implies for horizontal), the label string becomes the separator's
+ * accessible NAME via `aria-label`, and the visible label node is `aria-hidden` — otherwise the
+ * same string would be announced twice, once as the name and again as the content. A consumer who
+ * explicitly passes `decorative` still wins; when they force `decorative` on a labelled rule the
+ * name is dropped (a `role="none"` element may not carry one) and the visible text is left in the
+ * tree instead, so it is still read once and never as a nameless blank rule.
+ */
+export declare const Separator: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    orientation?: import("../../props/index.js").OrientationProp;
+    label?: string;
+    labelAlign?: import("../../props/index.js").TextAlignProp;
+    tone?: import("../../props/index.js").TextToneProp;
+    decorative?: boolean;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLDivElement>>;