@jirawatpyk/aura-react 5.69.0 → 5.70.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;
@@ -2287,6 +2357,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 +2484,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);
 }

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>`. */
@@ -637,6 +654,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>`. */
@@ -637,6 +654,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);
 }
@@ -1884,6 +1909,7 @@ export {
   PageHeader,
   STRINGS,
   Sparkline,
+  ServerSpinner as Spinner,
   ServerStat as Stat,
   ServerStatusPill as StatusPill,
   ServerStatusTile as StatusTile,

package/dist/styles.css

@@ -251,6 +251,12 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   transition: color var(--aura-duration-fast) var(--aura-ease);
 }
 .aura-table__sort:hover, .aura-table__sort.is-active { color: var(--aura-fg-primary); }
+/* 5.70 (Chamber-OS 188): the same control in a plain Table's Th — a button or a link, with its own focus ring (a
+ * DataTable header ring is on the cell, which roves). */
+a.aura-table__sort { text-decoration: none; }
+.aura-tbl__th .aura-table__sort { white-space: normal; text-align: inherit; }
+.aura-tbl__th .aura-table__sort:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
+.aura-tbl__th.is-end .aura-table__sort { flex-direction: row-reverse; }
 
 /* Column menu trigger — shows on header hover or focus */
 .aura-table__menu-btn {
@@ -363,6 +369,9 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-icon-btn--outline { box-sizing: border-box; border: 1px solid var(--aura-button-secondary-border); } /* 5.44 (Chamber-OS 149): reads as a button beside outlined ones */
 .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
+/* 5.70 (Chamber-OS 186): aria-disabled keeps it focusable (a cooldown); it looks unavailable and hover changes nothing. */
+.aura-icon-btn[aria-disabled="true"] { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
+.aura-icon-btn[aria-disabled="true"]:hover { background: transparent; }
 /* 5.65 (Chamber-OS 180): a toggle (aria-pressed="true", or the pressed prop) looks on — the selected fill and the
  * accent icon — and hover still shows on top of it (an accent hairline inside). Outline toggles take an accent border.
  * The focus ring is unchanged. Not inside a field: PasswordField's reveal eye (aria-pressed) stays quiet (5.30 #14).
@@ -482,6 +491,8 @@ a.aura-icon-btn { text-decoration: none; }
 /* Loading spinner */
 @keyframes aura-spin { to { transform: rotate(360deg); } }
 .aura-spin { animation: aura-spin var(--aura-duration-spin) linear infinite; }
+/* 5.70 (Chamber-OS 189): Spinner — the same glyph and spin, inline with the text. */
+.aura-spinner { display: inline-flex; flex: none; vertical-align: middle; color: inherit; line-height: 0; }
 @media (prefers-reduced-motion: reduce) {
   .aura-spin { animation-duration: calc(var(--aura-duration-spin) * 3); }
 }
@@ -1513,6 +1524,10 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-time__option { min-height: 36px; font-variant-numeric: tabular-nums; }
 
 /* ---------- FileUpload ---------- */
+/* 5.70 (Chamber-OS 190): FileUpload variant="button" — the Button, the accepted types and size beside it (wrapping
+ * under on a narrow field), an optional Progress under them. */
+.aura-upload-button { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); }
+.aura-upload-button > .aura-upload__note { flex-basis: auto; font-size: max(12px, .75rem); color: var(--aura-fg-secondary); }
 .aura-upload {
   position: relative; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--aura-space-2);
   min-height: 96px; padding: var(--aura-space-5); text-align: center; cursor: pointer;
@@ -1649,6 +1664,14 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-page:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-pagination__gap { min-width: 24px; text-align: center; color: var(--aura-fg-secondary); }
 .aura-pagination__compact { display: none; padding: 0 var(--aura-space-2); color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; }
+/* 5.70 (Chamber-OS 187): cursor mode — a status line at the start, First / Previous / Next at the end, each an
+ * .aura-page with text (44px on touch, as the numbers); a disabled end is dimmed and takes no clicks. */
+.aura-pagination--cursor { flex-wrap: wrap; justify-content: flex-end; gap: var(--aura-space-1) var(--aura-space-3); }
+.aura-pagination__status { flex: 1 1 auto; min-width: 0; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; }
+.aura-pagination__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-inline-start: auto; }
+.aura-page--step { gap: var(--aura-space-1); padding: 0 var(--aura-space-3); white-space: nowrap; }
+.aura-page--step:is(:disabled, [aria-disabled="true"]) { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
+.aura-page--step:is(:disabled, [aria-disabled="true"]):hover { background: transparent; }
 @media (max-width: 639.98px) {
   .aura-pagination__list { display: none; }
   .aura-pagination__compact { display: inline; }

package/dist/styles.layer.css

@@ -253,6 +253,12 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   transition: color var(--aura-duration-fast) var(--aura-ease);
 }
 .aura-table__sort:hover, .aura-table__sort.is-active { color: var(--aura-fg-primary); }
+/* 5.70 (Chamber-OS 188): the same control in a plain Table's Th — a button or a link, with its own focus ring (a
+ * DataTable header ring is on the cell, which roves). */
+a.aura-table__sort { text-decoration: none; }
+.aura-tbl__th .aura-table__sort { white-space: normal; text-align: inherit; }
+.aura-tbl__th .aura-table__sort:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
+.aura-tbl__th.is-end .aura-table__sort { flex-direction: row-reverse; }
 
 /* Column menu trigger — shows on header hover or focus */
 .aura-table__menu-btn {
@@ -365,6 +371,9 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-icon-btn--outline { box-sizing: border-box; border: 1px solid var(--aura-button-secondary-border); } /* 5.44 (Chamber-OS 149): reads as a button beside outlined ones */
 .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
+/* 5.70 (Chamber-OS 186): aria-disabled keeps it focusable (a cooldown); it looks unavailable and hover changes nothing. */
+.aura-icon-btn[aria-disabled="true"] { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
+.aura-icon-btn[aria-disabled="true"]:hover { background: transparent; }
 /* 5.65 (Chamber-OS 180): a toggle (aria-pressed="true", or the pressed prop) looks on — the selected fill and the
  * accent icon — and hover still shows on top of it (an accent hairline inside). Outline toggles take an accent border.
  * The focus ring is unchanged. Not inside a field: PasswordField's reveal eye (aria-pressed) stays quiet (5.30 #14).
@@ -484,6 +493,8 @@ a.aura-icon-btn { text-decoration: none; }
 /* Loading spinner */
 @keyframes aura-spin { to { transform: rotate(360deg); } }
 .aura-spin { animation: aura-spin var(--aura-duration-spin) linear infinite; }
+/* 5.70 (Chamber-OS 189): Spinner — the same glyph and spin, inline with the text. */
+.aura-spinner { display: inline-flex; flex: none; vertical-align: middle; color: inherit; line-height: 0; }
 @media (prefers-reduced-motion: reduce) {
   .aura-spin { animation-duration: calc(var(--aura-duration-spin) * 3); }
 }
@@ -1515,6 +1526,10 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-time__option { min-height: 36px; font-variant-numeric: tabular-nums; }
 
 /* ---------- FileUpload ---------- */
+/* 5.70 (Chamber-OS 190): FileUpload variant="button" — the Button, the accepted types and size beside it (wrapping
+ * under on a narrow field), an optional Progress under them. */
+.aura-upload-button { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); }
+.aura-upload-button > .aura-upload__note { flex-basis: auto; font-size: max(12px, .75rem); color: var(--aura-fg-secondary); }
 .aura-upload {
   position: relative; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--aura-space-2);
   min-height: 96px; padding: var(--aura-space-5); text-align: center; cursor: pointer;
@@ -1651,6 +1666,14 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-page:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-pagination__gap { min-width: 24px; text-align: center; color: var(--aura-fg-secondary); }
 .aura-pagination__compact { display: none; padding: 0 var(--aura-space-2); color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; }
+/* 5.70 (Chamber-OS 187): cursor mode — a status line at the start, First / Previous / Next at the end, each an
+ * .aura-page with text (44px on touch, as the numbers); a disabled end is dimmed and takes no clicks. */
+.aura-pagination--cursor { flex-wrap: wrap; justify-content: flex-end; gap: var(--aura-space-1) var(--aura-space-3); }
+.aura-pagination__status { flex: 1 1 auto; min-width: 0; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; }
+.aura-pagination__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-inline-start: auto; }
+.aura-page--step { gap: var(--aura-space-1); padding: 0 var(--aura-space-3); white-space: nowrap; }
+.aura-page--step:is(:disabled, [aria-disabled="true"]) { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
+.aura-page--step:is(:disabled, [aria-disabled="true"]):hover { background: transparent; }
 @media (max-width: 639.98px) {
   .aura-pagination__list { display: none; }
   .aura-pagination__compact { display: inline; }

package/package.json

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