@jirawatpyk/aura-react 5.44.0 → 5.46.0

package/dist/esm/PageHeader.js

@@ -11,7 +11,25 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
   const level = props.headingLevel || 1;
   const below = props.actionsFullWidthBelow;
   const hide = props.titleHideBelow;
-  const hasMeta = props.meta != null && props.meta !== false;
+  const shown = function(n) {
+    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 eyebrow = props.eyebrow;
+  const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
+  const heading = h(
+    "h" + level,
+    {
+      className: "aura-page-header__title",
+      id: props.titleId,
+      tabIndex: props.focusTitleOnMount ? -1 : void 0,
+      "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
+    },
+    props.title
+  );
+  const hasActions = props.actions != null && props.actions !== false;
+  const bar = hasActions && (props.actionsBarBelow === "sm" || props.actionsBarBelow === "md") ? props.actionsBarBelow : null;
   return h(
     "div",
     Object.assign(attrs, {
@@ -21,6 +39,9 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
         (below === "sm" || below === "md" || below === "lg") && "aura-page-header--actions-full-below-" + below,
         (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,
+        size && "aura-page-header--" + size,
+        props.actionsAlign === "start" && "aura-page-header--actions-start",
         props.className
       ),
       style: props.style
@@ -29,11 +50,22 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
       "div",
       { className: "aura-page-header__text" },
       props.breadcrumb != null && props.breadcrumb !== false ? h("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
-      props.eyebrow != null && props.eyebrow !== false ? h("p", { className: "aura-page-header__eyebrow" }, props.eyebrow) : null,
-      h("h" + level, { className: "aura-page-header__title", id: props.titleId }, props.title),
+      shown(eyebrow) ? plainEyebrow ? h("p", { className: "aura-page-header__eyebrow" }, eyebrow) : h("div", { className: "aura-page-header__eyebrow aura-page-header__eyebrow--rich" }, eyebrow) : null,
+      shown(props.titleAddon) ? h(
+        "div",
+        { className: "aura-page-header__title-row" },
+        heading,
+        h("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
+      ) : heading,
+      shown(props.subtitle) ? h("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
       props.meta != null && props.meta !== false ? h("div", { className: "aura-page-header__meta" }, props.meta) : null
     ),
-    props.actions != null && props.actions !== false ? h("div", { className: "aura-page-header__actions" }, props.actions) : null
+    props.actions != null && props.actions !== false ? h(
+      "div",
+      { className: "aura-page-header__actions" },
+      bar && props.actionsStatus != null && props.actionsStatus !== false ? h("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null,
+      props.actions
+    ) : null
   );
 });
 export {

package/dist/esm/PageHeaderClient.js

@@ -0,0 +1,68 @@
+'use client';
+import * as React from "react";
+import { PageHeader as StaticPageHeader } from "./PageHeader.js";
+import { devWarnOnce, useMergedRef } from "./internal.js";
+const NAME = "--aura-page-actions-height";
+const bars = [];
+function trapped(el) {
+  for (let p = el.parentElement; p && p !== document.documentElement; p = p.parentElement) {
+    const s = getComputedStyle(p);
+    if (s.transform !== "none" || s.filter !== "none" || (s.backdropFilter || "none") !== "none" || s.contentVisibility === "auto" || s.perspective !== "none" || /transform|filter|perspective/.test(s.willChange) || /paint|layout|strict|content/.test(s.contain))
+      return true;
+  }
+  return false;
+}
+const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
+  const own = React.useRef(null);
+  const merged = useMergedRef(ref, own);
+  const bar = props.actionsBarBelow;
+  const hasActions = props.actions != null && props.actions !== false;
+  React.useEffect(
+    function() {
+      if (bar !== "sm" && bar !== "md" || !hasActions || !own.current) return;
+      const el = own.current.querySelector(":scope > .aura-page-header__actions");
+      if (!el) return;
+      const root = document.documentElement;
+      let checked = false;
+      function sync() {
+        if (bars[bars.length - 1] !== sync) return;
+        if (getComputedStyle(el).position === "fixed") {
+          root.style.setProperty(NAME, el.offsetHeight + "px");
+          if (!checked && (checked = true, trapped(el)))
+            devWarnOnce(
+              "pageheader-bar-trapped",
+              "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
+            );
+        } else root.style.removeProperty(NAME);
+      }
+      if (bars.length)
+        devWarnOnce(
+          "pageheader-bar-twice",
+          "PageHeader actionsBarBelow: two bars on one page overlap at the bottom of the screen. Give it to one PageHeader per page."
+        );
+      bars.push(sync);
+      const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
+      if (ro) ro.observe(el);
+      window.addEventListener("resize", sync);
+      sync();
+      return function() {
+        if (ro) ro.disconnect();
+        window.removeEventListener("resize", sync);
+        bars.splice(bars.indexOf(sync), 1);
+        if (bars.length) bars[bars.length - 1]();
+        else root.style.removeProperty(NAME);
+      };
+    },
+    [bar, hasActions]
+  );
+  const focusTitle = !!props.focusTitleOnMount;
+  React.useEffect(function() {
+    if (!focusTitle || !own.current) return;
+    const t = own.current.querySelector(".aura-page-header__title");
+    if (t) t.focus({ preventScroll: true });
+  }, []);
+  return /* @__PURE__ */ React.createElement(StaticPageHeader, { ...props, ref: merged });
+});
+export {
+  PageHeader
+};

package/dist/esm/index.js

@@ -35,7 +35,7 @@ import { Avatar } from "./Avatar.js";
 import { Stack } from "./Stack.js";
 import { Grid } from "./Grid.js";
 import { Container } from "./Container.js";
-import { PageHeader } from "./PageHeader.js";
+import { PageHeader } from "./PageHeaderClient.js";
 import { StatusTile } from "./StatusTile.js";
 import { TileGrid, Sparkline } from "./tiles.js";
 import { AppShell } from "./AppShell.js";

package/dist/index.d.cts

@@ -1932,7 +1932,8 @@ export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps
  * `/server`. It renders a plain `div`: to name a region by its title, put `aria-labelledby={titleId}` on your own
  * `<section>`, or pass `role="region"` with it. */
 export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
-	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
+	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). 5.46 (Chamber-OS
+	 * 151): anything but text (chips: a status, a member number, badges) is a wrapping row in a `div`, 8px apart. */
 	eyebrow?: React$1.ReactNode | undefined;
 	/** 5.33 (DxT Monitor #7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` (a `nav`
 	 * can't sit in the eyebrow's `p`) and its own 13px sans. Detail pages show a breadcrumb or an eyebrow; with both,
@@ -1940,6 +1941,23 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	breadcrumb?: React$1.ReactNode | undefined;
 	/** The page's heading. */
 	title: React$1.ReactNode;
+	/** 5.46 (Chamber-OS 151): a sentence under the title at body size (14px/1.7, secondary colour) — "Members, plans
+	 * and renewals for SweCham" — before `meta`. A `div`, so a loading skeleton's blocks are valid inside. */
+	subtitle?: React$1.ReactNode | undefined;
+	/** 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: 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. */
+	focusTitleOnMount?: boolean | undefined;
+	/** 5.46: `end` (default) lines the actions up with the bottom of the text; `start` with its top (the title, when
+	 * there is no breadcrumb or eyebrow). */
+	actionsAlign?: "end" | "start" | undefined;
 	/** A line under the title — counts, last update, owner. */
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
@@ -1953,6 +1971,19 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * readers — and the breadcrumb and eyebrow are hidden, for phone layouts that show the title in the top bar. The
 	 * 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
+	 * 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
+	 * own actions (Issue credit note…, ⋯) — one per page. The bar is `position: fixed`: no ancestor of the header may
+	 * 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.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;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */

package/dist/index.d.ts

@@ -1932,7 +1932,8 @@ export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps
  * `/server`. It renders a plain `div`: to name a region by its title, put `aria-labelledby={titleId}` on your own
  * `<section>`, or pass `role="region"` with it. */
 export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
-	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
+	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). 5.46 (Chamber-OS
+	 * 151): anything but text (chips: a status, a member number, badges) is a wrapping row in a `div`, 8px apart. */
 	eyebrow?: React$1.ReactNode | undefined;
 	/** 5.33 (DxT Monitor #7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` (a `nav`
 	 * can't sit in the eyebrow's `p`) and its own 13px sans. Detail pages show a breadcrumb or an eyebrow; with both,
@@ -1940,6 +1941,23 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	breadcrumb?: React$1.ReactNode | undefined;
 	/** The page's heading. */
 	title: React$1.ReactNode;
+	/** 5.46 (Chamber-OS 151): a sentence under the title at body size (14px/1.7, secondary colour) — "Members, plans
+	 * and renewals for SweCham" — before `meta`. A `div`, so a loading skeleton's blocks are valid inside. */
+	subtitle?: React$1.ReactNode | undefined;
+	/** 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: 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. */
+	focusTitleOnMount?: boolean | undefined;
+	/** 5.46: `end` (default) lines the actions up with the bottom of the text; `start` with its top (the title, when
+	 * there is no breadcrumb or eyebrow). */
+	actionsAlign?: "end" | "start" | undefined;
 	/** A line under the title — counts, last update, owner. */
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
@@ -1953,6 +1971,19 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * readers — and the breadcrumb and eyebrow are hidden, for phone layouts that show the title in the top bar. The
 	 * 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
+	 * 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
+	 * own actions (Issue credit note…, ⋯) — one per page. The bar is `position: fixed`: no ancestor of the header may
+	 * 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.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;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */

package/dist/server/index.cjs

@@ -1442,7 +1442,25 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
   const level = props.headingLevel || 1;
   const below = props.actionsFullWidthBelow;
   const hide = props.titleHideBelow;
-  const hasMeta = props.meta != null && props.meta !== false;
+  const shown = function(n3) {
+    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 eyebrow = props.eyebrow;
+  const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
+  const heading = h4(
+    "h" + level,
+    {
+      className: "aura-page-header__title",
+      id: props.titleId,
+      tabIndex: props.focusTitleOnMount ? -1 : void 0,
+      "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
+    },
+    props.title
+  );
+  const hasActions = props.actions != null && props.actions !== false;
+  const bar = hasActions && (props.actionsBarBelow === "sm" || props.actionsBarBelow === "md") ? props.actionsBarBelow : null;
   return h4(
     "div",
     Object.assign(attrs2, {
@@ -1452,6 +1470,9 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
         (below === "sm" || below === "md" || below === "lg") && "aura-page-header--actions-full-below-" + below,
         (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,
+        size && "aura-page-header--" + size,
+        props.actionsAlign === "start" && "aura-page-header--actions-start",
         props.className
       ),
       style: props.style
@@ -1460,11 +1481,22 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
       "div",
       { className: "aura-page-header__text" },
       props.breadcrumb != null && props.breadcrumb !== false ? h4("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
-      props.eyebrow != null && props.eyebrow !== false ? h4("p", { className: "aura-page-header__eyebrow" }, props.eyebrow) : null,
-      h4("h" + level, { className: "aura-page-header__title", id: props.titleId }, props.title),
+      shown(eyebrow) ? plainEyebrow ? h4("p", { className: "aura-page-header__eyebrow" }, eyebrow) : h4("div", { className: "aura-page-header__eyebrow aura-page-header__eyebrow--rich" }, eyebrow) : null,
+      shown(props.titleAddon) ? h4(
+        "div",
+        { className: "aura-page-header__title-row" },
+        heading,
+        h4("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
+      ) : heading,
+      shown(props.subtitle) ? h4("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
       props.meta != null && props.meta !== false ? h4("div", { className: "aura-page-header__meta" }, props.meta) : null
     ),
-    props.actions != null && props.actions !== false ? h4("div", { className: "aura-page-header__actions" }, props.actions) : null
+    props.actions != null && props.actions !== false ? h4(
+      "div",
+      { className: "aura-page-header__actions" },
+      bar && props.actionsStatus != null && props.actionsStatus !== false ? h4("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null,
+      props.actions
+    ) : null
   );
 });
 

package/dist/server/index.d.cts

@@ -490,7 +490,8 @@ export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps
  * `/server`. It renders a plain `div`: to name a region by its title, put `aria-labelledby={titleId}` on your own
  * `<section>`, or pass `role="region"` with it. */
 export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
-	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
+	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). 5.46 (Chamber-OS
+	 * 151): anything but text (chips: a status, a member number, badges) is a wrapping row in a `div`, 8px apart. */
 	eyebrow?: React$1.ReactNode | undefined;
 	/** 5.33 (DxT Monitor #7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` (a `nav`
 	 * can't sit in the eyebrow's `p`) and its own 13px sans. Detail pages show a breadcrumb or an eyebrow; with both,
@@ -498,6 +499,23 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	breadcrumb?: React$1.ReactNode | undefined;
 	/** The page's heading. */
 	title: React$1.ReactNode;
+	/** 5.46 (Chamber-OS 151): a sentence under the title at body size (14px/1.7, secondary colour) — "Members, plans
+	 * and renewals for SweCham" — before `meta`. A `div`, so a loading skeleton's blocks are valid inside. */
+	subtitle?: React$1.ReactNode | undefined;
+	/** 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: 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. */
+	focusTitleOnMount?: boolean | undefined;
+	/** 5.46: `end` (default) lines the actions up with the bottom of the text; `start` with its top (the title, when
+	 * there is no breadcrumb or eyebrow). */
+	actionsAlign?: "end" | "start" | undefined;
 	/** A line under the title — counts, last update, owner. */
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
@@ -511,6 +529,19 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * readers — and the breadcrumb and eyebrow are hidden, for phone layouts that show the title in the top bar. The
 	 * 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
+	 * 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
+	 * own actions (Issue credit note…, ⋯) — one per page. The bar is `position: fixed`: no ancestor of the header may
+	 * 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.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;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */

package/dist/server/index.d.ts

@@ -490,7 +490,8 @@ export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps
  * `/server`. It renders a plain `div`: to name a region by its title, put `aria-labelledby={titleId}` on your own
  * `<section>`, or pass `role="region"` with it. */
 export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
-	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
+	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). 5.46 (Chamber-OS
+	 * 151): anything but text (chips: a status, a member number, badges) is a wrapping row in a `div`, 8px apart. */
 	eyebrow?: React$1.ReactNode | undefined;
 	/** 5.33 (DxT Monitor #7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` (a `nav`
 	 * can't sit in the eyebrow's `p`) and its own 13px sans. Detail pages show a breadcrumb or an eyebrow; with both,
@@ -498,6 +499,23 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	breadcrumb?: React$1.ReactNode | undefined;
 	/** The page's heading. */
 	title: React$1.ReactNode;
+	/** 5.46 (Chamber-OS 151): a sentence under the title at body size (14px/1.7, secondary colour) — "Members, plans
+	 * and renewals for SweCham" — before `meta`. A `div`, so a loading skeleton's blocks are valid inside. */
+	subtitle?: React$1.ReactNode | undefined;
+	/** 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: 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. */
+	focusTitleOnMount?: boolean | undefined;
+	/** 5.46: `end` (default) lines the actions up with the bottom of the text; `start` with its top (the title, when
+	 * there is no breadcrumb or eyebrow). */
+	actionsAlign?: "end" | "start" | undefined;
 	/** A line under the title — counts, last update, owner. */
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
@@ -511,6 +529,19 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	 * readers — and the breadcrumb and eyebrow are hidden, for phone layouts that show the title in the top bar. The
 	 * 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
+	 * 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
+	 * own actions (Issue credit note…, ⋯) — one per page. The bar is `position: fixed`: no ancestor of the header may
+	 * 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.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;
 	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
 	headingLevel?: 1 | 2 | 3 | undefined;
 	/** The heading's id, for `aria-labelledby` on the page's region. */

package/dist/server/index.js

@@ -1378,7 +1378,25 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
   const level = props.headingLevel || 1;
   const below = props.actionsFullWidthBelow;
   const hide = props.titleHideBelow;
-  const hasMeta = props.meta != null && props.meta !== false;
+  const shown = function(n3) {
+    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 eyebrow = props.eyebrow;
+  const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
+  const heading = h4(
+    "h" + level,
+    {
+      className: "aura-page-header__title",
+      id: props.titleId,
+      tabIndex: props.focusTitleOnMount ? -1 : void 0,
+      "data-aura-focus-on-mount": props.focusTitleOnMount ? "" : void 0
+    },
+    props.title
+  );
+  const hasActions = props.actions != null && props.actions !== false;
+  const bar = hasActions && (props.actionsBarBelow === "sm" || props.actionsBarBelow === "md") ? props.actionsBarBelow : null;
   return h4(
     "div",
     Object.assign(attrs2, {
@@ -1388,6 +1406,9 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
         (below === "sm" || below === "md" || below === "lg") && "aura-page-header--actions-full-below-" + below,
         (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,
+        size && "aura-page-header--" + size,
+        props.actionsAlign === "start" && "aura-page-header--actions-start",
         props.className
       ),
       style: props.style
@@ -1396,11 +1417,22 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
       "div",
       { className: "aura-page-header__text" },
       props.breadcrumb != null && props.breadcrumb !== false ? h4("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
-      props.eyebrow != null && props.eyebrow !== false ? h4("p", { className: "aura-page-header__eyebrow" }, props.eyebrow) : null,
-      h4("h" + level, { className: "aura-page-header__title", id: props.titleId }, props.title),
+      shown(eyebrow) ? plainEyebrow ? h4("p", { className: "aura-page-header__eyebrow" }, eyebrow) : h4("div", { className: "aura-page-header__eyebrow aura-page-header__eyebrow--rich" }, eyebrow) : null,
+      shown(props.titleAddon) ? h4(
+        "div",
+        { className: "aura-page-header__title-row" },
+        heading,
+        h4("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
+      ) : heading,
+      shown(props.subtitle) ? h4("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
       props.meta != null && props.meta !== false ? h4("div", { className: "aura-page-header__meta" }, props.meta) : null
     ),
-    props.actions != null && props.actions !== false ? h4("div", { className: "aura-page-header__actions" }, props.actions) : null
+    props.actions != null && props.actions !== false ? h4(
+      "div",
+      { className: "aura-page-header__actions" },
+      bar && props.actionsStatus != null && props.actionsStatus !== false ? h4("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null,
+      props.actions
+    ) : null
   );
 });
 

package/dist/styles.css

@@ -1152,7 +1152,7 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--aura-space-4) var(--aura-space-6); min-width: 0; font-family: var(--font-sans); }
 .aura-page-header__text { display: flex; flex-direction: column; gap: var(--aura-space-1); flex: 1 1 320px; min-width: 0; }
 .aura-page-header__eyebrow { margin: 0; font-family: var(--font-mono); font-size: max(12px, .75rem); line-height: 1.7; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
-.aura-page-header__title { margin: 0; font-family: var(--font-display); font-size: max(28px, 1.75rem); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--aura-fg-primary); overflow-wrap: anywhere; }
+.aura-page-header__title { margin: 0; font-family: var(--font-display); font-size: var(--aura-page-header-title-size, max(28px, 1.75rem)); line-height: var(--aura-page-header-title-line-height, 1.15); font-weight: 600; letter-spacing: -0.01em; color: var(--aura-fg-primary); overflow-wrap: anywhere; }
 .aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
 .aura-page-header__meta { min-width: 0; font-size: max(13px, .8125rem); line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
 .aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
@@ -1160,15 +1160,15 @@ a.aura-tab { text-decoration: none; }
  * are gone; with no meta line the text block takes no room, so the actions start the header. */
 @media (max-width: 639.98px) {
   .aura-page-header--title-hide-below-sm .aura-page-header__title, .aura-page-header--title-hide-below-sm.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-  .aura-page-header--title-hide-below-sm :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: none; }
+  .aura-page-header--title-hide-below-sm :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow, .aura-page-header__title-addon) { display: none; }
 }
 @media (max-width: 767.98px) {
   .aura-page-header--title-hide-below-md .aura-page-header__title, .aura-page-header--title-hide-below-md.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-  .aura-page-header--title-hide-below-md :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: none; }
+  .aura-page-header--title-hide-below-md :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow, .aura-page-header__title-addon) { display: none; }
 }
 @media (max-width: 1023.98px) {
   .aura-page-header--title-hide-below-lg .aura-page-header__title, .aura-page-header--title-hide-below-lg.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-  .aura-page-header--title-hide-below-lg :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: none; }
+  .aura-page-header--title-hide-below-lg :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow, .aura-page-header__title-addon) { display: none; }
 }
 /* 5.37 (DxT Monitor #17): actionsFullWidthBelow — the actions take the row under the text; their children share
  * each line equally (wrapping when a label won't fit), a trigger inside a DropdownMenu, Tooltip or Popover wrapper
@@ -1184,6 +1184,7 @@ a.aura-tab { text-decoration: none; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > * { min-width: 0; }
   .aura-page-header--actions-full-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-full-below-sm > .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 */
 }
 @media (max-width: 767.98px) {
   .aura-page-header--actions-full-below-md > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
@@ -1194,6 +1195,7 @@ a.aura-tab { text-decoration: none; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > * { min-width: 0; }
   .aura-page-header--actions-full-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-full-below-md > .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 */
 }
 @media (max-width: 1023.98px) {
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
@@ -1204,8 +1206,57 @@ a.aura-tab { text-decoration: none; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > * { min-width: 0; }
   .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 */
 }
-@media (min-width: 640px) { .aura-page-header__title { font-size: max(36px, 2.25rem); } }
+/* 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); }
+  .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; }
+  .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-icon-btn { flex: none; }
+  .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
+  .aura-page-header--actions-bar-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) { flex-wrap: wrap; align-items: stretch; }
+  .aura-page-header--actions-bar-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :not(.aura-page-header__status) { min-width: 0; }
+  .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-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); }
+  .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; }
+  .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-icon-btn { flex: none; }
+  .aura-page-header--actions-bar-below-md > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
+  .aura-page-header--actions-bar-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) { flex-wrap: wrap; align-items: stretch; }
+  .aura-page-header--actions-bar-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :not(.aura-page-header__status) { min-width: 0; }
+  .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-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); }
+}
+@media (prefers-reduced-motion: reduce) { .aura-page-header__actions { transition: none; } }
+@media (min-width: 640px) { .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(36px, 2.25rem)); } }
+/* 5.46 (Chamber-OS 151): subtitle, a title addon, a chip eyebrow, hero sizes, a focusable heading, top-aligned actions. */
+.aura-page-header__subtitle { min-width: 0; font-size: max(14px, .875rem); line-height: 1.7; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
+.aura-page-header__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-width: 0; }
+.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__title { font-size: var(--aura-page-header-title-size, max(30px, 1.875rem)); line-height: var(--aura-page-header-title-line-height, 1.2); }
+.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; }
+.aura-page-header--actions-start { align-items: flex-start; }
 /* Thai marks need the room a 1.15 line takes away. */
 .aura-page-header__title:lang(th) { line-height: 1.4; letter-spacing: 0; }
 .aura-page-header__meta:lang(th) { line-height: 1.6; }