@jirawatpyk/aura-react 5.19.0 → 5.20.0

package/README.md

@@ -186,6 +186,12 @@ 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`.

package/dist/aura.bundle.js

@@ -7164,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() {
@@ -7195,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)
     );
   });
 
@@ -7273,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];
@@ -7294,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

@@ -7146,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() {
@@ -7177,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)
   );
 });
 
@@ -7255,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];
@@ -7276,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/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

@@ -1176,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

@@ -1176,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

@@ -1574,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); }
@@ -1636,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; }
@@ -1663,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 {
@@ -1678,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). */
@@ -1695,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); }
@@ -1718,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); }
@@ -1745,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

@@ -1576,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); }
@@ -1638,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; }
@@ -1665,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 {
@@ -1680,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). */
@@ -1697,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); }
@@ -1720,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); }
@@ -1747,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.19.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",