@jirawatpyk/aura-react 5.75.0 → 5.77.0

package/README.md

@@ -186,6 +186,14 @@ 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.77 — Chamber-OS addendum 95 follow-up (#194)
+
+- **A confirmation opens at its top on a short screen:** when a Dialog scrolls as one box (5.76) and its first focus lands in the footer — `data-autofocus` on Cancel, or a dialog with nothing to fill in — it no longer scrolls to its end on open: the title, the description and the summary of what is being confirmed are what show first, with Cancel focused below. Tab or a scroll reaches the buttons as before. A field in the body that takes the first focus is still scrolled into view (it is what you type in next). By design the focused Cancel then starts below the fold: focus is in the dialog, on the safe action, and a screen reader reads the title and description first. Above 30rem nothing changes — where the panel can't scroll, the browser keeps the focused button in view as before; a Drawer is unaffected. With `autoFocus={false}`, a footer button you focus yourself scrolls as the browser does.
+
+## 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/aura.bundle.js

@@ -5123,6 +5123,7 @@ window.Aura = (() => {
         prev.current = document.activeElement;
         const unlock = lockScroll();
         const el = ref.current;
+        let raf = 0;
         const inPart = function(scope) {
           if (!scope || !el) return [];
           const sel = TAB_STOPS.split(",").map(function(s) {
@@ -5133,8 +5134,20 @@ window.Aura = (() => {
         if (el && o.autoFocus !== false) {
           const auto = el.querySelector("[data-autofocus]");
           if (!focusFirst(el, auto, [inPart(o.bodySelector), inPart(o.footSelector)])) el.focus();
+          const foot = o.footSelector ? el.querySelector(o.footSelector) : null, head = el.firstElementChild, first = document.activeElement, panel = el;
+          const toTop = function() {
+            if (foot && foot.contains(first) && document.activeElement === first && panel.scrollTop > 0 && /auto|scroll/.test(getComputedStyle(panel).overflowY) && head && head.getBoundingClientRect().top < panel.getBoundingClientRect().top)
+              panel.scrollTop = 0;
+          };
+          toTop();
+          if (foot && foot.contains(first))
+            raf = requestAnimationFrame(function() {
+              toTop();
+              raf = requestAnimationFrame(toTop);
+            });
         }
         return function() {
+          cancelAnimationFrame(raf);
           unlock();
           const l = latest.current;
           const ff = l.finalFocus;

package/dist/cjs/index.cjs

@@ -5105,6 +5105,7 @@ function useModal(open, ref, opts) {
       prev.current = document.activeElement;
       const unlock = lockScroll();
       const el = ref.current;
+      let raf = 0;
       const inPart = function(scope) {
         if (!scope || !el) return [];
         const sel = TAB_STOPS.split(",").map(function(s) {
@@ -5115,8 +5116,20 @@ function useModal(open, ref, opts) {
       if (el && o.autoFocus !== false) {
         const auto = el.querySelector("[data-autofocus]");
         if (!focusFirst(el, auto, [inPart(o.bodySelector), inPart(o.footSelector)])) el.focus();
+        const foot = o.footSelector ? el.querySelector(o.footSelector) : null, head = el.firstElementChild, first = document.activeElement, panel = el;
+        const toTop = function() {
+          if (foot && foot.contains(first) && document.activeElement === first && panel.scrollTop > 0 && /auto|scroll/.test(getComputedStyle(panel).overflowY) && head && head.getBoundingClientRect().top < panel.getBoundingClientRect().top)
+            panel.scrollTop = 0;
+        };
+        toTop();
+        if (foot && foot.contains(first))
+          raf = requestAnimationFrame(function() {
+            toTop();
+            raf = requestAnimationFrame(toTop);
+          });
       }
       return function() {
+        cancelAnimationFrame(raf);
         unlock();
         const l = latest.current;
         const ff = l.finalFocus;

package/dist/esm/useModal.js

@@ -36,6 +36,7 @@ function useModal(open, ref, opts) {
       prev.current = document.activeElement;
       const unlock = lockScroll();
       const el = ref.current;
+      let raf = 0;
       const inPart = function(scope) {
         if (!scope || !el) return [];
         const sel = TAB_STOPS.split(",").map(function(s) {
@@ -46,8 +47,20 @@ function useModal(open, ref, opts) {
       if (el && o.autoFocus !== false) {
         const auto = el.querySelector("[data-autofocus]");
         if (!focusFirst(el, auto, [inPart(o.bodySelector), inPart(o.footSelector)])) el.focus();
+        const foot = o.footSelector ? el.querySelector(o.footSelector) : null, head = el.firstElementChild, first = document.activeElement, panel = el;
+        const toTop = function() {
+          if (foot && foot.contains(first) && document.activeElement === first && panel.scrollTop > 0 && /auto|scroll/.test(getComputedStyle(panel).overflowY) && head && head.getBoundingClientRect().top < panel.getBoundingClientRect().top)
+            panel.scrollTop = 0;
+        };
+        toTop();
+        if (foot && foot.contains(first))
+          raf = requestAnimationFrame(function() {
+            toTop();
+            raf = requestAnimationFrame(toTop);
+          });
       }
       return function() {
+        cancelAnimationFrame(raf);
         unlock();
         const l = latest.current;
         const ff = l.finalFocus;

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.77.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",