@jirawatpyk/aura-react 5.35.0 → 5.36.0

package/README.md

@@ -186,6 +186,11 @@ 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.36 — DxT Monitor requests 15–16
+
+- **Focus rings in table cells** (request 15): a DataTable cell clips its text (ellipsis) but no longer the focus ring of a link or button in it. The clip has a 4px margin (`overflow: clip` + `overflow-clip-margin`), so content wider than its cell (a pill, a button) now shows up to 4px past its edge. In the first data column a focused link or button sits just above the row's sticky start gutter or pinned checkbox column (which painted over the ring's start side) — not while the table is scrolled sideways, and never above the sticky header, totals or pinned columns — and a plain `<a>` or `<button>` of yours in a cell gets AURA's ring instead of the browser's (zero specificity, so your own focus style wins). Safari has no `overflow-clip-margin`: there rings in cells are drawn just inside the control, whole. Apps that set `overflow: clip` on `.aura-table__td` themselves can drop it.
+- **Right-aligned DataTable columns** (request 16): already there — `align: 'end'` on a column right-aligns its header (label and sort arrow) and every cell, with tabular figures, in default and `rowHeight="auto"` rows, totals and skeleton rows. Stacked cards keep each value under its label, start-aligned, by design. Now covered by tests and documented here.
+
 ## 5.35 — DxT Monitor requests 11–14
 
 - **Breadcrumb touch targets** (request 11): on a touch screen (`pointer: coarse`) every crumb link or button (and "…") gets a hit area 44px tall and as wide as its text plus 24px; the text doesn't move. It reaches 12px into the gutter on each side, so short neighbours never share a spot, and only 4px below the text, so it stops short of a PageHeader title right underneath — the rest of the height is above, so keep about 20px clear above a breadcrumb (AppShell's content padding already is). When the crumbs wrap, the rows sit 24px apart on touch screens so one row never covers the next. The current page (not a link) gets none; a link component must render its `<a>` directly in the crumb's `li`. Apps that added their own `.aura-crumbs a::after` rule should drop it.

package/dist/styles.css

@@ -161,6 +161,22 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   box-sizing: border-box; height: 100%; line-height: calc(var(--aura-table-row-height) - 1px);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--aura-space-4);
 }
+/* 5.36 (DxT Monitor 15): the cell clips its text, not the focus ring of a link or button in it (2px wide, 2px out,
+ * so 4px). A cell's start edge is its content edge, so a ring there lost its start side. In the first data column the
+ * row's sticky start gutter (or pinned checkbox column) painted over it too: there a focused link or button is lifted
+ * just above them — not while the table is scrolled sideways (it would cover the pinned columns), and never above the
+ * sticky header or totals (z-index 3). Where the browser can't give the clip a margin (Safari), rings in cells are
+ * drawn inside instead. */
+.aura-table:not(.is-scrolled-x) :is(.aura-table__gutter, .aura-table__sel) + .aura-table__td :is(a, button, [role="button"]):focus-visible { position: relative; z-index: 2; }
+/* A plain link or button of yours in a cell gets AURA's ring rather than the browser's (no specificity: your own focus
+ * style wins). */
+:where(.aura-table__td) :where(a, button):focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }
+@supports (overflow-clip-margin: 1px) {
+  .aura-table__td { overflow: clip; overflow-clip-margin: var(--aura-space-1); }
+}
+@supports not (overflow-clip-margin: 1px) {
+  .aura-table__td :focus-visible { outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
+}
 /* 5.11 rowHeight="auto" (never virtualized): a row grows to fit what wraps in it; each cell centres its content.
  * The padding only shows once content is taller than the row: a small Button or IconButton (32px), a pill or one line
  * still fits the density's row height (7.5px above and below at 48px, 3.5px compact). */

package/dist/styles.layer.css

@@ -163,6 +163,22 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   box-sizing: border-box; height: 100%; line-height: calc(var(--aura-table-row-height) - 1px);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--aura-space-4);
 }
+/* 5.36 (DxT Monitor 15): the cell clips its text, not the focus ring of a link or button in it (2px wide, 2px out,
+ * so 4px). A cell's start edge is its content edge, so a ring there lost its start side. In the first data column the
+ * row's sticky start gutter (or pinned checkbox column) painted over it too: there a focused link or button is lifted
+ * just above them — not while the table is scrolled sideways (it would cover the pinned columns), and never above the
+ * sticky header or totals (z-index 3). Where the browser can't give the clip a margin (Safari), rings in cells are
+ * drawn inside instead. */
+.aura-table:not(.is-scrolled-x) :is(.aura-table__gutter, .aura-table__sel) + .aura-table__td :is(a, button, [role="button"]):focus-visible { position: relative; z-index: 2; }
+/* A plain link or button of yours in a cell gets AURA's ring rather than the browser's (no specificity: your own focus
+ * style wins). */
+:where(.aura-table__td) :where(a, button):focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }
+@supports (overflow-clip-margin: 1px) {
+  .aura-table__td { overflow: clip; overflow-clip-margin: var(--aura-space-1); }
+}
+@supports not (overflow-clip-margin: 1px) {
+  .aura-table__td :focus-visible { outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
+}
 /* 5.11 rowHeight="auto" (never virtualized): a row grows to fit what wraps in it; each cell centres its content.
  * The padding only shows once content is taller than the row: a small Button or IconButton (32px), a pill or one line
  * still fits the density's row height (7.5px above and below at 48px, 3.5px compact). */

package/package.json

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