@jirawatpyk/aura-react 5.13.0 → 5.15.0

package/dist/styles.css

@@ -34,6 +34,16 @@ a.aura-btn { text-decoration: none; }
   padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere;
 }
 .aura-btn.is-loading { cursor: progress; }
+/* 5.14: a button gated with aria-disabled looks unavailable but stays focusable (no pointer-events: none, so the
+ * not-allowed cursor and a tooltip still work). */
+button.aura-btn[aria-disabled='true']:not(.is-loading) { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
+button.aura-btn[aria-disabled='true']:active { transform: none; }
+/* …and hovering it changes nothing: each variant keeps its resting look (the hover rules below are overridden). */
+button.aura-btn--primary[aria-disabled='true']:hover { background: var(--aura-button-primary-bg); }
+button.aura-btn--secondary[aria-disabled='true']:hover, button.aura-btn--ghost[aria-disabled='true']:hover,
+button.aura-btn--danger-secondary[aria-disabled='true']:hover { background: transparent; }
+button.aura-btn--danger[aria-disabled='true']:hover { background: var(--aura-button-danger-bg); }
+button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-shadow-creative); transform: none; }
 .aura-btn.is-loading:active { transform: none; }
 
 /* Focus — ADDED: the source defines none. Solid 2px ring, 2px offset, on every interactive element. */
@@ -302,6 +312,12 @@ a.aura-icon-btn { text-decoration: none; }
 .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); }
+/* 5.15 (Chamber-OS 100): touchHeight — visibly 44px on phones, for buttons and icon buttons a phone design wants full size. */
+@media (max-width: 639.98px) {
+  .aura-btn.aura-btn--touch { height: var(--aura-touch-target); }
+  .aura-btn.aura-btn--touch.aura-btn--full { height: auto; min-height: var(--aura-touch-target); }
+  .aura-icon-btn.aura-icon-btn--touch { width: var(--aura-touch-target); height: var(--aura-touch-target); }
+}
 /* Touch: same 32px look, a 44px hit area around it (WCAG 2.5.5). */
 @media (pointer: coarse) {
   .aura-icon-btn { position: relative; }
@@ -335,6 +351,9 @@ a.aura-icon-btn { text-decoration: none; }
 /* Checkbox — 16px, 4px corners, ink when checked */
 .aura-check { position: relative; display: inline-flex; width: var(--aura-icon-sm); height: var(--aura-icon-sm); flex: none; cursor: pointer; }
 .aura-check__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+/* 5.15 (Chamber-OS 99): hitArea — the input reaches past the box. */
+.aura-check.has-hit { isolation: isolate; } /* the larger input stays inside the checkbox's own stacking */
+.aura-check.has-hit .aura-check__input { inset: calc(-1 * var(--aura-check-hit-y)) calc(-1 * var(--aura-check-hit-x)); z-index: 1; }
 .aura-check__box {
   box-sizing: border-box; width: 100%; height: 100%;
   display: inline-flex; align-items: center; justify-content: center;
@@ -622,6 +641,10 @@ a.aura-icon-btn { text-decoration: none; }
 }
 .aura-card.is-interactive { cursor: pointer; transition: border-color var(--aura-duration-fast) var(--aura-ease); }
 .aura-card.is-interactive:hover { border-color: var(--aura-border-control); }
+/* 5.15 (Chamber-OS 93): frameless below a width — the rows inside become cards of their own. */
+@media (max-width: 639.98px) { .aura-card.aura-card--flush-below-sm, .aura-card.aura-card--flush-below-sm:hover { border-color: transparent; background: transparent; box-shadow: none; } }
+@media (max-width: 767.98px) { .aura-card.aura-card--flush-below-md, .aura-card.aura-card--flush-below-md:hover { border-color: transparent; background: transparent; box-shadow: none; } }
+@media (max-width: 1023.98px) { .aura-card.aura-card--flush-below-lg, .aura-card.aura-card--flush-below-lg:hover { border-color: transparent; background: transparent; box-shadow: none; } }
 .aura-card--creative { border: 2px solid var(--aura-border-strong); box-shadow: var(--aura-card-shadow-creative); }
 .aura-card__head { display: flex; align-items: flex-start; gap: var(--aura-space-3); }
 .aura-card__heading { flex: 1; min-width: 0; }
@@ -739,6 +762,21 @@ a.aura-tab { text-decoration: none; }
 /* 5.7: a segment with no page of its own — the links' colour, not interactive. */
 .aura-crumbs__text { color: var(--aura-fg-secondary); }
 .aura-crumbs__sep { color: var(--aura-fg-tertiary); }
+/* 5.15 (Chamber-OS 94): first, "…", last below a width. */
+.aura-crumbs li.aura-crumbs__more { display: none; }
+/* "…" is the only way to the hidden items: a 24px target, 44px on touch screens. */
+.aura-crumbs__more > button { position: relative; min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
+@media (pointer: coarse) {
+  .aura-crumbs__more > button::after { content: ''; position: absolute; top: 50%; left: 50%; width: var(--aura-touch-target); height: var(--aura-touch-target); transform: translate(-50%, -50%); }
+}
+@media (max-width: 639.98px) {
+  .aura-crumbs--collapse-sm li.aura-crumbs__more { display: inline-flex; }
+  .aura-crumbs--collapse-sm .aura-crumbs__middle { display: none; }
+}
+@media (max-width: 767.98px) {
+  .aura-crumbs--collapse-md li.aura-crumbs__more { display: inline-flex; }
+  .aura-crumbs--collapse-md .aura-crumbs__middle { display: none; }
+}
 
 /* ---------- Avatar ---------- */
 .aura-avatar {
@@ -868,7 +906,11 @@ a.aura-tab { text-decoration: none; }
 .aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); right: var(--aura-space-2); padding: 0; z-index: 1; }
 .aura-drawer__title { flex: 1; margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
 .aura-drawer__desc { margin: 0; padding: 0 var(--aura-space-6); font-size: 14px; line-height: 1.7; color: var(--aura-fg-secondary); }
-.aura-drawer__body { flex: 1; overflow-y: auto; padding: var(--aura-space-4) var(--aura-space-6); font-size: 14px; line-height: 1.7; }
+.aura-drawer__body {
+  flex: 1; overflow-y: auto; padding: var(--aura-space-4) var(--aura-space-6); font-size: 14px; line-height: 1.7;
+  /* 5.14 (Chamber-OS 91): a field scrolled into view (focus, the phone keyboard) keeps clear of the head and foot. */
+  scroll-padding-block: var(--aura-space-4);
+}
 .aura-drawer--nav .aura-drawer__body { padding: 0; }
 .aura-drawer--nav .aura-nav { width: 100%; border-right: 0; }
 .aura-drawer__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-6); border-top: 1px solid var(--aura-border-default); }
@@ -913,12 +955,18 @@ a.aura-tab { text-decoration: none; }
 .aura-grid-layout.is-auto { grid-template-columns: unset; }
 
 /* ---------- AppShell ---------- */
-.aura-shell { display: flex; min-height: 100vh; min-height: 100dvh; background: var(--aura-bg-canvas); color: var(--aura-fg-primary); font-family: var(--font-sans); }
+.aura-shell {
+  display: flex; min-height: 100vh; min-height: 100dvh; background: var(--aura-bg-canvas); color: var(--aura-fg-primary); font-family: var(--font-sans);
+  --aura-shell-bar-height: 56px; /* 5.14 (Chamber-OS 104): the top bar's height, for sticky offsets under it */
+}
+.aura-shell--no-bar { --aura-shell-bar-height: 0px; }
+@media (min-width: 1024px) { .aura-shell--menu-bar { --aura-shell-bar-height: 0px; } }
 .aura-shell__nav { position: sticky; top: 0; height: 100vh; height: 100dvh; flex: none; }
 .aura-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .aura-shell__bar {
   position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--aura-space-2);
-  min-height: 56px; padding: 0 var(--aura-space-6); background: var(--aura-bg-surface); border-bottom: 1px solid var(--aura-border-default);
+  box-sizing: border-box; min-height: 56px;
+  padding: 0 var(--aura-space-6); background: var(--aura-bg-surface); border-bottom: 1px solid var(--aura-border-default);
 }
 /* Responsive in CSS (4.16), so the server's HTML is already right on a phone: below lg the sidebar is hidden and the
  * menu button shows; from lg up the reverse. JavaScript only opens and closes the drawer. */
@@ -935,10 +983,11 @@ a.aura-tab { text-decoration: none; }
 .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; }
+.aura-shell__content.is-flush { padding: 0; } /* 5.14 (Chamber-OS 97): contentPadding={false} */
 @media (min-width: 640px) { .aura-shell__content { padding: var(--aura-space-6); } }
 @media (min-width: 1024px) { .aura-shell__content { padding: var(--aura-space-8); } }
 /* The shell already pads its content: a Container directly inside only caps the width. */
-.aura-shell__content > .aura-container { padding-left: 0; padding-right: 0; }
+.aura-shell__content:not(.is-flush) > .aura-container { padding-left: 0; padding-right: 0; }
 
 /* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
 .aura-table__total { background: var(--aura-bg-canvas); border-top: 1px solid var(--aura-border-strong); font-weight: 600; }
@@ -958,7 +1007,7 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-stat.is-interactive:hover { border-color: var(--aura-border-strong); }
 .aura-stat.is-interactive:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-stat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--aura-space-2); }
-.aura-stat__label { font-size: 13px; font-weight: 500; color: var(--aura-fg-secondary); }
+.aura-stat__label { margin: 0; font-size: 13px; font-weight: 500; color: var(--aura-fg-secondary); } /* 5.14: may be a heading */
 .aura-stat__icon { display: inline-flex; color: var(--aura-fg-secondary); }
 .aura-stat__value { display: flex; align-items: baseline; gap: var(--aura-space-1); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; min-height: 34px; }
 .aura-stat__value.is-numeric { font-variant-numeric: tabular-nums; }
@@ -1062,6 +1111,12 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-progress--warning .aura-progress__bar { background: var(--aura-alert-warning-fg); }
 .aura-progress--danger .aura-progress__bar { background: var(--aura-fg-danger); }
 .aura-progress--neutral .aura-progress__bar { background: var(--aura-fg-secondary); }
+/* 5.15 (Chamber-OS 89): a reserved amount after the value — the same tone, striped, so it reads without colour. */
+.aura-progress__bar--reserved {
+  transition: left var(--aura-duration-base) var(--aura-ease), width var(--aura-duration-base) var(--aura-ease);
+  -webkit-mask-image: repeating-linear-gradient(135deg, currentColor 0 3px, transparent 3px 6px);
+  mask-image: repeating-linear-gradient(135deg, currentColor 0 3px, transparent 3px 6px);
+}
 .aura-progress__track.is-indeterminate .aura-progress__bar { width: 35%; animation: aura-progress-slide var(--aura-duration-pulse) var(--aura-ease) infinite; }
 @keyframes aura-progress-slide { from { left: -35%; } to { left: 100%; } }
 @media (prefers-reduced-motion: reduce) { .aura-progress__track.is-indeterminate .aura-progress__bar { animation-duration: calc(var(--aura-duration-pulse) * 3); } }
@@ -1244,6 +1299,30 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tabs--segmented .aura-tabs__list.aura-segmented { gap: 2px; }
 .aura-tabs--segmented .aura-tabs__list.aura-segmented.is-full .aura-tab { min-width: max-content; }
 .aura-tabs--segmented .aura-tab.aura-segmented__option { margin-bottom: 0; }
+/* 5.15 (Chamber-OS 90): underline tabs sharing the width, always or below a breakpoint; the segmented track below one. */
+.aura-tabs__list.is-fill { gap: 0; }
+.aura-tabs__list.is-fill > .aura-tab { flex: 1 1 0; min-width: max-content; justify-content: center; padding: 0 var(--aura-space-3); }
+@media (max-width: 639.98px) {
+  .aura-tabs__list.is-fill-below-sm { gap: 0; }
+  .aura-tabs__list.is-fill-below-sm > .aura-tab { flex: 1 1 0; min-width: max-content; justify-content: center; padding: 0 var(--aura-space-3); }
+  .aura-segmented.is-full-below-sm { display: flex; width: 100%; }
+  .aura-segmented.is-full-below-sm .aura-segmented__option { flex: 1 1 0; min-width: 0; }
+  .aura-tabs--segmented .aura-segmented.is-full-below-sm .aura-tab { min-width: max-content; }
+}
+@media (max-width: 767.98px) {
+  .aura-tabs__list.is-fill-below-md { gap: 0; }
+  .aura-tabs__list.is-fill-below-md > .aura-tab { flex: 1 1 0; min-width: max-content; justify-content: center; padding: 0 var(--aura-space-3); }
+  .aura-segmented.is-full-below-md { display: flex; width: 100%; }
+  .aura-segmented.is-full-below-md .aura-segmented__option { flex: 1 1 0; min-width: 0; }
+  .aura-tabs--segmented .aura-segmented.is-full-below-md .aura-tab { min-width: max-content; }
+}
+@media (max-width: 1023.98px) {
+  .aura-tabs__list.is-fill-below-lg { gap: 0; }
+  .aura-tabs__list.is-fill-below-lg > .aura-tab { flex: 1 1 0; min-width: max-content; justify-content: center; padding: 0 var(--aura-space-3); }
+  .aura-segmented.is-full-below-lg { display: flex; width: 100%; }
+  .aura-segmented.is-full-below-lg .aura-segmented__option { flex: 1 1 0; min-width: 0; }
+  .aura-tabs--segmented .aura-segmented.is-full-below-lg .aura-tab { min-width: max-content; }
+}
 .aura-tabs--segmented .aura-tab.aura-segmented__option:focus-visible { border-radius: var(--aura-radius-full); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
 .aura-tabs--segmented .aura-tab.aura-segmented__option:disabled,
 .aura-tabs--segmented .aura-tab.aura-segmented__option.is-disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
@@ -1370,6 +1449,16 @@ 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; }
+/* 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; }
+  .aura-filterbar--stack-lg .aura-filterbar__spacer { display: none; }
+}
+.aura-filterbar--fill .aura-filterbar__spacer { display: none; }
+.aura-filterbar--fill .aura-filterbar__controls { flex: 1 1 auto; min-width: 0; }
+.aura-filterbar--fill .aura-filterbar__controls > * { flex: 1 1 0; min-width: 120px; max-width: none; width: auto; }
+.aura-filterbar--fill .aura-filterbar__controls > .aura-filterselect .aura-filterselect__face { width: 100%; }
+.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); }
 
@@ -1610,6 +1699,34 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   }
 }
 
+/* 5.15 (Chamber-OS 85): stackStyle="cards" — each stacked row its own card (DataTable's card spacing), no outer frame.
+ * .aura-tbl-cards is the container here, so the wrap's own frame can be dropped while stacked. */
+.aura-tbl-cards { container: aura-tbl / inline-size; width: 100%; }
+@container aura-tbl (width < 768px) {
+  .aura-tbl-cards--md > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
+  .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
+  .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row {
+    margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);
+    border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); background: var(--aura-bg-surface);
+  }
+  .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { background: var(--aura-bg-canvas); }
+  .aura-tbl--cards.aura-tbl--stack-md > :last-child > .aura-tbl__row:last-child { margin-bottom: 0; }
+  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--cards.aura-tbl--stack-md > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
+  .aura-tbl-wrap.is-flush > .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
+}
+@container aura-tbl (width < 640px) {
+  .aura-tbl-cards--sm > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
+  .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
+  .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row {
+    margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);
+    border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); background: var(--aura-bg-surface);
+  }
+  .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { background: var(--aura-bg-canvas); }
+  .aura-tbl--cards.aura-tbl--stack-sm > :last-child > .aura-tbl__row:last-child { margin-bottom: 0; }
+  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--cards.aura-tbl--stack-sm > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
+  .aura-tbl-wrap.is-flush > .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
+}
+
 /* ---------- 4.20: DataTable width queries and cards, one markup ---------- */
 /* Each .aura-table-q is the table's width × 10000 / its threshold (DataTable.tsx, Q), so `(width < 9999.5px)` is true
  * exactly when the table is narrower than stackBelow or a hideBelow width — before hydration, at any width. */
@@ -1660,6 +1777,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-table__td[data-card='hide'], .aura-table__head > .aura-table__th[data-card='hide'],
   .aura-table__row--skeleton .aura-table__td[data-card='hide'] { display: none; }
   .aura-table__td[data-card='field'] { order: var(--aura-card-order, 5); }
+  /* 5.14 (Chamber-OS 108): in a card every field starts under its label; align: 'end' is for the grid (figures stay tabular). */
+  .aura-table__td.is-end { text-align: start; }
+  .aura-table__row--skeleton .aura-table__td.is-end { justify-content: flex-start; }
   /* hideSelectionInCards: no row boxes, no select-all line. */
   .aura-table--cards-nosel .aura-table__row > .aura-table__sel { display: none; }
   .aura-table--cards-nosel .aura-table__head { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }

package/dist/styles.layer.css

@@ -36,6 +36,16 @@ a.aura-btn { text-decoration: none; }
   padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere;
 }
 .aura-btn.is-loading { cursor: progress; }
+/* 5.14: a button gated with aria-disabled looks unavailable but stays focusable (no pointer-events: none, so the
+ * not-allowed cursor and a tooltip still work). */
+button.aura-btn[aria-disabled='true']:not(.is-loading) { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
+button.aura-btn[aria-disabled='true']:active { transform: none; }
+/* …and hovering it changes nothing: each variant keeps its resting look (the hover rules below are overridden). */
+button.aura-btn--primary[aria-disabled='true']:hover { background: var(--aura-button-primary-bg); }
+button.aura-btn--secondary[aria-disabled='true']:hover, button.aura-btn--ghost[aria-disabled='true']:hover,
+button.aura-btn--danger-secondary[aria-disabled='true']:hover { background: transparent; }
+button.aura-btn--danger[aria-disabled='true']:hover { background: var(--aura-button-danger-bg); }
+button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-shadow-creative); transform: none; }
 .aura-btn.is-loading:active { transform: none; }
 
 /* Focus — ADDED: the source defines none. Solid 2px ring, 2px offset, on every interactive element. */
@@ -304,6 +314,12 @@ a.aura-icon-btn { text-decoration: none; }
 .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); }
+/* 5.15 (Chamber-OS 100): touchHeight — visibly 44px on phones, for buttons and icon buttons a phone design wants full size. */
+@media (max-width: 639.98px) {
+  .aura-btn.aura-btn--touch { height: var(--aura-touch-target); }
+  .aura-btn.aura-btn--touch.aura-btn--full { height: auto; min-height: var(--aura-touch-target); }
+  .aura-icon-btn.aura-icon-btn--touch { width: var(--aura-touch-target); height: var(--aura-touch-target); }
+}
 /* Touch: same 32px look, a 44px hit area around it (WCAG 2.5.5). */
 @media (pointer: coarse) {
   .aura-icon-btn { position: relative; }
@@ -337,6 +353,9 @@ a.aura-icon-btn { text-decoration: none; }
 /* Checkbox — 16px, 4px corners, ink when checked */
 .aura-check { position: relative; display: inline-flex; width: var(--aura-icon-sm); height: var(--aura-icon-sm); flex: none; cursor: pointer; }
 .aura-check__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+/* 5.15 (Chamber-OS 99): hitArea — the input reaches past the box. */
+.aura-check.has-hit { isolation: isolate; } /* the larger input stays inside the checkbox's own stacking */
+.aura-check.has-hit .aura-check__input { inset: calc(-1 * var(--aura-check-hit-y)) calc(-1 * var(--aura-check-hit-x)); z-index: 1; }
 .aura-check__box {
   box-sizing: border-box; width: 100%; height: 100%;
   display: inline-flex; align-items: center; justify-content: center;
@@ -624,6 +643,10 @@ a.aura-icon-btn { text-decoration: none; }
 }
 .aura-card.is-interactive { cursor: pointer; transition: border-color var(--aura-duration-fast) var(--aura-ease); }
 .aura-card.is-interactive:hover { border-color: var(--aura-border-control); }
+/* 5.15 (Chamber-OS 93): frameless below a width — the rows inside become cards of their own. */
+@media (max-width: 639.98px) { .aura-card.aura-card--flush-below-sm, .aura-card.aura-card--flush-below-sm:hover { border-color: transparent; background: transparent; box-shadow: none; } }
+@media (max-width: 767.98px) { .aura-card.aura-card--flush-below-md, .aura-card.aura-card--flush-below-md:hover { border-color: transparent; background: transparent; box-shadow: none; } }
+@media (max-width: 1023.98px) { .aura-card.aura-card--flush-below-lg, .aura-card.aura-card--flush-below-lg:hover { border-color: transparent; background: transparent; box-shadow: none; } }
 .aura-card--creative { border: 2px solid var(--aura-border-strong); box-shadow: var(--aura-card-shadow-creative); }
 .aura-card__head { display: flex; align-items: flex-start; gap: var(--aura-space-3); }
 .aura-card__heading { flex: 1; min-width: 0; }
@@ -741,6 +764,21 @@ a.aura-tab { text-decoration: none; }
 /* 5.7: a segment with no page of its own — the links' colour, not interactive. */
 .aura-crumbs__text { color: var(--aura-fg-secondary); }
 .aura-crumbs__sep { color: var(--aura-fg-tertiary); }
+/* 5.15 (Chamber-OS 94): first, "…", last below a width. */
+.aura-crumbs li.aura-crumbs__more { display: none; }
+/* "…" is the only way to the hidden items: a 24px target, 44px on touch screens. */
+.aura-crumbs__more > button { position: relative; min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
+@media (pointer: coarse) {
+  .aura-crumbs__more > button::after { content: ''; position: absolute; top: 50%; left: 50%; width: var(--aura-touch-target); height: var(--aura-touch-target); transform: translate(-50%, -50%); }
+}
+@media (max-width: 639.98px) {
+  .aura-crumbs--collapse-sm li.aura-crumbs__more { display: inline-flex; }
+  .aura-crumbs--collapse-sm .aura-crumbs__middle { display: none; }
+}
+@media (max-width: 767.98px) {
+  .aura-crumbs--collapse-md li.aura-crumbs__more { display: inline-flex; }
+  .aura-crumbs--collapse-md .aura-crumbs__middle { display: none; }
+}
 
 /* ---------- Avatar ---------- */
 .aura-avatar {
@@ -870,7 +908,11 @@ a.aura-tab { text-decoration: none; }
 .aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); right: var(--aura-space-2); padding: 0; z-index: 1; }
 .aura-drawer__title { flex: 1; margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
 .aura-drawer__desc { margin: 0; padding: 0 var(--aura-space-6); font-size: 14px; line-height: 1.7; color: var(--aura-fg-secondary); }
-.aura-drawer__body { flex: 1; overflow-y: auto; padding: var(--aura-space-4) var(--aura-space-6); font-size: 14px; line-height: 1.7; }
+.aura-drawer__body {
+  flex: 1; overflow-y: auto; padding: var(--aura-space-4) var(--aura-space-6); font-size: 14px; line-height: 1.7;
+  /* 5.14 (Chamber-OS 91): a field scrolled into view (focus, the phone keyboard) keeps clear of the head and foot. */
+  scroll-padding-block: var(--aura-space-4);
+}
 .aura-drawer--nav .aura-drawer__body { padding: 0; }
 .aura-drawer--nav .aura-nav { width: 100%; border-right: 0; }
 .aura-drawer__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-6); border-top: 1px solid var(--aura-border-default); }
@@ -915,12 +957,18 @@ a.aura-tab { text-decoration: none; }
 .aura-grid-layout.is-auto { grid-template-columns: unset; }
 
 /* ---------- AppShell ---------- */
-.aura-shell { display: flex; min-height: 100vh; min-height: 100dvh; background: var(--aura-bg-canvas); color: var(--aura-fg-primary); font-family: var(--font-sans); }
+.aura-shell {
+  display: flex; min-height: 100vh; min-height: 100dvh; background: var(--aura-bg-canvas); color: var(--aura-fg-primary); font-family: var(--font-sans);
+  --aura-shell-bar-height: 56px; /* 5.14 (Chamber-OS 104): the top bar's height, for sticky offsets under it */
+}
+.aura-shell--no-bar { --aura-shell-bar-height: 0px; }
+@media (min-width: 1024px) { .aura-shell--menu-bar { --aura-shell-bar-height: 0px; } }
 .aura-shell__nav { position: sticky; top: 0; height: 100vh; height: 100dvh; flex: none; }
 .aura-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .aura-shell__bar {
   position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--aura-space-2);
-  min-height: 56px; padding: 0 var(--aura-space-6); background: var(--aura-bg-surface); border-bottom: 1px solid var(--aura-border-default);
+  box-sizing: border-box; min-height: 56px;
+  padding: 0 var(--aura-space-6); background: var(--aura-bg-surface); border-bottom: 1px solid var(--aura-border-default);
 }
 /* Responsive in CSS (4.16), so the server's HTML is already right on a phone: below lg the sidebar is hidden and the
  * menu button shows; from lg up the reverse. JavaScript only opens and closes the drawer. */
@@ -937,10 +985,11 @@ a.aura-tab { text-decoration: none; }
 .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; }
+.aura-shell__content.is-flush { padding: 0; } /* 5.14 (Chamber-OS 97): contentPadding={false} */
 @media (min-width: 640px) { .aura-shell__content { padding: var(--aura-space-6); } }
 @media (min-width: 1024px) { .aura-shell__content { padding: var(--aura-space-8); } }
 /* The shell already pads its content: a Container directly inside only caps the width. */
-.aura-shell__content > .aura-container { padding-left: 0; padding-right: 0; }
+.aura-shell__content:not(.is-flush) > .aura-container { padding-left: 0; padding-right: 0; }
 
 /* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
 .aura-table__total { background: var(--aura-bg-canvas); border-top: 1px solid var(--aura-border-strong); font-weight: 600; }
@@ -960,7 +1009,7 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-stat.is-interactive:hover { border-color: var(--aura-border-strong); }
 .aura-stat.is-interactive:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-stat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--aura-space-2); }
-.aura-stat__label { font-size: 13px; font-weight: 500; color: var(--aura-fg-secondary); }
+.aura-stat__label { margin: 0; font-size: 13px; font-weight: 500; color: var(--aura-fg-secondary); } /* 5.14: may be a heading */
 .aura-stat__icon { display: inline-flex; color: var(--aura-fg-secondary); }
 .aura-stat__value { display: flex; align-items: baseline; gap: var(--aura-space-1); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; min-height: 34px; }
 .aura-stat__value.is-numeric { font-variant-numeric: tabular-nums; }
@@ -1064,6 +1113,12 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-progress--warning .aura-progress__bar { background: var(--aura-alert-warning-fg); }
 .aura-progress--danger .aura-progress__bar { background: var(--aura-fg-danger); }
 .aura-progress--neutral .aura-progress__bar { background: var(--aura-fg-secondary); }
+/* 5.15 (Chamber-OS 89): a reserved amount after the value — the same tone, striped, so it reads without colour. */
+.aura-progress__bar--reserved {
+  transition: left var(--aura-duration-base) var(--aura-ease), width var(--aura-duration-base) var(--aura-ease);
+  -webkit-mask-image: repeating-linear-gradient(135deg, currentColor 0 3px, transparent 3px 6px);
+  mask-image: repeating-linear-gradient(135deg, currentColor 0 3px, transparent 3px 6px);
+}
 .aura-progress__track.is-indeterminate .aura-progress__bar { width: 35%; animation: aura-progress-slide var(--aura-duration-pulse) var(--aura-ease) infinite; }
 @keyframes aura-progress-slide { from { left: -35%; } to { left: 100%; } }
 @media (prefers-reduced-motion: reduce) { .aura-progress__track.is-indeterminate .aura-progress__bar { animation-duration: calc(var(--aura-duration-pulse) * 3); } }
@@ -1246,6 +1301,30 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tabs--segmented .aura-tabs__list.aura-segmented { gap: 2px; }
 .aura-tabs--segmented .aura-tabs__list.aura-segmented.is-full .aura-tab { min-width: max-content; }
 .aura-tabs--segmented .aura-tab.aura-segmented__option { margin-bottom: 0; }
+/* 5.15 (Chamber-OS 90): underline tabs sharing the width, always or below a breakpoint; the segmented track below one. */
+.aura-tabs__list.is-fill { gap: 0; }
+.aura-tabs__list.is-fill > .aura-tab { flex: 1 1 0; min-width: max-content; justify-content: center; padding: 0 var(--aura-space-3); }
+@media (max-width: 639.98px) {
+  .aura-tabs__list.is-fill-below-sm { gap: 0; }
+  .aura-tabs__list.is-fill-below-sm > .aura-tab { flex: 1 1 0; min-width: max-content; justify-content: center; padding: 0 var(--aura-space-3); }
+  .aura-segmented.is-full-below-sm { display: flex; width: 100%; }
+  .aura-segmented.is-full-below-sm .aura-segmented__option { flex: 1 1 0; min-width: 0; }
+  .aura-tabs--segmented .aura-segmented.is-full-below-sm .aura-tab { min-width: max-content; }
+}
+@media (max-width: 767.98px) {
+  .aura-tabs__list.is-fill-below-md { gap: 0; }
+  .aura-tabs__list.is-fill-below-md > .aura-tab { flex: 1 1 0; min-width: max-content; justify-content: center; padding: 0 var(--aura-space-3); }
+  .aura-segmented.is-full-below-md { display: flex; width: 100%; }
+  .aura-segmented.is-full-below-md .aura-segmented__option { flex: 1 1 0; min-width: 0; }
+  .aura-tabs--segmented .aura-segmented.is-full-below-md .aura-tab { min-width: max-content; }
+}
+@media (max-width: 1023.98px) {
+  .aura-tabs__list.is-fill-below-lg { gap: 0; }
+  .aura-tabs__list.is-fill-below-lg > .aura-tab { flex: 1 1 0; min-width: max-content; justify-content: center; padding: 0 var(--aura-space-3); }
+  .aura-segmented.is-full-below-lg { display: flex; width: 100%; }
+  .aura-segmented.is-full-below-lg .aura-segmented__option { flex: 1 1 0; min-width: 0; }
+  .aura-tabs--segmented .aura-segmented.is-full-below-lg .aura-tab { min-width: max-content; }
+}
 .aura-tabs--segmented .aura-tab.aura-segmented__option:focus-visible { border-radius: var(--aura-radius-full); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
 .aura-tabs--segmented .aura-tab.aura-segmented__option:disabled,
 .aura-tabs--segmented .aura-tab.aura-segmented__option.is-disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
@@ -1372,6 +1451,16 @@ 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; }
+/* 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; }
+  .aura-filterbar--stack-lg .aura-filterbar__spacer { display: none; }
+}
+.aura-filterbar--fill .aura-filterbar__spacer { display: none; }
+.aura-filterbar--fill .aura-filterbar__controls { flex: 1 1 auto; min-width: 0; }
+.aura-filterbar--fill .aura-filterbar__controls > * { flex: 1 1 0; min-width: 120px; max-width: none; width: auto; }
+.aura-filterbar--fill .aura-filterbar__controls > .aura-filterselect .aura-filterselect__face { width: 100%; }
+.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); }
 
@@ -1612,6 +1701,34 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   }
 }
 
+/* 5.15 (Chamber-OS 85): stackStyle="cards" — each stacked row its own card (DataTable's card spacing), no outer frame.
+ * .aura-tbl-cards is the container here, so the wrap's own frame can be dropped while stacked. */
+.aura-tbl-cards { container: aura-tbl / inline-size; width: 100%; }
+@container aura-tbl (width < 768px) {
+  .aura-tbl-cards--md > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
+  .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
+  .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row {
+    margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);
+    border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); background: var(--aura-bg-surface);
+  }
+  .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { background: var(--aura-bg-canvas); }
+  .aura-tbl--cards.aura-tbl--stack-md > :last-child > .aura-tbl__row:last-child { margin-bottom: 0; }
+  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--cards.aura-tbl--stack-md > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
+  .aura-tbl-wrap.is-flush > .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
+}
+@container aura-tbl (width < 640px) {
+  .aura-tbl-cards--sm > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
+  .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
+  .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row {
+    margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);
+    border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); background: var(--aura-bg-surface);
+  }
+  .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { background: var(--aura-bg-canvas); }
+  .aura-tbl--cards.aura-tbl--stack-sm > :last-child > .aura-tbl__row:last-child { margin-bottom: 0; }
+  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--cards.aura-tbl--stack-sm > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
+  .aura-tbl-wrap.is-flush > .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
+}
+
 /* ---------- 4.20: DataTable width queries and cards, one markup ---------- */
 /* Each .aura-table-q is the table's width × 10000 / its threshold (DataTable.tsx, Q), so `(width < 9999.5px)` is true
  * exactly when the table is narrower than stackBelow or a hideBelow width — before hydration, at any width. */
@@ -1662,6 +1779,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-table__td[data-card='hide'], .aura-table__head > .aura-table__th[data-card='hide'],
   .aura-table__row--skeleton .aura-table__td[data-card='hide'] { display: none; }
   .aura-table__td[data-card='field'] { order: var(--aura-card-order, 5); }
+  /* 5.14 (Chamber-OS 108): in a card every field starts under its label; align: 'end' is for the grid (figures stay tabular). */
+  .aura-table__td.is-end { text-align: start; }
+  .aura-table__row--skeleton .aura-table__td.is-end { justify-content: flex-start; }
   /* hideSelectionInCards: no row boxes, no select-all line. */
   .aura-table--cards-nosel .aura-table__row > .aura-table__sel { display: none; }
   .aura-table--cards-nosel .aura-table__head { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }

package/package.json

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