@esri/calcite-components 3.0.0-next.99 → 3.0.0

package/dist/components/calcite-color-picker/customElement.js

@@ -1,56 +1,72 @@
-import { c as ie } from "../../chunks/runtime.js";
+import { c as se } from "../../chunks/runtime.js";
 import { ref as v } from "lit-html/directives/ref.js";
-import { repeat as ae } from "lit-html/directives/repeat.js";
-import { keyed as D } from "lit-html/directives/keyed.js";
-import { H as p, D as m, e as K, f as I, n as O, h as S, p as H, C as b, g as P, j as $, k as le, l as se, m as U, O as y, R as x, q as n, o as z, t as ne, s as j, u as N, v as re, c as R, S as W } from "../../chunks/utils4.js";
-import { throttle as ce } from "lodash-es";
-import { html as u, nothing as A } from "lit";
-import { LitElement as he, createEvent as _, safeClassMap as c, safeStyleMap as k } from "@arcgis/lumina";
-import { i as B, h as de, g as pe } from "../../chunks/dom.js";
-import { u as ue, I as Ce } from "../../chunks/interactive.js";
-import { i as fe } from "../../chunks/key.js";
-import { c as ge, s as me, a as ve } from "../../chunks/loadable.js";
-import { r as V, c as Se, a as be } from "../../chunks/math.js";
+import { repeat as le } from "lit-html/directives/repeat.js";
+import { keyed as I } from "lit-html/directives/keyed.js";
+import { D as g, e as E, S as $, g as ne, f as re, n as O, h as S, p as K, C as b, j as P, k as x, l as ce, m as H, O as y, R as A, H as p, q as n, o as U, t as he, s as j, u as W, v as de, c as R, w as N } from "../../chunks/utils4.js";
+import { throttle as _ } from "lodash-es";
+import { html as u, nothing as D } from "lit";
+import { LitElement as pe, createEvent as B, safeClassMap as c, safeStyleMap as k } from "@arcgis/lumina";
+import { i as V, h as ue, g as Ce } from "../../chunks/dom.js";
+import { u as fe, I as me } from "../../chunks/interactive.js";
+import { i as ge } from "../../chunks/key.js";
+import { c as ve } from "../../chunks/loadable.js";
+import { c as Se, r as X, a as be } from "../../chunks/math.js";
 import { u as ye } from "../../chunks/useT9n.js";
-import { css as we } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.99
-*/
-const $e = we`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-color-picker-spacing: 8px}:host([scale=s]) .container{inline-size:198px}:host([scale=s]) .saved-colors{gap:.25rem;grid-template-columns:repeat(auto-fill,20px)}:host([scale=m]){--calcite-color-picker-spacing: 12px}:host([scale=m]) .container{inline-size:238px}:host([scale=l]){--calcite-color-picker-spacing: 16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .container{inline-size:302px}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill,32px)}:host([scale=l]) .control-section{flex-wrap:nowrap;align-items:baseline;flex-wrap:wrap}:host([scale=l]) .color-hex-options{display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}.container{background-color:var(--calcite-color-foreground-1);display:inline-block;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}.scope:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:6px}.hex-and-channels-group{inline-size:100%}.hex-and-channels-group,.control-section{display:flex;flex-direction:row;flex-wrap:wrap}.section{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}.section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}.sliders{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing);gap:var(--calcite-spacing-xxs)}.preview-and-sliders{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}.color-hex-options,.section--split{flex-grow:1}.header{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-color-text-1)}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex}.channel{flex-grow:1}.channel[data-channel-index="3"]{margin-inline-start:-1px;min-inline-size:81px}:host([scale=s]) .channel[data-channel-index="3"]{min-inline-size:68px}:host([scale=l]) .channel[data-channel-index="3"]{min-inline-size:88px}.saved-colors{display:grid;gap:.5rem;padding-block-start:var(--calcite-color-picker-spacing);grid-template-columns:repeat(auto-fill,24px)}.saved-colors-buttons{display:flex}.saved-color{outline-offset:0;outline-color:transparent;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.saved-color:hover{transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-color-border-2);outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`, xe = 16;
-class Ae extends he {
+import { c as we } from "../../chunks/observers.js";
+import { css as $e } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
+const xe = $e`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal);inline-size:var(--calcite-internal-color-picker-min-width);min-inline-size:var(--calcite-internal-color-picker-min-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-color-picker-min-width: 200px;--calcite-color-picker-spacing: 8px}:host([scale=s]) .saved-colors{gap:.25rem;grid-template-columns:repeat(auto-fill,20px)}:host([scale=m]){--calcite-internal-color-picker-min-width: 240px;--calcite-color-picker-spacing: 12px}:host([scale=l]){--calcite-internal-color-picker-min-width: 304px;--calcite-color-picker-spacing: 16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill,32px)}:host([scale=l]) .control-section{display:flex;flex-direction:column;flex-wrap:wrap;align-items:baseline}:host([scale=l]) .color-hex-options{inline-size:100%;display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}.container{background-color:var(--calcite-color-foreground-1);display:flex;flex-direction:column;block-size:min-content;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}.scope:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:6px}.hex-and-channels-group{display:flex;inline-size:100%;flex-direction:column;flex-wrap:wrap}.section{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}.section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}.sliders{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing);gap:var(--calcite-spacing-xxs)}.preview-and-sliders{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}.color-hex-options,.section--split{flex-grow:1}.header{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-color-text-1)}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex}.channel{flex-grow:1}.channel[data-channel-index="3"]{margin-inline-start:-1px;min-inline-size:81px}:host([scale=s]) .channel[data-channel-index="3"]{min-inline-size:68px}:host([scale=l]) .channel[data-channel-index="3"]{min-inline-size:88px}.saved-colors{display:grid;gap:.5rem;padding-block-start:var(--calcite-color-picker-spacing);grid-template-columns:repeat(auto-fill,24px)}.saved-colors-buttons{display:flex}.saved-color{outline-offset:0;outline-color:transparent;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.saved-color:hover{transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-color-border-2);outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`, q = 16;
+class Ae extends pe {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.captureColorFieldColor = (e, t, o = !0) => {
-      const { dimensions: { colorField: { height: i, width: a } } } = this, l = Math.round(p.s / a * e), s = Math.round(p.v / i * (i - t));
-      this.internalColorSet(this.baseColorFieldColor.hsv().saturationv(l).value(s), o);
-    }, this._color = m, this.drawColorControls = ce((e = "all") => {
+    super(), this._color = g, this.internalColorUpdateContext = null, this.isActiveChannelInputEmpty = !1, this.mode = E.HEX, this.resizeObserver = we("resize", (e) => this.resizeCanvas(e)), this.shiftKeyChannelAdjustment = 0, this.upOrDownArrowKeyTracker = null, this._valueWasSet = !1, this.channelMode = "rgb", this.channels = this.toChannels(g), this.staticDimensions = $.m, this.savedColors = [], this.allowEmpty = !1, this.alphaChannel = !1, this.channelsDisabled = !1, this.clearable = !1, this.disabled = !1, this.format = "auto", this.hexDisabled = !1, this.messages = ye({ blocking: !0 }), this.savedDisabled = !1, this.scale = "m", this.calciteColorPickerChange = B({ cancelable: !1 }), this.calciteColorPickerInput = B({ cancelable: !1 }), this.captureColorFieldColor = (e, t, i = !0) => {
+      const { width: o, height: a } = this.dynamicDimensions.colorField, s = Math.round(p.s / o * e), l = Math.round(p.v / a * (a - t));
+      this.internalColorSet(this.baseColorFieldColor.hsv().saturationv(s).value(l), i);
+    }, this.drawColorControls = _((e = "all") => {
       (e === "all" || e === "color-field") && this.colorFieldRenderingContext && this.drawColorField(), (e === "all" || e === "hue-slider") && this.hueSliderRenderingContext && this.drawHueSlider(), this.alphaChannel && (e === "all" || e === "opacity-slider") && this.opacitySliderRenderingContext && this.drawOpacitySlider();
-    }, xe), this.globalPointerMoveHandler = (e) => {
-      const { activeCanvasInfo: t, el: o } = this;
-      if (!o.isConnected || !t)
+    }, q), this.globalPointerMoveHandler = (e) => {
+      const { activeCanvasInfo: t, el: i } = this;
+      if (!i.isConnected || !t)
         return;
-      const { context: i, bounds: a } = t;
-      let l, s;
+      const { context: o, bounds: a } = t;
+      let s, l;
       const { clientX: r, clientY: h } = e;
-      i.canvas.matches(":hover") ? (l = r - a.x, s = h - a.y) : (r < a.x + a.width && r > a.x ? l = r - a.x : r < a.x ? l = 0 : l = a.width, h < a.y + a.height && h > a.y ? s = h - a.y : h < a.y ? s = 0 : s = a.height), i === this.colorFieldRenderingContext ? this.captureColorFieldColor(l, s, !1) : i === this.hueSliderRenderingContext ? this.captureHueSliderColor(l) : i === this.opacitySliderRenderingContext && this.captureOpacitySliderValue(l);
+      o.canvas.matches(":hover") ? (s = r - a.x, l = h - a.y) : (r < a.x + a.width && r > a.x ? s = r - a.x : r < a.x ? s = 0 : s = a.width, h < a.y + a.height && h > a.y ? l = h - a.y : h < a.y ? l = 0 : l = a.height), o === this.colorFieldRenderingContext ? this.captureColorFieldColor(s, l, !1) : o === this.hueSliderRenderingContext ? this.captureHueSliderColor(s) : o === this.opacitySliderRenderingContext && this.captureOpacitySliderValue(s);
     }, this.globalPointerUpHandler = (e) => {
-      if (!B(e))
+      if (!V(e))
         return;
       const t = this.activeCanvasInfo;
       this.activeCanvasInfo = null, this.drawColorControls(), t && this.calciteColorPickerChange.emit();
-    }, this.internalColorUpdateContext = null, this.isActiveChannelInputEmpty = !1, this.mode = K.HEX, this.shiftKeyChannelAdjustment = 0, this.upOrDownArrowKeyTracker = null, this._valueWasSet = !1, this.channelMode = "rgb", this.channels = this.toChannels(m), this.dimensions = I.m, this.savedColors = [], this.allowEmpty = !1, this.alphaChannel = !1, this.channelsDisabled = !1, this.clearable = !1, this.disabled = !1, this.format = "auto", this.hexDisabled = !1, this.messages = ye({ blocking: !0 }), this.savedDisabled = !1, this.scale = "m", this.calciteColorPickerChange = _({ cancelable: !1 }), this.calciteColorPickerInput = _({ cancelable: !1 }), this.listen("keydown", this.handleChannelKeyUpOrDown, { capture: !0 }), this.listen("keyup", this.handleChannelKeyUpOrDown, { capture: !0 });
+    }, this.resizeCanvas = _((e) => {
+      if (!this.hasUpdated)
+        return;
+      const [t] = e, i = Math.floor(t.contentBoxSize[0].inlineSize);
+      this.dynamicDimensions.colorField.width !== i && (this.updateDynamicDimensions(i), this.updateCanvasSize(), this.drawColorControls());
+    }, q), this.updateDynamicDimensions = (e) => {
+      const t = {
+        width: ne(e, this.staticDimensions, this.alphaChannel),
+        height: this.staticDimensions.slider.height
+      };
+      this.dynamicDimensions = {
+        colorField: re(e),
+        slider: t
+      };
+    }, this.listen("keydown", this.handleChannelKeyUpOrDown, { capture: !0 }), this.listen("keyup", this.handleChannelKeyUpOrDown, { capture: !0 });
   }
   static {
-    this.properties = { channelMode: 16, channels: 16, colorFieldScopeLeft: 16, colorFieldScopeTop: 16, dimensions: 16, hueScopeLeft: 16, opacityScopeLeft: 16, savedColors: 16, scopeOrientation: 16, allowEmpty: 7, alphaChannel: 5, channelsDisabled: 5, clearable: 7, color: 0, disabled: 7, format: 3, hexDisabled: 5, messageOverrides: 0, numberingSystem: 3, savedDisabled: 7, scale: 3, storageId: 3, value: 1 };
+    this.properties = { channelMode: 16, channels: 16, colorFieldScopeLeft: 16, colorFieldScopeTop: 16, staticDimensions: 16, hueScopeLeft: 16, opacityScopeLeft: 16, savedColors: 16, scopeOrientation: 16, allowEmpty: 7, alphaChannel: 5, channelsDisabled: 5, clearable: 7, color: 0, disabled: 7, format: 3, hexDisabled: 5, messageOverrides: 0, numberingSystem: 3, savedDisabled: 7, scale: 3, storageId: 3, value: 1 };
   }
   static {
-    this.styles = $e;
+    this.styles = xe;
   }
   get baseColorFieldColor() {
-    return this.color || this.previousColor || m;
+    return this.color || this.previousColor || g;
+  }
+  get effectiveSliderWidth() {
+    return this.dynamicDimensions.slider.width;
   }
   /**
    * Internal prop for advanced use-cases.
@@ -85,38 +101,44 @@ class Ae extends he {
   // #region Public Methods
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await ge(this), de(this.el);
+    await ve(this), ue(this.el);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.observeResize();
   }
   async load() {
-    this._valueWasSet || (this._value ??= O(S(m, this.alphaChannel))), me(this), this.handleAllowEmptyOrClearableChange(), this.handleAlphaChannelDimensionsChange();
-    const { isClearable: e, color: t, format: o, value: i } = this, a = e && !i, l = H(i), s = a || o === "auto" && l || o === l, r = a ? null : s ? b(i) : t;
-    s || this.showIncompatibleColorWarning(i, o), this.setMode(o, !1), this.internalColorSet(r, !1, "initial"), this.updateDimensions(this.scale);
+    this._valueWasSet || (this._value ??= O(S(g, this.alphaChannel))), this.handleAllowEmptyOrClearableChange();
+    const { isClearable: e, color: t, format: i, value: o } = this, a = e && !o, s = K(o), l = a || i === "auto" && s || i === s, r = a ? null : l ? b(o) : t;
+    l || this.showIncompatibleColorWarning(o, i), this.setMode(i, !1), this.internalColorSet(r, !1, "initial"), this.updateStaticDimensions(this.scale), this.updateDynamicDimensions($[this.scale].minWidth);
     const h = `${P}${this.storageId}`;
     this.storageId && localStorage.getItem(h) && (this.savedColors = JSON.parse(localStorage.getItem(h)));
   }
   willUpdate(e) {
-    (e.has("allowEmpty") && (this.hasUpdated || this.allowEmpty !== !1) || e.has("clearable") && (this.hasUpdated || this.clearable !== !1)) && this.handleAllowEmptyOrClearableChange(), e.has("alphaChannel") && (this.hasUpdated || this.alphaChannel !== !1) && this.handleAlphaChannelChange(this.alphaChannel), (e.has("alphaChannel") && (this.hasUpdated || this.alphaChannel !== !1) || e.has("dimensions") && (this.hasUpdated || this.dimensions !== I.m)) && this.handleAlphaChannelDimensionsChange(), (e.has("alphaChannel") && (this.hasUpdated || this.alphaChannel !== !1) || e.has("format") && (this.hasUpdated || this.format !== "auto")) && this.handleFormatOrAlphaChannelChange(), e.has("scale") && (this.hasUpdated || this.scale !== "m") && this.handleScaleChange(this.scale);
+    (e.has("allowEmpty") && (this.hasUpdated || this.allowEmpty !== !1) || e.has("clearable") && (this.hasUpdated || this.clearable !== !1)) && this.handleAllowEmptyOrClearableChange(), e.has("alphaChannel") && (this.hasUpdated || this.alphaChannel !== !1) && this.handleAlphaChannelChange(this.alphaChannel), this.hasUpdated && (e.has("alphaChannel") && this.alphaChannel !== !1 || e.has("staticDimensions") && this.staticDimensions !== $.m) && this.handleAlphaChannelDimensionsChange(), (e.has("alphaChannel") && (this.hasUpdated || this.alphaChannel !== !1) || e.has("format") && (this.hasUpdated || this.format !== "auto")) && this.handleFormatOrAlphaChannelChange(), e.has("scale") && (this.hasUpdated || this.scale !== "m") && this.handleScaleChange(this.scale);
   }
   updated() {
-    ue(this);
+    fe(this);
   }
   loaded() {
-    ve(this);
+    this.handleAlphaChannelDimensionsChange();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("pointermove", this.globalPointerMoveHandler), window.removeEventListener("pointerup", this.globalPointerUpHandler);
+    super.disconnectedCallback(), window.removeEventListener("pointermove", this.globalPointerMoveHandler), window.removeEventListener("pointerup", this.globalPointerUpHandler), this.resizeObserver?.disconnect();
   }
   // #endregion
   // #region Private Methods
+  observeResize() {
+    this.resizeObserver?.observe(this.el);
+  }
   handleAllowEmptyOrClearableChange() {
     this.isClearable = this.clearable || this.allowEmpty;
   }
   handleAlphaChannelChange(e) {
     const { format: t } = this;
-    e && t !== "auto" && !$(t) && (console.warn(`ignoring alphaChannel as the current format (${t}) does not support alpha`), this.alphaChannel = !1);
+    e && t !== "auto" && !x(t) && (console.warn(`ignoring alphaChannel as the current format (${t}) does not support alpha`), this.alphaChannel = !1);
   }
   handleAlphaChannelDimensionsChange() {
-    this.effectiveSliderWidth = le(this.dimensions, this.alphaChannel), this.drawColorControls();
+    this.drawColorControls();
   }
   handleColorChange(e, t) {
     this.drawColorControls(), this.updateChannelsFromColor(e), this.previousColor = t;
@@ -125,82 +147,82 @@ class Ae extends he {
     this.setMode(this.format), this.internalColorSet(this.color, !1, "internal");
   }
   handleScaleChange(e = "m") {
-    this.updateDimensions(e), this.updateCanvasSize("all"), this.drawColorControls();
+    this.updateStaticDimensions(e), this.updateCanvasSize(), this.drawColorControls();
   }
   handleValueChange(e, t) {
-    const { isClearable: o, format: i } = this, a = !o || e;
-    let l = !1;
+    const { isClearable: i, format: o } = this, a = !i || e;
+    let s = !1;
     if (a) {
-      const d = H(e);
-      if (!d || i !== "auto" && d !== i) {
-        this.showIncompatibleColorWarning(e, i), this._value = t;
+      const d = K(e);
+      if (!d || o !== "auto" && d !== o) {
+        this.showIncompatibleColorWarning(e, o), this._value = t;
         return;
       }
-      l = this.mode !== d, this.setMode(d, this.internalColorUpdateContext === null);
+      s = this.mode !== d, this.setMode(d, this.internalColorUpdateContext === null);
     }
-    const s = this.activeCanvasInfo;
+    const l = this.activeCanvasInfo;
     if (this.internalColorUpdateContext === "initial")
       return;
     if (this.internalColorUpdateContext === "user-interaction") {
-      this.calciteColorPickerInput.emit(), s || this.calciteColorPickerChange.emit();
+      this.calciteColorPickerInput.emit(), l || this.calciteColorPickerChange.emit();
       return;
     }
-    const r = o && !e ? null : b(e != null && typeof e == "object" && $(this.mode) ? se(e) : e), h = !U(r, this.color);
-    (l || h) && this.internalColorSet(r, this.alphaChannel && !(this.mode.endsWith("a") || this.mode.endsWith("a-css")), "internal");
+    const r = i && !e ? null : b(e != null && typeof e == "object" && x(this.mode) ? ce(e) : e), h = !H(r, this.color);
+    (s || h) && this.internalColorSet(r, this.alphaChannel && !(this.mode.endsWith("a") || this.mode.endsWith("a-css")) || this.internalColorUpdateContext === "internal", "internal");
   }
   handleTabActivate(e) {
     this.channelMode = e.currentTarget.getAttribute("data-color-mode"), this.updateChannelsFromColor(this.color);
   }
   handleColorFieldScopeKeyDown(e) {
-    const { key: t } = e, o = {
+    const { key: t } = e, i = {
       ArrowUp: { x: 0, y: -10 },
       ArrowRight: { x: 10, y: 0 },
       ArrowDown: { x: 0, y: 10 },
       ArrowLeft: { x: -10, y: 0 }
     };
-    o[t] && (e.preventDefault(), this.scopeOrientation = t === "ArrowDown" || t === "ArrowUp" ? "vertical" : "horizontal", this.captureColorFieldColor(this.colorFieldScopeLeft + o[t].x || 0, this.colorFieldScopeTop + o[t].y || 0, !1));
+    i[t] && (e.preventDefault(), this.scopeOrientation = t === "ArrowDown" || t === "ArrowUp" ? "vertical" : "horizontal", this.captureColorFieldColor(this.colorFieldScopeLeft + i[t].x || 0, this.colorFieldScopeTop + i[t].y || 0, !1));
   }
   handleHueScopeKeyDown(e) {
-    const t = e.shiftKey ? 10 : 1, { key: o } = e, i = {
+    const t = e.shiftKey ? 10 : 1, { key: i } = e, o = {
       ArrowUp: 1,
       ArrowRight: 1,
       ArrowDown: -1,
       ArrowLeft: -1
     };
-    if (i[o]) {
+    if (o[i]) {
       e.preventDefault();
-      const a = i[o] * t, l = this.baseColorFieldColor.hue(), s = this.baseColorFieldColor.hue(l + a);
-      this.internalColorSet(s, !1);
+      const a = o[i] * t, s = this.baseColorFieldColor.hue(), l = this.baseColorFieldColor.hue(s + a);
+      this.internalColorSet(l, !1);
     }
   }
   handleHexInputChange(e) {
     e.stopPropagation();
-    const { isClearable: t, color: o } = this, a = e.target.value;
+    const { isClearable: t, color: i } = this, a = e.target.value;
     if (t && !a) {
       this.internalColorSet(null);
       return;
     }
-    const l = o && O(S(o, $(this.mode)));
-    a !== l && this.internalColorSet(b(a));
+    const s = i && O(S(i, x(this.mode)));
+    a !== s && this.internalColorSet(b(a));
   }
   handleSavedColorSelect(e) {
     const t = e.currentTarget;
     this.internalColorSet(b(t.color));
   }
   handleChannelInput(e) {
-    const t = e.currentTarget, o = Number(t.getAttribute("data-channel-index")), a = o === 3 ? y.max : this.channelMode === "rgb" ? x[Object.keys(x)[o]] : p[Object.keys(p)[o]];
-    let l;
+    const t = e.currentTarget, i = Number(t.getAttribute("data-channel-index")), a = i === 3 ? y.max : this.channelMode === "rgb" ? A[Object.keys(A)[i]] : p[Object.keys(p)[i]];
+    let s;
     if (!t.value)
-      l = "", this.isActiveChannelInputEmpty = !0, this.upOrDownArrowKeyTracker = null;
+      s = "", this.isActiveChannelInputEmpty = !0, this.upOrDownArrowKeyTracker = null;
     else {
       const r = Number(t.value) + this.shiftKeyChannelAdjustment;
-      l = Se(r, 0, a).toString();
+      s = Se(r, 0, a).toString();
     }
-    t.value = l, l !== "" && this.shiftKeyChannelAdjustment !== 0 ? this.handleChannelChange(e) : l !== "" && this.handleChannelChange(e);
+    t.value = s, s !== "" && this.shiftKeyChannelAdjustment !== 0 ? this.handleChannelChange(e) : s !== "" && this.handleChannelChange(e);
   }
   handleChannelBlur(e) {
-    const t = e.currentTarget, o = Number(t.getAttribute("data-channel-index")), i = [...this.channels];
-    !t.value && !this.isClearable && (t.value = i[o]?.toString());
+    const t = e.currentTarget, i = Number(t.getAttribute("data-channel-index")), o = [...this.channels];
+    !t.value && !this.isClearable && (t.value = o[i]?.toString());
   }
   handleChannelFocus(e) {
     e.currentTarget.selectText();
@@ -211,30 +233,30 @@ class Ae extends he {
     const { key: t } = e;
     if (t !== "ArrowUp" && t !== "ArrowDown" || !e.composedPath().some((a) => a.classList?.contains(n.channel)))
       return;
-    const { shiftKey: o } = e;
+    const { shiftKey: i } = e;
     if (e.preventDefault(), !this.color) {
       this.internalColorSet(this.previousColor), e.stopPropagation();
       return;
     }
-    const i = 9;
-    this.shiftKeyChannelAdjustment = t === "ArrowUp" && o ? i : t === "ArrowDown" && o ? -9 : 0, t === "ArrowUp" && (this.upOrDownArrowKeyTracker = "up"), t === "ArrowDown" && (this.upOrDownArrowKeyTracker = "down");
+    const o = 9;
+    this.shiftKeyChannelAdjustment = t === "ArrowUp" && i ? o : t === "ArrowDown" && i ? -9 : 0, t === "ArrowUp" && (this.upOrDownArrowKeyTracker = "up"), t === "ArrowDown" && (this.upOrDownArrowKeyTracker = "down");
   }
   getChannelInputLimit(e) {
-    return this.channelMode === "rgb" ? x[Object.keys(x)[e]] : p[Object.keys(p)[e]];
+    return this.channelMode === "rgb" ? A[Object.keys(A)[e]] : p[Object.keys(p)[e]];
   }
   handleChannelChange(e) {
-    const t = e.currentTarget, o = Number(t.getAttribute("data-channel-index")), i = [...this.channels];
+    const t = e.currentTarget, i = Number(t.getAttribute("data-channel-index")), o = [...this.channels];
     if (this.isClearable && !t.value) {
       this.channels = [null, null, null, null], this.internalColorSet(null);
       return;
     }
-    const l = o === 3;
-    this.isActiveChannelInputEmpty && this.upOrDownArrowKeyTracker && (t.value = this.upOrDownArrowKeyTracker === "up" ? (i[o] + 1 <= this.getChannelInputLimit(o) ? i[o] + 1 : this.getChannelInputLimit(o)).toString() : (i[o] - 1 >= 0 ? i[o] - 1 : 0).toString(), this.isActiveChannelInputEmpty = !1, this.upOrDownArrowKeyTracker = null);
-    const s = t.value ? Number(t.value) : i[o];
-    i[o] = l ? z(s) : s, this.updateColorFromChannels(i);
+    const s = i === 3;
+    this.isActiveChannelInputEmpty && this.upOrDownArrowKeyTracker && (t.value = this.upOrDownArrowKeyTracker === "up" ? (o[i] + 1 <= this.getChannelInputLimit(i) ? o[i] + 1 : this.getChannelInputLimit(i)).toString() : (o[i] - 1 >= 0 ? o[i] - 1 : 0).toString(), this.isActiveChannelInputEmpty = !1, this.upOrDownArrowKeyTracker = null);
+    const l = t.value ? Number(t.value) : o[i];
+    o[i] = s ? U(l) : l, this.updateColorFromChannels(o);
   }
   handleSavedColorKeyDown(e) {
-    fe(e.key) && (e.preventDefault(), this.handleSavedColorSelect(e));
+    ge(e.key) && (e.preventDefault(), this.handleSavedColorSelect(e));
   }
   handleColorFieldPointerDown(e) {
     this.handleCanvasControlPointerDown(e, this.colorFieldRenderingContext, this.captureColorFieldColor, this.colorFieldScopeNode);
@@ -250,13 +272,13 @@ class Ae extends he {
   handleOpacitySliderPointerDown(e) {
     this.handleCanvasControlPointerDown(e, this.opacitySliderRenderingContext, this.captureOpacitySliderValue, this.opacityScopeNode);
   }
-  handleCanvasControlPointerDown(e, t, o, i) {
-    B(e) && (window.addEventListener("pointermove", this.globalPointerMoveHandler), window.addEventListener("pointerup", this.globalPointerUpHandler, {
+  handleCanvasControlPointerDown(e, t, i, o) {
+    V(e) && (window.addEventListener("pointermove", this.globalPointerMoveHandler), window.addEventListener("pointerup", this.globalPointerUpHandler, {
       once: !0
     }), this.activeCanvasInfo = {
       context: t,
       bounds: t.canvas.getBoundingClientRect()
-    }, o.call(this, e.offsetX, e.offsetY), this.focusScope(i));
+    }, i.call(this, e.offsetX, e.offsetY), this.focusScope(o));
   }
   storeColorFieldScope(e) {
     this.colorFieldScopeNode = e;
@@ -271,91 +293,91 @@ class Ae extends he {
     console.warn(`ignoring color value (${e}) as it is not compatible with the current format (${t})`);
   }
   setMode(e, t = !0) {
-    const o = e === "auto" ? this.mode : e;
-    this.mode = this.ensureCompatibleMode(o, t);
+    const i = e === "auto" ? this.mode : e;
+    this.mode = this.ensureCompatibleMode(i, t);
   }
   ensureCompatibleMode(e, t) {
-    const { alphaChannel: o } = this, i = $(e);
-    if (o && !i) {
-      const a = ne(e);
+    const { alphaChannel: i } = this, o = x(e);
+    if (i && !o) {
+      const a = he(e);
       return t && console.warn(`setting format to (${a}) as the provided one (${e}) does not support alpha`), a;
     }
-    if (!o && i) {
+    if (!i && o) {
       const a = j(e);
       return t && console.warn(`setting format to (${a}) as the provided one (${e}) does not support alpha`), a;
     }
     return e;
   }
   captureHueSliderColor(e) {
-    const t = N / this.effectiveSliderWidth * e;
+    const t = W / this.effectiveSliderWidth * e;
     this.internalColorSet(this.baseColorFieldColor.hue(t), !1);
   }
   captureOpacitySliderValue(e) {
-    const t = z(y.max / this.effectiveSliderWidth * e);
+    const t = U(y.max / this.effectiveSliderWidth * e);
     this.internalColorSet(this.baseColorFieldColor.alpha(t), !1);
   }
-  internalColorSet(e, t = !0, o = "user-interaction") {
-    t && U(e, this.color) || (this.internalColorUpdateContext = o, this.color = e, this.value = this.toValue(e), this.internalColorUpdateContext = null);
+  internalColorSet(e, t = !0, i = "user-interaction") {
+    t && H(e, this.color) || (this.internalColorUpdateContext = i, this.color = e, this.value = this.toValue(e), this.internalColorUpdateContext = null);
   }
   toValue(e, t = this.mode) {
     if (!e)
       return null;
     if (t.includes("hex")) {
-      const a = t === K.HEXA;
+      const a = t === E.HEXA;
       return O(S(e.round(), a), a);
     }
     if (t.includes("-css")) {
       const a = e[t.replace("-css", "").replace("a", "")]().round().string();
       if ((t.endsWith("a") || t.endsWith("a-css")) && e.alpha() === 1) {
-        const s = a.slice(0, 3), r = a.slice(4, -1);
-        return `${s}a(${r}, ${e.alpha()})`;
+        const l = a.slice(0, 3), r = a.slice(4, -1);
+        return `${l}a(${r}, ${e.alpha()})`;
       }
       return a;
     }
-    const i = (
+    const o = (
       /* Color() does not support hsva, hsla nor rgba, so we use the non-alpha mode */
       e[j(t)]().round().object()
     );
-    return t.endsWith("a") ? re(i) : i;
+    return t.endsWith("a") ? de(o) : o;
   }
   getSliderCapSpacing() {
-    const { dimensions: { slider: { height: e }, thumb: { radius: t } } } = this;
+    const { staticDimensions: { slider: { height: e }, thumb: { radius: t } } } = this;
     return t * 2 - e;
   }
-  updateDimensions(e = "m") {
-    this.dimensions = I[e];
+  updateStaticDimensions(e = "m") {
+    this.staticDimensions = $[e];
   }
   deleteColor() {
     const e = S(this.color, this.alphaChannel);
     if (!(this.savedColors.indexOf(e) > -1))
       return;
-    const o = this.savedColors.filter((a) => a !== e);
-    this.savedColors = o;
-    const i = `${P}${this.storageId}`;
-    this.storageId && localStorage.setItem(i, JSON.stringify(o));
+    const i = this.savedColors.filter((a) => a !== e);
+    this.savedColors = i;
+    const o = `${P}${this.storageId}`;
+    this.storageId && localStorage.setItem(o, JSON.stringify(i));
   }
   saveColor() {
     const e = S(this.color, this.alphaChannel);
     if (this.savedColors.indexOf(e) > -1)
       return;
-    const o = [...this.savedColors, e];
-    this.savedColors = o;
-    const i = `${P}${this.storageId}`;
-    this.storageId && localStorage.setItem(i, JSON.stringify(o));
+    const i = [...this.savedColors, e];
+    this.savedColors = i;
+    const o = `${P}${this.storageId}`;
+    this.storageId && localStorage.setItem(o, JSON.stringify(i));
   }
   drawColorField() {
-    const e = this.colorFieldRenderingContext, { dimensions: { colorField: { height: t, width: o } } } = this;
-    e.fillStyle = this.baseColorFieldColor.hsv().saturationv(100).value(100).alpha(1).string(), e.fillRect(0, 0, o, t);
-    const i = e.createLinearGradient(0, 0, o, 0);
-    i.addColorStop(0, "rgba(255,255,255,1)"), i.addColorStop(1, "rgba(255,255,255,0)"), e.fillStyle = i, e.fillRect(0, 0, o, t);
-    const a = e.createLinearGradient(0, 0, 0, t);
-    a.addColorStop(0, "rgba(0,0,0,0)"), a.addColorStop(1, "rgba(0,0,0,1)"), e.fillStyle = a, e.fillRect(0, 0, o, t), this.drawActiveColorFieldColor();
-  }
-  setCanvasContextSize(e, { height: t, width: o }) {
+    const e = this.colorFieldRenderingContext, { width: t, height: i } = this.dynamicDimensions.colorField;
+    e.fillStyle = this.baseColorFieldColor.hsv().saturationv(100).value(100).alpha(1).string(), e.fillRect(0, 0, t, i);
+    const o = e.createLinearGradient(0, 0, t, 0);
+    o.addColorStop(0, "rgba(255,255,255,1)"), o.addColorStop(1, "rgba(255,255,255,0)"), e.fillStyle = o, e.fillRect(0, 0, t, i);
+    const a = e.createLinearGradient(0, 0, 0, i);
+    a.addColorStop(0, "rgba(0,0,0,0)"), a.addColorStop(1, "rgba(0,0,0,1)"), e.fillStyle = a, e.fillRect(0, 0, t, i), this.drawActiveColorFieldColor();
+  }
+  setCanvasContextSize(e, { height: t, width: i }) {
     if (!e)
       return;
-    const i = window.devicePixelRatio || 1;
-    e.width = o * i, e.height = t * i, e.style.height = `${t}px`, e.style.width = `${o}px`, e.getContext("2d").scale(i, i);
+    const o = window.devicePixelRatio || 1;
+    e.width = i * o, e.height = t * o, e.style.height = `${t}px`, e.style.width = `${i}px`, e.getContext("2d").scale(o, o);
   }
   initColorField(e) {
     e && (this.colorFieldRenderingContext = e.getContext("2d"), this.updateCanvasSize("color-field"), this.drawColorControls());
@@ -367,11 +389,11 @@ class Ae extends he {
     e && (this.opacitySliderRenderingContext = e.getContext("2d"), this.updateCanvasSize("opacity-slider"), this.drawOpacitySlider());
   }
   updateCanvasSize(e = "all") {
-    const { dimensions: t } = this;
+    const { dynamicDimensions: t, staticDimensions: i } = this;
     (e === "all" || e === "color-field") && this.setCanvasContextSize(this.colorFieldRenderingContext?.canvas, t.colorField);
     const o = {
       width: this.effectiveSliderWidth,
-      height: t.slider.height + (t.thumb.radius - t.slider.height / 2) * 2
+      height: i.slider.height + (i.thumb.radius - t.slider.height / 2) * 2
     };
     (e === "all" || e === "hue-slider") && this.setCanvasContextSize(this.hueSliderRenderingContext?.canvas, o), (e === "all" || e === "opacity-slider") && this.setCanvasContextSize(this.opacitySliderRenderingContext?.canvas, o);
   }
@@ -379,32 +401,32 @@ class Ae extends he {
     const { color: e } = this;
     if (!e)
       return;
-    const t = e.hsv(), { dimensions: { colorField: { height: o, width: i }, thumb: { radius: a } } } = this, l = t.saturationv() / (p.s / i), s = o - t.value() / (p.v / o);
+    const t = e.hsv(), { staticDimensions: { thumb: { radius: i } } } = this, { width: o, height: a } = this.dynamicDimensions.colorField, s = t.saturationv() / (p.s / o), l = a - t.value() / (p.v / a);
     requestAnimationFrame(() => {
-      this.colorFieldScopeLeft = l, this.colorFieldScopeTop = s;
-    }), this.drawThumb(this.colorFieldRenderingContext, a, l, s, t, !1);
+      this.colorFieldScopeLeft = s, this.colorFieldScopeTop = l;
+    }), this.drawThumb(this.colorFieldRenderingContext, i, s, l, t, !1);
   }
-  drawThumb(e, t, o, i, a, l) {
+  drawThumb(e, t, i, o, a, s) {
     const r = 2 * Math.PI, h = 1;
-    if (e.beginPath(), e.arc(o, i, t, 0, r), e.fillStyle = "#fff", e.fill(), e.strokeStyle = "rgba(0,0,0,0.3)", e.lineWidth = h, e.stroke(), l && a.alpha() < 1) {
+    if (e.beginPath(), e.arc(i, o, t, 0, r), e.fillStyle = "#fff", e.fill(), e.strokeStyle = "rgba(0,0,0,0.3)", e.lineWidth = h, e.stroke(), s && a.alpha() < 1) {
       const C = e.createPattern(this.getCheckeredBackgroundPattern(), "repeat");
-      e.beginPath(), e.arc(o, i, t - 3, 0, r), e.fillStyle = C, e.fill();
+      e.beginPath(), e.arc(i, o, t - 3, 0, r), e.fillStyle = C, e.fill();
     }
-    e.globalCompositeOperation = "source-atop", e.beginPath(), e.arc(o, i, t - 3, 0, r);
-    const d = l ? a.alpha() : 1;
+    e.globalCompositeOperation = "source-atop", e.beginPath(), e.arc(i, o, t - 3, 0, r);
+    const d = s ? a.alpha() : 1;
     e.fillStyle = a.rgb().alpha(d).string(), e.fill(), e.globalCompositeOperation = "source-over";
   }
   drawActiveHueSliderColor() {
     const { color: e } = this;
     if (!e)
       return;
-    const t = e.hsv().saturationv(100).value(100), { dimensions: { thumb: { radius: o } } } = this, i = this.effectiveSliderWidth, a = t.hue() / (N / i), l = o, s = this.getSliderBoundX(a, i, o);
+    const t = e.hsv().saturationv(100).value(100), { staticDimensions: { thumb: { radius: i } } } = this, o = this.effectiveSliderWidth, a = t.hue() / (W / o), s = i, l = this.getSliderBoundX(a, o, i);
     requestAnimationFrame(() => {
-      this.hueScopeLeft = s;
-    }), this.drawThumb(this.hueSliderRenderingContext, o, s, l, t, !1);
+      this.hueScopeLeft = l;
+    }), this.drawThumb(this.hueSliderRenderingContext, i, l, s, t, !1);
   }
   drawHueSlider() {
-    const e = this.hueSliderRenderingContext, { dimensions: { slider: { height: t }, thumb: { radius: o } } } = this, i = 0, a = o - t / 2, l = this.effectiveSliderWidth, s = e.createLinearGradient(0, 0, l, 0), r = [
+    const e = this.hueSliderRenderingContext, { staticDimensions: { slider: { height: t }, thumb: { radius: i } } } = this, o = 0, a = i - t / 2, s = this.effectiveSliderWidth, l = e.createLinearGradient(0, 0, s, 0), r = [
       "red",
       "yellow",
       "lime",
@@ -415,20 +437,20 @@ class Ae extends he {
     ], h = 1 / (r.length - 1);
     let d = 0;
     r.forEach((C) => {
-      s.addColorStop(d, b(C).string()), d += h;
-    }), e.clearRect(0, 0, l, t + this.getSliderCapSpacing() * 2), this.drawSliderPath(e, t, l, i, a), e.fillStyle = s, e.fill(), e.strokeStyle = "rgba(0,0,0,0.3)", e.lineWidth = 1, e.stroke(), this.drawActiveHueSliderColor();
+      l.addColorStop(d, b(C).string()), d += h;
+    }), e.clearRect(0, 0, s, t + this.getSliderCapSpacing() * 2), this.drawSliderPath(e, t, s, o, a), e.fillStyle = l, e.fill(), e.strokeStyle = "rgba(0,0,0,0.3)", e.lineWidth = 1, e.stroke(), this.drawActiveHueSliderColor();
   }
   drawOpacitySlider() {
-    const e = this.opacitySliderRenderingContext, { baseColorFieldColor: t, dimensions: { slider: { height: o }, thumb: { radius: i } } } = this, a = 0, l = i - o / 2, s = this.effectiveSliderWidth;
-    e.clearRect(0, 0, s, o + this.getSliderCapSpacing() * 2);
-    const r = e.createLinearGradient(0, l, s, 0), h = t.rgb().alpha(0), d = t.rgb().alpha(0.5), C = t.rgb().alpha(1);
-    r.addColorStop(0, h.string()), r.addColorStop(0.5, d.string()), r.addColorStop(1, C.string()), this.drawSliderPath(e, o, s, a, l);
+    const e = this.opacitySliderRenderingContext, { baseColorFieldColor: t, staticDimensions: { slider: { height: i }, thumb: { radius: o } } } = this, a = 0, s = o - i / 2, l = this.effectiveSliderWidth;
+    e.clearRect(0, 0, l, i + this.getSliderCapSpacing() * 2);
+    const r = e.createLinearGradient(0, s, l, 0), h = t.rgb().alpha(0), d = t.rgb().alpha(0.5), C = t.rgb().alpha(1);
+    r.addColorStop(0, h.string()), r.addColorStop(0.5, d.string()), r.addColorStop(1, C.string()), this.drawSliderPath(e, i, l, a, s);
     const f = e.createPattern(this.getCheckeredBackgroundPattern(), "repeat");
     e.fillStyle = f, e.fill(), e.fillStyle = r, e.fill(), e.strokeStyle = "rgba(0,0,0,0.3)", e.lineWidth = 1, e.stroke(), this.drawActiveOpacitySliderColor();
   }
-  drawSliderPath(e, t, o, i, a) {
-    const l = t / 2 + 1;
-    e.beginPath(), e.moveTo(i + l, a), e.lineTo(i + o - l, a), e.quadraticCurveTo(i + o, a, i + o, a + l), e.lineTo(i + o, a + t - l), e.quadraticCurveTo(i + o, a + t, i + o - l, a + t), e.lineTo(i + l, a + t), e.quadraticCurveTo(i, a + t, i, a + t - l), e.lineTo(i, a + l), e.quadraticCurveTo(i, a, i + l, a), e.closePath();
+  drawSliderPath(e, t, i, o, a) {
+    const s = t / 2 + 1;
+    e.beginPath(), e.moveTo(o + s, a), e.lineTo(o + i - s, a), e.quadraticCurveTo(o + i, a, o + i, a + s), e.lineTo(o + i, a + t - s), e.quadraticCurveTo(o + i, a + t, o + i - s, a + t), e.lineTo(o + s, a + t), e.quadraticCurveTo(o, a + t, o, a + t - s), e.lineTo(o, a + s), e.quadraticCurveTo(o, a, o + s, a), e.closePath();
   }
   getCheckeredBackgroundPattern() {
     if (this.checkerPattern)
@@ -442,29 +464,29 @@ class Ae extends he {
     const { color: e } = this;
     if (!e)
       return;
-    const t = e, { dimensions: { thumb: { radius: o } } } = this, i = this.effectiveSliderWidth, a = R(t.alpha()) / (y.max / i), l = o, s = this.getSliderBoundX(a, i, o);
+    const t = e, { staticDimensions: { thumb: { radius: i } } } = this, o = this.effectiveSliderWidth, a = R(t.alpha()) / (y.max / o), s = i, l = this.getSliderBoundX(a, o, i);
     requestAnimationFrame(() => {
-      this.opacityScopeLeft = s;
-    }), this.drawThumb(this.opacitySliderRenderingContext, o, s, l, t, !0);
+      this.opacityScopeLeft = l;
+    }), this.drawThumb(this.opacitySliderRenderingContext, i, l, s, t, !0);
   }
-  getSliderBoundX(e, t, o) {
-    const i = be(e, t, o);
-    return i === 0 ? e : i === -1 ? V(e, 0, t, o, o * 2) : V(e, 0, t, t - o * 2, t - o);
+  getSliderBoundX(e, t, i) {
+    const o = be(e, t, i);
+    return o === 0 ? e : o === -1 ? X(e, 0, t, i, i * 2) : X(e, 0, t, t - i * 2, t - i);
   }
   storeOpacityScope(e) {
     this.opacityScopeNode = e;
   }
   handleOpacityScopeKeyDown(e) {
-    const t = e.shiftKey ? 10 : 1, { key: o } = e, i = {
+    const t = e.shiftKey ? 10 : 1, { key: i } = e, o = {
       ArrowUp: 0.01,
       ArrowRight: 0.01,
       ArrowDown: -0.01,
       ArrowLeft: -0.01
     };
-    if (i[o]) {
+    if (o[i]) {
       e.preventDefault();
-      const a = i[o] * t, l = this.baseColorFieldColor.alpha(), s = this.baseColorFieldColor.alpha(l + a);
-      this.internalColorSet(s, !1);
+      const a = o[i] * t, s = this.baseColorFieldColor.alpha(), l = this.baseColorFieldColor.alpha(s + a);
+      this.internalColorSet(l, !1);
     }
   }
   updateColorFromChannels(e) {
@@ -474,51 +496,51 @@ class Ae extends he {
     this.channels = e ? this.toChannels(e) : [null, null, null, null];
   }
   toChannels(e) {
-    const { channelMode: t } = this, o = e[t]().array().map((i, a) => a === 3 ? i : Math.floor(i));
-    return o.length === 3 && o.push(1), o;
+    const { channelMode: t } = this, i = e[t]().array().map((o, a) => a === 3 ? o : Math.floor(o));
+    return i.length === 3 && i.push(1), i;
   }
   getAdjustedScopePosition(e, t) {
-    return [e - W / 2, t - W / 2];
+    return [e - N / 2, t - N / 2];
   }
   // #endregion
   // #region Rendering
   render() {
-    const { channelsDisabled: e, color: t, colorFieldScopeLeft: o, colorFieldScopeTop: i, dimensions: { thumb: { radius: a } }, hexDisabled: l, hueScopeLeft: s, messages: r, alphaChannel: h, opacityScopeLeft: d, savedColors: C, savedDisabled: f, scale: g, scopeOrientation: w } = this, L = this.effectiveSliderWidth, M = t ? S(t, h) : null, X = a, q = s ?? L * m.hue() / p.h, G = a, Y = d ?? L * R(m.alpha()) / y.max, E = t === void 0, T = w === "vertical", [J, Z] = this.getAdjustedScopePosition(o, i), [Q, ee] = this.getAdjustedScopePosition(q, X), [te, oe] = this.getAdjustedScopePosition(Y, G);
-    return Ce({ disabled: this.disabled, children: u`<div class=${c(n.container)}><div class=${c(n.controlAndScope)}><canvas class=${c(n.colorField)} @pointerdown=${this.handleColorFieldPointerDown} ${v(this.initColorField)}></canvas><div .ariaLabel=${T ? r.value : r.saturation} .ariaValueMax=${T ? p.v : p.s} aria-valuemin=0 .ariaValueNow=${(T ? t?.saturationv() : t?.value()) || "0"} class=${c({ [n.scope]: !0, [n.colorFieldScope]: !0 })} @keydown=${this.handleColorFieldScopeKeyDown} role=slider style=${k({
-      top: `${Z || 0}px`,
-      left: `${J || 0}px`
-    })} tabindex=0 ${v(this.storeColorFieldScope)}></div></div><div class=${c(n.previewAndSliders)}><calcite-color-picker-swatch class=${c(n.preview)} .color=${M} .scale=${this.alphaChannel ? "l" : this.scale}></calcite-color-picker-swatch><div class=${c(n.sliders)}><div class=${c(n.controlAndScope)}><canvas class=${c({ [n.slider]: !0, [n.hueSlider]: !0 })} @pointerdown=${this.handleHueSliderPointerDown} ${v(this.initHueSlider)}></canvas><div .ariaLabel=${r.hue} .ariaValueMax=${p.h} aria-valuemin=0 .ariaValueNow=${t?.round().hue() || m.round().hue()} class=${c({ [n.scope]: !0, [n.hueScope]: !0 })} @keydown=${this.handleHueScopeKeyDown} role=slider style=${k({
-      top: `${ee}px`,
-      left: `${Q}px`
-    })} tabindex=0 ${v(this.storeHueScope)}></div></div>${h ? u`<div class=${c(n.controlAndScope)}><canvas class=${c({ [n.slider]: !0, [n.opacitySlider]: !0 })} @pointerdown=${this.handleOpacitySliderPointerDown} ${v(this.initOpacitySlider)}></canvas><div .ariaLabel=${r.opacity} .ariaValueMax=${y.max} .ariaValueMin=${y.min} .ariaValueNow=${(t || m).round().alpha()} class=${c({ [n.scope]: !0, [n.opacityScope]: !0 })} @keydown=${this.handleOpacityScopeKeyDown} role=slider style=${k({
-      top: `${oe}px`,
+    const { channelsDisabled: e, color: t, colorFieldScopeLeft: i, colorFieldScopeTop: o, staticDimensions: { thumb: { radius: a } }, hexDisabled: s, hueScopeLeft: l, messages: r, alphaChannel: h, opacityScopeLeft: d, savedColors: C, savedDisabled: f, scale: m, scopeOrientation: w } = this, M = this.effectiveSliderWidth, z = t ? S(t, h) : null, G = a, Y = l ?? M * g.hue() / p.h, J = a, Z = d ?? M * R(g.alpha()) / y.max, L = t === void 0, F = w === "vertical", [Q, ee] = this.getAdjustedScopePosition(i, o), [te, ie] = this.getAdjustedScopePosition(Y, G), [oe, ae] = this.getAdjustedScopePosition(Z, J);
+    return me({ disabled: this.disabled, children: u`<div class=${c(n.container)}><div class=${c(n.controlAndScope)}><canvas class=${c(n.colorField)} @pointerdown=${this.handleColorFieldPointerDown} ${v(this.initColorField)}></canvas><div .ariaLabel=${F ? r.value : r.saturation} .ariaValueMax=${F ? p.v : p.s} aria-valuemin=0 .ariaValueNow=${(F ? t?.saturationv() : t?.value()) || "0"} class=${c({ [n.scope]: !0, [n.colorFieldScope]: !0 })} @keydown=${this.handleColorFieldScopeKeyDown} role=slider style=${k({
+      top: `${ee || 0}px`,
+      left: `${Q || 0}px`
+    })} tabindex=0 ${v(this.storeColorFieldScope)}></div></div><div class=${c(n.previewAndSliders)}><calcite-color-picker-swatch class=${c(n.preview)} .color=${z} .scale=${this.alphaChannel ? "l" : this.scale}></calcite-color-picker-swatch><div class=${c(n.sliders)}><div class=${c(n.controlAndScope)}><canvas class=${c({ [n.slider]: !0, [n.hueSlider]: !0 })} @pointerdown=${this.handleHueSliderPointerDown} ${v(this.initHueSlider)}></canvas><div .ariaLabel=${r.hue} .ariaValueMax=${p.h} aria-valuemin=0 .ariaValueNow=${t?.round().hue() || g.round().hue()} class=${c({ [n.scope]: !0, [n.hueScope]: !0 })} @keydown=${this.handleHueScopeKeyDown} role=slider style=${k({
+      top: `${ie}px`,
       left: `${te}px`
-    })} tabindex=0 ${v(this.storeOpacityScope)}></div></div>` : null}</div></div>${l && e ? null : u`<div class=${c({
+    })} tabindex=0 ${v(this.storeHueScope)}></div></div>${h ? u`<div class=${c(n.controlAndScope)}><canvas class=${c({ [n.slider]: !0, [n.opacitySlider]: !0 })} @pointerdown=${this.handleOpacitySliderPointerDown} ${v(this.initOpacitySlider)}></canvas><div .ariaLabel=${r.opacity} .ariaValueMax=${y.max} .ariaValueMin=${y.min} .ariaValueNow=${(t || g).round().alpha()} class=${c({ [n.scope]: !0, [n.opacityScope]: !0 })} @keydown=${this.handleOpacityScopeKeyDown} role=slider style=${k({
+      top: `${ae}px`,
+      left: `${oe}px`
+    })} tabindex=0 ${v(this.storeOpacityScope)}></div></div>` : null}</div></div>${s && e ? null : u`<div class=${c({
       [n.controlSection]: !0,
       [n.section]: !0
-    })}><div class=${c(n.hexAndChannelsGroup)}>${l ? null : u`<div class=${c(n.hexOptions)}><calcite-color-picker-hex-input .allowEmpty=${this.isClearable} .alphaChannel=${h} class=${c(n.control)} .messages=${r} .numberingSystem=${this.numberingSystem} @calciteColorPickerHexInputChange=${this.handleHexInputChange} .scale=${g} .value=${M}></calcite-color-picker-hex-input></div>`}${e ? null : u`<calcite-tabs class=${c({
+    })}><div class=${c(n.hexAndChannelsGroup)}>${s ? null : u`<div class=${c(n.hexOptions)}><calcite-color-picker-hex-input .allowEmpty=${this.isClearable} .alphaChannel=${h} class=${c(n.control)} .messages=${r} .numberingSystem=${this.numberingSystem} @calciteColorPickerHexInputChange=${this.handleHexInputChange} .scale=${m} .value=${z}></calcite-color-picker-hex-input></div>`}${e ? null : u`<calcite-tabs class=${c({
       [n.colorModeContainer]: !0,
       [n.splitSection]: !0
-    })} .scale=${g === "l" ? "m" : "s"}><calcite-tab-nav slot=title-group>${this.renderChannelsTabTitle("rgb")}${this.renderChannelsTabTitle("hsv")}</calcite-tab-nav>${this.renderChannelsTab("rgb")}${this.renderChannelsTab("hsv")}</calcite-tabs>`}</div></div>`}${f ? null : u`<div class=${c({ [n.savedColorsSection]: !0, [n.section]: !0 })}><div class=${c(n.header)}><label>${r.saved}</label><div class=${c(n.savedColorsButtons)}><calcite-button appearance=transparent class=${c(n.deleteColor)} .disabled=${E} icon-start=minus kind=neutral .label=${r.deleteColor} @click=${this.deleteColor} .scale=${g} type=button></calcite-button><calcite-button appearance=transparent class=${c(n.saveColor)} .disabled=${E} icon-start=plus kind=neutral .label=${r.saveColor} @click=${this.saveColor} .scale=${g} type=button></calcite-button></div></div>${C.length > 0 ? u`<div class=${c(n.savedColors)}>${ae(C, (F) => F, (F) => u`<calcite-color-picker-swatch class=${c(n.savedColor)} .color=${F} @click=${this.handleSavedColorSelect} @keydown=${this.handleSavedColorKeyDown} .scale=${g} tabindex=0></calcite-color-picker-swatch>`)}</div>` : null}</div>`}</div>` });
+    })} .scale=${m === "l" ? "m" : "s"}><calcite-tab-nav slot=title-group>${this.renderChannelsTabTitle("rgb")}${this.renderChannelsTabTitle("hsv")}</calcite-tab-nav>${this.renderChannelsTab("rgb")}${this.renderChannelsTab("hsv")}</calcite-tabs>`}</div></div>`}${f ? null : u`<div class=${c({ [n.savedColorsSection]: !0, [n.section]: !0 })}><div class=${c(n.header)}><label>${r.saved}</label><div class=${c(n.savedColorsButtons)}><calcite-button appearance=transparent class=${c(n.deleteColor)} .disabled=${L} icon-start=minus kind=neutral .label=${r.deleteColor} @click=${this.deleteColor} .scale=${m} type=button></calcite-button><calcite-button appearance=transparent class=${c(n.saveColor)} .disabled=${L} icon-start=plus kind=neutral .label=${r.saveColor} @click=${this.saveColor} .scale=${m} type=button></calcite-button></div></div>${C.length > 0 ? u`<div class=${c(n.savedColors)}>${le(C, (T) => T, (T) => u`<calcite-color-picker-swatch class=${c(n.savedColor)} .color=${T} @click=${this.handleSavedColorSelect} @keydown=${this.handleSavedColorKeyDown} .scale=${m} tabindex=0></calcite-color-picker-swatch>`)}</div>` : null}</div>`}</div>` });
   }
   renderChannelsTabTitle(e) {
-    const { channelMode: t, messages: o } = this, i = e === t, a = e === "rgb" ? o.rgb : o.hsv;
-    return D(e, u`<calcite-tab-title class=${c(n.colorMode)} data-color-mode=${e ?? A} @calciteTabsActivate=${this.handleTabActivate} .selected=${i}>${a}</calcite-tab-title>`);
+    const { channelMode: t, messages: i } = this, o = e === t, a = e === "rgb" ? i.rgb : i.hsv;
+    return I(e, u`<calcite-tab-title class=${c(n.colorMode)} data-color-mode=${e ?? D} @calciteTabsActivate=${this.handleTabActivate} .selected=${o}>${a}</calcite-tab-title>`);
   }
   renderChannelsTab(e) {
-    const { isClearable: t, channelMode: o, channels: i, messages: a, alphaChannel: l } = this, s = e === o, h = e === "rgb" ? [a.red, a.green, a.blue] : [a.hue, a.saturation, a.value], d = pe(this.el), C = l ? i : i.slice(0, 3);
-    return D(e, u`<calcite-tab class=${c(n.control)} .selected=${s}><div class=${c(n.channels)} dir=ltr>${C.map((f, g) => {
-      const w = g === 3;
-      return w && (f = t && !f ? f : R(f)), this.renderChannel(f, g, h[g], d, w ? "%" : "");
+    const { isClearable: t, channelMode: i, channels: o, messages: a, alphaChannel: s } = this, l = e === i, h = e === "rgb" ? [a.red, a.green, a.blue] : [a.hue, a.saturation, a.value], d = Ce(this.el), C = s ? o : o.slice(0, 3);
+    return I(e, u`<calcite-tab class=${c(n.control)} .selected=${l}><div class=${c(n.channels)} dir=ltr>${C.map((f, m) => {
+      const w = m === 3;
+      return w && (f = t && !f ? f : R(f)), this.renderChannel(f, m, h[m], d, w ? "%" : "");
     })}</div></calcite-tab>`);
   }
-  renderChannel(e, t, o, i, a) {
-    return D(t, u`<calcite-input-number class=${c(n.channel)} data-channel-index=${t ?? A} dir=${i ?? A} .label=${o} lang=${this.messages._lang ?? A} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.handleKeyDown} @calciteInputNumberChange=${this.handleChannelChange} @calciteInputNumberInput=${this.handleChannelInput} @calciteInternalInputNumberBlur=${this.handleChannelBlur} @calciteInternalInputNumberFocus=${this.handleChannelFocus} .scale=${this.scale === "l" ? "m" : "s"} style=${k({
+  renderChannel(e, t, i, o, a) {
+    return I(t, u`<calcite-input-number class=${c(n.channel)} data-channel-index=${t ?? D} dir=${o ?? D} .label=${i} lang=${this.messages._lang ?? D} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.handleKeyDown} @calciteInputNumberChange=${this.handleChannelChange} @calciteInputNumberInput=${this.handleChannelInput} @calciteInternalInputNumberBlur=${this.handleChannelBlur} @calciteInternalInputNumberFocus=${this.handleChannelFocus} .scale=${this.scale === "l" ? "m" : "s"} style=${k({
       marginLeft: t > 0 && !(this.scale === "s" && this.alphaChannel && t === 3) ? "-1px" : ""
     })} .suffixText=${a} .value=${e?.toString()}></calcite-input-number>`);
   }
 }
-ie("calcite-color-picker", Ae);
+se("calcite-color-picker", Ae);
 export {
   Ae as ColorPicker
 };