@jirawatpyk/aura-react 5.24.0 → 5.26.0

package/dist/styles.layer.css

@@ -127,6 +127,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
 .aura-table__row-link:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }
 /* Server mode refresh: the previous page stays, inactive, under a progress bar until the next one arrives */
 .aura-table.is-refreshing .aura-table__row { opacity: 0.6; pointer-events: none; }
+.aura-table.aura-table--borderless { border: 0; border-radius: 0; } /* 5.26: bordered={false} */
 .aura-table__busy-bar {
   position: absolute; z-index: 6; top: calc(var(--aura-table-row-height) - 2px); left: 0; right: 0; height: 2px; overflow: hidden;
   border-radius: var(--aura-radius-full); pointer-events: none;
@@ -316,11 +317,12 @@ a.aura-icon-btn { text-decoration: 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.
  * 5.24 (Chamber-OS 123): also wherever the primary pointer is coarse — a tablet at 768–1366px is a finger, not a mouse.
- * A mouse on a wide screen (pointer: fine) keeps the compact size. */
+ * A mouse on a wide screen (pointer: fine) keeps the compact size. 5.25 (Chamber-OS 124): toggle Tags too. */
 @media (max-width: 639.98px), (pointer: coarse) {
   .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); }
+  .aura-tag.aura-tag--touch { min-height: var(--aura-touch-target); }
 }
 /* Touch: same 32px look, a 44px hit area around it (WCAG 2.5.5). */
 @media (pointer: coarse) {
@@ -654,13 +656,33 @@ a.aura-icon-btn { text-decoration: none; }
   padding: var(--aura-card-padding); background: var(--aura-bg-surface); color: var(--aura-fg-primary);
   border: 1px solid var(--aura-border-default); border-radius: var(--aura-card-radius); box-shadow: var(--aura-shadow-enterprise);
   font-family: var(--font-sans); font-size: 14px;
+  --aura-card-bleed: var(--aura-card-padding); /* 5.26: how far a bleeding table reaches out; 0 where the card is flush */
 }
 .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; } }
+@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; --aura-card-bleed: 0px; } }
+@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; --aura-card-bleed: 0px; } }
+@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-bleed: 0px; } }
+/* 5.26 (Chamber-OS 127): bleed — a table that is a direct child of a Card's content spans its inner width; the side
+ * borders and radius go (a 0px bleed — a flush card — keeps them: 1px - min(1px, 0) = 1px). As the card's last content
+ * it also drops its bottom rule and the card's radius closes it. */
+/* Two classes deep so it beats a stackable Table's width: 100%. `* 1000` turns any bleed into a 0 radius; 0 keeps it. */
+.aura-card .aura-card__body > .aura-bleed { margin-inline: calc(-1 * var(--aura-card-bleed)); width: auto; }
+/* A Table with bordered={false} too: its outer cells take the bleed (0 where the card is flush, as before). */
+.aura-card__body > .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child,
+.aura-card__body > .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: var(--aura-card-bleed); }
+.aura-card__body > .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child,
+.aura-card__body > .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: var(--aura-card-bleed); }
+.aura-card__body > .aura-bleed.aura-bleed-frame, .aura-card__body > .aura-bleed .aura-bleed-frame {
+  border-inline-width: calc(1px - min(1px, var(--aura-card-bleed))); border-radius: max(0px, var(--aura-card-radius) - var(--aura-card-bleed) * 1000);
+}
+.aura-card__body:last-child > .aura-bleed:last-child { margin-bottom: calc(-1 * var(--aura-card-bleed)); }
+.aura-card__body:last-child > .aura-bleed:last-child.aura-bleed-frame, .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame {
+  border-bottom-width: calc(1px - min(1px, var(--aura-card-bleed)));
+  border-bottom-left-radius: calc(var(--aura-card-radius) - min(1px, var(--aura-card-bleed)));
+  border-bottom-right-radius: calc(var(--aura-card-radius) - min(1px, var(--aura-card-bleed)));
+}
 .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; }
@@ -961,6 +983,7 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-container { box-sizing: border-box; width: 100%; max-width: var(--aura-container-max); margin: 0 auto; padding: 0 var(--aura-space-4); }
 .aura-container.is-narrow { max-width: var(--aura-container-narrow); }
+.aura-container.is-start { margin-inline: 0; } /* 5.26 (Chamber-OS 126): align="start" */
 /* Breakpoints: sm 640 · md 768 · lg 1024 · xl 1280 (aura-bp-* tokens; media queries can't read variables) */
 @media (min-width: 640px) {
   .aura-stack { flex-direction: var(--aura-stack-dir-sm, var(--aura-stack-dir-base, column)); align-items: var(--aura-stack-align-sm, stretch); gap: var(--aura-stack-gap-sm, var(--aura-stack-gap-base, var(--aura-space-4))); }
@@ -1413,7 +1436,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-toaster { left: var(--aura-space-4); right: var(--aura-space-4); bottom: var(--aura-space-4); width: auto; }
   .aura-toaster.is-center { left: var(--aura-space-4); right: var(--aura-space-4); transform: none; }
   .aura-toaster.is-top { top: calc(var(--aura-toaster-offset, var(--aura-space-4)) + env(safe-area-inset-top, 0px)); }
-  .aura-card { padding: var(--aura-space-4); }
+  .aura-card { padding: var(--aura-space-4); --aura-card-bleed: var(--aura-space-4); }
   .aura-stat { padding: var(--aura-space-4); }
   .aura-stat__value { font-size: 24px; }
   .aura-tabs__list { gap: var(--aura-space-4); }
@@ -1532,6 +1555,16 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); cursor: not-allowed; }
 .aura-filterselect.is-disabled .aura-filterselect__native { cursor: not-allowed; }
 @media (forced-colors: active) { .aura-filterselect__face { border-color: ButtonText; } }
+/* 5.26 (Chamber-OS 128) FilterDateRange: presets beside the range calendar; above it on phones. */
+.aura-filterdate__pop { display: flex; gap: var(--aura-space-3); overflow-y: auto; }
+.aura-filterdate__presets { display: flex; flex-direction: column; gap: 2px; min-width: 8rem; padding-inline-end: var(--aura-space-3); border-inline-end: 1px solid var(--aura-border-subtle); }
+.aura-filterdate__preset { justify-content: flex-start; }
+.aura-filterdate__preset.is-selected { background: var(--aura-bg-selected); }
+@media (forced-colors: active) { .aura-filterdate__preset.is-selected { outline: 2px solid Highlight; outline-offset: -2px; } }
+@media (max-width: 639.98px) {
+  .aura-filterdate__pop { flex-direction: column; }
+  .aura-filterdate__presets { flex-direction: row; flex-wrap: wrap; min-width: 0; padding: 0 0 var(--aura-space-2); border: 0; border-bottom: 1px solid var(--aura-border-subtle); }
+}
 
 /* Command palette: a search field over a grouped list, above everything else (it can open from a Dialog) */
 .aura-dialog-layer.aura-command-layer { z-index: var(--aura-z-menu); align-items: flex-start; padding: 12vh var(--aura-space-4) var(--aura-space-4); }
@@ -1699,6 +1732,22 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl .is-end { text-align: right; }
 .aura-tbl .is-center { text-align: center; }
 .aura-tbl .is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
+/* 5.26 (Chamber-OS 129) stickyHeader. To the page: the box must not be a scroll container, so it clips sideways
+ * instead (nothing overflows while it fits; JavaScript marks a table that doesn't, which scrolls as before). In a
+ * maxHeight box: the box scrolls both ways and the header pins to its top. The rule under the band moves with it. */
+.aura-tbl-wrap.is-sticky-page:not(.is-wide) { overflow-x: clip; }
+.aura-tbl-wrap.has-max, .aura-tbl-cards > .aura-tbl-wrap.has-max { overflow: auto; box-sizing: border-box; }
+.aura-tbl-wrap.is-sticky-page > .aura-tbl > .aura-tbl__head .aura-tbl__th, .aura-tbl-wrap.is-sticky-box > .aura-tbl > .aura-tbl__head .aura-tbl__th {
+  position: sticky; top: var(--aura-table-sticky-top, var(--aura-shell-bar-height, 0px)); z-index: 2;
+  border-bottom-width: 0; box-shadow: inset 0 -1px 0 var(--aura-border-default); /* one rule, at rest and pinned */
+}
+/* Forced colours drop the shadow; a pseudo-element line moves with the pinned cell (a collapsed border doesn't). */
+@media (forced-colors: active) {
+  .aura-tbl-wrap.is-sticky-page > .aura-tbl > .aura-tbl__head .aura-tbl__th::after, .aura-tbl-wrap.is-sticky-box > .aura-tbl > .aura-tbl__head .aura-tbl__th::after {
+    content: ''; position: absolute; inset: auto 0 0 0; border-bottom: 1px solid CanvasText;
+  }
+}
+.aura-tbl-wrap.is-sticky-box > .aura-tbl > .aura-tbl__head .aura-tbl__th { top: 0; }
 .aura-tbl-wrap:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
 /* 5.13 (Chamber-OS 81): align="middle" centres body and footer cells on their row; bordered={false} drops the frame and
  * the outer cells' side padding, so the table lines up with what's around it (a Card's heading). */
@@ -1740,6 +1789,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     content: attr(data-label); content: attr(data-label) / '';
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
   }
+  /* 5.26: a bleeding list keeps its rows' text level with the Card's content (16px where it doesn't bleed). */
+  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
 }
 @container aura-tbl (width < 640px) {
   .aura-tbl--stack-sm, .aura-tbl--stack-sm > .aura-tbl__body, .aura-tbl--stack-sm > .aura-tbl__foot, .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { display: block; }
@@ -1762,6 +1813,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     content: attr(data-label); content: attr(data-label) / '';
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
   }
+  /* 5.26: a bleeding list keeps its rows' text level with the Card's content (16px where it doesn't bleed). */
+  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
 }
 
 /* 5.15 (Chamber-OS 85): stackStyle="cards" — each stacked row its own card (DataTable's card spacing), no outer frame.
@@ -1769,6 +1822,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .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-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-inline: var(--aura-card-bleed); }
+  .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-bottom: var(--aura-card-bleed); }
   .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-tbl-card-py, var(--aura-space-4)) var(--aura-space-4);
@@ -1780,6 +1835,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 }
 @container aura-tbl (width < 640px) {
   .aura-tbl-cards--sm > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
+  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-inline: var(--aura-card-bleed); }
+  .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-bottom: var(--aura-card-bleed); }
   .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-tbl-card-py, var(--aura-space-4)) var(--aura-space-4);
@@ -1809,6 +1866,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
  * screen readers; the labels are generated content with empty alt text, so they aren't read twice. */
 @container aura-stack (width < 9999.5px) {
   .aura-table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
+  /* 5.26: stacked cards inside a framed Card keep its padding (0 where the Card is flush). */
+  .aura-card__body > .aura-bleed .aura-bleed-frame { padding-inline: var(--aura-card-bleed); }
+  .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame { padding-bottom: var(--aura-card-bleed); }
   .aura-table__scroll { overflow: visible; height: auto; }
   .aura-table__busy-bar { top: 0; }
   .aura-table__picker { display: none; }

package/package.json

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