@jirawatpyk/aura-react 5.28.0 → 5.30.0

package/dist/esm/classes.js

@@ -8,6 +8,9 @@ function omit(src, keys) {
       out[k] = src[k];
   return out;
 }
+function touchClass(t) {
+  return t === "always" ? "is-touch-always" : !!t && "is-touch";
+}
 const TONES = ["neutral", "accent", "success", "warning", "danger"];
 function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
@@ -29,5 +32,6 @@ export {
   cx,
   devWarnOnce,
   omit,
-  tone
+  tone,
+  touchClass
 };

package/dist/esm/internal.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { cx, omit, tone, devWarnOnce } from "./classes.js";
+import { cx, omit, tone, devWarnOnce, touchClass } from "./classes.js";
 function useMaybeControlled(value, initial, onChange) {
   const s = React.useState(initial);
   const wasSet = React.useState(value !== void 0);
@@ -89,6 +89,7 @@ export {
   omit,
   plainClick,
   tone,
+  touchClass,
   trapTab,
   uid,
   useIsoLayoutEffect,

package/dist/index.d.cts

@@ -114,6 +114,14 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	 * after the half-width fields (in column order; `cardOrder` doesn't move it), its label above and its text wrapping —
 	 * a reason with its evidence. Default: today's rule. The grid is unchanged by any of them. */
 	card?: "hide" | "field" | "title" | "pill" | "footer" | "wide" | undefined;
+	/** How many text lines its loading skeleton draws (5.29, Chamber-OS 134) — 2 for a cell that shows two lines (a
+	 * reason and its evidence), so the skeleton row is as tall as the real one with `rowHeight="auto"`. Default 1, at
+	 * most 10; ignored on a `pill` column. */
+	skeletonLines?: number | undefined;
+	/** For a `card: 'footer'` or `actions` column whose buttons use `touchHeight` (5.29, Chamber-OS 134): its loading
+	 * skeleton's bar is 44px below 640px and on a coarse pointer, as those buttons are. Without it the bar is the small
+	 * button's 32px. */
+	skeletonTouch?: boolean | 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;
@@ -327,6 +335,9 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 		x: number;
 		y: number;
 	} | undefined;
+	/** A labelled checkbox's row is 44px (5.30, Chamber-OS 135), the one-line label centred: `true` below 640px or on a
+	 * coarse pointer, `'always'` at every width. A bare box (no visible label) uses `hitArea` instead. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** 32px round button holding one icon. */
 export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -385,6 +396,8 @@ export interface MenuProps {
 	 * accessible description, read once when the menu opens. */
 	header?: React$1.ReactNode | undefined;
 }
+/** `true`: 44px below 640px or on a coarse pointer; `'always'`: 44px at every width (5.30). */
+export type TouchHeight = boolean | "always";
 export interface FieldProps {
 	/** Visible label; also the accessible name. */
 	label: string;
@@ -402,6 +415,10 @@ export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttrib
 	icon?: IconInput | undefined;
 	/** Trailing unit, e.g. "THB". */
 	suffix?: React$1.ReactNode | undefined;
+	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
+	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
+	 * Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** A password input with a show/hide button. All TextField props; `ref` reaches the input (react-hook-form `register`). */
 export interface PasswordFieldProps extends Omit<TextFieldProps, "type" | "suffix"> {
@@ -523,6 +540,9 @@ export interface CommandProps {
 	className?: string | undefined;
 }
 export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
+	/** Accepted like the other fields' (5.30, Chamber-OS 135), so a form can pass it to every field. A Textarea is
+	 * always at least 96px tall, well over the 44px target, so it changes nothing you can see. */
+	touchHeight?: TouchHeight | undefined;
 }
 export type SelectOption = string | {
 	value: string;
@@ -544,6 +564,10 @@ export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.Sel
 	 * option on the read-only ground, with no chevron; no click or key opens the list. The value is still submitted
 	 * with the form (unlike `disabled`). Before JavaScript runs, the other options from `options` are disabled. */
 	readOnly?: boolean | undefined;
+	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
+	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
+	 * Default: the density's input height. */
+	touchHeight?: TouchHeight | 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"> {
@@ -578,6 +602,9 @@ export interface RadioGroupProps extends FieldProps {
 	disabled?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
+	/** 44px rows (5.30, Chamber-OS 135), the one-line label centred: `true` below 640px or on a coarse pointer (touch
+	 * screens already get it), `'always'` at every width, also with a mouse. Default: as tall as the control and label. */
+	touchHeight?: TouchHeight | undefined;
 }
 export interface SwitchProps {
 	label?: string | undefined;

package/dist/index.d.ts

@@ -114,6 +114,14 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	 * after the half-width fields (in column order; `cardOrder` doesn't move it), its label above and its text wrapping —
 	 * a reason with its evidence. Default: today's rule. The grid is unchanged by any of them. */
 	card?: "hide" | "field" | "title" | "pill" | "footer" | "wide" | undefined;
+	/** How many text lines its loading skeleton draws (5.29, Chamber-OS 134) — 2 for a cell that shows two lines (a
+	 * reason and its evidence), so the skeleton row is as tall as the real one with `rowHeight="auto"`. Default 1, at
+	 * most 10; ignored on a `pill` column. */
+	skeletonLines?: number | undefined;
+	/** For a `card: 'footer'` or `actions` column whose buttons use `touchHeight` (5.29, Chamber-OS 134): its loading
+	 * skeleton's bar is 44px below 640px and on a coarse pointer, as those buttons are. Without it the bar is the small
+	 * button's 32px. */
+	skeletonTouch?: boolean | 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;
@@ -327,6 +335,9 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 		x: number;
 		y: number;
 	} | undefined;
+	/** A labelled checkbox's row is 44px (5.30, Chamber-OS 135), the one-line label centred: `true` below 640px or on a
+	 * coarse pointer, `'always'` at every width. A bare box (no visible label) uses `hitArea` instead. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** 32px round button holding one icon. */
 export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -385,6 +396,8 @@ export interface MenuProps {
 	 * accessible description, read once when the menu opens. */
 	header?: React$1.ReactNode | undefined;
 }
+/** `true`: 44px below 640px or on a coarse pointer; `'always'`: 44px at every width (5.30). */
+export type TouchHeight = boolean | "always";
 export interface FieldProps {
 	/** Visible label; also the accessible name. */
 	label: string;
@@ -402,6 +415,10 @@ export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttrib
 	icon?: IconInput | undefined;
 	/** Trailing unit, e.g. "THB". */
 	suffix?: React$1.ReactNode | undefined;
+	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
+	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
+	 * Default: the density's input height. */
+	touchHeight?: TouchHeight | undefined;
 }
 /** A password input with a show/hide button. All TextField props; `ref` reaches the input (react-hook-form `register`). */
 export interface PasswordFieldProps extends Omit<TextFieldProps, "type" | "suffix"> {
@@ -523,6 +540,9 @@ export interface CommandProps {
 	className?: string | undefined;
 }
 export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
+	/** Accepted like the other fields' (5.30, Chamber-OS 135), so a form can pass it to every field. A Textarea is
+	 * always at least 96px tall, well over the 44px target, so it changes nothing you can see. */
+	touchHeight?: TouchHeight | undefined;
 }
 export type SelectOption = string | {
 	value: string;
@@ -544,6 +564,10 @@ export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.Sel
 	 * option on the read-only ground, with no chevron; no click or key opens the list. The value is still submitted
 	 * with the form (unlike `disabled`). Before JavaScript runs, the other options from `options` are disabled. */
 	readOnly?: boolean | undefined;
+	/** 44px box (5.30, Chamber-OS 135): `true` below 640px or on a coarse pointer, as Button's `touchHeight`; `'always'`
+	 * at every width, also with a mouse in compact density — for a form whose spec asks for 44px targets everywhere.
+	 * Default: the density's input height. */
+	touchHeight?: TouchHeight | 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"> {
@@ -578,6 +602,9 @@ export interface RadioGroupProps extends FieldProps {
 	disabled?: boolean | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
+	/** 44px rows (5.30, Chamber-OS 135), the one-line label centred: `true` below 640px or on a coarse pointer (touch
+	 * screens already get it), `'always'` at every width, also with a mouse. Default: as tall as the control and label. */
+	touchHeight?: TouchHeight | undefined;
 }
 export interface SwitchProps {
 	label?: string | undefined;

package/dist/styles.css

@@ -12,7 +12,7 @@
   border: 0;
   background: transparent;
   color: inherit;
-  font-family: inherit;
+  font-family: var(--font-sans); /* 5.30: not inherit — a trigger outside a styled root fell back to Arial */
   font-size: 13px;
   font-weight: 500;
   line-height: 1;
@@ -44,6 +44,19 @@ button.aura-btn--secondary[aria-disabled='true']:hover, button.aura-btn--ghost[a
 button.aura-btn--danger-secondary[aria-disabled='true']:hover { background: transparent; }
 button.aura-btn--danger[aria-disabled='true']:hover { background: var(--aura-button-danger-bg); }
 button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-shadow-creative); transform: none; }
+/* 5.30: a disabled filled button (primary, danger, creative) is a quiet grey fill with muted text, not a faded copy of
+ * itself — faded ink read as a separate grey button, faded red as pink. Outline and ghost buttons keep the fade. */
+.aura-btn:is(.aura-btn--primary, .aura-btn--danger, .aura-btn--creative):is(:disabled, [aria-disabled='true']:not(.is-loading)),
+.aura-btn:is(.aura-btn--primary, .aura-btn--danger, .aura-btn--creative):is(:disabled, [aria-disabled='true']:not(.is-loading)):hover {
+  opacity: 1; background: var(--aura-button-disabled-bg); color: var(--aura-button-disabled-fg); border-color: transparent; box-shadow: none;
+}
+/* Forced colours drop the fills: filled buttons get a 1px edge (as outline buttons have), and a disabled or gated one
+ * (still focusable) shows GrayText and keeps the fade, without changing size. */
+@media (forced-colors: active) {
+  .aura-btn:is(.aura-btn--primary, .aura-btn--danger) { border: 1px solid ButtonText; }
+  .aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)),
+  .aura-btn.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)):hover { color: GrayText; border-color: GrayText; opacity: var(--aura-disabled-opacity); }
+}
 .aura-btn.is-loading:active { transform: none; }
 
 /* Focus — ADDED: the source defines none. Solid 2px ring, 2px offset, on every interactive element. */
@@ -93,10 +106,17 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   color: var(--aura-fg-primary);
 }
 .aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; height: var(--aura-table-h, auto); }
+/* 5.30: more columns past the end edge — a soft shadow over the grid's end edge (not over its scrollbars, its footer
+ * or the column button), so it reads as scrolling sideways. JavaScript places it (top, height, scrollbar inset). */
+.aura-table__edge {
+  position: absolute; z-index: 4; inset-inline-end: var(--aura-edge-sb, 0px); top: var(--aura-edge-top, 0px); height: var(--aura-edge-h, 0px);
+  width: 16px; pointer-events: none; background: linear-gradient(to left, var(--aura-scroll-shadow), transparent);
+}
+.aura-table__edge:dir(rtl) { background: linear-gradient(to right, var(--aura-scroll-shadow), transparent); }
 .aura-table__head {
   position: sticky; top: 0; z-index: 3; box-sizing: border-box;   /* the hairline is inside the row height */
   display: flex; height: var(--aura-table-row-height); min-width: var(--aura-row-min, 0);
-  background: var(--aura-bg-canvas);
+  background: var(--aura-table-head-bg);
   border-bottom: 1px solid var(--aura-border-default);
   font-family: var(--font-mono); font-size: 12px; color: var(--aura-fg-secondary);
 }
@@ -169,7 +189,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
 .aura-table__gutter--end { position: static; }
 .aura-table__picker {
   position: absolute; top: 0; right: 0; z-index: 5; width: var(--aura-space-12); height: calc(var(--aura-table-row-height) - 1px);
-  display: flex; align-items: center; justify-content: center; background: var(--aura-bg-canvas); border-top-right-radius: calc(var(--aura-card-radius) - 1px);
+  display: flex; align-items: center; justify-content: center; background: var(--aura-table-head-bg); border-top-right-radius: calc(var(--aura-card-radius) - 1px);
 }
 .aura-table__gutter--end.has-picker {
   width: var(--aura-space-12); position: sticky; left: auto; right: 0;
@@ -270,7 +290,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   display: inline-flex; align-items: center; justify-content: center;
   border: 1.5px solid var(--aura-border-control); border-radius: var(--aura-radius-xs);
 }
-.aura-menu__check.is-on { background: var(--aura-button-primary-bg); border-color: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
+.aura-menu__check.is-on { background: var(--aura-control-checked-bg); border-color: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); }
 .aura-menu__check.is-on .aura-icon { color: inherit; }
 .aura-menu__item--danger, .aura-menu__item--danger .aura-icon { color: var(--aura-fg-danger); }
 .aura-menu__item--danger:hover, .aura-menu__item--danger:focus { background: var(--aura-alert-danger-bg); color: var(--aura-alert-danger-fg); }
@@ -280,8 +300,8 @@ a.aura-menu__item { text-decoration: none; box-sizing: border-box; }
   flex: none; box-sizing: border-box; width: 16px; height: 16px; border-radius: var(--aura-radius-full);
   border: 1px solid var(--aura-border-control); display: inline-flex; align-items: center; justify-content: center;
 }
-.aura-menu__radio.is-on { border-color: var(--aura-button-primary-bg); }
-.aura-menu__radio.is-on::after { content: ''; width: 8px; height: 8px; border-radius: var(--aura-radius-full); background: var(--aura-button-primary-bg); }
+.aura-menu__radio.is-on { border-color: var(--aura-control-checked-bg); }
+.aura-menu__radio.is-on::after { content: ''; width: 8px; height: 8px; border-radius: var(--aura-radius-full); background: var(--aura-control-checked-bg); }
 /* 5.7: a header above the items (who is signed in), set off by a hairline like a separator. */
 .aura-menu__header { margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-1)) var(--aura-space-1); padding: var(--aura-space-3); border-bottom: 1px solid var(--aura-border-default); color: var(--aura-fg-secondary); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
 .aura-menu__header > * { margin: 0; }
@@ -338,6 +358,16 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-skel--pill { width: 72px; height: 20px; }
 .aura-skel--box { width: var(--aura-icon-sm); height: var(--aura-icon-sm); border-radius: var(--aura-radius-xs); }
 @media (prefers-reduced-motion: reduce) { .aura-skel { animation: none; } }
+/* 5.29 (Chamber-OS 134): a DataTable skeleton row stands in for the real one — text lines (skeletonLines) on the 20px
+ * line, and a button-height bar where row actions go: 32px, or 44px under the touchHeight rule with the column's
+ * skeletonTouch; full width in a card footer. */
+.aura-skel--action { flex: none; width: var(--aura-button-height-sm); height: var(--aura-button-height-sm); border-radius: var(--aura-button-radius); } /* 5.30: the button's own shape */
+.aura-skel--action.is-footer { width: 100%; }
+.aura-table__td.is-end > .aura-skel-lines { align-items: flex-end; }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-skel--action.is-touch { height: var(--aura-touch-target); }
+  .aura-skel--action.is-touch:not(.is-footer) { width: var(--aura-touch-target); }
+}
 .aura-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 
 /* Empty state */
@@ -363,12 +393,12 @@ a.aura-icon-btn { text-decoration: none; }
   box-sizing: border-box; width: 100%; height: 100%;
   display: inline-flex; align-items: center; justify-content: center;
   border: 1.5px solid var(--aura-border-control); border-radius: var(--aura-radius-xs);
-  background: var(--aura-bg-surface); color: var(--aura-button-primary-fg);
+  background: var(--aura-bg-surface); color: var(--aura-control-checked-fg);
   transition: background var(--aura-duration-fast) var(--aura-ease), border-color var(--aura-duration-fast) var(--aura-ease);
   pointer-events: none;
 }
 .aura-check__input:checked + .aura-check__box,
-.aura-check__input:indeterminate + .aura-check__box { background: var(--aura-button-primary-bg); border-color: var(--aura-button-primary-bg); }
+.aura-check__input:indeterminate + .aura-check__box { background: var(--aura-control-checked-bg); border-color: var(--aura-control-checked-bg); }
 .aura-check__input:focus-visible + .aura-check__box { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-table__mono { font-family: var(--font-mono); }
 
@@ -381,6 +411,7 @@ a.aura-icon-btn { text-decoration: none; }
   border-radius: var(--aura-radius-full);
   padding: 2px var(--aura-space-2) 2px 6px;
   font-size: 11px;
+  font-weight: 500; /* 5.30 (Chamber-OS 137): medium everywhere, not the parent's weight; Badge stays 600 */
   line-height: 16px;
   white-space: nowrap;
   background: var(--aura-status-neutral-bg);
@@ -511,30 +542,31 @@ a.aura-icon-btn { text-decoration: none; }
   border: 1.5px solid var(--aura-border-control); background: var(--aura-bg-input); cursor: inherit;
   transition: border-width var(--aura-duration-fast) var(--aura-ease);
 }
-.aura-radio:checked { border: 5px solid var(--aura-button-primary-bg); background: var(--aura-button-primary-fg); }
+.aura-radio:checked { border: 5px solid var(--aura-control-checked-bg); background: var(--aura-control-checked-fg); }
 .aura-radio:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-radio-group.is-invalid .aura-radio:not(:checked) { border-color: var(--aura-border-danger); }
 
 .aura-switch-row { display: flex; align-items: flex-start; gap: var(--aura-space-3); font-family: var(--font-sans); }
 /* 5.10.1: disabled rows, on or off, are treated alike and stay readable — the label turns secondary, the description
- * keeps its colour (often the reason it's locked) — and only the switch fades: off to the disabled opacity, on to 0.75,
+ * keeps its colour (often the reason it's locked) — and only the switch fades: off to the disabled opacity, on keeps its track and fades its thumb (5.30: the violet track at 0.75 fell under 3:1),
  * ≥3:1 apart in both themes, so "locked on" never looks like "off". */
 .aura-switch-row.is-disabled { cursor: not-allowed; }
 .aura-switch-row.is-disabled .aura-choice__label { color: var(--aura-fg-secondary); cursor: not-allowed; }
 .aura-switch:disabled { opacity: var(--aura-disabled-opacity); }
-.aura-switch.is-on:disabled { opacity: 0.75; }
+.aura-switch.is-on:disabled { opacity: 1; } /* 5.30: the violet track stays whole (faded, it fell under 3:1 from off)… */
+.aura-switch.is-on:disabled .aura-switch__thumb { opacity: 0.6; } /* …and the thumb fades, so it doesn't look enabled */
 .aura-switch {
   position: relative; flex: none; box-sizing: border-box; margin: 0; padding: 0;
   width: var(--aura-switch-width); height: var(--aura-switch-height); border-radius: var(--aura-radius-full);
   border: 0; background: var(--aura-border-control); cursor: pointer;
   transition: background var(--aura-duration-fast) var(--aura-ease);
 }
-.aura-switch.is-on { background: var(--aura-button-primary-bg); }
+.aura-switch.is-on { background: var(--aura-control-checked-bg); }
 .aura-switch__thumb {
   position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: var(--aura-radius-full);
   background: var(--aura-bg-surface); transition: transform var(--aura-duration-fast) var(--aura-ease);
 }
-.aura-switch.is-on .aura-switch__thumb { transform: translateX(16px); background: var(--aura-button-primary-fg); }
+.aura-switch.is-on .aura-switch__thumb { transform: translateX(16px); background: var(--aura-control-checked-fg); }
 .aura-switch:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-switch:disabled { cursor: not-allowed; }
 /* 5.19 (Chamber-OS 113): a read-only switch keeps its colours (a locked "on" reads as on at full contrast) and stays
@@ -707,7 +739,7 @@ a.aura-icon-btn { text-decoration: none; }
   transition: color var(--aura-duration-fast) var(--aura-ease), border-color var(--aura-duration-fast) var(--aura-ease);
 }
 .aura-tab:hover { color: var(--aura-fg-primary); }
-.aura-tab.is-active { color: var(--aura-fg-primary); border-bottom-color: var(--aura-fg-primary); }
+.aura-tab.is-active { color: var(--aura-fg-primary); border-bottom-color: var(--aura-control-checked-bg); }
 .aura-tab:disabled, .aura-tab.is-disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
 a.aura-tab { text-decoration: none; }
 .aura-tab:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -4px; border-radius: var(--aura-radius-xs); }
@@ -914,7 +946,7 @@ a.aura-tab { text-decoration: none; }
 .aura-cal__day:hover { background: var(--aura-bg-surface-hover); }
 .aura-cal__day.is-outside { color: var(--aura-fg-tertiary); }
 .aura-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--aura-border-control); font-weight: 600; }
-.aura-cal__day.is-selected { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); box-shadow: none; }
+.aura-cal__day.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); box-shadow: none; }
 .aura-cal__day:disabled, .aura-cal__day[aria-disabled='true'] { opacity: var(--aura-disabled-opacity); cursor: not-allowed; background: transparent; text-decoration: line-through; }
 .aura-cal__day:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; }
 .aura-cal__grid td.is-in-range { background: var(--aura-bg-selected); }
@@ -927,7 +959,7 @@ a.aura-tab { text-decoration: none; }
   font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
 }
 .aura-cal__year:hover { background: var(--aura-bg-surface-hover); }
-.aura-cal__year.is-selected { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
+.aura-cal__year.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); }
 .aura-cal__foot { display: flex; justify-content: space-between; margin-top: var(--aura-space-2); padding-top: var(--aura-space-2); border-top: 1px solid var(--aura-border-subtle); }
 .aura-cal__link {
   height: var(--aura-control-sm); padding: 0 var(--aura-space-2); border: 0; border-radius: var(--aura-radius-sm);
@@ -1041,8 +1073,10 @@ a.aura-tab { text-decoration: none; }
 .aura-shell__content:not(.is-flush) > .aura-container { padding-left: 0; padding-right: 0; }
 
 /* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
-.aura-table__total { background: var(--aura-bg-canvas); border-top: 1px solid var(--aura-border-strong); font-weight: 600; }
-.aura-table__total.is-sticky { position: sticky; bottom: 0; z-index: 3; }
+/* 5.30: a 2px hairline-colour rule over the totals (border-strong was a glaring white line in dark); a pinned totals row
+ * casts a soft shadow over the rows scrolling under it. */
+.aura-table__total { background: var(--aura-table-head-bg); border-top: 2px solid var(--aura-border-default); font-weight: 600; }
+.aura-table__total.is-sticky { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -6px 8px -6px var(--aura-scroll-shadow); }
 .aura-table__total .aura-table__td.is-end { font-variant-numeric: tabular-nums; }
 .aura-tooltip--above { transform: translateY(-100%); max-width: min(var(--aura-tooltip-max), 90vw); white-space: normal; }
 
@@ -1135,7 +1169,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-badge {
   display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 var(--aura-space-2); box-sizing: border-box;
   border-radius: var(--aura-radius-full); border: 1px solid transparent; font-family: var(--font-sans); font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
-  background: var(--aura-bg-surface-hover); color: var(--aura-fg-secondary);
+  background: var(--aura-status-neutral-bg); color: var(--aura-status-neutral-fg); /* 5.30: surface-hover vanished on the light canvas */
 }
 .aura-badge--accent { background: var(--aura-alert-info-bg); color: var(--aura-alert-info-fg); }
 .aura-badge--success { background: var(--aura-alert-success-bg); color: var(--aura-alert-success-fg); }
@@ -1198,7 +1232,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--aura-space-2); padding: var(--aura-space-12) var(--aura-space-6); font-family: var(--font-sans); color: var(--aura-fg-primary); }
 .aura-empty.is-sm { padding: var(--aura-space-6) var(--aura-space-4); }
 .aura-empty.is-bordered { border: 1px dashed var(--aura-border-control); border-radius: var(--aura-radius-lg); }
-.aura-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--aura-space-2); border-radius: var(--aura-radius-full); background: var(--aura-bg-surface-hover); color: var(--aura-fg-secondary); }
+.aura-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--aura-space-2); border-radius: var(--aura-radius-full); background: var(--aura-status-neutral-bg); color: var(--aura-fg-secondary); }
 .aura-empty.is-sm .aura-empty__icon { width: 36px; height: 36px; }
 .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); }
@@ -1216,7 +1250,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
   border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-primary); font: inherit; font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer;
 }
 .aura-page:hover { background: var(--aura-bg-surface-hover); }
-.aura-page.is-current { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); font-weight: 600; }
+.aura-page.is-current { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); font-weight: 600; }
 .aura-page:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-pagination__gap { min-width: 24px; text-align: center; color: var(--aura-fg-secondary); }
 .aura-pagination__compact { display: none; padding: 0 var(--aura-space-2); color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; }
@@ -1310,7 +1344,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   color: var(--aura-fg-secondary); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
 }
 .aura-stepper__marker .aura-icon { width: 16px; height: 16px; }
-.aura-stepper__item.is-done .aura-stepper__marker { background: var(--aura-button-primary-bg); border-color: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
+.aura-stepper__item.is-done .aura-stepper__marker { background: var(--aura-control-checked-bg); border-color: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); }
 .aura-stepper__item.is-current .aura-stepper__marker { border: 2px solid var(--aura-fg-accent); color: var(--aura-fg-accent); }
 .aura-stepper__text { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }
 .aura-stepper__label { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--aura-fg-secondary); }
@@ -1323,12 +1357,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 }
 .aura-stepper--horizontal .aura-stepper__step { flex-direction: column; gap: var(--aura-space-2); }
 .aura-stepper--horizontal .aura-stepper__text { padding-top: 0; }
-.aura-stepper--horizontal .aura-stepper__item.is-done::after { background: var(--aura-button-primary-bg); }
+.aura-stepper--horizontal .aura-stepper__item.is-done::after { background: var(--aura-control-checked-bg); }
 .aura-stepper--vertical .aura-stepper__item { flex: none; padding-bottom: var(--aura-space-5); }
 .aura-stepper--vertical .aura-stepper__item:not(:last-child)::after {
   content: ""; position: absolute; left: 14px; top: 32px; bottom: 4px; width: 1px; background: var(--aura-border-control);
 }
-.aura-stepper--vertical .aura-stepper__item.is-done::after { background: var(--aura-button-primary-bg); }
+.aura-stepper--vertical .aura-stepper__item.is-done::after { background: var(--aura-control-checked-bg); }
 .aura-stepper__compact { display: none; margin: var(--aura-space-2) 0 0; font-size: 13px; }
 .aura-stepper__count { color: var(--aura-fg-secondary); margin-right: var(--aura-space-2); }
 .aura-stepper__compact-label { font-weight: 600; }
@@ -1347,15 +1381,16 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-segmented.is-full { display: flex; width: 100%; }
 .aura-segmented__option {
   flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-  height: 32px; padding: 0 var(--aura-space-4); box-sizing: border-box;
+  height: calc(var(--aura-input-height) - 6px); /* 5.30: the control is as tall as a field beside it (2px padding, 1px edge) */
+  padding: 0 var(--aura-space-4); box-sizing: border-box;
   border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-secondary);
   font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
   transition: background-color var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease), box-shadow var(--aura-duration-fast) var(--aura-ease);
 }
 .aura-segmented.is-full .aura-segmented__option { flex: 1 1 0; min-width: 0; }
-.aura-segmented__option.is-icon { padding: 0; width: 36px; }
+.aura-segmented__option.is-icon { padding: 0; width: calc(var(--aura-input-height) - 6px); } /* 5.30: square */
 .aura-segmented__option:hover:not(:disabled):not(.is-selected) { color: var(--aura-fg-primary); }
-.aura-segmented__option.is-selected { background: var(--aura-bg-surface); color: var(--aura-fg-primary); box-shadow: inset 0 0 0 1px var(--aura-border-control), var(--aura-shadow-enterprise); } /* 5.2: the edge marks the choice at 3:1; the fill alone was 1.04:1 on the track */
+.aura-segmented__option.is-selected { background: var(--aura-segmented-thumb-bg); color: var(--aura-fg-primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--aura-border-control), var(--aura-shadow-enterprise); } /* 5.2: the edge marks the choice at 3:1; the fill alone was 1.04:1 on the track */
 .aura-segmented__option:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; }
 .aura-segmented__option:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 .aura-segmented--sm .aura-segmented__option { height: 24px; padding: 0 var(--aura-space-3); font-size: 12px; }
@@ -1453,11 +1488,33 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-check--labelled .aura-check__input { top: calc((var(--aura-touch-target) - 20px) / 2 + 3px); }
   .aura-switch-row:not(.is-disabled):not(.is-readonly) { cursor: pointer; }
   .aura-radio-group__list { gap: 0; }
-  .aura-radio-group__list.is-horizontal { gap: 0 var(--aura-space-6); }
+  .aura-radio-group__list.is-horizontal { gap: 0 var(--aura-space-6); align-items: flex-start; }
+}
+/* 5.30 (Chamber-OS 135): `touchHeight` on TextField, Textarea, Select, RadioGroup and Checkbox — 44px boxes and choice
+ * rows (a one-line label centred), below 640px or on a coarse pointer (is-touch) or at every width (is-touch-always).
+ * The field's own --aura-input-height wins over any density around it. */
+.aura-field.is-touch-always { --aura-input-height: var(--aura-touch-target); }
+.aura-radio-group.is-touch-always .aura-choice, .aura-check--labelled.is-touch-always {
+  box-sizing: border-box; min-height: var(--aura-touch-target); padding-block: calc((var(--aura-touch-target) - 20px) / 2);
+}
+.aura-check--labelled.is-touch-always .aura-check__input { top: calc((var(--aura-touch-target) - 20px) / 2 + 3px); }
+.aura-radio-group.is-touch-always .aura-radio-group__list { gap: 0; }
+.aura-radio-group.is-touch-always .aura-radio-group__list.is-horizontal { gap: 0 var(--aura-space-6); align-items: flex-start; }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-field.is-touch { --aura-input-height: var(--aura-touch-target); }
+  .aura-radio-group.is-touch .aura-choice, .aura-check--labelled.is-touch {
+    box-sizing: border-box; min-height: var(--aura-touch-target); padding-block: calc((var(--aura-touch-target) - 20px) / 2);
+  }
+  .aura-check--labelled.is-touch .aura-check__input { top: calc((var(--aura-touch-target) - 20px) / 2 + 3px); }
+  .aura-radio-group.is-touch .aura-radio-group__list { gap: 0; }
+  .aura-radio-group.is-touch .aura-radio-group__list.is-horizontal { gap: 0 var(--aura-space-6); align-items: flex-start; }
 }
 
 /* PasswordField: the show/hide IconButton sits in the suffix slot, 6px from the edge */
 .aura-password .aura-input__suffix { padding-right: 6px; display: flex; align-items: center; }
+/* 5.30: a button inside a field (show password) is as quiet as the field's other icons until hovered. */
+.aura-input .aura-icon-btn { color: var(--aura-fg-secondary); }
+.aura-input .aura-icon-btn:hover:not(:disabled) { color: var(--aura-fg-primary); }
 
 /* FormErrorSummary: a danger alert whose items link to their fields */
 .aura-error-summary:focus-visible, .aura-error-summary:focus { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
@@ -1550,6 +1607,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .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); }
+/* 5.30: from 640px the face has a field's inset and text size, like the search box beside it; phones keep the tight
+ * face so three filters and a chip share one row. */
+@media (min-width: 640px) {
+  .aura-filterselect__face { padding-inline: var(--aura-space-3) var(--aura-space-2); font-size: 14px; }
+  .aura-filterselect__chevron { width: var(--aura-icon-sm); height: var(--aura-icon-sm); }
+}
 .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);
@@ -1719,21 +1782,35 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 /* DataTable's grid look — mono header band, hairlines, 20px outer radius — on plain <table> markup, with wrapping text. */
 .aura-tbl-wrap {
   overflow-x: auto; border: 1px solid var(--aura-border-default); border-radius: var(--aura-card-radius);
-  background: var(--aura-bg-surface); color: var(--aura-fg-primary); font-family: var(--font-sans);
+  color: var(--aura-fg-primary); font-family: var(--font-sans);
+  /* 5.30: a table wider than its box shows a soft shadow at the edge that has more to scroll to (CSS only: the covers
+   * scroll with the content, the shadows stay with the box). Body rows show it; the header band and totals rows, with
+   * their own fill, cover it. Set --aura-tbl-bg if you give the box another ground. A flush table has none. */
+  background:
+    linear-gradient(to right, var(--aura-tbl-bg, var(--aura-bg-surface)) 30%, transparent) left / 32px 100% no-repeat local,
+    linear-gradient(to left, var(--aura-tbl-bg, var(--aura-bg-surface)) 30%, transparent) right / 32px 100% no-repeat local,
+    linear-gradient(to right, var(--aura-scroll-shadow), transparent) left / 12px 100% no-repeat scroll,
+    linear-gradient(to left, var(--aura-scroll-shadow), transparent) right / 12px 100% no-repeat scroll,
+    var(--aura-tbl-bg, var(--aura-bg-surface));
 }
 .aura-tbl { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 13px; line-height: 20px; }
-.aura-tbl__caption { caption-side: top; padding: var(--aura-space-4) var(--aura-space-6) 0; text-align: left; font-size: 14px; font-weight: 600; }
+.aura-tbl__caption { caption-side: top; padding: var(--aura-space-4) var(--aura-space-6) var(--aura-space-3); text-align: left; font-size: 14px; font-weight: 600; }
+/* 5.30: from 640px a cell is at least 10ch wide, so the table never squeezes a column to one letter; a longer word (an
+ * email, a URL) still breaks to fit instead of widening the table. Phones keep fitting the box: use stackBelow there. */
 .aura-tbl__th, .aura-tbl__td { padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
+@media (min-width: 640px) { .aura-tbl__th, .aura-tbl__td { min-width: 10ch; } }
 .aura-tbl__th:first-child, .aura-tbl__td:first-child { padding-left: var(--aura-space-6); }
 .aura-tbl__th:last-child, .aura-tbl__td:last-child { padding-right: var(--aura-space-6); }
 .aura-tbl__head .aura-tbl__th {
-  background: var(--aura-bg-canvas); border-bottom: 1px solid var(--aura-border-default);
+  background: var(--aura-table-head-bg); border-bottom: 1px solid var(--aura-border-default);
   font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--aura-fg-secondary); white-space: nowrap;
 }
 .aura-tbl__body .aura-tbl__row + .aura-tbl__row > * { border-top: 1px solid var(--aura-border-default); }
 .aura-tbl__body .aura-tbl__th { font-weight: 500; }
-.aura-tbl__foot > .aura-tbl__row > * { background: var(--aura-bg-canvas); font-weight: 600; }
-.aura-tbl__foot > .aura-tbl__row:first-child > * { border-top: 1px solid var(--aura-border-strong); }
+.aura-tbl__foot > .aura-tbl__row > * { background: var(--aura-table-head-bg); font-weight: 600; }
+.aura-tbl__foot > .aura-tbl__row:first-child > * { border-top: 2px solid var(--aura-border-default); }
+/* 5.30: with several totals rows (Subtotal, VAT, Total) the last one reads as the total. */
+.aura-tbl__foot > .aura-tbl__row:last-child:not(:first-child) > * { font-size: 14px; font-weight: 700; }
 .aura-tbl__foot > .aura-tbl__row + .aura-tbl__row > * { border-top: 1px solid var(--aura-border-default); }
 .aura-tbl .is-end { text-align: right; }
 .aura-tbl .is-center { text-align: center; }
@@ -1777,7 +1854,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @container aura-tbl (width < 768px) {
   .aura-tbl--stack-md, .aura-tbl--stack-md > .aura-tbl__body, .aura-tbl--stack-md > .aura-tbl__foot, .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { display: block; }
   .aura-tbl--stack-md > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-  .aura-tbl--stack-md > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
+  .aura-tbl--stack-md > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) var(--aura-space-3); }
   .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { height: auto; padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
   .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
   .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; }
@@ -1801,7 +1878,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @container aura-tbl (width < 640px) {
   .aura-tbl--stack-sm, .aura-tbl--stack-sm > .aura-tbl__body, .aura-tbl--stack-sm > .aura-tbl__foot, .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { display: block; }
   .aura-tbl--stack-sm > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-  .aura-tbl--stack-sm > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
+  .aura-tbl--stack-sm > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) var(--aura-space-3); }
   .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { height: auto; padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
   .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
   .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; }
@@ -1835,7 +1912,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     margin-bottom: var(--aura-space-2); padding: var(--aura-tbl-card-py, var(--aura-space-4)) var(--aura-space-4);
     border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); background: var(--aura-bg-surface);
   }
-  .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { background: var(--aura-bg-canvas); }
+  .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { background: var(--aura-table-head-bg); }
   .aura-tbl--cards.aura-tbl--stack-md > :last-child > .aura-tbl__row:last-child { margin-bottom: 0; }
   .aura-tbl-wrap.is-flush > .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
 }
@@ -1848,7 +1925,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     margin-bottom: var(--aura-space-2); padding: var(--aura-tbl-card-py, var(--aura-space-4)) var(--aura-space-4);
     border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); background: var(--aura-bg-surface);
   }
-  .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { background: var(--aura-bg-canvas); }
+  .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { background: var(--aura-table-head-bg); }
   .aura-tbl--cards.aura-tbl--stack-sm > :last-child > .aura-tbl__row:last-child { margin-bottom: 0; }
   .aura-tbl-wrap.is-flush > .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
 }
@@ -1952,7 +2029,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   /* 5.22: a footer row ends the card with no margin under it, so the card keeps its full 16px. */
   .aura-table__row:has(> [data-card='footer']:not(.is-blank)) { padding-bottom: var(--aura-space-4); }
   .aura-table__row--skeleton .aura-table__td { display: flex; }
-  .aura-table__total { background: var(--aura-bg-canvas); }
+  /* 5.29: a skeleton field shows its label above a bar on the field's value line (15px: 13px text, normal line
+   * height — 1lh, so it follows the font), as a real field does; the title keeps the 20px line. */
+  .aura-table__row--skeleton .aura-table__td[data-label] { flex-direction: column; align-items: stretch; }
+  .aura-table__row--skeleton .aura-table__td > .aura-skel:not(.aura-skel--pill):not(.aura-skel--action) { margin: 5px 0; }
+  .aura-table__row--skeleton .aura-table__td[data-label] .aura-skel:not(.aura-skel--pill):not(.aura-skel--action) { margin: 2.5px 0; margin: calc((1lh - 10px) / 2) 0; }
+  .aura-table__row--skeleton .aura-table__td > .aura-skel-lines { align-items: flex-start; }
+  .aura-table__total { background: var(--aura-table-head-bg); }
   .aura-table__total > .is-blank { display: none; }
   .aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); background: var(--aura-bg-surface); }
   .aura-table__empty { background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); }
@@ -1982,3 +2065,25 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tabs--segmented .aura-tab.aura-segmented__option.is-selected { outline: none; border: 2px solid Highlight; }
   .aura-tabs--segmented .aura-tab.aura-segmented__option:focus-visible { outline: 2px dashed CanvasText; outline-offset: -5px; }
 }
+
+/* 5.30: Thai needs more room than Latin — tone marks and vowels stack above and below the line. Where the page or a
+ * part of it is Thai (lang="th"), small labels are at least 12px and lines are taller. */
+.aura-pill:lang(th), .aura-badge:lang(th), .aura-tab__count:lang(th) { font-size: 12px; }
+.aura-pill:lang(th) { line-height: 18px; }
+.aura-skel--pill:lang(th) { height: 22px; } /* the loading pill stays as tall as the Thai one */
+.aura-bottomnav__item:lang(th) { font-size: 12px; line-height: 18px; }
+.aura-stepper__desc:lang(th) { font-size: 13px; line-height: 1.6; }
+.aura-nav__label:lang(th) { line-height: 22px; }
+/* 5.30 (audit D): field labels, hints and errors and choice descriptions get Thai line room; a stacked card's field
+ * labels are 12px in the sans face (the mono face has no Thai), and a stacked DataTable card's values sit on a set
+ * 1.6 line, so a loading card (its bars follow 1lh) is as tall as one with Thai text. */
+.aura-field__label:lang(th), .aura-field__hint:lang(th), .aura-field__error:lang(th) { line-height: 1.6; }
+.aura-choice__desc:lang(th), .aura-check__desc:lang(th) { font-size: 13px; line-height: 1.6; }
+.aura-tbl__row > .aura-tbl__td[data-label]:lang(th)::before, .aura-table__td[data-label]:lang(th)::before { font-family: var(--font-sans); font-size: 12px; line-height: 18px; }
+.aura-table--stacked .aura-table__td[data-label]:lang(th) { line-height: 1.6; }
+
+/* 5.30: a plain link (no class) inside AURA's surfaces takes the accent colour instead of the browser's blue. Zero
+ * specificity, so any rule of yours for links wins. */
+:where(.aura-card, .aura-stat, .aura-alert, .aura-empty, .aura-field, .aura-tabs__panel, .aura-shell__main, .aura-tbl, .aura-table, .aura-dialog) :where(a:not([class])) {
+  color: var(--aura-fg-accent); text-underline-offset: 2px;
+}