@godxjp/ui 23.4.3 → 23.4.4

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/styles/core-with-jis-level1.css

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

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/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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "23.4.3",
-  "godxUiMcp": "23.4.3",
+  "version": "23.4.4",
+  "godxUiMcp": "23.4.4",
   "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",
 );