@jirawatpyk/aura-react 5.74.0 → 5.76.0

package/README.md

@@ -186,6 +186,20 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.76 — Chamber-OS addendum 95 (#194)
+
+- **A Dialog on a short screen scrolls as one box:** on a screen 30rem tall or less (480px at the default 16px — 400% zoom on a laptop, a phone on its side with the keyboard up), the head, the description, the body and the footer scroll together inside the dialog, with the footer at the end of the content, instead of a fixed head and footer around a body squeezed to nothing. Focus moves (`data-autofocus`, the first field, the focus trap) work as before, and a focused field scrolls into view with 16px to spare (`scroll-padding`). Above 30rem nothing changes: the footer stays fixed under a scrolling body. The same threshold as ActionBar's and AppShell's bars (5.48). Wide content in the body (a long URL, a `<pre>`) still scrolls sideways there. Scrolled to the footer, the × has scrolled away with the head — Escape and Cancel still close. A `position: sticky` element in the body doesn't stick on a short screen (it scrolls with the content). Dialog only: a Drawer keeps its fixed head and footer. A `.aura-dialog` / `.aura-dialog__body` stand-in in your CSS can go.
+
+## 5.75 — visual audit, set 1
+
+- **Status pills are soft in every tone.** Blocked is red-800 on red-100 (dark red-300 on a red wash), Warning amber-800 on amber-100 (dark amber-300 on an amber wash), like Ready, In Progress and To Do, and like Alert and Badge — so a table of statuses reads evenly; the word and the icon carry the meaning. For the one status on a screen that must catch the eye (an overdue total, a failed payment) pass `variant="solid"`: the strong fill, in every tone (`--aura-status-{tone}-solid-bg` / `-fg`; Blocked and Warning are the 5.30 fills). Badge `tone="danger" variant="solid"` is unchanged.
+- **Status words:** Down, Offline and Outage read as blocked; Active, Up, Online and Resolved as ready (`statusTone`, StatusPill, DataTable status columns — which also moves them in a DataTable sort by status). Pass `tone` to keep an earlier look.
+- **List options:** in Select, Combobox and TimePicker, the option under the pointer is shaded only, as a Menu item; moving by keys (or opening with them) shows the focus ring on the active option.
+- **Plain links** (`<a>` with no class) in a PageHeader, a Popover, a Drawer, `.aura-prose`, `.aura-text-body` and `.aura-text-caption` take the accent, as in a Card or a table since 5.30, and are always underlined. Zero specificity: your own link rules win.
+- **Dark theme:** `--aura-bg-selected` is a 20% violet wash (#352f48) and the active SideNav item has a 3px violet edge (`--aura-nav-active-edge`; `createTheme` uses the brand's — regenerate a theme made with an earlier `createTheme`, or its dark edge stays AURA's violet); the DataTable and Table header band is #1f1f22, a step above the card instead of below it.
+- **Progress `tone="warning"`** fills amber-700 in light (`--aura-progress-warning-fill`), amber like the dark theme, no longer rust.
+- **Small fixes:** a sortable `Th` label sits on the same line as a plain one; Tag toggles among FilterBar's controls are as tall as the search; Tag's remove × is 16px in a 24px button.
+
 ## 5.74 — Chamber-OS addendum 94 (#193)
 
 - **A PageHeader bar with nothing left in it goes:** when every direct child of the phone bar but the status line (looking through `display: contents` wrappers) is hidden — the `hidden` attribute, `display: none`, `visibility: hidden` set on it, or visually hidden text (an `aria-describedby` note: `.sr-only`-style classes, or an inline absolutely positioned, clipped box) — and no text sits in it, the strip takes no box and the page loses its bar padding and `scroll-padding` (`--aura-page-actions-height` is `0px`), as if there were no bar. A status alone is not a bar. It applies to `actionsBar`'s strip and to the plain `actionsBarBelow` bar, and follows a child being shown or hidden (its `hidden`, `class` or `style`), added or removed, at most once a frame — for a pay bar that hides, not unmounts, once paying succeeds. A bar under a `visibility: hidden` ancestor (a page-enter gate) is not taken for empty. The client marks the header `data-aura-bar="empty"` or `"shown"`; before it does (server HTML), `actionsBar`'s strip whose element children are all `hidden` or visually hidden already goes, though the page padding waits for the client. From the breakpoint up nothing changes. A `:has(> [hidden])` stand-in can go once your PageHeaders render on the client. The `hidden` attribute is trusted as hidden: don't give a hidden child a class that displays it anyway (Tailwind v3's `flex` beats the browser's `[hidden]`).

package/dist/aura.bundle.js

@@ -488,16 +488,46 @@ window.Aura = (() => {
       write
     };
   }
+  var 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() {
+    React3.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");
+  }
 
   // src/display.tsx
   var React4 = __toESM(require_react(), 1);
 
   // 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();
@@ -815,13 +845,19 @@ window.Aura = (() => {
   };
   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__ */ React4.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__ */ React4.createElement(Icon, { name: h2(IconLoaderCircle), size: 12, className: "aura-spin" }) : /* @__PURE__ */ React4.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }),
       props.wrap ? /* @__PURE__ */ React4.createElement("span", { className: "aura-pill__text" }, props.children) : props.children
@@ -2395,6 +2431,7 @@ window.Aura = (() => {
     const rest = omit(props, FIELD_KEYS.concat(["children", FILTER_KEY, "readOnly"]));
     const ro = !!props.readOnly && !props.disabled;
     const mounted = useMounted();
+    useInputModality();
     const kept = React16.useRef(null);
     const current2 = [].concat(props.value != null ? props.value : props.defaultValue != null ? props.defaultValue : []).map(String);
     const opts = (props.options || []).map(function(o) {
@@ -2807,6 +2844,7 @@ window.Aura = (() => {
             e.preventDefault();
           },
           onPointerMove: function() {
+            pointerModality();
             if (!it.disabled && active !== it.index) activeState[1](it.index);
           },
           onClick: function() {
@@ -4208,6 +4246,7 @@ window.Aura = (() => {
       const posState = React23.useState(null);
       const inputRef = React23.useRef(null), inputMerged = useMergedRef(ref, inputRef), boxRef = React23.useRef(null), listRef = React23.useRef(null);
       const mounted = useMounted();
+      useInputModality();
       const limit = props.limit || 200;
       const filter = props.filter || defaultFilter;
       let shown = props.onSearch || query == null ? options : options.filter(function(o) {
@@ -4391,6 +4430,7 @@ window.Aura = (() => {
               if (!blocked || isSel) choose(o);
             },
             onPointerMove: function() {
+              pointerModality();
               if (activeIdx !== i) setActive(i);
             }
           },
@@ -5527,7 +5567,7 @@ window.Aura = (() => {
           "aria-label": props.removeLabel || t.remove(name),
           onClick: props.onRemove
         },
-        /* @__PURE__ */ React31.createElement(Icon, { name: /* @__PURE__ */ React31.createElement(IconX, null), size: 14 })
+        /* @__PURE__ */ React31.createElement(Icon, { name: /* @__PURE__ */ React31.createElement(IconX, null), size: 16 })
       );
       return /* @__PURE__ */ React31.createElement(Tooltip, { content: fullText, open: fullText ? void 0 : false }, btn);
     }() : null);
@@ -9581,6 +9621,7 @@ window.Aura = (() => {
     const pos = React57.useState(null);
     const boxRef = React57.useRef(null), inputRef = React57.useRef(null), listRef = React57.useRef(null), inputMerged = useMergedRef(ref, inputRef);
     const mounted = useMounted();
+    useInputModality();
     function nearest(v) {
       const n3 = toMin(v);
       if (n3 == null) return 0;
@@ -9752,6 +9793,7 @@ window.Aura = (() => {
               choose(i);
             },
             onPointerMove: function() {
+              pointerModality();
               if (active !== i) setActive(i);
             }
           },
@@ -10347,7 +10389,7 @@ window.Aura = (() => {
     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);
@@ -10368,6 +10410,7 @@ window.Aura = (() => {
     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/cjs/index.cjs

@@ -470,16 +470,46 @@ function barStack(name, onMany, onRead) {
     write
   };
 }
+var 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() {
+  React3.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");
+}
 
 // src/display.tsx
 var React4 = __toESM(require("react"), 1);
 
 // 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,13 +827,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__ */ React4.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__ */ React4.createElement(Icon, { name: h2(IconLoaderCircle), size: 12, className: "aura-spin" }) : /* @__PURE__ */ React4.createElement(Icon, { name: h2(PILL_ICON[tone2] || IconCircle), size: 12 }),
     props.wrap ? /* @__PURE__ */ React4.createElement("span", { className: "aura-pill__text" }, props.children) : props.children
@@ -2377,6 +2413,7 @@ var Select = React16.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 = React16.useRef(null);
   const current2 = [].concat(props.value != null ? props.value : props.defaultValue != null ? props.defaultValue : []).map(String);
   const opts = (props.options || []).map(function(o) {
@@ -2789,6 +2826,7 @@ var Select = React16.forwardRef(function Select2(props, ref) {
           e.preventDefault();
         },
         onPointerMove: function() {
+          pointerModality();
           if (!it.disabled && active !== it.index) activeState[1](it.index);
         },
         onClick: function() {
@@ -4190,6 +4228,7 @@ var Combobox = React23.forwardRef(
     const posState = React23.useState(null);
     const inputRef = React23.useRef(null), inputMerged = useMergedRef(ref, inputRef), boxRef = React23.useRef(null), listRef = React23.useRef(null);
     const mounted = useMounted();
+    useInputModality();
     const limit = props.limit || 200;
     const filter = props.filter || defaultFilter;
     let shown = props.onSearch || query == null ? options : options.filter(function(o) {
@@ -4373,6 +4412,7 @@ var Combobox = React23.forwardRef(
             if (!blocked || isSel) choose(o);
           },
           onPointerMove: function() {
+            pointerModality();
             if (activeIdx !== i) setActive(i);
           }
         },
@@ -5509,7 +5549,7 @@ var Tag = React31.forwardRef(function Tag2(props, ref) {
         "aria-label": props.removeLabel || t.remove(name),
         onClick: props.onRemove
       },
-      /* @__PURE__ */ React31.createElement(Icon, { name: /* @__PURE__ */ React31.createElement(IconX, null), size: 14 })
+      /* @__PURE__ */ React31.createElement(Icon, { name: /* @__PURE__ */ React31.createElement(IconX, null), size: 16 })
     );
     return /* @__PURE__ */ React31.createElement(Tooltip, { content: fullText, open: fullText ? void 0 : false }, btn);
   }() : null);
@@ -9563,6 +9603,7 @@ var TimePicker = React57.forwardRef(function TimePicker2(props, ref) {
   const pos = React57.useState(null);
   const boxRef = React57.useRef(null), inputRef = React57.useRef(null), listRef = React57.useRef(null), inputMerged = useMergedRef(ref, inputRef);
   const mounted = useMounted();
+  useInputModality();
   function nearest(v) {
     const n3 = toMin(v);
     if (n3 == null) return 0;
@@ -9734,6 +9775,7 @@ var TimePicker = React57.forwardRef(function TimePicker2(props, ref) {
             choose(i);
           },
           onPointerMove: function() {
+            pointerModality();
             if (active !== i) setActive(i);
           }
         },
@@ -10329,7 +10371,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);
@@ -10350,6 +10392,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/esm/Combobox.js

@@ -2,7 +2,17 @@
 import * as React from "react";
 import { useStrings, useDensity } from "./locale.js";
 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 { Icon } from "./Icon.js";
 import { Field } from "./Field.js";
 import { IconCheck, IconChevronDown, IconLoaderCircle, IconSearch, IconX } from "./icons.js";
@@ -67,6 +77,7 @@ const Combobox = React.forwardRef(
     const posState = React.useState(null);
     const inputRef = React.useRef(null), inputMerged = useMergedRef(ref, inputRef), boxRef = React.useRef(null), listRef = React.useRef(null);
     const mounted = useMounted();
+    useInputModality();
     const limit = props.limit || 200;
     const filter = props.filter || defaultFilter;
     let shown = props.onSearch || query == null ? options : options.filter(function(o) {
@@ -250,6 +261,7 @@ const Combobox = React.forwardRef(
             if (!blocked || isSel) choose(o);
           },
           onPointerMove: function() {
+            pointerModality();
             if (activeIdx !== i) setActive(i);
           }
         },

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

@@ -187,6 +187,36 @@ function barStack(name, onMany, onRead) {
     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,
@@ -202,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; }
@@ -1605,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 {
@@ -1620,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); }
@@ -1638,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. */
@@ -2034,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); }
@@ -2296,6 +2319,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @media (max-height: 30rem) { .aura-actionbar:not(.is-idle) { position: static; } }
 /* …and AppShell's top bar scrolls away with the page, so Shift+Tab never lands a field under it. */
 @media (max-height: 30rem) { .aura-shell__bar { position: static; } }
+/* 5.76 (Chamber-OS 194): on a screen 30rem tall or less (400% zoom, a phone on its side with the keyboard up) a Dialog
+ * scrolls as one box — head, body and footer in one flow, the footer at the end of the content — instead of fixing
+ * its head and footer around a body squeezed to nothing. Above that height, as before. */
+@media (max-height: 30rem) {
+  .aura-dialog { overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--aura-space-4); } /* a focused field is shown with room around it */
+  .aura-dialog__body { flex: none; min-height: auto; overflow: auto; overscroll-behavior: auto; } /* as tall as its content, so only wide content (a long <pre> or URL) scrolls here, sideways; a wheel over it goes on to the dialog */
+}
 /* 5.48: wherever a BottomNav shows, a field scrolled into view (Tab) stops above it, not under it. */
 :root { scroll-padding-bottom: var(--aura-bottomnav-offset, 0px); }
 .aura-actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-height: 60px; box-sizing: border-box; padding-block: var(--aura-space-2); padding-inline: var(--aura-space-4) var(--aura-space-3); }
@@ -2674,6 +2704,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 */
 }

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; }
@@ -1607,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 {
@@ -1622,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); }
@@ -1640,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. */
@@ -2036,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); }
@@ -2298,6 +2321,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @media (max-height: 30rem) { .aura-actionbar:not(.is-idle) { position: static; } }
 /* …and AppShell's top bar scrolls away with the page, so Shift+Tab never lands a field under it. */
 @media (max-height: 30rem) { .aura-shell__bar { position: static; } }
+/* 5.76 (Chamber-OS 194): on a screen 30rem tall or less (400% zoom, a phone on its side with the keyboard up) a Dialog
+ * scrolls as one box — head, body and footer in one flow, the footer at the end of the content — instead of fixing
+ * its head and footer around a body squeezed to nothing. Above that height, as before. */
+@media (max-height: 30rem) {
+  .aura-dialog { overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--aura-space-4); } /* a focused field is shown with room around it */
+  .aura-dialog__body { flex: none; min-height: auto; overflow: auto; overscroll-behavior: auto; } /* as tall as its content, so only wide content (a long <pre> or URL) scrolls here, sideways; a wheel over it goes on to the dialog */
+}
 /* 5.48: wherever a BottomNav shows, a field scrolled into view (Tab) stops above it, not under it. */
 :root { scroll-padding-bottom: var(--aura-bottomnav-offset, 0px); }
 .aura-actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-height: 60px; box-sizing: border-box; padding-block: var(--aura-space-2); padding-inline: var(--aura-space-4) var(--aura-space-3); }
@@ -2676,8 +2706,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.74.0",
+  "version": "5.76.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",