@godxjp/ui 18.7.0 → 18.8.0

package/dist/components/data-display/card.d.ts

@@ -3,9 +3,21 @@ import { type VariantProps } from "class-variance-authority";
 import type { LucideIcon } from "lucide-react";
 import type { HeadingLevelProp } from "../../props/vocabulary/index.js";
 type CardSize = "md" | "compact";
-/** Semantic leading-edge accent stripe (border-inline-start; width via the
- *  --card-accent-rail-width token, default 6px). */
+/** Semantic accent tone. `accentPlacement` decides WHERE it is drawn — a leading-edge
+ *  stripe (default) or the full perimeter. */
 type CardAccent = "primary" | "success" | "warning" | "info" | "attention" | "destructive";
+/**
+ * Where the semantic `accent` tone is drawn.
+ *
+ * - `"edge"` (default) — the leading-edge stripe on `border-inline-start` only, at the
+ *   `--card-accent-rail-width` measure (6px). The classic "this row needs a look" rail.
+ * - `"perimeter"` — a full attention border around the WHOLE card in the same semantic
+ *   tone, measured by `--card-accent-perimeter-width` + `--card-accent-perimeter-ring-width`.
+ *   This is what `variant="featured"` does, except the tone is yours instead of `--primary`,
+ *   so a card can shout "action required" (`accent="attention"`) or "this failed"
+ *   (`accent="destructive"`) without borrowing the brand colour.
+ */
+type CardAccentPlacement = "edge" | "perimeter";
 /** Surface fill — plain card, muted band, borderless outline, or emphasized featured ring. */
 type CardVariant = "default" | "muted" | "outline" | "featured";
 /** Padding density — base 16px · tight 12px · cozy 20px. */
@@ -16,6 +28,11 @@ declare const cardVariants: (props?: ({
 export type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants> & {
     size?: CardSize;
     accent?: CardAccent;
+    /**
+     * Where `accent` is drawn — `"edge"` (default, the leading-edge stripe) or `"perimeter"`
+     * (a full attention border in the accent tone). Inert without `accent`.
+     */
+    accentPlacement?: CardAccentPlacement;
     variant?: CardVariant;
     density?: CardDensity;
 };
@@ -24,6 +41,11 @@ export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
     size?: CardSize;
     accent?: CardAccent;
+    /**
+     * Where `accent` is drawn — `"edge"` (default, the leading-edge stripe) or `"perimeter"`
+     * (a full attention border in the accent tone). Inert without `accent`.
+     */
+    accentPlacement?: CardAccentPlacement;
     variant?: CardVariant;
     density?: CardDensity;
 } & React.RefAttributes<HTMLDivElement>>;
@@ -136,9 +158,11 @@ export type StatCardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<
     inverse?: boolean;
     /** Semantic leading-edge rail (Card accent) — flags a KPI needing attention. */
     accent?: CardAccent;
+    /** Where `accent` is drawn — `"edge"` (default rail) or `"perimeter"` (full attention border). */
+    accentPlacement?: CardAccentPlacement;
 };
 /** KPI / stat tile — token-driven layout aligned to dashboard KPI cards. */
-export declare function StatCard({ label, value, hint, icon: Icon, delta, layout, align, inverse, accent, className, size, ...props }: StatCardProps): React.JSX.Element;
+export declare function StatCard({ label, value, hint, icon: Icon, delta, layout, align, inverse, accent, accentPlacement, className, size, ...props }: StatCardProps): React.JSX.Element;
 /** Header actions slot — pair with `CardHeader className="flex flex-row …"`. */
 export declare const CardAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -12,7 +12,7 @@ const cardVariants = cva("group/card", {
   defaultVariants: { size: "md" }
 });
 const Card = React.forwardRef(
-  ({ className, size = "md", accent, variant, density, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, size = "md", accent, accentPlacement, variant, density, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -20,6 +20,7 @@ const Card = React.forwardRef(
       "data-slot": "card",
       "data-size": size === "compact" ? "compact" : void 0,
       "data-accent": accent,
+      "data-accent-placement": accentPlacement === "perimeter" ? "perimeter" : void 0,
       "data-variant": variant && variant !== "default" ? variant : void 0,
       "data-density": density,
       ...props
@@ -108,6 +109,7 @@ function StatCard({
   align = "start",
   inverse = false,
   accent,
+  accentPlacement,
   className,
   size = "compact",
   ...props
@@ -118,6 +120,7 @@ function StatCard({
     {
       size: size ?? "compact",
       accent,
+      accentPlacement,
       className: cn("ui-stat-card", className),
       "data-stat-card": "",
       "data-stat-layout": layout,

package/dist/components/data-entry/input-otp.d.ts

@@ -1,2 +1,2 @@
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "../ui/input-otp.js";
-export type { InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProps, } from "../ui/input-otp.js";
+export type { InputOTPAlignProp, InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProps, } from "../ui/input-otp.js";

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

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { StepsProp } from "../../props/components/navigation.prop.js";
-export type { StepsProp, StepsProp as StepsProps, StepItemProp, StepStatusProp, } from "../../props/components/navigation.prop.js";
-export declare function Steps({ items, value: current, defaultValue, status: currentStatus, orientation, type, size, titlePlacement, onValueChange, className, }: StepsProp): React.JSX.Element;
+export type { StepsProp, StepsProp as StepsProps, StepItemProp, StepStatusProp, StepsSeparatorProp, } from "../../props/components/navigation.prop.js";
+export declare function Steps({ items, value: current, defaultValue, status: currentStatus, orientation, type, size, titlePlacement, separator, onValueChange, className, }: StepsProp): React.JSX.Element;

package/dist/components/navigation/steps.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Check, ChevronRight, Circle, Loader2, X } from "lucide-react";
+import { ArrowRight, 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";
@@ -61,6 +61,7 @@ function Steps({
   type = "default",
   size = "md",
   titlePlacement = "horizontal",
+  separator = "chevron",
   onValueChange,
   className
 }) {
@@ -69,6 +70,7 @@ function Steps({
   const isVertical = orientation === "vertical";
   const compact = size === "sm";
   const inline = type === "inline";
+  const SeparatorIcon = separator === "arrow" ? ArrowRight : ChevronRight;
   return /* @__PURE__ */ jsx(
     "ol",
     {
@@ -151,7 +153,7 @@ function Steps({
                 }
               ) : /* @__PURE__ */ jsx("span", { className: stepClassName, children: stepInner }),
               inline && index < items.length - 1 ? /* @__PURE__ */ jsx(
-                ChevronRight,
+                SeparatorIcon,
                 {
                   className: "ui-steps-inline-separator rtl:rotate-180",
                   "aria-hidden": "true"

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"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & Pick<AvatarProp, "shape" | "appearance"> & 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,12 +3,13 @@ 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, shape = "circle", ...props }, ref) => /* @__PURE__ */ jsx(
+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),
     ...props
   }

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

@@ -1,5 +1,15 @@
 import * as React from "react";
-export declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+import type { InputOTPAlignProp } from "../../props/components/data-entry.prop.js";
+/**
+ * InputOTP — the code-challenge field.
+ *
+ * `align` positions the whole row (groups + separators) on the main axis: `start` (default,
+ * unchanged), `center` — the canonical auth challenge — or `end`. The attribute lands on the
+ * hidden input because `input-otp` owns the container element; `.ui-otp-container` reads it back
+ * 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"> & {
     value?: string;
     onChange?: (newValue: string) => unknown;
     maxLength: number;
@@ -25,8 +35,10 @@ export declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.
 } & {
     render?: never;
     children: React.ReactNode;
-} & React.RefAttributes<HTMLInputElement>, "ref">) & React.RefAttributes<HTMLInputElement>>;
-export type { InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProp as InputOTPGroupProps, } from "../../props/components/data-entry.prop.js";
+} & React.RefAttributes<HTMLInputElement>, "ref">) & {
+    align?: InputOTPAlignProp;
+}) & React.RefAttributes<HTMLInputElement>>;
+export type { InputOTPAlignProp, 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>>;

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

@@ -4,11 +4,12 @@ import * as React from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Minus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-const InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+const InputOTP = React.forwardRef(({ className, containerClassName, align, ...props }, ref) => /* @__PURE__ */ jsx(
   OTPInput,
   {
     ref,
     "data-slot": "input-otp",
+    "data-align": align && align !== "start" ? align : void 0,
     containerClassName: cn("ui-otp-container", containerClassName),
     className: cn("ui-otp-input", className),
     ...props

package/dist/email/tokens.generated.d.ts

@@ -146,8 +146,8 @@ export declare const EMAIL_GEOMETRY_SOURCE: {
     readonly "--email-heading-font-size": "17px";
     readonly "--email-heading-line-height": "1.7";
     readonly "--email-heading-font-weight": "500";
-    readonly "--email-cta-height": "36px";
-    readonly "--email-cta-line-height": "36px";
+    readonly "--email-cta-height": "44px";
+    readonly "--email-cta-line-height": "44px";
     readonly "--email-cta-padding-x": "16px";
     readonly "--email-cta-radius": "6px";
     readonly "--email-cta-font-size": "14px";

package/dist/email/tokens.generated.js

@@ -136,8 +136,8 @@ const EMAIL_GEOMETRY_SOURCE = {
   "--email-heading-font-size": "17px",
   "--email-heading-line-height": "1.7",
   "--email-heading-font-weight": "500",
-  "--email-cta-height": "36px",
-  "--email-cta-line-height": "36px",
+  "--email-cta-height": "44px",
+  "--email-cta-line-height": "44px",
   "--email-cta-padding-x": "16px",
   "--email-cta-radius": "6px",
   "--email-cta-font-size": "14px",

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

@@ -62,9 +62,25 @@ export type DescriptionsItemProp = {
  */
 export type AvatarProp = React.ComponentPropsWithoutRef<"span"> & {
     shape?: AvatarShapeProp;
+    appearance?: AvatarAppearanceProp;
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
+/**
+ * Avatar fill treatment.
+ *
+ * - `"default"` — the identity fill: `--muted` for a person, the solid brand mark for
+ *   `shape="square"`.
+ * - `"tinted"` — the **capability medallion**: a soft role wash behind a role-coloured glyph.
+ *   This is the plate a capability/feature icon sits on (`shape="square" appearance="tinted"` for
+ *   the canonical rounded square). It exists because the medallion is a composition — `Avatar` +
+ *   a Lucide glyph, per docs/COMPOSITION-VS-COMPONENT.md — but its *tint* was not reachable from
+ *   a token, so consumers were re-deriving `hsl(var(--primary) / 0.1)` in page CSS or giving up
+ *   and rendering a bare glyph. Retune with `--avatar-tinted-*`.
+ *
+ * @see Avatar
+ */
+export type AvatarAppearanceProp = "default" | "tinted";
 /** @see Badge */
 export type BadgeProp = {
     variant?: "default" | "secondary" | "outline";

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

@@ -16,6 +16,13 @@ export type InputOTPGroupAppearanceProp = "slots" | "grouped";
 export type InputOTPGroupProp = React.HTMLAttributes<HTMLDivElement> & {
     appearance?: InputOTPGroupAppearanceProp;
 };
+/**
+ * Main-axis alignment of the whole code row (groups + separators) inside its container.
+ * `start` is the historical default. A centred challenge is the common auth case and used to
+ * force every consumer to wrap `.ui-otp-container` in their own flex-centring div.
+ * @see InputOTP
+ */
+export type InputOTPAlignProp = "start" | "center" | "end";
 /** @see Input */
 export type InputProp = React.InputHTMLAttributes<HTMLInputElement> & {
     /** Show an inline ✕ that clears the field while it holds text (default false). */

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

@@ -144,9 +144,18 @@ export type StepsProp = {
     type?: "default" | "dot" | "inline";
     size?: "md" | "sm";
     titlePlacement?: "horizontal" | "vertical";
+    /**
+     * The glyph between inline steps (`type="inline"` only). `chevron` (default, `›`) is the
+     * breadcrumb-flavoured original. `arrow` (`→`) is the canonical hosted-identity progression
+     * marker: a chevron reads as "drill into", an arrow reads as "then" — which is what a step row
+     * means. Ignored by every other `type`.
+     */
+    separator?: StepsSeparatorProp;
     onValueChange?: (value: number) => void;
     className?: ClassNameProp;
 };
+/** @see Steps — inline separator glyph. */
+export type StepsSeparatorProp = "chevron" | "arrow";
 /** Tab pane — Ant Design `items` entry. */
 export type TabItemProp = {
     value: string;

package/dist/props/registry.d.ts

@@ -1063,6 +1063,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display.prop.ts";
         readonly vocabulary: readonly ["AvatarShapeProp", "ChildrenProp", "ClassNameProp"];
     };
+    readonly AvatarAppearanceProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly BadgeProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
@@ -1474,6 +1479,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-entry.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly InputOTPAlignProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly StepItemProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";
@@ -1484,6 +1494,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/navigation.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly StepsSeparatorProp: {
+        readonly group: "navigation";
+        readonly file: "components/navigation.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly TabsProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";

package/dist/props/registry.js

@@ -1224,6 +1224,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-display.prop.ts",
     vocabulary: ["AvatarShapeProp", "ChildrenProp", "ClassNameProp"]
   },
+  AvatarAppearanceProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: []
+  },
   BadgeProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
@@ -1626,12 +1631,22 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-entry.prop.ts",
     vocabulary: []
   },
+  InputOTPAlignProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: []
+  },
   StepItemProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",
     vocabulary: ["TitleProp", "SubtitleProp", "DescriptionProp", "IconProp", "DisabledProp"]
   },
   StepStatusProp: { group: "navigation", file: "components/navigation.prop.ts", vocabulary: [] },
+  StepsSeparatorProp: {
+    group: "navigation",
+    file: "components/navigation.prop.ts",
+    vocabulary: []
+  },
   TabsProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",

package/dist/styles/card-layout.css

@@ -51,9 +51,16 @@
     background: transparent;
   }
 
+  /* `featured` = the brand-toned perimeter. Its colour is a role-mirror knob (rule #45): declared
+   * `initial` in the token layer so the --primary default resolves HERE, at the call site, and a
+   * scoped [data-tenant]/.dark override of --primary still reaches it. A service that wants the
+   * featured ring in a non-brand tone overrides --card-featured-border-color; a card that wants a
+   * SEMANTIC perimeter (attention / destructive / success …) uses
+   * `accent="…" accentPlacement="perimeter"` instead — same geometry, tone-owned. */
   [data-slot="card"][data-variant="featured"] {
-    border-color: hsl(var(--primary));
-    box-shadow: 0 0 0 1px hsl(var(--primary));
+    border-color: var(--card-featured-border-color, hsl(var(--primary)));
+    box-shadow: 0 0 0 var(--card-featured-ring-width)
+      var(--card-featured-border-color, hsl(var(--primary)));
   }
 
   /* ── Density — override the shell inset/body tokens ──────────────────────
@@ -72,33 +79,39 @@
     --card-space-body-y: var(--space-5);
   }
 
-  /* ── Accent edge — semantic left stripe (token width), content on shell ─ */
-  [data-slot="card"][data-accent] {
-    border-inline-start-width: var(--card-accent-rail-width);
-  }
-
+  /* ── Accent tone — ONE resolved colour per semantic accent ─────────────
+   * `--card-accent-color` is RESOLVED from the card's own `data-accent`, so both placements read
+   * the same value and a new tone is one line. It is deliberately NOT a service knob: it is set on
+   * the element, so a :root / [data-tenant] override could never reach it. Retint the ROLE
+   * (--attention, --success, …) — that is what a role is for. */
   [data-slot="card"][data-accent="primary"] {
-    border-inline-start-color: hsl(var(--primary));
+    --card-accent-color: hsl(var(--primary));
   }
 
   [data-slot="card"][data-accent="success"] {
-    border-inline-start-color: hsl(var(--success));
+    --card-accent-color: hsl(var(--success));
   }
 
   [data-slot="card"][data-accent="warning"] {
-    border-inline-start-color: hsl(var(--warning));
+    --card-accent-color: hsl(var(--warning));
   }
 
   [data-slot="card"][data-accent="info"] {
-    border-inline-start-color: hsl(var(--info));
+    --card-accent-color: hsl(var(--info));
   }
 
   [data-slot="card"][data-accent="attention"] {
-    border-inline-start-color: hsl(var(--attention));
+    --card-accent-color: hsl(var(--attention));
   }
 
   [data-slot="card"][data-accent="destructive"] {
-    border-inline-start-color: hsl(var(--destructive));
+    --card-accent-color: hsl(var(--destructive));
+  }
+
+  /* ── Accent placement `edge` (DEFAULT) — semantic left stripe (token width), content on shell ─ */
+  [data-slot="card"][data-accent] {
+    border-inline-start-width: var(--card-accent-rail-width);
+    border-inline-start-color: var(--card-accent-color);
   }
 
   [data-slot="card"][data-accent] > [data-slot="card-header"],
@@ -107,6 +120,29 @@
     padding-inline-start: calc(var(--card-space-inset) - var(--card-accent-rail-width));
   }
 
+  /* ── Accent placement `perimeter` — the full attention border (gh#12) ───
+   * The whole edge carries the semantic tone instead of one rail, so a card can read as
+   * "action required" / "failed" at a glance without borrowing `--primary` the way
+   * `variant="featured"` does. Same optical weight as `featured` (border + 1px ring), tone-owned.
+   * Because the rail is gone, the slot padding compensation above is undone — content returns to
+   * the normal shell column, so switching placement never shifts the text. */
+  [data-slot="card"][data-accent][data-accent-placement="perimeter"] {
+    border-width: var(--card-accent-perimeter-width);
+    border-color: var(--card-accent-color);
+    box-shadow:
+      0 0 0 var(--card-accent-perimeter-ring-width) var(--card-accent-color),
+      var(--card-shadow),
+      var(--card-glow);
+  }
+
+  [data-slot="card"][data-accent][data-accent-placement="perimeter"] > [data-slot="card-header"],
+  [data-slot="card"][data-accent][data-accent-placement="perimeter"]
+    > [data-slot="card-content"]:not([data-flush]),
+  [data-slot="card"][data-accent][data-accent-placement="perimeter"]
+    > [data-slot="card-footer"]:not([data-flush]) {
+    padding-inline-start: var(--card-space-inset);
+  }
+
   /* ── Header ──────────────────────────────────────────────────────────── */
   [data-slot="card-header"] {
     display: flex;

package/dist/styles/control.css

@@ -714,8 +714,18 @@
 .ui-otp-container {
   display: flex;
   align-items: center;
+  justify-content: var(--otp-container-align, flex-start);
   gap: var(--space-2);
 }
+/* `align` on InputOTP lands on the hidden <input> (input-otp owns the container element), so the
+ * container reads it through :has() — the same mechanism this file already uses for the invalid
+ * and disabled states. Specificity puts the per-instance prop above the theme token. */
+.ui-otp-container:has(.ui-otp-input[data-align="center"]) {
+  justify-content: center;
+}
+.ui-otp-container:has(.ui-otp-input[data-align="end"]) {
+  justify-content: flex-end;
+}
 .ui-otp-input:disabled {
   cursor: not-allowed;
 }
@@ -726,8 +736,8 @@
 .ui-otp-slot {
   position: relative;
   display: flex;
-  width: var(--otp-slot-size, var(--control-height));
-  height: var(--otp-slot-size, var(--control-height));
+  width: var(--otp-slot-inline-size, var(--otp-slot-size, var(--control-height)));
+  height: var(--otp-slot-block-size, var(--otp-slot-size, var(--control-height)));
   align-items: center;
   justify-content: center;
   font-size: var(--font-size-base);

package/dist/styles/data-display-layout.css

@@ -30,6 +30,22 @@
     color: var(--avatar-square-foreground, hsl(var(--primary-foreground)));
   }
 
+  /* CAPABILITY MEDALLION — `<Avatar appearance="tinted">` (gh#12). The tinted companion of the
+   * solid entity mark: same box, same radius, a soft role wash instead of a solid fill and the
+   * glyph in the role itself. Declared AFTER the square rule (equal specificity) so it retints
+   * either shape. The glyph rule is scoped to this appearance ON PURPOSE — a global
+   * `.ui-avatar svg` would outrank the per-call-site icon classes existing avatars already use. */
+  .ui-avatar[data-appearance="tinted"] {
+    --avatar-background: var(--avatar-tinted-background, hsl(var(--primary) / 0.1));
+    color: var(--avatar-tinted-foreground, hsl(var(--primary)));
+  }
+
+  .ui-avatar[data-appearance="tinted"] svg {
+    inline-size: var(--avatar-tinted-glyph-size);
+    block-size: var(--avatar-tinted-glyph-size);
+    flex: none;
+  }
+
   .ui-avatar-image {
     width: 100%;
     height: 100%;

package/dist/styles/navigation-layout.css

@@ -394,10 +394,15 @@
     box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
   }
 
+  /* The step NUMBER carries the emphasis. Both knobs exist because the canonical hosted-identity
+   * row marks the step with an accent TINT at normal weight, while the original marked it with
+   * bold at the inherited colour — a service picks its own emphasis instead of forking this rule
+   * (rule #45). Defaults are the original bold + inherited colour, so nothing moves. */
   .ui-steps-inline-index {
     flex: none;
     font-variant-numeric: tabular-nums;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--steps-inline-index-font-weight);
+    color: var(--steps-inline-index-color, currentColor);
   }
 
   .ui-steps-inline-title {
@@ -418,8 +423,7 @@
     color: hsl(var(--destructive));
   }
 
-  .ui-steps-inline-item[data-status="wait"] .ui-steps-inline-control,
-  .ui-steps-inline-separator {
+  .ui-steps-inline-item[data-status="wait"] .ui-steps-inline-control {
     color: hsl(var(--muted-foreground));
   }
 
@@ -427,5 +431,6 @@
     width: var(--steps-inline-separator-size);
     height: var(--steps-inline-separator-size);
     flex: none;
+    color: var(--steps-inline-separator-color, hsl(var(--muted-foreground)));
   }
 }

package/dist/styles/shell-layout.css

@@ -192,9 +192,14 @@
     text-align: center;
   }
 
+  /* Device-authorization also owns its CODE FIELD (gh#12): the preset's subject is the code, so
+   * the slot box comes from the preset instead of the generic square control tier. Scoped on the
+   * shell so every OTP inside the device flow inherits it; a per-instance override still wins. */
   .ui-auth-shell[data-preset="device-authorization"] {
     --auth-shell-card-max-width: var(--auth-shell-device-card-max-width);
     --auth-shell-main-padding: var(--auth-shell-device-main-padding);
+    --otp-slot-inline-size: var(--auth-shell-device-otp-slot-inline-size);
+    --otp-slot-block-size: var(--auth-shell-device-otp-slot-block-size);
   }
 
   .ui-auth-shell[data-preset="context-selection"] {
@@ -519,7 +524,11 @@
   }
 
   /* AppShell-owned mobile drawer trigger — hidden on desktop, shown once the docked sidebar
-   * collapses out below `lg` (gh#165). The drawer nav itself is a focus-trapped Sheet. */
+   * collapses out at 900px, THE ONE AppShell breakpoint (gh#165, gh#259). NOT Tailwind's `lg`
+   * (1024px): this comment said "below lg" for six minors while the shipped rule below and the
+   * hamburger's own `max-[900px]:inline-flex` both fired at 900 — see the block comment on the
+   * `@media (width <= 56.25rem)` rule for why 900 is the canonical value. The drawer nav itself is
+   * a focus-trapped Sheet. */
   .app-mobile-nav-trigger {
     display: none;
     flex: 0 0 auto;

package/dist/tokens/components/card.css

@@ -74,6 +74,18 @@
    * The slot padding compensation in card-layout.css subtracts the same token,
    * so content stays aligned on the shell whatever the rail width. */
   --card-accent-rail-width: 6px;
+  /* Accent placement `perimeter` (gh#12) — the FULL attention border. Two knobs so a service can
+   * tune the edge weight and the outer ring independently; the defaults reproduce the optical
+   * weight of `variant="featured"` (1px border + 1px ring) in the card's own semantic accent tone
+   * instead of --primary. Structural 1px literals, like the base card hairline. */
+  --card-accent-perimeter-width: 1px;
+  --card-accent-perimeter-ring-width: 1px;
+  /* `variant="featured"` edge — role-mirror knob (docs/TOKENS.md). `initial` so the --primary
+   * default resolves at the CALL SITE and a scoped [data-tenant]/.dark override of --primary
+   * reaches it; a service points it anywhere (e.g. var(--attention)) to retint every featured card
+   * at once. Default = hsl(var(--primary)). */
+  --card-featured-border-color: initial;
+  --card-featured-ring-width: 1px;
   --stat-card-label-font-size: var(--font-size-xs);
   --stat-card-label-font-weight: var(--font-weight-medium);
   --stat-card-label-letter-spacing: 0.04em;

package/dist/tokens/components/control.css

@@ -67,6 +67,22 @@
    * re-scopes --control-height to 36px, would silently shrink. Verified in Chromium: 36px before
    * and after. A service opts in with a NAMED tier (`var(--control-height-lg)`), never a calc. */
   --otp-slot-size: initial; /* default = var(--control-height) at the call site */
+  /* Per-AXIS overrides of the slot box (gh#12). --otp-slot-size stays the square shorthand; these
+   * two win over it when set, so a code field can be WIDER-than-tall or TALLER-than-wide without
+   * abandoning the token. A canonical device-grant code field is 27.5x52 per slot (a 4-slot
+   * `appearance="grouped"` box of 112x54 with its 1px group border) — not expressible with one
+   * square knob, which is why grouped OTP measured 146x38 against that artboard. `initial` for the
+   * same tier-mirror reason as --otp-slot-size: the whole fallback chain
+   * (axis → square → --control-height) must resolve at the CALL SITE so a shell that re-scopes
+   * --control-height still reaches an OTP row that sets neither axis. */
+  --otp-slot-inline-size: initial; /* default = var(--otp-slot-size, var(--control-height)) */
+  --otp-slot-block-size: initial; /* default = var(--otp-slot-size, var(--control-height)) */
+  /* Main-axis alignment of the whole OTP row (rule #44/#45 — chrome is a token, default quiet).
+   * `flex-start` is the historical behaviour, so an existing field is byte-identical; a centred
+   * code field is `align="center"` on InputOTP (which wins over this knob) or this token set once
+   * in a service theme. It exists because EVERY consumer was wrapping .ui-otp-container in a
+   * flex-centring div to get a centred challenge. */
+  --otp-container-align: flex-start;
 
   /* Checked/on/active fills — `initial` so the --primary default re-resolves at the call site
    * under a scoped theme (a :root binding to var(--primary) freezes at the :root value and a scoped

package/dist/tokens/components/data-display.css

@@ -28,6 +28,18 @@
   --avatar-square-background: initial;
   --avatar-square-foreground: initial;
 
+  /* Capability medallion — `<Avatar appearance="tinted">` (gh#12): the tinted plate a capability /
+     feature glyph sits on, as opposed to the SOLID entity mark above. Pair it with shape="square"
+     for the canonical rounded square. --avatar-tinted-background / --avatar-tinted-foreground are
+     role-mirror knobs (`initial`, docs/TOKENS.md) so the --primary defaults resolve at the CALL
+     SITE and a scoped [data-tenant]/.dark override of --primary reaches them — the exact reason
+     this is a token and not the `hsl(var(--primary) / 0.1)` literal consumers were writing in page
+     CSS. Defaults = hsl(var(--primary) / 0.1) wash · hsl(var(--primary)) glyph ·
+     --control-icon-size glyph box. */
+  --avatar-tinted-background: initial;
+  --avatar-tinted-foreground: initial;
+  --avatar-tinted-glyph-size: var(--control-icon-size);
+
   /* Progress track + fill — `initial` so the role defaults re-resolve under a scoped theme.
      Track reads --secondary, fill reads --success; a service re-tones once.
      Defaults = hsl(var(--secondary)) track · hsl(var(--success)) fill. */

package/dist/tokens/components/email.css

@@ -63,8 +63,14 @@
   --email-heading-font-weight: 500; /* mirrors --font-weight-medium — an email title is calm, not bold */
 
   /* ── Primary CTA — the one action button ────────────────────────────────────────────────── */
-  --email-cta-height: 36px; /* mirrors --control-height-lg (2.25rem) — the canonical CTA box */
-  --email-cta-line-height: 36px; /* equal to the height: bulletproof vertical centring in Outlook */
+  /* TOUCH TARGET, deliberately DECOUPLED from --control-height-lg (36px). Do not "restore" the
+   * mirror: email is a mobile-first, touch-only medium. There is no hover state, no precise
+   * pointer, and mail clients do not reliably offer zoom or a focus affordance — so the web's AA
+   * floor (SC 2.5.8, 24x24, which 36px clears) is the wrong bar here. 44px is the AAA target size
+   * (SC 2.5.5, 44x44) and the Apple HIG 44pt / Material 48dp convention. A service that must keep
+   * the old box sets --email-cta-height + --email-cta-line-height in its own theme. */
+  --email-cta-height: 44px;
+  --email-cta-line-height: 44px; /* equal to the height: bulletproof vertical centring in Outlook */
   --email-cta-padding-x: 16px; /* mirrors --space-4 */
   --email-cta-radius: 6px; /* mirrors the --radius base (0.375rem) */
   --email-cta-font-size: 14px; /* mirrors --font-size-base */

package/dist/tokens/components/navigation.css

@@ -14,6 +14,15 @@
   --steps-inline-item-gap: var(--space-1);
   --steps-inline-font-size: var(--font-size-xs);
   --steps-inline-separator-size: var(--control-icon-size-sm);
+  /* Inline-step emphasis (gh#12). The step number's weight and tint are separate knobs so a
+   * service can express progression the canonical way — an accent TINT at normal weight — instead
+   * of the original bold. --steps-inline-index-color / --steps-inline-separator-color are
+   * role-mirror knobs (docs/TOKENS.md): `initial` so their defaults (the inherited step colour and
+   * the --muted-foreground role) resolve at the CALL SITE and a scoped [data-tenant]/.dark
+   * override still reaches them. Defaults reproduce today's row byte for byte. */
+  --steps-inline-index-font-weight: var(--font-weight-bold);
+  --steps-inline-index-color: initial; /* default = currentColor at the call site */
+  --steps-inline-separator-color: initial; /* default = hsl(var(--muted-foreground)) */
 
   /* AppSettingPicker `compact` (gh#217) — the small, content-hugging labelled trigger used in an
    * auth/legal footer, where the square icon-only default reads as a stray button and the full

package/dist/tokens/components/shell.css

@@ -81,10 +81,21 @@
   --topbar-height: auto;
   --topbar-inset: 0px;
   --topbar-gap: var(--space-2);
-  /* At compact desktop/tablet widths the docked sidebar leaves too little inline room for three
-   * intrinsically-sized clusters. The package hides the optional center slot before it can cover
-   * the breadcrumb/title or end utilities. Consumers may opt back into another display strategy
-   * (for example `flex`) once their center content has its own compact presentation. */
+  /* ⚠ THIS KNOB DELETES CONTENT AT 1100px AND BELOW — read before you ship a center slot.
+   * At compact desktop/tablet widths the docked sidebar leaves too little inline room for three
+   * intrinsically-sized clusters, so the package hides the optional center slot before it can
+   * cover the breadcrumb/title or end utilities (gh#244). The default is `none`, which means a
+   * global search trigger placed in `center` is INVISIBLE from 1100px down — including on every
+   * phone — unless the consumer opts back in. That default arrived in 18.6.0 and removed the slot
+   * for consumers who never changed a line of their own code (gh#12); it stays because the
+   * overlap it prevents is a real defect and flipping a shipped default twice is worse than
+   * documenting it once, but it is a DECISION, not an accident:
+   *
+   *   :root { --topbar-center-compact-display: flex; }   ← restore the slot at every width
+   *
+   * Opt back in only once the center content has a compact presentation of its own (an icon-only
+   * search trigger, a collapsing field). A page-local media query is the anti-pattern this knob
+   * replaces. */
   --topbar-center-compact-display: none;
   --org-switcher-trigger-height: 2.75rem;
   --org-switcher-trigger-padding-x: var(--space-2);
@@ -181,6 +192,18 @@
   --auth-shell-device-card-max-width: 23.75rem;
   --auth-shell-device-main-padding: 1rem;
   --auth-shell-device-main-padding-mobile: 0.9375rem 0.3125rem;
+  /* CODE FIELD measure — the preset owns it (gh#12). A device grant is the one canonical flow whose
+   * PRIMARY control is the code field, so leaving it on the generic square --otp-slot-size made the
+   * preset own the page but not its own subject: two 4-slot `appearance="grouped"` boxes rendered
+   * 146x38 (4 x the canonical 36px control tier + the 1px group border) against a 112x54 artboard.
+   * These are the per-slot boxes that ADD UP to that artboard group:
+   *   inline  27.5px x 4 + 2 x 1px group border = 112px
+   *   block   52px       + 2 x 1px group border =  54px
+   * Literal artboard lengths, like every other preset measure here — they must not drift with
+   * --scaling. A service that groups its code differently overrides --otp-slot-inline-size /
+   * --otp-slot-block-size on its own field; the generic square knob is untouched everywhere else. */
+  --auth-shell-device-otp-slot-inline-size: 1.71875rem;
+  --auth-shell-device-otp-slot-block-size: 3.25rem;
 
   /* Context-selection preset — 25rem card measure on desktop/tablet, edge-to-edge on mobile
    * (0 inline gutter) with a 16px rhythm between the intro, the card and the remember row. */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.7.0",
-  "godxUiMcp": "18.7.0",
+  "version": "18.8.0",
+  "godxUiMcp": "18.8.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "pnpm": {