@jirawatpyk/aura-react 5.75.0 → 5.76.0

package/README.md

@@ -186,6 +186,10 @@ 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.76 — Chamber-OS addendum 95 (#194)
+
+- **A Dialog on a short screen scrolls as one box:** on a screen 30rem tall or less (480px at the default 16px — 400% zoom on a laptop, a phone on its side with the keyboard up), the head, the description, the body and the footer scroll together inside the dialog, with the footer at the end of the content, instead of a fixed head and footer around a body squeezed to nothing. Focus moves (`data-autofocus`, the first field, the focus trap) work as before, and a focused field scrolls into view with 16px to spare (`scroll-padding`). Above 30rem nothing changes: the footer stays fixed under a scrolling body. The same threshold as ActionBar's and AppShell's bars (5.48). Wide content in the body (a long URL, a `<pre>`) still scrolls sideways there. Scrolled to the footer, the × has scrolled away with the head — Escape and Cancel still close. A `position: sticky` element in the body doesn't stick on a short screen (it scrolls with the content). Dialog only: a Drawer keeps its fixed head and footer. A `.aura-dialog` / `.aura-dialog__body` stand-in in your CSS can go.
+
 ## 5.75 — visual audit, set 1
 
 - **Status pills are soft in every tone.** Blocked is red-800 on red-100 (dark red-300 on a red wash), Warning amber-800 on amber-100 (dark amber-300 on an amber wash), like Ready, In Progress and To Do, and like Alert and Badge — so a table of statuses reads evenly; the word and the icon carry the meaning. For the one status on a screen that must catch the eye (an overdue total, a failed payment) pass `variant="solid"`: the strong fill, in every tone (`--aura-status-{tone}-solid-bg` / `-fg`; Blocked and Warning are the 5.30 fills). Badge `tone="danger" variant="solid"` is unchanged.

package/dist/styles.css

@@ -2319,6 +2319,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @media (max-height: 30rem) { .aura-actionbar:not(.is-idle) { position: static; } }
 /* …and AppShell's top bar scrolls away with the page, so Shift+Tab never lands a field under it. */
 @media (max-height: 30rem) { .aura-shell__bar { position: static; } }
+/* 5.76 (Chamber-OS 194): on a screen 30rem tall or less (400% zoom, a phone on its side with the keyboard up) a Dialog
+ * scrolls as one box — head, body and footer in one flow, the footer at the end of the content — instead of fixing
+ * its head and footer around a body squeezed to nothing. Above that height, as before. */
+@media (max-height: 30rem) {
+  .aura-dialog { overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--aura-space-4); } /* a focused field is shown with room around it */
+  .aura-dialog__body { flex: none; min-height: auto; overflow: auto; overscroll-behavior: auto; } /* as tall as its content, so only wide content (a long <pre> or URL) scrolls here, sideways; a wheel over it goes on to the dialog */
+}
 /* 5.48: wherever a BottomNav shows, a field scrolled into view (Tab) stops above it, not under it. */
 :root { scroll-padding-bottom: var(--aura-bottomnav-offset, 0px); }
 .aura-actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-height: 60px; box-sizing: border-box; padding-block: var(--aura-space-2); padding-inline: var(--aura-space-4) var(--aura-space-3); }

package/dist/styles.layer.css

@@ -2321,6 +2321,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @media (max-height: 30rem) { .aura-actionbar:not(.is-idle) { position: static; } }
 /* …and AppShell's top bar scrolls away with the page, so Shift+Tab never lands a field under it. */
 @media (max-height: 30rem) { .aura-shell__bar { position: static; } }
+/* 5.76 (Chamber-OS 194): on a screen 30rem tall or less (400% zoom, a phone on its side with the keyboard up) a Dialog
+ * scrolls as one box — head, body and footer in one flow, the footer at the end of the content — instead of fixing
+ * its head and footer around a body squeezed to nothing. Above that height, as before. */
+@media (max-height: 30rem) {
+  .aura-dialog { overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--aura-space-4); } /* a focused field is shown with room around it */
+  .aura-dialog__body { flex: none; min-height: auto; overflow: auto; overscroll-behavior: auto; } /* as tall as its content, so only wide content (a long <pre> or URL) scrolls here, sideways; a wheel over it goes on to the dialog */
+}
 /* 5.48: wherever a BottomNav shows, a field scrolled into view (Tab) stops above it, not under it. */
 :root { scroll-padding-bottom: var(--aura-bottomnav-offset, 0px); }
 .aura-actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-height: 60px; box-sizing: border-box; padding-block: var(--aura-space-2); padding-inline: var(--aura-space-4) var(--aura-space-3); }

package/package.json

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