@jirawatpyk/aura-react 4.19.0 → 5.0.0

package/dist/index.d.ts

@@ -74,7 +74,7 @@ export interface DataTableColumn {
 	pinned?: boolean | undefined;
 	/** Start hidden (show it from the columns button). */
 	hidden?: boolean | undefined;
-	/** Hide this column when the table is narrower than this (px, or a breakpoint name). For tablets: keep ID, name, date and status; drop the rest below `lg`. Not applied to stacked cards. */
+	/** Hide this column when the table is narrower than this (px, or a breakpoint name). For tablets: keep ID, name, date and status; drop the rest below `lg`. Not applied to stacked cards. Decided in CSS from the first paint (4.20) for up to three distinct widths per table; more than that apply once JavaScript runs. */
 	hideBelow?: number | "sm" | "md" | "lg" | "xl" | undefined;
 	/** Row actions (a DropdownMenu or IconButton). In stacked cards it sits top-right instead of in the field list. Give it an empty label. */
 	actions?: boolean | undefined;
@@ -171,7 +171,7 @@ export interface DataTableProps {
 	onPinnedColumnsChange?: ((keys: string[]) => void) | undefined;
 	/** `compact` = 40px rows (48px on touch screens). Default: the surrounding density. */
 	density?: "comfortable" | "compact" | undefined;
-	/** Container width in px below which rows render as stacked cards (phones). Try 640. Measured with ResizeObserver, so it follows the container, not the window. */
+	/** Table width in px below which rows render as stacked cards (phones). Try 640. It follows the table's own width, not the window. Since 4.20 the cards are the same markup as the grid, laid out by a container query, so any width is right before hydration and each row is in the HTML once. */
 	stackBelow?: number | undefined;
 	className?: string | undefined;
 }
@@ -479,7 +479,9 @@ export interface TooltipProps {
 	content: React$1.ReactNode;
 	/** One focusable element. */
 	children: React$1.ReactElement;
-	side?: "top" | "bottom" | undefined;
+	/** Preferred side. Default `top`. `left` / `right` (4.20) for icon buttons at the right edge of a table or in a
+	 * collapsed rail. Flips to the opposite side when clipped, and always stays inside the viewport. */
+	side?: "top" | "bottom" | "left" | "right" | undefined;
 	/** Hover delay in ms. Default 400. */
 	delay?: number | undefined;
 	/** Force open (demos, tests). */
@@ -743,7 +745,7 @@ export interface SegmentedControlProps {
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {
-	/** Components: the AuraProvider's locale, else `en`. `formatDate()` (no provider to read): `th` unless given. */
+	/** Components: the AuraProvider's locale, else `en`. `formatDate()` (no provider to read): `en` unless given (5.0; `th` before). */
 	locale?: "th" | "en" | "sv" | undefined;
 	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
 	calendar?: "buddhist" | "gregory" | undefined;
@@ -866,6 +868,41 @@ export interface AppShellProps {
 	bottomNav?: React$1.ReactElement | undefined;
 	className?: string | undefined;
 }
+export interface SeparatorProps {
+	/** Default `horizontal` (full width). `vertical` fills the height of a flex row, e.g. between toolbar groups. */
+	orientation?: "horizontal" | "vertical" | undefined;
+	/** Default true: hidden from screen readers. `false` renders `role="separator"`, announced as a boundary. */
+	decorative?: boolean | undefined;
+	/** Space on both sides, as an `aura-space-*` step (e.g. 4 = 16px). Default 0. */
+	spacing?: 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
+	className?: string | undefined;
+}
+export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className"> {
+	/** The table's name (a `<caption>`). Give every table one; `captionHidden` keeps it for screen readers only. */
+	caption?: React$1.ReactNode | undefined;
+	captionHidden?: boolean | undefined;
+	/** `compact` tightens the cell padding. Default follows the page. */
+	density?: "comfortable" | "compact" | undefined;
+	className?: string | undefined;
+	children?: React$1.ReactNode | undefined;
+}
+export interface TableSectionProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
+	className?: string | undefined;
+}
+export interface TableRowProps extends React$1.HTMLAttributes<HTMLTableRowElement> {
+	className?: string | undefined;
+}
+export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableCellElement>, "align" | "scope"> {
+	/** Text alignment. `numeric` implies `end`. */
+	align?: "start" | "center" | "end" | undefined;
+	/** Money and counts: right-aligned, tabular figures. */
+	numeric?: boolean | undefined;
+	/** IDs and codes in the mono face. */
+	mono?: boolean | undefined;
+	/** Th only. Default `col`. */
+	scope?: "col" | "row" | "colgroup" | "rowgroup" | undefined;
+	className?: string | undefined;
+}
 export interface ActionBarProps {
 	/** Buttons, right-aligned (the primary one last). */
 	children?: React$1.ReactNode | undefined;
@@ -1190,7 +1227,9 @@ export declare const Combobox: ComboboxComponent;
 export type FormatDateOptions = DateDisplayOptions & {
 	format?: "short" | "long" | "numeric" | Intl.DateTimeFormatOptions | undefined;
 };
-/** Format an ISO date for display, e.g. "18 ก.ย. 2569" (th, Buddhist) or "18 Sept 2026" (en, Gregorian). */
+/** Format an ISO date for display: "18 Sept 2026" by default (English, Gregorian — 5.0); `{ locale: 'th' }` gives
+ * "18 ก.ย. 2569" (Buddhist era), `{ locale: 'sv' }` "18 sep. 2026". The same function from the package root and from
+ * `/server`. In components, `useFormatDate()` follows the AuraProvider's locale instead. */
 export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
 /** Parse typed text: dd/mm/yyyy (Buddhist years ≥ 2400 are converted), d-m-yyyy, d.m.yyyy, yyyy-mm-dd or '18 ก.ย. 2569' / '18 Sep 2026'. */
 export declare function parseDate(text: string | null | undefined): ISODate | null;
@@ -1257,6 +1296,19 @@ export declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps &
 /** ActionBar — a bar stuck to the bottom of the screen or of a card: a status line and the form's or selection's
  * actions. It is `position: sticky`, so it stays in the flow at the end of its parent and never covers the last field. */
 export declare const ActionBar: React$1.ForwardRefExoticComponent<ActionBarProps & React$1.RefAttributes<HTMLDivElement>>;
+/** Separator — a 1px `aura-border-default` rule between groups of content (4.20). Decorative by default (hidden from
+ * screen readers); `decorative={false}` makes it a `role="separator"` that is announced. */
+export declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+/** A static table. Scrolls sideways inside its own box when it is wider than its container. */
+export declare const Table: React$1.ForwardRefExoticComponent<TableProps & React$1.RefAttributes<HTMLTableElement>>;
+export declare const THead: React$1.ForwardRefExoticComponent<TableSectionProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+export declare const TBody: React$1.ForwardRefExoticComponent<TableSectionProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+export declare const TFoot: React$1.ForwardRefExoticComponent<TableSectionProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+export declare const Tr: React$1.ForwardRefExoticComponent<TableRowProps & React$1.RefAttributes<HTMLTableRowElement>>;
+/** Header cell. `scope` defaults to `col`; pass `scope="row"` for a row header in the body. */
+export declare const Th: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
+/** Data cell. `numeric` right-aligns with tabular figures (money, counts). */
+export declare const Td: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
 /** BottomNav — a phone tab bar: icon over a short label, a count or dot, the current page marked. Fixed to the bottom,
  * padded for the home indicator, with a spacer of the same height in the flow so nothing sits under it. Which
  * breakpoints show it is decided in CSS, so the server's HTML is already right and nothing shifts on hydration. */

package/dist/server/index.cjs

@@ -27,7 +27,7 @@ __export(server_exports, {
   contrast: () => contrast,
   createTheme: () => createTheme,
   formatBytes: () => formatBytes,
-  formatDate: () => formatDate2,
+  formatDate: () => formatDate,
   fromISO: () => fromISO,
   parseDate: () => parseDate,
   parseTime: () => parseTime,
@@ -73,7 +73,7 @@ function formatDate(iso, opts) {
   const o = opts || {}, d = fromISO(iso);
   if (!d) return "";
   const f = typeof o.format === "object" ? o.format : PRESETS[o.format || "short"];
-  const loc = o.locale || "th";
+  const loc = o.locale || "en";
   return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
 }
 var MONTHS = null;
@@ -796,10 +796,3 @@ function colorSchemeScript(options) {
 
 // src/breakpoints.ts
 var breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
-
-// src/server.ts
-function formatDate2(iso, opts) {
-  const o = Object.assign({}, opts);
-  if (!o.locale) o.locale = "en";
-  return formatDate(iso, o);
-}

package/dist/server/index.d.ts

@@ -4,7 +4,7 @@ export type StatusTone = "neutral" | "progress" | "ready" | "blocked";
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {
-	/** Components: the AuraProvider's locale, else `en`. `formatDate()` (no provider to read): `th` unless given. */
+	/** Components: the AuraProvider's locale, else `en`. `formatDate()` (no provider to read): `en` unless given (5.0; `th` before). */
 	locale?: "th" | "en" | "sv" | undefined;
 	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
 	calendar?: "buddhist" | "gregory" | undefined;
@@ -42,6 +42,10 @@ export type FormatDateOptions = DateDisplayOptions & {
 };
 export declare function toISO(d: Date | null | undefined): ISODate | null;
 export declare function fromISO(s: ISODate | null | undefined): Date | null;
+/** Format an ISO date for display: "18 Sept 2026" by default (English, Gregorian — 5.0); `{ locale: 'th' }` gives
+ * "18 ก.ย. 2569" (Buddhist era), `{ locale: 'sv' }` "18 sep. 2026". The same function from the package root and from
+ * `/server`. In components, `useFormatDate()` follows the AuraProvider's locale instead. */
+export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
 /** Parse typed text: dd/mm/yyyy (Buddhist years ≥ 2400 are converted), d-m-yyyy, d.m.yyyy, yyyy-mm-dd or '18 ก.ย. 2569' / '18 Sep 2026'. */
 export declare function parseDate(text: string | null | undefined): ISODate | null;
 /** Today as an ISO date in an IANA time zone (e.g. `Asia/Bangkok`), or in the runtime's own zone without one. (4.19) */
@@ -162,9 +166,6 @@ export declare const breakpoints: {
 	lg: 1024;
 	xl: 1280;
 };
-/** Format an ISO date for display: "24 Sept 2026" by default (English, Gregorian); `{ locale: 'th' }` gives
- * "24 ก.ย. 2569", `{ locale: 'sv' }` "24 sep. 2026". Options as in the package root's formatDate. */
-export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
 
 export {
 	scale as brandScale,

package/dist/server/index.js

@@ -34,7 +34,7 @@ function formatDate(iso, opts) {
   const o = opts || {}, d = fromISO(iso);
   if (!d) return "";
   const f = typeof o.format === "object" ? o.format : PRESETS[o.format || "short"];
-  const loc = o.locale || "th";
+  const loc = o.locale || "en";
   return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
 }
 var MONTHS = null;
@@ -757,13 +757,6 @@ function colorSchemeScript(options) {
 
 // src/breakpoints.ts
 var breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
-
-// src/server.ts
-function formatDate2(iso, opts) {
-  const o = Object.assign({}, opts);
-  if (!o.locale) o.locale = "en";
-  return formatDate(iso, o);
-}
 export {
   STRINGS,
   scale as brandScale,
@@ -772,7 +765,7 @@ export {
   contrast,
   createTheme,
   formatBytes,
-  formatDate2 as formatDate,
+  formatDate,
   fromISO,
   parseDate,
   parseTime,

package/dist/styles.css

@@ -82,16 +82,17 @@ a.aura-btn { text-decoration: none; }
   background: var(--aura-bg-surface);
   color: var(--aura-fg-primary);
 }
-.aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; }
+.aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; height: var(--aura-table-h, auto); }
 .aura-table__head {
   position: sticky; top: 0; z-index: 3; box-sizing: border-box;   /* the hairline is inside the row height */
-  display: flex; height: var(--aura-table-row-height);
+  display: flex; height: var(--aura-table-row-height); min-width: var(--aura-row-min, 0);
   background: var(--aura-bg-canvas);
   border-bottom: 1px solid var(--aura-border-default);
   font-family: var(--font-mono); font-size: 12px; color: var(--aura-fg-secondary);
 }
 .aura-table__row {
   box-sizing: border-box; display: flex; height: var(--aura-table-row-height);   /* exactly the virtual row height */
+  min-width: var(--aura-row-min, 0);
   background: var(--aura-bg-surface);
   border-bottom: 1px solid var(--aura-border-default);
   font-size: 13px;
@@ -110,15 +111,14 @@ a.aura-btn { text-decoration: none; }
 .aura-table__row--skeleton .aura-table__td.is-end { justify-content: flex-end; }
 /* Row links (getRowHref): the first cell's text is the link; the whole row is the click target */
 .aura-table__row-link { color: inherit; text-decoration: none; }
-.aura-table__row-link:hover, .aura-table__row:hover .aura-table__row-link, .aura-table__card:hover .aura-table__row-link { text-decoration: underline; text-underline-offset: 2px; }
+.aura-table__row-link:hover, .aura-table__row:hover .aura-table__row-link { text-decoration: underline; text-underline-offset: 2px; }
 .aura-table__row-link:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }
 /* Server mode refresh: the previous page stays, inactive, under a progress bar until the next one arrives */
-.aura-table.is-refreshing .aura-table__row, .aura-table.is-refreshing .aura-table__card { opacity: 0.6; pointer-events: none; }
+.aura-table.is-refreshing .aura-table__row { opacity: 0.6; pointer-events: none; }
 .aura-table__busy-bar {
   position: absolute; z-index: 6; top: calc(var(--aura-table-row-height) - 2px); left: 0; right: 0; height: 2px; overflow: hidden;
   border-radius: var(--aura-radius-full); pointer-events: none;
 }
-.aura-table--stacked .aura-table__busy-bar { top: 0; }
 .aura-table__busy-bar::after {
   content: ''; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--aura-fg-accent);
   animation: aura-progress-slide var(--aura-duration-pulse) var(--aura-ease) infinite;
@@ -132,6 +132,9 @@ a.aura-btn { text-decoration: none; }
 }
 .aura-table__td .aura-pill, .aura-table__td .aura-dropdown, .aura-table__td > .aura-icon-btn, .aura-table__td > .aura-btn { vertical-align: middle; }
 .aura-table__th { position: relative; box-sizing: border-box; display: flex; align-items: center; padding-right: var(--aura-space-2); }
+/* Column sizes come from custom properties set per cell (4.20), so the card layout can override them. */
+.aura-table__th, .aura-table__td { flex: var(--aura-cell-flex, none); width: var(--aura-cell-w, auto); min-width: var(--aura-cell-min, 0); }
+.aura-table__break, .aura-table__sel-text { display: none; }
 .aura-table__th-inner { display: flex; align-items: center; gap: var(--aura-space-1); min-width: 0; width: 100%; }
 .aura-table__th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .aura-table__pin-icon { color: var(--aura-fg-secondary); }
@@ -153,7 +156,7 @@ a.aura-btn { text-decoration: none; }
 .aura-table__sel.is-pinned { position: sticky; left: var(--aura-space-6); z-index: 2; }
 
 /* Pinned columns */
-.aura-table__th.is-pinned, .aura-table__td.is-pinned { position: sticky; z-index: 2; background: inherit; }
+.aura-table__th.is-pinned, .aura-table__td.is-pinned { position: sticky; left: var(--aura-cell-left, auto); z-index: 2; background: inherit; }
 .aura-table.is-scrolled-x .is-pin-edge { box-shadow: inset -1px 0 0 var(--aura-border-default); }
 
 /* Cell focus — the grid's single tab stop moves cell by cell */
@@ -850,32 +853,11 @@ a.aura-tab { text-decoration: none; }
 /* The shell already pads its content: a Container directly inside only caps the width. */
 .aura-shell__content > .aura-container { padding-left: 0; padding-right: 0; }
 
-/* ---------- DataTable: stacked cards ---------- */
-.aura-table--stacked { background: transparent; border: 0; border-radius: 0; overflow: visible; }
-.aura-table__stack-bar { display: flex; align-items: center; gap: var(--aura-space-3); padding: 0 var(--aura-space-4) var(--aura-space-3); font-size: 13px; color: var(--aura-fg-secondary); }
-.aura-table__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--aura-space-2); }
-.aura-table__card {
-  display: flex; flex-direction: column; gap: var(--aura-space-3); padding: var(--aura-space-4);
-  background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); font-size: 13px;
-}
-.aura-table__card.is-selected { background: var(--aura-bg-selected); }
-.aura-table__card.is-actionable { cursor: pointer; }
-.aura-table__card:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
-.aura-table__card-head { display: flex; align-items: center; gap: var(--aura-space-3); }
-.aura-table__card-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.aura-table__card-actions { display: inline-flex; margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-2)) calc(-1 * var(--aura-space-1)) 0; }
-.aura-table__card-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aura-space-2) var(--aura-space-4); margin: 0; }
-.aura-table__card-fields dt { font-family: var(--font-mono); font-size: 11px; color: var(--aura-fg-secondary); }
-.aura-table__card-fields dd { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.aura-table__card-fields dd.is-end { text-align: right; font-variant-numeric: tabular-nums; }
-.aura-table__card--total { background: var(--aura-bg-canvas); font-weight: 600; }
 /* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
 .aura-table__total { background: var(--aura-bg-canvas); border-top: 1px solid var(--aura-border-strong); font-weight: 600; }
 .aura-table__total.is-sticky { position: sticky; bottom: 0; z-index: 3; }
 .aura-table__total .aura-table__td.is-end { font-variant-numeric: tabular-nums; }
 .aura-tooltip--above { transform: translateY(-100%); max-width: min(var(--aura-tooltip-max), 90vw); white-space: normal; }
-.aura-table--stacked .aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); }
-.aura-table--stacked .aura-table__empty { background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); }
 
 /* ---------- Stat ---------- */
 .aura-stat {
@@ -1338,36 +1320,6 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-density { display: contents; }
 
 
-/* DataTable: cards before hydration (4.16). While a stackBelow table hasn't measured itself yet (server HTML, first
- * client render) it holds both layouts; these container queries show one, so a phone never sees the grid first. */
-.aura-table-dual { container-type: inline-size; }
-@container (min-width: 360px) { .aura-table-dual[data-stack-below='360'] > .aura-table--stacked { display: none; } }
-@container (max-width: 359.98px) { .aura-table-dual[data-stack-below='360'] > .aura-table:not(.aura-table--stacked) { display: none; } }
-@container (min-width: 400px) { .aura-table-dual[data-stack-below='400'] > .aura-table--stacked { display: none; } }
-@container (max-width: 399.98px) { .aura-table-dual[data-stack-below='400'] > .aura-table:not(.aura-table--stacked) { display: none; } }
-@container (min-width: 480px) { .aura-table-dual[data-stack-below='480'] > .aura-table--stacked { display: none; } }
-@container (max-width: 479.98px) { .aura-table-dual[data-stack-below='480'] > .aura-table:not(.aura-table--stacked) { display: none; } }
-@container (min-width: 520px) { .aura-table-dual[data-stack-below='520'] > .aura-table--stacked { display: none; } }
-@container (max-width: 519.98px) { .aura-table-dual[data-stack-below='520'] > .aura-table:not(.aura-table--stacked) { display: none; } }
-@container (min-width: 560px) { .aura-table-dual[data-stack-below='560'] > .aura-table--stacked { display: none; } }
-@container (max-width: 559.98px) { .aura-table-dual[data-stack-below='560'] > .aura-table:not(.aura-table--stacked) { display: none; } }
-@container (min-width: 600px) { .aura-table-dual[data-stack-below='600'] > .aura-table--stacked { display: none; } }
-@container (max-width: 599.98px) { .aura-table-dual[data-stack-below='600'] > .aura-table:not(.aura-table--stacked) { display: none; } }
-@container (min-width: 640px) { .aura-table-dual[data-stack-below='640'] > .aura-table--stacked { display: none; } }
-@container (max-width: 639.98px) { .aura-table-dual[data-stack-below='640'] > .aura-table:not(.aura-table--stacked) { display: none; } }
-@container (min-width: 720px) { .aura-table-dual[data-stack-below='720'] > .aura-table--stacked { display: none; } }
-@container (max-width: 719.98px) { .aura-table-dual[data-stack-below='720'] > .aura-table:not(.aura-table--stacked) { display: none; } }
-@container (min-width: 768px) { .aura-table-dual[data-stack-below='768'] > .aura-table--stacked { display: none; } }
-@container (max-width: 767.98px) { .aura-table-dual[data-stack-below='768'] > .aura-table:not(.aura-table--stacked) { display: none; } }
-@container (min-width: 800px) { .aura-table-dual[data-stack-below='800'] > .aura-table--stacked { display: none; } }
-@container (max-width: 799.98px) { .aura-table-dual[data-stack-below='800'] > .aura-table:not(.aura-table--stacked) { display: none; } }
-@container (min-width: 900px) { .aura-table-dual[data-stack-below='900'] > .aura-table--stacked { display: none; } }
-@container (max-width: 899.98px) { .aura-table-dual[data-stack-below='900'] > .aura-table:not(.aura-table--stacked) { display: none; } }
-@container (min-width: 960px) { .aura-table-dual[data-stack-below='960'] > .aura-table--stacked { display: none; } }
-@container (max-width: 959.98px) { .aura-table-dual[data-stack-below='960'] > .aura-table:not(.aura-table--stacked) { display: none; } }
-@container (min-width: 1024px) { .aura-table-dual[data-stack-below='1024'] > .aura-table--stacked { display: none; } }
-@container (max-width: 1023.98px) { .aura-table-dual[data-stack-below='1024'] > .aura-table:not(.aura-table--stacked) { display: none; } }
-
 /* ---------- 4.19: BottomNav ---------- */
 /* Fixed to the bottom and padded for the home indicator; the spacer before it holds the same height in the flow.
  * Shown below its breakpoint in CSS, so the server's HTML is right before hydration. */
@@ -1431,3 +1383,98 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 /* 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; }
+
+/* ---------- 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; }
+.aura-separator--vertical { width: 1px; height: auto; min-height: 1em; margin: 0 var(--aura-separator-space, 0); }
+
+/* ---------- 4.20: Table (static) ---------- */
+/* DataTable's grid look — mono header band, hairlines, 20px outer radius — on plain <table> markup, with wrapping text. */
+.aura-tbl-wrap {
+  overflow-x: auto; border: 1px solid var(--aura-border-default); border-radius: var(--aura-card-radius);
+  background: var(--aura-bg-surface); color: var(--aura-fg-primary); font-family: var(--font-sans);
+}
+.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:first-child, .aura-tbl__td:first-child { padding-left: var(--aura-space-6); }
+.aura-tbl__th:last-child, .aura-tbl__td:last-child { padding-right: var(--aura-space-6); }
+.aura-tbl__head .aura-tbl__th {
+  background: var(--aura-bg-canvas); border-bottom: 1px solid var(--aura-border-default);
+  font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--aura-fg-secondary); white-space: nowrap;
+}
+.aura-tbl__body .aura-tbl__row + .aura-tbl__row > * { border-top: 1px solid var(--aura-border-default); }
+.aura-tbl__body .aura-tbl__th { font-weight: 500; }
+.aura-tbl__foot > .aura-tbl__row > * { background: var(--aura-bg-canvas); font-weight: 600; }
+.aura-tbl__foot > .aura-tbl__row:first-child > * { border-top: 1px solid var(--aura-border-strong); }
+.aura-tbl__foot > .aura-tbl__row + .aura-tbl__row > * { border-top: 1px solid var(--aura-border-default); }
+.aura-tbl .is-end { text-align: right; }
+.aura-tbl .is-center { text-align: center; }
+.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; }
+
+/* ---------- 4.20: DataTable width queries and cards, one markup ---------- */
+/* Each .aura-table-q is the table's width × 10000 / its threshold (DataTable.tsx, Q), so `(width < 9999.5px)` is true
+ * exactly when the table is narrower than stackBelow or a hideBelow width — before hydration, at any width. */
+.aura-table-box { overflow-x: clip; }
+.aura-table-q { width: calc(100% * var(--aura-q-scale)); container-type: inline-size; }
+.aura-table-q--stack { container-name: aura-stack; }
+.aura-table-q--h1 { container-name: aura-h1; }
+.aura-table-q--h2 { container-name: aura-h2; }
+.aura-table-q--h3 { container-name: aura-h3; }
+.aura-table-q .aura-table { width: calc(100% * var(--aura-q-back)); box-sizing: border-box; }
+@container aura-h1 (width < 9999.5px) { .aura-table { --aura-h1-on: 0; } .aura-table [data-hide='1'] { display: none; } }
+@container aura-h2 (width < 9999.5px) { .aura-table { --aura-h2-on: 0; } .aura-table [data-hide='2'] { display: none; } }
+@container aura-h3 (width < 9999.5px) { .aura-table { --aura-h3-on: 0; } .aura-table [data-hide='3'] { display: none; } }
+
+/* Below stackBelow the same grid lays out as cards: the first column is the title, the first other pill column sits
+ * beside it, `actions` columns go top-right, the rest are label/value fields two to a line. Column headers stay for
+ * screen readers; the labels are generated content with empty alt text, so they aren't read twice. */
+@container aura-stack (width < 9999.5px) {
+  .aura-table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
+  .aura-table__scroll { overflow: visible; height: auto; }
+  .aura-table__busy-bar { top: 0; }
+  .aura-table__picker { display: none; }
+  .aura-table__head {
+    position: static; height: auto; min-width: 0; padding: 0 0 var(--aura-space-3); border: 0; background: none;
+    font-family: var(--font-sans); font-size: 13px;
+  }
+  .aura-table__head > .aura-table__th {
+    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+  }
+  .aura-table__head:not(.has-select-all) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
+  .aura-table__head > .aura-table__sel { position: static; width: auto; gap: var(--aura-space-3); padding: 0 var(--aura-space-4); }
+  .aura-table__sel-text { display: inline; color: var(--aura-fg-secondary); }
+  .aura-table__gutter { display: none; }
+  .aura-table__row, .aura-table__row:last-child {
+    height: auto; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-4);
+    margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);
+    border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg);
+  }
+  .aura-table__sel, .aura-table__th.is-pinned, .aura-table__td.is-pinned, .aura-table__total.is-sticky { position: static; box-shadow: none; }
+  .aura-table__row > .aura-table__sel { order: 0; width: auto; margin-right: calc(-1 * var(--aura-space-1)); }
+  .aura-table__td {
+    order: 5; flex: 0 0 calc(50% - var(--aura-space-4) / 2); align-self: flex-start; width: auto; min-width: 0; height: auto;
+    margin-bottom: var(--aura-space-1);
+    padding: 0; line-height: normal;
+  }
+  .aura-table__td[data-hide] { display: block; }
+  .aura-table__td[data-label]::before {
+    content: attr(data-label); content: attr(data-label) / '';
+    display: block; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start;
+    font-family: var(--font-mono); font-size: 11px; line-height: normal; font-weight: 400; color: var(--aura-fg-secondary);
+  }
+  .aura-table__td[data-card='title'], .aura-table__td[data-card='pill'], .aura-table__td[data-card='actions'] { align-self: center; margin-bottom: 0; }
+  .aura-table__td[data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
+  .aura-table__td[data-card='pill'] { order: 2; flex: none; }
+  .aura-table__td[data-card='actions'] { order: 3; flex: none; margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-2)) calc(-1 * var(--aura-space-1)) 0; }
+  /* Spacing: 12px under the title line, 8px between field lines (row gap 4 + the break's 4 + each field's 4 below). */
+  .aura-table__break { display: block; order: 4; flex: 0 0 100%; height: var(--aura-space-1); }
+  .aura-table__row:has(> .aura-table__break) { padding-bottom: calc(var(--aura-space-4) - var(--aura-space-1)); }
+  .aura-table__row--skeleton .aura-table__td { display: flex; }
+  .aura-table__total { background: var(--aura-bg-canvas); }
+  .aura-table__total > .is-blank { display: none; }
+  .aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); background: var(--aura-bg-surface); }
+  .aura-table__empty { background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); }
+}