@jirawatpyk/aura-react 5.73.0 → 5.75.0

package/dist/esm/Select.js

@@ -4,7 +4,18 @@ import { createPortal } from "react-dom";
 import { FIELD_KEYS, Field, describedBy } from "./Field.js";
 import { Icon } from "./Icon.js";
 import { useDensity } from "./locale.js";
-import { cx, devWarnOnce, omit, touchClass, uid, useIsoLayoutEffect, useMergedRef, useMounted } from "./internal.js";
+import {
+  cx,
+  devWarnOnce,
+  useInputModality,
+  omit,
+  pointerModality,
+  touchClass,
+  uid,
+  useIsoLayoutEffect,
+  useMergedRef,
+  useMounted
+} from "./internal.js";
 import { IconCheck, IconChevronDown } from "./icons.js";
 const h = React.createElement;
 const FILTER_KEY = "__auraFilter";
@@ -86,6 +97,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
   const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY, "readOnly"]));
   const ro = !!props.readOnly && !props.disabled;
   const mounted = useMounted();
+  useInputModality();
   const kept = React.useRef(null);
   const current = [].concat(props.value != null ? props.value : props.defaultValue != null ? props.defaultValue : []).map(String);
   const opts = (props.options || []).map(function(o) {
@@ -498,6 +510,7 @@ const Select = React.forwardRef(function Select2(props, ref) {
           e.preventDefault();
         },
         onPointerMove: function() {
+          pointerModality();
           if (!it.disabled && active !== it.index) activeState[1](it.index);
         },
         onClick: function() {

package/dist/esm/Tag.js

@@ -92,7 +92,7 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
         "aria-label": props.removeLabel || t.remove(name),
         onClick: props.onRemove
       },
-      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null), size: 14 })
+      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null), size: 16 })
     );
     return /* @__PURE__ */ React.createElement(Tooltip, { content: fullText, open: fullText ? void 0 : false }, btn);
   }() : null);

package/dist/esm/TimePicker.js

@@ -1,7 +1,17 @@
 'use client';
 import * as React from "react";
 import { createPortal } from "react-dom";
-import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, useMergedRef, touchClass } from "./internal.js";
+import {
+  cx,
+  uid,
+  useMaybeControlled,
+  useMounted,
+  useIsoLayoutEffect,
+  useMergedRef,
+  touchClass,
+  useInputModality,
+  pointerModality
+} from "./internal.js";
 import { useStrings } from "./locale.js";
 import { Icon } from "./Icon.js";
 import { Field } from "./Field.js";
@@ -46,6 +56,7 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
   const pos = React.useState(null);
   const boxRef = React.useRef(null), inputRef = React.useRef(null), listRef = React.useRef(null), inputMerged = useMergedRef(ref, inputRef);
   const mounted = useMounted();
+  useInputModality();
   function nearest(v) {
     const n = toMin(v);
     if (n == null) return 0;
@@ -217,6 +228,7 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
             choose(i);
           },
           onPointerMove: function() {
+            pointerModality();
             if (active !== i) setActive(i);
           }
         },

package/dist/esm/display.js

@@ -102,13 +102,19 @@ const PILL_ICON = {
 };
 function statusPillElement(props, ref) {
   const tone = props.tone || toneFor(props.children);
-  const rest = omit(props, ["tone", "className", "children", "wrap", "busy"]);
+  const rest = omit(props, ["tone", "className", "children", "wrap", "busy", "variant"]);
   return /* @__PURE__ */ React.createElement(
     "span",
     {
       ...rest,
       ref,
-      className: cx("aura-pill", "aura-pill--" + tone, props.wrap && "is-wrap", props.className)
+      className: cx(
+        "aura-pill",
+        "aura-pill--" + tone,
+        props.variant === "solid" && "is-solid",
+        props.wrap && "is-wrap",
+        props.className
+      )
     },
     props.busy ? /* @__PURE__ */ React.createElement(Icon, { name: h(IconLoaderCircle), size: 12, className: "aura-spin" }) : /* @__PURE__ */ React.createElement(Icon, { name: h(PILL_ICON[tone] || IconCircle), size: 12 }),
     props.wrap ? /* @__PURE__ */ React.createElement("span", { className: "aura-pill__text" }, props.children) : props.children

package/dist/esm/internal.js

@@ -124,7 +124,7 @@ function onScreen(el) {
   const v = getComputedStyle(el).visibility;
   return v !== "hidden" && v !== "collapse";
 }
-function barStack(name, onMany) {
+function barStack(name, onMany, onRead) {
   const els = [];
   let frame = 0;
   const docEvents = ["click", "keydown", "focusin", "transitionend", "beforematch"];
@@ -132,6 +132,7 @@ function barStack(name, onMany) {
   function write() {
     if (frame) cancelAnimationFrame(frame);
     frame = 0;
+    if (onRead) onRead();
     const root = document.documentElement;
     let shown = null, boxed = null, pinned = false, many = 0;
     for (let i = els.length - 1; i >= 0; i--) {
@@ -186,6 +187,36 @@ function barStack(name, onMany) {
     write
   };
 }
+let modalityOn = false;
+function setModality(m) {
+  const root = document.documentElement;
+  if (m === "pointer") {
+    if (root.getAttribute("data-aura-modality") !== "pointer") root.setAttribute("data-aura-modality", "pointer");
+  } else if (root.hasAttribute("data-aura-modality")) root.removeAttribute("data-aura-modality");
+}
+function useInputModality() {
+  React.useEffect(function() {
+    if (modalityOn) return;
+    modalityOn = true;
+    document.addEventListener(
+      "keydown",
+      function() {
+        setModality("key");
+      },
+      true
+    );
+    document.addEventListener(
+      "pointerdown",
+      function() {
+        setModality("pointer");
+      },
+      true
+    );
+  }, []);
+}
+function pointerModality() {
+  setModality("pointer");
+}
 export {
   FOCUSABLE,
   FilterSheet,
@@ -201,10 +232,12 @@ export {
   isTabStop,
   omit,
   plainClick,
+  pointerModality,
   tone,
   touchClass,
   trapTab,
   uid,
+  useInputModality,
   useIsoLayoutEffect,
   useMaybeControlled,
   useMergedRef,

package/dist/esm/status.js

@@ -1,9 +1,9 @@
 'use client';
 const TONE_WORDS = {
-  ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
+  ready: ["ready", "done", "complete", "completed", "approved", "live", "passed", "active", "up", "online", "resolved"],
   progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
   warning: ["warning", "problem", "degraded", "at risk"],
-  blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
+  blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled", "down", "offline", "outage"]
 };
 function toneFor(status) {
   const s = String(status == null ? "" : status).trim().toLowerCase();

package/dist/esm/theme.js

@@ -148,7 +148,7 @@ function createTheme(opts) {
   D["fg-accent"] = fit(b[300], darkGrounds, 4.5, 1);
   D["accent-violet"] = fit(b[400], darkGrounds, 3, 1);
   D["focus-ring"] = fit(b[400], darkGrounds, 3, 1);
-  D["bg-selected"] = mix(ZINC[900], b[500], 0.16);
+  D["bg-selected"] = mix(ZINC[900], b[500], 0.2);
   D["alert-info-bg"] = D["bg-selected"];
   D["alert-info-fg"] = fit(b[300], [D["alert-info-bg"]], 4.5, 1);
   D["alert-info-border"] = mix(ZINC[900], b[400], 0.4);
@@ -169,6 +169,7 @@ function createTheme(opts) {
   L["control-checked-fg"] = onFill(L["control-checked-bg"]);
   D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
   D["control-checked-fg"] = onFill(D["control-checked-bg"]);
+  D["nav-active-edge"] = D["control-checked-bg"];
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);

package/dist/index.d.cts

@@ -335,7 +335,11 @@ export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanEle
 	/** 5.70 (Chamber-OS 189): the spinner in the icon slot, for a state still in progress ("Waiting for payment").
 	 * The words still say it; the tone is unchanged. */
 	busy?: boolean | undefined;
-	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
+	/** 5.75 (visual audit): `"soft"` (default) is a tint with a darker word, like Alert and Badge, so a column of statuses
+	 * reads evenly. `"solid"` is the strong fill — for the one status on a screen that must catch the eye (an overdue
+	 * total, a failed payment), not for every row. */
+	variant?: "soft" | "solid" | undefined;
+	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked; 5.75: Active/Up/Online/Resolved → ready, Down/Offline/Outage → blocked; anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;
 }

package/dist/index.d.ts

@@ -335,7 +335,11 @@ export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanEle
 	/** 5.70 (Chamber-OS 189): the spinner in the icon slot, for a state still in progress ("Waiting for payment").
 	 * The words still say it; the tone is unchanged. */
 	busy?: boolean | undefined;
-	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
+	/** 5.75 (visual audit): `"soft"` (default) is a tint with a darker word, like Alert and Badge, so a column of statuses
+	 * reads evenly. `"solid"` is the strong fill — for the one status on a screen that must catch the eye (an overdue
+	 * total, a failed payment), not for every row. */
+	variant?: "soft" | "solid" | undefined;
+	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked; 5.75: Active/Up/Online/Resolved → ready, Down/Offline/Outage → blocked; anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;
 }

package/dist/server/index.cjs

@@ -203,10 +203,10 @@ function parseTime(text) {
 
 // src/status.ts
 var TONE_WORDS = {
-  ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
+  ready: ["ready", "done", "complete", "completed", "approved", "live", "passed", "active", "up", "online", "resolved"],
   progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
   warning: ["warning", "problem", "degraded", "at risk"],
-  blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
+  blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled", "down", "offline", "outage"]
 };
 function toneFor(status) {
   const s = String(status == null ? "" : status).trim().toLowerCase();
@@ -797,7 +797,7 @@ function createTheme(opts) {
   D["fg-accent"] = fit(b[300], darkGrounds, 4.5, 1);
   D["accent-violet"] = fit(b[400], darkGrounds, 3, 1);
   D["focus-ring"] = fit(b[400], darkGrounds, 3, 1);
-  D["bg-selected"] = mix(ZINC[900], b[500], 0.16);
+  D["bg-selected"] = mix(ZINC[900], b[500], 0.2);
   D["alert-info-bg"] = D["bg-selected"];
   D["alert-info-fg"] = fit(b[300], [D["alert-info-bg"]], 4.5, 1);
   D["alert-info-border"] = mix(ZINC[900], b[400], 0.4);
@@ -818,6 +818,7 @@ function createTheme(opts) {
   L["control-checked-fg"] = onFill(L["control-checked-bg"]);
   D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
   D["control-checked-fg"] = onFill(D["control-checked-bg"]);
+  D["nav-active-edge"] = D["control-checked-bg"];
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -1268,13 +1269,19 @@ var PILL_ICON = {
 };
 function statusPillElement(props, ref) {
   const tone2 = props.tone || toneFor(props.children);
-  const rest = omit(props, ["tone", "className", "children", "wrap", "busy"]);
+  const rest = omit(props, ["tone", "className", "children", "wrap", "busy", "variant"]);
   return /* @__PURE__ */ React3.createElement(
     "span",
     {
       ...rest,
       ref,
-      className: cx("aura-pill", "aura-pill--" + tone2, props.wrap && "is-wrap", props.className)
+      className: cx(
+        "aura-pill",
+        "aura-pill--" + tone2,
+        props.variant === "solid" && "is-solid",
+        props.wrap && "is-wrap",
+        props.className
+      )
     },
     props.busy ? /* @__PURE__ */ React3.createElement(Icon, { name: h2(IconLoaderCircle), size: 12, className: "aura-spin" }) : /* @__PURE__ */ React3.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }),
     props.wrap ? /* @__PURE__ */ React3.createElement("span", { className: "aura-pill__text" }, props.children) : props.children

package/dist/server/index.d.cts

@@ -54,7 +54,11 @@ export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanEle
 	/** 5.70 (Chamber-OS 189): the spinner in the icon slot, for a state still in progress ("Waiting for payment").
 	 * The words still say it; the tone is unchanged. */
 	busy?: boolean | undefined;
-	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
+	/** 5.75 (visual audit): `"soft"` (default) is a tint with a darker word, like Alert and Badge, so a column of statuses
+	 * reads evenly. `"solid"` is the strong fill — for the one status on a screen that must catch the eye (an overdue
+	 * total, a failed payment), not for every row. */
+	variant?: "soft" | "solid" | undefined;
+	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked; 5.75: Active/Up/Online/Resolved → ready, Down/Offline/Outage → blocked; anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;
 }

package/dist/server/index.d.ts

@@ -54,7 +54,11 @@ export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanEle
 	/** 5.70 (Chamber-OS 189): the spinner in the icon slot, for a state still in progress ("Waiting for payment").
 	 * The words still say it; the tone is unchanged. */
 	busy?: boolean | undefined;
-	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
+	/** 5.75 (visual audit): `"soft"` (default) is a tint with a darker word, like Alert and Badge, so a column of statuses
+	 * reads evenly. `"solid"` is the strong fill — for the one status on a screen that must catch the eye (an overdue
+	 * total, a failed payment), not for every row. */
+	variant?: "soft" | "solid" | undefined;
+	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked; 5.75: Active/Up/Online/Resolved → ready, Down/Offline/Outage → blocked; anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;
 }

package/dist/server/index.js

@@ -136,10 +136,10 @@ function parseTime(text) {
 
 // src/status.ts
 var TONE_WORDS = {
-  ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
+  ready: ["ready", "done", "complete", "completed", "approved", "live", "passed", "active", "up", "online", "resolved"],
   progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
   warning: ["warning", "problem", "degraded", "at risk"],
-  blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
+  blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled", "down", "offline", "outage"]
 };
 function toneFor(status) {
   const s = String(status == null ? "" : status).trim().toLowerCase();
@@ -730,7 +730,7 @@ function createTheme(opts) {
   D["fg-accent"] = fit(b[300], darkGrounds, 4.5, 1);
   D["accent-violet"] = fit(b[400], darkGrounds, 3, 1);
   D["focus-ring"] = fit(b[400], darkGrounds, 3, 1);
-  D["bg-selected"] = mix(ZINC[900], b[500], 0.16);
+  D["bg-selected"] = mix(ZINC[900], b[500], 0.2);
   D["alert-info-bg"] = D["bg-selected"];
   D["alert-info-fg"] = fit(b[300], [D["alert-info-bg"]], 4.5, 1);
   D["alert-info-border"] = mix(ZINC[900], b[400], 0.4);
@@ -751,6 +751,7 @@ function createTheme(opts) {
   L["control-checked-fg"] = onFill(L["control-checked-bg"]);
   D["control-checked-bg"] = fit(b[300], darkGrounds, 3, 1);
   D["control-checked-fg"] = onFill(D["control-checked-bg"]);
+  D["nav-active-edge"] = D["control-checked-bg"];
   const shadowLight = INK, shadowDark = D["accent-violet"];
   if (o.primary === "brand") {
     L["button-primary-bg"] = fit(b[600], [ZINC[0]], 4.5, -1);
@@ -1201,13 +1202,19 @@ var PILL_ICON = {
 };
 function statusPillElement(props, ref) {
   const tone2 = props.tone || toneFor(props.children);
-  const rest = omit(props, ["tone", "className", "children", "wrap", "busy"]);
+  const rest = omit(props, ["tone", "className", "children", "wrap", "busy", "variant"]);
   return /* @__PURE__ */ React3.createElement(
     "span",
     {
       ...rest,
       ref,
-      className: cx("aura-pill", "aura-pill--" + tone2, props.wrap && "is-wrap", props.className)
+      className: cx(
+        "aura-pill",
+        "aura-pill--" + tone2,
+        props.variant === "solid" && "is-solid",
+        props.wrap && "is-wrap",
+        props.className
+      )
     },
     props.busy ? /* @__PURE__ */ React3.createElement(Icon, { name: h2(IconLoaderCircle), size: 12, className: "aura-spin" }) : /* @__PURE__ */ React3.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }),
     props.wrap ? /* @__PURE__ */ React3.createElement("span", { className: "aura-pill__text" }, props.children) : props.children

package/dist/styles.css

@@ -245,7 +245,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);
@@ -481,6 +481,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; }
@@ -878,7 +886,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. */
@@ -918,7 +927,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);
@@ -1013,6 +1023,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; }
@@ -1357,6 +1375,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); }
@@ -1372,13 +1394,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); }
@@ -1394,10 +1420,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; } }
@@ -1597,7 +1623,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 {
@@ -1612,7 +1638,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); }
@@ -1630,7 +1656,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. */
@@ -2026,6 +2052,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); }
@@ -2666,6 +2697,6 @@ 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 */
 }