@jirawatpyk/aura-react 5.54.0 → 5.55.0

package/README.md

@@ -186,13 +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.55 — Chamber-OS addendum 68 (#167)
+
+- **Bar and footer buttons follow `touchHeight`'s query:** the 44px minimum for Buttons in an ActionBar (`children`, `start`) and in a Dialog or Drawer footer, and the 44px IconButton in a bar (not one in a footer), now apply below 640px **or on a touch screen** (`(pointer: coarse)`) at any width — the query `touchHeight` and the compact density use — so a `size="sm"` bulk-bar button on a tablet is 44px too. With a mouse from 640px nothing changes (36/32px in compact). Wrapping a footer's long label stays phone-only. Drop the `touchHeight` you kept on `size="sm"` bar and footer buttons for tablets.
+
 ## 5.54 — Chamber-OS addendum 67 (#166)
 
-- **ActionBar's buttons are 44px on a phone:** below 640px (the viewport's) every Button in an ActionBar — its `children` and `start` — is at least 44px tall, and an IconButton there 44px square, whatever the density or pointer, as a sheet's footer is since 5.53, so a compact page's save bar needs no `touchHeight` on each button. PageHeader's `actionsBarBelow` bar (ActionBar's edge strip) does the same while it is a bar. From 640px they keep the density's height — on a tablet with a compact page use `touchHeight` as before; buttons that already pass it look the same. Drop any `touchHeight` you added to bar buttons only for this.
+- **ActionBar's buttons are 44px on a phone:** below 640px (the viewport's) every Button in an ActionBar — its `children` and `start` — is at least 44px tall, and an IconButton there 44px square, whatever the density or pointer, as a sheet's footer is since 5.53, so a compact page's save bar needs no `touchHeight` on each button. PageHeader's `actionsBarBelow` bar (ActionBar's edge strip) does the same while it is a bar. From 640px with a mouse they keep the density's height (5.55: on a touch screen they are 44px at any width); buttons that already pass `touchHeight` look the same. Drop any `touchHeight` you added to bar buttons only for this.
 
 ## 5.53 — Chamber-OS addendum 66 (#165)
 
-- **A phone sheet's footer buttons wrap and are 44px:** below 640px a Dialog's footer stacks its buttons full width, and now they behave as `fullWidth` there (a Button directly in `footer`, or the only Button in a wrapper such as a Tooltip or a menu trigger); a Drawer's footer buttons stay in their row but wrap and are 44px too — a long label (Swedish, Thai) wraps instead of running out, and each is at least 44px tall whatever the density or pointer, with no `touchHeight` needed. From 640px the footer is unchanged: right-aligned, the density's height, one line. Drop any `touchHeight` you added to footer buttons only for this.
+- **A phone sheet's footer buttons wrap and are 44px:** below 640px a Dialog's footer stacks its buttons full width, and now they behave as `fullWidth` there (a Button directly in `footer`, or the only Button in a wrapper such as a Tooltip or a menu trigger); a Drawer's footer buttons stay in their row but wrap and are 44px too — a long label (Swedish, Thai) wraps instead of running out, and each is at least 44px tall whatever the density or pointer, with no `touchHeight` needed. From 640px with a mouse the footer is unchanged: right-aligned, the density's height, one line (5.55: on a touch screen its buttons are 44px, still in a row). Drop any `touchHeight` you added to footer buttons only for this.
 - **`fullWidth="below-sm"` / `"below-md"`** on Button, a link Button and `buttonClass` (so in Server Components too): full width and wrapping, at least 44px tall, only below 640px / 768px (the viewport's); its natural width above — for action rows that stack on phones and sit inline on a desktop. `fullWidth` (`true`) is unchanged. Inside a PageHeader's `actionsFullWidthBelow` row with an IconButton, that row's own sizing wins.
 
 ```jsx

package/dist/styles.css

@@ -1085,6 +1085,18 @@ a.aura-tab { text-decoration: none; }
 .aura-drawer__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-6); border-top: 1px solid var(--aura-border-default); }
 @media (prefers-reduced-motion: reduce) { .aura-drawer { animation: none; } }
 
+/* 5.54-5.55 (Chamber-OS 166, 167): on a phone or a touch screen (touchHeight's query) the Buttons in an ActionBar (its
+ * actions and start) and in a Dialog or Drawer footer are at least 44px, and an IconButton in a bar 44px square
+ * (directly or one wrapper deep, so a field's own suffix button isn't grown), whatever the density. With a mouse from
+ * 640px they keep the density's height. Wrapping a footer's long label stays phone-only (below). */
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-actionbar__actions .aura-btn, .aura-actionbar__start .aura-btn,
+  .aura-dialog__foot > .aura-btn, .aura-dialog__foot > * > .aura-btn:only-child,
+  .aura-drawer__foot > .aura-btn, .aura-drawer__foot > * > .aura-btn:only-child { min-height: var(--aura-touch-target); }
+  .aura-actionbar__actions > .aura-icon-btn, .aura-actionbar__actions > * > .aura-icon-btn:only-child,
+  .aura-actionbar__start > .aura-icon-btn, .aura-actionbar__start > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
+}
+
 /* ---------- Dropdown ---------- */
 .aura-dropdown { display: inline-flex; }
 
@@ -1777,12 +1789,6 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
   .aura-dialog__foot > * > .aura-btn:only-child, .aura-btn.aura-btn.aura-btn--full-below-sm { width: 100%; }
   .aura-drawer__foot > * { max-width: 100%; }
-  /* 5.54 (Chamber-OS 166): the Buttons in an ActionBar (its actions and start) are at least 44px on a phone whatever
-   * the density or pointer, like a sheet's footer; from 640px they keep the density's height. */
-  .aura-actionbar__actions .aura-btn, .aura-actionbar__start .aura-btn { min-height: var(--aura-touch-target); }
-  /* (an IconButton in the bar or one wrapper deep — not a field's own suffix button) */
-  .aura-actionbar__actions > .aura-icon-btn, .aura-actionbar__actions > * > .aura-icon-btn:only-child,
-  .aura-actionbar__start > .aura-icon-btn, .aura-actionbar__start > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
   .aura-drawer:not(.aura-drawer--nav) { max-width: none; }
   .aura-toaster { left: var(--aura-space-4); right: var(--aura-space-4); bottom: var(--aura-space-4); width: auto; }
   .aura-toaster.is-center { left: var(--aura-space-4); right: var(--aura-space-4); transform: none; }

package/dist/styles.layer.css

@@ -1087,6 +1087,18 @@ a.aura-tab { text-decoration: none; }
 .aura-drawer__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-6); border-top: 1px solid var(--aura-border-default); }
 @media (prefers-reduced-motion: reduce) { .aura-drawer { animation: none; } }
 
+/* 5.54-5.55 (Chamber-OS 166, 167): on a phone or a touch screen (touchHeight's query) the Buttons in an ActionBar (its
+ * actions and start) and in a Dialog or Drawer footer are at least 44px, and an IconButton in a bar 44px square
+ * (directly or one wrapper deep, so a field's own suffix button isn't grown), whatever the density. With a mouse from
+ * 640px they keep the density's height. Wrapping a footer's long label stays phone-only (below). */
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-actionbar__actions .aura-btn, .aura-actionbar__start .aura-btn,
+  .aura-dialog__foot > .aura-btn, .aura-dialog__foot > * > .aura-btn:only-child,
+  .aura-drawer__foot > .aura-btn, .aura-drawer__foot > * > .aura-btn:only-child { min-height: var(--aura-touch-target); }
+  .aura-actionbar__actions > .aura-icon-btn, .aura-actionbar__actions > * > .aura-icon-btn:only-child,
+  .aura-actionbar__start > .aura-icon-btn, .aura-actionbar__start > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
+}
+
 /* ---------- Dropdown ---------- */
 .aura-dropdown { display: inline-flex; }
 
@@ -1779,12 +1791,6 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
   .aura-dialog__foot > * > .aura-btn:only-child, .aura-btn.aura-btn.aura-btn--full-below-sm { width: 100%; }
   .aura-drawer__foot > * { max-width: 100%; }
-  /* 5.54 (Chamber-OS 166): the Buttons in an ActionBar (its actions and start) are at least 44px on a phone whatever
-   * the density or pointer, like a sheet's footer; from 640px they keep the density's height. */
-  .aura-actionbar__actions .aura-btn, .aura-actionbar__start .aura-btn { min-height: var(--aura-touch-target); }
-  /* (an IconButton in the bar or one wrapper deep — not a field's own suffix button) */
-  .aura-actionbar__actions > .aura-icon-btn, .aura-actionbar__actions > * > .aura-icon-btn:only-child,
-  .aura-actionbar__start > .aura-icon-btn, .aura-actionbar__start > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
   .aura-drawer:not(.aura-drawer--nav) { max-width: none; }
   .aura-toaster { left: var(--aura-space-4); right: var(--aura-space-4); bottom: var(--aura-space-4); width: auto; }
   .aura-toaster.is-center { left: var(--aura-space-4); right: var(--aura-space-4); transform: none; }

package/package.json

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