@jirawatpyk/aura-react 5.69.0 → 5.71.0

package/dist/index.d.ts

@@ -332,10 +332,24 @@ export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanEle
 	/** 5.51 (Chamber-OS 158): in a box narrower than the words, the text wraps inside the pill (still rounded, the icon
 	 * on the first line) instead of running out of it. Without it a pill stays on one line. */
 	wrap?: boolean | undefined;
+	/** 5.70 (Chamber-OS 189): the spinner in the icon slot, for a state still in progress ("Waiting for payment").
+	 * The words still say it; the tone is unchanged. */
+	busy?: boolean | undefined;
 	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;
 }
+/** 5.70 (Chamber-OS 189): Button's loading spinner on its own, for "working" outside a button. */
+export interface SpinnerProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
+	/** `sm` 16px (Button's spinner) · `md` 20px (default) · `lg` 24px — the icon sizes. It takes the text colour. */
+	size?: "sm" | "md" | "lg" | undefined;
+	/** Without it the spinner is `aria-hidden`: the text beside it, or your live region, says what is happening. With it
+	 * the spinner is `role="status"` with this text (visually hidden), for a spinner standing alone: it names it for
+	 * browse mode, but a status inserted with its text already in it is often not announced — to announce the change,
+	 * keep a live region on the page and put the words in it. */
+	label?: string | undefined;
+	className?: string | undefined;
+}
 /** 16px checkbox with 4px corners; ink when checked, a dash when indeterminate. */
 export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "checked" | "defaultChecked"> {
 	/** Controlled state; pair with onChange. Or use defaultChecked. */
@@ -1497,6 +1511,16 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 	/** Th in the head only (5.52): this column's width while loading — a share such as `'22%'` — when the loaded table
 	 * sizes it from its content. Default: the cell's `width`, else an even share. */
 	skeletonWidth?: string | number | undefined;
+	/** Th only (5.70, Chamber-OS 188): this column's order — `aria-sort` on the header. With `onSort` or `sortHref` the
+	 * label becomes a button or link holding AURA's sort icon (up, down, or both ways for `none`), as DataTable's
+	 * sortable header; alone, it only says the order. */
+	sort?: "ascending" | "descending" | "none" | undefined;
+	/** Th only (5.70): the header becomes a button that calls this — flip the order yourself. */
+	onSort?: (() => void) | undefined;
+	/** Th only (5.70): the header becomes a link (through `linkComponent`) to this, for a server-sorted page. */
+	sortHref?: string | undefined;
+	/** Th only (5.70): your router's link for `sortHref`; defaults to AuraProvider's `linkComponent`, then `<a>`. */
+	linkComponent?: React$1.ElementType | undefined;
 	className?: string | undefined;
 }
 export interface ActionBarProps {
@@ -1668,6 +1692,22 @@ export interface FileUploadProps extends FieldProps {
 	name?: string | undefined;
 	disabled?: boolean | undefined;
 	className?: string | undefined;
+	/** 5.70 (Chamber-OS 190): `dropzone` (default) is the drop area with its file list. `button` is a Button that opens
+	 * the picker, for a file the app sends itself (a logo, a certificate): it checks `accept` and `maxSize` with the same
+	 * messages, calls `onSelect` with the accepted files and keeps no list (`value` / `onChange` are not used). The
+	 * label, hint and error are Field's, as before; the Button is named by the label and its own text. */
+	variant?: "dropzone" | "button" | undefined;
+	/** `variant="button"`: the accepted files of a pick (none is passed when every file was refused; the error shows).
+	 * With a `name` the input posts only the accepted files, and `required` is checked by the browser on submit. The
+	 * forwarded ref is the input, but its `focus()` moves to the Button. */
+	onSelect?: ((files: File[]) => void) | undefined;
+	/** `variant="button"`: the Button's text. Default "Choose a file" ("Choose files" with `multiple`). */
+	buttonLabel?: React$1.ReactNode | undefined;
+	/** `variant="button"`: an upload in progress under the Button — 0–100, or `null` for indeterminate; leave it out
+	 * when nothing is uploading. */
+	progress?: number | null | undefined;
+	/** `variant="button"`: Button's `touchHeight` (44px below 640px or on a coarse pointer). */
+	touchHeight?: boolean | undefined;
 }
 export type Tone = "neutral" | "accent" | "success" | "warning" | "danger";
 export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
@@ -1749,7 +1789,37 @@ export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElem
 	headingLevel?: 2 | 3 | 4 | 5 | 6 | false | undefined;
 	className?: string | undefined;
 }
+/** 5.70 (Chamber-OS 187): keyset / cursor lists — no page count, only whether there is a first, previous and next
+ * page. Pass an href (rendered through `linkComponent`) or a callback for each end; one with neither, or with its
+ * `has…` false, is shown disabled (out of the tab order). */
+export interface CursorPaginationProps {
+	mode: "cursor";
+	firstHref?: string | undefined;
+	previousHref?: string | undefined;
+	nextHref?: string | undefined;
+	/** Run instead of following the href on a plain click, or as a button's action without one. */
+	onFirst?: (() => void) | undefined;
+	onPrevious?: (() => void) | undefined;
+	onNext?: (() => void) | undefined;
+	/** `false` disables that end even with an href or callback (default: enabled when it has one). */
+	hasFirst?: boolean | undefined;
+	hasPrevious?: boolean | undefined;
+	hasNext?: boolean | undefined;
+	/** Default true. `false` leaves the First link out (a list that only goes forward). */
+	showFirst?: boolean | undefined;
+	/** A line at the start, e.g. "Showing 50 of 1,240". Not a live region. */
+	status?: React$1.ReactNode | undefined;
+	/** Name of the nav. Default "Pagination". */
+	label?: string | undefined;
+	linkComponent?: React$1.ElementType | undefined;
+	className?: string | undefined;
+}
+/** Either kind of Pagination's props (5.70). `PaginationProps` stays the numbered one, so wrappers that extend or
+ * pick from it keep compiling. */
+export type AnyPaginationProps = PaginationProps | CursorPaginationProps;
 export interface PaginationProps {
+	/** `pages` (default): numbered pages. `cursor` (5.70): see CursorPaginationProps. */
+	mode?: "pages" | undefined;
 	pageCount: number;
 	/** 1-based, controlled; pair with onChange. Or defaultPage. */
 	page?: number | undefined;
@@ -2175,6 +2245,11 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 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;
+	/** 5.71 (Chamber-OS 191): with `actionsBarBelow`, only these become the phone bar — `actions` stay in the page (and
+	 * `actionsFullWidthBelow` still applies to them). From the breakpoint up, and on a short screen, they sit after
+	 * `actions` in the header row. Each node is rendered once at every width, never cloned. Without `actionsBarBelow`
+	 * they are simply more actions, after `actions`. */
+	actionsBar?: 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. */
@@ -2287,6 +2362,8 @@ export interface AuraStrings {
 	opensInNewTab: string;
 	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
 	required: string;
+	/** 5.70: a cursor Pagination's link back to the start. */
+	firstPage: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */
@@ -2412,7 +2489,8 @@ export declare const Tag: React$1.ForwardRefExoticComponent<TagProps & React$1.R
 export declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const Skeleton: React$1.ForwardRefExoticComponent<SkeletonProps & React$1.RefAttributes<HTMLSpanElement>>;
 export declare const EmptyState: React$1.ForwardRefExoticComponent<EmptyStateProps & React$1.RefAttributes<HTMLDivElement>>;
-export declare const Pagination: React$1.ForwardRefExoticComponent<PaginationProps & React$1.RefAttributes<HTMLElement>>;
+export declare const Pagination: React$1.ForwardRefExoticComponent<AnyPaginationProps & React$1.RefAttributes<HTMLElement>>;
+export declare const Spinner: React$1.ForwardRefExoticComponent<SpinnerProps & React$1.RefAttributes<HTMLSpanElement>>;
 export declare const Accordion: React$1.ForwardRefExoticComponent<AccordionProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const Popover: React$1.ForwardRefExoticComponent<PopoverProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Number input with thousands separators, +/− buttons and arrow keys (ARIA spinbutton). */

package/dist/locales/sv.cjs

@@ -155,6 +155,7 @@ var sv = {
   statusUnknown: "Ingen data",
   opensInNewTab: "\xF6ppnas i en ny flik",
   required: "obligatoriskt",
+  firstPage: "F\xF6rsta sidan",
   filtersApplied: function(n) {
     return "Filter, " + n.toLocaleString("sv-SE") + " aktiva";
   },

package/dist/locales/sv.d.cts

@@ -100,6 +100,8 @@ export interface AuraStrings {
 	opensInNewTab: string;
 	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
 	required: string;
+	/** 5.70: a cursor Pagination's link back to the start. */
+	firstPage: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */

package/dist/locales/sv.d.ts

@@ -100,6 +100,8 @@ export interface AuraStrings {
 	opensInNewTab: string;
 	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
 	required: string;
+	/** 5.70: a cursor Pagination's link back to the start. */
+	firstPage: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */

package/dist/locales/th.cjs

@@ -155,6 +155,7 @@ var th = {
   statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
   opensInNewTab: "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
   required: "\u0E08\u0E33\u0E40\u0E1B\u0E47\u0E19",
+  firstPage: "\u0E2B\u0E19\u0E49\u0E32\u0E41\u0E23\u0E01",
   filtersApplied: function(n2) {
     return "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07, \u0E43\u0E0A\u0E49\u0E2D\u0E22\u0E39\u0E48 " + n2.toLocaleString("en") + " \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
   },

package/dist/locales/th.d.cts

@@ -100,6 +100,8 @@ export interface AuraStrings {
 	opensInNewTab: string;
 	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
 	required: string;
+	/** 5.70: a cursor Pagination's link back to the start. */
+	firstPage: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */

package/dist/locales/th.d.ts

@@ -100,6 +100,8 @@ export interface AuraStrings {
 	opensInNewTab: string;
 	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
 	required: string;
+	/** 5.70: a cursor Pagination's link back to the start. */
+	firstPage: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */

package/dist/server/index.cjs

@@ -40,6 +40,7 @@ __export(server_exports, {
   PageHeader: () => PageHeader,
   STRINGS: () => STRINGS,
   Sparkline: () => Sparkline,
+  Spinner: () => ServerSpinner,
   Stat: () => ServerStat,
   StatusPill: () => ServerStatusPill,
   StatusTile: () => ServerStatusTile,
@@ -346,6 +347,7 @@ var th = {
   statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
   opensInNewTab: "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
   required: "\u0E08\u0E33\u0E40\u0E1B\u0E47\u0E19",
+  firstPage: "\u0E2B\u0E19\u0E49\u0E32\u0E41\u0E23\u0E01",
   filtersApplied: function(n3) {
     return "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07, \u0E43\u0E0A\u0E49\u0E2D\u0E22\u0E39\u0E48 " + n3.toLocaleString("en") + " \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
   },
@@ -488,6 +490,7 @@ var sv = {
   statusUnknown: "Ingen data",
   opensInNewTab: "\xF6ppnas i en ny flik",
   required: "obligatoriskt",
+  firstPage: "F\xF6rsta sidan",
   filtersApplied: function(n3) {
     return "Filter, " + n3.toLocaleString("sv-SE") + " aktiva";
   },
@@ -631,6 +634,7 @@ var STRINGS = {
     statusUnknown: "No data",
     opensInNewTab: "opens in a new tab",
     required: "required",
+    firstPage: "First page",
     filtersApplied: function(n3) {
       return "Filters, " + n3.toLocaleString("en") + " applied";
     },
@@ -1116,6 +1120,9 @@ var iconNames = Object.keys(map);
 
 // src/icons.ts
 var IconMinus = /* @__PURE__ */ defineIcon("minus", [["path", { d: "M5 12h14" }]]);
+var IconLoaderCircle = /* @__PURE__ */ defineIcon("loader-circle", [
+  ["path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }]
+]);
 var IconCircleAlert = /* @__PURE__ */ defineIcon("circle-alert", [
   ["circle", { cx: "12", cy: "12", r: "10" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12" }],
@@ -1261,7 +1268,7 @@ var PILL_ICON = {
 };
 function statusPillElement(props, ref) {
   const tone2 = props.tone || toneFor(props.children);
-  const rest = omit(props, ["tone", "className", "children", "wrap"]);
+  const rest = omit(props, ["tone", "className", "children", "wrap", "busy"]);
   return /* @__PURE__ */ React3.createElement(
     "span",
     {
@@ -1269,10 +1276,26 @@ function statusPillElement(props, ref) {
       ref,
       className: cx("aura-pill", "aura-pill--" + tone2, props.wrap && "is-wrap", props.className)
     },
-    /* @__PURE__ */ React3.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }),
+    props.busy ? /* @__PURE__ */ React3.createElement(Icon, { name: h2(IconLoaderCircle), size: 12, className: "aura-spin" }) : /* @__PURE__ */ React3.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }),
     props.wrap ? /* @__PURE__ */ React3.createElement("span", { className: "aura-pill__text" }, props.children) : props.children
   );
 }
+function spinnerElement(props, ref) {
+  const rest = omit(props, ["size", "label", "className"]);
+  const label = props.label;
+  return /* @__PURE__ */ React3.createElement(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: cx("aura-spinner", "aura-spinner--" + (props.size || "md"), props.className),
+      role: label ? "status" : void 0,
+      "aria-hidden": label ? void 0 : true
+    },
+    /* @__PURE__ */ React3.createElement(Icon, { name: h2(IconLoaderCircle), size: props.size || "md", className: "aura-spin" }),
+    label ? /* @__PURE__ */ React3.createElement("span", { className: "aura-sr-only" }, label) : null
+  );
+}
 function badgeElement(props, ref) {
   const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
   return /* @__PURE__ */ React3.createElement(
@@ -1433,6 +1456,9 @@ function ServerCard(props) {
 function ServerStatusPill(props) {
   return statusPillElement(props, void 0);
 }
+function ServerSpinner(props) {
+  return spinnerElement(props, void 0);
+}
 function ServerBadge(props) {
   return badgeElement(props, void 0);
 }
@@ -1690,7 +1716,10 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
     props.title
   );
   const hasActions = props.actions != null && props.actions !== false;
-  const bar = hasActions && (props.actionsBarBelow === "sm" || props.actionsBarBelow === "md") ? props.actionsBarBelow : null;
+  const hasBarActions = props.actionsBar != null && props.actionsBar !== false;
+  const bar = (hasActions || hasBarActions) && (props.actionsBarBelow === "sm" || props.actionsBarBelow === "md") ? props.actionsBarBelow : null;
+  const split = !!bar && hasBarActions;
+  const status = bar && props.actionsStatus != null && props.actionsStatus !== false ? h5("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null;
   return h5(
     "div",
     Object.assign(attrs2, {
@@ -1722,12 +1751,12 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
       shown(props.subtitle) ? h5("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
       props.meta != null && props.meta !== false ? h5("div", { className: cx("aura-page-header__meta", richMeta && "aura-page-header__meta--rich") }, props.meta) : null
     ),
-    props.actions != null && props.actions !== false ? h5(
+    hasActions || hasBarActions ? split ? h5(
       "div",
-      { className: "aura-page-header__actions" },
-      bar && props.actionsStatus != null && props.actionsStatus !== false ? h5("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null,
-      props.actions
-    ) : null
+      { className: "aura-page-header__actions is-split" },
+      props.actions,
+      h5("div", { className: "aura-page-header__bar" }, status, props.actionsBar)
+    ) : h5("div", { className: "aura-page-header__actions" }, status, props.actions, props.actionsBar) : null
   );
 });
 

package/dist/server/index.d.cts

@@ -51,10 +51,24 @@ export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanEle
 	/** 5.51 (Chamber-OS 158): in a box narrower than the words, the text wraps inside the pill (still rounded, the icon
 	 * on the first line) instead of running out of it. Without it a pill stays on one line. */
 	wrap?: boolean | undefined;
+	/** 5.70 (Chamber-OS 189): the spinner in the icon slot, for a state still in progress ("Waiting for payment").
+	 * The words still say it; the tone is unchanged. */
+	busy?: boolean | undefined;
 	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;
 }
+/** 5.70 (Chamber-OS 189): Button's loading spinner on its own, for "working" outside a button. */
+export interface SpinnerProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
+	/** `sm` 16px (Button's spinner) · `md` 20px (default) · `lg` 24px — the icon sizes. It takes the text colour. */
+	size?: "sm" | "md" | "lg" | undefined;
+	/** Without it the spinner is `aria-hidden`: the text beside it, or your live region, says what is happening. With it
+	 * the spinner is `role="status"` with this text (visually hidden), for a spinner standing alone: it names it for
+	 * browse mode, but a status inserted with its text already in it is often not announced — to announce the change,
+	 * keep a live region on the page and put the words in it. */
+	label?: string | undefined;
+	className?: string | undefined;
+}
 export type FeedbackTone = "info" | "success" | "warning" | "danger";
 export interface AlertProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "role"> {
 	tone?: FeedbackTone | undefined;
@@ -434,6 +448,8 @@ export interface AuraStrings {
 	opensInNewTab: string;
 	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
 	required: string;
+	/** 5.70: a cursor Pagination's link back to the start. */
+	firstPage: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */
@@ -515,6 +531,7 @@ export declare function linkClass(opts?: {
 declare function ServerAlert(props: Omit<AlertProps, "onDismiss">): React$1.ReactElement;
 declare function ServerCard(props: CardProps): React$1.ReactElement;
 declare function ServerStatusPill(props: StatusPillProps): React$1.ReactElement;
+declare function ServerSpinner(props: SpinnerProps): React$1.ReactElement;
 declare function ServerBadge(props: BadgeProps): React$1.ReactElement;
 declare function ServerEmptyState(props: EmptyStateProps): React$1.ReactElement;
 /** Stat for Server Components (5.14): no `onClick` (a button needs the client); `href` renders `linkComponent`, else `<a>`. */
@@ -619,6 +636,11 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 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;
+	/** 5.71 (Chamber-OS 191): with `actionsBarBelow`, only these become the phone bar — `actions` stay in the page (and
+	 * `actionsFullWidthBelow` still applies to them). From the breakpoint up, and on a short screen, they sit after
+	 * `actions` in the header row. Each node is rendered once at every width, never cloned. Without `actionsBarBelow`
+	 * they are simply more actions, after `actions`. */
+	actionsBar?: 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. */
@@ -637,6 +659,7 @@ export {
 	ServerBadge as Badge,
 	ServerCard as Card,
 	ServerEmptyState as EmptyState,
+	ServerSpinner as Spinner,
 	ServerStat as Stat,
 	ServerStatusPill as StatusPill,
 	ServerStatusTile as StatusTile,

package/dist/server/index.d.ts

@@ -51,10 +51,24 @@ export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanEle
 	/** 5.51 (Chamber-OS 158): in a box narrower than the words, the text wraps inside the pill (still rounded, the icon
 	 * on the first line) instead of running out of it. Without it a pill stays on one line. */
 	wrap?: boolean | undefined;
+	/** 5.70 (Chamber-OS 189): the spinner in the icon slot, for a state still in progress ("Waiting for payment").
+	 * The words still say it; the tone is unchanged. */
+	busy?: boolean | undefined;
 	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;
 }
+/** 5.70 (Chamber-OS 189): Button's loading spinner on its own, for "working" outside a button. */
+export interface SpinnerProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
+	/** `sm` 16px (Button's spinner) · `md` 20px (default) · `lg` 24px — the icon sizes. It takes the text colour. */
+	size?: "sm" | "md" | "lg" | undefined;
+	/** Without it the spinner is `aria-hidden`: the text beside it, or your live region, says what is happening. With it
+	 * the spinner is `role="status"` with this text (visually hidden), for a spinner standing alone: it names it for
+	 * browse mode, but a status inserted with its text already in it is often not announced — to announce the change,
+	 * keep a live region on the page and put the words in it. */
+	label?: string | undefined;
+	className?: string | undefined;
+}
 export type FeedbackTone = "info" | "success" | "warning" | "danger";
 export interface AlertProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "role"> {
 	tone?: FeedbackTone | undefined;
@@ -434,6 +448,8 @@ export interface AuraStrings {
 	opensInNewTab: string;
 	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
 	required: string;
+	/** 5.70: a cursor Pagination's link back to the start. */
+	firstPage: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */
@@ -515,6 +531,7 @@ export declare function linkClass(opts?: {
 declare function ServerAlert(props: Omit<AlertProps, "onDismiss">): React$1.ReactElement;
 declare function ServerCard(props: CardProps): React$1.ReactElement;
 declare function ServerStatusPill(props: StatusPillProps): React$1.ReactElement;
+declare function ServerSpinner(props: SpinnerProps): React$1.ReactElement;
 declare function ServerBadge(props: BadgeProps): React$1.ReactElement;
 declare function ServerEmptyState(props: EmptyStateProps): React$1.ReactElement;
 /** Stat for Server Components (5.14): no `onClick` (a button needs the client); `href` renders `linkComponent`, else `<a>`. */
@@ -619,6 +636,11 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 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;
+	/** 5.71 (Chamber-OS 191): with `actionsBarBelow`, only these become the phone bar — `actions` stay in the page (and
+	 * `actionsFullWidthBelow` still applies to them). From the breakpoint up, and on a short screen, they sit after
+	 * `actions` in the header row. Each node is rendered once at every width, never cloned. Without `actionsBarBelow`
+	 * they are simply more actions, after `actions`. */
+	actionsBar?: 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. */
@@ -637,6 +659,7 @@ export {
 	ServerBadge as Badge,
 	ServerCard as Card,
 	ServerEmptyState as EmptyState,
+	ServerSpinner as Spinner,
 	ServerStat as Stat,
 	ServerStatusPill as StatusPill,
 	ServerStatusTile as StatusTile,

package/dist/server/index.js

@@ -280,6 +280,7 @@ var th = {
   statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
   opensInNewTab: "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
   required: "\u0E08\u0E33\u0E40\u0E1B\u0E47\u0E19",
+  firstPage: "\u0E2B\u0E19\u0E49\u0E32\u0E41\u0E23\u0E01",
   filtersApplied: function(n3) {
     return "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07, \u0E43\u0E0A\u0E49\u0E2D\u0E22\u0E39\u0E48 " + n3.toLocaleString("en") + " \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
   },
@@ -422,6 +423,7 @@ var sv = {
   statusUnknown: "Ingen data",
   opensInNewTab: "\xF6ppnas i en ny flik",
   required: "obligatoriskt",
+  firstPage: "F\xF6rsta sidan",
   filtersApplied: function(n3) {
     return "Filter, " + n3.toLocaleString("sv-SE") + " aktiva";
   },
@@ -565,6 +567,7 @@ var STRINGS = {
     statusUnknown: "No data",
     opensInNewTab: "opens in a new tab",
     required: "required",
+    firstPage: "First page",
     filtersApplied: function(n3) {
       return "Filters, " + n3.toLocaleString("en") + " applied";
     },
@@ -1050,6 +1053,9 @@ var iconNames = Object.keys(map);
 
 // src/icons.ts
 var IconMinus = /* @__PURE__ */ defineIcon("minus", [["path", { d: "M5 12h14" }]]);
+var IconLoaderCircle = /* @__PURE__ */ defineIcon("loader-circle", [
+  ["path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }]
+]);
 var IconCircleAlert = /* @__PURE__ */ defineIcon("circle-alert", [
   ["circle", { cx: "12", cy: "12", r: "10" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12" }],
@@ -1195,7 +1201,7 @@ var PILL_ICON = {
 };
 function statusPillElement(props, ref) {
   const tone2 = props.tone || toneFor(props.children);
-  const rest = omit(props, ["tone", "className", "children", "wrap"]);
+  const rest = omit(props, ["tone", "className", "children", "wrap", "busy"]);
   return /* @__PURE__ */ React3.createElement(
     "span",
     {
@@ -1203,10 +1209,26 @@ function statusPillElement(props, ref) {
       ref,
       className: cx("aura-pill", "aura-pill--" + tone2, props.wrap && "is-wrap", props.className)
     },
-    /* @__PURE__ */ React3.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }),
+    props.busy ? /* @__PURE__ */ React3.createElement(Icon, { name: h2(IconLoaderCircle), size: 12, className: "aura-spin" }) : /* @__PURE__ */ React3.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }),
     props.wrap ? /* @__PURE__ */ React3.createElement("span", { className: "aura-pill__text" }, props.children) : props.children
   );
 }
+function spinnerElement(props, ref) {
+  const rest = omit(props, ["size", "label", "className"]);
+  const label = props.label;
+  return /* @__PURE__ */ React3.createElement(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: cx("aura-spinner", "aura-spinner--" + (props.size || "md"), props.className),
+      role: label ? "status" : void 0,
+      "aria-hidden": label ? void 0 : true
+    },
+    /* @__PURE__ */ React3.createElement(Icon, { name: h2(IconLoaderCircle), size: props.size || "md", className: "aura-spin" }),
+    label ? /* @__PURE__ */ React3.createElement("span", { className: "aura-sr-only" }, label) : null
+  );
+}
 function badgeElement(props, ref) {
   const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
   return /* @__PURE__ */ React3.createElement(
@@ -1367,6 +1389,9 @@ function ServerCard(props) {
 function ServerStatusPill(props) {
   return statusPillElement(props, void 0);
 }
+function ServerSpinner(props) {
+  return spinnerElement(props, void 0);
+}
 function ServerBadge(props) {
   return badgeElement(props, void 0);
 }
@@ -1624,7 +1649,10 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
     props.title
   );
   const hasActions = props.actions != null && props.actions !== false;
-  const bar = hasActions && (props.actionsBarBelow === "sm" || props.actionsBarBelow === "md") ? props.actionsBarBelow : null;
+  const hasBarActions = props.actionsBar != null && props.actionsBar !== false;
+  const bar = (hasActions || hasBarActions) && (props.actionsBarBelow === "sm" || props.actionsBarBelow === "md") ? props.actionsBarBelow : null;
+  const split = !!bar && hasBarActions;
+  const status = bar && props.actionsStatus != null && props.actionsStatus !== false ? h5("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null;
   return h5(
     "div",
     Object.assign(attrs2, {
@@ -1656,12 +1684,12 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
       shown(props.subtitle) ? h5("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
       props.meta != null && props.meta !== false ? h5("div", { className: cx("aura-page-header__meta", richMeta && "aura-page-header__meta--rich") }, props.meta) : null
     ),
-    props.actions != null && props.actions !== false ? h5(
+    hasActions || hasBarActions ? split ? h5(
       "div",
-      { className: "aura-page-header__actions" },
-      bar && props.actionsStatus != null && props.actionsStatus !== false ? h5("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null,
-      props.actions
-    ) : null
+      { className: "aura-page-header__actions is-split" },
+      props.actions,
+      h5("div", { className: "aura-page-header__bar" }, status, props.actionsBar)
+    ) : h5("div", { className: "aura-page-header__actions" }, status, props.actions, props.actionsBar) : null
   );
 });
 
@@ -1884,6 +1912,7 @@ export {
   PageHeader,
   STRINGS,
   Sparkline,
+  ServerSpinner as Spinner,
   ServerStat as Stat,
   ServerStatusPill as StatusPill,
   ServerStatusTile as StatusTile,