@godxjp/ui 16.6.0 → 16.7.1

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

@@ -2,7 +2,12 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import type { ShapeProp, ToneProp } from "../../props/vocabulary";
 export type BadgeVariant = "default" | "secondary" | "outline" | "dashed";
-export type BadgeTone = ToneProp;
+/**
+ * Badge tones extend the shared status `ToneProp` with a brand `primary` tone — a SOFT brand pill
+ * (tinted fill + brand text), the dashboard "role pill" pattern. The status tones stay status-only;
+ * for a SOLID brand fill use `variant="default"`.
+ */
+export type BadgeTone = ToneProp | "primary";
 declare const badgeVariants: (props?: ({
     variant?: "default" | "outline" | "dashed" | "secondary" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;

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

@@ -17,6 +17,7 @@ import {
   toneInfoClass,
   toneMutedClass,
   toneNeutralClass,
+  tonePrimaryClass,
   toneSuccessClass,
   toneWarningClass
 } from "../../lib/control-styles";
@@ -65,6 +66,7 @@ const badgeVariants = cva(
 );
 const badgeToneClass = {
   default: void 0,
+  primary: cn("border-transparent", tonePrimaryClass),
   success: cn("border-transparent", toneSuccessClass),
   warning: cn("border-transparent", toneWarningClass),
   destructive: cn("border-transparent", toneDestructiveClass),

package/dist/components/data-entry/date-range-picker.js

@@ -72,7 +72,7 @@ function DateRangePicker({
       className: cn(
         // One input-styled shell for the whole range — mirrors Input's control
         // tokens (border/radius/ring) so it reads as a single form field.
-        "ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-md border px-3 shadow-xs transition-[color,box-shadow] outline-none",
+        "ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
         "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
         open && "border-ring ring-ring/50 ring-[3px]",
         disabled && "pointer-events-none cursor-not-allowed opacity-50",

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

@@ -4,6 +4,12 @@ export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
+    /**
+     * A leading affordance pinned inside the start of the field — e.g. a mail or
+     * search icon (the common auth/search pattern). Decorative by default; the
+     * input keeps the keyboard focus. Pairs with `trailingIcon`/`allowClear`.
+     */
+    leadingIcon?: React.ReactNode;
     /**
      * A trailing affordance pinned inside the field — e.g. a calendar / clock popover
      * trigger button. ONE trailing icon shows at a time: when `allowClear` and the field
@@ -16,6 +22,12 @@ export declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttri
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
+    /**
+     * A leading affordance pinned inside the start of the field — e.g. a mail or
+     * search icon (the common auth/search pattern). Decorative by default; the
+     * input keeps the keyboard focus. Pairs with `trailingIcon`/`allowClear`.
+     */
+    leadingIcon?: React.ReactNode;
     /**
      * A trailing affordance pinned inside the field — e.g. a calendar / clock popover
      * trigger button. ONE trailing icon shows at a time: when `allowClear` and the field

package/dist/components/data-entry/input.js

@@ -4,7 +4,7 @@ import { X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation";
 import { cn } from "../../lib/utils";
 const inputBaseClass = [
-  "ui-control border-input bg-background w-full min-w-0 rounded-md border px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
+  "ui-control border-input bg-background w-full min-w-0 rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
   "selection:bg-primary selection:text-primary-foreground",
   "file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
   "placeholder:text-muted-foreground",
@@ -18,6 +18,7 @@ const Input = React.forwardRef(
     type,
     allowClear = false,
     onClear,
+    leadingIcon,
     trailingIcon,
     value,
     defaultValue,
@@ -58,7 +59,7 @@ const Input = React.forwardRef(
       setHasText(false);
       onClear?.();
     };
-    if (!allowClear && trailingIcon == null) {
+    if (!allowClear && trailingIcon == null && leadingIcon == null) {
       return /* @__PURE__ */ jsx(
         "input",
         {
@@ -86,6 +87,15 @@ const Input = React.forwardRef(
       }
     ) : trailingIcon;
     return /* @__PURE__ */ jsxs("span", { "data-slot": "input-affix-wrapper", className: "relative inline-flex w-full items-center", children: [
+      leadingIcon != null ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "input-leading",
+          "aria-hidden": "true",
+          className: "text-muted-foreground pointer-events-none absolute inset-y-0 start-2 inline-flex items-center",
+          children: leadingIcon
+        }
+      ) : null,
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -95,7 +105,12 @@ const Input = React.forwardRef(
           value,
           defaultValue,
           onChange: handleChange,
-          className: cn(inputBaseClass, (showClear || trailingIcon != null) && "pe-9", className),
+          className: cn(
+            inputBaseClass,
+            leadingIcon != null && "ps-9",
+            (showClear || trailingIcon != null) && "pe-9",
+            className
+          ),
           ...props
         }
       ),

package/dist/components/data-entry/month-picker.js

@@ -57,7 +57,7 @@ function MonthPicker({
     "div",
     {
       className: cn(
-        "ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-md border px-3 shadow-xs transition-[color,box-shadow] outline-none",
+        "ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
         "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
         open && "border-ring ring-ring/50 ring-[3px]",
         disabled && "pointer-events-none cursor-not-allowed opacity-50",

package/dist/components/data-entry/month-range-picker.js

@@ -100,7 +100,7 @@ function MonthRangePicker({
     "div",
     {
       className: cn(
-        "ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-md border px-3 shadow-xs transition-[color,box-shadow] outline-none",
+        "ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-[var(--control-radius)] transition-[color,box-shadow] outline-none",
         "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
         open && "border-ring ring-ring/50 ring-[3px]",
         disabled && "pointer-events-none cursor-not-allowed opacity-50",

package/dist/components/general/button.js

@@ -37,9 +37,10 @@ const buttonVariants = cva("ui-button", {
       "icon-lg": "size-[calc(var(--control-height)+0.25rem)]"
     },
     // Single source of corner radius (deterministic — no competing rounded-* utility): default uses
-    // the control radius token, pill is fully rounded, sharp is square.
+    // the dedicated --button-radius token (themeable independently of --control-radius, issue #124),
+    // pill is fully rounded, sharp is square.
     shape: {
-      default: "rounded-md",
+      default: "rounded-[var(--button-radius)]",
       pill: "rounded-[var(--radius-pill)]",
       sharp: "rounded-[var(--radius-sharp)]"
     }

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

@@ -27,4 +27,5 @@ export declare const Heading: React.ForwardRefExoticComponent<Omit<React.HTMLAtt
     tone?: import("../../props").TextToneProp;
     align?: import("../../props").TextAlignProp;
     truncate?: boolean;
+    weight?: import("../../props").FontWeightProp;
 } & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/general/typography.js

@@ -28,12 +28,13 @@ const Text = React.forwardRef(
 );
 Text.displayName = "Text";
 const Heading = React.forwardRef(
-  ({ level = 2, as, tone = "default", align, truncate, className, ...props }, ref) => React.createElement(as ?? `h${level}`, {
+  ({ level = 2, as, tone = "default", align, truncate, weight = "medium", className, ...props }, ref) => React.createElement(as ?? `h${level}`, {
     ref,
     "data-slot": "heading",
     "data-level": level,
     "data-tone": tone,
     "data-align": align,
+    "data-weight": weight,
     "data-truncate": truncate ? "" : void 0,
     className: cn("ui-heading", className),
     ...props

package/dist/lib/control-styles.d.ts

@@ -1,6 +1,6 @@
 /** Shared control sizing — reads `--control-height`, `--font-size-*` from density / theme. */
-export declare const controlFieldClass = "ui-control w-full rounded-lg border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
-export declare const controlMultilineClass = "ui-control-multiline w-full rounded-lg border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
+export declare const controlFieldClass = "ui-control w-full rounded-[var(--control-radius)] border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
+export declare const controlMultilineClass = "ui-control-multiline w-full rounded-[var(--control-radius)] border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
 /**
  * Open-state ring for popup-style triggers (Select / Cascader / TreeSelect / SearchSelect).
  * Radix moves focus INTO the popup on open, so the trigger loses `:focus-visible` and — without
@@ -9,7 +9,7 @@ export declare const controlMultilineClass = "ui-control-multiline w-full rounde
  * `focus-visible:ring-*` on any trigger that toggles `data-state="open"`.
  */
 export declare const controlOpenRingClass = "data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px]";
-export declare const controlTriggerClass = "ui-control flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-input bg-background shadow-sm transition-[color,box-shadow] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1";
+export declare const controlTriggerClass = "ui-control flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] border border-input bg-background shadow-sm transition-[color,box-shadow] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1";
 export declare const controlIconClass = "size-[length:var(--control-height)] shrink-0";
 export declare const controlIconSmClass = "size-[calc(var(--control-height)-0.5rem)] shrink-0";
 /** Leading/affix icon inside an input row (search, command) — sized to `--control-icon-size`. */
@@ -23,6 +23,11 @@ export declare const tableCellPaddingClass = "py-[length:var(--table-cell-paddin
 export declare const toneSuccessClass = "border-success/30 bg-success/10 text-success-strong";
 export declare const toneWarningClass = "border-warning/30 bg-warning/10 text-warning-strong";
 export declare const toneInfoClass = "border-info/30 bg-info/10 text-info-strong";
+/** Soft BRAND pill — a tinted primary tone (border/fill keep the brand role; the TEXT uses the
+ * AA-strong brand colour `text-primary-strong`, darker than the fill, so a small brand label clears
+ * WCAG AA on the soft tint — `text-primary` alone is only 4.04:1 in light). For a SOLID brand fill
+ * use the Badge `default` variant instead. */
+export declare const tonePrimaryClass = "border-primary/30 bg-primary/10 text-primary-strong";
 export declare const toneDestructiveClass = "border-destructive/30 bg-destructive/10 text-error-strong";
 export declare const toneMutedClass = "border-border bg-muted text-muted-foreground";
 export declare const toneNeutralClass = "border-border bg-muted text-muted-foreground";

package/dist/lib/control-styles.js

@@ -1,7 +1,7 @@
-const controlFieldClass = "ui-control w-full rounded-lg border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
-const controlMultilineClass = "ui-control-multiline w-full rounded-lg border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
+const controlFieldClass = "ui-control w-full rounded-[var(--control-radius)] border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
+const controlMultilineClass = "ui-control-multiline w-full rounded-[var(--control-radius)] border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50";
 const controlOpenRingClass = "data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px]";
-const controlTriggerClass = "ui-control flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-input bg-background shadow-sm transition-[color,box-shadow] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1";
+const controlTriggerClass = "ui-control flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] border border-input bg-background shadow-sm transition-[color,box-shadow] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1";
 const controlIconClass = "size-[length:var(--control-height)] shrink-0";
 const controlIconSmClass = "size-[calc(var(--control-height)-0.5rem)] shrink-0";
 const controlIconLeadingClass = "size-[length:var(--control-icon-size)] shrink-0";
@@ -11,6 +11,7 @@ const tableCellPaddingClass = "py-[length:var(--table-cell-padding-y)]";
 const toneSuccessClass = "border-success/30 bg-success/10 text-success-strong";
 const toneWarningClass = "border-warning/30 bg-warning/10 text-warning-strong";
 const toneInfoClass = "border-info/30 bg-info/10 text-info-strong";
+const tonePrimaryClass = "border-primary/30 bg-primary/10 text-primary-strong";
 const toneDestructiveClass = "border-destructive/30 bg-destructive/10 text-error-strong";
 const toneMutedClass = "border-border bg-muted text-muted-foreground";
 const toneNeutralClass = "border-border bg-muted text-muted-foreground";
@@ -29,6 +30,7 @@ export {
   toneInfoClass,
   toneMutedClass,
   toneNeutralClass,
+  tonePrimaryClass,
   toneSuccessClass,
   toneWarningClass
 };

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

@@ -23,7 +23,8 @@ export type DescriptionsItemProp = {
 /** @see Badge */
 export type BadgeProp = {
     variant?: "default" | "secondary" | "outline";
-    tone?: ToneProp;
+    /** Status tones plus a brand `primary` tone (soft brand pill); solid brand = `variant="default"`. */
+    tone?: ToneProp | "primary";
     status?: string;
     icon?: React.ComponentType<{
         className?: string;

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

@@ -15,6 +15,10 @@ export type InputProp = React.InputHTMLAttributes<HTMLInputElement> & {
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
+    /** A leading affordance pinned inside the start of the field (e.g. a mail/lock icon). */
+    leadingIcon?: React.ReactNode;
+    /** A trailing affordance pinned inside the end of the field (replaced by the clear ✕ when `allowClear` + value). */
+    trailingIcon?: React.ReactNode;
 };
 /** @see Textarea */
 export type TextareaProp = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {

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

@@ -28,6 +28,8 @@ export type HeadingProp = Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"
     tone?: TextToneProp;
     align?: TextAlignProp;
     truncate?: boolean;
+    /** Weight (system canon: 400 · 500 · 700). Default `medium` — set `bold` for an emphasised title. */
+    weight?: FontWeightProp;
 };
 /** @see Button */
 export type ButtonProp = React.ButtonHTMLAttributes<HTMLButtonElement> & {

package/dist/styles/control.css

@@ -202,13 +202,19 @@
     height: var(--control-height);
     padding-inline-start: var(--control-padding-x);
     padding-inline-end: var(--control-padding-x);
-    font-size: var(--font-size-base);
+    font-size: var(--control-font-size);
+    border-width: var(--control-border-width);
+    border-style: solid;
+    box-shadow: var(--control-shadow);
   }
 
   .ui-control-multiline {
     min-height: calc(var(--control-height) * 2.75);
     padding: var(--space-2) var(--control-padding-x);
-    font-size: var(--font-size-base);
+    font-size: var(--control-font-size);
+    border-width: var(--control-border-width);
+    border-style: solid;
+    box-shadow: var(--control-shadow);
   }
 
   .ui-table-row {

package/dist/styles/index.css

@@ -42,7 +42,7 @@
 @source inline("rounded-{xs,xl,2xl}");
 @source inline("text-2xs");
 @source inline("text-{3xl,4xl,5xl}");
-@source inline("text-{success,warning,info,error}-strong");
+@source inline("text-{primary,success,warning,info,error}-strong");
 /* `.js` matters: the published package ships only compiled JS under dist (no
  * .tsx sources), and this file is copied verbatim into dist/styles — without
  * it Tailwind finds no component classes in consumers (unstyled popovers and
@@ -103,6 +103,7 @@
   --color-attention-foreground: hsl(var(--attention-foreground));
   /* AA-strong status TEXT colours (text-{success,warning,info,error}-strong) — darker than the
    * fills so small coloured labels clear WCAG AA on white; flip light on the dark theme. */
+  --color-primary-strong: hsl(var(--text-primary));
   --color-success-strong: hsl(var(--text-success));
   --color-warning-strong: hsl(var(--text-warning));
   --color-info-strong: hsl(var(--text-info));

package/dist/styles/layout.css

@@ -23,6 +23,16 @@
     overflow: hidden;
   }
 
+  /* Decorative brand SPOTLIGHT backdrop — the token-driven radial halo behind a hero / auth card,
+   * replacing a hand-authored `radial-gradient(... hsl(var(--primary)/.18) ...)`. Apply to an
+   * `aria-hidden` layer (e.g. an absolutely-positioned full-bleed div behind the card). All geometry
+   * and tint come from the `--brand-glow*` tokens, so a theme retints/repositions it with no markup
+   * change. `pointer-events:none` keeps the backdrop from stealing clicks from the card above it. */
+  .ui-brand-glow {
+    background-image: var(--brand-glow);
+    pointer-events: none;
+  }
+
   .ui-flex,
   .ui-stack-xs {
     display: flex;

package/dist/styles/text-layout.css

@@ -33,14 +33,19 @@
     font-size: var(--font-size-2xl);
   }
 
-  /* Weight — the dxs-kintai canon (400 body · 500 heading/label · 700 emphasis). No 600. */
-  [data-slot="text"][data-weight="regular"] {
+  /* Weight — the dxs-kintai canon (400 body · 500 heading/label · 700 emphasis). No 600.
+   * Shared by text + heading; the two-attribute heading selectors outrank the base heading
+   * rule below, so `<Heading weight="bold">` renders a semantic, emphasised title. */
+  [data-slot="text"][data-weight="regular"],
+  [data-slot="heading"][data-weight="regular"] {
     font-weight: var(--font-weight-normal);
   }
-  [data-slot="text"][data-weight="medium"] {
+  [data-slot="text"][data-weight="medium"],
+  [data-slot="heading"][data-weight="medium"] {
     font-weight: var(--font-weight-medium);
   }
-  [data-slot="text"][data-weight="bold"] {
+  [data-slot="text"][data-weight="bold"],
+  [data-slot="heading"][data-weight="bold"] {
     font-weight: var(--font-weight-bold);
   }
 

package/dist/tokens/components/control.css

@@ -18,6 +18,17 @@
   --control-gap: var(--space-inline-sm);
   --control-gap-sm: var(--space-inline-xs);
   --control-radius: var(--radius);
+  /* Button corner radius — defaults to the button's historical `rounded-md` so nothing
+   * changes by default, but is its OWN knob so a service theme can retune the button
+   * radius INDEPENDENTLY of input/control radius (issue #124). */
+  --button-radius: var(--radius-md);
+  /* Control surface knobs — font-size, border width and resting shadow of every
+   * `.ui-control` (input / picker trigger). Tokenised so a service theme tunes them
+   * once instead of each component hard-coding Tailwind utilities. Defaults preserve
+   * the historical look (font-size-base, 1px border, shadow-xs). */
+  --control-font-size: var(--font-size-base);
+  --control-border-width: 1px;
+  --control-shadow: var(--shadow-xs);
   --control-icon-size: calc(1rem * var(--scaling));
   --control-icon-size-sm: calc(0.875rem * var(--scaling));
   --control-focus-ring-width: var(--focus-ring-width);

package/dist/tokens/foundation.css

@@ -40,6 +40,7 @@
   /* Status TEXT colours — darker than the fill roles so small coloured text (a StatCard delta, an
    * outline status badge label) clears WCAG AA 4.5:1 on white. The fill roles (--success/--warning/
    * --info) stay the brighter wa-iro for badges/bars; only TEXT reads these via text-*-strong. */
+  --text-primary: 204 100% 30%; /* deep brand blue — AA brand text on the soft primary tint */
   --text-success: 152 84% 22%; /* deep 若竹 — AA green text on white */
   --text-warning: 36 100% 28%; /* dark 山吹 amber — yellow can never pass as text */
   --text-info: 221 70% 38%; /* deep 群青 — AA blue text on white */
@@ -107,6 +108,21 @@
    * — the CTA then carries a brand glow with no component change. */
   --shadow-glow: 0 0 0 0 transparent;
 
+  /* Brand SPOTLIGHT — a decorative radial brand halo for hero / auth backdrops (the `.ui-brand-glow`
+   * utility paints this as a background-image on an aria-hidden layer). Every knob is a token, so a
+   * service retints (`--brand-glow-color`), softens (`--brand-glow-alpha`), resizes
+   * (`--brand-glow-size`) or repositions (`--brand-glow-position`) the halo with no markup change;
+   * override the whole `--brand-glow` for a bespoke gradient. Default: a soft primary glow up top. */
+  --brand-glow-color: var(--primary);
+  --brand-glow-alpha: 0.18;
+  --brand-glow-size: 60% 50%;
+  --brand-glow-position: 50% 0%;
+  --brand-glow: radial-gradient(
+    ellipse var(--brand-glow-size) at var(--brand-glow-position),
+    hsl(var(--brand-glow-color) / var(--brand-glow-alpha)),
+    transparent 70%
+  );
+
   /* FOCUS RING — the two global knobs for the keyboard-focus affordance (WCAG 2.4.7 / 2.4.11).
    * `--focus-ring-color` is the themeable hue (HSL components, defaults to --ring) and
    * `--focus-ring-width` the standard thickness; override either ONCE — even scoped under a
@@ -345,6 +361,7 @@
   --text-link: 204 90% 66%;
   --text-brand: 204 90% 66%;
   /* Status text on the dark spine reads LIGHT (AA on dark surfaces). */
+  --text-primary: 204 90% 64%; /* lifted brand blue — AA on the dark primary tint */
   --text-success: 146 55% 64%;
   --text-warning: 44 95% 62%;
   --text-info: 221 70% 72%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "16.6.0",
+  "version": "16.7.1",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,