@jirawatpyk/aura-react 5.31.0 → 5.32.0

package/dist/index.d.ts

@@ -344,7 +344,8 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	icon: IconInput;
 	/** `danger` colours the icon and hover for a destructive action (Delete, Revoke). */
 	tone?: "neutral" | "danger" | undefined;
-	/** Accessible name and tooltip (required). */
+	/** Accessible name and tooltip (required). Since 5.32 the tooltip is AURA's own (hover and keyboard focus), not a
+	 * native `title`; pass `title` yourself to keep a native one instead. */
 	label: string;
 	/** Icon size. Default `sm` (16). */
 	size?: "sm" | "md" | undefined;
@@ -828,6 +829,10 @@ export interface SideNavProps {
 	defaultValue?: string | undefined;
 	onChange?: ((id: string) => void) | undefined;
 	header?: React$1.ReactNode | undefined;
+	/** 5.32 (DxT Monitor request 1): a full-width 1px aura-border-default line under `header`, with the board's metrics:
+	 * the header at least 72px tall with its content 20px from the top and start, the line at its foot, and 16px
+	 * before the first item. Default `false`. */
+	headerDivider?: boolean | undefined;
 	footer?: React$1.ReactNode | undefined;
 	/** Default "Main". */
 	label?: string | undefined;
@@ -1214,7 +1219,9 @@ export interface AppShellProps {
 	/** A BottomNav for phones (4.19). Shown below its `hideFrom` breakpoint; the content keeps room for it, and a
 	 * viewport ActionBar sits on top of it. With a `bottomNav` and no `nav`, there is no menu button. */
 	bottomNav?: React$1.ReactElement | undefined;
-	/** `false` (5.14): `<main>` has no padding, for pages whose containers own the page padding and column. */
+	/** The content padding is the page margin: 16px at the sides and 24px top and bottom on phones, 24px from 640px,
+	 * 32px from 1024px. Pages don't add their own (a PageHeader has none, 5.32). `false` (5.14): `<main>` has no
+	 * padding, for pages whose containers own the page padding and column. */
 	contentPadding?: boolean | undefined;
 	className?: string | undefined;
 }
@@ -1338,7 +1345,8 @@ export interface BottomNavItem {
 	/** Read after the label when `badge` is set, e.g. "new". */
 	badgeLabel?: string | undefined;
 	/** The full name for screen readers when `label` is shortened to fit (5.7), e.g. label "Konto", ariaLabel
-	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3). The count or badge is still appended. */
+	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3); a dev warning says when it doesn't (5.32). The count or badge is
+	 * still appended. */
 	ariaLabel?: string | undefined;
 }
 export interface BottomNavProps {
@@ -1490,7 +1498,10 @@ export interface ProgressProps {
 	className?: string | undefined;
 }
 export interface SkeletonProps {
-	variant?: "text" | "rect" | "circle" | undefined;
+	/** 5.32 (DxT Monitor request 4): `pill` is a StatusPill's size (20px tall, 22px under `lang="th"`, 72px wide) and
+	 * `badge` a Badge's (20px, 56px wide), both fully rounded, so the row doesn't move when the real one arrives.
+	 * `width` overrides the width. */
+	variant?: "text" | "rect" | "circle" | "pill" | "badge" | undefined;
 	/** text only: number of lines (the last is shorter). */
 	lines?: number | undefined;
 	width?: number | string | undefined;
@@ -1783,6 +1794,28 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
+ * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
+ * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from
+ * `/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"). */
+	eyebrow?: React$1.ReactNode | undefined;
+	/** The page's heading. */
+	title: React$1.ReactNode;
+	/** 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. */
+	actions?: 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. */
+	titleId?: string | undefined;
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+}
+export declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 /** AppShell — side navigation + top bar + content. The nav is fixed from lg (1024px) up and a Drawer below it.
  * Which one shows is decided in CSS (4.16), so the server's HTML is already right on a phone and nothing shifts on
  * hydration; JavaScript only opens and closes the drawer. */

package/dist/server/index.cjs

@@ -37,6 +37,7 @@ __export(server_exports, {
   Container: () => Container,
   EmptyState: () => ServerEmptyState,
   Icon: () => Icon,
+  PageHeader: () => PageHeader,
   STRINGS: () => STRINGS,
   Stat: () => ServerStat,
   StatusPill: () => ServerStatusPill,
@@ -606,14 +607,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h4 = String(hex).trim().replace("#", "");
-  if (h4.length === 3)
-    h4 = h4.split("").map(function(c) {
+  let h5 = String(hex).trim().replace("#", "");
+  if (h5.length === 3)
+    h5 = h5.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h4)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h5)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h4.slice(i, i + 2), 16) / 255;
+    return parseInt(h5.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -1375,3 +1376,27 @@ var Container = React4.forwardRef(function Container2(props, ref) {
     props.children
   );
 });
+
+// src/PageHeader.tsx
+var React5 = __toESM(require("react"), 1);
+var h4 = React5.createElement;
+var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
+  const attrs = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "lang" || k === "dir" || k === "role" || /^(aria|data)-/.test(k))
+      attrs[k] = props[k];
+  });
+  const level = props.headingLevel || 1;
+  return h4(
+    "div",
+    Object.assign(attrs, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    h4(
+      "div",
+      { className: "aura-page-header__text" },
+      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),
+      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
+  );
+});

package/dist/server/index.d.cts

@@ -404,6 +404,28 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
+ * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
+ * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from
+ * `/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"). */
+	eyebrow?: React$1.ReactNode | undefined;
+	/** The page's heading. */
+	title: React$1.ReactNode;
+	/** 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. */
+	actions?: 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. */
+	titleId?: string | undefined;
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+}
+export declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 
 export {
 	ServerAlert as Alert,

package/dist/server/index.d.ts

@@ -404,6 +404,28 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
+ * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
+ * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from
+ * `/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"). */
+	eyebrow?: React$1.ReactNode | undefined;
+	/** The page's heading. */
+	title: React$1.ReactNode;
+	/** 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. */
+	actions?: 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. */
+	titleId?: string | undefined;
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+}
+export declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 
 export {
 	ServerAlert as Alert,

package/dist/server/index.js

@@ -546,14 +546,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h4 = String(hex).trim().replace("#", "");
-  if (h4.length === 3)
-    h4 = h4.split("").map(function(c) {
+  let h5 = String(hex).trim().replace("#", "");
+  if (h5.length === 3)
+    h5 = h5.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h4)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h5)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h4.slice(i, i + 2), 16) / 255;
+    return parseInt(h5.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -1315,6 +1315,30 @@ var Container = React4.forwardRef(function Container2(props, ref) {
     props.children
   );
 });
+
+// src/PageHeader.tsx
+import * as React5 from "react";
+var h4 = React5.createElement;
+var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
+  const attrs = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "lang" || k === "dir" || k === "role" || /^(aria|data)-/.test(k))
+      attrs[k] = props[k];
+  });
+  const level = props.headingLevel || 1;
+  return h4(
+    "div",
+    Object.assign(attrs, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    h4(
+      "div",
+      { className: "aura-page-header__text" },
+      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),
+      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
+  );
+});
 export {
   ServerAlert as Alert,
   ServerAvatar as Avatar,
@@ -1323,6 +1347,7 @@ export {
   Container,
   ServerEmptyState as EmptyState,
   Icon,
+  PageHeader,
   STRINGS,
   ServerStat as Stat,
   ServerStatusPill as StatusPill,

package/dist/styles.css

@@ -356,6 +356,9 @@ a.aura-icon-btn { text-decoration: none; }
   background: var(--aura-bg-skeleton); animation: aura-pulse var(--aura-duration-pulse) var(--aura-ease) infinite;
 }
 .aura-skel--pill { width: 72px; height: 20px; }
+.aura-skel--badge { width: 56px; height: 20px; } /* 5.32: a Badge is 20px in every language */
+/* 5.32: they stand in for inline pills, so they sit in a line of text like them. */
+.aura-skel--pill, .aura-skel--badge { display: inline-block; vertical-align: middle; }
 .aura-skel--box { width: var(--aura-icon-sm); height: var(--aura-icon-sm); border-radius: var(--aura-radius-xs); }
 @media (prefers-reduced-motion: reduce) { .aura-skel { animation: none; } }
 /* 5.29 (Chamber-OS 134): a DataTable skeleton row stands in for the real one — text lines (skeletonLines) on the 20px
@@ -656,6 +659,8 @@ a.aura-icon-btn { text-decoration: none; }
 }
 /* The Tooltip component's own tips can be hovered (WCAG 1.4.13, 5.1.1); rail labels and cell tips stay click-through. */
 .aura-tooltip--hoverable { pointer-events: auto; }
+/* 5.32: the shared tip for icon buttons, Pagination arrows, icon-only segments and cut Tags (was a native title). */
+.aura-tooltip--auto:lang(th) { line-height: 1.6; }
 @keyframes aura-fade-in { from { opacity: 0; } }
 
 /* ---------- Dialog ---------- */
@@ -762,6 +767,10 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-nav__header { padding: var(--aura-space-5) var(--aura-space-4) var(--aura-space-4); padding-inline-end: var(--aura-space-2); } /* 5.16 (Chamber-OS 96): 8px at the end, so a brand, its dot and a badge share one row at 240px */
 .aura-nav__scroll { flex: 1; overflow-y: auto; padding: 0 var(--aura-space-3); }
+/* 5.32 (DxT Monitor request 1): headerDivider — the board's header: 72px, content 20px from the top and start, a
+ * full-width line at its foot, 16px before the first item. The collapsed rail keeps its own 8px sides (below). */
+.aura-nav--header-divider > .aura-nav__header { box-sizing: border-box; min-height: 72px; padding-top: var(--aura-space-5); padding-bottom: var(--aura-space-3); padding-inline-start: var(--aura-space-5); border-bottom: 1px solid var(--aura-border-default); }
+.aura-nav--header-divider > .aura-nav__header + .aura-nav__scroll { padding-top: var(--aura-space-4); }
 /* No header: keep the first item off the top edge (5.0.2). */
 .aura-nav > .aura-nav__scroll:first-child { padding-top: var(--aura-space-3); }
 .aura-nav--borderless { border-right: 0; }
@@ -987,7 +996,7 @@ a.aura-tab { text-decoration: none; }
 .aura-drawer--lg { max-width: var(--aura-drawer-lg); }
 .aura-drawer--nav { max-width: var(--aura-sidenav-width); }
 .aura-drawer__head { display: flex; align-items: center; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-4) var(--aura-space-2) var(--aura-space-6); }
-.aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); right: var(--aura-space-2); padding: 0; z-index: 1; }
+.aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); inset-inline-end: var(--aura-space-2); padding: 0; z-index: 1; } /* 5.32: inline-end, so RTL puts it on the left with the header's room */
 .aura-drawer__title { flex: 1; margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
 .aura-drawer__desc { margin: 0; padding: 0 var(--aura-space-6); font-size: 14px; line-height: 1.7; color: var(--aura-fg-secondary); }
 .aura-drawer__body {
@@ -997,6 +1006,8 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-drawer--nav .aura-drawer__body { padding: 0; }
 .aura-drawer--nav .aura-nav { width: 100%; border-right: 0; }
+/* 5.32: the phone drawer's close button (32px, 8px in) sits over the header's end: keep the brand clear of it. */
+.aura-drawer--nav .aura-nav__header { padding-inline-end: 48px; }
 .aura-drawer__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-6); border-top: 1px solid var(--aura-border-default); }
 @media (prefers-reduced-motion: reduce) { .aura-drawer { animation: none; } }
 
@@ -1074,6 +1085,21 @@ a.aura-tab { text-decoration: none; }
 /* The shell already pads its content: a Container directly inside only caps the width. */
 .aura-shell__content:not(.is-flush) > .aura-container { padding-left: 0; padding-right: 0; }
 
+/* ---------- PageHeader (5.32, DxT Monitor request 3) ----------
+ * No outer padding: AppShell's content padding is the page margin. Eyebrow mono 12/1.7, h1 display 36/1.15,
+ * meta 13/1.5, 4px between them; actions at the end, on the text's last line, 24px away; below 640px the title is
+ * 28px and the actions wrap under the text. */
+.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: 12px; 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: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--aura-fg-primary); overflow-wrap: anywhere; }
+.aura-page-header__meta { min-width: 0; font-size: 13px; 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); }
+@media (min-width: 640px) { .aura-page-header__title { font-size: 36px; } }
+/* 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; }
+
 /* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
 /* 5.30: a 2px hairline-colour rule over the totals (border-strong was a glaring white line in dark); a pinned totals row
  * casts a soft shadow over the rows scrolling under it. */

package/dist/styles.layer.css

@@ -358,6 +358,9 @@ a.aura-icon-btn { text-decoration: none; }
   background: var(--aura-bg-skeleton); animation: aura-pulse var(--aura-duration-pulse) var(--aura-ease) infinite;
 }
 .aura-skel--pill { width: 72px; height: 20px; }
+.aura-skel--badge { width: 56px; height: 20px; } /* 5.32: a Badge is 20px in every language */
+/* 5.32: they stand in for inline pills, so they sit in a line of text like them. */
+.aura-skel--pill, .aura-skel--badge { display: inline-block; vertical-align: middle; }
 .aura-skel--box { width: var(--aura-icon-sm); height: var(--aura-icon-sm); border-radius: var(--aura-radius-xs); }
 @media (prefers-reduced-motion: reduce) { .aura-skel { animation: none; } }
 /* 5.29 (Chamber-OS 134): a DataTable skeleton row stands in for the real one — text lines (skeletonLines) on the 20px
@@ -658,6 +661,8 @@ a.aura-icon-btn { text-decoration: none; }
 }
 /* The Tooltip component's own tips can be hovered (WCAG 1.4.13, 5.1.1); rail labels and cell tips stay click-through. */
 .aura-tooltip--hoverable { pointer-events: auto; }
+/* 5.32: the shared tip for icon buttons, Pagination arrows, icon-only segments and cut Tags (was a native title). */
+.aura-tooltip--auto:lang(th) { line-height: 1.6; }
 @keyframes aura-fade-in { from { opacity: 0; } }
 
 /* ---------- Dialog ---------- */
@@ -764,6 +769,10 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-nav__header { padding: var(--aura-space-5) var(--aura-space-4) var(--aura-space-4); padding-inline-end: var(--aura-space-2); } /* 5.16 (Chamber-OS 96): 8px at the end, so a brand, its dot and a badge share one row at 240px */
 .aura-nav__scroll { flex: 1; overflow-y: auto; padding: 0 var(--aura-space-3); }
+/* 5.32 (DxT Monitor request 1): headerDivider — the board's header: 72px, content 20px from the top and start, a
+ * full-width line at its foot, 16px before the first item. The collapsed rail keeps its own 8px sides (below). */
+.aura-nav--header-divider > .aura-nav__header { box-sizing: border-box; min-height: 72px; padding-top: var(--aura-space-5); padding-bottom: var(--aura-space-3); padding-inline-start: var(--aura-space-5); border-bottom: 1px solid var(--aura-border-default); }
+.aura-nav--header-divider > .aura-nav__header + .aura-nav__scroll { padding-top: var(--aura-space-4); }
 /* No header: keep the first item off the top edge (5.0.2). */
 .aura-nav > .aura-nav__scroll:first-child { padding-top: var(--aura-space-3); }
 .aura-nav--borderless { border-right: 0; }
@@ -989,7 +998,7 @@ a.aura-tab { text-decoration: none; }
 .aura-drawer--lg { max-width: var(--aura-drawer-lg); }
 .aura-drawer--nav { max-width: var(--aura-sidenav-width); }
 .aura-drawer__head { display: flex; align-items: center; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-4) var(--aura-space-2) var(--aura-space-6); }
-.aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); right: var(--aura-space-2); padding: 0; z-index: 1; }
+.aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); inset-inline-end: var(--aura-space-2); padding: 0; z-index: 1; } /* 5.32: inline-end, so RTL puts it on the left with the header's room */
 .aura-drawer__title { flex: 1; margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
 .aura-drawer__desc { margin: 0; padding: 0 var(--aura-space-6); font-size: 14px; line-height: 1.7; color: var(--aura-fg-secondary); }
 .aura-drawer__body {
@@ -999,6 +1008,8 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-drawer--nav .aura-drawer__body { padding: 0; }
 .aura-drawer--nav .aura-nav { width: 100%; border-right: 0; }
+/* 5.32: the phone drawer's close button (32px, 8px in) sits over the header's end: keep the brand clear of it. */
+.aura-drawer--nav .aura-nav__header { padding-inline-end: 48px; }
 .aura-drawer__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-6); border-top: 1px solid var(--aura-border-default); }
 @media (prefers-reduced-motion: reduce) { .aura-drawer { animation: none; } }
 
@@ -1076,6 +1087,21 @@ a.aura-tab { text-decoration: none; }
 /* The shell already pads its content: a Container directly inside only caps the width. */
 .aura-shell__content:not(.is-flush) > .aura-container { padding-left: 0; padding-right: 0; }
 
+/* ---------- PageHeader (5.32, DxT Monitor request 3) ----------
+ * No outer padding: AppShell's content padding is the page margin. Eyebrow mono 12/1.7, h1 display 36/1.15,
+ * meta 13/1.5, 4px between them; actions at the end, on the text's last line, 24px away; below 640px the title is
+ * 28px and the actions wrap under the text. */
+.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: 12px; 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: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--aura-fg-primary); overflow-wrap: anywhere; }
+.aura-page-header__meta { min-width: 0; font-size: 13px; 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); }
+@media (min-width: 640px) { .aura-page-header__title { font-size: 36px; } }
+/* 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; }
+
 /* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
 /* 5.30: a 2px hairline-colour rule over the totals (border-strong was a glaring white line in dark); a pinned totals row
  * casts a soft shadow over the rows scrolling under it. */

package/package.json

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