@jirawatpyk/aura-react 5.60.0 → 5.62.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.62 — Chamber-OS addendum 78 (#177)
+
+- **PageHeader `meta` lays chips out as a row:** a `meta` made only of elements (Badges, a StatusPill — through Fragments and arrays) is now a wrapping row, 8px apart and vertically centred, as `eyebrow` — so chips no longer touch when the JSX has no space between them, and they wrap on a phone. Any text in it — a string `meta` ("128 members · updated 3 min ago"), or a sentence with a `<strong>`, `<time>`, a link or `{count}` — keeps it a text line, as before. Also from `/server`. Drop a `flex flex-wrap items-center gap-2` stand-in wrapper.
+
+## 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/aura.bundle.js

@@ -7914,6 +7914,22 @@ window.Aura = (() => {
   // src/PageHeader.tsx
   var React43 = __toESM(require_react(), 1);
   var h8 = React43.createElement;
+  function chipsOnly(node) {
+    let el = 0;
+    const walk = function(n3) {
+      if (n3 == null || typeof n3 === "boolean") return true;
+      if (typeof n3 === "string") return n3.trim() === "";
+      if (typeof n3 === "number" || typeof n3 === "bigint") return false;
+      if (Array.isArray(n3)) return n3.every(walk);
+      if (React43.isValidElement(n3)) {
+        if (n3.type === React43.Fragment) return walk(n3.props.children);
+        el++;
+        return true;
+      }
+      return false;
+    };
+    return walk(node) && el > 0;
+  }
   var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
     const attrs2 = {};
     Object.keys(props).forEach(function(k) {
@@ -7930,6 +7946,7 @@ window.Aura = (() => {
     const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
     const eyebrow = props.eyebrow;
     const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
+    const richMeta = chipsOnly(props.meta);
     const heading = h8(
       "h" + level,
       {
@@ -7971,7 +7988,7 @@ window.Aura = (() => {
           h8("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
         ) : heading,
         shown(props.subtitle) ? h8("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
-        props.meta != null && props.meta !== false ? h8("div", { className: "aura-page-header__meta" }, props.meta) : null
+        props.meta != null && props.meta !== false ? h8("div", { className: cx("aura-page-header__meta", richMeta && "aura-page-header__meta--rich") }, props.meta) : null
       ),
       props.actions != null && props.actions !== false ? h8(
         "div",

package/dist/cjs/index.cjs

@@ -7896,6 +7896,22 @@ var React44 = __toESM(require("react"), 1);
 // src/PageHeader.tsx
 var React43 = __toESM(require("react"), 1);
 var h8 = React43.createElement;
+function chipsOnly(node) {
+  let el = 0;
+  const walk = function(n3) {
+    if (n3 == null || typeof n3 === "boolean") return true;
+    if (typeof n3 === "string") return n3.trim() === "";
+    if (typeof n3 === "number" || typeof n3 === "bigint") return false;
+    if (Array.isArray(n3)) return n3.every(walk);
+    if (React43.isValidElement(n3)) {
+      if (n3.type === React43.Fragment) return walk(n3.props.children);
+      el++;
+      return true;
+    }
+    return false;
+  };
+  return walk(node) && el > 0;
+}
 var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
   const attrs2 = {};
   Object.keys(props).forEach(function(k) {
@@ -7912,6 +7928,7 @@ var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
+  const richMeta = chipsOnly(props.meta);
   const heading = h8(
     "h" + level,
     {
@@ -7953,7 +7970,7 @@ var PageHeader = React43.forwardRef(function PageHeader2(props, ref) {
         h8("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
       ) : heading,
       shown(props.subtitle) ? h8("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
-      props.meta != null && props.meta !== false ? h8("div", { className: "aura-page-header__meta" }, props.meta) : null
+      props.meta != null && props.meta !== false ? h8("div", { className: cx("aura-page-header__meta", richMeta && "aura-page-header__meta--rich") }, props.meta) : null
     ),
     props.actions != null && props.actions !== false ? h8(
       "div",

package/dist/esm/PageHeader.js

@@ -2,6 +2,22 @@
 import * as React from "react";
 import { cx } from "./classes.js";
 const h = React.createElement;
+function chipsOnly(node) {
+  let el = 0;
+  const walk = function(n) {
+    if (n == null || typeof n === "boolean") return true;
+    if (typeof n === "string") return n.trim() === "";
+    if (typeof n === "number" || typeof n === "bigint") return false;
+    if (Array.isArray(n)) return n.every(walk);
+    if (React.isValidElement(n)) {
+      if (n.type === React.Fragment) return walk(n.props.children);
+      el++;
+      return true;
+    }
+    return false;
+  };
+  return walk(node) && el > 0;
+}
 const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
   const attrs = {};
   Object.keys(props).forEach(function(k) {
@@ -18,6 +34,7 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
+  const richMeta = chipsOnly(props.meta);
   const heading = h(
     "h" + level,
     {
@@ -59,7 +76,7 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
         h("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
       ) : heading,
       shown(props.subtitle) ? h("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
-      props.meta != null && props.meta !== false ? h("div", { className: "aura-page-header__meta" }, props.meta) : null
+      props.meta != null && props.meta !== false ? h("div", { className: cx("aura-page-header__meta", richMeta && "aura-page-header__meta--rich") }, props.meta) : null
     ),
     props.actions != null && props.actions !== false ? h(
       "div",

package/dist/index.d.cts

@@ -2072,7 +2072,8 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 5.46: `end` (default) lines the actions up with the bottom of the text; `start` with its top (the title, when
 	 * there is no breadcrumb or eyebrow). */
 	actionsAlign?: "end" | "start" | undefined;
-	/** A line under the title — counts, last update, owner. */
+	/** A line under the title — counts, last update, owner. 5.62 (Chamber-OS 177): made only of elements (Badges, a
+	 * StatusPill), it is laid out as a wrapping row, 8px apart; any text in it keeps it a line. */
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;

package/dist/index.d.ts

@@ -2072,7 +2072,8 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 5.46: `end` (default) lines the actions up with the bottom of the text; `start` with its top (the title, when
 	 * there is no breadcrumb or eyebrow). */
 	actionsAlign?: "end" | "start" | undefined;
-	/** A line under the title — counts, last update, owner. */
+	/** A line under the title — counts, last update, owner. 5.62 (Chamber-OS 177): made only of elements (Badges, a
+	 * StatusPill), it is laid out as a wrapping row, 8px apart; any text in it keeps it a line. */
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;

package/dist/server/index.cjs

@@ -1632,6 +1632,22 @@ function TableSkeleton(props) {
 // src/PageHeader.tsx
 var React6 = __toESM(require("react"), 1);
 var h5 = React6.createElement;
+function chipsOnly(node) {
+  let el = 0;
+  const walk = function(n3) {
+    if (n3 == null || typeof n3 === "boolean") return true;
+    if (typeof n3 === "string") return n3.trim() === "";
+    if (typeof n3 === "number" || typeof n3 === "bigint") return false;
+    if (Array.isArray(n3)) return n3.every(walk);
+    if (React6.isValidElement(n3)) {
+      if (n3.type === React6.Fragment) return walk(n3.props.children);
+      el++;
+      return true;
+    }
+    return false;
+  };
+  return walk(node) && el > 0;
+}
 var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
   const attrs2 = {};
   Object.keys(props).forEach(function(k) {
@@ -1648,6 +1664,7 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
+  const richMeta = chipsOnly(props.meta);
   const heading = h5(
     "h" + level,
     {
@@ -1689,7 +1706,7 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
         h5("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
       ) : heading,
       shown(props.subtitle) ? h5("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
-      props.meta != null && props.meta !== false ? h5("div", { className: "aura-page-header__meta" }, props.meta) : null
+      props.meta != null && props.meta !== false ? h5("div", { className: cx("aura-page-header__meta", richMeta && "aura-page-header__meta--rich") }, props.meta) : null
     ),
     props.actions != null && props.actions !== false ? h5(
       "div",

package/dist/server/index.d.cts

@@ -582,7 +582,8 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 5.46: `end` (default) lines the actions up with the bottom of the text; `start` with its top (the title, when
 	 * there is no breadcrumb or eyebrow). */
 	actionsAlign?: "end" | "start" | undefined;
-	/** A line under the title — counts, last update, owner. */
+	/** A line under the title — counts, last update, owner. 5.62 (Chamber-OS 177): made only of elements (Badges, a
+	 * StatusPill), it is laid out as a wrapping row, 8px apart; any text in it keeps it a line. */
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;

package/dist/server/index.d.ts

@@ -582,7 +582,8 @@ export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement
 	/** 5.46: `end` (default) lines the actions up with the bottom of the text; `start` with its top (the title, when
 	 * there is no breadcrumb or eyebrow). */
 	actionsAlign?: "end" | "start" | undefined;
-	/** A line under the title — counts, last update, owner. */
+	/** A line under the title — counts, last update, owner. 5.62 (Chamber-OS 177): made only of elements (Badges, a
+	 * StatusPill), it is laid out as a wrapping row, 8px apart; any text in it keeps it a line. */
 	meta?: React$1.ReactNode | undefined;
 	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
 	actions?: React$1.ReactNode | undefined;

package/dist/server/index.js

@@ -1566,6 +1566,22 @@ function TableSkeleton(props) {
 // src/PageHeader.tsx
 import * as React6 from "react";
 var h5 = React6.createElement;
+function chipsOnly(node) {
+  let el = 0;
+  const walk = function(n3) {
+    if (n3 == null || typeof n3 === "boolean") return true;
+    if (typeof n3 === "string") return n3.trim() === "";
+    if (typeof n3 === "number" || typeof n3 === "bigint") return false;
+    if (Array.isArray(n3)) return n3.every(walk);
+    if (React6.isValidElement(n3)) {
+      if (n3.type === React6.Fragment) return walk(n3.props.children);
+      el++;
+      return true;
+    }
+    return false;
+  };
+  return walk(node) && el > 0;
+}
 var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
   const attrs2 = {};
   Object.keys(props).forEach(function(k) {
@@ -1582,6 +1598,7 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
+  const richMeta = chipsOnly(props.meta);
   const heading = h5(
     "h" + level,
     {
@@ -1623,7 +1640,7 @@ var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
         h5("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
       ) : heading,
       shown(props.subtitle) ? h5("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
-      props.meta != null && props.meta !== false ? h5("div", { className: "aura-page-header__meta" }, props.meta) : null
+      props.meta != null && props.meta !== false ? h5("div", { className: cx("aura-page-header__meta", richMeta && "aura-page-header__meta--rich") }, props.meta) : null
     ),
     props.actions != null && props.actions !== false ? h5(
       "div",

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; }
@@ -1361,6 +1365,8 @@ summary.aura-link::-webkit-details-marker { display: none; }
 .aura-page-header__title-row > .aura-page-header__title { min-width: 0; }
 .aura-page-header__title-addon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); min-width: 0; }
 .aura-page-header__eyebrow--rich { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); font-family: var(--font-sans); line-height: 1.5; }
+/* 5.62 (Chamber-OS 177): a meta of chips only (no text) is a wrapping row, as the eyebrow — 8px apart, 4px under the title. */
+.aura-page-header__meta--rich { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
 .aura-page-header--hero, .aura-page-header--hero-lg { padding-top: var(--aura-page-header-hero-space, var(--aura-space-4)); }
 .aura-page-header--hero .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(30px, 1.875rem)); line-height: var(--aura-page-header-title-line-height, 1.2); }
 /* 5.47 (Chamber-OS 152): compact — the staff boards' 26 / 32; hero steps to 36px from 1024px like hero-lg. */

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; }
@@ -1363,6 +1367,8 @@ summary.aura-link::-webkit-details-marker { display: none; }
 .aura-page-header__title-row > .aura-page-header__title { min-width: 0; }
 .aura-page-header__title-addon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); min-width: 0; }
 .aura-page-header__eyebrow--rich { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); font-family: var(--font-sans); line-height: 1.5; }
+/* 5.62 (Chamber-OS 177): a meta of chips only (no text) is a wrapping row, as the eyebrow — 8px apart, 4px under the title. */
+.aura-page-header__meta--rich { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
 .aura-page-header--hero, .aura-page-header--hero-lg { padding-top: var(--aura-page-header-hero-space, var(--aura-space-4)); }
 .aura-page-header--hero .aura-page-header__title { font-size: var(--aura-page-header-title-size, max(30px, 1.875rem)); line-height: var(--aura-page-header-title-line-height, 1.2); }
 /* 5.47 (Chamber-OS 152): compact — the staff boards' 26 / 32; hero steps to 36px from 1024px like hero-lg. */

package/package.json

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