@jirawatpyk/aura-react 5.5.0 → 5.7.0

package/dist/cjs/index.cjs

@@ -810,6 +810,8 @@ var Menu = React6.forwardRef(function Menu2(props, ref) {
   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() {
@@ -827,7 +829,20 @@ var Menu = React6.forwardRef(function Menu2(props, ref) {
       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() {
@@ -853,22 +868,22 @@ var Menu = React6.forwardRef(function Menu2(props, ref) {
     [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();
@@ -880,9 +895,9 @@ var Menu = React6.forwardRef(function Menu2(props, ref) {
     }
     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 });
@@ -937,27 +952,28 @@ var Menu = React6.forwardRef(function Menu2(props, ref) {
       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;
 });
 
@@ -997,6 +1013,7 @@ var DropdownMenu = React7.forwardRef(function DropdownMenu2(props, ref) {
       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();
@@ -3061,10 +3078,35 @@ toast.dismiss = function(id) {
   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();
@@ -3073,11 +3115,10 @@ function ToastItem(props) {
     }, 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;
@@ -3089,23 +3130,56 @@ function ToastItem(props) {
       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,
@@ -3114,19 +3188,33 @@ function ToastItem(props) {
         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,
       {
@@ -3140,7 +3228,22 @@ function ToastItem(props) {
     )
   );
 }
-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);
@@ -3153,15 +3256,49 @@ function Toaster(props) {
       });
     };
   }, []);
+  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 });
@@ -3876,6 +4013,7 @@ var Dialog = React27.forwardRef(function Dialog2(props, ref) {
   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,
@@ -3884,7 +4022,17 @@ var Dialog = React27.forwardRef(function Dialog2(props, ref) {
   });
   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,
@@ -3918,8 +4066,19 @@ var Drawer = React27.forwardRef(function Drawer2(props, ref) {
   });
   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,
@@ -3989,7 +4148,27 @@ var DataTableImpl = React28.forwardRef(function DataTable(props, ref) {
   );
   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,
@@ -4400,7 +4579,7 @@ var DataTableImpl = React28.forwardRef(function DataTable(props, ref) {
       el.focus();
     }
   }
-  const pageKeys = pageRows.map(function(r) {
+  const pageKeys = pageRows.filter(canSelect).map(function(r) {
     return r[rowKey];
   });
   const selSet = {};
@@ -4664,10 +4843,12 @@ var DataTableImpl = React28.forwardRef(function DataTable(props, ref) {
       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();
@@ -4696,7 +4877,7 @@ var DataTableImpl = React28.forwardRef(function DataTable(props, ref) {
             activeState[1]({ r: 0, c: 0 });
           }
         },
-        nRows ? /* @__PURE__ */ React28.createElement(
+        pageKeys.length ? /* @__PURE__ */ React28.createElement(
           Checkbox,
           {
             hideLabel: true,
@@ -4707,7 +4888,7 @@ var DataTableImpl = React28.forwardRef(function DataTable(props, ref) {
             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) {
@@ -4845,12 +5026,12 @@ var DataTableImpl = React28.forwardRef(function DataTable(props, ref) {
             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,
@@ -4861,7 +5042,7 @@ var DataTableImpl = React28.forwardRef(function DataTable(props, ref) {
                 toggle(k, on);
               }
             }
-          )
+          ) : null
         )
       );
     vis.forEach(function(c, j) {
@@ -4964,7 +5145,7 @@ var DataTableImpl = React28.forwardRef(function DataTable(props, ref) {
               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",
@@ -5566,7 +5747,10 @@ var Breadcrumb = React32.forwardRef(function Breadcrumb2(props, ref) {
   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" }));
   })));
 });
 
@@ -5761,7 +5945,7 @@ var AppShell = React38.forwardRef(function AppShell2(props, ref) {
       },
       "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
@@ -5916,8 +6100,11 @@ var BottomNav = React42.forwardRef(function BottomNav2(props, ref) {
     /* @__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();
@@ -5928,7 +6115,7 @@ var BottomNav = React42.forwardRef(function BottomNav2(props, ref) {
       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/dist/esm/AppShell.js

@@ -59,7 +59,7 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
       },
       "aria-expanded": open
     }
-  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children), props.bottomNav || null));
+  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React.createElement("main", { className: "aura-shell__content", id: props.mainId || "main", tabIndex: -1 }, props.children), props.bottomNav || null));
 });
 export {
   AppShell

package/dist/esm/BottomNav.js

@@ -23,8 +23,11 @@ const BottomNav = React.forwardRef(function BottomNav2(props, ref) {
     /* @__PURE__ */ React.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();
@@ -35,7 +38,7 @@ const BottomNav = React.forwardRef(function BottomNav2(props, ref) {
       const inner = [
         /* @__PURE__ */ React.createElement("span", { key: "i", className: "aura-bottomnav__icon" }, /* @__PURE__ */ React.createElement(Icon, { name: it.icon, size: "md" }), count ? /* @__PURE__ */ React.createElement("span", { className: "aura-bottomnav__count", "aria-hidden": "true" }, count) : it.badge ? /* @__PURE__ */ React.createElement("span", { className: "aura-bottomnav__dot", "aria-hidden": "true" }) : null),
         /* @__PURE__ */ React.createElement("span", { key: "l", className: "aura-bottomnav__label" }, it.label),
-        count || it.badge && it.badgeLabel ? /* @__PURE__ */ React.createElement("span", { key: "s", className: "aura-sr-only" }, " (" + (count || it.badgeLabel) + ")") : null
+        suffix && !it.ariaLabel ? /* @__PURE__ */ React.createElement("span", { key: "s", className: "aura-sr-only" }, suffix) : null
       ];
       return /* @__PURE__ */ React.createElement("li", { key: it.id, className: "aura-bottomnav__cell" }, it.href ? /* @__PURE__ */ React.createElement(Link, { href: it.href, ...common }, inner) : /* @__PURE__ */ React.createElement("button", { type: "button", ...common }, inner));
     }))

package/dist/esm/Breadcrumb.js

@@ -9,7 +9,10 @@ const Breadcrumb = React.forwardRef(function Breadcrumb2(props, ref) {
   const items = props.items || [];
   return /* @__PURE__ */ React.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React.createElement("ol", null, items.map(function(it, i) {
     const last = i === items.length - 1;
-    return /* @__PURE__ */ React.createElement("li", { key: i }, last ? /* @__PURE__ */ React.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : /* @__PURE__ */ React.createElement("button", { type: "button", onClick: it.onClick }, it.label), last ? null : /* @__PURE__ */ React.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
+    return /* @__PURE__ */ React.createElement("li", { key: i }, last ? /* @__PURE__ */ React.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React.createElement(Link, { href: it.href, onClick: it.onClick }, it.label) : it.onClick ? /* @__PURE__ */ React.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__ */ React.createElement("span", { className: "aura-crumbs__text" }, it.label)
+    ), last ? null : /* @__PURE__ */ React.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
   })));
 });
 export {