@godxjp/ui 18.15.4 → 19.0.0

package/dist/components/feedback/sheet.js

@@ -56,7 +56,7 @@ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PU
     className: cn(
       // Scrim colour comes from the shared --overlay-background token (see dialog-layout.css),
       // so a service tints every overlay's backdrop from one knob instead of a baked bg-black/50.
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50",
+      "ui-sheet-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed",
       className
     ),
     ...props
@@ -64,7 +64,7 @@ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const sheetVariants = cva(
-  "fixed z-50 flex flex-col gap-[var(--space-chrome-gap)] bg-background px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)] shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+  "ui-sheet-panel fixed flex flex-col gap-[var(--space-chrome-gap)] bg-background px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)] transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
   {
     variants: {
       // `side` is a deliberately PHYSICAL API (left/right/top/bottom) — a sheet
@@ -75,8 +75,8 @@ const sheetVariants = cva(
         right: "inset-y-0 right-0 h-full w-[min(var(--sheet-width-default),100%)] max-w-none border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
         /* rtl-ignore: named physical side */
         left: "inset-y-0 left-0 h-full w-[min(var(--sheet-width-default),100%)] max-w-none border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
-        top: "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+        top: "inset-x-0 h-auto data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 h-auto data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
       }
     },
     defaultVariants: { side: "right" }
@@ -127,9 +127,9 @@ const SheetContent = React.forwardRef(
               DialogPrimitive.Close,
               {
                 "data-slot": "sheet-close",
-                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",
+                className: "ui-sheet-close ring-offset-background focus:ring-ring 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(X, { className: "ui-sheet-close-icon", "aria-hidden": "true" }),
                   /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
                 ]
               }
@@ -156,18 +156,18 @@ const SheetHeader = ({
       "data-slot": "sheet-header",
       "data-tone": tone,
       className: cn(
-        "-mx-[var(--sheet-pad-x)] -mt-[var(--sheet-pad-y)] flex flex-col gap-1.5 px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)]",
+        "ui-sheet-header -mx-[var(--sheet-pad-x)] -mt-[var(--sheet-pad-y)] px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)]",
         overlayHeaderToneClass[tone],
         className
       ),
       ...props,
       children: children ?? // `pe-8` reserves room for the absolute close button (end-4) so title/extra never sit under it.
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 pe-8", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ui-sheet-title-row", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ui-sheet-title-block", children: [
           title != null && /* @__PURE__ */ jsx(SheetTitle, { children: title }),
           subtitle != null && /* @__PURE__ */ jsx(SheetDescription, { children: subtitle })
         ] }),
-        extra != null && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2 whitespace-nowrap", children: extra })
+        extra != null && /* @__PURE__ */ jsx("div", { className: "ui-sheet-extra", children: extra })
       ] })
     }
   );
@@ -183,7 +183,7 @@ const SheetBody = ({ className, ...props }) => (
     {
       "data-slot": "sheet-body",
       className: cn(
-        "-mx-[var(--sheet-pad-x)] min-h-0 flex-1 scroll-py-1 overflow-y-auto px-[var(--sheet-pad-x)] py-1",
+        "ui-sheet-body-space -mx-[var(--sheet-pad-x)] flex-1 overflow-y-auto px-[var(--sheet-pad-x)]",
         className
       ),
       ...props
@@ -201,7 +201,7 @@ const SheetFooter = ({ className, ...props }) => (
     {
       "data-slot": "sheet-footer",
       className: cn(
-        "-mx-[var(--sheet-pad-x)] mt-auto -mb-[var(--sheet-pad-y)] flex flex-wrap items-center justify-end gap-2 px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)]",
+        "ui-sheet-footer-row -mx-[var(--sheet-pad-x)] mt-auto -mb-[var(--sheet-pad-y)] px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)]",
         className
       ),
       ...props
@@ -213,7 +213,7 @@ const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
   {
     ref,
     "data-slot": "sheet-title",
-    className: cn("text-foreground text-lg font-medium", className),
+    className: cn("ui-sheet-title", className),
     ...props
   }
 ));
@@ -223,7 +223,7 @@ const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @
   {
     ref,
     "data-slot": "sheet-description",
-    className: cn("text-foreground/80 text-sm", className),
+    className: cn("ui-sheet-description", className),
     ...props
   }
 ));

package/dist/components/feedback/skeleton.js

@@ -16,19 +16,22 @@ function SkeletonRows({ rows = 6, columns = 4, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("ui-skeleton-rows", className), "aria-busy": "true", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "ui-skeleton-row", children: Array.from({ length: columns }).map((_2, j) => /* @__PURE__ */ jsx(
     Skeleton,
     {
-      className: cn("h-4", j === 0 ? "w-1/4" : j === columns - 1 ? "w-1/6" : "flex-1")
+      className: cn(
+        "ui-skeleton-line",
+        j === 0 ? "w-1/4" : j === columns - 1 ? "w-1/6" : "flex-1"
+      )
     },
     j
   )) }, i)) });
 }
 function SkeletonTable({ rows = 8, columns = 5 }) {
   return /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-table", "aria-busy": "true", children: [
-    /* @__PURE__ */ jsx("div", { className: cn("ui-skeleton-table-head", tableCellPaddingClass, tableRowHeightClass), children: Array.from({ length: columns }).map((_, j) => /* @__PURE__ */ jsx(Skeleton, { className: cn("h-3", j === 0 ? "w-1/5" : "flex-1") }, j)) }),
+    /* @__PURE__ */ jsx("div", { className: cn("ui-skeleton-table-head", tableCellPaddingClass, tableRowHeightClass), children: Array.from({ length: columns }).map((_, j) => /* @__PURE__ */ jsx(Skeleton, { className: cn("ui-skeleton-caption", j === 0 ? "w-1/5" : "flex-1") }, j)) }),
     /* @__PURE__ */ jsx("div", { className: "ui-skeleton-table-body", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx(
       "div",
       {
         className: cn("ui-skeleton-table-row", tableCellPaddingClass, tableRowHeightClass),
-        children: Array.from({ length: columns }).map((_2, j) => /* @__PURE__ */ jsx(Skeleton, { className: cn("h-4", j === 0 ? "w-1/5" : "flex-1") }, j))
+        children: Array.from({ length: columns }).map((_2, j) => /* @__PURE__ */ jsx(Skeleton, { className: cn("ui-skeleton-line", j === 0 ? "w-1/5" : "flex-1") }, j))
       },
       i
     )) })
@@ -36,19 +39,19 @@ function SkeletonTable({ rows = 8, columns = 5 }) {
 }
 function SkeletonDetail() {
   return /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-detail ui-skeleton-detail-stack", "aria-busy": "true", children: [
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-1/3" }),
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "ui-skeleton-title w-1/3" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "ui-skeleton-line w-1/2" }),
     /* @__PURE__ */ jsx("div", { className: "ui-skeleton-detail-box ui-skeleton-detail-stack", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-detail-stack", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full max-w-md" })
+      /* @__PURE__ */ jsx(Skeleton, { className: "ui-skeleton-detail-label" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "ui-skeleton-detail-value" })
     ] }, i)) })
   ] });
 }
 function SkeletonStat() {
   return /* @__PURE__ */ jsxs("div", { className: "ui-skeleton-stat", "aria-busy": "true", children: [
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-[length:var(--control-height)] w-32" }),
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
+    /* @__PURE__ */ jsx(Skeleton, { className: "ui-skeleton-detail-label" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "ui-skeleton-stat-value" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "ui-skeleton-stat-caption" })
   ] });
 }
 export {

package/dist/components/feedback/sonner.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import { type ToasterProps } from "sonner";
-declare function Toaster({ ...props }: ToasterProps): React.JSX.Element;
+declare function Toaster({ style, ...props }: ToasterProps): React.JSX.Element;
 export { Toaster };

package/dist/components/feedback/sonner.js

@@ -20,7 +20,7 @@ function useDocumentTheme() {
     () => "light"
   );
 }
-function Toaster({ ...props }) {
+function Toaster({ style, ...props }) {
   const theme = useDocumentTheme();
   return /* @__PURE__ */ jsx(
     Sonner,
@@ -28,11 +28,11 @@ function Toaster({ ...props }) {
       theme,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4", "aria-hidden": "true" }),
-        info: /* @__PURE__ */ jsx(Info, { className: "size-4", "aria-hidden": "true" }),
-        warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4", "aria-hidden": "true" }),
-        error: /* @__PURE__ */ jsx(OctagonX, { className: "size-4", "aria-hidden": "true" }),
-        loading: /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" })
+        success: /* @__PURE__ */ jsx(CheckCircle2, { className: "ui-toast-icon", "aria-hidden": "true" }),
+        info: /* @__PURE__ */ jsx(Info, { className: "ui-toast-icon", "aria-hidden": "true" }),
+        warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "ui-toast-icon", "aria-hidden": "true" }),
+        error: /* @__PURE__ */ jsx(OctagonX, { className: "ui-toast-icon", "aria-hidden": "true" }),
+        loading: /* @__PURE__ */ jsx(Loader2, { className: "ui-toast-icon animate-spin", "aria-hidden": "true" })
       },
       style: {
         // Color tokens are raw HSL triplets (consumed as hsl(var(--token)));
@@ -42,10 +42,19 @@ function Toaster({ ...props }) {
         "--normal-bg": "hsl(var(--popover))",
         "--normal-text": "hsl(var(--popover-foreground))",
         "--normal-border": "hsl(var(--border))",
-        "--border-radius": "var(--radius)"
+        "--border-radius": "var(--radius)",
+        // MERGED, never spread over. `style` used to arrive with the rest of `{...props}` AFTER
+        // this object, so a consumer passing ANY style (a z-index, a width) replaced the whole
+        // object and wiped all four vars — and an unset `--normal-bg` renders the toast
+        // transparent. Merging keeps the surface intact and still lets a consumer override one
+        // var by name.
+        ...style
       },
       position: "bottom-right",
-      mobileOffset: { bottom: "16px", right: "16px" },
+      mobileOffset: {
+        bottom: "var(--toast-mobile-offset)",
+        right: "var(--toast-mobile-offset)"
+      },
       ...props
     }
   );

package/dist/components/feedback/tooltip.js

@@ -23,7 +23,7 @@ const TooltipContent = React.forwardRef(({ className, sideOffset = 6, children,
     "data-slot": "tooltip-content",
     sideOffset,
     className: cn(
-      "bg-popover text-popover-foreground z-50 w-fit max-w-xs rounded-md border px-2 py-1 text-xs shadow-md outline-none",
+      "ui-tooltip-content",
       "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0",
       "data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1",
       "data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1",

package/dist/components/general/activity.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+import type { SizeProp } from "../../props/vocabulary/index.js";
+export type { ActivityProp, ActivityProp as ActivityProps, } from "../../props/components/general.prop.js";
+/**
+ * Activity — the official AMBIENT-motion primitive: a continuous, unbounded "something is happening
+ * right now, elsewhere". The LOOP counterpart to `Reveal`'s one-shot entrance, so a consumer never
+ * hand-rolls a looping `@keyframes` + its own `prefers-reduced-motion` guard. Every interval,
+ * stagger, offset, size and colour reads a DS token (`--activity-interval`,
+ * `--activity-stagger-step`, `--activity-mark-offset`, `--activity-color`, …), so a service retunes
+ * the whole ambient feel from its theme.
+ *
+ * NOT `Skeleton` (content is LOADING — it hard-codes `aria-busy` + an unconditional live region, so
+ * reusing it for a typing indicator tells every screen reader the region is busy for as long as
+ * anyone is typing). NOT `Button loading` (THIS ACTION is in flight, on a control).
+ * `Activity` means: someone is typing, a sync is running, a response is streaming, a recording is
+ * live — indefinitely, and not here.
+ *
+ * ACCESSIBILITY — the half consumers get wrong, owned here:
+ * - The mark is decorative and always `aria-hidden`; the `label` (or `children`) carries the
+ *   meaning, so the indicator is never animation-only.
+ * - `announce` defaults to `false` and then emits NO live region at all. An ambient indicator
+ *   flickers on and off with every socket event; a live region there re-announces continuously.
+ *   `announce="polite"` wraps ONLY the label in one `aria-live="polite" aria-atomic="true"` region.
+ * - No `aria-busy`: activity elsewhere does not make THIS region busy, and `aria-busy` would
+ *   suppress the surrounding content's own updates.
+ * - Not focusable, not a tab stop, no pointer affordance — it is a status mark, not a control.
+ * - Under `prefers-reduced-motion: reduce` the loop is dropped and every mark falls back to a
+ *   DESIGNED resting state (three solid dots / a solid pulse mark / a bar segment parked at the
+ *   reading-start), never to nothing, with no layout shift (WCAG 2.2 SC 2.3.3 and SC 2.2.2).
+ *
+ * Copy is consumer-owned and localized — pass a `t()`-translated `label`, and derive
+ * "N people are typing" from `Intl.PluralRules`. The library never invents the string.
+ *
+ * Pure/server-safe: no hooks, no effects, no timers — the loop is CSS.
+ */
+export declare const Activity: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> & {
+    variant?: import("../../props/index.js").ActivityVariantProp;
+    size?: SizeProp;
+    tone?: import("../../props/index.js").TextToneProp;
+    label?: import("../../props/index.js").LabelProp;
+    children?: import("../../props/index.js").ChildrenProp;
+    announce?: import("../../props/index.js").ActivityAnnounceProp;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/general/activity.js

@@ -0,0 +1,65 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Text } from "./typography.js";
+const LABEL_SIZE = {
+  xs: "2xs",
+  sm: "xs",
+  md: "sm",
+  lg: "lg"
+};
+function ActivityMark({ variant }) {
+  if (variant === "pulse") return /* @__PURE__ */ jsx("span", { className: "ui-activity-pulse" });
+  if (variant === "bar") {
+    return /* @__PURE__ */ jsx("span", { className: "ui-activity-bar", children: /* @__PURE__ */ jsx("span", { className: "ui-activity-bar-segment" }) });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "ui-activity-dot" }),
+    /* @__PURE__ */ jsx("span", { className: "ui-activity-dot" }),
+    /* @__PURE__ */ jsx("span", { className: "ui-activity-dot" })
+  ] });
+}
+const Activity = React.forwardRef(function Activity2({
+  variant = "dots",
+  size = "sm",
+  tone = "muted",
+  label,
+  announce = false,
+  children,
+  className,
+  ...props
+}, ref) {
+  const hasChildren = children !== void 0 && children !== null && children !== false;
+  const visible = hasChildren ? children : label;
+  const describedOnly = hasChildren && label !== void 0 && label !== null ? label : void 0;
+  const text = visible === void 0 || visible === null ? null : /* @__PURE__ */ jsx(Text, { as: "span", size: LABEL_SIZE[size], tone, className: "ui-activity-label", children: visible });
+  const description = describedOnly === void 0 ? null : /* @__PURE__ */ jsx("span", { "data-slot": "activity-description", className: "sr-only", children: describedOnly });
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    text,
+    description
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      "data-slot": "activity",
+      "data-variant": variant,
+      "data-size": size,
+      "data-tone": tone,
+      className: cn("ui-activity", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ui-activity-mark", "data-slot": "activity-mark", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ActivityMark, { variant }) }),
+        announce === "polite" ? (
+          // The region wraps ONLY the label and is atomic, so a change is announced once as a whole.
+          // It is rendered even while empty so a label that arrives later is heard — an inserted
+          // region is not reliably announced. The mark stays outside it.
+          /* @__PURE__ */ jsx("span", { "aria-live": "polite", "aria-atomic": "true", "data-slot": "activity-live", children: body })
+        ) : body
+      ]
+    }
+  );
+});
+export {
+  Activity
+};

package/dist/components/general/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "ghost" | "destructive" | "outline" | "dashed" | "secondary" | "link" | null | undefined;
-    size?: "default" | "sm" | "md" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "dashed" | "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "md" | "sm" | "xs" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type { ButtonProp, ButtonProp as ButtonProps } from "../../props/components/general.prop.js";

package/dist/components/general/button.js

@@ -6,20 +6,11 @@ import { cva } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { useTranslation } from "../../i18n/use-translation.js";
-const buttonCountClass = {
-  default: "bg-primary-foreground/15",
-  destructive: "bg-destructive-foreground/15",
-  secondary: "bg-secondary-foreground/15",
-  outline: "bg-foreground/8 text-muted-foreground",
-  dashed: "bg-foreground/8 text-muted-foreground",
-  ghost: "bg-foreground/8 text-muted-foreground",
-  link: "bg-foreground/8 text-muted-foreground"
-};
 const buttonVariants = cva("ui-button", {
   variants: {
     variant: {
       default: "ui-button--default bg-primary text-primary-foreground hover:bg-primary/90",
-      destructive: "ui-button--destructive bg-destructive text-destructive-foreground focus-visible:ring-destructive/20",
+      destructive: "ui-button--destructive bg-destructive text-destructive-foreground",
       outline: "ui-button--outline border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
       dashed: "ui-button--dashed border border-dashed bg-background hover:bg-accent hover:text-accent-foreground",
       secondary: "ui-button--secondary bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -27,13 +18,16 @@ const buttonVariants = cva("ui-button", {
       link: "ui-button--link text-primary underline-offset-4 hover:underline"
     },
     size: {
-      default: "ui-button--default-size py-2 has-[>svg]:px-3",
-      md: "ui-button--default-size py-2 has-[>svg]:px-3",
-      xs: "h-[calc(var(--control-height)-0.75rem)] gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-      sm: "ui-button--sm gap-1.5 has-[>svg]:px-2.5",
-      lg: "ui-button--lg has-[>svg]:px-4",
+      default: "ui-button--default-size",
+      md: "ui-button--default-size",
+      // The glyph rules stay UTILITIES, not a components-layer rule: Tailwind v4 orders
+      // utilities after components, so only a utility can out-rank a child's own `size-*`.
+      // They read the token, so the value is still themeable.
+      xs: "ui-button--xs [&_svg:not([class*='size-'])]:size-[var(--button-xs-icon-size)]",
+      sm: "ui-button--sm",
+      lg: "ui-button--lg",
       icon: "ui-button--icon",
-      "icon-xs": "ui-button--icon-xs [&_svg]:size-3 [&_svg]:shrink-0",
+      "icon-xs": "ui-button--icon-xs [&_svg]:size-[var(--button-xs-icon-size)] [&_svg]:shrink-0",
       "icon-sm": "ui-button--icon-sm",
       "icon-lg": "ui-button--icon-lg"
     },
@@ -79,10 +73,7 @@ const Button = React.forwardRef(
       "span",
       {
         "data-slot": "button-count",
-        className: cn(
-          "inline-flex min-w-4 items-center justify-center rounded-[var(--radius-pill)] px-1 text-xs leading-none tabular-nums",
-          buttonCountClass[variant ?? "default"]
-        ),
+        className: "ui-button-count",
         children: countLabel
       }
     ) : null;
@@ -99,11 +90,7 @@ const Button = React.forwardRef(
         disabled: isLoading || disabled,
         type: asChild ? void 0 : type ?? "button",
         className: cn(
-          "inline-flex shrink-0 items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-all outline-none",
           fullWidth && "w-full",
-          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-          "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",
           buttonVariants({ variant, size, shape, className })

package/dist/components/general/index.d.ts

@@ -6,3 +6,5 @@ export { Logo } from "./logo.js";
 export type { LogoMark, LogoProps, LogoSize, LogoTone } from "./logo.js";
 export { Reveal } from "./reveal.js";
 export type { RevealProp, RevealProps } from "./reveal.js";
+export { Activity } from "./activity.js";
+export type { ActivityProp, ActivityProps } from "./activity.js";

package/dist/components/general/index.js

@@ -2,7 +2,9 @@ import { Button, buttonVariants } from "./button.js";
 import { Text, Heading } from "./typography.js";
 import { Logo } from "./logo.js";
 import { Reveal } from "./reveal.js";
+import { Activity } from "./activity.js";
 export {
+  Activity,
   Button,
   Heading,
   Logo,

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

@@ -35,6 +35,7 @@ function AppShell({
       setDrawerOpen(false);
     }
   };
+  const hasTopbarContent = topbar !== void 0 || topbarLeft !== void 0 || topbarRight !== void 0 || logo !== void 0;
   const resolvedTopbar = topbar !== void 0 ? topbar : /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
     logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
     topbarLeft !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-left", children: topbarLeft }),
@@ -42,7 +43,7 @@ function AppShell({
     topbarRight !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-right", children: topbarRight })
   ] });
   const rail = /* @__PURE__ */ jsx("aside", { className: "app-sidebar", "aria-label": t("layout.appShell.sidebarLabel"), children: sidebar });
-  const bar = /* @__PURE__ */ jsxs("header", { className: "app-topbar ui-scale-fixed", "aria-label": t("layout.appShell.headerLabel"), children: [
+  const bar = !hasTopbarContent && !hasDrawer ? null : /* @__PURE__ */ jsxs("header", { className: "app-topbar ui-scale-fixed", "aria-label": t("layout.appShell.headerLabel"), children: [
     hasDrawer && /* @__PURE__ */ jsxs(Sheet, { open: drawerOpen, onOpenChange: setDrawerOpen, children: [
       /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
         Button,
@@ -53,7 +54,7 @@ function AppShell({
           className: "app-mobile-nav-trigger hidden max-[900px]:inline-flex",
           "aria-label": t("layout.appShell.openNav"),
           "aria-haspopup": "dialog",
-          children: /* @__PURE__ */ jsx(Menu, { className: "size-5", "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx(Menu, { className: "size-[var(--app-shell-mobile-nav-icon-size)]", "aria-hidden": "true" })
         }
       ) }),
       /* @__PURE__ */ jsxs(
@@ -77,7 +78,7 @@ function AppShell({
         }
       )
     ] }),
-    resolvedTopbar
+    hasTopbarContent && resolvedTopbar
   ] });
   return /* @__PURE__ */ jsxs(
     "div",
@@ -85,6 +86,7 @@ function AppShell({
       className: "app-root",
       "data-collapsed": sidebarCollapsed ? "true" : void 0,
       "data-responsive-navigation": responsiveNavigation,
+      "data-topbar": hasTopbarContent ? void 0 : "none",
       "data-topbar-span": topbarSpan === "full" ? "full" : void 0,
       children: [
         topbarSpan === "full" ? bar : rail,

package/dist/components/layout/auth-divider.d.ts

@@ -1,7 +1,14 @@
 import type { AuthDividerProp } from "../../props/components/layout.prop.js";
 export type { AuthDividerProp, AuthDividerProp as AuthDividerProps, } from "../../props/components/layout.prop.js";
 /**
- * AuthDivider — a centred, localized conjunction between two equal separator rules. The grid
- * composition keeps the label optically and geometrically centred regardless of translation.
+ * AuthDivider — a centred, localized conjunction between two equal separator rules.
+ *
+ * Since gh#308 this is a thin PRESET over `Separator label`, not a parallel implementation: the
+ * grid, the accessible-name contract and the rule geometry all live on the primitive, and
+ * `.ui-auth-divider` only re-points Separator's `--separator-*` knobs at the `--auth-shell-divider-*`
+ * layer. That keeps #263's canonical login geometry byte-for-byte identical while breaking the
+ * coupling the issue reported — a service retuning its login divider no longer retunes every day
+ * divider in its message streams, and vice versa. New code that wants a labelled rule outside an
+ * auth form should use `<Separator label>` directly.
  */
 export declare function AuthDivider({ label, className }: AuthDividerProp): import("react").JSX.Element;

package/dist/components/layout/auth-divider.js

@@ -1,18 +1,14 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+"use client";
+import { jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
+import { Separator } from "../ui/separator.js";
 function AuthDivider({ label, className }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    Separator,
     {
       "data-slot": "auth-divider",
-      className: cn("ui-auth-divider", className),
-      role: "separator",
-      "aria-label": label,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "ui-auth-divider-rule", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx("span", { className: "ui-auth-divider-label", "aria-hidden": "true", children: label }),
-        /* @__PURE__ */ jsx("span", { className: "ui-auth-divider-rule", "aria-hidden": "true" })
-      ]
+      label,
+      className: cn("ui-auth-divider", className)
     }
   );
 }

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

@@ -39,6 +39,7 @@ export type { MasterDetailProps } from "./master-detail.js";
 export { SplitPane } from "./split-pane.js";
 export type { SplitPaneProps } from "./split-pane.js";
 export { Separator } from "./separator.js";
+export type { SeparatorProp, SeparatorProps } from "./separator.js";
 export { AspectRatio } from "./aspect-ratio.js";
 export { LegalDocumentShell } from "./legal-document-shell.js";
 export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProps, } from "./legal-document-shell.js";

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

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

@@ -38,6 +38,7 @@ function PageContainerRoot({
   subtitle,
   status,
   extra,
+  toolbar,
   footer,
   breadcrumb,
   breadcrumbLabel,
@@ -48,6 +49,7 @@ function PageContainerRoot({
   variant = "default",
   preset = "default",
   headerLayout = "stack",
+  headerScale = "document",
   measure = "default",
   stickyFooter = false,
   footerReveal = "always",
@@ -63,6 +65,7 @@ function PageContainerRoot({
     {
       "data-preset": preset,
       "data-measure": measure,
+      "data-header-scale": headerScale === "chrome" ? "chrome" : void 0,
       "data-revealed": revealed ? "true" : void 0,
       className: cn(
         "ui-page-container",
@@ -91,30 +94,38 @@ function PageContainerRoot({
                   className: "ui-breadcrumb",
                   children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
                     const isLast = i === breadcrumb.length - 1;
-                    return /* @__PURE__ */ jsxs("li", { className: "ui-inline-xs", children: [
-                      item.to && !isLast ? /* @__PURE__ */ jsx(
-                        LinkComponent,
-                        {
-                          href: item.to,
-                          to: item.to,
-                          className: "hover:text-foreground hover:underline",
-                          children: item.label
-                        }
-                      ) : /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: isLast ? "text-foreground" : "",
-                          "aria-current": isLast ? "page" : void 0,
-                          children: item.label
-                        }
-                      ),
-                      !isLast && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3", "aria-hidden": "true" })
-                    ] }, i);
+                    return (
+                      // The package's own breadcrumb item hook (gh#319): same
+                      // `--space-inline-xs` gap the previous `.ui-inline-xs` gave, and it brings
+                      // `.ui-breadcrumb-item svg { 0.75rem }` with it, so the separator glyph no
+                      // longer carries a `size-3` literal. It also drops `.ui-inline-xs`'s
+                      // `flex-wrap: wrap` — a crumb must not break between its label and its
+                      // chevron; the LIST wraps instead, exactly as <Breadcrumb> already behaves.
+                      /* @__PURE__ */ jsxs("li", { className: "ui-breadcrumb-item", children: [
+                        item.to && !isLast ? /* @__PURE__ */ jsx(
+                          LinkComponent,
+                          {
+                            href: item.to,
+                            to: item.to,
+                            className: "hover:text-foreground hover:underline",
+                            children: item.label
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: isLast ? "text-foreground" : "",
+                            "aria-current": isLast ? "page" : void 0,
+                            children: item.label
+                          }
+                        ),
+                        !isLast && /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+                      ] }, i)
+                    );
                   }) })
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "ui-page-header-row", children: [
-                /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading min-w-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading", children: [
                   headerLoading ? /* @__PURE__ */ jsx("h1", { className: "ui-page-title ui-skeleton-block ui-page-title-placeholder", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("layout.pageHeader.loading") }) }) : status != null ? /* @__PURE__ */ jsxs("div", { className: "ui-page-header-title-row", children: [
                     /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
                     /* @__PURE__ */ jsx("div", { className: "ui-page-header-status", children: status })
@@ -136,6 +147,7 @@ function PageContainerRoot({
             ]
           }
         ),
+        toolbar != null && /* @__PURE__ */ jsx("div", { className: "ui-page-toolbar", children: toolbar }),
         children != null && /* @__PURE__ */ jsx("div", { className: "ui-page-body", children }),
         footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", children: footer })
       ]