@jirawatpyk/aura-react 5.73.0 → 5.75.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.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]`).
+
 ## 5.73 — Chamber-OS addendum 93 follow-up (#192)
 
 - **Hidden bars, every way a tab panel hides them:** the edge ActionBar and PageHeader's `actionsBarBelow` bar now share one rule. The newest bar that is pinned and on screen sets the page's clearance (`--aura-actionbar-height`, `--aura-page-actions-height`). A bar with no box (`display: none`), `visibility: hidden`, or inside `content-visibility: hidden` (`hidden="until-found"`) is skipped. A visibility switch resizes nothing, so the bars are re-read after any click, key press, focus move, transition, find-in-page reveal (`beforematch`) or history change; a switch made by a timer or a resolved request is caught at the next of those.

package/dist/aura.bundle.js

@@ -425,7 +425,7 @@ window.Aura = (() => {
     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"];
@@ -433,6 +433,7 @@ window.Aura = (() => {
     function write() {
       if (frame) cancelAnimationFrame(frame);
       frame = 0;
+      if (onRead) onRead();
       const root = document.documentElement;
       let shown = null, boxed = null, pinned2 = false, many = 0;
       for (let i = els.length - 1; i >= 0; i--) {
@@ -487,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();
@@ -814,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
@@ -2394,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) {
@@ -2806,6 +2844,7 @@ window.Aura = (() => {
             e.preventDefault();
           },
           onPointerMove: function() {
+            pointerModality();
             if (!it.disabled && active !== it.index) activeState[1](it.index);
           },
           onClick: function() {
@@ -4207,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) {
@@ -4390,6 +4430,7 @@ window.Aura = (() => {
               if (!blocked || isSel) choose(o);
             },
             onPointerMove: function() {
+              pointerModality();
               if (activeIdx !== i) setActive(i);
             }
           },
@@ -5526,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);
@@ -8227,12 +8268,41 @@ window.Aura = (() => {
   });
 
   // src/PageHeaderClient.tsx
-  var bars = barStack("--aura-page-actions-height", function() {
-    devWarnOnce(
-      "pageheader-bar-twice",
-      "PageHeader actionsBarBelow: two bars are on screen at once and overlap at the bottom of the screen. Give it to one PageHeader per page (one per tab panel is fine: only the shown one counts)."
-    );
-  });
+  var bars = barStack(
+    "--aura-page-actions-height",
+    function() {
+      devWarnOnce(
+        "pageheader-bar-twice",
+        "PageHeader actionsBarBelow: two bars are on screen at once and overlap at the bottom of the screen. Give it to one PageHeader per page (one per tab panel is fine: only the shown one counts)."
+      );
+    },
+    function() {
+      marks.forEach(function(m) {
+        m();
+      });
+    }
+  );
+  var UNSEEN = ".aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text";
+  function noneShown(el, barVisible) {
+    for (let n3 = el.firstChild; n3; n3 = n3.nextSibling) {
+      if (n3.nodeType === 3) {
+        if ((n3.textContent || "").trim()) return false;
+        continue;
+      }
+      if (n3.nodeType !== 1) continue;
+      const c = n3;
+      if (c.hidden || c.matches(UNSEEN)) continue;
+      const s = getComputedStyle(c);
+      if (s.display === "none") continue;
+      if (barVisible && (s.visibility === "hidden" || s.visibility === "collapse")) continue;
+      const inline = c.getAttribute("style") || "";
+      if (/position:\s*absolute/.test(inline) && /clip/.test(inline)) continue;
+      if (s.display === "contents" && noneShown(c, barVisible)) continue;
+      return false;
+    }
+    return true;
+  }
+  var marks = /* @__PURE__ */ new Set();
   var PageHeader3 = React45.forwardRef(function PageHeader4(props, ref) {
     const own = React45.useRef(null);
     const merged = useMergedRef(ref, own);
@@ -8246,8 +8316,15 @@ window.Aura = (() => {
           split ? ":scope > .aura-page-header__actions > .aura-page-header__bar" : ":scope > .aura-page-header__actions"
         );
         if (!el) return;
+        const head = own.current;
         let checked = false;
+        function mark() {
+          const empty = noneShown(el, getComputedStyle(el).visibility === "visible");
+          const state = empty ? "empty" : "shown";
+          if (head.getAttribute("data-aura-bar") !== state) head.setAttribute("data-aura-bar", state);
+        }
         function sync() {
+          mark();
           bars.write();
           if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
             devWarnOnce(
@@ -8255,14 +8332,35 @@ window.Aura = (() => {
               "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
             );
         }
+        mark();
+        marks.add(mark);
         bars.add(el);
+        const mo = typeof MutationObserver === "undefined" ? null : new MutationObserver(function() {
+          if (!frame) frame = requestAnimationFrame(later);
+        });
+        let frame = 0;
+        function later() {
+          frame = 0;
+          sync();
+        }
+        if (mo)
+          mo.observe(el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["hidden", "class", "style"]
+          });
         const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
         if (ro) ro.observe(el, { box: "border-box" });
         window.addEventListener("resize", sync);
         sync();
         return function() {
           if (ro) ro.disconnect();
+          if (mo) mo.disconnect();
+          if (frame) cancelAnimationFrame(frame);
+          marks.delete(mark);
           window.removeEventListener("resize", sync);
+          head.removeAttribute("data-aura-bar");
           bars.remove(el);
         };
       },
@@ -9523,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;
@@ -9694,6 +9793,7 @@ window.Aura = (() => {
               choose(i);
             },
             onPointerMove: function() {
+              pointerModality();
               if (active !== i) setActive(i);
             }
           },
@@ -10289,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);
@@ -10310,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

@@ -407,7 +407,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"];
@@ -415,6 +415,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, pinned2 = false, many = 0;
     for (let i = els.length - 1; i >= 0; i--) {
@@ -469,16 +470,46 @@ function barStack(name, onMany) {
     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();
@@ -796,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
@@ -2376,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) {
@@ -2788,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() {
@@ -4189,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) {
@@ -4372,6 +4412,7 @@ var Combobox = React23.forwardRef(
             if (!blocked || isSel) choose(o);
           },
           onPointerMove: function() {
+            pointerModality();
             if (activeIdx !== i) setActive(i);
           }
         },
@@ -5508,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);
@@ -8209,12 +8250,41 @@ var PageHeader = React44.forwardRef(function PageHeader2(props, ref) {
 });
 
 // src/PageHeaderClient.tsx
-var bars = barStack("--aura-page-actions-height", function() {
-  devWarnOnce(
-    "pageheader-bar-twice",
-    "PageHeader actionsBarBelow: two bars are on screen at once and overlap at the bottom of the screen. Give it to one PageHeader per page (one per tab panel is fine: only the shown one counts)."
-  );
-});
+var bars = barStack(
+  "--aura-page-actions-height",
+  function() {
+    devWarnOnce(
+      "pageheader-bar-twice",
+      "PageHeader actionsBarBelow: two bars are on screen at once and overlap at the bottom of the screen. Give it to one PageHeader per page (one per tab panel is fine: only the shown one counts)."
+    );
+  },
+  function() {
+    marks.forEach(function(m) {
+      m();
+    });
+  }
+);
+var UNSEEN = ".aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text";
+function noneShown(el, barVisible) {
+  for (let n3 = el.firstChild; n3; n3 = n3.nextSibling) {
+    if (n3.nodeType === 3) {
+      if ((n3.textContent || "").trim()) return false;
+      continue;
+    }
+    if (n3.nodeType !== 1) continue;
+    const c = n3;
+    if (c.hidden || c.matches(UNSEEN)) continue;
+    const s = getComputedStyle(c);
+    if (s.display === "none") continue;
+    if (barVisible && (s.visibility === "hidden" || s.visibility === "collapse")) continue;
+    const inline = c.getAttribute("style") || "";
+    if (/position:\s*absolute/.test(inline) && /clip/.test(inline)) continue;
+    if (s.display === "contents" && noneShown(c, barVisible)) continue;
+    return false;
+  }
+  return true;
+}
+var marks = /* @__PURE__ */ new Set();
 var PageHeader3 = React45.forwardRef(function PageHeader4(props, ref) {
   const own = React45.useRef(null);
   const merged = useMergedRef(ref, own);
@@ -8228,8 +8298,15 @@ var PageHeader3 = React45.forwardRef(function PageHeader4(props, ref) {
         split ? ":scope > .aura-page-header__actions > .aura-page-header__bar" : ":scope > .aura-page-header__actions"
       );
       if (!el) return;
+      const head = own.current;
       let checked = false;
+      function mark() {
+        const empty = noneShown(el, getComputedStyle(el).visibility === "visible");
+        const state = empty ? "empty" : "shown";
+        if (head.getAttribute("data-aura-bar") !== state) head.setAttribute("data-aura-bar", state);
+      }
       function sync() {
+        mark();
         bars.write();
         if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, fixedTrapped(el)))
           devWarnOnce(
@@ -8237,14 +8314,35 @@ var PageHeader3 = React45.forwardRef(function PageHeader4(props, ref) {
             "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
           );
       }
+      mark();
+      marks.add(mark);
       bars.add(el);
+      const mo = typeof MutationObserver === "undefined" ? null : new MutationObserver(function() {
+        if (!frame) frame = requestAnimationFrame(later);
+      });
+      let frame = 0;
+      function later() {
+        frame = 0;
+        sync();
+      }
+      if (mo)
+        mo.observe(el, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: ["hidden", "class", "style"]
+        });
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
       if (ro) ro.observe(el, { box: "border-box" });
       window.addEventListener("resize", sync);
       sync();
       return function() {
         if (ro) ro.disconnect();
+        if (mo) mo.disconnect();
+        if (frame) cancelAnimationFrame(frame);
+        marks.delete(mark);
         window.removeEventListener("resize", sync);
+        head.removeAttribute("data-aura-bar");
         bars.remove(el);
       };
     },
@@ -9505,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;
@@ -9676,6 +9775,7 @@ var TimePicker = React57.forwardRef(function TimePicker2(props, ref) {
             choose(i);
           },
           onPointerMove: function() {
+            pointerModality();
             if (active !== i) setActive(i);
           }
         },
@@ -10271,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);
@@ -10292,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/PageHeaderClient.js

@@ -2,12 +2,41 @@
 import * as React from "react";
 import { PageHeader as StaticPageHeader } from "./PageHeader.js";
 import { barStack, devWarnOnce, fixedTrapped as trapped, useMergedRef } from "./internal.js";
-const bars = barStack("--aura-page-actions-height", function() {
-  devWarnOnce(
-    "pageheader-bar-twice",
-    "PageHeader actionsBarBelow: two bars are on screen at once and overlap at the bottom of the screen. Give it to one PageHeader per page (one per tab panel is fine: only the shown one counts)."
-  );
-});
+const bars = barStack(
+  "--aura-page-actions-height",
+  function() {
+    devWarnOnce(
+      "pageheader-bar-twice",
+      "PageHeader actionsBarBelow: two bars are on screen at once and overlap at the bottom of the screen. Give it to one PageHeader per page (one per tab panel is fine: only the shown one counts)."
+    );
+  },
+  function() {
+    marks.forEach(function(m) {
+      m();
+    });
+  }
+);
+const UNSEEN = ".aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text";
+function noneShown(el, barVisible) {
+  for (let n = el.firstChild; n; n = n.nextSibling) {
+    if (n.nodeType === 3) {
+      if ((n.textContent || "").trim()) return false;
+      continue;
+    }
+    if (n.nodeType !== 1) continue;
+    const c = n;
+    if (c.hidden || c.matches(UNSEEN)) continue;
+    const s = getComputedStyle(c);
+    if (s.display === "none") continue;
+    if (barVisible && (s.visibility === "hidden" || s.visibility === "collapse")) continue;
+    const inline = c.getAttribute("style") || "";
+    if (/position:\s*absolute/.test(inline) && /clip/.test(inline)) continue;
+    if (s.display === "contents" && noneShown(c, barVisible)) continue;
+    return false;
+  }
+  return true;
+}
+const marks = /* @__PURE__ */ new Set();
 const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
   const own = React.useRef(null);
   const merged = useMergedRef(ref, own);
@@ -21,8 +50,15 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
         split ? ":scope > .aura-page-header__actions > .aura-page-header__bar" : ":scope > .aura-page-header__actions"
       );
       if (!el) return;
+      const head = own.current;
       let checked = false;
+      function mark() {
+        const empty = noneShown(el, getComputedStyle(el).visibility === "visible");
+        const state = empty ? "empty" : "shown";
+        if (head.getAttribute("data-aura-bar") !== state) head.setAttribute("data-aura-bar", state);
+      }
       function sync() {
+        mark();
         bars.write();
         if (!checked && getComputedStyle(el).position === "fixed" && (checked = true, trapped(el)))
           devWarnOnce(
@@ -30,14 +66,35 @@ const PageHeader = React.forwardRef(function PageHeader2(props, ref) {
             "PageHeader actionsBarBelow: an ancestor has a transform, filter, will-change or paint containment, so the fixed bar is placed against it instead of the screen. Remove it from the page header's ancestors."
           );
       }
+      mark();
+      marks.add(mark);
       bars.add(el);
+      const mo = typeof MutationObserver === "undefined" ? null : new MutationObserver(function() {
+        if (!frame) frame = requestAnimationFrame(later);
+      });
+      let frame = 0;
+      function later() {
+        frame = 0;
+        sync();
+      }
+      if (mo)
+        mo.observe(el, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: ["hidden", "class", "style"]
+        });
       const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
       if (ro) ro.observe(el, { box: "border-box" });
       window.addEventListener("resize", sync);
       sync();
       return function() {
         if (ro) ro.disconnect();
+        if (mo) mo.disconnect();
+        if (frame) cancelAnimationFrame(frame);
+        marks.delete(mark);
         window.removeEventListener("resize", sync);
+        head.removeAttribute("data-aura-bar");
         bars.remove(el);
       };
     },