@jirawatpyk/aura-react 5.45.0 → 5.47.0

package/README.md

@@ -186,6 +186,26 @@ 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.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:
+
+- **`subtitle`**: a sentence under the title at body size (14px/1.7, the secondary colour) — "Members, plans and renewals for SweCham" — before `meta`, in a `div` (a loading skeleton's blocks are valid inside).
+- **`titleAddon`**: a chip or badge on the title's line (a role, an invoice's status, "Archived"). Title and addon share a wrapping row, 12px apart (8px between lines); on a narrow screen the addon wraps under the title. It sits beside the heading, not in it, so the heading's name stays the title. Where `titleHideBelow` hides the title, the addon goes with it.
+- **A chip eyebrow**: `eyebrow` that is not text (a StatusPill, a member number, badges) renders as a wrapping row in a `div`, 8px apart, 4px above the title as before. Text stays the mono `p`.
+- **`size`**: `default` (28px, 36px from 640px), `hero` (30px on a 36px line) and `hero-lg` (26px, 36px from 1024px), the hero sizes with 16px more room above. Per page, `--aura-page-header-title-size` and `--aura-page-header-title-line-height` override any of them (staff pages at 26/32: set both). Under `lang="th"` the title keeps its 1.4 line, whatever the size or variable. The hero's 16px adds to the padding around it (AppShell's content, a Card), by design.
+- **`focusTitleOnMount`**: the heading takes focus when the header mounts (`tabIndex={-1}`, `preventScroll`, no visible ring) — a page reached by a redirect, so a screen reader starts at its heading (WCAG 2.4.3). The main entry's PageHeader does it once, when it mounts; from `/server` the heading is focusable but not focused. Use it on pages reached by client-side navigation or a redirect, not on every page: on a first load it moves focus past a skip link, and a header that stays mounted while its title changes doesn't refocus — key it by the page (`key={pathname}`) if it must.
+- **`actionsAlign`**: `end` (default) lines the actions up with the bottom of the text, as before; `start` with its top — the title, when there is no breadcrumb or eyebrow.
+- Confirmed, no change: the text column's `flex: 1 1 320px` keeps a long title at least 320px wide; wide actions drop under it (checked at 700px). On a phone `actionsFullWidthBelow="sm"` shares the row between actions.
+- Checked at 390 and 1280px in English, Thai and Swedish, and at a 32px default font size: nothing scrolls sideways.
+
 ## 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).

package/dist/aura.bundle.js

@@ -7835,7 +7835,23 @@ window.Aura = (() => {
     const level = props.headingLevel || 1;
     const below2 = props.actionsFullWidthBelow;
     const hide2 = 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 === "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(
+      "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 h8(
@@ -7848,6 +7864,8 @@ 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,
+          size && "aura-page-header--" + size,
+          props.actionsAlign === "start" && "aura-page-header--actions-start",
           props.className
         ),
         style: props.style
@@ -7856,8 +7874,14 @@ window.Aura = (() => {
         "div",
         { className: "aura-page-header__text" },
         props.breadcrumb != null && props.breadcrumb !== false ? h8("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
-        props.eyebrow != null && props.eyebrow !== false ? h8("p", { className: "aura-page-header__eyebrow" }, props.eyebrow) : null,
-        h8("h" + level, { className: "aura-page-header__title", id: props.titleId }, props.title),
+        shown(eyebrow) ? plainEyebrow ? h8("p", { className: "aura-page-header__eyebrow" }, eyebrow) : h8("div", { className: "aura-page-header__eyebrow aura-page-header__eyebrow--rich" }, eyebrow) : null,
+        shown(props.titleAddon) ? h8(
+          "div",
+          { className: "aura-page-header__title-row" },
+          heading,
+          h8("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
+        ) : heading,
+        shown(props.subtitle) ? h8("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
         props.meta != null && props.meta !== false ? h8("div", { className: "aura-page-header__meta" }, props.meta) : null
       ),
       props.actions != null && props.actions !== false ? h8(
@@ -7923,6 +7947,12 @@ window.Aura = (() => {
       },
       [bar, hasActions]
     );
+    const focusTitle = !!props.focusTitleOnMount;
+    React44.useEffect(function() {
+      if (!focusTitle || !own.current) return;
+      const t = own.current.querySelector(".aura-page-header__title");
+      if (t) t.focus({ preventScroll: true });
+    }, []);
     return /* @__PURE__ */ React44.createElement(PageHeader, { ...props, ref: merged });
   });
 

package/dist/cjs/index.cjs

@@ -7817,7 +7817,23 @@ var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
   const level = props.headingLevel || 1;
   const below2 = props.actionsFullWidthBelow;
   const hide2 = 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 === "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(
+    "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 h8(
@@ -7830,6 +7846,8 @@ 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,
+        size && "aura-page-header--" + size,
+        props.actionsAlign === "start" && "aura-page-header--actions-start",
         props.className
       ),
       style: props.style
@@ -7838,8 +7856,14 @@ var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
       "div",
       { className: "aura-page-header__text" },
       props.breadcrumb != null && props.breadcrumb !== false ? h8("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
-      props.eyebrow != null && props.eyebrow !== false ? h8("p", { className: "aura-page-header__eyebrow" }, props.eyebrow) : null,
-      h8("h" + level, { className: "aura-page-header__title", id: props.titleId }, props.title),
+      shown(eyebrow) ? plainEyebrow ? h8("p", { className: "aura-page-header__eyebrow" }, eyebrow) : h8("div", { className: "aura-page-header__eyebrow aura-page-header__eyebrow--rich" }, eyebrow) : null,
+      shown(props.titleAddon) ? h8(
+        "div",
+        { className: "aura-page-header__title-row" },
+        heading,
+        h8("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
+      ) : heading,
+      shown(props.subtitle) ? h8("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
       props.meta != null && props.meta !== false ? h8("div", { className: "aura-page-header__meta" }, props.meta) : null
     ),
     props.actions != null && props.actions !== false ? h8(
@@ -7905,6 +7929,12 @@ var PageHeader3 = React44.forwardRef(function PageHeader4(props, ref) {
     },
     [bar, hasActions]
   );
+  const focusTitle = !!props.focusTitleOnMount;
+  React44.useEffect(function() {
+    if (!focusTitle || !own.current) return;
+    const t = own.current.querySelector(".aura-page-header__title");
+    if (t) t.focus({ preventScroll: true });
+  }, []);
   return /* @__PURE__ */ React44.createElement(PageHeader, { ...props, ref: merged });
 });
 

package/dist/esm/PageHeader.js

@@ -11,7 +11,23 @@ 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 === "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(
+    "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(
@@ -24,6 +40,8 @@ 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,
+        size && "aura-page-header--" + size,
+        props.actionsAlign === "start" && "aura-page-header--actions-start",
         props.className
       ),
       style: props.style
@@ -32,8 +50,14 @@ 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(

package/dist/esm/PageHeaderClient.js

@@ -55,6 +55,12 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
     },
     [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 {

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,25 @@ 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; `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. */
+	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. */

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,25 @@ 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; `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. */
+	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. */

package/dist/server/index.cjs

@@ -1442,7 +1442,23 @@ 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 === "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(
+    "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(
@@ -1455,6 +1471,8 @@ 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,
+        size && "aura-page-header--" + size,
+        props.actionsAlign === "start" && "aura-page-header--actions-start",
         props.className
       ),
       style: props.style
@@ -1463,8 +1481,14 @@ 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(

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,25 @@ 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; `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. */
+	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. */

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,25 @@ 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; `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. */
+	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. */

package/dist/server/index.js

@@ -1378,7 +1378,23 @@ 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 === "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(
+    "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(
@@ -1391,6 +1407,8 @@ 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,
+        size && "aura-page-header--" + size,
+        props.actionsAlign === "start" && "aura-page-header--actions-start",
         props.className
       ),
       style: props.style
@@ -1399,8 +1417,14 @@ 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(

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
@@ -1244,7 +1244,23 @@ a.aura-tab { text-decoration: none; }
   :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: max(36px, 2.25rem); } }
+@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-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; }
+.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; }

package/dist/styles.layer.css

@@ -1154,7 +1154,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); }
@@ -1162,15 +1162,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
@@ -1246,7 +1246,23 @@ a.aura-tab { text-decoration: none; }
   :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: max(36px, 2.25rem); } }
+@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-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; }
+.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; }

package/package.json

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