@jirawatpyk/aura-react 5.26.0 → 5.28.0

package/README.md

@@ -186,6 +186,17 @@ 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.28 — Chamber-OS addenda 35–36
+
+- **Applied-filter chips show their whole text** (item 132): in `FilterBar`'s chips row a chip takes its text's own width ("Submitted: 28 Aug – 3 Sept 2026", "Member: Midsommar Hospitality Co., Ltd."); only a chip wider than the row is cut, with an ellipsis, and a long chip never widens the FilterBar or its parents (the chips row takes its width from the bar; a bar holding only chips needs a width from its parent, as a block has). A Tag outside FilterBar keeps its 24ch cap. **Whenever a Tag's text is cut** — the 24ch cap or the row — the full text shows on hover (`title`) and, on a removable Tag, in a Tooltip on the remove button's hover and focus; the remove button's name already carries the full text for screen readers. On touch screens a cut chip can't be hovered — keep labels short enough for a phone row where you can.
+- **"Clear all" has a touch height** (item 133): FilterBar's own "Clear all" is at least 44px tall below 640px and wherever the primary pointer is coarse, as Button's `touchHeight`; with a mouse from 640px up it stays the compact link. Its look (accent, underline) and place are unchanged.
+
+## 5.27 — Chamber-OS addenda 33–34
+
+- **`bleed` reaches through your own wrappers** (item 130): a bleeding DataTable or Table now spans the Card from anywhere in its content — inside a `flex flex-col gap-4` column, a container-query `div`, a `role="tabpanel"` — as long as those wrappers add no padding or frame and don't clip or scroll (`overflow` other than `visible`): a padded wrapper leaves the table short of the card's edge by that padding, and a clipping or scrolling one cuts it off or adds scrollbars. A nested Card resets the reach to its own padding. The last-content rule is unchanged: only a table that is the Card content's direct, last child drops its bottom rule automatically; inside wrappers pass **`bleedEnd`** when nothing follows the table in the card (and the Card has no `footer`), and the card's radius closes it. Without `bleedEnd`, a pager or link after the table keeps the rule; don't pass `bleedEnd` then, or what follows is pulled up over the table. Still nothing below `flushBelow` or outside a Card.
+- **`Container` from `/server`** (item 131): it is stateless, so `@jirawatpyk/aura-react/server` exports it next to Card and EmptyState, and a Server Component can render the page column without becoming a client reference. Same HTML as the root export.
+- **The override guarantee covers padding** (item 131): with `styles.layer.css`, utilities that set a Container's `padding` (e.g. your own gutter, `px-[var(--page-padding-x)]`) win as well as `max-width` and `margin`, also directly inside a padded AppShell where AURA zeroes the side padding. `check:tailwind4` tests it at 700px, between AURA's 640 and 1024px steps.
+
 ## 5.26 — Chamber-OS addenda 28–32
 
 One release: everything below shipped together in 5.26.0.
@@ -202,7 +213,7 @@ One release: everything below shipped together in 5.26.0.
 
 ### `bleed` (addendum 30)
 
-- **`bleed` on DataTable and Table** (item 127): edge to edge inside a Card — a list card with its filters in the card's padding and the table across its full inner width (Polaris IndexTable, GitHub issues). As a direct child of the Card's content the table loses its side borders and radius and is pulled out by the card's padding; its header band and top rule stay, and cell text stays level with the card's content (DataTable's 24px gutter, Table's 24px outer cells). When it is the card's last content (no Card `footer`, nothing after it) the bottom rule goes too and the card's radius closes it; a pager or footer after it keeps the rule. Below the Card's `flushBelow` width, and outside a Card, it does nothing; stacked rows inside a framed Card keep its padding. Wrap nothing between the Card and the table, or it won't bleed. The reach is the Card's padding token: change a Card's padding with `--aura-card-padding` (with a unit, `0px`), not a padding utility, or the table overshoots or falls short; `flushBelow` with `max-sm:p-0` is fine. On phones (<640px) a Card without `flushBelow` has 16px padding while DataTable's gutter stays 24px, so its text sits 8px in from the card's content there; Table's outer cells stay 24px too.
+- **`bleed` on DataTable and Table** (item 127): edge to edge inside a Card — a list card with its filters in the card's padding and the table across its full inner width (Polaris IndexTable, GitHub issues). As a direct child of the Card's content the table loses its side borders and radius and is pulled out by the card's padding; its header band and top rule stay, and cell text stays level with the card's content (DataTable's 24px gutter, Table's 24px outer cells). When it is the card's last content (no Card `footer`, nothing after it) the bottom rule goes too and the card's radius closes it; a pager or footer after it keeps the rule. Below the Card's `flushBelow` width, and outside a Card, it does nothing; stacked rows inside a framed Card keep its padding. In 5.26 it needed to be the Card content's direct child; since 5.27 it also reaches through unpadded wrappers. The reach is the Card's padding token: change a Card's padding with `--aura-card-padding` (with a unit, `0px`), not a padding utility, or the table overshoots or falls short; `flushBelow` with `max-sm:p-0` is fine. On phones (<640px) a Card without `flushBelow` has 16px padding while DataTable's gutter stays 24px, so its text sits 8px in from the card's content there; Table's outer cells stay 24px too.
 - **DataTable `bordered={false}`**: drops the frame (border and radius) and keeps the header band and the 24px gutter, for a table in a section that doesn't bleed. Table's `bordered={false}` is unchanged.
 - Budgets raised on purpose: the whole library and the `window.Aura` bundle 62 → 64 kB.
 
@@ -212,7 +223,7 @@ One release: everything below shipped together in 5.26.0.
 
 ### Container (addendum 29)
 
-- **Overriding a Container's width and margin is supported** (item 126): with `styles.layer.css`, utilities that set `max-width` or `margin` on a `Container` (`max-w-[672px]`, `mx-0`, `ms-0`) win over `.aura-container`, and that is now a guarantee rather than a side effect. AURA keeps every `.aura-container` rule in `@layer aura`, never uses `!important` on it and never adds an unlayered rule for it; `npm run check:tailwind4` fails if a 672px column, centred or at the start edge, stops working at a 1400px page. With the unlayered `styles.css` the component wins instead (as for every component), so use `size` / `align` or the layered stylesheet. The side padding (16 / 24 / 32px at <640 / ≥640 / ≥1024) and its removal directly inside a padded `AppShell` are unchanged.
+- **Overriding a Container's width and margin is supported** (item 126; padding too since 5.27): with `styles.layer.css`, utilities that set `max-width` or `margin` on a `Container` (`max-w-[672px]`, `mx-0`, `ms-0`) win over `.aura-container`, and that is now a guarantee rather than a side effect. AURA keeps every `.aura-container` rule in `@layer aura`, never uses `!important` on it and never adds an unlayered rule for it; `npm run check:tailwind4` fails if a 672px column, centred or at the start edge, stops working at a 1400px page. With the unlayered `styles.css` the component wins instead (as for every component), so use `size` / `align` or the layered stylesheet. The side padding (16 / 24 / 32px at <640 / ≥640 / ≥1024) and its removal directly inside a padded `AppShell` are unchanged.
 - **`align="start"`**: the column sits at the start edge (left; right in right-to-left) instead of being centred — a form board beside the page's start. Default `center`.
 - **Attributes reach the element**: `id`, `lang`, `dir`, `aria-*` and `data-*` (e.g. `data-slot="layout-container" data-variant="form"`), so an app's layout checks can read a Container. Other props are still not passed.
 - Budget raised on purpose: styles.css 27 → 28 kB.