@jirawatpyk/aura-react 5.6.0 → 5.7.1

package/README.md

@@ -186,6 +186,19 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.7.1 — SideNav labels wrap
+
+- **SideNav** (item 63): a long label wraps to a second line instead of ending in an ellipsis, so Thai and Swedish names read in full in the 240px nav and the phone drawer. One-line rows stay 36px (44px on touch); a two-line row grows to 44px with its icon centred. Past two lines the label clamps; the accessible name is always complete. The collapsed rail is unchanged.
+
+## 5.7 — Chamber-OS addendum 5 (shell details)
+
+- **DropdownMenu `header`**: content above the items, e.g. name, email and role in an account menu. It sits outside `role="menu"` (arrow keys, Home/End skip it; clicking it keeps focus on the item) and is the menu's accessible description (`aria-describedby`). Screen readers differ in whether they speak a menu's description on open; keep the essentials (who is signed in) in the trigger's name too if they must be heard. With a header, the menu's `ref` and `.aura-menu` are the outer box and `role="menu"` is `.aura-menu__list` inside it.
+- **Breadcrumb**: an item with neither `href` nor `onClick` is plain text (`.aura-crumbs__text`), not a button that does nothing.
+- **AppShell** `<main>` has `tabIndex={-1}`, so a skip link or `document.getElementById(mainId)?.focus({ preventScroll: true })` moves focus there when the row you acted on leaves the list. No ring is drawn on the landmark.
+- **Dialog / Drawer `dismissOnScrim`**: `false` keeps it open on a scrim click; Escape and the close button still close it, and focus stays inside. **`role="alertdialog"` now defaults to `false`**, so a stray click outside a confirmation doesn't throw away a typed reason; pass `dismissOnScrim` to get the old behaviour.
+- **BottomNav item `ariaLabel`**: the full name when the visible label is shortened (`label="Konto"`, `ariaLabel="Mitt konto"`); the count or badge words still follow. Include the visible text in it (WCAG 2.5.3).
+- **SideNav** rows are 44px on touch screens (AppShell's phone drawer); 36px with a mouse.
+
 ## 5.6 — Chamber-OS addendum 4 (selectable rows, richer toasts)
 
 - **DataTable** `isRowSelectable={(r) => r.status === 'Awaiting review'}`: a row it rejects shows no checkbox (the cell stays, so columns line up), and select-all, Space, the "N selected" count and `onSelectionChange` skip it. A rejected key passed in through `selected` is never shown as selected and is dropped from your state with one `onSelectionChange` call. `rowSelectDisabledLabel={(r) => …}` names the empty cell for screen readers. Server HTML has no checkbox for those rows.

package/dist/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();
@@ -4014,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,
@@ -4022,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,
@@ -4056,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,
@@ -5726,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" }));
     })));
   });
 
@@ -5921,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
@@ -6076,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();
@@ -6088,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/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();
@@ -3996,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,
@@ -4004,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,
@@ -4038,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,
@@ -5708,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" }));
   })));
 });
 
@@ -5903,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
@@ -6058,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();
@@ -6070,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 {

package/dist/esm/Dialog.js

@@ -12,6 +12,7 @@ const Dialog = React.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,
@@ -20,7 +21,17 @@ const Dialog = React.forwardRef(function Dialog2(props, ref) {
   });
   if (!modal.ready) return null;
   return createPortal(
-    /* @__PURE__ */ React.createElement("div", { className: "aura-dialog-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "aura-dialog-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "aura-scrim",
+        onClick: scrimCloses ? close : void 0,
+        onMouseDown: scrimCloses ? void 0 : function(e) {
+          e.preventDefault();
+        },
+        "aria-hidden": true
+      }
+    ), /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: merged,
@@ -54,8 +65,19 @@ const Drawer = React.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 createPortal(
-    /* @__PURE__ */ React.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "aura-scrim",
+        onClick: drawerScrimCloses ? close : void 0,
+        onMouseDown: !drawerScrimCloses ? function(e) {
+          e.preventDefault();
+        } : void 0,
+        "aria-hidden": true
+      }
+    ), /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: merged,

package/dist/esm/DropdownMenu.js

@@ -36,6 +36,7 @@ const DropdownMenu = React.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();

package/dist/esm/Menu.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { createPortal } from "react-dom";
-import { cx, useIsoLayoutEffect, useMounted, useMergedRef } from "./internal.js";
+import { cx, uid, useIsoLayoutEffect, useMounted, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
 import { useLinkComponent } from "./locale.js";
 const Menu = React.forwardRef(function Menu2(props, ref) {
@@ -10,6 +10,8 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
   const pos = posState[0], setPos = posState[1];
   const items = 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() {
@@ -27,7 +29,20 @@ const Menu = React.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 = React.useRef(hasHeader);
+  React.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]
   );
   React.useEffect(
     function() {
@@ -53,22 +68,22 @@ const Menu = React.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();
@@ -80,9 +95,9 @@ const Menu = React.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 });
@@ -137,27 +152,28 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
       body
     );
   }
-  const el = /* @__PURE__ */ React.createElement(
+  const style = {
+    top: pos ? pos.top : -9999,
+    left: pos ? pos.left : -9999,
+    maxHeight: pos && pos.maxHeight ? pos.maxHeight : void 0
+  };
+  const list = groupItems(items).map(function(block, bi) {
+    const rendered = block.items.map(function(x) {
+      return renderItem(x.it, x.i);
+    });
+    return block.group ? /* @__PURE__ */ React.createElement("div", { key: "g" + bi, role: "group", "aria-label": block.group, className: "aura-menu__group" }, rendered) : /* @__PURE__ */ React.createElement(React.Fragment, { key: "f" + bi }, rendered);
+  });
+  const el = hasHeader ? /* @__PURE__ */ React.createElement("div", { ref: merged, className: "aura-menu has-header", onKeyDown, style }, /* @__PURE__ */ React.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(items).map(function(block, bi) {
-      const rendered = block.items.map(function(x) {
-        return renderItem(x.it, x.i);
-      });
-      return block.group ? /* @__PURE__ */ React.createElement("div", { key: "g" + bi, role: "group", "aria-label": block.group, className: "aura-menu__group" }, rendered) : /* @__PURE__ */ React.createElement(React.Fragment, { key: "f" + bi }, rendered);
-    })
-  );
+    props.header
+  ), /* @__PURE__ */ React.createElement("div", { role: "menu", "aria-label": props.label, "aria-describedby": headerId, className: "aura-menu__list" }, list)) : /* @__PURE__ */ React.createElement("div", { ref: merged, role: "menu", "aria-label": props.label, className: "aura-menu", onKeyDown, style }, list);
   return mounted ? createPortal(el, document.body) : null;
 });
 export {

package/dist/index.d.cts

@@ -310,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. */
@@ -547,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. */
@@ -638,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;
@@ -665,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;
@@ -865,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. */
@@ -905,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. */
@@ -979,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. */

package/dist/index.d.ts

@@ -310,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. */
@@ -547,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. */
@@ -638,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;
@@ -665,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;
@@ -865,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. */
@@ -905,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. */
@@ -979,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. */

package/dist/styles.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 */
@@ -635,7 +641,7 @@ a.aura-tab { text-decoration: none; }
 .aura-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
 .aura-nav__item {
   box-sizing: border-box; display: flex; align-items: center; gap: var(--aura-space-3); width: 100%;
-  height: 36px; padding: 0 var(--aura-space-3); border: 0; border-radius: var(--aura-radius-sm);
+  min-height: 36px; padding: var(--aura-space-1) var(--aura-space-3); border: 0; border-radius: var(--aura-radius-sm);
   background: transparent; color: var(--aura-fg-secondary); font: inherit; font-size: 13px; font-weight: 500;
   text-decoration: none; text-align: left; cursor: pointer;
   transition: background var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
@@ -644,7 +650,14 @@ 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; }
-.aura-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Touch (5.7): rows are 44px on coarse pointers (AppShell's phone drawer); desktop keeps 36px. */
+@media (pointer: coarse) { .aura-nav__item { min-height: var(--aura-touch-target); } }
+/* 5.7.1: a long label wraps to a second line (the row grows; one-line rows stay 36px) instead of an ellipsis with no
+ * way to read the rest — Thai and Swedish names in a 240px nav or the phone drawer. Beyond two lines it clamps. */
+.aura-nav__label {
+  flex: 1; min-width: 0; line-height: 18px; overflow: hidden; overflow-wrap: anywhere;
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
+}
 .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; }
 /* Groups: a disclosure button, its items indented one step per level. */
@@ -689,6 +702,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 ---------- */
@@ -884,6 +899,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. */

package/dist/styles.layer.css

@@ -249,6 +249,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 */
@@ -637,7 +643,7 @@ a.aura-tab { text-decoration: none; }
 .aura-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
 .aura-nav__item {
   box-sizing: border-box; display: flex; align-items: center; gap: var(--aura-space-3); width: 100%;
-  height: 36px; padding: 0 var(--aura-space-3); border: 0; border-radius: var(--aura-radius-sm);
+  min-height: 36px; padding: var(--aura-space-1) var(--aura-space-3); border: 0; border-radius: var(--aura-radius-sm);
   background: transparent; color: var(--aura-fg-secondary); font: inherit; font-size: 13px; font-weight: 500;
   text-decoration: none; text-align: left; cursor: pointer;
   transition: background var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
@@ -646,7 +652,14 @@ 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; }
-.aura-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Touch (5.7): rows are 44px on coarse pointers (AppShell's phone drawer); desktop keeps 36px. */
+@media (pointer: coarse) { .aura-nav__item { min-height: var(--aura-touch-target); } }
+/* 5.7.1: a long label wraps to a second line (the row grows; one-line rows stay 36px) instead of an ellipsis with no
+ * way to read the rest — Thai and Swedish names in a 240px nav or the phone drawer. Beyond two lines it clamps. */
+.aura-nav__label {
+  flex: 1; min-width: 0; line-height: 18px; overflow: hidden; overflow-wrap: anywhere;
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
+}
 .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; }
 /* Groups: a disclosure button, its items indented one step per level. */
@@ -691,6 +704,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 ---------- */
@@ -886,6 +901,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. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.6.0",
+  "version": "5.7.1",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",