@luzmo/lucero 0.0.39 → 0.0.40

package/components/color-slider/index.js

@@ -15,304 +15,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { r as p, x as b, n as i } from "../base-WsynuqaS.js";
-import { e as h } from "../query-D_KR_GUc.js";
-import { o as d } from "../if-defined-DOaE2coe.js";
-import { o as g } from "../style-map-IgqIKvlE.js";
-import "../color-handle/index.js";
-import { F as z } from "../focusable-BxtpnzWp.js";
-import { C as f } from "../color-Bg3tYsAQ.js";
-import { L as v } from "../language-resolution-8yZa5r_P.js";
-import { s as y } from "../streaming-listener-CP-JE6Fa.js";
-import { T as u } from "../index-C1chwzNp.js";
-const m = () => {
+import { L as u } from "../index-HjQa8tew.js";
+const l = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    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-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(a);
+    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);
   }
 };
-m();
-const x = '.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 w = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (a, o, e, r) => {
-  for (var s = r > 1 ? void 0 : r ? k(o, e) : o, c = a.length - 1, n; c >= 0; c--)
-    (n = a[c]) && (s = (r ? n(o, e, s) : n(s)) || s);
-  return r && s && w(o, e, s), s;
-};
-class t extends z {
-  constructor() {
-    super(...arguments), this.disabled = !1, this.focused = !1, this.label = "hue", this.vertical = !1, this.languageResolver = new v(this), this.colorController = new f(this, {
-      /* c8 ignore next 3 */
-      applyColorToState: () => {
-        if (this.mode === "opacity") {
-          const o = new u(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 [p(x)];
-  }
-  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: e } = o;
-    this.focused = !0, this.altered = [o.shiftKey, o.ctrlKey, o.altKey].filter(
-      (n) => !!n
-    ).length;
-    let r = 0;
-    switch (e) {
-      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 c = 100 / (this.mode === "opacity" ? 100 : 360);
-    this.sliderHandlePosition = Math.min(
-      100,
-      Math.max(0, this.sliderHandlePosition + r * c)
-    ), 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: e } = o.target;
-    this.value = e, 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 e = this.boundingClientRect, r = this.vertical ? e.top : e.left, s = this.vertical ? o.clientY : o.clientX, c = this.vertical ? e.height : e.width, n = Math.max(0, Math.min(1, (s - r) / c));
-    return this.vertical || !this.isLTR ? 100 - 100 * n : 100 * n;
-  }
-  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 e = new u(this.colorController.color).setAlpha(1).toRgbString();
-      return {
-        background: `linear-gradient(to ${o}, transparent, ${e})`
-      };
-    }
-    return {
-      background: `linear-gradient(to ${o}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))`
-    };
-  }
-  render() {
-    return b`
-      <div
-        class="opacity-checkerboard checkerboard"
-        role="presentation"
-        @pointerdown=${this.handleGradientPointerdown}
-      >
-        <div
-          class="gradient"
-          role="presentation"
-          style=${g(this.getColorSliderStyle)}
-        >
-          <slot name="gradient"></slot>
-        </div>
-      </div>
-      <luzmo-color-handle
-        tabindex=${d(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}
-        ${y({
-      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=${d(this.vertical ? "vertical" : void 0)}
-        orient=${d(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 u(
-      this.colorController.color
-    ).toRgbString(), this.handle.style.insetInlineStart = 100 * this.colorController.opacity + "%"));
-  }
-}
-l([
-  i({ type: String, reflect: !0 })
-], t.prototype, "dir", 2);
-l([
-  i({ type: String, reflect: !0 })
-], t.prototype, "mode", 2);
-l([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
-l([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "focused", 2);
-l([
-  h(".handle")
-], t.prototype, "handle", 2);
-l([
-  i({ type: String })
-], t.prototype, "label", 2);
-l([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "vertical", 2);
-l([
-  i({ type: Number })
-], t.prototype, "value", 1);
-l([
-  i({ type: Number, reflect: !0 })
-], t.prototype, "sliderHandlePosition", 2);
-l([
-  i({ type: String })
-], t.prototype, "color", 1);
-l([
-  i({ type: Number })
-], t.prototype, "step", 2);
-l([
-  i({ type: Boolean, attribute: "is-ltr" })
-], t.prototype, "isLTR", 2);
-l([
-  h("input")
-], t.prototype, "input", 2);
-customElements.get("luzmo-color-slider") || customElements.define("luzmo-color-slider", t);
+l();
 export {
-  t as LuzmoColorSlider
+  u as LuzmoColorSlider
 };

package/components/index-BwxgAdzi.cjs

@@ -0,0 +1,57 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";const b=require("./base-CBCg3yyw.cjs"),D=require("./query-BL-TJj7K.cjs"),C=require("./if-defined-C9YGdo33.cjs"),O=require("./style-map-CeilmSgs.cjs");require("./color-handle/index.cjs");const W=require("./focusable-EbipgXRh.cjs"),j=require("./language-resolution-DJzmyzZq.cjs"),U=require("./streaming-listener-B00MvALi.cjs");function c(r,t){V(r)&&(r="100%");const e=G(r);return r=t===360?r:Math.min(t,Math.max(0,parseFloat(r))),e&&(r=parseInt(String(r*t),10)/100),Math.abs(r-t)<1e-6?1:(t===360?r=(r<0?r%t+t:r%t)/parseFloat(String(t)):r=r%t/parseFloat(String(t)),r)}function w(r){return Math.min(1,Math.max(0,r))}function V(r){return typeof r=="string"&&r.indexOf(".")!==-1&&parseFloat(r)===1}function G(r){return typeof r=="string"&&r.indexOf("%")!==-1}function T(r){return r=parseFloat(r),(isNaN(r)||r<0||r>1)&&(r=1),r}function S(r){return Number(r)<=1?`${Number(r)*100}%`:r}function k(r){return r.length===1?"0"+r:String(r)}function K(r,t,e){return{r:c(r,255)*255,g:c(t,255)*255,b:c(e,255)*255}}function A(r,t,e){r=c(r,255),t=c(t,255),e=c(e,255);const s=Math.max(r,t,e),o=Math.min(r,t,e);let i=0,n=0;const a=(s+o)/2;if(s===o)n=0,i=0;else{const l=s-o;switch(n=a>.5?l/(2-s-o):l/(s+o),s){case r:i=(t-e)/l+(t<e?6:0);break;case t:i=(e-r)/l+2;break;case e:i=(r-t)/l+4;break}i/=6}return{h:i,s:n,l:a}}function R(r,t,e){return e<0&&(e+=1),e>1&&(e-=1),e<1/6?r+(t-r)*(6*e):e<1/2?t:e<2/3?r+(t-r)*(2/3-e)*6:r}function X(r,t,e){let s,o,i;if(r=c(r,360),t=c(t,100),e=c(e,100),t===0)o=e,i=e,s=e;else{const n=e<.5?e*(1+t):e+t-e*t,a=2*e-n;s=R(a,n,r+1/3),o=R(a,n,r),i=R(a,n,r-1/3)}return{r:s*255,g:o*255,b:i*255}}function F(r,t,e){r=c(r,255),t=c(t,255),e=c(e,255);const s=Math.max(r,t,e),o=Math.min(r,t,e);let i=0;const n=s,a=s-o,l=s===0?0:a/s;if(s===o)i=0;else{switch(s){case r:i=(t-e)/a+(t<e?6:0);break;case t:i=(e-r)/a+2;break;case e:i=(r-t)/a+4;break}i/=6}return{h:i,s:l,v:n}}function Y(r,t,e){r=c(r,360)*6,t=c(t,100),e=c(e,100);const s=Math.floor(r),o=r-s,i=e*(1-t),n=e*(1-o*t),a=e*(1-(1-o)*t),l=s%6,v=[e,n,i,i,a,e][l],d=[a,e,e,n,i,i][l],y=[i,i,a,e,e,n][l];return{r:v*255,g:d*255,b:y*255}}function E(r,t,e,s){const o=[k(Math.round(r).toString(16)),k(Math.round(t).toString(16)),k(Math.round(e).toString(16))];return s&&o[0].startsWith(o[0].charAt(1))&&o[1].startsWith(o[1].charAt(1))&&o[2].startsWith(o[2].charAt(1))?o[0].charAt(0)+o[1].charAt(0)+o[2].charAt(0):o.join("")}function Z(r,t,e,s,o){const i=[k(Math.round(r).toString(16)),k(Math.round(t).toString(16)),k(Math.round(e).toString(16)),k(Q(s))];return o&&i[0].startsWith(i[0].charAt(1))&&i[1].startsWith(i[1].charAt(1))&&i[2].startsWith(i[2].charAt(1))&&i[3].startsWith(i[3].charAt(1))?i[0].charAt(0)+i[1].charAt(0)+i[2].charAt(0)+i[3].charAt(0):i.join("")}function J(r,t,e,s){const o=r/100,i=t/100,n=e/100,a=s/100,l=255*(1-o)*(1-a),v=255*(1-i)*(1-a),d=255*(1-n)*(1-a);return{r:l,g:v,b:d}}function _(r,t,e){let s=1-r/255,o=1-t/255,i=1-e/255,n=Math.min(s,o,i);return n===1?(s=0,o=0,i=0):(s=(s-n)/(1-n)*100,o=(o-n)/(1-n)*100,i=(i-n)/(1-n)*100),n*=100,{c:Math.round(s),m:Math.round(o),y:Math.round(i),k:Math.round(n)}}function Q(r){return Math.round(parseFloat(r)*255).toString(16)}function I(r){return g(r)/255}function g(r){return parseInt(r,16)}function tt(r){return{r:r>>16,g:(r&65280)>>8,b:r&255}}const P={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function et(r){let t={r:0,g:0,b:0},e=1,s=null,o=null,i=null,n=!1,a=!1;return typeof r=="string"&&(r=it(r)),typeof r=="object"&&(f(r.r)&&f(r.g)&&f(r.b)?(t=K(r.r,r.g,r.b),n=!0,a=String(r.r).substr(-1)==="%"?"prgb":"rgb"):f(r.h)&&f(r.s)&&f(r.v)?(s=S(r.s),o=S(r.v),t=Y(r.h,s,o),n=!0,a="hsv"):f(r.h)&&f(r.s)&&f(r.l)?(s=S(r.s),i=S(r.l),t=X(r.h,s,i),n=!0,a="hsl"):f(r.c)&&f(r.m)&&f(r.y)&&f(r.k)&&(t=J(r.c,r.m,r.y,r.k),n=!0,a="cmyk"),Object.prototype.hasOwnProperty.call(r,"a")&&(e=r.a)),e=T(e),{ok:n,format:r.format||a,r:Math.min(255,Math.max(t.r,0)),g:Math.min(255,Math.max(t.g,0)),b:Math.min(255,Math.max(t.b,0)),a:e}}const rt="[-\\+]?\\d+%?",st="[-\\+]?\\d*\\.\\d+%?",x="(?:"+st+")|(?:"+rt+")",z="[\\s|\\(]+("+x+")[,|\\s]+("+x+")[,|\\s]+("+x+")\\s*\\)?",M="[\\s|\\(]+("+x+")[,|\\s]+("+x+")[,|\\s]+("+x+")[,|\\s]+("+x+")\\s*\\)?",m={CSS_UNIT:new RegExp(x),rgb:new RegExp("rgb"+z),rgba:new RegExp("rgba"+M),hsl:new RegExp("hsl"+z),hsla:new RegExp("hsla"+M),hsv:new RegExp("hsv"+z),hsva:new RegExp("hsva"+M),cmyk:new RegExp("cmyk"+M),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function it(r){if(r=r.trim().toLowerCase(),r.length===0)return!1;let t=!1;if(P[r])r=P[r],t=!0;else if(r==="transparent")return{r:0,g:0,b:0,a:0,format:"name"};let e=m.rgb.exec(r);return e?{r:e[1],g:e[2],b:e[3]}:(e=m.rgba.exec(r),e?{r:e[1],g:e[2],b:e[3],a:e[4]}:(e=m.hsl.exec(r),e?{h:e[1],s:e[2],l:e[3]}:(e=m.hsla.exec(r),e?{h:e[1],s:e[2],l:e[3],a:e[4]}:(e=m.hsv.exec(r),e?{h:e[1],s:e[2],v:e[3]}:(e=m.hsva.exec(r),e?{h:e[1],s:e[2],v:e[3],a:e[4]}:(e=m.cmyk.exec(r),e?{c:e[1],m:e[2],y:e[3],k:e[4]}:(e=m.hex8.exec(r),e?{r:g(e[1]),g:g(e[2]),b:g(e[3]),a:I(e[4]),format:t?"name":"hex8"}:(e=m.hex6.exec(r),e?{r:g(e[1]),g:g(e[2]),b:g(e[3]),format:t?"name":"hex"}:(e=m.hex4.exec(r),e?{r:g(e[1]+e[1]),g:g(e[2]+e[2]),b:g(e[3]+e[3]),a:I(e[4]+e[4]),format:t?"name":"hex8"}:(e=m.hex3.exec(r),e?{r:g(e[1]+e[1]),g:g(e[2]+e[2]),b:g(e[3]+e[3]),format:t?"name":"hex"}:!1))))))))))}function f(r){return typeof r=="number"?!Number.isNaN(r):m.CSS_UNIT.test(r)}class h{constructor(t="",e={}){if(t instanceof h)return t;typeof t=="number"&&(t=tt(t)),this.originalInput=t;const s=et(t);this.originalInput=t,this.r=s.r,this.g=s.g,this.b=s.b,this.a=s.a,this.roundA=Math.round(100*this.a)/100,this.format=e.format??s.format,this.gradientType=e.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=s.ok}isDark(){return this.getBrightness()<128}isLight(){return!this.isDark()}getBrightness(){const t=this.toRgb();return(t.r*299+t.g*587+t.b*114)/1e3}getLuminance(){const t=this.toRgb();let e,s,o;const i=t.r/255,n=t.g/255,a=t.b/255;return i<=.03928?e=i/12.92:e=Math.pow((i+.055)/1.055,2.4),n<=.03928?s=n/12.92:s=Math.pow((n+.055)/1.055,2.4),a<=.03928?o=a/12.92:o=Math.pow((a+.055)/1.055,2.4),.2126*e+.7152*s+.0722*o}getAlpha(){return this.a}setAlpha(t){return this.a=T(t),this.roundA=Math.round(100*this.a)/100,this}isMonochrome(){const{s:t}=this.toHsl();return t===0}toHsv(){const t=F(this.r,this.g,this.b);return{h:t.h*360,s:t.s,v:t.v,a:this.a}}toHsvString(){const t=F(this.r,this.g,this.b),e=Math.round(t.h*360),s=Math.round(t.s*100),o=Math.round(t.v*100);return this.a===1?`hsv(${e}, ${s}%, ${o}%)`:`hsva(${e}, ${s}%, ${o}%, ${this.roundA})`}toHsl(){const t=A(this.r,this.g,this.b);return{h:t.h*360,s:t.s,l:t.l,a:this.a}}toHslString(){const t=A(this.r,this.g,this.b),e=Math.round(t.h*360),s=Math.round(t.s*100),o=Math.round(t.l*100);return this.a===1?`hsl(${e}, ${s}%, ${o}%)`:`hsla(${e}, ${s}%, ${o}%, ${this.roundA})`}toHex(t=!1){return E(this.r,this.g,this.b,t)}toHexString(t=!1){return"#"+this.toHex(t)}toHex8(t=!1){return Z(this.r,this.g,this.b,this.a,t)}toHex8String(t=!1){return"#"+this.toHex8(t)}toHexShortString(t=!1){return this.a===1?this.toHexString(t):this.toHex8String(t)}toRgb(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}}toRgbString(){const t=Math.round(this.r),e=Math.round(this.g),s=Math.round(this.b);return this.a===1?`rgb(${t}, ${e}, ${s})`:`rgba(${t}, ${e}, ${s}, ${this.roundA})`}toPercentageRgb(){const t=e=>`${Math.round(c(e,255)*100)}%`;return{r:t(this.r),g:t(this.g),b:t(this.b),a:this.a}}toPercentageRgbString(){const t=e=>Math.round(c(e,255)*100);return this.a===1?`rgb(${t(this.r)}%, ${t(this.g)}%, ${t(this.b)}%)`:`rgba(${t(this.r)}%, ${t(this.g)}%, ${t(this.b)}%, ${this.roundA})`}toCmyk(){return{..._(this.r,this.g,this.b)}}toCmykString(){const{c:t,m:e,y:s,k:o}=_(this.r,this.g,this.b);return`cmyk(${t}, ${e}, ${s}, ${o})`}toName(){if(this.a===0)return"transparent";if(this.a<1)return!1;const t="#"+E(this.r,this.g,this.b,!1);for(const[e,s]of Object.entries(P))if(t===s)return e;return!1}toString(t){const e=!!t;t=t??this.format;let s=!1;const o=this.a<1&&this.a>=0;return!e&&o&&(t.startsWith("hex")||t==="name")?t==="name"&&this.a===0?this.toName():this.toRgbString():(t==="rgb"&&(s=this.toRgbString()),t==="prgb"&&(s=this.toPercentageRgbString()),(t==="hex"||t==="hex6")&&(s=this.toHexString()),t==="hex3"&&(s=this.toHexString(!0)),t==="hex4"&&(s=this.toHex8String(!0)),t==="hex8"&&(s=this.toHex8String()),t==="name"&&(s=this.toName()),t==="hsl"&&(s=this.toHslString()),t==="hsv"&&(s=this.toHsvString()),t==="cmyk"&&(s=this.toCmykString()),s||this.toHexString())}toNumber(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)}clone(){return new h(this.toString())}lighten(t=10){const e=this.toHsl();return e.l+=t/100,e.l=w(e.l),new h(e)}brighten(t=10){const e=this.toRgb();return e.r=Math.max(0,Math.min(255,e.r-Math.round(255*-(t/100)))),e.g=Math.max(0,Math.min(255,e.g-Math.round(255*-(t/100)))),e.b=Math.max(0,Math.min(255,e.b-Math.round(255*-(t/100)))),new h(e)}darken(t=10){const e=this.toHsl();return e.l-=t/100,e.l=w(e.l),new h(e)}tint(t=10){return this.mix("white",t)}shade(t=10){return this.mix("black",t)}desaturate(t=10){const e=this.toHsl();return e.s-=t/100,e.s=w(e.s),new h(e)}saturate(t=10){const e=this.toHsl();return e.s+=t/100,e.s=w(e.s),new h(e)}greyscale(){return this.desaturate(100)}spin(t){const e=this.toHsl(),s=(e.h+t)%360;return e.h=s<0?360+s:s,new h(e)}mix(t,e=50){const s=this.toRgb(),o=new h(t).toRgb(),i=e/100,n={r:(o.r-s.r)*i+s.r,g:(o.g-s.g)*i+s.g,b:(o.b-s.b)*i+s.b,a:(o.a-s.a)*i+s.a};return new h(n)}analogous(t=6,e=30){const s=this.toHsl(),o=360/e,i=[this];for(s.h=(s.h-(o*t>>1)+720)%360;--t;)s.h=(s.h+o)%360,i.push(new h(s));return i}complement(){const t=this.toHsl();return t.h=(t.h+180)%360,new h(t)}monochromatic(t=6){const e=this.toHsv(),{h:s}=e,{s:o}=e;let{v:i}=e;const n=[],a=1/t;for(;t--;)n.push(new h({h:s,s:o,v:i})),i=(i+a)%1;return n}splitcomplement(){const t=this.toHsl(),{h:e}=t;return[this,new h({h:(e+72)%360,s:t.s,l:t.l}),new h({h:(e+216)%360,s:t.s,l:t.l})]}onBackground(t){const e=this.toRgb(),s=new h(t).toRgb(),o=e.a+s.a*(1-e.a);return new h({r:(e.r*e.a+s.r*s.a*(1-e.a))/o,g:(e.g*e.a+s.g*s.a*(1-e.a))/o,b:(e.b*e.a+s.b*s.a*(1-e.a))/o,a:o})}triad(){return this.polyad(3)}tetrad(){return this.polyad(4)}polyad(t){const e=this.toHsl(),{h:s}=e,o=[this],i=360/t;for(let n=1;n<t;n++)o.push(new h({h:(s+n*i)%360,s:e.s,l:e.l}));return o}equals(t){const e=new h(t);return this.format==="cmyk"||e.format==="cmyk"?this.toCmykString()===e.toCmykString():this.toRgbString()===e.toRgbString()}}const N=/^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/,q=/(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/,B=/(^hs[v|l]a?\()\d{1,3}/,H=(r,t)=>t?r.toHexString():r.toHex();class ot{constructor(t,{applyColorToState:e,extractColorFromState:s,maintains:o}){this.maintains="hue",this._hue=0,this._opacity=1,this.getColorProcesses={rgb:(i,n)=>n?i.toRgbString():i.toRgb(),prgb:(i,n)=>n?i.toPercentageRgbString():i.toPercentageRgb(),hex8:(i,n)=>n?i.toHex8String():i.toHex8(),name:i=>i.toName()||i.toRgbString(),hsl:(i,n)=>{if(this.maintains==="hue"){if(n)return i.toHslString().replace(B,`$1${this.hue}`);const{s:d,l:y,a:$}=i.toHsl();return{h:this.hue,s:d,l:y,a:$}}if(n)return i.toHslString().replace(q,`$1${this.hue}$2${this.saturation}`);const{s:a,l,a:v}=i.toHsl();return{h:this.hue,s:a,l,a:v}},hsv:(i,n)=>{if(this.maintains==="hue"){if(n)return i.toHsvString().replace(B,`$1${this.hue}`);const{s:d,v:y,a:$}=i.toHsv();return{h:this.hue,s:d,v:y,a:$}}if(n)return i.toHsvString().replace(q,`$1${this.hue}$2${this.saturation}`);const{s:a,v:l,a:v}=i.toHsv();return{h:this.hue,s:a,v:l,a:v}},hex:H,hex3:H,hex4:H,hex6:H},this._color=new h({h:0,s:1,v:1}),this._previousColor=new h({h:0,s:1,v:1}),this._format={format:"",isString:!1},this.host=t,this.applyColorToState=e,this.extractColorFromState=s,this.maintains=o||this.maintains}setColorProcess(t,e,s,o){this.maintains==="hue"?this.setColorMaintainHue(t,e,s,o):this.maintains==="saturation"&&this.setColorMaintainSaturation(t,e,s,o)}setColorMaintainHue(t,e,s,o){const{h:i,s:n,v:a,a:l}=this._color.toHsv();let v;if(o&&s.startsWith("hs")){const d=N.exec(e);if(d!==null){const[,y]=d;v=Number(y)}}else if(!o&&s.startsWith("hs")){const d=t.originalInput;v=Object.values(d)[0]}this.hue=v||i,this.opacity=l??1,this.applyColorToState({h:i,s:n,v:a,a:l})}setColorMaintainSaturation(t,e,s,o){const{a:i}=this._color.toHsv();if(o&&s.startsWith("hs")){const n=N.exec(e);if(n!==null){const[,a,l]=n;this.hue=Number(a),this.saturation=Number(l)}}else if(!o&&s.startsWith("hs")){const n=t.originalInput,a=Object.values(n);this.hue=a[0],this.saturation=a[1]}else{const{h:n}=t.toHsv();this.hue=n}this.opacity=i??1,this.applyColorToState(t.toHsv())}applyColorFromState(){this._color=new h(this.extractColorFromState(this))}get hue(){return this._hue}set hue(t){const e=Math.min(360,Math.max(0,t));if(e===this.hue)return;const s=this.hue,{s:o,v:i,a:n}=this._color.toHsv();this._color=new h({h:e,s:o,v:i,a:n}),this._hue=e,this.host.requestUpdate("hue",s)}get opacity(){return this._opacity}set opacity(t){const e=Math.min(1,Math.max(0,t));if(e===this.opacity)return;const s=this.opacity,{h:o,s:i,v:n}=this._color.toHsv();this._color=new h({h:o,s:i,v:n,a:e}),this._opacity=e,this.host.requestUpdate("opacity",s)}get value(){return this.color}get color(){return this.getColorProcesses[this._format.format||"hex"](this._color,this._format.isString)}set color(t){if(t===this.color)return;const e=this._color;this._color=new h(t);const s=this._color.format;let o=typeof t=="string"||t instanceof String;s.startsWith("hex")&&(o=t.startsWith("#")),this._format={format:s,isString:o},this.setColorProcess(this._color,t,s,o),this.host.requestUpdate("color",e)}getColor(t){const e={hsl:"toHsl"};return this._color[e[t]]()}setColor(t){this._color=t;const e=typeof this._color.originalInput=="string"||this._color.originalInput instanceof String;this.setColorProcess(this._color,t,this._color.format,e)}getHslString(){return this._color.toHslString()}savePreviousColor(){this._previousColor=this._color.clone()}restorePreviousColor(){this.setColor(this._previousColor)}}const nt='.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 at=Object.defineProperty,ht=Object.getOwnPropertyDescriptor,p=(r,t,e,s)=>{for(var o=s>1?void 0:s?ht(t,e):t,i=r.length-1,n;i>=0;i--)(n=r[i])&&(o=(s?n(t,e,o):n(o))||o);return s&&o&&at(t,e,o),o};class u extends W.Focusable{constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.label="hue",this.vertical=!1,this.languageResolver=new j.LanguageResolutionController(this),this.colorController=new ot(this,{applyColorToState:()=>{if(this.mode==="opacity"){const t=new h(this.colorController.color);this.sliderHandlePosition=100*t.getAlpha()}else this.sliderHandlePosition=100*(this.colorController.hue/360)},extractColorFromState:t=>this.mode==="opacity"?{...t.getColor("hsl"),a:this.value}:{...t.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[b.r(nt)]}get value(){return this.mode==="opacity"?this.colorController.opacity:this.colorController.hue}set value(t){this.mode==="opacity"?this.colorController.opacity=t:this.colorController.hue=t}get color(){return this.colorController.color}set color(t){this.colorController.color=t}get altered(){return this._altered}set altered(t){this._altered=t,this.step=Math.max(1,this.altered*10)}get focusElement(){return this.input}handleKeydown(t){const{key:e}=t;this.focused=!0,this.altered=[t.shiftKey,t.ctrlKey,t.altKey].filter(n=>!!n).length;let s=0;switch(e){case"ArrowUp":{s=this.step;break}case"ArrowDown":{s=-this.step;break}case"ArrowLeft":{s=this.step*(this.isLTR?-1:1);break}case"ArrowRight":{s=this.step*(this.isLTR?1:-1);break}default:return}t.preventDefault();const i=100/(this.mode==="opacity"?100:360);this.sliderHandlePosition=Math.min(100,Math.max(0,this.sliderHandlePosition+s*i)),this.value=this.mode==="opacity"?Math.min(1,Math.max(0,this.value+s/100)):Math.min(360,Math.max(0,this.value+s)),this.colorController.applyColorFromState(),s!==0&&(this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}handleInput(t){const{valueAsNumber:e}=t.target;this.value=e,this.sliderHandlePosition=100*(this.mode==="opacity"?this.value:this.value/360),this.colorController.applyColorFromState()}handleChange(t){this.handleInput(t),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}focus(t={}){super.focus(t),this.forwardFocus()}forwardFocus(){this.input.focus()}handleFocus(){this.focused=!0}handleBlur(){this._pointerDown||(this.altered=0,this.focused=!1)}handlePointerdown(t){if(t.button!==0){t.preventDefault();return}this._pointerDown=!0,this.colorController.savePreviousColor(),this.boundingClientRect=this.getBoundingClientRect(),t.target.setPointerCapture(t.pointerId),t.pointerType==="mouse"&&(this.focused=!0)}handlePointermove(t){this.sliderHandlePosition=this.calculateHandlePosition(t),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(t){this._pointerDown=!1,t.target.releasePointerCapture(t.pointerId),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor(),this.focus(),t.pointerType==="mouse"&&(this.focused=!1)}calculateHandlePosition(t){if(!this.boundingClientRect)return this.sliderHandlePosition;const e=this.boundingClientRect,s=this.vertical?e.top:e.left,o=this.vertical?t.clientY:t.clientX,i=this.vertical?e.height:e.width,n=Math.max(0,Math.min(1,(o-s)/i));return this.vertical||!this.isLTR?100-100*n:100*n}handleGradientPointerdown(t){t.button===0&&(t.stopPropagation(),t.preventDefault(),this.handle.dispatchEvent(new PointerEvent("pointerdown",t)),this.handlePointermove(t))}get handlePositionStyles(){return`${this.vertical?"inset-block-end":"inset-inline-start"}: ${this.sliderHandlePosition}%`}get getColorSliderStyle(){const t=this.vertical?"top":"right";if(this.mode==="opacity"){const e=new h(this.colorController.color).setAlpha(1).toRgbString();return{background:`linear-gradient(to ${t}, transparent, ${e})`}}return{background:`linear-gradient(to ${t}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))`}}render(){return b.x`
+      <div
+        class="opacity-checkerboard checkerboard"
+        role="presentation"
+        @pointerdown=${this.handleGradientPointerdown}
+      >
+        <div
+          class="gradient"
+          role="presentation"
+          style=${O.o(this.getColorSliderStyle)}
+        >
+          <slot name="gradient"></slot>
+        </div>
+      </div>
+      <luzmo-color-handle
+        tabindex=${C.o(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}
+        ${U.streamingListener({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=${C.o(this.vertical?"vertical":void 0)}
+        orient=${C.o(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(t){super.firstUpdated(t),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener("focus",this.handleFocus),this.addEventListener("blur",this.handleBlur)}updated(t){t.has("mode")&&(this.handle.style.insetInlineStart="",this.handle.style.insetBlockEnd="",this.mode==="opacity"&&(this.colorController.color=new h(this.colorController.color).toRgbString(),this.handle.style.insetInlineStart=100*this.colorController.opacity+"%"))}}p([b.n({type:String,reflect:!0})],u.prototype,"dir",2);p([b.n({type:String,reflect:!0})],u.prototype,"mode",2);p([b.n({type:Boolean,reflect:!0})],u.prototype,"disabled",2);p([b.n({type:Boolean,reflect:!0})],u.prototype,"focused",2);p([D.e(".handle")],u.prototype,"handle",2);p([b.n({type:String})],u.prototype,"label",2);p([b.n({type:Boolean,reflect:!0})],u.prototype,"vertical",2);p([b.n({type:Number})],u.prototype,"value",1);p([b.n({type:Number,reflect:!0})],u.prototype,"sliderHandlePosition",2);p([b.n({type:String})],u.prototype,"color",1);p([b.n({type:Number})],u.prototype,"step",2);p([b.n({type:Boolean,attribute:"is-ltr"})],u.prototype,"isLTR",2);p([D.e("input")],u.prototype,"input",2);customElements.get("luzmo-color-slider")||customElements.define("luzmo-color-slider",u);exports.LuzmoColorSlider=u;exports.TinyColor=h;