@jirawatpyk/aura-react 5.11.0 → 5.13.0

package/dist/index.d.cts

@@ -89,6 +89,13 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	hideBelow?: number | "sm" | "md" | "lg" | "xl" | undefined;
 	/** Row actions (a DropdownMenu or IconButton). In stacked cards it sits top-right instead of in the field list. Give it an empty label. */
 	actions?: boolean | undefined;
+	/** Its place in a stacked card (5.13): `'hide'` leaves it out of the card (the grid keeps it), `'title'` / `'pill'`
+	 * make it the card's title or the pill beside it (instead of the first column / first pill column), `'field'` a
+	 * label/value field. Default: today's rule. */
+	card?: "hide" | "field" | "title" | "pill" | undefined;
+	/** The order of fields in a stacked card (5.13), lowest first; the grid's column order is unchanged. Fields
+	 * without one sort by their column index (0-based). Screen readers and arrow keys follow the grid's order. */
+	cardOrder?: number | undefined;
 	/** `end` right-aligns header and cells (amounts, counts) and uses tabular figures. Default `start`. */
 	align?: "start" | "end" | undefined;
 }
@@ -178,6 +185,9 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
 	height?: number | undefined;
+	/** Stacked cards (`stackBelow`) without the row checkboxes and the select-all box (5.13). The grid keeps them and
+	 * the selection is kept; Space doesn't change it while the cards show. */
+	hideSelectionInCards?: boolean | undefined;
 	/** `'auto'` (5.11): rows grow to fit content that wraps (two badges, a long name); cells stay vertically centred and
 	 * rows keep at least the density's row height. Needs every row in the DOM, so it is ignored with `height`
 	 * (virtualized rows are one fixed height). Default: one fixed-height line per row, long text ends in an ellipsis. */
@@ -387,6 +397,7 @@ export interface FilterBarProps {
 	onSearchChange?: ((value: string) => void) | undefined;
 	/** ms to wait after the last keystroke. Default 300. */
 	searchDelay?: number | undefined;
+	/** The search field's name. Default "Search". */
 	searchLabel?: string | undefined;
 	searchPlaceholder?: string | undefined;
 	/** Filter controls beside the search: Select, SegmentedControl, a Popover of options… */
@@ -401,6 +412,9 @@ export interface FilterBarProps {
 	actions?: React$1.ReactNode | undefined;
 	/** Accessible name of the region. Default "Filters". */
 	label?: string | undefined;
+	/** 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;
 	className?: string | undefined;
 }
 /** One command in the palette. */
@@ -467,6 +481,20 @@ export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.Sel
 	placeholder?: string | undefined;
 	icon?: IconInput | undefined;
 }
+/** A compact filter for FilterBar (5.12): "Status All ▾", as wide as its words. */
+export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value" | "defaultValue" | "multiple" | "size" | "placeholder" | "required" | "children"> {
+	/** The filter's name: shown first on the face ("Status") and its accessible name. */
+	label: string;
+	/** The choices; the first is the "all" choice. Or pass `<option>` children. */
+	options?: SelectOption[] | undefined;
+	children?: React$1.ReactNode | undefined;
+	value?: string | undefined;
+	defaultValue?: string | undefined;
+	onChange?: ((value: string) => void) | undefined;
+	/** A shorter word the face shows while the first option is chosen ("All" for "All statuses"). The list and screen
+	 * readers keep the option's own text. */
+	allLabel?: string | undefined;
+}
 export type ChoiceOption = string | {
 	value: string;
 	label: string;
@@ -979,7 +1007,7 @@ export interface SeparatorProps {
 	spacing?: 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
 	className?: string | undefined;
 }
-export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className"> {
+export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className" | "align"> {
 	/** The table's name (a `<caption>`). Give every table one; `captionHidden` keeps it for screen readers only. */
 	caption?: React$1.ReactNode | undefined;
 	captionHidden?: boolean | undefined;
@@ -989,6 +1017,11 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	 * cell shows its column's header as a label: a `Td`'s `label`, else the text of the matching `Th` in `THead`.
 	 * Done in CSS (a container query), so the server's HTML is already right; table semantics are kept. */
 	stackBelow?: "sm" | "md" | undefined;
+	/** `middle` centres every body and footer cell on its row (5.13); default `top`, so wrapped text starts level. */
+	align?: "top" | "middle" | undefined;
+	/** `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;
 	className?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 }
@@ -1009,6 +1042,10 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 	scope?: "col" | "row" | "colgroup" | "rowgroup" | undefined;
 	/** The label this cell shows when its table is stacked (`stackBelow`, 5.8). Default: the matching header's text. */
 	label?: string | undefined;
+	/** Its place in a stacked row (5.13), on a Td or a row header (`Th scope="row"`). `title` takes the first line,
+	 * without a label; `action` sits at the end of that line at its natural size; `field` (default) is a labelled field,
+	 * two to a line under them. */
+	card?: "title" | "action" | "field" | undefined;
 	className?: string | undefined;
 }
 export interface ActionBarProps {
@@ -1184,7 +1221,7 @@ export interface SkeletonProps {
 	size?: number | undefined;
 	className?: string | undefined;
 }
-export interface EmptyStateProps {
+export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
 	icon?: IconInput | undefined;
@@ -1192,6 +1229,9 @@ export interface EmptyStateProps {
 	action?: React$1.ReactNode | undefined;
 	size?: "sm" | "md" | undefined;
 	bordered?: boolean | undefined;
+	/** `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;
 	className?: string | undefined;
 }
@@ -1338,6 +1378,9 @@ export declare const TextField: React$1.ForwardRefExoticComponent<TextFieldProps
 export declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 /** A select field: a button that opens an AURA list (5.3), over a real <select> that keeps forms, refs and events. */
 export declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.RefAttributes<HTMLSelectElement>>;
+/** A compact filter for FilterBar (5.12): a small button reading "Status All ▾" that opens Select's list. The name
+ * is the accessible name, the chosen option its value; forms, refs and the keyboard work as in Select. */
+export declare const FilterSelect: React$1.ForwardRefExoticComponent<FilterSelectProps & React$1.RefAttributes<HTMLSelectElement>>;
 export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** One value, or with `multiple` any number (chips). Two call signatures so value/onChange are typed for each. */

package/dist/index.d.ts

@@ -89,6 +89,13 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	hideBelow?: number | "sm" | "md" | "lg" | "xl" | undefined;
 	/** Row actions (a DropdownMenu or IconButton). In stacked cards it sits top-right instead of in the field list. Give it an empty label. */
 	actions?: boolean | undefined;
+	/** Its place in a stacked card (5.13): `'hide'` leaves it out of the card (the grid keeps it), `'title'` / `'pill'`
+	 * make it the card's title or the pill beside it (instead of the first column / first pill column), `'field'` a
+	 * label/value field. Default: today's rule. */
+	card?: "hide" | "field" | "title" | "pill" | undefined;
+	/** The order of fields in a stacked card (5.13), lowest first; the grid's column order is unchanged. Fields
+	 * without one sort by their column index (0-based). Screen readers and arrow keys follow the grid's order. */
+	cardOrder?: number | undefined;
 	/** `end` right-aligns header and cells (amounts, counts) and uses tabular figures. Default `start`. */
 	align?: "start" | "end" | undefined;
 }
@@ -178,6 +185,9 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
 	height?: number | undefined;
+	/** Stacked cards (`stackBelow`) without the row checkboxes and the select-all box (5.13). The grid keeps them and
+	 * the selection is kept; Space doesn't change it while the cards show. */
+	hideSelectionInCards?: boolean | undefined;
 	/** `'auto'` (5.11): rows grow to fit content that wraps (two badges, a long name); cells stay vertically centred and
 	 * rows keep at least the density's row height. Needs every row in the DOM, so it is ignored with `height`
 	 * (virtualized rows are one fixed height). Default: one fixed-height line per row, long text ends in an ellipsis. */
@@ -387,6 +397,7 @@ export interface FilterBarProps {
 	onSearchChange?: ((value: string) => void) | undefined;
 	/** ms to wait after the last keystroke. Default 300. */
 	searchDelay?: number | undefined;
+	/** The search field's name. Default "Search". */
 	searchLabel?: string | undefined;
 	searchPlaceholder?: string | undefined;
 	/** Filter controls beside the search: Select, SegmentedControl, a Popover of options… */
@@ -401,6 +412,9 @@ export interface FilterBarProps {
 	actions?: React$1.ReactNode | undefined;
 	/** Accessible name of the region. Default "Filters". */
 	label?: string | undefined;
+	/** 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;
 	className?: string | undefined;
 }
 /** One command in the palette. */
@@ -467,6 +481,20 @@ export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.Sel
 	placeholder?: string | undefined;
 	icon?: IconInput | undefined;
 }
+/** A compact filter for FilterBar (5.12): "Status All ▾", as wide as its words. */
+export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value" | "defaultValue" | "multiple" | "size" | "placeholder" | "required" | "children"> {
+	/** The filter's name: shown first on the face ("Status") and its accessible name. */
+	label: string;
+	/** The choices; the first is the "all" choice. Or pass `<option>` children. */
+	options?: SelectOption[] | undefined;
+	children?: React$1.ReactNode | undefined;
+	value?: string | undefined;
+	defaultValue?: string | undefined;
+	onChange?: ((value: string) => void) | undefined;
+	/** A shorter word the face shows while the first option is chosen ("All" for "All statuses"). The list and screen
+	 * readers keep the option's own text. */
+	allLabel?: string | undefined;
+}
 export type ChoiceOption = string | {
 	value: string;
 	label: string;
@@ -979,7 +1007,7 @@ export interface SeparatorProps {
 	spacing?: 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
 	className?: string | undefined;
 }
-export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className"> {
+export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className" | "align"> {
 	/** The table's name (a `<caption>`). Give every table one; `captionHidden` keeps it for screen readers only. */
 	caption?: React$1.ReactNode | undefined;
 	captionHidden?: boolean | undefined;
@@ -989,6 +1017,11 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	 * cell shows its column's header as a label: a `Td`'s `label`, else the text of the matching `Th` in `THead`.
 	 * Done in CSS (a container query), so the server's HTML is already right; table semantics are kept. */
 	stackBelow?: "sm" | "md" | undefined;
+	/** `middle` centres every body and footer cell on its row (5.13); default `top`, so wrapped text starts level. */
+	align?: "top" | "middle" | undefined;
+	/** `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;
 	className?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 }
@@ -1009,6 +1042,10 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 	scope?: "col" | "row" | "colgroup" | "rowgroup" | undefined;
 	/** The label this cell shows when its table is stacked (`stackBelow`, 5.8). Default: the matching header's text. */
 	label?: string | undefined;
+	/** Its place in a stacked row (5.13), on a Td or a row header (`Th scope="row"`). `title` takes the first line,
+	 * without a label; `action` sits at the end of that line at its natural size; `field` (default) is a labelled field,
+	 * two to a line under them. */
+	card?: "title" | "action" | "field" | undefined;
 	className?: string | undefined;
 }
 export interface ActionBarProps {
@@ -1184,7 +1221,7 @@ export interface SkeletonProps {
 	size?: number | undefined;
 	className?: string | undefined;
 }
-export interface EmptyStateProps {
+export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
 	icon?: IconInput | undefined;
@@ -1192,6 +1229,9 @@ export interface EmptyStateProps {
 	action?: React$1.ReactNode | undefined;
 	size?: "sm" | "md" | undefined;
 	bordered?: boolean | undefined;
+	/** `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;
 	className?: string | undefined;
 }
@@ -1338,6 +1378,9 @@ export declare const TextField: React$1.ForwardRefExoticComponent<TextFieldProps
 export declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 /** A select field: a button that opens an AURA list (5.3), over a real <select> that keeps forms, refs and events. */
 export declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.RefAttributes<HTMLSelectElement>>;
+/** A compact filter for FilterBar (5.12): a small button reading "Status All ▾" that opens Select's list. The name
+ * is the accessible name, the chosen option its value; forms, refs and the keyboard work as in Select. */
+export declare const FilterSelect: React$1.ForwardRefExoticComponent<FilterSelectProps & React$1.RefAttributes<HTMLSelectElement>>;
 export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** One value, or with `multiple` any number (chips). Two call signatures so value/onChange are typed for each. */

package/dist/server/index.cjs

@@ -1148,11 +1148,30 @@ function badgeElement(props, ref) {
 }
 function emptyStateElement(props, ref) {
   const HT = "h" + (props.headingLevel || 3);
+  const rest = omit(props, [
+    "title",
+    "description",
+    "icon",
+    "action",
+    "size",
+    "bordered",
+    "headingLevel",
+    "tone",
+    "className",
+    "children"
+  ]);
   return /* @__PURE__ */ React3.createElement(
     "div",
     {
+      ...rest,
       ref,
-      className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
+      className: cx(
+        "aura-empty",
+        props.size === "sm" && "is-sm",
+        props.bordered && "is-bordered",
+        props.tone === "danger" && "is-danger",
+        props.className
+      )
     },
     /* @__PURE__ */ React3.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React3.createElement(Icon, { name: props.icon || /* @__PURE__ */ React3.createElement(IconInbox, null), size: props.size === "sm" ? "md" : "lg" })),
     /* @__PURE__ */ React3.createElement(HT, { className: "aura-empty__title" }, props.title),

package/dist/server/index.d.cts

@@ -96,7 +96,7 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	variant?: "soft" | "solid" | "outline" | undefined;
 	icon?: IconInput | undefined;
 }
-export interface EmptyStateProps {
+export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
 	icon?: IconInput | undefined;
@@ -104,6 +104,9 @@ export interface EmptyStateProps {
 	action?: React$1.ReactNode | undefined;
 	size?: "sm" | "md" | undefined;
 	bordered?: boolean | undefined;
+	/** `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;
 	className?: string | undefined;
 }

package/dist/server/index.d.ts

@@ -96,7 +96,7 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	variant?: "soft" | "solid" | "outline" | undefined;
 	icon?: IconInput | undefined;
 }
-export interface EmptyStateProps {
+export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
 	icon?: IconInput | undefined;
@@ -104,6 +104,9 @@ export interface EmptyStateProps {
 	action?: React$1.ReactNode | undefined;
 	size?: "sm" | "md" | undefined;
 	bordered?: boolean | undefined;
+	/** `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;
 	className?: string | undefined;
 }

package/dist/server/index.js

@@ -1091,11 +1091,30 @@ function badgeElement(props, ref) {
 }
 function emptyStateElement(props, ref) {
   const HT = "h" + (props.headingLevel || 3);
+  const rest = omit(props, [
+    "title",
+    "description",
+    "icon",
+    "action",
+    "size",
+    "bordered",
+    "headingLevel",
+    "tone",
+    "className",
+    "children"
+  ]);
   return /* @__PURE__ */ React3.createElement(
     "div",
     {
+      ...rest,
       ref,
-      className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
+      className: cx(
+        "aura-empty",
+        props.size === "sm" && "is-sm",
+        props.bordered && "is-bordered",
+        props.tone === "danger" && "is-danger",
+        props.className
+      )
     },
     /* @__PURE__ */ React3.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React3.createElement(Icon, { name: props.icon || /* @__PURE__ */ React3.createElement(IconInbox, null), size: props.size === "sm" ? "md" : "lg" })),
     /* @__PURE__ */ React3.createElement(HT, { className: "aura-empty__title" }, props.title),

package/dist/styles.css

@@ -1083,6 +1083,10 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-empty__title { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
 .aura-empty__text { margin: 0; max-width: 44ch; font-size: 14px; line-height: 1.6; color: var(--aura-fg-secondary); }
 .aura-empty__action { margin-top: var(--aura-space-3); display: flex; gap: var(--aura-space-3); flex-wrap: wrap; justify-content: center; }
+/* 5.13 (Chamber-OS 82): tone="danger" — a load failure. */
+.aura-empty.is-danger { background: var(--aura-alert-danger-bg); border-radius: var(--aura-radius-lg); }
+.aura-empty.is-danger.is-bordered { border: 1px solid var(--aura-border-danger); }
+.aura-empty.is-danger .aura-empty__icon { background: var(--aura-bg-surface); color: var(--aura-fg-danger); }
 
 /* ---------- Pagination ---------- */
 .aura-pagination { display: flex; align-items: center; gap: var(--aura-space-1); font-family: var(--font-sans); font-size: 13px; }
@@ -1363,6 +1367,37 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-filterbar__search { flex-basis: 100%; max-width: none; }
   .aura-filterbar__spacer { display: none; }
 }
+/* 5.12 searchGrow: the search fills what the controls leave. */
+.aura-filterbar--grow .aura-filterbar__search { max-width: none; }
+.aura-filterbar--grow .aura-filterbar__search ~ .aura-filterbar__spacer { display: none; }
+/* Compact filters sit closer together than full fields. */
+.aura-filterbar__controls:has(> .aura-filterselect) { gap: var(--aura-space-2); }
+
+/* 5.12 FilterSelect: a compact face — "Status All ▾" — as wide as its words, over Select's machinery and list. */
+.aura-filterselect { position: relative; display: inline-flex; width: fit-content; max-width: 100%; vertical-align: middle; font-family: var(--font-sans); }
+.aura-filterselect__face {
+  box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--aura-space-1); width: auto; max-width: 100%;
+  min-height: var(--aura-input-height); padding-block: 0; padding-inline: var(--aura-space-2) var(--aura-space-1);
+  background: var(--aura-bg-input); color: var(--aura-fg-primary);
+  border: 1px solid var(--aura-border-control); border-radius: var(--aura-radius-md);
+  font: inherit; font-size: 13px; line-height: 18px; text-align: start; cursor: pointer;
+  transition: border-color var(--aura-duration-fast) var(--aura-ease);
+}
+.aura-filterselect__face:hover { border-color: var(--aura-fg-secondary); }
+.aura-filterselect__name { flex: none; white-space: nowrap; color: var(--aura-fg-secondary); }
+.aura-filterselect__value { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
+.aura-filterselect__chevron { flex: none; width: 14px; height: 14px; color: var(--aura-fg-secondary); }
+.aura-filterselect.is-open .aura-filterselect__chevron { transform: rotate(180deg); }
+.aura-filterselect__face:focus-visible, .aura-filterselect:has(.aura-filterselect__native:focus-visible) .aura-filterselect__face {
+  outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong);
+}
+.aura-filterselect__face:focus { outline-style: none; }
+.aura-filterselect__face:focus-visible { outline-style: solid; }
+/* Before hydration: the real <select>, invisible, over the face (16px so iOS doesn't zoom when it opens). */
+.aura-filterselect__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; appearance: none; }
+.aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); cursor: not-allowed; }
+.aura-filterselect.is-disabled .aura-filterselect__native { cursor: not-allowed; }
+@media (forced-colors: active) { .aura-filterselect__face { border-color: ButtonText; } }
 
 /* Command palette: a search field over a grouped list, above everything else (it can open from a Dialog) */
 .aura-dialog-layer.aura-command-layer { z-index: var(--aura-z-menu); align-items: flex-start; padding: 12vh var(--aura-space-4) var(--aura-space-4); }
@@ -1517,6 +1552,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl .is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
 .aura-tbl-wrap[data-density='compact'] .aura-tbl__th, .aura-tbl-wrap[data-density='compact'] .aura-tbl__td { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
 .aura-tbl-wrap:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
+/* 5.13 (Chamber-OS 81): align="middle" centres body and footer cells on their row; bordered={false} drops the frame and
+ * the outer cells' side padding, so the table lines up with what's around it (a Card's heading). */
+.aura-tbl--middle > .aura-tbl__body > .aura-tbl__row > *, .aura-tbl--middle > .aura-tbl__foot > .aura-tbl__row > * { vertical-align: middle; }
+.aura-tbl-wrap.is-flush { border: 0; border-radius: 0; background: transparent; }
+.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: 0; }
+.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: 0; }
+.aura-tbl-wrap.is-flush > .aura-tbl > .aura-tbl__caption { padding-inline: 0; }
 /* Stacked rows (5.8, Chamber-OS 67): below `stackBelow` (the table's own box: sm 640px, md 768px) each body row is a
  * card and each cell shows its column label. The column headers stay for screen readers (visually hidden) and the
  * table keeps explicit roles. The box is a size container, so it needs a width of its own. */
@@ -1531,6 +1573,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-md > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
   .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row > .aura-tbl__th { font-size: 14px; font-weight: 600; }
+  /* 5.13 (Chamber-OS 84): a row with a title or action cell — title and action share the first line, fields two to a line under them. */
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--aura-space-4); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card])::after { content: ''; order: 3; flex: 0 0 100%; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > * { order: 4; flex: 0 0 calc(50% - var(--aura-space-4) / 2); min-width: 0; margin-top: var(--aura-space-2); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card] { margin-top: 0; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='action'] { order: 2; flex: none; margin-inline-start: auto; }
+  .aura-tbl-wrap.is-flush > .aura-tbl--stack-md > .aura-tbl__caption { padding-inline: var(--aura-space-4); }
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
@@ -1546,6 +1596,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-sm > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
   .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row > .aura-tbl__th { font-size: 14px; font-weight: 600; }
+  /* 5.13 (Chamber-OS 84): a row with a title or action cell — title and action share the first line, fields two to a line under them. */
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--aura-space-4); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card])::after { content: ''; order: 3; flex: 0 0 100%; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > * { order: 4; flex: 0 0 calc(50% - var(--aura-space-4) / 2); min-width: 0; margin-top: var(--aura-space-2); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card] { margin-top: 0; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='action'] { order: 2; flex: none; margin-inline-start: auto; }
+  .aura-tbl-wrap.is-flush > .aura-tbl--stack-sm > .aura-tbl__caption { padding-inline: var(--aura-space-4); }
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
@@ -1598,6 +1656,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding: 0; line-height: normal;
   }
   .aura-table__td[data-hide], .aura-table__head > .aura-table__th[data-hide] { display: block; }
+  /* 5.13 (Chamber-OS 80): card: 'hide' leaves a column out of the card; cardOrder orders the fields. */
+  .aura-table__td[data-card='hide'], .aura-table__head > .aura-table__th[data-card='hide'],
+  .aura-table__row--skeleton .aura-table__td[data-card='hide'] { display: none; }
+  .aura-table__td[data-card='field'] { order: var(--aura-card-order, 5); }
+  /* hideSelectionInCards: no row boxes, no select-all line. */
+  .aura-table--cards-nosel .aura-table__row > .aura-table__sel { display: none; }
+  .aura-table--cards-nosel .aura-table__head { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
+  .aura-table--cards-nosel .aura-table__head > .aura-table__sel { display: none; }
   /* 5.11: rowHeight="auto" leaves cards as they are. */
   .aura-table__td--auto { display: block; white-space: nowrap; }
   .aura-table__td--auto .aura-table__cell > .aura-badge, .aura-table__td--auto .aura-table__cell > .aura-pill { margin: 0; }

package/dist/styles.layer.css

@@ -1085,6 +1085,10 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-empty__title { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
 .aura-empty__text { margin: 0; max-width: 44ch; font-size: 14px; line-height: 1.6; color: var(--aura-fg-secondary); }
 .aura-empty__action { margin-top: var(--aura-space-3); display: flex; gap: var(--aura-space-3); flex-wrap: wrap; justify-content: center; }
+/* 5.13 (Chamber-OS 82): tone="danger" — a load failure. */
+.aura-empty.is-danger { background: var(--aura-alert-danger-bg); border-radius: var(--aura-radius-lg); }
+.aura-empty.is-danger.is-bordered { border: 1px solid var(--aura-border-danger); }
+.aura-empty.is-danger .aura-empty__icon { background: var(--aura-bg-surface); color: var(--aura-fg-danger); }
 
 /* ---------- Pagination ---------- */
 .aura-pagination { display: flex; align-items: center; gap: var(--aura-space-1); font-family: var(--font-sans); font-size: 13px; }
@@ -1365,6 +1369,37 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-filterbar__search { flex-basis: 100%; max-width: none; }
   .aura-filterbar__spacer { display: none; }
 }
+/* 5.12 searchGrow: the search fills what the controls leave. */
+.aura-filterbar--grow .aura-filterbar__search { max-width: none; }
+.aura-filterbar--grow .aura-filterbar__search ~ .aura-filterbar__spacer { display: none; }
+/* Compact filters sit closer together than full fields. */
+.aura-filterbar__controls:has(> .aura-filterselect) { gap: var(--aura-space-2); }
+
+/* 5.12 FilterSelect: a compact face — "Status All ▾" — as wide as its words, over Select's machinery and list. */
+.aura-filterselect { position: relative; display: inline-flex; width: fit-content; max-width: 100%; vertical-align: middle; font-family: var(--font-sans); }
+.aura-filterselect__face {
+  box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--aura-space-1); width: auto; max-width: 100%;
+  min-height: var(--aura-input-height); padding-block: 0; padding-inline: var(--aura-space-2) var(--aura-space-1);
+  background: var(--aura-bg-input); color: var(--aura-fg-primary);
+  border: 1px solid var(--aura-border-control); border-radius: var(--aura-radius-md);
+  font: inherit; font-size: 13px; line-height: 18px; text-align: start; cursor: pointer;
+  transition: border-color var(--aura-duration-fast) var(--aura-ease);
+}
+.aura-filterselect__face:hover { border-color: var(--aura-fg-secondary); }
+.aura-filterselect__name { flex: none; white-space: nowrap; color: var(--aura-fg-secondary); }
+.aura-filterselect__value { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
+.aura-filterselect__chevron { flex: none; width: 14px; height: 14px; color: var(--aura-fg-secondary); }
+.aura-filterselect.is-open .aura-filterselect__chevron { transform: rotate(180deg); }
+.aura-filterselect__face:focus-visible, .aura-filterselect:has(.aura-filterselect__native:focus-visible) .aura-filterselect__face {
+  outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong);
+}
+.aura-filterselect__face:focus { outline-style: none; }
+.aura-filterselect__face:focus-visible { outline-style: solid; }
+/* Before hydration: the real <select>, invisible, over the face (16px so iOS doesn't zoom when it opens). */
+.aura-filterselect__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; appearance: none; }
+.aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); cursor: not-allowed; }
+.aura-filterselect.is-disabled .aura-filterselect__native { cursor: not-allowed; }
+@media (forced-colors: active) { .aura-filterselect__face { border-color: ButtonText; } }
 
 /* Command palette: a search field over a grouped list, above everything else (it can open from a Dialog) */
 .aura-dialog-layer.aura-command-layer { z-index: var(--aura-z-menu); align-items: flex-start; padding: 12vh var(--aura-space-4) var(--aura-space-4); }
@@ -1519,6 +1554,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl .is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
 .aura-tbl-wrap[data-density='compact'] .aura-tbl__th, .aura-tbl-wrap[data-density='compact'] .aura-tbl__td { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
 .aura-tbl-wrap:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
+/* 5.13 (Chamber-OS 81): align="middle" centres body and footer cells on their row; bordered={false} drops the frame and
+ * the outer cells' side padding, so the table lines up with what's around it (a Card's heading). */
+.aura-tbl--middle > .aura-tbl__body > .aura-tbl__row > *, .aura-tbl--middle > .aura-tbl__foot > .aura-tbl__row > * { vertical-align: middle; }
+.aura-tbl-wrap.is-flush { border: 0; border-radius: 0; background: transparent; }
+.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: 0; }
+.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: 0; }
+.aura-tbl-wrap.is-flush > .aura-tbl > .aura-tbl__caption { padding-inline: 0; }
 /* Stacked rows (5.8, Chamber-OS 67): below `stackBelow` (the table's own box: sm 640px, md 768px) each body row is a
  * card and each cell shows its column label. The column headers stay for screen readers (visually hidden) and the
  * table keeps explicit roles. The box is a size container, so it needs a width of its own. */
@@ -1533,6 +1575,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-md > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
   .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row > .aura-tbl__th { font-size: 14px; font-weight: 600; }
+  /* 5.13 (Chamber-OS 84): a row with a title or action cell — title and action share the first line, fields two to a line under them. */
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--aura-space-4); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card])::after { content: ''; order: 3; flex: 0 0 100%; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > * { order: 4; flex: 0 0 calc(50% - var(--aura-space-4) / 2); min-width: 0; margin-top: var(--aura-space-2); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card] { margin-top: 0; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='action'] { order: 2; flex: none; margin-inline-start: auto; }
+  .aura-tbl-wrap.is-flush > .aura-tbl--stack-md > .aura-tbl__caption { padding-inline: var(--aura-space-4); }
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
@@ -1548,6 +1598,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
   .aura-tbl--stack-sm > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
   .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row > .aura-tbl__th { font-size: 14px; font-weight: 600; }
+  /* 5.13 (Chamber-OS 84): a row with a title or action cell — title and action share the first line, fields two to a line under them. */
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--aura-space-4); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card])::after { content: ''; order: 3; flex: 0 0 100%; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > * { order: 4; flex: 0 0 calc(50% - var(--aura-space-4) / 2); min-width: 0; margin-top: var(--aura-space-2); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card] { margin-top: 0; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row:has(> [data-card]) > [data-card='action'] { order: 2; flex: none; margin-inline-start: auto; }
+  .aura-tbl-wrap.is-flush > .aura-tbl--stack-sm > .aura-tbl__caption { padding-inline: var(--aura-space-4); }
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
@@ -1600,6 +1658,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding: 0; line-height: normal;
   }
   .aura-table__td[data-hide], .aura-table__head > .aura-table__th[data-hide] { display: block; }
+  /* 5.13 (Chamber-OS 80): card: 'hide' leaves a column out of the card; cardOrder orders the fields. */
+  .aura-table__td[data-card='hide'], .aura-table__head > .aura-table__th[data-card='hide'],
+  .aura-table__row--skeleton .aura-table__td[data-card='hide'] { display: none; }
+  .aura-table__td[data-card='field'] { order: var(--aura-card-order, 5); }
+  /* hideSelectionInCards: no row boxes, no select-all line. */
+  .aura-table--cards-nosel .aura-table__row > .aura-table__sel { display: none; }
+  .aura-table--cards-nosel .aura-table__head { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
+  .aura-table--cards-nosel .aura-table__head > .aura-table__sel { display: none; }
   /* 5.11: rowHeight="auto" leaves cards as they are. */
   .aura-table__td--auto { display: block; white-space: nowrap; }
   .aura-table__td--auto .aura-table__cell > .aura-badge, .aura-table__td--auto .aura-table__cell > .aura-pill { margin: 0; }

package/package.json

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