@godxjp/ui 19.1.0 → 19.2.0

package/dist/styles/dialog-layout.css

@@ -1,18 +1,12 @@
-/*
- * DIALOG — overlay content shell (form + confirm modes share tokens).
- */
+
 
 @layer components {
-  /* Sheet (side-panel, Radix Dialog) chrome padding — defaults to the shared global chrome tokens.
-   * A service overrides --space-chrome-* once (whole system) or --sheet-pad-* for the Sheet only.
-   * (Lives here because Sheet is Dialog-based and dialog-layout.css is in the main bundle.) */
+
   [data-slot="sheet-content"] {
     --sheet-pad-x: var(--space-chrome-x);
     --sheet-pad-y: var(--space-chrome-y);
   }
 
-  /* Sheet header/footer dividers appear ONLY when a SheetBody is present (mirrors the dialog rule) —
-   * a body-less sheet never shows a doubled header-bottom + footer-top line. */
   [data-slot="sheet-content"]:has([data-slot="sheet-body"]) [data-slot="sheet-header"] {
     border-bottom: 1px solid hsl(var(--border));
   }
@@ -21,10 +15,6 @@
     border-top: 1px solid hsl(var(--border));
   }
 
-  /* Scrim = a SHARE of the ONE shared semantic scrim (--overlay-background), resolved here at the
-   * call site so a scoped [data-tenant]/.dark override of --overlay-background actually reaches the
-   * portaled overlay (docs/TOKENS.md · "Role-mirror knobs MUST be `initial`"). Setting
-   * --dialog-overlay-background / --sheet-overlay-background still wins outright. */
   .ui-dialog-overlay {
     background-color: var(
       --dialog-overlay-background,
@@ -39,10 +29,6 @@
     );
   }
 
-  /* Stacking joins the ONE system layer (--overlay-z-index) instead of a private z-50 — Sheet,
-   * Tooltip and Popover already do, so a service that lifts its overlays above an app-owned
-   * fixed element no longer has to fork the dialog to bring it along. Default is 50, the literal
-   * this replaces. */
   .ui-dialog-overlay {
     position: fixed;
     inset: 0;
@@ -62,7 +48,7 @@
     border: 1px solid hsl(var(--border));
     background-color: hsl(var(--background));
     padding: var(--dialog-space-inset);
-    /* clip so the full-bleed header/footer bands round with the dialog corners (Ant Modal). */
+
     overflow: hidden;
     box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)), var(--dialog-content-glow);
   }
@@ -73,9 +59,6 @@
     }
   }
 
-  /* Ring-safe scrollable body for a tall dialog. Full-bleed inset (matches the dialog padding) so a
-   * full-width control's 3px focus ring never clips against the scroll container's computed
-   * overflow-x; padding-block keeps the ring visible at the scroll edges. Mirrors SheetBody. */
   [data-slot="dialog-body"] {
     min-height: 0;
     max-height: min(60vh, 32rem);
@@ -86,9 +69,6 @@
     scroll-padding-block: var(--space-1);
   }
 
-  /* Header & footer are PLAIN stacked sections by default — the dialog padding gives the inset and the
-   * content `gap` gives the header↔footer spacing. No border band here, so a simple confirm dialog
-   * (header + footer, NO body) never shows an internal divider or a doubled line + padding. */
   [data-slot="dialog-header"] {
     display: flex;
     flex-direction: column;
@@ -96,17 +76,12 @@
     text-align: start;
   }
 
-  /* DIALOG chrome rhythm — the exact mirror of the `.ui-sheet-*` set at the foot of this file.
-   * Dialog's default header markup is byte-identical to Sheet's, but its gaps were literal on the
-   * component (`gap-[var(--space-3)] pe-[var(--space-8)]`, `min-w-0 flex-col gap-[var(--space-1)]`,
-   * `shrink-0 gap-[var(--space-2)]`), so the two siblings could not be retuned together (#319). */
   .ui-dialog-title-row {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: var(--dialog-title-row-space-gap);
-    /* Reserves inline room for the absolutely-positioned close button so a long title or the extra
-     * slot never runs under it. Moves with --dialog-close-space-offset. */
+
     padding-inline-end: var(--dialog-header-close-space-inline-end);
   }
 
@@ -125,14 +100,11 @@
     white-space: nowrap;
   }
 
-  /* Close glyph — mirrors `.ui-sheet-close-icon`, so both overlay ✕ marks follow the one control
-   * affix size instead of a per-component `size-4`. */
   .ui-dialog-close-icon {
     inline-size: var(--control-affix-icon-size);
     block-size: var(--control-affix-icon-size);
   }
 
-  /* Type-to-confirm challenge: the step-up failure line under the input. */
   .ui-dialog-step-up-error {
     font-size: var(--dialog-step-up-error-font-size);
     color: hsl(var(--destructive));
@@ -151,9 +123,6 @@
     }
   }
 
-  /* Scrollable-body layout (Ant Modal): ONLY when a body is present do header & footer become
-   * full-bleed pinned bands with a divider, so the body scrolls between two fixed bars. Without a
-   * body the dividers (and their band padding) collapse — fixes the double-border + oversized gap. */
   [data-slot="dialog-content"]:has([data-slot="dialog-body"]) [data-slot="dialog-header"] {
     margin-inline: calc(-1 * var(--dialog-space-x));
     margin-block-start: calc(-1 * var(--dialog-space-y));
@@ -197,10 +166,6 @@
     max-width: 27.5rem;
   }
 
-  /* No scrim override here: the two-factor dialog's backdrop is the SHARED overlay scrim
-   * (.ui-dialog-overlay above). The old literal `rgb(0 0 0 / 0.3)` re-stated the dialog default at a
-   * higher specificity and silently opted this one dialog out of --overlay-background theming. */
-
   .ui-two-factor-setup-enrollment,
   .ui-two-factor-setup-recovery {
     display: flex;
@@ -259,19 +224,6 @@
   }
 }
 
-/*
- * REDUCED MOTION — every overlay enter/exit animation is gated (WCAG 2.3.3 Animation from
- * Interactions / 2.2.2 Pause-Stop-Hide). Dialog, AlertDialog, CommandPalette (a Dialog), Sheet /
- * mobile drawer and Popover all animate via Tailwind `data-[state]:animate-in|animate-out`
- * utilities plus a `transition`; the content additionally zooms/slides, which is exactly the
- * vestibular trigger the media query exists for. The overlay still fades in/out INSTANTLY, so the
- * open/closed state is never ambiguous — only the motion is removed, never the affordance.
- *
- * DELIBERATELY UNLAYERED. Tailwind v4 emits `animate-in` / `slide-in-from-*` into `@layer
- * utilities`, which beats ANY rule inside `@layer components` regardless of specificity — a gate
- * written inside the components layer above would be dead code. Unlayered author declarations win
- * over every layered one, so this block (and only this block) actually stops the animation.
- */
 @media (prefers-reduced-motion: reduce) {
   [data-slot="dialog-overlay"],
   [data-slot="dialog-content"],
@@ -286,16 +238,7 @@
 }
 
 @layer components {
-  /* TOOLTIP / POPOVER — the two portaled overlay surfaces.
-   *
-   * Both shipped their entire box as Tailwind literals on the component
-   * (`z-50 max-w-xs px-2 py-1 rounded-md text-xs shadow-md`, `w-72 p-4`), so a service
-   * theme could not retune tooltip density, popover width, or overlay stacking without
-   * forking the component — exactly the gap cardinal rule #45 exists to close.
-   *
-   * Colours read the popover ROLE at the call site (not bound at :root) so a scoped
-   * [data-tenant]/.dark override still reaches the portaled node — docs/TOKENS.md ·
-   * "Role-mirror knobs MUST be `initial`". */
+
   .ui-tooltip-content {
     z-index: var(--overlay-z-index);
     width: fit-content;
@@ -332,16 +275,12 @@
 }
 
 @layer components {
-  /* SHEET chrome rhythm — --sheet-pad-x/-y already governed the panel inset; these are the gaps
-   * INSIDE that chrome, which were literal on the component (#319). */
   .ui-sheet-header {
     display: flex;
     flex-direction: column;
     gap: var(--sheet-header-space-gap);
   }
 
-  /* Reserves inline room for the absolutely-positioned close button so a long title or the
-   * extra slot never runs under it. Moves with --sheet-close-offset. */
   .ui-sheet-title-row {
     display: flex;
     align-items: flex-start;
@@ -407,7 +346,6 @@
     block-size: var(--control-affix-icon-size);
   }
 
-  /* Overlay + panel stacking joins the one system layer instead of a private z-50. */
   .ui-sheet-overlay,
   .ui-sheet-panel {
     z-index: var(--overlay-z-index);
@@ -431,8 +369,6 @@
     border-block-start: 1px solid hsl(var(--border));
   }
 
-  /* The scroll region must be allowed to shrink inside the flex column, or it grows past the
-   * panel and the footer is pushed out of view. */
   .ui-sheet-body-space {
     min-block-size: 0;
   }

package/dist/styles/focus-ring.css

@@ -1,93 +1,37 @@
-/* ─────────────────────────────────────────────────────────────────────────
- * FOCUS RING — the ONE place the keyboard-focus affordance is drawn.
- *
- * WHY THIS FILE EXISTS: the ring used to be re-written by hand in every layout
- * file, and it drifted into four incompatible shapes — the token pair
- * (`0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)))`),
- * the same with an ad-hoc `/ 0.45`, and two that hardcoded `3px` with `/ 0.35`
- * and `/ 0.3`, bypassing `--focus-ring-width` entirely. Same state, four
- * thicknesses and opacities, and no way for a service to retune them together.
- * A component that forgot the rule got the UA default instead (Chrome paints
- * `rgb(0,95,204)` — a blue belonging to no theme; that is exactly how the
- * pagination defect was found).
- *
- * THE API — three layers, each overriding the one above:
- *
- *   1. GLOBAL (`:root`, tokens/foundation.css)
- *        --focus-ring-width    thickness            (default 2px)
- *        --focus-ring-color    hue, HSL components  (default = live --ring)
- *        --focus-ring-opacity  alpha                (default 1)
- *        --focus-ring-offset   gap, outline form    (default 0px)
- *      Set any of these ONCE — even scoped under `[data-tenant]` — and EVERY
- *      ring in the system follows.
- *
- *   2. PER COMPONENT (tokens/components/*.css)
- *      A component that genuinely needs a different ring publishes its own
- *      knob and rebinds the local value, e.g.
- *        --toggle-focus-ring-alpha: 0.35;                       (public knob)
- *        .ui-toggle { --focus-ring-opacity: var(--toggle-focus-ring-alpha); }
- *      Custom properties inherit, so the rule below picks up the local value at
- *      the element that paints — one formula, per-component tuning, and the
- *      knob stays discoverable in the token file rather than buried in a
- *      hand-written box-shadow.
- *
- *   3. PER INSTANCE (consumer)
- *      `style={{ "--focus-ring-color": "0 84% 60%" }}` on any subtree.
- *
- * TURNING IT OFF: `--focus-ring-width: 0` — globally at `:root`, on one
- * component, or on one instance. A zero-width ring paints nothing.
- * A11y note: the default is ALWAYS ON (WCAG 2.4.7 / 2.4.11); switching it off
- * is a deliberate consumer act, never a default of this package. The one
- * exception that ships off is the REGION ring (`.app-main`,
- * `--region-focus-ring-width: 0`) — a documented product-owner tradeoff (see
- * tokens/foundation.css), because a control-strength frame around the whole
- * content area reads as a glitch to mouse-first users.
- *
- * TWO FORMS, one API: `box-shadow` hugs the border-radius and never shifts
- * layout, so it is the default. `outline` + `outline-offset` is for marks that
- * need a visible GAP (a star, a dot, a heading anchor) where a hugging ring
- * would touch the glyph. Both read the same four tokens.
- *
- * ADDING A COMPONENT: put its class in the matching `:is()` list below, or
- * give the element `ui-focus-ring` / `ui-focus-ring-outline`. Do NOT write a
- * `:focus-visible` box-shadow/outline anywhere else — a test enforces this
- * (`src/styles/__tests__/focus-ring-single-source.test.ts`).
- * ───────────────────────────────────────────────────────────────────────── */
+
 @layer components {
-  /* Shadow form — the default. Hugs the radius, no layout shift. */
+
   :is(
     .ui-focus-ring,
     .ui-button,
+    .ui-control,
+    .ui-input,
+    .ui-control-multiline,
+    .ui-control-trigger,
     .ui-toggle,
     .ui-checkbox,
     .ui-radio,
     .ui-slider-thumb,
     .ui-switch,
-    .ui-time-input,
     .ui-steps-inline-control,
     .ui-pagination-link,
     .ui-legal-document-toc-link,
+    .ui-code-block,
     .sb-user,
     .tb-icon-btn
-  ):focus-visible {
+  ):focus-visible,
+  .ui-control-trigger[data-state="open"],
+  .ui-tag-input:focus-within,
+  .ui-control-composite-field:focus-within,
+  .ui-control-composite-field[data-state="open"] {
     outline: none;
-    /* TWO declarations, one ring — because a control may also carry a Tailwind
-     * shadow/ring utility (`shadow-xs` on Checkbox, Radio, Switch, Input …).
-     * Those live in the UTILITIES layer, which outranks `components`, and they
-     * set `box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-     * var(--tw-shadow)` — so a plain `box-shadow` here loses and the ring never
-     * paints. Measured before this fix: Checkbox focus-visible resolved to
-     * `rgba(0,0,0,0) 0 0 0 0`, i.e. NO visible ring at all.
-     * Feeding `--tw-ring-shadow` makes the utility's own composite paint our
-     * ring (and keeps the element's resting shadow); the plain `box-shadow`
-     * covers elements that carry no such utility. */
+
     --tw-ring-shadow: 0 0 0 var(--focus-ring-width)
       hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
     box-shadow: 0 0 0 var(--focus-ring-width)
       hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
   }
 
-  /* Outline form — for marks that need a gap between glyph and ring. */
   :is(
     .ui-focus-ring-outline,
     .ui-accordion-trigger,
@@ -100,26 +44,11 @@
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
-  /* ── Per-component rebinds ────────────────────────────────────────────────
-   * Each line maps a PUBLIC knob (declared in tokens/components/*.css) onto the
-   * local value the rules above read. The historical look is preserved: these
-   * are the components that used to hand-write a different ring. */
-
-  /* Toggle: a heavier, softer ring — the control is a filled surface, so a
-   * hard 2px reads as a second border rather than a focus mark. */
   .ui-toggle {
     --focus-ring-width: var(--toggle-focus-ring-width);
     --focus-ring-opacity: var(--toggle-focus-ring-alpha);
   }
 
-  /* Time input: same reasoning as Toggle — sits inside a bordered field. */
-  .ui-time-input {
-    --focus-ring-width: var(--time-input-focus-ring-width);
-    --focus-ring-opacity: var(--time-input-focus-ring-alpha);
-  }
-
-  /* Shell chrome: softened so the ring reads as focus, not as a selected item,
-   * on the tinted sidebar/topbar grounds. */
   .sb-user {
     --focus-ring-opacity: var(--sidebar-user-focus-ring-alpha);
   }
@@ -128,7 +57,6 @@
     --focus-ring-opacity: var(--topbar-icon-focus-ring-alpha);
   }
 
-  /* Outline-form offsets — the gap each mark needs. */
   .ui-accordion-trigger {
     --focus-ring-offset: var(--accordion-focus-ring-offset);
   }
@@ -145,8 +73,6 @@
     --focus-ring-offset: var(--legal-document-section-focus-ring-offset);
   }
 
-  /* Opt OUT — the command palette input sits inside an already-focused dialog
-   * frame, so its own ring would double up (historical behaviour, kept). */
   .ui-command-input:focus-visible {
     --focus-ring-width: 0;
     outline: none;

package/dist/styles/fonts.css

@@ -1,29 +1,4 @@
-/* ─────────────────────────────────────────────────────────────────────────
- * BUNDLED FONTS — opt-in.
- *
- * Self-contained so consumers need no font config. The browser only downloads
- * the subset files matching the rendered text:
- *   · Noto Sans JP — the DXS DEFAULT face for Japanese and Latin, including the
- *                    Vietnamese glyph coverage used by the product locales
- *                    (product override, direct instruction).
- *   · M PLUS 2 — retained as the fallback after Noto Sans JP.
- *
- * IMPORT ORDER IS LOAD-BEARING — this file MUST be imported AFTER
- * `@godxjp/ui/styles/base`:
- *
- *     @import "@godxjp/ui/styles/base";   /· tokens: --font-sans-base = system stack ·/
- *     @import "@godxjp/ui/styles/fonts";  /· THEN the bundled faces overwrite it ·/
- *
- * The token fills below and foundation.css's font-agnostic default both target
- * `:root` at identical specificity (0,1,0), so whichever is parsed LAST wins.
- * Imported first, this file is silently dead — the system stack renders and the
- * ~800 KB of @font-face is downloaded for nothing (issue #210).
- *
- * The all-in-one `@godxjp/ui/styles` entry pulls this in automatically, in the
- * correct position. If you manage fonts yourself (e.g. next/font), DON'T import
- * this — import `@godxjp/ui/styles/base` + the layout layers you use and supply
- * your own faces via the --font-family-* tokens.
- * ───────────────────────────────────────────────────────────────────────── */
+
 @import "@fontsource/m-plus-2/400.css";
 @import "@fontsource/m-plus-2/500.css";
 @import "@fontsource/m-plus-2/700.css";
@@ -31,11 +6,6 @@
 @import "@fontsource/noto-sans-jp/500.css";
 @import "@fontsource/noto-sans-jp/700.css";
 
-/* Fill the font-token slots (see tokens/foundation.css + styles/base.css) with
- * the bundled faces, so the all-in-one `@godxjp/ui/styles` entry stays
- * zero-config: Noto Sans JP is the DXS default face for every supported locale
- * and M PLUS 2 remains its fallback. Consumers on the per-layer setup who
- * supply their own faces simply DON'T import this file and set the slots. */
 :root {
   --font-sans-base:
     "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic,

package/dist/styles/form-layout.css

@@ -1,12 +1,4 @@
-/*
- * FORM — Ant-style layout. Vertical by default (label above control, LEFT-aligned). Horizontal lays
- * the label beside the control from the `collapseBelow` breakpoint UP (mobile-first): below it the
- * field collapses back to vertical. `--form-label-width` / `--form-control-width` come from the Form
- * (or a per-field override). RTL-safe: logical inline axis throughout.
- *
- * IMPORTANT: label alignment (justify/text-align: end) applies ONLY in horizontal/inline mode — never
- * to a vertical field (a right-aligned label above a full-width control is wrong, gh feedback).
- */
+
 
 @layer components {
   .ui-form {
@@ -14,70 +6,23 @@
     flex-direction: column;
   }
 
-  /* Row rhythm between a Form's own top-level blocks (gh#295) — e.g. the field group's
-   * CardContent and its CardFooter action row. MARGIN, not flex `gap`: `gap` only reaches DIRECT
-   * children, which is dead the moment a consumer needs a CardFooter Save button to actually
-   * submit (it must stay a `<form>` descendant, so Form has to wrap CardContent — the FormFields
-   * become grandchildren, past flex `gap`'s reach). Margin-based sibling spacing works at any
-   * depth as long as the elements are literal siblings. */
   .ui-form > * + * {
     margin-block-start: var(--form-block-gap);
   }
 
-  /* Field-to-field row rhythm (gh#295) — MORE SPECIFIC than the rule above (two class selectors
-   * beat one), so it wins rather than stacking with it whenever two FormFields are adjacent
-   * siblings: Form's own direct children (a plain field list, no Card framing) or nested one
-   * level through CardContent (the common Card-framed, Save-button-capable case). This is what
-   * makes the rhythm hold regardless of DOM depth — the actual fix for gh#295. */
   .ui-form-field + .ui-form-field {
     margin-block-start: var(--form-field-row-gap);
   }
 
-  /* …except when the fields are ResponsiveGrid ITEMS (Form columns={n}): there the grid's own
-   * `row-gap` owns the rhythm (see the rule below), and a per-item margin double-spaces every row
-   * AND breaks column alignment — the FIRST field has no preceding sibling so no margin, while its
-   * row-mate does, shifting row 1's columns apart by exactly --form-field-row-gap and inflating
-   * every grid track by the same amount (gh#304: measured 0 / +12px tops on row 1, 89px pitch
-   * against a 77px track). Fields merely NESTED somewhere inside a grid cell (a stacked pair in one
-   * cell) are not direct children, keep the margin, and are unaffected. */
   .ui-responsive-grid > .ui-form-field + .ui-form-field {
     margin-block-start: 0;
   }
 
-  /* …and the rhythm the grid takes over is the FORM'S, not ResponsiveGrid's generic 16px stack gap
-   * (gh#304). Handing the rows to the grid fixed the alignment but silently re-tuned the spacing:
-   * a `columns={1}` form — and every `columns={n}` form once a narrow container collapses it to one
-   * column, i.e. every phone — laid its rows out 16px apart where the SAME fields without `columns`
-   * sat 12px apart. One canonical field rhythm on both paths: --form-grid-row-gap defaults to
-   * --form-field-row-gap, and the gutter becomes a knob at the same time (rule #45, 16px default).
-   *
-   * `:has(> .ui-form-field)` — a grid whose ITEMS are FormFields is a field grid, and that is the
-   * exact condition the margin reset above tests, so the two rules can never disagree about which
-   * mechanism owns a row. Deliberately NOT `.ui-form > …`: `columns={n}` is only one way to write
-   * this layout, and the Card-framed hand-written one (`Form > Card > CardContent > ResponsiveGrid
-   * > FormField*` — what a form with several titled sections must do, and what docs' invoice-form
-   * does) is the other. Keying on ancestry would give the two identical-looking layouts different
-   * row rhythms, which is the depth-dependence gh#295 removed from this file in the first place.
-   * A card/tile grid inside a form has no FormField items and keeps ResponsiveGrid's stack gap. */
   .ui-responsive-grid:has(> .ui-form-field) {
     row-gap: var(--form-grid-row-gap);
     column-gap: var(--form-grid-column-gap);
   }
 
-  /* colSpan is honoured only where the grid ACTUALLY HAS more than one column.
-   *
-   * `grid-column: span 2` on a one-column grid does not quietly degrade to one column: per spec it
-   * FABRICATES an implicit second track, that track auto-sizes to its content, and the real
-   * `minmax(0, 1fr)` track is left with the remainder — which at 320px is 0px. The field in it
-   * collapsed to zero width, and its Input's absolutely-positioned trailing affix (the clear
-   * button, `inset-inline-end: 8px` off a zero-width box) landed outside the frame with no
-   * scrollable ancestor between them: a control the keyboard could focus and the user could never
-   * see. That is a WCAG 2.1.1 failure, and a resting screenshot cannot show it because the field
-   * does not overflow — it disappears.
-   *
-   * The breakpoint mirrors ResponsiveGrid's own 2-column container query in layout.css, so the
-   * span turns on exactly when the second column does. Below it, `auto` puts the field in the
-   * single real track like every other field. */
   .ui-responsive-grid > .ui-form-field {
     grid-column: auto;
   }
@@ -88,31 +33,15 @@
     }
   }
 
-  /* Vertical (default + collapsed state): label stacked above the control column, LEFT-aligned.
-   * Gap = the shared --field-label-gap so FormField matches Descriptions and every label-above stack. */
   .ui-form-field {
     display: grid;
     gap: var(--field-label-gap);
-    /* Fill the container's inline (horizontal) axis in ANY parent — a Form's
-     * flex column (.ui-form), a ResponsiveGrid cell, or a bare flex column /
-     * block — instead of collapsing to the content's max-content width. This
-     * mirrors Ant Design's Form.Item, which sets the item/control to width:100%
-     * in vertical layout rather than relying on the parent to stretch it. Without
-     * this, a flex-column parent maps `align-self:start` onto the inline axis and
-     * the field shrinks to its widest content (a helper-less input collapses to
-     * its default ~20ch). Inline layout opts out below (Ant: compact, content-width). */
+
     inline-size: 100%;
-    /* Never stretch to a taller grid-row sibling (e.g. a field carrying a
-     * helper/error). Stretching would let .ui-form-field-control's
-     * align-content:center vertically centre the control, so a field WITHOUT a
-     * helper sits lower than one WITH a helper in the same ResponsiveGrid row.
-     * Hugging content keeps every control top-aligned across the row. This is the
-     * BLOCK (vertical) axis only — width is pinned by inline-size:100% above. */
+
     align-self: start;
   }
 
-  /* Inline layout is intentionally compact (Ant: layout="inline"): the field
-   * hugs its content so a row of inline fields can sit side by side. */
   .ui-form-field[data-layout="inline"] {
     inline-size: auto;
   }
@@ -126,34 +55,21 @@
 
   .ui-form-field-control {
     display: grid;
-    /* Single column capped to the field width. Without an explicit track the
-     * implicit column sizes to content (max-content), so a wide control (e.g. a
-     * Select with a long value) overflows its grid cell and overlaps siblings. */
+
     grid-template-columns: minmax(0, 1fr);
-    gap: var(--space-stack-xs); /* 4px between control and helper/error */
+    gap: var(--space-stack-xs);
     min-width: 0;
-    /* Cap the control width when a controlWidth is set; otherwise fill the column. */
+
     max-inline-size: var(--form-control-width, none);
-    /* Reserve the control-row height and centre the content so a SHORT control
-     * (switch, slider, rating, a bare checkbox/radio — anything thinner than an
-     * input) lines up with the label in a horizontal field instead of sitting
-     * high. `align-content: center` centres the content row without stretching
-     * the control; full-width inputs still fill via the 1fr column, and taller
-     * controls (textarea) simply grow past the floor. */
+
     min-height: var(--control-height);
     align-content: center;
   }
 
-  /* Let controls (and helper/error) shrink within the cell instead of forcing
-   * the column to their intrinsic width. */
   .ui-form-field-control > * {
     min-width: 0;
   }
 
-  /* ── Horizontal — label beside control. Each block is scoped to [data-layout=horizontal|inline]
-   * so it NEVER affects a vertical field. Applies from the collapse breakpoint up (mobile-first). */
-
-  /* collapseBelow=false → always horizontal (all widths). */
   .ui-form-field[data-collapse-below="false"]:is(
       [data-layout="horizontal"],
       [data-layout="inline"]

package/dist/styles/index.css

@@ -1,26 +1,8 @@
-/* ─────────────────────────────────────────────────────────────────────────
- * ALL-IN-ONE stylesheet — fonts + foundation + EVERY component layout layer.
- * Zero-config: `@import "@godxjp/ui/styles";` and everything is styled.
- *
- * For a smaller build that ships only what you render, DON'T use this. Instead:
- *   @import "@godxjp/ui/styles/base";        // required foundation
- *   @import "@godxjp/ui/styles/control";     // + only the layout layers you use
- *   @import "@godxjp/ui/styles/dialog-layout";
- *   ...
- * and add `@godxjp/ui/styles/fonts` AFTER `styles/base` if you want the bundled
- * faces. See src/styles/base.css for the full list and rules.
- *
- * ORDER IS LOAD-BEARING — `fonts.css` MUST come AFTER `base.css`.
- * `base.css` pulls in `tokens/base.css` → `tokens/foundation.css`, which declares
- * the font-agnostic `:root { --font-sans-base: <system stack> }` default. Both
- * declarations sit on `:root` at identical specificity (0,1,0), so the LATER one
- * wins. With `fonts.css` first the bundled faces could never apply and every
- * consumer downloaded ~800 KB of dead @font-face (issue #210).
- * ───────────────────────────────────────────────────────────────────────── */
+
 @import "sonner/dist/styles.css";
 @import "react-day-picker/style.css";
 @import "./base.css";
-/* AFTER the token layers — see the ORDER IS LOAD-BEARING note above. */
+
 @import "./fonts.css";
 @import "./shell-layout.css";
 @import "./motion.css";