@expressivecss/expressive 0.16.0 → 0.17.0

package/dist/js/chunks/{chunk-OUCHKSAW.mjs → chunk-B55LWKBM.mjs}

@@ -1,6 +1,6 @@
 import {
   DockedDisplayPlugin
-} from "./chunk-ZKWUWBUB.mjs";
+} from "./chunk-CY2CTOVM.mjs";
 
 // src/ts/plugins/modalDisplayPlugin.ts
 var ModalDisplayPlugin = class {
@@ -8,9 +8,19 @@ var ModalDisplayPlugin = class {
     /** Whether the picker, not the user, is closing the dialog. */
     this._settled = false;
     this._opener = null;
-    /** The picker fills the dialog, so a press on the dialog itself is on the scrim. */
+    /** 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.dialog.close();
+      if (e.target === this.dialog && this._downOnScrim) this.dialog.close();
+      this._downOnScrim = false;
     };
     this._handleClose = () => {
       const dismissed = !this._settled;
@@ -19,6 +29,7 @@ var ModalDisplayPlugin = class {
       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();
@@ -42,6 +53,7 @@ var ModalDisplayPlugin = class {
     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);
   }
@@ -60,4 +72,4 @@ export {
   createDisplayPlugin,
   hideModal
 };
-//# sourceMappingURL=chunk-OUCHKSAW.mjs.map
+//# 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-AI73GJKG.mjs → chunk-BB5VXYXT.mjs}

@@ -1,6 +1,6 @@
 import {
   Utils
-} from "./chunk-ZVLOUDIJ.mjs";
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/behaviors/lists.ts
 var rowTarget = ":scope > li > :is(a[href], button):only-child";
@@ -25,4 +25,4 @@ var Lists = _Lists;
 export {
   Lists
 };
-//# sourceMappingURL=chunk-AI73GJKG.mjs.map
+//# sourceMappingURL=chunk-BB5VXYXT.mjs.map

package/dist/js/chunks/{chunk-2RLBDFH4.mjs → chunk-BDATLH3H.mjs}

@@ -1,12 +1,12 @@
 import {
   Menu
-} from "./chunk-CSYWKEK3.mjs";
+} from "./chunk-DWA5UYLJ.mjs";
 import {
   Component
-} from "./chunk-CMGXGYUC.mjs";
+} from "./chunk-EB2V4OKL.mjs";
 import {
   Utils
-} from "./chunk-ZVLOUDIJ.mjs";
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/menubar.ts
 var _defaults = {
@@ -105,4 +105,4 @@ Menubar.key = "Expressive_Menubar";
 export {
   Menubar
 };
-//# sourceMappingURL=chunk-2RLBDFH4.mjs.map
+//# sourceMappingURL=chunk-BDATLH3H.mjs.map

package/dist/js/chunks/{chunk-2CS6TITK.mjs → chunk-CWMQOT4O.mjs}

@@ -1,14 +1,21 @@
 import {
   Component
-} from "./chunk-CMGXGYUC.mjs";
+} from "./chunk-EB2V4OKL.mjs";
 import {
   Utils,
+  afterFormReset,
   controllerFor
-} from "./chunk-ZVLOUDIJ.mjs";
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/colorPicker.ts
 var _defaults = {
-  onChange: null
+  onChange: null,
+  i18n: {
+    area: "Saturation and brightness",
+    value: (saturation, brightness) => `Saturation ${saturation}%, brightness ${brightness}%`,
+    hue: "Hue",
+    hex: "Hex color"
+  }
 };
 var clamp = (n) => Math.min(1, Math.max(0, n));
 function hueOf(r, g, b) {
@@ -87,8 +94,8 @@ var ColorPicker = class extends Component {
     };
     // Left and right change saturation, up and down brightness; see KEY_STEPS.
     this._onKeyDown = (e) => {
-      const steps = KEY_STEPS[e.key];
-      if (!steps || this.input.disabled) return;
+      const steps = this._keySteps(e);
+      if (!steps) return;
       e.preventDefault();
       const unit = e.shiftKey ? 0.1 : 0.01;
       const { s, v } = this._hsv;
@@ -99,6 +106,7 @@ var ColorPicker = class extends Component {
     this._hsv = toHsv(this.input.value) ?? this._hsv;
     this._build();
     this.input.addEventListener("input", this._onNativeInput, { signal: this._events.signal });
+    afterFormReset(this.input, this._onNativeInput, this._events.signal);
     this._render();
   }
   static get defaults() {
@@ -125,12 +133,13 @@ var ColorPicker = class extends Component {
   }
   _build() {
     const disabled = this.input.disabled;
+    const { i18n } = this.options;
     const area = document.createElement("div");
     area.className = "color-picker-area";
     const thumb = document.createElement("div");
     thumb.className = "color-picker-thumb";
     thumb.setAttribute("role", "slider");
-    thumb.setAttribute("aria-label", "Saturation and brightness");
+    thumb.setAttribute("aria-label", i18n.area);
     thumb.setAttribute("aria-valuemin", "0");
     thumb.setAttribute("aria-valuemax", "100");
     thumb.tabIndex = disabled ? -1 : 0;
@@ -141,12 +150,12 @@ var ColorPicker = class extends Component {
     hue.className = "color-picker-hue";
     hue.min = "0";
     hue.max = "359";
-    hue.setAttribute("aria-label", "Hue");
+    hue.setAttribute("aria-label", i18n.hue);
     hue.disabled = disabled;
     const hex = document.createElement("input");
     hex.type = "text";
     hex.className = "color-picker-hex";
-    hex.setAttribute("aria-label", "Hex color");
+    hex.setAttribute("aria-label", i18n.hex);
     hex.autocomplete = "off";
     hex.spellcheck = false;
     hex.maxLength = 7;
@@ -178,7 +187,7 @@ var ColorPicker = class extends Component {
     thumb.style.setProperty("--_color-picker-y", String(1 - v));
     thumb.style.setProperty("--_color-picker-color", hex);
     thumb.setAttribute("aria-valuenow", String(Math.round(s * 100)));
-    thumb.setAttribute("aria-valuetext", `Saturation ${Math.round(s * 100)}%, brightness ${Math.round(v * 100)}%`);
+    thumb.setAttribute("aria-valuetext", this.options.i18n.value(Math.round(s * 100), Math.round(v * 100)));
     this._hue.value = String(Math.round(h));
     this._hex.value = hex;
   }
@@ -210,10 +219,14 @@ var ColorPicker = class extends Component {
     const v = 1 - clamp((e.clientY - box.top) / box.height);
     this._set({ ...this._hsv, s, v }, commit);
   }
+  /** How a key moves the point. Shift is the larger step; Alt, Ctrl and Meta stay the browser's. */
+  _keySteps(e) {
+    return Utils.plainKey(e) && !this.input.disabled ? KEY_STEPS[e.key] : void 0;
+  }
 };
 ColorPicker.key = "Expressive_ColorPicker";
 
 export {
   ColorPicker
 };
-//# sourceMappingURL=chunk-2CS6TITK.mjs.map
+//# sourceMappingURL=chunk-CWMQOT4O.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/colorPicker.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\nimport { Utils, afterFormReset, controllerFor } from '../core/utils';\n\nexport interface ColorPickerI18n {\n  /** The name of the saturation and brightness area. */\n  area: string;\n  /** What the area reports as its value, from two whole percentages. */\n  value: (saturation: number, brightness: number) => string;\n  /** The name of the hue slider. */\n  hue: string;\n  /** The name of the hex field. */\n  hex: string;\n}\n\nexport interface ColorPickerOptions extends BaseOptions {\n  /**\n   * Called with the new `#rrggbb` value when a change is committed: the end\n   * of a drag, a key press, a hue release or a typed hex value.\n   * @default null\n   */\n  onChange: ((value: string) => void) | null;\n  /** The accessible names, for a page in another language. */\n  i18n: Partial<ColorPickerI18n>;\n}\n\nconst _defaults: ColorPickerOptions = {\n  onChange: null,\n  i18n: {\n    area: 'Saturation and brightness',\n    value: (saturation, brightness) => `Saturation ${saturation}%, brightness ${brightness}%`,\n    hue: 'Hue',\n    hex: 'Hex color'\n  }\n};\n\n/** Hue in degrees, saturation and value from 0 to 1. */\ninterface Hsv { h: number; s: number; v: number }\n\nconst clamp = (n: number) => Math.min(1, Math.max(0, n));\n\n// Hue in degrees of an RGB color with channels from 0 to 1.\nfunction hueOf(r: number, g: number, b: number): number {\n  const max = Math.max(r, g, b);\n  const range = max - Math.min(r, g, b);\n  if (!range) return 0;\n  const sector = max === r ? (g - b) / range : max === g ? (b - r) / range + 2 : (r - g) / range + 4;\n  return (sector * 60 + 360) % 360;\n}\n\nfunction toHsv(hex: string): Hsv | null {\n  const match = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());\n  if (!match) return null;\n  const digits = match[1].length === 3 ? [...match[1]].map((c) => c + c).join('') : match[1];\n  const [r, g, b] = [0, 2, 4].map((i) => parseInt(digits.slice(i, i + 2), 16) / 255);\n  const max = Math.max(r, g, b);\n  return { h: hueOf(r, g, b), s: max ? (max - Math.min(r, g, b)) / max : 0, v: max };\n}\n\nfunction toHex({ h, s, v }: Hsv): string {\n  const channel = (n: number) => {\n    const k = (n + h / 60) % 6;\n    return v - v * s * Math.max(0, Math.min(k, 4 - k, 1));\n  };\n  return '#' + [5, 3, 1].map((n) => Math.round(channel(n) * 255).toString(16).padStart(2, '0')).join('');\n}\n\n// Area keys as [saturation, brightness] steps of 1%; Shift takes ten of them.\n// Home and End overshoot so the clamp lands on the ends of saturation.\nconst KEY_STEPS: Record<string, [number, number]> = {\n  ArrowRight: [1, 0],\n  ArrowLeft: [-1, 0],\n  ArrowUp: [0, 1],\n  ArrowDown: [0, -1],\n  PageUp: [0, 10],\n  PageDown: [0, -10],\n  Home: [-100, 0],\n  End: [100, 0]\n};\n\n/**\n * Color picker. Enhances a `.color-picker` holding an `<input type=\"color\">`\n * with a saturation and brightness area, a hue slider and a hex field. The\n * native input stays the form value and the preview, so the browser's own\n * picker still opens from it, and it fires `input` and `change` as it would\n * if the person had used that picker.\n */\nexport class ColorPicker extends Component<ColorPickerOptions> {\n  /** The native color input that holds the value. */\n  input: HTMLInputElement | null;\n  private _hsv: Hsv = { h: 0, s: 0, v: 0 };\n  private _area: HTMLDivElement | null = null;\n  private _thumb: HTMLDivElement | null = null;\n  private _hue: HTMLInputElement | null = null;\n  private _hex: HTMLInputElement | null = null;\n  // Set while the picker writes the native input, so its own events are not\n  // read back as an outside change.\n  private _writing = false;\n\n  constructor(el: HTMLElement, options: Partial<ColorPickerOptions>) {\n    super(el, options);\n    this.input = el.querySelector<HTMLInputElement>(':scope > input[type=\"color\"]');\n    if (!this.input) return;\n    this._hsv = toHsv(this.input.value) ?? this._hsv;\n    this._build();\n    this.input.addEventListener('input', this._onNativeInput, { signal: this._events.signal });\n    // A form reset restores the native value without an input event.\n    afterFormReset(this.input, this._onNativeInput, this._events.signal);\n    this._render();\n  }\n\n  static get defaults(): ColorPickerOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_ColorPicker';\n\n  destroy() {\n    for (const part of [this._area, this._hue, this._hex]) part?.remove();\n    this._area = this._thumb = this._hue = this._hex = null;\n    this.el.style.removeProperty('--_color-picker-hue');\n    super.destroy();\n  }\n\n  /** The current color as `#rrggbb`. Setting it fires no events, as with a native input. */\n  get value(): string {\n    return this.input?.value ?? '';\n  }\n\n  set value(hex: string) {\n    const hsv = toHsv(hex);\n    if (!hsv || !this.input) return;\n    this._hsv = hsv;\n    this._writing = true;\n    this.input.value = toHex(hsv);\n    this._writing = false;\n    this._render();\n  }\n\n  private _build() {\n    const disabled = this.input!.disabled;\n    const { i18n } = this.options;\n\n    const area = document.createElement('div');\n    area.className = 'color-picker-area';\n    const thumb = document.createElement('div');\n    thumb.className = 'color-picker-thumb';\n    thumb.setAttribute('role', 'slider');\n    thumb.setAttribute('aria-label', i18n.area!);\n    thumb.setAttribute('aria-valuemin', '0');\n    thumb.setAttribute('aria-valuemax', '100');\n    thumb.tabIndex = disabled ? -1 : 0;\n    if (disabled) thumb.setAttribute('aria-disabled', 'true');\n    area.append(thumb);\n\n    const hue = document.createElement('input');\n    hue.type = 'range';\n    hue.className = 'color-picker-hue';\n    hue.min = '0';\n    hue.max = '359';\n    hue.setAttribute('aria-label', i18n.hue!);\n    hue.disabled = disabled;\n\n    const hex = document.createElement('input');\n    hex.type = 'text';\n    hex.className = 'color-picker-hex';\n    hex.setAttribute('aria-label', i18n.hex!);\n    hex.autocomplete = 'off';\n    hex.spellcheck = false;\n    hex.maxLength = 7;\n    hex.disabled = disabled;\n\n    // Area and hue before the native input, the hex field after it.\n    this.input!.before(area, hue);\n    this.input!.after(hex);\n    this._area = area;\n    this._thumb = thumb;\n    this._hue = hue;\n    this._hex = hex;\n\n    area.addEventListener('pointerdown', this._onPointerDown);\n    thumb.addEventListener('keydown', this._onKeyDown);\n    hue.addEventListener('input', () => this._set({ ...this._hsv, h: Number(hue.value) }, false));\n    hue.addEventListener('change', () => this._commit());\n    hex.addEventListener('change', this._onHex);\n    hex.addEventListener('keydown', (e) => {\n      // Enter in a text field would submit the form; take it as \"apply\".\n      if (e.key === 'Enter' && !Utils.isComposing(e)) {\n        e.preventDefault();\n        this._onHex();\n      }\n    });\n  }\n\n  private _render() {\n    const { h, s, v } = this._hsv;\n    const hex = toHex(this._hsv);\n    const thumb = this._thumb!;\n    this.el.style.setProperty('--_color-picker-hue', String(Math.round(h)));\n    thumb.style.setProperty('--_color-picker-x', String(s));\n    thumb.style.setProperty('--_color-picker-y', String(1 - v));\n    thumb.style.setProperty('--_color-picker-color', hex);\n    thumb.setAttribute('aria-valuenow', String(Math.round(s * 100)));\n    thumb.setAttribute('aria-valuetext', this.options.i18n.value!(Math.round(s * 100), Math.round(v * 100)));\n    this._hue!.value = String(Math.round(h));\n    // The hex field only commits on change, so rewriting it never fights typing.\n    this._hex!.value = hex;\n  }\n\n  // Store the color, write it to the native input and fire `input`; with\n  // `commit`, also fire `change` and onChange.\n  // Only reached from the built controls, which a disabled input disables.\n  private _set(hsv: Hsv, commit = true) {\n    const input = this.input!;\n    this._hsv = hsv;\n    const hex = toHex(hsv);\n    const changed = input.value !== hex;\n    this._writing = true;\n    input.value = hex;\n    if (changed) input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n    this._writing = false;\n    this._render();\n    if (commit) this._commit();\n  }\n\n  private _commit() {\n    if (!this.input) return;\n    this._writing = true;\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n    this._writing = false;\n    this.options.onChange?.(this.input.value);\n  }\n\n  // The person used the browser's own picker on the native input.\n  private _onNativeInput = () => {\n    if (this._writing || !this.input) return;\n    const hsv = toHsv(this.input.value);\n    if (!hsv) return;\n    this._hsv = hsv;\n    this._render();\n  };\n\n  private _onHex = () => {\n    const hsv = toHsv(this._hex!.value);\n    if (hsv && toHex(hsv) !== this.input!.value) this._set(hsv);\n    // An invalid entry goes back to the current color.\n    this._hex!.value = toHex(this._hsv);\n  };\n\n  private _fromPoint(e: PointerEvent, commit: boolean) {\n    const box = this._area!.getBoundingClientRect();\n    const s = clamp((e.clientX - box.left) / box.width);\n    const v = 1 - clamp((e.clientY - box.top) / box.height);\n    this._set({ ...this._hsv, s, v }, commit);\n  }\n\n  private _onPointerDown = (e: PointerEvent) => {\n    if (e.button || this.input!.disabled) return;\n    const area = this._area!;\n    e.preventDefault();\n    this._thumb!.focus();\n    area.setPointerCapture(e.pointerId);\n    this._fromPoint(e, false);\n    const move = (ev: PointerEvent) => this._fromPoint(ev, false);\n    const drag = controllerFor(area);\n    const up = (ev: PointerEvent) => {\n      drag.abort();\n      this._fromPoint(ev, true);\n    };\n    const { signal } = drag;\n    area.addEventListener('pointermove', move, { signal });\n    area.addEventListener('pointerup', up, { signal });\n    area.addEventListener('pointercancel', up, { signal });\n  };\n\n  // Left and right change saturation, up and down brightness; see KEY_STEPS.\n  private _onKeyDown = (e: KeyboardEvent) => {\n    const steps = this._keySteps(e);\n    if (!steps) return;\n    e.preventDefault();\n    const unit = e.shiftKey ? 0.1 : 0.01;\n    const { s, v } = this._hsv;\n    this._set({ ...this._hsv, s: clamp(s + steps[0] * unit), v: clamp(v + steps[1] * unit) });\n  };\n\n  /** How a key moves the point. Shift is the larger step; Alt, Ctrl and Meta stay the browser's. */\n  private _keySteps(e: KeyboardEvent) {\n    return Utils.plainKey(e) && !this.input!.disabled ? KEY_STEPS[e.key] : undefined;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/{chunk-ZKWUWBUB.mjs → chunk-CY2CTOVM.mjs}

@@ -1,6 +1,6 @@
 import {
   Utils
-} from "./chunk-ZVLOUDIJ.mjs";
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/plugins/dockedDisplayPlugin.ts
 var _defaults = {
@@ -78,4 +78,4 @@ var DockedDisplayPlugin = class {
 export {
   DockedDisplayPlugin
 };
-//# sourceMappingURL=chunk-ZKWUWBUB.mjs.map
+//# sourceMappingURL=chunk-CY2CTOVM.mjs.map

package/dist/js/chunks/{chunk-CSYWKEK3.mjs → chunk-DWA5UYLJ.mjs}

@@ -1,11 +1,11 @@
 import {
   Component
-} from "./chunk-CMGXGYUC.mjs";
+} from "./chunk-EB2V4OKL.mjs";
 import {
   Utils,
   controllerFor,
   restoreAttribute
-} from "./chunk-ZVLOUDIJ.mjs";
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/menu.ts
 var parentOf = (el) => el.parentElement ?? (el.getRootNode().host || null);
@@ -76,6 +76,10 @@ var _Menu = class _Menu extends Component {
     this._contextPoint = null;
     /** What had focus when a context menu opened; focus goes back there. */
     this._contextReturn = null;
+    /** Each attribute setup wrote, with the value it had before, for destroy(). */
+    this._originalAttributes = /* @__PURE__ */ new Map();
+    /** Where the menu was before it moved next to the trigger. */
+    this._originalPlace = { parent: null, next: null };
     this._handleContextMenu = (e) => {
       if (e.defaultPrevented) {
         this.close();
@@ -115,14 +119,13 @@ var _Menu = class _Menu extends Component {
       this._openedByHover = true;
       this.open();
     };
+    // A hover menu stays open while the pointer moves onto its content or onto
+    // the trigger of an open menu. relatedTarget is null when the pointer
+    // leaves the window entirely.
     this._handleMouseLeave = (e) => {
       const toEl = e.relatedTarget;
-      if (!toEl) {
-        this.close();
-        return;
-      }
-      const leaveToActiveMenuTrigger = toEl.closest(".menu-trigger")?.["Expressive_Menu"]?.isOpen;
-      if (!leaveToActiveMenuTrigger && !this.menuEl?.contains(toEl)) this.close();
+      if (toEl && (this.menuEl?.contains(toEl) || _Menu._inOpenTrigger(toEl))) return;
+      this.close();
     };
     this._handleDocumentClick = (e) => {
       const path = e.composedPath();
@@ -183,7 +186,7 @@ var _Menu = class _Menu extends Component {
       const target = e.target;
       this._menuClickTargets.set(e, target);
       const li = target.closest("li");
-      if (li?.matches('.disabled, [aria-disabled="true"]')) {
+      if (li?.matches('.disabled, [aria-disabled="true"], .divider, .gap, .label, .optgroup')) {
         e.preventDefault();
         e.stopPropagation();
         return;
@@ -373,10 +376,10 @@ var _Menu = class _Menu extends Component {
     this.focusedIndex = -1;
     this.filterQuery = [];
     if (!this.options.contextMenu) {
-      this.el.ariaExpanded = "false";
-      if (!this.el.hasAttribute("aria-haspopup")) this.el.setAttribute("aria-haspopup", "menu");
+      this._setAttribute(this.el, "aria-expanded", "false");
+      if (!this.el.hasAttribute("aria-haspopup")) this._setAttribute(this.el, "aria-haspopup", "menu");
       if (this.id && !this.el.hasAttribute("aria-controls"))
-        this.el.setAttribute("aria-controls", this.id);
+        this._setAttribute(this.el, "aria-controls", this.id);
     }
     if (!this.menuEl) {
       console.warn(`Menu skipped: no element matches target "${this.id}".`, el);
@@ -400,6 +403,7 @@ var _Menu = class _Menu extends Component {
     clearTimeout(this.filterTimeout);
     this._resetMenuStyles();
     this._restoreInert();
+    this._restoreSetup();
     this._events.abort();
     this._openEvents?.abort();
     const index = _Menu._menus.indexOf(this);
@@ -440,6 +444,10 @@ var _Menu = class _Menu extends Component {
     }
     if (this.options.contextMenu) document.addEventListener("contextmenu", this._handleDocumentContextMenu, { signal });
   }
+  static _inOpenTrigger(el) {
+    const trigger = el.closest(".menu-trigger");
+    return Boolean(trigger && _Menu.getInstance(trigger)?.isOpen);
+  }
   _activateItem(li) {
     const checked = this._toggleChecked(li);
     if (!this._notify("select", this.options.onItemClick, { args: [li], detail: { item: li } })) return;
@@ -485,27 +493,27 @@ var _Menu = class _Menu extends Component {
   }
   _setupAccessibility() {
     if (!this.menuEl) return;
-    if (!this.menuEl.hasAttribute("role")) this.menuEl.setAttribute("role", "menu");
+    if (!this.menuEl.hasAttribute("role")) this._setAttribute(this.menuEl, "role", "menu");
     const menus = [this.menuEl, ...this.menuEl.querySelectorAll("menu")];
     menus.forEach((menu) => {
-      if (!menu.hasAttribute("role")) menu.setAttribute("role", "menu");
+      if (!menu.hasAttribute("role")) this._setAttribute(menu, "role", "menu");
       if (menu.getAttribute("role") !== "menu") return;
       menu.querySelectorAll(ROWS).forEach((li) => {
         if (li.classList.contains("divider")) {
-          if (!li.hasAttribute("role")) li.setAttribute("role", "separator");
+          if (!li.hasAttribute("role")) this._setAttribute(li, "role", "separator");
           return;
         }
         if (li.classList.contains("gap")) {
-          li.setAttribute("aria-hidden", "true");
+          this._setAttribute(li, "aria-hidden", "true");
           return;
         }
         if (li.classList.contains("label") || li.classList.contains("optgroup")) {
-          if (!li.hasAttribute("role")) li.setAttribute("role", "presentation");
+          if (!li.hasAttribute("role")) this._setAttribute(li, "role", "presentation");
           return;
         }
-        if (!li.hasAttribute("role")) li.setAttribute("role", "menuitem");
+        if (!li.hasAttribute("role")) this._setAttribute(li, "role", "menuitem");
         if (li.classList.contains("disabled") && !li.hasAttribute("aria-disabled")) {
-          li.setAttribute("aria-disabled", "true");
+          this._setAttribute(li, "aria-disabled", "true");
         }
       });
     });
@@ -522,8 +530,8 @@ var _Menu = class _Menu extends Component {
     this.menuEl?.querySelectorAll("li").forEach((li) => {
       if (!li.querySelector(":scope > menu")) return;
       const trigger = li.querySelector(":scope > a, :scope > button, :scope > span") ?? li;
-      trigger.setAttribute("aria-haspopup", "menu");
-      trigger.setAttribute("aria-expanded", "false");
+      this._setAttribute(trigger, "aria-haspopup", "menu");
+      this._setAttribute(trigger, "aria-expanded", "false");
     });
   }
   _toggleSubmenu(li) {
@@ -583,7 +591,7 @@ var _Menu = class _Menu extends Component {
   }
   _resetMenuStyles() {
     if (!this.menuEl) return;
-    this.menuEl.hidePopover();
+    if (this.menuEl.popover) this.menuEl.hidePopover();
     this._resetMenuPositioningStyles();
     this.menuEl.style.transform = "";
     this.menuEl.style.opacity = "";
@@ -598,19 +606,42 @@ var _Menu = class _Menu extends Component {
     this._stopReanchoring();
   }
   _moveMenuToElement() {
+    this._originalPlace = { parent: this.menuEl.parentNode, next: this.menuEl.nextSibling };
     if (this.options.container) this.options.container.append(this.menuEl);
     else this.el.after(this.menuEl);
   }
+  /** Keeps the value an attribute had before setup first changed it, which destroy() puts back. */
+  _keepAttribute(el, name) {
+    const saved = this._originalAttributes.get(el) ?? /* @__PURE__ */ new Map();
+    if (!saved.has(name)) saved.set(name, el.getAttribute(name));
+    this._originalAttributes.set(el, saved);
+  }
+  _setAttribute(el, name, value) {
+    this._keepAttribute(el, name);
+    el.setAttribute(name, value);
+  }
+  /**
+   * Puts back the attributes setup wrote and the menu where it was, so a
+   * destroyed trigger is no longer announced as a menu button. The place is
+   * only used while it is still in the page.
+   */
+  _restoreSetup() {
+    this._originalAttributes.forEach((saved, el) => saved.forEach((value, name) => restoreAttribute(el, name, value)));
+    this._originalAttributes.clear();
+    const { parent, next } = this._originalPlace;
+    if (parent?.isConnected) parent.insertBefore(this.menuEl, next?.parentNode === parent ? next : null);
+  }
   _makeMenuFocusable() {
     if (!this.menuEl) return;
+    this._keepAttribute(this.menuEl, "popover");
     this.menuEl.popover = "manual";
-    this.menuEl.tabIndex = -1;
+    this._setAttribute(this.menuEl, "tabindex", "-1");
     this.menuEl.querySelectorAll(":scope li").forEach((el) => {
       if (el.matches('.divider, .gap, .label, .optgroup, [role="none"]')) {
-        el.setAttribute("tabindex", "-1");
+        this._setAttribute(el, "tabindex", "-1");
         return;
       }
-      if (!el.getAttribute("tabindex")) el.setAttribute("tabindex", "0");
+      if (!el.getAttribute("tabindex")) this._setAttribute(el, "tabindex", "0");
     });
   }
   /**
@@ -862,7 +893,7 @@ var _Menu = class _Menu extends Component {
   }
   // A trigger whose target never resolved has no menu to open.
   get _canOpen() {
-    return !this.isOpen && !!this.menuEl && this.el["Expressive_Menu"] === this;
+    return !this.isOpen && !!this.menuEl && _Menu.getInstance(this.el) === this;
   }
 };
 _Menu._menus = [];
@@ -872,4 +903,4 @@ var Menu = _Menu;
 export {
   Menu
 };
-//# sourceMappingURL=chunk-CSYWKEK3.mjs.map
+//# sourceMappingURL=chunk-DWA5UYLJ.mjs.map