@jirawatpyk/aura-react 5.60.0 → 5.61.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.61 — Chamber-OS addendum 77 (#176)
+
+- **A visually hidden child of full-width header actions stays hidden:** below the `actionsFullWidthBelow` width every direct child of PageHeader's actions took a share of the row with `min-width: max-content` — including a visually hidden description beside a button (`aria-describedby` → a `.sr-only` / `.aura-sr-only` span), which grew to its text's width and scrolled the page sideways. The share rule — here and in the `actionsBarBelow` bar — now skips a visually hidden child: `.sr-only`, `.aura-sr-only`, `.visually-hidden`, `.screen-reader-text`, `[hidden]`, or one with an inline `position: absolute` (Radix and React Aria `VisuallyHidden`); the buttons share the row as before. Drop a `.sr-only { min-width: 0 }` stand-in. Another out-of-flow child styled by a class of your own (an absolutely positioned badge) needs `min-width: 0`, or put it inside the button.
+
 ## 5.60 — Chamber-OS addenda 74–76 (#173, #174, #175)
 
 - **`linkClass` lays a link out at every width:** a link with `touchHeight` — and any `<button>` or `<summary>` with the class — is now `inline-flex` with a mouse too, not only under the touch query: vertically centred, a 4px gap before an icon, `min-width: 0` and `max-width: 100%`, so `<a className={linkClass({ touchHeight: true })}><span className="truncate">…</span><Icon/></a>` truncates inside its parent with a visible gap, and a `<summary>` is as wide as its content (its marker is hidden; add your own chevron). Under the touch query it is still at least 44×44. A plain `<a>` without `touchHeight` stays inline, so it still wraps in a sentence; a `touchHeight` link whose label wraps now wraps inside its own box (its second line starts under the link, not at the line's start), as it already did on touch. The layout is one class strong, so it beats an element reset (`summary { display: list-item }`) and your own `hidden` / `block` class wins when it comes later (or in a later layer, e.g. with `styles.layer.css` under Tailwind v4). A link with an icon as a direct child is centred on the line (within 2px; an icon inside a wrapper span isn't detected). The `<button>` reset is one class strong too, so a margin, padding or font class of yours on the button wins when it comes later. In a DataTable grid cell a touch link stays inline (no icon gap) so the cell keeps its ellipsis; in DataTable cards it is laid out under the touch query.

package/dist/styles.css

@@ -1271,9 +1271,13 @@ summary.aura-link::-webkit-details-marker { display: none; }
  * fills it, and icon buttons keep their size. The :has rule is alone so older browsers drop only it.
  * 5.44 (Chamber-OS 149): with an icon button among them (a ⋯ menu) the actions are one bar: the row never wraps,
  * the buttons share what the icon leaves and wrap their labels inside (never an ellipsis). */
+/* 5.61 (Chamber-OS 176): the share rule (here and in the actionsBarBelow bar) skips a visually hidden child (an
+ * aria-describedby text beside a button) — a class (.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text),
+ * [hidden], or an inline position: absolute (Radix / React Aria VisuallyHidden): min-width: max-content made the 1px
+ * span as wide as its text and the page scrolled sideways. :where keeps the selector's weight as before. */
 @media (max-width: 639.98px) {
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
-  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions > .aura-icon-btn { flex: none; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
@@ -1284,7 +1288,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
 }
 @media (max-width: 767.98px) {
   .aura-page-header--actions-full-below-md > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
-  .aura-page-header--actions-full-below-md > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions > .aura-icon-btn { flex: none; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
@@ -1295,7 +1299,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
 }
 @media (max-width: 1023.98px) {
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
-  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions > .aura-icon-btn { flex: none; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
@@ -1318,7 +1322,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
   .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; }
+  .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > :not(.aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"]) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-icon-btn { flex: none; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
@@ -1339,7 +1343,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
   .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; }
+  .aura-page-header--actions-bar-below-md > .aura-page-header__actions > :not(.aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"]) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-icon-btn { flex: none; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }

package/dist/styles.layer.css

@@ -1273,9 +1273,13 @@ summary.aura-link::-webkit-details-marker { display: none; }
  * fills it, and icon buttons keep their size. The :has rule is alone so older browsers drop only it.
  * 5.44 (Chamber-OS 149): with an icon button among them (a ⋯ menu) the actions are one bar: the row never wraps,
  * the buttons share what the icon leaves and wrap their labels inside (never an ellipsis). */
+/* 5.61 (Chamber-OS 176): the share rule (here and in the actionsBarBelow bar) skips a visually hidden child (an
+ * aria-describedby text beside a button) — a class (.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text),
+ * [hidden], or an inline position: absolute (Radix / React Aria VisuallyHidden): min-width: max-content made the 1px
+ * span as wide as its text and the page scrolled sideways. :where keeps the selector's weight as before. */
 @media (max-width: 639.98px) {
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
-  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions > .aura-icon-btn { flex: none; }
   .aura-page-header--actions-full-below-sm > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
@@ -1286,7 +1290,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
 }
 @media (max-width: 767.98px) {
   .aura-page-header--actions-full-below-md > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
-  .aura-page-header--actions-full-below-md > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions > .aura-icon-btn { flex: none; }
   .aura-page-header--actions-full-below-md > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
@@ -1297,7 +1301,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
 }
 @media (max-width: 1023.98px) {
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
-  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > * { flex: 1 1 0; min-width: max-content; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions > .aura-icon-btn { flex: none; }
   .aura-page-header--actions-full-below-lg > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
@@ -1320,7 +1324,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
   .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; }
+  .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > :not(.aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"]) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-icon-btn { flex: none; }
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
@@ -1341,7 +1345,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
   .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; }
+  .aura-page-header--actions-bar-below-md > .aura-page-header__actions > :not(.aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"]) { flex: 1 1 0; min-width: max-content; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-icon-btn { flex: none; }
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }

package/package.json

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