@jirawatpyk/aura-react 5.9.0 → 5.10.0

package/README.md

@@ -186,6 +186,15 @@ 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.10 — Chamber-OS addendum 10 (adopting 5.9)
+
+- **Tabs `variant="segmented"`** (item 72): the tab list as a pill track with the selected tab raised — SegmentedControl's look — keeping every Tabs behaviour (tab / tabpanel roles, `keepMounted`, `activation`, `tabProps`). `fullWidth` stretches the track and shares it equally. Tabs are 44px on touch screens, the list doesn't scroll so the focus ring is never clipped, and in forced colours the selected tab gets a `Highlight` outline. Default (`underline`) output is unchanged.
+  ```tsx
+  <Tabs label="Payment method" variant="segmented" fullWidth keepMounted activation="manual" … />
+  ```
+- **Disabled menu items stay reachable** (item 73): a disabled `MenuItem` is `aria-disabled` rather than a disabled button, so the arrow keys reach it and screen readers announce it as dimmed (WAI-ARIA APG); choosing it does nothing and keeps the menu open. `disabledReason` shows in place of the hint and is read with the item ("Again in 5 min"). A menu with nothing to focus takes focus itself, so Escape and Tab still close it and focus returns to the trigger. Enabled items are unchanged; tests that expected the arrows to skip a disabled item now land on it.
+- **SegmentedControl boundary** (item 74): measured again — the selected pill's inset edge (`aura-border-control`, zinc-500) is 4.6:1 against the light track (zinc-50) and 5.8:1 in dark; CI now measures the rendered edge in both themes (≥3:1). A value near 2.5:1 is zinc-400, dark mode's `aura-border-control`: check that the light page isn't picking up the dark tokens (a `.dark` / `data-theme="dark"` ancestor, or a theme override).
+
 ## 5.9 — Chamber-OS addendum 9 (pay sheet)
 
 - **Drawer** (item 70): other attributes (`id`, `data-*`, `aria-*`) go on the `.aura-drawer` panel; `closeLabel` names the close button and its tooltip after what it closes ("Close payment drawer" — pass it in the page's language); `closeProps` puts attributes on that button (`{ 'data-testid': 'pay-sheet-close' }`; its `onClick` runs first and can `preventDefault()` to keep the drawer open). Without them the output is as before; focus trap, Escape, scrim and focus return are unchanged.

package/dist/aura.bundle.js

@@ -1233,13 +1233,14 @@ window.Aura = (() => {
   // src/Menu.tsx
   var React8 = __toESM(require_react(), 1);
   var import_react_dom = __toESM(require_react_dom(), 1);
+  var ITEMS = '[role^="menuitem"]';
   var Menu = React8.forwardRef(function Menu2(props, ref) {
     const own = React8.useRef(null), merged = useMergedRef(ref, own);
     const posState = React8.useState(null);
     const pos = posState[0], setPos = posState[1];
     const items2 = props.items || [];
     const mounted = useMounted();
-    const headerId = uid();
+    const headerId = uid(), itemId = uid();
     const hasHeader = props.header != null && props.header !== false && props.header !== "";
     const Link = useLinkComponent(props.linkComponent);
     useIsoLayoutEffect(
@@ -1267,8 +1268,8 @@ window.Aura = (() => {
         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();
+          const first = own.current.querySelector(ITEMS);
+          (first || own.current.querySelector('[role="menu"]') || own.current).focus();
         }
       },
       [hasHeader]
@@ -1276,8 +1277,11 @@ window.Aura = (() => {
     React8.useEffect(
       function() {
         if (!mounted) return;
-        const first = own.current && own.current.querySelector('[role^="menuitem"]:not([disabled])');
-        if (first && props.autoFocus !== false) first.focus();
+        const first = own.current && own.current.querySelector(ITEMS);
+        if (props.autoFocus !== false) {
+          if (first) first.focus();
+          else if (own.current) (own.current.querySelector('[role="menu"]') || own.current).focus();
+        }
         function outside(e) {
           if (own.current && !own.current.contains(e.target) && !(props.anchor && props.anchor.contains(e.target)))
             props.onClose(false);
@@ -1297,16 +1301,18 @@ window.Aura = (() => {
       [mounted]
     );
     function onKeyDown(e) {
-      const list2 = Array.prototype.slice.call(
-        own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
-      );
+      const list2 = Array.prototype.slice.call(own.current.querySelectorAll(ITEMS));
       const i = list2.indexOf(document.activeElement);
+      if (!list2.length && e.key !== "Escape" && e.key !== "Tab") {
+        e.stopPropagation();
+        return;
+      }
       if (e.key === "ArrowDown") {
         e.preventDefault();
         list2[(i + 1) % list2.length].focus();
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        list2[(i - 1 + list2.length) % list2.length].focus();
+        list2[i < 0 ? list2.length - 1 : (i - 1 + list2.length) % list2.length].focus();
       } else if (e.key === "Home") {
         e.preventDefault();
         list2[0].focus();
@@ -1345,6 +1351,10 @@ window.Aura = (() => {
         it.hint ? /* @__PURE__ */ React8.createElement("span", { key: "h", className: "aura-menu__hint" }, it.hint) : null
       ];
       const cls = cx("aura-menu__item", it.tone === "danger" && "aura-menu__item--danger");
+      const reasonId = it.disabled && it.disabledReason ? itemId + "-r" + i : void 0;
+      if (reasonId)
+        body[2] = /* Hidden from the name (it would be read twice); aria-describedby still reads it. */
+        /* @__PURE__ */ React8.createElement("span", { key: "h", id: reasonId, className: "aura-menu__hint aura-menu__reason", "aria-hidden": true }, it.disabledReason);
       if (it.href && !it.disabled)
         return /* @__PURE__ */ React8.createElement(
           Link,
@@ -1369,11 +1379,13 @@ window.Aura = (() => {
           key: i,
           type: "button",
           tabIndex: -1,
-          disabled: it.disabled,
+          "aria-disabled": it.disabled ? true : void 0,
+          "aria-describedby": reasonId,
           role: isRadio ? "menuitemradio" : isCheck ? "menuitemcheckbox" : "menuitem",
           "aria-checked": isRadio || isCheck ? !!it.checked : void 0,
           className: cls,
           onClick: function() {
+            if (it.disabled) return;
             if (it.onSelect) it.onSelect();
             if (!it.keepOpen) props.onClose(true);
           }
@@ -1402,7 +1414,19 @@ window.Aura = (() => {
         }
       },
       props.header
-    ), /* @__PURE__ */ React8.createElement("div", { role: "menu", "aria-label": props.label, "aria-describedby": headerId, className: "aura-menu__list" }, list)) : /* @__PURE__ */ React8.createElement("div", { ref: merged, role: "menu", "aria-label": props.label, className: "aura-menu", onKeyDown, style }, list);
+    ), /* @__PURE__ */ React8.createElement("div", { role: "menu", tabIndex: -1, "aria-label": props.label, "aria-describedby": headerId, className: "aura-menu__list" }, list)) : /* @__PURE__ */ React8.createElement(
+      "div",
+      {
+        ref: merged,
+        role: "menu",
+        tabIndex: -1,
+        "aria-label": props.label,
+        className: "aura-menu",
+        onKeyDown,
+        style
+      },
+      list
+    );
     return mounted ? (0, import_react_dom.createPortal)(el, document.body) : null;
   });
 
@@ -1417,7 +1441,7 @@ window.Aura = (() => {
       function() {
         if (!anchor || !toLast.current || !menuRef.current) return;
         toLast.current = false;
-        const list = menuRef.current.querySelectorAll('[role^="menuitem"]:not([disabled])');
+        const list = menuRef.current.querySelectorAll('[role^="menuitem"]');
         if (list.length) list[list.length - 1].focus();
       },
       [anchor]
@@ -5876,6 +5900,12 @@ window.Aura = (() => {
     })[0] || firstOn || items2[0];
     const Link = useLinkComponent(props.linkComponent);
     const manual = props.activation === "manual";
+    const seg = props.variant === "segmented";
+    const listCls = cx("aura-tabs__list", seg && "aura-segmented", seg && props.fullWidth && "is-full");
+    const tabCls = function(on, extra) {
+      return cx("aura-tab", on && "is-active", seg && "aura-segmented__option", seg && on && "is-selected", extra);
+    };
+    const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented");
     const [focusId, setFocusId] = React32.useState(null);
     items2.forEach(function(t) {
       const al = t.tabProps && t.tabProps["aria-label"];
@@ -5891,9 +5921,9 @@ window.Aura = (() => {
         {
           ref,
           "aria-label": props.label,
-          className: cx("aura-tabs aura-tabs--links", props.className)
+          className: cx(rootCls, "aura-tabs--links", props.className)
         },
-        /* @__PURE__ */ React32.createElement("div", { className: "aura-tabs__list" }, items2.map(function(t) {
+        /* @__PURE__ */ React32.createElement("div", { className: listCls }, items2.map(function(t) {
           const on = t.id === cur;
           const inner = [
             t.icon ? /* @__PURE__ */ React32.createElement(Icon, { key: "i", name: t.icon }) : null,
@@ -5917,7 +5947,7 @@ window.Aura = (() => {
             {
               ...omit(own, ["onClick"]),
               key: t.id,
-              className: cx("aura-tab is-disabled", own.className),
+              className: cx(tabCls(false), "is-disabled", own.className),
               "aria-disabled": true
             },
             inner
@@ -5927,7 +5957,7 @@ window.Aura = (() => {
               ...own,
               key: t.id,
               href: t.href,
-              className: cx("aura-tab", on && "is-active", own.className),
+              className: tabCls(on, own.className),
               "aria-current": on ? "page" : void 0,
               onClick: function(e) {
                 if (own.onClick) own.onClick(e);
@@ -5951,12 +5981,12 @@ window.Aura = (() => {
     const stop = manual && focusId && items2.filter(function(t) {
       return t.id === focusId && !t.disabled;
     })[0] || current2;
-    return /* @__PURE__ */ React32.createElement("div", { ref, className: cx("aura-tabs", props.className) }, /* @__PURE__ */ React32.createElement(
+    return /* @__PURE__ */ React32.createElement("div", { ref, className: cx(rootCls, props.className) }, /* @__PURE__ */ React32.createElement(
       "div",
       {
         role: "tablist",
         "aria-label": props.label,
-        className: "aura-tabs__list",
+        className: listCls,
         onBlur: manual ? function(e) {
           if (!e.currentTarget.contains(e.relatedTarget)) setFocusId(null);
         } : void 0,
@@ -5999,7 +6029,7 @@ window.Aura = (() => {
             ref: function(el) {
               refs.current[t.id] = el;
             },
-            className: cx("aura-tab", on && "is-active", own.className),
+            className: tabCls(on, own.className),
             onFocus: manual ? function(e) {
               if (own.onFocus) own.onFocus(e);
               setFocusId(t.id);

package/dist/cjs/index.cjs

@@ -1215,13 +1215,14 @@ var IconButton = React7.forwardRef(function IconButton2(props, ref) {
 // src/Menu.tsx
 var React8 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
+var ITEMS = '[role^="menuitem"]';
 var Menu = React8.forwardRef(function Menu2(props, ref) {
   const own = React8.useRef(null), merged = useMergedRef(ref, own);
   const posState = React8.useState(null);
   const pos = posState[0], setPos = posState[1];
   const items2 = props.items || [];
   const mounted = useMounted();
-  const headerId = uid();
+  const headerId = uid(), itemId = uid();
   const hasHeader = props.header != null && props.header !== false && props.header !== "";
   const Link = useLinkComponent(props.linkComponent);
   useIsoLayoutEffect(
@@ -1249,8 +1250,8 @@ var Menu = React8.forwardRef(function Menu2(props, ref) {
       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();
+        const first = own.current.querySelector(ITEMS);
+        (first || own.current.querySelector('[role="menu"]') || own.current).focus();
       }
     },
     [hasHeader]
@@ -1258,8 +1259,11 @@ var Menu = React8.forwardRef(function Menu2(props, ref) {
   React8.useEffect(
     function() {
       if (!mounted) return;
-      const first = own.current && own.current.querySelector('[role^="menuitem"]:not([disabled])');
-      if (first && props.autoFocus !== false) first.focus();
+      const first = own.current && own.current.querySelector(ITEMS);
+      if (props.autoFocus !== false) {
+        if (first) first.focus();
+        else if (own.current) (own.current.querySelector('[role="menu"]') || own.current).focus();
+      }
       function outside(e) {
         if (own.current && !own.current.contains(e.target) && !(props.anchor && props.anchor.contains(e.target)))
           props.onClose(false);
@@ -1279,16 +1283,18 @@ var Menu = React8.forwardRef(function Menu2(props, ref) {
     [mounted]
   );
   function onKeyDown(e) {
-    const list2 = Array.prototype.slice.call(
-      own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
-    );
+    const list2 = Array.prototype.slice.call(own.current.querySelectorAll(ITEMS));
     const i = list2.indexOf(document.activeElement);
+    if (!list2.length && e.key !== "Escape" && e.key !== "Tab") {
+      e.stopPropagation();
+      return;
+    }
     if (e.key === "ArrowDown") {
       e.preventDefault();
       list2[(i + 1) % list2.length].focus();
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      list2[(i - 1 + list2.length) % list2.length].focus();
+      list2[i < 0 ? list2.length - 1 : (i - 1 + list2.length) % list2.length].focus();
     } else if (e.key === "Home") {
       e.preventDefault();
       list2[0].focus();
@@ -1327,6 +1333,10 @@ var Menu = React8.forwardRef(function Menu2(props, ref) {
       it.hint ? /* @__PURE__ */ React8.createElement("span", { key: "h", className: "aura-menu__hint" }, it.hint) : null
     ];
     const cls = cx("aura-menu__item", it.tone === "danger" && "aura-menu__item--danger");
+    const reasonId = it.disabled && it.disabledReason ? itemId + "-r" + i : void 0;
+    if (reasonId)
+      body[2] = /* Hidden from the name (it would be read twice); aria-describedby still reads it. */
+      /* @__PURE__ */ React8.createElement("span", { key: "h", id: reasonId, className: "aura-menu__hint aura-menu__reason", "aria-hidden": true }, it.disabledReason);
     if (it.href && !it.disabled)
       return /* @__PURE__ */ React8.createElement(
         Link,
@@ -1351,11 +1361,13 @@ var Menu = React8.forwardRef(function Menu2(props, ref) {
         key: i,
         type: "button",
         tabIndex: -1,
-        disabled: it.disabled,
+        "aria-disabled": it.disabled ? true : void 0,
+        "aria-describedby": reasonId,
         role: isRadio ? "menuitemradio" : isCheck ? "menuitemcheckbox" : "menuitem",
         "aria-checked": isRadio || isCheck ? !!it.checked : void 0,
         className: cls,
         onClick: function() {
+          if (it.disabled) return;
           if (it.onSelect) it.onSelect();
           if (!it.keepOpen) props.onClose(true);
         }
@@ -1384,7 +1396,19 @@ var Menu = React8.forwardRef(function Menu2(props, ref) {
       }
     },
     props.header
-  ), /* @__PURE__ */ React8.createElement("div", { role: "menu", "aria-label": props.label, "aria-describedby": headerId, className: "aura-menu__list" }, list)) : /* @__PURE__ */ React8.createElement("div", { ref: merged, role: "menu", "aria-label": props.label, className: "aura-menu", onKeyDown, style }, list);
+  ), /* @__PURE__ */ React8.createElement("div", { role: "menu", tabIndex: -1, "aria-label": props.label, "aria-describedby": headerId, className: "aura-menu__list" }, list)) : /* @__PURE__ */ React8.createElement(
+    "div",
+    {
+      ref: merged,
+      role: "menu",
+      tabIndex: -1,
+      "aria-label": props.label,
+      className: "aura-menu",
+      onKeyDown,
+      style
+    },
+    list
+  );
   return mounted ? (0, import_react_dom.createPortal)(el, document.body) : null;
 });
 
@@ -1399,7 +1423,7 @@ var DropdownMenu = React9.forwardRef(function DropdownMenu2(props, ref) {
     function() {
       if (!anchor || !toLast.current || !menuRef.current) return;
       toLast.current = false;
-      const list = menuRef.current.querySelectorAll('[role^="menuitem"]:not([disabled])');
+      const list = menuRef.current.querySelectorAll('[role^="menuitem"]');
       if (list.length) list[list.length - 1].focus();
     },
     [anchor]
@@ -5858,6 +5882,12 @@ var Tabs = React32.forwardRef(function Tabs2(props, ref) {
   })[0] || firstOn || items2[0];
   const Link = useLinkComponent(props.linkComponent);
   const manual = props.activation === "manual";
+  const seg = props.variant === "segmented";
+  const listCls = cx("aura-tabs__list", seg && "aura-segmented", seg && props.fullWidth && "is-full");
+  const tabCls = function(on, extra) {
+    return cx("aura-tab", on && "is-active", seg && "aura-segmented__option", seg && on && "is-selected", extra);
+  };
+  const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented");
   const [focusId, setFocusId] = React32.useState(null);
   items2.forEach(function(t) {
     const al = t.tabProps && t.tabProps["aria-label"];
@@ -5873,9 +5903,9 @@ var Tabs = React32.forwardRef(function Tabs2(props, ref) {
       {
         ref,
         "aria-label": props.label,
-        className: cx("aura-tabs aura-tabs--links", props.className)
+        className: cx(rootCls, "aura-tabs--links", props.className)
       },
-      /* @__PURE__ */ React32.createElement("div", { className: "aura-tabs__list" }, items2.map(function(t) {
+      /* @__PURE__ */ React32.createElement("div", { className: listCls }, items2.map(function(t) {
         const on = t.id === cur;
         const inner = [
           t.icon ? /* @__PURE__ */ React32.createElement(Icon, { key: "i", name: t.icon }) : null,
@@ -5899,7 +5929,7 @@ var Tabs = React32.forwardRef(function Tabs2(props, ref) {
           {
             ...omit(own, ["onClick"]),
             key: t.id,
-            className: cx("aura-tab is-disabled", own.className),
+            className: cx(tabCls(false), "is-disabled", own.className),
             "aria-disabled": true
           },
           inner
@@ -5909,7 +5939,7 @@ var Tabs = React32.forwardRef(function Tabs2(props, ref) {
             ...own,
             key: t.id,
             href: t.href,
-            className: cx("aura-tab", on && "is-active", own.className),
+            className: tabCls(on, own.className),
             "aria-current": on ? "page" : void 0,
             onClick: function(e) {
               if (own.onClick) own.onClick(e);
@@ -5933,12 +5963,12 @@ var Tabs = React32.forwardRef(function Tabs2(props, ref) {
   const stop = manual && focusId && items2.filter(function(t) {
     return t.id === focusId && !t.disabled;
   })[0] || current2;
-  return /* @__PURE__ */ React32.createElement("div", { ref, className: cx("aura-tabs", props.className) }, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React32.createElement("div", { ref, className: cx(rootCls, props.className) }, /* @__PURE__ */ React32.createElement(
     "div",
     {
       role: "tablist",
       "aria-label": props.label,
-      className: "aura-tabs__list",
+      className: listCls,
       onBlur: manual ? function(e) {
         if (!e.currentTarget.contains(e.relatedTarget)) setFocusId(null);
       } : void 0,
@@ -5981,7 +6011,7 @@ var Tabs = React32.forwardRef(function Tabs2(props, ref) {
           ref: function(el) {
             refs.current[t.id] = el;
           },
-          className: cx("aura-tab", on && "is-active", own.className),
+          className: tabCls(on, own.className),
           onFocus: manual ? function(e) {
             if (own.onFocus) own.onFocus(e);
             setFocusId(t.id);

package/dist/esm/DropdownMenu.js

@@ -11,7 +11,7 @@ const DropdownMenu = React.forwardRef(function DropdownMenu2(props, ref) {
     function() {
       if (!anchor || !toLast.current || !menuRef.current) return;
       toLast.current = false;
-      const list = menuRef.current.querySelectorAll('[role^="menuitem"]:not([disabled])');
+      const list = menuRef.current.querySelectorAll('[role^="menuitem"]');
       if (list.length) list[list.length - 1].focus();
     },
     [anchor]

package/dist/esm/Menu.js

@@ -5,13 +5,14 @@ import { cx, uid, useIsoLayoutEffect, useMounted, useMergedRef } from "./interna
 import { Icon } from "./Icon.js";
 import { useLinkComponent } from "./locale.js";
 import { IconCheck } from "./icons.js";
+const ITEMS = '[role^="menuitem"]';
 const Menu = React.forwardRef(function Menu2(props, ref) {
   const own = React.useRef(null), merged = useMergedRef(ref, own);
   const posState = React.useState(null);
   const pos = posState[0], setPos = posState[1];
   const items = props.items || [];
   const mounted = useMounted();
-  const headerId = uid();
+  const headerId = uid(), itemId = uid();
   const hasHeader = props.header != null && props.header !== false && props.header !== "";
   const Link = useLinkComponent(props.linkComponent);
   useIsoLayoutEffect(
@@ -39,8 +40,8 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
       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();
+        const first = own.current.querySelector(ITEMS);
+        (first || own.current.querySelector('[role="menu"]') || own.current).focus();
       }
     },
     [hasHeader]
@@ -48,8 +49,11 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
   React.useEffect(
     function() {
       if (!mounted) return;
-      const first = own.current && own.current.querySelector('[role^="menuitem"]:not([disabled])');
-      if (first && props.autoFocus !== false) first.focus();
+      const first = own.current && own.current.querySelector(ITEMS);
+      if (props.autoFocus !== false) {
+        if (first) first.focus();
+        else if (own.current) (own.current.querySelector('[role="menu"]') || own.current).focus();
+      }
       function outside(e) {
         if (own.current && !own.current.contains(e.target) && !(props.anchor && props.anchor.contains(e.target)))
           props.onClose(false);
@@ -69,16 +73,18 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
     [mounted]
   );
   function onKeyDown(e) {
-    const list2 = Array.prototype.slice.call(
-      own.current.querySelectorAll('[role^="menuitem"]:not([disabled])')
-    );
+    const list2 = Array.prototype.slice.call(own.current.querySelectorAll(ITEMS));
     const i = list2.indexOf(document.activeElement);
+    if (!list2.length && e.key !== "Escape" && e.key !== "Tab") {
+      e.stopPropagation();
+      return;
+    }
     if (e.key === "ArrowDown") {
       e.preventDefault();
       list2[(i + 1) % list2.length].focus();
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      list2[(i - 1 + list2.length) % list2.length].focus();
+      list2[i < 0 ? list2.length - 1 : (i - 1 + list2.length) % list2.length].focus();
     } else if (e.key === "Home") {
       e.preventDefault();
       list2[0].focus();
@@ -117,6 +123,10 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
       it.hint ? /* @__PURE__ */ React.createElement("span", { key: "h", className: "aura-menu__hint" }, it.hint) : null
     ];
     const cls = cx("aura-menu__item", it.tone === "danger" && "aura-menu__item--danger");
+    const reasonId = it.disabled && it.disabledReason ? itemId + "-r" + i : void 0;
+    if (reasonId)
+      body[2] = /* Hidden from the name (it would be read twice); aria-describedby still reads it. */
+      /* @__PURE__ */ React.createElement("span", { key: "h", id: reasonId, className: "aura-menu__hint aura-menu__reason", "aria-hidden": true }, it.disabledReason);
     if (it.href && !it.disabled)
       return /* @__PURE__ */ React.createElement(
         Link,
@@ -141,11 +151,13 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
         key: i,
         type: "button",
         tabIndex: -1,
-        disabled: it.disabled,
+        "aria-disabled": it.disabled ? true : void 0,
+        "aria-describedby": reasonId,
         role: isRadio ? "menuitemradio" : isCheck ? "menuitemcheckbox" : "menuitem",
         "aria-checked": isRadio || isCheck ? !!it.checked : void 0,
         className: cls,
         onClick: function() {
+          if (it.disabled) return;
           if (it.onSelect) it.onSelect();
           if (!it.keepOpen) props.onClose(true);
         }
@@ -174,7 +186,19 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
       }
     },
     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);
+  ), /* @__PURE__ */ React.createElement("div", { role: "menu", tabIndex: -1, "aria-label": props.label, "aria-describedby": headerId, className: "aura-menu__list" }, list)) : /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: merged,
+      role: "menu",
+      tabIndex: -1,
+      "aria-label": props.label,
+      className: "aura-menu",
+      onKeyDown,
+      style
+    },
+    list
+  );
   return mounted ? createPortal(el, document.body) : null;
 });
 export {

package/dist/esm/Tabs.js

@@ -23,6 +23,12 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
   })[0] || firstOn || items[0];
   const Link = useLinkComponent(props.linkComponent);
   const manual = props.activation === "manual";
+  const seg = props.variant === "segmented";
+  const listCls = cx("aura-tabs__list", seg && "aura-segmented", seg && props.fullWidth && "is-full");
+  const tabCls = function(on, extra) {
+    return cx("aura-tab", on && "is-active", seg && "aura-segmented__option", seg && on && "is-selected", extra);
+  };
+  const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented");
   const [focusId, setFocusId] = React.useState(null);
   items.forEach(function(t) {
     const al = t.tabProps && t.tabProps["aria-label"];
@@ -38,9 +44,9 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
       {
         ref,
         "aria-label": props.label,
-        className: cx("aura-tabs aura-tabs--links", props.className)
+        className: cx(rootCls, "aura-tabs--links", props.className)
       },
-      /* @__PURE__ */ React.createElement("div", { className: "aura-tabs__list" }, items.map(function(t) {
+      /* @__PURE__ */ React.createElement("div", { className: listCls }, items.map(function(t) {
         const on = t.id === cur;
         const inner = [
           t.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: t.icon }) : null,
@@ -64,7 +70,7 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
           {
             ...omit(own, ["onClick"]),
             key: t.id,
-            className: cx("aura-tab is-disabled", own.className),
+            className: cx(tabCls(false), "is-disabled", own.className),
             "aria-disabled": true
           },
           inner
@@ -74,7 +80,7 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
             ...own,
             key: t.id,
             href: t.href,
-            className: cx("aura-tab", on && "is-active", own.className),
+            className: tabCls(on, own.className),
             "aria-current": on ? "page" : void 0,
             onClick: function(e) {
               if (own.onClick) own.onClick(e);
@@ -98,12 +104,12 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const stop = manual && focusId && items.filter(function(t) {
     return t.id === focusId && !t.disabled;
   })[0] || current;
-  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-tabs", props.className) }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx(rootCls, props.className) }, /* @__PURE__ */ React.createElement(
     "div",
     {
       role: "tablist",
       "aria-label": props.label,
-      className: "aura-tabs__list",
+      className: listCls,
       onBlur: manual ? function(e) {
         if (!e.currentTarget.contains(e.relatedTarget)) setFocusId(null);
       } : void 0,
@@ -146,7 +152,7 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
           ref: function(el) {
             refs.current[t.id] = el;
           },
-          className: cx("aura-tab", on && "is-active", own.className),
+          className: tabCls(on, own.className),
           onFocus: manual ? function(e) {
             if (own.onFocus) own.onFocus(e);
             setFocusId(t.id);

package/dist/index.d.cts

@@ -278,7 +278,10 @@ export interface MenuItem {
 	icon?: IconInput | undefined;
 	/** Present = a checkable item (menuitemcheckbox). */
 	checked?: boolean | undefined;
+	/** Dimmed and does nothing when chosen, but still reachable with the arrow keys and announced (5.10). */
 	disabled?: boolean | undefined;
+	/** Why it's disabled ("You can resend in 5 minutes"): shown in place of the hint and read with the item. (5.10) */
+	disabledReason?: string | undefined;
 	/** Keep the menu open after choosing (checkbox lists). */
 	keepOpen?: boolean | undefined;
 	/** Short right-aligned hint, e.g. a shortcut. */
@@ -617,6 +620,11 @@ export interface TabsProps {
 	/** `auto` (default): arrow keys select as they move. `manual`: arrows, Home and End only move focus; Enter, Space
 	 * or a click selects — for tabs whose selection does work (loads data, starts a payment). (5.9) */
 	activation?: "auto" | "manual" | undefined;
+	/** `underline` (default) or `segmented`: the tabs as a pill track with the selected one raised, like
+	 * SegmentedControl, keeping every Tabs behaviour (panels, keepMounted, activation, tabProps). (5.10, Chamber-OS 72) */
+	variant?: "underline" | "segmented" | undefined;
+	/** With `variant="segmented"`: stretch the track to the full width, tabs sharing it equally. (5.10) */
+	fullWidth?: boolean | undefined;
 }
 export interface NavItem {
 	id: string;

package/dist/index.d.ts

@@ -278,7 +278,10 @@ export interface MenuItem {
 	icon?: IconInput | undefined;
 	/** Present = a checkable item (menuitemcheckbox). */
 	checked?: boolean | undefined;
+	/** Dimmed and does nothing when chosen, but still reachable with the arrow keys and announced (5.10). */
 	disabled?: boolean | undefined;
+	/** Why it's disabled ("You can resend in 5 minutes"): shown in place of the hint and read with the item. (5.10) */
+	disabledReason?: string | undefined;
 	/** Keep the menu open after choosing (checkbox lists). */
 	keepOpen?: boolean | undefined;
 	/** Short right-aligned hint, e.g. a shortcut. */
@@ -617,6 +620,11 @@ export interface TabsProps {
 	/** `auto` (default): arrow keys select as they move. `manual`: arrows, Home and End only move focus; Enter, Space
 	 * or a click selects — for tabs whose selection does work (loads data, starts a payment). (5.9) */
 	activation?: "auto" | "manual" | undefined;
+	/** `underline` (default) or `segmented`: the tabs as a pill track with the selected one raised, like
+	 * SegmentedControl, keeping every Tabs behaviour (panels, keepMounted, activation, tabProps). (5.10, Chamber-OS 72) */
+	variant?: "underline" | "segmented" | undefined;
+	/** With `variant="segmented"`: stretch the track to the full width, tabs sharing it equally. (5.10) */
+	fullWidth?: boolean | undefined;
 }
 export interface NavItem {
 	id: string;

package/dist/styles.css

@@ -226,7 +226,13 @@ a.aura-btn { text-decoration: none; }
 }
 .aura-menu__item:hover, .aura-menu__item:focus { background: var(--aura-bg-surface-hover); outline: none; }
 .aura-menu__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
-.aura-menu__item:disabled { opacity: var(--aura-disabled-opacity); cursor: default; background: transparent; }
+.aura-menu__item:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
+/* 5.10: a disabled item is dimmed but focusable; its reason stays at full strength (it is the information). */
+.aura-menu__item[aria-disabled="true"] { cursor: default; }
+.aura-menu__item[aria-disabled="true"] > :not(.aura-menu__reason) { opacity: var(--aura-disabled-opacity); }
+.aura-menu__reason { padding-left: var(--aura-space-4); }
+.aura-menu__item:disabled, .aura-menu__item[aria-disabled="true"]:hover:not(:focus) { background: transparent; }
+.aura-menu:focus, .aura-menu__list:focus { outline: none; }
 .aura-menu__item .aura-icon { color: var(--aura-fg-secondary); }
 .aura-menu__label { flex: 1; }
 .aura-menu__blank { width: var(--aura-icon-sm); flex: none; }
@@ -1203,6 +1209,16 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-segmented--sm .aura-segmented__option { height: 24px; padding: 0 var(--aura-space-3); font-size: 12px; }
 .aura-segmented--sm .aura-segmented__option.is-icon { width: 28px; padding: 0; }
 .aura-segmented.is-disabled { opacity: var(--aura-disabled-opacity); }
+/* 5.10 (Chamber-OS 72): Tabs variant="segmented" — the tablist wears SegmentedControl's track and pills. The focus
+ * ring is drawn inside the pill, so neither the scrolling list (many tabs on a phone) nor the next pill can cover it;
+ * full-width tabs share the track but never shrink below their label (the track scrolls instead). The phone rule's
+ * wider tab gap doesn't apply. */
+.aura-tabs--segmented .aura-tabs__list.aura-segmented { gap: 2px; }
+.aura-tabs--segmented .aura-tabs__list.aura-segmented.is-full .aura-tab { min-width: max-content; }
+.aura-tabs--segmented .aura-tab.aura-segmented__option { margin-bottom: 0; }
+.aura-tabs--segmented .aura-tab.aura-segmented__option:focus-visible { border-radius: var(--aura-radius-full); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
+.aura-tabs--segmented .aura-tab.aura-segmented__option:disabled,
+.aura-tabs--segmented .aura-tab.aura-segmented__option.is-disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
 
 /* A field inside a row Stack takes the remaining width (a search box beside its button). */
 .aura-stack > .aura-field { flex: 1 1 auto; min-width: 0; }
@@ -1590,4 +1606,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-segmented__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }
   .aura-tab { border-bottom-color: Canvas; }
   .aura-tab.is-active { border-bottom-color: Highlight; }
+  /* 5.10: segmented tabs mark the selection with a border and focus with a dashed ring inside it, so a focused tab
+   * and the selected one never look alike (manual activation moves focus without selecting). */
+  .aura-tabs--segmented .aura-tab.aura-segmented__option.is-selected { outline: none; border: 2px solid Highlight; }
+  .aura-tabs--segmented .aura-tab.aura-segmented__option:focus-visible { outline: 2px dashed CanvasText; outline-offset: -5px; }
 }

package/dist/styles.layer.css

@@ -228,7 +228,13 @@ a.aura-btn { text-decoration: none; }
 }
 .aura-menu__item:hover, .aura-menu__item:focus { background: var(--aura-bg-surface-hover); outline: none; }
 .aura-menu__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
-.aura-menu__item:disabled { opacity: var(--aura-disabled-opacity); cursor: default; background: transparent; }
+.aura-menu__item:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
+/* 5.10: a disabled item is dimmed but focusable; its reason stays at full strength (it is the information). */
+.aura-menu__item[aria-disabled="true"] { cursor: default; }
+.aura-menu__item[aria-disabled="true"] > :not(.aura-menu__reason) { opacity: var(--aura-disabled-opacity); }
+.aura-menu__reason { padding-left: var(--aura-space-4); }
+.aura-menu__item:disabled, .aura-menu__item[aria-disabled="true"]:hover:not(:focus) { background: transparent; }
+.aura-menu:focus, .aura-menu__list:focus { outline: none; }
 .aura-menu__item .aura-icon { color: var(--aura-fg-secondary); }
 .aura-menu__label { flex: 1; }
 .aura-menu__blank { width: var(--aura-icon-sm); flex: none; }
@@ -1205,6 +1211,16 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-segmented--sm .aura-segmented__option { height: 24px; padding: 0 var(--aura-space-3); font-size: 12px; }
 .aura-segmented--sm .aura-segmented__option.is-icon { width: 28px; padding: 0; }
 .aura-segmented.is-disabled { opacity: var(--aura-disabled-opacity); }
+/* 5.10 (Chamber-OS 72): Tabs variant="segmented" — the tablist wears SegmentedControl's track and pills. The focus
+ * ring is drawn inside the pill, so neither the scrolling list (many tabs on a phone) nor the next pill can cover it;
+ * full-width tabs share the track but never shrink below their label (the track scrolls instead). The phone rule's
+ * wider tab gap doesn't apply. */
+.aura-tabs--segmented .aura-tabs__list.aura-segmented { gap: 2px; }
+.aura-tabs--segmented .aura-tabs__list.aura-segmented.is-full .aura-tab { min-width: max-content; }
+.aura-tabs--segmented .aura-tab.aura-segmented__option { margin-bottom: 0; }
+.aura-tabs--segmented .aura-tab.aura-segmented__option:focus-visible { border-radius: var(--aura-radius-full); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
+.aura-tabs--segmented .aura-tab.aura-segmented__option:disabled,
+.aura-tabs--segmented .aura-tab.aura-segmented__option.is-disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
 
 /* A field inside a row Stack takes the remaining width (a search box beside its button). */
 .aura-stack > .aura-field { flex: 1 1 auto; min-width: 0; }
@@ -1592,6 +1608,10 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-segmented__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }
   .aura-tab { border-bottom-color: Canvas; }
   .aura-tab.is-active { border-bottom-color: Highlight; }
+  /* 5.10: segmented tabs mark the selection with a border and focus with a dashed ring inside it, so a focused tab
+   * and the selected one never look alike (manual activation moves focus without selecting). */
+  .aura-tabs--segmented .aura-tab.aura-segmented__option.is-selected { outline: none; border: 2px solid Highlight; }
+  .aura-tabs--segmented .aura-tab.aura-segmented__option:focus-visible { outline: 2px dashed CanvasText; outline-offset: -5px; }
 }
 
 }

package/package.json

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