@luzmo/lucero 1.0.1-alpha.17 → 1.0.1-alpha.19

package/components/color-slider/index.js

@@ -15,597 +15,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-const initializeGlobalLuzmoCSSVariables = () => {
-  if (typeof document !== "undefined" && !document.querySelector("style[data-luzmo-vars]")) {
-    const styleElement = document.createElement("style");
-    styleElement.setAttribute("data-luzmo-vars", "");
-    styleElement.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(styleElement);
+import { L as u } from "../index-D3ICqC7S.js";
+const l = () => {
+  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);
   }
 };
-initializeGlobalLuzmoCSSVariables();
-import { TinyColor } from "@ctrl/tinycolor";
-import { unsafeCSS, html } from "lit";
-import { property, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { styleMap } from "lit/directives/style-map.js";
-import "../color-handle/index.js";
-import { F as Focusable } from "../focusable-ChCLg1k4.js";
-import { L as LanguageResolutionController } from "../language-resolution-BSGJAWiQ.js";
-import { s as streamingListener } from "../streaming-listener-cAz5zJyk.js";
-const extractHueAndSaturationRegExp = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/;
-const replaceHueAndSaturationRegExp = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/;
-const replaceHueRegExp = /(^hs[v|l]a?\()\d{1,3}/;
-const getHexValue = (color, isString) => isString ? color.toHexString() : color.toHex();
-class ColorController {
-  constructor(host, {
-    applyColorToState,
-    extractColorFromState,
-    maintains
-  }) {
-    this.maintains = "hue";
-    this._hue = 0;
-    this._opacity = 1;
-    this.getColorProcesses = {
-      rgb: (color, isString) => isString ? color.toRgbString() : color.toRgb(),
-      prgb: (color, isString) => isString ? color.toPercentageRgbString() : color.toPercentageRgb(),
-      hex8: (color, isString) => isString ? color.toHex8String() : color.toHex8(),
-      name: (color) => color.toName() || color.toRgbString(),
-      hsl: (color, isString) => {
-        if (this.maintains === "hue") {
-          if (isString) {
-            const hslString = color.toHslString();
-            return hslString.replace(replaceHueRegExp, `$1${this.hue}`);
-          }
-          const { s: s2, l: l2, a: a2 } = color.toHsl();
-          return { h: this.hue, s: s2, l: l2, a: a2 };
-        }
-        if (isString) {
-          const hslString = color.toHslString();
-          return hslString.replace(
-            replaceHueAndSaturationRegExp,
-            `$1${this.hue}$2${this.saturation}`
-          );
-        }
-        const { s, l, a } = color.toHsl();
-        return { h: this.hue, s, l, a };
-      },
-      hsv: (color, isString) => {
-        if (this.maintains === "hue") {
-          if (isString) {
-            const hsvString = color.toHsvString();
-            return hsvString.replace(replaceHueRegExp, `$1${this.hue}`);
-          }
-          const { s: s2, v: v2, a: a2 } = color.toHsv();
-          return { h: this.hue, s: s2, v: v2, a: a2 };
-        }
-        if (isString) {
-          const hsvString = color.toHsvString();
-          return hsvString.replace(
-            replaceHueAndSaturationRegExp,
-            `$1${this.hue}$2${this.saturation}`
-          );
-        }
-        const { s, v, a } = color.toHsv();
-        return { h: this.hue, s, v, a };
-      },
-      hex: getHexValue,
-      hex3: getHexValue,
-      hex4: getHexValue,
-      hex6: getHexValue
-    };
-    this._color = new TinyColor({ h: 0, s: 1, v: 1 });
-    this._previousColor = new TinyColor({ h: 0, s: 1, v: 1 });
-    this._format = {
-      format: "",
-      isString: false
-    };
-    this.host = host;
-    this.applyColorToState = applyColorToState;
-    this.extractColorFromState = extractColorFromState;
-    this.maintains = maintains || this.maintains;
-  }
-  setColorProcess(currentColor, nextColor, format, isString) {
-    if (this.maintains === "hue") {
-      this.setColorMaintainHue(currentColor, nextColor, format, isString);
-    } else if (this.maintains === "saturation") {
-      this.setColorMaintainSaturation(
-        currentColor,
-        nextColor,
-        format,
-        isString
-      );
-    }
-  }
-  setColorMaintainHue(currentColor, nextColor, format, isString) {
-    const { h, s, v, a } = this._color.toHsv();
-    let originalHue;
-    if (isString && format.startsWith("hs")) {
-      const values = extractHueAndSaturationRegExp.exec(nextColor);
-      if (values !== null) {
-        const [, h2] = values;
-        originalHue = Number(h2);
-      }
-    } else if (!isString && format.startsWith("hs")) {
-      const colorInput = currentColor.originalInput;
-      const colorValues = Object.values(colorInput);
-      originalHue = colorValues[0];
-    }
-    this.hue = originalHue || h;
-    this.opacity = a ?? 1;
-    this.applyColorToState({ h, s, v, a });
-  }
-  setColorMaintainSaturation(currentColor, nextColor, format, isString) {
-    const { a } = this._color.toHsv();
-    if (isString && format.startsWith("hs")) {
-      const values = extractHueAndSaturationRegExp.exec(nextColor);
-      if (values !== null) {
-        const [, h, s] = values;
-        this.hue = Number(h);
-        this.saturation = Number(s);
-      }
-    } else if (!isString && format.startsWith("hs")) {
-      const colorInput = currentColor.originalInput;
-      const colorValues = Object.values(colorInput);
-      this.hue = colorValues[0];
-      this.saturation = colorValues[1];
-    } else {
-      const { h } = currentColor.toHsv();
-      this.hue = h;
-    }
-    this.opacity = a ?? 1;
-    this.applyColorToState(currentColor.toHsv());
-  }
-  applyColorFromState() {
-    this._color = new TinyColor(this.extractColorFromState(this));
-  }
-  get hue() {
-    return this._hue;
-  }
-  set hue(value) {
-    const hue = Math.min(360, Math.max(0, value));
-    if (hue === this.hue) {
-      return;
-    }
-    const oldValue = this.hue;
-    const { s, v, a } = this._color.toHsv();
-    this._color = new TinyColor({ h: hue, s, v, a });
-    this._hue = hue;
-    this.host.requestUpdate("hue", oldValue);
-  }
-  get opacity() {
-    return this._opacity;
-  }
-  set opacity(value) {
-    const opacity = Math.min(1, Math.max(0, value));
-    if (opacity === this.opacity) {
-      return;
-    }
-    const oldValue = this.opacity;
-    const { h, s, v } = this._color.toHsv();
-    this._color = new TinyColor({ h, s, v, a: opacity });
-    this._opacity = opacity;
-    this.host.requestUpdate("opacity", oldValue);
-  }
-  /* 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(color) {
-    if (color === this.color) {
-      return;
-    }
-    const oldValue = this._color;
-    this._color = new TinyColor(color);
-    const format = this._color.format;
-    let isString = typeof color === "string" || color instanceof String;
-    if (format.startsWith("hex")) {
-      isString = color.startsWith("#");
-    }
-    this._format = {
-      format,
-      isString
-    };
-    this.setColorProcess(this._color, color, format, isString);
-    this.host.requestUpdate("color", oldValue);
-  }
-  getColor(format) {
-    const formatOptions = {
-      hsl: "toHsl"
-    };
-    return this._color[formatOptions[format]]();
-  }
-  setColor(color) {
-    this._color = color;
-    const isString = typeof this._color.originalInput === "string" || this._color.originalInput instanceof String;
-    this.setColorProcess(this._color, color, this._color.format, isString);
-  }
-  getHslString() {
-    return this._color.toHslString();
-  }
-  savePreviousColor() {
-    this._previousColor = this._color.clone();
-  }
-  restorePreviousColor() {
-    this.setColor(this._previousColor);
-  }
-}
-const styles = '.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 __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-class LuzmoColorSlider extends Focusable {
-  constructor() {
-    super(...arguments);
-    this.disabled = false;
-    this.focused = false;
-    this.label = "hue";
-    this.vertical = false;
-    this.languageResolver = new LanguageResolutionController(this);
-    this.colorController = new ColorController(this, {
-      /* c8 ignore next 3 */
-      applyColorToState: () => {
-        if (this.mode === "opacity") {
-          const color = new TinyColor(this.colorController.color);
-          this.sliderHandlePosition = 100 * color.getAlpha();
-        } else {
-          this.sliderHandlePosition = 100 * (this.colorController.hue / 360);
-        }
-      },
-      extractColorFromState: (controller) => {
-        if (this.mode === "opacity") {
-          return {
-            ...controller.getColor("hsl"),
-            a: this.value
-          };
-        }
-        return {
-          ...controller.getColor("hsl"),
-          h: this.value
-        };
-      },
-      maintains: "saturation"
-    });
-    this.sliderHandlePosition = 0;
-    this.step = 1;
-    this.isLTR = true;
-    this._altered = 0;
-    this._pointerDown = false;
-  }
-  static get styles() {
-    return [unsafeCSS(styles)];
-  }
-  get value() {
-    if (this.mode === "opacity") {
-      return this.colorController.opacity;
-    }
-    return this.colorController.hue;
-  }
-  set value(value) {
-    if (this.mode === "opacity") {
-      this.colorController.opacity = value;
-    } else {
-      this.colorController.hue = value;
-    }
-  }
-  get color() {
-    return this.colorController.color;
-  }
-  set color(color) {
-    this.colorController.color = color;
-  }
-  get altered() {
-    return this._altered;
-  }
-  set altered(altered) {
-    this._altered = altered;
-    this.step = Math.max(1, this.altered * 10);
-  }
-  get focusElement() {
-    return this.input;
-  }
-  handleKeydown(event) {
-    const { key } = event;
-    this.focused = true;
-    this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(
-      (_key) => !!_key
-    ).length;
-    let delta = 0;
-    switch (key) {
-      case "ArrowUp": {
-        delta = this.step;
-        break;
-      }
-      case "ArrowDown": {
-        delta = -this.step;
-        break;
-      }
-      case "ArrowLeft": {
-        delta = this.step * (this.isLTR ? -1 : 1);
-        break;
-      }
-      case "ArrowRight": {
-        delta = this.step * (this.isLTR ? 1 : -1);
-        break;
-      }
-      default: {
-        return;
-      }
-    }
-    event.preventDefault();
-    const range = this.mode === "opacity" ? 100 : 360;
-    const mult = 100 / range;
-    this.sliderHandlePosition = Math.min(
-      100,
-      Math.max(0, this.sliderHandlePosition + delta * mult)
-    );
-    this.value = this.mode === "opacity" ? Math.min(1, Math.max(0, this.value + delta / 100)) : Math.min(360, Math.max(0, this.value + delta));
-    this.colorController.applyColorFromState();
-    if (delta !== 0) {
-      this.dispatchEvent(
-        new Event("input", {
-          bubbles: true,
-          composed: true
-        })
-      );
-      this.dispatchEvent(
-        new Event("change", {
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-  }
-  handleInput(event) {
-    const { valueAsNumber } = event.target;
-    this.value = valueAsNumber;
-    this.sliderHandlePosition = 100 * (this.mode === "opacity" ? this.value : this.value / 360);
-    this.colorController.applyColorFromState();
-  }
-  handleChange(event) {
-    this.handleInput(event);
-    this.dispatchEvent(
-      new Event("change", {
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  focus(focusOptions = {}) {
-    super.focus(focusOptions);
-    this.forwardFocus();
-  }
-  forwardFocus() {
-    this.input.focus();
-  }
-  handleFocus() {
-    this.focused = true;
-  }
-  handleBlur() {
-    if (this._pointerDown) {
-      return;
-    }
-    this.altered = 0;
-    this.focused = false;
-  }
-  handlePointerdown(event) {
-    if (event.button !== 0) {
-      event.preventDefault();
-      return;
-    }
-    this._pointerDown = true;
-    this.colorController.savePreviousColor();
-    this.boundingClientRect = this.getBoundingClientRect();
-    event.target.setPointerCapture(event.pointerId);
-    if (event.pointerType === "mouse") {
-      this.focused = true;
-    }
-  }
-  handlePointermove(event) {
-    this.sliderHandlePosition = this.calculateHandlePosition(event);
-    this.value = (this.mode === "opacity" ? 1 : 360) * (this.sliderHandlePosition / 100);
-    this.colorController.applyColorFromState();
-    this.dispatchEvent(
-      new Event("input", {
-        bubbles: true,
-        composed: true,
-        cancelable: true
-      })
-    );
-  }
-  handlePointerup(event) {
-    this._pointerDown = false;
-    event.target.releasePointerCapture(event.pointerId);
-    const applyDefault = this.dispatchEvent(
-      new Event("change", {
-        bubbles: true,
-        composed: true,
-        cancelable: true
-      })
-    );
-    if (!applyDefault) {
-      this.colorController.restorePreviousColor();
-    }
-    this.focus();
-    if (event.pointerType === "mouse") {
-      this.focused = false;
-    }
-  }
-  /**
-   * Returns the value under the cursor
-   * @param: PointerEvent on slider
-   * @return: Slider value that correlates to the position under the pointer
-   */
-  calculateHandlePosition(event) {
-    if (!this.boundingClientRect) {
-      return this.sliderHandlePosition;
-    }
-    const rect = this.boundingClientRect;
-    const minOffset = this.vertical ? rect.top : rect.left;
-    const offset = this.vertical ? event.clientY : event.clientX;
-    const size = this.vertical ? rect.height : rect.width;
-    const percent = Math.max(0, Math.min(1, (offset - minOffset) / size));
-    const sliderHandlePosition = this.vertical || !this.isLTR ? 100 - 100 * percent : 100 * percent;
-    return sliderHandlePosition;
-  }
-  handleGradientPointerdown(event) {
-    if (event.button !== 0) {
-      return;
-    }
-    event.stopPropagation();
-    event.preventDefault();
-    this.handle.dispatchEvent(new PointerEvent("pointerdown", event));
-    this.handlePointermove(event);
-  }
-  get handlePositionStyles() {
-    return `${this.vertical ? "inset-block-end" : "inset-inline-start"}: ${this.sliderHandlePosition}%`;
-  }
-  get getColorSliderStyle() {
-    const orientation = this.vertical ? "top" : "right";
-    if (this.mode === "opacity") {
-      const color = new TinyColor(this.colorController.color).setAlpha(1).toRgbString();
-      return {
-        background: `linear-gradient(to ${orientation}, transparent, ${color})`
-      };
-    }
-    return {
-      background: `linear-gradient(to ${orientation}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))`
-    };
-  }
-  render() {
-    return html`
-      <div
-        class="opacity-checkerboard checkerboard"
-        role="presentation"
-        @pointerdown=${this.handleGradientPointerdown}
-      >
-        <div
-          class="gradient"
-          role="presentation"
-          style=${styleMap(this.getColorSliderStyle)}
-        >
-          <slot name="gradient"></slot>
-        </div>
-      </div>
-      <luzmo-color-handle
-        tabindex=${ifDefined(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}
-        ${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=${ifDefined(this.vertical ? "vertical" : void 0)}
-        orient=${ifDefined(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(changed) {
-    super.firstUpdated(changed);
-    this.boundingClientRect = this.getBoundingClientRect();
-    this.addEventListener("focus", this.handleFocus);
-    this.addEventListener("blur", this.handleBlur);
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("mode")) {
-      this.handle.style.insetInlineStart = "";
-      this.handle.style.insetBlockEnd = "";
-      if (this.mode === "opacity") {
-        this.colorController.color = new TinyColor(
-          this.colorController.color
-        ).toRgbString();
-        this.handle.style.insetInlineStart = 100 * this.colorController.opacity + "%";
-      }
-    }
-  }
-}
-__decorateClass([
-  property({ type: String, reflect: true })
-], LuzmoColorSlider.prototype, "dir", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LuzmoColorSlider.prototype, "mode", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LuzmoColorSlider.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LuzmoColorSlider.prototype, "focused", 2);
-__decorateClass([
-  query(".handle")
-], LuzmoColorSlider.prototype, "handle", 2);
-__decorateClass([
-  property({ type: String })
-], LuzmoColorSlider.prototype, "label", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LuzmoColorSlider.prototype, "vertical", 2);
-__decorateClass([
-  property({ type: Number })
-], LuzmoColorSlider.prototype, "value", 1);
-__decorateClass([
-  property({ type: Number, reflect: true })
-], LuzmoColorSlider.prototype, "sliderHandlePosition", 2);
-__decorateClass([
-  property({ type: String })
-], LuzmoColorSlider.prototype, "color", 1);
-__decorateClass([
-  property({ type: Number })
-], LuzmoColorSlider.prototype, "step", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "is-ltr" })
-], LuzmoColorSlider.prototype, "isLTR", 2);
-__decorateClass([
-  query("input")
-], LuzmoColorSlider.prototype, "input", 2);
-if (!customElements.get("luzmo-color-slider")) {
-  customElements.define("luzmo-color-slider", LuzmoColorSlider);
-}
+l();
 export {
-  LuzmoColorSlider
+  u as LuzmoColorSlider
 };

package/components/condition-attribute-with-id-DrQYZzFS.cjs

@@ -0,0 +1,18 @@
+/*! * 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";function o(t,i,r){const e=t.getAttribute(i);let s=e?e.split(/\s+/):[];s=s.filter(n=>!r.includes(n)),s.length>0?t.setAttribute(i,s.join(" ")):t.removeAttribute(i)}function d(t,i,r){const e=Array.isArray(r)?r:[r],s=t.getAttribute(i),n=s?s.split(/\s+/):[];return e.every(c=>n.includes(c))?()=>{}:(n.push(...e),t.setAttribute(i,n.join(" ")),()=>o(t,i,e))}exports.conditionAttributeWithId=d;exports.conditionAttributeWithoutId=o;

package/components/condition-attribute-with-id-Dv4lSRbe.js

@@ -0,0 +1,31 @@
+/*! * 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.
+ * */
+function c(t, s, r) {
+  const e = t.getAttribute(s);
+  let i = e ? e.split(/\s+/) : [];
+  i = i.filter((n) => !r.includes(n)), i.length > 0 ? t.setAttribute(s, i.join(" ")) : t.removeAttribute(s);
+}
+function u(t, s, r) {
+  const e = Array.isArray(r) ? r : [r], i = t.getAttribute(s), n = i ? i.split(/\s+/) : [];
+  return e.every((o) => n.includes(o)) ? () => {
+  } : (n.push(...e), t.setAttribute(s, n.join(" ")), () => c(t, s, e));
+}
+export {
+  c as a,
+  u as c
+};