@godxjp/ui 18.5.0 → 18.6.0

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;

package/dist/email/index.js

@@ -22,6 +22,7 @@ import {
   roundedRectPath
 } from "./brand-mark.js";
 import { emailInlineStyle } from "./inline-style.js";
+import { EMAIL_URGENCY, EMAIL_URGENCY_DARK } from "./urgency.js";
 import {
   EMAIL_COLOR_SOURCE,
   EMAIL_COLOR_SOURCE_DARK,
@@ -37,9 +38,12 @@ import {
   EMAIL_MOBILE as EMAIL_MOBILE2
 } from "./geometry.js";
 import { EMAIL_BRAND_MARK as EMAIL_BRAND_MARK2 } from "./brand-mark.js";
+import { EMAIL_URGENCY as EMAIL_URGENCY2, EMAIL_URGENCY_DARK as EMAIL_URGENCY_DARK2 } from "./urgency.js";
 const EMAIL_TOKENS = Object.freeze({
   colors: EMAIL_COLORS2,
   colorsDark: EMAIL_COLORS_DARK2,
+  urgency: EMAIL_URGENCY2,
+  urgencyDark: EMAIL_URGENCY_DARK2,
   shell: EMAIL_SHELL2,
   typography: EMAIL_TYPOGRAPHY2,
   cta: EMAIL_CTA2,
@@ -67,6 +71,8 @@ export {
   EMAIL_TOKENS,
   EMAIL_TOKENS_JSON,
   EMAIL_TYPOGRAPHY,
+  EMAIL_URGENCY,
+  EMAIL_URGENCY_DARK,
   emailBrandMarkDataUri,
   emailBrandMarkSvg,
   emailBrandMarkTableHtml,

package/dist/email/inline-style.d.ts

@@ -3,10 +3,11 @@
  *
  * Email clients do not run the cascade: Gmail strips `<style>`, Outlook resolves no custom
  * property, and only the `style=""` attribute on the painting element is universally honoured.
- * `emailInlineStyle` turns a declaration map into that attribute value AND enforces the two rules
- * that silently break templates — no `var()` (nothing resolves it) and no `calc()` (Outlook's Word
- * renderer drops the whole declaration). Failing loudly at template-build time beats a broken
- * layout discovered in Mailpit.
+ * `emailInlineStyle` turns a declaration map into that attribute value AND enforces the three rules
+ * that silently break templates — no `var()` (nothing resolves it), no `calc()` (Outlook's Word
+ * renderer drops the whole declaration) and no `"` (it closes the `style="…"` attribute mid-value,
+ * which is how a double-quoted font family corrupts a whole tag). Failing loudly at template-build
+ * time beats a broken layout discovered in Mailpit.
  */
 /** A declaration map. Numbers are emitted verbatim (already-unitless values like `font-weight`). */
 export type EmailStyleDeclarations = Record<string, string | number | null | undefined>;
@@ -20,6 +21,7 @@ export type EmailStyleDeclarations = Record<string, string | number | null | und
  *
  * `null` / `undefined` values are dropped, so a conditional declaration needs no branch.
  *
- * @throws if a value contains `var()` or `calc()` — neither survives an email client.
+ * @throws if a value contains `var()` or `calc()` (neither survives an email client) or a double
+ *   quote (it terminates the `style="…"` attribute).
  */
 export declare function emailInlineStyle(declarations: EmailStyleDeclarations): string;

package/dist/email/inline-style.js

@@ -9,6 +9,11 @@ function emailInlineStyle(declarations) {
         `emailInlineStyle: "${property}: ${serialised}" uses var()/calc(), which no email client resolves. Pass the literal value from the @godxjp/ui/email token export instead.`
       );
     }
+    if (serialised.includes('"')) {
+      throw new TypeError(
+        `emailInlineStyle: "${property}: ${serialised}" contains a double quote, which terminates the style="\u2026" attribute it is written into. Use single quotes \u2014 a quoted font family from EMAIL_TYPOGRAPHY already ships that way.`
+      );
+    }
     parts.push(`${kebab(property)}:${serialised}`);
   }
   return parts.join(";");

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

@@ -48,11 +48,19 @@ export declare const EMAIL_COLOR_SOURCE: {
         readonly hsl: "204 100% 39%";
     };
     readonly brand: {
-        readonly cssVar: "--success";
-        readonly hsl: "146 40% 58%";
+        readonly cssVar: "--brand";
+        readonly hsl: "160.5 100% 29.6%";
     };
     readonly brandForeground: {
-        readonly cssVar: "--success-foreground";
+        readonly cssVar: "--brand-foreground";
+        readonly hsl: "60 33% 99%";
+    };
+    readonly urgency: {
+        readonly cssVar: "--attention";
+        readonly hsl: "25 99% 46%";
+    };
+    readonly urgencyForeground: {
+        readonly cssVar: "--attention-foreground";
         readonly hsl: "60 33% 99%";
     };
 };
@@ -99,11 +107,19 @@ export declare const EMAIL_COLOR_SOURCE_DARK: {
         readonly hsl: "204 90% 60%";
     };
     readonly brand: {
-        readonly cssVar: "--success";
-        readonly hsl: "146 45% 55%";
+        readonly cssVar: "--brand";
+        readonly hsl: "160.5 100% 36%";
     };
     readonly brandForeground: {
-        readonly cssVar: "--success-foreground";
+        readonly cssVar: "--brand-foreground";
+        readonly hsl: "48 9% 9%";
+    };
+    readonly urgency: {
+        readonly cssVar: "--attention";
+        readonly hsl: "25 95% 56%";
+    };
+    readonly urgencyForeground: {
+        readonly cssVar: "--attention-foreground";
         readonly hsl: "48 9% 9%";
     };
 };
@@ -117,23 +133,27 @@ export declare const EMAIL_GEOMETRY_SOURCE: {
     readonly "--email-card-reference-height": "407px";
     readonly "--email-stack-gap": "24px";
     readonly "--email-stack-gap-sm": "12px";
-    readonly "--email-mark-width": "32px";
-    readonly "--email-mark-height": "32px";
-    readonly "--email-font-family-sans": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif";
+    readonly "--email-mark-width": "22px";
+    readonly "--email-mark-height": "22px";
+    readonly "--email-mark-gap": "8px";
+    readonly "--email-wordmark-font-size": "13px";
+    readonly "--email-wordmark-font-weight": "700";
+    readonly "--email-font-family-sans": "'M PLUS 2', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'Noto Sans JP', Meiryo, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, Arial, sans-serif";
+    readonly "--email-font-family-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
     readonly "--email-body-font-size": "14px";
-    readonly "--email-body-line-height": "1.7";
+    readonly "--email-body-line-height": "1.9";
     readonly "--email-body-font-weight": "400";
-    readonly "--email-heading-font-size": "20px";
-    readonly "--email-heading-line-height": "1.25";
-    readonly "--email-heading-font-weight": "700";
-    readonly "--email-cta-height": "44px";
-    readonly "--email-cta-line-height": "44px";
-    readonly "--email-cta-padding-x": "24px";
+    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-padding-x": "16px";
     readonly "--email-cta-radius": "6px";
     readonly "--email-cta-font-size": "14px";
-    readonly "--email-cta-font-weight": "700";
-    readonly "--email-footer-font-size": "12px";
-    readonly "--email-footer-line-height": "1.5";
+    readonly "--email-cta-font-weight": "500";
+    readonly "--email-footer-font-size": "11px";
+    readonly "--email-footer-line-height": "1.8";
     readonly "--email-footer-link-gap": "12px";
     readonly "--email-footer-padding-top": "20px";
     readonly "--email-footer-border-width": "1px";
@@ -142,6 +162,6 @@ export declare const EMAIL_GEOMETRY_SOURCE: {
     readonly "--email-mobile-width": "100%";
     readonly "--email-mobile-padding": "20px";
     readonly "--email-mobile-page-padding": "12px";
-    readonly "--email-mobile-heading-font-size": "18px";
+    readonly "--email-mobile-heading-font-size": "16px";
     readonly "--email-mobile-cta-width": "100%";
 };

package/dist/email/tokens.generated.js

@@ -40,11 +40,19 @@ const EMAIL_COLOR_SOURCE = {
     "hsl": "204 100% 39%"
   },
   "brand": {
-    "cssVar": "--success",
-    "hsl": "146 40% 58%"
+    "cssVar": "--brand",
+    "hsl": "160.5 100% 29.6%"
   },
   "brandForeground": {
-    "cssVar": "--success-foreground",
+    "cssVar": "--brand-foreground",
+    "hsl": "60 33% 99%"
+  },
+  "urgency": {
+    "cssVar": "--attention",
+    "hsl": "25 99% 46%"
+  },
+  "urgencyForeground": {
+    "cssVar": "--attention-foreground",
     "hsl": "60 33% 99%"
   }
 };
@@ -90,11 +98,19 @@ const EMAIL_COLOR_SOURCE_DARK = {
     "hsl": "204 90% 60%"
   },
   "brand": {
-    "cssVar": "--success",
-    "hsl": "146 45% 55%"
+    "cssVar": "--brand",
+    "hsl": "160.5 100% 36%"
   },
   "brandForeground": {
-    "cssVar": "--success-foreground",
+    "cssVar": "--brand-foreground",
+    "hsl": "48 9% 9%"
+  },
+  "urgency": {
+    "cssVar": "--attention",
+    "hsl": "25 95% 56%"
+  },
+  "urgencyForeground": {
+    "cssVar": "--attention-foreground",
     "hsl": "48 9% 9%"
   }
 };
@@ -107,23 +123,27 @@ const EMAIL_GEOMETRY_SOURCE = {
   "--email-card-reference-height": "407px",
   "--email-stack-gap": "24px",
   "--email-stack-gap-sm": "12px",
-  "--email-mark-width": "32px",
-  "--email-mark-height": "32px",
-  "--email-font-family-sans": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif",
+  "--email-mark-width": "22px",
+  "--email-mark-height": "22px",
+  "--email-mark-gap": "8px",
+  "--email-wordmark-font-size": "13px",
+  "--email-wordmark-font-weight": "700",
+  "--email-font-family-sans": "'M PLUS 2', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'Noto Sans JP', Meiryo, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, Arial, sans-serif",
+  "--email-font-family-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
   "--email-body-font-size": "14px",
-  "--email-body-line-height": "1.7",
+  "--email-body-line-height": "1.9",
   "--email-body-font-weight": "400",
-  "--email-heading-font-size": "20px",
-  "--email-heading-line-height": "1.25",
-  "--email-heading-font-weight": "700",
-  "--email-cta-height": "44px",
-  "--email-cta-line-height": "44px",
-  "--email-cta-padding-x": "24px",
+  "--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-padding-x": "16px",
   "--email-cta-radius": "6px",
   "--email-cta-font-size": "14px",
-  "--email-cta-font-weight": "700",
-  "--email-footer-font-size": "12px",
-  "--email-footer-line-height": "1.5",
+  "--email-cta-font-weight": "500",
+  "--email-footer-font-size": "11px",
+  "--email-footer-line-height": "1.8",
   "--email-footer-link-gap": "12px",
   "--email-footer-padding-top": "20px",
   "--email-footer-border-width": "1px",
@@ -132,7 +152,7 @@ const EMAIL_GEOMETRY_SOURCE = {
   "--email-mobile-width": "100%",
   "--email-mobile-padding": "20px",
   "--email-mobile-page-padding": "12px",
-  "--email-mobile-heading-font-size": "18px",
+  "--email-mobile-heading-font-size": "16px",
   "--email-mobile-cta-width": "100%"
 };
 export {

package/dist/email/urgency.d.ts

@@ -0,0 +1,22 @@
+import { type EmailHex } from "./color.js";
+/**
+ * Semantic action-required styling for transactional email.
+ *
+ * `accent` is the non-text rail/border color painted on the normal email surface. The solid pair
+ * is safe for icons and large or bold labels that satisfy the 3:1 contrast floor; it is not a
+ * replacement for normal body copy, which remains `EMAIL_COLORS.foreground` on
+ * `EMAIL_COLORS.surface`. This deliberately narrow contract prevents urgency from becoming an
+ * undocumented second CTA or a component-local palette.
+ */
+export interface EmailUrgencyTokens {
+    /** Non-text action-required rail or border on the standard email surface. */
+    readonly accent: EmailHex;
+    /** Solid action-required fill for an icon or large/bold label. */
+    readonly solidBackground: EmailHex;
+    /** Foreground paired only with `solidBackground` under the usage restriction above. */
+    readonly solidForeground: EmailHex;
+}
+/** Light-scheme action-required email contract. */
+export declare const EMAIL_URGENCY: Readonly<EmailUrgencyTokens>;
+/** Dark-scheme action-required email contract for clients that honor dark-mode overrides. */
+export declare const EMAIL_URGENCY_DARK: Readonly<EmailUrgencyTokens>;

package/dist/email/urgency.js

@@ -0,0 +1,14 @@
+import { EMAIL_COLORS, EMAIL_COLORS_DARK } from "./color.js";
+function resolveUrgency(colors) {
+  return Object.freeze({
+    accent: colors.urgency,
+    solidBackground: colors.urgency,
+    solidForeground: colors.urgencyForeground
+  });
+}
+const EMAIL_URGENCY = resolveUrgency(EMAIL_COLORS);
+const EMAIL_URGENCY_DARK = resolveUrgency(EMAIL_COLORS_DARK);
+export {
+  EMAIL_URGENCY,
+  EMAIL_URGENCY_DARK
+};