@godxjp/ui 18.5.0 → 18.7.0

package/dist/components/layout/page-header.d.ts

@@ -0,0 +1,22 @@
+/**
+ * PageHeader — the canonical page title band (gh#255).
+ *
+ * This is the geometry `PageContainer` has always rendered, lifted into its own export so a
+ * consumer can mount it OUTSIDE a full page shell — a Sheet detail, a `MasterDetail` detail pane, a
+ * tab body, a nested route header — without re-authoring `.ui-page-header` CSS locally. There is
+ * exactly ONE implementation: `PageContainer` renders this component, so the two can never drift.
+ *
+ * The band owns: breadcrumbs (a named `<nav>` landmark with `aria-current="page"` on the leaf), the
+ * `<h1>` title, the subtitle/description, a status/meta slot, the `extra` action region, the
+ * responsive overflow arrangement (`layout`), and the pending state (`loading`). It owns no page
+ * chrome — padding, measure and body rhythm stay with `PageContainer`.
+ *
+ * DENIED / ERROR are deliberately NOT states of this component: a page the user may not see must
+ * not render its title, breadcrumb trail or actions at all (they leak the resource's existence and
+ * its name). That whole-surface contract belongs to `ErrorSurface`, which is the canonical public
+ * replacement — see `docs/CANONICAL-CONTRACTS.md`.
+ */
+import * as React from "react";
+import type { PageHeaderProp } from "../../props/components/layout.prop.js";
+export type { PageHeaderProp, PageHeaderProp as PageHeaderProps, } from "../../props/components/layout.prop.js";
+export declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProp & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+const PageHeader = React.forwardRef(function PageHeader2({
+  title,
+  subtitle,
+  meta,
+  extra,
+  breadcrumb,
+  breadcrumbLabel,
+  breadcrumbAriaLabel,
+  linkComponent: LinkComponent = "a",
+  layout = "stack",
+  loading = false,
+  className
+}, ref) {
+  const { t } = useTranslation();
+  return (
+    // `data-layout` is the only hook the header arrangement needs: `stack` (the default)
+    // matches no rule, so the historical geometry is untouched, while `responsive-inline`
+    // selects the compact-range rules that keep `extra` beside the title band (gh#231).
+    /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref,
+        className: cn("ui-page-header", className),
+        "data-layout": layout,
+        "aria-busy": loading ? "true" : void 0,
+        children: [
+          breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx(
+            "nav",
+            {
+              "aria-label": breadcrumbLabel ?? breadcrumbAriaLabel ?? t("navigation.breadcrumb.ariaLabel"),
+              className: "ui-breadcrumb",
+              children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
+                const isLast = i === breadcrumb.length - 1;
+                return /* @__PURE__ */ jsxs("li", { className: "ui-inline-xs", children: [
+                  item.to && !isLast ? /* @__PURE__ */ jsx(
+                    LinkComponent,
+                    {
+                      href: item.to,
+                      to: item.to,
+                      className: "hover:text-foreground hover:underline",
+                      children: item.label
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: isLast ? "text-foreground" : "",
+                      "aria-current": isLast ? "page" : void 0,
+                      children: item.label
+                    }
+                  ),
+                  !isLast && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3", "aria-hidden": "true" })
+                ] }, i);
+              }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "ui-page-header-row", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading min-w-0", children: [
+              loading ? /* @__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") }) }) : meta != null ? /* @__PURE__ */ jsxs("div", { className: "ui-page-title-band", children: [
+                /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
+                /* @__PURE__ */ jsx("div", { className: "ui-page-header-meta", children: meta })
+              ] }) : /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
+              loading ? (
+                // Decorative only — the pending state is already announced once by the heading above,
+                // so a second live placeholder here would double-announce it.
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "ui-page-subtitle ui-skeleton-block ui-page-subtitle-placeholder",
+                    "aria-hidden": "true"
+                  }
+                )
+              ) : subtitle && /* @__PURE__ */ jsx("p", { className: "ui-page-subtitle", children: subtitle })
+            ] }),
+            extra && /* @__PURE__ */ jsx("div", { className: "ui-page-header-extra", children: extra })
+          ] })
+        ]
+      }
+    )
+  );
+});
+export {
+  PageHeader
+};

package/dist/components/navigation/filter-bar.d.ts

@@ -1,6 +1,6 @@
 import type { ToolbarGroupProp, ToolbarProp } from "../../props/components/navigation.prop.js";
-export type { FilterBarOverflowProp, ToolbarGroupProp, ToolbarGroupProp as ToolbarGroupProps, ToolbarGroupProp as FilterBarGroupProp, ToolbarGroupProp as FilterBarGroupProps, ToolbarProp, ToolbarProp as ToolbarProps, ToolbarProp as FilterBarProp, ToolbarProp as FilterBarProps, } from "../../props/components/navigation.prop.js";
-export declare function Toolbar({ onClear, hasActiveFilters, sticky, overflow, className, children, }: ToolbarProp): import("react").JSX.Element;
+export type { FilterBarChipProp, FilterBarChipProp as FilterBarChipProps, FilterBarOverflowProp, ToolbarGroupProp, ToolbarGroupProp as ToolbarGroupProps, ToolbarGroupProp as FilterBarGroupProp, ToolbarGroupProp as FilterBarGroupProps, ToolbarProp, ToolbarProp as ToolbarProps, ToolbarProp as FilterBarProp, ToolbarProp as FilterBarProps, } from "../../props/components/navigation.prop.js";
+export declare function Toolbar({ onClear, hasActiveFilters, sticky, overflow, search, chips, onChipRemove, resultCount, actions, className, children, }: ToolbarProp): import("react").JSX.Element;
 export declare function ToolbarGroup({ label, controlId, className, children }: ToolbarGroupProp): import("react").JSX.Element;
 /**
  * Canonical list-page filter strip.

package/dist/components/navigation/filter-bar.js

@@ -10,10 +10,16 @@ function Toolbar({
   hasActiveFilters = true,
   sticky = false,
   overflow = "wrap",
+  search,
+  chips,
+  onChipRemove,
+  resultCount,
+  actions,
   className,
   children
 }) {
   const { t } = useTranslation();
+  const hasChips = chips != null && chips.length > 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -22,11 +28,48 @@ function Toolbar({
       "data-overflow": overflow,
       className: cn("ui-toolbar", sticky && "ui-toolbar-sticky", className),
       children: [
+        search != null && // A region, not a bare child, so the search control gets ONE measure
+        // (--filter-bar-search-width) across every list page instead of whatever width the
+        // caller's control happened to have.
+        /* @__PURE__ */ jsx("div", { className: "ui-filter-bar-search", children: search }),
         children,
+        hasChips && // `group` (not a second toolbar) — a toolbar may own a group, and the chips are a labelled
+        // set of related controls rather than an independent toolbar competing for the same role.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "group",
+            "aria-label": t("navigation.filterBar.appliedFilters"),
+            className: "ui-filter-bar-chips",
+            children: chips.map((chip) => /* @__PURE__ */ jsxs("span", { className: "ui-filter-bar-chip", children: [
+              /* @__PURE__ */ jsx("span", { className: "ui-filter-bar-chip-label", children: chip.label }),
+              (chip.onRemove || onChipRemove) && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "xs",
+                  className: "ui-filter-bar-chip-remove",
+                  "aria-label": t("navigation.filterBar.removeFilter", { label: chip.label }),
+                  onClick: () => {
+                    chip.onRemove?.();
+                    onChipRemove?.(chip.id);
+                  },
+                  children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                }
+              )
+            ] }, chip.id))
+          }
+        ),
+        resultCount !== void 0 && // The whole reason this is a prop rather than caller markup: a sighted user SEES the table
+        // change, and a polite live region is what tells everyone else that filtering happened.
+        // The number is grouped by `Intl.NumberFormat` and the noun selected by CLDR plural rules
+        // for the active locale — never a hand-built "N items".
+        /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "ui-filter-bar-count", children: t("navigation.filterBar.resultCount", { count: resultCount }) }),
         onClear && hasActiveFilters && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: onClear, className: "ui-toolbar-clear", children: [
           /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
           t("common.clearFilters")
-        ] })
+        ] }),
+        actions != null && /* @__PURE__ */ jsx("div", { className: "ui-filter-bar-actions", children: actions })
       ]
     }
   );

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

@@ -5,7 +5,7 @@ export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarLabel
 export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, } from "./navigation-menu.js";
 export { Steps } from "./steps.js";
 export { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.js";
-export type { FilterBarGroupProp, FilterBarGroupProps, FilterBarProp, FilterBarProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";
+export type { FilterBarChipProp, FilterBarChipProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarProp, FilterBarProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";
 export { AppSettingPicker } from "./app-setting-picker.js";
 export type { AppSettingPickerProp, AppSettingPickerProps, AppSettingKind, } from "./app-setting-picker.js";
 export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop.js";

package/dist/components/navigation/steps.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Check, Circle, Loader2, X } from "lucide-react";
+import { Check, ChevronRight, Circle, Loader2, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { controlIconClass } from "../../lib/control-styles.js";
@@ -68,12 +68,13 @@ function Steps({
   const base = defaultValue;
   const isVertical = orientation === "vertical";
   const compact = size === "sm";
+  const inline = type === "inline";
   return /* @__PURE__ */ jsx(
     "ol",
     {
       className: cn(
         "flex w-full",
-        isVertical ? "flex-col gap-0" : "flex-row items-start",
+        inline ? "ui-steps-inline" : isVertical ? "flex-col gap-0" : "flex-row items-start",
         className
       ),
       "aria-label": t("navigation.steps.ariaLabel"),
@@ -84,12 +85,19 @@ function Steps({
         const clickable = interactive && !item.disabled;
         const description = item.description;
         const isCurrent = absoluteIndex === current;
+        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 stepClassName = cn(
           "group flex min-w-0",
-          isVertical ? "flex-row items-start gap-3" : "flex-col items-center",
+          inline ? "ui-steps-inline-control" : isVertical ? "flex-row items-start gap-3" : "flex-col items-center",
           clickable ? "cursor-pointer" : "cursor-default"
         );
-        const stepInner = /* @__PURE__ */ jsxs(Fragment, { children: [
+        const stepInner = inline ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "ui-steps-inline-index", "aria-hidden": "true", children: absoluteIndex + 1 }),
+          /* @__PURE__ */ jsx("span", { className: "ui-steps-inline-title", children: item.title }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: statusLabel })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(StepIcon, { status: stepStatus, icon: item.icon, type }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -119,26 +127,37 @@ function Steps({
             }
           )
         ] });
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsxs(
           "li",
           {
             "aria-current": isCurrent ? "step" : void 0,
             className: cn(
-              "relative flex min-w-0 flex-1",
-              isVertical ? "flex-row gap-3 pb-8 last:pb-0" : "flex-col items-center text-center",
-              !isVertical && index < items.length - 1 && "after:bg-border after:absolute after:top-4 after:h-px",
-              !isVertical && index < items.length - 1 && "after:left-[calc(50%+1.25rem)] after:w-[calc(100%-2.5rem)]"
+              "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)]"
             ),
-            children: interactive ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                disabled: !clickable,
-                onClick: clickable ? () => onValueChange?.(absoluteIndex) : void 0,
-                className: stepClassName,
-                children: stepInner
-              }
-            ) : /* @__PURE__ */ jsx("span", { className: stepClassName, children: stepInner })
+            "data-status": stepStatus,
+            children: [
+              interactive ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled: !clickable,
+                  onClick: clickable ? () => onValueChange?.(absoluteIndex) : void 0,
+                  className: stepClassName,
+                  children: stepInner
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: stepClassName, children: stepInner }),
+              inline && index < items.length - 1 ? /* @__PURE__ */ jsx(
+                ChevronRight,
+                {
+                  className: "ui-steps-inline-separator rtl:rotate-180",
+                  "aria-hidden": "true"
+                }
+              ) : null
+            ]
           },
           index
         );

package/dist/components/navigation/tabs.js

@@ -42,8 +42,9 @@ function Tabs({
           TabsList,
           {
             "data-slot": "tabs-list",
+            variant: variant === "line" ? "line" : "default",
             className: cn(
-              variant === "line" && "h-auto w-full justify-start rounded-none border-b bg-transparent p-0",
+              variant === "line" && "h-auto w-full justify-start border-b p-0",
               variant === "card" && "w-full justify-start",
               listClassName
             ),
@@ -53,7 +54,9 @@ function Tabs({
                 value: item.value,
                 disabled: item.disabled,
                 className: cn(
-                  variant === "line" && "data-[state=active]:border-primary rounded-none border-b-2 border-transparent bg-transparent px-4 py-2 shadow-none data-[state=active]:bg-transparent data-[state=active]:shadow-none",
+                  // 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"
                 ),
                 children: item.label
@@ -117,7 +120,13 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ref,
     "data-slot": "tabs-trigger",
     className: cn(
-      "text-muted-foreground ring-offset-background hover:text-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-ring/50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:ring-primary/25 after:bg-foreground relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:ring-1 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+      // The SELECTED-state ring (`ring-1 ring-primary/25`) is scoped to the default/card lists —
+      // the `line` variant is underline-only (gh#248) and must NEVER paint a surrounding ring, or
+      // it competes with (and at equal specificity overrides) the `:focus-visible` ring. The
+      // focus-visible ring/outline below is deliberately left unscoped: every variant keeps a
+      // visible keyboard focus indicator (WCAG 2.4.7). The line indicator itself lives in
+      // src/styles/navigation-layout.css so it reads the --tabs-indicator-* tokens.
+      "text-muted-foreground ring-offset-background hover:text-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-ring/50 data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:ring-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=default]/tabs-list:data-[state=active]:ring-1 group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
       className
     ),
     ...props

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+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"> & 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

@@ -3,11 +3,12 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cn } from "../../lib/utils.js";
-const Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const Avatar = React.forwardRef(({ className, shape = "circle", ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
   {
     ref,
     "data-slot": "avatar",
+    "data-shape": shape === "square" ? "square" : void 0,
     className: cn("ui-avatar", className),
     ...props
   }

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

@@ -26,7 +26,10 @@ export declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.
     render?: never;
     children: React.ReactNode;
 } & React.RefAttributes<HTMLInputElement>, "ref">) & React.RefAttributes<HTMLInputElement>>;
-export declare const InputOTPGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export type { InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProp as InputOTPGroupProps, } from "../../props/components/data-entry.prop.js";
+export declare const InputOTPGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    appearance?: import("./input-otp.js").InputOTPGroupAppearanceProp;
+} & React.RefAttributes<HTMLDivElement>>;
 export declare const InputOTPSlot: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     index: number;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/input-otp.js

@@ -16,11 +16,12 @@ const InputOTP = React.forwardRef(({ className, containerClassName, ...props },
 ));
 InputOTP.displayName = "InputOTP";
 const InputOTPGroup = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ appearance = "slots", className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       "data-slot": "input-otp-group",
+      "data-appearance": appearance,
       className: cn("ui-otp-group", className),
       ...props
     }

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

@@ -1,11 +1,14 @@
 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">) & {
-    variant?: ToggleProps["variant"];
-    size?: ToggleProps["size"];
+    variant?: ToggleGroupVariant;
+    size?: ToggleGroupSize;
 }) & React.RefAttributes<HTMLDivElement>>;
 export declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
-    variant?: ToggleProps["variant"];
-    size?: ToggleProps["size"];
+    variant?: ToggleGroupVariant;
+    size?: ToggleGroupSize;
 } & React.RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -4,28 +4,39 @@ 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";
-const ToggleGroup = React.forwardRef(({ className, variant = "default", size = "default", children, ...props }, ref) => /* @__PURE__ */ jsx(
-  ToggleGroupPrimitive.Root,
-  {
-    ref,
-    "data-slot": "toggle-group",
-    "data-variant": variant,
-    "data-size": size,
-    className: cn("ui-toggle-group", className),
-    ...props,
-    children
-  }
-));
+const ToggleGroupContext = React.createContext({});
+const ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => {
+  const context = React.useMemo(() => ({ variant, size }), [variant, size]);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      ref,
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn("ui-toggle-group", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: context, children })
+    }
+  );
+});
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-const ToggleGroupItem = React.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
-  ToggleGroupPrimitive.Item,
-  {
-    ref,
-    "data-slot": "toggle-group-item",
-    className: cn(toggleVariants({ variant, size }), className),
-    ...props
-  }
-));
+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
+    }
+  );
+});
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 export {
   ToggleGroup,

package/dist/email/brand-mark.d.ts

@@ -4,7 +4,10 @@
  * The mark is an emerald CAPSULE with an internal light GLYPH bar — the same artwork the React
  * `<Logo mark="godx" />` paints, at the same 32×32 viewBox and the same coordinates (a test asserts
  * the capsule path is byte-identical to the component's, so the two can never diverge). A capsule
- * WITHOUT the internal glyph is the incomplete mark and must not ship.
+ * WITHOUT the internal glyph is the incomplete mark and must not ship. The ARTWORK matches the
+ * canonical SCR-302 raster exactly; only the rendered BOX is email-specific — the canonical email
+ * header sets it at 22px (`--email-mark-width`) beside the "GoDX" wordmark, where the web
+ * `<Logo mark="godx" />` box is 32px.
  *
  * Nothing here references an external or relative asset: an email template has no base URL it can
  * trust, remote images are blocked by default in most clients, and a `cid:` attachment needs
@@ -16,8 +19,10 @@
  *     Renders everywhere; degrades to a square emerald block with a light bar in Outlook's Word
  *     renderer (which drops `border-radius`) — still recognisably the mark, never a broken image.
  *
- * Colours come from `EMAIL_COLORS` (derived from `--success` / `--success-foreground`, the roles
- * `--logo-godx-color` already points at), so a re-themed identity role re-tints the mark.
+ * Colours come from `EMAIL_COLORS` (derived from `--brand` / `--brand-foreground`, the roles
+ * `--logo-godx-color` points at), so a re-themed identity role re-tints the mark. NOT `--success`:
+ * that is the wakatake STATUS green, and binding identity to it rendered the mark ~ΔE76 17 away
+ * from the canonical emerald until gh#250 introduced the dedicated `--brand` role.
  */
 import { type EmailHex } from "./color.js";
 /** A rounded rectangle in the mark's 32×32 coordinate space. */
@@ -42,9 +47,9 @@ export declare const EMAIL_BRAND_MARK_GLYPH: EmailBrandMarkRect;
 export declare function roundedRectPath({ x, y, width, height, radius }: EmailBrandMarkRect): string;
 /** Options for rendering the mark. Every default comes from the token contract. */
 export interface EmailBrandMarkOptions {
-    /** Rendered width in px. Default `EMAIL_BRAND_MARK.widthPx` (32). */
+    /** Rendered width in px. Default `EMAIL_BRAND_MARK.widthPx` (the canonical 22px header box). */
     width?: number;
-    /** Rendered height in px. Default `EMAIL_BRAND_MARK.heightPx` (32). */
+    /** Rendered height in px. Default `EMAIL_BRAND_MARK.heightPx` (the canonical 22px header box). */
     height?: number;
     /** Capsule fill. Default `EMAIL_COLORS.brand`. */
     color?: EmailHex;
@@ -82,6 +87,17 @@ export interface EmailBrandMark {
     readonly glyph: EmailBrandMarkRect;
     readonly capsulePath: string;
     readonly glyphPath: string;
+    /**
+     * Mark ↔ wordmark separation in the canonical header LOCKUP. The mark alone is not the header:
+     * the canonical card sets the mark beside a readable "GoDX" wordmark, and the wordmark — not the
+     * mark — carries the accessible name (render the mark with `label: ""` in that pairing).
+     */
+    readonly gap: string;
+    readonly gapPx: number;
+    /** Wordmark type size in the lockup. */
+    readonly wordmarkFontSize: string;
+    readonly wordmarkFontSizePx: number;
+    readonly wordmarkFontWeight: number;
     /** Inline `<svg>` — highest fidelity. */
     readonly svg: string;
     /** `data:` URL of the same SVG, for `<img src>`. */

package/dist/email/brand-mark.js

@@ -67,6 +67,11 @@ const EMAIL_BRAND_MARK = Object.freeze({
   glyph: EMAIL_BRAND_MARK_GLYPH,
   capsulePath: CAPSULE_PATH,
   glyphPath: GLYPH_PATH,
+  gap: EMAIL_GEOMETRY_SOURCE["--email-mark-gap"],
+  gapPx: Number.parseFloat(EMAIL_GEOMETRY_SOURCE["--email-mark-gap"]),
+  wordmarkFontSize: EMAIL_GEOMETRY_SOURCE["--email-wordmark-font-size"],
+  wordmarkFontSizePx: Number.parseFloat(EMAIL_GEOMETRY_SOURCE["--email-wordmark-font-size"]),
+  wordmarkFontWeight: Number.parseFloat(EMAIL_GEOMETRY_SOURCE["--email-wordmark-font-weight"]),
   svg: emailBrandMarkSvg(),
   dataUri: emailBrandMarkDataUri(),
   tableHtml: emailBrandMarkTableHtml()

package/dist/email/color.d.ts

@@ -41,7 +41,8 @@ export declare function hslToHex(triplet: string): EmailHex;
  * | `border`                      | `--border`                        | card edge, footer hairline        |
  * | `primary` / `primaryForeground`| `--primary` / `--primary-foreground` | the one CTA                  |
  * | `focus`                       | `--ring`                          | focus affordance in webmail panes |
- * | `brand` / `brandForeground`   | `--success` / `--success-foreground` | the GoDX capsule + its glyph   |
+ * | `brand` / `brandForeground`   | `--brand` / `--brand-foreground`  | the GoDX capsule + its glyph      |
+ * | `urgency` / `urgencyForeground`| `--attention` / `--attention-foreground` | action-required accent / solid large label |
  */
 export declare const EMAIL_COLORS: Readonly<Record<EmailColorToken, EmailHex>>;
 /**

package/dist/email/geometry.d.ts

@@ -45,8 +45,16 @@ export interface EmailShellTokens {
 export declare const EMAIL_SHELL: EmailShellTokens;
 /** Type ramp. Sizes are literal px — no email client resolves the rem scale reliably. */
 export interface EmailTypographyTokens {
-    /** Email-safe font stack. Web-font `@font-face` is unavailable in most clients — never rely on it. */
+    /**
+     * The canonical DXS stack, M PLUS 2 first. Web-font `@font-face` is unavailable in most clients,
+     * so this NAMES the face and degrades: a client with M PLUS 2 installed (or a webmail that
+     * already loaded it) renders the canonical face; everything else falls to Hiragino (macOS/iOS) →
+     * Yu Gothic (Windows) → Noto Sans JP → Meiryo → the system UI face → Arial → `sans-serif`. Family
+     * names are SINGLE-quoted so the value drops straight into a double-quoted `style="…"` attribute.
+     */
     readonly fontFamily: string;
+    /** Mono stack for invoice ids, masked card numbers, ISO dates and amounts. */
+    readonly monoFontFamily: string;
     readonly bodyFontSize: string;
     readonly bodyFontSizePx: number;
     readonly bodyLineHeight: number;

package/dist/email/geometry.js

@@ -30,6 +30,7 @@ const EMAIL_SHELL = Object.freeze({
 });
 const EMAIL_TYPOGRAPHY = Object.freeze({
   fontFamily: raw("--email-font-family-sans"),
+  monoFontFamily: raw("--email-font-family-mono"),
   bodyFontSize: raw("--email-body-font-size"),
   bodyFontSizePx: num("--email-body-font-size"),
   bodyLineHeight: num("--email-body-line-height"),

package/dist/email/index.d.ts

@@ -23,13 +23,14 @@
  * ## Usage
  *
  * ```ts
- * import { EMAIL_COLORS, EMAIL_SHELL, EMAIL_CTA, EMAIL_BRAND_MARK, emailInlineStyle } from "@godxjp/ui/email";
+ * import { EMAIL_COLORS, EMAIL_URGENCY, EMAIL_SHELL, EMAIL_CTA, EMAIL_BRAND_MARK, emailInlineStyle } from "@godxjp/ui/email";
  *
  * const card = emailInlineStyle({
  *   width: EMAIL_SHELL.width,
  *   padding: EMAIL_SHELL.padding,
  *   backgroundColor: EMAIL_COLORS.surface,
  *   border: `${EMAIL_SHELL.borderWidth} solid ${EMAIL_COLORS.border}`,
+ *   borderTopColor: EMAIL_URGENCY.accent,
  *   borderRadius: EMAIL_SHELL.radius,
  * });
  * ```
@@ -52,14 +53,18 @@ export { hslToHex, EMAIL_COLORS, EMAIL_COLORS_DARK, type EmailColorToken, type E
 export { EMAIL_SHELL, EMAIL_TYPOGRAPHY, EMAIL_CTA, EMAIL_FOOTER, EMAIL_FOCUS, EMAIL_MOBILE, type EmailTokenName, type EmailShellTokens, type EmailTypographyTokens, type EmailCtaTokens, type EmailFooterTokens, type EmailFocusTokens, type EmailMobileTokens, } from "./geometry.js";
 export { EMAIL_BRAND_MARK, EMAIL_BRAND_MARK_VIEWBOX, EMAIL_BRAND_MARK_CAPSULE, EMAIL_BRAND_MARK_GLYPH, emailBrandMarkSvg, emailBrandMarkDataUri, emailBrandMarkTableHtml, roundedRectPath, type EmailBrandMark, type EmailBrandMarkOptions, type EmailBrandMarkRect, } from "./brand-mark.js";
 export { emailInlineStyle, type EmailStyleDeclarations } from "./inline-style.js";
+export { EMAIL_URGENCY, EMAIL_URGENCY_DARK, type EmailUrgencyTokens } from "./urgency.js";
 export { EMAIL_COLOR_SOURCE, EMAIL_COLOR_SOURCE_DARK, EMAIL_GEOMETRY_SOURCE, type EmailColorSource, } from "./tokens.generated.js";
 import { EMAIL_COLORS, EMAIL_COLORS_DARK } from "./color.js";
 import { EMAIL_SHELL, EMAIL_TYPOGRAPHY, EMAIL_CTA, EMAIL_FOOTER, EMAIL_FOCUS, EMAIL_MOBILE } from "./geometry.js";
 import { EMAIL_BRAND_MARK } from "./brand-mark.js";
+import { EMAIL_URGENCY, EMAIL_URGENCY_DARK } from "./urgency.js";
 /** The whole contract in one object — the shape `EMAIL_TOKENS_JSON` serialises. */
 export interface EmailTokens {
     readonly colors: typeof EMAIL_COLORS;
     readonly colorsDark: typeof EMAIL_COLORS_DARK;
+    readonly urgency: typeof EMAIL_URGENCY;
+    readonly urgencyDark: typeof EMAIL_URGENCY_DARK;
     readonly shell: typeof EMAIL_SHELL;
     readonly typography: typeof EMAIL_TYPOGRAPHY;
     readonly cta: typeof EMAIL_CTA;