@jirawatpyk/aura-react 5.15.0 → 5.16.1

package/dist/index.d.cts

@@ -47,6 +47,15 @@ export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLA
 	/** 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;
@@ -149,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' }`.
@@ -606,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;
@@ -706,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<{
@@ -731,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;
@@ -790,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;
@@ -802,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;
@@ -825,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 (฿, %). */
@@ -973,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. */
@@ -1509,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>>;

package/dist/index.d.ts

@@ -47,6 +47,15 @@ export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLA
 	/** 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;
@@ -149,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' }`.
@@ -606,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;
@@ -706,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<{
@@ -731,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;
@@ -790,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;
@@ -802,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;
@@ -825,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 (฿, %). */
@@ -973,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. */
@@ -1509,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>>;

package/dist/styles.css

@@ -464,7 +464,11 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-field.is-invalid .aura-input, .aura-field.is-invalid .aura-textarea { border-color: var(--aura-border-danger); }
 .aura-field.is-disabled .aura-input { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); }
 .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
-.aura-input:has(.aura-input__control:read-only:not(select)) { background: var(--aura-bg-input-disabled); }
+/* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
+ * Select's trigger <button> — which painted every custom Select with the disabled ground (5.16.1, Chamber-OS 109). */
+.aura-input:has(input.aura-input__control:read-only) { background: var(--aura-bg-input-disabled); }
+/* A read-only Textarea looks like a read-only TextField (it is its own .aura-input, so the rule above can't reach it). */
+.aura-textarea:read-only:not(:disabled) { background: var(--aura-bg-input-disabled); }
 
 .aura-textarea { display: block; padding: 10px var(--aura-space-3); min-height: 96px; line-height: 1.6; resize: vertical; outline: none; }
 .aura-textarea:focus { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong); }
@@ -685,7 +689,7 @@ a.aura-tab { text-decoration: none; }
   background: var(--aura-bg-canvas); border-right: 1px solid var(--aura-border-default);
   font-family: var(--font-sans); color: var(--aura-fg-primary);
 }
-.aura-nav__header { padding: var(--aura-space-5) var(--aura-space-4) var(--aura-space-4); }
+.aura-nav__header { padding: var(--aura-space-5) var(--aura-space-4) var(--aura-space-4); padding-inline-end: var(--aura-space-2); } /* 5.16 (Chamber-OS 96): 8px at the end, so a brand, its dot and a badge share one row at 240px */
 .aura-nav__scroll { flex: 1; overflow-y: auto; padding: 0 var(--aura-space-3); }
 /* No header: keep the first item off the top edge (5.0.2). */
 .aura-nav > .aura-nav__scroll:first-child { padding-top: var(--aura-space-3); }
@@ -722,6 +726,10 @@ a.aura-tab { text-decoration: none; }
 .aura-nav__item--group.has-active { color: var(--aura-fg-primary); }
 .aura-nav__chevron { color: var(--aura-fg-secondary); transition: transform var(--aura-duration-fast) var(--aura-ease); }
 .aura-nav__chevron.is-open { transform: rotate(180deg); }
+/* 5.16 (Chamber-OS 96): chevron="right" — right when closed, down when open (left when closed in right-to-left). */
+.aura-nav--chevron-right .aura-nav__chevron { transform: rotate(-90deg); }
+.aura-nav--chevron-right .aura-nav__chevron.is-open { transform: none; }
+[dir='rtl'] .aura-nav--chevron-right .aura-nav__chevron:not(.is-open), .aura-nav--chevron-right[dir='rtl'] .aura-nav__chevron:not(.is-open) { transform: rotate(90deg); }
 .aura-nav__sub { margin-top: 2px; }
 .aura-nav__sub[hidden] { display: none; }
 .aura-nav__footer { padding: var(--aura-space-3); border-top: 1px solid var(--aura-border-default); }
@@ -832,6 +840,11 @@ a.aura-tab { text-decoration: none; }
 .aura-combo__desc { font-size: 12px; line-height: 1.5; color: var(--aura-fg-secondary); }
 /* Same specificity as `.aura-combo__option > .aura-icon` above and later in the file, so it wins by order (4.18). */
 .aura-combo__option > .aura-combo__check { color: var(--aura-fg-accent); }
+/* 5.16 (Chamber-OS 105): option groups under a heading. */
+.aura-combo__group { list-style: none; }
+.aura-combo__group + .aura-combo__group, .aura-combo__option + .aura-combo__group { margin-top: var(--aura-space-1); padding-top: var(--aura-space-1); border-top: 1px solid var(--aura-border-subtle); }
+.aura-combo__group-label { display: block; padding: var(--aura-space-2) var(--aura-space-2) var(--aura-space-1); font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--aura-fg-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
+.aura-combo__grouplist { list-style: none; margin: 0; padding: 0; }
 .aura-combo__note { display: flex; align-items: center; gap: var(--aura-space-2); padding: var(--aura-space-3) var(--aura-space-2); font-size: 13px; color: var(--aura-fg-secondary); }
 
 /* ---------- DatePicker / Calendar ---------- */

package/dist/styles.layer.css

@@ -466,7 +466,11 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-field.is-invalid .aura-input, .aura-field.is-invalid .aura-textarea { border-color: var(--aura-border-danger); }
 .aura-field.is-disabled .aura-input { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); }
 .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
-.aura-input:has(.aura-input__control:read-only:not(select)) { background: var(--aura-bg-input-disabled); }
+/* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
+ * Select's trigger <button> — which painted every custom Select with the disabled ground (5.16.1, Chamber-OS 109). */
+.aura-input:has(input.aura-input__control:read-only) { background: var(--aura-bg-input-disabled); }
+/* A read-only Textarea looks like a read-only TextField (it is its own .aura-input, so the rule above can't reach it). */
+.aura-textarea:read-only:not(:disabled) { background: var(--aura-bg-input-disabled); }
 
 .aura-textarea { display: block; padding: 10px var(--aura-space-3); min-height: 96px; line-height: 1.6; resize: vertical; outline: none; }
 .aura-textarea:focus { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong); }
@@ -687,7 +691,7 @@ a.aura-tab { text-decoration: none; }
   background: var(--aura-bg-canvas); border-right: 1px solid var(--aura-border-default);
   font-family: var(--font-sans); color: var(--aura-fg-primary);
 }
-.aura-nav__header { padding: var(--aura-space-5) var(--aura-space-4) var(--aura-space-4); }
+.aura-nav__header { padding: var(--aura-space-5) var(--aura-space-4) var(--aura-space-4); padding-inline-end: var(--aura-space-2); } /* 5.16 (Chamber-OS 96): 8px at the end, so a brand, its dot and a badge share one row at 240px */
 .aura-nav__scroll { flex: 1; overflow-y: auto; padding: 0 var(--aura-space-3); }
 /* No header: keep the first item off the top edge (5.0.2). */
 .aura-nav > .aura-nav__scroll:first-child { padding-top: var(--aura-space-3); }
@@ -724,6 +728,10 @@ a.aura-tab { text-decoration: none; }
 .aura-nav__item--group.has-active { color: var(--aura-fg-primary); }
 .aura-nav__chevron { color: var(--aura-fg-secondary); transition: transform var(--aura-duration-fast) var(--aura-ease); }
 .aura-nav__chevron.is-open { transform: rotate(180deg); }
+/* 5.16 (Chamber-OS 96): chevron="right" — right when closed, down when open (left when closed in right-to-left). */
+.aura-nav--chevron-right .aura-nav__chevron { transform: rotate(-90deg); }
+.aura-nav--chevron-right .aura-nav__chevron.is-open { transform: none; }
+[dir='rtl'] .aura-nav--chevron-right .aura-nav__chevron:not(.is-open), .aura-nav--chevron-right[dir='rtl'] .aura-nav__chevron:not(.is-open) { transform: rotate(90deg); }
 .aura-nav__sub { margin-top: 2px; }
 .aura-nav__sub[hidden] { display: none; }
 .aura-nav__footer { padding: var(--aura-space-3); border-top: 1px solid var(--aura-border-default); }
@@ -834,6 +842,11 @@ a.aura-tab { text-decoration: none; }
 .aura-combo__desc { font-size: 12px; line-height: 1.5; color: var(--aura-fg-secondary); }
 /* Same specificity as `.aura-combo__option > .aura-icon` above and later in the file, so it wins by order (4.18). */
 .aura-combo__option > .aura-combo__check { color: var(--aura-fg-accent); }
+/* 5.16 (Chamber-OS 105): option groups under a heading. */
+.aura-combo__group { list-style: none; }
+.aura-combo__group + .aura-combo__group, .aura-combo__option + .aura-combo__group { margin-top: var(--aura-space-1); padding-top: var(--aura-space-1); border-top: 1px solid var(--aura-border-subtle); }
+.aura-combo__group-label { display: block; padding: var(--aura-space-2) var(--aura-space-2) var(--aura-space-1); font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--aura-fg-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
+.aura-combo__grouplist { list-style: none; margin: 0; padding: 0; }
 .aura-combo__note { display: flex; align-items: center; gap: var(--aura-space-2); padding: var(--aura-space-3) var(--aura-space-2); font-size: 13px; color: var(--aura-fg-secondary); }
 
 /* ---------- DatePicker / Calendar ---------- */

package/package.json

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