@expressivecss/expressive 0.15.0 → 0.17.0

package/dist/js/chunks/chunk-67UNY7RH.mjs

@@ -0,0 +1,299 @@
+// src/ts/core/utils.ts
+var fit = (start, size, view, offset) => start < offset ? offset : start + size > view - offset ? view - size : start;
+function restoreAttribute(el, name, value) {
+  if (value === null) el.removeAttribute(name);
+  else el.setAttribute(name, value);
+}
+function numberValue(raw) {
+  const text = raw.replace(/−/g, "-").replace(/[\s%\p{Sc}]/gu, "");
+  if (!/^[+-]?(\d{1,3}(,\d{3})+|\d+)?(\.\d+)?(e[+-]?\d+)?$/i.test(text)) return null;
+  const value = parseFloat(text.replace(/,/g, ""));
+  return Number.isFinite(value) ? value : null;
+}
+function formEventScope(el) {
+  const root = el.getRootNode();
+  return "host" in root ? root : el.ownerDocument;
+}
+function afterFormReset(el, restored, signal) {
+  const handled = /* @__PURE__ */ new WeakSet();
+  const onReset = (e) => {
+    if (e.target !== el.form || handled.has(e)) return;
+    handled.add(e);
+    setTimeout(() => signal.aborted || e.defaultPrevented || restored());
+  };
+  const bind = () => {
+    for (const target of [formEventScope(el), el.form]) target?.addEventListener("reset", onReset, { capture: true, signal });
+  };
+  bind();
+  return bind;
+}
+function afterAnyFormReset(restored) {
+  document.addEventListener("reset", (e) => {
+    const form = e.target;
+    if (form instanceof HTMLFormElement) setTimeout(() => e.defaultPrevented || restored(form));
+  }, true);
+}
+function deepActiveElement(root) {
+  let active = root.activeElement;
+  while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+  return active;
+}
+function footerButton(parent, text, className, onClick, visible = true) {
+  const button = document.createElement("button");
+  button.className = `${className} text`;
+  button.style.visibility = visible ? "visible" : "hidden";
+  button.type = "button";
+  button.tabIndex = visible ? 0 : -1;
+  button.innerText = text ?? "";
+  button.addEventListener("click", onClick);
+  parent.append(button);
+}
+function pickerFooter(footer, { i18n, showClearBtn, autoSubmit }, clearClass, onClear, onConfirm, onCancel) {
+  footerButton(footer, i18n.clear, clearClass, onClear, showClearBtn);
+  if (autoSubmit) return;
+  const buttons = document.createElement("div");
+  buttons.classList.add("confirmation-btns");
+  footer.append(buttons);
+  footerButton(buttons, i18n.cancel, "btn-cancel", onCancel);
+  footerButton(buttons, i18n.done, "btn-confirm", onConfirm);
+}
+function controllerFor(node) {
+  return new (node.ownerDocument?.defaultView ?? window).AbortController();
+}
+function svgNode(name, attributes = {}) {
+  const element = document.createElementNS("http://www.w3.org/2000/svg", name);
+  for (const key in attributes) element.setAttribute(key, attributes[key]);
+  return element;
+}
+var Utils = class _Utils {
+  /**
+   * Whether a keydown belongs to an IME composition, such as the Enter that
+   * confirms a candidate. Safari reports `isComposing` false for that Enter,
+   * so keyCode 229 covers it.
+   */
+  static isComposing(e) {
+    return e.isComposing || e.keyCode === 229;
+  }
+  /**
+   * `handler`, skipped for every key of an IME composition: while the user
+   * picks a candidate, Enter, the arrows and Escape belong to the IME.
+   */
+  static ignoringComposition(handler) {
+    return (e) => {
+      if (!_Utils.isComposing(e)) handler(e);
+    };
+  }
+  /**
+   * Run `callback` once the document is parsed.
+   *
+   * The document-level behaviors all used a bare DOMContentLoaded listener,
+   * which never fires if the bundle is loaded after that event - an async or
+   * deferred script tag, or a dynamic import. Checking readyState first covers
+   * both orders.
+   */
+  static onDocumentReady(callback) {
+    if (typeof document === "undefined") return;
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", callback, { once: true });
+    } else {
+      callback();
+    }
+  }
+  /**
+   * The language an element is written in, from the nearest `lang`, or
+   * undefined without one or for a tag the browser does not know.
+   */
+  static locale(el) {
+    let [node, lang] = [el, void 0];
+    while (node && lang === void 0) {
+      lang = node.closest("[lang]")?.lang;
+      node = node.getRootNode().host;
+    }
+    try {
+      return lang ? Intl.getCanonicalLocales(lang)[0] : void 0;
+    } catch {
+      return void 0;
+    }
+  }
+  /**
+   * Generates a unique string identifier. Every caller prefixes the result and
+   * uses it as an element id, and a UUID is valid in that position.
+   *
+   * `randomUUID` is exposed only in secure contexts, and a dev server on a
+   * plain-HTTP LAN address - the usual way a page is opened on a phone - is
+   * not one. Without the fallback every component that stamps an id would
+   * throw there. The ids only have to be unique within one document, so the
+   * fallback does not need to be cryptographic.
+   */
+  static guid() {
+    return globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+  }
+  /**
+   * Where an element created at runtime has to be appended to stay in the same
+   * tree as `el`. A stylesheet adopted into a shadow root cannot match a node
+   * in the document, so a portal that lands on `document.body` is unstyled
+   * whenever its origin lives in a shadow root (adr/0002).
+   *
+   * Light-DOM elements still get `document.body`, which is what escapes an
+   * ancestor's `overflow: hidden` and stacking context. Inside a shadow root
+   * both hazards come back: the host's own ancestors still form the containing
+   * block, so a transformed ancestor re-anchors `position: fixed` and a
+   * positioned one re-anchors `position: absolute`.
+   */
+  static portalRoot(el) {
+    const root = el.getRootNode();
+    return root.host ? root : document.body;
+  }
+  /**
+   * `getElementById` against the tree `el` lives in. The mirror of
+   * `portalRoot`: an id in a shadow root is invisible to
+   * `document.getElementById`, so a trigger and its target inside the same
+   * root could not find each other at all.
+   *
+   * Falls back to the document for a detached `el`, whose root is a plain
+   * element with no lookup of its own.
+   */
+  static getElementById(el, id) {
+    const root = el.getRootNode();
+    return root.getElementById ? root.getElementById(id) : document.getElementById(id);
+  }
+  /**
+   * `querySelector` against the tree `el` lives in, then the document, so a
+   * selector option finds an element in the same shadow root and still finds
+   * one outside it, such as `body`.
+   */
+  static querySelector(el, selector) {
+    const root = el.getRootNode();
+    return "getElementById" in root && root.querySelector(selector) || document.querySelector(selector);
+  }
+  /**
+   * Adds or removes one name in an element's inline `anchor-name` list. A
+   * trigger can anchor a Tooltip and a Menu at once, and writing the whole
+   * property let the last writer, or the first to be destroyed, wipe the other.
+   */
+  static setAnchorName(el, name, on) {
+    const names = el.style.getPropertyValue("anchor-name").split(",").map((n) => n.trim()).filter((n) => n && n !== "none" && n !== name);
+    if (on) names.push(name);
+    if (names.length) el.style.setProperty("anchor-name", names.join(", "));
+    else el.style.removeProperty("anchor-name");
+  }
+  /**
+   * Fires `expressive:<type>` from `el`. It bubbles and crosses shadow roots,
+   * so a page can listen on the element, an ancestor or the document. A
+   * `cancelable` event returns false once a listener calls preventDefault().
+   */
+  static emit(el, type, detail, cancelable = false) {
+    return el.dispatchEvent(new CustomEvent(`expressive:${type}`, { bubbles: true, composed: true, cancelable, detail }));
+  }
+  /**
+   * The element an event really started on, for a listener on the document.
+   * There `event.target` is retargeted to the shadow host, so delegation that
+   * reads it never sees anything inside an open shadow root. A closed root
+   * keeps its inside private and still yields the host.
+   */
+  static eventTarget(event) {
+    const target = event.composedPath()[0] ?? event.target;
+    return target instanceof Element ? target : null;
+  }
+  /** Whether a key was pressed without Alt, Ctrl or Meta, which belong to the browser and the system. */
+  static plainKey(e) {
+    return !(e.altKey || e.ctrlKey || e.metaKey);
+  }
+  /** Where a key moves from `index` among `count` items: by `steps`, or to an end for Home and End. NaN for any other key. */
+  static _keyIndex(key, index, count, steps) {
+    if (key === "Home") return 0;
+    if (key === "End") return count - 1;
+    return index + (steps[key] ?? NaN);
+  }
+  /**
+   * The item a key moves focus to, from the focused one among `items`: by
+   * the offset `steps` gives the key, or to the first or last for Home and
+   * End. Disabled items are skipped. Undefined for other keys, for a key
+   * with a modifier, when focus is on none of the items, and past either end
+   * unless `wrap`.
+   */
+  static focusTarget(items, e, steps, wrap = false) {
+    const enabled = items.filter((item) => !item.matches(':disabled, [aria-disabled="true"], .disabled'));
+    const index = enabled.indexOf(_Utils.eventTarget(e));
+    if (index < 0 || !_Utils.plainKey(e)) return void 0;
+    const to = _Utils._keyIndex(e.key, index, enabled.length, steps);
+    return enabled[wrap ? (to + enabled.length) % enabled.length : to];
+  }
+  /**
+   * Whether focus is on or inside any of `els`, read from each element's own
+   * root. A document listener cannot tell from `composedPath()` when the
+   * element sits in a closed shadow root, but the element's root still knows
+   * what has focus.
+   */
+  static focusIsIn(...els) {
+    return els.some((el) => {
+      const active = el && el.getRootNode().activeElement;
+      return !!active && el.contains(active);
+    });
+  }
+  /**
+   * `closest()` for a document listener: the nearest element on the event's
+   * composed path that matches `selector`. Unlike `eventTarget(e).closest()`
+   * it climbs out of shadow roots too, so a press on a shadow-root icon inside
+   * a light-DOM button still finds the button.
+   */
+  static closestInPath(event, selector) {
+    for (const node of event.composedPath()) {
+      if (node instanceof Element && node.matches(selector)) return node;
+    }
+    return null;
+  }
+  /**
+   * Retrieves target element id from trigger.
+   * @param trigger Trigger element.
+   */
+  static getIdFromTrigger(trigger) {
+    return trigger.dataset.target || (trigger.getAttribute("href")?.slice(1) ?? "");
+  }
+  /**
+   * Writes document coordinates as `top`/`left` on an absolutely positioned
+   * element. A static body uses document coordinates; positioned parents,
+   * such as a shadow host, use their padding edge, including borders and
+   * local scrolling.
+   */
+  static _placeInOffsetParent(el, coordinates) {
+    let { x, y } = coordinates;
+    const parent = el.offsetParent;
+    if (parent && (parent !== document.body || getComputedStyle(parent).position !== "static")) {
+      const rect = parent.getBoundingClientRect();
+      const root = parent === document.scrollingElement;
+      x -= rect.left + window.scrollX + parent.clientLeft - (root ? 0 : parent.scrollLeft);
+      y -= rect.top + window.scrollY + parent.clientTop - (root ? 0 : parent.scrollTop);
+    }
+    el.style.top = y + "px";
+    el.style.left = x + "px";
+  }
+  /**
+   * Moves document coordinates so a `width` by `height` box stays in the
+   * viewport. A box past the left or top edge, or within `offset` of it,
+   * starts `offset` in; a box past the right or bottom edge, or within
+   * `offset` of it, ends at that edge. `offset` is the margin plus the slide
+   * distance, or minus it for right alignment.
+   */
+  static _repositionWithinScreen(x, y, width, height, margin, transitionMovement, align) {
+    const offset = margin + (align === "right" ? -transitionMovement : transitionMovement);
+    return {
+      x: window.scrollX + fit(x - window.scrollX, width, window.innerWidth, offset),
+      y: window.scrollY + fit(y - window.scrollY, height, window.innerHeight, offset)
+    };
+  }
+};
+
+export {
+  restoreAttribute,
+  numberValue,
+  formEventScope,
+  afterFormReset,
+  afterAnyFormReset,
+  deepActiveElement,
+  pickerFooter,
+  controllerFor,
+  svgNode,
+  Utils
+};
+//# sourceMappingURL=chunk-67UNY7RH.mjs.map

package/dist/js/chunks/chunk-67UNY7RH.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/core/utils.ts"],
+  "sourcesContent": ["/** One axis of a viewport clamp: `start` moved so `size` fits in `view`. */\nconst fit = (start: number, size: number, view: number, offset: number) =>\n  start < offset ? offset : start + size > view - offset ? view - size : start;\n\n/** Sets an attribute, or removes it for null, as when restoring a value read with getAttribute. */\nexport function restoreAttribute(el: Element, name: string, value: string | null) {\n  if (value === null) el.removeAttribute(name);\n  else el.setAttribute(name, value);\n}\n\n/**\n * Reads text as one number, which currency or percent signs, grouping commas\n * and a typographic minus may surround, or null for anything else. Charts and\n * data tables read their cells with it.\n */\nexport function numberValue(raw: string): number | null {\n  const text = raw.replace(/\u2212/g, '-').replace(/[\\s%\\p{Sc}]/gu, '');\n  if (!/^[+-]?(\\d{1,3}(,\\d{3})+|\\d+)?(\\.\\d+)?(e[+-]?\\d+)?$/i.test(text)) return null;\n  // The pattern also lets through \"e5\" (NaN) and \"1e400\" (Infinity).\n  const value = parseFloat(text.replace(/,/g, ''));\n  return Number.isFinite(value) ? value : null;\n}\n\n/**\n * Where a field listens for its form's events. Neither formdata nor reset\n * leaves a shadow root, so a field in one listens there. Otherwise the\n * document, so the listener follows the field into another form.\n */\nexport function formEventScope(el: Element): Document | ShadowRoot {\n  const root = el.getRootNode() as Document | ShadowRoot;\n  return 'host' in root ? root : el.ownerDocument;\n}\n\n/**\n * Runs `restored` after a reset of the field's form. The form restores its\n * fields after the reset event, so it waits a task. It skips a cancelled\n * reset, and a field whose listeners `signal` has removed since.\n *\n * It listens on the field's root, which hears a form the field moves into\n * later, and on the form itself, which still hears it after the form moves\n * into a shadow root. Reset does not leave a shadow root. The returned\n * function binds both again, for a field that moved into another root;\n * listeners already bound are not added twice.\n */\nexport function afterFormReset(\n  el: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n  restored: () => void,\n  signal: AbortSignal\n) {\n  const handled = new WeakSet<Event>();\n  const onReset = (e: Event) => {\n    if (e.target !== el.form || handled.has(e)) return;\n    handled.add(e);\n    setTimeout(() => signal.aborted || e.defaultPrevented || restored());\n  };\n  const bind = () => {\n    for (const target of [formEventScope(el), el.form]) target?.addEventListener('reset', onReset, { capture: true, signal });\n  };\n  bind();\n  return bind;\n}\n\n/**\n * Runs `restored(form)` a task after any form in the document resets, once\n * the form has restored its fields, unless the reset was cancelled. For\n * document-level behaviors; a component bound to one field uses afterFormReset.\n */\nexport function afterAnyFormReset(restored: (form: HTMLFormElement) => void) {\n  document.addEventListener('reset', (e) => {\n    const form = e.target;\n    if (form instanceof HTMLFormElement) setTimeout(() => e.defaultPrevented || restored(form));\n  }, true);\n}\n\n/** The focused element, followed down through open shadow roots. */\nexport function deepActiveElement(root: Document | ShadowRoot): Element | null {\n  let active = root.activeElement;\n  while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;\n  return active;\n}\n\n/** A picker footer text button; a hidden one is also out of the tab order. */\nfunction footerButton(parent: HTMLElement, text: string | undefined, className: string, onClick: () => void, visible = true) {\n  const button = document.createElement('button');\n  button.className = `${className} text`;\n  button.style.visibility = visible ? 'visible' : 'hidden';\n  button.type = 'button';\n  button.tabIndex = visible ? 0 : -1;\n  button.innerText = text ?? '';\n  button.addEventListener('click', onClick);\n  parent.append(button);\n}\n\n/**\n * Fills a picker's footer: a Clear button, hidden unless `showClearBtn`,\n * then Cancel and Done unless the picker writes its value without them.\n */\nexport function pickerFooter(\n  footer: HTMLElement,\n  { i18n, showClearBtn, autoSubmit }: { i18n: Partial<Record<'clear' | 'cancel' | 'done', string>>; showClearBtn: boolean; autoSubmit: boolean },\n  clearClass: string,\n  onClear: () => void,\n  onConfirm: () => void,\n  onCancel: () => void\n) {\n  footerButton(footer, i18n.clear, clearClass, onClear, showClearBtn);\n  if (autoSubmit) return;\n  const buttons = document.createElement('div');\n  buttons.classList.add('confirmation-btns');\n  footer.append(buttons);\n  footerButton(buttons, i18n.cancel, 'btn-cancel', onCancel);\n  footerButton(buttons, i18n.done, 'btn-confirm', onConfirm);\n}\n\n/**\n * An AbortController from the window `node` is in. Its signal removes\n * listeners added there, and jsdom rejects a signal from another window.\n */\nexport function controllerFor(node: Node): AbortController {\n  return new (node.ownerDocument?.defaultView ?? window).AbortController();\n}\n\n/** An SVG element with its attributes. */\nexport function svgNode(name: string, attributes: Record<string, string> = {}): SVGElement {\n  const element = document.createElementNS('http://www.w3.org/2000/svg', name);\n  for (const key in attributes) element.setAttribute(key, attributes[key]);\n  return element;\n}\n\n/**\n * Class with utilitary functions for global usage.\n */\nexport class Utils {\n  /**\n   * Whether a keydown belongs to an IME composition, such as the Enter that\n   * confirms a candidate. Safari reports `isComposing` false for that Enter,\n   * so keyCode 229 covers it.\n   */\n  static isComposing(e: KeyboardEvent): boolean {\n    return e.isComposing || e.keyCode === 229;\n  }\n\n  /**\n   * `handler`, skipped for every key of an IME composition: while the user\n   * picks a candidate, Enter, the arrows and Escape belong to the IME.\n   */\n  static ignoringComposition(handler: (e: KeyboardEvent) => void): (e: KeyboardEvent) => void {\n    return (e) => {\n      if (!Utils.isComposing(e)) handler(e);\n    };\n  }\n\n  /**\n   * Run `callback` once the document is parsed.\n   *\n   * The document-level behaviors all used a bare DOMContentLoaded listener,\n   * which never fires if the bundle is loaded after that event - an async or\n   * deferred script tag, or a dynamic import. Checking readyState first covers\n   * both orders.\n   */\n  static onDocumentReady(callback: () => void): void {\n    if (typeof document === 'undefined') return;\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', callback, { once: true });\n    } else {\n      callback();\n    }\n  }\n\n  /**\n   * The language an element is written in, from the nearest `lang`, or\n   * undefined without one or for a tag the browser does not know.\n   */\n  static locale(el: Element): string | undefined {\n    // Inside a shadow root the language comes from the host's tree, unless\n    // something nearer sets one.\n    let [node, lang]: [Element | undefined, string | undefined] = [el, undefined];\n    while (node && lang === undefined) {\n      lang = node.closest<HTMLElement>('[lang]')?.lang;\n      node = (node.getRootNode() as ShadowRoot).host;\n    }\n    try {\n      return lang ? Intl.getCanonicalLocales(lang)[0] : undefined;\n    } catch {\n      return undefined;\n    }\n  }\n\n  /**\n   * Generates a unique string identifier. Every caller prefixes the result and\n   * uses it as an element id, and a UUID is valid in that position.\n   *\n   * `randomUUID` is exposed only in secure contexts, and a dev server on a\n   * plain-HTTP LAN address - the usual way a page is opened on a phone - is\n   * not one. Without the fallback every component that stamps an id would\n   * throw there. The ids only have to be unique within one document, so the\n   * fallback does not need to be cryptographic.\n   */\n  static guid(): string {\n    return (\n      globalThis.crypto?.randomUUID?.() ??\n      `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`\n    );\n  }\n\n  /**\n   * Where an element created at runtime has to be appended to stay in the same\n   * tree as `el`. A stylesheet adopted into a shadow root cannot match a node\n   * in the document, so a portal that lands on `document.body` is unstyled\n   * whenever its origin lives in a shadow root (adr/0002).\n   *\n   * Light-DOM elements still get `document.body`, which is what escapes an\n   * ancestor's `overflow: hidden` and stacking context. Inside a shadow root\n   * both hazards come back: the host's own ancestors still form the containing\n   * block, so a transformed ancestor re-anchors `position: fixed` and a\n   * positioned one re-anchors `position: absolute`.\n   */\n  static portalRoot(el: Node): HTMLElement | ShadowRoot {\n    const root = el.getRootNode() as ShadowRoot;\n    // Only a ShadowRoot has a host; a Document or a detached subtree does not.\n    return root.host ? root : document.body;\n  }\n\n  /**\n   * `getElementById` against the tree `el` lives in. The mirror of\n   * `portalRoot`: an id in a shadow root is invisible to\n   * `document.getElementById`, so a trigger and its target inside the same\n   * root could not find each other at all.\n   *\n   * Falls back to the document for a detached `el`, whose root is a plain\n   * element with no lookup of its own.\n   */\n  static getElementById(el: Node, id: string): HTMLElement {\n    const root = el.getRootNode() as Document | ShadowRoot;\n    return (root.getElementById ? root.getElementById(id) : document.getElementById(id)) as HTMLElement;\n  }\n\n  /**\n   * `querySelector` against the tree `el` lives in, then the document, so a\n   * selector option finds an element in the same shadow root and still finds\n   * one outside it, such as `body`.\n   */\n  static querySelector(el: Node, selector: string): HTMLElement | null {\n    const root = el.getRootNode() as Document | ShadowRoot;\n    return ('getElementById' in root && root.querySelector<HTMLElement>(selector)) || document.querySelector<HTMLElement>(selector);\n  }\n\n  /**\n   * Adds or removes one name in an element's inline `anchor-name` list. A\n   * trigger can anchor a Tooltip and a Menu at once, and writing the whole\n   * property let the last writer, or the first to be destroyed, wipe the other.\n   */\n  static setAnchorName(el: HTMLElement, name: string, on: boolean) {\n    const names = el.style.getPropertyValue('anchor-name').split(',').map((n) => n.trim())\n      .filter((n) => n && n !== 'none' && n !== name);\n    if (on) names.push(name);\n    if (names.length) el.style.setProperty('anchor-name', names.join(', '));\n    else el.style.removeProperty('anchor-name');\n  }\n\n  /**\n   * Fires `expressive:<type>` from `el`. It bubbles and crosses shadow roots,\n   * so a page can listen on the element, an ancestor or the document. A\n   * `cancelable` event returns false once a listener calls preventDefault().\n   */\n  static emit(el: Element, type: string, detail?: unknown, cancelable = false) {\n    return el.dispatchEvent(new CustomEvent(`expressive:${type}`, { bubbles: true, composed: true, cancelable, detail }));\n  }\n\n  /**\n   * The element an event really started on, for a listener on the document.\n   * There `event.target` is retargeted to the shadow host, so delegation that\n   * reads it never sees anything inside an open shadow root. A closed root\n   * keeps its inside private and still yields the host.\n   */\n  static eventTarget(event: Event): Element | null {\n    const target = event.composedPath()[0] ?? event.target;\n    return target instanceof Element ? target : null;\n  }\n\n  /** Whether a key was pressed without Alt, Ctrl or Meta, which belong to the browser and the system. */\n  static plainKey(e: KeyboardEvent): boolean {\n    return !(e.altKey || e.ctrlKey || e.metaKey);\n  }\n\n  /** Where a key moves from `index` among `count` items: by `steps`, or to an end for Home and End. NaN for any other key. */\n  static _keyIndex(key: string, index: number, count: number, steps: Record<string, number>) {\n    if (key === 'Home') return 0;\n    if (key === 'End') return count - 1;\n    return index + (steps[key] ?? NaN);\n  }\n\n  /**\n   * The item a key moves focus to, from the focused one among `items`: by\n   * the offset `steps` gives the key, or to the first or last for Home and\n   * End. Disabled items are skipped. Undefined for other keys, for a key\n   * with a modifier, when focus is on none of the items, and past either end\n   * unless `wrap`.\n   */\n  static focusTarget(items: HTMLElement[], e: KeyboardEvent, steps: Record<string, number>, wrap = false): HTMLElement | undefined {\n    const enabled = items.filter((item) => !item.matches(':disabled, [aria-disabled=\"true\"], .disabled'));\n    const index = enabled.indexOf(Utils.eventTarget(e) as HTMLElement);\n    if (index < 0 || !Utils.plainKey(e)) return undefined;\n    const to = Utils._keyIndex(e.key, index, enabled.length, steps);\n    return enabled[wrap ? (to + enabled.length) % enabled.length : to];\n  }\n\n  /**\n   * Whether focus is on or inside any of `els`, read from each element's own\n   * root. A document listener cannot tell from `composedPath()` when the\n   * element sits in a closed shadow root, but the element's root still knows\n   * what has focus.\n   */\n  static focusIsIn(...els: (Element | null | undefined)[]): boolean {\n    return els.some((el) => {\n      const active = el && (el.getRootNode() as Document | ShadowRoot).activeElement;\n      return !!active && el.contains(active);\n    });\n  }\n\n  /**\n   * `closest()` for a document listener: the nearest element on the event's\n   * composed path that matches `selector`. Unlike `eventTarget(e).closest()`\n   * it climbs out of shadow roots too, so a press on a shadow-root icon inside\n   * a light-DOM button still finds the button.\n   */\n  static closestInPath<T extends Element = Element>(event: Event, selector: string): T | null {\n    for (const node of event.composedPath()) {\n      if (node instanceof Element && node.matches(selector)) return node as T;\n    }\n    return null;\n  }\n\n  /**\n   * Retrieves target element id from trigger.\n   * @param trigger Trigger element.\n   */\n  static getIdFromTrigger(trigger: HTMLElement): string {\n    return trigger.dataset.target || (trigger.getAttribute('href')?.slice(1) ?? '');\n  }\n\n  /**\n   * Writes document coordinates as `top`/`left` on an absolutely positioned\n   * element. A static body uses document coordinates; positioned parents,\n   * such as a shadow host, use their padding edge, including borders and\n   * local scrolling.\n   */\n  static _placeInOffsetParent(el: HTMLElement, coordinates: { x: number; y: number }) {\n    let { x, y } = coordinates;\n    const parent = el.offsetParent as HTMLElement;\n    if (parent && (parent !== document.body || getComputedStyle(parent).position !== 'static')) {\n      const rect = parent.getBoundingClientRect();\n      const root = parent === document.scrollingElement;\n      x -= rect.left + window.scrollX + parent.clientLeft - (root ? 0 : parent.scrollLeft);\n      y -= rect.top + window.scrollY + parent.clientTop - (root ? 0 : parent.scrollTop);\n    }\n    el.style.top = y + 'px';\n    el.style.left = x + 'px';\n  }\n\n  /**\n   * Moves document coordinates so a `width` by `height` box stays in the\n   * viewport. A box past the left or top edge, or within `offset` of it,\n   * starts `offset` in; a box past the right or bottom edge, or within\n   * `offset` of it, ends at that edge. `offset` is the margin plus the slide\n   * distance, or minus it for right alignment.\n   */\n  static _repositionWithinScreen(\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    margin: number,\n    transitionMovement: number,\n    align: string\n  ) {\n    const offset = margin + (align === 'right' ? -transitionMovement : transitionMovement);\n    return {\n      x: window.scrollX + fit(x - window.scrollX, width, window.innerWidth, offset),\n      y: window.scrollY + fit(y - window.scrollY, height, window.innerHeight, offset)\n    };\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/chunk-7CXNATJS.mjs

@@ -0,0 +1,97 @@
+import {
+  Component
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils,
+  restoreAttribute
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/components/appBar.ts
+var _defaults = {};
+var OPEN_KEYS = ["Enter", "ArrowDown"];
+var opensSearch = (e) => OPEN_KEYS.includes(e.key) && Utils.plainKey(e) && !Utils.isComposing(e);
+var AppBar = class extends Component {
+  constructor(el, options) {
+    super(el, options);
+    this._observer = null;
+    this._sentinel = null;
+    this._input = null;
+    this._view = null;
+    // The docked view's state before the first open, for destroy() to restore.
+    this._restore = null;
+    this._onIntersect = (entries) => {
+      const entry = entries.at(-1);
+      if (!entry) return;
+      this.el.classList.toggle(
+        "collapsed",
+        !entry.isIntersecting && entry.boundingClientRect.top < this.el.getBoundingClientRect().top
+      );
+    };
+    // A docked view opens on focus, like a combobox popup. A full-screen
+    // dialog takes over the page, so reaching the field with Tab only focuses
+    // it (WCAG 3.2.1); a click, Enter or ArrowDown opens it.
+    this._onSearchFocus = () => {
+      if (!(this._view instanceof HTMLDialogElement)) this._openSearch();
+    };
+    this._onSearchKeydown = (e) => {
+      if (!opensSearch(e) || !(this._view instanceof HTMLDialogElement)) return;
+      e.preventDefault();
+      this._openSearch();
+    };
+    this._openSearch = () => {
+      if (this._view instanceof HTMLDialogElement) {
+        if (!this._view.open) this._view.showModal();
+        return;
+      }
+      this._restore ?? (this._restore = { hidden: this._view.hidden, expanded: this._input.getAttribute("aria-expanded") });
+      this._view.hidden = false;
+      this._input.setAttribute("aria-expanded", "true");
+    };
+    this._setupCollapse();
+    this._setupSearch();
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  destroy() {
+    this._observer?.disconnect();
+    this._observer = null;
+    this._sentinel?.remove();
+    this._sentinel = null;
+    if (this._restore) {
+      this._view.hidden = this._restore.hidden;
+      restoreAttribute(this._input, "aria-expanded", this._restore.expanded);
+      this._restore = null;
+    }
+    this.el.classList.remove("collapsed");
+    super.destroy();
+  }
+  _setupCollapse() {
+    if (!this.el.classList.contains("medium") && !this.el.classList.contains("large")) {
+      return;
+    }
+    this._sentinel = document.createElement("span");
+    this._sentinel.setAttribute("aria-hidden", "true");
+    this._sentinel.style.cssText = "display:block;height:0;position:relative;top:-64px;pointer-events:none;visibility:hidden";
+    this.el.insertAdjacentElement("afterend", this._sentinel);
+    this._observer = new IntersectionObserver(this._onIntersect);
+    this._observer.observe(this._sentinel);
+  }
+  _setupSearch() {
+    this._input = this.el.querySelector('input[type="search"]');
+    if (!this._input) return;
+    const id = this._input.getAttribute("aria-controls");
+    this._view = id && Utils.getElementById(this.el, id) || this.el.querySelector(".search-view");
+    if (!this._view) return;
+    const { signal } = this._events;
+    this._input.addEventListener("focus", this._onSearchFocus, { signal });
+    this._input.addEventListener("click", this._openSearch, { signal });
+    this._input.addEventListener("keydown", this._onSearchKeydown, { signal });
+  }
+};
+AppBar.key = "Expressive_AppBar";
+
+export {
+  AppBar
+};
+//# sourceMappingURL=chunk-7CXNATJS.mjs.map

package/dist/js/chunks/chunk-7CXNATJS.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/appBar.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\nimport { Utils, restoreAttribute } from '../core/utils';\n\nconst _defaults: BaseOptions = {};\n// Keys that open a full-screen search view from its field.\nconst OPEN_KEYS = ['Enter', 'ArrowDown'];\n/** Whether a key opens the view. Alt, Ctrl and Meta stay the browser's, and a composing key the IME's. */\nconst opensSearch = (e: KeyboardEvent) => OPEN_KEYS.includes(e.key) && Utils.plainKey(e) && !Utils.isComposing(e);\n\n/**\n * Collapse medium/large flexible app bars on scroll, and open the related\n * search view when the search field in a search app bar is selected.\n *\n * Observation is IntersectionObserver on a sentinel after the header.\n * A scroll listener would re-enter layout on every tick; this does not.\n */\nexport class AppBar extends Component<BaseOptions> {\n  private _observer: IntersectionObserver | null = null;\n  private _sentinel: HTMLElement | null = null;\n  private _input: HTMLInputElement | null = null;\n  private _view: HTMLElement | null = null;\n  // The docked view's state before the first open, for destroy() to restore.\n  private _restore: { hidden: HTMLElement['hidden']; expanded: string | null } | null = null;\n\n  constructor(el: HTMLElement, options: Partial<BaseOptions>) {\n    super(el, options);\n    this._setupCollapse();\n    this._setupSearch();\n  }\n\n  static get defaults(): BaseOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_AppBar';\n\n  destroy() {\n    this._observer?.disconnect();\n    this._observer = null;\n    this._sentinel?.remove();\n    this._sentinel = null;\n    if (this._restore) {\n      this._view.hidden = this._restore.hidden;\n      restoreAttribute(this._input, 'aria-expanded', this._restore.expanded);\n      this._restore = null;\n    }\n    this.el.classList.remove('collapsed');\n    super.destroy();\n  }\n\n  private _setupCollapse() {\n    if (!this.el.classList.contains('medium') && !this.el.classList.contains('large')) {\n      return;\n    }\n    // Collapsing shrinks the header, and scroll anchoring then scrolls the page\n    // back by the height it lost. The sentinel follows the header, so it moves\n    // with the page and that correction cannot bring it back into view. It sits\n    // 64px, the small bar's height, above the header's bottom edge. An expanded\n    // bar therefore collapses once the page has scrolled by the height that\n    // collapsing removes, and a collapsed bar expands when the page is back at\n    // its top. Zero height and no margins keep it out of the layout.\n    this._sentinel = document.createElement('span');\n    this._sentinel.setAttribute('aria-hidden', 'true');\n    this._sentinel.style.cssText =\n      'display:block;height:0;position:relative;top:-64px;pointer-events:none;visibility:hidden';\n    this.el.insertAdjacentElement('afterend', this._sentinel);\n    this._observer = new IntersectionObserver(this._onIntersect);\n    this._observer.observe(this._sentinel);\n  }\n\n  private _onIntersect = (entries: IntersectionObserverEntry[]) => {\n    // The newest: a busy frame can queue several.\n    const entry = entries.at(-1);\n    if (!entry) return;\n    // Collapse only when the sentinel has gone above the pinned header. A\n    // sentinel below the viewport would move back into view as the bar shrank,\n    // and the bar would switch sizes on every frame.\n    this.el.classList.toggle(\n      'collapsed',\n      !entry.isIntersecting && entry.boundingClientRect.top < this.el.getBoundingClientRect().top\n    );\n  };\n\n  private _setupSearch() {\n    this._input = this.el.querySelector('input[type=\"search\"]');\n    if (!this._input) return;\n\n    const id = this._input.getAttribute('aria-controls');\n    this._view = (id && Utils.getElementById(this.el, id)) || this.el.querySelector('.search-view');\n    if (!this._view) return;\n\n    const { signal } = this._events;\n    this._input.addEventListener('focus', this._onSearchFocus, { signal });\n    this._input.addEventListener('click', this._openSearch, { signal });\n    this._input.addEventListener('keydown', this._onSearchKeydown, { signal });\n  }\n\n  // A docked view opens on focus, like a combobox popup. A full-screen\n  // dialog takes over the page, so reaching the field with Tab only focuses\n  // it (WCAG 3.2.1); a click, Enter or ArrowDown opens it.\n  private _onSearchFocus = () => {\n    if (!(this._view instanceof HTMLDialogElement)) this._openSearch();\n  };\n\n  private _onSearchKeydown = (e: KeyboardEvent) => {\n    if (!opensSearch(e) || !(this._view instanceof HTMLDialogElement)) return;\n    e.preventDefault();\n    this._openSearch();\n  };\n\n  private _openSearch = () => {\n    if (this._view instanceof HTMLDialogElement) {\n      if (!this._view.open) this._view.showModal();\n      return;\n    }\n    this._restore ??= { hidden: this._view.hidden, expanded: this._input.getAttribute('aria-expanded') };\n    this._view.hidden = false;\n    this._input.setAttribute('aria-expanded', 'true');\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-UETTGDLI.mjs → chunk-7X44MKEQ.mjs}

@@ -1,9 +1,9 @@
-import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/commandPalette.ts
 var _defaults = {
@@ -11,10 +11,16 @@ var _defaults = {
   closeOnRun: true
 };
 var APPLE = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+var commandKey = (e) => APPLE ? e.metaKey && !e.ctrlKey : e.ctrlKey && !e.metaKey;
+var isLetter = (e, letter) => e.key.toLowerCase() === letter || !/^[a-z]$/i.test(e.key) && /^[a-z]$/.test(letter) && e.code === `Key${letter.toUpperCase()}`;
+var MOVE_KEYS = { ArrowDown: 1, ArrowUp: -1 };
 var fold = (text) => text.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
-var CommandPalette = class _CommandPalette extends Component {
+var CommandPalette = class extends Component {
+  // HTMLElement, not HTMLDialogElement: init() takes the element type from
+  // here, and has always accepted any HTMLElement.
   constructor(el, options) {
-    super(el, options, _CommandPalette);
+    const shortcut = el.dataset.shortcut;
+    super(el, { ...shortcut !== void 0 ? { shortcut: shortcut || null } : {}, ...options });
     this._active = null;
     this._generatedIds = [];
     /** Wires and refilters commands the page adds or removes later. */
@@ -29,14 +35,27 @@ var CommandPalette = class _CommandPalette extends Component {
       if (this.el.open) this.el.close();
     };
     this._handleInput = () => this._filter();
-    this._handleKeydown = (e) => {
-      if (e.key === Utils.keys.ARROW_DOWN || e.key === Utils.keys.ARROW_UP) {
+    this._handleKeydown = Utils.ignoringComposition((e) => {
+      const step = Utils.plainKey(e) ? MOVE_KEYS[e.key] : void 0;
+      if (step) {
         e.preventDefault();
-        this._move(e.key === Utils.keys.ARROW_DOWN ? 1 : -1);
-      } else if (e.key === Utils.keys.ENTER && !e.isComposing && e.keyCode !== 229 && this._active) {
+        this._move(step);
+      } else if (e.key === "Enter" && this._active) {
         e.preventDefault();
         this._run(this._active);
       }
+    });
+    /**
+     * The first Escape clears a typed query and the next closes the palette.
+     * Chromium and Firefox clear a search input on their own; WebKit closed at
+     * once, and so did every engine for a text input. Escape that cancels an
+     * IME composition is left to the IME.
+     */
+    this._handleEscape = (e) => {
+      if (e.key !== "Escape" || !this.input.value || Utils.isComposing(e)) return;
+      e.preventDefault();
+      this.input.value = "";
+      this.input.dispatchEvent(new Event("input", { bubbles: true }));
     };
     this._handleListClick = (e) => {
       const item = e.target.closest('[role="option"]');
@@ -64,23 +83,13 @@ var CommandPalette = class _CommandPalette extends Component {
     };
     this._handleShortcut = (e) => {
       const { shortcut } = this.options;
-      if (!shortcut || e.defaultPrevented || e.altKey || e.shiftKey) return;
-      if (!(APPLE ? e.metaKey && !e.ctrlKey : e.ctrlKey && !e.metaKey)) return;
-      const letter = shortcut.toLowerCase();
-      const latin = /^[a-z]$/i.test(e.key);
-      const hit = e.key.toLowerCase() === letter || !latin && /^[a-z]$/.test(letter) && e.code === `Key${letter.toUpperCase()}`;
-      if (!hit) return;
+      if (!shortcut || e.defaultPrevented || e.altKey || e.shiftKey || !commandKey(e)) return;
+      if (!isLetter(e, shortcut.toLowerCase())) return;
       e.preventDefault();
+      if (e.repeat) return;
       if (this.el.open) this.close();
       else this.open();
     };
-    this.el["Expressive_CommandPalette"] = this;
-    const shortcut = el.dataset.shortcut;
-    this.options = {
-      ..._CommandPalette.defaults,
-      ...shortcut !== void 0 ? { shortcut: shortcut || null } : {},
-      ...options
-    };
     this.input = el.querySelector(":scope > input");
     this.list = el.querySelector(":scope > :is(ul, ol)");
     if (!this.input || !this.list) {
@@ -96,40 +105,25 @@ var CommandPalette = class _CommandPalette extends Component {
       attributes: true,
       attributeFilter: ["hidden", "disabled"]
     });
-    this.input.addEventListener("input", this._handleInput);
-    this.input.addEventListener("keydown", this._handleKeydown);
-    this.list.addEventListener("click", this._handleListClick);
-    this.list.addEventListener("pointermove", this._handlePointerMove);
-    this.el.addEventListener("close", this._handleClose);
-    document.addEventListener("keydown", this._handleShortcut);
+    const { signal } = this._events;
+    this.input.addEventListener("input", this._handleInput, { signal });
+    this.input.addEventListener("keydown", this._handleKeydown, { signal });
+    this.input.addEventListener("keydown", this._handleEscape, { signal });
+    this.list.addEventListener("click", this._handleListClick, { signal });
+    this.list.addEventListener("pointermove", this._handlePointerMove, { signal });
+    this.el.addEventListener("close", this._handleClose, { signal });
+    document.addEventListener("keydown", this._handleShortcut, { signal });
   }
   static get defaults() {
     return _defaults;
   }
-  /**
-   * Initializes instances of CommandPalette.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options = {}) {
-    return super.init(els, options, _CommandPalette);
-  }
-  static getInstance(el) {
-    return el["Expressive_CommandPalette"];
-  }
   /** If the palette is open. */
   get isOpen() {
     return this.el.open;
   }
   destroy() {
     this._observer?.disconnect();
-    document.removeEventListener("keydown", this._handleShortcut);
-    this.el.removeEventListener("close", this._handleClose);
     if (this.input && this.list) {
-      this.input.removeEventListener("input", this._handleInput);
-      this.input.removeEventListener("keydown", this._handleKeydown);
-      this.list.removeEventListener("click", this._handleListClick);
-      this.list.removeEventListener("pointermove", this._handlePointerMove);
       for (const name of ["role", "aria-controls", "aria-expanded", "aria-autocomplete", "aria-activedescendant"]) {
         this.input.removeAttribute(name);
       }
@@ -147,7 +141,7 @@ var CommandPalette = class _CommandPalette extends Component {
       const empty = this._empty();
       if (empty) empty.hidden = false;
     }
-    this.el["Expressive_CommandPalette"] = void 0;
+    super.destroy();
   }
   _items() {
     return Array.from(this.list.children).filter(
@@ -255,8 +249,9 @@ var CommandPalette = class _CommandPalette extends Component {
     (this._action(item) ?? item).click();
   }
 };
+CommandPalette.key = "Expressive_CommandPalette";
 
 export {
   CommandPalette
 };
-//# sourceMappingURL=chunk-UETTGDLI.mjs.map
+//# sourceMappingURL=chunk-7X44MKEQ.mjs.map