@jirawatpyk/aura-react 5.14.0 → 5.15.0

package/dist/esm/display.js

@@ -52,8 +52,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 h(
     props.as || "section",
     Object.assign({}, rest, {
@@ -62,12 +65,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__ */ React.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React.createElement("div", { className: "aura-card__heading" }, props.title ? h("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
+    head || props.title || props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React.createElement("div", { className: "aura-card__heading" }, head ? props.header : null, !head && props.title ? h("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, !head && props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
     props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__body" }, props.children) : null,
     props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__foot" }, props.footer) : null
   );
@@ -202,6 +206,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/esm/strings.js

@@ -122,6 +122,10 @@ const STRINGS = {
     pageN: function(p) {
       return "Page " + p;
     },
+    progressReserved: function(v, r, max) {
+      return n(v) + " of " + n(max) + " used, " + n(r) + " reserved";
+    },
+    breadcrumbMore: "Show the full path",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }

package/dist/esm/strings.sv.js

@@ -118,6 +118,10 @@ const 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/esm/strings.th.js

@@ -118,6 +118,10 @@ const 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/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;
 }
 /** 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,6 +41,9 @@ 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;
 }
@@ -279,6 +285,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 +302,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 +431,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. */
@@ -623,6 +645,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 +686,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;
@@ -713,8 +743,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;
@@ -956,8 +994,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 +1068,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 +1258,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 +1477,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>>;
@@ -1612,6 +1661,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/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,6 +41,9 @@ 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;
 }
@@ -279,6 +285,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 +302,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 +431,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. */
@@ -623,6 +645,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 +686,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;
@@ -713,8 +743,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;
@@ -956,8 +994,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 +1068,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 +1258,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 +1477,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>>;
@@ -1612,6 +1661,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;