@jirawatpyk/aura-react 5.29.0 → 5.31.0

package/README.md

@@ -186,6 +186,51 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.31 — Chamber-OS addenda 41–42
+
+- **`labelAddon` on TextField, Textarea and PasswordField** (item 138): a node between the label and the box, in the field's 6px gap — e.g. the phrase to type on a typed confirmation, as a chip with a copy button, so it is read before the box and can be copied. The hint and error stay below the box. The addon's box is `.aura-field__addon` with the id `{id}-addon`, and that id comes first in the input's `aria-describedby` (then the error or hint, then your own `aria-describedby` ids), so a screen reader reads it after the label; keep any button names in it short ("Copy"). `labelAddonDescribes={false}` keeps it out — for an addon that isn't a description (a "Forgot password?" link), or to name only part of it (give that part an id and pass it in `aria-describedby`); ids are never repeated. A focusable control in it comes before the input in tab order; clicking the label still focuses the input. `Field` takes `labelAddon` too, for a custom control (add `{id}-addon` to that control's `aria-describedby` yourself). The other fields (Select, Combobox, NumberField, the pickers, FileUpload) don't take it yet. Unset, nothing changes.
+- **"Chosen" follows the brand** (item 139): `createTheme`, `<ThemeStyle>` and `npx aura-theme --brand` now emit `--aura-control-checked-bg` / `-fg` for light and dark, so a themed product's checked box, radio dot, switch, active tab underline, current page, selected day and year, completed step and checked menu item match its links and focus instead of staying violet. Light is the theme's accent itself; dark is the brand's 300 step, lightened to at least 3:1 on the dark surface and canvas (as AURA's own violet-300). The mark on it is white or ink, whichever reads better; both are in the theme's contrast checks (fill 3:1 on surface and canvas, mark 4.5:1 on the fill). In aura.css the light `--aura-control-checked-bg` is now `var(--aura-accent-violet)` (the same violet-700 by default), so a hand-written `:root` override of the accent carries it too; a scoped override needs the generator, or both tokens. Unthemed, nothing changes. Remove any hand-written `--aura-control-checked-*` stand-in after regenerating the theme.
+
+## 5.30 — Visual polish (audit, Oct 2026) and Chamber-OS addenda 38–40
+
+One release: everything below ships together in 5.30.0.
+
+### Menus stay open on scroll; StatusPill weight (addenda 39–40)
+
+- **An open menu follows its trigger** (item 136): DropdownMenu and every menu built on it (DataTable's row ⋯ and column menus) now move with the trigger on scroll and resize — a slight finger drag during a tap, the phone's address bar or keyboard no longer close it, as Popover already behaved. It closes once the trigger is wholly out of view (the page's, or a box around it that clips it — a fixed bar inside a scrolling wrapper isn't clipped by it, and `overflow-x: clip` only clips sideways), without taking focus back so the page doesn't jump; inside a Dialog or Drawer focus goes back to the trigger without scrolling, so it stays in the dialog. Escape, a pointerdown outside and choosing an item close it as before, with focus back on the trigger. No new prop.
+- **StatusPill is 500 (medium)** (item 137) wherever it sits — before, it took its parent's weight (regular beside a heading, bold inside bold text). Badge stays 600, so the two stay distinct.
+
+### 44px fields and choice rows (addendum 38)
+
+- **`touchHeight` on TextField, Textarea, Select, RadioGroup and Checkbox** (item 135): `touchHeight="always"` gives a 44px input box and 44px choice rows at every width — also with a mouse and inside `density="compact"` — for a form whose spec asks for 44px targets everywhere (Chamber-OS's issue dialog: zero-rate radios, certificate number, typed phrase). `touchHeight` (`true`) does it only below 640px or on a coarse pointer, as Button's `touchHeight`; touch screens already had 44px fields and rows. A one-line option's label is centred in its row (a Checkbox row is 45px: its label sits on a 21px line); a row with a description grows. On a Checkbox it applies to a labelled box; a bare box uses `hitArea`. Textarea accepts it too, but is always at least 96px tall, so nothing changes there. In a horizontal RadioGroup each option keeps its own height (one-line options stay centred beside a taller one with a description).
+- **How:** the field's root gets `is-touch-always` / `is-touch`, which sets its own `--aura-input-height` to `--aura-touch-target` (44px) — any control inside that reads the input height follows, whatever density is around it. Label, hint and error ids are unchanged; Button's `touchHeight` is unchanged.
+
+### Visual polish, part 2
+
+- **"Chosen" is violet everywhere** (audit item 4): a checked Checkbox or Radio, a Switch that is on, the active Tab's underline, the current Pagination page, the selected Calendar day and year, a completed Stepper step and a checked menu item use the new `--aura-control-checked-bg` / `-fg` (violet-700 with a white mark in light, violet-300 with a zinc-900 mark in dark). Buttons stay ink / off-white. A disabled Switch that is on keeps its whole violet track (faded, it fell under 3:1 from a disabled one that is off) and fades its thumb instead.
+- **Tables say when they scroll** (item 9): a Table wider than its box shows a soft shadow at the edge with more to scroll (CSS only, `--aura-scroll-shadow`; body rows show it, the header band and totals rows cover it; set `--aura-tbl-bg` if you give the box another ground); a DataTable with columns past its end edge shows the same shadow over the grid's end edge, inside its scrollbars (`has-more-x`), until scrolled to the end. Stacking stays opt-in (`stackBelow`) — no layout changes by default.
+- **Table columns are never squeezed to one letter** (item 8): from 640px a cell is at least 10ch wide; a longer word (an email, a URL) still breaks to fit rather than widening the table; numbers already stay on one line. Phones are unchanged (a table still fits its box): give a table that is too wide for a phone `stackBelow`.
+- **Totals** (item 20): a 2px rule in the hairline colour over the totals (DataTable and Table), not the strong border that glared in dark; with several totals rows the last is 14px bold; a pinned DataTable totals row casts a soft shadow over the rows under it.
+- **SegmentedControl** (items 11–12) is as tall as a field with a mouse (`--aura-input-height`: 44px, 36px in compact; `size="sm"` unchanged; icon-only options stay square; on touch screens each option is 44px, as before), and the selected option is 600 weight on its own thumb colour (`--aura-segmented-thumb-bg`), which is lighter than the track in dark instead of darker.
+- **FilterSelect** (item 11): from 640px the face has a field's inset and 14px text, like the search box beside it; phones keep the tight face so three filters and a chip share a row.
+- **Smaller fixes**: the show-password button is fg-secondary like a field's other icons (item 14); a removable Tag's × is 14px (item 17); a plain link (no class) inside a Card, Stat, Alert, EmptyState, field, tab panel, AppShell main, table or Dialog takes the accent colour, at zero specificity so your own link rules win (item 18).
+- **Not changed, on purpose**: a ghost button that starts an ActionBar keeps its box at the bar's edge (Chamber-OS 116 relies on it); the Progress track keeps its 3:1 edge (WCAG 1.4.11); DatePicker's calendar button and TimePicker's clock stay where they are (one is a button, one a label icon).
+- Size budgets: `styles.css` 32 kB, DataTable 21 kB, `aura.bundle.js` and the whole package 66 kB.
+
+### Visual polish
+
+A visual audit of every Storybook story in light, dark and at 390px. This release takes the system-wide fixes; colour hues and layout defaults are unchanged.
+
+- **Dark mode:** the primary button, checked box, selected day, completed step, `bg-surface-strong` and `bg-inverted` (tooltips, counts) are off-white `zinc-200` instead of pure white, which was the brightest thing on a dark page. Primary hover is `zinc-100`.
+- **Status fills:** Blocked is `red-800` in light (quieter in a long table, and further from the lime Ready fill); Warning is `amber-600` in dark too (amber-500 glowed). Ready, Warning and Blocked still differ by lightness, not only hue.
+- **Neutral fills show on the light canvas:** `--aura-status-neutral-bg` is `zinc-200` (was `zinc-100` on a `zinc-50` page), so the neutral StatusPill, tab counts, Avatar and SideNav initials are one step darker in light. The neutral Badge and the EmptyState icon disc use it too.
+- **DataTable header band** has its own token, `--aura-table-head-bg`: the canvas in light, `#111114` in dark — between the page and the card, so it no longer reads as a hole. Table's header and totals rows (also the totals card) and DataTable's totals row use it.
+- **Disabled filled buttons** (primary, danger, creative) use new tokens `--aura-button-disabled-bg` / `-fg`: a grey fill with muted text at full opacity, not a faded copy (faded red read as pink, faded ink as a separate grey button); the creative shadow goes. Secondary, ghost and danger-secondary keep the fade. In forced colours every disabled button shows GrayText and the fade.
+- **Buttons are always the AURA sans** (`font-family: var(--font-sans)`), also outside a root that sets the font. An app that sets its own font on `body` should set `--font-sans` too, or its buttons stay Inter.
+- **Table caption** has 12px below it, so it no longer touches the header.
+- **DataTable skeleton action bars** take the button's own shape (`--aura-button-radius`).
+- **Thai:** where the language is Thai (`lang="th"` on the page or a part), StatusPill, Badge and tab counts are 12px (the loading pill matches), BottomNav labels 12px, Stepper descriptions 13px with a 1.6 line, SideNav labels on a 22px line, field labels, hints and errors on a 1.6 line, Radio and Checkbox descriptions 13px on a 1.6 line, and a stacked card's field labels 12px. A `lang="en"` part inside keeps the Latin sizes. These follow the `lang` attribute, not `AuraProvider locale`: set `<html lang="th">` (Next.js: the root layout's `<html lang>`), so portals (Dialog, Menu, Popover) get it too.
+
 ## 5.29 — Chamber-OS addendum 37
 
 - **DataTable loading rows match the rows they stand in for** (item 134), so the layout doesn't jump when the rows arrive:

package/dist/aura.bundle.js

@@ -158,6 +158,9 @@ window.Aura = (() => {
         out[k] = src[k];
     return out;
   }
+  function touchClass(t) {
+    return t === "always" ? "is-touch-always" : !!t && "is-touch";
+  }
   var TONES = ["neutral", "accent", "success", "warning", "danger"];
   function tone(t) {
     return TONES.indexOf(t) >= 0 ? t : "neutral";
@@ -1364,6 +1367,39 @@ window.Aura = (() => {
   var React8 = __toESM(require_react(), 1);
   var import_react_dom = __toESM(require_react_dom(), 1);
   var ITEMS = '[role^="menuitem"]';
+  function makesBlock(s) {
+    return s.transform !== "none" || s.translate !== "none" || s.rotate !== "none" || s.scale !== "none" || s.filter !== "none" || s.backdropFilter !== "none" || s.perspective !== "none" || s.contentVisibility === "auto" || /paint|layout|strict|content/.test(s.contain) || /transform|translate|rotate|scale|filter|perspective/.test(s.willChange);
+  }
+  function inView(el) {
+    if (!el.isConnected) return false;
+    const r = el.getBoundingClientRect();
+    if (r.width === 0 && r.height === 0) return false;
+    let top = r.top, bottom = r.bottom, left = r.left, right = r.right;
+    let pos = getComputedStyle(el).position;
+    for (let p = el.parentElement; p && p !== document.body && p !== document.documentElement; p = p.parentElement) {
+      const s = getComputedStyle(p);
+      const block = makesBlock(s);
+      if (pos === "fixed" && !block) continue;
+      if (pos === "absolute" && s.position === "static" && !block) continue;
+      if (s.display !== "contents") {
+        const b = p.getBoundingClientRect();
+        if (s.overflowX !== "visible") {
+          left = Math.max(left, b.left);
+          right = Math.min(right, b.right);
+        }
+        if (s.overflowY !== "visible") {
+          top = Math.max(top, b.top);
+          bottom = Math.min(bottom, b.bottom);
+        }
+      }
+      pos = s.position === "fixed" || s.position === "absolute" ? s.position : "static";
+    }
+    top = Math.max(top, 0);
+    left = Math.max(left, 0);
+    bottom = Math.min(bottom, window.innerHeight);
+    right = Math.min(right, window.innerWidth);
+    return bottom > top && right > left;
+  }
   var Menu = React8.forwardRef(function Menu2(props, ref) {
     const own = React8.useRef(null), merged = useMergedRef(ref, own);
     const posState = React8.useState(null);
@@ -1373,21 +1409,30 @@ window.Aura = (() => {
     const headerId = uid(), itemId = uid();
     const hasHeader = props.header != null && props.header !== false && props.header !== "";
     const Link = useLinkComponent(props.linkComponent);
+    function place() {
+      const a = props.anchor, m = own.current;
+      if (!a || !m) return;
+      const r = a.getBoundingClientRect(), mh = m.scrollHeight, mw = m.offsetWidth, below2 = window.innerHeight - r.bottom - 12, above = r.top - 12;
+      let top = r.bottom + 4, maxHeight;
+      if (mh > below2) {
+        if (mh <= above) top = r.top - mh - 4;
+        else if (above > below2) {
+          maxHeight = above;
+          top = r.top - above - 4;
+        } else maxHeight = below2;
+      }
+      const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
+      setPos(function(p) {
+        return p && p.top === top && p.left === left && p.maxHeight === maxHeight ? p : { top, left, maxHeight };
+      });
+    }
+    const placeRef = React8.useRef(place);
+    placeRef.current = place;
+    const live = React8.useRef({ anchor: props.anchor, onClose: props.onClose });
+    live.current = { anchor: props.anchor, onClose: props.onClose };
     useIsoLayoutEffect(
       function() {
-        const a = props.anchor, m = own.current;
-        if (!a || !m) return;
-        const r = a.getBoundingClientRect(), mh = m.scrollHeight, mw = m.offsetWidth, below2 = window.innerHeight - r.bottom - 12, above = r.top - 12;
-        let top = r.bottom + 4, maxHeight;
-        if (mh > below2) {
-          if (mh <= above) top = r.top - mh - 4;
-          else if (above > below2) {
-            maxHeight = above;
-            top = r.top - above - 4;
-          } else maxHeight = below2;
-        }
-        const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
-        setPos({ top, left, maxHeight });
+        place();
       },
       [props.anchor, mounted, hasHeader]
     );
@@ -1417,7 +1462,12 @@ window.Aura = (() => {
             props.onClose(false);
         }
         function onScroll(e) {
-          if (own.current && !own.current.contains(e.target)) props.onClose(false);
+          if (own.current && e.target instanceof Node && own.current.contains(e.target)) return;
+          const a = live.current.anchor;
+          if (a && !inView(a)) {
+            live.current.onClose(false);
+            if (a instanceof HTMLElement && a.closest('[aria-modal="true"]')) a.focus({ preventScroll: true });
+          } else placeRef.current();
         }
         document.addEventListener("pointerdown", outside, true);
         window.addEventListener("scroll", onScroll, true);
@@ -1627,7 +1677,8 @@ window.Aura = (() => {
       "className",
       "tabIndex",
       "disabled",
-      "hitArea"
+      "hitArea",
+      "touchHeight"
     ]);
     const text2 = props.children;
     const labelled = text2 != null && text2 !== "";
@@ -1646,6 +1697,7 @@ window.Aura = (() => {
         className: cx(
           "aura-check",
           labelled && "aura-check--labelled",
+          labelled && touchClass(props.touchHeight),
           hit && "has-hit",
           props.disabled && "is-disabled",
           props.className
@@ -1703,6 +1755,7 @@ window.Aura = (() => {
         props.required ? /* @__PURE__ */ React12.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null,
         props.optional ? /* @__PURE__ */ React12.createElement("span", { className: "aura-field__opt" }, " (" + t.optional + ")") : null
       ) : null,
+      hasAddon(props.labelAddon) ? /* @__PURE__ */ React12.createElement("div", { className: "aura-field__addon", id: props.id + "-addon" }, props.labelAddon) : null,
       props.children,
       props.error ? /* @__PURE__ */ React12.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React12.createElement(Icon, { name: /* @__PURE__ */ React12.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React12.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
     );
@@ -1710,6 +1763,20 @@ window.Aura = (() => {
   function describedBy(id, p) {
     return p.error ? id + "-error" : p.hint ? id + "-hint" : void 0;
   }
+  function hasAddon(n3) {
+    return n3 != null && typeof n3 !== "boolean" && n3 !== "";
+  }
+  function joinDescribedBy(id, p, own) {
+    const ids = [
+      hasAddon(p.labelAddon) && p.labelAddonDescribes !== false ? id + "-addon" : "",
+      describedBy(id, p) || ""
+    ].concat(typeof own === "string" ? own.split(/\s+/) : []);
+    const out = [];
+    ids.forEach(function(x) {
+      if (x && out.indexOf(x) < 0) out.push(x);
+    });
+    return out.join(" ") || void 0;
+  }
   var FIELD_KEYS = [
     "label",
     "hint",
@@ -1721,7 +1788,10 @@ window.Aura = (() => {
     "id",
     "suffix",
     "options",
-    "placeholder"
+    "placeholder",
+    "touchHeight",
+    "labelAddon",
+    "labelAddonDescribes"
   ];
 
   // src/TextField.tsx
@@ -1738,8 +1808,9 @@ window.Aura = (() => {
         error: props.error,
         required: props.required,
         optional: props.optional,
+        labelAddon: props.labelAddon,
         disabled: props.disabled,
-        className: props.className
+        className: cx(touchClass(props.touchHeight), props.className)
       },
       /* @__PURE__ */ React13.createElement("div", { className: cx("aura-input", props.icon && "has-icon", props.suffix && "has-suffix") }, props.icon ? /* @__PURE__ */ React13.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, /* @__PURE__ */ React13.createElement(
         "input",
@@ -1752,7 +1823,7 @@ window.Aura = (() => {
           placeholder: props.placeholder,
           required: props.required,
           "aria-invalid": props.error ? true : rest["aria-invalid"],
-          "aria-describedby": [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0
+          "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
         }
       ), props.suffix ? /* @__PURE__ */ React13.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
     );
@@ -1772,8 +1843,9 @@ window.Aura = (() => {
         error: props.error,
         required: props.required,
         optional: props.optional,
+        labelAddon: props.labelAddon,
         disabled: props.disabled,
-        className: props.className
+        className: cx(touchClass(props.touchHeight), props.className)
       },
       /* @__PURE__ */ React14.createElement(
         "textarea",
@@ -1786,7 +1858,7 @@ window.Aura = (() => {
           placeholder: props.placeholder,
           required: props.required,
           "aria-invalid": props.error ? true : rest["aria-invalid"],
-          "aria-describedby": [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0
+          "aria-describedby": joinDescribedBy(id, props, rest["aria-describedby"])
         }
       )
     );
@@ -2207,7 +2279,7 @@ window.Aura = (() => {
         required: props.required,
         optional: props.optional,
         disabled: props.disabled,
-        className: props.className
+        className: cx(touchClass(props.touchHeight), props.className)
       },
       child
     );
@@ -3439,7 +3511,12 @@ window.Aura = (() => {
       "fieldset",
       {
         ref: setRef,
-        className: cx("aura-field aura-radio-group", props.error && "is-invalid", props.className),
+        className: cx(
+          "aura-field aura-radio-group",
+          props.error && "is-invalid",
+          touchClass(props.touchHeight),
+          props.className
+        ),
         "aria-describedby": describedBy(id, props),
         "aria-invalid": props.error ? true : void 0,
         disabled: props.disabled
@@ -4607,7 +4684,7 @@ window.Aura = (() => {
           "aria-label": props.removeLabel || t.remove(name),
           onClick: props.onRemove
         },
-        /* @__PURE__ */ React27.createElement(Icon, { name: /* @__PURE__ */ React27.createElement(IconX, null), size: 12 })
+        /* @__PURE__ */ React27.createElement(Icon, { name: /* @__PURE__ */ React27.createElement(IconX, null), size: 14 })
       );
       return /* @__PURE__ */ React27.createElement(Tooltip, { content: fullText, open: fullText ? void 0 : false }, btn);
     }() : null);
@@ -5408,6 +5485,28 @@ window.Aura = (() => {
       return px != null && below(boxWidth[0], px);
     }
     const scrollRef = React32.useRef(null);
+    const edgeState = React32.useState("");
+    const checkMoreX = function() {
+      const el = scrollRef.current;
+      if (!el) return;
+      const more = Math.abs(el.scrollLeft) + el.clientWidth < el.scrollWidth - 1;
+      const next = more ? [el.offsetTop, el.clientHeight, el.offsetWidth - el.clientWidth].join(" ") : "";
+      if (next !== edgeState[0]) edgeState[1](next);
+    };
+    const checkRef = React32.useRef(checkMoreX);
+    checkRef.current = checkMoreX;
+    React32.useEffect(function() {
+      const el = scrollRef.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(function() {
+        checkRef.current();
+      });
+      ro.observe(el);
+      if (el.firstElementChild) ro.observe(el.firstElementChild);
+      return function() {
+        ro.disconnect();
+      };
+    }, []);
     const tipState = React32.useState(null), tip = tipState[0], setTip = tipState[1];
     function showFull(e) {
       const el = e.target.closest ? e.target.closest(".aura-table__td") : null;
@@ -6571,12 +6670,25 @@ window.Aura = (() => {
           stacked && "aura-table--stacked",
           noCardSel && "aura-table--cards-nosel",
           scrolledX[0] && "is-scrolled-x",
+          edgeState[0] && !stacked && "has-more-x",
           refreshing && "is-refreshing",
           !levels.length && props.className
         ),
         style: levels.length ? { ["--aura-q-back"]: String(levels[levels.length - 1].px / Q) } : void 0
       },
       refreshing ? /* @__PURE__ */ React32.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
+      edgeState[0] && !stacked ? /* @__PURE__ */ React32.createElement(
+        "span",
+        {
+          className: "aura-table__edge",
+          "aria-hidden": true,
+          style: {
+            "--aura-edge-top": edgeState[0].split(" ")[0] + "px",
+            "--aura-edge-h": edgeState[0].split(" ")[1] + "px",
+            "--aura-edge-sb": edgeState[0].split(" ")[2] + "px"
+          }
+        }
+      ) : null,
       /* @__PURE__ */ React32.createElement(
         "div",
         {
@@ -6612,6 +6724,7 @@ window.Aura = (() => {
               setScrollTop(t2.scrollTop);
             const sx = t2.scrollLeft > 0;
             if (sx !== scrolledX[0]) scrolledX[1](sx);
+            checkMoreX();
           }
         },
         /* @__PURE__ */ React32.createElement(
@@ -8488,6 +8601,13 @@ window.Aura = (() => {
       D["accent-lime"] = s[200];
       D["mesh-to"] = s[200];
     }
+    function onFill(bg) {
+      return contrast(ZINC[0], bg) >= contrast(INK, bg) ? ZINC[0] : INK;
+    }
+    L["control-checked-bg"] = L["accent-violet"];
+    L["control-checked-fg"] = onFill(L["control-checked-bg"]);
+    D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
+    D["control-checked-fg"] = onFill(D["control-checked-bg"]);
     const shadowLight = INK, shadowDark = D["accent-violet"];
     if (o.primary === "brand") {
       L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -8570,6 +8690,30 @@ window.Aura = (() => {
       );
     }
     if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
+    [
+      [
+        "light",
+        L,
+        [
+          ["bg-surface", ZINC[0]],
+          ["bg-canvas", ZINC[50]]
+        ]
+      ],
+      [
+        "dark",
+        D,
+        [
+          ["bg-surface", ZINC[900]],
+          ["bg-canvas", ZINC[950]]
+        ]
+      ]
+    ].forEach(function(g) {
+      const t = g[0], m = g[1];
+      g[2].forEach(function(gr) {
+        check(t, "control-checked-bg", gr[0], 3, m["control-checked-bg"], gr[1]);
+      });
+      check(t, "control-checked-fg", "control-checked-bg", 4.5, m["control-checked-fg"], m["control-checked-bg"]);
+    });
     function css(selector) {
       if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
         throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');