@jirawatpyk/aura-react 5.14.0 → 5.16.0

package/dist/index.d.ts

@@ -20,6 +20,9 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
+	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
+	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	touchHeight?: boolean | undefined;
 }
 /** A link that looks like a Button: give `Button` an `href` and it renders an `<a>` (navigation, not actions). */
 export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
@@ -38,9 +41,21 @@ export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLA
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding. Default `md` (44px). */
 	size?: ButtonSize | undefined;
+	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
+	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	touchHeight?: boolean | undefined;
 	/** A router's link to render instead of `<a>`, e.g. `Link` from `next/link` (client-side navigation). It gets `href`, `className`, the children and the ref. */
 	linkComponent?: React$1.ElementType | undefined;
 }
+/** How a DataTable selection changed: the second argument of `onSelectionChange` (5.16). */
+export interface DataTableSelectionChange {
+	/** The row whose box or Space made the change; null for select-all and `sync`. */
+	key: string | number | null;
+	shiftKey: boolean;
+	source: "click" | "keyboard" | "all" | "sync";
+	/** With `rangeSelect`, the keys a Shift range set (the row's own key included). */
+	range?: Array<string | number> | undefined;
+}
 /** What DataTable's onStateChange reports: the sort and the 1-based page, together. */
 export interface DataTableState {
 	sort: DataTableSort | null;
@@ -143,7 +158,13 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	selected?: Array<string | number> | undefined;
 	/** Initial selection when uncontrolled. */
 	defaultSelected?: Array<string | number> | undefined;
-	onSelectionChange?: ((keys: Array<string | number>) => void) | undefined;
+	/** The new keys, and how they changed (5.16, Chamber-OS 98): the row's `key` (null for select-all), whether Shift
+	 * was held, and the `source` — `click` (a checkbox), `keyboard` (Space on a row), `all` (the select-all box) or
+	 * `sync` (keys of rows `isRowSelectable` rejects, dropped). `range` lists the keys a Shift range changed. */
+	onSelectionChange?: ((keys: Array<string | number>, change: DataTableSelectionChange) => void) | undefined;
+	/** Shift-click a row's checkbox (or Shift+Space on a row) to set every selectable row from the last one changed to
+	 * this one, on this page and in this order, to this row's new state (5.16, Chamber-OS 98). Default false. */
+	rangeSelect?: boolean | undefined;
 	/** Shown when rows is empty. */
 	empty?: DataTableEmpty | undefined;
 	/** A totals row under the body (4.19): content per column key, e.g. `{ id: 'Total', vat: '7,000.00', total: '107,000.00' }`.
@@ -279,6 +300,13 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 	disabled?: boolean | undefined;
 	tabIndex?: number | undefined;
 	className?: string | undefined;
+	/** How far a click counts around a box without visible text (5.15, Chamber-OS 99): `box` (default, 16×16),
+	 * `target` (24×24, WCAG 2.5.8, as DataTable's selection column) or `{ x, y }` — px added on each side, so
+	 * `{ x: 12, y: 8 }` is a 40×32 area. The box looks the same; a labelled checkbox's whole label is its target. */
+	hitArea?: "box" | "target" | {
+		x: number;
+		y: number;
+	} | undefined;
 }
 /** 32px round button holding one icon. */
 export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -289,6 +317,9 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	label: string;
 	/** Icon size. Default `sm` (16). */
 	size?: "sm" | "md" | undefined;
+	/** 44×44 below 640px (the viewport's) instead of 32×32 — a phone sheet's close button, a card's ⋯ trigger
+	 * (5.15, Chamber-OS 100). */
+	touchHeight?: boolean | undefined;
 }
 export interface MenuItem {
 	label?: string | undefined;
@@ -415,6 +446,12 @@ export interface FilterBarProps {
 	/** The search takes all the room the controls leave in its row, instead of stopping at 360px with the count and
 	 * actions pushed to the end (5.12). */
 	searchGrow?: boolean | undefined;
+	/** `fill`: the filter controls share their row in equal columns (at least 120px each, wrapping when they can't),
+	 * and the count and actions keep to the end (5.15, Chamber-OS 92). Default `auto`: each at its own width. */
+	controlsLayout?: "auto" | "fill" | undefined;
+	/** Below this width (the viewport's) the search takes a row of its own above the controls. Default `md` (768px);
+	 * `lg` (1024px) for bars with several filters (5.15, Chamber-OS 92). */
+	stackBelow?: "md" | "lg" | undefined;
 	className?: string | undefined;
 }
 /** One command in the palette. */
@@ -584,9 +621,22 @@ export interface FieldPropsPublic {
 	required?: boolean | undefined;
 	optional?: boolean | undefined;
 }
-export interface DialogProps {
-	open: boolean;
-	onClose: () => void;
+/** `id`, `data-*`, `aria-*`, `style`, `lang` and `dir` go on the `.aura-dialog` panel (5.16, Chamber-OS 101). */
+export interface DialogProps extends Pick<React$1.HTMLAttributes<HTMLDivElement>, "id" | "style" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
+	/** Controlled open state. Leave it out with a `trigger` and the Dialog opens and closes itself (5.16). */
+	open?: boolean | undefined;
+	onClose?: (() => void) | undefined;
+	/** The button that opens it (5.16, Chamber-OS 101): rendered in place, with `aria-haspopup="dialog"`,
+	 * `aria-expanded` and a click that opens the Dialog (its own onClick runs first; `preventDefault()` keeps it shut).
+	 * Focus returns to it on close. */
+	trigger?: React$1.ReactElement | undefined;
+	/** Called when the trigger opens it (5.16). */
+	onOpen?: (() => void) | undefined;
+	/** Where focus goes when it closes — by a button, Escape or the scrim — instead of back to what opened it: the
+	 * row a save just created (5.16). A ref, or a function read at close; null falls back to the opener. */
+	finalFocus?: React$1.RefObject<HTMLElement | null> | (() => HTMLElement | null) | undefined;
+	/** Runs once after it has closed and its panel has left the page (5.16) — reset a selection there. */
+	onCloseComplete?: (() => void) | undefined;
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
 	children?: React$1.ReactNode | undefined;
@@ -623,6 +673,12 @@ export interface CardProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "ti
 	className?: string | undefined;
 	/** id for the title element; the card is then labelled by it (aria-labelledby). */
 	titleId?: string | undefined;
+	/** Free head content in place of `title` and `description` (5.15, Chamber-OS 87): skeleton bars while the card
+	 * loads, a status pill above a title you mark up yourself. No heading is added; `actions` still sit top-right. */
+	header?: React$1.ReactNode | undefined;
+	/** Below this width (the viewport's) the card drops its border, surface and shadow — a list whose rows become
+	 * cards of their own on a phone, so there are no cards in a card (5.15, Chamber-OS 93). Padding is kept. */
+	flushBelow?: "sm" | "md" | "lg" | undefined;
 }
 export interface TabItem {
 	id: string;
@@ -658,8 +714,10 @@ export interface TabsProps {
 	/** `underline` (default) or `segmented`: the tabs as a pill track with the selected one raised, like
 	 * SegmentedControl, keeping every Tabs behaviour (panels, keepMounted, activation, tabProps). (5.10, Chamber-OS 72) */
 	variant?: "underline" | "segmented" | undefined;
-	/** With `variant="segmented"`: stretch the track to the full width, tabs sharing it equally. (5.10) */
-	fullWidth?: boolean | undefined;
+	/** Tabs share the full width equally: the segmented track (5.10), or underline tabs (5.15, Chamber-OS 90).
+	 * `'below-sm' | 'below-md' | 'below-lg'` only below that width (the viewport's) — `below-lg` for phone and tablet
+	 * layouts, tabs at their own width on a desktop. */
+	fullWidth?: boolean | "below-sm" | "below-md" | "below-lg" | undefined;
 	/** Link tabs: what the current link is (5.14). `page` (default) for routes; `location` for links to sections of
 	 * this page (`#contacts`). */
 	current?: "page" | "location" | undefined;
@@ -676,6 +734,11 @@ export interface NavItem {
 	children?: NavItem[] | undefined;
 	/** Start open. A group also opens by itself when one of its items is the current one. */
 	defaultOpen?: boolean | undefined;
+	/** Runs when the item is chosen (5.16, Chamber-OS 95). */
+	onSelect?: (() => void) | undefined;
+	/** `false` makes an action row — Sign out, Collapse sidebar: it looks like the other rows and runs `onSelect`,
+	 * but never becomes the current item (no `aria-current`, no `onChange`). Default true. (5.16) */
+	selectable?: boolean | undefined;
 }
 export interface SideNavProps {
 	sections?: Array<{
@@ -701,6 +764,15 @@ export interface SideNavProps {
 	onCollapsedChange?: ((collapsed: boolean) => void) | undefined;
 	/** Adds a collapse / expand button at the bottom. AppShell hides it in its phone drawer. */
 	collapsible?: boolean | undefined;
+	/** Called with the item's id when an action row (`selectable: false`) is chosen, after its `onSelect` (5.16).
+	 * AppShell uses it to close its phone drawer. */
+	onAction?: ((id: string) => void) | undefined;
+	/** How `collapsible` shows its toggle: `icon` (default, an IconButton) or `row` — a labelled nav row
+	 * ("Collapse sidebar") with the rows' look, its icon alone in the rail (5.16, Chamber-OS 95). */
+	collapseToggle?: "icon" | "row" | undefined;
+	/** Where a closed group's chevron points: `down` (default; up when open) or `right` (down when open; left in
+	 * right-to-left pages) (5.16, Chamber-OS 96). */
+	chevron?: "down" | "right" | undefined;
 	/** The 1px right edge that divides the nav from the page. Default true; `false` when your layout draws its own
 	 * divider. (5.1) */
 	bordered?: boolean | undefined;
@@ -713,8 +785,16 @@ export interface BreadcrumbProps {
 		label: string;
 		href?: string | undefined;
 		onClick?: (() => void) | undefined;
+		/** Attributes for this item's `<li>` — `data-slot`, `data-testid` (5.15, Chamber-OS 94). */
+		itemProps?: (React$1.LiHTMLAttributes<HTMLLIElement> & DataAttributes) | undefined;
+		/** Attributes for the item's link, button or text (5.15): `data-*`, `target`, `rel`… Its `onClick` runs before
+		 * the item's own. */
+		linkProps?: (React$1.AnchorHTMLAttributes<HTMLAnchorElement> & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, keyof React$1.AnchorHTMLAttributes<HTMLAnchorElement>> & DataAttributes) | undefined;
 	}>;
 	label?: string | undefined;
+	/** Below this width (the viewport's) a trail of three or more shows the first item, "…" and the last; the "…"
+	 * button shows the rest (5.15, Chamber-OS 94). Decided in CSS, so the server's HTML is already right. */
+	collapseBelow?: "sm" | "md" | undefined;
 	/** Your router's link (e.g. `Link` from `next/link`) for this component; defaults to AuraProvider's `linkComponent`, then `<a>`. */
 	linkComponent?: React$1.ElementType | undefined;
 	className?: string | undefined;
@@ -752,7 +832,7 @@ export interface ComboboxOption {
 	icon?: IconInput | undefined;
 }
 /** Combobox with `multiple`: pick any number; the picks show as removable chips in the field. */
-export interface ComboboxMultipleProps extends Omit<ComboboxProps, "value" | "defaultValue" | "onChange" | "clearable"> {
+export interface ComboboxMultipleProps extends Omit<ComboboxProps, "value" | "defaultValue" | "onChange" | "clearable" | "allowCustomValue"> {
 	multiple: true;
 	/** Selected option values, in the order they were picked (controlled). */
 	value?: string[] | undefined;
@@ -764,7 +844,8 @@ export interface ComboboxMultipleProps extends Omit<ComboboxProps, "value" | "de
 	max?: number | undefined;
 }
 export interface ComboboxProps extends FieldProps {
-	options: Array<ComboboxOption | string>;
+	/** The options. Optional with `groups` (5.16). */
+	options?: Array<ComboboxOption | string> | undefined;
 	/** Selected option value (controlled). */
 	value?: string | null | undefined;
 	defaultValue?: string | null | undefined;
@@ -787,6 +868,17 @@ export interface ComboboxProps extends FieldProps {
 	limit?: number | undefined;
 	/** Replace the Thai-aware default filter (label, description, keywords). */
 	filter?: ((option: ComboboxOption, query: string) => boolean) | undefined;
+	/** Options under headings, after any in `options` (5.16, Chamber-OS 105): `[{ label: 'Nordic and Thailand',
+	 * options: [...] }]`. Each heading names its group for screen readers; filtering keeps a heading while any of its
+	 * options match. */
+	groups?: Array<{
+		label: string;
+		options: Array<ComboboxOption | string>;
+	}> | undefined;
+	/** A typed value that isn't in the list is kept (5.16, Chamber-OS 105): Enter with no match highlighted, or leaving
+	 * the field, makes the text the value (text matching an option's label picks that option). Clearing the text
+	 * clears the value. Single value only. */
+	allowCustomValue?: boolean | undefined;
 	className?: string | undefined;
 }
 /** Number input: thousands separators, +/− buttons, arrow keys, min/max/step, prefix/suffix (฿, %). */
@@ -935,6 +1027,10 @@ export type ButtonAttributes = React$1.ButtonHTMLAttributes<HTMLButtonElement> &
 export interface DrawerProps extends Pick<React$1.HTMLAttributes<HTMLDivElement>, "id" | "style" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
 	open: boolean;
 	onClose: () => void;
+	/** As Dialog's (5.16): where focus goes when it closes, instead of back to what opened it. */
+	finalFocus?: React$1.RefObject<HTMLElement | null> | (() => HTMLElement | null) | undefined;
+	/** As Dialog's (5.16): runs once after it has closed and left the page. */
+	onCloseComplete?: (() => void) | undefined;
 	/** Default `right`. */
 	side?: "right" | "left" | undefined;
 	/** sm 360 · md 480 (default) · lg 640 · nav = SideNav width. Full width below 640px. */
@@ -956,8 +1052,11 @@ export interface DrawerProps extends Pick<React$1.HTMLAttributes<HTMLDivElement>
 	/** The close button's accessible name and tooltip, saying what it closes ("Close payment drawer"). Default: the
 	 * built-in "Close" in the provider's language. (5.9) */
 	closeLabel?: string | undefined;
-	/** Attributes for the close button, e.g. `{ 'data-testid': 'pay-sheet-close' }`. (5.9) */
-	closeProps?: ButtonAttributes | undefined;
+	/** Attributes for the close button, e.g. `{ 'data-testid': 'pay-sheet-close' }` (5.9), or `touchHeight: true` for a
+	 * 44px close button on phones (5.15). */
+	closeProps?: (ButtonAttributes & {
+		touchHeight?: boolean | undefined;
+	}) | undefined;
 }
 export type Breakpoint = "base" | "sm" | "md" | "lg" | "xl";
 export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
@@ -1027,6 +1126,10 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	/** `false` (5.13) drops the frame — border, radius, background — and the outer cells' side padding, so the table
 	 * lines up with the content around it, e.g. flush inside a Card under its heading. Default `true`. */
 	bordered?: boolean | undefined;
+	/** How stacked rows look (5.15, Chamber-OS 85): `list` (default) — one frame, rows divided by rules; `cards` —
+	 * each row its own framed card, spaced like DataTable's cards, with no frame around them. From the `stackBelow`
+	 * width up the table is unchanged. The table then sits in one more `div` (`.aura-tbl-cards`). */
+	stackStyle?: "list" | "cards" | undefined;
 	className?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 }
@@ -1213,6 +1316,9 @@ export interface ProgressProps {
 	showValue?: boolean | undefined;
 	/** Replaces the % text, e.g. "3 of 5 files". Also read out as aria-valuetext. */
 	valueLabel?: React$1.ReactNode | undefined;
+	/** A reserved amount drawn after `value` as a striped segment of the same tone — queued sends on a quota
+	 * (5.15, Chamber-OS 89). Both counts are read out ("2 of 6 used, 1 reserved") unless `valueLabel` is given. */
+	secondaryValue?: number | undefined;
 	hint?: React$1.ReactNode | undefined;
 	tone?: Tone | undefined;
 	size?: "sm" | "md" | undefined;
@@ -1429,6 +1535,7 @@ export declare function buttonClass(opts?: {
 	size?: ButtonProps["size"];
 	fullWidth?: boolean | undefined;
 	loading?: boolean | undefined;
+	touchHeight?: boolean | undefined;
 	className?: string | undefined;
 }): string;
 export declare const Alert: React$1.ForwardRefExoticComponent<AlertProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -1460,6 +1567,10 @@ export declare const FormErrorSummary: React$1.ForwardRefExoticComponent<FormErr
 export declare const FilterBar: React$1.ForwardRefExoticComponent<FilterBarProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare function Command(props: CommandProps): React$1.ReactElement | null;
 export declare const Tooltip: React$1.ForwardRefExoticComponent<TooltipProps & React$1.RefAttributes<HTMLSpanElement>>;
+/** Inside a Dialog's body or footer: a function that closes it (5.16) — also when `dismissible={false}`, which only
+ * turns off Escape, the scrim and ×. Outside a Dialog it does nothing. Use it for Cancel and Save in a Dialog that
+ * has a `trigger` and no `open`. */
+export declare function useDialogClose(): () => void;
 export declare const Dialog: React$1.ForwardRefExoticComponent<DialogProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Side panel over the page: record detail, filters, mobile navigation. Modal (focus trap, scroll lock, focus restore). */
 export declare const Drawer: React$1.ForwardRefExoticComponent<DrawerProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -1612,6 +1723,10 @@ export interface AuraStrings {
 	pagination: string;
 	pageN: (p: number) => string;
 	accepts: (list?: string, max?: number | string) => string;
+	/** Progress with a reserved segment (5.15): "2 of 6 used, 1 reserved". */
+	progressReserved: (value: number, reserved: number, max: number) => string;
+	/** The collapsed middle of a Breadcrumb (5.15). */
+	breadcrumbMore: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/sv.cjs

@@ -143,6 +143,10 @@ var sv = {
   pageN: function(p) {
     return "Sida " + p;
   },
+  progressReserved: function(v, r, max) {
+    return nsv(v) + " av " + nsv(max) + " anv\xE4nda, " + nsv(r) + " reserverade";
+  },
+  breadcrumbMore: "Visa hela s\xF6kv\xE4gen",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }

package/dist/locales/sv.d.cts

@@ -83,6 +83,10 @@ export interface AuraStrings {
 	pagination: string;
 	pageN: (p: number) => string;
 	accepts: (list?: string, max?: number | string) => string;
+	/** Progress with a reserved segment (5.15): "2 of 6 used, 1 reserved". */
+	progressReserved: (value: number, reserved: number, max: number) => string;
+	/** The collapsed middle of a Breadcrumb (5.15). */
+	breadcrumbMore: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/sv.d.ts

@@ -83,6 +83,10 @@ export interface AuraStrings {
 	pagination: string;
 	pageN: (p: number) => string;
 	accepts: (list?: string, max?: number | string) => string;
+	/** Progress with a reserved segment (5.15): "2 of 6 used, 1 reserved". */
+	progressReserved: (value: number, reserved: number, max: number) => string;
+	/** The collapsed middle of a Breadcrumb (5.15). */
+	breadcrumbMore: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/th.cjs

@@ -143,6 +143,10 @@ var th = {
   pageN: function(p) {
     return "\u0E2B\u0E19\u0E49\u0E32 " + p;
   },
+  progressReserved: function(v, r, max) {
+    return "\u0E43\u0E0A\u0E49\u0E41\u0E25\u0E49\u0E27 " + n(v) + " \u0E08\u0E32\u0E01 " + n(max) + " \u0E08\u0E2D\u0E07\u0E44\u0E27\u0E49 " + n(r);
+  },
+  breadcrumbMore: "\u0E41\u0E2A\u0E14\u0E07\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }

package/dist/locales/th.d.cts

@@ -83,6 +83,10 @@ export interface AuraStrings {
 	pagination: string;
 	pageN: (p: number) => string;
 	accepts: (list?: string, max?: number | string) => string;
+	/** Progress with a reserved segment (5.15): "2 of 6 used, 1 reserved". */
+	progressReserved: (value: number, reserved: number, max: number) => string;
+	/** The collapsed middle of a Breadcrumb (5.15). */
+	breadcrumbMore: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/locales/th.d.ts

@@ -83,6 +83,10 @@ export interface AuraStrings {
 	pagination: string;
 	pageN: (p: number) => string;
 	accepts: (list?: string, max?: number | string) => string;
+	/** Progress with a reserved segment (5.15): "2 of 6 used, 1 reserved". */
+	progressReserved: (value: number, reserved: number, max: number) => string;
+	/** The collapsed middle of a Breadcrumb (5.15). */
+	breadcrumbMore: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */

package/dist/server/index.cjs

@@ -327,6 +327,10 @@ var th = {
   pageN: function(p) {
     return "\u0E2B\u0E19\u0E49\u0E32 " + p;
   },
+  progressReserved: function(v, r, max) {
+    return "\u0E43\u0E0A\u0E49\u0E41\u0E25\u0E49\u0E27 " + n(v) + " \u0E08\u0E32\u0E01 " + n(max) + " \u0E08\u0E2D\u0E07\u0E44\u0E27\u0E49 " + n(r);
+  },
+  breadcrumbMore: "\u0E41\u0E2A\u0E14\u0E07\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }
@@ -453,6 +457,10 @@ var sv = {
   pageN: function(p) {
     return "Sida " + p;
   },
+  progressReserved: function(v, r, max) {
+    return nsv(v) + " av " + nsv(max) + " anv\xE4nda, " + nsv(r) + " reserverade";
+  },
+  breadcrumbMore: "Visa hela s\xF6kv\xE4gen",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }
@@ -580,6 +588,10 @@ var STRINGS = {
     pageN: function(p) {
       return "Page " + p;
     },
+    progressReserved: function(v, r, max) {
+      return n2(v) + " of " + n2(max) + " used, " + n2(r) + " reserved";
+    },
+    breadcrumbMore: "Show the full path",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }
@@ -1106,8 +1118,11 @@ function cardElement(props, ref) {
     "interactive",
     "as",
     "className",
-    "titleId"
+    "titleId",
+    "header",
+    "flushBelow"
   ]);
+  const head = props.header !== void 0 && props.header !== null && props.header !== false;
   return h2(
     props.as || "section",
     Object.assign({}, rest, {
@@ -1116,12 +1131,13 @@ function cardElement(props, ref) {
         "aura-card",
         creative && "aura-card--creative",
         props.interactive && "is-interactive",
+        props.flushBelow && "aura-card--flush-below-" + props.flushBelow,
         props.className
       ),
       /* A titled card is labelled by its title; otherwise the caller's aria-labelledby stays (5.8). */
-      "aria-labelledby": props.title && props.titleId ? props.titleId : props["aria-labelledby"]
+      "aria-labelledby": !head && props.title && props.titleId ? props.titleId : props["aria-labelledby"]
     }),
-    props.title || props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React3.createElement("div", { className: "aura-card__heading" }, props.title ? h2("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, props.description ? /* @__PURE__ */ React3.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
+    head || props.title || props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React3.createElement("div", { className: "aura-card__heading" }, head ? props.header : null, !head && props.title ? h2("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, !head && props.description ? /* @__PURE__ */ React3.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
     props.children ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__body" }, props.children) : null,
     props.footer ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__foot" }, props.footer) : null
   );
@@ -1256,6 +1272,7 @@ function buttonClass(opts = {}) {
     "aura-btn--" + (opts.variant || "primary"),
     opts.size === "sm" && "aura-btn--sm",
     opts.fullWidth && "aura-btn--full",
+    opts.touchHeight && "aura-btn--touch",
     opts.loading && "is-loading",
     opts.className
   );

package/dist/server/index.d.cts

@@ -20,6 +20,9 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
+	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
+	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	touchHeight?: boolean | undefined;
 }
 /** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */
 export type IconInput = IconName | React$1.ReactElement;
@@ -80,6 +83,12 @@ export interface CardProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "ti
 	className?: string | undefined;
 	/** id for the title element; the card is then labelled by it (aria-labelledby). */
 	titleId?: string | undefined;
+	/** Free head content in place of `title` and `description` (5.15, Chamber-OS 87): skeleton bars while the card
+	 * loads, a status pill above a title you mark up yourself. No heading is added; `actions` still sit top-right. */
+	header?: React$1.ReactNode | undefined;
+	/** Below this width (the viewport's) the card drops its border, surface and shadow — a list whose rows become
+	 * cards of their own on a phone, so there are no cards in a card (5.15, Chamber-OS 93). Padding is kept. */
+	flushBelow?: "sm" | "md" | "lg" | undefined;
 }
 export interface AvatarProps {
 	/** Accessible name; also gives the initials and a stable colour. */
@@ -281,6 +290,10 @@ export interface AuraStrings {
 	pagination: string;
 	pageN: (p: number) => string;
 	accepts: (list?: string, max?: number | string) => string;
+	/** Progress with a reserved segment (5.15): "2 of 6 used, 1 reserved". */
+	progressReserved: (value: number, reserved: number, max: number) => string;
+	/** The collapsed middle of a Breadcrumb (5.15). */
+	breadcrumbMore: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */
@@ -338,6 +351,7 @@ export declare function buttonClass(opts?: {
 	size?: ButtonProps["size"];
 	fullWidth?: boolean | undefined;
 	loading?: boolean | undefined;
+	touchHeight?: boolean | undefined;
 	className?: string | undefined;
 }): string;
 declare function ServerAlert(props: Omit<AlertProps, "onDismiss">): React$1.ReactElement;

package/dist/server/index.d.ts

@@ -20,6 +20,9 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
+	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
+	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	touchHeight?: boolean | undefined;
 }
 /** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */
 export type IconInput = IconName | React$1.ReactElement;
@@ -80,6 +83,12 @@ export interface CardProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "ti
 	className?: string | undefined;
 	/** id for the title element; the card is then labelled by it (aria-labelledby). */
 	titleId?: string | undefined;
+	/** Free head content in place of `title` and `description` (5.15, Chamber-OS 87): skeleton bars while the card
+	 * loads, a status pill above a title you mark up yourself. No heading is added; `actions` still sit top-right. */
+	header?: React$1.ReactNode | undefined;
+	/** Below this width (the viewport's) the card drops its border, surface and shadow — a list whose rows become
+	 * cards of their own on a phone, so there are no cards in a card (5.15, Chamber-OS 93). Padding is kept. */
+	flushBelow?: "sm" | "md" | "lg" | undefined;
 }
 export interface AvatarProps {
 	/** Accessible name; also gives the initials and a stable colour. */
@@ -281,6 +290,10 @@ export interface AuraStrings {
 	pagination: string;
 	pageN: (p: number) => string;
 	accepts: (list?: string, max?: number | string) => string;
+	/** Progress with a reserved segment (5.15): "2 of 6 used, 1 reserved". */
+	progressReserved: (value: number, reserved: number, max: number) => string;
+	/** The collapsed middle of a Breadcrumb (5.15). */
+	breadcrumbMore: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */
@@ -338,6 +351,7 @@ export declare function buttonClass(opts?: {
 	size?: ButtonProps["size"];
 	fullWidth?: boolean | undefined;
 	loading?: boolean | undefined;
+	touchHeight?: boolean | undefined;
 	className?: string | undefined;
 }): string;
 declare function ServerAlert(props: Omit<AlertProps, "onDismiss">): React$1.ReactElement;

package/dist/server/index.js

@@ -268,6 +268,10 @@ var th = {
   pageN: function(p) {
     return "\u0E2B\u0E19\u0E49\u0E32 " + p;
   },
+  progressReserved: function(v, r, max) {
+    return "\u0E43\u0E0A\u0E49\u0E41\u0E25\u0E49\u0E27 " + n(v) + " \u0E08\u0E32\u0E01 " + n(max) + " \u0E08\u0E2D\u0E07\u0E44\u0E27\u0E49 " + n(r);
+  },
+  breadcrumbMore: "\u0E41\u0E2A\u0E14\u0E07\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }
@@ -394,6 +398,10 @@ var sv = {
   pageN: function(p) {
     return "Sida " + p;
   },
+  progressReserved: function(v, r, max) {
+    return nsv(v) + " av " + nsv(max) + " anv\xE4nda, " + nsv(r) + " reserverade";
+  },
+  breadcrumbMore: "Visa hela s\xF6kv\xE4gen",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }
@@ -521,6 +529,10 @@ var STRINGS = {
     pageN: function(p) {
       return "Page " + p;
     },
+    progressReserved: function(v, r, max) {
+      return n2(v) + " of " + n2(max) + " used, " + n2(r) + " reserved";
+    },
+    breadcrumbMore: "Show the full path",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }
@@ -1047,8 +1059,11 @@ function cardElement(props, ref) {
     "interactive",
     "as",
     "className",
-    "titleId"
+    "titleId",
+    "header",
+    "flushBelow"
   ]);
+  const head = props.header !== void 0 && props.header !== null && props.header !== false;
   return h2(
     props.as || "section",
     Object.assign({}, rest, {
@@ -1057,12 +1072,13 @@ function cardElement(props, ref) {
         "aura-card",
         creative && "aura-card--creative",
         props.interactive && "is-interactive",
+        props.flushBelow && "aura-card--flush-below-" + props.flushBelow,
         props.className
       ),
       /* A titled card is labelled by its title; otherwise the caller's aria-labelledby stays (5.8). */
-      "aria-labelledby": props.title && props.titleId ? props.titleId : props["aria-labelledby"]
+      "aria-labelledby": !head && props.title && props.titleId ? props.titleId : props["aria-labelledby"]
     }),
-    props.title || props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React3.createElement("div", { className: "aura-card__heading" }, props.title ? h2("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, props.description ? /* @__PURE__ */ React3.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
+    head || props.title || props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React3.createElement("div", { className: "aura-card__heading" }, head ? props.header : null, !head && props.title ? h2("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, !head && props.description ? /* @__PURE__ */ React3.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
     props.children ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__body" }, props.children) : null,
     props.footer ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__foot" }, props.footer) : null
   );
@@ -1197,6 +1213,7 @@ function buttonClass(opts = {}) {
     "aura-btn--" + (opts.variant || "primary"),
     opts.size === "sm" && "aura-btn--sm",
     opts.fullWidth && "aura-btn--full",
+    opts.touchHeight && "aura-btn--touch",
     opts.loading && "is-loading",
     opts.className
   );