@jirawatpyk/aura-react 5.46.0 → 5.48.0

package/README.md

@@ -186,6 +186,19 @@ 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.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 480px tall or less — 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); from 481px tall everything is as before. 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.
+- **`hero` steps to 36px from 1024px** (30px below), on a 1.2 line, as `hero-lg` does — the portal Main and Edit boards. `hero-lg` is unchanged (26px, then 36px).
+- **`--aura-page-header-hero-space`**: the room above a `hero` or `hero-lg` title, default 16px, on top of the page's own padding (which belongs to the app). For the boards' 24px on a phone and 40px from 1024px inside AppShell's 24px / 32px content padding, set it to `0` below 1024px and `8px` from 1024px — or whatever your page padding needs.
+- Under `lang="th"` titles keep their 1.4 line at every size. Checked at 390 and 1280px in English, Thai and Swedish and at a 32px default font size: nothing scrolls sideways.
+
 ## 5.46 — Chamber-OS addendum 53 (#151)
 
 What Chamber-OS's own page header did that PageHeader didn't, so it can be rebuilt on PageHeader with its props kept:
@@ -201,7 +214,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

@@ -7839,7 +7839,7 @@ window.Aura = (() => {
       return n3 != null && n3 !== false && n3 !== "";
     };
     const hasMeta = shown(props.meta) || shown(props.subtitle) || shown(props.titleAddon);
-    const size = props.size === "hero" || props.size === "hero-lg" ? props.size : null;
+    const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
     const eyebrow = props.eyebrow;
     const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
     const heading = h8(
@@ -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();
@@ -8339,7 +8343,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 +8356,16 @@ 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);
+        window.addEventListener("resize", sync);
         return function() {
           if (ro) ro.disconnect();
+          window.removeEventListener("resize", sync);
           root.style.removeProperty("--aura-shell-bar-height");
         };
       },

package/dist/cjs/index.cjs

@@ -7821,7 +7821,7 @@ var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
     return n3 != null && n3 !== false && n3 !== "";
   };
   const hasMeta = shown(props.meta) || shown(props.subtitle) || shown(props.titleAddon);
-  const size = props.size === "hero" || props.size === "hero-lg" ? props.size : null;
+  const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
   const heading = h8(
@@ -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();
@@ -8321,7 +8325,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 +8338,16 @@ 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);
+      window.addEventListener("resize", sync);
       return function() {
         if (ro) ro.disconnect();
+        window.removeEventListener("resize", sync);
         root.style.removeProperty("--aura-shell-bar-height");
       };
     },

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();
@@ -37,7 +40,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 +53,16 @@ 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);
+      window.addEventListener("resize", sync);
       return function() {
         if (ro) ro.disconnect();
+        window.removeEventListener("resize", sync);
         root.style.removeProperty("--aura-shell-bar-height");
       };
     },

package/dist/esm/PageHeader.js

@@ -15,7 +15,7 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
     return n != null && n !== false && n !== "";
   };
   const hasMeta = shown(props.meta) || shown(props.subtitle) || shown(props.titleAddon);
-  const size = props.size === "hero" || props.size === "hero-lg" ? props.size : null;
+  const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
   const heading = h(
@@ -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

@@ -1947,10 +1947,12 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 5.46: a chip or badge on the title's line (a role, an invoice's status, "Archived"). Title and addon share a
 	 * wrapping row, 8px apart vertically and 12px across; on a narrow screen the addon wraps under the title. */
 	titleAddon?: React$1.ReactNode | undefined;
-	/** 5.46: the title's size. `default` 28px below 640px, 36px from 640px; `hero` 30px on a 36px line with 16px more
-	 * room above; `hero-lg` 26px below 1024px and 36px from 1024px, with the same room. Per page, the custom
-	 * properties `--aura-page-header-title-size` and `--aura-page-header-title-line-height` override any of them. */
-	size?: "default" | "hero" | "hero-lg" | undefined;
+	/** 5.46: the title's size. `default` 28px below 640px, 36px from 640px; `compact` (5.47, Chamber-OS 152) 26px below
+	 * 640px, 32px from 640px, on a 1.2 line — staff and list pages; `hero` 30px below 1024px and 36px from 1024px (5.47)
+	 * on a 1.2 line, with more room above (`--aura-page-header-hero-space`, default 16px); `hero-lg` 26px below 1024px
+	 * and 36px from 1024px, with the same room. Per page, the custom properties `--aura-page-header-title-size` and
+	 * `--aura-page-header-title-line-height` override any of them. */
+	size?: "default" | "compact" | "hero" | "hero-lg" | undefined;
 	/** 5.46: focus the heading when the header mounts (`tabIndex={-1}`, `preventScroll`, no visible ring) — a page
 	 * reached by a server redirect (renewal done, back from a payment page), so a screen reader starts there (WCAG
 	 * 2.4.3). The main entry's PageHeader does it; from `/server` the heading is focusable but not focused. */
@@ -1972,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
@@ -1981,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;
@@ -2112,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

@@ -1947,10 +1947,12 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 5.46: a chip or badge on the title's line (a role, an invoice's status, "Archived"). Title and addon share a
 	 * wrapping row, 8px apart vertically and 12px across; on a narrow screen the addon wraps under the title. */
 	titleAddon?: React$1.ReactNode | undefined;
-	/** 5.46: the title's size. `default` 28px below 640px, 36px from 640px; `hero` 30px on a 36px line with 16px more
-	 * room above; `hero-lg` 26px below 1024px and 36px from 1024px, with the same room. Per page, the custom
-	 * properties `--aura-page-header-title-size` and `--aura-page-header-title-line-height` override any of them. */
-	size?: "default" | "hero" | "hero-lg" | undefined;
+	/** 5.46: the title's size. `default` 28px below 640px, 36px from 640px; `compact` (5.47, Chamber-OS 152) 26px below
+	 * 640px, 32px from 640px, on a 1.2 line — staff and list pages; `hero` 30px below 1024px and 36px from 1024px (5.47)
+	 * on a 1.2 line, with more room above (`--aura-page-header-hero-space`, default 16px); `hero-lg` 26px below 1024px
+	 * and 36px from 1024px, with the same room. Per page, the custom properties `--aura-page-header-title-size` and
+	 * `--aura-page-header-title-line-height` override any of them. */
+	size?: "default" | "compact" | "hero" | "hero-lg" | undefined;
 	/** 5.46: focus the heading when the header mounts (`tabIndex={-1}`, `preventScroll`, no visible ring) — a page
 	 * reached by a server redirect (renewal done, back from a payment page), so a screen reader starts there (WCAG
 	 * 2.4.3). The main entry's PageHeader does it; from `/server` the heading is focusable but not focused. */
@@ -1972,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
@@ -1981,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;
@@ -2112,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

@@ -1446,7 +1446,7 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
     return n3 != null && n3 !== false && n3 !== "";
   };
   const hasMeta = shown(props.meta) || shown(props.subtitle) || shown(props.titleAddon);
-  const size = props.size === "hero" || props.size === "hero-lg" ? props.size : null;
+  const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
   const heading = h4(
@@ -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

@@ -505,10 +505,12 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 5.46: a chip or badge on the title's line (a role, an invoice's status, "Archived"). Title and addon share a
 	 * wrapping row, 8px apart vertically and 12px across; on a narrow screen the addon wraps under the title. */
 	titleAddon?: React$1.ReactNode | undefined;
-	/** 5.46: the title's size. `default` 28px below 640px, 36px from 640px; `hero` 30px on a 36px line with 16px more
-	 * room above; `hero-lg` 26px below 1024px and 36px from 1024px, with the same room. Per page, the custom
-	 * properties `--aura-page-header-title-size` and `--aura-page-header-title-line-height` override any of them. */
-	size?: "default" | "hero" | "hero-lg" | undefined;
+	/** 5.46: the title's size. `default` 28px below 640px, 36px from 640px; `compact` (5.47, Chamber-OS 152) 26px below
+	 * 640px, 32px from 640px, on a 1.2 line — staff and list pages; `hero` 30px below 1024px and 36px from 1024px (5.47)
+	 * on a 1.2 line, with more room above (`--aura-page-header-hero-space`, default 16px); `hero-lg` 26px below 1024px
+	 * and 36px from 1024px, with the same room. Per page, the custom properties `--aura-page-header-title-size` and
+	 * `--aura-page-header-title-line-height` override any of them. */
+	size?: "default" | "compact" | "hero" | "hero-lg" | undefined;
 	/** 5.46: focus the heading when the header mounts (`tabIndex={-1}`, `preventScroll`, no visible ring) — a page
 	 * reached by a server redirect (renewal done, back from a payment page), so a screen reader starts there (WCAG
 	 * 2.4.3). The main entry's PageHeader does it; from `/server` the heading is focusable but not focused. */
@@ -530,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
@@ -539,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

@@ -505,10 +505,12 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 5.46: a chip or badge on the title's line (a role, an invoice's status, "Archived"). Title and addon share a
 	 * wrapping row, 8px apart vertically and 12px across; on a narrow screen the addon wraps under the title. */
 	titleAddon?: React$1.ReactNode | undefined;
-	/** 5.46: the title's size. `default` 28px below 640px, 36px from 640px; `hero` 30px on a 36px line with 16px more
-	 * room above; `hero-lg` 26px below 1024px and 36px from 1024px, with the same room. Per page, the custom
-	 * properties `--aura-page-header-title-size` and `--aura-page-header-title-line-height` override any of them. */
-	size?: "default" | "hero" | "hero-lg" | undefined;
+	/** 5.46: the title's size. `default` 28px below 640px, 36px from 640px; `compact` (5.47, Chamber-OS 152) 26px below
+	 * 640px, 32px from 640px, on a 1.2 line — staff and list pages; `hero` 30px below 1024px and 36px from 1024px (5.47)
+	 * on a 1.2 line, with more room above (`--aura-page-header-hero-space`, default 16px); `hero-lg` 26px below 1024px
+	 * and 36px from 1024px, with the same room. Per page, the custom properties `--aura-page-header-title-size` and
+	 * `--aura-page-header-title-line-height` override any of them. */
+	size?: "default" | "compact" | "hero" | "hero-lg" | undefined;
 	/** 5.46: focus the heading when the header mounts (`tabIndex={-1}`, `preventScroll`, no visible ring) — a page
 	 * reached by a server redirect (renewal done, back from a payment page), so a screen reader starts there (WCAG
 	 * 2.4.3). The main entry's PageHeader does it; from `/server` the heading is focusable but not focused. */
@@ -530,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
@@ -539,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

@@ -1382,7 +1382,7 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
     return n3 != null && n3 !== false && n3 !== "";
   };
   const hasMeta = shown(props.meta) || shown(props.subtitle) || shown(props.titleAddon);
-  const size = props.size === "hero" || props.size === "hero-lg" ? props.size : null;
+  const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
   const heading = h4(
@@ -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

@@ -1208,11 +1208,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 480px — 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: 480.02px) {
+  .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 +1228,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: 480.02px) {
+  .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 +1246,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); }
 }
@@ -1251,8 +1259,12 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header__title-row > .aura-page-header__title { min-width: 0; }
 .aura-page-header__title-addon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); min-width: 0; }
 .aura-page-header__eyebrow--rich { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); font-family: var(--font-sans); line-height: 1.5; }
-.aura-page-header--hero, .aura-page-header--hero-lg { padding-top: var(--aura-space-4); }
+.aura-page-header--hero, .aura-page-header--hero-lg { padding-top: var(--aura-page-header-hero-space, var(--aura-space-4)); }
 .aura-page-header--hero .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(30px, 1.875rem)); line-height: var(--aura-page-header-title-line-height, 1.2); }
+/* 5.47 (Chamber-OS 152): compact — the staff boards' 26 / 32; hero steps to 36px from 1024px like hero-lg. */
+.aura-page-header--compact .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(26px, 1.625rem)); line-height: var(--aura-page-header-title-line-height, 1.2); }
+@media (min-width: 640px) { .aura-page-header--compact .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(32px, 2rem)); } }
+@media (min-width: 1024px) { .aura-page-header--hero .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(36px, 2.25rem)); } }
 .aura-page-header--hero-lg .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(26px, 1.625rem)); line-height: var(--aura-page-header-title-line-height, 1.25); }
 @media (min-width: 1024px) { .aura-page-header--hero-lg .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(36px, 2.25rem)); line-height: var(--aura-page-header-title-line-height, 1.2); } }
 .aura-page-header__title[tabindex="-1"]:focus { outline: none; }
@@ -2081,6 +2093,13 @@ 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 (480px 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). */
+@media (max-height: 480px) { .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: 480px) { .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

@@ -1210,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 480px — 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: 480.02px) {
+  .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 +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: 480.02px) {
+  .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 +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); }
 }
@@ -1253,8 +1261,12 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header__title-row > .aura-page-header__title { min-width: 0; }
 .aura-page-header__title-addon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); min-width: 0; }
 .aura-page-header__eyebrow--rich { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); font-family: var(--font-sans); line-height: 1.5; }
-.aura-page-header--hero, .aura-page-header--hero-lg { padding-top: var(--aura-space-4); }
+.aura-page-header--hero, .aura-page-header--hero-lg { padding-top: var(--aura-page-header-hero-space, var(--aura-space-4)); }
 .aura-page-header--hero .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(30px, 1.875rem)); line-height: var(--aura-page-header-title-line-height, 1.2); }
+/* 5.47 (Chamber-OS 152): compact — the staff boards' 26 / 32; hero steps to 36px from 1024px like hero-lg. */
+.aura-page-header--compact .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(26px, 1.625rem)); line-height: var(--aura-page-header-title-line-height, 1.2); }
+@media (min-width: 640px) { .aura-page-header--compact .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(32px, 2rem)); } }
+@media (min-width: 1024px) { .aura-page-header--hero .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(36px, 2.25rem)); } }
 .aura-page-header--hero-lg .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(26px, 1.625rem)); line-height: var(--aura-page-header-title-line-height, 1.25); }
 @media (min-width: 1024px) { .aura-page-header--hero-lg .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(36px, 2.25rem)); line-height: var(--aura-page-header-title-line-height, 1.2); } }
 .aura-page-header__title[tabindex="-1"]:focus { outline: none; }
@@ -2083,6 +2095,13 @@ 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 (480px 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). */
+@media (max-height: 480px) { .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: 480px) { .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.46.0",
+  "version": "5.48.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",