@jirawatpyk/aura-react 5.46.0 → 5.47.0

package/README.md

@@ -186,6 +186,13 @@ 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:

package/dist/aura.bundle.js

@@ -7839,7 +7839,7 @@ window.Aura = (() => {
       return n3 != null && n3 !== false && n3 !== "";
     };
     const hasMeta = shown(props.meta) || shown(props.subtitle) || shown(props.titleAddon);
-    const size = props.size === "hero" || props.size === "hero-lg" ? props.size : null;
+    const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
     const eyebrow = props.eyebrow;
     const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
     const heading = h8(

package/dist/cjs/index.cjs

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

package/dist/esm/PageHeader.js

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

package/dist/index.d.cts

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

package/dist/index.d.ts

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

package/dist/server/index.cjs

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

package/dist/server/index.d.cts

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

package/dist/server/index.d.ts

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

package/dist/server/index.js

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

package/dist/styles.css

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

package/dist/styles.layer.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.46.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",