@jirawatpyk/aura-react 5.13.0 → 5.15.0

package/README.md

@@ -186,6 +186,32 @@ 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.15 — Chamber-OS addenda 14–16, layout
+
+- **Table `stackStyle="cards"`** (item 85): below `stackBelow` each row is its own framed card (DataTable's card radius, border, padding and 8px gap), with no frame around them; above it the table is unchanged. The table then sits in one more `div` (`.aura-tbl-cards`), which carries the width query. Table roles, labels and the `card` slots behave as before.
+- **Card `header`** (item 87): free head content in place of `title` and `description` — skeleton bars while the card loads, a status pill above a title you mark up yourself. No heading is added and `title` / `titleId` are ignored; `actions` still sit top-right. Card `header` works from `/server` too.
+- **Progress `secondaryValue`** (item 89): a reserved amount drawn after `value` in the same tone, striped (so it reads without colour), clamped to the end of the track. Screen readers hear "2 of 6 used, 1 reserved" (Thai and Swedish included) unless you pass `valueLabel`.
+- **Tabs `fullWidth` for underline tabs** (item 90): `fullWidth` now works on the default look too, tabs sharing the row equally; `fullWidth="below-sm" | "below-md" | "below-lg"` does it only below that width (either look). Tabs never shrink below their label; too many scroll as before. Underline tabs that already passed `fullWidth` (ignored until now) now fill their row.
+- **FilterBar `controlsLayout="fill"` and `stackBelow="lg"`** (item 92): `fill` gives the filters equal columns across their row (at least 120px each, wrapping when they can't fit) with the count and actions at the end; `stackBelow="lg"` puts the search on its own row up to 1024px (default `md`, 768px).
+- **Card `flushBelow`** (item 93): `'sm' | 'md' | 'lg'` — below that width the card drops its border, surface and shadow (padding kept), for a list whose rows become cards of their own.
+- **Breadcrumb `collapseBelow` and item attributes** (item 94): `collapseBelow="sm" | "md"` shows the first item, "…" and the last below that width, in CSS (the server's HTML is already right); "…" is a button ("Show the full path") that shows the rest and moves focus to the first item it revealed; a new trail (the next page, with the Breadcrumb kept mounted) starts collapsed again. "…" is a 24px target, 44px on touch screens. Each item takes `itemProps` (its `<li>`) and `linkProps` (its link, button or text) — `data-slot`, `data-testid`.
+- **Checkbox `hitArea`** (item 99): `'target'` (24×24, WCAG 2.5.8) or `{ x, y }` px on each side — `{ x: 12, y: 8 }` is 40×32 — for a box without visible text; the box looks the same. A labelled checkbox's whole label is already its target.
+- **`touchHeight` on Button and IconButton** (item 100): 44px tall (IconButton 44×44) below 640px, the size asked for above; the label stays centred. A Drawer's close button takes it through `closeProps={{ touchHeight: true }}`. `buttonClass({ touchHeight: true })` from `/server` gives the same class. Off by default.
+- New strings `progressReserved` and `breadcrumbMore` in every locale; a pack you wrote yourself should add them (the built-in ones for the locale are used otherwise). The CSS budget is 25 kB (was 24).
+
+## 5.14 — Chamber-OS addenda 15–16, the small items
+
+- **EmptyState `headingLevel={false}`** (item 86): the title is a `<p>`, so an empty state inside a card or list adds nothing to the page's heading outline. EmptyState has no live-region role unless you pass `role`.
+- **Stat from `/server`, with `headingLevel`** (item 88): `import { Stat } from '@jirawatpyk/aura-react/server'` renders the same HTML as the root Stat (no `onClick` there; `href` renders `linkComponent`, else `<a>`), `loading` included. `headingLevel={2}` makes the label a heading — on a link tile too; with `onClick` it stays a span (a heading can't sit in a button) and a dev notice says so.
+- **Drawer body scroll padding** (item 91): a field scrolled into view in a Drawer (focus, a phone's keyboard) keeps 16px clear of the head and the foot, so its focus ring is never cut (WCAG 2.4.11).
+- **AppShell `contentPadding={false}`** (item 97): `<main>` has no padding, for pages whose containers own the padding and column.
+- **Button keeps a passed `aria-disabled`** (item 102): `<Button aria-disabled>` stays focusable and in the Tab order, is announced as unavailable, looks unavailable (disabled opacity, not-allowed cursor) and ignores clicks and Enter — a gated confirm. Hovering it changes nothing. `loading` still sets it. In tests, click such a button with `{ force: true }`. This is for buttons: a Button with `href` takes `disabled` (it drops the link and sets `aria-disabled` itself), and IconButton is unchanged.
+- **Avatar from `/server`** (item 103): initials and colour, same HTML as the root Avatar. Falling back to initials when an image fails needs the client.
+- **`--aura-shell-bar-height`** (item 104): the top bar's height on `.aura-shell`, for sticky offsets under it — `top: var(--aura-shell-bar-height)`. AppShell measures the bar, so a header that wraps to two lines on a phone gives its real height; the stylesheet's 56px covers the server's HTML until then. It is set inline on the shell, so read it rather than override it. It is 0 when there is no bar (no `header`, no `nav`), and from 1024px when the bar only held the menu button. The bar is now `box-sizing: border-box`, so it is 56px everywhere (it was 57px where no border-box reset applied).
+- **`--aura-fg-warning`** (item 106): warning text on the page — amber-800 in light (7.1:1 on surface, 6.8:1 on canvas), amber-300 in dark (12.3:1, 13.9:1), checked in CI. `--aura-status-*-fg` are only for text on their pill's own fill; the warning one is near-black in dark mode.
+- **DataTable cards start-align every field** (item 108): a column with `align: 'end'` is right-aligned in the grid and starts under its label in the stacked cards, with tabular figures in both. A visible change to cards with amount columns.
+- **Tabs `current="location"`** (item 107): link tabs to sections of the same page mark the current one `aria-current="location"` (default `page`).
+
 ## 5.13 — Chamber-OS addendum 13 (board parity)
 
 - **DataTable card options** (item 80): per column, `card: 'hide'` leaves it out of the stacked card (the grid keeps it), `card: 'title' | 'pill' | 'field'` places it (a declared title or pill replaces the automatic one; the automatic title is the first column without a `card` — normally the first column — skipping `actions` columns), and `cardOrder` orders the fields (lowest first; others sort by column index) without touching the grid's order. `hideSelectionInCards` drops the row boxes and the select-all line from the cards only; the selection is kept, and Space doesn't change it while cards show. Screen readers and arrow keys follow the grid's order and skip what the card leaves out (the tab stop too); each remaining field keeps its label; loading skeletons leave out the same columns. With `getRowHref`, the link is the first column's text, so hiding that column in cards leaves the card clickable but without a link to Tab to. All in CSS, so the server HTML is already right.