@jirawatpyk/aura-react 5.28.0 → 5.30.0

package/README.md

@@ -186,6 +186,54 @@ 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.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:
+  - **Height:** with `rowHeight="auto"` skeleton rows get the same `--auto` class and minimum height as real rows. A column's new **`skeletonLines`** (default 1, at most 10; a `pill` column keeps one pill) draws that many bars, one per text line — `skeletonLines: 2` for a reason and its evidence. On an `align: 'end'` column they line up at the end. Each bar sits on a 20px body line in the grid (a caption line is 16–18px, so a row can come out a few px taller than the real one) and on the 15px value line in a card.
+  - **Stacked cards:** skeleton cards keep each field's label (`data-label`) above its bar, as a real card does.
+  - **Row actions:** an `actions` cell draws one square and a `card: 'footer'` cell a bar across the cell (in a card, the full row, as a Button there fills it), at the small button's height (32px), in the grid as well as in cards. When the column's buttons use `touchHeight`, give the column the new **`skeletonTouch`**: its bars are then 44px below 640px and on a coarse pointer, as those buttons are. A footer that holds only an IconButton still gets the full-width bar; the heights match.
+  - **Unchanged:** skeleton rows stay `aria-hidden`, the pulse stops under reduced motion, `skeletonRows`, `bleed` / `bleedEnd`. Without `rowHeight="auto"` the grid's skeleton rows keep the fixed row height.
+
 ## 5.28 — Chamber-OS addenda 35–36
 
 - **Applied-filter chips show their whole text** (item 132): in `FilterBar`'s chips row a chip takes its text's own width ("Submitted: 28 Aug – 3 Sept 2026", "Member: Midsommar Hospitality Co., Ltd."); only a chip wider than the row is cut, with an ellipsis, and a long chip never widens the FilterBar or its parents (the chips row takes its width from the bar; a bar holding only chips needs a width from its parent, as a block has). A Tag outside FilterBar keeps its 24ch cap. **Whenever a Tag's text is cut** — the 24ch cap or the row — the full text shows on hover (`title`) and, on a removable Tag, in a Tooltip on the remove button's hover and focus; the remove button's name already carries the full text for screen readers. On touch screens a cut chip can't be hovered — keep labels short enough for a phone row where you can.

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
@@ -1721,7 +1773,8 @@ window.Aura = (() => {
     "id",
     "suffix",
     "options",
-    "placeholder"
+    "placeholder",
+    "touchHeight"
   ];
 
   // src/TextField.tsx
@@ -1739,7 +1792,7 @@ window.Aura = (() => {
         required: props.required,
         optional: props.optional,
         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",
@@ -1773,7 +1826,7 @@ window.Aura = (() => {
         required: props.required,
         optional: props.optional,
         disabled: props.disabled,
-        className: props.className
+        className: cx(touchClass(props.touchHeight), props.className)
       },
       /* @__PURE__ */ React14.createElement(
         "textarea",
@@ -2207,7 +2260,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 +3492,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 +4665,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 +5466,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;
@@ -6339,23 +6419,45 @@ window.Aura = (() => {
             /* @__PURE__ */ React32.createElement("span", { key: "__sel", className: cx("aura-table__sel", nPinned && "is-pinned") }, /* @__PURE__ */ React32.createElement("span", { className: "aura-skel aura-skel--box" }))
           );
         vis.forEach(function(c, j) {
+          const part = cardPart(c, j);
+          const action = part === "footer" || part === "actions";
+          const lines = c.pill ? 1 : Math.max(1, Math.min(10, Math.floor(Number(c.skeletonLines)) || 1));
+          const bar = function(n4) {
+            return /* @__PURE__ */ React32.createElement(
+              "span",
+              {
+                key: n4,
+                className: cx("aura-skel", c.pill && "aura-skel--pill", lines > 1 && "aura-skel--text"),
+                style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j + n4) % SKELETON_WIDTHS.length] }
+              }
+            );
+          };
+          const bars = [];
+          for (let b = 0; b < lines; b++) bars.push(bar(b));
           sk.push(
             /* @__PURE__ */ React32.createElement(
               "span",
               {
                 key: c.key,
-                className: cx("aura-table__td", c.align === "end" && "is-end", isPinned(c) && "is-pinned"),
+                className: cx(
+                  "aura-table__td",
+                  autoRows && "aura-table__td--auto",
+                  c.align === "end" && "is-end",
+                  isPinned(c) && "is-pinned"
+                ),
                 style: cellStyle(c, j),
-                ...cardAttrs(c, j),
-                "data-label": void 0
+                ...cardAttrs(c, j)
               },
-              /* @__PURE__ */ React32.createElement(
+              action ? /* @__PURE__ */ React32.createElement(
                 "span",
                 {
-                  className: cx("aura-skel", c.pill && "aura-skel--pill"),
-                  style: c.pill ? void 0 : { width: SKELETON_WIDTHS[(i + j) % SKELETON_WIDTHS.length] }
+                  className: cx(
+                    "aura-skel aura-skel--action",
+                    part === "footer" && "is-footer",
+                    c.skeletonTouch && "is-touch"
+                  )
                 }
-              )
+              ) : lines > 1 ? /* @__PURE__ */ React32.createElement("span", { className: "aura-skel-lines" }, bars) : bars[0]
             )
           );
         });
@@ -6364,7 +6466,16 @@ window.Aura = (() => {
           /* @__PURE__ */ React32.createElement("span", { key: "__gr", className: cx("aura-table__gutter aura-table__gutter--end", controls && "has-picker") })
         );
         skRows.push(
-          /* @__PURE__ */ React32.createElement("div", { key: "sk" + i, className: "aura-table__row aura-table__row--skeleton", "aria-hidden": true, style: rowStyle }, sk)
+          /* @__PURE__ */ React32.createElement(
+            "div",
+            {
+              key: "sk" + i,
+              className: cx("aura-table__row aura-table__row--skeleton", autoRows && "aura-table__row--auto"),
+              "aria-hidden": true,
+              style: rowStyle
+            },
+            sk
+          )
         );
       }
     } else if (!rows.length) {
@@ -6540,12 +6651,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",
         {
@@ -6581,6 +6705,7 @@ window.Aura = (() => {
               setScrollTop(t2.scrollTop);
             const sx = t2.scrollLeft > 0;
             if (sx !== scrolledX[0]) scrolledX[1](sx);
+            checkMoreX();
           }
         },
         /* @__PURE__ */ React32.createElement(