@jirawatpyk/aura-react 5.18.0 → 5.20.0

package/README.md

@@ -186,6 +186,18 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.20 — Chamber-OS addendum 20, items 115–116
+
+- **Table follows the page's density** (item 115): without a `density` prop a Table takes the nearest AuraProvider's density, as its docs said — inside `AuraProvider density="compact"` the wrap carries `data-density="compact"` and cells get 8px vertical padding (were 12px). A `density` prop still wins. The padding comes from the nearest `data-density` (a provider, `<html>`, any element, or the table's own), so `comfortable` inside a compact page switches back as it does for fields. As before with an explicit `compact`, cells stay compact on touch screens. A visible change for Tables inside a compact provider or page.
+- **ActionBar `start`** (item 116): buttons at the bar's start edge — Cancel in a wizard — outside the `status` live region. When the bar is 640px or wider (its own width — a bar in a narrow card or dialog counts as narrow) they sit flush with the start edge, the status (if any) next, `children` at the end; narrower, the status takes its own row and the start buttons sit before the actions. In the tab order they come before `children`. Hidden with the actions when a bulk bar is idle; an empty `start` renders nothing.
+- **ActionBar in right-to-left pages**: the actions now sit at the end (left) edge — they used a physical `margin-left`, so a wrapped actions row landed next to the status. The bar is now `width: 100%` and a size container: give it no horizontal margins, and in a shrink-to-fit parent (inline-block, a grid `auto` track, a `max-content` popover) give the parent a width — otherwise the bar falls back to 20rem.
+
+## 5.19 — Chamber-OS addendum 20
+
+- **Switch `readOnly`, `icon` and `aria-describedby`** (item 113): `readOnly` keeps a locked switch in the Tab order with `aria-readonly="true"`, so its name, state and notes are heard; click, Space, its label and its row change nothing. It keeps its colours (a locked "on" reads as on) and loses the pointer. `icon` puts an icon at the end of the row, the field icon's size, in fg-secondary (`icon={<IconLock />}`), hidden from screen readers. `aria-describedby` is merged with the description's id, as on TextField and Select. `disabled` wins over `readOnly`.
+- **Select `readOnly`** (item 114): the field stays in the Tab order with `aria-readonly="true"` and shows the chosen option on the read-only ground of a read-only TextField, with no chevron; no click or key opens the list. Unlike `disabled`, the value is still posted with the form, and your code can still set it (`reset()`, `setValue()`). Before JavaScript runs, the options from `options` other than the value are disabled so the native control keeps it (`<option>` children aren't; with no `value` or `defaultValue` nothing is); once hydrated they are enabled again, since a disabled selected option is left out of the form's data. A `multiple` / `size` list box ignores the mouse and the keys that pick (arrows, Home/End, Page keys, letters, Space, Ctrl+A); a change that gets through anyway (a touch tap, a phone's picker, `selectOption` in a test) is put back, and your `onChange` isn't called — though a native `change` or `input` listener on the form still sees the event, with the value already restored.
+- Read-only is `aria-readonly` alone; pair it with a note that says why (`aria-describedby`), which screen readers read after the state.
+
 ## 5.18 — Chamber-OS addendum 19
 
 - **Stepper step errors** (item 112): a step can take `status: 'error'` — say, Save found errors on it. It keeps its place in the order and its state (a completed step is still a button with `onStepClick`, the current one keeps `aria-current="step"`), shows the danger tone with an alert icon instead of the check or number (outlined when it is the current step), and its accessible name ends ", has errors" instead of ", completed". On a phone the line reads "Step 2 of 4 — has errors" when the current step has errors; the markers, error ones included, stay visible. Steps without `status` look the same as before.

package/dist/aura.bundle.js

@@ -1869,10 +1869,22 @@ window.Aura = (() => {
   var Select = React15.forwardRef(function Select2(props, ref) {
     const auto = uid(), id = props.id || auto;
     const filter = props[FILTER_KEY];
-    const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY]));
+    const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY, "readOnly"]));
+    const ro = !!props.readOnly && !props.disabled;
+    const mounted = useMounted();
+    const kept = React15.useRef(null);
+    const current2 = [].concat(props.value != null ? props.value : props.defaultValue != null ? props.defaultValue : []).map(String);
     const opts = (props.options || []).map(function(o) {
       const v = typeof o === "object" ? o : { value: o, label: o };
-      return /* @__PURE__ */ React15.createElement("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
+      return /* @__PURE__ */ React15.createElement(
+        "option",
+        {
+          key: v.value,
+          value: v.value,
+          disabled: v.disabled || ro && !mounted && current2.length > 0 && current2.indexOf(v.value) < 0 || void 0
+        },
+        v.label
+      );
     });
     if (props.placeholder)
       opts.unshift(
@@ -1880,7 +1892,6 @@ window.Aura = (() => {
       );
     const extra = props.value === void 0 && props.defaultValue === void 0 && props.placeholder ? { defaultValue: "" } : {};
     const native = !!props.multiple || props.size != null && props.size > 1;
-    const mounted = useMounted();
     const live = !native && mounted;
     const density = useDensity();
     React15.useEffect(function() {
@@ -2002,7 +2013,7 @@ window.Aura = (() => {
     }
     function choose(it) {
       const el = selRef.current;
-      if (!el || it.disabled) return;
+      if (!el || it.disabled || ro) return;
       if (el.value !== it.value) {
         el.value = it.value;
         el.dispatchEvent(new Event("input", { bubbles: true }));
@@ -2012,7 +2023,7 @@ window.Aura = (() => {
       close(true);
     }
     function openList(at) {
-      if (props.disabled || trigRef.current && trigRef.current.disabled) return;
+      if (props.disabled || ro || trigRef.current && trigRef.current.disabled) return;
       const list = readItems(selRef.current);
       const ok = choices(list);
       if (!ok.length) return;
@@ -2143,6 +2154,45 @@ window.Aura = (() => {
       [open, active, pos[0] != null]
     );
     const described = [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+    function keep(e) {
+      kept.current = Array.prototype.filter.call(e.currentTarget.options, function(o) {
+        return o.selected;
+      }).map(function(o) {
+        return o.value;
+      });
+    }
+    const listBoxLock = ro && native ? {
+      onFocus: function(e) {
+        const user = rest.onFocus;
+        if (user) user(e);
+        keep(e);
+      },
+      onPointerDown: function(e) {
+        const user = rest.onPointerDown;
+        if (user) user(e);
+        keep(e);
+      },
+      onMouseDown: function(e) {
+        const user = rest.onMouseDown;
+        if (user) user(e);
+        e.preventDefault();
+        e.currentTarget.focus();
+      },
+      onKeyDown: function(e) {
+        const user = rest.onKeyDown;
+        if (user) user(e);
+        const k = e.key;
+        const picks = /^(Arrow(Up|Down|Left|Right)|Home|End|Page(Up|Down))$/.test(k) || k.length === 1 && !e.altKey && (!(e.ctrlKey || e.metaKey) || k === " " || k.toLowerCase() === "a");
+        if (picks) e.preventDefault();
+      },
+      onChange: function(e) {
+        const was = kept.current;
+        if (!was) return;
+        Array.prototype.forEach.call(e.currentTarget.options, function(o) {
+          o.selected = was.indexOf(o.value) >= 0;
+        });
+      }
+    } : {};
     const field = (child) => filter ? child : /* @__PURE__ */ React15.createElement(
       Field,
       {
@@ -2175,19 +2225,25 @@ window.Aura = (() => {
       ));
     if (!live)
       return field(
-        /* @__PURE__ */ React15.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon") }, props.icon ? /* @__PURE__ */ React15.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h4(
+        /* @__PURE__ */ React15.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon", ro && "is-readonly") }, props.icon ? /* @__PURE__ */ React15.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h4(
           "select",
-          Object.assign(extra, rest, {
-            ref: native ? ref : selMerged,
-            id,
-            className: "aura-input__control",
-            required: props.required,
-            "aria-invalid": props.error ? true : void 0,
-            "aria-describedby": described
-          }),
+          Object.assign(
+            extra,
+            rest,
+            {
+              ref: native ? ref : selMerged,
+              id,
+              className: "aura-input__control",
+              required: props.required,
+              "aria-invalid": props.error ? true : void 0,
+              "aria-readonly": ro || void 0,
+              "aria-describedby": described
+            },
+            listBoxLock
+          ),
           opts,
           props.children
-        ), /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }))
+        ), ro ? null : /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }))
       );
     const listId = id + "-list", labelId = id + "-label";
     const optId = function(i) {
@@ -2276,6 +2332,7 @@ window.Aura = (() => {
             filter ? "aura-filterselect" : "aura-input",
             "aura-select aura-select--custom",
             props.icon && "has-icon",
+            ro && "is-readonly",
             open && "is-open",
             filter && props.disabled && "is-disabled",
             filter && props.className
@@ -2328,6 +2385,7 @@ window.Aura = (() => {
             "aria-labelledby": rest["aria-labelledby"] || (filter && !rest["aria-label"] ? nameId : void 0),
             "aria-required": props.required || void 0,
             "aria-invalid": props.error ? true : void 0,
+            "aria-readonly": ro || void 0,
             "aria-describedby": described,
             onFocus: function(e) {
               if (userFocus) userFocus(e);
@@ -2350,7 +2408,7 @@ window.Aura = (() => {
           },
           face || /* @__PURE__ */ React15.createElement("span", { id: id + "-value", className: cx("aura-select__value", shown[0].empty && "is-placeholder") }, shown[0].label || " ")
         ),
-        filter ? null : /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
+        filter || ro ? null : /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
         popup
       )
     );
@@ -2429,13 +2487,15 @@ window.Aura = (() => {
     const auto = uid(), id = props.id || auto;
     const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
     const on = !!st[0];
+    const ro = !!props.readOnly && !props.disabled;
+    const described = [props.description ? id + "-desc" : "", props["aria-describedby"] || ""].filter(Boolean).join(" ");
     return /* @__PURE__ */ React18.createElement(
       "div",
       {
-        className: cx("aura-switch-row", props.disabled && "is-disabled", props.className),
+        className: cx("aura-switch-row", props.disabled && "is-disabled", ro && "is-readonly", props.className),
         onClick: function(e) {
           const t = e.target;
-          if (props.disabled || t.closest("button, label, a, input")) return;
+          if (props.disabled || ro || t.closest("button, label, a, input")) return;
           st[1](!on);
         }
       },
@@ -2450,15 +2510,17 @@ window.Aura = (() => {
           disabled: props.disabled,
           "aria-labelledby": props.label ? id + "-label" : void 0,
           "aria-label": props.label ? void 0 : props["aria-label"],
-          "aria-describedby": props.description ? id + "-desc" : void 0,
+          "aria-readonly": ro || void 0,
+          "aria-describedby": described || void 0,
           className: cx("aura-switch", on && "is-on"),
           onClick: function() {
-            st[1](!on);
+            if (!ro) st[1](!on);
           }
         },
         /* @__PURE__ */ React18.createElement("span", { className: "aura-switch__thumb" })
       ),
-      props.label ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React18.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-sr-only", id: id + "-desc" }, props.description) : null
+      props.label ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React18.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-sr-only", id: id + "-desc" }, props.description) : null,
+      props.icon ? /* @__PURE__ */ React18.createElement(Icon, { name: props.icon, className: "aura-switch-row__icon" }) : null
     );
   });
 
@@ -7102,6 +7164,9 @@ window.Aura = (() => {
     const bulk = props.selected != null;
     const idle = bulk && !props.selected;
     const count = bulk && props.selected ? t.selectedCount(props.selected) : null;
+    const hasStart = React42.Children.toArray(props.start).some(function(c) {
+      return c !== "";
+    });
     const cameFrom = React42.useRef(null);
     const own = React42.useRef(null);
     function clear() {
@@ -7133,7 +7198,7 @@ window.Aura = (() => {
           props.className
         )
       },
-      /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__inner" }, /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle ? /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React42.createElement(Button, { variant: "ghost", size: "sm", onClick: clear }, t.clear()) : null, props.children) : null)
+      /* @__PURE__ */ React42.createElement("div", { className: cx("aura-actionbar__inner", hasStart && "has-start") }, /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle && hasStart ? /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__start" }, props.start) : null, !idle ? /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React42.createElement(Button, { variant: "ghost", size: "sm", onClick: clear }, t.clear()) : null, props.children) : null)
     );
   });
 
@@ -7211,6 +7276,7 @@ window.Aura = (() => {
         "Table stackBelow: no THead > Tr > Th found among its children, so cells have no labels. Pass `label` on each Td."
       );
     const outer = React44.useContext(StackLabels);
+    const pageDensity = useDensity();
     const capId = uid();
     const wrap = React44.useRef(null);
     const sc = React44.useState(false), scrolls = sc[0];
@@ -7232,7 +7298,7 @@ window.Aura = (() => {
       {
         ref: wrap,
         className: cx("aura-tbl-wrap", stackBelow && "is-stackable", bordered === false && "is-flush"),
-        "data-density": density,
+        "data-density": density || pageDensity,
         tabIndex: scrolls ? 0 : void 0,
         role: scrolls && (caption != null || rest["aria-label"]) ? "region" : void 0,
         "aria-labelledby": scrolls && caption != null ? capId : void 0,

package/dist/cjs/index.cjs

@@ -1851,10 +1851,22 @@ function initialLabel(props, filter) {
 var Select = React15.forwardRef(function Select2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const filter = props[FILTER_KEY];
-  const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY]));
+  const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY, "readOnly"]));
+  const ro = !!props.readOnly && !props.disabled;
+  const mounted = useMounted();
+  const kept = React15.useRef(null);
+  const current2 = [].concat(props.value != null ? props.value : props.defaultValue != null ? props.defaultValue : []).map(String);
   const opts = (props.options || []).map(function(o) {
     const v = typeof o === "object" ? o : { value: o, label: o };
-    return /* @__PURE__ */ React15.createElement("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
+    return /* @__PURE__ */ React15.createElement(
+      "option",
+      {
+        key: v.value,
+        value: v.value,
+        disabled: v.disabled || ro && !mounted && current2.length > 0 && current2.indexOf(v.value) < 0 || void 0
+      },
+      v.label
+    );
   });
   if (props.placeholder)
     opts.unshift(
@@ -1862,7 +1874,6 @@ var Select = React15.forwardRef(function Select2(props, ref) {
     );
   const extra = props.value === void 0 && props.defaultValue === void 0 && props.placeholder ? { defaultValue: "" } : {};
   const native = !!props.multiple || props.size != null && props.size > 1;
-  const mounted = useMounted();
   const live = !native && mounted;
   const density = useDensity();
   React15.useEffect(function() {
@@ -1984,7 +1995,7 @@ var Select = React15.forwardRef(function Select2(props, ref) {
   }
   function choose(it) {
     const el = selRef.current;
-    if (!el || it.disabled) return;
+    if (!el || it.disabled || ro) return;
     if (el.value !== it.value) {
       el.value = it.value;
       el.dispatchEvent(new Event("input", { bubbles: true }));
@@ -1994,7 +2005,7 @@ var Select = React15.forwardRef(function Select2(props, ref) {
     close(true);
   }
   function openList(at) {
-    if (props.disabled || trigRef.current && trigRef.current.disabled) return;
+    if (props.disabled || ro || trigRef.current && trigRef.current.disabled) return;
     const list = readItems(selRef.current);
     const ok = choices(list);
     if (!ok.length) return;
@@ -2125,6 +2136,45 @@ var Select = React15.forwardRef(function Select2(props, ref) {
     [open, active, pos[0] != null]
   );
   const described = [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+  function keep(e) {
+    kept.current = Array.prototype.filter.call(e.currentTarget.options, function(o) {
+      return o.selected;
+    }).map(function(o) {
+      return o.value;
+    });
+  }
+  const listBoxLock = ro && native ? {
+    onFocus: function(e) {
+      const user = rest.onFocus;
+      if (user) user(e);
+      keep(e);
+    },
+    onPointerDown: function(e) {
+      const user = rest.onPointerDown;
+      if (user) user(e);
+      keep(e);
+    },
+    onMouseDown: function(e) {
+      const user = rest.onMouseDown;
+      if (user) user(e);
+      e.preventDefault();
+      e.currentTarget.focus();
+    },
+    onKeyDown: function(e) {
+      const user = rest.onKeyDown;
+      if (user) user(e);
+      const k = e.key;
+      const picks = /^(Arrow(Up|Down|Left|Right)|Home|End|Page(Up|Down))$/.test(k) || k.length === 1 && !e.altKey && (!(e.ctrlKey || e.metaKey) || k === " " || k.toLowerCase() === "a");
+      if (picks) e.preventDefault();
+    },
+    onChange: function(e) {
+      const was = kept.current;
+      if (!was) return;
+      Array.prototype.forEach.call(e.currentTarget.options, function(o) {
+        o.selected = was.indexOf(o.value) >= 0;
+      });
+    }
+  } : {};
   const field = (child) => filter ? child : /* @__PURE__ */ React15.createElement(
     Field,
     {
@@ -2157,19 +2207,25 @@ var Select = React15.forwardRef(function Select2(props, ref) {
     ));
   if (!live)
     return field(
-      /* @__PURE__ */ React15.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon") }, props.icon ? /* @__PURE__ */ React15.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h4(
+      /* @__PURE__ */ React15.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon", ro && "is-readonly") }, props.icon ? /* @__PURE__ */ React15.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h4(
         "select",
-        Object.assign(extra, rest, {
-          ref: native ? ref : selMerged,
-          id,
-          className: "aura-input__control",
-          required: props.required,
-          "aria-invalid": props.error ? true : void 0,
-          "aria-describedby": described
-        }),
+        Object.assign(
+          extra,
+          rest,
+          {
+            ref: native ? ref : selMerged,
+            id,
+            className: "aura-input__control",
+            required: props.required,
+            "aria-invalid": props.error ? true : void 0,
+            "aria-readonly": ro || void 0,
+            "aria-describedby": described
+          },
+          listBoxLock
+        ),
         opts,
         props.children
-      ), /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }))
+      ), ro ? null : /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }))
     );
   const listId = id + "-list", labelId = id + "-label";
   const optId = function(i) {
@@ -2258,6 +2314,7 @@ var Select = React15.forwardRef(function Select2(props, ref) {
           filter ? "aura-filterselect" : "aura-input",
           "aura-select aura-select--custom",
           props.icon && "has-icon",
+          ro && "is-readonly",
           open && "is-open",
           filter && props.disabled && "is-disabled",
           filter && props.className
@@ -2310,6 +2367,7 @@ var Select = React15.forwardRef(function Select2(props, ref) {
           "aria-labelledby": rest["aria-labelledby"] || (filter && !rest["aria-label"] ? nameId : void 0),
           "aria-required": props.required || void 0,
           "aria-invalid": props.error ? true : void 0,
+          "aria-readonly": ro || void 0,
           "aria-describedby": described,
           onFocus: function(e) {
             if (userFocus) userFocus(e);
@@ -2332,7 +2390,7 @@ var Select = React15.forwardRef(function Select2(props, ref) {
         },
         face || /* @__PURE__ */ React15.createElement("span", { id: id + "-value", className: cx("aura-select__value", shown[0].empty && "is-placeholder") }, shown[0].label || " ")
       ),
-      filter ? null : /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
+      filter || ro ? null : /* @__PURE__ */ React15.createElement(Icon, { name: /* @__PURE__ */ React15.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
       popup
     )
   );
@@ -2411,13 +2469,15 @@ var Switch = React18.forwardRef(function Switch2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
   const on = !!st[0];
+  const ro = !!props.readOnly && !props.disabled;
+  const described = [props.description ? id + "-desc" : "", props["aria-describedby"] || ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ React18.createElement(
     "div",
     {
-      className: cx("aura-switch-row", props.disabled && "is-disabled", props.className),
+      className: cx("aura-switch-row", props.disabled && "is-disabled", ro && "is-readonly", props.className),
       onClick: function(e) {
         const t = e.target;
-        if (props.disabled || t.closest("button, label, a, input")) return;
+        if (props.disabled || ro || t.closest("button, label, a, input")) return;
         st[1](!on);
       }
     },
@@ -2432,15 +2492,17 @@ var Switch = React18.forwardRef(function Switch2(props, ref) {
         disabled: props.disabled,
         "aria-labelledby": props.label ? id + "-label" : void 0,
         "aria-label": props.label ? void 0 : props["aria-label"],
-        "aria-describedby": props.description ? id + "-desc" : void 0,
+        "aria-readonly": ro || void 0,
+        "aria-describedby": described || void 0,
         className: cx("aura-switch", on && "is-on"),
         onClick: function() {
-          st[1](!on);
+          if (!ro) st[1](!on);
         }
       },
       /* @__PURE__ */ React18.createElement("span", { className: "aura-switch__thumb" })
     ),
-    props.label ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React18.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-sr-only", id: id + "-desc" }, props.description) : null
+    props.label ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React18.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : props.description ? /* @__PURE__ */ React18.createElement("span", { className: "aura-sr-only", id: id + "-desc" }, props.description) : null,
+    props.icon ? /* @__PURE__ */ React18.createElement(Icon, { name: props.icon, className: "aura-switch-row__icon" }) : null
   );
 });
 
@@ -7084,6 +7146,9 @@ var ActionBar = React42.forwardRef(function ActionBar2(props, ref) {
   const bulk = props.selected != null;
   const idle = bulk && !props.selected;
   const count = bulk && props.selected ? t.selectedCount(props.selected) : null;
+  const hasStart = React42.Children.toArray(props.start).some(function(c) {
+    return c !== "";
+  });
   const cameFrom = React42.useRef(null);
   const own = React42.useRef(null);
   function clear() {
@@ -7115,7 +7180,7 @@ var ActionBar = React42.forwardRef(function ActionBar2(props, ref) {
         props.className
       )
     },
-    /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__inner" }, /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle ? /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React42.createElement(Button, { variant: "ghost", size: "sm", onClick: clear }, t.clear()) : null, props.children) : null)
+    /* @__PURE__ */ React42.createElement("div", { className: cx("aura-actionbar__inner", hasStart && "has-start") }, /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle && hasStart ? /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__start" }, props.start) : null, !idle ? /* @__PURE__ */ React42.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React42.createElement(Button, { variant: "ghost", size: "sm", onClick: clear }, t.clear()) : null, props.children) : null)
   );
 });
 
@@ -7193,6 +7258,7 @@ var Table = React44.forwardRef(function Table2(props, ref) {
       "Table stackBelow: no THead > Tr > Th found among its children, so cells have no labels. Pass `label` on each Td."
     );
   const outer = React44.useContext(StackLabels);
+  const pageDensity = useDensity();
   const capId = uid();
   const wrap = React44.useRef(null);
   const sc = React44.useState(false), scrolls = sc[0];
@@ -7214,7 +7280,7 @@ var Table = React44.forwardRef(function Table2(props, ref) {
     {
       ref: wrap,
       className: cx("aura-tbl-wrap", stackBelow && "is-stackable", bordered === false && "is-flush"),
-      "data-density": density,
+      "data-density": density || pageDensity,
       tabIndex: scrolls ? 0 : void 0,
       role: scrolls && (caption != null || rest["aria-label"]) ? "region" : void 0,
       "aria-labelledby": scrolls && caption != null ? capId : void 0,

package/dist/esm/ActionBar.js

@@ -8,6 +8,9 @@ const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
   const bulk = props.selected != null;
   const idle = bulk && !props.selected;
   const count = bulk && props.selected ? t.selectedCount(props.selected) : null;
+  const hasStart = React.Children.toArray(props.start).some(function(c) {
+    return c !== "";
+  });
   const cameFrom = React.useRef(null);
   const own = React.useRef(null);
   function clear() {
@@ -39,7 +42,7 @@ const ActionBar = React.forwardRef(function ActionBar2(props, ref) {
         props.className
       )
     },
-    /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__inner" }, /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle ? /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React.createElement(Button, { variant: "ghost", size: "sm", onClick: clear }, t.clear()) : null, props.children) : null)
+    /* @__PURE__ */ React.createElement("div", { className: cx("aura-actionbar__inner", hasStart && "has-start") }, /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__status", role: "status" }, count, count && props.status ? " \xB7 " : null, props.status), !idle && hasStart ? /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__start" }, props.start) : null, !idle ? /* @__PURE__ */ React.createElement("div", { className: "aura-actionbar__actions" }, count && props.onClearSelection ? /* @__PURE__ */ React.createElement(Button, { variant: "ghost", size: "sm", onClick: clear }, t.clear()) : null, props.children) : null)
   );
 });
 export {

package/dist/esm/Select.js

@@ -83,10 +83,22 @@ function initialLabel(props, filter) {
 const Select = React.forwardRef(function Select2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const filter = props[FILTER_KEY];
-  const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY]));
+  const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY, "readOnly"]));
+  const ro = !!props.readOnly && !props.disabled;
+  const mounted = useMounted();
+  const kept = React.useRef(null);
+  const current = [].concat(props.value != null ? props.value : props.defaultValue != null ? props.defaultValue : []).map(String);
   const opts = (props.options || []).map(function(o) {
     const v = typeof o === "object" ? o : { value: o, label: o };
-    return /* @__PURE__ */ React.createElement("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
+    return /* @__PURE__ */ React.createElement(
+      "option",
+      {
+        key: v.value,
+        value: v.value,
+        disabled: v.disabled || ro && !mounted && current.length > 0 && current.indexOf(v.value) < 0 || void 0
+      },
+      v.label
+    );
   });
   if (props.placeholder)
     opts.unshift(
@@ -94,7 +106,6 @@ const Select = React.forwardRef(function Select2(props, ref) {
     );
   const extra = props.value === void 0 && props.defaultValue === void 0 && props.placeholder ? { defaultValue: "" } : {};
   const native = !!props.multiple || props.size != null && props.size > 1;
-  const mounted = useMounted();
   const live = !native && mounted;
   const density = useDensity();
   React.useEffect(function() {
@@ -216,7 +227,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
   }
   function choose(it) {
     const el = selRef.current;
-    if (!el || it.disabled) return;
+    if (!el || it.disabled || ro) return;
     if (el.value !== it.value) {
       el.value = it.value;
       el.dispatchEvent(new Event("input", { bubbles: true }));
@@ -226,7 +237,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
     close(true);
   }
   function openList(at) {
-    if (props.disabled || trigRef.current && trigRef.current.disabled) return;
+    if (props.disabled || ro || trigRef.current && trigRef.current.disabled) return;
     const list = readItems(selRef.current);
     const ok = choices(list);
     if (!ok.length) return;
@@ -357,6 +368,45 @@ const Select = React.forwardRef(function Select2(props, ref) {
     [open, active, pos[0] != null]
   );
   const described = [describedBy(id, props), rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+  function keep(e) {
+    kept.current = Array.prototype.filter.call(e.currentTarget.options, function(o) {
+      return o.selected;
+    }).map(function(o) {
+      return o.value;
+    });
+  }
+  const listBoxLock = ro && native ? {
+    onFocus: function(e) {
+      const user = rest.onFocus;
+      if (user) user(e);
+      keep(e);
+    },
+    onPointerDown: function(e) {
+      const user = rest.onPointerDown;
+      if (user) user(e);
+      keep(e);
+    },
+    onMouseDown: function(e) {
+      const user = rest.onMouseDown;
+      if (user) user(e);
+      e.preventDefault();
+      e.currentTarget.focus();
+    },
+    onKeyDown: function(e) {
+      const user = rest.onKeyDown;
+      if (user) user(e);
+      const k = e.key;
+      const picks = /^(Arrow(Up|Down|Left|Right)|Home|End|Page(Up|Down))$/.test(k) || k.length === 1 && !e.altKey && (!(e.ctrlKey || e.metaKey) || k === " " || k.toLowerCase() === "a");
+      if (picks) e.preventDefault();
+    },
+    onChange: function(e) {
+      const was = kept.current;
+      if (!was) return;
+      Array.prototype.forEach.call(e.currentTarget.options, function(o) {
+        o.selected = was.indexOf(o.value) >= 0;
+      });
+    }
+  } : {};
   const field = (child) => filter ? child : /* @__PURE__ */ React.createElement(
     Field,
     {
@@ -389,19 +439,25 @@ const Select = React.forwardRef(function Select2(props, ref) {
     ));
   if (!live)
     return field(
-      /* @__PURE__ */ React.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h(
+      /* @__PURE__ */ React.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon", ro && "is-readonly") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h(
         "select",
-        Object.assign(extra, rest, {
-          ref: native ? ref : selMerged,
-          id,
-          className: "aura-input__control",
-          required: props.required,
-          "aria-invalid": props.error ? true : void 0,
-          "aria-describedby": described
-        }),
+        Object.assign(
+          extra,
+          rest,
+          {
+            ref: native ? ref : selMerged,
+            id,
+            className: "aura-input__control",
+            required: props.required,
+            "aria-invalid": props.error ? true : void 0,
+            "aria-readonly": ro || void 0,
+            "aria-describedby": described
+          },
+          listBoxLock
+        ),
         opts,
         props.children
-      ), /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-select__chevron" }))
+      ), ro ? null : /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-select__chevron" }))
     );
   const listId = id + "-list", labelId = id + "-label";
   const optId = function(i) {
@@ -490,6 +546,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
           filter ? "aura-filterselect" : "aura-input",
           "aura-select aura-select--custom",
           props.icon && "has-icon",
+          ro && "is-readonly",
           open && "is-open",
           filter && props.disabled && "is-disabled",
           filter && props.className
@@ -542,6 +599,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
           "aria-labelledby": rest["aria-labelledby"] || (filter && !rest["aria-label"] ? nameId : void 0),
           "aria-required": props.required || void 0,
           "aria-invalid": props.error ? true : void 0,
+          "aria-readonly": ro || void 0,
           "aria-describedby": described,
           onFocus: function(e) {
             if (userFocus) userFocus(e);
@@ -564,7 +622,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
         },
         face || /* @__PURE__ */ React.createElement("span", { id: id + "-value", className: cx("aura-select__value", shown[0].empty && "is-placeholder") }, shown[0].label || " ")
       ),
-      filter ? null : /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
+      filter || ro ? null : /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null), className: "aura-select__chevron" }),
       popup
     )
   );

package/dist/esm/Switch.js

@@ -1,17 +1,20 @@
 'use client';
 import * as React from "react";
+import { Icon } from "./Icon.js";
 import { cx, uid, useMaybeControlled } from "./internal.js";
 const Switch = React.forwardRef(function Switch2(props, ref) {
   const auto = uid(), id = props.id || auto;
   const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
   const on = !!st[0];
+  const ro = !!props.readOnly && !props.disabled;
+  const described = [props.description ? id + "-desc" : "", props["aria-describedby"] || ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: cx("aura-switch-row", props.disabled && "is-disabled", props.className),
+      className: cx("aura-switch-row", props.disabled && "is-disabled", ro && "is-readonly", props.className),
       onClick: function(e) {
         const t = e.target;
-        if (props.disabled || t.closest("button, label, a, input")) return;
+        if (props.disabled || ro || t.closest("button, label, a, input")) return;
         st[1](!on);
       }
     },
@@ -26,15 +29,17 @@ const Switch = React.forwardRef(function Switch2(props, ref) {
         disabled: props.disabled,
         "aria-labelledby": props.label ? id + "-label" : void 0,
         "aria-label": props.label ? void 0 : props["aria-label"],
-        "aria-describedby": props.description ? id + "-desc" : void 0,
+        "aria-readonly": ro || void 0,
+        "aria-describedby": described || void 0,
         className: cx("aura-switch", on && "is-on"),
         onClick: function() {
-          st[1](!on);
+          if (!ro) st[1](!on);
         }
       },
       /* @__PURE__ */ React.createElement("span", { className: "aura-switch__thumb" })
     ),
-    props.label ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", id: id + "-desc" }, props.description) : null
+    props.label ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only", id: id + "-desc" }, props.description) : null,
+    props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-switch-row__icon" }) : null
   );
 });
 export {

package/dist/esm/Table.js

@@ -1,6 +1,7 @@
 'use client';
 import * as React from "react";
 import { cx, devWarnOnce, uid, useIsoLayoutEffect } from "./internal.js";
+import { useDensity } from "./locale.js";
 const StackLabels = React.createContext(null);
 const ColumnIndex = React.createContext(-1);
 function flat(children) {
@@ -56,6 +57,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
       "Table stackBelow: no THead > Tr > Th found among its children, so cells have no labels. Pass `label` on each Td."
     );
   const outer = React.useContext(StackLabels);
+  const pageDensity = useDensity();
   const capId = uid();
   const wrap = React.useRef(null);
   const sc = React.useState(false), scrolls = sc[0];
@@ -77,7 +79,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
     {
       ref: wrap,
       className: cx("aura-tbl-wrap", stackBelow && "is-stackable", bordered === false && "is-flush"),
-      "data-density": density,
+      "data-density": density || pageDensity,
       tabIndex: scrolls ? 0 : void 0,
       role: scrolls && (caption != null || rest["aria-label"]) ? "region" : void 0,
       "aria-labelledby": scrolls && caption != null ? capId : void 0,

package/dist/index.d.cts

@@ -517,6 +517,10 @@ export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.Sel
 	/** Shown in fg-tertiary on the closed field until something is chosen; not listed as a choice. */
 	placeholder?: string | undefined;
 	icon?: IconInput | undefined;
+	/** 5.19 (Chamber-OS 114): a locked value. The field stays in the Tab order with `aria-readonly` and shows the chosen
+	 * 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;
 }
 /** 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"> {
@@ -557,8 +561,16 @@ export interface SwitchProps {
 	defaultChecked?: boolean | undefined;
 	onChange?: ((checked: boolean) => void) | undefined;
 	disabled?: boolean | undefined;
+	/** 5.19 (Chamber-OS 113): a locked value. The switch stays in the Tab order with `aria-readonly`, so its name,
+	 * state and description are heard; click, Space and the row ignore it. Its colours stay (on reads as on). */
+	readOnly?: boolean | undefined;
+	/** 5.19: an icon at the end of the row, in fg-secondary and the field icon's size — `icon={<IconLock />}` or
+	 * `icon="lock"` on a locked row. Hidden from screen readers; say what it means in the description. */
+	icon?: IconInput | undefined;
 	/** Required when there is no visible label. */
 	"aria-label"?: string | undefined;
+	/** 5.19: ids of more text that describes the switch (a lock note); merged with `description`'s. */
+	"aria-describedby"?: string | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
 }
@@ -1164,6 +1176,10 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 export interface ActionBarProps {
 	/** Buttons, right-aligned (the primary one last). */
 	children?: React$1.ReactNode | undefined;
+	/** 5.20 (Chamber-OS 116): buttons at the start edge — Cancel in a wizard — outside the `status` live region. When
+	 * the bar itself is 640px or wider they sit flush with its start edge and `children` at its end; in a narrower bar a
+	 * status line takes its own row and they sit before the actions. In the tab order they come before `children`. */
+	start?: React$1.ReactNode | undefined;
 	/** A short line such as "Total 107,000.00 THB · due Oct 22, 2026" or "Unsaved changes". It sits in a polite live
 	 * region that is always in the page, so a change is announced. */
 	status?: React$1.ReactNode | undefined;

package/dist/index.d.ts

@@ -517,6 +517,10 @@ export interface SelectProps extends Omit<FieldProps, "label">, Omit<React$1.Sel
 	/** Shown in fg-tertiary on the closed field until something is chosen; not listed as a choice. */
 	placeholder?: string | undefined;
 	icon?: IconInput | undefined;
+	/** 5.19 (Chamber-OS 114): a locked value. The field stays in the Tab order with `aria-readonly` and shows the chosen
+	 * 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;
 }
 /** 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"> {
@@ -557,8 +561,16 @@ export interface SwitchProps {
 	defaultChecked?: boolean | undefined;
 	onChange?: ((checked: boolean) => void) | undefined;
 	disabled?: boolean | undefined;
+	/** 5.19 (Chamber-OS 113): a locked value. The switch stays in the Tab order with `aria-readonly`, so its name,
+	 * state and description are heard; click, Space and the row ignore it. Its colours stay (on reads as on). */
+	readOnly?: boolean | undefined;
+	/** 5.19: an icon at the end of the row, in fg-secondary and the field icon's size — `icon={<IconLock />}` or
+	 * `icon="lock"` on a locked row. Hidden from screen readers; say what it means in the description. */
+	icon?: IconInput | undefined;
 	/** Required when there is no visible label. */
 	"aria-label"?: string | undefined;
+	/** 5.19: ids of more text that describes the switch (a lock note); merged with `description`'s. */
+	"aria-describedby"?: string | undefined;
 	id?: string | undefined;
 	className?: string | undefined;
 }
@@ -1164,6 +1176,10 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 export interface ActionBarProps {
 	/** Buttons, right-aligned (the primary one last). */
 	children?: React$1.ReactNode | undefined;
+	/** 5.20 (Chamber-OS 116): buttons at the start edge — Cancel in a wizard — outside the `status` live region. When
+	 * the bar itself is 640px or wider they sit flush with its start edge and `children` at its end; in a narrower bar a
+	 * status line takes its own row and they sit before the actions. In the tab order they come before `children`. */
+	start?: React$1.ReactNode | undefined;
 	/** A short line such as "Total 107,000.00 THB · due Oct 22, 2026" or "Unsaved changes". It sits in a polite live
 	 * region that is always in the page, so a change is announced. */
 	status?: React$1.ReactNode | undefined;

package/dist/styles.css

@@ -487,6 +487,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-select__value.is-placeholder { color: var(--aura-fg-tertiary); }
 .aura-select__group { padding: var(--aura-space-2) var(--aura-space-2) var(--aura-space-1); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aura-fg-tertiary); }
 .aura-select.is-open .aura-select__chevron { transform: rotate(180deg); }
+/* 5.19 (Chamber-OS 114): a read-only Select looks like a read-only TextField — the same ground, no chevron (it doesn't
+ * open), no pointer; the value keeps full contrast. */
+.aura-select.is-readonly { background: var(--aura-bg-input-disabled); }
+.aura-select.is-readonly .aura-input__control { cursor: default; padding-right: var(--aura-space-3); }
 
 .aura-radio-group > legend { margin-bottom: 6px; }
 .aura-radio-group__list { display: flex; flex-direction: column; gap: var(--aura-space-3); }
@@ -528,6 +532,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-switch.is-on .aura-switch__thumb { transform: translateX(16px); background: var(--aura-button-primary-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
+ * focusable; only the pointer says it won't change. The row's icon (a lock) sits at its end, like a field's icon. */
+.aura-switch-row.is-readonly, .aura-switch-row.is-readonly .aura-switch, .aura-switch-row.is-readonly .aura-choice__label { cursor: default; }
+.aura-switch-row__icon { flex: none; margin-inline-start: auto; margin-top: 2px; width: var(--aura-icon-sm); height: var(--aura-icon-sm); color: var(--aura-fg-secondary); }
 
 /* ---------- Alerts & toasts ---------- */
 .aura-alert {
@@ -1414,7 +1422,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding-block: calc((var(--aura-touch-target) - 20px) / 2);
   }
   .aura-check--labelled .aura-check__input { top: calc((var(--aura-touch-target) - 20px) / 2 + 3px); }
-  .aura-switch-row:not(.is-disabled) { cursor: pointer; }
+  .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); }
 }
@@ -1566,10 +1574,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 [data-density='compact'] {
   --aura-input-height: 36px; --aura-button-height: 36px; --aura-table-row-height: 40px;
   --aura-button-padding-x: var(--aura-space-4);
+  /* 5.20 (Chamber-OS 115): a static Table's vertical cell padding, and its stacked cards', inherited from the nearest
+   * density — a provider's wrapper, <html>, or the table's own wrap — so "comfortable" inside compact switches back. */
+  --aura-tbl-cell-py: var(--aura-space-2); --aura-tbl-card-py: var(--aura-space-2);
 }
 [data-density='comfortable'] {
   --aura-input-height: 44px; --aura-button-height: 44px; --aura-table-row-height: 48px;
   --aura-button-padding-x: var(--aura-space-6);
+  --aura-tbl-cell-py: var(--aura-space-3); --aura-tbl-card-py: var(--aura-space-4);
 }
 @media (pointer: coarse) {
   [data-density='compact'] { --aura-input-height: 44px; --aura-button-height: 44px; --aura-table-row-height: 48px; --aura-button-padding-x: var(--aura-space-6); }
@@ -1628,20 +1640,31 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 
 /* ---------- 4.19: ActionBar ---------- */
 /* Sticky, not fixed: it keeps its place at the end of its parent, so it never covers the last field. */
-.aura-actionbar { position: sticky; z-index: var(--aura-z-bar); box-sizing: border-box; background: var(--aura-bg-surface); color: var(--aura-fg-primary); font-family: var(--font-sans); }
+.aura-actionbar { position: sticky; z-index: var(--aura-z-bar); box-sizing: border-box; width: 100%; container: aura-actionbar / inline-size; contain-intrinsic-inline-size: auto 20rem; /* 5.20: its own width decides its layout (a bar in a card or dialog); a size container can't size to its content, so in a shrink-to-fit parent it falls back to 20rem */ background: var(--aura-bg-surface); color: var(--aura-fg-primary); font-family: var(--font-sans); }
 .aura-actionbar--viewport {
   bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)));
   margin-top: var(--aura-space-6);
   border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay);
 }
 .aura-actionbar--container { bottom: 0; border-top: 1px solid var(--aura-border-default); }
-.aura-actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-height: 60px; box-sizing: border-box; padding: var(--aura-space-2) var(--aura-space-3) var(--aura-space-2) var(--aura-space-4); }
+.aura-actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-height: 60px; box-sizing: border-box; padding-block: var(--aura-space-2); padding-inline: var(--aura-space-4) var(--aura-space-3); }
 .aura-actionbar__status { flex: 1 1 8rem; min-width: 0; font-size: 14px; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; }
 .aura-actionbar__status:empty { flex-basis: 0; }
-.aura-actionbar__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin-left: auto; }
+/* 5.20: an empty status leaves the row (it would still take a gap and push the start slot away from its edge) but
+ * stays in the page as a live region, so the next status is announced. */
+.aura-actionbar__inner.has-start > .aura-actionbar__status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.aura-actionbar__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin-inline-start: auto; }
 /* Bulk bar with nothing selected: out of sight and out of the tab order, its live region still in the page. */
 .aura-actionbar.is-idle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; box-shadow: none; }
-.aura-actionbar--container > .aura-actionbar__inner { padding-left: 0; padding-right: 0; }
+.aura-actionbar--container > .aura-actionbar__inner { padding-inline: 0; }
+/* 5.20 (Chamber-OS 116): the start slot. After the status in the markup, so Tab reaches it before the actions (the
+ * status is a live region, not focusable, so only reading order differs); when the bar is 640px or wider it moves to
+ * the start edge, the status (if any) between. Narrower bars — a phone, a card, a dialog — put a status line on its own
+ * row, so the start slot and the actions stay together on the next. */
+.aura-actionbar__start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+.aura-actionbar__start:empty { display: none; }
+@container aura-actionbar (min-width: 640px) { .aura-actionbar__start { order: -1; } }
+@container aura-actionbar (max-width: 639.98px) { .aura-actionbar__inner.has-start > .aura-actionbar__status:not(:empty) { flex-basis: 100%; } }
 
 /* ---------- 4.20: Separator ---------- */
 .aura-separator { flex: none; align-self: stretch; height: 1px; margin: var(--aura-separator-space, 0) 0; background: var(--aura-border-default); border: 0; }
@@ -1655,7 +1678,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 }
 .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__th, .aura-tbl__td { padding: var(--aura-space-3) var(--aura-space-4); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
+.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; }
 .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 {
@@ -1670,7 +1693,6 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl .is-end { text-align: right; }
 .aura-tbl .is-center { text-align: center; }
 .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). */
@@ -1687,8 +1709,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .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__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-space-3) var(--aura-space-4); }
-  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--stack-md > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { 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; }
   .aura-tbl--stack-md > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
@@ -1710,8 +1731,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .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__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-space-3) var(--aura-space-4); }
-  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--stack-sm > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { 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; }
   .aura-tbl--stack-sm > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
@@ -1737,24 +1757,22 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl-cards--md > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
   .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
   .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row {
-    margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);
+    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 > :last-child > .aura-tbl__row:last-child { margin-bottom: 0; }
-  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--cards.aura-tbl--stack-md > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
   .aura-tbl-wrap.is-flush > .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
 }
 @container aura-tbl (width < 640px) {
   .aura-tbl-cards--sm > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
   .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
   .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row {
-    margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);
+    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 > :last-child > .aura-tbl__row:last-child { margin-bottom: 0; }
-  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--cards.aura-tbl--stack-sm > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
   .aura-tbl-wrap.is-flush > .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
 }
 

package/dist/styles.layer.css

@@ -489,6 +489,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-select__value.is-placeholder { color: var(--aura-fg-tertiary); }
 .aura-select__group { padding: var(--aura-space-2) var(--aura-space-2) var(--aura-space-1); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aura-fg-tertiary); }
 .aura-select.is-open .aura-select__chevron { transform: rotate(180deg); }
+/* 5.19 (Chamber-OS 114): a read-only Select looks like a read-only TextField — the same ground, no chevron (it doesn't
+ * open), no pointer; the value keeps full contrast. */
+.aura-select.is-readonly { background: var(--aura-bg-input-disabled); }
+.aura-select.is-readonly .aura-input__control { cursor: default; padding-right: var(--aura-space-3); }
 
 .aura-radio-group > legend { margin-bottom: 6px; }
 .aura-radio-group__list { display: flex; flex-direction: column; gap: var(--aura-space-3); }
@@ -530,6 +534,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-switch.is-on .aura-switch__thumb { transform: translateX(16px); background: var(--aura-button-primary-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
+ * focusable; only the pointer says it won't change. The row's icon (a lock) sits at its end, like a field's icon. */
+.aura-switch-row.is-readonly, .aura-switch-row.is-readonly .aura-switch, .aura-switch-row.is-readonly .aura-choice__label { cursor: default; }
+.aura-switch-row__icon { flex: none; margin-inline-start: auto; margin-top: 2px; width: var(--aura-icon-sm); height: var(--aura-icon-sm); color: var(--aura-fg-secondary); }
 
 /* ---------- Alerts & toasts ---------- */
 .aura-alert {
@@ -1416,7 +1424,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding-block: calc((var(--aura-touch-target) - 20px) / 2);
   }
   .aura-check--labelled .aura-check__input { top: calc((var(--aura-touch-target) - 20px) / 2 + 3px); }
-  .aura-switch-row:not(.is-disabled) { cursor: pointer; }
+  .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); }
 }
@@ -1568,10 +1576,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 [data-density='compact'] {
   --aura-input-height: 36px; --aura-button-height: 36px; --aura-table-row-height: 40px;
   --aura-button-padding-x: var(--aura-space-4);
+  /* 5.20 (Chamber-OS 115): a static Table's vertical cell padding, and its stacked cards', inherited from the nearest
+   * density — a provider's wrapper, <html>, or the table's own wrap — so "comfortable" inside compact switches back. */
+  --aura-tbl-cell-py: var(--aura-space-2); --aura-tbl-card-py: var(--aura-space-2);
 }
 [data-density='comfortable'] {
   --aura-input-height: 44px; --aura-button-height: 44px; --aura-table-row-height: 48px;
   --aura-button-padding-x: var(--aura-space-6);
+  --aura-tbl-cell-py: var(--aura-space-3); --aura-tbl-card-py: var(--aura-space-4);
 }
 @media (pointer: coarse) {
   [data-density='compact'] { --aura-input-height: 44px; --aura-button-height: 44px; --aura-table-row-height: 48px; --aura-button-padding-x: var(--aura-space-6); }
@@ -1630,20 +1642,31 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 
 /* ---------- 4.19: ActionBar ---------- */
 /* Sticky, not fixed: it keeps its place at the end of its parent, so it never covers the last field. */
-.aura-actionbar { position: sticky; z-index: var(--aura-z-bar); box-sizing: border-box; background: var(--aura-bg-surface); color: var(--aura-fg-primary); font-family: var(--font-sans); }
+.aura-actionbar { position: sticky; z-index: var(--aura-z-bar); box-sizing: border-box; width: 100%; container: aura-actionbar / inline-size; contain-intrinsic-inline-size: auto 20rem; /* 5.20: its own width decides its layout (a bar in a card or dialog); a size container can't size to its content, so in a shrink-to-fit parent it falls back to 20rem */ background: var(--aura-bg-surface); color: var(--aura-fg-primary); font-family: var(--font-sans); }
 .aura-actionbar--viewport {
   bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)));
   margin-top: var(--aura-space-6);
   border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay);
 }
 .aura-actionbar--container { bottom: 0; border-top: 1px solid var(--aura-border-default); }
-.aura-actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-height: 60px; box-sizing: border-box; padding: var(--aura-space-2) var(--aura-space-3) var(--aura-space-2) var(--aura-space-4); }
+.aura-actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-height: 60px; box-sizing: border-box; padding-block: var(--aura-space-2); padding-inline: var(--aura-space-4) var(--aura-space-3); }
 .aura-actionbar__status { flex: 1 1 8rem; min-width: 0; font-size: 14px; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; }
 .aura-actionbar__status:empty { flex-basis: 0; }
-.aura-actionbar__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin-left: auto; }
+/* 5.20: an empty status leaves the row (it would still take a gap and push the start slot away from its edge) but
+ * stays in the page as a live region, so the next status is announced. */
+.aura-actionbar__inner.has-start > .aura-actionbar__status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.aura-actionbar__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin-inline-start: auto; }
 /* Bulk bar with nothing selected: out of sight and out of the tab order, its live region still in the page. */
 .aura-actionbar.is-idle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; box-shadow: none; }
-.aura-actionbar--container > .aura-actionbar__inner { padding-left: 0; padding-right: 0; }
+.aura-actionbar--container > .aura-actionbar__inner { padding-inline: 0; }
+/* 5.20 (Chamber-OS 116): the start slot. After the status in the markup, so Tab reaches it before the actions (the
+ * status is a live region, not focusable, so only reading order differs); when the bar is 640px or wider it moves to
+ * the start edge, the status (if any) between. Narrower bars — a phone, a card, a dialog — put a status line on its own
+ * row, so the start slot and the actions stay together on the next. */
+.aura-actionbar__start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+.aura-actionbar__start:empty { display: none; }
+@container aura-actionbar (min-width: 640px) { .aura-actionbar__start { order: -1; } }
+@container aura-actionbar (max-width: 639.98px) { .aura-actionbar__inner.has-start > .aura-actionbar__status:not(:empty) { flex-basis: 100%; } }
 
 /* ---------- 4.20: Separator ---------- */
 .aura-separator { flex: none; align-self: stretch; height: 1px; margin: var(--aura-separator-space, 0) 0; background: var(--aura-border-default); border: 0; }
@@ -1657,7 +1680,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 }
 .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__th, .aura-tbl__td { padding: var(--aura-space-3) var(--aura-space-4); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
+.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; }
 .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 {
@@ -1672,7 +1695,6 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl .is-end { text-align: right; }
 .aura-tbl .is-center { text-align: center; }
 .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). */
@@ -1689,8 +1711,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .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__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-space-3) var(--aura-space-4); }
-  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--stack-md > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { 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; }
   .aura-tbl--stack-md > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
@@ -1712,8 +1733,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .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__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-space-3) var(--aura-space-4); }
-  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--stack-sm > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { 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; }
   .aura-tbl--stack-sm > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
@@ -1739,24 +1759,22 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tbl-cards--md > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
   .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
   .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row {
-    margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);
+    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 > :last-child > .aura-tbl__row:last-child { margin-bottom: 0; }
-  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--cards.aura-tbl--stack-md > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
   .aura-tbl-wrap.is-flush > .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
 }
 @container aura-tbl (width < 640px) {
   .aura-tbl-cards--sm > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
   .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
   .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row {
-    margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);
+    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 > :last-child > .aura-tbl__row:last-child { margin-bottom: 0; }
-  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--cards.aura-tbl--stack-sm > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
   .aura-tbl-wrap.is-flush > .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
 }
 

package/package.json

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