@expressivecss/expressive 0.14.1 → 0.16.0

package/dist/fonts/LICENSE-noto-sans-hebrew

@@ -0,0 +1,93 @@
+Copyright 2024 The Noto Project Authors (https://github.com/notofonts/hebrew)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/fonts/LICENSE-noto-sans-thai

@@ -0,0 +1,93 @@
+Copyright 2022 The Noto Project Authors (https://github.com/notofonts/thai)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/js/chunks/chunk-2CS6TITK.mjs

@@ -0,0 +1,219 @@
+import {
+  Component
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils,
+  controllerFor
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/components/colorPicker.ts
+var _defaults = {
+  onChange: null
+};
+var clamp = (n) => Math.min(1, Math.max(0, n));
+function hueOf(r, g, b) {
+  const max = Math.max(r, g, b);
+  const range = max - Math.min(r, g, b);
+  if (!range) return 0;
+  const sector = max === r ? (g - b) / range : max === g ? (b - r) / range + 2 : (r - g) / range + 4;
+  return (sector * 60 + 360) % 360;
+}
+function toHsv(hex) {
+  const match = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!match) return null;
+  const digits = match[1].length === 3 ? [...match[1]].map((c) => c + c).join("") : match[1];
+  const [r, g, b] = [0, 2, 4].map((i) => parseInt(digits.slice(i, i + 2), 16) / 255);
+  const max = Math.max(r, g, b);
+  return { h: hueOf(r, g, b), s: max ? (max - Math.min(r, g, b)) / max : 0, v: max };
+}
+function toHex({ h, s, v }) {
+  const channel = (n) => {
+    const k = (n + h / 60) % 6;
+    return v - v * s * Math.max(0, Math.min(k, 4 - k, 1));
+  };
+  return "#" + [5, 3, 1].map((n) => Math.round(channel(n) * 255).toString(16).padStart(2, "0")).join("");
+}
+var KEY_STEPS = {
+  ArrowRight: [1, 0],
+  ArrowLeft: [-1, 0],
+  ArrowUp: [0, 1],
+  ArrowDown: [0, -1],
+  PageUp: [0, 10],
+  PageDown: [0, -10],
+  Home: [-100, 0],
+  End: [100, 0]
+};
+var ColorPicker = class extends Component {
+  constructor(el, options) {
+    super(el, options);
+    this._hsv = { h: 0, s: 0, v: 0 };
+    this._area = null;
+    this._thumb = null;
+    this._hue = null;
+    this._hex = null;
+    // Set while the picker writes the native input, so its own events are not
+    // read back as an outside change.
+    this._writing = false;
+    // The person used the browser's own picker on the native input.
+    this._onNativeInput = () => {
+      if (this._writing || !this.input) return;
+      const hsv = toHsv(this.input.value);
+      if (!hsv) return;
+      this._hsv = hsv;
+      this._render();
+    };
+    this._onHex = () => {
+      const hsv = toHsv(this._hex.value);
+      if (hsv && toHex(hsv) !== this.input.value) this._set(hsv);
+      this._hex.value = toHex(this._hsv);
+    };
+    this._onPointerDown = (e) => {
+      if (e.button || this.input.disabled) return;
+      const area = this._area;
+      e.preventDefault();
+      this._thumb.focus();
+      area.setPointerCapture(e.pointerId);
+      this._fromPoint(e, false);
+      const move = (ev) => this._fromPoint(ev, false);
+      const drag = controllerFor(area);
+      const up = (ev) => {
+        drag.abort();
+        this._fromPoint(ev, true);
+      };
+      const { signal } = drag;
+      area.addEventListener("pointermove", move, { signal });
+      area.addEventListener("pointerup", up, { signal });
+      area.addEventListener("pointercancel", up, { signal });
+    };
+    // 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;
+      e.preventDefault();
+      const unit = e.shiftKey ? 0.1 : 0.01;
+      const { s, v } = this._hsv;
+      this._set({ ...this._hsv, s: clamp(s + steps[0] * unit), v: clamp(v + steps[1] * unit) });
+    };
+    this.input = el.querySelector(':scope > input[type="color"]');
+    if (!this.input) return;
+    this._hsv = toHsv(this.input.value) ?? this._hsv;
+    this._build();
+    this.input.addEventListener("input", this._onNativeInput, { signal: this._events.signal });
+    this._render();
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  destroy() {
+    for (const part of [this._area, this._hue, this._hex]) part?.remove();
+    this._area = this._thumb = this._hue = this._hex = null;
+    this.el.style.removeProperty("--_color-picker-hue");
+    super.destroy();
+  }
+  /** The current color as `#rrggbb`. Setting it fires no events, as with a native input. */
+  get value() {
+    return this.input?.value ?? "";
+  }
+  set value(hex) {
+    const hsv = toHsv(hex);
+    if (!hsv || !this.input) return;
+    this._hsv = hsv;
+    this._writing = true;
+    this.input.value = toHex(hsv);
+    this._writing = false;
+    this._render();
+  }
+  _build() {
+    const disabled = this.input.disabled;
+    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-valuemin", "0");
+    thumb.setAttribute("aria-valuemax", "100");
+    thumb.tabIndex = disabled ? -1 : 0;
+    if (disabled) thumb.setAttribute("aria-disabled", "true");
+    area.append(thumb);
+    const hue = document.createElement("input");
+    hue.type = "range";
+    hue.className = "color-picker-hue";
+    hue.min = "0";
+    hue.max = "359";
+    hue.setAttribute("aria-label", "Hue");
+    hue.disabled = disabled;
+    const hex = document.createElement("input");
+    hex.type = "text";
+    hex.className = "color-picker-hex";
+    hex.setAttribute("aria-label", "Hex color");
+    hex.autocomplete = "off";
+    hex.spellcheck = false;
+    hex.maxLength = 7;
+    hex.disabled = disabled;
+    this.input.before(area, hue);
+    this.input.after(hex);
+    this._area = area;
+    this._thumb = thumb;
+    this._hue = hue;
+    this._hex = hex;
+    area.addEventListener("pointerdown", this._onPointerDown);
+    thumb.addEventListener("keydown", this._onKeyDown);
+    hue.addEventListener("input", () => this._set({ ...this._hsv, h: Number(hue.value) }, false));
+    hue.addEventListener("change", () => this._commit());
+    hex.addEventListener("change", this._onHex);
+    hex.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !Utils.isComposing(e)) {
+        e.preventDefault();
+        this._onHex();
+      }
+    });
+  }
+  _render() {
+    const { h, s, v } = this._hsv;
+    const hex = toHex(this._hsv);
+    const thumb = this._thumb;
+    this.el.style.setProperty("--_color-picker-hue", String(Math.round(h)));
+    thumb.style.setProperty("--_color-picker-x", String(s));
+    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)}%`);
+    this._hue.value = String(Math.round(h));
+    this._hex.value = hex;
+  }
+  // Store the color, write it to the native input and fire `input`; with
+  // `commit`, also fire `change` and onChange.
+  // Only reached from the built controls, which a disabled input disables.
+  _set(hsv, commit = true) {
+    const input = this.input;
+    this._hsv = hsv;
+    const hex = toHex(hsv);
+    const changed = input.value !== hex;
+    this._writing = true;
+    input.value = hex;
+    if (changed) input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this._writing = false;
+    this._render();
+    if (commit) this._commit();
+  }
+  _commit() {
+    if (!this.input) return;
+    this._writing = true;
+    this.input.dispatchEvent(new Event("change", { bubbles: true }));
+    this._writing = false;
+    this.options.onChange?.(this.input.value);
+  }
+  _fromPoint(e, commit) {
+    const box = this._area.getBoundingClientRect();
+    const s = clamp((e.clientX - box.left) / box.width);
+    const v = 1 - clamp((e.clientY - box.top) / box.height);
+    this._set({ ...this._hsv, s, v }, commit);
+  }
+};
+ColorPicker.key = "Expressive_ColorPicker";
+
+export {
+  ColorPicker
+};
+//# sourceMappingURL=chunk-2CS6TITK.mjs.map

package/dist/js/chunks/chunk-2CS6TITK.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/colorPicker.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\nimport { Utils, controllerFor } from '../core/utils';\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}\n\nconst _defaults: ColorPickerOptions = {\n  onChange: null\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    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\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', 'Saturation and brightness');\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', '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', 'Hex color');\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', `Saturation ${Math.round(s * 100)}%, brightness ${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 = KEY_STEPS[e.key];\n    if (!steps || this.input!.disabled) 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"],
+  "mappings": "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",
+  "names": []
+}