@jirawatpyk/aura-react 5.77.0 → 5.78.0

package/README.md

@@ -186,6 +186,18 @@ 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.78 — visual audit, set 2 (phones)
+
+- **Bottom strips on a phone follow one rule:** ActionBar's edge strip (`look="edge"`, `edgeBelow`) now lays out as PageHeader's bar (5.48) — the status on its own row at the top, the actions sharing the row under it (an IconButton keeps its square; labels too long to share take a row each, as PageHeader's) — and both strips are 16px from either side, the page's phone gutter (they were 16 and 12). `edgeBelow="md"` follows it up to 768px. A single label wider than the screen still overflows, as in PageHeader's strip — keep bar labels short.
+- **PageHeader `actionsFullWidthBelow`:** on a phone its buttons are `--aura-radius-md` boxes, so a label that wraps to two lines is a rounded box, not a lozenge (the ⋯ IconButton stays round) — also the header's own actions beside an `actionsBar` strip. The bottom strip keeps its pill buttons.
+- **A document number in a PageHeader title stays whole:** in a plain-text title, a short token with a digit and a hyphen ("Invoice SC-2026-900001") never breaks at its hyphens; the line breaks before it. The text is unchanged (a `.aura-nowrap` span, a utility you can use too).
+- **DataTable cards with `columnControls`:** the column picker's slot no longer squeezes the card's title (it took 48px of the first line).
+- **StatusTile:** a host or a path in a plain-text title ("api.example.co.th") breaks after a dot or a slash, not in the middle of a label.
+- **Tabs:** a tab list wider than its box fades the end that has more tabs (both ends once scrolled; mirrored in RTL), so a cut tab reads as "scroll for more". `data-aura-more="start" | "end" | "start end"` on the list.
+- **Combobox and TimePicker:** room is kept for the clear button only while there is one — an empty TimePicker in a narrow column showed "hh:m".
+- **Development warning:** a `DataTable` or `Table` that scrolls sideways on a screen under 640px without `stackBelow` warns once — its last columns are off screen. `stackBelow` stays opt-in in 5.x (it changes the layout) and becomes the default in 6.0.
+- **Stories:** the examples that scrolled the page sideways at 390px (fixed grids, rows that didn't wrap, fixed-width demo boxes) and the demo tables now fit a phone.
+
 ## 5.77 — Chamber-OS addendum 95 follow-up (#194)
 
 - **A confirmation opens at its top on a short screen:** when a Dialog scrolls as one box (5.76) and its first focus lands in the footer — `data-autofocus` on Cancel, or a dialog with nothing to fill in — it no longer scrolls to its end on open: the title, the description and the summary of what is being confirmed are what show first, with Cancel focused below. Tab or a scroll reaches the buttons as before. A field in the body that takes the first focus is still scrolled into view (it is what you type in next). By design the focused Cancel then starts below the fold: focus is in the dialog, on the safe action, and a screen reader reads the title and description first. Above 30rem nothing changes — where the panel can't scroll, the browser keeps the focused button in view as before; a Drawer is unaffected. With `autoFocus={false}`, a footer button you focus yourself scrolls as the browser does.

package/dist/aura.bundle.js

@@ -174,15 +174,16 @@ window.Aura = (() => {
     return TONES.indexOf(t) >= 0 ? t : "neutral";
   }
   var warned = {};
-  function devWarnOnce(key, message) {
-    if (warned[key]) return;
-    let dev = false;
+  function isDev() {
     try {
-      dev = true;
+      return true;
     } catch (e) {
-      dev = false;
+      return false;
     }
-    if (!dev) return;
+  }
+  function devWarnOnce(key, message) {
+    if (warned[key]) return;
+    if (!isDev()) return;
     warned[key] = true;
     console.warn("[AURA] " + message);
   }
@@ -518,6 +519,48 @@ window.Aura = (() => {
   function pointerModality() {
     setModality("pointer");
   }
+  function useScrollEdges(r2, key) {
+    React3.useEffect(
+      function() {
+        const el = r2.current;
+        if (!el || typeof ResizeObserver === "undefined") return;
+        let raf = 0;
+        const mark = function() {
+          raf = 0;
+          const max = el.scrollWidth - el.clientWidth;
+          const x = Math.abs(el.scrollLeft);
+          const v = ((x > 1 ? "start " : "") + (x < max - 1 ? "end" : "")).trim();
+          if ((el.getAttribute("data-aura-more") || "") === v) return;
+          if (v) el.setAttribute("data-aura-more", v);
+          else el.removeAttribute("data-aura-more");
+        };
+        const on = function() {
+          if (!raf) raf = requestAnimationFrame(mark);
+        };
+        mark();
+        el.addEventListener("scroll", on, { passive: true });
+        const ro = new ResizeObserver(on);
+        ro.observe(el);
+        Array.prototype.forEach.call(el.children, function(c) {
+          ro.observe(c);
+        });
+        const mo = new MutationObserver(function() {
+          Array.prototype.forEach.call(el.children, function(c) {
+            ro.observe(c);
+          });
+          on();
+        });
+        mo.observe(el, { childList: true });
+        return function() {
+          cancelAnimationFrame(raf);
+          el.removeEventListener("scroll", on);
+          ro.disconnect();
+          mo.disconnect();
+        };
+      },
+      [key]
+    );
+  }
 
   // src/display.tsx
   var React4 = __toESM(require_react(), 1);
@@ -6199,6 +6242,24 @@ window.Aura = (() => {
       [measure, levelShape]
     );
     const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
+    React34.useEffect(
+      function() {
+        if (!isDev() || props.stackBelow || typeof window === "undefined" || window.innerWidth >= 640 || !wrapRef.current)
+          return;
+        const sc = wrapRef.current.querySelector(".aura-table__scroll");
+        const raf = requestAnimationFrame(function() {
+          if (sc && sc.scrollWidth > sc.clientWidth + 1)
+            devWarnOnce(
+              "datatable-no-stack",
+              'DataTable "' + props.label + '" scrolls sideways at ' + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} to show each row as a card. It becomes the default in 6.0."
+            );
+        });
+        return function() {
+          cancelAnimationFrame(raf);
+        };
+      },
+      [props.stackBelow]
+    );
     const noCardSel = !!props.hideSelectionInCards && selectable;
     useIsoLayoutEffect(
       function() {
@@ -7593,6 +7654,8 @@ window.Aura = (() => {
     };
     const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
     const [focusId, setFocusId] = React36.useState(null);
+    const listRef = React36.useRef(null);
+    useScrollEdges(listRef, asLinks);
     items2.forEach(function(t) {
       const al = t.tabProps && t.tabProps["aria-label"];
       if (al && al.toLowerCase().indexOf(String(t.label).toLowerCase()) !== 0)
@@ -7609,7 +7672,7 @@ window.Aura = (() => {
           "aria-label": props.label,
           className: cx(rootCls, "aura-tabs--links", props.className)
         },
-        /* @__PURE__ */ React36.createElement("div", { className: listCls }, items2.map(function(t) {
+        /* @__PURE__ */ React36.createElement("div", { ref: listRef, className: listCls }, items2.map(function(t) {
           const on = t.id === cur2;
           const inner = [
             t.icon ? /* @__PURE__ */ React36.createElement(Icon, { key: "i", name: t.icon }) : null,
@@ -7662,7 +7725,11 @@ window.Aura = (() => {
       const t = enabled[(i + enabled.length) % enabled.length];
       if (manual) setFocusId(t.id);
       else st[1](t.id);
-      if (refs.current[t.id]) refs.current[t.id].focus();
+      if (refs.current[t.id]) {
+        refs.current[t.id].focus();
+        const tab = refs.current[t.id];
+        if (typeof tab.scrollIntoView === "function") tab.scrollIntoView({ block: "nearest", inline: "nearest" });
+      }
     }
     const stop2 = manual && focusId && items2.filter(function(t) {
       return t.id === focusId && !t.disabled;
@@ -7670,6 +7737,7 @@ window.Aura = (() => {
     return /* @__PURE__ */ React36.createElement("div", { ref, className: cx(rootCls, props.className) }, /* @__PURE__ */ React36.createElement(
       "div",
       {
+        ref: listRef,
         role: "tablist",
         "aria-label": props.label,
         className: listCls,
@@ -8182,6 +8250,15 @@ window.Aura = (() => {
   var React44 = __toESM(require_react(), 1);
   var h8 = React44.createElement;
   var LAZY = Symbol.for("react.lazy");
+  var ID = /([A-Za-z0-9]+(?:-[A-Za-z0-9]+)+)/;
+  function keepIds(title) {
+    if (typeof title !== "string" || title.indexOf("-") < 0) return title;
+    const parts = title.split(ID);
+    if (parts.length < 2) return title;
+    return parts.map(function(p, i) {
+      return i % 2 && /\d/.test(p) && p.length <= 24 ? h8("span", { key: i, className: "aura-nowrap" }, p) : p;
+    });
+  }
   function chipsOnly(node) {
     let el = 0;
     const walk = function(n3) {
@@ -8233,7 +8310,7 @@ window.Aura = (() => {
         tabIndex: props.focusTitleOnMount ? -1 : void 0,
         "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
       },
-      props.title
+      keepIds(props.title)
     );
     const hasActions = props.actions != null && props.actions !== false;
     const hasBarActions = props.actionsBar != null && props.actionsBar !== false;
@@ -8415,6 +8492,21 @@ window.Aura = (() => {
     ok: "statusOk",
     unknown: "statusUnknown"
   };
+  function breakAtDots(title) {
+    if (typeof title !== "string" || !/[./][A-Za-z]/.test(title)) return title;
+    const out = [];
+    let run = "";
+    for (let i = 0; i < title.length; i++) {
+      const c = title.charAt(i);
+      run += c;
+      if ((c === "." || c === "/") && i + 1 < title.length && /[A-Za-z]/.test(title.charAt(i + 1))) {
+        out.push(run, h9("wbr", { key: i }));
+        run = "";
+      }
+    }
+    if (run) out.push(run);
+    return out;
+  }
   function statusWord(status, t) {
     return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
   }
@@ -8453,7 +8545,7 @@ window.Aura = (() => {
         "span",
         { className: "aura-status-tile__head" },
         h9(Icon, { name: h9(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-        h9("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+        h9("span", { className: "aura-status-tile__title", ref: titleRef }, breakAtDots(props.title), comma),
         h9("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
         hasValue ? h9(
           "span",
@@ -9284,6 +9376,11 @@ window.Aura = (() => {
       function check() {
         const sideways = el.scrollWidth > el.clientWidth + 1;
         wide[1](sideways);
+        if (sideways && !stackBelow && !outer && typeof window !== "undefined" && window.innerWidth < 640)
+          devWarnOnce(
+            "table-no-stack",
+            "Table" + (rest["aria-label"] ? ' "' + rest["aria-label"] + '"' : "") + " scrolls sideways at " + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} (cards or rows). It becomes the default in 6.0."
+          );
         sc[1](sideways || el.scrollHeight > el.clientHeight + 1);
       }
       check();

package/dist/cjs/index.cjs

@@ -156,15 +156,16 @@ function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
 }
 var warned = {};
-function devWarnOnce(key, message) {
-  if (warned[key]) return;
-  let dev = false;
+function isDev() {
   try {
-    dev = process.env.NODE_ENV !== "production";
+    return process.env.NODE_ENV !== "production";
   } catch (e) {
-    dev = false;
+    return false;
   }
-  if (!dev) return;
+}
+function devWarnOnce(key, message) {
+  if (warned[key]) return;
+  if (!isDev()) return;
   warned[key] = true;
   console.warn("[AURA] " + message);
 }
@@ -500,6 +501,48 @@ function useInputModality() {
 function pointerModality() {
   setModality("pointer");
 }
+function useScrollEdges(r2, key) {
+  React3.useEffect(
+    function() {
+      const el = r2.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      let raf = 0;
+      const mark = function() {
+        raf = 0;
+        const max = el.scrollWidth - el.clientWidth;
+        const x = Math.abs(el.scrollLeft);
+        const v = ((x > 1 ? "start " : "") + (x < max - 1 ? "end" : "")).trim();
+        if ((el.getAttribute("data-aura-more") || "") === v) return;
+        if (v) el.setAttribute("data-aura-more", v);
+        else el.removeAttribute("data-aura-more");
+      };
+      const on = function() {
+        if (!raf) raf = requestAnimationFrame(mark);
+      };
+      mark();
+      el.addEventListener("scroll", on, { passive: true });
+      const ro = new ResizeObserver(on);
+      ro.observe(el);
+      Array.prototype.forEach.call(el.children, function(c) {
+        ro.observe(c);
+      });
+      const mo = new MutationObserver(function() {
+        Array.prototype.forEach.call(el.children, function(c) {
+          ro.observe(c);
+        });
+        on();
+      });
+      mo.observe(el, { childList: true });
+      return function() {
+        cancelAnimationFrame(raf);
+        el.removeEventListener("scroll", on);
+        ro.disconnect();
+        mo.disconnect();
+      };
+    },
+    [key]
+  );
+}
 
 // src/display.tsx
 var React4 = __toESM(require("react"), 1);
@@ -6181,6 +6224,24 @@ var DataTableImpl = React34.forwardRef(function DataTable(props, ref) {
     [measure, levelShape]
   );
   const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
+  React34.useEffect(
+    function() {
+      if (!isDev() || props.stackBelow || typeof window === "undefined" || window.innerWidth >= 640 || !wrapRef.current)
+        return;
+      const sc = wrapRef.current.querySelector(".aura-table__scroll");
+      const raf = requestAnimationFrame(function() {
+        if (sc && sc.scrollWidth > sc.clientWidth + 1)
+          devWarnOnce(
+            "datatable-no-stack",
+            'DataTable "' + props.label + '" scrolls sideways at ' + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} to show each row as a card. It becomes the default in 6.0."
+          );
+      });
+      return function() {
+        cancelAnimationFrame(raf);
+      };
+    },
+    [props.stackBelow]
+  );
   const noCardSel = !!props.hideSelectionInCards && selectable;
   useIsoLayoutEffect(
     function() {
@@ -7575,6 +7636,8 @@ var Tabs = React36.forwardRef(function Tabs2(props, ref) {
   };
   const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
   const [focusId, setFocusId] = React36.useState(null);
+  const listRef = React36.useRef(null);
+  useScrollEdges(listRef, asLinks);
   items2.forEach(function(t) {
     const al = t.tabProps && t.tabProps["aria-label"];
     if (al && al.toLowerCase().indexOf(String(t.label).toLowerCase()) !== 0)
@@ -7591,7 +7654,7 @@ var Tabs = React36.forwardRef(function Tabs2(props, ref) {
         "aria-label": props.label,
         className: cx(rootCls, "aura-tabs--links", props.className)
       },
-      /* @__PURE__ */ React36.createElement("div", { className: listCls }, items2.map(function(t) {
+      /* @__PURE__ */ React36.createElement("div", { ref: listRef, className: listCls }, items2.map(function(t) {
         const on = t.id === cur2;
         const inner = [
           t.icon ? /* @__PURE__ */ React36.createElement(Icon, { key: "i", name: t.icon }) : null,
@@ -7644,7 +7707,11 @@ var Tabs = React36.forwardRef(function Tabs2(props, ref) {
     const t = enabled[(i + enabled.length) % enabled.length];
     if (manual) setFocusId(t.id);
     else st[1](t.id);
-    if (refs.current[t.id]) refs.current[t.id].focus();
+    if (refs.current[t.id]) {
+      refs.current[t.id].focus();
+      const tab = refs.current[t.id];
+      if (typeof tab.scrollIntoView === "function") tab.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
   }
   const stop2 = manual && focusId && items2.filter(function(t) {
     return t.id === focusId && !t.disabled;
@@ -7652,6 +7719,7 @@ var Tabs = React36.forwardRef(function Tabs2(props, ref) {
   return /* @__PURE__ */ React36.createElement("div", { ref, className: cx(rootCls, props.className) }, /* @__PURE__ */ React36.createElement(
     "div",
     {
+      ref: listRef,
       role: "tablist",
       "aria-label": props.label,
       className: listCls,
@@ -8164,6 +8232,15 @@ var React45 = __toESM(require("react"), 1);
 var React44 = __toESM(require("react"), 1);
 var h8 = React44.createElement;
 var LAZY = Symbol.for("react.lazy");
+var ID = /([A-Za-z0-9]+(?:-[A-Za-z0-9]+)+)/;
+function keepIds(title) {
+  if (typeof title !== "string" || title.indexOf("-") < 0) return title;
+  const parts = title.split(ID);
+  if (parts.length < 2) return title;
+  return parts.map(function(p, i) {
+    return i % 2 && /\d/.test(p) && p.length <= 24 ? h8("span", { key: i, className: "aura-nowrap" }, p) : p;
+  });
+}
 function chipsOnly(node) {
   let el = 0;
   const walk = function(n3) {
@@ -8215,7 +8292,7 @@ var PageHeader = React44.forwardRef(function PageHeader2(props, ref) {
       tabIndex: props.focusTitleOnMount ? -1 : void 0,
       "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
     },
-    props.title
+    keepIds(props.title)
   );
   const hasActions = props.actions != null && props.actions !== false;
   const hasBarActions = props.actionsBar != null && props.actionsBar !== false;
@@ -8397,6 +8474,21 @@ var STATUS_WORD = {
   ok: "statusOk",
   unknown: "statusUnknown"
 };
+function breakAtDots(title) {
+  if (typeof title !== "string" || !/[./][A-Za-z]/.test(title)) return title;
+  const out = [];
+  let run = "";
+  for (let i = 0; i < title.length; i++) {
+    const c = title.charAt(i);
+    run += c;
+    if ((c === "." || c === "/") && i + 1 < title.length && /[A-Za-z]/.test(title.charAt(i + 1))) {
+      out.push(run, h9("wbr", { key: i }));
+      run = "";
+    }
+  }
+  if (run) out.push(run);
+  return out;
+}
 function statusWord(status, t) {
   return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
 }
@@ -8435,7 +8527,7 @@ function statusTileElement(props, ref, Link, t, titleRef) {
       "span",
       { className: "aura-status-tile__head" },
       h9(Icon, { name: h9(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-      h9("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h9("span", { className: "aura-status-tile__title", ref: titleRef }, breakAtDots(props.title), comma),
       h9("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
       hasValue ? h9(
         "span",
@@ -9266,6 +9358,11 @@ var Table = React53.forwardRef(function Table2(props, ref) {
     function check() {
       const sideways = el.scrollWidth > el.clientWidth + 1;
       wide[1](sideways);
+      if (sideways && !stackBelow && !outer && typeof window !== "undefined" && window.innerWidth < 640)
+        devWarnOnce(
+          "table-no-stack",
+          "Table" + (rest["aria-label"] ? ' "' + rest["aria-label"] + '"' : "") + " scrolls sideways at " + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} (cards or rows). It becomes the default in 6.0."
+        );
       sc[1](sideways || el.scrollHeight > el.clientHeight + 1);
     }
     check();

package/dist/esm/DataTable.js

@@ -2,7 +2,15 @@
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { useStrings, useLinkComponent } from "./locale.js";
-import { cx, devWarnOnce, useMaybeControlled, compare, useIsoLayoutEffect, useMergedRef } from "./internal.js";
+import {
+  cx,
+  devWarnOnce,
+  isDev,
+  useMaybeControlled,
+  compare,
+  useIsoLayoutEffect,
+  useMergedRef
+} from "./internal.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { Checkbox } from "./Checkbox.js";
@@ -177,6 +185,24 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     [measure, levelShape]
   );
   const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
+  React.useEffect(
+    function() {
+      if (!isDev() || props.stackBelow || typeof window === "undefined" || window.innerWidth >= 640 || !wrapRef.current)
+        return;
+      const sc = wrapRef.current.querySelector(".aura-table__scroll");
+      const raf = requestAnimationFrame(function() {
+        if (sc && sc.scrollWidth > sc.clientWidth + 1)
+          devWarnOnce(
+            "datatable-no-stack",
+            'DataTable "' + props.label + '" scrolls sideways at ' + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} to show each row as a card. It becomes the default in 6.0."
+          );
+      });
+      return function() {
+        cancelAnimationFrame(raf);
+      };
+    },
+    [props.stackBelow]
+  );
   const noCardSel = !!props.hideSelectionInCards && selectable;
   useIsoLayoutEffect(
     function() {

package/dist/esm/PageHeader.js

@@ -3,6 +3,15 @@ import * as React from "react";
 import { cx } from "./classes.js";
 const h = React.createElement;
 const LAZY = Symbol.for("react.lazy");
+const ID = /([A-Za-z0-9]+(?:-[A-Za-z0-9]+)+)/;
+function keepIds(title) {
+  if (typeof title !== "string" || title.indexOf("-") < 0) return title;
+  const parts = title.split(ID);
+  if (parts.length < 2) return title;
+  return parts.map(function(p, i) {
+    return i % 2 && /\d/.test(p) && p.length <= 24 ? h("span", { key: i, className: "aura-nowrap" }, p) : p;
+  });
+}
 function chipsOnly(node) {
   let el = 0;
   const walk = function(n) {
@@ -54,7 +63,7 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
       tabIndex: props.focusTitleOnMount ? -1 : void 0,
       "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
     },
-    props.title
+    keepIds(props.title)
   );
   const hasActions = props.actions != null && props.actions !== false;
   const hasBarActions = props.actionsBar != null && props.actionsBar !== false;

package/dist/esm/Table.js

@@ -133,6 +133,11 @@ const Table = React.forwardRef(function Table2(props, ref) {
     function check() {
       const sideways = el.scrollWidth > el.clientWidth + 1;
       wide[1](sideways);
+      if (sideways && !stackBelow && !outer && typeof window !== "undefined" && window.innerWidth < 640)
+        devWarnOnce(
+          "table-no-stack",
+          "Table" + (rest["aria-label"] ? ' "' + rest["aria-label"] + '"' : "") + " scrolls sideways at " + window.innerWidth + "px wide, so its last columns are off screen. On a phone pass stackBelow={640} (cards or rows). It becomes the default in 6.0."
+        );
       sc[1](sideways || el.scrollHeight > el.clientHeight + 1);
     }
     check();

package/dist/esm/Tabs.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, devWarnOnce, omit, touchClass, uid, useMaybeControlled } from "./internal.js";
+import { cx, devWarnOnce, omit, touchClass, uid, useMaybeControlled, useScrollEdges } from "./internal.js";
 import { useLinkComponent } from "./locale.js";
 const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const items = props.tabs || [], base = uid();
@@ -36,6 +36,8 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
   };
   const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented", touchClass(props.touchHeight));
   const [focusId, setFocusId] = React.useState(null);
+  const listRef = React.useRef(null);
+  useScrollEdges(listRef, asLinks);
   items.forEach(function(t) {
     const al = t.tabProps && t.tabProps["aria-label"];
     if (al && al.toLowerCase().indexOf(String(t.label).toLowerCase()) !== 0)
@@ -52,7 +54,7 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
         "aria-label": props.label,
         className: cx(rootCls, "aura-tabs--links", props.className)
       },
-      /* @__PURE__ */ React.createElement("div", { className: listCls }, items.map(function(t) {
+      /* @__PURE__ */ React.createElement("div", { ref: listRef, 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,
@@ -105,7 +107,11 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
     const t = enabled[(i + enabled.length) % enabled.length];
     if (manual) setFocusId(t.id);
     else st[1](t.id);
-    if (refs.current[t.id]) refs.current[t.id].focus();
+    if (refs.current[t.id]) {
+      refs.current[t.id].focus();
+      const tab = refs.current[t.id];
+      if (typeof tab.scrollIntoView === "function") tab.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
   }
   const stop = manual && focusId && items.filter(function(t) {
     return t.id === focusId && !t.disabled;
@@ -113,6 +119,7 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
   return /* @__PURE__ */ React.createElement("div", { ref, className: cx(rootCls, props.className) }, /* @__PURE__ */ React.createElement(
     "div",
     {
+      ref: listRef,
       role: "tablist",
       "aria-label": props.label,
       className: listCls,

package/dist/esm/classes.js

@@ -16,21 +16,23 @@ function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
 }
 const warned = {};
-function devWarnOnce(key, message) {
-  if (warned[key]) return;
-  let dev = false;
+function isDev() {
   try {
-    dev = true;
+    return true;
   } catch (e) {
-    dev = false;
+    return false;
   }
-  if (!dev) return;
+}
+function devWarnOnce(key, message) {
+  if (warned[key]) return;
+  if (!isDev()) return;
   warned[key] = true;
   console.warn("[AURA] " + message);
 }
 export {
   cx,
   devWarnOnce,
+  isDev,
   omit,
   tone,
   touchClass

package/dist/esm/internal.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { cx, omit, tone, devWarnOnce, touchClass } from "./classes.js";
+import { cx, omit, tone, devWarnOnce, isDev, touchClass } from "./classes.js";
 function useMaybeControlled(value, initial, onChange) {
   const s = React.useState(initial);
   const wasSet = React.useState(value !== void 0);
@@ -217,6 +217,48 @@ function useInputModality() {
 function pointerModality() {
   setModality("pointer");
 }
+function useScrollEdges(r, key) {
+  React.useEffect(
+    function() {
+      const el = r.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      let raf = 0;
+      const mark = function() {
+        raf = 0;
+        const max = el.scrollWidth - el.clientWidth;
+        const x = Math.abs(el.scrollLeft);
+        const v = ((x > 1 ? "start " : "") + (x < max - 1 ? "end" : "")).trim();
+        if ((el.getAttribute("data-aura-more") || "") === v) return;
+        if (v) el.setAttribute("data-aura-more", v);
+        else el.removeAttribute("data-aura-more");
+      };
+      const on = function() {
+        if (!raf) raf = requestAnimationFrame(mark);
+      };
+      mark();
+      el.addEventListener("scroll", on, { passive: true });
+      const ro = new ResizeObserver(on);
+      ro.observe(el);
+      Array.prototype.forEach.call(el.children, function(c) {
+        ro.observe(c);
+      });
+      const mo = new MutationObserver(function() {
+        Array.prototype.forEach.call(el.children, function(c) {
+          ro.observe(c);
+        });
+        on();
+      });
+      mo.observe(el, { childList: true });
+      return function() {
+        cancelAnimationFrame(raf);
+        el.removeEventListener("scroll", on);
+        ro.disconnect();
+        mo.disconnect();
+      };
+    },
+    [key]
+  );
+}
 export {
   FOCUSABLE,
   FilterSheet,
@@ -229,6 +271,7 @@ export {
   fixedTrapped,
   focusFirst,
   inClosedDetails,
+  isDev,
   isTabStop,
   omit,
   plainClick,
@@ -241,5 +284,6 @@ export {
   useIsoLayoutEffect,
   useMaybeControlled,
   useMergedRef,
-  useMounted
+  useMounted,
+  useScrollEdges
 };

package/dist/esm/tiles.js

@@ -27,6 +27,21 @@ const STATUS_WORD = {
   ok: "statusOk",
   unknown: "statusUnknown"
 };
+function breakAtDots(title) {
+  if (typeof title !== "string" || !/[./][A-Za-z]/.test(title)) return title;
+  const out = [];
+  let run = "";
+  for (let i = 0; i < title.length; i++) {
+    const c = title.charAt(i);
+    run += c;
+    if ((c === "." || c === "/") && i + 1 < title.length && /[A-Za-z]/.test(title.charAt(i + 1))) {
+      out.push(run, h("wbr", { key: i }));
+      run = "";
+    }
+  }
+  if (run) out.push(run);
+  return out;
+}
 function statusWord(status, t) {
   return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
 }
@@ -65,7 +80,7 @@ function statusTileElement(props, ref, Link, t, titleRef) {
       "span",
       { className: "aura-status-tile__head" },
       h(Icon, { name: h(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-      h("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h("span", { className: "aura-status-tile__title", ref: titleRef }, breakAtDots(props.title), comma),
       h("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
       hasValue ? h(
         "span",

package/dist/server/index.cjs

@@ -997,15 +997,16 @@ function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
 }
 var warned = {};
-function devWarnOnce(key, message) {
-  if (warned[key]) return;
-  let dev = false;
+function isDev() {
   try {
-    dev = process.env.NODE_ENV !== "production";
+    return process.env.NODE_ENV !== "production";
   } catch (e) {
-    dev = false;
+    return false;
   }
-  if (!dev) return;
+}
+function devWarnOnce(key, message) {
+  if (warned[key]) return;
+  if (!isDev()) return;
   warned[key] = true;
   console.warn("[AURA] " + message);
 }
@@ -1669,6 +1670,15 @@ function TableSkeleton(props) {
 var React6 = __toESM(require("react"), 1);
 var h5 = React6.createElement;
 var LAZY = Symbol.for("react.lazy");
+var ID = /([A-Za-z0-9]+(?:-[A-Za-z0-9]+)+)/;
+function keepIds(title) {
+  if (typeof title !== "string" || title.indexOf("-") < 0) return title;
+  const parts = title.split(ID);
+  if (parts.length < 2) return title;
+  return parts.map(function(p, i) {
+    return i % 2 && /\d/.test(p) && p.length <= 24 ? h5("span", { key: i, className: "aura-nowrap" }, p) : p;
+  });
+}
 function chipsOnly(node) {
   let el = 0;
   const walk = function(n3) {
@@ -1720,7 +1730,7 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
       tabIndex: props.focusTitleOnMount ? -1 : void 0,
       "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
     },
-    props.title
+    keepIds(props.title)
   );
   const hasActions = props.actions != null && props.actions !== false;
   const hasBarActions = props.actionsBar != null && props.actionsBar !== false;
@@ -1791,6 +1801,21 @@ var STATUS_WORD = {
   ok: "statusOk",
   unknown: "statusUnknown"
 };
+function breakAtDots(title) {
+  if (typeof title !== "string" || !/[./][A-Za-z]/.test(title)) return title;
+  const out = [];
+  let run = "";
+  for (let i = 0; i < title.length; i++) {
+    const c = title.charAt(i);
+    run += c;
+    if ((c === "." || c === "/") && i + 1 < title.length && /[A-Za-z]/.test(title.charAt(i + 1))) {
+      out.push(run, h6("wbr", { key: i }));
+      run = "";
+    }
+  }
+  if (run) out.push(run);
+  return out;
+}
 function statusWord(status, t) {
   return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
 }
@@ -1829,7 +1854,7 @@ function statusTileElement(props, ref, Link, t, titleRef) {
       "span",
       { className: "aura-status-tile__head" },
       h6(Icon, { name: h6(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-      h6("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h6("span", { className: "aura-status-tile__title", ref: titleRef }, breakAtDots(props.title), comma),
       h6("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
       hasValue ? h6(
         "span",

package/dist/server/index.js

@@ -930,15 +930,16 @@ function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
 }
 var warned = {};
-function devWarnOnce(key, message) {
-  if (warned[key]) return;
-  let dev = false;
+function isDev() {
   try {
-    dev = process.env.NODE_ENV !== "production";
+    return process.env.NODE_ENV !== "production";
   } catch (e) {
-    dev = false;
+    return false;
   }
-  if (!dev) return;
+}
+function devWarnOnce(key, message) {
+  if (warned[key]) return;
+  if (!isDev()) return;
   warned[key] = true;
   console.warn("[AURA] " + message);
 }
@@ -1602,6 +1603,15 @@ function TableSkeleton(props) {
 import * as React6 from "react";
 var h5 = React6.createElement;
 var LAZY = Symbol.for("react.lazy");
+var ID = /([A-Za-z0-9]+(?:-[A-Za-z0-9]+)+)/;
+function keepIds(title) {
+  if (typeof title !== "string" || title.indexOf("-") < 0) return title;
+  const parts = title.split(ID);
+  if (parts.length < 2) return title;
+  return parts.map(function(p, i) {
+    return i % 2 && /\d/.test(p) && p.length <= 24 ? h5("span", { key: i, className: "aura-nowrap" }, p) : p;
+  });
+}
 function chipsOnly(node) {
   let el = 0;
   const walk = function(n3) {
@@ -1653,7 +1663,7 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
       tabIndex: props.focusTitleOnMount ? -1 : void 0,
       "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
     },
-    props.title
+    keepIds(props.title)
   );
   const hasActions = props.actions != null && props.actions !== false;
   const hasBarActions = props.actionsBar != null && props.actionsBar !== false;
@@ -1724,6 +1734,21 @@ var STATUS_WORD = {
   ok: "statusOk",
   unknown: "statusUnknown"
 };
+function breakAtDots(title) {
+  if (typeof title !== "string" || !/[./][A-Za-z]/.test(title)) return title;
+  const out = [];
+  let run = "";
+  for (let i = 0; i < title.length; i++) {
+    const c = title.charAt(i);
+    run += c;
+    if ((c === "." || c === "/") && i + 1 < title.length && /[A-Za-z]/.test(title.charAt(i + 1))) {
+      out.push(run, h6("wbr", { key: i }));
+      run = "";
+    }
+  }
+  if (run) out.push(run);
+  return out;
+}
 function statusWord(status, t) {
   return String(t[STATUS_WORD[status]] || STATUS_WORD[status]);
 }
@@ -1762,7 +1787,7 @@ function statusTileElement(props, ref, Link, t, titleRef) {
       "span",
       { className: "aura-status-tile__head" },
       h6(Icon, { name: h6(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-      h6("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h6("span", { className: "aura-status-tile__title", ref: titleRef }, breakAtDots(props.title), comma),
       h6("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
       hasValue ? h6(
         "span",

package/dist/styles.css

@@ -820,6 +820,20 @@ a.aura-icon-btn { text-decoration: none; }
  * indicator paints over its bottom row. The list scrolls sideways (overflow-x), and a scroll container clips at its
  * padding box: an indicator pulled 1px over a border (as up to 5.22) showed only half its height. Same box height. */
 .aura-tabs__list { display: flex; gap: var(--aura-space-6); box-shadow: inset 0 -1px 0 var(--aura-border-default); overflow-x: auto; scrollbar-width: none; }
+/* 5.78 (visual audit 24): a list wider than its box fades the end (or ends) with more tabs, so a cut tab reads as
+ * "scroll for more", not as a broken label. Logical: in RTL the fades swap sides. */
+.aura-tabs__list[data-aura-more] {
+  --aura-fade-s: 0px; --aura-fade-e: 0px;
+  -webkit-mask-image: linear-gradient(to right, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
+  mask-image: linear-gradient(to right, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
+}
+.aura-tabs__list[data-aura-more] { scroll-padding-inline: var(--aura-space-8); } /* a focused tab scrolls clear of the fade */
+.aura-tabs__list[data-aura-more~='start'] { --aura-fade-s: var(--aura-space-8); }
+.aura-tabs__list[data-aura-more~='end'] { --aura-fade-e: var(--aura-space-8); }
+[dir='rtl'] .aura-tabs__list[data-aura-more], .aura-tabs__list[data-aura-more][dir='rtl'] {
+  -webkit-mask-image: linear-gradient(to left, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
+  mask-image: linear-gradient(to left, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
+}
 .aura-tab {
   position: relative; display: inline-flex; align-items: center; gap: var(--aura-space-2); flex: none;
   box-sizing: border-box; /* 5.39: a link tab (<a>) was 2px taller than a button tab — its underline sat outside the height */
@@ -999,6 +1013,9 @@ a.aura-tab { text-decoration: none; }
 /* ---------- Combobox ---------- */
 .aura-combo { cursor: text; }
 .aura-combo .aura-input__control { padding-right: calc(var(--aura-space-2) + 2 * var(--aura-control-sm)); }
+/* 5.78 (visual audit 25): room for the clear button only while there is one — an empty TimePicker in a narrow column
+ * showed "hh:m". (Also on a coarse pointer and with touchHeight, below.) */
+.aura-combo:not(.is-multi):not(:has(.aura-combo__clear)) .aura-input__control { padding-right: calc(var(--aura-space-2) + var(--aura-control-sm)); }
 .aura-combo__clear, .aura-combo__toggle, .aura-date__toggle {
   position: absolute; display: inline-flex; align-items: center; justify-content: center;
   width: var(--aura-control-sm); height: var(--aura-control-sm); padding: 0; border: 0; border-radius: var(--aura-radius-full);
@@ -1294,6 +1311,9 @@ summary.aura-link::-webkit-details-marker { display: none; }
 .aura-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--aura-space-4) var(--aura-space-6); min-width: 0; font-family: var(--font-sans); }
 .aura-page-header__text { display: flex; flex-direction: column; gap: var(--aura-space-1); flex: 1 1 320px; min-width: 0; }
 .aura-page-header__eyebrow { margin: 0; font-family: var(--font-mono); font-size: max(12px, .75rem); line-height: 1.7; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
+.aura-nowrap { white-space: nowrap; } /* 5.78: a code or document number kept on one line */
+/* …in a PageHeader title the number moves to the next line whole, and still breaks if it is longer than a line. */
+.aura-page-header__title .aura-nowrap { display: inline-block; max-width: 100%; white-space: normal; }
 .aura-page-header__title { margin: 0; font-family: var(--font-display); font-size: var(--aura-page-header-title-size, max(28px, 1.75rem)); line-height: var(--aura-page-header-title-line-height, 1.15); font-weight: 600; letter-spacing: -0.01em; color: var(--aura-fg-primary); overflow-wrap: anywhere; }
 .aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
 .aura-page-header__meta { min-width: 0; font-size: max(13px, .8125rem); line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
@@ -1323,6 +1343,8 @@ summary.aura-link::-webkit-details-marker { display: none; }
  * span as wide as its text and the page scrolled sideways. :where keeps the selector's weight as before. */
 @media (max-width: 639.98px) {
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-sm:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11): a label that wraps to two lines is a rounded box, not a lozenge */
+  .aura-page-header--actions-full-below-sm:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78: actionsBar's split — the header's own actions, not the strip */
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions > .aura-page-header__bar > :where(:not(.aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; } /* 5.71: actionsBar in the row, as the actions (5.61) */
@@ -1333,10 +1355,14 @@ summary.aura-link::-webkit-details-marker { display: none; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > * { min-width: 0; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
+  .aura-page-header--actions-full-below-sm:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11) */
+  .aura-page-header--actions-full-below-sm:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; } /* 5.45 (Chamber-OS addendum 52): centred on a taller button */
 }
 @media (max-width: 767.98px) {
   .aura-page-header--actions-full-below-md > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-md:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11): a label that wraps to two lines is a rounded box, not a lozenge */
+  .aura-page-header--actions-full-below-md:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78: actionsBar's split — the header's own actions, not the strip */
   .aura-page-header--actions-full-below-md > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions > .aura-page-header__bar > :where(:not(.aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; } /* 5.71: actionsBar in the row, as the actions (5.61) */
@@ -1346,10 +1372,14 @@ summary.aura-link::-webkit-details-marker { display: none; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > * { min-width: 0; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
+  .aura-page-header--actions-full-below-md:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11) */
+  .aura-page-header--actions-full-below-md:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; } /* 5.45 (Chamber-OS addendum 52): centred on a taller button */
 }
 @media (max-width: 1023.98px) {
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-lg:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11): a label that wraps to two lines is a rounded box, not a lozenge */
+  .aura-page-header--actions-full-below-lg:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78: actionsBar's split — the header's own actions, not the strip */
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions > .aura-page-header__bar > :where(:not(.aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; } /* 5.71: actionsBar in the row, as the actions (5.61) */
@@ -1359,6 +1389,8 @@ summary.aura-link::-webkit-details-marker { display: none; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > * { min-width: 0; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
+  .aura-page-header--actions-full-below-lg:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11) */
+  .aura-page-header--actions-full-below-lg:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; } /* 5.45 (Chamber-OS addendum 52): centred on a taller button */
 }
 /* 5.48 (Chamber-OS 154): only on a screen taller than 30rem (5.49: 480px at the default text size) — on a short one (400% zoom, a phone held sideways) the
@@ -1379,7 +1411,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
   .aura-page-header--actions-bar-below-sm[data-aura-bar="empty"] > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm[data-aura-bar="empty"] > .aura-page-header__actions > .aura-page-header__bar { display: none; }
   /* …and before hydration, from the markup alone (actionsBar's strip whose element children but the status are all `hidden` or visually hidden): it already goes; the page padding follows once the client has looked. */
   .aura-page-header--actions-bar-below-sm:not([data-aura-bar="shown"]) > .aura-page-header__actions > .aura-page-header__bar:not(:has(> :not(.aura-page-header__status, [hidden], .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text))):has(> *) { display: none; }
-  :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-3) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
+  :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-4) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); /* 5.78 (audit 9): 16px both sides, the phone gutter */ background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
   /* 5.54 (Chamber-OS 166): the bar's buttons are 44px whatever the density, as ActionBar's on a phone. */
   :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) { --aura-button-height: var(--aura-touch-target); --aura-button-height-sm: var(--aura-touch-target); }
   :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) > .aura-icon-btn, :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
@@ -1405,7 +1437,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
   .aura-page-header--actions-bar-below-md[data-aura-bar="empty"] > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md[data-aura-bar="empty"] > .aura-page-header__actions > .aura-page-header__bar { display: none; }
   /* …and before hydration, from the markup alone (actionsBar's strip whose element children but the status are all `hidden` or visually hidden): it already goes; the page padding follows once the client has looked. */
   .aura-page-header--actions-bar-below-md:not([data-aura-bar="shown"]) > .aura-page-header__actions > .aura-page-header__bar:not(:has(> :not(.aura-page-header__status, [hidden], .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text))):has(> *) { display: none; }
-  :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-3) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
+  :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-4) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); /* 5.78 (audit 9): 16px both sides, the phone gutter */ background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
   /* 5.54 (Chamber-OS 166): the bar's buttons are 44px whatever the density, as ActionBar's on a phone. */
   :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) { --aura-button-height: var(--aura-touch-target); --aura-button-height-sm: var(--aura-touch-target); }
   :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) > .aura-icon-btn, :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
@@ -1913,6 +1945,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-combo__toggle, .aura-date__toggle { right: 0; }
   .aura-combo__clear, .aura-date .aura-combo__clear { right: var(--aura-touch-target); }
   .aura-combo .aura-input__control, .aura-date .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+  .aura-combo:not(.is-multi):not(:has(.aura-combo__clear)) .aura-input__control { padding-right: calc(var(--aura-space-1) + var(--aura-touch-target)); }
   .aura-combo__clear::after, .aura-combo__toggle::after, .aura-date__toggle::after, .aura-tag__remove::after {
     content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--aura-touch-target)); height: max(100%, var(--aura-touch-target)); transform: translate(-50%, -50%);
   }
@@ -1983,6 +2016,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 :is(.aura-field, .aura-filterbar).is-touch-always :is(.aura-combo__toggle, .aura-date__toggle) { right: 0; }
 :is(.aura-field, .aura-filterbar).is-touch-always .aura-combo__clear { right: var(--aura-touch-target); }
 :is(.aura-field, .aura-filterbar).is-touch-always :is(.aura-combo, .aura-date) .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+:is(.aura-field, .aura-filterbar).is-touch-always .aura-combo:not(.is-multi):not(:has(.aura-combo__clear)) .aura-input__control { padding-right: calc(var(--aura-space-1) + var(--aura-touch-target)); }
 :is(.aura-field, .aura-filterbar).is-touch-always .aura-combo.is-multi { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
 :is(.aura-field, .aura-filterbar).is-touch-always .aura-combo.is-multi :is(.aura-combo__clear, .aura-combo__toggle) { top: calc((var(--aura-input-height) - 2px - 40px) / 2); }
 :is(.aura-field, .aura-filterbar).is-touch-always .aura-number__step { width: var(--aura-touch-target); }
@@ -1991,6 +2025,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   :is(.aura-field, .aura-filterbar).is-touch :is(.aura-combo__toggle, .aura-date__toggle) { right: 0; }
   :is(.aura-field, .aura-filterbar).is-touch .aura-combo__clear { right: var(--aura-touch-target); }
   :is(.aura-field, .aura-filterbar).is-touch :is(.aura-combo, .aura-date) .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+  :is(.aura-field, .aura-filterbar).is-touch .aura-combo:not(.is-multi):not(:has(.aura-combo__clear)) .aura-input__control { padding-right: calc(var(--aura-space-1) + var(--aura-touch-target)); }
   :is(.aura-field, .aura-filterbar).is-touch .aura-combo.is-multi { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
   :is(.aura-field, .aura-filterbar).is-touch .aura-combo.is-multi :is(.aura-combo__clear, .aura-combo__toggle) { top: calc((var(--aura-input-height) - 2px - 40px) / 2); }
   :is(.aura-field, .aura-filterbar).is-touch .aura-number__step { width: var(--aura-touch-target); }
@@ -2358,6 +2393,25 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   :root:has(.aura-actionbar--edge:not(.is-idle)) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-actionbar-space)); }
   :root:has(.aura-actionbar--edge:not(.is-idle)):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-actionbar-space); }
 }
+/* 5.78 (visual audit 9): one rule for the bottom strips on a phone, as PageHeader's (5.48) — the status on its own row
+ * at the top, the actions sharing the row under it (an IconButton keeps its square; labels too long to share take a row
+ * each), 16px both sides as the page. edgeBelow="md" follows it up to 768px, as PageHeader's md strip. */
+@media (max-width: 639.98px) {
+  @container aura-actionbar (max-width: 639.98px) {
+    :is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) > .aura-actionbar__inner { padding-inline: var(--aura-space-4); }
+    :is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) > .aura-actionbar__inner > .aura-actionbar__status:not(:empty) { flex-basis: 100%; }
+    :is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) .aura-actionbar__actions { flex: 1 1 auto; min-width: 0; margin-inline-start: 0; }
+    :is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) .aura-actionbar__actions > :not(.aura-icon-btn, :has(> .aura-icon-btn)) { flex: 1 1 0; min-width: max-content; } /* as PageHeader's strip (5.61): shares, a long label takes its own row */
+    :is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) .aura-actionbar__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor):not(:has(> .aura-icon-btn)) > .aura-btn { width: 100%; }
+  }
+}
+@media (min-width: 640px) and (max-width: 767.98px) {
+  .aura-actionbar--edge-below-md:not(.is-idle) > .aura-actionbar__inner { padding-inline: var(--aura-space-4); }
+  .aura-actionbar--edge-below-md:not(.is-idle) > .aura-actionbar__inner > .aura-actionbar__status:not(:empty) { flex-basis: 100%; }
+  .aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions { flex: 1 1 auto; min-width: 0; margin-inline-start: 0; }
+  .aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions > :not(.aura-icon-btn, :has(> .aura-icon-btn)) { flex: 1 1 0; min-width: max-content; } /* as PageHeader's strip (5.61): shares, a long label takes its own row */
+  .aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor):not(:has(> .aura-icon-btn)) > .aura-btn { width: 100%; }
+}
 @media (max-width: 639.98px) { .aura-actionbar--edge-below-sm:not(.is-idle) { border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; } }
 @media (max-width: 639.98px) and (min-height: 30.00125rem) {
   .aura-actionbar--edge-below-sm:not(.is-idle) { position: fixed; left: 0; right: 0; width: auto; bottom: var(--aura-bottomnav-offset, 0px); margin: 0; padding-bottom: max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px)); }
@@ -2581,7 +2635,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-table__head:not(.has-select-all) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
   .aura-table__head > .aura-table__sel { position: static; width: auto; gap: var(--aura-space-3); padding: 0 var(--aura-space-4); }
   .aura-table__sel-text { display: inline; color: var(--aura-fg-secondary); }
-  .aura-table__gutter { display: none; }
+  .aura-table__gutter, .aura-table__gutter--end.has-picker { display: none; } /* 5.78 (audit 20): the column picker's slot too, which squeezed the card's title */
   .aura-table__row, .aura-table__row:last-child {
     height: auto; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-4);
     margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);

package/dist/styles.layer.css

@@ -822,6 +822,20 @@ a.aura-icon-btn { text-decoration: none; }
  * indicator paints over its bottom row. The list scrolls sideways (overflow-x), and a scroll container clips at its
  * padding box: an indicator pulled 1px over a border (as up to 5.22) showed only half its height. Same box height. */
 .aura-tabs__list { display: flex; gap: var(--aura-space-6); box-shadow: inset 0 -1px 0 var(--aura-border-default); overflow-x: auto; scrollbar-width: none; }
+/* 5.78 (visual audit 24): a list wider than its box fades the end (or ends) with more tabs, so a cut tab reads as
+ * "scroll for more", not as a broken label. Logical: in RTL the fades swap sides. */
+.aura-tabs__list[data-aura-more] {
+  --aura-fade-s: 0px; --aura-fade-e: 0px;
+  -webkit-mask-image: linear-gradient(to right, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
+  mask-image: linear-gradient(to right, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
+}
+.aura-tabs__list[data-aura-more] { scroll-padding-inline: var(--aura-space-8); } /* a focused tab scrolls clear of the fade */
+.aura-tabs__list[data-aura-more~='start'] { --aura-fade-s: var(--aura-space-8); }
+.aura-tabs__list[data-aura-more~='end'] { --aura-fade-e: var(--aura-space-8); }
+[dir='rtl'] .aura-tabs__list[data-aura-more], .aura-tabs__list[data-aura-more][dir='rtl'] {
+  -webkit-mask-image: linear-gradient(to left, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
+  mask-image: linear-gradient(to left, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
+}
 .aura-tab {
   position: relative; display: inline-flex; align-items: center; gap: var(--aura-space-2); flex: none;
   box-sizing: border-box; /* 5.39: a link tab (<a>) was 2px taller than a button tab — its underline sat outside the height */
@@ -1001,6 +1015,9 @@ a.aura-tab { text-decoration: none; }
 /* ---------- Combobox ---------- */
 .aura-combo { cursor: text; }
 .aura-combo .aura-input__control { padding-right: calc(var(--aura-space-2) + 2 * var(--aura-control-sm)); }
+/* 5.78 (visual audit 25): room for the clear button only while there is one — an empty TimePicker in a narrow column
+ * showed "hh:m". (Also on a coarse pointer and with touchHeight, below.) */
+.aura-combo:not(.is-multi):not(:has(.aura-combo__clear)) .aura-input__control { padding-right: calc(var(--aura-space-2) + var(--aura-control-sm)); }
 .aura-combo__clear, .aura-combo__toggle, .aura-date__toggle {
   position: absolute; display: inline-flex; align-items: center; justify-content: center;
   width: var(--aura-control-sm); height: var(--aura-control-sm); padding: 0; border: 0; border-radius: var(--aura-radius-full);
@@ -1296,6 +1313,9 @@ summary.aura-link::-webkit-details-marker { display: none; }
 .aura-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--aura-space-4) var(--aura-space-6); min-width: 0; font-family: var(--font-sans); }
 .aura-page-header__text { display: flex; flex-direction: column; gap: var(--aura-space-1); flex: 1 1 320px; min-width: 0; }
 .aura-page-header__eyebrow { margin: 0; font-family: var(--font-mono); font-size: max(12px, .75rem); line-height: 1.7; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
+.aura-nowrap { white-space: nowrap; } /* 5.78: a code or document number kept on one line */
+/* …in a PageHeader title the number moves to the next line whole, and still breaks if it is longer than a line. */
+.aura-page-header__title .aura-nowrap { display: inline-block; max-width: 100%; white-space: normal; }
 .aura-page-header__title { margin: 0; font-family: var(--font-display); font-size: var(--aura-page-header-title-size, max(28px, 1.75rem)); line-height: var(--aura-page-header-title-line-height, 1.15); font-weight: 600; letter-spacing: -0.01em; color: var(--aura-fg-primary); overflow-wrap: anywhere; }
 .aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
 .aura-page-header__meta { min-width: 0; font-size: max(13px, .8125rem); line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
@@ -1325,6 +1345,8 @@ summary.aura-link::-webkit-details-marker { display: none; }
  * span as wide as its text and the page scrolled sideways. :where keeps the selector's weight as before. */
 @media (max-width: 639.98px) {
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-sm:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11): a label that wraps to two lines is a rounded box, not a lozenge */
+  .aura-page-header--actions-full-below-sm:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78: actionsBar's split — the header's own actions, not the strip */
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions > .aura-page-header__bar > :where(:not(.aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; } /* 5.71: actionsBar in the row, as the actions (5.61) */
@@ -1335,10 +1357,14 @@ summary.aura-link::-webkit-details-marker { display: none; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > * { min-width: 0; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
+  .aura-page-header--actions-full-below-sm:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11) */
+  .aura-page-header--actions-full-below-sm:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; } /* 5.45 (Chamber-OS addendum 52): centred on a taller button */
 }
 @media (max-width: 767.98px) {
   .aura-page-header--actions-full-below-md > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-md:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11): a label that wraps to two lines is a rounded box, not a lozenge */
+  .aura-page-header--actions-full-below-md:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78: actionsBar's split — the header's own actions, not the strip */
   .aura-page-header--actions-full-below-md > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions > .aura-page-header__bar > :where(:not(.aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; } /* 5.71: actionsBar in the row, as the actions (5.61) */
@@ -1348,10 +1374,14 @@ summary.aura-link::-webkit-details-marker { display: none; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > * { min-width: 0; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
+  .aura-page-header--actions-full-below-md:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11) */
+  .aura-page-header--actions-full-below-md:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; } /* 5.45 (Chamber-OS addendum 52): centred on a taller button */
 }
 @media (max-width: 1023.98px) {
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
+  .aura-page-header--actions-full-below-lg:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11): a label that wraps to two lines is a rounded box, not a lozenge */
+  .aura-page-header--actions-full-below-lg:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78: actionsBar's split — the header's own actions, not the strip */
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions > .aura-page-header__bar > :where(:not(.aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; } /* 5.71: actionsBar in the row, as the actions (5.61) */
@@ -1361,6 +1391,8 @@ summary.aura-link::-webkit-details-marker { display: none; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > * { min-width: 0; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
+  .aura-page-header--actions-full-below-lg:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11) */
+  .aura-page-header--actions-full-below-lg:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; } /* 5.45 (Chamber-OS addendum 52): centred on a taller button */
 }
 /* 5.48 (Chamber-OS 154): only on a screen taller than 30rem (5.49: 480px at the default text size) — on a short one (400% zoom, a phone held sideways) the
@@ -1381,7 +1413,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
   .aura-page-header--actions-bar-below-sm[data-aura-bar="empty"] > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm[data-aura-bar="empty"] > .aura-page-header__actions > .aura-page-header__bar { display: none; }
   /* …and before hydration, from the markup alone (actionsBar's strip whose element children but the status are all `hidden` or visually hidden): it already goes; the page padding follows once the client has looked. */
   .aura-page-header--actions-bar-below-sm:not([data-aura-bar="shown"]) > .aura-page-header__actions > .aura-page-header__bar:not(:has(> :not(.aura-page-header__status, [hidden], .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text))):has(> *) { display: none; }
-  :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-3) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
+  :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-4) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); /* 5.78 (audit 9): 16px both sides, the phone gutter */ background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
   /* 5.54 (Chamber-OS 166): the bar's buttons are 44px whatever the density, as ActionBar's on a phone. */
   :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) { --aura-button-height: var(--aura-touch-target); --aura-button-height-sm: var(--aura-touch-target); }
   :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) > .aura-icon-btn, :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
@@ -1407,7 +1439,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
   .aura-page-header--actions-bar-below-md[data-aura-bar="empty"] > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md[data-aura-bar="empty"] > .aura-page-header__actions > .aura-page-header__bar { display: none; }
   /* …and before hydration, from the markup alone (actionsBar's strip whose element children but the status are all `hidden` or visually hidden): it already goes; the page padding follows once the client has looked. */
   .aura-page-header--actions-bar-below-md:not([data-aura-bar="shown"]) > .aura-page-header__actions > .aura-page-header__bar:not(:has(> :not(.aura-page-header__status, [hidden], .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text))):has(> *) { display: none; }
-  :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-3) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
+  :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-4) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); /* 5.78 (audit 9): 16px both sides, the phone gutter */ background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
   /* 5.54 (Chamber-OS 166): the bar's buttons are 44px whatever the density, as ActionBar's on a phone. */
   :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) { --aura-button-height: var(--aura-touch-target); --aura-button-height-sm: var(--aura-touch-target); }
   :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) > .aura-icon-btn, :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
@@ -1915,6 +1947,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-combo__toggle, .aura-date__toggle { right: 0; }
   .aura-combo__clear, .aura-date .aura-combo__clear { right: var(--aura-touch-target); }
   .aura-combo .aura-input__control, .aura-date .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+  .aura-combo:not(.is-multi):not(:has(.aura-combo__clear)) .aura-input__control { padding-right: calc(var(--aura-space-1) + var(--aura-touch-target)); }
   .aura-combo__clear::after, .aura-combo__toggle::after, .aura-date__toggle::after, .aura-tag__remove::after {
     content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--aura-touch-target)); height: max(100%, var(--aura-touch-target)); transform: translate(-50%, -50%);
   }
@@ -1985,6 +2018,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 :is(.aura-field, .aura-filterbar).is-touch-always :is(.aura-combo__toggle, .aura-date__toggle) { right: 0; }
 :is(.aura-field, .aura-filterbar).is-touch-always .aura-combo__clear { right: var(--aura-touch-target); }
 :is(.aura-field, .aura-filterbar).is-touch-always :is(.aura-combo, .aura-date) .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+:is(.aura-field, .aura-filterbar).is-touch-always .aura-combo:not(.is-multi):not(:has(.aura-combo__clear)) .aura-input__control { padding-right: calc(var(--aura-space-1) + var(--aura-touch-target)); }
 :is(.aura-field, .aura-filterbar).is-touch-always .aura-combo.is-multi { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
 :is(.aura-field, .aura-filterbar).is-touch-always .aura-combo.is-multi :is(.aura-combo__clear, .aura-combo__toggle) { top: calc((var(--aura-input-height) - 2px - 40px) / 2); }
 :is(.aura-field, .aura-filterbar).is-touch-always .aura-number__step { width: var(--aura-touch-target); }
@@ -1993,6 +2027,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   :is(.aura-field, .aura-filterbar).is-touch :is(.aura-combo__toggle, .aura-date__toggle) { right: 0; }
   :is(.aura-field, .aura-filterbar).is-touch .aura-combo__clear { right: var(--aura-touch-target); }
   :is(.aura-field, .aura-filterbar).is-touch :is(.aura-combo, .aura-date) .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+  :is(.aura-field, .aura-filterbar).is-touch .aura-combo:not(.is-multi):not(:has(.aura-combo__clear)) .aura-input__control { padding-right: calc(var(--aura-space-1) + var(--aura-touch-target)); }
   :is(.aura-field, .aura-filterbar).is-touch .aura-combo.is-multi { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
   :is(.aura-field, .aura-filterbar).is-touch .aura-combo.is-multi :is(.aura-combo__clear, .aura-combo__toggle) { top: calc((var(--aura-input-height) - 2px - 40px) / 2); }
   :is(.aura-field, .aura-filterbar).is-touch .aura-number__step { width: var(--aura-touch-target); }
@@ -2360,6 +2395,25 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   :root:has(.aura-actionbar--edge:not(.is-idle)) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-actionbar-space)); }
   :root:has(.aura-actionbar--edge:not(.is-idle)):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-actionbar-space); }
 }
+/* 5.78 (visual audit 9): one rule for the bottom strips on a phone, as PageHeader's (5.48) — the status on its own row
+ * at the top, the actions sharing the row under it (an IconButton keeps its square; labels too long to share take a row
+ * each), 16px both sides as the page. edgeBelow="md" follows it up to 768px, as PageHeader's md strip. */
+@media (max-width: 639.98px) {
+  @container aura-actionbar (max-width: 639.98px) {
+    :is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) > .aura-actionbar__inner { padding-inline: var(--aura-space-4); }
+    :is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) > .aura-actionbar__inner > .aura-actionbar__status:not(:empty) { flex-basis: 100%; }
+    :is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) .aura-actionbar__actions { flex: 1 1 auto; min-width: 0; margin-inline-start: 0; }
+    :is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) .aura-actionbar__actions > :not(.aura-icon-btn, :has(> .aura-icon-btn)) { flex: 1 1 0; min-width: max-content; } /* as PageHeader's strip (5.61): shares, a long label takes its own row */
+    :is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) .aura-actionbar__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor):not(:has(> .aura-icon-btn)) > .aura-btn { width: 100%; }
+  }
+}
+@media (min-width: 640px) and (max-width: 767.98px) {
+  .aura-actionbar--edge-below-md:not(.is-idle) > .aura-actionbar__inner { padding-inline: var(--aura-space-4); }
+  .aura-actionbar--edge-below-md:not(.is-idle) > .aura-actionbar__inner > .aura-actionbar__status:not(:empty) { flex-basis: 100%; }
+  .aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions { flex: 1 1 auto; min-width: 0; margin-inline-start: 0; }
+  .aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions > :not(.aura-icon-btn, :has(> .aura-icon-btn)) { flex: 1 1 0; min-width: max-content; } /* as PageHeader's strip (5.61): shares, a long label takes its own row */
+  .aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor):not(:has(> .aura-icon-btn)) > .aura-btn { width: 100%; }
+}
 @media (max-width: 639.98px) { .aura-actionbar--edge-below-sm:not(.is-idle) { border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; } }
 @media (max-width: 639.98px) and (min-height: 30.00125rem) {
   .aura-actionbar--edge-below-sm:not(.is-idle) { position: fixed; left: 0; right: 0; width: auto; bottom: var(--aura-bottomnav-offset, 0px); margin: 0; padding-bottom: max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px)); }
@@ -2583,7 +2637,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-table__head:not(.has-select-all) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
   .aura-table__head > .aura-table__sel { position: static; width: auto; gap: var(--aura-space-3); padding: 0 var(--aura-space-4); }
   .aura-table__sel-text { display: inline; color: var(--aura-fg-secondary); }
-  .aura-table__gutter { display: none; }
+  .aura-table__gutter, .aura-table__gutter--end.has-picker { display: none; } /* 5.78 (audit 20): the column picker's slot too, which squeezed the card's title */
   .aura-table__row, .aura-table__row:last-child {
     height: auto; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-4);
     margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.77.0",
+  "version": "5.78.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",
@@ -88,7 +88,7 @@
     "test:hydrate": "node scripts/hydrate-test.ts",
     "size": "node scripts/size-check.ts",
     "preexamples": "node scripts/build.ts",
-    "test:layout": "node scripts/layout-test.ts"
+    "test:layout": "node scripts/layout-test.ts && node scripts/dev-warn-test.ts"
   },
   "peerDependencies": {
     "react": ">=18",