@godxjp/ui 18.10.0 → 18.11.0

package/dist/components/navigation/tabs.js

@@ -106,7 +106,12 @@ const TabsList = React.forwardRef(({ className, variant = "default", ...props },
         // active trigger when a resize would otherwise strand it off-strip (gh#204). Vertical
         // orientation is untouched — it already stacks in a column and is sized by its own
         // `h-*`/`w-*` overrides.
-        "group/tabs-list text-muted-foreground data-[variant=default]:bg-muted inline-flex w-fit max-w-full min-w-0 items-center justify-center rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[orientation=horizontal]:[scrollbar-width:none] data-[orientation=horizontal]:overflow-x-auto data-[orientation=horizontal]:overflow-y-hidden data-[variant=line]:gap-1 data-[variant=line]:rounded-none data-[variant=line]:bg-transparent [&[data-orientation=horizontal]::-webkit-scrollbar]:hidden",
+        // justify-center-SAFE: the strip is a centred flex box that also scrolls. Plain `center`
+        // splits the overflow across BOTH edges, and scrollLeft only ever covers the trailing one
+        // — so the leading tab sat permanently outside the scrollport (an unreachable control at
+        // 320px, WCAG 2.2 SC 2.1.1). `safe` falls back to start alignment exactly when it
+        // overflows, and still centres whenever the tabs fit.
+        "group/tabs-list text-muted-foreground data-[variant=default]:bg-muted inline-flex w-fit max-w-full min-w-0 items-center justify-center-safe rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[orientation=horizontal]:[scrollbar-width:none] data-[orientation=horizontal]:overflow-x-auto data-[orientation=horizontal]:overflow-y-hidden data-[variant=line]:gap-1 data-[variant=line]:rounded-none data-[variant=line]:bg-transparent [&[data-orientation=horizontal]::-webkit-scrollbar]:hidden",
         className
       ),
       ...props

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/i18n/messages/en.json

@@ -142,6 +142,9 @@
     }
   },
   "layout": {
+    "pageHeader": {
+      "loading": "Loading page…"
+    },
     "sidebar": {
       "ariaLabel": "Primary"
     },

package/dist/i18n/messages/ja.json

@@ -139,6 +139,9 @@
     }
   },
   "layout": {
+    "pageHeader": {
+      "loading": "ページを読み込んでいます…"
+    },
     "sidebar": {
       "ariaLabel": "メインナビゲーション"
     },

package/dist/i18n/messages/vi.json

@@ -139,6 +139,9 @@
     }
   },
   "layout": {
+    "pageHeader": {
+      "loading": "Đang tải trang…"
+    },
     "sidebar": {
       "ariaLabel": "Điều hướng chính"
     },

package/dist/lib/field-a11y.d.ts

@@ -39,6 +39,13 @@ export declare function mergeAriaIds(...values: Array<string | undefined>): stri
  * ```
  */
 export declare function pickFieldA11y(props: FieldA11yProps): FieldA11yProps;
+/**
+ * The inverse of {@link pickFieldA11y}: everything EXCEPT the field-a11y attributes. Use it when a
+ * component must route the contract somewhere other than the element the remaining props land on —
+ * e.g. `Select`'s compound API, where the props bag belongs to `SelectPrimitive.Root` (a
+ * context-only component that renders no DOM) while the accessible name has to reach the trigger.
+ */
+export declare function omitFieldA11y<T extends FieldA11yProps>(props: T): Omit<T, keyof FieldA11yProps>;
 /**
  * As {@link pickFieldA11y}, but resolves the accessible **name** for a control that also has an
  * intrinsic `aria-label` (e.g. SearchInput's built-in "Search"): when the FormField supplies an

package/dist/lib/field-a11y.js

@@ -19,6 +19,11 @@ function pickFieldA11y(props) {
   }
   return out;
 }
+function omitFieldA11y(props) {
+  const out = { ...props };
+  for (const key of FIELD_A11Y_KEYS) delete out[key];
+  return out;
+}
 function resolveFieldA11y(props, intrinsicAriaLabel) {
   const picked = pickFieldA11y(props);
   if (picked["aria-labelledby"]) {
@@ -38,6 +43,7 @@ function pickGroupFieldA11y(props) {
 }
 export {
   mergeAriaIds,
+  omitFieldA11y,
   pickFieldA11y,
   pickGroupFieldA11y,
   resolveFieldA11y

package/dist/lib/hooks.d.ts

@@ -28,3 +28,18 @@ export declare function useTimeoutFlag(signal: unknown, ms?: number): boolean;
 export declare function useControlledLatch(valueIsDefined: boolean): boolean;
 export declare function useMediaQuery(query: string): boolean;
 export declare function useIsMobile(): boolean;
+/**
+ * WCAG 2.1.1 — a region that scrolls must be operable by keyboard. Tabbing to a focusable child
+ * scrolls the container, so a region whose content IS focusable needs nothing; one whose content is
+ * inert (plain text) strands its overflow for anyone not using a pointer and must therefore take
+ * focus itself via `tabindex="0"`. Which case applies depends on the RENDERED size and content —
+ * the same pagination strip is fine at 1440px and unreachable at 375px, and a panel full of text
+ * only overflows once it is resized — so it is measured at runtime and kept in sync as the element
+ * resizes or its content changes.
+ *
+ * The attribute is written imperatively rather than rendered: `react-resizable-panels` applies our
+ * className to a nested div it owns, which no prop can reach.
+ *
+ * @param element the scroll container itself (state, not a ref, so the effect re-runs when it mounts)
+ */
+export declare function useScrollableRegionTabIndex(element: HTMLElement | null): void;

package/dist/lib/hooks.js

@@ -68,10 +68,47 @@ function useMediaQuery(query) {
 function useIsMobile() {
   return useMediaQuery("(max-width: 767px)");
 }
+const SCROLLABLE_REGION_FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function useScrollableRegionTabIndex(element) {
+  useEffect(() => {
+    if (!element) return;
+    const sync = () => {
+      const scrolls = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+      const hasFocusableContent = element.querySelector(SCROLLABLE_REGION_FOCUSABLE_SELECTOR) !== null;
+      if (scrolls && !hasFocusableContent) {
+        if (element.getAttribute("tabindex") !== "0") element.setAttribute("tabindex", "0");
+      } else if (element.getAttribute("tabindex") === "0") {
+        element.removeAttribute("tabindex");
+      }
+    };
+    sync();
+    const observers = [];
+    if (typeof ResizeObserver !== "undefined") {
+      const resizeObserver = new ResizeObserver(sync);
+      resizeObserver.observe(element);
+      for (const child of Array.from(element.children)) resizeObserver.observe(child);
+      observers.push(resizeObserver);
+    }
+    if (typeof MutationObserver !== "undefined") {
+      const mutationObserver = new MutationObserver(sync);
+      mutationObserver.observe(element, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["disabled", "href", "tabindex"]
+      });
+      observers.push(mutationObserver);
+    }
+    return () => {
+      for (const observer of observers) observer.disconnect();
+    };
+  }, [element]);
+}
 export {
   useControlledLatch,
   useDebouncedValue,
   useIsMobile,
   useMediaQuery,
+  useScrollableRegionTabIndex,
   useTimeoutFlag
 };

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/layout.prop.d.ts

@@ -38,6 +38,14 @@ export type PageContainerProp = {
      * overflow (`headerLayout` / `measure`) all live on this one renderer.
      */
     status?: StatusProp;
+    /**
+     * Pending state for the title band while the page's own record resolves. Renders the
+     * title/subtitle as `ui-skeleton-block` placeholders and marks the header `aria-busy`, keeping
+     * the `<h1>` in the document with an sr-only accessible name (an empty heading is an axe
+     * violation) so the page's heading outline never disappears mid-load. Breadcrumbs and `extra`
+     * are NOT skeletonised — they come from the route, not the record.
+     */
+    headerLoading?: boolean;
     extra?: ExtraProp;
     footer?: FooterProp;
     breadcrumb?: BreadcrumbProp;

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

@@ -171,9 +171,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

@@ -470,6 +470,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly ["TitleProp", "SubtitleProp", "StatusProp", "ExtraProp", "FooterProp", "BreadcrumbProp", "DensityProp", "PageContainerVariantProp", {
+            readonly field: "headerLoading";
+            readonly local: true;
+            readonly reason: "Pending state of the TITLE BAND only (skeleton title/subtitle + aria-busy on the header). Named for the BAND it skeletonises, so it can never be read as a page-wide loading flag (that is DataState's job); breadcrumbs and `extra` come from the route and stay live while the record resolves.";
+        }, {
             readonly field: "headerLayout";
             readonly local: true;
             readonly reason: "Header ARRANGEMENT of the title band vs the extra slot below the 640px step (stack | responsive-inline) — orthogonal to PageContainerVariantProp, which selects the page shell layout.";
@@ -1043,6 +1047,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";
@@ -1440,6 +1449,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";
@@ -1450,6 +1464,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";
@@ -1498,7 +1517,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly CommandPaletteProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry/command-palette.tsx";
-        readonly vocabulary: readonly ["OpenProp", "DefaultOpenProp", "OnOpenChangeProp"];
+        readonly vocabulary: readonly ["OpenProp", "DefaultOpenProp", "OnOpenChangeProp", "OnSearchChangeProp"];
     };
     readonly TwoFactorSetupProp: {
         readonly group: "feedback";

package/dist/props/registry.js

@@ -482,6 +482,11 @@ const COMPONENT_PROP_REGISTRY = {
       "BreadcrumbProp",
       "DensityProp",
       "PageContainerVariantProp",
+      {
+        field: "headerLoading",
+        local: true,
+        reason: "Pending state of the TITLE BAND only (skeleton title/subtitle + aria-busy on the header). Named for the BAND it skeletonises, so it can never be read as a page-wide loading flag (that is DataState's job); breadcrumbs and `extra` come from the route and stay live while the record resolves."
+      },
       {
         field: "headerLayout",
         local: true,
@@ -1195,6 +1200,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",
@@ -1576,12 +1586,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",
@@ -1632,7 +1652,7 @@ const COMPONENT_PROP_REGISTRY = {
   CommandPaletteProp: {
     group: "data-entry",
     file: "components/data-entry/command-palette.tsx",
-    vocabulary: ["OpenProp", "DefaultOpenProp", "OnOpenChangeProp"]
+    vocabulary: ["OpenProp", "DefaultOpenProp", "OnOpenChangeProp", "OnSearchChangeProp"]
   },
   TwoFactorSetupProp: {
     group: "feedback",

package/dist/styles/base.css

@@ -28,6 +28,34 @@
  * ───────────────────────────────────────────────────────────────────────── */
 @import "tailwindcss";
 
+/* ── THE LAYER CONTRACT (gh#412) ───────────────────────────────────────────
+ * `@import "tailwindcss"` establishes `theme, base, components, utilities`. Everything this
+ * package styles lives in `@layer components`, which is EARLIER than `utilities` — so a Tailwind
+ * utility a component itself emits silently outranks the package rule that is supposed to own the
+ * same property, no matter how specific that rule is. That is not a specificity bug you can fix
+ * with another selector; layer order beats specificity outright.
+ *
+ * It shipped as a real defect: `<table class="… text-sm">` (utilities) vs the collection preset's
+ * `font-size: var(--table-action-collection-font-size-compact)` (components) — the compact type
+ * tier never applied at ANY width, so the documented token was dead and a 5–6 character Japanese
+ * label could not fit the narrow-frame column measure (WCAG 2.2 SC 1.4.10, and only ever visible
+ * in Japanese). Two independent consumers reported it.
+ *
+ * `godxjp-ui-responsive` is declared HERE, after Tailwind, so it is the LAST layer and outranks
+ * `utilities`. It is reserved for one thing: RESPONSIVE RE-POINTS — the container/media blocks
+ * that must win over a component's own static utility for the layout contract to hold. Nothing
+ * static belongs in it; a rule that does not sit inside a `@container`/`@media` query goes in
+ * `@layer components` like everything else.
+ *
+ * What this layer canNOT do — and the rule consumers must follow: an UNLAYERED consumer rule
+ * outranks EVERY layer, including this one. So app CSS must theme this package through TOKENS on
+ * a wrapper, never by writing its own selectors against `[data-slot]` / `[data-priority]`
+ * elements. A consumer that does write such a rule must put it in a layer
+ * (`@layer components { … }`), or it will silently kill the responsive re-points the package
+ * makes — a column measured to 0px and wrapped one character per line is what that looks like.
+ * See docs/TOKENS.md · "The layer contract". */
+@layer godxjp-ui-responsive;
+
 /* Per-language font wiring — token-only, NO hardcoded faces. Each locale reads
  * an OPTIONAL per-lang slot token (empty by default) and falls back to the
  * base sans. Consumers switch a locale's face by setting its slot, e.g.

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);
@@ -817,6 +827,11 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
+  /* A 10-star scale needs ~276px of hit area; a 320px viewport offers ~212 inside a card. Without
+   * wrapping, the last stars are painted outside the surface with nothing to scroll them into
+   * view, so they can be neither seen nor clicked (WCAG 2.1.1 / 2.4.7). Wrapping keeps every star
+   * reachable and is a no-op wherever the row already fits. */
+  flex-wrap: wrap;
 }
 .ui-rating-star {
   /* ≥24px hit area (WCAG 2.5.8) around the 20px glyph */

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