@jirawatpyk/aura-react 5.47.0 → 5.49.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.49 — Chamber-OS addendum 56 (#155)
+
+- **The short-screen threshold follows the browser's text size**: the height at which bottom bars stop pinning (5.48, #154) is `30rem`, not `480px`. In a media query `rem` is the browser's default font size (Chrome, Edge, Firefox; not iOS Dynamic Type or Safari's text size), not the page's `html` font size: 480px at the default 16px (nothing changes), 720px at 24px (an iPhone SE counts as short, an 844px phone keeps the bar), 960px at 32px (an 844px phone counts as short — it holds what a 422px screen holds at 16px). There the `actionsBarBelow` actions stay in the header, an ActionBar sits at the end of its container and AppShell's top bar scrolls away, as at 400% zoom. Changing the text size on an open page re-checks it (the bar-height tokens follow). The width breakpoints stay in px.
+
+## 5.48 — Chamber-OS addendum 55 (#153–154)
+
+- **The `actionsBarBelow` bar is now ActionBar's edge strip** (#153): the full width of the screen, on its bottom edge (or on a BottomNav's top edge), a top border only — no radius, no shadow — with ActionBar's inner padding (8px block, 16px start, 12px end) and the home-indicator inset inside it, as the save and bulk bars of an app built on `ActionBar position="container"` look. The page's end padding and `scroll-padding-bottom` follow the new height. The layout inside is unchanged.
+- **Bottom bars on a short screen** (#154): on a screen 30rem tall or less — 480px at the browser's default 16px text, and since 5.49 (#155) it follows the default font size set in Chrome, Edge or Firefox (960px at 32px, 720px at 24px), so large-text users get the same room (iOS Dynamic Type and Safari's text-size controls don't change it); 400% zoom on a desktop (320×256 CSS px), a phone held sideways — `actionsBarBelow` no longer fixes the actions to the bottom: they stay in the header's own row (laid out by `actionsFullWidthBelow` if set), with no status line, page-end space or scroll padding; and an `ActionBar` (either `position`) stops sticking and sits at the end of its container, in the flow. AppShell's top bar scrolls away with the page there too, so a field reached backwards (Shift+Tab) isn't left under it, and `--aura-shell-bar-height` is 0 meanwhile, so nothing sticky (a DataTable `stickyHeader`) leaves a gap for it. A focused control is never under a bar there (WCAG 2.4.11, 1.4.10); taller than 30rem everything is as before. The width breakpoints stay in px. An ActionBar with `hidesBottomNav` still hides the BottomNav on a short screen while it sits at the end of its container. Wherever a BottomNav shows (any height), the page's `scroll-padding-bottom` now reserves its height, so a field tabbed into view stops above it.
+- **`actionsBarLook="floating"`** keeps 5.45's card (inset 16px, lifted 12px, bordered all round, rounded, with the overlay shadow) — the look of `ActionBar position="viewport"`. Only the bar's look changed; nothing else about `actionsBarBelow`.
+
 ## 5.47 — Chamber-OS addendum 54 (#152)
 
 - **PageHeader `size="compact"`**: 26px below 640px and 32px from 640px, on a 1.2 line — the staff and list boards' title, so a company name such as "Siam Nordic Trading Co., Ltd." takes two lines on a 390px phone instead of three. The **default stays 28px / 36px** (1.15), so DxT Monitor and other apps don't change; pass `size="compact"` (Chamber-OS: in its header wrapper) where the boards draw 26 / 32.
@@ -208,7 +218,7 @@ What Chamber-OS's own page header did that PageHeader didn't, so it can be rebui
 
 ## 5.45 — Chamber-OS addendum 52 (#150)
 
-- **PageHeader `actionsBarBelow`** (#150): `'sm' | 'md'` — below 640px or 768px the header's `actions` become a bar fixed to the bottom of the screen with ActionBar's look and offset (above a BottomNav, clear of the home indicator), and `actionsStatus` is its status line ("Total 10,700.00 THB incl. VAT · due 22 Oct 2026", a polite live region shown only in the bar).
+- **PageHeader `actionsBarBelow`** (#150): `'sm' | 'md'` — below 640px or 768px the header's `actions` become a bar fixed to the bottom of the screen (from 5.48 ActionBar's edge strip, `actionsBarLook="floating"` for this card; above a BottomNav, clear of the home indicator), and `actionsStatus` is its status line ("Total 10,700.00 THB incl. VAT · due 22 Oct 2026", a polite live region shown only in the bar).
   ```tsx
   <PageHeader title="Invoice SC-2026-900001" actionsFullWidthBelow="sm" actionsBarBelow="sm"
     actionsStatus="Total 10,700.00 THB incl. VAT · due 22 Oct 2026"

package/dist/aura.bundle.js

@@ -7864,6 +7864,7 @@ window.Aura = (() => {
           (hide2 === "sm" || hide2 === "md" || hide2 === "lg") && "aura-page-header--title-hide-below-" + hide2,
           (hide2 === "sm" || hide2 === "md" || hide2 === "lg") && !hasMeta && "has-no-meta",
           bar && "aura-page-header--actions-bar-below-" + bar,
+          bar && props.actionsBarLook === "floating" && "aura-page-header--actions-bar-floating",
           size && "aura-page-header--" + size,
           props.actionsAlign === "start" && "aura-page-header--actions-start",
           props.className
@@ -8309,6 +8310,9 @@ window.Aura = (() => {
   }
 
   // src/AppShell.tsx
+  function pinned(bar) {
+    return getComputedStyle(bar).position !== "static";
+  }
   var AppShell = React48.forwardRef(function AppShell2(props, ref) {
     const t = useStrings();
     const bp = useBreakpoint();
@@ -8329,6 +8333,7 @@ window.Aura = (() => {
     }
     const rootRef = React48.useRef(null);
     const barRef = React48.useRef(null);
+    const probeRef = React48.useRef(null);
     const mergedRef = useMergedRef(ref, rootRef);
     const hasBar = !!(props.header || props.nav);
     const barH = React48.useState(null);
@@ -8339,7 +8344,10 @@ window.Aura = (() => {
       function() {
         const root = rootRef.current, bar = barRef.current;
         if (!root || !bar) return;
-        root.style.setProperty("--aura-shell-bar-height", away ? "0px" : bar.getBoundingClientRect().height + "px");
+        root.style.setProperty(
+          "--aura-shell-bar-height",
+          away || !pinned(bar) ? "0px" : bar.getBoundingClientRect().height + "px"
+        );
       },
       [away]
     );
@@ -8349,14 +8357,17 @@ window.Aura = (() => {
         if (!root || !bar) return;
         function sync() {
           const h11 = bar.getBoundingClientRect().height;
-          root.style.setProperty("--aura-shell-bar-height", awayRef.current ? "0px" : h11 + "px");
+          root.style.setProperty("--aura-shell-bar-height", awayRef.current || !pinned(bar) ? "0px" : h11 + "px");
           if (h11 > 0) barH[1](Math.round(h11));
         }
         sync();
         const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
         if (ro) ro.observe(bar);
+        if (ro && probeRef.current) ro.observe(probeRef.current);
+        window.addEventListener("resize", sync);
         return function() {
           if (ro) ro.disconnect();
+          window.removeEventListener("resize", sync);
           root.style.removeProperty("--aura-shell-bar-height");
         };
       },
@@ -8436,7 +8447,8 @@ window.Aura = (() => {
             "aria-expanded": open
           }
         ) : null,
-        /* @__PURE__ */ React48.createElement("div", { className: "aura-shell__bar-content" }, props.header)
+        /* @__PURE__ */ React48.createElement("div", { className: "aura-shell__bar-content" }, props.header),
+        /* @__PURE__ */ React48.createElement("span", { className: "aura-shell__probe", "aria-hidden": "true", ref: probeRef })
       ) : null, /* @__PURE__ */ React48.createElement(
         "main",
         {

package/dist/cjs/index.cjs

@@ -7846,6 +7846,7 @@ var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
         (hide2 === "sm" || hide2 === "md" || hide2 === "lg") && "aura-page-header--title-hide-below-" + hide2,
         (hide2 === "sm" || hide2 === "md" || hide2 === "lg") && !hasMeta && "has-no-meta",
         bar && "aura-page-header--actions-bar-below-" + bar,
+        bar && props.actionsBarLook === "floating" && "aura-page-header--actions-bar-floating",
         size && "aura-page-header--" + size,
         props.actionsAlign === "start" && "aura-page-header--actions-start",
         props.className
@@ -8291,6 +8292,9 @@ function useHideOnScroll(enabled, el, media, from) {
 }
 
 // src/AppShell.tsx
+function pinned(bar) {
+  return getComputedStyle(bar).position !== "static";
+}
 var AppShell = React48.forwardRef(function AppShell2(props, ref) {
   const t = useStrings();
   const bp = useBreakpoint();
@@ -8311,6 +8315,7 @@ var AppShell = React48.forwardRef(function AppShell2(props, ref) {
   }
   const rootRef = React48.useRef(null);
   const barRef = React48.useRef(null);
+  const probeRef = React48.useRef(null);
   const mergedRef = useMergedRef(ref, rootRef);
   const hasBar = !!(props.header || props.nav);
   const barH = React48.useState(null);
@@ -8321,7 +8326,10 @@ var AppShell = React48.forwardRef(function AppShell2(props, ref) {
     function() {
       const root = rootRef.current, bar = barRef.current;
       if (!root || !bar) return;
-      root.style.setProperty("--aura-shell-bar-height", away ? "0px" : bar.getBoundingClientRect().height + "px");
+      root.style.setProperty(
+        "--aura-shell-bar-height",
+        away || !pinned(bar) ? "0px" : bar.getBoundingClientRect().height + "px"
+      );
     },
     [away]
   );
@@ -8331,14 +8339,17 @@ var AppShell = React48.forwardRef(function AppShell2(props, ref) {
       if (!root || !bar) return;
       function sync() {
         const h11 = bar.getBoundingClientRect().height;
-        root.style.setProperty("--aura-shell-bar-height", awayRef.current ? "0px" : h11 + "px");
+        root.style.setProperty("--aura-shell-bar-height", awayRef.current || !pinned(bar) ? "0px" : h11 + "px");
         if (h11 > 0) barH[1](Math.round(h11));
       }
       sync();
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
       if (ro) ro.observe(bar);
+      if (ro && probeRef.current) ro.observe(probeRef.current);
+      window.addEventListener("resize", sync);
       return function() {
         if (ro) ro.disconnect();
+        window.removeEventListener("resize", sync);
         root.style.removeProperty("--aura-shell-bar-height");
       };
     },
@@ -8418,7 +8429,8 @@ var AppShell = React48.forwardRef(function AppShell2(props, ref) {
           "aria-expanded": open
         }
       ) : null,
-      /* @__PURE__ */ React48.createElement("div", { className: "aura-shell__bar-content" }, props.header)
+      /* @__PURE__ */ React48.createElement("div", { className: "aura-shell__bar-content" }, props.header),
+      /* @__PURE__ */ React48.createElement("span", { className: "aura-shell__probe", "aria-hidden": "true", ref: probeRef })
     ) : null, /* @__PURE__ */ React48.createElement(
       "main",
       {

package/dist/esm/AppShell.js

@@ -7,6 +7,9 @@ import { useStrings } from "./locale.js";
 import { useBreakpoint } from "./responsive.js";
 import { useHideOnScroll } from "./scrollHide.js";
 import { IconMenu } from "./icons.js";
+function pinned(bar) {
+  return getComputedStyle(bar).position !== "static";
+}
 const AppShell = React.forwardRef(function AppShell2(props, ref) {
   const t = useStrings();
   const bp = useBreakpoint();
@@ -27,6 +30,7 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
   }
   const rootRef = React.useRef(null);
   const barRef = React.useRef(null);
+  const probeRef = React.useRef(null);
   const mergedRef = useMergedRef(ref, rootRef);
   const hasBar = !!(props.header || props.nav);
   const barH = React.useState(null);
@@ -37,7 +41,10 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
     function() {
       const root = rootRef.current, bar = barRef.current;
       if (!root || !bar) return;
-      root.style.setProperty("--aura-shell-bar-height", away ? "0px" : bar.getBoundingClientRect().height + "px");
+      root.style.setProperty(
+        "--aura-shell-bar-height",
+        away || !pinned(bar) ? "0px" : bar.getBoundingClientRect().height + "px"
+      );
     },
     [away]
   );
@@ -47,14 +54,17 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
       if (!root || !bar) return;
       function sync() {
         const h = bar.getBoundingClientRect().height;
-        root.style.setProperty("--aura-shell-bar-height", awayRef.current ? "0px" : h + "px");
+        root.style.setProperty("--aura-shell-bar-height", awayRef.current || !pinned(bar) ? "0px" : h + "px");
         if (h > 0) barH[1](Math.round(h));
       }
       sync();
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
       if (ro) ro.observe(bar);
+      if (ro && probeRef.current) ro.observe(probeRef.current);
+      window.addEventListener("resize", sync);
       return function() {
         if (ro) ro.disconnect();
+        window.removeEventListener("resize", sync);
         root.style.removeProperty("--aura-shell-bar-height");
       };
     },
@@ -134,7 +144,8 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
           "aria-expanded": open
         }
       ) : null,
-      /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)
+      /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header),
+      /* @__PURE__ */ React.createElement("span", { className: "aura-shell__probe", "aria-hidden": "true", ref: probeRef })
     ) : null, /* @__PURE__ */ React.createElement(
       "main",
       {

package/dist/esm/PageHeader.js

@@ -40,6 +40,7 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
         (hide === "sm" || hide === "md" || hide === "lg") && "aura-page-header--title-hide-below-" + hide,
         (hide === "sm" || hide === "md" || hide === "lg") && !hasMeta && "has-no-meta",
         bar && "aura-page-header--actions-bar-below-" + bar,
+        bar && props.actionsBarLook === "floating" && "aura-page-header--actions-bar-floating",
         size && "aura-page-header--" + size,
         props.actionsAlign === "start" && "aura-page-header--actions-start",
         props.className

package/dist/index.d.cts

@@ -1974,8 +1974,8 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * meta line and actions stay; with no meta, the actions start the header. */
 	titleHideBelow?: "sm" | "md" | "lg" | undefined;
 	/** 5.45 (Chamber-OS 150): below this breakpoint (`sm` 640px, `md` 768px) the same `actions` — rendered once, so a
-	 * dialog trigger or test id is never doubled — become a bar fixed to the bottom of the screen with ActionBar's look:
-	 * above a BottomNav, clear of the home indicator, `actionsStatus` as its status line. The page's end and a focused
+	 * dialog trigger or test id is never doubled — become a bar fixed to the bottom of the screen, ActionBar's edge
+	 * strip (5.48; `actionsBarLook`): above a BottomNav, clear of the home indicator, `actionsStatus` as its status line. The page's end and a focused
 	 * field scroll clear of it (AppShell's content, or the body, gains the bar's height). With an IconButton among them
 	 * the actions share one row, labels wrapping inside the buttons (as `actionsFullWidthBelow`, Chamber-OS 149); with only icon
 	 * buttons the status and the icons share one row. From the breakpoint up nothing changes. Use it for a detail page's
@@ -1983,6 +1983,10 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * have a transform, filter, backdrop-filter, will-change, paint/layout containment or `content-visibility: auto`, or it is placed
 	 * against that ancestor instead of the screen — the main entry warns in development. */
 	actionsBarBelow?: "sm" | "md" | undefined;
+	/** 5.48 (Chamber-OS 153): the bar's look. `edge` (default) is ActionBar's strip — the full width of the screen, on
+	 * its bottom edge (or above a BottomNav), a top border only, the home-indicator inset inside it. `floating` is 5.45's
+	 * card: inset 16px, lifted 12px, bordered all round with rounded corners and a shadow. */
+	actionsBarLook?: "edge" | "floating" | undefined;
 	/** 5.45: the bar's status line ("Total 10,700.00 THB incl. VAT · due 22 Oct 2026"), shown only while the actions are
 	 * a bar, in a polite live region. */
 	actionsStatus?: React$1.ReactNode | undefined;
@@ -2114,9 +2118,6 @@ export declare const STRINGS: {
 };
 export declare const TileGrid: React$1.ForwardRefExoticComponent<TileGridProps & React$1.RefAttributes<HTMLUListElement>>;
 export declare const Sparkline: React$1.ForwardRefExoticComponent<SparklineProps & React$1.RefAttributes<SVGSVGElement>>;
-/** AppShell — side navigation + top bar + content. The nav is fixed from lg (1024px) up and a Drawer below it.
- * Which one shows is decided in CSS (4.16), so the server's HTML is already right on a phone and nothing shifts on
- * hydration; JavaScript only opens and closes the drawer. */
 export declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps & React$1.RefAttributes<HTMLDivElement>>;
 /** ActionBar — a bar stuck to the bottom of the screen or of a card: a status line and the form's or selection's
  * actions. It is `position: sticky`, so it stays in the flow at the end of its parent and never covers the last field. */

package/dist/index.d.ts

@@ -1974,8 +1974,8 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * meta line and actions stay; with no meta, the actions start the header. */
 	titleHideBelow?: "sm" | "md" | "lg" | undefined;
 	/** 5.45 (Chamber-OS 150): below this breakpoint (`sm` 640px, `md` 768px) the same `actions` — rendered once, so a
-	 * dialog trigger or test id is never doubled — become a bar fixed to the bottom of the screen with ActionBar's look:
-	 * above a BottomNav, clear of the home indicator, `actionsStatus` as its status line. The page's end and a focused
+	 * dialog trigger or test id is never doubled — become a bar fixed to the bottom of the screen, ActionBar's edge
+	 * strip (5.48; `actionsBarLook`): above a BottomNav, clear of the home indicator, `actionsStatus` as its status line. The page's end and a focused
 	 * field scroll clear of it (AppShell's content, or the body, gains the bar's height). With an IconButton among them
 	 * the actions share one row, labels wrapping inside the buttons (as `actionsFullWidthBelow`, Chamber-OS 149); with only icon
 	 * buttons the status and the icons share one row. From the breakpoint up nothing changes. Use it for a detail page's
@@ -1983,6 +1983,10 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * have a transform, filter, backdrop-filter, will-change, paint/layout containment or `content-visibility: auto`, or it is placed
 	 * against that ancestor instead of the screen — the main entry warns in development. */
 	actionsBarBelow?: "sm" | "md" | undefined;
+	/** 5.48 (Chamber-OS 153): the bar's look. `edge` (default) is ActionBar's strip — the full width of the screen, on
+	 * its bottom edge (or above a BottomNav), a top border only, the home-indicator inset inside it. `floating` is 5.45's
+	 * card: inset 16px, lifted 12px, bordered all round with rounded corners and a shadow. */
+	actionsBarLook?: "edge" | "floating" | undefined;
 	/** 5.45: the bar's status line ("Total 10,700.00 THB incl. VAT · due 22 Oct 2026"), shown only while the actions are
 	 * a bar, in a polite live region. */
 	actionsStatus?: React$1.ReactNode | undefined;
@@ -2114,9 +2118,6 @@ export declare const STRINGS: {
 };
 export declare const TileGrid: React$1.ForwardRefExoticComponent<TileGridProps & React$1.RefAttributes<HTMLUListElement>>;
 export declare const Sparkline: React$1.ForwardRefExoticComponent<SparklineProps & React$1.RefAttributes<SVGSVGElement>>;
-/** AppShell — side navigation + top bar + content. The nav is fixed from lg (1024px) up and a Drawer below it.
- * Which one shows is decided in CSS (4.16), so the server's HTML is already right on a phone and nothing shifts on
- * hydration; JavaScript only opens and closes the drawer. */
 export declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps & React$1.RefAttributes<HTMLDivElement>>;
 /** ActionBar — a bar stuck to the bottom of the screen or of a card: a status line and the form's or selection's
  * actions. It is `position: sticky`, so it stays in the flow at the end of its parent and never covers the last field. */

package/dist/server/index.cjs

@@ -1471,6 +1471,7 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
         (hide === "sm" || hide === "md" || hide === "lg") && "aura-page-header--title-hide-below-" + hide,
         (hide === "sm" || hide === "md" || hide === "lg") && !hasMeta && "has-no-meta",
         bar && "aura-page-header--actions-bar-below-" + bar,
+        bar && props.actionsBarLook === "floating" && "aura-page-header--actions-bar-floating",
         size && "aura-page-header--" + size,
         props.actionsAlign === "start" && "aura-page-header--actions-start",
         props.className

package/dist/server/index.d.cts

@@ -532,8 +532,8 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * meta line and actions stay; with no meta, the actions start the header. */
 	titleHideBelow?: "sm" | "md" | "lg" | undefined;
 	/** 5.45 (Chamber-OS 150): below this breakpoint (`sm` 640px, `md` 768px) the same `actions` — rendered once, so a
-	 * dialog trigger or test id is never doubled — become a bar fixed to the bottom of the screen with ActionBar's look:
-	 * above a BottomNav, clear of the home indicator, `actionsStatus` as its status line. The page's end and a focused
+	 * dialog trigger or test id is never doubled — become a bar fixed to the bottom of the screen, ActionBar's edge
+	 * strip (5.48; `actionsBarLook`): above a BottomNav, clear of the home indicator, `actionsStatus` as its status line. The page's end and a focused
 	 * field scroll clear of it (AppShell's content, or the body, gains the bar's height). With an IconButton among them
 	 * the actions share one row, labels wrapping inside the buttons (as `actionsFullWidthBelow`, Chamber-OS 149); with only icon
 	 * buttons the status and the icons share one row. From the breakpoint up nothing changes. Use it for a detail page's
@@ -541,6 +541,10 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * have a transform, filter, backdrop-filter, will-change, paint/layout containment or `content-visibility: auto`, or it is placed
 	 * against that ancestor instead of the screen — the main entry warns in development. */
 	actionsBarBelow?: "sm" | "md" | undefined;
+	/** 5.48 (Chamber-OS 153): the bar's look. `edge` (default) is ActionBar's strip — the full width of the screen, on
+	 * its bottom edge (or above a BottomNav), a top border only, the home-indicator inset inside it. `floating` is 5.45's
+	 * card: inset 16px, lifted 12px, bordered all round with rounded corners and a shadow. */
+	actionsBarLook?: "edge" | "floating" | undefined;
 	/** 5.45: the bar's status line ("Total 10,700.00 THB incl. VAT · due 22 Oct 2026"), shown only while the actions are
 	 * a bar, in a polite live region. */
 	actionsStatus?: React$1.ReactNode | undefined;

package/dist/server/index.d.ts

@@ -532,8 +532,8 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * meta line and actions stay; with no meta, the actions start the header. */
 	titleHideBelow?: "sm" | "md" | "lg" | undefined;
 	/** 5.45 (Chamber-OS 150): below this breakpoint (`sm` 640px, `md` 768px) the same `actions` — rendered once, so a
-	 * dialog trigger or test id is never doubled — become a bar fixed to the bottom of the screen with ActionBar's look:
-	 * above a BottomNav, clear of the home indicator, `actionsStatus` as its status line. The page's end and a focused
+	 * dialog trigger or test id is never doubled — become a bar fixed to the bottom of the screen, ActionBar's edge
+	 * strip (5.48; `actionsBarLook`): above a BottomNav, clear of the home indicator, `actionsStatus` as its status line. The page's end and a focused
 	 * field scroll clear of it (AppShell's content, or the body, gains the bar's height). With an IconButton among them
 	 * the actions share one row, labels wrapping inside the buttons (as `actionsFullWidthBelow`, Chamber-OS 149); with only icon
 	 * buttons the status and the icons share one row. From the breakpoint up nothing changes. Use it for a detail page's
@@ -541,6 +541,10 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * have a transform, filter, backdrop-filter, will-change, paint/layout containment or `content-visibility: auto`, or it is placed
 	 * against that ancestor instead of the screen — the main entry warns in development. */
 	actionsBarBelow?: "sm" | "md" | undefined;
+	/** 5.48 (Chamber-OS 153): the bar's look. `edge` (default) is ActionBar's strip — the full width of the screen, on
+	 * its bottom edge (or above a BottomNav), a top border only, the home-indicator inset inside it. `floating` is 5.45's
+	 * card: inset 16px, lifted 12px, bordered all round with rounded corners and a shadow. */
+	actionsBarLook?: "edge" | "floating" | undefined;
 	/** 5.45: the bar's status line ("Total 10,700.00 THB incl. VAT · due 22 Oct 2026"), shown only while the actions are
 	 * a bar, in a polite live region. */
 	actionsStatus?: React$1.ReactNode | undefined;

package/dist/server/index.js

@@ -1407,6 +1407,7 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
         (hide === "sm" || hide === "md" || hide === "lg") && "aura-page-header--title-hide-below-" + hide,
         (hide === "sm" || hide === "md" || hide === "lg") && !hasMeta && "has-no-meta",
         bar && "aura-page-header--actions-bar-below-" + bar,
+        bar && props.actionsBarLook === "floating" && "aura-page-header--actions-bar-floating",
         size && "aura-page-header--" + size,
         props.actionsAlign === "start" && "aura-page-header--actions-start",
         props.className

package/dist/styles.css

@@ -1109,6 +1109,8 @@ a.aura-tab { text-decoration: none; }
   --aura-shell-bar-height: 56px; /* 5.14 (Chamber-OS 104): the top bar's height, for sticky offsets under it */
 }
 .aura-shell--no-bar { --aura-shell-bar-height: 0px; }
+/* 5.49 (Chamber-OS 155): AppShell watches this for changes of the browser's text size (see the 30rem queries). */
+.aura-shell__probe { position: absolute; top: 0; inset-inline-start: 0; font-size: medium; width: 1em; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
 /* 5.35 (DxT Monitor 13): headerHideOnScroll — below lg the bar slides up out of view while the page scrolls down (its
  * shadow too); AppShell sets the bar-height token to 0 meanwhile. */
 .aura-shell__bar--hides { transition: transform var(--aura-duration-base) var(--aura-ease); }
@@ -1208,11 +1210,16 @@ a.aura-tab { text-decoration: none; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions: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); }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; } /* 5.45 (Chamber-OS addendum 52): centred on a taller button */
 }
-/* 5.45 (Chamber-OS 150): actionsBarBelow — the same actions become a fixed bar with a status line; the page gains its
+/* 5.48 (Chamber-OS 154): only on a screen taller than 30rem (5.49: 480px at the default text size) — on a short one (400% zoom, a phone held sideways) the
+ * actions stay in the header's own row and the page keeps its full height.
+ * 5.48 (Chamber-OS 153): the bar is ActionBar's edge strip (full width, on the bottom edge, top border, the safe area
+ * inside); actionsBarLook="floating" keeps 5.45's inset card.
+ * 5.45 (Chamber-OS 150): actionsBarBelow — the same actions become a fixed bar with a status line; the page gains its
  * height (--aura-page-actions-height, measured on the client) so its end and a focused field scroll clear. */
 .aura-page-header__status { display: none; }
-@media (max-width: 639.98px) {
-  .aura-page-header--actions-bar-below-sm > .aura-page-header__actions { position: fixed; z-index: var(--aura-z-bar); left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 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) var(--aura-space-2) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); transition: bottom var(--aura-duration-base) var(--aura-ease); }
+@media (max-width: 639.98px) and (min-height: 30.00125rem) {
+  .aura-page-header--actions-bar-below-sm > .aura-page-header__actions { 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); }
+  .aura-page-header--actions-bar-below-sm.aura-page-header--actions-bar-floating > .aura-page-header__actions { left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px))); padding-bottom: var(--aura-space-2); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__status { display: block; flex: 1 1 100%; min-width: 0; font-size: max(14px, .875rem); line-height: 1.5; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > :not(.aura-page-header__status) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
@@ -1223,12 +1230,14 @@ a.aura-tab { text-decoration: none; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions: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); }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions: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) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
+  :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); }
 }
-@media (max-width: 767.98px) {
-  .aura-page-header--actions-bar-below-md > .aura-page-header__actions { position: fixed; z-index: var(--aura-z-bar); left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 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) var(--aura-space-2) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); transition: bottom var(--aura-duration-base) var(--aura-ease); }
+@media (max-width: 767.98px) and (min-height: 30.00125rem) {
+  .aura-page-header--actions-bar-below-md > .aura-page-header__actions { 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); }
+  .aura-page-header--actions-bar-below-md.aura-page-header--actions-bar-floating > .aura-page-header__actions { left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px))); padding-bottom: var(--aura-space-2); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__status { display: block; flex: 1 1 100%; min-width: 0; font-size: max(14px, .875rem); line-height: 1.5; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > :not(.aura-page-header__status) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
@@ -1239,7 +1248,8 @@ a.aura-tab { text-decoration: none; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions: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); }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions: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) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
+  :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); }
 }
@@ -2085,6 +2095,15 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay);
 }
 .aura-actionbar--container { bottom: 0; border-top: 1px solid var(--aura-border-default); }
+/* 5.48 (Chamber-OS 154): on a short screen (30rem or less: 400% zoom, a phone held sideways) the bar stops sticking —
+ * it stays at the end of its container, in the flow, so it never covers a focused field (WCAG 2.4.11, 1.4.10). */
+/* 5.49 (Chamber-OS 155): the threshold is 30rem, which in a media query is the browser's text size, not the page's:
+ * 480px at the default 16px, 960px at 32px, so large text counts lines of text, not pixels. */
+@media (max-height: 30rem) { .aura-actionbar:not(.is-idle) { position: static; } }
+/* …and AppShell's top bar scrolls away with the page, so Shift+Tab never lands a field under it. */
+@media (max-height: 30rem) { .aura-shell__bar { position: static; } }
+/* 5.48: wherever a BottomNav shows, a field scrolled into view (Tab) stops above it, not under it. */
+:root { scroll-padding-bottom: var(--aura-bottomnav-offset, 0px); }
 .aura-actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-height: 60px; box-sizing: border-box; padding-block: var(--aura-space-2); padding-inline: var(--aura-space-4) var(--aura-space-3); }
 .aura-actionbar__status { flex: 1 1 8rem; min-width: 0; font-size: max(14px, .875rem); color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; }
 .aura-actionbar__status:empty { flex-basis: 0; }

package/dist/styles.layer.css

@@ -1111,6 +1111,8 @@ a.aura-tab { text-decoration: none; }
   --aura-shell-bar-height: 56px; /* 5.14 (Chamber-OS 104): the top bar's height, for sticky offsets under it */
 }
 .aura-shell--no-bar { --aura-shell-bar-height: 0px; }
+/* 5.49 (Chamber-OS 155): AppShell watches this for changes of the browser's text size (see the 30rem queries). */
+.aura-shell__probe { position: absolute; top: 0; inset-inline-start: 0; font-size: medium; width: 1em; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
 /* 5.35 (DxT Monitor 13): headerHideOnScroll — below lg the bar slides up out of view while the page scrolls down (its
  * shadow too); AppShell sets the bar-height token to 0 meanwhile. */
 .aura-shell__bar--hides { transition: transform var(--aura-duration-base) var(--aura-ease); }
@@ -1210,11 +1212,16 @@ a.aura-tab { text-decoration: none; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions: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); }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; } /* 5.45 (Chamber-OS addendum 52): centred on a taller button */
 }
-/* 5.45 (Chamber-OS 150): actionsBarBelow — the same actions become a fixed bar with a status line; the page gains its
+/* 5.48 (Chamber-OS 154): only on a screen taller than 30rem (5.49: 480px at the default text size) — on a short one (400% zoom, a phone held sideways) the
+ * actions stay in the header's own row and the page keeps its full height.
+ * 5.48 (Chamber-OS 153): the bar is ActionBar's edge strip (full width, on the bottom edge, top border, the safe area
+ * inside); actionsBarLook="floating" keeps 5.45's inset card.
+ * 5.45 (Chamber-OS 150): actionsBarBelow — the same actions become a fixed bar with a status line; the page gains its
  * height (--aura-page-actions-height, measured on the client) so its end and a focused field scroll clear. */
 .aura-page-header__status { display: none; }
-@media (max-width: 639.98px) {
-  .aura-page-header--actions-bar-below-sm > .aura-page-header__actions { position: fixed; z-index: var(--aura-z-bar); left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 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) var(--aura-space-2) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); transition: bottom var(--aura-duration-base) var(--aura-ease); }
+@media (max-width: 639.98px) and (min-height: 30.00125rem) {
+  .aura-page-header--actions-bar-below-sm > .aura-page-header__actions { 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); }
+  .aura-page-header--actions-bar-below-sm.aura-page-header--actions-bar-floating > .aura-page-header__actions { left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px))); padding-bottom: var(--aura-space-2); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__status { display: block; flex: 1 1 100%; min-width: 0; font-size: max(14px, .875rem); line-height: 1.5; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > :not(.aura-page-header__status) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
@@ -1225,12 +1232,14 @@ a.aura-tab { text-decoration: none; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions: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); }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions: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) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
+  :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); }
 }
-@media (max-width: 767.98px) {
-  .aura-page-header--actions-bar-below-md > .aura-page-header__actions { position: fixed; z-index: var(--aura-z-bar); left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 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) var(--aura-space-2) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); transition: bottom var(--aura-duration-base) var(--aura-ease); }
+@media (max-width: 767.98px) and (min-height: 30.00125rem) {
+  .aura-page-header--actions-bar-below-md > .aura-page-header__actions { 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); }
+  .aura-page-header--actions-bar-below-md.aura-page-header--actions-bar-floating > .aura-page-header__actions { left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px))); padding-bottom: var(--aura-space-2); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__status { display: block; flex: 1 1 100%; min-width: 0; font-size: max(14px, .875rem); line-height: 1.5; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > :not(.aura-page-header__status) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
@@ -1241,7 +1250,8 @@ a.aura-tab { text-decoration: none; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions: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); }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions: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) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
+  :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); }
 }
@@ -2087,6 +2097,15 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay);
 }
 .aura-actionbar--container { bottom: 0; border-top: 1px solid var(--aura-border-default); }
+/* 5.48 (Chamber-OS 154): on a short screen (30rem or less: 400% zoom, a phone held sideways) the bar stops sticking —
+ * it stays at the end of its container, in the flow, so it never covers a focused field (WCAG 2.4.11, 1.4.10). */
+/* 5.49 (Chamber-OS 155): the threshold is 30rem, which in a media query is the browser's text size, not the page's:
+ * 480px at the default 16px, 960px at 32px, so large text counts lines of text, not pixels. */
+@media (max-height: 30rem) { .aura-actionbar:not(.is-idle) { position: static; } }
+/* …and AppShell's top bar scrolls away with the page, so Shift+Tab never lands a field under it. */
+@media (max-height: 30rem) { .aura-shell__bar { position: static; } }
+/* 5.48: wherever a BottomNav shows, a field scrolled into view (Tab) stops above it, not under it. */
+:root { scroll-padding-bottom: var(--aura-bottomnav-offset, 0px); }
 .aura-actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-height: 60px; box-sizing: border-box; padding-block: var(--aura-space-2); padding-inline: var(--aura-space-4) var(--aura-space-3); }
 .aura-actionbar__status { flex: 1 1 8rem; min-width: 0; font-size: max(14px, .875rem); color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; }
 .aura-actionbar__status:empty { flex-basis: 0; }

package/package.json

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