@jirawatpyk/aura-react 5.73.0 → 5.75.0

package/dist/styles.layer.css

@@ -247,7 +247,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
 /* Sortable header */
 .aura-table__sort {
   display: inline-flex; align-items: center; gap: var(--aura-space-1); min-width: 0;
-  margin: 0 calc(-1 * var(--aura-space-1)); padding: var(--aura-space-1);
+  margin: calc(-1 * var(--aura-space-1)); padding: var(--aura-space-1); /* 5.75: negative on all sides, so a sortable label sits on the line of a plain one */
   border: 0; border-radius: var(--aura-radius-xs); background: transparent;
   font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap;
   transition: color var(--aura-duration-fast) var(--aura-ease);
@@ -483,6 +483,14 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-pill--ready { background: var(--aura-status-ready-bg); color: var(--aura-status-ready-fg); }
 .aura-pill--warning { background: var(--aura-status-warning-bg); color: var(--aura-status-warning-fg); }
 .aura-pill--blocked { background: var(--aura-status-blocked-bg); color: var(--aura-status-blocked-fg); }
+/* 5.75 (visual audit): every pill is soft — a tint and its own darker word, as Alert and Badge — so a table of
+ * statuses reads evenly and Blocked or Warning don't shout in every row. variant="solid" is the strong fill, for the
+ * one status on a screen that must catch the eye. */
+.aura-pill--neutral.is-solid { background: var(--aura-status-neutral-solid-bg); color: var(--aura-status-neutral-solid-fg); }
+.aura-pill--progress.is-solid { background: var(--aura-status-progress-solid-bg); color: var(--aura-status-progress-solid-fg); }
+.aura-pill--ready.is-solid { background: var(--aura-status-ready-solid-bg); color: var(--aura-status-ready-solid-fg); }
+.aura-pill--warning.is-solid { background: var(--aura-status-warning-solid-bg); color: var(--aura-status-warning-solid-fg); }
+.aura-pill--blocked.is-solid { background: var(--aura-status-blocked-solid-bg); color: var(--aura-status-blocked-solid-fg); }
 
 /* Icon — Lucide, 24-grid, stroke in currentColor */
 .aura-icon { flex: none; display: inline-block; vertical-align: middle; }
@@ -880,7 +888,8 @@ a.aura-tab { text-decoration: none; }
 .aura-cal__popover, .aura-menu, .aura-toast, .aura-command { --aura-hover: var(--aura-bg-surface-hover); }
 /* Canvas-coloured bands inside those surfaces: SideNav in the drawer, the DataTable header, picker corner and totals. */
 .aura-drawer .aura-nav, .aura-table__head, .aura-table__picker, .aura-table__total { --aura-hover: var(--aura-bg-canvas-hover); }
-.aura-nav__item.is-active { background: var(--aura-bg-selected); color: var(--aura-fg-primary); }
+.aura-nav__item.is-active { background: var(--aura-bg-selected); color: var(--aura-fg-primary); box-shadow: inset 3px 0 0 var(--aura-nav-active-edge); } /* 5.75: the edge, in dark */
+[dir='rtl'] .aura-nav__item.is-active, .aura-nav[dir='rtl'] .aura-nav__item.is-active { box-shadow: inset -3px 0 0 var(--aura-nav-active-edge); }
 .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
 .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
 /* Touch (5.7): rows are 44px on coarse pointers (AppShell's phone drawer); desktop keeps 36px. */
@@ -920,7 +929,8 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-nav--collapsed .aura-nav__chevron { display: none; }
 .aura-nav--collapsed .aura-nav__section + .aura-nav__section { margin-top: var(--aura-space-3); padding-top: var(--aura-space-3); border-top: 1px solid var(--aura-border-default); }
-.aura-nav--collapsed .aura-nav__item--group.has-active { background: var(--aura-bg-selected); }
+.aura-nav--collapsed .aura-nav__item--group.has-active { background: var(--aura-bg-selected); box-shadow: inset 3px 0 0 var(--aura-nav-active-edge); } /* 5.75: as the expanded item */
+[dir='rtl'] .aura-nav--collapsed .aura-nav__item--group.has-active, .aura-nav--collapsed[dir='rtl'] .aura-nav__item--group.has-active { box-shadow: inset -3px 0 0 var(--aura-nav-active-edge); }
 .aura-nav--collapsed .aura-nav__item--group.has-active .aura-icon { color: var(--aura-fg-accent); }
 .aura-nav__initial {
   display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--aura-radius-sm);
@@ -1015,6 +1025,14 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-combo__option > .aura-icon { color: var(--aura-fg-secondary); }
 .aura-combo__option.is-active { background: var(--aura-hover, var(--aura-bg-surface-hover)); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
+/* 5.75 (visual audit): under the pointer the option is only shaded, as a Menu item, so the list doesn't show a second
+ * ring under the field's. Moving by keys brings the ring back (the field keeps focus; the option is aria-activedescendant,
+ * which :focus-visible can't see). */
+:root[data-aura-modality='pointer'] .aura-combo__option.is-active { outline: none; }
+@media (forced-colors: active) {
+  /* the shade is dropped in forced colours: keep a thin mark on the row under the pointer */
+  :root[data-aura-modality='pointer'] .aura-combo__option.is-active { outline: 1px solid Highlight; }
+}
 .aura-combo__option.is-selected { font-weight: 500; }
 .aura-combo__option.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 .aura-combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@@ -1359,6 +1377,10 @@ summary.aura-link::-webkit-details-marker { display: none; }
 .aura-page-header__actions.is-split:not(:has(> :not(.aura-page-header__bar))) { display: contents; }
 @media (max-width: 639.98px) and (min-height: 30.00125rem) {
   .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar { display: flex; flex: none; min-width: 0; }
+  /* 5.74 (Chamber-OS 193): nothing but the status shown (Pay now hidden after paying): no strip, and no bar padding below. */
+  .aura-page-header--actions-bar-below-sm[data-aura-bar="empty"] > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm[data-aura-bar="empty"] > .aura-page-header__actions > .aura-page-header__bar { display: none; }
+  /* …and before hydration, from the markup alone (actionsBar's strip whose element children but the status are all `hidden` or visually hidden): it already goes; the page padding follows once the client has looked. */
+  .aura-page-header--actions-bar-below-sm:not([data-aura-bar="shown"]) > .aura-page-header__actions > .aura-page-header__bar:not(:has(> :not(.aura-page-header__status, [hidden], .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text))):has(> *) { display: none; }
   :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-3) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
   /* 5.54 (Chamber-OS 166): the bar's buttons are 44px whatever the density, as ActionBar's on a phone. */
   :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) { --aura-button-height: var(--aura-touch-target); --aura-button-height-sm: var(--aura-touch-target); }
@@ -1374,13 +1396,17 @@ summary.aura-link::-webkit-details-marker { display: none; }
   :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar):has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; }
   :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar):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); }
   :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar):not(:has(> .aura-btn, > * > .aura-btn)) > .aura-page-header__status { flex: 1 1 0; align-self: center; }
-  :root:has(.aura-page-header--actions-bar-below-sm) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
-  :root:has(.aura-page-header--actions-bar-below-sm.aura-page-header--actions-bar-floating) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); }
-  :root:has(.aura-page-header--actions-bar-below-sm) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-page-actions-space)); }
-  :root:has(.aura-page-header--actions-bar-below-sm):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-page-actions-space); }
+  :root:has(.aura-page-header--actions-bar-below-sm:not([data-aura-bar="empty"])) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
+  :root:has(.aura-page-header--actions-bar-below-sm.aura-page-header--actions-bar-floating:not([data-aura-bar="empty"])) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); }
+  :root:has(.aura-page-header--actions-bar-below-sm:not([data-aura-bar="empty"])) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-page-actions-space)); }
+  :root:has(.aura-page-header--actions-bar-below-sm:not([data-aura-bar="empty"])):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-page-actions-space); }
 }
 @media (max-width: 767.98px) and (min-height: 30.00125rem) {
   .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar { display: flex; flex: none; min-width: 0; }
+  /* 5.74 (Chamber-OS 193): nothing but the status shown (Pay now hidden after paying): no strip, and no bar padding below. */
+  .aura-page-header--actions-bar-below-md[data-aura-bar="empty"] > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md[data-aura-bar="empty"] > .aura-page-header__actions > .aura-page-header__bar { display: none; }
+  /* …and before hydration, from the markup alone (actionsBar's strip whose element children but the status are all `hidden` or visually hidden): it already goes; the page padding follows once the client has looked. */
+  .aura-page-header--actions-bar-below-md:not([data-aura-bar="shown"]) > .aura-page-header__actions > .aura-page-header__bar:not(:has(> :not(.aura-page-header__status, [hidden], .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text))):has(> *) { display: none; }
   :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-3) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
   /* 5.54 (Chamber-OS 166): the bar's buttons are 44px whatever the density, as ActionBar's on a phone. */
   :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) { --aura-button-height: var(--aura-touch-target); --aura-button-height-sm: var(--aura-touch-target); }
@@ -1396,10 +1422,10 @@ summary.aura-link::-webkit-details-marker { display: none; }
   :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar):has(> .aura-icon-btn, > * > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; }
   :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar):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); }
   :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar):not(:has(> .aura-btn, > * > .aura-btn)) > .aura-page-header__status { flex: 1 1 0; align-self: center; }
-  :root:has(.aura-page-header--actions-bar-below-md) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
-  :root:has(.aura-page-header--actions-bar-below-md.aura-page-header--actions-bar-floating) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); }
-  :root:has(.aura-page-header--actions-bar-below-md) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-page-actions-space)); }
-  :root:has(.aura-page-header--actions-bar-below-md):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-page-actions-space); }
+  :root:has(.aura-page-header--actions-bar-below-md:not([data-aura-bar="empty"])) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + var(--aura-space-3)); scroll-padding-bottom: var(--aura-page-actions-space); }
+  :root:has(.aura-page-header--actions-bar-below-md.aura-page-header--actions-bar-floating:not([data-aura-bar="empty"])) { --aura-page-actions-space: calc(var(--aura-page-actions-height, 7rem) + var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)) + var(--aura-space-3)); }
+  :root:has(.aura-page-header--actions-bar-below-md:not([data-aura-bar="empty"])) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-page-actions-space)); }
+  :root:has(.aura-page-header--actions-bar-below-md:not([data-aura-bar="empty"])):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-page-actions-space); }
 }
 /* 5.71: as specific as the bar rules (and after them), and on actionsBar's box too, so reduced motion stops the slide. */
 @media (prefers-reduced-motion: reduce) { .aura-page-header.aura-page-header > .aura-page-header__actions, .aura-page-header.aura-page-header > .aura-page-header__actions > .aura-page-header__bar { transition: none; } }
@@ -1599,7 +1625,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-badge.is-outline { background: transparent; border-color: currentColor; }
 .aura-badge--neutral.is-outline { border-color: var(--aura-border-control); }
 .aura-badge.is-solid { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
-.aura-badge--danger.is-solid { background: var(--aura-status-blocked-bg); color: var(--aura-status-blocked-fg); }
+.aura-badge--danger.is-solid { background: var(--aura-status-blocked-solid-bg); color: var(--aura-status-blocked-solid-fg); }
 
 /* ---------- Tag ---------- */
 .aura-tag {
@@ -1614,7 +1640,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-tag.is-selectable:focus-visible, .aura-tag__remove:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-tag.is-selectable:disabled, .aura-tag.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 .aura-tag__remove {
-  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: -6px; padding: 0; border: 0; border-radius: var(--aura-radius-full);
+  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-end: -8px; /* 5.75: a 16px × in a 24px button (was 14 in 20) */ padding: 0; border: 0; border-radius: var(--aura-radius-full);
   background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
 }
 .aura-tag__remove:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
@@ -1632,7 +1658,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-progress__key { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
 .aura-progress__swatch { flex: none; width: 12px; height: 8px; border-radius: 2px; background: var(--aura-fg-accent); }
 .aura-progress--success :is(.aura-progress__bar, .aura-progress__swatch) { background: var(--aura-fg-positive); }
-.aura-progress--warning :is(.aura-progress__bar, .aura-progress__swatch) { background: var(--aura-alert-warning-fg); }
+.aura-progress--warning :is(.aura-progress__bar, .aura-progress__swatch) { background: var(--aura-progress-warning-fill); } /* 5.75: amber, not rust */
 .aura-progress--danger :is(.aura-progress__bar, .aura-progress__swatch) { background: var(--aura-fg-danger); }
 .aura-progress--neutral :is(.aura-progress__bar, .aura-progress__swatch) { 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. */
@@ -2028,6 +2054,11 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterbar__search .aura-input__control::-webkit-search-cancel-button { display: none; }
 .aura-filterbar__clear-search { margin-right: 6px; }
 .aura-filterbar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-3); }
+/* 5.75 (visual audit): a toggle Tag among the controls is as tall as the search and selects beside it. */
+.aura-filterbar__controls .aura-tag.is-selectable { min-height: var(--aura-input-height); }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-filterbar__controls .aura-tag.aura-tag--touch { min-height: max(var(--aura-input-height), var(--aura-touch-target)); } /* a touchHeight Tag keeps 44px (5.25) */
+}
 .aura-filterbar__spacer { flex: 1 1 0; }
 .aura-filterbar__count { font-size: max(13px, .8125rem); color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
 .aura-filterbar__actions { display: flex; align-items: center; gap: var(--aura-space-2); }
@@ -2668,8 +2699,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 
 /* 5.30: a plain link (no class) inside AURA's surfaces takes the accent colour instead of the browser's blue. Zero
  * specificity, so any rule of yours for links wins. */
-:where(.aura-card, .aura-stat, .aura-alert, .aura-empty, .aura-field, .aura-tabs__panel, .aura-shell__main, .aura-tbl, .aura-table, .aura-dialog) :where(a:not([class])) {
-  color: var(--aura-fg-accent); text-underline-offset: 2px;
+:where(.aura-card, .aura-stat, .aura-alert, .aura-empty, .aura-field, .aura-tabs__panel, .aura-shell__main, .aura-tbl, .aura-table, .aura-dialog, .aura-page-header, .aura-popover, .aura-drawer, .aura-prose, .aura-text-body, .aura-text-caption) :where(a:not([class])) {
+  color: var(--aura-fg-accent); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; /* 5.75: more surfaces, and always underlined */
 }
 
 }

package/package.json

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