@jirawatpyk/aura-react 5.53.0 → 5.55.0

package/README.md

@@ -186,9 +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 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; }
 
@@ -1240,6 +1252,9 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header__status { display: none; }
 @media (max-width: 639.98px) and (min-height: 30.00125rem) {
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-3) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
+  /* 5.54 (Chamber-OS 166): the bar's buttons are 44px whatever the density, as ActionBar's on a phone. */
+  .aura-page-header--actions-bar-below-sm > .aura-page-header__actions { --aura-button-height: var(--aura-touch-target); --aura-button-height-sm: var(--aura-touch-target); }
+  .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-icon-btn, .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
   .aura-page-header--actions-bar-below-sm.aura-page-header--actions-bar-floating > .aura-page-header__actions { left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px))); padding-bottom: var(--aura-space-2); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__status { display: block; flex: 1 1 100%; min-width: 0; font-size: max(14px, .875rem); line-height: 1.5; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > :not(.aura-page-header__status) { flex: 1 1 0; min-width: max-content; }
@@ -1258,6 +1273,9 @@ a.aura-tab { text-decoration: none; }
 }
 @media (max-width: 767.98px) and (min-height: 30.00125rem) {
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-3) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
+  /* 5.54 (Chamber-OS 166): the bar's buttons are 44px whatever the density, as ActionBar's on a phone. */
+  .aura-page-header--actions-bar-below-md > .aura-page-header__actions { --aura-button-height: var(--aura-touch-target); --aura-button-height-sm: var(--aura-touch-target); }
+  .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-icon-btn, .aura-page-header--actions-bar-below-md > .aura-page-header__actions > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
   .aura-page-header--actions-bar-below-md.aura-page-header--actions-bar-floating > .aura-page-header__actions { left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px))); padding-bottom: var(--aura-space-2); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__status { display: block; flex: 1 1 100%; min-width: 0; font-size: max(14px, .875rem); line-height: 1.5; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > :not(.aura-page-header__status) { flex: 1 1 0; min-width: max-content; }

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; }
 
@@ -1242,6 +1254,9 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header__status { display: none; }
 @media (max-width: 639.98px) and (min-height: 30.00125rem) {
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-3) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
+  /* 5.54 (Chamber-OS 166): the bar's buttons are 44px whatever the density, as ActionBar's on a phone. */
+  .aura-page-header--actions-bar-below-sm > .aura-page-header__actions { --aura-button-height: var(--aura-touch-target); --aura-button-height-sm: var(--aura-touch-target); }
+  .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-icon-btn, .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
   .aura-page-header--actions-bar-below-sm.aura-page-header--actions-bar-floating > .aura-page-header__actions { left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px))); padding-bottom: var(--aura-space-2); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__status { display: block; flex: 1 1 100%; min-width: 0; font-size: max(14px, .875rem); line-height: 1.5; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > :not(.aura-page-header__status) { flex: 1 1 0; min-width: max-content; }
@@ -1260,6 +1275,9 @@ a.aura-tab { text-decoration: none; }
 }
 @media (max-width: 767.98px) and (min-height: 30.00125rem) {
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-3) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
+  /* 5.54 (Chamber-OS 166): the bar's buttons are 44px whatever the density, as ActionBar's on a phone. */
+  .aura-page-header--actions-bar-below-md > .aura-page-header__actions { --aura-button-height: var(--aura-touch-target); --aura-button-height-sm: var(--aura-touch-target); }
+  .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-icon-btn, .aura-page-header--actions-bar-below-md > .aura-page-header__actions > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
   .aura-page-header--actions-bar-below-md.aura-page-header--actions-bar-floating > .aura-page-header__actions { left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px))); padding-bottom: var(--aura-space-2); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__status { display: block; flex: 1 1 100%; min-width: 0; font-size: max(14px, .875rem); line-height: 1.5; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > :not(.aura-page-header__status) { flex: 1 1 0; min-width: max-content; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.53.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",