@jirawatpyk/aura-react 5.29.0 → 5.30.0

package/README.md

@@ -186,6 +186,46 @@ 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:

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;
@@ -6571,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",
         {
@@ -6612,6 +6705,7 @@ window.Aura = (() => {
               setScrollTop(t2.scrollTop);
             const sx = t2.scrollLeft > 0;
             if (sx !== scrolledX[0]) scrolledX[1](sx);
+            checkMoreX();
           }
         },
         /* @__PURE__ */ React32.createElement(

package/dist/cjs/index.cjs

@@ -140,6 +140,9 @@ function omit(src, keys) {
       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";
@@ -1346,6 +1349,39 @@ var IconButton = React7.forwardRef(function IconButton2(props, ref) {
 var React8 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 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);
@@ -1355,21 +1391,30 @@ var Menu = React8.forwardRef(function Menu2(props, ref) {
   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]
   );
@@ -1399,7 +1444,12 @@ var Menu = React8.forwardRef(function Menu2(props, ref) {
           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);
@@ -1609,7 +1659,8 @@ var Checkbox = React10.forwardRef(function Checkbox2(props, ref) {
     "className",
     "tabIndex",
     "disabled",
-    "hitArea"
+    "hitArea",
+    "touchHeight"
   ]);
   const text2 = props.children;
   const labelled = text2 != null && text2 !== "";
@@ -1628,6 +1679,7 @@ var Checkbox = React10.forwardRef(function Checkbox2(props, ref) {
       className: cx(
         "aura-check",
         labelled && "aura-check--labelled",
+        labelled && touchClass(props.touchHeight),
         hit && "has-hit",
         props.disabled && "is-disabled",
         props.className
@@ -1703,7 +1755,8 @@ var FIELD_KEYS = [
   "id",
   "suffix",
   "options",
-  "placeholder"
+  "placeholder",
+  "touchHeight"
 ];
 
 // src/TextField.tsx
@@ -1721,7 +1774,7 @@ var TextField = React13.forwardRef(function TextField2(props, ref) {
       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",
@@ -1755,7 +1808,7 @@ var Textarea = React14.forwardRef(function Textarea2(props, ref) {
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
-      className: props.className
+      className: cx(touchClass(props.touchHeight), props.className)
     },
     /* @__PURE__ */ React14.createElement(
       "textarea",
@@ -2189,7 +2242,7 @@ var Select = React15.forwardRef(function Select2(props, ref) {
       required: props.required,
       optional: props.optional,
       disabled: props.disabled,
-      className: props.className
+      className: cx(touchClass(props.touchHeight), props.className)
     },
     child
   );
@@ -3421,7 +3474,12 @@ var RadioGroup = React19.forwardRef(function RadioGroup2(props, ref) {
     "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
@@ -4589,7 +4647,7 @@ var Tag = React27.forwardRef(function Tag2(props, ref) {
         "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);
@@ -5390,6 +5448,28 @@ var DataTableImpl = React32.forwardRef(function DataTable(props, ref) {
     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;
@@ -6553,12 +6633,25 @@ var DataTableImpl = React32.forwardRef(function DataTable(props, ref) {
         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",
       {
@@ -6594,6 +6687,7 @@ var DataTableImpl = React32.forwardRef(function DataTable(props, ref) {
             setScrollTop(t2.scrollTop);
           const sx = t2.scrollLeft > 0;
           if (sx !== scrolledX[0]) scrolledX[1](sx);
+          checkMoreX();
         }
       },
       /* @__PURE__ */ React32.createElement(

package/dist/esm/Checkbox.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { cx, devWarnOnce, omit, uid, useMergedRef, useMaybeControlled } from "./internal.js";
+import { cx, devWarnOnce, omit, touchClass, uid, useMergedRef, useMaybeControlled } from "./internal.js";
 import { Icon } from "./Icon.js";
 import { IconCheck, IconMinus } from "./icons.js";
 const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
@@ -23,7 +23,8 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
     "className",
     "tabIndex",
     "disabled",
-    "hitArea"
+    "hitArea",
+    "touchHeight"
   ]);
   const text = props.children;
   const labelled = text != null && text !== "";
@@ -42,6 +43,7 @@ const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
       className: cx(
         "aura-check",
         labelled && "aura-check--labelled",
+        labelled && touchClass(props.touchHeight),
         hit && "has-hit",
         props.disabled && "is-disabled",
         props.className

package/dist/esm/DataTable.js

@@ -194,6 +194,28 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     return px != null && below(boxWidth[0], px);
   }
   const scrollRef = React.useRef(null);
+  const edgeState = React.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 = React.useRef(checkMoreX);
+  checkRef.current = checkMoreX;
+  React.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 = React.useState(null), tip = tipState[0], setTip = tipState[1];
   function showFull(e) {
     const el = e.target.closest ? e.target.closest(".aura-table__td") : null;
@@ -1357,12 +1379,25 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         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__ */ React.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
+    edgeState[0] && !stacked ? /* @__PURE__ */ React.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__ */ React.createElement(
       "div",
       {
@@ -1398,6 +1433,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
             setScrollTop(t2.scrollTop);
           const sx = t2.scrollLeft > 0;
           if (sx !== scrolledX[0]) scrolledX[1](sx);
+          checkMoreX();
         }
       },
       /* @__PURE__ */ React.createElement(

package/dist/esm/Field.js

@@ -38,7 +38,8 @@ const FIELD_KEYS = [
   "id",
   "suffix",
   "options",
-  "placeholder"
+  "placeholder",
+  "touchHeight"
 ];
 export {
   FIELD_KEYS,