@godxjp/ui 22.0.0 → 23.1.0

package/dist/styles/shell-layout.css

@@ -17,116 +17,118 @@
     background: hsl(var(--background));
   }
 
-  .app-root[data-collapsed="true"] {
-    grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
-  }
+  @media (width > 56.25rem) {
+    .app-root[data-collapsed="true"] {
+      grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
+    }
 
-  .app-root[data-topbar-span="full"] {
-    grid-template-areas:
-      "topbar topbar"
-      "sidebar main"
-      "sidebar footer";
-  }
+    .app-root[data-topbar-span="full"] {
+      grid-template-areas:
+        "topbar topbar"
+        "sidebar main"
+        "sidebar footer";
+    }
 
-  .app-root[data-nav-rail][data-nav-rail-position="start"] {
-    grid-template-areas:
-      "navrail sidebar topbar"
-      "navrail sidebar main"
-      "navrail sidebar footer";
-    grid-template-columns:
-      var(--app-shell-nav-rail-width)
-      var(--app-shell-sidebar-width)
-      minmax(0, 1fr);
-  }
+    .app-root[data-nav-rail][data-nav-rail-position="start"] {
+      grid-template-areas:
+        "navrail sidebar topbar"
+        "navrail sidebar main"
+        "navrail sidebar footer";
+      grid-template-columns:
+        var(--app-shell-nav-rail-width)
+        var(--app-shell-sidebar-width)
+        minmax(0, 1fr);
+    }
 
-  .app-root[data-nav-rail][data-nav-rail-position="start"][data-topbar-span="full"] {
-    grid-template-areas:
-      "topbar  topbar  topbar"
-      "navrail sidebar main"
-      "navrail sidebar footer";
-  }
+    .app-root[data-nav-rail][data-nav-rail-position="start"][data-topbar-span="full"] {
+      grid-template-areas:
+        "topbar  topbar  topbar"
+        "navrail sidebar main"
+        "navrail sidebar footer";
+    }
 
-  .app-root[data-nav-rail][data-nav-rail-position="end"] {
-    grid-template-areas:
-      "sidebar topbar  navrail"
-      "sidebar main    navrail"
-      "sidebar footer  navrail";
-    grid-template-columns:
-      var(--app-shell-sidebar-width)
-      minmax(0, 1fr)
-      var(--app-shell-nav-rail-width);
-  }
+    .app-root[data-nav-rail][data-nav-rail-position="end"] {
+      grid-template-areas:
+        "sidebar topbar  navrail"
+        "sidebar main    navrail"
+        "sidebar footer  navrail";
+      grid-template-columns:
+        var(--app-shell-sidebar-width)
+        minmax(0, 1fr)
+        var(--app-shell-nav-rail-width);
+    }
 
-  .app-root[data-nav-rail][data-nav-rail-position="end"][data-topbar-span="full"] {
-    grid-template-areas:
-      "topbar  topbar  topbar"
-      "sidebar main    navrail"
-      "sidebar footer  navrail";
-  }
+    .app-root[data-nav-rail][data-nav-rail-position="end"][data-topbar-span="full"] {
+      grid-template-areas:
+        "topbar  topbar  topbar"
+        "sidebar main    navrail"
+        "sidebar footer  navrail";
+    }
 
-  .app-root[data-nav-rail][data-nav-rail-position="top"] {
-    grid-template-areas:
-      "navrail navrail"
-      "sidebar topbar"
-      "sidebar main"
-      "sidebar footer";
-    grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
-    grid-template-rows:
-      var(--app-shell-nav-rail-height)
-      var(--app-shell-bar-height)
-      minmax(0, 1fr)
-      auto;
-  }
+    .app-root[data-nav-rail][data-nav-rail-position="top"] {
+      grid-template-areas:
+        "navrail navrail"
+        "sidebar topbar"
+        "sidebar main"
+        "sidebar footer";
+      grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
+      grid-template-rows:
+        var(--app-shell-nav-rail-height)
+        var(--app-shell-bar-height)
+        minmax(0, 1fr)
+        auto;
+    }
 
-  .app-root[data-nav-rail][data-nav-rail-position="top"][data-topbar-span="full"] {
-    grid-template-areas:
-      "navrail navrail"
-      "topbar  topbar"
-      "sidebar main"
-      "sidebar footer";
-  }
+    .app-root[data-nav-rail][data-nav-rail-position="top"][data-topbar-span="full"] {
+      grid-template-areas:
+        "navrail navrail"
+        "topbar  topbar"
+        "sidebar main"
+        "sidebar footer";
+    }
 
-  .app-root[data-nav-rail][data-nav-rail-position="bottom"] {
-    grid-template-areas:
-      "sidebar topbar"
-      "sidebar main"
-      "sidebar footer"
-      "navrail navrail";
-    grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
-    grid-template-rows:
-      var(--app-shell-bar-height)
-      minmax(0, 1fr)
-      auto
-      var(--app-shell-nav-rail-height);
-  }
+    .app-root[data-nav-rail][data-nav-rail-position="bottom"] {
+      grid-template-areas:
+        "sidebar topbar"
+        "sidebar main"
+        "sidebar footer"
+        "navrail navrail";
+      grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
+      grid-template-rows:
+        var(--app-shell-bar-height)
+        minmax(0, 1fr)
+        auto
+        var(--app-shell-nav-rail-height);
+    }
 
-  .app-root[data-nav-rail][data-nav-rail-position="bottom"][data-topbar-span="full"] {
-    grid-template-areas:
-      "topbar  topbar"
-      "sidebar main"
-      "sidebar footer"
-      "navrail navrail";
-  }
+    .app-root[data-nav-rail][data-nav-rail-position="bottom"][data-topbar-span="full"] {
+      grid-template-areas:
+        "topbar  topbar"
+        "sidebar main"
+        "sidebar footer"
+        "navrail navrail";
+    }
 
-  .app-root[data-nav-rail][data-nav-rail-position="start"][data-collapsed="true"] {
-    grid-template-columns:
-      var(--app-shell-nav-rail-width)
-      var(--app-shell-sidebar-collapsed-width)
-      minmax(0, 1fr);
-  }
+    .app-root[data-nav-rail][data-nav-rail-position="start"][data-collapsed="true"] {
+      grid-template-columns:
+        var(--app-shell-nav-rail-width)
+        var(--app-shell-sidebar-collapsed-width)
+        minmax(0, 1fr);
+    }
 
-  .app-root[data-nav-rail][data-nav-rail-position="end"][data-collapsed="true"] {
-    grid-template-columns:
-      var(--app-shell-sidebar-collapsed-width)
-      minmax(0, 1fr)
-      var(--app-shell-nav-rail-width);
-  }
+    .app-root[data-nav-rail][data-nav-rail-position="end"][data-collapsed="true"] {
+      grid-template-columns:
+        var(--app-shell-sidebar-collapsed-width)
+        minmax(0, 1fr)
+        var(--app-shell-nav-rail-width);
+    }
 
-  .app-root[data-nav-rail]:is(
-      [data-nav-rail-position="top"],
-      [data-nav-rail-position="bottom"]
-    )[data-collapsed="true"] {
-    grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
+    .app-root[data-nav-rail]:is(
+        [data-nav-rail-position="top"],
+        [data-nav-rail-position="bottom"]
+      )[data-collapsed="true"] {
+      grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
+    }
   }
 
   .app-root[data-topbar="none"] {
@@ -817,51 +819,54 @@
     font-size: var(--font-size-base);
   }
 
-  .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="start"] {
-    grid-template-columns: var(--app-shell-nav-rail-width) minmax(0, 1fr);
-    grid-template-areas: "navrail topbar" "navrail main" "navrail footer";
-  }
-  .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="start"][data-topbar-span="full"] {
-    grid-template-areas: "topbar topbar" "navrail main" "navrail footer";
-  }
-  .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="end"] {
-    grid-template-columns: minmax(0, 1fr) var(--app-shell-nav-rail-width);
-    grid-template-areas: "topbar navrail" "main navrail" "footer navrail";
-  }
-  .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="end"][data-topbar-span="full"] {
-    grid-template-areas: "topbar topbar" "main navrail" "footer navrail";
-  }
+  @media (width > 56.25rem) {
+    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="start"] {
+      grid-template-columns: var(--app-shell-nav-rail-width) minmax(0, 1fr);
+      grid-template-areas: "navrail topbar" "navrail main" "navrail footer";
+    }
+    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="start"][data-topbar-span="full"] {
+      grid-template-areas: "topbar topbar" "navrail main" "navrail footer";
+    }
+    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="end"] {
+      grid-template-columns: minmax(0, 1fr) var(--app-shell-nav-rail-width);
+      grid-template-areas: "topbar navrail" "main navrail" "footer navrail";
+    }
+    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="end"][data-topbar-span="full"] {
+      grid-template-areas: "topbar topbar" "main navrail" "footer navrail";
+    }
 
-  .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="top"] {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: "navrail" "topbar" "main" "footer";
-    grid-template-rows:
-      var(--app-shell-nav-rail-height)
-      var(--app-shell-bar-height)
-      minmax(0, 1fr)
-      auto;
-  }
-  .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="top"][data-topbar-span="full"] {
-    grid-template-areas: "navrail" "topbar" "main" "footer";
-  }
-  .app-root:where([data-sidebar="none"])[data-nav-rail]:is(
-      [data-nav-rail-position="bottom"]
-    ) {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: "topbar" "main" "footer" "navrail";
-    grid-template-rows:
-      var(--app-shell-bar-height)
-      minmax(0, 1fr)
-      auto
-      var(--app-shell-nav-rail-height);
+    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="top"] {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-areas: "navrail" "topbar" "main" "footer";
+      grid-template-rows:
+        var(--app-shell-nav-rail-height)
+        var(--app-shell-bar-height)
+        minmax(0, 1fr)
+        auto;
+    }
+    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="top"][data-topbar-span="full"] {
+      grid-template-areas: "navrail" "topbar" "main" "footer";
+    }
+    .app-root:where([data-sidebar="none"])[data-nav-rail]:is(
+        [data-nav-rail-position="bottom"]
+      ) {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-areas: "topbar" "main" "footer" "navrail";
+      grid-template-rows:
+        var(--app-shell-bar-height)
+        minmax(0, 1fr)
+        auto
+        var(--app-shell-nav-rail-height);
+    }
+
+    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="bottom"][data-topbar-span="full"] {
+      grid-template-areas: "topbar" "main" "footer" "navrail";
+    }
   }
 
   @media (width <= 56.25rem) {
-    .app-root,
-    .app-root[data-collapsed="true"],
-    .app-root[data-nav-rail],
-    .app-root[data-nav-rail][data-collapsed="true"],
-    .app-root[data-nav-rail][data-topbar-span="full"] {
+
+    .app-root {
       grid-template-areas:
         "topbar"
         "main"
@@ -2317,6 +2322,10 @@
   .ui-mobile-shell {
     --control-height: var(--mobile-shell-control-height);
 
+    --control-height-sm: calc(var(--control-height) - calc(0.25rem * var(--scaling)));
+    --control-height-lg: calc(var(--control-height) + calc(0.25rem * var(--scaling)));
+    --control-height-xs: calc(var(--control-height) - calc(0.5rem * var(--scaling)));
+
     --mobile-shell-padding-inline: calc(
       var(--mobile-shell-inset-inline) + var(--mobile-shell-safe-inset-inline)
     );

package/dist/styles/table-layout.css

@@ -44,8 +44,7 @@
   }
 
   .ui-table-row[data-tone] > [data-slot="table-cell"]:first-child {
-    border-inline-start: var(--table-row-tone-rail-width) solid
-      hsl(var(--table-row-tone-color));
+    border-inline-start: var(--table-row-tone-rail-width) solid hsl(var(--table-row-tone-color));
     padding-inline-start: calc(var(--table-cell-space-x) - var(--table-row-tone-rail-width));
   }
 
@@ -188,7 +187,7 @@
 
     overflow: clip;
 
-    min-inline-size: var(--table-surface-min-inline-size);
+    min-inline-size: min-content;
     border: 1px solid hsl(var(--border));
     border-radius: var(--radius-md);
   }
@@ -197,11 +196,19 @@
     min-inline-size: 0;
   }
 
+  .ui-data-table-surface:not([data-preset]) > * > [data-slot="table"] {
+    min-inline-size: var(--table-surface-min-inline-size);
+  }
+
   .ui-data-table-surface[data-striped] tbody tr:nth-child(even):not([data-state="selected"]) {
     background-color: var(--table-row-striped-background, hsl(var(--muted) / 0.4));
   }
 
   .ui-data-table-empty {
+    padding: var(--empty-state-space-y) var(--empty-state-space-x);
+  }
+
+  .ui-data-table-empty .ui-empty-state {
     padding: 0;
   }
 
@@ -286,7 +293,7 @@
       inset-inline-end: 0;
     }
 
-    .ui-data-table-surface {
+    .ui-data-table-surface:not([data-preset]) > * > [data-slot="table"] {
       min-inline-size: 0;
     }
   }
@@ -356,7 +363,7 @@
     max-block-size: var(--table-scroll-block-size, none);
   }
 
-  .ui-data-table-scroll[data-scroll-x] :is(.ui-data-table-surface, [data-slot="table"]) {
+  .ui-data-table-scroll[data-scroll-x] [data-slot="table"] {
     min-inline-size: var(--table-scroll-inline-size, auto);
   }
 

package/dist/tokens/components/control.css

@@ -32,6 +32,8 @@
   --control-status-warning-glow-color: var(--warning);
   --control-status-warning-glow-alpha: var(--control-outline-error-alpha);
 
+  --number-input-touch-height: var(--band-height-2xl);
+
   --control-variant-filled-background: var(--muted);
   --control-variant-filled-hover-background: var(--accent);
 
@@ -105,6 +107,8 @@
   --slider-track-height: 0.375rem;
   --slider-thumb-size: 1rem;
 
+  --slider-vertical-min-block-size: 10rem;
+
   --otp-slot-size: initial;
 
   --otp-slot-inline-size: initial;
@@ -198,6 +202,8 @@
   --search-select-panel-inline-size: auto;
   --search-select-panel-viewport-inset: var(--space-6);
   --search-select-list-space-inset: var(--space-1);
+
+  --search-select-list-max-height: none;
   --search-select-footer-space-inset: var(--space-1);
   --search-select-option-space-gap: var(--space-2);
   --search-select-option-font-size: var(--font-size-sm);
@@ -282,6 +288,8 @@
   --calendar-footer-space-block-start: var(--space-2);
   --calendar-footer-border-width: var(--stroke-hairline);
 
+  --calendar-bordered-weekday-padding-block: var(--space-1);
+
   --transfer-pane-min-height: 14rem;
   --transfer-pane-radius: var(--radius-md);
   --transfer-panes-space-gap: var(--space-3);
@@ -313,9 +321,9 @@
   --month-picker-icon-size: var(--icon-size-md);
   --month-picker-separator-icon-size: var(--icon-size-sm);
 
-  --button-xs-height: var(--control-height-xs);
+  --button-xs-height: initial;
 
-  --button-bare-target-size: var(--control-height-xs);
+  --button-bare-target-size: initial;
   --button-xs-space-inline: var(--space-2);
   --button-xs-space-gap: var(--space-1);
   --button-xs-font-size: var(--font-size-xs);
@@ -365,7 +373,8 @@
 
   --control-status-error-border-color: hsl(var(--destructive));
   --control-status-warning-border-color: hsl(var(--text-warning));
-  --control-status-warning-outline-color: var(--warning);
+
+  --control-status-warning-outline-color: var(--text-warning);
 }
 
 @media (pointer: coarse) {

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

@@ -93,11 +93,6 @@
   --qr-code-size-md: 10rem;
   --qr-code-size-lg: 12.5rem;
 
-  --scroll-area-bar-size: 0.625rem;
-
-  --scroll-area-bar-padding: 1px;
-  --scroll-area-thumb-radius: var(--radius-pill);
-
   --timeline-grid-hour-height: 2.5rem;
   --timeline-grid-axis-width: 3.25rem;
   --timeline-grid-column-min-width: 6rem;

package/dist/tokens/components/navigation.css

@@ -37,10 +37,12 @@
   --breadcrumb-font-size: var(--font-size-xs);
 
   --breadcrumb-menu-trigger-gap: var(--space-inline-xs);
-  --menubar-shortcut-font-size: var(--font-size-xs);
+  --menu-shortcut-font-size: var(--font-size-xs);
   --tabs-list-max-inline-size: 100%;
   --tabs-list-overflow: auto;
 
+  --tabs-placement-responsive-breakpoint-width: 48rem;
+
   --tabs-indicator-background: initial;
   --tabs-indicator-size: 2px;
   --tabs-indicator-offset: 0px;
@@ -89,8 +91,8 @@
   --tabs-tab-remove-icon-size: var(--icon-size-xs);
   --tabs-tab-remove-space-inline-end: var(--space-1);
 
-  --menubar-item-hover-background: initial;
-  --menubar-item-hover-foreground: initial;
+  --menu-item-hover-background: initial;
+  --menu-item-hover-foreground: initial;
 
   --filter-bar-sticky-offset: 0px;
 
@@ -128,8 +130,6 @@
   --menu-separator-space-block: var(--space-1);
   --menu-separator-space-inline: calc(var(--space-1) * -1);
 
-  --navigation-menu-trigger-icon-size: var(--icon-size-sm);
-
   --steps-dot-size: 0.625rem;
   --steps-dot-process-ring-width: var(--stroke-xl);
   --steps-marker-border-width: var(--stroke-md);

package/dist/tokens/components/scroll-area.css

@@ -1,5 +1,12 @@
 
 :root {
 
+  --scroll-area-scrollbar-width: thin;
+
+  --scroll-area-thumb-color: initial;
+  --scroll-area-track-color: initial;
+
+  --scroll-area-scrollbar-space: auto;
+
   --scroll-area-anchor-offset: 3rem;
 }

package/docs/CONSUMER-RULES.md

@@ -11,7 +11,12 @@ Read this once; the audit enforces it. Everything else in `docs/` is for contrib
 7. Colours are semantic tokens (`tone="destructive"`, `bg-primary`), never palette names, hex, or `bg-black` / `text-white`.
 8. Sizes come from props (`size`, `width`, `columns`), never `w-[240px]` / `max-h-[420px]`.
 9. Logical directions (`ms-`, `me-`, `start-`, `end-`) when a utility is unavoidable; never `ml-` / `left-`.
-10. Run `node node_modules/@godxjp/ui/scripts/ui-audit.mjs <dir>` before every review; then `visual-audit.mjs <url>` on the running app. Zero errors is the bar.
+10. A `Card` whose whole body is a table gets `<CardContent flush>` — the table must touch the
+    card's inner edge. A default `CardContent` pads 16px while the table draws its own border, so
+    the table reads as a second box inside the card, and a wide one runs past the card entirely.
+    (`flush` alone is enough: it drops the border, the radius and the inline padding. `tight` is a
+    different knob — it governs the header band, not the body's edges.)
+11. Run `node node_modules/@godxjp/ui/scripts/ui-audit.mjs --changed` before every review; a browser sweep with `visual-audit.mjs` is a separate, heavier run — do it when the work is a visual review, not on every change; `visual-audit.mjs <url>` on the running app. Zero errors is the bar.
 
 **Opting a deliberate exception out.** Name the rule; the block form also has to say why.
 
@@ -45,6 +50,6 @@ information belongs on the screen:
 - `ServiceLauncherCard` already has this shape as a prop — `disabledReason`, rendered above the
   action — and it is the pattern to copy anywhere else.
 
-If the control is disabled *pending something the user can fix*, prefer leaving it enabled and
+If the control is disabled _pending something the user can fix_, prefer leaving it enabled and
 explaining on submit: an inert control with a paragraph beside it is often a validation message
 wearing a disguise.

package/docs/CUSTOMER-THEMING.md

@@ -56,7 +56,13 @@ overwrites `--font-sans-base` (and `--font-sans-vi`) with the bundled stack —
 Noto Sans JP + Montserrat; v18.12.0–18.12.19 bundled M PLUS 2 + Noto Sans JP;
 v18.12.20+ bundles Noto Sans JP + M PLUS 2 (product override, direct
 instruction). If your design spec named an earlier bundle's faces, set the
-tokens yourself rather than relying on the bundle.) Headings read
+tokens yourself rather than relying on the bundle.) Second in that stack is
+`"Noto Sans JP Fallback"`: local faces (Arial / Liberation Sans for Latin, the
+platform's gothic face for Japanese) with `size-adjust` and ascent/descent
+overrides tuned to Noto Sans JP. The bundled faces are `font-display: swap`, so
+a cold visit paints in this fallback first; because it occupies the same line
+boxes and nearly the same advances, the swap does not reflow the page (#475).
+If you restate the stack yourself, keep it directly after "Noto Sans JP". Headings read
 `--font-family-display` and body reads `--font-family-body`, both defaulting to
 `--font-family-sans` — override them for a dual-font (display + body) brand.
 
@@ -83,7 +89,7 @@ Import the styles, then set anchor tokens in your app's `theme.css` (loaded afte
 
 /* ── Shadow tint — ONE knob ─────────────────────────────────────── */ --shadow-color: 12 26 49; /* RGB channels (default 0 0 0). Tints the WHOLE shadow ramp. */
 
-/* ── Brand depth — all opt-in, all quiet by default ─────────────── */ --shadow-glow: 0 8px 20px hsl(var(--primary) / 0.32); /* glow halo on the primary CTA */ --card-shadow: 0 1px 2px rgb(12 26 49 / 0.06), 0 10px 28px -14px rgb(12 26 49 / 0.2); /* lift every Card */ --focus-ring-color: var(--ring); /* hue of every focus ring */ --focus-ring-width: 2px; /* thickness of every focus ring — 0 turns it OFF */ --focus-ring-opacity: 1; /* alpha of every focus ring */ --focus-ring-offset: 0px; /* gap, outline-form rings only (star, dot, anchor) */ --gradient-hero: linear-gradient( 180deg, hsl(var(--accent)), transparent ); /* PageContainer header banner */ --gradient-glow: radial-gradient( 60% 70% at 90% -8%, hsl(var(--primary) / 0.1), transparent 70% ); /* AppShell ambient wash */ --overlay-background: rgb(12 26 49 / 0.55); /* modal scrim (Dialog / Sheet / Drawer) */ } ```
+/* ── Brand depth — all opt-in, all quiet by default ─────────────── */ --shadow-glow: 0 8px 20px hsl(var(--primary) / 0.32); /* glow halo on the primary CTA */ --card-shadow: 0 1px 2px rgb(12 26 49 / 0.06), 0 10px 28px -14px rgb(12 26 49 / 0.2); /* lift every Card */ --focus-ring-color: var(--ring); /* hue of every focus ring */ --focus-ring-weight: var(--stroke-md); /* thickness of every focus ring — 2px; nothing paints until <html data-focus-outline="on"> */ --focus-ring-opacity: 1; /* alpha of every focus ring */ --focus-ring-offset: 0px; /* gap, outline-form rings only (star, dot, anchor) */ --gradient-hero: linear-gradient( 180deg, hsl(var(--accent)), transparent ); /* PageContainer header banner */ --gradient-glow: radial-gradient( 60% 70% at 90% -8%, hsl(var(--primary) / 0.1), transparent 70% ); /* AppShell ambient wash */ --overlay-background: rgb(12 26 49 / 0.55); /* modal scrim (Dialog / Sheet / Drawer) */ } ```
 
 ### The anchor tokens (single knobs that propagate)
 
@@ -95,23 +101,33 @@ Import the styles, then set anchor tokens in your app's `theme.css` (loaded afte
 | `--shadow-color`                                                           | `0 0 0`                 | every shadow step `--shadow-{xs…2xl}` (`rgb(color / α)`)                                |
 | `--shadow-glow`                                                            | invisible               | brand glow halo on the primary CTA (set the full shadow value)                          |
 | `--card-shadow`                                                            | `none`                  | resting elevation of every Card                                                         |
-| `--focus-ring-color` / `--focus-ring-width`                                | `var(--ring)` / `2px`   | hue & thickness of every keyboard-focus ring (`width: 0` turns every ring OFF)          |
+| `--focus-ring-color` / `--focus-ring-weight`                               | `var(--ring)` / `1px`   | hue & thickness of every keyboard-focus ring — but nothing paints until the switch below is on |
 | `--focus-ring-opacity` / `--focus-ring-offset`                             | `1` / `0px`             | alpha of every ring · gap for outline-form rings (star, carousel dot, heading anchor)   |
 | `--gradient-{hero,glow,brand}`                                             | `none`                  | hero header banner / AppShell ambient wash / spare (set the full gradient)              |
 | `--overlay-background`                                                     | `rgb(0 0 0 / .5)`       | the scrim of every overlay (Dialog / AlertDialog / Sheet / Drawer)                      |
 
-### Focus ring — one definition, three levels of override
+### Focus ring — THE SWITCH FIRST, then three levels of override
 
-Every keyboard-focus ring in the system is drawn by a single rule (`src/styles/focus-ring.css`) reading the four tokens above. Nothing else paints one; a test fails the build if a stylesheet tries.
+**The indicator ships OFF.** `--focus-outline` is `0`, and every painted focus length multiplies by it, so by default nothing paints a focus mark. That is a product decision with a stated cost — it forfeits WCAG 2.2 SC 2.4.7 (AA) and a JIS X 8341-3 AA claim — recorded in `docs/DESIGN-AUTHORITY.md`. Turning it on is ONE attribute on the root element, no CSS:
 
-That means retuning is a one-liner and it reaches everything:
+```html
+<html data-focus-outline="on"></html>
+```
+
+(`AppProvider` has the equivalent.) Every `:focus-visible` selector is present either way; only the paint is switched.
+
+Every ring is then drawn by a single rule (`src/styles/focus-ring.css`) reading the tokens above. Nothing else paints one; a test fails the build if a stylesheet tries.
+
+**Thickness is `--focus-ring-weight`, never `--focus-ring-width`.** The width is DERIVED — `calc(var(--focus-ring-weight) * var(--focus-outline))` — so assigning it directly paints a ring even while the indicator is switched off, and that is exactly what the build-failing test forbids a stylesheet to do.
 
 ```css
 :root {
   --focus-ring-color: 24 99% 46%; /* every ring, brand orange */
-  --focus-ring-width: 3px; /* every ring, thicker */
+  --focus-ring-weight: var(--stroke-md); /* every ring, 2px */
 }
-````
+```
+
+**A slim ring that still satisfies the criteria.** Switched on, the shipped weight is one hairline (1px) in the focus hue, measured in Chromium at **5.05:1** light and **7.07:1** dark on every surface a control sits on — so SC 1.4.11 (3:1, non-text contrast) is met on colour, independent of thickness. SC 2.4.13 Focus Appearance (AAA) additionally wants a perimeter of at least 2 CSS px: set `--focus-ring-weight: var(--stroke-md)` (measured: a 2px ring, same hue, same ratio). `var(--stroke-lg)` is the heavy 3px mark.
 
 **Per component.** A component that genuinely needs a different ring publishes its own knob and the rule picks it up locally — Toggle and TimeInput ship a heavier, softer ring because they are filled surfaces where a hard 2px reads as a second border:
 
@@ -130,7 +146,7 @@ That means retuning is a one-liner and it reaches everything:
 <div style={{ "--focus-ring-color": "0 84% 60%" } as React.CSSProperties}>…</div>
 ```
 
-**Turning it off** — `--focus-ring-width: 0`, at any of the three levels. It ships **on** (WCAG 2.4.7 / 2.4.11); switching it off is a deliberate act on your side, never a default of this package. Removing the visible focus indicator fails WCAG 2.4.7 — do it only where another indicator takes over.
+**Turning it back off** — drop the `data-focus-outline` attribute (or set `--focus-outline: 0`), which is the shipped state. Do NOT reach for `--focus-ring-width`: it is derived from the weight and the switch, and pinning it to any value is the same mistake in the other direction. Note the cost either way — with no visible focus indicator the package does not meet WCAG 2.2 SC 2.4.7.
 
 **Adding your own component to the system**: put `ui-focus-ring` (or `ui-focus-ring-outline` when the mark needs a gap) on the focusable element.
 

package/docs/DATETIME.md

@@ -23,10 +23,18 @@ Omit `locale`, `timezone`, `timeFormat`, `dateFormat` → synced from AppProvide
 
 | value | Pattern      | Default locale |
 | ----- | ------------ | -------------- |
-| `iso` | `yyyy-MM-dd` | ja             |
+| `iso` | `yyyy-MM-dd` | —              |
+| `ymd` | `yyyy/MM/dd` | ja             |
 | `dmy` | `dd/MM/yyyy` | vi             |
 | `mdy` | `MM/dd/yyyy` | en             |
 
+`ymd` and `iso` are both year-first and are NOT interchangeable: a Japanese business document
+(請求書, 申請書) is written `2026/05/01`, never `2026-05-01`. `ja` defaulted to `iso` until a
+Japanese-first consumer shipped its own date formatter as an explicit stopgap purely to get the
+slashes — rule 1 above broken by this package's own default. Only the DEFAULT moved: a stored
+preference still wins, `defaultDateFormat` still pins any value, and `iso` is one option away in
+`<DateFormatPicker />`.
+
 Sent to backend as `x-date-format`. Pick with `<DateFormatPicker />`.
 
 ## kind presets
@@ -43,9 +51,10 @@ Sent to backend as `x-date-format`. Pick with `<DateFormatPicker />`.
 
 ## ISO 8601 patterns
 
-Date order follows `dateFormat` from AppProvider (`iso` | `dmy` | `mdy`):
+Date order follows `dateFormat` from AppProvider (`iso` | `ymd` | `dmy` | `mdy`):
 
 - `iso`: `yyyy-MM-dd` + `yyyy-MM-dd HH:mm`
+- `ymd`: `yyyy/MM/dd` + `yyyy/MM/dd HH:mm`
 - `dmy`: `dd/MM/yyyy` + `dd/MM/yyyy HH:mm`
 - `mdy`: `MM/dd/yyyy` + `MM/dd/yyyy HH:mm`