@godxjp/ui 18.15.4 → 19.0.0

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>>;

package/dist/components/ui/separator.js

@@ -1,21 +1,52 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { cn } from "../../lib/utils.js";
-const Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
-  SeparatorPrimitive.Root,
-  {
-    ref,
-    "data-slot": "separator",
-    "data-orientation": orientation,
-    orientation,
+const Separator = React.forwardRef(
+  ({
+    className,
+    orientation = "horizontal",
     decorative,
-    className: cn("ui-separator", className),
+    label,
+    labelAlign = "center",
+    tone = "default",
     ...props
+  }, ref) => {
+    const hasLabel = typeof label === "string" && label.trim() !== "";
+    const labelled = hasLabel && orientation === "horizontal";
+    if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
+      if (hasLabel && orientation === "vertical") {
+        console.warn(
+          'Separator: `label` is rendered on orientation="horizontal" only; it was ignored. Use a horizontal rule for a day divider / unread watermark.'
+        );
+      }
+    }
+    const isDecorative = decorative ?? !labelled;
+    return /* @__PURE__ */ jsx(
+      SeparatorPrimitive.Root,
+      {
+        ref,
+        "data-slot": "separator",
+        "data-orientation": orientation,
+        "data-tone": tone,
+        "data-labelled": labelled ? "" : void 0,
+        "data-label-align": labelled ? labelAlign : void 0,
+        orientation,
+        decorative: isDecorative,
+        "aria-label": labelled && !isDecorative ? label : void 0,
+        className: cn("ui-separator", className),
+        ...props,
+        children: labelled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "ui-separator-rule", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "ui-separator-label", "aria-hidden": isDecorative ? void 0 : true, children: label }),
+          /* @__PURE__ */ jsx("span", { className: "ui-separator-rule", "aria-hidden": "true" })
+        ] }) : null
+      }
+    );
   }
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+);
+Separator.displayName = "Separator";
 export {
   Separator
 };

package/dist/components/ui/toggle-group.d.ts

@@ -1,13 +1,23 @@
 import * as React from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { type ToggleProps } from "./toggle.js";
-type ToggleGroupVariant = ToggleProps["variant"];
-type ToggleGroupSize = ToggleProps["size"];
-export declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & {
+import { type ToggleCountFields, type ToggleProp } from "./toggle.js";
+type ToggleGroupVariant = ToggleProp["variant"];
+type ToggleGroupSize = ToggleProp["size"];
+export declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref">) & {
     variant?: ToggleGroupVariant;
     size?: ToggleGroupSize;
 }) & React.RefAttributes<HTMLDivElement>>;
-export declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+/**
+ * `variant`/`size` come from the group through context; the COUNT stays per item, because the
+ * number is per-item data (gh#312). Same vocabulary as `Toggle` and `Button` — one counter pill
+ * for the whole library.
+ */
+export type ToggleGroupItemProp = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & ToggleCountFields & {
+    variant?: ToggleGroupVariant;
+    size?: ToggleGroupSize;
+};
+export type ToggleGroupItemProps = ToggleGroupItemProp;
+export declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & ToggleCountFields & {
     variant?: ToggleGroupVariant;
     size?: ToggleGroupSize;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/toggle-group.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { cn } from "../../lib/utils.js";
-import { toggleVariants } from "./toggle.js";
+import { toggleVariants, useCounterPill } from "./toggle.js";
 const ToggleGroupContext = React.createContext({});
 const ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => {
   const context = React.useMemo(() => ({ variant, size }), [variant, size]);
@@ -21,22 +21,47 @@ const ToggleGroup = React.forwardRef(({ className, variant, size, children, ...p
   );
 });
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-const ToggleGroupItem = React.forwardRef(({ className, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
-  const resolvedVariant = variant ?? context.variant;
-  const resolvedSize = size ?? context.size;
-  return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Item,
-    {
-      ref,
-      "data-slot": "toggle-group-item",
-      "data-variant": resolvedVariant,
-      "data-size": resolvedSize,
-      className: cn(toggleVariants({ variant: resolvedVariant, size: resolvedSize }), className),
-      ...props
-    }
-  );
-});
+const ToggleGroupItem = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    count,
+    overflowCount,
+    showZero,
+    countLabel,
+    children,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const context = React.useContext(ToggleGroupContext);
+    const resolvedVariant = variant ?? context.variant;
+    const resolvedSize = size ?? context.size;
+    const { pill, resolvedAriaLabel } = useCounterPill({
+      count,
+      overflowCount,
+      showZero,
+      countLabel,
+      ariaLabel
+    });
+    return /* @__PURE__ */ jsxs(
+      ToggleGroupPrimitive.Item,
+      {
+        ref,
+        "data-slot": "toggle-group-item",
+        "data-variant": resolvedVariant,
+        "data-size": resolvedSize,
+        "aria-label": resolvedAriaLabel,
+        className: cn(toggleVariants({ variant: resolvedVariant, size: resolvedSize }), className),
+        ...props,
+        children: [
+          children,
+          pill
+        ]
+      }
+    );
+  }
+);
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 export {
   ToggleGroup,

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

@@ -3,11 +3,72 @@ import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { type VariantProps } from "class-variance-authority";
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export type ToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>;
+/**
+ * The counter-pill vocabulary, lifted VERBATIM from `Button` (`count` / `overflowCount` /
+ * `showZero`) so a counted filter tab and a counted, pressed filter chip are one vocabulary rather
+ * than two that drift (gh#312). Not exported on its own — it is folded into `ToggleProp` and
+ * `ToggleGroupItemProp` so there is one public name per component.
+ */
+type ToggleCountFields = {
+    /**
+     * Optional numeric count rendered as a borderless counter pill after the label — the SAME
+     * vocabulary `Button` already defines, so a counted segmented toggle and a counted filter tab
+     * read identically. Formatted with `Intl.NumberFormat` in the active locale (never `String(n)`,
+     * never a hand-rolled thousands separator). Never nest a `Badge` inside a Toggle for this: a
+     * Badge is a status chip with its own surface, so it double-borders the chip and puts two boxes
+     * where there is one control. The pill takes its colour from the toggle's OWN pressed state, so
+     * pressed and unpressed chips differ without reading the number.
+     */
+    count?: number;
+    /** Cap for `count` — beyond it the pill shows `{overflowCount}+` (e.g. `99+`). Default `99`. */
+    overflowCount?: number;
+    /** Render the pill when `count` is 0. Default `true`, matching Button. */
+    showZero?: boolean;
+    /**
+     * Localized description of what the count MEANS, folded into the accessible name so the control
+     * never announces as a bare number ("👍 3" → "thumbs up, 3 reactions"). Supply it whenever the
+     * visible label is an icon or an emoji; with a text label the label itself already carries the
+     * meaning. Pass a `t()`-resolved string — the library does not own this wording.
+     */
+    countLabel?: string;
+};
+/**
+ * Counter pill shared by `Toggle` and `ToggleGroupItem`.
+ *
+ * ACCESSIBLE NAME. The digits live INSIDE the same `button[aria-pressed]` — one tab stop, one
+ * focus ring, one name. The name always comes out as "<label>, <count> <unit>" ("Unread, 12",
+ * "Thích, 3 lượt"), by one of two routes:
+ *
+ *   • Name from CONTENTS (the usual text chip). The visible digits are `aria-hidden`, and an
+ *     `sr-only` sibling carries ", 12 unit". The separator is explicit on purpose: the accessible
+ *     name is a CONCATENATION of descendant text, and whether a browser inserts a space between
+ *     two inline boxes is a layout detail no test can rely on — without it the control can
+ *     announce "Unread12".
+ *   • Name from `aria-label` (an icon or emoji chip). Contents are ignored for the name, so the
+ *     same ", 12 unit" tail is folded into the label instead.
+ *
+ * Either way the count is announced exactly ONCE — the visible digits are hidden from the a11y
+ * tree precisely so they cannot be counted twice — and there is deliberately no `aria-live`: a
+ * count that ticks up as other people react is not this control's status, and a live region here
+ * would fire on every socket message. A product that wants the change announced owns its own
+ * live region.
+ */
+declare function useCounterPill({ count, overflowCount, showZero, countLabel, ariaLabel, }: ToggleCountFields & {
+    ariaLabel?: string;
+}): {
+    pill: null;
+    resolvedAriaLabel: string | undefined;
+} | {
+    pill: React.JSX.Element;
+    resolvedAriaLabel: string | undefined;
+};
+export type ToggleProp = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants> & ToggleCountFields;
+export type ToggleProps = ToggleProp;
 export declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
-export { toggleVariants };
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & ToggleCountFields & React.RefAttributes<HTMLButtonElement>>;
+export { toggleVariants, useCounterPill };
+export type { ToggleCountFields };