@jirawatpyk/aura-react 5.14.0 → 5.16.0

package/dist/esm/FilterBar.js

@@ -55,7 +55,13 @@ const FilterBar = React.forwardRef(function FilterBar2(props, ref) {
       ref,
       role: "region",
       "aria-label": props.label || t.filters,
-      className: cx("aura-filterbar", props.searchGrow && "aura-filterbar--grow", props.className)
+      className: cx(
+        "aura-filterbar",
+        props.searchGrow && "aura-filterbar--grow",
+        props.controlsLayout === "fill" && "aura-filterbar--fill",
+        props.stackBelow === "lg" && "aura-filterbar--stack-lg",
+        props.className
+      )
     },
     /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__row" }, hasSearch ? /* @__PURE__ */ React.createElement("div", { className: "aura-input has-icon aura-filterbar__search" }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconSearch, null), className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
       "input",

package/dist/esm/IconButton.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cx, omit } from "./internal.js";
 import { Icon } from "./Icon.js";
 const IconButton = React.forwardRef(function IconButton2(props, ref) {
-  const rest = omit(props, ["icon", "label", "className", "size", "tone"]);
+  const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight"]);
   return /* @__PURE__ */ React.createElement(
     "button",
     {
@@ -12,7 +12,12 @@ const IconButton = React.forwardRef(function IconButton2(props, ref) {
       type: props.type || "button",
       "aria-label": props.label,
       title: props.label,
-      className: cx("aura-icon-btn", props.tone === "danger" && "aura-icon-btn--danger", props.className)
+      className: cx(
+        "aura-icon-btn",
+        props.tone === "danger" && "aura-icon-btn--danger",
+        props.touchHeight && "aura-icon-btn--touch",
+        props.className
+      )
     },
     /* @__PURE__ */ React.createElement(Icon, { name: props.icon, size: props.size || "sm" })
   );

package/dist/esm/Progress.js

@@ -1,10 +1,15 @@
 'use client';
 import * as React from "react";
 import { cx, tone, uid } from "./internal.js";
+import { useStrings } from "./locale.js";
 const Progress = React.forwardRef(function Progress2(props, ref) {
+  const t = useStrings();
   const auto = uid(), id = props.id || auto;
   const max = props.max || 100, det = props.value != null;
   const pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
+  const sec = det && props.secondaryValue != null && props.secondaryValue > 0 ? props.secondaryValue : 0;
+  const spct = sec ? Math.max(0, Math.min(100 - pct, sec / max * 100)) : 0;
+  const valueText = props.valueLabel != null ? String(props.valueLabel) : sec ? t.progressReserved(props.value, sec, max) : void 0;
   const shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
   return /* @__PURE__ */ React.createElement(
     "div",
@@ -28,9 +33,16 @@ const Progress = React.forwardRef(function Progress2(props, ref) {
         "aria-valuemin": det ? 0 : void 0,
         "aria-valuemax": det ? max : void 0,
         "aria-valuenow": det ? props.value : void 0,
-        "aria-valuetext": det && props.valueLabel != null ? String(props.valueLabel) : void 0
+        "aria-valuetext": det ? valueText : void 0
       },
-      /* @__PURE__ */ React.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 })
+      /* @__PURE__ */ React.createElement("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 }),
+      sec ? /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: "aura-progress__bar aura-progress__bar--reserved",
+          style: { left: pct + "%", width: spct + "%" }
+        }
+      ) : null
     ),
     props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-progress__hint" }, props.hint) : null
   );

package/dist/esm/SideNav.js

@@ -147,16 +147,19 @@ const SideNav = React.forwardRef(function SideNav2(props, ref) {
         return item(c, depth + 1);
       })));
     }
-    const on = active === it.id;
+    const action = it.selectable === false;
+    const on = !action && active === it.id;
     const common = {
       ...tipHandlers(it.label),
-      className: cx("aura-nav__item", on && "is-active"),
+      className: cx("aura-nav__item", action && "aura-nav__item--action", on && "is-active"),
       "aria-current": on ? "page" : void 0,
       style: depth ? { ["--aura-nav-depth"]: depth } : void 0,
       onClick: function(e) {
         if (!it.href) e.preventDefault();
         else if (!plainClick(e)) return;
-        st[1](it.id);
+        if (!action) st[1](it.id);
+        if (it.onSelect) it.onSelect();
+        if (action && props.onAction) props.onAction(it.id);
       }
     };
     return /* @__PURE__ */ React.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React.createElement(Link, { href: it.href, ...common }, inner(it, false, false)) : /* @__PURE__ */ React.createElement("button", { type: "button", ...common }, inner(it, false, false)));
@@ -173,6 +176,7 @@ const SideNav = React.forwardRef(function SideNav2(props, ref) {
         "aura-nav",
         collapsed && "aura-nav--collapsed",
         props.bordered === false && "aura-nav--borderless",
+        props.chevron === "right" && "aura-nav--chevron-right",
         props.className
       ),
       "data-collapsed": collapsed ? "" : void 0,
@@ -186,7 +190,20 @@ const SideNav = React.forwardRef(function SideNav2(props, ref) {
       })));
     })),
     props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__footer" }, props.footer) : null,
-    props.collapsible ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__toggle" }, /* @__PURE__ */ React.createElement(
+    props.collapsible && props.collapseToggle === "row" ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__toggle aura-nav__toggle--row" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "aura-nav__item aura-nav__item--action",
+        ...tipHandlers(collapsed ? t.expandNav : t.collapseNav),
+        onClick: function() {
+          setTip(null);
+          col[1](!collapsed);
+        }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: collapsed ? /* @__PURE__ */ React.createElement(IconPanelLeftOpen, null) : /* @__PURE__ */ React.createElement(IconPanelLeftClose, null) }),
+      /* @__PURE__ */ React.createElement("span", { className: "aura-nav__label" }, collapsed ? t.expandNav : t.collapseNav)
+    )) : props.collapsible ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__toggle" }, /* @__PURE__ */ React.createElement(
       IconButton,
       {
         icon: collapsed ? /* @__PURE__ */ React.createElement(IconPanelLeftOpen, null) : /* @__PURE__ */ React.createElement(IconPanelLeftClose, null),

package/dist/esm/Table.js

@@ -47,7 +47,8 @@ function headerLabels(children) {
   return out;
 }
 const Table = React.forwardRef(function Table2(props, ref) {
-  const { caption, captionHidden, density, stackBelow, align, bordered, className, children, ...rest } = props;
+  const { caption, captionHidden, density, stackBelow, align, bordered, stackStyle, className, children, ...rest } = props;
+  const cards = !!stackBelow && stackStyle === "cards";
   const labels = stackBelow ? headerLabels(children) : null;
   if (labels && !labels.length)
     devWarnOnce(
@@ -71,7 +72,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
       ro.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ React.createElement(
+  const table = /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: wrap,
@@ -90,6 +91,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
           "aura-tbl",
           stackBelow && "aura-tbl--stack-" + stackBelow,
           align === "middle" && "aura-tbl--middle",
+          cards && "aura-tbl--cards",
           className
         ),
         role: stackBelow ? "table" : void 0,
@@ -99,6 +101,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
       labels ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: labels }, children) : outer ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: null }, children) : children
     )
   );
+  return cards ? /* @__PURE__ */ React.createElement("div", { className: "aura-tbl-cards aura-tbl-cards--" + stackBelow }, table) : table;
 });
 function section(tag, cls) {
   const C = React.forwardRef(function TableSection(props, ref) {

package/dist/esm/Tabs.js

@@ -24,7 +24,13 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const Link = useLinkComponent(props.linkComponent);
   const manual = props.activation === "manual";
   const seg = props.variant === "segmented";
-  const listCls = cx("aura-tabs__list", seg && "aura-segmented", seg && props.fullWidth && "is-full");
+  const fw = props.fullWidth;
+  const listCls = cx(
+    "aura-tabs__list",
+    seg && "aura-segmented",
+    fw === true && (seg ? "is-full" : "is-fill"),
+    typeof fw === "string" && (seg ? "is-full-" : "is-fill-") + fw
+  );
   const tabCls = function(on, extra) {
     return cx("aura-tab", on && "is-active", seg && "aura-segmented__option", seg && on && "is-selected", extra);
   };

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/index.js

@@ -23,7 +23,7 @@ import { FormErrorSummary } from "./FormErrorSummary.js";
 import { FilterBar } from "./FilterBar.js";
 import { Command } from "./Command.js";
 import { Tooltip } from "./Tooltip.js";
-import { Dialog, Drawer } from "./Dialog.js";
+import { Dialog, Drawer, useDialogClose } from "./Dialog.js";
 import { DataTable } from "./DataTable.js";
 import { Card } from "./Card.js";
 import { buttonClass } from "./display.js";
@@ -148,6 +148,7 @@ export {
   useBreakpoint,
   useColorScheme,
   useDensity,
+  useDialogClose,
   useFormatDate,
   useResponsive
 };

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/esm/useModal.js

@@ -28,6 +28,8 @@ function useModal(open, ref, opts) {
   const mounted = useMounted();
   const prev = React.useRef(null);
   const o = opts || {};
+  const latest = React.useRef(o);
+  latest.current = o;
   React.useEffect(
     function() {
       if (!open || !mounted) return;
@@ -48,7 +50,12 @@ function useModal(open, ref, opts) {
       if (target && o.autoFocus !== false) target.focus();
       return function() {
         unlock();
-        if (prev.current && prev.current.focus) prev.current.focus();
+        const l = latest.current;
+        const ff = l.finalFocus;
+        const to = ff ? typeof ff === "function" ? ff() : ff.current : null;
+        const back = to && to.isConnected ? to : prev.current;
+        if (back && back.focus) back.focus();
+        if (l.onCloseComplete) l.onCloseComplete();
       };
     },
     [open, mounted]

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,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`. */