@jirawatpyk/aura-react 5.13.0 → 5.15.0

package/dist/esm/display.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, omit, tone as badgeTone } from "./classes.js";
+import { cx, devWarnOnce, omit, tone as badgeTone } from "./classes.js";
 import { toneFor } from "./status.js";
 import {
   IconBan,
@@ -11,6 +11,9 @@ import {
   IconCircleDotDashed,
   IconInbox,
   IconInfo,
+  IconMinus,
+  IconTrendingDown,
+  IconTrendingUp,
   IconTriangleAlert
 } from "./icons.js";
 const h = React.createElement;
@@ -49,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, {
@@ -59,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
   );
@@ -101,7 +108,7 @@ function badgeElement(props, ref) {
   );
 }
 function emptyStateElement(props, ref) {
-  const HT = "h" + (props.headingLevel || 3);
+  const HT = props.headingLevel === false ? "p" : "h" + (props.headingLevel || 3);
   const rest = omit(props, [
     "title",
     "description",
@@ -133,12 +140,73 @@ function emptyStateElement(props, ref) {
     props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-empty__action" }, props.action) : null
   );
 }
+function statElement(props, ref, Link) {
+  const ch = props.change;
+  const dir = ch && (ch.direction || "flat");
+  const tone = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
+  const v = props.value;
+  const numeric = typeof v === "number" || typeof v === "string" && /\d/.test(v) && /^[\s\d.,:+\-\u2212%()\u0E3F$\u20AC\u00A3\u00A5kKmMbB]+$/.test(v.replace(/\b[A-Z]{3}\b/g, ""));
+  const Tag = props.href ? Link : props.onClick ? "button" : "div";
+  const interactive = !!(props.href || props.onClick);
+  if (props.headingLevel && Tag === "button")
+    devWarnOnce(
+      "stat-heading-button",
+      "Stat `headingLevel` is ignored with `onClick`: a heading can\u2019t sit in a button. Use `href`, or put the heading outside."
+    );
+  const LabelTag = props.headingLevel && Tag !== "button" ? "h" + props.headingLevel : "span";
+  const HeadTag = LabelTag === "span" ? "span" : "div";
+  return /* @__PURE__ */ React.createElement(
+    Tag,
+    {
+      ref,
+      className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
+      href: props.href,
+      onClick: props.onClick,
+      type: Tag === "button" ? "button" : void 0,
+      "aria-busy": props.loading || void 0
+    },
+    /* @__PURE__ */ React.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React.createElement(LabelTag, { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon })) : null),
+    props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
+    ch && !props.loading || props.caption ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-stat__change", "is-" + tone) }, /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        name: dir === "up" ? /* @__PURE__ */ React.createElement(IconTrendingUp, null) : dir === "down" ? /* @__PURE__ */ React.createElement(IconTrendingDown, null) : /* @__PURE__ */ React.createElement(IconMinus, null),
+        size: 14
+      }
+    ), /* @__PURE__ */ React.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__caption" }, props.caption) : null) : null
+  );
+}
+const AVATAR_TONES = ["progress", "ready", "neutral", "warning"];
+function initials(name) {
+  const parts = String(name || "?").trim().split(/\s+/);
+  return ((parts[0] || "?")[0] + (parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] || "")).toUpperCase();
+}
+function avatarElement(props, ref, broken, onError) {
+  const size = props.size || "md";
+  let hash = 0;
+  String(props.name || "").split("").forEach(function(ch) {
+    hash = hash * 31 + ch.charCodeAt(0) >>> 0;
+  });
+  const tone = AVATAR_TONES[hash % AVATAR_TONES.length];
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ref,
+      className: cx("aura-avatar", "aura-avatar--" + size, "aura-avatar--" + tone, props.className),
+      role: "img",
+      "aria-label": props.name + (props.status ? ", " + props.status : "")
+    },
+    props.src && broken !== props.src ? /* @__PURE__ */ React.createElement("img", { key: props.src, src: props.src, alt: "", onError }) : /* @__PURE__ */ React.createElement("span", { "aria-hidden": true }, initials(props.name)),
+    props.status === "online" ? /* @__PURE__ */ React.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
+  );
+}
 function buttonClass(opts = {}) {
   return cx(
     "aura-btn",
     "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
   );
@@ -158,17 +226,27 @@ function ServerBadge(props) {
 function ServerEmptyState(props) {
   return emptyStateElement(props, void 0);
 }
+function ServerStat(props) {
+  return statElement(omit(props, ["onClick"]), void 0, props.linkComponent || "a");
+}
+function ServerAvatar(props) {
+  return avatarElement(props, void 0, null, void 0);
+}
 export {
   ALERT_ICON,
   ServerAlert,
+  ServerAvatar,
   ServerBadge,
   ServerCard,
   ServerEmptyState,
+  ServerStat,
   ServerStatusPill,
   alertElement,
+  avatarElement,
   badgeElement,
   buttonClass,
   cardElement,
   emptyStateElement,
+  statElement,
   statusPillElement
 };

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,13 @@ 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;
 }
 export interface NavItem {
 	id: string;
@@ -710,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;
@@ -953,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>>;
@@ -996,6 +1040,8 @@ export interface AppShellProps {
 	/** A BottomNav for phones (4.19). Shown below its `hideFrom` breakpoint; the content keeps room for it, and a
 	 * viewport ActionBar sits on top of it. With a `bottomNav` and no `nav`, there is no menu button. */
 	bottomNav?: React$1.ReactElement | undefined;
+	/** `false` (5.14): `<main>` has no padding, for pages whose containers own the page padding and column. */
+	contentPadding?: boolean | undefined;
 	className?: string | undefined;
 }
 export interface SeparatorProps {
@@ -1022,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;
 }
@@ -1122,6 +1172,9 @@ export interface StatProps {
 	/** Makes the whole card a link or a button (drill-down). */
 	href?: string | undefined;
 	onClick?: (() => void) | undefined;
+	/** The label as a heading of this level (5.14), when the tile titles its section. Not with `onClick` (a heading
+	 * can't sit in a button); a link is fine. Default: a plain label. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
 	className?: string | undefined;
 }
 export interface TimePickerProps extends FieldProps {
@@ -1205,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;
@@ -1232,7 +1288,9 @@ export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElem
 	/** `danger` (5.13) for a failure — the data couldn't load: the danger tint, a danger-coloured icon, and a solid
 	 * danger frame with `bordered`. It stays quiet; pass `role="alert"` if it must interrupt. Default `neutral`. */
 	tone?: "neutral" | "danger" | undefined;
-	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** The title's heading level (default 3); `false` (5.14) makes it a paragraph, for a card or list whose outline
+	 * mustn't change. EmptyState has no live-region role unless you pass `role`. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | false | undefined;
 	className?: string | undefined;
 }
 export interface PaginationProps {
@@ -1419,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>>;
@@ -1602,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,13 @@ 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;
 }
 export interface NavItem {
 	id: string;
@@ -710,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;
@@ -953,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>>;
@@ -996,6 +1040,8 @@ export interface AppShellProps {
 	/** A BottomNav for phones (4.19). Shown below its `hideFrom` breakpoint; the content keeps room for it, and a
 	 * viewport ActionBar sits on top of it. With a `bottomNav` and no `nav`, there is no menu button. */
 	bottomNav?: React$1.ReactElement | undefined;
+	/** `false` (5.14): `<main>` has no padding, for pages whose containers own the page padding and column. */
+	contentPadding?: boolean | undefined;
 	className?: string | undefined;
 }
 export interface SeparatorProps {
@@ -1022,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;
 }
@@ -1122,6 +1172,9 @@ export interface StatProps {
 	/** Makes the whole card a link or a button (drill-down). */
 	href?: string | undefined;
 	onClick?: (() => void) | undefined;
+	/** The label as a heading of this level (5.14), when the tile titles its section. Not with `onClick` (a heading
+	 * can't sit in a button); a link is fine. Default: a plain label. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
 	className?: string | undefined;
 }
 export interface TimePickerProps extends FieldProps {
@@ -1205,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;
@@ -1232,7 +1288,9 @@ export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElem
 	/** `danger` (5.13) for a failure — the data couldn't load: the danger tint, a danger-coloured icon, and a solid
 	 * danger frame with `bordered`. It stays quiet; pass `role="alert"` if it must interrupt. Default `neutral`. */
 	tone?: "neutral" | "danger" | undefined;
-	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** The title's heading level (default 3); `false` (5.14) makes it a paragraph, for a card or list whose outline
+	 * mustn't change. EmptyState has no live-region role unless you pass `role`. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | false | undefined;
 	className?: string | undefined;
 }
 export interface PaginationProps {
@@ -1419,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>>;
@@ -1602,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`. */