@jirawatpyk/aura-react 5.31.0 → 5.33.0

package/README.md

@@ -186,6 +186,29 @@ 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.33 — DxT Monitor requests 5–8
+
+- **Hover shows on the canvas** (request 5): in light, `aura-bg-surface-hover` is zinc-50 — the canvas itself — so SideNav's rows, an IconButton or ghost Button in its header or footer (Sign out), and the same on the page's canvas (PageHeader actions, Pagination, a selectable Tag) showed no hover. A new token, `aura-bg-canvas-hover` (zinc-100 light, zinc-800 dark), is the hover inside AppShell and SideNav; cards, tables, inputs, the top bar, dialogs, drawers and popovers inside them keep `aura-bg-surface-hover`. Hover fills now read `--aura-hover`, falling back to the surface hover: outside AppShell, set `--aura-hover: var(--aura-bg-canvas-hover)` on your own canvas-coloured area.
+- **AppShell `headerHideFrom="lg"`** (request 6): the top bar, `header` and all, shows only below 1024px — where the menu button is — as a header-less bar does: from lg up it is hidden and `--aura-shell-bar-height` is 0. For apps whose phone pages draw a top bar (brand, avatar) and whose desktop pages don't. Default: the bar shows at every width.
+- **PageHeader `breadcrumb`** (request 7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` — a `nav` can't sit in the eyebrow's `p` (invalid HTML, a hydration error) — with Breadcrumb's own 13px sans. With an eyebrow too, the breadcrumb comes first.
+- **Phone drawer header = bar height** (request 8): in AppShell's phone drawer, a SideNav with `headerDivider` takes the top bar's height (56px, or more when the bar's header wraps), content centred, so its line meets the bar's line beside it; the close button is centred on it. The fixed desktop sidebar keeps 72px.
+- **Also:** the nav drawer's close button is a 44px target on phones and touch screens (the header leaves it 60px); the divided header's layout no longer needs `:has()` (older Safari and Firefox centre the close button too); a DatePicker's or read-only Select's toggle shows its hover on the grey read-only ground.
+
+## 5.32 — Icon tips, PageHeader, SideNav header divider, pill skeletons (DxT Monitor requests 1–4)
+
+### DxT Monitor requests 1, 3, 4
+
+- **SideNav `headerDivider`** (request 1): a full-width 1px `aura-border-default` line under `header`, with the board's metrics — the header at least 72px tall, its content 20px from the top and start, the line at its foot, 16px before the first item. The collapsed rail keeps its 8px sides. Without `header` it does nothing. Default `false`; the plain header is unchanged.
+- **PageHeader** (request 3): `<PageHeader eyebrow="Monitor / Sites" title="Sites" meta="12 sites · updated 2 min ago" actions={…} />` — eyebrow in mono 12/1.7, the title an `h1` (`headingLevel` 2 or 3 when the page already has one) in the display face at 36/1.15, weight 600, -0.01em (28px below 640px; a 1.4 line under `lang="th"`), meta 13/1.5, 4px between them, actions at the end on the text's last line, at least 24px away, wrapping under the text on a phone. `titleId` names the heading for `aria-labelledby`. It has **no outer padding**: inside AppShell, the content padding is the page margin (16/24px on phones, 24px from 640px, 32px from 1024px) — don't add your own. Stateless, so `/server` exports it too.
+- **Skeleton `variant="pill"` and `variant="badge"`** (request 4): a StatusPill's size (20px tall, 22px under `lang="th"`, 72px wide) and a Badge's (20px in every language, 56px wide), fully rounded, so a loading list's grey pills don't move the row when the real ones arrive. `width` sets the width.
+
+### Icon tips (request 2)
+
+- **IconButton, Pagination's arrows, an icon-only SegmentedControl option and a cut Tag** show their name in AURA's own tip instead of the browser's `title`: themed (light and dark), Thai-sized under `lang="th"`, shown on hover after 400ms (at once while another tip is up) **and on keyboard focus** (the native title never showed for keyboard or touch users), hoverable (WCAG 1.4.13: it stays while the pointer is over it, yet lets clicks and hovers through, so it never covers the ⋯ in the row above), hidden by Escape (inside a Dialog or Drawer, Escape closes that, and the tip with it), a press, blur or leaving. A tip opened by keyboard focus stays until focus moves, whatever the mouse does. It flips below at the top of the screen, stays on screen, and goes when its element leaves the page.
+- One tip and one set of document listeners serve the whole page — no state per button — so a DataTable with a ⋯ in every row costs nothing. The elements carry `data-aura-tip`; the tip is `aria-hidden` and never joins `aria-describedby`, because it repeats the accessible name (a screen reader hears it once).
+- No tip when the button is already wrapped in `<Tooltip>` (that one speaks), when it is a menu trigger with its menu open, or when you pass your own `title` to IconButton (kept as a native title).
+- **Tests that looked up the `title`** (`getByTitle`, `toHaveAttribute('title', …)`) on these elements should use the accessible name (`getByRole('button', { name })`) or `data-aura-tip`.
+
 ## 5.31 — Chamber-OS addenda 41–42
 
 - **`labelAddon` on TextField, Textarea and PasswordField** (item 138): a node between the label and the box, in the field's 6px gap — e.g. the phrase to type on a typed confirmation, as a chip with a copy button, so it is read before the box and can be copied. The hint and error stay below the box. The addon's box is `.aura-field__addon` with the id `{id}-addon`, and that id comes first in the input's `aria-describedby` (then the error or hint, then your own `aria-describedby` ids), so a screen reader reads it after the label; keep any button names in it short ("Copy"). `labelAddonDescribes={false}` keeps it out — for an addon that isn't a description (a "Forgot password?" link), or to name only part of it (give that part an id and pass it in `aria-describedby`); ids are never repeated. A focusable control in it comes before the input in tab order; clicking the label still focuses the input. `Field` takes `labelAddon` too, for a custom control (add `{id}-addon` to that control's `aria-describedby` yourself). The other fields (Select, Combobox, NumberField, the pickers, FileUpload) don't take it yet. Unset, nothing changes.