@jirawatpyk/aura-react 5.29.0 → 5.31.0

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
@@ -1685,6 +1737,7 @@ var Field = React12.forwardRef(function Field2(props, ref) {
       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
   );
@@ -1692,6 +1745,20 @@ var Field = React12.forwardRef(function Field2(props, ref) {
 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",
@@ -1703,7 +1770,10 @@ var FIELD_KEYS = [
   "id",
   "suffix",
   "options",
-  "placeholder"
+  "placeholder",
+  "touchHeight",
+  "labelAddon",
+  "labelAddonDescribes"
 ];
 
 // src/TextField.tsx
@@ -1720,8 +1790,9 @@ var TextField = React13.forwardRef(function TextField2(props, ref) {
       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",
@@ -1734,7 +1805,7 @@ var TextField = React13.forwardRef(function TextField2(props, ref) {
         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)
   );
@@ -1754,8 +1825,9 @@ var Textarea = React14.forwardRef(function Textarea2(props, ref) {
       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",
@@ -1768,7 +1840,7 @@ var Textarea = React14.forwardRef(function Textarea2(props, ref) {
         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"])
       }
     )
   );
@@ -2189,7 +2261,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 +3493,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 +4666,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 +5467,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 +6652,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 +6706,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(
@@ -8470,6 +8583,13 @@ function createTheme(opts) {
     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);
@@ -8552,6 +8672,30 @@ function createTheme(opts) {
     );
   }
   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');

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

@@ -20,6 +20,7 @@ const Field = React.forwardRef(function Field2(props, ref) {
       props.required ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null,
       props.optional ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__opt" }, " (" + t.optional + ")") : null
     ) : null,
+    hasAddon(props.labelAddon) ? /* @__PURE__ */ React.createElement("div", { className: "aura-field__addon", id: props.id + "-addon" }, props.labelAddon) : null,
     props.children,
     props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCircleAlert, null), size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
   );
@@ -27,6 +28,20 @@ const Field = React.forwardRef(function Field2(props, ref) {
 function describedBy(id, p) {
   return p.error ? id + "-error" : p.hint ? id + "-hint" : void 0;
 }
+function hasAddon(n) {
+  return n != null && typeof n !== "boolean" && n !== "";
+}
+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;
+}
 const FIELD_KEYS = [
   "label",
   "hint",
@@ -38,10 +53,15 @@ const FIELD_KEYS = [
   "id",
   "suffix",
   "options",
-  "placeholder"
+  "placeholder",
+  "touchHeight",
+  "labelAddon",
+  "labelAddonDescribes"
 ];
 export {
   FIELD_KEYS,
   Field,
-  describedBy
+  describedBy,
+  hasAddon,
+  joinDescribedBy
 };

package/dist/esm/Menu.js

@@ -6,6 +6,39 @@ import { Icon } from "./Icon.js";
 import { useLinkComponent } from "./locale.js";
 import { IconCheck } from "./icons.js";
 const 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;
+}
 const Menu = React.forwardRef(function Menu2(props, ref) {
   const own = React.useRef(null), merged = useMergedRef(ref, own);
   const posState = React.useState(null);
@@ -15,21 +48,30 @@ const Menu = React.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, below = window.innerHeight - r.bottom - 12, above = r.top - 12;
+    let top = r.bottom + 4, maxHeight;
+    if (mh > below) {
+      if (mh <= above) top = r.top - mh - 4;
+      else if (above > below) {
+        maxHeight = above;
+        top = r.top - above - 4;
+      } else maxHeight = below;
+    }
+    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 = React.useRef(place);
+  placeRef.current = place;
+  const live = React.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, below = window.innerHeight - r.bottom - 12, above = r.top - 12;
-      let top = r.bottom + 4, maxHeight;
-      if (mh > below) {
-        if (mh <= above) top = r.top - mh - 4;
-        else if (above > below) {
-          maxHeight = above;
-          top = r.top - above - 4;
-        } else maxHeight = below;
-      }
-      const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
-      setPos({ top, left, maxHeight });
+      place();
     },
     [props.anchor, mounted, hasHeader]
   );
@@ -59,7 +101,12 @@ const Menu = React.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);

package/dist/esm/RadioGroup.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { describedBy } from "./Field.js";
 import { Icon } from "./Icon.js";
-import { cx, uid, useMaybeControlled } from "./internal.js";
+import { cx, touchClass, uid, useMaybeControlled } from "./internal.js";
 import { IconCircleAlert } from "./icons.js";
 const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
   const auto = uid(), id = props.id || auto;
@@ -28,7 +28,12 @@ const RadioGroup = React.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

package/dist/esm/Select.js

@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
 import { FIELD_KEYS, Field, describedBy } from "./Field.js";
 import { Icon } from "./Icon.js";
 import { useDensity } from "./locale.js";
-import { cx, devWarnOnce, omit, uid, useIsoLayoutEffect, useMergedRef, useMounted } from "./internal.js";
+import { cx, devWarnOnce, omit, touchClass, uid, useIsoLayoutEffect, useMergedRef, useMounted } from "./internal.js";
 import { IconCheck, IconChevronDown } from "./icons.js";
 const h = React.createElement;
 const FILTER_KEY = "__auraFilter";
@@ -418,7 +418,7 @@ const Select = React.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
   );

package/dist/esm/Tag.js

@@ -90,7 +90,7 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
         "aria-label": props.removeLabel || t.remove(name),
         onClick: props.onRemove
       },
-      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null), size: 12 })
+      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null), size: 14 })
     );
     return /* @__PURE__ */ React.createElement(Tooltip, { content: fullText, open: fullText ? void 0 : false }, btn);
   }() : null);

package/dist/esm/TextField.js

@@ -1,8 +1,8 @@
 'use client';
 import * as React from "react";
-import { FIELD_KEYS, Field, describedBy } from "./Field.js";
+import { FIELD_KEYS, Field, joinDescribedBy } from "./Field.js";
 import { Icon } from "./Icon.js";
-import { cx, omit, uid } from "./internal.js";
+import { cx, omit, touchClass, uid } from "./internal.js";
 const TextField = React.forwardRef(function TextField2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const rest = omit(props, FIELD_KEYS);
@@ -15,8 +15,9 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
       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__ */ React.createElement("div", { className: cx("aura-input", props.icon && "has-icon", props.suffix && "has-suffix") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, /* @__PURE__ */ React.createElement(
       "input",
@@ -29,7 +30,7 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
         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__ */ React.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
   );