@godxjp/ui 18.15.3 → 19.0.0

package/dist/styles/dialog-layout.css

@@ -39,17 +39,21 @@
     );
   }
 
+  /* 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;
-    z-index: 50;
+    z-index: var(--overlay-z-index);
   }
 
   [data-slot="dialog-content"] {
     position: fixed;
     inset-inline-start: 50%;
     top: 50%;
-    z-index: 50;
+    z-index: var(--overlay-z-index);
     display: grid;
     width: min(var(--dialog-width-default), calc(100% - var(--dialog-viewport-inset)));
     max-width: none;
@@ -88,10 +92,52 @@
   [data-slot="dialog-header"] {
     display: flex;
     flex-direction: column;
-    gap: var(--space-stack-xs);
+    gap: var(--dialog-header-space-gap);
     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);
+  }
+
+  .ui-dialog-title-block {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    gap: var(--dialog-title-block-space-gap);
+  }
+
+  .ui-dialog-extra {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--dialog-extra-space-gap);
+    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));
+  }
+
   [data-slot="dialog-footer"] {
     display: flex;
     flex-direction: column-reverse;
@@ -127,7 +173,7 @@
     inset-inline-end: var(--dialog-close-space-offset);
     top: var(--dialog-close-space-offset);
     border-radius: var(--radius-sm);
-    opacity: 0.7;
+    opacity: var(--dialog-close-rest-alpha);
   }
 
   [data-slot="dialog-close"]:hover {
@@ -238,3 +284,156 @@
     transition: none;
   }
 }
+
+@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;
+    max-width: var(--tooltip-max-width);
+    padding-inline: var(--tooltip-space-inline);
+    padding-block: var(--tooltip-space-block);
+    border-radius: var(--tooltip-radius);
+    border: 1px solid var(--tooltip-border-color, hsl(var(--border)));
+    background-color: var(--tooltip-background, hsl(var(--popover)));
+    color: var(--tooltip-foreground, hsl(var(--popover-foreground)));
+    font-size: var(--tooltip-font-size);
+    box-shadow: var(--tooltip-shadow);
+    outline: none;
+  }
+
+  .ui-popover-content {
+    z-index: var(--overlay-z-index);
+    width: var(--popover-width);
+    padding: var(--popover-space-inset);
+    border-radius: var(--popover-radius);
+    border: 1px solid var(--popover-surface-border-color, hsl(var(--border)));
+    background-color: var(--popover-surface-background, hsl(var(--popover)));
+    color: var(--popover-surface-foreground, hsl(var(--popover-foreground)));
+    box-shadow: var(--popover-shadow);
+    outline: none;
+  }
+
+  .ui-popover-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--popover-header-space-gap);
+    font-size: var(--popover-header-font-size);
+  }
+}
+
+@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;
+    justify-content: space-between;
+    gap: var(--sheet-title-row-space-gap);
+    padding-inline-end: var(--sheet-header-close-space-inline-end);
+  }
+
+  .ui-sheet-title-block {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    gap: var(--sheet-title-block-space-gap);
+  }
+
+  .ui-sheet-extra {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--sheet-extra-space-gap);
+    white-space: nowrap;
+  }
+
+  .ui-sheet-title {
+    font-size: var(--sheet-title-font-size);
+    font-weight: var(--font-weight-medium);
+    color: hsl(var(--foreground));
+  }
+
+  .ui-sheet-description {
+    font-size: var(--sheet-description-font-size);
+    color: hsl(var(--foreground) / 0.8);
+  }
+
+  .ui-sheet-body-space {
+    padding-block: var(--sheet-body-space-block);
+    scroll-padding-block: var(--sheet-body-space-block);
+  }
+
+  .ui-sheet-footer-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--sheet-footer-space-gap);
+  }
+
+  .ui-sheet-close {
+    position: absolute;
+    inset-block-start: var(--sheet-close-offset);
+    inset-inline-end: var(--sheet-close-offset);
+    border-radius: var(--radius-sm);
+    opacity: var(--sheet-close-rest-alpha);
+    transition: opacity 150ms ease;
+  }
+
+  .ui-sheet-close:hover {
+    opacity: 1;
+  }
+
+  .ui-sheet-close-icon {
+    inline-size: var(--control-affix-icon-size);
+    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);
+  }
+
+  .ui-sheet-overlay {
+    inset: 0;
+  }
+
+  .ui-sheet-panel {
+    box-shadow: var(--sheet-shadow);
+  }
+
+  .ui-sheet-panel[data-side="top"] {
+    inset-block-start: 0;
+    border-block-end: 1px solid hsl(var(--border));
+  }
+
+  .ui-sheet-panel[data-side="bottom"] {
+    inset-block-end: 0;
+    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

@@ -0,0 +1,155 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * 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-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,
+    .sb-user,
+    .tb-icon-btn
+  ):focus-visible {
+    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,
+    .ui-carousel-dot,
+    .ui-rating-star,
+    .ui-legal-document-section
+  ):focus-visible {
+    outline: var(--focus-ring-width) solid
+      hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
+    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);
+  }
+
+  .tb-icon-btn {
+    --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);
+  }
+
+  .ui-carousel-dot {
+    --focus-ring-offset: var(--carousel-dot-focus-ring-offset);
+  }
+
+  .ui-rating-star {
+    --focus-ring-offset: var(--rating-focus-ring-offset);
+  }
+
+  .ui-legal-document-section {
+    --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;
+    box-shadow: none;
+  }
+}

package/dist/styles/form-layout.css

@@ -34,15 +34,60 @@
   }
 
   /* …except when the fields are ResponsiveGrid ITEMS (Form columns={n}): there the grid's own
-   * `gap` owns the rhythm, 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 11px apart and inflating every grid track by the margin. Fields
-   * merely NESTED somewhere inside a grid cell (a stacked pair in one cell) are not direct
-   * children, keep the margin, and are unaffected. */
+   * `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;
+  }
+
+  @container responsive-grid (min-width: 40rem) {
+    .ui-responsive-grid > .ui-form-field {
+      grid-column: span var(--form-field-col-span, 1);
+    }
+  }
+
   /* 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 {

package/dist/styles/index.css

@@ -26,6 +26,7 @@
 @import "./motion.css";
 @import "./layout.css";
 @import "./control.css";
+@import "./toggle.css";
 @import "./logo-layout.css";
 @import "./card-layout.css";
 @import "./text-layout.css";