@godxjp/ui 19.1.0 → 19.2.0

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

@@ -1,31 +1,17 @@
-/* Data-entry component tokens — small-by-design text knobs (rule #45/#46). */
 
-:root {
 
+:root {
   --password-strength-score-font-size: var(--font-size-xs);
   --password-strength-checklist-font-size: var(--font-size-xs);
 
-  /* BranchScopePicker (gh#319). `.ui-branch-scope-picker` was a bare hook with no rule anywhere:
-   * every measure lived as a Tailwind literal on the component, so a service could only retune
-   * the control by forking it (#45).
-   *
-   * All four are FLAT rems, not `--space-*` aliases, on purpose: the literals they replace read
-   * Tailwind's own `--spacing` grid, which this package never remaps and which does NOT move with
-   * the density axis. Aliasing them to `--space-3`/`--space-2`/`--space-1` would silently start
-   * scaling the control inside a `.ui-density-*` subtree — a visual change, not a refactor. */
-  /* Stack rhythm between the mode radios, the subset box and the error line (was `gap-3`). */
   --branch-scope-picker-gap: 0.75rem;
-  /* Read-only summary: the wrapped run of branch Badges (was `gap-1.5`). */
+
   --branch-scope-picker-badges-gap: 0.375rem;
-  /* The `mode="selected"` subset box — its inner stack rhythm and the inset that clears its
-   * indent rule (was `gap-2` / `ps-4`). */
+
   --branch-scope-picker-subset-gap: 0.5rem;
   --branch-scope-picker-subset-padding-inline: 1rem;
-  /* The indent rule itself is CHROME (#44), so it is a knob: a service that wants the flat
-   * treatment sets it to 0 rather than forking the component. Default = today's `border-s-2`. */
+
   --branch-scope-picker-subset-border-width: var(--stroke-md);
-  /* Bounded height of the scrollable branch list (was `max-h-64`). Flat by design: the box is a
-   * keyboard-reachable scroll region whose job is to cap the control's measure, so it must not
-   * grow with density and push the surrounding form off a 390px frame. */
+
   --branch-scope-picker-list-max-height: 16rem;
 }

package/dist/tokens/components/descriptions.css

@@ -1,36 +1,16 @@
-/* Descriptions component tokens. */
+
 
 :root {
-  /* Width of the label column when <Descriptions layout="horizontal">. Labels align to this
-   * shared column so the values line up (the horizontal-detail look, mirroring <Form layout>).
-   * A rem value gives a fixed aligned column; set `max-content` to size each label to its text.
-   * (rule #44/#45 — a service theme tunes it here instead of forking CSS.) */
+
   --descriptions-label-width: 8rem;
-  /* Row-to-row gap (gh#294). Default = the historical hardcoded `gap-y-3`, so nothing changes
-   * visually by default. A consumer composing Descriptions beside a Form/FormField (a read-only
-   * block above an editable field on the same card) retunes this to `var(--space-4)` to match
-   * Form's own field-to-field rhythm instead of the two blocks reading as visually unrelated. */
+
   --descriptions-row-gap: var(--space-3);
-  /* Column-to-column gap of the <dl> grid (#319). Was a hardcoded `gap-x-6`, the one axis of the
-   * grid rhythm a service could NOT reach while --descriptions-row-gap was already a knob — so a
-   * 2/3-column detail block could be retuned vertically but never horizontally.
-   * A RAW rem, deliberately NOT var(--space-6): `gap-x-6` reads Tailwind's own --spacing grid,
-   * which this repo does NOT density-scale, so a --space-* default would silently rescale the
-   * column gap under a compact/comfortable density. Point it at var(--space-6) to opt in. */
+
   --descriptions-column-gap: 1.5rem;
-  /* Label → value gap inside ONE item when layout="horizontal" (was `gap-x-3`). Pairs with
-   * --descriptions-label-width: a service that narrows the label column usually wants to close
-   * this gap in the same step. Raw rem for the same --spacing reason as above. */
+
   --descriptions-label-gap: 0.75rem;
-  /* VALUE TYPOGRAPHY (gh#294 + #319). `FormField staticText` renders its read-only value with the
-   * SAME typography as a <dd> so a static Form row and a Descriptions value are indistinguishable
-   * when mixed on one card. That contract used to be two copies of the literal `text-sm` plus a
-   * comment asking future editors to keep them in sync; both call sites now read these tokens, so
-   * the mirror is mechanical and a service retunes BOTH from one place. */
+
   --descriptions-value-font-size: var(--font-size-sm);
-  /* Companion to --descriptions-value-font-size (the gh#260 bug). The `text-sm` utility this
-   * replaces ALSO set a line-height, via Tailwind's default `--text-sm--line-height`
-   * (= calc(1.25 / 0.875)); the theme remaps --text-sm but never that companion. Without this the
-   * value would silently inherit ambient leading instead of its own 20px line box. */
+
   --descriptions-value-line-height: calc(1.25 / 0.875);
 }

package/dist/tokens/components/email.css

@@ -1,101 +1,55 @@
-/* EMAIL component tokens — the geometry/typography half of the transactional-email contract
- * (`@godxjp/ui/email`). HTML email cannot read CSS custom properties: Outlook/Gmail strip <style>
- * blocks and require LITERAL inline values, so a Blade/Twig/MJML template can never `var()` these.
- * They still live in the component tier because this is the ONE source a maintainer edits — the
- * `@godxjp/ui/email` export is GENERATED from this file plus the colour roles in foundation.css
- * (scripts/gen-email-tokens.mjs), so an email template and a web screen can never drift apart.
- *
- * Every value is a LITERAL px/number (never rem, never calc, never var): email clients resolve
- * neither the cascade nor relative units reliably, and the export must serialise to a plain hex/px
- * string. Where a value mirrors a web token the comment names it, so a retune stays traceable.
- *
- * Colours are deliberately NOT redeclared here — they derive from the semantic roles
- * (--card/--background/--foreground/--muted/--border/--primary/--ring/--brand) and are converted
- * HSL→hex at module load, so a re-themed role re-tints the email with zero copy-paste.
- * The identity mark reads --brand, NOT --success: --success is the wakatake status green, and the
- * two are deliberately distinct roles (gh#250).
- */
+
 :root {
-  /* ── Shell — the 480px transactional-email geometry ─────────────────────────────────────── */
-  --email-shell-width: 480px; /* canonical transactional card width */
-  --email-shell-padding: 32px; /* card inset — mirrors --space-8 (2rem) */
-  --email-shell-page-padding: 24px; /* gutter between the client viewport and the card (--space-6) */
-  --email-shell-border-width: 1px; /* card edge — mirrors the 1px --border hairline */
-  --email-card-radius: 10px; /* mirrors --card-radius (--radius-xl = 6px × φ ≈ 10px) */
-  --email-card-reference-height: 407px; /* canonical invitation reference measures 480×407 */
-  --email-stack-gap: 24px; /* block rhythm — mirrors --space-stack-lg (1.5rem) */
-  --email-stack-gap-sm: 12px; /* tight rhythm — mirrors --space-3 (0.75rem) */
 
-  /* ── Brand-mark lockup — the canonical GoDX capsule + wordmark (see EMAIL_BRAND_MARK) ────── */
-  /* The mark ARTWORK is the same 32×32 capsule + glyph `<Logo mark="godx" />` paints; only the
-   * RENDERED BOX differs. The canonical SCR-302 header sets it at 22px next to a 13px/700 "GoDX"
-   * wordmark, which is smaller than the web --logo-godx-size (2rem) — an email header carries the
-   * identity, not the navigation, so the lockup sits quieter (gh#250). */
-  --email-mark-width: 22px; /* canonical SCR-302 header lockup mark box */
+  --email-shell-width: 480px;
+  --email-shell-padding: 32px;
+  --email-shell-page-padding: 24px;
+  --email-shell-border-width: 1px;
+  --email-card-radius: 10px;
+  --email-card-reference-height: 407px;
+  --email-stack-gap: 24px;
+  --email-stack-gap-sm: 12px;
+
+  --email-mark-width: 22px;
   --email-mark-height: 22px;
-  --email-mark-gap: 8px; /* mark ↔ wordmark — mirrors --logo-wordmark-gap (--space-2) */
-  --email-wordmark-font-size: 13px; /* canonical wordmark size (≈ --font-size-xs 12.5px) */
-  --email-wordmark-font-weight: 700; /* mirrors --logo-wordmark-font-weight */
+  --email-mark-gap: 8px;
+  --email-wordmark-font-size: 13px;
+  --email-wordmark-font-weight: 700;
 
-  /* ── Typography — literal px so no client has to resolve the rem scale ──────────────────── */
-  /* The DXS canonical face is Noto Sans JP (see src/styles/fonts.css; product override, direct
-   * instruction). Email clients honour NO @font-face, so the stack ships the face NAME first and
-   * degrades through the platform JP faces to a generic — a client with Noto Sans JP installed (or
-   * a webmail that already loaded it, which is common — it is a widely preinstalled/CDN-cached
-   * Google face, more likely to actually render than the niche M PLUS 2 ever was) renders the
-   * canonical face, everything else lands on Hiragino (macOS/iOS) → Yu Gothic (Windows) →
-   * M PLUS 2 → Meiryo → the system UI face → Arial → sans-serif. Family names are SINGLE-quoted
-   * on export (the generator normalises) because an inline `style="…"` attribute is double-quoted;
-   * only ASCII aliases are listed, since a non-ASCII family name does not survive every transfer
-   * encoding. */
   --email-font-family-sans:
     "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic,
     "M PLUS 2", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, Arial,
     sans-serif;
-  /* Tabular/reference strings — invoice ids, masked card numbers, ISO dates, amounts — are set in
-   * the mono face in the canonical card. Mirrors --font-family-mono. */
+
   --email-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --email-body-font-size: 14px; /* mirrors --font-size-base (0.875rem) */
-  /* 1.9, NOT the web --line-height-body (1.7) — the canonical email card runs its JP body copy
-   * looser than a screen, because a mail client gives the reader no density control. */
+  --email-body-font-size: 14px;
+
   --email-body-line-height: 1.9;
-  --email-body-font-weight: 400; /* mirrors --font-weight-normal */
-  --email-heading-font-size: 17px; /* canonical card title (≈ --heading-h2, base × φ^¼² ≈ 17.6px) */
-  --email-heading-line-height: 1.7; /* the title shares the card's body leading, not a tight ramp */
-  --email-heading-font-weight: 500; /* mirrors --font-weight-medium — an email title is calm, not bold */
+  --email-body-font-weight: 400;
+  --email-heading-font-size: 17px;
+  --email-heading-line-height: 1.7;
+  --email-heading-font-weight: 500;
 
-  /* ── Primary CTA — the one action button ────────────────────────────────────────────────── */
-  /* 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 */
-  --email-cta-font-weight: 500; /* mirrors --font-weight-medium */
+  --email-cta-line-height: 44px;
+  --email-cta-padding-x: 16px;
+  --email-cta-radius: 6px;
+  --email-cta-font-size: 14px;
+  --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;
 
-  /* ── Legal footer ───────────────────────────────────────────────────────────────────────── */
-  --email-footer-font-size: 11px; /* mirrors --font-size-2xs (base ÷ φ^¼² ≈ 11.1px) */
-  --email-footer-line-height: 1.8; /* the legal band runs looser than the web --line-height-normal */
-  --email-footer-link-gap: 12px; /* horizontal separation between footer links (--space-3) */
-  --email-footer-padding-top: 20px; /* space above the legal band */
-  --email-footer-border-width: 1px; /* the hairline above the legal band */
+  --email-focus-border-width: 2px;
 
-  /* ── Focus affordance (webmail preview panes that DO honour :focus) ─────────────────────── */
-  --email-focus-border-width: 2px; /* mirrors --focus-ring-width */
+  --email-mobile-max-width: 520px;
+  --email-mobile-width: 100%;
+  --email-mobile-padding: 20px;
+  --email-mobile-page-padding: 12px;
 
-  /* ── Mobile reflow — applied under the narrow media query and by inline fallbacks ───────── */
-  --email-mobile-max-width: 520px; /* the reflow breakpoint (card width + both gutters) */
-  --email-mobile-width: 100%; /* the card goes fluid below the breakpoint */
-  --email-mobile-padding: 20px; /* reduced card inset — mirrors --space-5 */
-  --email-mobile-page-padding: 12px; /* reduced viewport gutter — mirrors --space-3 */
-  /* One step below the 17px desktop title. The canonical 390px reference raster is unusable (it is
-   * 435px wide and already clips the card — dxs-platform/platform#496), so this is the library's
-   * documented contract rather than a measured canonical value. */
   --email-mobile-heading-font-size: 16px;
-  --email-mobile-cta-width: 100%; /* the CTA goes full-bleed so the tap target spans the card */
+  --email-mobile-cta-width: 100%;
 }

package/dist/tokens/components/error-surface.css

@@ -1,36 +1,20 @@
-/* ErrorSurface — the 403 / 404 / 500 / 503 exception surface (gh#221, gh#251).
- *
- * Package-owned geometry: a service retunes the surface here (or in its own theme.css) instead of
- * forking `.ui-error-surface` or adding a `className` to the component. Chrome defaults are QUIET
- * (cardinal rule #44): the metadata block ships with no divider — a service opts IN.
- */
+
 :root {
-  /* Measure of the surface block. Caps the status code + body + metadata column so a long ja/vi
-   * headline wraps at a readable width in BOTH shells, including the application shell where
-   * PageContainer is much wider than the copy wants to be. */
+
   --error-surface-max-width: 32rem;
 
-  /* Rhythm between the status code, the EmptyState body, the metadata list and the progress meter. */
   --error-surface-gap: var(--space-3);
 
-  /* Block padding of the surface inside the shell it is placed in. Desktop (1440/1024) default; the
-   * 390 step steps it down so a phone loses no vertical space (see styles/shell-layout.css). */
   --error-surface-padding-block: var(--space-10);
   --error-surface-padding-block-compact: var(--space-6);
 
-  /* Brand slot (a Logo) above the status code, system mode only. */
   --error-surface-brand-gap: var(--space-2);
 
-  /* Metadata description list: row rhythm and the label↔value gap inside one row. */
   --error-surface-meta-gap: var(--space-1);
   --error-surface-meta-row-gap: var(--space-2);
 
-  /* Chrome, default quiet (#44). A service opts in with
-   * `--error-surface-meta-border: 1px solid hsl(var(--border));`. */
   --error-surface-meta-border: none;
   --error-surface-meta-padding-block: 0;
 
-  /* Width of the maintenance progress meter — narrower than the measure, so it reads as metadata
-   * rather than as the primary content of the page. */
   --error-surface-progress-max-width: 18rem;
 }

package/dist/tokens/components/feedback.css

@@ -1,18 +1,11 @@
-/* Feedback primitive tokens: dialog, alert, empty state. */
+
 
 :root {
   --sheet-width-default: 22.5rem;
-  /* Overlay scrims — `initial` so the shared semantic --overlay-background re-resolves at the CALL
-   * SITE under a scoped [data-tenant]/.dark theme (a :root binding to it freezes at :root and a
-   * scoped override never reaches the overlay). Each surface takes a SHARE of that one scrim rather
-   * than a private literal, so a service retints every backdrop with one --overlay-background while
-   * the calibrated per-surface depth survives: a slide-in Sheet washes the page more lightly than a
-   * modal Dialog. Defaults resolve to rgb(0 0 0 / 0.2) (sheet) and rgb(0 0 0 / 0.3) (dialog). */
+
   --sheet-overlay-background: initial;
   --sheet-overlay-alpha: 40%;
-  /* Sheet chrome rhythm (#319). --sheet-pad-x/-y already governed the panel inset, but the gaps
-   * INSIDE the chrome — header stack, title/subtitle pair, the extra-slot row — were literal, so
-   * a service could retune the sheet's outer padding and still be stuck with the inner rhythm. */
+
   --sheet-shadow: var(--shadow-lg);
   --sheet-header-space-gap: 0.375rem;
   --sheet-title-block-space-gap: var(--space-1);
@@ -21,11 +14,9 @@
   --sheet-footer-space-gap: var(--space-2);
   --sheet-title-font-size: var(--font-size-lg);
   --sheet-description-font-size: var(--font-size-sm);
-  /* The scroll region keeps a sliver of padding so a focused control's ring is never clipped at
-   * the scroll edges — retune together with --focus-ring-width. */
+
   --sheet-body-space-block: var(--space-1);
-  /* Close button: offset from the panel corner, and the inline room the header reserves so a
-   * title never runs under it. */
+
   --sheet-close-offset: var(--space-4);
   --sheet-close-rest-alpha: 0.7;
   --sheet-header-close-space-inline-end: var(--space-8);
@@ -33,125 +24,68 @@
   --dialog-viewport-inset: 1.5rem;
   --dialog-overlay-background: initial;
   --dialog-overlay-alpha: 60%;
-  /* Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the
-   * whole system, or --dialog-space-x/-y for dialogs only). */
+
   --dialog-space-x: var(--space-chrome-x);
   --dialog-space-y: var(--space-chrome-y);
   --dialog-space-inset: var(--dialog-space-y) var(--dialog-space-x);
   --dialog-space-gap: var(--space-stack-md);
   --dialog-close-space-offset: var(--space-4);
-  /* Dialog chrome rhythm (#319) — the exact mirror of the --sheet-* set above, because Dialog's
-   * header markup is byte-identical to Sheet's. --dialog-space-x/-y already governed the panel
-   * inset, but every gap INSIDE the chrome (header stack, title/subtitle pair, the extra-slot row)
-   * was a literal on the component, so a service could retune the outer padding and still be stuck
-   * with the inner rhythm. Defaults are the values the literals resolved to. */
+
   --dialog-header-space-gap: var(--space-stack-xs);
   --dialog-title-row-space-gap: var(--space-3);
   --dialog-title-block-space-gap: var(--space-1);
   --dialog-extra-space-gap: var(--space-2);
-  /* Inline room the header reserves so a long title or the extra slot never runs under the
-   * absolutely-positioned close button; retune together with --dialog-close-space-offset.
-   * Mirrors --sheet-header-close-space-inline-end. */
+
   --dialog-header-close-space-inline-end: var(--space-8);
-  /* Close button rest opacity — quiet at rest, full on hover (rule #44). Was a hard 0.7 baked into
-   * dialog-layout.css with no way for a theme to make the ✕ louder. Mirrors
-   * --sheet-close-rest-alpha so the two overlay siblings retune together. */
+
   --dialog-close-rest-alpha: 0.7;
-  /* Type-to-confirm challenge: the step-up failure line under the input. Its size + ink were
-   * `text-sm text-destructive` on the component, i.e. unreachable from a theme. */
+
   --dialog-step-up-error-font-size: var(--font-size-sm);
-  /* Alert corner radius (gh#268 — rule #45): a full-width Alert often sits in the
-   * same page column as a Card — so the DEFAULT IS the Card radius (gh#282); a service re-tunes by
-   * overriding this once. Default keeps the historical --radius-md. */
+
   --alert-radius: var(--card-radius);
   --alert-space-inset: var(--space-section-active);
   --alert-space-gap: var(--space-inline-md);
   --alert-inner-space-gap: var(--space-stack-sm);
   --alert-dismiss-space-offset: var(--space-3);
-  /* Leading tone glyph (the ⚠/✓/ⓘ at the start of the strip). It was a bare `1.25rem` in
-   * alert-layout.css with no token at all, so the ONLY ways to resize it were `!important` or a
-   * forked stylesheet — the two things the icon axis's tier 2 exists to abolish (gh#326). Same
-   * step, so nothing moves; a service now scopes `--alert-icon-size` to one Alert instead.
-   * Deliberately NOT --scaling-multiplied: the literal it replaces did not track density. */
+
   --alert-icon-size: var(--icon-size-lg);
-  /* Dismiss ✕ — rest opacity (quiet at rest, full on hover, rule #44) and glyph size. The rest
-   * alpha was a hard 0.7 in alert-layout.css whose `:hover` companion lived on the COMPONENT as
-   * `hover:opacity-100`, so the two halves of one affordance sat in two files and neither was
-   * themeable. Mirrors --sheet-close-rest-alpha. The icon size carries a raw rem, not
-   * var(--space-N): it replaces a flat Tailwind `size-4` step and must not start tracking the
-   * density axis. */
+
   --alert-dismiss-rest-alpha: 0.7;
   --alert-dismiss-icon-size: var(--icon-size-md);
-  /* Soft (subtle) semantic tint ratios — themeable so a service can hit its exact spec
-   * (a brand's success-bg/-border are often more present than the faint 5%/30% default). */
+
   --alert-bg-alpha: 0.05;
   --alert-border-alpha: 0.3;
-  /* BANNER — the page-level Alert treatment (gh#255). Every constant a service would want to
-   * match to its page grid is a knob (rule #45).
-   *
-   * --banner-radius and --banner-border-width are NOT declared here (gh#327). They used to be,
-   * and both copies were dead: components/banner.css declares the same two names at the same
-   * `:root`, base.css imports banner AFTER feedback, so banner won every time. Radius agreed at
-   * `0`, but border-width did not — this file said `0` and banner.css says `1px`, and `1px` is
-   * what alert-layout.css actually paints as the strip's block-end hairline. So anyone who read
-   * THIS file for the default was told the strip has no rule when it has one, and the MCP token
-   * catalog carried both entries with the two conflicting values. banner.css owns the strip
-   * geometry; these two live there and only there.
-   *
-   * The inline inset tracks the live page gutter, so a banner mounted above a PageContainer lines
-   * its text up with the page title instead of sitting at a second, unrelated margin. */
+
   --banner-border-block-end-width: 1px;
   --banner-space-block: var(--space-3);
-  /* Inline inset tracks the page gutter so a banner's text lines up with the page title.
-   * `--space-page-active-x` steps down to the compact gutter on `.ui-page-container` only, and
-   * custom properties inherit — so a banner rendered INSIDE the container picks the compact value
-   * up for free, while the normal case (a banner mounted ABOVE the container, or in AppShell) would
-   * keep the desktop gutter and sit 8px out at 390px. The compact step below is what actually keeps
-   * the two aligned; retune it rather than hard-coding a mobile inset at the call site. */
+
   --banner-space-inline: var(--space-page-active-x);
   --banner-space-inline-compact: var(--space-page-compact-x);
-  /* Dismiss offset is measured from the banner's own (shorter) block inset, so the ✕ stays
-   * optically centred on a one-line strip instead of floating at the inline-alert offset. */
+
   --banner-dismiss-space-offset: var(--space-2);
-  /* Brand glow layer for the raised dialog/sheet panel — invisible no-op at rest (rule #44).
-   * Paired AFTER --shadow-lg in the surface box-shadow so a service can wash the overlay with the
-   * global glow, e.g. --dialog-content-glow: var(--shadow-glow), with no markup change. */
+
   --dialog-content-glow: 0 0 0 0 transparent;
   --empty-state-space-y: var(--space-10);
   --empty-state-space-x: var(--space-6);
-  /* Measure of the description paragraph (rule #45 — a service-tunable constant gets a knob).
-   * 28rem reads ~65 Latin characters per line; a JA/VI service that needs a shorter or longer
-   * measure for its own copy retunes this once instead of forking `.ui-empty-state-description`. */
+
   --empty-state-description-max-width: 28rem;
   --empty-state-section-space-y: var(--space-6);
   --empty-state-section-space-x: var(--space-4);
   --empty-state-compact-space-y: var(--space-3);
   --empty-state-compact-space-x: var(--space-2);
-  /* EmptyState icon medallion colour — `initial` so the role defaults re-resolve at the call site
-   * under a scoped theme (rule #44). A service recolours the glyph (--empty-state-icon-foreground)
-   * or washes the medallion fill (--empty-state-icon-tint) without forking.
-   * Defaults = hsl(var(--muted-foreground)) glyph · hsl(var(--muted)) fill. */
+
   --empty-state-icon-foreground: initial;
   --empty-state-icon-tint: initial;
-  /* Medallion box + the glyph inside it. Both were literal (`width: 3rem` in the stylesheet, a
-   * `size-6` utility on the icon), so a service could not scale the empty-state mark to its own
-   * page rhythm — and the two must move TOGETHER or the glyph stops sitting centred in its
-   * circle, which is exactly the kind of pair rule #45 exists to keep tunable as one. */
+
   --empty-state-icon-size: var(--icon-size-4xl);
   --empty-state-icon-glyph-size: var(--icon-size-xl);
   --skeleton-row-gap: var(--space-stack-sm);
   --skeleton-cell-gap: var(--space-inline-lg);
   --skeleton-card-inset: var(--space-section-active);
   --skeleton-radius: var(--radius);
-  /* Skeleton placeholder fill — `initial` so the --muted default re-resolves at the call site under
-   * a scoped theme (a :root binding to a role var freezes at :root). A service tints the shimmer to
-   * its surface (rule #44) without forking the keyframes. Default = hsl(var(--muted)). */
+
   --skeleton-background: initial;
-  /* Skeleton bar heights + widths (#319). These carry RAW rem, not var(--space-N): the literals
-   * they replace were plain Tailwind steps, which are not multiplied by --scaling. Routing them
-   * through the spacing scale would silently make the loading state track the density axis while
-   * the loaded content it stands in for does not. Names say what each bar STANDS IN FOR, so a
-   * service retuning its type scale knows which one to move. */
+
   --skeleton-block-height: 1rem;
   --skeleton-caption-height: 0.75rem;
   --skeleton-title-height: 1.75rem;
@@ -160,64 +94,33 @@
   --skeleton-stat-value-width: 8rem;
   --skeleton-stat-caption-width: 5rem;
 
-  /* QUERY LIFECYCLE FOOTERS — the two rows `<InfiniteQueryState>` appends under a paginated feed:
-   * the "load more" button row and the "loading more…" caption. Both gaps were Tailwind literals
-   * on the component (`pt-4` / `pt-2`), so a service running a denser (or airier) feed could not
-   * align them to its own vertical rhythm without forking the component (rule #45). They live in
-   * the feedback tier because these ARE query feedback surfaces and there is no query stylesheet.
-   * Defaults = var(--space-stack-md) (16px) and var(--space-stack-sm) (8px) — the exact values the
-   * Tailwind steps resolved to, so adopting this changes nothing until a theme opts in. */
   --query-load-more-space-block-start: var(--space-stack-md);
   --query-loading-more-space-block-start: var(--space-stack-sm);
 
-  /* TOOLTIP — the transient label surface. Every constant here was a Tailwind literal baked into
-   * the component (`max-w-xs px-2 py-1 rounded-md text-xs shadow-md`), so a service could not
-   * retune tooltip density or measure without forking the component (rule #45). Defaults reproduce
-   * the previous look exactly, so adopting this changes nothing until a theme opts in. */
   --tooltip-max-width: 20rem;
   --tooltip-space-inline: var(--space-2);
   --tooltip-space-block: var(--space-1);
   --tooltip-radius: var(--radius);
   --tooltip-font-size: var(--font-size-xs);
-  /* Raised-surface depth — role-mirror knob, so a flat service theme sets `none` once. */
+
   --tooltip-shadow: var(--shadow-md);
-  /* Surface colours — `initial` so the popover roles re-resolve at the CALL SITE under a scoped
-   * [data-tenant]/.dark theme (docs/TOKENS.md · "Role-mirror knobs MUST be `initial`").
-   * Defaults = hsl(var(--popover)) fill · hsl(var(--popover-foreground)) text. */
+
   --tooltip-background: initial;
   --tooltip-foreground: initial;
   --tooltip-border-color: initial;
 
-  /* POPOVER — the interactive overlay panel. Same story as Tooltip: `w-72 rounded-md p-4 shadow-md`
-   * were literals, so a service could not align the panel to its own grid or width scale. */
   --popover-width: 18rem;
   --popover-space-inset: var(--space-4);
   --popover-radius: var(--radius);
   --popover-shadow: var(--shadow-md);
   --popover-header-space-gap: var(--space-1);
   --popover-header-font-size: var(--font-size-sm);
-  /* Role-mirror knobs — `initial`, defaults resolve at the call site (see Tooltip above). */
+
   --popover-surface-background: initial;
   --popover-surface-foreground: initial;
   --popover-surface-border-color: initial;
 
-  /* TOAST (Sonner) — the status glyph in the toast's leading slot.
-   *
-   * WHY A KNOB AND NOT A UTILITY: sonner renders the toast body itself and takes the five status
-   * glyphs through ONE `icons={{ success, info, warning, error, loading }}` config prop. That prop
-   * is all-or-nothing — a consumer who wants a different glyph size must re-declare all five icons,
-   * re-importing lucide and re-deriving the aria wiring. Routing the size through a token makes it
-   * a one-line theme override instead (rule #45).
-   *
-   * Raw rem, not var(--space-N): it replaces a flat Tailwind `size-4` step, and the 16px box sonner
-   * gives `[data-icon]` is itself fixed — scaling the glyph with density alone would overflow it.
-   *
-   * NAMESPACE NOTE: sonner publishes its own `--toast-*` custom properties (--toast-icon-margin-*,
-   * --toast-svg-margin-*, --toast-button-margin-*, --toast-close-button-*). Neither name below
-   * collides with those; keep it that way when adding to this group. */
   --toast-icon-size: var(--icon-size-md);
-  /* Viewport gutter of the mobile toast stack. Sonner passes `mobileOffset` straight into inline
-   * CSS, so a var() string resolves normally. Flat 16px on purpose: this is a fixed inset from the
-   * device edge (thumb reach / safe area), not a density-scaled gap inside a surface. */
+
   --toast-mobile-offset: 16px;
 }

package/dist/tokens/components/form.css

@@ -1,50 +1,18 @@
-/* Form layout tokens: horizontal-layout label column geometry. */
+
 
 :root {
-  /* Width of the label column in horizontal/inline layout. A service theme sets
-   * this once (e.g. 110px) to align every form to its design grid; the Form/
-   * FormField `labelWidth` prop overrides per form/field. */
-  /* Fixed aligned label column by default (gh#284) — `max-content` sized each field's label
-   * column to its own label, so horizontal forms (especially columns={2} grids) had controls
-   * starting at ragged x positions. 8rem mirrors --descriptions-label-width so edit forms and
-   * show pages share the same optical grid; the Form/FormField `labelWidth` prop overrides. */
+
   --form-label-width: 8rem;
 
-  /* Column gap between the label and its control in horizontal/inline layout. */
-  --form-label-gap: var(--space-4); /* 16px */
-
-  /* Type in the label column. Inherits the body size by default, so nothing moves unless a
-   * service opts in. It is a knob because the label column already is one: --form-label-width
-   * lets a service align forms to its grid, and a service whose grid was drawn around a
-   * smaller label had no way to say so — leaving it to hand-write font-size per label, which
-   * is exactly what the width token exists to prevent. */
-  --form-label-font-size: var(--text-sm); /* 14px */
-
-  /* Row rhythm between a Form's own top-level blocks (gh#295) — e.g. the field group's
-   * CardContent and its CardFooter action row, or two FormFields that happen to be Form's OWN
-   * direct children (no Card framing). Unchanged from the historical value. */
-  --form-block-gap: var(--space-4); /* 16px */
-
-  /* Field-to-field row rhythm (gh#295) — mirrors --descriptions-row-gap so a read-only value
-   * mixed in via `FormField.staticText` (gh#294) and a real Descriptions block share ONE canonical
-   * rhythm. Applied via margin-based sibling spacing on FormField itself (not Form's flex `gap`,
-   * which only reaches DIRECT children — dead in the common `Form > CardContent > FormField*`
-   * composition every real Save-button form needs), so it holds at any DOM depth relative to Form. */
-  --form-field-row-gap: var(--space-3); /* 12px */
-
-  /* Row rhythm between the ROWS of a `<Form columns={n}>` grid (gh#304). The grid path cannot use
-   * the margin above — a per-item margin inside a grid double-counts the track gap AND leaves the
-   * first item of row 1 unshifted while its row-mates drop, so row 1's columns end up misaligned.
-   * The rhythm therefore rides the grid's own `row-gap`, and it DEFAULTS TO THE SAME
-   * --form-field-row-gap the stacked path uses so `columns={1}` — and every `columns={n}` form once
-   * it collapses to one column on a narrow container — is pixel-identical to a Form with no
-   * `columns` at all. Retune this alone only to give multi-column forms a looser row rhythm than
-   * stacked ones; retune --form-field-row-gap to move both together. */
-  --form-grid-row-gap: var(--form-field-row-gap); /* 12px */
-
-  /* Gutter between the COLUMNS of a `<Form columns={n}>` grid (gh#304). Was ResponsiveGrid's
-   * generic 16px stack gap with no way to say otherwise; it is a form's inter-field gutter and a
-   * service aligning forms to its design grid needs it as a knob (rule #45). The default keeps the
-   * historical 16px, so nothing moves unless a theme opts in. */
-  --form-grid-column-gap: var(--space-4); /* 16px */
+  --form-label-gap: var(--space-4);
+
+  --form-label-font-size: var(--text-sm);
+
+  --form-block-gap: var(--space-4);
+
+  --form-field-row-gap: var(--space-3);
+
+  --form-grid-row-gap: var(--form-field-row-gap);
+
+  --form-grid-column-gap: var(--space-4);
 }