@jirawatpyk/aura-react 5.40.0 → 5.42.0

package/dist/styles.css

@@ -70,10 +70,10 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
 .aura-btn--primary:hover { background: var(--aura-button-primary-bg-hover); }
 
 .aura-btn--secondary { border: 1px solid var(--aura-button-secondary-border); color: var(--aura-fg-primary); }
-.aura-btn--secondary:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
+.aura-btn--secondary:hover, .aura-btn--secondary[aria-haspopup][aria-expanded="true"] { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 /* Destructive: filled for the confirm step, outline beside other actions. Loading keeps the colour (busy, not unavailable). */
 .aura-btn--ghost { color: var(--aura-fg-primary); }
-.aura-btn--ghost:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
+.aura-btn--ghost:hover, .aura-btn--ghost[aria-haspopup][aria-expanded="true"] { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 /* size="sm" (4.16): 32px for toolbars, table rows and card footers. On touch the pill stays 32px and a transparent
  * ::after grows the hit area to 44px, as IconButton does. */
 .aura-btn--sm { height: var(--aura-button-height-sm); padding: 0 var(--aura-space-3); gap: 6px; }
@@ -344,7 +344,7 @@ a.aura-icon-btn { text-decoration: none; }
   border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-primary);
   cursor: pointer; transition: background var(--aura-duration-fast) var(--aura-ease);
 }
-.aura-icon-btn:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
+.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--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
@@ -499,7 +499,9 @@ a.aura-icon-btn { text-decoration: none; }
 
 .aura-input {
   position: relative; box-sizing: border-box; display: flex; align-items: center; width: 100%;
-  min-height: var(--aura-input-height);
+  /* 5.42 (Chamber-OS 147): a box in a flex row (FilterBar's search) may shrink below its <input>'s 20-character
+   * size, which at a large default font (5.40) is wider than a phone. */
+  min-width: 0; min-height: var(--aura-input-height);
   background: var(--aura-bg-input); color: var(--aura-fg-primary);
   border: 1px solid var(--aura-border-control); border-radius: var(--aura-radius-md);
   font-family: var(--font-sans); font-size: var(--aura-input-font-size);
@@ -510,7 +512,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-input:hover { border-color: var(--aura-fg-secondary); }
 .aura-input:focus-within { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong); }
 .aura-input__control {
-  flex: 1; min-width: 0; height: calc(var(--aura-input-height) - 2px); padding: 0 var(--aura-space-3);
+  /* 5.42 (Chamber-OS 147): a percentage width makes the control's min-content zero (a compressible control), so a
+   * field in a grid cell or flex row never forces it wider than the screen at a large default font; its preferred
+   * width is still the 20-character size. */
+  flex: 1; width: 100%; min-width: 0; height: calc(var(--aura-input-height) - 2px); padding: 0 var(--aura-space-3);
   border: 0; background: transparent; color: inherit; font: inherit; outline: none;
   appearance: none; -webkit-appearance: none;
 }
@@ -1124,6 +1129,9 @@ a.aura-tab { text-decoration: none; }
   .aura-shell__bar--menu-only { display: none; }
 }
 .aura-shell__bar-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--aura-space-3); }
+/* 5.41 (DxT Monitor #19): a page with its own back arrow marks itself with data-aura-hide-menubutton (on any element)
+ * and the bar drops the menu button, as BottomNav does for data-aura-hide-bottomnav. */
+:root:has([data-aura-hide-menubutton]) :is(.aura-shell__menu, .aura-shell__bar--no-header) { display: none; } /* with no header the bar would be empty */
 .aura-shell__content { flex: 1; min-width: 0; padding: var(--aura-space-6) var(--aura-space-4); }
 /* 5.7: <main> takes focus (tabIndex -1) for skip links and "the row you acted on is gone"; a landmark gets no ring. */
 .aura-shell__content:focus { outline: none; }
@@ -1144,6 +1152,20 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
 .aura-page-header__meta { min-width: 0; font-size: max(13px, .8125rem); line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
 .aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+/* 5.41 (DxT Monitor #20): titleHideBelow — the title is visually hidden (still the heading), the breadcrumb and eyebrow
+ * are gone; with no meta line the text block takes no room, so the actions start the header. */
+@media (max-width: 639.98px) {
+  .aura-page-header--title-hide-below-sm .aura-page-header__title, .aura-page-header--title-hide-below-sm.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-page-header--title-hide-below-sm :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: none; }
+}
+@media (max-width: 767.98px) {
+  .aura-page-header--title-hide-below-md .aura-page-header__title, .aura-page-header--title-hide-below-md.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-page-header--title-hide-below-md :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: none; }
+}
+@media (max-width: 1023.98px) {
+  .aura-page-header--title-hide-below-lg .aura-page-header__title, .aura-page-header--title-hide-below-lg.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-page-header--title-hide-below-lg :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: 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. */
@@ -1770,7 +1792,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 }
 /* 5.12 searchGrow: the search fills what the controls leave. */
 .aura-filterbar--grow .aura-filterbar__search { max-width: none; }
-.aura-filterbar--grow .aura-filterbar__search ~ .aura-filterbar__spacer { display: none; }
+.aura-filterbar--grow :is(.aura-filterbar__search, .aura-filterbar__lead:has(> .aura-filterbar__search)) ~ .aura-filterbar__spacer { display: none; }
 /* 5.15 (Chamber-OS 92): the search on its own row up to 1024px; controls sharing their row in equal columns. */
 @media (max-width: 1023.98px) {
   .aura-filterbar--stack-lg .aura-filterbar__search { flex-basis: 100%; max-width: none; }
@@ -1783,6 +1805,31 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterbar--fill .aura-filterbar__controls > .aura-filterselect .aura-filterselect__chevron { margin-inline-start: auto; }
 /* Compact filters sit closer together than full fields. */
 .aura-filterbar__controls:has(> .aura-filterselect) { gap: var(--aura-space-2); }
+/* 5.42 (Chamber-OS 146): collapseBelow — below the breakpoint the controls fold into a "Filters" sheet; the button
+ * shares a row with the search, at its end, as tall as the search (the count and actions wrap below). From the
+ * breakpoint up the search and the hidden button sit in a display: contents box, so the bar lays out as before. */
+.aura-filterbar__lead { display: contents; }
+.aura-filterbar__more { display: none; flex: none; height: var(--aura-input-height); }
+@media (max-width: 639.98px) {
+  .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__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__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. */
+.aura-filterbar--sheet { gap: var(--aura-space-4); }
+.aura-filterbar--sheet > :is(.aura-tag, .aura-btn, .aura-segmented) { align-self: flex-start; }
+.aura-filterbar--sheet .aura-filterselect { display: flex; width: 100%; }
+.aura-filterbar--sheet .aura-filterselect__face { width: 100%; padding-inline: var(--aura-space-3) var(--aura-space-2); font-size: max(16px, 1rem); }
+.aura-filterbar--sheet .aura-filterselect__name { display: none; }
+.aura-filterbar--sheet .aura-filterselect__value { font-weight: 400; }
+.aura-filterbar--sheet .aura-filterselect__chevron { margin-inline-start: auto; width: var(--aura-icon-sm); height: var(--aura-icon-sm); }
 
 /* 5.12 FilterSelect: a compact face — "Status All ▾" — as wide as its words, over Select's machinery and list. */
 .aura-filterselect { position: relative; display: inline-flex; width: fit-content; max-width: 100%; vertical-align: middle; font-family: var(--font-sans); }

package/dist/styles.layer.css

@@ -72,10 +72,10 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
 .aura-btn--primary:hover { background: var(--aura-button-primary-bg-hover); }
 
 .aura-btn--secondary { border: 1px solid var(--aura-button-secondary-border); color: var(--aura-fg-primary); }
-.aura-btn--secondary:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
+.aura-btn--secondary:hover, .aura-btn--secondary[aria-haspopup][aria-expanded="true"] { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 /* Destructive: filled for the confirm step, outline beside other actions. Loading keeps the colour (busy, not unavailable). */
 .aura-btn--ghost { color: var(--aura-fg-primary); }
-.aura-btn--ghost:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
+.aura-btn--ghost:hover, .aura-btn--ghost[aria-haspopup][aria-expanded="true"] { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
 /* size="sm" (4.16): 32px for toolbars, table rows and card footers. On touch the pill stays 32px and a transparent
  * ::after grows the hit area to 44px, as IconButton does. */
 .aura-btn--sm { height: var(--aura-button-height-sm); padding: 0 var(--aura-space-3); gap: 6px; }
@@ -346,7 +346,7 @@ a.aura-icon-btn { text-decoration: none; }
   border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-primary);
   cursor: pointer; transition: background var(--aura-duration-fast) var(--aura-ease);
 }
-.aura-icon-btn:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
+.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--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
@@ -501,7 +501,9 @@ a.aura-icon-btn { text-decoration: none; }
 
 .aura-input {
   position: relative; box-sizing: border-box; display: flex; align-items: center; width: 100%;
-  min-height: var(--aura-input-height);
+  /* 5.42 (Chamber-OS 147): a box in a flex row (FilterBar's search) may shrink below its <input>'s 20-character
+   * size, which at a large default font (5.40) is wider than a phone. */
+  min-width: 0; min-height: var(--aura-input-height);
   background: var(--aura-bg-input); color: var(--aura-fg-primary);
   border: 1px solid var(--aura-border-control); border-radius: var(--aura-radius-md);
   font-family: var(--font-sans); font-size: var(--aura-input-font-size);
@@ -512,7 +514,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-input:hover { border-color: var(--aura-fg-secondary); }
 .aura-input:focus-within { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong); }
 .aura-input__control {
-  flex: 1; min-width: 0; height: calc(var(--aura-input-height) - 2px); padding: 0 var(--aura-space-3);
+  /* 5.42 (Chamber-OS 147): a percentage width makes the control's min-content zero (a compressible control), so a
+   * field in a grid cell or flex row never forces it wider than the screen at a large default font; its preferred
+   * width is still the 20-character size. */
+  flex: 1; width: 100%; min-width: 0; height: calc(var(--aura-input-height) - 2px); padding: 0 var(--aura-space-3);
   border: 0; background: transparent; color: inherit; font: inherit; outline: none;
   appearance: none; -webkit-appearance: none;
 }
@@ -1126,6 +1131,9 @@ a.aura-tab { text-decoration: none; }
   .aura-shell__bar--menu-only { display: none; }
 }
 .aura-shell__bar-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--aura-space-3); }
+/* 5.41 (DxT Monitor #19): a page with its own back arrow marks itself with data-aura-hide-menubutton (on any element)
+ * and the bar drops the menu button, as BottomNav does for data-aura-hide-bottomnav. */
+:root:has([data-aura-hide-menubutton]) :is(.aura-shell__menu, .aura-shell__bar--no-header) { display: none; } /* with no header the bar would be empty */
 .aura-shell__content { flex: 1; min-width: 0; padding: var(--aura-space-6) var(--aura-space-4); }
 /* 5.7: <main> takes focus (tabIndex -1) for skip links and "the row you acted on is gone"; a landmark gets no ring. */
 .aura-shell__content:focus { outline: none; }
@@ -1146,6 +1154,20 @@ a.aura-tab { text-decoration: none; }
 .aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
 .aura-page-header__meta { min-width: 0; font-size: max(13px, .8125rem); line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
 .aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+/* 5.41 (DxT Monitor #20): titleHideBelow — the title is visually hidden (still the heading), the breadcrumb and eyebrow
+ * are gone; with no meta line the text block takes no room, so the actions start the header. */
+@media (max-width: 639.98px) {
+  .aura-page-header--title-hide-below-sm .aura-page-header__title, .aura-page-header--title-hide-below-sm.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-page-header--title-hide-below-sm :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: none; }
+}
+@media (max-width: 767.98px) {
+  .aura-page-header--title-hide-below-md .aura-page-header__title, .aura-page-header--title-hide-below-md.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-page-header--title-hide-below-md :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: none; }
+}
+@media (max-width: 1023.98px) {
+  .aura-page-header--title-hide-below-lg .aura-page-header__title, .aura-page-header--title-hide-below-lg.has-no-meta > .aura-page-header__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-page-header--title-hide-below-lg :is(.aura-page-header__breadcrumb, .aura-page-header__eyebrow) { display: 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. */
@@ -1772,7 +1794,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 }
 /* 5.12 searchGrow: the search fills what the controls leave. */
 .aura-filterbar--grow .aura-filterbar__search { max-width: none; }
-.aura-filterbar--grow .aura-filterbar__search ~ .aura-filterbar__spacer { display: none; }
+.aura-filterbar--grow :is(.aura-filterbar__search, .aura-filterbar__lead:has(> .aura-filterbar__search)) ~ .aura-filterbar__spacer { display: none; }
 /* 5.15 (Chamber-OS 92): the search on its own row up to 1024px; controls sharing their row in equal columns. */
 @media (max-width: 1023.98px) {
   .aura-filterbar--stack-lg .aura-filterbar__search { flex-basis: 100%; max-width: none; }
@@ -1785,6 +1807,31 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterbar--fill .aura-filterbar__controls > .aura-filterselect .aura-filterselect__chevron { margin-inline-start: auto; }
 /* Compact filters sit closer together than full fields. */
 .aura-filterbar__controls:has(> .aura-filterselect) { gap: var(--aura-space-2); }
+/* 5.42 (Chamber-OS 146): collapseBelow — below the breakpoint the controls fold into a "Filters" sheet; the button
+ * shares a row with the search, at its end, as tall as the search (the count and actions wrap below). From the
+ * breakpoint up the search and the hidden button sit in a display: contents box, so the bar lays out as before. */
+.aura-filterbar__lead { display: contents; }
+.aura-filterbar__more { display: none; flex: none; height: var(--aura-input-height); }
+@media (max-width: 639.98px) {
+  .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__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__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. */
+.aura-filterbar--sheet { gap: var(--aura-space-4); }
+.aura-filterbar--sheet > :is(.aura-tag, .aura-btn, .aura-segmented) { align-self: flex-start; }
+.aura-filterbar--sheet .aura-filterselect { display: flex; width: 100%; }
+.aura-filterbar--sheet .aura-filterselect__face { width: 100%; padding-inline: var(--aura-space-3) var(--aura-space-2); font-size: max(16px, 1rem); }
+.aura-filterbar--sheet .aura-filterselect__name { display: none; }
+.aura-filterbar--sheet .aura-filterselect__value { font-weight: 400; }
+.aura-filterbar--sheet .aura-filterselect__chevron { margin-inline-start: auto; width: var(--aura-icon-sm); height: var(--aura-icon-sm); }
 
 /* 5.12 FilterSelect: a compact face — "Status All ▾" — as wide as its words, over Select's machinery and list. */
 .aura-filterselect { position: relative; display: inline-flex; width: fit-content; max-width: 100%; vertical-align: middle; font-family: var(--font-sans); }

package/package.json

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