@jirawatpyk/aura-tokens 5.5.0 → 5.7.0

package/aura-tailwind.css

@@ -1,4 +1,4 @@
-/* AURA v5.5.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand.
+/* AURA v5.7.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand.
  *   @import "tailwindcss";
  *   @import "@jirawatpyk/aura-tokens/tailwind.css";
  * Gives bg-bg-surface, text-fg-primary, border-border-strong, p-aura-6, rounded-aura-xl, shadow-aura-overlay,

package/aura-tailwind.prefixed.css

@@ -1,4 +1,4 @@
-/* AURA v5.5.0 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.mts. Do not edit by hand.
+/* AURA v5.7.0 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.mts. Do not edit by hand.
  * For apps that already have a Tailwind theme (shadcn): nothing here redefines an existing name.
  *   @layer aura-tokens, theme, base, aura, components, utilities;
  *   @import "tailwindcss";

package/aura.css

@@ -1,4 +1,4 @@
-/* AURA v5.5.0 — GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand. */
+/* AURA v5.7.0 — GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand. */
 /* Fonts: load aura-fonts.css (or the <link> tags in README) separately, so a blocked Google Fonts never breaks this file. */
 
 :root, [data-theme="light"] {

package/components/aura.bundle.js

@@ -828,6 +828,8 @@ window.Aura = (() => {
     const pos = posState[0], setPos = posState[1];
     const items2 = props.items || [];
     const mounted = useMounted();
+    const headerId = uid();
+    const hasHeader = props.header != null && props.header !== false && props.header !== "";
     const Link = useLinkComponent(props.linkComponent);
     useIsoLayoutEffect(
       function() {
@@ -845,7 +847,20 @@ window.Aura = (() => {
         const left = Math.max(8, Math.min(r.right - mw, window.innerWidth - mw - 8));
         setPos({ top, left, maxHeight });
       },
-      [props.anchor, mounted]
+      [props.anchor, mounted, hasHeader]
+    );
+    const hadHeader = React6.useRef(hasHeader);
+    React6.useEffect(
+      function() {
+        if (hadHeader.current === hasHeader) return;
+        hadHeader.current = hasHeader;
+        const a = document.activeElement;
+        if (own.current && (!a || a === document.body)) {
+          const first = own.current.querySelector('[role^="menuitem"]:not([disabled])');
+          if (first) first.focus();
+        }
+      },
+      [hasHeader]
     );
     React6.useEffect(
       function() {
@@ -871,22 +886,22 @@ window.Aura = (() => {
       [mounted]
     );
     function onKeyDown(e) {
-      const list = Array.prototype.slice.call(
+      const list2 = Array.prototype.slice.call(
         own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
       );
-      const i = list.indexOf(document.activeElement);
+      const i = list2.indexOf(document.activeElement);
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        list[(i + 1) % list.length].focus();
+        list2[(i + 1) % list2.length].focus();
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        list[(i - 1 + list.length) % list.length].focus();
+        list2[(i - 1 + list2.length) % list2.length].focus();
       } else if (e.key === "Home") {
         e.preventDefault();
-        list[0].focus();
+        list2[0].focus();
       } else if (e.key === "End") {
         e.preventDefault();
-        list[list.length - 1].focus();
+        list2[list2.length - 1].focus();
       } else if (e.key === " " && document.activeElement && document.activeElement.tagName === "A") {
         e.preventDefault();
         document.activeElement.click();
@@ -898,9 +913,9 @@ window.Aura = (() => {
       }
       e.stopPropagation();
     }
-    function groupItems(list) {
+    function groupItems(list2) {
       const out = [];
-      list.forEach(function(it, i) {
+      list2.forEach(function(it, i) {
         const g = it.type === "radio" && it.group ? it.group : null;
         const last = out[out.length - 1];
         if (last && last.group === g && g !== null) last.items.push({ it, i });
@@ -955,27 +970,28 @@ window.Aura = (() => {
         body
       );
     }
-    const el = /* @__PURE__ */ React6.createElement(
+    const style = {
+      top: pos ? pos.top : -9999,
+      left: pos ? pos.left : -9999,
+      maxHeight: pos && pos.maxHeight ? pos.maxHeight : void 0
+    };
+    const list = groupItems(items2).map(function(block, bi) {
+      const rendered = block.items.map(function(x) {
+        return renderItem(x.it, x.i);
+      });
+      return block.group ? /* @__PURE__ */ React6.createElement("div", { key: "g" + bi, role: "group", "aria-label": block.group, className: "aura-menu__group" }, rendered) : /* @__PURE__ */ React6.createElement(React6.Fragment, { key: "f" + bi }, rendered);
+    });
+    const el = hasHeader ? /* @__PURE__ */ React6.createElement("div", { ref: merged, className: "aura-menu has-header", onKeyDown, style }, /* @__PURE__ */ React6.createElement(
       "div",
       {
-        ref: merged,
-        role: "menu",
-        "aria-label": props.label,
-        className: "aura-menu",
-        onKeyDown,
-        style: {
-          top: pos ? pos.top : -9999,
-          left: pos ? pos.left : -9999,
-          maxHeight: pos && pos.maxHeight ? pos.maxHeight : void 0
+        className: "aura-menu__header",
+        id: headerId,
+        onMouseDown: function(e) {
+          e.preventDefault();
         }
       },
-      groupItems(items2).map(function(block, bi) {
-        const rendered = block.items.map(function(x) {
-          return renderItem(x.it, x.i);
-        });
-        return block.group ? /* @__PURE__ */ React6.createElement("div", { key: "g" + bi, role: "group", "aria-label": block.group, className: "aura-menu__group" }, rendered) : /* @__PURE__ */ React6.createElement(React6.Fragment, { key: "f" + bi }, rendered);
-      })
-    );
+      props.header
+    ), /* @__PURE__ */ React6.createElement("div", { role: "menu", "aria-label": props.label, "aria-describedby": headerId, className: "aura-menu__list" }, list)) : /* @__PURE__ */ React6.createElement("div", { ref: merged, role: "menu", "aria-label": props.label, className: "aura-menu", onKeyDown, style }, list);
     return mounted ? (0, import_react_dom.createPortal)(el, document.body) : null;
   });
 
@@ -1015,6 +1031,7 @@ window.Aura = (() => {
         label: props.label,
         items: props.items,
         linkComponent: props.linkComponent,
+        header: props.header,
         onClose: function(restore) {
           setAnchor(null);
           if (restore && typeof anchor.focus === "function") anchor.focus();
@@ -3079,10 +3096,35 @@ window.Aura = (() => {
     promote();
     emitToasts();
   };
+  var hotkeyOrigin = /* @__PURE__ */ new WeakMap();
+  function outsideToaster(el) {
+    return el && el !== document.body && !el.closest(".aura-toaster") ? el : null;
+  }
   function ToastItem(props) {
     const str = useStrings();
+    const Link = useLinkComponent();
+    const node = React19.useRef(null);
+    const origin = React19.useRef(null);
+    useIsoLayoutEffect(function() {
+      origin.current = outsideToaster(document.activeElement);
+      const el = node.current;
+      return function() {
+        if (!el || !el.contains(document.activeElement)) return;
+        const back = [hotkeyOrigin.get(el), origin.current].filter(function(b) {
+          return !!b && b.isConnected;
+        })[0];
+        hotkeyOrigin.delete(el);
+        setTimeout(function() {
+          if (back && back.isConnected && (!document.activeElement || document.activeElement === document.body))
+            back.focus();
+        }, 0);
+      };
+    }, []);
     const t = props.toast, timer = React19.useRef(null), left = React19.useRef(t.duration || 5e3), since = React19.useRef(0);
-    const hover = React19.useRef(false);
+    const hover = React19.useRef(false), focused = React19.useRef(false);
+    function syncFocus() {
+      if (focused.current && !(node.current && node.current.contains(document.activeElement))) focused.current = false;
+    }
     function start() {
       if (left.current === Infinity || timer.current) return;
       since.current = Date.now();
@@ -3091,11 +3133,10 @@ window.Aura = (() => {
       }, left.current);
     }
     function resume() {
-      hover.current = false;
-      start();
+      syncFocus();
+      if (!hover.current && !focused.current) start();
     }
     function pause() {
-      hover.current = true;
       if (timer.current) {
         clearTimeout(timer.current);
         timer.current = null;
@@ -3107,23 +3148,56 @@ window.Aura = (() => {
         if (timer.current) clearTimeout(timer.current);
         timer.current = null;
         left.current = t.duration || 5e3;
-        if (!hover.current) start();
+        syncFocus();
+        if (!hover.current && !focused.current) start();
         return function() {
           if (timer.current) clearTimeout(timer.current);
         };
       },
       [t.rev]
     );
+    const rich = t.description != null && typeof t.description !== "boolean" && t.description !== "";
+    const actions = (t.actions && t.actions.length ? t.actions : t.action ? [t.action] : []).slice(0, 2);
+    function run(a) {
+      if (a.onClick) a.onClick();
+      if (a.dismiss !== false) toast.dismiss(t.id);
+    }
     return /* @__PURE__ */ React19.createElement(
       "div",
       {
-        className: cx("aura-toast", "aura-toast--" + t.tone, t.loading && "is-loading"),
+        ref: node,
+        onKeyDown: function(e) {
+          if (e.key === "Escape") {
+            e.stopPropagation();
+            toast.dismiss(t.id);
+          }
+        },
+        className: cx(
+          "aura-toast",
+          "aura-toast--" + t.tone,
+          t.loading && "is-loading",
+          /* Two actions, or one beside a description, go on their own row under the text so it keeps its width. */
+          (actions.length > 1 || actions.length && rich) && "has-action-row"
+        ),
         role: t.tone === "danger" ? "alert" : "status",
         "aria-busy": t.loading || void 0,
-        onMouseEnter: pause,
-        onMouseLeave: resume,
-        onFocus: pause,
-        onBlur: resume
+        onMouseEnter: function() {
+          hover.current = true;
+          pause();
+        },
+        onMouseLeave: function() {
+          hover.current = false;
+          resume();
+        },
+        onFocus: function() {
+          focused.current = true;
+          pause();
+        },
+        onBlur: function(e) {
+          if (node.current && e.relatedTarget && node.current.contains(e.relatedTarget)) return;
+          focused.current = false;
+          resume();
+        }
       },
       /* @__PURE__ */ React19.createElement(
         Icon,
@@ -3132,19 +3206,33 @@ window.Aura = (() => {
           className: cx("aura-toast__icon", t.loading && "aura-spin")
         }
       ),
-      /* @__PURE__ */ React19.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React19.createElement("p", { className: "aura-toast__title" }, t.title), t.description ? /* @__PURE__ */ React19.createElement("p", { className: "aura-toast__text" }, t.description) : null),
-      t.action ? /* @__PURE__ */ React19.createElement(
-        "button",
-        {
-          type: "button",
-          className: "aura-toast__action",
-          onClick: function() {
-            t.action.onClick && t.action.onClick();
-            toast.dismiss(t.id);
-          }
-        },
-        t.action.label
-      ) : null,
+      /* @__PURE__ */ React19.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React19.createElement("p", { className: "aura-toast__title" }, t.title), rich ? /* @__PURE__ */ React19.createElement("div", { className: "aura-toast__text" }, t.description) : null),
+      actions.length ? /* @__PURE__ */ React19.createElement("div", { className: "aura-toast__actions" }, actions.map(function(a, i) {
+        return a.href ? /* @__PURE__ */ React19.createElement(
+          Link,
+          {
+            key: i,
+            href: a.href,
+            className: "aura-toast__action",
+            onClick: function(e) {
+              if (plainClick(e)) run(a);
+              else if (a.onClick) a.onClick();
+            }
+          },
+          a.label
+        ) : /* @__PURE__ */ React19.createElement(
+          "button",
+          {
+            key: i,
+            type: "button",
+            className: "aura-toast__action",
+            onClick: function() {
+              run(a);
+            }
+          },
+          a.label
+        );
+      })) : null,
       /* @__PURE__ */ React19.createElement(
         IconButton,
         {
@@ -3158,7 +3246,22 @@ window.Aura = (() => {
       )
     );
   }
-  function Toaster(props) {
+  function hotkeyMatcher(spec) {
+    const parts = spec.split("+").map(function(p) {
+      return p.trim().toLowerCase();
+    });
+    const key = parts[parts.length - 1] || "";
+    const code = /^[a-z]$/.test(key) ? "Key" + key.toUpperCase() : /^[0-9]$/.test(key) ? "Digit" + key : null;
+    const want = function(m) {
+      return parts.indexOf(m) >= 0 && parts.indexOf(m) < parts.length - 1;
+    };
+    return function(e) {
+      if (e.altKey !== want("alt") || e.ctrlKey !== want("ctrl") || e.shiftKey !== want("shift") || e.metaKey !== (want("meta") || want("cmd")))
+        return false;
+      return code ? e.code === code : e.key.toLowerCase() === key;
+    };
+  }
+  function Toaster(props = {}) {
     const t = useStrings();
     const mounted = useMounted();
     const s = React19.useState(toastState.list);
@@ -3171,15 +3274,49 @@ window.Aura = (() => {
         });
       };
     }, []);
+    const region = React19.useRef(null);
+    const hotkey = props.hotkey === void 0 ? "Alt+T" : props.hotkey;
+    React19.useEffect(
+      function() {
+        if (!hotkey) return;
+        const match = hotkeyMatcher(hotkey);
+        function onKey(e) {
+          if (!e.key || e.repeat || e.isComposing || !match(e) || !region.current) return;
+          const el = e.target;
+          const editable = !!el && (el.isContentEditable || /^(INPUT|TEXTAREA)$/.test(el.tagName || ""));
+          const mac = /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent || "");
+          if (editable && mac && e.altKey && !e.ctrlKey && !e.metaKey && e.key.length === 1) return;
+          const items2 = region.current.querySelectorAll(".aura-toast");
+          const last = items2[items2.length - 1];
+          if (!last) return;
+          const target = last.querySelector(".aura-toast__action") || last.querySelector("button");
+          if (!target) return;
+          e.preventDefault();
+          const from = outsideToaster(document.activeElement);
+          if (from) hotkeyOrigin.set(last, from);
+          target.focus();
+        }
+        document.addEventListener("keydown", onKey);
+        return function() {
+          document.removeEventListener("keydown", onKey);
+        };
+      },
+      [hotkey]
+    );
     if (!mounted) return null;
+    const pos = props.position || "bottom";
+    const offset = props.offset;
     return (0, import_react_dom5.createPortal)(
       /* @__PURE__ */ React19.createElement(
         "div",
         {
-          className: cx("aura-toaster", props && props.position === "top" && "is-top"),
+          ref: region,
+          className: cx("aura-toaster", pos.indexOf("top") === 0 && "is-top", /center$/.test(pos) && "is-center"),
+          style: offset != null ? { "--aura-toaster-offset": typeof offset === "number" ? offset + "px" : offset } : void 0,
           role: "region",
           "aria-live": "polite",
-          "aria-label": t.notifications
+          "aria-label": hotkey ? t.notifications + " (" + hotkey + ")" : t.notifications,
+          "aria-keyshortcuts": hotkey || void 0
         },
         s[0].map(function(t2) {
           return /* @__PURE__ */ React19.createElement(ToastItem, { key: t2.id, toast: t2 });
@@ -3894,6 +4031,7 @@ window.Aura = (() => {
     function close() {
       if (props.dismissible !== false && props.onClose) props.onClose();
     }
+    const scrimCloses = props.dismissible !== false && (props.dismissOnScrim !== void 0 ? props.dismissOnScrim : props.role !== "alertdialog");
     const modal = useModal(props.open, own, {
       autoFocus: props.autoFocus,
       onEscape: close,
@@ -3902,7 +4040,17 @@ window.Aura = (() => {
     });
     if (!modal.ready) return null;
     return (0, import_react_dom8.createPortal)(
-      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React27.createElement(
+      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement(
+        "div",
+        {
+          className: "aura-scrim",
+          onClick: scrimCloses ? close : void 0,
+          onMouseDown: scrimCloses ? void 0 : function(e) {
+            e.preventDefault();
+          },
+          "aria-hidden": true
+        }
+      ), /* @__PURE__ */ React27.createElement(
         "div",
         {
           ref: merged,
@@ -3936,8 +4084,19 @@ window.Aura = (() => {
     });
     if (!modal.ready) return null;
     const side = props.side === "left" ? "left" : "right";
+    const drawerScrimCloses = props.dismissible !== false && props.dismissOnScrim !== false;
     return (0, import_react_dom8.createPortal)(
-      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React27.createElement(
+      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement(
+        "div",
+        {
+          className: "aura-scrim",
+          onClick: drawerScrimCloses ? close : void 0,
+          onMouseDown: !drawerScrimCloses ? function(e) {
+            e.preventDefault();
+          } : void 0,
+          "aria-hidden": true
+        }
+      ), /* @__PURE__ */ React27.createElement(
         "div",
         {
           ref: merged,
@@ -4007,7 +4166,27 @@ window.Aura = (() => {
     );
     const sort = sortState[0], setSort = sortState[1];
     const selState = useMaybeControlled(props.selected, props.defaultSelected || [], props.onSelectionChange);
-    const selected = selState[0], setSelected = selState[1];
+    const canSelect = function(r) {
+      return !!r && (!props.isRowSelectable || !!props.isRowSelectable(r));
+    };
+    const rejected = {};
+    if (props.isRowSelectable)
+      rows.forEach(function(r) {
+        if (!canSelect(r)) rejected[String(r[rowKey])] = true;
+      });
+    const selected = selState[0].filter(function(k) {
+      return !rejected[String(k)];
+    }), setSelected = selState[1];
+    const droppedSig = selState[0].length === selected.length ? "" : "#" + selState[0].filter(function(k) {
+      return rejected[String(k)];
+    }).join("\0") + "#" + selected.join("\0");
+    React28.useEffect(
+      function() {
+        if (droppedSig !== "") setSelected(selected);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [droppedSig]
+    );
     const pageState = useMaybeControlled(
       props.page,
       props.defaultPage || 1,
@@ -4418,7 +4597,7 @@ window.Aura = (() => {
         el.focus();
       }
     }
-    const pageKeys = pageRows.map(function(r) {
+    const pageKeys = pageRows.filter(canSelect).map(function(r) {
       return r[rowKey];
     });
     const selSet = {};
@@ -4682,10 +4861,12 @@ window.Aura = (() => {
         if (inner) inner.focus();
         else handled = false;
       } else if (k === " " || k === "Enter") {
-        if (r === 0 && !col && selectable && nRows) toggleAll();
-        else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
-        else if (r > 0 && k === " " && selectable) toggle(row[rowKey], !selSet[row[rowKey]]);
-        else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
+        if (r === 0 && !col && selectable && nRows) {
+          if (pageKeys.length) toggleAll();
+        } else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
+        else if (r > 0 && k === " " && selectable) {
+          if (canSelect(row)) toggle(row[rowKey], !selSet[row[rowKey]]);
+        } else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
           followRow(target.closest('[role="row"]'), e);
         else if (r > 0 && k === "Enter" && target.querySelector("button, a[href], input, select, textarea"))
           target.querySelector("button, a[href], input, select, textarea").focus();
@@ -4714,7 +4895,7 @@ window.Aura = (() => {
               activeState[1]({ r: 0, c: 0 });
             }
           },
-          nRows ? /* @__PURE__ */ React28.createElement(
+          pageKeys.length ? /* @__PURE__ */ React28.createElement(
             Checkbox,
             {
               hideLabel: true,
@@ -4725,7 +4906,7 @@ window.Aura = (() => {
               onChange: toggleAll
             }
           ) : null,
-          nRows ? /* @__PURE__ */ React28.createElement("span", { className: "aura-table__sel-text" }, nSel ? t.selectedCount(nSel) : t.selectAll) : /* @__PURE__ */ React28.createElement("span", { className: "aura-sr-only" }, t.selectRows)
+          pageKeys.length ? /* @__PURE__ */ React28.createElement("span", { className: "aura-table__sel-text" }, nSel ? t.selectedCount(nSel) : t.selectAll) : /* @__PURE__ */ React28.createElement("span", { className: "aura-sr-only" }, t.selectRows)
         )
       );
     vis.forEach(function(c, i) {
@@ -4863,12 +5044,12 @@ window.Aura = (() => {
               className: cx("aura-table__sel", nPinned && "is-pinned"),
               tabIndex: tabFor(ri, 0),
               "data-rc": ri + ":0",
-              "aria-label": t.selectRow(k),
+              "aria-label": canSelect(r) ? t.selectRow(k) : props.rowSelectDisabledLabel ? props.rowSelectDisabledLabel(r) : void 0,
               onFocus: function(e) {
                 if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
               }
             },
-            /* @__PURE__ */ React28.createElement(
+            canSelect(r) ? /* @__PURE__ */ React28.createElement(
               Checkbox,
               {
                 hideLabel: true,
@@ -4879,7 +5060,7 @@ window.Aura = (() => {
                   toggle(k, on);
                 }
               }
-            )
+            ) : null
           )
         );
       vis.forEach(function(c, j) {
@@ -4982,7 +5163,7 @@ window.Aura = (() => {
                 key: k,
                 role: "row",
                 "aria-rowindex": first + i + 2,
-                "aria-selected": selectable ? isSel : void 0,
+                "aria-selected": selectable && canSelect(r) ? isSel : void 0,
                 className: cx(
                   "aura-table__row",
                   isSel && "is-selected",
@@ -5584,7 +5765,10 @@ window.Aura = (() => {
     const items2 = props.items || [];
     return /* @__PURE__ */ React32.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React32.createElement("ol", null, items2.map(function(it, i) {
       const last = i === items2.length - 1;
-      return /* @__PURE__ */ React32.createElement("li", { key: i }, last ? /* @__PURE__ */ React32.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React32.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : /* @__PURE__ */ React32.createElement("button", { type: "button", onClick: it.onClick }, it.label), last ? null : /* @__PURE__ */ React32.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
+      return /* @__PURE__ */ React32.createElement("li", { key: i }, last ? /* @__PURE__ */ React32.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React32.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : it.onClick ? /* @__PURE__ */ React32.createElement("button", { type: "button", onClick: it.onClick }, it.label) : (
+        /* 5.7: a segment with no page and no action is text, not a button that does nothing. */
+        /* @__PURE__ */ React32.createElement("span", { className: "aura-crumbs__text" }, it.label)
+      ), last ? null : /* @__PURE__ */ React32.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
     })));
   });
 
@@ -5779,7 +5963,7 @@ window.Aura = (() => {
         },
         "aria-expanded": open
       }
-    ) : null, /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React38.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children), props.bottomNav || null));
+    ) : null, /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React38.createElement("main", { className: "aura-shell__content", id: props.mainId || "main", tabIndex: -1 }, props.children), props.bottomNav || null));
   });
 
   // src/ActionBar.tsx
@@ -5934,8 +6118,11 @@ window.Aura = (() => {
       /* @__PURE__ */ React42.createElement("ul", { className: "aura-bottomnav__list" }, props.items.map(function(it) {
         const on = active === it.id;
         const count = it.count != null && it.count > 0 ? it.count > 99 ? "99+" : String(it.count) : null;
+        const suffix = count || it.badge && it.badgeLabel ? " (" + (count || it.badgeLabel) + ")" : "";
         const common = {
           className: cx("aura-bottomnav__item", on && "is-active"),
+          /* 5.7: a full name when the label is shortened; the count / badge words still follow. */
+          "aria-label": it.ariaLabel ? it.ariaLabel + suffix : void 0,
           "aria-current": on ? "page" : void 0,
           onClick: function(e) {
             if (!it.href) e.preventDefault();
@@ -5946,7 +6133,7 @@ window.Aura = (() => {
         const inner = [
           /* @__PURE__ */ React42.createElement("span", { key: "i", className: "aura-bottomnav__icon" }, /* @__PURE__ */ React42.createElement(Icon, { name: it.icon, size: "md" }), count ? /* @__PURE__ */ React42.createElement("span", { className: "aura-bottomnav__count", "aria-hidden": "true" }, count) : it.badge ? /* @__PURE__ */ React42.createElement("span", { className: "aura-bottomnav__dot", "aria-hidden": "true" }) : null),
           /* @__PURE__ */ React42.createElement("span", { key: "l", className: "aura-bottomnav__label" }, it.label),
-          count || it.badge && it.badgeLabel ? /* @__PURE__ */ React42.createElement("span", { key: "s", className: "aura-sr-only" }, " (" + (count || it.badgeLabel) + ")") : null
+          suffix && !it.ariaLabel ? /* @__PURE__ */ React42.createElement("span", { key: "s", className: "aura-sr-only" }, suffix) : null
         ];
         return /* @__PURE__ */ React42.createElement("li", { key: it.id, className: "aura-bottomnav__cell" }, it.href ? /* @__PURE__ */ React42.createElement(Link, { href: it.href, ...common }, inner) : /* @__PURE__ */ React42.createElement("button", { type: "button", ...common }, inner));
       }))

package/components/aura.components.css

@@ -247,6 +247,12 @@ a.aura-menu__item { text-decoration: none; box-sizing: border-box; }
 }
 .aura-menu__radio.is-on { border-color: var(--aura-button-primary-bg); }
 .aura-menu__radio.is-on::after { content: ''; width: 8px; height: 8px; border-radius: var(--aura-radius-full); background: var(--aura-button-primary-bg); }
+/* 5.7: a header above the items (who is signed in), set off by a hairline like a separator. */
+.aura-menu__header { margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-1)) var(--aura-space-1); padding: var(--aura-space-3); border-bottom: 1px solid var(--aura-border-default); color: var(--aura-fg-secondary); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
+.aura-menu__header > * { margin: 0; }
+/* Stays in view when a long menu scrolls. */
+.aura-menu.has-header .aura-menu__header { position: sticky; top: calc(-1 * var(--aura-space-1)); z-index: 1; background: var(--aura-bg-surface); }
+.aura-menu__header strong, .aura-menu__header b { color: var(--aura-fg-primary); font-weight: 500; font-size: 13px; }
 .aura-menu__sep { height: 1px; margin: var(--aura-space-1) calc(-1 * var(--aura-space-1)); background: var(--aura-border-default); }
 
 /* Footer + pager */
@@ -496,7 +502,9 @@ a.aura-icon-btn { text-decoration: none; }
   display: flex; flex-direction: column; gap: var(--aura-space-2); width: min(380px, calc(100vw - 2 * var(--aura-space-4)));
   font-family: var(--font-sans);
 }
-.aura-toaster.is-top { bottom: auto; top: var(--aura-space-6); }
+.aura-toaster.is-top { bottom: auto; top: calc(var(--aura-toaster-offset, var(--aura-space-6)) + env(safe-area-inset-top, 0px)); }
+/* 5.6: top-center / bottom-center; `offset` (or --aura-toaster-offset) clears an app's top bar. */
+.aura-toaster.is-center { right: auto; left: 50%; transform: translateX(-50%); }
 .aura-toast {
   display: flex; align-items: flex-start; gap: var(--aura-space-3); padding: var(--aura-space-3) var(--aura-space-2) var(--aura-space-3) var(--aura-space-4);
   background: var(--aura-bg-surface); color: var(--aura-fg-primary);
@@ -511,10 +519,27 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-toast__body { flex: 1; min-width: 0; padding-top: 1px; }
 .aura-toast__title { margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; }
 .aura-toast__text { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-secondary); }
+.aura-toast__text > * { margin: 0; }
+.aura-toast__text a { color: var(--aura-fg-accent); text-underline-offset: 2px; }
+.aura-toast__text a:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-radius: var(--aura-radius-xs); }
+.aura-toast__actions { flex: none; align-self: center; display: flex; gap: var(--aura-space-1); }
+/* Two actions, or one under a description (5.6): the actions take a row of their own below the text, lined up with it
+ * (the action's own padding sits left of the text column), so the text keeps the toast's width. */
+.aura-toast.has-action-row { flex-wrap: wrap; row-gap: var(--aura-space-1); }
+.aura-toast.has-action-row .aura-toast__body { flex-basis: 0; }
+.aura-toast.has-action-row .aura-toast__actions { order: 3; flex-basis: 100%; flex-wrap: wrap; margin-left: calc(16px + var(--aura-space-3) - var(--aura-space-2)); margin-bottom: calc(-1 * var(--aura-space-1)); }
 .aura-toast__action {
   flex: none; align-self: center; height: var(--aura-control-sm); padding: 0 var(--aura-space-2);
   border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-accent);
   font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
+  display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap;
+}
+/* Touch (5.6): the 32px action gets a 44px hit area, as IconButton does. Links in the text only get a little padding —
+ * lines sit 20px apart, so a 44px box would overlap the next line's link. */
+@media (pointer: coarse) {
+  .aura-toast__action { position: relative; }
+  .aura-toast__action::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--aura-touch-target)); height: max(100%, var(--aura-touch-target)); transform: translate(-50%, -50%); }
+  .aura-toast__text a { padding-block: 2px; }
 }
 .aura-toast__action:hover { background: var(--aura-bg-surface-hover); }
 .aura-toast__action:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
@@ -625,6 +650,8 @@ a.aura-tab { text-decoration: none; }
 .aura-nav__item.is-active { background: var(--aura-bg-selected); color: var(--aura-fg-primary); }
 .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
 .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
+/* Touch (5.7): rows are 44px on coarse pointers (AppShell's phone drawer); desktop keeps 36px. */
+@media (pointer: coarse) { .aura-nav__item { height: auto; min-height: var(--aura-touch-target); } }
 .aura-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .aura-nav__count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--aura-fg-secondary); }
 .aura-nav__badge { display: inline-flex; align-items: center; flex: none; }
@@ -670,6 +697,8 @@ a.aura-tab { text-decoration: none; }
 .aura-crumbs a:hover, .aura-crumbs button:hover { color: var(--aura-fg-primary); text-decoration: underline; text-underline-offset: 3px; }
 .aura-crumbs a:focus-visible, .aura-crumbs button:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
 .aura-crumbs__current { color: var(--aura-fg-primary); font-weight: 500; }
+/* 5.7: a segment with no page of its own — the links' colour, not interactive. */
+.aura-crumbs__text { color: var(--aura-fg-secondary); }
 .aura-crumbs__sep { color: var(--aura-fg-tertiary); }
 
 /* ---------- Avatar ---------- */
@@ -865,6 +894,8 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-shell__bar-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--aura-space-3); }
 .aura-shell__content { flex: 1; min-width: 0; padding: var(--aura-space-6) var(--aura-space-4); }
+/* 5.7: <main> takes focus (tabIndex -1) for skip links and "the row you acted on is gone"; a landmark gets no ring. */
+.aura-shell__content:focus { outline: none; }
 @media (min-width: 640px) { .aura-shell__content { padding: var(--aura-space-6); } }
 @media (min-width: 1024px) { .aura-shell__content { padding: var(--aura-space-8); } }
 /* The shell already pads its content: a Container directly inside only caps the width. */
@@ -1203,6 +1234,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-dialog__foot > * { width: 100%; }
   .aura-drawer:not(.aura-drawer--nav) { max-width: none; }
   .aura-toaster { left: var(--aura-space-4); right: var(--aura-space-4); bottom: var(--aura-space-4); width: auto; }
+  .aura-toaster.is-center { left: var(--aura-space-4); right: var(--aura-space-4); transform: none; }
+  .aura-toaster.is-top { top: calc(var(--aura-toaster-offset, var(--aura-space-4)) + env(safe-area-inset-top, 0px)); }
   .aura-card { padding: var(--aura-space-4); }
   .aura-stat { padding: var(--aura-space-4); }
   .aura-stat__value { font-size: 24px; }
@@ -1385,9 +1418,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @media (max-width: 767.98px) { :root:has(.aura-bottomnav--below-md) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
 @media (max-width: 1023.98px) { :root:has(.aura-bottomnav--below-lg) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
 @media (max-width: 1279.98px) { :root:has(.aura-bottomnav--below-xl) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
-/* Toasts clear a BottomNav wherever it shows (phones and tablets). */
-.aura-toaster:not(.is-top) { bottom: calc(var(--aura-space-6) + var(--aura-bottomnav-offset, 0px)); }
-@media (max-width: 639.98px) { .aura-toaster:not(.is-top) { bottom: calc(var(--aura-space-4) + var(--aura-bottomnav-offset, 0px)); } }
+/* Toasts clear a BottomNav wherever it shows (phones and tablets), else the bottom safe-area inset (5.6). */
+.aura-toaster:not(.is-top) { bottom: calc(var(--aura-toaster-offset, var(--aura-space-6)) + var(--aura-bottomnav-offset, env(safe-area-inset-bottom, 0px))); }
+@media (max-width: 639.98px) { .aura-toaster:not(.is-top) { bottom: calc(var(--aura-toaster-offset, var(--aura-space-4)) + var(--aura-bottomnav-offset, env(safe-area-inset-bottom, 0px))); } }
 
 /* ---------- 4.19: ActionBar ---------- */
 /* Sticky, not fixed: it keeps its place at the end of its parent, so it never covers the last field. */

package/components/index.d.ts

@@ -124,6 +124,11 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onSortChange?: ((sort: DataTableSort | null) => void) | undefined;
 	/** Adds a checkbox column. */
 	selectable?: boolean | undefined;
+	/** Which rows can be selected (5.6). A row it rejects shows no checkbox (the cell stays, so columns line up), is
+	 * skipped by select-all, Space and the count, and never appears in `onSelectionChange` — even if passed in. */
+	isRowSelectable?: RowCallback<boolean, Row> | undefined;
+	/** Accessible name for a rejected row's empty cell, e.g. `(r) => 'Not awaiting review'` (5.6). */
+	rowSelectDisabledLabel?: RowCallback<string, Row> | undefined;
 	/** Controlled selection (row keys); pair with onSelectionChange. */
 	selected?: Array<string | number> | undefined;
 	/** Initial selection when uncontrolled. */
@@ -305,6 +310,9 @@ export interface MenuProps {
 	autoFocus?: boolean | undefined;
 	/** Router link for items with `href`; defaults to AuraProvider's `linkComponent`, then `<a>`. (4.19) */
 	linkComponent?: React$1.ElementType | undefined;
+	/** Content above the items (5.7), e.g. who is signed in. Not an item: arrow keys skip it; it is the menu's
+	 * accessible description, read once when the menu opens. */
+	header?: React$1.ReactNode | undefined;
 }
 export interface FieldProps {
 	/** Visible label; also the accessible name. */
@@ -487,14 +495,23 @@ export interface AlertProps {
 	onDismiss?: (() => void) | undefined;
 	className?: string | undefined;
 }
+/** A button (or, with `href`, a link through AuraProvider's `linkComponent`) on a toast (5.6: `href`, `dismiss`). */
+export interface ToastAction {
+	label: string;
+	onClick?: (() => void) | undefined;
+	/** Makes the action a link (routes through `linkComponent`, so `next/link` navigates client-side). */
+	href?: string | undefined;
+	/** Default true: the toast closes when the action runs. `false` keeps it (a list of items to work through). */
+	dismiss?: boolean | undefined;
+}
 export interface ToastOptions {
 	title: string;
-	description?: string | undefined;
+	/** Text, or (5.6) rich content — lines with their own links, read once inside the toast's live region. */
+	description?: React$1.ReactNode | undefined;
 	tone?: FeedbackTone | undefined;
-	action?: {
-		label: string;
-		onClick?: (() => void) | undefined;
-	} | undefined;
+	action?: ToastAction | undefined;
+	/** Up to two actions in a row (5.6); used instead of `action` when given. */
+	actions?: ToastAction[] | undefined;
 	/** ms before it closes itself. Default 5000; Infinity keeps it until dismissed. */
 	duration?: number | undefined;
 	/** Reuse an id to replace a toast in place (same position, timer restarts) — never a second toast. */
@@ -533,6 +550,9 @@ export interface DialogProps {
 	size?: "sm" | "md" | "lg" | undefined;
 	/** Default true. False hides the close button and ignores Escape and scrim clicks. */
 	dismissible?: boolean | undefined;
+	/** Whether a click on the scrim closes it (5.7). Default true, false for `role="alertdialog"`: a stray click
+	 * outside shouldn't throw away a typed reason. Escape and the close button still close it. */
+	dismissOnScrim?: boolean | undefined;
 	/** Use `alertdialog` for destructive confirmations. */
 	role?: "dialog" | "alertdialog" | undefined;
 	/** Default true. Turn off only for static demos. */
@@ -624,6 +644,7 @@ export interface SideNavProps {
 }
 export interface BreadcrumbProps {
 	/** Root first; the last item is the current page. */
+	/** An item with neither `href` nor `onClick` is plain text (5.7), for a segment with no page of its own. */
 	items: Array<{
 		label: string;
 		href?: string | undefined;
@@ -651,6 +672,9 @@ export interface DropdownMenuProps {
 	label?: string | undefined;
 	/** Router link for items with `href`. (4.19) */
 	linkComponent?: React$1.ElementType | undefined;
+	/** Content above the items (5.7), e.g. name, email and role in an account menu. Not an item: arrow keys skip
+	 * it; it is the menu's accessible description (`aria-describedby`). */
+	header?: React$1.ReactNode | undefined;
 }
 export interface ComboboxOption {
 	value: string;
@@ -851,6 +875,8 @@ export interface DrawerProps {
 	footer?: React$1.ReactNode | undefined;
 	/** Scrim click and Escape close it. Default true. */
 	dismissible?: boolean | undefined;
+	/** Whether a click on the scrim closes it (5.7). Default true; Escape and the close button still close it. */
+	dismissOnScrim?: boolean | undefined;
 	/** Default true: focus moves to the element with `data-autofocus`, else the first control in the body. False only for static demos. */
 	autoFocus?: boolean | undefined;
 	/** Needed when there is no title. */
@@ -891,7 +917,8 @@ export interface AppShellProps {
 	children?: React$1.ReactNode | undefined;
 	navLabel?: string | undefined;
 	menuLabel?: string | undefined;
-	/** id of `<main>`, for a skip link. Default `main`. */
+	/** id of `<main>`, for a skip link. Default `main`. `<main>` has `tabIndex={-1}` (5.7), so a skip link or
+	 * `document.getElementById(mainId).focus()` moves focus there (no ring is drawn on it). */
 	mainId?: string | undefined;
 	/** A BottomNav for phones (4.19). Shown below its `hideFrom` breakpoint; the content keeps room for it, and a
 	 * viewport ActionBar sits on top of it. With a `bottomNav` and no `nav`, there is no menu button. */
@@ -965,6 +992,9 @@ export interface BottomNavItem {
 	badge?: boolean | undefined;
 	/** Read after the label when `badge` is set, e.g. "new". */
 	badgeLabel?: string | undefined;
+	/** The full name for screen readers when `label` is shortened to fit (5.7), e.g. label "Konto", ariaLabel
+	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3). The count or badge is still appended. */
+	ariaLabel?: string | undefined;
 }
 export interface BottomNavProps {
 	/** 2–5 items. */
@@ -1285,10 +1315,18 @@ export declare namespace toast {
 	var dismiss: (id: string) => void;
 }
 export interface ToasterProps {
-	/** Default `bottom`. */
-	position?: "bottom" | "top" | undefined;
-}
-export declare function Toaster(props: ToasterProps): React$1.ReactElement | null;
+	/** Default `bottom` (bottom right). `top` is top right; `top-center` / `bottom-center` centre the stack (5.6).
+	 * Below 640px toasts span the width either way. */
+	position?: "bottom" | "bottom-right" | "bottom-center" | "top" | "top-right" | "top-center" | undefined;
+	/** Distance from the top or bottom edge (5.6), e.g. `64` to clear a 56px top bar; px or any CSS length. Sets
+	 * `--aura-toaster-offset`; the safe-area inset is added on top. Default 24px (16px below 640px). */
+	offset?: number | string | undefined;
+	/** Keyboard shortcut to the newest toast (5.6): focuses its action, else its close button, and pauses its timer;
+	 * Escape closes it and returns focus. Default `"Alt+T"` (matched on the physical key, so macOS Option+T works);
+	 * `false` turns it off. */
+	hotkey?: string | false | undefined;
+}
+export declare function Toaster(props?: ToasterProps): React$1.ReactElement | null;
 export declare const PasswordField: React$1.ForwardRefExoticComponent<PasswordFieldProps & React$1.RefAttributes<HTMLInputElement>>;
 export declare const FormErrorSummary: React$1.ForwardRefExoticComponent<FormErrorSummaryProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const FilterBar: React$1.ForwardRefExoticComponent<FilterBarProps & React$1.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-tokens",
-  "version": "5.5.0",
+  "version": "5.7.0",
   "description": "AURA Design System — tokens (CSS variables, Tailwind preset, Figma variables), theme contrast checks and token lint.",
   "main": "tailwind.tokens.cjs",
   "types": "components/index.d.ts",

package/tokens.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.5.0",
+  "version": "5.7.0",
   "meta": {
     "name": "AURA Design System",
     "tier": "3-tier",