@luzmo/lucero 1.0.1-alpha.4 → 1.0.1-alpha.42

package/components/color-slider/index.js

@@ -15,14 +15,460 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { L as u } from "../index-HjQa8tew.js";
-const l = () => {
+import { TinyColor as d } from "@ctrl/tinycolor";
+import { unsafeCSS as k, html as _ } from "lit";
+import { property as h, query as C } from "lit/decorators.js";
+import { ifDefined as z } from "lit/directives/if-defined.js";
+import { styleMap as H } from "lit/directives/style-map.js";
+import "../color-handle/index.js";
+import { F as P } from "../focusable-BjvsvVam.js";
+import { L as $ } from "../language-resolution-B-wjV5bb.js";
+import { s as R } from "../streaming-listener-BlWm-XZU.js";
+const S = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const o = document.createElement("style");
-    o.setAttribute("data-luzmo-vars", ""), o.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(o);
+    const a = document.createElement("style");
+    a.setAttribute("data-luzmo-vars", ""), a.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 10px;--luzmo-icon-size-xs: 12px;--luzmo-icon-size-s: 14px;--luzmo-icon-size-m: 16px;--luzmo-icon-size-l: 18px;--luzmo-icon-size-xl: 20px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(a);
   }
 };
-l();
+S();
+const v = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, y = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/, x = /(^hs[v|l]a?\()\d{1,3}/, b = (a, o) => o ? a.toHexString() : a.toHex();
+class E {
+  constructor(o, {
+    applyColorToState: t,
+    extractColorFromState: r,
+    maintains: l
+  }) {
+    this.maintains = "hue", this._hue = 0, this._opacity = 1, this.getColorProcesses = {
+      rgb: (e, i) => i ? e.toRgbString() : e.toRgb(),
+      prgb: (e, i) => i ? e.toPercentageRgbString() : e.toPercentageRgb(),
+      hex8: (e, i) => i ? e.toHex8String() : e.toHex8(),
+      name: (e) => e.toName() || e.toRgbString(),
+      hsl: (e, i) => {
+        if (this.maintains === "hue") {
+          if (i)
+            return e.toHslString().replace(x, `$1${this.hue}`);
+          const { s: u, l: g, a: f } = e.toHsl();
+          return { h: this.hue, s: u, l: g, a: f };
+        }
+        if (i)
+          return e.toHslString().replace(
+            y,
+            `$1${this.hue}$2${this.saturation}`
+          );
+        const { s: c, l: m, a: p } = e.toHsl();
+        return { h: this.hue, s: c, l: m, a: p };
+      },
+      hsv: (e, i) => {
+        if (this.maintains === "hue") {
+          if (i)
+            return e.toHsvString().replace(x, `$1${this.hue}`);
+          const { s: u, v: g, a: f } = e.toHsv();
+          return { h: this.hue, s: u, v: g, a: f };
+        }
+        if (i)
+          return e.toHsvString().replace(
+            y,
+            `$1${this.hue}$2${this.saturation}`
+          );
+        const { s: c, v: m, a: p } = e.toHsv();
+        return { h: this.hue, s: c, v: m, a: p };
+      },
+      hex: b,
+      hex3: b,
+      hex4: b,
+      hex6: b
+    }, this._color = new d({ h: 0, s: 1, v: 1 }), this._previousColor = new d({ h: 0, s: 1, v: 1 }), this._format = {
+      format: "",
+      isString: !1
+    }, this.host = o, this.applyColorToState = t, this.extractColorFromState = r, this.maintains = l || this.maintains;
+  }
+  setColorProcess(o, t, r, l) {
+    this.maintains === "hue" ? this.setColorMaintainHue(o, t, r, l) : this.maintains === "saturation" && this.setColorMaintainSaturation(
+      o,
+      t,
+      r,
+      l
+    );
+  }
+  setColorMaintainHue(o, t, r, l) {
+    const { h: e, s: i, v: c, a: m } = this._color.toHsv();
+    let p;
+    if (l && r.startsWith("hs")) {
+      const u = v.exec(t);
+      if (u !== null) {
+        const [, g] = u;
+        p = Number(g);
+      }
+    } else if (!l && r.startsWith("hs")) {
+      const u = o.originalInput;
+      p = Object.values(u)[0];
+    }
+    this.hue = p || e, this.opacity = m ?? 1, this.applyColorToState({ h: e, s: i, v: c, a: m });
+  }
+  setColorMaintainSaturation(o, t, r, l) {
+    const { a: e } = this._color.toHsv();
+    if (l && r.startsWith("hs")) {
+      const i = v.exec(t);
+      if (i !== null) {
+        const [, c, m] = i;
+        this.hue = Number(c), this.saturation = Number(m);
+      }
+    } else if (!l && r.startsWith("hs")) {
+      const i = o.originalInput, c = Object.values(i);
+      this.hue = c[0], this.saturation = c[1];
+    } else {
+      const { h: i } = o.toHsv();
+      this.hue = i;
+    }
+    this.opacity = e ?? 1, this.applyColorToState(o.toHsv());
+  }
+  applyColorFromState() {
+    this._color = new d(this.extractColorFromState(this));
+  }
+  get hue() {
+    return this._hue;
+  }
+  set hue(o) {
+    const t = Math.min(360, Math.max(0, o));
+    if (t === this.hue)
+      return;
+    const r = this.hue, { s: l, v: e, a: i } = this._color.toHsv();
+    this._color = new d({ h: t, s: l, v: e, a: i }), this._hue = t, this.host.requestUpdate("hue", r);
+  }
+  get opacity() {
+    return this._opacity;
+  }
+  set opacity(o) {
+    const t = Math.min(1, Math.max(0, o));
+    if (t === this.opacity)
+      return;
+    const r = this.opacity, { h: l, s: e, v: i } = this._color.toHsv();
+    this._color = new d({ h: l, s: e, v: i, a: t }), this._opacity = t, this.host.requestUpdate("opacity", r);
+  }
+  /* c8 ignore next 3 */
+  get value() {
+    return this.color;
+  }
+  get color() {
+    return this.getColorProcesses[this._format.format || "hex"](
+      this._color,
+      this._format.isString
+    );
+  }
+  set color(o) {
+    if (o === this.color)
+      return;
+    const t = this._color;
+    this._color = new d(o);
+    const r = this._color.format;
+    let l = typeof o == "string" || o instanceof String;
+    r.startsWith("hex") && (l = o.startsWith("#")), this._format = {
+      format: r,
+      isString: l
+    }, this.setColorProcess(this._color, o, r, l), this.host.requestUpdate("color", t);
+  }
+  getColor(o) {
+    const t = {
+      hsl: "toHsl"
+    };
+    return this._color[t[o]]();
+  }
+  setColor(o) {
+    this._color = o;
+    const t = typeof this._color.originalInput == "string" || this._color.originalInput instanceof String;
+    this.setColorProcess(this._color, o, this._color.format, t);
+  }
+  getHslString() {
+    return this._color.toHslString();
+  }
+  savePreviousColor() {
+    this._previousColor = this._color.clone();
+  }
+  restorePreviousColor() {
+    this.setColor(this._previousColor);
+  }
+}
+const M = '.opacity-checkerboard{position:absolute;block-size:100%;inline-size:100%;background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-color-loupe-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-color-loupe-checkerboard-position, left top)/calc(var(--luzmo-color-loupe-checkerboard-size, 8px) * 2) calc(var(--luzmo-color-loupe-checkerboard-size, 8px) * 2)}:host{--luzmo-color-slider-gradient-fallback: rgb(255 0 0) 0%, rgb(255 255 0) 17%, rgb(0 255 0) 33%, rgb(0 255 255) 50%, rgb(0 0 255) 67%, rgb(255 0 255) 83%, rgb(255 0 0) 100%;touch-action:none}:host([vertical]) .handle{inset-block-start:unset;inset-block-end:0}:host([vertical]) .slider{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){width:100%;height:100%}@media (forced-colors: active){:host{--highcontrast-color-slider-border-color: CanvasText;--highcontrast-color-slider-border-color-disabled: GrayText;--highcontrast-color-slider-background-color-disabled: Canvas;forced-color-adjust:none}}:host{--luzmo-color-handle-hitarea-border-radius: var( --luzmo-color-slider-handle-hitarea-border-radius, 0px );min-inline-size:var(--luzmo-color-slider-minimum-length, 80px);inline-size:var(--luzmo-color-slider-length, 192px);block-size:var(--luzmo-color-slider-control-track-width, 24px);-webkit-user-select:none;user-select:none;cursor:default;display:block;position:relative}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([disabled]) .gradient{display:none}:host([vertical]){min-block-size:var(--luzmo-color-slider-vertical-minimum-height, var(--luzmo-color-slider-minimum-length, 80px));block-size:var(--luzmo-color-slider-vertical-height, var(--luzmo-color-slider-length, 192px));min-inline-size:0;inline-size:var(--luzmo-color-slider-vertical-control-track-width, var(--luzmo-color-slider-control-track-height, 24px));display:inline-block}:host([vertical]) .handle{inset-inline-start:50%}.handle{inset-block-start:50%;inset-inline-start:0}.checkerboard{--luzmo-color-slider-border-color-local: var( --highcontrast-color-slider-border-color, var(--luzmo-color-slider-border-color, var(--luzmo-border-color)) )}.checkerboard:before{content:"";z-index:1;box-shadow:inset 0 0 0 var(--luzmo-color-slider-border-width, var(--luzmo-border-width)) var(--luzmo-color-slider-border-color-local);border-radius:var(--luzmo-color-slider-border-rounding, var(--luzmo-border-radius-s));position:absolute;top:0;right:0;bottom:0;left:0}:host([disabled]) .checkerboard{--luzmo-color-slider-border-color-local: var( --highcontrast-color-slider-border-color-disabled, var(--luzmo-color-slider-border-color-disabled, var(--luzmo-dimmed-color)) );background:var(--highcontrast-color-slider-background-color-disabled, var(--luzmo-color-slider-background-color-disabled, var(--luzmo-dimmed-color)))}.checkerboard,.gradient{inline-size:100%;block-size:100%;border-radius:var(--luzmo-color-slider-border-rounding, var(--luzmo-border-radius-s))}.gradient:dir(rtl),:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider{opacity:0;inline-size:100%;block-size:100%;z-index:0;pointer-events:none;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}';
+var F = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (a, o, t, r) => {
+  for (var l = r > 1 ? void 0 : r ? I(o, t) : o, e = a.length - 1, i; e >= 0; e--)
+    (i = a[e]) && (l = (r ? i(o, t, l) : i(l)) || l);
+  return r && l && F(o, t, l), l;
+};
+class s extends P {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.focused = !1, this.label = "hue", this.vertical = !1, this.languageResolver = new $(this), this.colorController = new E(this, {
+      /* c8 ignore next 3 */
+      applyColorToState: () => {
+        if (this.mode === "opacity") {
+          const o = new d(this.colorController.color);
+          this.sliderHandlePosition = 100 * o.getAlpha();
+        } else
+          this.sliderHandlePosition = 100 * (this.colorController.hue / 360);
+      },
+      extractColorFromState: (o) => this.mode === "opacity" ? {
+        ...o.getColor("hsl"),
+        a: this.value
+      } : {
+        ...o.getColor("hsl"),
+        h: this.value
+      },
+      maintains: "saturation"
+    }), this.sliderHandlePosition = 0, this.step = 1, this.isLTR = !0, this._altered = 0, this._pointerDown = !1;
+  }
+  static get styles() {
+    return [k(M)];
+  }
+  get value() {
+    return this.mode === "opacity" ? this.colorController.opacity : this.colorController.hue;
+  }
+  set value(o) {
+    this.mode === "opacity" ? this.colorController.opacity = o : this.colorController.hue = o;
+  }
+  get color() {
+    return this.colorController.color;
+  }
+  set color(o) {
+    this.colorController.color = o;
+  }
+  get altered() {
+    return this._altered;
+  }
+  set altered(o) {
+    this._altered = o, this.step = Math.max(1, this.altered * 10);
+  }
+  get focusElement() {
+    return this.input;
+  }
+  handleKeydown(o) {
+    const { key: t } = o;
+    this.focused = !0, this.altered = [o.shiftKey, o.ctrlKey, o.altKey].filter(
+      (i) => !!i
+    ).length;
+    let r = 0;
+    switch (t) {
+      case "ArrowUp": {
+        r = this.step;
+        break;
+      }
+      case "ArrowDown": {
+        r = -this.step;
+        break;
+      }
+      case "ArrowLeft": {
+        r = this.step * (this.isLTR ? -1 : 1);
+        break;
+      }
+      case "ArrowRight": {
+        r = this.step * (this.isLTR ? 1 : -1);
+        break;
+      }
+      default:
+        return;
+    }
+    o.preventDefault();
+    const e = 100 / (this.mode === "opacity" ? 100 : 360);
+    this.sliderHandlePosition = Math.min(
+      100,
+      Math.max(0, this.sliderHandlePosition + r * e)
+    ), this.value = this.mode === "opacity" ? Math.min(1, Math.max(0, this.value + r / 100)) : Math.min(360, Math.max(0, this.value + r)), this.colorController.applyColorFromState(), r !== 0 && (this.dispatchEvent(
+      new Event("input", {
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  handleInput(o) {
+    const { valueAsNumber: t } = o.target;
+    this.value = t, this.sliderHandlePosition = 100 * (this.mode === "opacity" ? this.value : this.value / 360), this.colorController.applyColorFromState();
+  }
+  handleChange(o) {
+    this.handleInput(o), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  focus(o = {}) {
+    super.focus(o), this.forwardFocus();
+  }
+  forwardFocus() {
+    this.input.focus();
+  }
+  handleFocus() {
+    this.focused = !0;
+  }
+  handleBlur() {
+    this._pointerDown || (this.altered = 0, this.focused = !1);
+  }
+  handlePointerdown(o) {
+    if (o.button !== 0) {
+      o.preventDefault();
+      return;
+    }
+    this._pointerDown = !0, this.colorController.savePreviousColor(), this.boundingClientRect = this.getBoundingClientRect(), o.target.setPointerCapture(o.pointerId), o.pointerType === "mouse" && (this.focused = !0);
+  }
+  handlePointermove(o) {
+    this.sliderHandlePosition = this.calculateHandlePosition(o), this.value = (this.mode === "opacity" ? 1 : 360) * (this.sliderHandlePosition / 100), this.colorController.applyColorFromState(), this.dispatchEvent(
+      new Event("input", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    );
+  }
+  handlePointerup(o) {
+    this._pointerDown = !1, o.target.releasePointerCapture(o.pointerId), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    ) || this.colorController.restorePreviousColor(), this.focus(), o.pointerType === "mouse" && (this.focused = !1);
+  }
+  /**
+   * Returns the value under the cursor
+   * @param: PointerEvent on slider
+   * @return: Slider value that correlates to the position under the pointer
+   */
+  calculateHandlePosition(o) {
+    if (!this.boundingClientRect)
+      return this.sliderHandlePosition;
+    const t = this.boundingClientRect, r = this.vertical ? t.top : t.left, l = this.vertical ? o.clientY : o.clientX, e = this.vertical ? t.height : t.width, i = Math.max(0, Math.min(1, (l - r) / e));
+    return this.vertical || !this.isLTR ? 100 - 100 * i : 100 * i;
+  }
+  handleGradientPointerdown(o) {
+    o.button === 0 && (o.stopPropagation(), o.preventDefault(), this.handle.dispatchEvent(new PointerEvent("pointerdown", o)), this.handlePointermove(o));
+  }
+  get handlePositionStyles() {
+    return `${this.vertical ? "inset-block-end" : "inset-inline-start"}: ${this.sliderHandlePosition}%`;
+  }
+  get getColorSliderStyle() {
+    const o = this.vertical ? "top" : "right";
+    if (this.mode === "opacity") {
+      const t = new d(this.colorController.color).setAlpha(1).toRgbString();
+      return {
+        background: `linear-gradient(to ${o}, transparent, ${t})`
+      };
+    }
+    return {
+      background: `linear-gradient(to ${o}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))`
+    };
+  }
+  render() {
+    return _`
+      <div
+        class="opacity-checkerboard checkerboard"
+        role="presentation"
+        @pointerdown=${this.handleGradientPointerdown}
+      >
+        <div
+          class="gradient"
+          role="presentation"
+          style=${H(this.getColorSliderStyle)}
+        >
+          <slot name="gradient"></slot>
+        </div>
+      </div>
+      <luzmo-color-handle
+        tabindex=${z(this.focused ? void 0 : "0")}
+        @focus=${this.forwardFocus}
+        ?focused=${this.focused}
+        class="handle"
+        color=${this.mode === "opacity" ? this.color : "hsl(" + this.value + ", 100%, 50%)"}
+        ?disabled=${this.disabled}
+        style=${this.handlePositionStyles}
+        ${R({
+      start: ["pointerdown", this.handlePointerdown],
+      streamInside: ["pointermove", this.handlePointermove],
+      end: [
+        ["pointerup", "pointercancel", "pointerleave"],
+        this.handlePointerup
+      ]
+    })}
+      ></luzmo-color-handle>
+      <input
+        type="range"
+        class="slider"
+        min="0"
+        max=${this.mode === "opacity" ? "100" : "360"}
+        aria-orientation=${z(this.vertical ? "vertical" : void 0)}
+        orient=${z(this.vertical ? "vertical" : void 0)}
+        step=${this.step}
+        aria-label=${this.label}
+        .value=${String(
+      this.mode === "opacity" ? this.value * 100 : this.value
+    )}
+        aria-valuetext=${`${new Intl.NumberFormat(
+      this.languageResolver.language,
+      {
+        maximumFractionDigits: 0,
+        minimumIntegerDigits: 1,
+        style: "unit",
+        unit: this.mode === "opacity" ? "percent" : "degree",
+        unitDisplay: "narrow"
+      }
+    ).format(this.mode === "opacity" ? this.value * 100 : this.value)}`}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+        @keydown=${this.handleKeydown}
+      />
+    `;
+  }
+  firstUpdated(o) {
+    super.firstUpdated(o), this.boundingClientRect = this.getBoundingClientRect(), this.addEventListener("focus", this.handleFocus), this.addEventListener("blur", this.handleBlur);
+  }
+  updated(o) {
+    o.has("mode") && (this.handle.style.insetInlineStart = "", this.handle.style.insetBlockEnd = "", this.mode === "opacity" && (this.colorController.color = new d(
+      this.colorController.color
+    ).toRgbString(), this.handle.style.insetInlineStart = 100 * this.colorController.opacity + "%"));
+  }
+}
+n([
+  h({ type: String, reflect: !0 })
+], s.prototype, "dir", 2);
+n([
+  h({ type: String, reflect: !0 })
+], s.prototype, "mode", 2);
+n([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+n([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "focused", 2);
+n([
+  C(".handle")
+], s.prototype, "handle", 2);
+n([
+  h({ type: String })
+], s.prototype, "label", 2);
+n([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "vertical", 2);
+n([
+  h({ type: Number })
+], s.prototype, "value", 1);
+n([
+  h({ type: Number, reflect: !0 })
+], s.prototype, "sliderHandlePosition", 2);
+n([
+  h({ type: String })
+], s.prototype, "color", 1);
+n([
+  h({ type: Number })
+], s.prototype, "step", 2);
+n([
+  h({ type: Boolean, attribute: "is-ltr" })
+], s.prototype, "isLTR", 2);
+n([
+  C("input")
+], s.prototype, "input", 2);
+customElements.get("luzmo-color-slider") || customElements.define("luzmo-color-slider", s);
 export {
-  u as LuzmoColorSlider
+  s as LuzmoColorSlider
 };