@antadesign/anta 0.3.5 → 0.3.6

package/dist/components/SelectFaceted.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState, useMemo } from "../jsx-runtime";
-import { nativeStateChange } from "../anta_helpers";
+import { nativeStateChange, ISOLATE_HINT } from "../anta_helpers";
+import { normalizeOpt, matchQueryRegex, matchesQuery } from "./select-options";
 import { Button } from "./Button";
 import { Menu } from "./Menu";
 import { MenuItem } from "./MenuItem";
@@ -8,8 +9,8 @@ import { MenuGroup } from "./MenuGroup";
 import { MenuSeparator } from "./MenuSeparator";
 import { Tag } from "./Tag";
 import { Input } from "./Input";
+import { Tooltip } from "./Tooltip";
 import styles from "./SelectFaceted.module.css";
-const normalizeOpt = (o) => typeof o === "string" ? { value: o, label: o } : o;
 const leavesOf = (items) => {
   const out = [];
   for (const it of items) {
@@ -22,13 +23,7 @@ const leavesOf = (items) => {
   return out;
 };
 const isEmpty = (v) => v == null || v === "" || Array.isArray(v) && v.length === 0;
-const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-const defaultMatch = (o, query) => {
-  const q = query.trim();
-  if (!q) return true;
-  const re = new RegExp(q.split(/\s+/).map(escapeRe).join("\\s+"), "i");
-  return [o.value, o.label, o.hint].some((v) => typeof v === "string" && re.test(v));
-};
+const defaultMatch = (o, query) => matchesQuery(o, matchQueryRegex(query));
 const SelectFaceted = (props) => {
   const {
     facets,
@@ -40,6 +35,7 @@ const SelectFaceted = (props) => {
     size,
     priority = "secondary",
     disabled,
+    toneSelected,
     searchable,
     searchPlaceholder = "Filter\u2026",
     clearable = true,
@@ -125,6 +121,7 @@ const SelectFaceted = (props) => {
       label: opt.label ?? opt.value,
       hint: opt.hint,
       tone: opt.tone,
+      toneSelected,
       disabled: opt.disabled,
       "data-menu-open": ""
     };
@@ -142,13 +139,17 @@ const SelectFaceted = (props) => {
       );
     }
     const arr = current[facet.key] ?? [];
+    const isolable = facet.selectAll !== false && !opt.disabled;
+    const tip = opt.tooltip ?? (isolable ? ISOLATE_HINT : void 0);
+    const hintOnly = opt.tooltip == null && isolable;
     return /* @__PURE__ */ jsx(
       MenuItem,
       {
         ...shared,
         selectionIndicator: "checkbox",
         selected: arr.includes(opt.value),
-        onSelect: () => setFacet(facet, arr.includes(opt.value) ? arr.filter((v) => v !== opt.value) : [...arr, opt.value])
+        onSelect: (e) => isolable && e?.altKey ? setFacet(facet, [opt.value]) : setFacet(facet, arr.includes(opt.value) ? arr.filter((v) => v !== opt.value) : [...arr, opt.value]),
+        children: tip && /* @__PURE__ */ jsx(Tooltip, { ...hintOnly ? { follow: true, delay: 700 } : {}, children: tip })
       },
       `${keyPrefix}${opt.value}`
     );
@@ -161,7 +162,7 @@ const SelectFaceted = (props) => {
     const allOn = enabled.length > 0 && enabled.every((v) => arr.includes(v));
     const someOn = enabled.some((v) => arr.includes(v));
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      facet.selectAll && leaves.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      facet.selectAll !== false && leaves.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           MenuItem,
           {

package/dist/components/select-options.d.ts

@@ -0,0 +1,14 @@
+import type { SelectOption } from './Select';
+/** Coerce a bare string option to `{ value, label }`; pass an object through. */
+export declare const normalizeOpt: (o: string | SelectOption) => SelectOption;
+/** The built-in filter regex: case-insensitive, with each run of whitespace in the
+ *  query matching any gap (`\s+`). Returns null for an empty query — the signal to
+ *  match everything and to skip match-highlighting. */
+export declare function matchQueryRegex(query: string): RegExp | null;
+/** Whether an option matches the built-in query regex, testing value / label /
+ *  hint. A null regex (empty query) matches everything. */
+export declare const matchesQuery: (o: SelectOption, queryRe: RegExp | null) => boolean;
+/** Bold the matched substring(s) of `text` for display (built-in matcher only).
+ *  A null regex returns the text unchanged. The regex is re-created global so
+ *  `exec` walks every match; the zero-width guard stops an empty match looping. */
+export declare const highlight: (text: string, queryRe: RegExp | null) => React.ReactNode;

package/dist/components/select-options.js

@@ -0,0 +1,31 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+const normalizeOpt = (o) => typeof o === "string" ? { value: o, label: o } : o;
+function matchQueryRegex(query) {
+  const q = query.trim();
+  if (!q) return null;
+  const escape = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(q.split(/\s+/).map(escape).join("\\s+"), "i");
+}
+const matchesQuery = (o, queryRe) => !queryRe || [o.value, o.label ?? "", o.hint ?? ""].some((s) => queryRe.test(s));
+const highlight = (text, queryRe) => {
+  if (!queryRe) return text;
+  const re = new RegExp(queryRe.source, "gi");
+  const out = [];
+  let last = 0;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) out.push(text.slice(last, m.index));
+    out.push(/* @__PURE__ */ jsx("b", { children: m[0] }, out.length));
+    last = m.index + m[0].length;
+    if (m[0].length === 0) re.lastIndex++;
+  }
+  if (out.length === 0) return text;
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+};
+export {
+  highlight,
+  matchQueryRegex,
+  matchesQuery,
+  normalizeOpt
+};

package/dist/elements/a-dialog.css

@@ -0,0 +1 @@
+@layer anta{a-dialog{--dialog-bg: var(--bg-1);--dialog-text: var(--text-2);--dialog-border: color-mix(in oklch, black 9%, transparent);--dialog-radius: 10px;--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 10%, transparent), 0 12px 32px color-mix(in oklch, black 22%, transparent), 0 28px 64px color-mix(in oklch, black 14%, transparent);--dialog-overlay: color-mix(in oklch, black 42%, transparent);display:contents}a-dialog[round]{--dialog-round: attr(round type(<length>), var(--dialog-radius, 10px))}a-dialog:not(:defined){display:none}.dark a-dialog{--dialog-border: color-mix(in oklch, white 14%, transparent);--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 40%, transparent), 0 12px 32px color-mix(in oklch, black 55%, transparent), 0 28px 64px color-mix(in oklch, black 40%, transparent);--dialog-overlay: color-mix(in oklch, black 62%, transparent)}}

package/dist/elements/a-dialog.d.ts

@@ -0,0 +1,26 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-dialog.css';
+export declare class ADialogElement extends HTMLElementBase {
+    #private;
+    static observedAttributes: string[];
+    private dialog;
+    private headerSlot;
+    private footerSlot;
+    private closeSlot;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /** Public imperative API — mirrors `<dialog>`. `show()` requests open,
+     *  `close()` requests close; both honor the state contract. */
+    show(): void;
+    close(): void;
+    get open(): boolean;
+    /** Announce a requested OPEN (cancelable, before applying), then — uncontrolled
+     *  and un-vetoed — apply it. Controlled: never self-apply. */
+    requestOpen(): void;
+    /** Announce a requested CLOSE (cancelable, before applying), then — uncontrolled
+     *  and un-vetoed — apply it. Controlled: never self-apply. */
+    requestClose(): void;
+}
+export declare function register_a_dialog(): void;

package/dist/elements/a-dialog.js

@@ -0,0 +1,386 @@
+import { HTMLElementBase, parseOpenState } from "../anta_helpers";
+import "./a-dialog.css";
+const CLOSE_TRIGGER = "closerequest";
+const ANIM_MS = 200;
+const SHADOW_STYLE = `
+  :host { display: contents; }
+
+  dialog {
+    --_dur: ${ANIM_MS}ms;
+    --_r: var(--dialog-round, var(--dialog-radius, 10px));
+
+    position: fixed;
+    box-sizing: border-box;
+    padding: 0;
+    border: none;
+    max-width: calc(100vw - 2 * var(--dialog-margin, 32px));
+    max-height: calc(100dvh - 2 * var(--dialog-margin, 32px));
+    width: var(--dialog-width, 480px);
+    height: var(--dialog-height, fit-content);
+    overflow: visible;
+    color: var(--dialog-text, inherit);
+    background: var(--dialog-bg, #fff);
+    border-radius: var(--_r);
+    box-shadow: var(--dialog-shadow, inset 0 0 0 1px color-mix(in oklch, black 8%, transparent), 0 10px 38px color-mix(in oklch, black 28%, transparent));
+
+    flex-direction: column;
+  }
+
+  dialog[open] {
+    display: flex;
+  }
+
+  dialog:focus, dialog:focus-visible { outline: none; }
+
+  dialog::backdrop {
+    background: var(--dialog-overlay, color-mix(in oklch, black 40%, transparent));
+  }
+
+  :host { --_enter-from: scale(0.97); }
+  :host([position="left"]) { --_enter-from: translateX(-100%); }
+  :host([position="right"]) { --_enter-from: translateX(100%); }
+  :host([position="top"]) { --_enter-from: translateY(-100%); }
+  :host([position="bottom"]) { --_enter-from: translateY(100%); }
+
+  @media (prefers-reduced-motion: no-preference) {
+    dialog {
+      opacity: 0;
+      transform: var(--_enter-from);
+      transition:
+        opacity var(--_dur) ease,
+        transform var(--_dur) ease,
+        overlay var(--_dur) ease allow-discrete,
+        display var(--_dur) ease allow-discrete;
+    }
+    dialog[open] {
+      opacity: 1;
+      transform: none;
+    }
+    @starting-style {
+      dialog[open] { opacity: 0; transform: var(--_enter-from); }
+    }
+
+    dialog::backdrop {
+      background: transparent;
+      transition:
+        background var(--_dur) ease,
+        overlay var(--_dur) ease allow-discrete,
+        display var(--_dur) ease allow-discrete;
+    }
+    dialog[open]::backdrop { background: var(--dialog-overlay, color-mix(in oklch, black 40%, transparent)); }
+    @starting-style {
+      dialog[open]::backdrop { background: transparent; }
+    }
+  }
+
+  :host([position="left"]) dialog,
+  :host([position="right"]) dialog {
+    width: var(--dialog-width, 380px);
+    max-width: calc(100vw - var(--dialog-margin, 32px));
+    height: 100dvh;
+    max-height: 100dvh;
+    border-radius: 0;
+  }
+  :host([position="left"]) dialog { margin: 0 auto 0 0; }
+  :host([position="right"]) dialog { margin: 0 0 0 auto; }
+
+  :host([position="top"]) dialog,
+  :host([position="bottom"]) dialog {
+    width: 100vw;
+    max-width: 100vw;
+    height: var(--dialog-height, fit-content);
+    max-height: calc(100dvh - var(--dialog-margin, 32px));
+    border-radius: 0;
+  }
+  :host([position="top"]) dialog { margin: 0 auto auto auto; }
+  :host([position="bottom"]) dialog { margin: auto auto 0 auto; }
+
+  :host([position="fullscreen"]) dialog {
+    width: 100vw;
+    max-width: 100vw;
+    height: 100dvh;
+    max-height: 100dvh;
+    margin: 0;
+    border-radius: 0;
+  }
+
+  :host([round]) dialog { border-radius: var(--_r); }
+  :host([round="top"]) dialog { border-radius: var(--_r) var(--_r) 0 0; }
+  :host([round="bottom"]) dialog { border-radius: 0 0 var(--_r) var(--_r); }
+  :host([round="left"]) dialog { border-radius: var(--_r) 0 0 var(--_r); }
+  :host([round="right"]) dialog { border-radius: 0 var(--_r) var(--_r) 0; }
+
+  slot[name="header"] {
+    display: none;
+    flex: 0 0 auto;
+    padding: var(--dialog-header-padding, 18px 20px 8px);
+    font-size: 17px;
+    font-weight: 560;
+    line-height: 24px;
+  }
+  slot[name="header"].has-content { display: block; }
+  dialog.has-close slot[name="header"] { padding-inline-end: 52px; }
+
+  slot[part="body"] {
+    display: block;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--dialog-body-padding, 8px 20px 12px);
+  }
+  /* With a close button but no header, the body is the top zone, so it takes the
+     \u2715 clearance instead of the header (which is display:none when empty). */
+  dialog.has-close slot[name="header"]:not(.has-content) ~ slot[part="body"] {
+    padding-inline-end: 52px;
+  }
+
+  slot[name="footer"] {
+    display: none;
+    flex: 0 0 auto;
+    padding: var(--dialog-footer-padding, 8px 20px 18px);
+  }
+  slot[name="footer"].has-content {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  slot[name="close"] { display: none; }
+  slot[name="close"].has-content {
+    display: block;
+    position: absolute;
+    inset-block-start: 10px;
+    inset-inline-end: 10px;
+    z-index: 1;
+  }
+`;
+class ADialogElement extends HTMLElementBase {
+  static observedAttributes = ["state", "name"];
+  dialog;
+  headerSlot;
+  footerSlot;
+  closeSlot;
+  // Counts `dialog.close()` calls WE initiate whose async `close` event is still
+  // pending, and is decremented as each arrives. The native `close` event fires
+  // from a queued task, so a synchronous guard can't span it, and a boolean
+  // can't span a BURST (two re-parents in one tick queue two closes; the first
+  // event would clear the flag and the second would be misread as out-of-band).
+  // The counter lets the `close` handler tell our own closes (ignore) from an
+  // out-of-band one (`<form method="dialog">`, a consumer calling the shadow
+  // dialog's close(), bfcache), which it must reconcile.
+  #programmaticCloses = 0;
+  // The intended (uncontrolled) open state, held in JS so it survives a
+  // disconnect → reconnect (a DOM move / re-parent). disconnectedCallback
+  // force-closes the native dialog to free the top layer, but must not lose
+  // whether the user had it open — otherwise a re-parented open dialog would
+  // vanish (trigger-opened) or a re-parented closed one would pop back (a stale
+  // `default-state="open"` re-seeding). Only ever reflects genuine open/close
+  // intent, never the disconnect teardown.
+  #wantOpen = false;
+  // default-state is read ONCE (the first connect), never again — re-seeding on
+  // every connect would reopen a dialog the user has since closed.
+  #seeded = false;
+  // Whether the current pointer press began on the backdrop (the dialog element
+  // itself), so a press-inside → release-on-backdrop drag (text selection) is
+  // NOT read as a backdrop dismiss.
+  #pressedBackdrop = false;
+  // The document click listener wired for the `name`-trigger convenience, kept so
+  // it can be torn down (and re-wired when `name` / controlled-ness changes).
+  #triggerListener;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.dialog = document.createElement("dialog");
+    this.dialog.setAttribute("part", "dialog");
+    this.dialog.tabIndex = -1;
+    this.closeSlot = document.createElement("slot");
+    this.closeSlot.name = "close";
+    this.closeSlot.setAttribute("part", "close");
+    this.headerSlot = document.createElement("slot");
+    this.headerSlot.name = "header";
+    this.headerSlot.setAttribute("part", "header");
+    const bodySlot = document.createElement("slot");
+    bodySlot.setAttribute("part", "body");
+    this.footerSlot = document.createElement("slot");
+    this.footerSlot.name = "footer";
+    this.footerSlot.setAttribute("part", "footer");
+    for (const slot of [this.headerSlot, this.footerSlot, this.closeSlot]) {
+      slot.addEventListener("slotchange", () => {
+        const has = slot.assignedNodes().length > 0;
+        slot.classList.toggle("has-content", has);
+        if (slot === this.closeSlot) this.dialog.classList.toggle("has-close", has);
+      });
+    }
+    this.headerSlot.addEventListener("slotchange", () => this.#syncAccessibleName());
+    this.dialog.append(this.headerSlot, bodySlot, this.footerSlot, this.closeSlot);
+    shadow.append(style, this.dialog);
+    this.dialog.addEventListener("cancel", (e) => {
+      e.preventDefault();
+      if (!this.#persistent) this.requestClose();
+    });
+    this.dialog.addEventListener("pointerdown", (e) => {
+      this.#pressedBackdrop = e.target === this.dialog;
+    });
+    this.dialog.addEventListener("click", (e) => {
+      if (this.#persistent) return;
+      if (this.#pressedBackdrop && e.target === this.dialog) this.requestClose();
+    });
+    this.dialog.addEventListener("close", () => {
+      if (this.#programmaticCloses > 0) {
+        this.#programmaticCloses--;
+        return;
+      }
+      if (this.#controlled) this.#reflect(parseOpenState(this.getAttribute("state")));
+      else this.#wantOpen = false;
+    });
+    this.addEventListener(CLOSE_TRIGGER, () => this.requestClose());
+  }
+  connectedCallback() {
+    if (this.#controlled) {
+      this.#reflect(parseOpenState(this.getAttribute("state")));
+    } else {
+      if (!this.#seeded) {
+        if (parseOpenState(this.getAttribute("default-state")) === "open") this.#wantOpen = true;
+        this.#seeded = true;
+      }
+      if (this.#wantOpen) this.#open();
+    }
+    this.#syncTriggerListener();
+    this.#syncAccessibleName();
+  }
+  disconnectedCallback() {
+    this.#teardownTriggerListener();
+    if (this.dialog.open) {
+      this.#programmaticCloses++;
+      this.dialog.close();
+    }
+  }
+  attributeChangedCallback(name) {
+    if (name === "state") {
+      if (this.#controlled) this.#reflect(parseOpenState(this.getAttribute("state")));
+      this.#syncTriggerListener();
+    } else if (name === "name") {
+      this.#syncTriggerListener();
+    }
+  }
+  /** Controlled mode: the `state` attribute is present and owns the open state. */
+  get #controlled() {
+    return this.hasAttribute("state");
+  }
+  /** Light-dismiss (Esc + backdrop) disabled — the dialog closes only via
+   *  explicit controls (close button / programmatic). */
+  get #persistent() {
+    return this.hasAttribute("persistent");
+  }
+  /** The currently *applied* open state (read from the native dialog — the
+   *  source of truth for what's painted). */
+  get #current() {
+    return this.dialog.open ? "open" : "closed";
+  }
+  /** Public imperative API — mirrors `<dialog>`. `show()` requests open,
+   *  `close()` requests close; both honor the state contract. */
+  show() {
+    this.requestOpen();
+  }
+  close() {
+    this.requestClose();
+  }
+  get open() {
+    return this.dialog.open;
+  }
+  /** Announce a requested OPEN (cancelable, before applying), then — uncontrolled
+   *  and un-vetoed — apply it. Controlled: never self-apply. */
+  requestOpen() {
+    if (this.#current === "open") return;
+    const ok = this.#announce("open");
+    if (this.#controlled) return;
+    if (ok) this.#open();
+  }
+  /** Announce a requested CLOSE (cancelable, before applying), then — uncontrolled
+   *  and un-vetoed — apply it. Controlled: never self-apply. */
+  requestClose() {
+    if (this.#current === "closed") return;
+    const ok = this.#announce("closed");
+    if (this.#controlled) return;
+    if (ok) this.#close();
+  }
+  /** Dispatch the cancelable `statechange` for a requested transition. Returns
+   *  false if a handler vetoed it. */
+  #announce(next) {
+    return this.dispatchEvent(
+      new CustomEvent("statechange", {
+        cancelable: true,
+        detail: { next, prev: this.#current }
+      })
+    );
+  }
+  /** Reflect a controlled `state` onto the native dialog (idempotent). No
+   *  `statechange` — this is the consumer's own command, not a user gesture. */
+  #reflect(state) {
+    if (state === "open") this.#open();
+    else this.#close();
+  }
+  /** Raw open: show the modal dialog. Records the open intent (survives a
+   *  disconnect). Guarded against a not-connected / already-open native element
+   *  (both throw / no-op). */
+  #open() {
+    this.#wantOpen = true;
+    if (this.dialog.open || !this.isConnected) return;
+    this.dialog.showModal();
+    if (!this.querySelector("[autofocus]")) this.dialog.focus();
+  }
+  /** Raw close. Records the closed intent and counts the pending `close` event as
+   *  ours so the listener doesn't reconcile it. (The disconnect teardown closes
+   *  the native dialog directly, NOT through here, to preserve `#wantOpen`.) */
+  #close() {
+    this.#wantOpen = false;
+    if (!this.dialog.open) return;
+    this.#programmaticCloses++;
+    this.dialog.close();
+  }
+  /** Publish the header text as the shadow dialog's accessible name (a-input's
+   *  label-mirror pattern). Shadow-internal — not a host / light-DOM write. */
+  #syncAccessibleName() {
+    const text = this.headerSlot.assignedNodes().map((n) => n.textContent ?? "").join(" ").trim();
+    if (text) this.dialog.setAttribute("aria-label", text);
+    else this.dialog.removeAttribute("aria-label");
+  }
+  // --- `name`-trigger convenience (uncontrolled only) ---
+  #syncTriggerListener() {
+    const wanted = !this.#controlled && !!this.getAttribute("name");
+    if (wanted && !this.#triggerListener) this.#wireTriggerListener();
+    else if (!wanted && this.#triggerListener) this.#teardownTriggerListener();
+  }
+  #wireTriggerListener() {
+    this.#triggerListener = (e) => {
+      const name = this.getAttribute("name");
+      if (!name) return;
+      const t = e.target;
+      if (!(t instanceof Element)) return;
+      if (t.closest(`[data-dialog-open="${CSS.escape(name)}"]`)) this.requestOpen();
+      else if (t.closest(`[data-dialog-close="${CSS.escape(name)}"]`)) this.requestClose();
+    };
+    this.doc.addEventListener("click", this.#triggerListener);
+  }
+  #teardownTriggerListener() {
+    if (this.#triggerListener) {
+      this.doc.removeEventListener("click", this.#triggerListener);
+      this.#triggerListener = void 0;
+    }
+  }
+}
+function register_a_dialog() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-dialog")) {
+    customElements.define("a-dialog", ADialogElement);
+  }
+}
+register_a_dialog();
+export {
+  ADialogElement,
+  register_a_dialog
+};

package/dist/elements/a-expander.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase, parseOpenState } from "../anta_helpers";
 import "./a-expander.css";
 const ANIM_MS = 200;
 const SUMMARY_TYPE_SCALE = {
@@ -139,7 +139,7 @@ const SHADOW_STYLE = `
     transition-behavior: allow-discrete;
   }
 `;
-const parseState = (v) => v === "open" ? "open" : "closed";
+const parseState = parseOpenState;
 class AExpanderElement extends HTMLElementBase {
   static observedAttributes = ["state", "disabled", "round"];
   summary;

package/dist/elements/a-input-time.js

@@ -94,6 +94,7 @@ const SHADOW_STYLE = `
     padding-inline: 1px;
     border-radius: 2px;
     text-align: center;
+    white-space: nowrap;
     outline: none;
     cursor: default;
     font-variant-numeric: tabular-nums;
@@ -102,7 +103,7 @@ const SHADOW_STYLE = `
   .seg[inputmode="numeric"] {
     /* Fixed to two tabular digits so the box never reflows: neither the narrower
        placeholder dashes nor a mid-entry single digit changes the field width. */
-    width: calc(2ch + 2px);
+    width: calc(2ch + 4px);
   }
   .seg:focus {
     background: var(--input-time-seg-focus-bg);

package/dist/elements/a-menu.d.ts

@@ -110,8 +110,11 @@ export declare class AMenuElement extends HTMLElementBase {
      *  the seat target — the cursor lands on the first real option — but they stay
      *  arrow-reachable. */
     private resetActive;
-    /** Combobox arrow / Home / End / Enter handling; returns true if it consumed the
-     *  key (so `handleKey` stops). Any other key falls through to the input (typing). */
+    /** Combobox arrow / PageUp / PageDown / Enter handling; returns true if it
+     *  consumed the key (so `handleKey` stops). Home / End are deliberately NOT
+     *  handled: focus is in a text field, so they must reach it for caret movement
+     *  (line start/end); PageUp / PageDown jump the option list to first / last
+     *  instead. Any other key falls through to the input (typing). */
     private handleComboKey;
     /** Public imperative API. Routes through the same intent path as the
      *  triggers, so it emits `statechange` and respects controlled mode. */

package/dist/elements/a-menu.js

@@ -451,11 +451,22 @@ class AMenuElement extends HTMLElementBase {
     el.style.setProperty("--fade-bottom", bottom ? "14px" : "0px");
   }
   /* ------------------------------ combobox mode ------------------------------ */
-  /** The filter field slotted into THIS menu (never a submenu's), or null. Its
+  /** Combobox-anchor mode: the trigger anchor ITSELF is the filter field (it
+   *  carries `[data-menu-search]`), as in `InputAutocomplete` where an editable
+   *  `<a-input>` is the always-visible field the menu hangs under. null for the
+   *  normal case — `Select`/`SelectFaceted` slot the field as a child, so their
+   *  anchor never carries the marker and this stays inert for them. */
+  get #comboAnchor() {
+    const a = this.triggerAnchor;
+    return a?.matches("[data-menu-search]") ? a : null;
+  }
+  /** The filter field of THIS menu, or null. A slotted child (never a submenu's)
+   *  wins; else the anchor when it's the field (combobox-anchor mode). Its
    *  presence switches the menu to the combobox keyboard. */
   get #searchField() {
     const el = this.querySelector("[data-menu-search]");
-    return el && el.closest("a-menu") === this ? el : null;
+    if (el && el.closest("a-menu") === this) return el;
+    return this.#comboAnchor;
   }
   /** Move the combobox cursor. Sets the item's `active` **property** (off-DOM
    *  `:state(active)`, no attribute churn) for the highlight, and REPORTS the
@@ -481,11 +492,15 @@ class AMenuElement extends HTMLElementBase {
   resetActive() {
     const q = this.#searchField?.value;
     if (!q || !q.trim()) return this.setActive(null);
+    if (this.#comboAnchor) return this.setActive(null);
     const items = this.focusableItems();
     this.setActive(items.find((it) => !it.hasAttribute("data-menu-skip-active")) ?? items[0] ?? null);
   }
-  /** Combobox arrow / Home / End / Enter handling; returns true if it consumed the
-   *  key (so `handleKey` stops). Any other key falls through to the input (typing). */
+  /** Combobox arrow / PageUp / PageDown / Enter handling; returns true if it
+   *  consumed the key (so `handleKey` stops). Home / End are deliberately NOT
+   *  handled: focus is in a text field, so they must reach it for caret movement
+   *  (line start/end); PageUp / PageDown jump the option list to first / last
+   *  instead. Any other key falls through to the input (typing). */
   handleComboKey(e) {
     const items = this.focusableItems();
     const idx = this.activeItem ? items.indexOf(this.activeItem) : -1;
@@ -498,11 +513,11 @@ class AMenuElement extends HTMLElementBase {
         e.preventDefault();
         this.setActive(items[idx <= 0 ? items.length - 1 : idx - 1] ?? null);
         return true;
-      case "Home":
+      case "PageUp":
         e.preventDefault();
         this.setActive(items[0] ?? null);
         return true;
-      case "End":
+      case "PageDown":
         e.preventDefault();
         this.setActive(items[items.length - 1] ?? null);
         return true;
@@ -848,6 +863,10 @@ class AMenuElement extends HTMLElementBase {
       return;
     }
     if (e.key === "Tab") {
+      if (this.#comboAnchor) {
+        this.requestClose(e);
+        return;
+      }
       const f = this.focusables();
       if (!f.length) return;
       e.preventDefault();
@@ -969,6 +988,12 @@ class AMenuElement extends HTMLElementBase {
         anchor.removeEventListener("contextmenu", onContext);
         this.listening = false;
       };
+    } else if (this.#comboAnchor) {
+      this.teardown = () => {
+        this.listening = false;
+      };
+      this.listening = true;
+      return;
     } else {
       const onClick = (e) => {
         const viaKeyboard = e.detail === 0;