@jirawatpyk/aura-react 5.73.0 → 5.74.0

package/README.md

@@ -186,6 +186,10 @@ 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.

package/dist/aura.bundle.js

@@ -425,7 +425,7 @@ window.Aura = (() => {
     const v = getComputedStyle(el).visibility;
     return v !== "hidden" && v !== "collapse";
   }
-  function barStack(name, onMany) {
+  function barStack(name, onMany, onRead) {
     const els = [];
     let frame = 0;
     const docEvents = ["click", "keydown", "focusin", "transitionend", "beforematch"];
@@ -433,6 +433,7 @@ window.Aura = (() => {
     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--) {
@@ -8227,12 +8228,41 @@ window.Aura = (() => {
   });
 
   // src/PageHeaderClient.tsx
-  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)."
-    );
-  });
+  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);
@@ -8246,8 +8276,15 @@ window.Aura = (() => {
           split ? ":scope > .aura-page-header__actions > .aura-page-header__bar" : ":scope > .aura-page-header__actions"
         );
         if (!el) return;
+        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() {
+          mark();
           bars.write();
           if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
             devWarnOnce(
@@ -8255,14 +8292,35 @@ window.Aura = (() => {
               "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 (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, { 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);
+          head.removeAttribute("data-aura-bar");
           bars.remove(el);
         };
       },

package/dist/cjs/index.cjs

@@ -407,7 +407,7 @@ function onScreen(el) {
   const v = getComputedStyle(el).visibility;
   return v !== "hidden" && v !== "collapse";
 }
-function barStack(name, onMany) {
+function barStack(name, onMany, onRead) {
   const els = [];
   let frame = 0;
   const docEvents = ["click", "keydown", "focusin", "transitionend", "beforematch"];
@@ -415,6 +415,7 @@ function barStack(name, onMany) {
   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--) {
@@ -8209,12 +8210,41 @@ var PageHeader = React44.forwardRef(function PageHeader2(props, ref) {
 });
 
 // src/PageHeaderClient.tsx
-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)."
-  );
-});
+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);
@@ -8228,8 +8258,15 @@ 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 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() {
+        mark();
         bars.write();
         if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
           devWarnOnce(
@@ -8237,14 +8274,35 @@ var PageHeader3 = React45.forwardRef(function PageHeader4(props, ref) {
             "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 (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, { 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);
+        head.removeAttribute("data-aura-bar");
         bars.remove(el);
       };
     },

package/dist/esm/PageHeaderClient.js

@@ -2,12 +2,41 @@
 import * as React from "react";
 import { PageHeader as StaticPageHeader } from "./PageHeader.js";
 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)."
-  );
-});
+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);
@@ -21,8 +50,15 @@ 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 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() {
+        mark();
         bars.write();
         if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, trapped(el)))
           devWarnOnce(
@@ -30,14 +66,35 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
             "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 (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, { 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);
+        head.removeAttribute("data-aura-bar");
         bars.remove(el);
       };
     },

package/dist/esm/internal.js

@@ -124,7 +124,7 @@ function onScreen(el) {
   const v = getComputedStyle(el).visibility;
   return v !== "hidden" && v !== "collapse";
 }
-function barStack(name, onMany) {
+function barStack(name, onMany, onRead) {
   const els = [];
   let frame = 0;
   const docEvents = ["click", "keydown", "focusin", "transitionend", "beforematch"];
@@ -132,6 +132,7 @@ function barStack(name, onMany) {
   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--) {

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.73.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",