@godxjp/ui 23.4.3 → 23.4.5

package/README.md

@@ -125,11 +125,25 @@ Then name the family directly after your own face:
 node_modules/@godxjp/ui/dist/styles/core.css` → `0` is the promise, so the fallbacks got their own
 entry rather than being folded in.
 
+Japanese app that wants the bundled face without the per-screen round-trips? The fourth entry
+replaces the 729 sliced faces with one merged file per weight, JIS X 0208 level 1:
+
+```css
+@import "@godxjp/ui/styles/core-with-jis-level1"; /* core + fallbacks + 3 merged faces */
+```
+
+**3 requests, ~1.53 MB, all on first paint** — against 150 requests and 1,772,728 bytes for a
+694-character Japanese screen on `styles`, spread across screens. It does not cover JIS level 2
+(rare-surname kanji fall through to the platform face, so name one after ours) and it loses to the
+slices below roughly 620 distinct characters. Full table and reasoning in
+[docs/CUSTOMER-THEMING.md](docs/CUSTOMER-THEMING.md).
+
 > **Do not cherry-pick `*-layout.css` files.** Layers depend on each other (a
 > Select's rows, a menu's surface, a form's rhythm live in shared rules) and a
 > missing layer fails silently: menus render with no background, rows with no
-> height. `styles`, `styles/core` and `styles/core-with-fallbacks` are the three supported entries;
-> the runtime `visual-audit` flags a page whose layers are incomplete (`css-layers-missing`).
+> height. `styles`, `styles/core`, `styles/core-with-fallbacks` and
+> `styles/core-with-jis-level1` are the four supported entries; the runtime `visual-audit` flags a
+> page whose layers are incomplete (`css-layers-missing`).
 
 ## Golden ratio (φ ≈ 1.618)
 

package/dist/components/data-entry/branch-scope-picker.js

@@ -188,7 +188,7 @@ const BranchScopePicker = React.forwardRef(
           ),
           /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", "aria-live": "polite", children: t("dataEntry.branchScope.selectedCount", { count: branchIds.length }) })
         ] }),
-        invalid && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error })
+        invalid && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-error-strong text-xs", children: error })
       ] })
     );
   }

package/dist/components/data-entry/form-field.js

@@ -175,7 +175,7 @@ function FormField({
             t(`dataEntry.form.${validationStatus}`)
           ] }) : null,
           helperPlacement === "after" ? helperNode : null,
-          error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "ui-form-field-note text-destructive text-xs", children: error }) : null
+          error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "ui-form-field-note text-error-strong text-xs", children: error }) : null
         ] })
       ]
     }

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

@@ -434,7 +434,7 @@ function Upload({
     return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm", className), children: [
       hiddenInput,
       liveRegion,
-      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-error-strong", children: rejection }),
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -483,7 +483,7 @@ function Upload({
     return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm", className), children: [
       hiddenInput,
       liveRegion,
-      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-error-strong", children: rejection }),
       /* @__PURE__ */ jsxs(
         Button,
         {
@@ -514,7 +514,7 @@ function Upload({
     return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-upload-grid", className), children: [
       hiddenInput,
       liveRegion,
-      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-error-strong", children: rejection }),
       (showUploadList ? items : []).map((item2) => /* @__PURE__ */ jsx(
         UploadPictureCard,
         {
@@ -548,7 +548,7 @@ function Upload({
     return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm", className), children: [
       hiddenInput,
       liveRegion,
-      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-error-strong", children: rejection }),
       /* @__PURE__ */ jsx(Button, { type: "button", disabled, variant: triggerVariant, onClick: openPicker, children: children ?? t("dataEntry.upload.addImage") }),
       list
     ] });
@@ -558,7 +558,7 @@ function Upload({
     return /* @__PURE__ */ jsxs("div", { ...pasteProps, className: cn("ui-stack-sm ui-upload-picture", className), children: [
       hiddenInput,
       liveRegion,
-      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: rejection }),
+      rejection && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-error-strong", children: rejection }),
       item2?.previewUrl && !item2.pendingDelete ? /* @__PURE__ */ jsxs("div", { className: "ui-upload-picture-frame", children: [
         /* @__PURE__ */ jsx("img", { src: item2.previewUrl, alt: "", className: "ui-upload-picture-img" }),
         item2.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "ui-upload-overlay ui-upload-picture-overlay", children: t("dataEntry.upload.uploading") }),
@@ -650,7 +650,7 @@ function UploadDraftActions({
   const { state, undoRemove, undoReplace } = draft;
   if (state.canUndoRemove) {
     return /* @__PURE__ */ jsxs("div", { className: "ui-upload-draft-undo", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-destructive", children: t("dataEntry.upload.markedForDelete") }),
+      /* @__PURE__ */ jsx("span", { className: "text-error-strong", children: t("dataEntry.upload.markedForDelete") }),
       /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", variant: "outline", disabled, onClick: undoRemove, children: [
         /* @__PURE__ */ jsx(RotateCcw, { className: "ui-upload-draft-icon", "aria-hidden": "true" }),
         t("dataEntry.upload.undo")
@@ -690,7 +690,7 @@ function UploadPictureCard({
         }
       )
     ] }),
-    item.status === "error" && /* @__PURE__ */ jsx("span", { role: "alert", className: "text-destructive", children: item.error }),
+    item.status === "error" && /* @__PURE__ */ jsx("span", { role: "alert", className: "text-error-strong", children: item.error }),
     /* @__PURE__ */ jsxs("div", { className: "ui-inline-xs", children: [
       onCancel && item.status === "uploading" && /* @__PURE__ */ jsx(
         Button,
@@ -760,7 +760,7 @@ function UploadFileList({
         /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: item.name }),
         /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-xs", children: [
           formatBytes(item.size),
-          item.status === "error" && item.error && /* @__PURE__ */ jsxs("span", { role: "alert", className: "text-destructive", children: [
+          item.status === "error" && item.error && /* @__PURE__ */ jsxs("span", { role: "alert", className: "text-error-strong", children: [
             " ",
             "\xB7 ",
             item.error

package/dist/components/navigation/tabs.js

@@ -166,6 +166,12 @@ function Tabs({
   const needsBar = Boolean(extraStart || extraEnd || showAdd || collapsible);
   const card = variant === "card" || variant === "editable-card";
   const sizeTriggerClassName = triggerSizeClassName(size);
+  const CARD_FACE = {
+    top: "rounded-[var(--tabs-card-radius)_var(--tabs-card-radius)_0_0] data-[state=active]:border-b-background",
+    bottom: "rounded-[0_0_var(--tabs-card-radius)_var(--tabs-card-radius)] data-[state=active]:border-t-background",
+    start: "rounded-s-[var(--tabs-card-radius)] rounded-e-none data-[state=active]:border-e-background",
+    end: "rounded-e-[var(--tabs-card-radius)] rounded-s-none data-[state=active]:border-s-background"
+  };
   const list = items ? /* @__PURE__ */ jsx(
     TabsList,
     {
@@ -239,11 +245,21 @@ function Tabs({
               // pixel and `justify-content` has nothing left to centre — measured, the leading and
               // trailing gaps were both 0px with `centered` on and off.
               centered && "flex-none",
-              // CARD face: a real boundary on every side, rounded on the leading block edge only.
-              // The ACTIVE face's block-end edge is the SURFACE colour, never `transparent`: the
-              // rail is an inset shadow at the strip's padding-box edge, so a see-through border
-              // would let that 1px of rail run straight across the tab it is joined to.
-              card && "data-[state=active]:border-b-background rounded-[var(--tabs-card-radius)_var(--tabs-card-radius)_0_0] border-[color:hsl(var(--border))] bg-[hsl(var(--tabs-card-background,var(--muted)))]"
+              // The merged edge is the SURFACE colour, never `transparent`: the rail is an inset
+              // shadow at the strip's padding-box edge, so a see-through border would let that 1px
+              // of rail run straight across the tab it is joined to.
+              // CARD face: a real boundary on every side, opened toward the panel by
+              // `CARD_FACE`. `flex-none` is antd's geometry, not a preference — its
+              // `nav-list` is a plain `display: flex` with no `flex-grow` on the tab, so a
+              // card tab is CONTENT-WIDTH. The base trigger is `flex-1`, which made every
+              // card tab stretch to an equal share of the strip: measured, three tabs in a
+              // 942px strip came out 311px each for labels needing ~70px, and with
+              // `justify-center` the label and its × floated in the middle of that box —
+              // the × ended up 90px from the tab's own trailing edge (179px on a two-tab
+              // strip). antd's is 8px away. This is also why the face read as a free-standing
+              // bordered box rather than a tab.
+              card && "flex-none border-[color:hsl(var(--border))] bg-[hsl(var(--tabs-card-background,var(--muted)))]",
+              card && CARD_FACE[placement]
             ),
             children: [
               item.icon ? /* @__PURE__ */ jsx(
@@ -463,7 +479,7 @@ const TabsTrigger = React.forwardRef(
           // The line indicator lives in src/styles/navigation-layout.css so it reads --tabs-indicator-*.
           // Selected and focused stay visually distinct (WCAG 2.4.7): selected is a 1px hairline in the
           // border, focused is the 2px ring plus its halo outside it.
-          "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-none group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+          "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-none group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
           // The tier the root was given. Without this the compound form ignored `size` outright.
           triggerSizeClassName(size),
           className

package/dist/email/tokens.generated.d.ts

@@ -33,7 +33,7 @@ export declare const EMAIL_COLOR_SOURCE: {
     };
     readonly border: {
         readonly cssVar: "--border";
-        readonly hsl: "30 7% 83%";
+        readonly hsl: "30 7% 93%";
     };
     readonly primary: {
         readonly cssVar: "--primary";
@@ -92,7 +92,7 @@ export declare const EMAIL_COLOR_SOURCE_DARK: {
     };
     readonly border: {
         readonly cssVar: "--border";
-        readonly hsl: "45 6% 22%";
+        readonly hsl: "45 6% 19%";
     };
     readonly primary: {
         readonly cssVar: "--primary";

package/dist/email/tokens.generated.js

@@ -25,7 +25,7 @@ const EMAIL_COLOR_SOURCE = {
   },
   "border": {
     "cssVar": "--border",
-    "hsl": "30 7% 83%"
+    "hsl": "30 7% 93%"
   },
   "primary": {
     "cssVar": "--primary",
@@ -83,7 +83,7 @@ const EMAIL_COLOR_SOURCE_DARK = {
   },
   "border": {
     "cssVar": "--border",
-    "hsl": "45 6% 22%"
+    "hsl": "45 6% 19%"
   },
   "primary": {
     "cssVar": "--primary",

package/dist/styles/alert-layout.css

@@ -76,19 +76,19 @@
   }
 
   [data-slot="alert-icon"][data-tone="destructive"] {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   [data-slot="alert-icon"][data-tone="warning"] {
-    color: hsl(var(--warning));
+    color: hsl(var(--text-warning));
   }
 
   [data-slot="alert-icon"][data-tone="success"] {
-    color: hsl(var(--success));
+    color: hsl(var(--text-success));
   }
 
   [data-slot="alert-icon"][data-tone="info"] {
-    color: hsl(var(--info));
+    color: hsl(var(--text-info));
   }
 
   [data-slot="alert-body"] {

package/dist/styles/control.css

@@ -1053,6 +1053,7 @@
     width: 1.25rem;
     height: 1.25rem;
   }
+
   .ui-rating-star-filled {
     color: hsl(var(--warning));
   }
@@ -1572,7 +1573,7 @@
   }
 
   .ui-search-select-placeholder[data-tone="destructive"] {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-search-select-footer {

package/dist/styles/core-with-jis-level1.css

@@ -0,0 +1,3 @@
+
+@import "./core-with-fallbacks.css";
+@import "./jis-level1-fonts.css";

package/dist/styles/data-entry-layout.css

@@ -87,15 +87,15 @@
   }
 
   .ui-password-strength-segment[data-tone="destructive"] {
-    background: hsl(var(--destructive));
+    background: hsl(var(--mark-destructive));
   }
 
   .ui-password-strength-segment[data-tone="warning"] {
-    background: hsl(var(--warning));
+    background: hsl(var(--mark-warning));
   }
 
   .ui-password-strength-segment[data-tone="success"] {
-    background: hsl(var(--success));
+    background: hsl(var(--mark-success));
   }
 
   .ui-password-strength-meta {
@@ -133,11 +133,11 @@
   }
 
   .ui-password-strength-checklist-item[data-state="passed"] svg {
-    color: hsl(var(--success));
+    color: hsl(var(--text-success));
   }
 
   .ui-password-strength-checklist-item[data-state="failed"] svg {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 }
 

package/dist/styles/dialog-layout.css

@@ -107,7 +107,7 @@
 
   .ui-dialog-step-up-error {
     font-size: var(--dialog-step-up-error-font-size);
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   [data-slot="dialog-footer"] {

package/dist/styles/form-layout.css

@@ -8,7 +8,7 @@
 
   .ui-form-field-required {
     margin-inline-start: var(--space-inline-xs);
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-form {

package/dist/styles/jis-level1-fonts.css

@@ -0,0 +1,24 @@
+
+@font-face {
+  font-family: "Noto Sans JP";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/noto-sans-jp-jis-level1-400.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Noto Sans JP";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("./fonts/noto-sans-jp-jis-level1-500.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Noto Sans JP";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./fonts/noto-sans-jp-jis-level1-700.woff2") format("woff2");
+}

package/dist/styles/layout.css

@@ -1247,7 +1247,7 @@
   }
 
   .ui-filter-bar-error {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-legal-document-scope {

package/dist/styles/motion.css

@@ -76,16 +76,16 @@
     color: hsl(var(--primary));
   }
   .ui-activity[data-tone="success"] .ui-activity-mark {
-    color: hsl(var(--success));
+    color: hsl(var(--text-success));
   }
   .ui-activity[data-tone="warning"] .ui-activity-mark {
-    color: hsl(var(--warning));
+    color: hsl(var(--text-warning));
   }
   .ui-activity[data-tone="destructive"] .ui-activity-mark {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
   .ui-activity[data-tone="info"] .ui-activity-mark {
-    color: hsl(var(--info));
+    color: hsl(var(--text-info));
   }
 
   .ui-activity-dot {

package/dist/styles/navigation-layout.css

@@ -60,7 +60,16 @@
 
   [data-slot="tabs-list"][data-variant="line"][data-orientation="horizontal"]
     [data-slot="tabs-trigger"]::after {
-    inset-block-end: calc(-1 * var(--tabs-indicator-offset));
+    inset-block-end: calc(
+      -1 *
+        (
+          var(--tabs-indicator-offset) + var(--tabs-list-line-space-inset) +
+            var(
+              --tabs-list-focus-ring-space-inset,
+              calc(var(--focus-ring-width) + var(--focus-ring-glow-width))
+            )
+        )
+    );
     block-size: var(--tabs-indicator-size);
     inline-size: calc(100% - 2 * var(--tabs-indicator-inset));
     inset-inline-start: var(--tabs-indicator-inset);
@@ -204,6 +213,12 @@
     box-shadow: inset 0 calc(-1 * var(--tabs-card-rail-border-width)) 0 hsl(var(--border));
   }
 
+  [data-slot="tabs"][data-variant="card"][data-placement="bottom"] [data-slot="tabs-list"],
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="bottom"]
+    [data-slot="tabs-list"] {
+    box-shadow: inset 0 var(--tabs-card-rail-border-width) 0 hsl(var(--border));
+  }
+
   .ui-tabs-tab-remove {
     display: inline-flex;
     flex: 0 0 auto;
@@ -223,7 +238,8 @@
     color: hsl(var(--accent-foreground));
   }
 
-  .ui-tabs-tab-remove-icon {
+  .ui-tabs-tab-remove-icon,
+  .ui-tabs-tab-remove > :is(svg, img) {
     inline-size: var(--tabs-tab-remove-icon-size);
     block-size: var(--tabs-tab-remove-icon-size);
   }
@@ -374,7 +390,7 @@
   }
 
   .ui-dropdown-menu-item[data-variant="destructive"] {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-dropdown-menu-separator,
@@ -461,7 +477,7 @@
   }
 
   .ui-steps-inline-item[data-status="error"] .ui-steps-inline-control {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-steps-inline-item[data-status="wait"] .ui-steps-inline-control {
@@ -590,7 +606,7 @@
 
   .ui-dropdown-menu-item[data-variant="destructive"][data-highlighted] {
     background: hsl(var(--destructive) / 0.1);
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-dropdown-menu-item[data-disabled],
@@ -709,7 +725,7 @@
   }
 
   .ui-steps-title[data-status="error"] {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-steps-subtitle {

package/dist/tokens/foundation.css

@@ -20,7 +20,8 @@
   --accent-foreground: 48 8% 13%;
   --destructive: 357 64% 44%;
   --destructive-foreground: 60 33% 99%;
-  --border: 30 7% 83%;
+
+  --border: 30 7% 93%;
 
   --input: 30 7% 53%;
 
@@ -331,7 +332,8 @@
 
   --destructive: 357 55% 48%;
   --destructive-foreground: 0 0% 100%;
-  --border: 45 6% 22%;
+
+  --border: 45 6% 19%;
 
   --input: 45 6% 47%;
 

package/docs/CONSUMER-RULES.md

@@ -2,7 +2,7 @@
 
 Read this once; the audit enforces it. Everything else in `docs/` is for contributors.
 
-1. Load styles with `@import "@godxjp/ui/styles"` (fonts bundled), `@import "@godxjp/ui/styles/core"` (no `@font-face` at all) or `@import "@godxjp/ui/styles/core-with-fallbacks"` (`core` + six `local()`-only metric-matched faces, still zero network bytes — for when you supply Noto Sans JP yourself). Never cherry-pick `*-layout.css`.
+1. Load styles with `@import "@godxjp/ui/styles"` (fonts bundled, 729 sliced woff2 faces, ~11.7 MB), `@import "@godxjp/ui/styles/core"` (no `@font-face` at all), `@import "@godxjp/ui/styles/core-with-fallbacks"` (`core` + six `local()`-only metric-matched faces, still zero network bytes — for when you supply Noto Sans JP yourself) or `@import "@godxjp/ui/styles/core-with-jis-level1"` (`core-with-fallbacks` + Noto Sans JP merged to JIS X 0208 level 1: **3 requests, ~1.53 MB, once** instead of ~8 font requests on every navigation — for a Japanese app that wants the bundled face). Never cherry-pick `*-layout.css`.
 2. Every page is `<PageContainer title subtitle extra footer>`; its sections are spaced by the page. Group items inside a section with `<Flex direction="col" gap>` or `<ResponsiveGrid>`.
 3. No Tailwind layout on your own elements: no `flex`, `grid`, `gap-*`, `p-*`, `m-*`, `space-*`. Rows are `<Flex>` (default row), stacks are `<Flex direction="col">`, grids are `<ResponsiveGrid>`.
 4. No hand-rolled surfaces: no `rounded-* border bg-*` divs. A box is `Card`, a pill is `Badge`, a person is `Avatar`, a row is `ListRow`, a label/value pair is `Descriptions`, an empty area is `EmptyState`, a read-only sample of a colour the USER chose is `Swatch`.

package/docs/CUSTOMER-THEMING.md

@@ -16,7 +16,7 @@ That single import ships everything: colors, the bundled fonts (**Noto Sans JP**
 
 ---
 
-## CSS entries — `styles`, `styles/core`, `styles/core-with-fallbacks`, nothing smaller
+## CSS entries — `styles`, `styles/core`, `styles/core-with-fallbacks`, `styles/core-with-jis-level1`, nothing smaller
 
 `@godxjp/ui/styles` bundles every component's CSS plus the fonts: **729 woff2 subsets, ~11.7 MB on disk** at the current @fontsource versions (issue #535 measured 737 files / 13 MB in a real consumer build). When you manage fonts yourself (next/font, a system stack, a browser extension that must not ship font files), load the same layers without the faces:
 
@@ -38,6 +38,49 @@ It declares the faces and nothing else — name the family yourself, directly af
 }
 ```
 
+### A Japanese app that wants the bundled face anyway
+
+The slicing is what costs the round-trips: a browser cannot know which of the 729 faces it needs
+until it has laid out and measured the text, so every new screen discovers a new handful. The
+fourth entry replaces them with **one merged file per weight**, JIS X 0208 level 1 — 2965 kanji
+plus kana, symbols, Cyrillic, Latin and Vietnamese, 3861 code points:
+
+```css
+@import "@godxjp/ui/styles/core-with-jis-level1"; /* core + fallbacks + 3 merged faces */
+```
+
+Measured against the sliced entry, Noto Sans JP only, weights 400/500/700:
+
+| distinct Japanese characters on screen        |                   `styles` |   `core-with-jis-level1` |
+| --------------------------------------------- | -------------------------: | -----------------------: |
+| 448 — this package's own `ja` labels, no data |  99 requests · 1,051,268 B | 3 requests · 1,534,636 B |
+| 694 — labels plus names, addresses, prose     | 150 requests · 1,772,728 B | 3 requests · 1,534,636 B |
+| 772 — a little more prose                     | 216 requests · 3,491,840 B | 3 requests · 1,534,636 B |
+
+The left column grows with your content and is paid again on every screen that renders a character
+no earlier screen did; the right column does not move. **Below roughly 620 distinct characters the
+slices are fewer bytes** (in ~100 requests), so an app that renders less Japanese than this
+package's own menu labels should stay on `styles`.
+
+What is deliberately not in it: **JIS level 2** (rows 48–84), which would roughly double the bytes
+to cover kanji that appear in rare surnames — those resolve from the platform Japanese face, so
+name one after ours. **M PLUS 2**, which sits behind Noto Sans JP in every stack this package ships
+and is therefore never downloaded today either; merging it would add 1,089,676 bytes for nothing.
+And **no `unicode-range`** on the merged faces, because per-range discovery is the mechanism the
+entry exists to remove — the cost of that is a Latin-only screen downloading its weight's ~500 KB
+rather than the ~25 KB of Latin inside it.
+
+Like `core-with-fallbacks`, it declares faces and does not set `--font-sans-base`; name a platform
+Japanese face after ours so level 2 kanji have somewhere to land:
+
+```css
+:root {
+  --font-sans-base:
+    "Noto Sans JP", "Noto Sans JP Fallback", "Hiragino Sans", "Yu Gothic Medium", Meiryo, system-ui,
+    sans-serif;
+}
+```
+
 The per-layer files (`control`, `card-layout`, `navigation-layout`, …) are the package's internal structure, **not a public menu**. Layers share rules — a Select's rows and a menu's surface, a form's rhythm, a card's header type — so a page that loads a subset renders naked menus and unsized rows with no error. The runtime `visual-audit` reports it as `css-layers-missing`.
 
 ---
@@ -190,3 +233,4 @@ Scope the overrides under a tenant attribute instead of `:root`. The colour util
 Set `data-tenant` on the app root. Two CSS-inheritance caveats for the **scoped** case (a single `:root` brand theme is unaffected — there, overriding just `--radius` / `--shadow-color` cascades):
 
 - **Radius & shadow-tint don't cascade from a scoped anchor.** `--radius-{xs…2xl}`, `--card-radius`, `--control-radius` and the `--shadow-{xs…2xl}` ramp are computed at their declaring element, so a scoped `--radius` / `--shadow-color` override won't reach them. For a scoped re-theme, re-declare the derived tokens you need (e.g. `--card-radius: var(--radius)`, or set `--card-shadow` to a literal value).
+````

package/docs/TOKENS.md

@@ -53,7 +53,7 @@ in the source.
 | Tier     | Tokens                                      | What it paints                                                     | Contrast bar                                              |
 | -------- | ------------------------------------------- | ------------------------------------------------------------------ | --------------------------------------------------------- |
 | **FILL** | `--success`, `--warning`, `--info`, `--destructive` | A solid chip, band or bar with a label ON it                        | AA **4.5:1** against its own `*-foreground` label          |
-| **TEXT** | `--text-success`, `--text-warning`, `--text-info`, `--text-error` | Small coloured type — a StatCard delta, an outline badge label      | AA **4.5:1** against the surface BEHIND it                 |
+| **TEXT** | `--text-success`, `--text-warning`, `--text-info`, `--text-error` | Small coloured type — a StatCard delta, an outline badge label, a field's error line | AA **4.5:1** against the surface BEHIND it                 |
 | **MARK** | `--mark-success`, `--mark-warning`, `--mark-info`, `--mark-destructive`, `--mark-primary`, `--mark-attention` | A thin shape carrying meaning with nothing written on it — a `Card accent` rail, a `DataTable rowTone` rail | SC 1.4.11 **3:1** against the surface it sits on |
 
 The MARK tier exists because both rails were reading FILL, and two of them were effectively
@@ -94,6 +94,24 @@ Worst case anywhere on the two routes after the move: **4.52:1**. `.ui-progress-
 over-capacity) reads the same tokens as the slice, so a `tone="warning"` meter and a `warning`
 slice on one screen stay the same colour.
 
+**ERROR PROSE WAS THE THIRD PLACE THE SAME MISTAKE LIVED (gh#610).** `Alert`, `Text` and
+`Heading` resolved their destructive ink through TEXT from the start, but the `role="alert"` line
+the data-entry primitives render — `<FormField error>`, `Upload`'s rejections, the `Dialog` step-up
+failure — was on `text-destructive`, the FILL utility. So the same `tone` was readable inside an
+`Alert` and near-invisible one line below it, in the field that caused it. Measured in Chromium on
+`/isolate/layout-auth-recovery-examples-mfa-challenge`:
+
+| surface | ground | FILL (before) | TEXT (after) |
+| --- | --- | --- | --- |
+| `.ui-form-field-note[role="alert"]` | dark card | **2.95** | **5.52** |
+| `.ui-form-field-note[role="alert"]` | light card | 6.16 | **7.21** |
+
+Only the DARK branch failed, and the light one passing is why it survived: the fill is tuned for a
+white label ON it, so it darkens on light grounds and lightens on dark ones — the opposite of what
+ink needs. The guard is `error-text-tier.test.ts` (token ratios on `--background`/`--card`/
+`--muted` in both themes, plus a source scan for the fill utility), and `check:contrast` gained the
+two `ui-auth-shell` routes it had never loaded.
+
 **A theme that repoints `--secondary` owes `--progress-track-background`.** The track defaults to
 `hsl(var(--secondary))`, which is a pale neutral in the stock palette. `docs/showcase/acme-portal`
 repurposes `--secondary` as a navy *button* colour, so its bars were drawn on a near-black track

package/docs/data-entry/password-strength.tsx

@@ -11,7 +11,9 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
  */
 export default function Demo() {
   const [signupPassword, setSignupPassword] = useState("");
-  const [resetPassword, setResetPassword] = useState("");
+  /* Seeded so the PASSED state is on screen without typing: the checklist's success icon is
+   * otherwise only reachable by interaction, which means no sweep can measure it (gh#612). */
+  const [resetPassword, setResetPassword] = useState("Passw0rdSeed");
 
   return (
     <PageContainer

package/docs/navigation/dropdown-menu.tsx

@@ -300,6 +300,38 @@ export default function Demo() {
             </DropdownMenu>
           </CardContent>
         </Card>
+        {/* defaultOpen — OPEN ON MOUNT, on purpose, and this is the only example on the page that
+            is. A menu paints nothing until it is opened, so for as long as this page has existed
+            no sweep has ever measured a single menu pixel: that is how
+            `.ui-dropdown-menu-item[data-variant="destructive"]` — the label on a Delete row, i.e.
+            prose — kept the destructive FILL tier at 2.95:1 on dark (gh#612). Same reasoning as
+            `?toast=` in check-contrast's route list: a surface that needs an interaction is a
+            surface no gate sees. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>defaultOpen · 計測できる状態で開いておく</CardTitle>
+            <CardDescription>
+              antd の open/defaultOpen。ここだけはマウント時から開いたままにしてある。
+              閉じたメニューは 1 ピクセルも描かないので、どのスイープにも測れない。
+              destructive の行が読める色で描かれているかは、開いていて初めて測れる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <DropdownMenu defaultOpen>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  仕訳アクション
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem>編集</DropdownMenuItem>
+                <DropdownMenuItem>複製</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive">削除</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/navigation/filter-bar.tsx

@@ -128,6 +128,26 @@ export default function Demo() {
           />
         </Flex>
 
+        {/* error — the ONE sentence that says why a filter set was refused, and the reason this
+            page has an example at all: `.ui-filter-bar-error` was painted with the destructive
+            FILL tier (2.95:1 on dark, gh#612) and NO route rendered it, so no sweep could ever
+            have caught that. Static, not behind a submit: a surface that needs an interaction is
+            a surface `check:contrast` does not measure. */}
+        <Flex direction="col" gap="xs">
+          <Text size="xs" tone="muted">
+            error · role=&quot;alert&quot; line under the bar, painted from the TEXT tier
+          </Text>
+          <FilterBar
+            search={{
+              value: modelQuery,
+              onValueChange: setModelQuery,
+              placeholder: "氏名・メールで検索",
+              ariaLabel: "メンバーを検索",
+            }}
+            error="期間の開始日が終了日より後です。条件を修正してください。"
+          />
+        </Flex>
+
         {/* overflow="wrap" (default) — stacked below 640px, wrapping rows above. */}
         <Flex direction="col" gap="xs">
           <Text size="xs" tone="muted">

package/docs/navigation/steps.tsx

@@ -27,7 +27,11 @@ const onboardingSteps = [
 export default function Demo() {
   const [approvalCurrent, setApprovalCurrent] = useState(1);
   const [wizardCurrent, setWizardCurrent] = useState(0);
-  const [hasError, setHasError] = useState(false);
+  /* Seeded TRUE so `status="error"` paints on mount. The toggle below is still the point of the
+   * demo, but starting from `false` meant the error state was reachable only by clicking —
+   * and a surface that needs an interaction is a surface no sweep measures (gh#612), which is
+   * how `.ui-steps-title[data-status="error"]` kept the destructive FILL tier unnoticed. */
+  const [hasError, setHasError] = useState(true);
 
   return (
     <PageContainer
@@ -256,6 +260,15 @@ export default function Demo() {
                 value={1}
                 items={[{ title: "コード入力" }, { title: "確認" }, { title: "完了" }]}
               />
+              {/* status="error" on the INLINE form too. The vertical/horizontal error title had a
+                  route; `.ui-steps-inline-item[data-status="error"] .ui-steps-inline-control` did
+                  not, and it reads the same tone token (gh#612). */}
+              <Steps
+                type="inline"
+                status="error"
+                value={1}
+                items={[{ title: "コード入力" }, { title: "確認" }, { title: "完了" }]}
+              />
             </Flex>
           </CardContent>
         </Card>

package/docs/navigation/tabs.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { Trash2 } from "lucide-react";
+import { CircleX } from "lucide-react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
@@ -547,7 +547,7 @@ export default function Demo() {
                 id="antd-remove-icon"
                 variant="editable-card"
                 defaultValue="je-0042"
-                closeIcon={<Trash2 aria-hidden="true" />}
+                closeIcon={<CircleX aria-hidden="true" />}
                 onEdit={() => undefined}
                 items={[
                   {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "23.4.3",
-  "godxUiMcp": "23.4.3",
+  "version": "23.4.5",
+  "godxUiMcp": "23.4.5",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -48,6 +48,7 @@
     "./styles": "./dist/styles/index.css",
     "./styles/core": "./dist/styles/core.css",
     "./styles/core-with-fallbacks": "./dist/styles/core-with-fallbacks.css",
+    "./styles/core-with-jis-level1": "./dist/styles/core-with-jis-level1.css",
     "./styles/*": "./dist/styles/*.css",
     "./theme/*": "./dist/theme/*",
     "./tokens": "./dist/tokens/base.css",
@@ -380,6 +381,7 @@
     "audit": "node scripts/ui-audit.mjs",
     "audit:examples": "node scripts/ui-audit.mjs docs",
     "build": "tsup && tsc -p tsconfig.build.json && node scripts/copy-styles.mjs && node scripts/fix-esm-extensions.mjs && node scripts/add-use-client.mjs",
+    "build:jis-level1-fonts": "node scripts/build-jis-level1-fonts.mjs",
     "dev": "node scripts/dev.mjs",
     "prepublishOnly": "pnpm run build",
     "check:audit-sync": "node scripts/check-audit-sync.mjs",

package/scripts/consumer-rule.md

@@ -12,12 +12,13 @@
 `docs/CONSUMER-RULES.md` (10 luật) và, với kho chuột bạch, ở
 `.claude/skills/godx-ui-guinea-pig/SKILL.md`.
 
-## Nạp style: BA lối vào, và hai lối sau không chở font
+## Nạp style: BỐN lối vào, và ba lối sau đều không chở 729 lát font
 
 ```css
-@import "@godxjp/ui/styles"; /* mọi layer + Noto Sans JP / M PLUS 2 đóng gói sẵn */
+@import "@godxjp/ui/styles"; /* mọi layer + 729 lát woff2 cắt theo unicode-range */
 @import "@godxjp/ui/styles/core"; /* CÙNG các layer ấy, KHÔNG một @font-face nào */
 @import "@godxjp/ui/styles/core-with-fallbacks"; /* core + 6 khối local()-only, vẫn 0 byte mạng */
+@import "@godxjp/ui/styles/core-with-jis-level1"; /* + Noto Sans JP gộp JIS mức 1: 3 request, ~1,53 MB */
 ```
 
 Chọn `core` khi kho tự lo mặt chữ, hoặc khi không muốn chở font: `@fontsource` cắt
@@ -30,13 +31,31 @@ sổ swap không đội hình: nó chở đúng 6 `@font-face` metric-matched, `
 nên **không tải byte nào**. Nhớ tự xếp tên họ chữ ngay sau mặt chữ của bạn:
 `--font-sans-base: "Noto Sans JP", "Noto Sans JP Fallback", system-ui, sans-serif;`
 
+Lối thứ tư dành cho **app tiếng Nhật vẫn muốn font kèm gói**, nhưng không muốn trả số
+vòng tải mỗi lần chuyển màn: nó thay 729 lát bằng **một tệp gộp cho mỗi weight**, phủ
+JIS X 0208 mức 1 (2965 kanji + kana + ký hiệu + Latin + tiếng Việt, 3861 code point).
+Đo trên ba weight, chỉ Noto Sans JP:
+
+| số ký tự Nhật khác nhau trên màn | `styles`                     | `core-with-jis-level1`     |
+| -------------------------------- | ---------------------------- | -------------------------- |
+| 448 (nhãn `ja` của chính gói)    | 99 request · 1.051.268 byte  | 3 request · 1.534.636 byte |
+| 694 (nhãn + tên, địa chỉ, câu)   | 150 request · 1.772.728 byte | 3 request · 1.534.636 byte |
+| 772 (thêm chút văn xuôi)         | 216 request · 3.491.840 byte | 3 request · 1.534.636 byte |
+
+Cột trái phình theo NỘI DUNG và phải trả lại ở mỗi màn có ký tự mới; cột phải không đổi.
+**Dưới khoảng 620 ký tự khác nhau thì cắt lát ít byte hơn** (đổi bằng ~100 request), nên
+app nào render ít chữ Nhật hơn cả menu của gói này thì cứ ở `styles`. Lối này KHÔNG chở
+JIS mức 2 — kanji trong họ tên hiếm sẽ rơi xuống mặt chữ của hệ điều hành, nên hãy xếp
+một mặt chữ Nhật của hệ ngay sau mặt chữ của gói. Nó cũng không đụng `--font-sans-base`,
+y như lối thứ ba.
+
 `core` giữ `@font-face` = **0** và đó là lời hứa đo được —
 `grep -c '@font-face' node_modules/@godxjp/ui/dist/styles/core.css` → `0`. Vì vậy các
 fallback nằm ở entry riêng chứ không nhét vào `core`.
 
-Không lối nào trong ba là cherry-pick: cả ba đều được hỗ trợ và thứ tự layer vẫn nguyên
-vẹn. Cherry-pick từng layer riêng lẻ thì vẫn cấm — đó là thứ làm vỡ hợp đồng thứ tự,
-không phải việc chọn lối vào.
+Không lối nào trong bốn là cherry-pick: cả bốn đều được hỗ trợ và thứ tự layer vẫn
+nguyên vẹn. Cherry-pick từng layer riêng lẻ thì vẫn cấm — đó là thứ làm vỡ hợp đồng thứ
+tự, không phải việc chọn lối vào.
 
 ## Bố cục chuẩn của platform: BA CỘT, và ba cột là BA PHẠM VI
 

package/scripts/ui-audit.mjs

@@ -902,8 +902,24 @@ function jsxOpeningEnd(source, start) {
  * filters AND a table is a mixed body, where the padding is correct — the reporter hit that trap
  * with a `childElementCount === 1` test.
  */
+/*
+ * The alternation is DERIVED from the stylesheet, not guessed. `SkeletonTable` was missing and the
+ * same mistake went through silently (gh#611) — which is the worse half, because `SkeletonTable`
+ * is the package's OWN stand-in for `DataTable`: a consumer writes the skeleton and the table side
+ * by side, one is flagged and the other is not.
+ *
+ * The list to match is exactly what `[data-slot="card-content"][data-flush]` special-cases in CSS,
+ * because a per-pair exception there IS the statement that the pair matters:
+ *
+ *     .ui-data-table-root · .ui-data-table-scroll · .ui-data-table-toolbar   → DataTable
+ *     .ui-skeleton-table                                                     → SkeletonTable
+ *
+ * `Table` stays because it is the primitive `DataTable` is built from and a consumer can place it
+ * directly. Adding a component to that CSS block without adding it here reopens this issue, so the
+ * two are checked against each other in the rule's test.
+ */
 const CARD_TABLE_FLUSH = new RegExp(
-  `<CardContent(?![^>]*\\bflush\\b)(?:\\s${ATTRS})?>\\s*<(?:DataTable|Table)\\b`,
+  `<CardContent(?![^>]*\\bflush\\b)(?:\\s${ATTRS})?>\\s*<(?:DataTable|SkeletonTable|Table)\\b`,
   "g",
 );