@jirawatpyk/aura-react 5.42.0 → 5.44.0

package/README.md

@@ -186,6 +186,15 @@ 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.44 — Chamber-OS addendum 51 (#149)
+
+- **PageHeader `actionsFullWidthBelow` with an icon button keeps one row** (#149): when the actions include an IconButton (a ⋯ DropdownMenu trigger, bare or wrapped), below the breakpoint they are one bar. The row no longer wraps; the text buttons share what the icon leaves and wrap their labels inside the button (two or three lines, centred, `overflow-wrap: anywhere` with hyphenation, never an ellipsis), growing taller rather than wider, at least 44px with `touchHeight`; a pill that grows past one line gets 22px corners instead of becoming an oval. Hyphens appear only where the browser has a dictionary for the page's `lang` (Safari, Android); elsewhere a long word breaks where it must, so keep phone labels short. The icon keeps its size at the end of the row. Measured on an invoice page at 393 and 320px in English, Thai and Swedish: nothing clipped, no sideways scroll. Actions without an icon button wrap onto rows as in 5.37 (DxT Monitor's two-plus-one); a header that mixes text and icon buttons (e.g. Mute, Edit, ⋯, Open site) is now one row at 320px where it was two. Needs `:has()`; older browsers keep the 5.37 layout.
+- **IconButton `variant="outline"`**: a secondary Button's 1px border, so a lone ⋯ reads as a button beside outlined actions. Default `ghost` (no border).
+
+## 5.43 — Chamber-OS addendum 50 (#148)
+
+- **FilterBar `collapseBelow` with no search** (#148): below the breakpoint the Filters button fills the row it would otherwise sit at the end of, its label centred (an activity timeline with filters and no search). With a search it stays beside it, as in 5.42. From the breakpoint up nothing changes. Remove a stand-in such as `[&_.aura-filterbar__more]:flex-1`.
+
 ## 5.42 — Chamber-OS addendum 49 (#146–147)
 
 - **Fields no longer widen a phone at a large default font** (#147, a 5.40 regression): an `<input>`'s 20-character size grew with the browser's font size, so at a 32px default FilterBar's search measured ~450px and a 390px page scrolled sideways; so did a TextField, Combobox, DatePicker or NumberField in a grid cell or flex row without `min-width: 0`. The text box now never asks for more than the room it gets (`.aura-input` has `min-width: 0` and its control a percentage width, so its smallest size is zero) while its natural width is unchanged. At the 16px default a page lays out as in 5.41 unless a field was already wider than its room: we compared every Storybook story at 390 and 1280px pixel for pixel, and the only differences are fields that used to stick out of their grid cell or row, which now fit (a touch-height Combobox in a 390px FilterBar, a time-zone field in a two-column grid). A row of nowrap Buttons or a SegmentedControl can still be wider than a phone at 32px; give such rows `wrap` (Stack) or `fullWidth`.

package/dist/aura.bundle.js

@@ -1583,7 +1583,7 @@ window.Aura = (() => {
 
   // src/IconButton.tsx
   var IconButton = React8.forwardRef(function IconButton2(props, ref) {
-    const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight"]);
+    const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight", "variant"]);
     useAutoTip();
     const own = props.title !== void 0;
     return /* @__PURE__ */ React8.createElement(
@@ -1597,6 +1597,7 @@ window.Aura = (() => {
         className: cx(
           "aura-icon-btn",
           props.tone === "danger" && "aura-icon-btn--danger",
+          props.variant === "outline" && "aura-icon-btn--outline",
           props.touchHeight && "aura-icon-btn--touch",
           props.className
         )
@@ -5421,7 +5422,7 @@ window.Aura = (() => {
       /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__row" }, collapse ? (
         /* 5.42: the search and the Filters button share a row of their own below the breakpoint (count and actions
          * wrap under them); from the breakpoint up this box is display: contents and the bar is as before. */
-        /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__lead" }, searchBox, more)
+        /* @__PURE__ */ React31.createElement("div", { className: cx("aura-filterbar__lead", !hasSearch && "is-alone") }, searchBox, more)
       ) : searchBox, hasChildren && !open ? /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__controls" }, props.children) : null, /* @__PURE__ */ React31.createElement("span", { className: "aura-filterbar__spacer" }), count != null ? /* @__PURE__ */ React31.createElement("span", { className: "aura-filterbar__count", "aria-live": "polite" }, count) : null, props.actions ? /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__actions" }, props.actions) : null),
       filters.length || props.onClearAll && anything ? /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__chips" }, filters.map(function(f) {
         return /* @__PURE__ */ React31.createElement(Tag, { key: f.id, onRemove: f.onRemove }, f.label);

package/dist/cjs/index.cjs

@@ -1565,7 +1565,7 @@ function useAutoTip() {
 
 // src/IconButton.tsx
 var IconButton = React8.forwardRef(function IconButton2(props, ref) {
-  const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight"]);
+  const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight", "variant"]);
   useAutoTip();
   const own = props.title !== void 0;
   return /* @__PURE__ */ React8.createElement(
@@ -1579,6 +1579,7 @@ var IconButton = React8.forwardRef(function IconButton2(props, ref) {
       className: cx(
         "aura-icon-btn",
         props.tone === "danger" && "aura-icon-btn--danger",
+        props.variant === "outline" && "aura-icon-btn--outline",
         props.touchHeight && "aura-icon-btn--touch",
         props.className
       )
@@ -5403,7 +5404,7 @@ var FilterBar = React31.forwardRef(function FilterBar2(props, ref) {
     /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__row" }, collapse ? (
       /* 5.42: the search and the Filters button share a row of their own below the breakpoint (count and actions
        * wrap under them); from the breakpoint up this box is display: contents and the bar is as before. */
-      /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__lead" }, searchBox, more)
+      /* @__PURE__ */ React31.createElement("div", { className: cx("aura-filterbar__lead", !hasSearch && "is-alone") }, searchBox, more)
     ) : searchBox, hasChildren && !open ? /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__controls" }, props.children) : null, /* @__PURE__ */ React31.createElement("span", { className: "aura-filterbar__spacer" }), count != null ? /* @__PURE__ */ React31.createElement("span", { className: "aura-filterbar__count", "aria-live": "polite" }, count) : null, props.actions ? /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__actions" }, props.actions) : null),
     filters.length || props.onClearAll && anything ? /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__chips" }, filters.map(function(f) {
       return /* @__PURE__ */ React31.createElement(Tag, { key: f.id, onRemove: f.onRemove }, f.label);

package/dist/esm/FilterBar.js

@@ -168,7 +168,7 @@ const FilterBar = React.forwardRef(function FilterBar2(props, ref) {
     /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__row" }, collapse ? (
       /* 5.42: the search and the Filters button share a row of their own below the breakpoint (count and actions
        * wrap under them); from the breakpoint up this box is display: contents and the bar is as before. */
-      /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__lead" }, searchBox, more)
+      /* @__PURE__ */ React.createElement("div", { className: cx("aura-filterbar__lead", !hasSearch && "is-alone") }, searchBox, more)
     ) : searchBox, hasChildren && !open ? /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__controls" }, props.children) : null, /* @__PURE__ */ React.createElement("span", { className: "aura-filterbar__spacer" }), count != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-filterbar__count", "aria-live": "polite" }, count) : null, props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__actions" }, props.actions) : null),
     filters.length || props.onClearAll && anything ? /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__chips" }, filters.map(function(f) {
       return /* @__PURE__ */ React.createElement(Tag, { key: f.id, onRemove: f.onRemove }, f.label);

package/dist/esm/IconButton.js

@@ -4,7 +4,7 @@ import { cx, omit } from "./internal.js";
 import { Icon } from "./Icon.js";
 import { useAutoTip } from "./autoTip.js";
 const IconButton = React.forwardRef(function IconButton2(props, ref) {
-  const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight"]);
+  const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight", "variant"]);
   useAutoTip();
   const own = props.title !== void 0;
   return /* @__PURE__ */ React.createElement(
@@ -18,6 +18,7 @@ const IconButton = React.forwardRef(function IconButton2(props, ref) {
       className: cx(
         "aura-icon-btn",
         props.tone === "danger" && "aura-icon-btn--danger",
+        props.variant === "outline" && "aura-icon-btn--outline",
         props.touchHeight && "aura-icon-btn--touch",
         props.className
       )

package/dist/index.d.cts

@@ -353,6 +353,9 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	label: string;
 	/** Icon size. Default `sm` (16). */
 	size?: "sm" | "md" | undefined;
+	/** 5.44 (Chamber-OS 149): `outline` adds a secondary Button's 1px border, so a lone ⋯ reads as a button beside
+	 * outlined actions. Default `ghost`: no border. */
+	variant?: "ghost" | "outline" | undefined;
 	/** 44×44 instead of 32×32 below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24) —
 	 * a phone sheet's close button, a card's ⋯ trigger (5.15, Chamber-OS 100). */
 	touchHeight?: boolean | undefined;

package/dist/index.d.ts

@@ -353,6 +353,9 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	label: string;
 	/** Icon size. Default `sm` (16). */
 	size?: "sm" | "md" | undefined;
+	/** 5.44 (Chamber-OS 149): `outline` adds a secondary Button's 1px border, so a lone ⋯ reads as a button beside
+	 * outlined actions. Default `ghost`: no border. */
+	variant?: "ghost" | "outline" | undefined;
 	/** 44×44 instead of 32×32 below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24) —
 	 * a phone sheet's close button, a card's ⋯ trigger (5.15, Chamber-OS 100). */
 	touchHeight?: boolean | undefined;

package/dist/styles.css

@@ -346,6 +346,7 @@ a.aura-icon-btn { text-decoration: none; }
 }
 .aura-icon-btn:hover, .aura-icon-btn[aria-haspopup][aria-expanded="true"] { background: var(--aura-hover, var(--aura-bg-surface-hover)); } /* 5.41 (DxT #22): looks open while its menu shows */
 .aura-icon-btn--danger { color: var(--aura-fg-danger); }
+.aura-icon-btn--outline { box-sizing: border-box; border: 1px solid var(--aura-button-secondary-border); } /* 5.44 (Chamber-OS 149): reads as a button beside outlined ones */
 .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
 .aura-icon-btn:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
@@ -359,6 +360,9 @@ a.aura-icon-btn { text-decoration: none; }
   .aura-tag.aura-tag--touch { min-height: var(--aura-touch-target); }
   .aura-filterbar__clear { min-height: var(--aura-touch-target); } /* 5.28 (Chamber-OS 133) */
 }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn).aura-btn--touch { min-height: var(--aura-touch-target); } /* 5.44: a wrapped label keeps 44px */
+}
 /* Touch: same 32px look, a 44px hit area around it (WCAG 2.5.5). */
 @media (pointer: coarse) {
   .aura-icon-btn { position: relative; }
@@ -1168,13 +1172,18 @@ a.aura-tab { text-decoration: none; }
 }
 /* 5.37 (DxT Monitor #17): actionsFullWidthBelow — the actions take the row under the text; their children share
  * each line equally (wrapping when a label won't fit), a trigger inside a DropdownMenu, Tooltip or Popover wrapper
- * fills it, and icon buttons keep their size. The :has rule is alone so older browsers drop only it. */
+ * 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). */
 @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 > :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; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > * { min-width: 0; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
 }
 @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); }
@@ -1182,6 +1191,9 @@ a.aura-tab { text-decoration: none; }
   .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; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > * { min-width: 0; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
 }
 @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); }
@@ -1189,6 +1201,9 @@ a.aura-tab { text-decoration: none; }
   .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; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > * { min-width: 0; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
 }
 @media (min-width: 640px) { .aura-page-header__title { font-size: max(36px, 2.25rem); } }
 /* Thai marks need the room a 1.15 line takes away. */
@@ -1814,12 +1829,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-filterbar--collapse-sm > .aura-filterbar__row > .aura-filterbar__controls { display: none; }
   .aura-filterbar--collapse-sm .aura-filterbar__lead { display: flex; flex: 1 1 100%; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); }
   .aura-filterbar--collapse-sm .aura-filterbar__more { display: inline-flex; }
+  .aura-filterbar--collapse-sm .aura-filterbar__lead.is-alone > .aura-filterbar__more { flex: 1 1 auto; } /* 5.43 (Chamber-OS 148): no search, the button takes the row */
   .aura-filterbar--collapse-sm .aura-filterbar__search { flex: 1 1 0; min-width: 0; max-width: none; }
 }
 @media (max-width: 767.98px) {
   .aura-filterbar--collapse-md > .aura-filterbar__row > .aura-filterbar__controls { display: none; }
   .aura-filterbar--collapse-md .aura-filterbar__lead { display: flex; flex: 1 1 100%; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); }
   .aura-filterbar--collapse-md .aura-filterbar__more { display: inline-flex; }
+  .aura-filterbar--collapse-md .aura-filterbar__lead.is-alone > .aura-filterbar__more { flex: 1 1 auto; }
   .aura-filterbar--collapse-md .aura-filterbar__search { flex: 1 1 0; min-width: 0; max-width: none; }
 }
 /* The sheet: one control per row at full width, labels showing; a toggle Tag or a Button keeps its own width. */

package/dist/styles.layer.css

@@ -348,6 +348,7 @@ a.aura-icon-btn { text-decoration: none; }
 }
 .aura-icon-btn:hover, .aura-icon-btn[aria-haspopup][aria-expanded="true"] { background: var(--aura-hover, var(--aura-bg-surface-hover)); } /* 5.41 (DxT #22): looks open while its menu shows */
 .aura-icon-btn--danger { color: var(--aura-fg-danger); }
+.aura-icon-btn--outline { box-sizing: border-box; border: 1px solid var(--aura-button-secondary-border); } /* 5.44 (Chamber-OS 149): reads as a button beside outlined ones */
 .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
 .aura-icon-btn:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
@@ -361,6 +362,9 @@ a.aura-icon-btn { text-decoration: none; }
   .aura-tag.aura-tag--touch { min-height: var(--aura-touch-target); }
   .aura-filterbar__clear { min-height: var(--aura-touch-target); } /* 5.28 (Chamber-OS 133) */
 }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn).aura-btn--touch { min-height: var(--aura-touch-target); } /* 5.44: a wrapped label keeps 44px */
+}
 /* Touch: same 32px look, a 44px hit area around it (WCAG 2.5.5). */
 @media (pointer: coarse) {
   .aura-icon-btn { position: relative; }
@@ -1170,13 +1174,18 @@ a.aura-tab { text-decoration: none; }
 }
 /* 5.37 (DxT Monitor #17): actionsFullWidthBelow — the actions take the row under the text; their children share
  * each line equally (wrapping when a label won't fit), a trigger inside a DropdownMenu, Tooltip or Popover wrapper
- * fills it, and icon buttons keep their size. The :has rule is alone so older browsers drop only it. */
+ * 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). */
 @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 > :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; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > * { min-width: 0; }
+  .aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
 }
 @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); }
@@ -1184,6 +1193,9 @@ a.aura-tab { text-decoration: none; }
   .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; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > * { min-width: 0; }
+  .aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
 }
 @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); }
@@ -1191,6 +1203,9 @@ a.aura-tab { text-decoration: none; }
   .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; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > * { min-width: 0; }
+  .aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
 }
 @media (min-width: 640px) { .aura-page-header__title { font-size: max(36px, 2.25rem); } }
 /* Thai marks need the room a 1.15 line takes away. */
@@ -1816,12 +1831,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-filterbar--collapse-sm > .aura-filterbar__row > .aura-filterbar__controls { display: none; }
   .aura-filterbar--collapse-sm .aura-filterbar__lead { display: flex; flex: 1 1 100%; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); }
   .aura-filterbar--collapse-sm .aura-filterbar__more { display: inline-flex; }
+  .aura-filterbar--collapse-sm .aura-filterbar__lead.is-alone > .aura-filterbar__more { flex: 1 1 auto; } /* 5.43 (Chamber-OS 148): no search, the button takes the row */
   .aura-filterbar--collapse-sm .aura-filterbar__search { flex: 1 1 0; min-width: 0; max-width: none; }
 }
 @media (max-width: 767.98px) {
   .aura-filterbar--collapse-md > .aura-filterbar__row > .aura-filterbar__controls { display: none; }
   .aura-filterbar--collapse-md .aura-filterbar__lead { display: flex; flex: 1 1 100%; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); }
   .aura-filterbar--collapse-md .aura-filterbar__more { display: inline-flex; }
+  .aura-filterbar--collapse-md .aura-filterbar__lead.is-alone > .aura-filterbar__more { flex: 1 1 auto; }
   .aura-filterbar--collapse-md .aura-filterbar__search { flex: 1 1 0; min-width: 0; max-width: none; }
 }
 /* The sheet: one control per row at full width, labels showing; a toggle Tag or a Button keeps its own width. */

package/package.json

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