@jirawatpyk/aura-react 5.72.0 → 5.74.0

package/README.md

@@ -186,6 +186,16 @@ 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.74 — Chamber-OS addendum 94 (#193)
+
+- **A PageHeader bar with nothing left in it goes:** when every direct child of the phone bar but the status line (looking through `display: contents` wrappers) is hidden — the `hidden` attribute, `display: none`, `visibility: hidden` set on it, or visually hidden text (an `aria-describedby` note: `.sr-only`-style classes, or an inline absolutely positioned, clipped box) — and no text sits in it, the strip takes no box and the page loses its bar padding and `scroll-padding` (`--aura-page-actions-height` is `0px`), as if there were no bar. A status alone is not a bar. It applies to `actionsBar`'s strip and to the plain `actionsBarBelow` bar, and follows a child being shown or hidden (its `hidden`, `class` or `style`), added or removed, at most once a frame — for a pay bar that hides, not unmounts, once paying succeeds. A bar under a `visibility: hidden` ancestor (a page-enter gate) is not taken for empty. The client marks the header `data-aura-bar="empty"` or `"shown"`; before it does (server HTML), `actionsBar`'s strip whose element children are all `hidden` or visually hidden already goes, though the page padding waits for the client. From the breakpoint up nothing changes. A `:has(> [hidden])` stand-in can go once your PageHeaders render on the client. The `hidden` attribute is trusted as hidden: don't give a hidden child a class that displays it anyway (Tailwind v3's `flex` beats the browser's `[hidden]`).
+
+## 5.73 — Chamber-OS addendum 93 follow-up (#192)
+
+- **Hidden bars, every way a tab panel hides them:** the edge ActionBar and PageHeader's `actionsBarBelow` bar now share one rule. The newest bar that is pinned and on screen sets the page's clearance (`--aura-actionbar-height`, `--aura-page-actions-height`). A bar with no box (`display: none`), `visibility: hidden`, or inside `content-visibility: hidden` (`hidden="until-found"`) is skipped. A visibility switch resizes nothing, so the bars are re-read after any click, key press, focus move, transition, find-in-page reveal (`beforematch`) or history change; a switch made by a timer or a resolved request is caught at the next of those.
+- **When no bar is on screen:** a pinned bar hidden only by `visibility` (a gate that may lift with no event) keeps its room — too much space is cosmetic, too little hides content; with every pinned bar boxless (`display: none` tab panels) the variable is `0px`, so the page keeps no space for a strip that isn't there (5.72 removed it, and the CSS then reserved its 60px / 7rem fallback). With no bar pinned (a wide or short screen) it is removed, as before.
+- **PageHeader in tab panels:** one PageHeader with `actionsBarBelow` per tab panel now works like the ActionBars: the shown one's bar counts, where before the newest one — shown or not — set the height. The development warning now fires only when two bars are on screen at once.
+
 ## 5.72 — Chamber-OS addendum 93 (#192)
 
 - **An edge ActionBar in a hidden tab no longer zeroes the page's clearance:** a bar with `look="edge"` / `edgeBelow` inside a `display: none` parent (an inactive tab panel) still computes `position: fixed` but has no box; it is now skipped, so `--aura-actionbar-height` (and with it the page's end padding and `scroll-padding-bottom`) is the visible bar's height. Switching tabs moves it to the bar now shown; with none shown it is removed. Mounting one bar for the active tab is still the simplest shape.

package/dist/aura.bundle.js

@@ -418,6 +418,76 @@ window.Aura = (() => {
     }
     return false;
   }
+  function onScreen(el) {
+    if (el.offsetHeight <= 0 || el.getClientRects().length === 0) return false;
+    const check = el.checkVisibility;
+    if (typeof check === "function") return check.call(el, { visibilityProperty: true });
+    const v = getComputedStyle(el).visibility;
+    return v !== "hidden" && v !== "collapse";
+  }
+  function barStack(name, onMany, onRead) {
+    const els = [];
+    let frame = 0;
+    const docEvents = ["click", "keydown", "focusin", "transitionend", "beforematch"];
+    const winEvents = ["hashchange", "popstate"];
+    function write() {
+      if (frame) cancelAnimationFrame(frame);
+      frame = 0;
+      if (onRead) onRead();
+      const root = document.documentElement;
+      let shown = null, boxed = null, pinned2 = false, many = 0;
+      for (let i = els.length - 1; i >= 0; i--) {
+        const el = els[i];
+        if (getComputedStyle(el).position !== "fixed") continue;
+        pinned2 = true;
+        if (onScreen(el)) {
+          many++;
+          if (!shown) shown = el;
+        } else if (!boxed && el.offsetHeight > 0) boxed = el;
+      }
+      if (many > 1 && onMany) onMany();
+      const use = shown || boxed;
+      if (use) root.style.setProperty(name, use.offsetHeight + "px");
+      else if (pinned2) root.style.setProperty(name, "0px");
+      else root.style.removeProperty(name);
+    }
+    function later() {
+      if (!frame) frame = requestAnimationFrame(write);
+    }
+    function now() {
+      write();
+      later();
+    }
+    function listen(on) {
+      docEvents.forEach(function(t) {
+        const f = t === "focusin" ? now : later;
+        if (on) document.addEventListener(t, f, true);
+        else document.removeEventListener(t, f, true);
+      });
+      winEvents.forEach(function(t) {
+        if (on) window.addEventListener(t, later);
+        else window.removeEventListener(t, later);
+      });
+    }
+    return {
+      add: function(el) {
+        els.push(el);
+        if (els.length === 1) listen(true);
+        write();
+      },
+      remove: function(el) {
+        const i = els.indexOf(el);
+        if (i >= 0) els.splice(i, 1);
+        if (!els.length) {
+          listen(false);
+          if (frame) cancelAnimationFrame(frame);
+          frame = 0;
+        }
+        write();
+      },
+      write
+    };
+  }
 
   // src/display.tsx
   var React4 = __toESM(require_react(), 1);
@@ -8158,8 +8228,41 @@ window.Aura = (() => {
   });
 
   // src/PageHeaderClient.tsx
-  var NAME = "--aura-page-actions-height";
-  var bars = [];
+  var bars = barStack(
+    "--aura-page-actions-height",
+    function() {
+      devWarnOnce(
+        "pageheader-bar-twice",
+        "PageHeader actionsBarBelow: two bars are on screen at once and overlap at the bottom of the screen. Give it to one PageHeader per page (one per tab panel is fine: only the shown one counts)."
+      );
+    },
+    function() {
+      marks.forEach(function(m) {
+        m();
+      });
+    }
+  );
+  var UNSEEN = ".aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text";
+  function noneShown(el, barVisible) {
+    for (let n3 = el.firstChild; n3; n3 = n3.nextSibling) {
+      if (n3.nodeType === 3) {
+        if ((n3.textContent || "").trim()) return false;
+        continue;
+      }
+      if (n3.nodeType !== 1) continue;
+      const c = n3;
+      if (c.hidden || c.matches(UNSEEN)) continue;
+      const s = getComputedStyle(c);
+      if (s.display === "none") continue;
+      if (barVisible && (s.visibility === "hidden" || s.visibility === "collapse")) continue;
+      const inline = c.getAttribute("style") || "";
+      if (/position:\s*absolute/.test(inline) && /clip/.test(inline)) continue;
+      if (s.display === "contents" && noneShown(c, barVisible)) continue;
+      return false;
+    }
+    return true;
+  }
+  var marks = /* @__PURE__ */ new Set();
   var PageHeader3 = React45.forwardRef(function PageHeader4(props, ref) {
     const own = React45.useRef(null);
     const merged = useMergedRef(ref, own);
@@ -8173,35 +8276,52 @@ window.Aura = (() => {
           split ? ":scope > .aura-page-header__actions > .aura-page-header__bar" : ":scope > .aura-page-header__actions"
         );
         if (!el) return;
-        const root = document.documentElement;
+        const head = own.current;
         let checked = false;
+        function mark() {
+          const empty = noneShown(el, getComputedStyle(el).visibility === "visible");
+          const state = empty ? "empty" : "shown";
+          if (head.getAttribute("data-aura-bar") !== state) head.setAttribute("data-aura-bar", state);
+        }
         function sync() {
-          if (bars[bars.length - 1] !== sync) return;
-          if (getComputedStyle(el).position === "fixed") {
-            root.style.setProperty(NAME, el.offsetHeight + "px");
-            if (!checked && (checked = true, fixedTrapped(el)))
-              devWarnOnce(
-                "pageheader-bar-trapped",
-                "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
-              );
-          } else root.style.removeProperty(NAME);
+          mark();
+          bars.write();
+          if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
+            devWarnOnce(
+              "pageheader-bar-trapped",
+              "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
+            );
         }
-        if (bars.length)
-          devWarnOnce(
-            "pageheader-bar-twice",
-            "PageHeader actionsBarBelow: two bars on one page overlap at the bottom of the screen. Give it to one PageHeader per page."
-          );
-        bars.push(sync);
+        mark();
+        marks.add(mark);
+        bars.add(el);
+        const mo = typeof MutationObserver === "undefined" ? null : new MutationObserver(function() {
+          if (!frame) frame = requestAnimationFrame(later);
+        });
+        let frame = 0;
+        function later() {
+          frame = 0;
+          sync();
+        }
+        if (mo)
+          mo.observe(el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["hidden", "class", "style"]
+          });
         const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
-        if (ro) ro.observe(el);
+        if (ro) ro.observe(el, { box: "border-box" });
         window.addEventListener("resize", sync);
         sync();
         return function() {
           if (ro) ro.disconnect();
+          if (mo) mo.disconnect();
+          if (frame) cancelAnimationFrame(frame);
+          marks.delete(mark);
           window.removeEventListener("resize", sync);
-          bars.splice(bars.indexOf(sync), 1);
-          if (bars.length) bars[bars.length - 1]();
-          else root.style.removeProperty(NAME);
+          head.removeAttribute("data-aura-bar");
+          bars.remove(el);
         };
       },
       [bar, hasActions, split]
@@ -8722,17 +8842,7 @@ window.Aura = (() => {
 
   // src/ActionBar.tsx
   var React50 = __toESM(require_react(), 1);
-  var HEIGHT = "--aura-actionbar-height";
-  var edges = [];
-  function writeHeight() {
-    const root = document.documentElement;
-    for (let i = edges.length - 1; i >= 0; i--)
-      if (edges[i].getClientRects().length > 0 && edges[i].offsetHeight > 0 && getComputedStyle(edges[i]).position === "fixed") {
-        root.style.setProperty(HEIGHT, edges[i].offsetHeight + "px");
-        return;
-      }
-    root.style.removeProperty(HEIGHT);
-  }
+  var edges = barStack("--aura-actionbar-height");
   var ActionBar = React50.forwardRef(function ActionBar2(props, ref) {
     const t = useStrings();
     const bulk = props.selected != null;
@@ -8756,14 +8866,14 @@ window.Aura = (() => {
         if (!edge || !el) return;
         let checked = false;
         function sync() {
-          writeHeight();
+          edges.write();
           if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
             devWarnOnce(
               "actionbar-edge-trapped",
               `ActionBar look="edge": an ancestor has a transform, filter, will-change or paint containment, so the fixed strip is placed against it instead of the screen. Remove it from the bar's ancestors.`
             );
         }
-        edges.push(el);
+        edges.add(el);
         const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
         if (ro) ro.observe(el, { box: "border-box" });
         window.addEventListener("resize", sync);
@@ -8771,8 +8881,7 @@ window.Aura = (() => {
         return function() {
           if (ro) ro.disconnect();
           window.removeEventListener("resize", sync);
-          edges.splice(edges.indexOf(el), 1);
-          writeHeight();
+          edges.remove(el);
         };
       },
       [edge, idle]

package/dist/cjs/index.cjs

@@ -400,6 +400,76 @@ function fixedTrapped(el) {
   }
   return false;
 }
+function onScreen(el) {
+  if (el.offsetHeight <= 0 || el.getClientRects().length === 0) return false;
+  const check = el.checkVisibility;
+  if (typeof check === "function") return check.call(el, { visibilityProperty: true });
+  const v = getComputedStyle(el).visibility;
+  return v !== "hidden" && v !== "collapse";
+}
+function barStack(name, onMany, onRead) {
+  const els = [];
+  let frame = 0;
+  const docEvents = ["click", "keydown", "focusin", "transitionend", "beforematch"];
+  const winEvents = ["hashchange", "popstate"];
+  function write() {
+    if (frame) cancelAnimationFrame(frame);
+    frame = 0;
+    if (onRead) onRead();
+    const root = document.documentElement;
+    let shown = null, boxed = null, pinned2 = false, many = 0;
+    for (let i = els.length - 1; i >= 0; i--) {
+      const el = els[i];
+      if (getComputedStyle(el).position !== "fixed") continue;
+      pinned2 = true;
+      if (onScreen(el)) {
+        many++;
+        if (!shown) shown = el;
+      } else if (!boxed && el.offsetHeight > 0) boxed = el;
+    }
+    if (many > 1 && onMany) onMany();
+    const use = shown || boxed;
+    if (use) root.style.setProperty(name, use.offsetHeight + "px");
+    else if (pinned2) root.style.setProperty(name, "0px");
+    else root.style.removeProperty(name);
+  }
+  function later() {
+    if (!frame) frame = requestAnimationFrame(write);
+  }
+  function now() {
+    write();
+    later();
+  }
+  function listen(on) {
+    docEvents.forEach(function(t) {
+      const f = t === "focusin" ? now : later;
+      if (on) document.addEventListener(t, f, true);
+      else document.removeEventListener(t, f, true);
+    });
+    winEvents.forEach(function(t) {
+      if (on) window.addEventListener(t, later);
+      else window.removeEventListener(t, later);
+    });
+  }
+  return {
+    add: function(el) {
+      els.push(el);
+      if (els.length === 1) listen(true);
+      write();
+    },
+    remove: function(el) {
+      const i = els.indexOf(el);
+      if (i >= 0) els.splice(i, 1);
+      if (!els.length) {
+        listen(false);
+        if (frame) cancelAnimationFrame(frame);
+        frame = 0;
+      }
+      write();
+    },
+    write
+  };
+}
 
 // src/display.tsx
 var React4 = __toESM(require("react"), 1);
@@ -8140,8 +8210,41 @@ var PageHeader = React44.forwardRef(function PageHeader2(props, ref) {
 });
 
 // src/PageHeaderClient.tsx
-var NAME = "--aura-page-actions-height";
-var bars = [];
+var bars = barStack(
+  "--aura-page-actions-height",
+  function() {
+    devWarnOnce(
+      "pageheader-bar-twice",
+      "PageHeader actionsBarBelow: two bars are on screen at once and overlap at the bottom of the screen. Give it to one PageHeader per page (one per tab panel is fine: only the shown one counts)."
+    );
+  },
+  function() {
+    marks.forEach(function(m) {
+      m();
+    });
+  }
+);
+var UNSEEN = ".aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text";
+function noneShown(el, barVisible) {
+  for (let n3 = el.firstChild; n3; n3 = n3.nextSibling) {
+    if (n3.nodeType === 3) {
+      if ((n3.textContent || "").trim()) return false;
+      continue;
+    }
+    if (n3.nodeType !== 1) continue;
+    const c = n3;
+    if (c.hidden || c.matches(UNSEEN)) continue;
+    const s = getComputedStyle(c);
+    if (s.display === "none") continue;
+    if (barVisible && (s.visibility === "hidden" || s.visibility === "collapse")) continue;
+    const inline = c.getAttribute("style") || "";
+    if (/position:\s*absolute/.test(inline) && /clip/.test(inline)) continue;
+    if (s.display === "contents" && noneShown(c, barVisible)) continue;
+    return false;
+  }
+  return true;
+}
+var marks = /* @__PURE__ */ new Set();
 var PageHeader3 = React45.forwardRef(function PageHeader4(props, ref) {
   const own = React45.useRef(null);
   const merged = useMergedRef(ref, own);
@@ -8155,35 +8258,52 @@ var PageHeader3 = React45.forwardRef(function PageHeader4(props, ref) {
         split ? ":scope > .aura-page-header__actions > .aura-page-header__bar" : ":scope > .aura-page-header__actions"
       );
       if (!el) return;
-      const root = document.documentElement;
+      const head = own.current;
       let checked = false;
+      function mark() {
+        const empty = noneShown(el, getComputedStyle(el).visibility === "visible");
+        const state = empty ? "empty" : "shown";
+        if (head.getAttribute("data-aura-bar") !== state) head.setAttribute("data-aura-bar", state);
+      }
       function sync() {
-        if (bars[bars.length - 1] !== sync) return;
-        if (getComputedStyle(el).position === "fixed") {
-          root.style.setProperty(NAME, el.offsetHeight + "px");
-          if (!checked && (checked = true, fixedTrapped(el)))
-            devWarnOnce(
-              "pageheader-bar-trapped",
-              "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
-            );
-        } else root.style.removeProperty(NAME);
+        mark();
+        bars.write();
+        if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
+          devWarnOnce(
+            "pageheader-bar-trapped",
+            "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
+          );
       }
-      if (bars.length)
-        devWarnOnce(
-          "pageheader-bar-twice",
-          "PageHeader actionsBarBelow: two bars on one page overlap at the bottom of the screen. Give it to one PageHeader per page."
-        );
-      bars.push(sync);
+      mark();
+      marks.add(mark);
+      bars.add(el);
+      const mo = typeof MutationObserver === "undefined" ? null : new MutationObserver(function() {
+        if (!frame) frame = requestAnimationFrame(later);
+      });
+      let frame = 0;
+      function later() {
+        frame = 0;
+        sync();
+      }
+      if (mo)
+        mo.observe(el, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: ["hidden", "class", "style"]
+        });
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
-      if (ro) ro.observe(el);
+      if (ro) ro.observe(el, { box: "border-box" });
       window.addEventListener("resize", sync);
       sync();
       return function() {
         if (ro) ro.disconnect();
+        if (mo) mo.disconnect();
+        if (frame) cancelAnimationFrame(frame);
+        marks.delete(mark);
         window.removeEventListener("resize", sync);
-        bars.splice(bars.indexOf(sync), 1);
-        if (bars.length) bars[bars.length - 1]();
-        else root.style.removeProperty(NAME);
+        head.removeAttribute("data-aura-bar");
+        bars.remove(el);
       };
     },
     [bar, hasActions, split]
@@ -8704,17 +8824,7 @@ var AppShell = React49.forwardRef(function AppShell2(props, ref) {
 
 // src/ActionBar.tsx
 var React50 = __toESM(require("react"), 1);
-var HEIGHT = "--aura-actionbar-height";
-var edges = [];
-function writeHeight() {
-  const root = document.documentElement;
-  for (let i = edges.length - 1; i >= 0; i--)
-    if (edges[i].getClientRects().length > 0 && edges[i].offsetHeight > 0 && getComputedStyle(edges[i]).position === "fixed") {
-      root.style.setProperty(HEIGHT, edges[i].offsetHeight + "px");
-      return;
-    }
-  root.style.removeProperty(HEIGHT);
-}
+var edges = barStack("--aura-actionbar-height");
 var ActionBar = React50.forwardRef(function ActionBar2(props, ref) {
   const t = useStrings();
   const bulk = props.selected != null;
@@ -8738,14 +8848,14 @@ var ActionBar = React50.forwardRef(function ActionBar2(props, ref) {
       if (!edge || !el) return;
       let checked = false;
       function sync() {
-        writeHeight();
+        edges.write();
         if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
           devWarnOnce(
             "actionbar-edge-trapped",
             `ActionBar look="edge": an ancestor has a transform, filter, will-change or paint containment, so the fixed strip is placed against it instead of the screen. Remove it from the bar's ancestors.`
           );
       }
-      edges.push(el);
+      edges.add(el);
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
       if (ro) ro.observe(el, { box: "border-box" });
       window.addEventListener("resize", sync);
@@ -8753,8 +8863,7 @@ var ActionBar = React50.forwardRef(function ActionBar2(props, ref) {
       return function() {
         if (ro) ro.disconnect();
         window.removeEventListener("resize", sync);
-        edges.splice(edges.indexOf(el), 1);
-        writeHeight();
+        edges.remove(el);
       };
     },
     [edge, idle]

package/dist/esm/ActionBar.js

@@ -1,19 +1,9 @@
 'use client';
 import * as React from "react";
 import { Button } from "./Button.js";
-import { cx, devWarnOnce, fixedTrapped } from "./internal.js";
+import { barStack, cx, devWarnOnce, fixedTrapped } from "./internal.js";
 import { useStrings } from "./locale.js";
-const HEIGHT = "--aura-actionbar-height";
-const edges = [];
-function writeHeight() {
-  const root = document.documentElement;
-  for (let i = edges.length - 1; i >= 0; i--)
-    if (edges[i].getClientRects().length > 0 && edges[i].offsetHeight > 0 && getComputedStyle(edges[i]).position === "fixed") {
-      root.style.setProperty(HEIGHT, edges[i].offsetHeight + "px");
-      return;
-    }
-  root.style.removeProperty(HEIGHT);
-}
+const edges = barStack("--aura-actionbar-height");
 const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
   const t = useStrings();
   const bulk = props.selected != null;
@@ -37,14 +27,14 @@ const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
       if (!edge || !el) return;
       let checked = false;
       function sync() {
-        writeHeight();
+        edges.write();
         if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
           devWarnOnce(
             "actionbar-edge-trapped",
             `ActionBar look="edge": an ancestor has a transform, filter, will-change or paint containment, so the fixed strip is placed against it instead of the screen. Remove it from the bar's ancestors.`
           );
       }
-      edges.push(el);
+      edges.add(el);
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
       if (ro) ro.observe(el, { box: "border-box" });
       window.addEventListener("resize", sync);
@@ -52,8 +42,7 @@ const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
       return function() {
         if (ro) ro.disconnect();
         window.removeEventListener("resize", sync);
-        edges.splice(edges.indexOf(el), 1);
-        writeHeight();
+        edges.remove(el);
       };
     },
     [edge, idle]

package/dist/esm/PageHeaderClient.js

@@ -1,9 +1,42 @@
 'use client';
 import * as React from "react";
 import { PageHeader as StaticPageHeader } from "./PageHeader.js";
-import { devWarnOnce, fixedTrapped as trapped, useMergedRef } from "./internal.js";
-const NAME = "--aura-page-actions-height";
-const bars = [];
+import { barStack, devWarnOnce, fixedTrapped as trapped, useMergedRef } from "./internal.js";
+const bars = barStack(
+  "--aura-page-actions-height",
+  function() {
+    devWarnOnce(
+      "pageheader-bar-twice",
+      "PageHeader actionsBarBelow: two bars are on screen at once and overlap at the bottom of the screen. Give it to one PageHeader per page (one per tab panel is fine: only the shown one counts)."
+    );
+  },
+  function() {
+    marks.forEach(function(m) {
+      m();
+    });
+  }
+);
+const UNSEEN = ".aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text";
+function noneShown(el, barVisible) {
+  for (let n = el.firstChild; n; n = n.nextSibling) {
+    if (n.nodeType === 3) {
+      if ((n.textContent || "").trim()) return false;
+      continue;
+    }
+    if (n.nodeType !== 1) continue;
+    const c = n;
+    if (c.hidden || c.matches(UNSEEN)) continue;
+    const s = getComputedStyle(c);
+    if (s.display === "none") continue;
+    if (barVisible && (s.visibility === "hidden" || s.visibility === "collapse")) continue;
+    const inline = c.getAttribute("style") || "";
+    if (/position:\s*absolute/.test(inline) && /clip/.test(inline)) continue;
+    if (s.display === "contents" && noneShown(c, barVisible)) continue;
+    return false;
+  }
+  return true;
+}
+const marks = /* @__PURE__ */ new Set();
 const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
   const own = React.useRef(null);
   const merged = useMergedRef(ref, own);
@@ -17,35 +50,52 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
         split ? ":scope > .aura-page-header__actions > .aura-page-header__bar" : ":scope > .aura-page-header__actions"
       );
       if (!el) return;
-      const root = document.documentElement;
+      const head = own.current;
       let checked = false;
+      function mark() {
+        const empty = noneShown(el, getComputedStyle(el).visibility === "visible");
+        const state = empty ? "empty" : "shown";
+        if (head.getAttribute("data-aura-bar") !== state) head.setAttribute("data-aura-bar", state);
+      }
       function sync() {
-        if (bars[bars.length - 1] !== sync) return;
-        if (getComputedStyle(el).position === "fixed") {
-          root.style.setProperty(NAME, el.offsetHeight + "px");
-          if (!checked && (checked = true, trapped(el)))
-            devWarnOnce(
-              "pageheader-bar-trapped",
-              "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
-            );
-        } else root.style.removeProperty(NAME);
+        mark();
+        bars.write();
+        if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, trapped(el)))
+          devWarnOnce(
+            "pageheader-bar-trapped",
+            "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
+          );
+      }
+      mark();
+      marks.add(mark);
+      bars.add(el);
+      const mo = typeof MutationObserver === "undefined" ? null : new MutationObserver(function() {
+        if (!frame) frame = requestAnimationFrame(later);
+      });
+      let frame = 0;
+      function later() {
+        frame = 0;
+        sync();
       }
-      if (bars.length)
-        devWarnOnce(
-          "pageheader-bar-twice",
-          "PageHeader actionsBarBelow: two bars on one page overlap at the bottom of the screen. Give it to one PageHeader per page."
-        );
-      bars.push(sync);
+      if (mo)
+        mo.observe(el, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: ["hidden", "class", "style"]
+        });
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
-      if (ro) ro.observe(el);
+      if (ro) ro.observe(el, { box: "border-box" });
       window.addEventListener("resize", sync);
       sync();
       return function() {
         if (ro) ro.disconnect();
+        if (mo) mo.disconnect();
+        if (frame) cancelAnimationFrame(frame);
+        marks.delete(mark);
         window.removeEventListener("resize", sync);
-        bars.splice(bars.indexOf(sync), 1);
-        if (bars.length) bars[bars.length - 1]();
-        else root.style.removeProperty(NAME);
+        head.removeAttribute("data-aura-bar");
+        bars.remove(el);
       };
     },
     [bar, hasActions, split]

package/dist/esm/internal.js

@@ -117,10 +117,81 @@ function fixedTrapped(el) {
   }
   return false;
 }
+function onScreen(el) {
+  if (el.offsetHeight <= 0 || el.getClientRects().length === 0) return false;
+  const check = el.checkVisibility;
+  if (typeof check === "function") return check.call(el, { visibilityProperty: true });
+  const v = getComputedStyle(el).visibility;
+  return v !== "hidden" && v !== "collapse";
+}
+function barStack(name, onMany, onRead) {
+  const els = [];
+  let frame = 0;
+  const docEvents = ["click", "keydown", "focusin", "transitionend", "beforematch"];
+  const winEvents = ["hashchange", "popstate"];
+  function write() {
+    if (frame) cancelAnimationFrame(frame);
+    frame = 0;
+    if (onRead) onRead();
+    const root = document.documentElement;
+    let shown = null, boxed = null, pinned = false, many = 0;
+    for (let i = els.length - 1; i >= 0; i--) {
+      const el = els[i];
+      if (getComputedStyle(el).position !== "fixed") continue;
+      pinned = true;
+      if (onScreen(el)) {
+        many++;
+        if (!shown) shown = el;
+      } else if (!boxed && el.offsetHeight > 0) boxed = el;
+    }
+    if (many > 1 && onMany) onMany();
+    const use = shown || boxed;
+    if (use) root.style.setProperty(name, use.offsetHeight + "px");
+    else if (pinned) root.style.setProperty(name, "0px");
+    else root.style.removeProperty(name);
+  }
+  function later() {
+    if (!frame) frame = requestAnimationFrame(write);
+  }
+  function now() {
+    write();
+    later();
+  }
+  function listen(on) {
+    docEvents.forEach(function(t) {
+      const f = t === "focusin" ? now : later;
+      if (on) document.addEventListener(t, f, true);
+      else document.removeEventListener(t, f, true);
+    });
+    winEvents.forEach(function(t) {
+      if (on) window.addEventListener(t, later);
+      else window.removeEventListener(t, later);
+    });
+  }
+  return {
+    add: function(el) {
+      els.push(el);
+      if (els.length === 1) listen(true);
+      write();
+    },
+    remove: function(el) {
+      const i = els.indexOf(el);
+      if (i >= 0) els.splice(i, 1);
+      if (!els.length) {
+        listen(false);
+        if (frame) cancelAnimationFrame(frame);
+        frame = 0;
+      }
+      write();
+    },
+    write
+  };
+}
 export {
   FOCUSABLE,
   FilterSheet,
   TAB_STOPS,
+  barStack,
   collator,
   compare,
   cx,

package/dist/styles.css

@@ -1357,6 +1357,10 @@ summary.aura-link::-webkit-details-marker { display: none; }
 .aura-page-header__actions.is-split:not(:has(> :not(.aura-page-header__bar))) { display: contents; }
 @media (max-width: 639.98px) and (min-height: 30.00125rem) {
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar { display: flex; flex: none; min-width: 0; }
+  /* 5.74 (Chamber-OS 193): nothing but the status shown (Pay now hidden after paying): no strip, and no bar padding below. */
+  .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); }
   /* 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); }
@@ -1372,13 +1376,17 @@ summary.aura-link::-webkit-details-marker { 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):has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; }
   :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):has(> .aura-icon-btn, > * > .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); }
   :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):not(:has(> .aura-btn, > * > .aura-btn)) > .aura-page-header__status { flex: 1 1 0; align-self: center; }
-  :root:has(.aura-page-header--actions-bar-below-sm) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
-  :root:has(.aura-page-header--actions-bar-below-sm.aura-page-header--actions-bar-floating) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); }
-  :root:has(.aura-page-header--actions-bar-below-sm) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-page-actions-space)); }
-  :root:has(.aura-page-header--actions-bar-below-sm):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-page-actions-space); }
+  :root:has(.aura-page-header--actions-bar-below-sm:not([data-aura-bar="empty"])) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
+  :root:has(.aura-page-header--actions-bar-below-sm.aura-page-header--actions-bar-floating:not([data-aura-bar="empty"])) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); }
+  :root:has(.aura-page-header--actions-bar-below-sm:not([data-aura-bar="empty"])) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-page-actions-space)); }
+  :root:has(.aura-page-header--actions-bar-below-sm:not([data-aura-bar="empty"])):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-page-actions-space); }
 }
 @media (max-width: 767.98px) and (min-height: 30.00125rem) {
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar { display: flex; flex: none; min-width: 0; }
+  /* 5.74 (Chamber-OS 193): nothing but the status shown (Pay now hidden after paying): no strip, and no bar padding below. */
+  .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); }
   /* 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); }
@@ -1394,10 +1402,10 @@ summary.aura-link::-webkit-details-marker { 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):has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; }
   :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):has(> .aura-icon-btn, > * > .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); }
   :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):not(:has(> .aura-btn, > * > .aura-btn)) > .aura-page-header__status { flex: 1 1 0; align-self: center; }
-  :root:has(.aura-page-header--actions-bar-below-md) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
-  :root:has(.aura-page-header--actions-bar-below-md.aura-page-header--actions-bar-floating) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); }
-  :root:has(.aura-page-header--actions-bar-below-md) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-page-actions-space)); }
-  :root:has(.aura-page-header--actions-bar-below-md):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-page-actions-space); }
+  :root:has(.aura-page-header--actions-bar-below-md:not([data-aura-bar="empty"])) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
+  :root:has(.aura-page-header--actions-bar-below-md.aura-page-header--actions-bar-floating:not([data-aura-bar="empty"])) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); }
+  :root:has(.aura-page-header--actions-bar-below-md:not([data-aura-bar="empty"])) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-page-actions-space)); }
+  :root:has(.aura-page-header--actions-bar-below-md:not([data-aura-bar="empty"])):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-page-actions-space); }
 }
 /* 5.71: as specific as the bar rules (and after them), and on actionsBar's box too, so reduced motion stops the slide. */
 @media (prefers-reduced-motion: reduce) { .aura-page-header.aura-page-header > .aura-page-header__actions, .aura-page-header.aura-page-header > .aura-page-header__actions > .aura-page-header__bar { transition: none; } }

package/dist/styles.layer.css

@@ -1359,6 +1359,10 @@ summary.aura-link::-webkit-details-marker { display: none; }
 .aura-page-header__actions.is-split:not(:has(> :not(.aura-page-header__bar))) { display: contents; }
 @media (max-width: 639.98px) and (min-height: 30.00125rem) {
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar { display: flex; flex: none; min-width: 0; }
+  /* 5.74 (Chamber-OS 193): nothing but the status shown (Pay now hidden after paying): no strip, and no bar padding below. */
+  .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); }
   /* 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); }
@@ -1374,13 +1378,17 @@ summary.aura-link::-webkit-details-marker { 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):has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; }
   :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):has(> .aura-icon-btn, > * > .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); }
   :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):not(:has(> .aura-btn, > * > .aura-btn)) > .aura-page-header__status { flex: 1 1 0; align-self: center; }
-  :root:has(.aura-page-header--actions-bar-below-sm) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
-  :root:has(.aura-page-header--actions-bar-below-sm.aura-page-header--actions-bar-floating) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); }
-  :root:has(.aura-page-header--actions-bar-below-sm) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-page-actions-space)); }
-  :root:has(.aura-page-header--actions-bar-below-sm):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-page-actions-space); }
+  :root:has(.aura-page-header--actions-bar-below-sm:not([data-aura-bar="empty"])) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
+  :root:has(.aura-page-header--actions-bar-below-sm.aura-page-header--actions-bar-floating:not([data-aura-bar="empty"])) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); }
+  :root:has(.aura-page-header--actions-bar-below-sm:not([data-aura-bar="empty"])) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-page-actions-space)); }
+  :root:has(.aura-page-header--actions-bar-below-sm:not([data-aura-bar="empty"])):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-page-actions-space); }
 }
 @media (max-width: 767.98px) and (min-height: 30.00125rem) {
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar { display: flex; flex: none; min-width: 0; }
+  /* 5.74 (Chamber-OS 193): nothing but the status shown (Pay now hidden after paying): no strip, and no bar padding below. */
+  .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); }
   /* 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); }
@@ -1396,10 +1404,10 @@ summary.aura-link::-webkit-details-marker { 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):has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; }
   :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):has(> .aura-icon-btn, > * > .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); }
   :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):not(:has(> .aura-btn, > * > .aura-btn)) > .aura-page-header__status { flex: 1 1 0; align-self: center; }
-  :root:has(.aura-page-header--actions-bar-below-md) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
-  :root:has(.aura-page-header--actions-bar-below-md.aura-page-header--actions-bar-floating) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); }
-  :root:has(.aura-page-header--actions-bar-below-md) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-page-actions-space)); }
-  :root:has(.aura-page-header--actions-bar-below-md):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-page-actions-space); }
+  :root:has(.aura-page-header--actions-bar-below-md:not([data-aura-bar="empty"])) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
+  :root:has(.aura-page-header--actions-bar-below-md.aura-page-header--actions-bar-floating:not([data-aura-bar="empty"])) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); }
+  :root:has(.aura-page-header--actions-bar-below-md:not([data-aura-bar="empty"])) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-page-actions-space)); }
+  :root:has(.aura-page-header--actions-bar-below-md:not([data-aura-bar="empty"])):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-page-actions-space); }
 }
 /* 5.71: as specific as the bar rules (and after them), and on actionsBar's box too, so reduced motion stops the slide. */
 @media (prefers-reduced-motion: reduce) { .aura-page-header.aura-page-header > .aura-page-header__actions, .aura-page-header.aura-page-header > .aura-page-header__actions > .aura-page-header__bar { transition: none; } }

package/package.json

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