@expressivecss/expressive 0.15.0 → 0.17.0

package/dist/js/chunks/chunk-AEG6LOAJ.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/behaviors/theme.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\n\nconst themes = ['light', 'dark', 'auto'];\nconst storageKey = 'theme';\n\n/**\n * Theme switch. A click on `[data-theme-set=\"light|dark|auto\"]` writes the\n * `theme` attribute on the root element and saves the choice in\n * `localStorage` under `theme`. Every theme control then reports whether its\n * value is current: `aria-checked` on menu item and radio roles,\n * `aria-pressed` on anything else.\n *\n * Restoring the saved choice is still the page's inline `<head>` script: the\n * bundle loads after first paint, so restoring here would flash the wrong\n * scheme. Init only marks the controls already in the page.\n */\nexport class Theme {\n  private static _initialized = false;\n\n  static Init() {\n    if (Theme._initialized || typeof document === 'undefined') return;\n    Theme._initialized = true;\n    document.addEventListener('click', Theme._onClick);\n    Utils.onDocumentReady(() => Theme.sync());\n  }\n\n  /** The current theme: the root's `theme` attribute, or `auto` without one. */\n  static get(): string {\n    const value = document.documentElement.getAttribute('theme');\n    return themes.includes(value) ? value : 'auto';\n  }\n\n  /** Applies and saves a theme, then marks the controls. Unknown values are ignored. */\n  static set(theme: string) {\n    if (!themes.includes(theme)) return;\n    document.documentElement.setAttribute('theme', theme);\n    try {\n      localStorage.setItem(storageKey, theme);\n    } catch {\n      // Storage can be disabled or full; the theme still applies to this page.\n    }\n    Theme.sync();\n  }\n\n  /** Marks every theme control in `root` as current or not. Call it after rendering new controls. */\n  static sync(root: ParentNode = document) {\n    const current = Theme.get();\n    root.querySelectorAll('[data-theme-set]').forEach((control) => {\n      const state = String(control.getAttribute('data-theme-set') === current);\n      const role = control.getAttribute('role');\n      const checked = role === 'menuitemradio' || role === 'radio';\n      control.setAttribute(checked ? 'aria-checked' : 'aria-pressed', state);\n    });\n  }\n\n  private static _onClick(e: MouseEvent) {\n    const control = Utils.closestInPath(e, '[data-theme-set]');\n    if (!control || control.matches(':disabled, [aria-disabled=\"true\"]')) return;\n    Theme.set(control.getAttribute('data-theme-set'));\n    // set() marks the document's controls; a shadow root's need their own pass.\n    const root = control.getRootNode();\n    if (root !== document) Theme.sync(root as ParentNode);\n  }\n}\n"],
+  "mappings": ";;;;;AAEA,IAAM,SAAS,CAAC,SAAS,QAAQ,MAAM;AACvC,IAAM,aAAa;AAaZ,IAAM,SAAN,MAAM,OAAM;AAAA,EAGjB,OAAO,OAAO;AACZ,QAAI,OAAM,gBAAgB,OAAO,aAAa,YAAa;AAC3D,WAAM,eAAe;AACrB,aAAS,iBAAiB,SAAS,OAAM,QAAQ;AACjD,UAAM,gBAAgB,MAAM,OAAM,KAAK,CAAC;AAAA,EAC1C;AAAA;AAAA,EAGA,OAAO,MAAc;AACnB,UAAM,QAAQ,SAAS,gBAAgB,aAAa,OAAO;AAC3D,WAAO,OAAO,SAAS,KAAK,IAAI,QAAQ;AAAA,EAC1C;AAAA;AAAA,EAGA,OAAO,IAAI,OAAe;AACxB,QAAI,CAAC,OAAO,SAAS,KAAK,EAAG;AAC7B,aAAS,gBAAgB,aAAa,SAAS,KAAK;AACpD,QAAI;AACF,mBAAa,QAAQ,YAAY,KAAK;AAAA,IACxC,QAAQ;AAAA,IAER;AACA,WAAM,KAAK;AAAA,EACb;AAAA;AAAA,EAGA,OAAO,KAAK,OAAmB,UAAU;AACvC,UAAM,UAAU,OAAM,IAAI;AAC1B,SAAK,iBAAiB,kBAAkB,EAAE,QAAQ,CAAC,YAAY;AAC7D,YAAM,QAAQ,OAAO,QAAQ,aAAa,gBAAgB,MAAM,OAAO;AACvE,YAAM,OAAO,QAAQ,aAAa,MAAM;AACxC,YAAM,UAAU,SAAS,mBAAmB,SAAS;AACrD,cAAQ,aAAa,UAAU,iBAAiB,gBAAgB,KAAK;AAAA,IACvE,CAAC;AAAA,EACH;AAAA,EAEA,OAAe,SAAS,GAAe;AACrC,UAAM,UAAU,MAAM,cAAc,GAAG,kBAAkB;AACzD,QAAI,CAAC,WAAW,QAAQ,QAAQ,mCAAmC,EAAG;AACtE,WAAM,IAAI,QAAQ,aAAa,gBAAgB,CAAC;AAEhD,UAAM,OAAO,QAAQ,YAAY;AACjC,QAAI,SAAS,SAAU,QAAM,KAAK,IAAkB;AAAA,EACtD;AACF;AA/Ca,OACI,eAAe;AADzB,IAAM,QAAN;",
+  "names": []
+}

package/dist/js/chunks/chunk-AQNFCJJ5.mjs

@@ -0,0 +1,135 @@
+import {
+  Component
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils,
+  afterFormReset,
+  formEventScope
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/components/currencyInput.ts
+var _defaults = Object.freeze({ i18n: Object.freeze({ invalid: "Enter an amount." }) });
+var LATIN = "9876543210";
+function groupsThree(clean, mark, decimals) {
+  if (clean.length - mark !== 4) return false;
+  const separator = clean[mark];
+  const earlier = clean.slice(0, mark).replace(/^\D+|\d/g, "");
+  if (earlier.split(separator).join("")) return false;
+  return earlier.includes(separator) || !decimals.includes(separator);
+}
+function split(clean, digits, decimals) {
+  const mark = Math.max(clean.lastIndexOf("."), clean.lastIndexOf(","));
+  const fraction = clean.slice(mark + 1);
+  return mark >= 0 && fraction.length <= digits && !groupsThree(clean, mark, decimals) ? [clean.slice(0, mark), fraction] : [clean, ""];
+}
+function decimalMarks(formats) {
+  return formats.flatMap((format) => format.formatToParts(1.5).filter((part) => part.type === "decimal").map((part) => part.value));
+}
+function parse(text, digits, decimals) {
+  const clean = text.replace(/[^\d.,]/g, "").replace(/[.,]+$/, "");
+  if (!/\d/.test(clean)) return null;
+  const [whole, fraction] = split(clean, digits, decimals);
+  const sign = /^\D*[-−]/.test(text) ? -1 : 1;
+  return sign * Number(`${whole.replace(/[.,]/g, "")}.${fraction}`);
+}
+var CurrencyInput = class extends Component {
+  constructor(el, options) {
+    super(el, options);
+    this._format = () => {
+      this._show(this.value);
+    };
+    /**
+     * Enter fires change while the field keeps focus. Formatting then would
+     * put the next keystroke after the currency sign, so the field waits for
+     * blur.
+     */
+    this._onChange = () => {
+      if (!this.el.matches(":focus")) this._format();
+    };
+    /** Shows the amount as a plain number to edit, with the caret at the end. */
+    this._onFocus = () => {
+      const amount = this.value;
+      if (amount === null) return;
+      const text = this._edit.format(amount);
+      this.el.value = text;
+      this.el.setSelectionRange(text.length, text.length);
+    };
+    /** Marks text that holds no amount invalid, and clears the mark once it holds one or is empty. */
+    this._validate = () => {
+      const { el } = this;
+      const invalid = el.value.trim() !== "" && this.value === null;
+      el.setCustomValidity(invalid ? this.options.i18n.invalid : "");
+    };
+    /** Puts the plain number in the form data in place of the formatted text. */
+    this._onFormData = (e) => {
+      if (!this._submitsTo(e.target)) return;
+      e.formData.set(this.el.name, String(this.value ?? this.el.value));
+    };
+    const locale = Utils.locale(el);
+    try {
+      this._display = new Intl.NumberFormat(locale, { style: "currency", currency: el.dataset.currency });
+    } catch {
+      return;
+    }
+    this._digits = this._display.resolvedOptions().maximumFractionDigits;
+    this._edit = new Intl.NumberFormat(locale, { useGrouping: false, maximumFractionDigits: this._digits });
+    this._plain = new Intl.NumberFormat("en", { useGrouping: false, maximumFractionDigits: this._digits });
+    this._native = new Intl.NumberFormat(locale, { useGrouping: false }).format(9876543210);
+    const decimals = decimalMarks([this._display, this._edit]);
+    this._marks = Object.fromEntries(decimals.filter((mark) => !".,".includes(mark)).map((mark) => [mark, "."]));
+    this._decimals = decimals.map((mark) => this._marks[mark] ?? mark);
+    const signal = this._events.signal;
+    el.addEventListener("change", this._onChange, { capture: true, signal });
+    el.addEventListener("blur", this._format, { signal });
+    el.addEventListener("focus", this._onFocus, { signal });
+    el.addEventListener("input", this._validate, { signal });
+    formEventScope(el).addEventListener("formdata", this._onFormData, { capture: true, signal });
+    afterFormReset(el, () => this._start(), signal);
+    this._start();
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  /** The amount the field holds, rounded as it shows, or null when it is empty or holds no digit. */
+  get value() {
+    return this._round(this._read(this.el.value));
+  }
+  /** Reads text in the locale's digits, or full-width ones from an IME, as an amount. */
+  _read(text) {
+    const latin = Array.from(text.normalize("NFKC"), (ch) => this._marks[ch] ?? LATIN[this._native.indexOf(ch)] ?? ch);
+    return parse(latin.join(""), this._digits, this._decimals);
+  }
+  _round(amount) {
+    return amount === null ? null : Number(this._plain.format(amount));
+  }
+  /**
+   * Formats the starting value without events. It reads as a plain number
+   * first, the form the field submits, so a saved `1.234` stays 1.234.
+   */
+  _start() {
+    const text = this.el.value;
+    const number = Number(text);
+    this._show(this._round(text.trim() && Number.isFinite(number) ? number : this._read(text)));
+  }
+  /** Shows `amount` in the locale and currency, leaving text that reads as no amount as it is. */
+  _show(amount) {
+    if (amount !== null) this.el.value = this._display.format(amount);
+    this._validate();
+  }
+  /** Whether the field has an entry in `form`'s data. */
+  _submitsTo(form) {
+    const { el } = this;
+    return form === el.form && el.name !== "" && !el.matches(":disabled");
+  }
+  /** Stops formatting and clears the validity message, leaving the text as it is. */
+  destroy() {
+    super.destroy();
+    this.el.setCustomValidity("");
+  }
+};
+CurrencyInput.key = "Expressive_CurrencyInput";
+
+export {
+  CurrencyInput
+};
+//# sourceMappingURL=chunk-AQNFCJJ5.mjs.map

package/dist/js/chunks/chunk-AQNFCJJ5.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/currencyInput.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\nimport { Utils, afterFormReset, formEventScope } from '../core/utils';\n\nexport interface CurrencyInputOptions extends BaseOptions {\n  /** `invalid` is the validity message for text that holds no amount. */\n  i18n: Partial<{ invalid: string }>;\n}\n\nconst _defaults: CurrencyInputOptions = Object.freeze({ i18n: Object.freeze({ invalid: 'Enter an amount.' }) });\n\n/** Latin digits in the order `_native` holds them, to map a locale's own digits back. */\nconst LATIN = '9876543210';\n\n/**\n * Whether the separator at `mark` groups even though the currency could show\n * three digits after it. After a separator of the other kind it is a decimal,\n * as in `1.234,567`. A repeated separator groups, and so does a lone one that\n * is not one of the locale's `decimals`. The earlier separators are read from\n * the first digit, since a symbol such as `\u062F.\u0628.` may hold marks.\n */\nfunction groupsThree(clean: string, mark: number, decimals: string[]) {\n  if (clean.length - mark !== 4) return false;\n  const separator = clean[mark];\n  const earlier = clean.slice(0, mark).replace(/^\\D+|\\d/g, '');\n  if (earlier.split(separator).join('')) return false;\n  return earlier.includes(separator) || !decimals.includes(separator);\n}\n\n/**\n * Splits digits and separators into whole and fraction digits. The last `.`\n * or `,` is the decimal mark when no more than `digits` digits follow it and\n * it does not group, so `1.234,5` and `1,234.50` both split at the end. Any\n * other separator groups.\n */\nfunction split(clean: string, digits: number, decimals: string[]): [string, string] {\n  const mark = Math.max(clean.lastIndexOf('.'), clean.lastIndexOf(','));\n  const fraction = clean.slice(mark + 1);\n  return mark >= 0 && fraction.length <= digits && !groupsThree(clean, mark, decimals) ? [clean.slice(0, mark), fraction] : [clean, ''];\n}\n\n/**\n * The marks a locale writes decimals with. Some use one for currency and\n * another for plain numbers: fr-CH shows `1.234 KWD` and edits `1,234`.\n */\nfunction decimalMarks(formats: Intl.NumberFormat[]) {\n  return formats.flatMap((format) => format.formatToParts(1.5).filter((part) => part.type === 'decimal').map((part) => part.value));\n}\n\n/**\n * Reads text in Latin digits as an amount, or null when it holds no digit.\n * Signs, spaces and letters are ignored, and a `-` or `\u2212` before the first\n * digit makes the amount negative. A separator after the last digit is\n * dropped, since it belongs to a symbol such as `kr.`.\n */\nfunction parse(text: string, digits: number, decimals: string[]): number | null {\n  const clean = text.replace(/[^\\d.,]/g, '').replace(/[.,]+$/, '');\n  if (!/\\d/.test(clean)) return null;\n  const [whole, fraction] = split(clean, digits, decimals);\n  const sign = /^\\D*[-\u2212]/.test(text) ? -1 : 1;\n  return sign * Number(`${whole.replace(/[.,]/g, '')}.${fraction}`);\n}\n\n/**\n * Currency input. Shows a text field's amount in the page's locale and the\n * currency its `data-currency` attribute names once the field loses focus,\n * shows the plain number while it has focus, and puts the plain number in the\n * form data.\n */\nexport class CurrencyInput extends Component<CurrencyInputOptions> {\n  declare el: HTMLInputElement;\n  static key = 'Expressive_CurrencyInput';\n  private _display: Intl.NumberFormat;\n  /** Writes an amount for editing: the locale's digits and mark, no grouping or sign. */\n  private _edit: Intl.NumberFormat;\n  /** Writes an amount as the form submits it: Latin digits, a `.` mark, no grouping. */\n  private _plain: Intl.NumberFormat;\n  private _digits: number;\n  /** The locale's digits for 9876543210. */\n  private _native: string;\n  /** Rewrites a decimal mark that is neither `.` nor `,`, such as Arabic's, to `.`. */\n  private _marks: Record<string, string>;\n  /** The locale's decimal marks, after `_marks`. */\n  private _decimals: string[];\n\n  constructor(el: HTMLInputElement, options: Partial<CurrencyInputOptions>) {\n    super(el, options);\n    const locale = Utils.locale(el);\n    try {\n      this._display = new Intl.NumberFormat(locale, { style: 'currency', currency: el.dataset.currency });\n    } catch {\n      // A malformed code leaves the field a plain text input.\n      return;\n    }\n    this._digits = this._display.resolvedOptions().maximumFractionDigits;\n    this._edit = new Intl.NumberFormat(locale, { useGrouping: false, maximumFractionDigits: this._digits });\n    this._plain = new Intl.NumberFormat('en', { useGrouping: false, maximumFractionDigits: this._digits });\n    this._native = new Intl.NumberFormat(locale, { useGrouping: false }).format(9876543210);\n    const decimals = decimalMarks([this._display, this._edit]);\n    this._marks = Object.fromEntries(decimals.filter((mark) => !'.,'.includes(mark)).map((mark) => [mark, '.']));\n    this._decimals = decimals.map((mark) => this._marks[mark] ?? mark);\n    const signal = this._events.signal;\n    // Capture, so a page's change listener on the field reads the formatted\n    // text. Blur covers a visit that changed nothing, which fires no change.\n    el.addEventListener('change', this._onChange, { capture: true, signal });\n    el.addEventListener('blur', this._format, { signal });\n    el.addEventListener('focus', this._onFocus, { signal });\n    el.addEventListener('input', this._validate, { signal });\n    formEventScope(el).addEventListener('formdata', this._onFormData, { capture: true, signal });\n    // The field formats the value a reset restores.\n    afterFormReset(el, () => this._start(), signal);\n    this._start();\n  }\n\n  static get defaults(): CurrencyInputOptions {\n    return _defaults;\n  }\n\n  /** The amount the field holds, rounded as it shows, or null when it is empty or holds no digit. */\n  get value(): number | null {\n    return this._round(this._read(this.el.value));\n  }\n\n  /** Reads text in the locale's digits, or full-width ones from an IME, as an amount. */\n  private _read(text: string) {\n    const latin = Array.from(text.normalize('NFKC'), (ch) => this._marks[ch] ?? LATIN[this._native.indexOf(ch)] ?? ch);\n    return parse(latin.join(''), this._digits, this._decimals);\n  }\n\n  private _round(amount: number | null) {\n    return amount === null ? null : Number(this._plain.format(amount));\n  }\n\n  /**\n   * Formats the starting value without events. It reads as a plain number\n   * first, the form the field submits, so a saved `1.234` stays 1.234.\n   */\n  private _start() {\n    const text = this.el.value;\n    const number = Number(text);\n    this._show(this._round(text.trim() && Number.isFinite(number) ? number : this._read(text)));\n  }\n\n  private _format = () => {\n    this._show(this.value);\n  };\n\n  /**\n   * Enter fires change while the field keeps focus. Formatting then would\n   * put the next keystroke after the currency sign, so the field waits for\n   * blur.\n   */\n  private _onChange = () => {\n    if (!this.el.matches(':focus')) this._format();\n  };\n\n  /** Shows `amount` in the locale and currency, leaving text that reads as no amount as it is. */\n  private _show(amount: number | null) {\n    if (amount !== null) this.el.value = this._display.format(amount);\n    this._validate();\n  }\n\n  /** Shows the amount as a plain number to edit, with the caret at the end. */\n  private _onFocus = () => {\n    const amount = this.value;\n    if (amount === null) return;\n    const text = this._edit.format(amount);\n    this.el.value = text;\n    this.el.setSelectionRange(text.length, text.length);\n  };\n\n  /** Marks text that holds no amount invalid, and clears the mark once it holds one or is empty. */\n  private _validate = () => {\n    const { el } = this;\n    const invalid = el.value.trim() !== '' && this.value === null;\n    el.setCustomValidity(invalid ? this.options.i18n.invalid : '');\n  };\n\n  /** Puts the plain number in the form data in place of the formatted text. */\n  private _onFormData = (e: FormDataEvent) => {\n    if (!this._submitsTo(e.target)) return;\n    // ponytail: set() collapses fields that share this name into one entry; a\n    // per-field swap if a form ever repeats a currency field's name.\n    e.formData.set(this.el.name, String(this.value ?? this.el.value));\n  };\n\n  /** Whether the field has an entry in `form`'s data. */\n  private _submitsTo(form: EventTarget) {\n    const { el } = this;\n    return form === el.form && el.name !== '' && !el.matches(':disabled');\n  }\n\n  /** Stops formatting and clears the validity message, leaving the text as it is. */\n  destroy(): void {\n    super.destroy();\n    this.el.setCustomValidity('');\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/chunk-B55LWKBM.mjs

@@ -0,0 +1,75 @@
+import {
+  DockedDisplayPlugin
+} from "./chunk-CY2CTOVM.mjs";
+
+// src/ts/plugins/modalDisplayPlugin.ts
+var ModalDisplayPlugin = class {
+  constructor(el, container, onDismiss) {
+    /** Whether the picker, not the user, is closing the dialog. */
+    this._settled = false;
+    this._opener = null;
+    /** Whether the press that ends in the next click started on the scrim. */
+    this._downOnScrim = false;
+    this._handlePointerDown = (e) => {
+      this._downOnScrim = e.target === this.dialog;
+    };
+    /**
+     * The picker fills the dialog, so a press on the dialog itself is on the
+     * scrim. A drag that starts on the picker, such as the timepicker hand,
+     * and ends on the scrim also clicks the dialog, so both ends must be there.
+     */
+    this._handleClick = (e) => {
+      if (e.target === this.dialog && this._downOnScrim) this.dialog.close();
+      this._downOnScrim = false;
+    };
+    this._handleClose = () => {
+      const dismissed = !this._settled;
+      this._settled = false;
+      this._opener?.focus({ preventScroll: true });
+      if (dismissed) this.onDismiss();
+    };
+    this.destroy = () => {
+      this.dialog.removeEventListener("pointerdown", this._handlePointerDown);
+      this.dialog.removeEventListener("click", this._handleClick);
+      this.dialog.removeEventListener("close", this._handleClose);
+      this.dialog.remove();
+    };
+    this.show = () => {
+      if (this.dialog.open) return;
+      const root = this.dialog.getRootNode();
+      this._opener = root.activeElement;
+      this.dialog.showModal();
+    };
+    this.hide = () => {
+      if (!this.dialog.open) return;
+      this._settled = true;
+      this.dialog.close();
+    };
+    this.triggers = [el];
+    this.onDismiss = onDismiss;
+    this.dialog = document.createElement("dialog");
+    this.dialog.className = "display-modal";
+    const label = el.labels?.[0]?.textContent.trim() || el.getAttribute("aria-label");
+    if (label) this.dialog.setAttribute("aria-label", label);
+    this.dialog.append(container);
+    el.parentElement.append(this.dialog);
+    this.dialog.addEventListener("pointerdown", this._handlePointerDown);
+    this.dialog.addEventListener("click", this._handleClick);
+    this.dialog.addEventListener("close", this._handleClose);
+  }
+};
+function createDisplayPlugin(type, el, container, options, onDismiss) {
+  if (type === "modal") return new ModalDisplayPlugin(el, container, onDismiss);
+  if (type === "docked") return new DockedDisplayPlugin(el, container, options);
+  return void 0;
+}
+function hideModal(plugin) {
+  if (plugin instanceof ModalDisplayPlugin) plugin.hide();
+}
+
+export {
+  ModalDisplayPlugin,
+  createDisplayPlugin,
+  hideModal
+};
+//# sourceMappingURL=chunk-B55LWKBM.mjs.map

package/dist/js/chunks/chunk-B55LWKBM.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/plugins/modalDisplayPlugin.ts"],
+  "sourcesContent": ["import { DockedDisplayPlugin, DockedDisplayPluginOptions } from './dockedDisplayPlugin';\n\n/**\n * Shows a picker in a modal <dialog>, which the dialog styles draw as a\n * basic dialog over a scrim. The browser keeps focus inside it. Escape or a\n * press on the scrim closes it, and the picker hears that as Cancel; the\n * picker closes it itself through hide() on Ok or Cancel. Focus goes back\n * to the field that opened it.\n */\nexport class ModalDisplayPlugin {\n  /** The fields that open the dialog, as DockedDisplayPlugin keeps them. */\n  readonly triggers: HTMLElement[];\n  private readonly dialog: HTMLDialogElement;\n  private readonly onDismiss: () => void;\n  /** Whether the picker, not the user, is closing the dialog. */\n  private _settled = false;\n  private _opener: HTMLElement | null = null;\n  /** Whether the press that ends in the next click started on the scrim. */\n  private _downOnScrim = false;\n\n  constructor(el: HTMLElement, container: HTMLElement, onDismiss: () => void) {\n    this.triggers = [el];\n    this.onDismiss = onDismiss;\n    this.dialog = document.createElement('dialog');\n    this.dialog.className = 'display-modal';\n    const label = (el as HTMLInputElement).labels?.[0]?.textContent.trim() || el.getAttribute('aria-label');\n    if (label) this.dialog.setAttribute('aria-label', label);\n    this.dialog.append(container);\n    el.parentElement.append(this.dialog);\n    this.dialog.addEventListener('pointerdown', this._handlePointerDown);\n    this.dialog.addEventListener('click', this._handleClick);\n    this.dialog.addEventListener('close', this._handleClose);\n  }\n\n  private _handlePointerDown = (e: PointerEvent) => {\n    this._downOnScrim = e.target === this.dialog;\n  };\n\n  /**\n   * The picker fills the dialog, so a press on the dialog itself is on the\n   * scrim. A drag that starts on the picker, such as the timepicker hand,\n   * and ends on the scrim also clicks the dialog, so both ends must be there.\n   */\n  private _handleClick = (e: MouseEvent) => {\n    if (e.target === this.dialog && this._downOnScrim) this.dialog.close();\n    this._downOnScrim = false;\n  };\n\n  private _handleClose = () => {\n    const dismissed = !this._settled;\n    this._settled = false;\n    this._opener?.focus({ preventScroll: true });\n    if (dismissed) this.onDismiss();\n  };\n\n  destroy = () => {\n    this.dialog.removeEventListener('pointerdown', this._handlePointerDown);\n    this.dialog.removeEventListener('click', this._handleClick);\n    this.dialog.removeEventListener('close', this._handleClose);\n    this.dialog.remove();\n  };\n\n  show = () => {\n    if (this.dialog.open) return;\n    const root = this.dialog.getRootNode() as Document | ShadowRoot;\n    this._opener = root.activeElement as HTMLElement | null;\n    this.dialog.showModal();\n  };\n\n  hide = () => {\n    if (!this.dialog.open) return;\n    this._settled = true;\n    this.dialog.close();\n  };\n}\n\nexport type DisplayPlugin = DockedDisplayPlugin | ModalDisplayPlugin;\n\n/**\n * The display plugin a picker's `displayPlugin` option names: 'docked',\n * 'modal', or none for an inline picker. `onDismiss` is the picker's Cancel.\n */\nexport function createDisplayPlugin(\n  type: string | null,\n  el: HTMLElement,\n  container: HTMLElement,\n  options: Partial<DockedDisplayPluginOptions>,\n  onDismiss: () => void\n): DisplayPlugin | undefined {\n  if (type === 'modal') return new ModalDisplayPlugin(el, container, onDismiss);\n  if (type === 'docked') return new DockedDisplayPlugin(el, container, options);\n  return undefined;\n}\n\n/** Ok and Cancel close a modal picker; a docked one stays until a click outside. */\nexport function hideModal(plugin: DisplayPlugin | undefined) {\n  if (plugin instanceof ModalDisplayPlugin) plugin.hide();\n}\n"],
+  "mappings": ";;;;;AASO,IAAM,qBAAN,MAAyB;AAAA,EAW9B,YAAY,IAAiB,WAAwB,WAAuB;AAL5E;AAAA,SAAQ,WAAW;AACnB,SAAQ,UAA8B;AAEtC;AAAA,SAAQ,eAAe;AAgBvB,SAAQ,qBAAqB,CAAC,MAAoB;AAChD,WAAK,eAAe,EAAE,WAAW,KAAK;AAAA,IACxC;AAOA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAQ,eAAe,CAAC,MAAkB;AACxC,UAAI,EAAE,WAAW,KAAK,UAAU,KAAK,aAAc,MAAK,OAAO,MAAM;AACrE,WAAK,eAAe;AAAA,IACtB;AAEA,SAAQ,eAAe,MAAM;AAC3B,YAAM,YAAY,CAAC,KAAK;AACxB,WAAK,WAAW;AAChB,WAAK,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;AAC3C,UAAI,UAAW,MAAK,UAAU;AAAA,IAChC;AAEA,mBAAU,MAAM;AACd,WAAK,OAAO,oBAAoB,eAAe,KAAK,kBAAkB;AACtE,WAAK,OAAO,oBAAoB,SAAS,KAAK,YAAY;AAC1D,WAAK,OAAO,oBAAoB,SAAS,KAAK,YAAY;AAC1D,WAAK,OAAO,OAAO;AAAA,IACrB;AAEA,gBAAO,MAAM;AACX,UAAI,KAAK,OAAO,KAAM;AACtB,YAAM,OAAO,KAAK,OAAO,YAAY;AACrC,WAAK,UAAU,KAAK;AACpB,WAAK,OAAO,UAAU;AAAA,IACxB;AAEA,gBAAO,MAAM;AACX,UAAI,CAAC,KAAK,OAAO,KAAM;AACvB,WAAK,WAAW;AAChB,WAAK,OAAO,MAAM;AAAA,IACpB;AApDE,SAAK,WAAW,CAAC,EAAE;AACnB,SAAK,YAAY;AACjB,SAAK,SAAS,SAAS,cAAc,QAAQ;AAC7C,SAAK,OAAO,YAAY;AACxB,UAAM,QAAS,GAAwB,SAAS,CAAC,GAAG,YAAY,KAAK,KAAK,GAAG,aAAa,YAAY;AACtG,QAAI,MAAO,MAAK,OAAO,aAAa,cAAc,KAAK;AACvD,SAAK,OAAO,OAAO,SAAS;AAC5B,OAAG,cAAc,OAAO,KAAK,MAAM;AACnC,SAAK,OAAO,iBAAiB,eAAe,KAAK,kBAAkB;AACnE,SAAK,OAAO,iBAAiB,SAAS,KAAK,YAAY;AACvD,SAAK,OAAO,iBAAiB,SAAS,KAAK,YAAY;AAAA,EACzD;AA0CF;AAQO,SAAS,oBACd,MACA,IACA,WACA,SACA,WAC2B;AAC3B,MAAI,SAAS,QAAS,QAAO,IAAI,mBAAmB,IAAI,WAAW,SAAS;AAC5E,MAAI,SAAS,SAAU,QAAO,IAAI,oBAAoB,IAAI,WAAW,OAAO;AAC5E,SAAO;AACT;AAGO,SAAS,UAAU,QAAmC;AAC3D,MAAI,kBAAkB,mBAAoB,QAAO,KAAK;AACxD;",
+  "names": []
+}

package/dist/js/chunks/chunk-BB5VXYXT.mjs

@@ -0,0 +1,28 @@
+import {
+  Utils
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/behaviors/lists.ts
+var rowTarget = ":scope > li > :is(a[href], button):only-child";
+var STEPS = { ArrowUp: -1, ArrowDown: 1 };
+var _Lists = class _Lists {
+  // A second Init adds nothing: addEventListener ignores a listener it has.
+  static Init() {
+    if (typeof document === "undefined") return;
+    document.addEventListener("keydown", _Lists._onKeydown);
+  }
+};
+_Lists._onKeydown = (e) => {
+  const list = Utils.eventTarget(e)?.closest(".list");
+  if (!list) return;
+  const target = Utils.focusTarget([...list.querySelectorAll(rowTarget)], e, STEPS);
+  if (!target) return;
+  e.preventDefault();
+  target.focus();
+};
+var Lists = _Lists;
+
+export {
+  Lists
+};
+//# sourceMappingURL=chunk-BB5VXYXT.mjs.map

package/dist/js/chunks/chunk-BB5VXYXT.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/behaviors/lists.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\n\n/** A row that is one link or button from edge to edge, as the list docs write it. */\nconst rowTarget = ':scope > li > :is(a[href], button):only-child';\n\nconst STEPS = { ArrowUp: -1, ArrowDown: 1 };\n\n/**\n * Keys for lists of actionable rows. In a `.list` whose rows are each a\n * single link or button, Up and Down move focus to the row before or after,\n * and Home and End to the first and last, skipping disabled rows. Every row\n * stays a Tab stop and keeps its own role, so the keys are a shortcut on\n * top of native navigation rather than a listbox. Radio rows already move\n * with the arrows, and other lists are left alone.\n */\nexport class Lists {\n  // A second Init adds nothing: addEventListener ignores a listener it has.\n  static Init() {\n    if (typeof document === 'undefined') return;\n    document.addEventListener('keydown', Lists._onKeydown);\n  }\n\n  private static _onKeydown = (e: KeyboardEvent) => {\n    const list = Utils.eventTarget(e)?.closest('.list');\n    if (!list) return;\n    const target = Utils.focusTarget([...list.querySelectorAll<HTMLElement>(rowTarget)], e, STEPS);\n    if (!target) return;\n    e.preventDefault();\n    target.focus();\n  };\n}\n"],
+  "mappings": ";;;;;AAGA,IAAM,YAAY;AAElB,IAAM,QAAQ,EAAE,SAAS,IAAI,WAAW,EAAE;AAUnC,IAAM,SAAN,MAAM,OAAM;AAAA;AAAA,EAEjB,OAAO,OAAO;AACZ,QAAI,OAAO,aAAa,YAAa;AACrC,aAAS,iBAAiB,WAAW,OAAM,UAAU;AAAA,EACvD;AAUF;AAfa,OAOI,aAAa,CAAC,MAAqB;AAChD,QAAM,OAAO,MAAM,YAAY,CAAC,GAAG,QAAQ,OAAO;AAClD,MAAI,CAAC,KAAM;AACX,QAAM,SAAS,MAAM,YAAY,CAAC,GAAG,KAAK,iBAA8B,SAAS,CAAC,GAAG,GAAG,KAAK;AAC7F,MAAI,CAAC,OAAQ;AACb,IAAE,eAAe;AACjB,SAAO,MAAM;AACf;AAdK,IAAM,QAAN;",
+  "names": []
+}

package/dist/js/chunks/chunk-BDATLH3H.mjs

@@ -0,0 +1,108 @@
+import {
+  Menu
+} from "./chunk-DWA5UYLJ.mjs";
+import {
+  Component
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/components/menubar.ts
+var _defaults = {
+  menuOptions: { constrainWidth: false, coverTrigger: false }
+};
+var Menubar = class extends Component {
+  constructor(el, options) {
+    super(el, options);
+    this._added = [];
+    this._onFocusin = (e) => {
+      const items = this._items;
+      if (!items.includes(e.target)) return;
+      items.forEach((item) => item.tabIndex = item === e.target ? 0 : -1);
+    };
+    this._onBarKeydown = (e) => {
+      if (!Utils.plainKey(e)) return;
+      const items = this._items;
+      const index = items.indexOf(e.target);
+      if (index < 0) return;
+      const step = this._step(e.key);
+      if (step) this._focusItem(index, step, false);
+      else if (e.key === "Home") this._focusItem(-1, 1, false);
+      else if (e.key === "End") this._focusItem(items.length, -1, false);
+      else return;
+      e.preventDefault();
+    };
+    // Inside an open menu, Menu handles every key first and takes Left and
+    // Right only for submenus; whatever it leaves moves along the bar.
+    this._onMenuKeydown = (e) => {
+      const step = this._step(e.key);
+      if (!step || e.defaultPrevented || !Utils.plainKey(e)) return;
+      const items = this._items;
+      const path = e.composedPath();
+      const index = items.findIndex((item) => {
+        const menu = Menu.getInstance(item);
+        return menu?.isOpen && menu.menuEl && path.includes(menu.menuEl);
+      });
+      if (index < 0) return;
+      e.preventDefault();
+      this._focusItem(index, step, true);
+    };
+    this._setAttribute(this.el, "role", "menubar");
+    this._items.forEach((item, index) => {
+      Menu.init(item, this.options.menuOptions);
+      this._setAttribute(item, "role", "menuitem");
+      item.tabIndex = index === 0 ? 0 : -1;
+    });
+    const { signal } = this._events;
+    this.el.addEventListener("keydown", this._onBarKeydown, { signal });
+    this.el.addEventListener("focusin", this._onFocusin, { signal });
+    document.addEventListener("keydown", this._onMenuKeydown, { signal });
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  destroy() {
+    this._items.forEach((item) => {
+      Menu.getInstance(item)?.destroy();
+      item.removeAttribute("tabindex");
+    });
+    this._added.forEach(({ el, name }) => el.removeAttribute(name));
+    this._added = [];
+    super.destroy();
+  }
+  get _items() {
+    return [...this.el.querySelectorAll(":scope > .menu-trigger")];
+  }
+  /** Sets an attribute the author left out, remembering it for destroy(). */
+  _setAttribute(el, name, value) {
+    if (el.hasAttribute(name)) return;
+    el.setAttribute(name, value);
+    this._added.push({ el, name });
+  }
+  _step(key) {
+    const rtl = getComputedStyle(this.el).direction === "rtl";
+    if (key === "ArrowRight") return rtl ? -1 : 1;
+    if (key === "ArrowLeft") return rtl ? 1 : -1;
+    return null;
+  }
+  /** Focuses the first enabled item after `index` in the `step` direction, wrapping. */
+  _focusItem(index, step, open) {
+    const items = this._items;
+    const n = items.length;
+    const item = items.map((_, i) => items[((index + step * (i + 1)) % n + n) % n]).find((candidate) => !candidate.matches(':disabled, [aria-disabled="true"]'));
+    if (!item) return;
+    items.forEach((other) => {
+      const menu = Menu.getInstance(other);
+      if (other !== item && menu?.isOpen) menu.close();
+    });
+    item.focus();
+    if (open) Menu.getInstance(item)?.open();
+  }
+};
+Menubar.key = "Expressive_Menubar";
+
+export {
+  Menubar
+};
+//# sourceMappingURL=chunk-BDATLH3H.mjs.map

package/dist/js/chunks/chunk-BDATLH3H.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/menubar.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\nimport { Component, BaseOptions } from '../core/component';\nimport { Menu, MenuOptions } from './menu';\n\nexport interface MenubarOptions extends BaseOptions {\n  /**\n   * Options for each item's Menu. The defaults size the menus to their\n   * content and open them below the bar.\n   * @default { constrainWidth: false, coverTrigger: false }\n   */\n  menuOptions: Partial<MenuOptions>;\n}\n\nconst _defaults: MenubarOptions = {\n  menuOptions: { constrainWidth: false, coverTrigger: false }\n};\n\n/**\n * Menubar. An application's row of menus, such as File, Edit and View. A\n * `.menubar` holds `.menu-trigger` buttons whose `data-target` menus are\n * ordinary Menus; this adds the ARIA menubar contract around them. The bar\n * is `role=\"menubar\"` and each button a `menuitem`, with one tab stop that\n * follows focus. Left and Right move between items, wrapping, and Home and\n * End go to the first and last; with a menu open, Left and Right close it\n * and open the neighbour's, unless the focused row opens or closes a\n * submenu. Down, Up, Enter and Space open a menu, and Escape closes it,\n * through Menu itself.\n */\nexport class Menubar extends Component<MenubarOptions> {\n  private _added: { el: Element; name: string }[] = [];\n\n  constructor(el: HTMLElement, options: Partial<MenubarOptions>) {\n    super(el, options);\n    this._setAttribute(this.el, 'role', 'menubar');\n    this._items.forEach((item, index) => {\n      Menu.init(item, this.options.menuOptions);\n      this._setAttribute(item, 'role', 'menuitem');\n      item.tabIndex = index === 0 ? 0 : -1;\n    });\n    const { signal } = this._events;\n    this.el.addEventListener('keydown', this._onBarKeydown, { signal });\n    this.el.addEventListener('focusin', this._onFocusin, { signal });\n    document.addEventListener('keydown', this._onMenuKeydown, { signal });\n  }\n\n  static get defaults(): MenubarOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_Menubar';\n\n  destroy() {\n    this._items.forEach((item) => {\n      Menu.getInstance(item)?.destroy();\n      item.removeAttribute('tabindex');\n    });\n    this._added.forEach(({ el, name }) => el.removeAttribute(name));\n    this._added = [];\n    super.destroy();\n  }\n\n  private get _items(): HTMLElement[] {\n    return [...this.el.querySelectorAll<HTMLElement>(':scope > .menu-trigger')];\n  }\n\n  /** Sets an attribute the author left out, remembering it for destroy(). */\n  private _setAttribute(el: Element, name: string, value: string) {\n    if (el.hasAttribute(name)) return;\n    el.setAttribute(name, value);\n    this._added.push({ el, name });\n  }\n\n  private _step(key: string): number | null {\n    const rtl = getComputedStyle(this.el).direction === 'rtl';\n    if (key === 'ArrowRight') return rtl ? -1 : 1;\n    if (key === 'ArrowLeft') return rtl ? 1 : -1;\n    return null;\n  }\n\n  /** Focuses the first enabled item after `index` in the `step` direction, wrapping. */\n  private _focusItem(index: number, step: number, open: boolean) {\n    const items = this._items;\n    const n = items.length;\n    // focus() on a disabled button does nothing, which stranded every item\n    // past it, and opening its menu would bypass the disabled state.\n    const item = items\n      .map((_, i) => items[(((index + step * (i + 1)) % n) + n) % n])\n      .find((candidate) => !candidate.matches(':disabled, [aria-disabled=\"true\"]'));\n    if (!item) return;\n    items.forEach((other) => {\n      const menu = Menu.getInstance(other);\n      if (other !== item && menu?.isOpen) menu.close();\n    });\n    item.focus();\n    if (open) Menu.getInstance(item)?.open();\n  }\n\n  private _onFocusin = (e: FocusEvent) => {\n    const items = this._items;\n    if (!items.includes(e.target as HTMLElement)) return;\n    items.forEach((item) => (item.tabIndex = item === e.target ? 0 : -1));\n  };\n\n  private _onBarKeydown = (e: KeyboardEvent) => {\n    if (!Utils.plainKey(e)) return;\n    const items = this._items;\n    const index = items.indexOf(e.target as HTMLElement);\n    if (index < 0) return;\n    const step = this._step(e.key);\n    // Home and End search from just outside the ends of the bar.\n    if (step) this._focusItem(index, step, false);\n    else if (e.key === 'Home') this._focusItem(-1, 1, false);\n    else if (e.key === 'End') this._focusItem(items.length, -1, false);\n    else return;\n    e.preventDefault();\n  };\n\n  // Inside an open menu, Menu handles every key first and takes Left and\n  // Right only for submenus; whatever it leaves moves along the bar.\n  private _onMenuKeydown = (e: KeyboardEvent) => {\n    const step = this._step(e.key);\n    if (!step || e.defaultPrevented || !Utils.plainKey(e)) return;\n    const items = this._items;\n    const path = e.composedPath();\n    const index = items.findIndex((item) => {\n      const menu = Menu.getInstance(item);\n      return menu?.isOpen && menu.menuEl && path.includes(menu.menuEl);\n    });\n    if (index < 0) return;\n    e.preventDefault();\n    this._focusItem(index, step, true);\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}