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

package/components/color-menu/index.cjs

@@ -15,182 +15,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tinycolor = require("@ctrl/tinycolor");
-const icons = require("@luzmo/icons");
-const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const focusable = require("../focusable-BPrTcZPd.cjs");
-const sizedMixin = require("../sized-mixin-UaTVa-AE.cjs");
-require("../color-area/index.cjs");
-require("../color-field/index.cjs");
-require("../color-handle/index.cjs");
-require("../color-slider/index.cjs");
-require("../divider/index.cjs");
-require("../popover/index.cjs");
-require("../swatch/index.cjs");
-const styles = '@charset "UTF-8";:host{width:var(--luzmo-color-menu-width, var(--color-menu-width))}.hue-opacity-text-swatches-container{display:flex;gap:var(--luzmo-color-menu-color-controls-vertical-gap, var(--color-menu-color-controls-vertical-gap));flex-direction:column;padding:var(--luzmo-color-menu-hue-opacity-text-swatches-vertical-padding, var(--color-menu-hue-opacity-text-swatches-vertical-padding)) var(--luzmo-color-menu-hue-opacity-text-swatches-horizontal-padding, var(--color-menu-hue-opacity-text-swatches-horizontal-padding))}.swatch-sliders-container{display:flex;gap:var(--luzmo-color-menu-swatch-to-sliders-space, var(--color-menu-swatch-to-sliders-space))}.swatch-example-container{display:flex;align-items:center}.field-container{display:flex;align-items:center;gap:var(--luzmo-color-menu-format-field-to-format-space, var(--color-menu-format-field-to-format-space))}.format-container{text-transform:uppercase;position:relative;background:none;border:none;outline:none;height:var(--luzmo-color-menu-format-height, var(--color-menu-format-height));cursor:pointer;font-size:var(--luzmo-color-menu-format-font-size, var(--color-menu-format-font-size));display:flex;align-items:center;color:var(--luzmo-color-menu-format-font-color, var(--color-menu-format-font-color));gap:var(--luzmo-color-menu-format-name-to-icon, var(--color-menu-format-name-to-icon-space));padding:0 var(--luzmo-color-menu-format-horizontal-padding, var(--color-menu-format-horizontal-padding))}.format-container:hover{color:var(--luzmo-color-menu-format-font-color-hover, var(--color-menu-format-font-color-hover))}.format-container:focus-visible{outline:none}.format-container:focus-visible:after{content:"";width:100%;height:100%;position:absolute;box-sizing:border-box;left:0;top:0;border:var(--luzmo-color-menu-format-indicator-width, var(--luzmo-indicator-width)) solid var(--luzmo-color-menu-format-indicator-color, var(--luzmo-indicator-color));border-radius:var(--luzmo-color-menu-format-label-indicator-border-radius, var(--luzmo-border-radius-s))}.format-container:focus-visible,.format-container:active{color:var(--luzmo-color-menu-format-font-color-down, var(--color-menu-format-font-color-down))}.format-container .format-label{-webkit-user-select:none;user-select:none}.format-container .angle-icon{display:flex;align-items:center;height:calc(var(--color-menu-format-font-size) / 1.5)}.slider-container{display:flex;flex-direction:column;justify-content:center;gap:var(--luzmo-color-menu-slider-gap, var(--color-menu-slider-gap))}luzmo-color-area{width:100%;height:var(--luzmo-color-menu-height, var(--color-menu-height))}luzmo-color-slider{width:100%}luzmo-divider{margin:var(--luzmo-spacing-5) à}.swatches-container{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--luzmo-color-menu-swatches-gap, var(--color-menu-swatches-gap))}.swatches-container luzmo-swatch{cursor:pointer}.swatches-container .swatch-choice{display:flex;align-items:center;justify-content:center}:host{--luzmo-text-field-icon-size-valid: 0px;--luzmo-text-field-icon-spacing-inline-end-valid: 1px;--luzmo-text-field-text-align: center}:host{--color-menu-width: 290px;--luzmo-text-field-width: 220px;--luzmo-color-slider-control-track-width: 8px;--color-menu-height: 140px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-5 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-5);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height);--color-menu-format-font-size: var(--luzmo-font-size-s);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-2);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-3);--color-menu-format-font-color: var(--luzmo-font-color);--color-menu-format-font-color-hover: var(--luzmo-font-color-hover);--color-menu-format-font-color-down: var(--luzmo-font-color-down);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host .swatches-container{--luzmo-swatch-size: 22px}:host([size=s]){--color-menu-width: 260px;--luzmo-text-field-width: 200px;--luzmo-color-slider-control-track-width: 8px;--color-menu-hue-opacity-text-swatches-horizontal-padding: var( --luzmo-spacing-5 );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-4 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-4);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-4);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height-s);--color-menu-format-font-size: var(--luzmo-font-size-xs);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-2);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-2);--color-menu-swatches-gap: var(--luzmo-spacing-3)}:host([size=s]) .swatches-container{--luzmo-swatch-size: 20px}:host([size=l]){--color-menu-width: 350px;--luzmo-text-field-width: 240px;--luzmo-color-slider-control-track-width: 16px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-5 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-5);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-format-height: var(--luzmo-component-height-l);--color-menu-format-font-size: var(--luzmo-font-size);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-3);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-4);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host([size=l]) .swatches-container{--luzmo-swatch-size: 24px}:host([size=l]) .swatch-example-container{--luzmo-swatch-size: 56px}:host([size=xl]){--color-menu-width: 380px;--luzmo-text-field-width: 280px;--luzmo-color-slider-control-track-width: 16px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-hue-opacity-text-swatches-vertical-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-color-controls-vertical-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-swatch-to-sliders-space: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height-xl);--color-menu-format-font-size: var(--luzmo-font-size-l);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-3);--color-menu-format-field-to-format-space: var(--luzmo-spacing-3);--color-menu-format-horizontal-padding: var(--luzmo-spacing-4);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host([size=xl]) .swatches-container{--luzmo-swatch-size: 26px}:host([size=xl]) .swatch-example-container{--luzmo-swatch-size: 64px}';
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const _LuzmoColorMenu = class _LuzmoColorMenu extends sizedMixin.SizedMixin(focusable.Focusable) {
-  constructor() {
-    super(...arguments);
-    this.color = "rgb(255, 0, 0)";
-    this.noAlphaChannel = false;
-    this._alpha = 1;
-    this._rgbColor = "rgb(255, 0, 0)";
-    this._rgbaColor = "rgb(255, 0, 0, 1)";
-    this._previousColor = "rgb(255, 0, 0)";
-  }
-  setColor(event) {
-    var _a;
-    const color = new tinycolor.TinyColor((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.color);
-    this._format = color.format === "name" ? "rgb" : color.format;
-    this._rgbaColor = color.toRgbString();
-    this._alpha = this.noAlphaChannel ? 1 : color.getAlpha();
-    this._rgbColor = color.setAlpha(1).toRgbString();
-    this.hueSliderElement.color = this._rgbColor;
-    this.areaElement.color = this._rgbColor;
-    if (!this.noAlphaChannel) {
-      this.opacitySliderElement.color = this._rgbaColor;
-    }
-    this.swatchElement.color = this._rgbaColor;
-    this.colorFieldElement.value = this.formatTextField(color);
-    this._previousColor = this._rgbaColor;
-    this.color = this._rgbaColor;
-    this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
-  }
-  handleAreaChange(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    this._rgbColor = this.areaElement.color;
-    const newColor = new tinycolor.TinyColor(this._rgbColor);
-    this._rgbaColor = newColor.setAlpha(this._alpha).toRgbString();
-    this.colorFieldElement.value = this._rgbaColor;
-    if (!this.noAlphaChannel) {
-      this.opacitySliderElement.color = this._rgbaColor;
-    }
-    this.colorFieldElement.value = this.formatTextField(newColor);
-    this.swatchElement.color = this._rgbaColor;
-    this._previousColor = this._rgbaColor;
-    this.color = this._rgbaColor;
-    this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
-  }
-  get focusElement() {
-    return this.areaElement || this.colorFieldElement || this;
-  }
-  handleHueSliderChange(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    const color = new tinycolor.TinyColor(this._rgbColor).toHsl();
-    color.h = this.hueSliderElement.value;
-    const newColor = new tinycolor.TinyColor(color);
-    this._rgbColor = newColor.toRgbString();
-    this._rgbaColor = newColor.setAlpha(this._alpha).toRgbString();
-    this.areaElement.color = `hsla(${color.h}, ${color.s * 100}%, ${color.l * 100}%, ${color.a})`;
-    if (!this.noAlphaChannel) {
-      this.opacitySliderElement.color = this._rgbaColor;
-    }
-    this.colorFieldElement.value = this.formatTextField(newColor);
-    this.swatchElement.color = this._rgbaColor;
-    this._previousColor = this._rgbaColor;
-    this.color = this._rgbaColor;
-    this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
-  }
-  handleOpacitySliderChange(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    this._alpha = this.opacitySliderElement.sliderHandlePosition / 100;
-    const newColor = new tinycolor.TinyColor(this._rgbColor).setAlpha(this._alpha);
-    this._rgbaColor = newColor.toRgbString();
-    this.colorFieldElement.value = this.formatTextField(newColor);
-    this.swatchElement.color = this._rgbaColor;
-    this._previousColor = this._rgbaColor;
-    this.color = this._rgbaColor;
-    this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
-  }
-  handleFieldChange(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    if (this.colorFieldElement.checkValidity()) {
-      const color = new tinycolor.TinyColor(this.colorFieldElement.value);
-      this._format = color.format;
-      this._rgbaColor = color.toRgbString();
-      this._alpha = color.getAlpha();
-      this._rgbColor = color.setAlpha(1).toRgbString();
-      if (this.noAlphaChannel) {
-        this._rgbaColor = this._rgbColor;
-        this._alpha = 1;
-      }
-      this.hueSliderElement.color = this._rgbColor;
-      this.areaElement.color = this._rgbColor;
-      if (!this.noAlphaChannel) {
-        this.opacitySliderElement.color = this._rgbaColor;
-      }
-      this.swatchElement.color = this._rgbaColor;
-      this._previousColor = this._rgbaColor;
-      this.color = this._rgbaColor;
-      this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
-    }
-  }
-  formatTextField(tinyColor) {
-    if (this._format === "hsl") {
-      return tinyColor.toHslString();
-    } else if (this._format === "hex") {
-      return this.noAlphaChannel ? tinyColor.toHexString() : tinyColor.toHex8String();
-    } else if (this._format === "name") {
-      this._format = "rgb";
-    }
-    return tinyColor.toRgbString();
-  }
-  cycleFormat() {
-    const formats = ["rgb", "hsl", "hex"];
-    this._format = formats[(formats.indexOf(this._format) + 1) % formats.length];
-    const color = new tinycolor.TinyColor(this.color);
-    const colorString = this.formatTextField(color);
-    this.colorFieldElement.value = colorString;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("color") && this.color !== this._previousColor) {
-      this._previousColor = this.color;
-      const color = new tinycolor.TinyColor(this.color);
-      this._alpha = color.getAlpha();
-      this._rgbColor = color.setAlpha(1).toRgbString();
-      this._rgbaColor = color.setAlpha(this._alpha).toRgbString();
-      this.areaElement.color = this._rgbColor;
-      this.hueSliderElement.color = this._rgbColor;
-      this.colorFieldElement.value = this._rgbaColor;
-      if (!this.noAlphaChannel) {
-        this.opacitySliderElement.color = this._rgbaColor;
-      }
-      this.swatchElement.color = this._rgbaColor;
-      this._format = "rgb";
-    }
-    if (changedProperties.has("noAlphaChannel") && !this.noAlphaChannel) {
-      this.opacitySliderElement.color = this._rgbaColor;
-    }
-  }
-  renderOpacitySlider() {
-    return lit.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../luzmo-icons-CtA-TJPd.cjs"),i=require("../base-Cy0MQrPT.cjs"),d=require("../state-vf0PJN3_.cjs"),n=require("../query-BL-TJj7K.cjs"),g=require("../focusable-B_KwfEec.cjs"),f=require("../sized-mixin-WPHH0a_D.cjs");require("../color-area/index.cjs");require("../color-field/index.cjs");require("../color-handle/index.cjs");const a=require("../index-CNK8wHXu.cjs");require("../divider/index.cjs");require("../popover/index.cjs");require("../swatch/index.cjs");const v='@charset "UTF-8";:host{width:var(--luzmo-color-menu-width, var(--color-menu-width))}.hue-opacity-text-swatches-container{display:flex;gap:var(--luzmo-color-menu-color-controls-vertical-gap, var(--color-menu-color-controls-vertical-gap));flex-direction:column;padding:var(--luzmo-color-menu-hue-opacity-text-swatches-vertical-padding, var(--color-menu-hue-opacity-text-swatches-vertical-padding)) var(--luzmo-color-menu-hue-opacity-text-swatches-horizontal-padding, var(--color-menu-hue-opacity-text-swatches-horizontal-padding))}.swatch-sliders-container{display:flex;gap:var(--luzmo-color-menu-swatch-to-sliders-space, var(--color-menu-swatch-to-sliders-space))}.swatch-example-container{display:flex;align-items:center}.field-container{display:flex;align-items:center;gap:var(--luzmo-color-menu-format-field-to-format-space, var(--color-menu-format-field-to-format-space))}.format-container{text-transform:uppercase;position:relative;background:none;border:none;outline:none;height:var(--luzmo-color-menu-format-height, var(--color-menu-format-height));cursor:pointer;font-size:var(--luzmo-color-menu-format-font-size, var(--color-menu-format-font-size));display:flex;align-items:center;color:var(--luzmo-color-menu-format-font-color, var(--color-menu-format-font-color));gap:var(--luzmo-color-menu-format-name-to-icon, var(--color-menu-format-name-to-icon-space));padding:0 var(--luzmo-color-menu-format-horizontal-padding, var(--color-menu-format-horizontal-padding))}.format-container:hover{color:var(--luzmo-color-menu-format-font-color-hover, var(--color-menu-format-font-color-hover))}.format-container:focus-visible{outline:none}.format-container:focus-visible:after{content:"";width:100%;height:100%;position:absolute;box-sizing:border-box;left:0;top:0;border:var(--luzmo-color-menu-format-indicator-width, var(--luzmo-indicator-width)) solid var(--luzmo-color-menu-format-indicator-color, var(--luzmo-indicator-color));border-radius:var(--luzmo-color-menu-format-label-indicator-border-radius, var(--luzmo-border-radius-s))}.format-container:focus-visible,.format-container:active{color:var(--luzmo-color-menu-format-font-color-down, var(--color-menu-format-font-color-down))}.format-container .format-label{-webkit-user-select:none;user-select:none}.format-container .angle-icon{display:flex;align-items:center;height:calc(var(--color-menu-format-font-size) / 1.5)}.slider-container{display:flex;flex-direction:column;justify-content:center;gap:var(--luzmo-color-menu-slider-gap, var(--color-menu-slider-gap))}luzmo-color-area{width:100%;height:var(--luzmo-color-menu-height, var(--color-menu-height))}luzmo-color-slider{width:100%}luzmo-divider{margin:var(--luzmo-spacing-5) à}.swatches-container{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--luzmo-color-menu-swatches-gap, var(--color-menu-swatches-gap))}.swatches-container luzmo-swatch{cursor:pointer}.swatches-container .swatch-choice{display:flex;align-items:center;justify-content:center}:host{--luzmo-text-field-icon-size-valid: 0px;--luzmo-text-field-icon-spacing-inline-end-valid: 1px;--luzmo-text-field-text-align: center}:host{--color-menu-width: 290px;--luzmo-text-field-width: 220px;--luzmo-color-slider-control-track-width: 8px;--color-menu-height: 140px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-5 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-5);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height);--color-menu-format-font-size: var(--luzmo-font-size-s);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-2);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-3);--color-menu-format-font-color: var(--luzmo-font-color);--color-menu-format-font-color-hover: var(--luzmo-font-color-hover);--color-menu-format-font-color-down: var(--luzmo-font-color-down);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host .swatches-container{--luzmo-swatch-size: 22px}:host([size=s]){--color-menu-width: 260px;--luzmo-text-field-width: 200px;--luzmo-color-slider-control-track-width: 8px;--color-menu-hue-opacity-text-swatches-horizontal-padding: var( --luzmo-spacing-5 );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-4 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-4);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-4);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height-s);--color-menu-format-font-size: var(--luzmo-font-size-xs);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-2);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-2);--color-menu-swatches-gap: var(--luzmo-spacing-3)}:host([size=s]) .swatches-container{--luzmo-swatch-size: 20px}:host([size=l]){--color-menu-width: 350px;--luzmo-text-field-width: 240px;--luzmo-color-slider-control-track-width: 16px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-hue-opacity-text-swatches-vertical-padding: var( --luzmo-spacing-5 );--color-menu-color-controls-vertical-gap: var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space: var(--luzmo-spacing-5);--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-format-height: var(--luzmo-component-height-l);--color-menu-format-font-size: var(--luzmo-font-size);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-3);--color-menu-format-field-to-format-space: var(--luzmo-spacing-2);--color-menu-format-horizontal-padding: var(--luzmo-spacing-4);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host([size=l]) .swatches-container{--luzmo-swatch-size: 24px}:host([size=l]) .swatch-example-container{--luzmo-swatch-size: 56px}:host([size=xl]){--color-menu-width: 380px;--luzmo-text-field-width: 280px;--luzmo-color-slider-control-track-width: 16px;--color-menu-hue-opacity-text-swatches-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--color-menu-hue-opacity-text-swatches-vertical-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-color-controls-vertical-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-swatch-to-sliders-space: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-slider-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--color-menu-format-height: var(--luzmo-component-height-xl);--color-menu-format-font-size: var(--luzmo-font-size-l);--color-menu-format-name-to-icon-space: var(--luzmo-spacing-3);--color-menu-format-field-to-format-space: var(--luzmo-spacing-3);--color-menu-format-horizontal-padding: var(--luzmo-spacing-4);--color-menu-swatches-gap: var(--luzmo-spacing-4)}:host([size=xl]) .swatches-container{--luzmo-swatch-size: 26px}:host([size=xl]) .swatch-example-container{--luzmo-swatch-size: 64px}';var z=Object.defineProperty,l=(u,t,o,e)=>{for(var s=void 0,h=u.length-1,p;h>=0;h--)(p=u[h])&&(s=p(t,o,s)||s);return s&&z(t,o,s),s};const m=class m extends f.SizedMixin(g.Focusable){constructor(){super(...arguments),this.color="rgb(255, 0, 0)",this.noAlphaChannel=!1,this._alpha=1,this._rgbColor="rgb(255, 0, 0)",this._rgbaColor="rgb(255, 0, 0, 1)",this._previousColor="rgb(255, 0, 0)"}setColor(t){var e;const o=new a.TinyColor((e=t==null?void 0:t.target)==null?void 0:e.color);this._format=o.format==="name"?"rgb":o.format,this._rgbaColor=o.toRgbString(),this._alpha=this.noAlphaChannel?1:o.getAlpha(),this._rgbColor=o.setAlpha(1).toRgbString(),this.hueSliderElement.color=this._rgbColor,this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this.colorFieldElement.value=this.formatTextField(o),this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}handleAreaChange(t){t.stopPropagation(),t.preventDefault(),this._rgbColor=this.areaElement.color;const o=new a.TinyColor(this._rgbColor);this._rgbaColor=o.setAlpha(this._alpha).toRgbString(),this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(o),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}get focusElement(){return this.areaElement||this.colorFieldElement||this}handleHueSliderChange(t){t.stopPropagation(),t.preventDefault();const o=new a.TinyColor(this._rgbColor).toHsl();o.h=this.hueSliderElement.value;const e=new a.TinyColor(o);this._rgbColor=e.toRgbString(),this._rgbaColor=e.setAlpha(this._alpha).toRgbString(),this.areaElement.color=`hsla(${o.h}, ${o.s*100}%, ${o.l*100}%, ${o.a})`,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(e),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}handleOpacitySliderChange(t){t.stopPropagation(),t.preventDefault(),this._alpha=this.opacitySliderElement.sliderHandlePosition/100;const o=new a.TinyColor(this._rgbColor).setAlpha(this._alpha);this._rgbaColor=o.toRgbString(),this.colorFieldElement.value=this.formatTextField(o),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}handleFieldChange(t){if(t.stopPropagation(),t.preventDefault(),this.colorFieldElement.checkValidity()){const o=new a.TinyColor(this.colorFieldElement.value);this._format=o.format,this._rgbaColor=o.toRgbString(),this._alpha=o.getAlpha(),this._rgbColor=o.setAlpha(1).toRgbString(),this.noAlphaChannel&&(this._rgbaColor=this._rgbColor,this._alpha=1),this.hueSliderElement.color=this._rgbColor,this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}}formatTextField(t){return this._format==="hsl"?t.toHslString():this._format==="hex"?this.noAlphaChannel?t.toHexString():t.toHex8String():(this._format==="name"&&(this._format="rgb"),t.toRgbString())}cycleFormat(){const t=["rgb","hsl","hex"];this._format=t[(t.indexOf(this._format)+1)%t.length];const o=new a.TinyColor(this.color),e=this.formatTextField(o);this.colorFieldElement.value=e}updated(t){if(t.has("color")&&this.color!==this._previousColor){this._previousColor=this.color;const o=new a.TinyColor(this.color);this._alpha=o.getAlpha(),this._rgbColor=o.setAlpha(1).toRgbString(),this._rgbaColor=o.setAlpha(this._alpha).toRgbString(),this.areaElement.color=this._rgbColor,this.hueSliderElement.color=this._rgbColor,this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this._format="rgb"}t.has("noAlphaChannel")&&!this.noAlphaChannel&&(this.opacitySliderElement.color=this._rgbaColor)}renderOpacitySlider(){return i.x`
       <luzmo-color-slider
         id="luzmo-opacity-slider"
         mode="opacity"
         @input=${this.handleOpacitySliderChange}
       >
       </luzmo-color-slider>
-    `;
-  }
-  render() {
-    var _a;
-    return lit.html`
+    `}render(){var t;return i.x`
       <div id="color-menu" tabindex="0">
         <luzmo-color-area
           .size=${this.size}
@@ -201,7 +33,7 @@ const _LuzmoColorMenu = class _LuzmoColorMenu extends sizedMixin.SizedMixin(focu
             <div class="swatch-example-container">
               <luzmo-swatch
                 rounding="full"
-                .size=${this.noAlphaChannel && ["s", "m"].includes(this.size) ? "s" : "l"}
+                .size=${this.noAlphaChannel&&["s","m"].includes(this.size)?"s":"l"}
                 readonly
               ></luzmo-swatch>
             </div>
@@ -211,7 +43,7 @@ const _LuzmoColorMenu = class _LuzmoColorMenu extends sizedMixin.SizedMixin(focu
                 @input=${this.handleHueSliderChange}
               >
               </luzmo-color-slider>
-              ${this.noAlphaChannel ? "" : this.renderOpacitySlider()}
+              ${this.noAlphaChannel?"":this.renderOpacitySlider()}
             </div>
           </div>
           <div class="field-container">
@@ -228,64 +60,27 @@ const _LuzmoColorMenu = class _LuzmoColorMenu extends sizedMixin.SizedMixin(focu
             >
               <div class="format-label">${this._format}</div>
               <div class="change-format-icon">
-                <div class="angle-icon">${icons.luzmoIcon(icons.luzmoAngleUp)}</div>
-                <div class="angle-icon">${icons.luzmoIcon(icons.luzmoAngleDown)}</div>
+                <div class="angle-icon">${c.T3(c.b)}</div>
+                <div class="angle-icon">${c.T3(c.T)}</div>
               </div>
             </button>
           </div>
-          ${((_a = this.swatches) == null ? void 0 : _a.length) > 0 ? lit.html`
+          ${((t=this.swatches)==null?void 0:t.length)>0?i.x`
                 <luzmo-divider></luzmo-divider>
                 <div class="swatches-container">
-                  ${this.swatches.map(
-      (color) => lit.html`
+                  ${this.swatches.map(o=>i.x`
                       <div class="swatch-choice">
                         <luzmo-swatch
                           @click=${this.setColor}
-                          .color=${color}
+                          .color=${o}
                           .size=${this.size}
                           readonly
                         >
                         </luzmo-swatch>
                       </div>
-                    `
-    )}
+                    `)}
                 </div>
-              ` : ""}
+              `:""}
         </div>
       </div>
-    `;
-  }
-};
-_LuzmoColorMenu.styles = lit.unsafeCSS(styles);
-let LuzmoColorMenu = _LuzmoColorMenu;
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], LuzmoColorMenu.prototype, "color");
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: "no-alpha-channel" })
-], LuzmoColorMenu.prototype, "noAlphaChannel");
-__decorateClass([
-  decorators_js.property({ type: Array, reflect: true })
-], LuzmoColorMenu.prototype, "swatches");
-__decorateClass([
-  decorators_js.query("luzmo-color-area")
-], LuzmoColorMenu.prototype, "areaElement");
-__decorateClass([
-  decorators_js.query("#luzmo-hue-slider")
-], LuzmoColorMenu.prototype, "hueSliderElement");
-__decorateClass([
-  decorators_js.query("#luzmo-opacity-slider")
-], LuzmoColorMenu.prototype, "opacitySliderElement");
-__decorateClass([
-  decorators_js.query("luzmo-color-field")
-], LuzmoColorMenu.prototype, "colorFieldElement");
-__decorateClass([
-  decorators_js.query("luzmo-swatch")
-], LuzmoColorMenu.prototype, "swatchElement");
-__decorateClass([
-  decorators_js.state()
-], LuzmoColorMenu.prototype, "_format");
-if (!customElements.get("luzmo-color-menu")) {
-  customElements.define("luzmo-color-menu", LuzmoColorMenu);
-}
-exports.LuzmoColorMenu = LuzmoColorMenu;
+    `}};m.styles=i.r(v);let r=m;l([i.n({type:String,reflect:!0})],r.prototype,"color");l([i.n({type:Boolean,reflect:!0,attribute:"no-alpha-channel"})],r.prototype,"noAlphaChannel");l([i.n({type:Array,reflect:!0})],r.prototype,"swatches");l([n.e("luzmo-color-area")],r.prototype,"areaElement");l([n.e("#luzmo-hue-slider")],r.prototype,"hueSliderElement");l([n.e("#luzmo-opacity-slider")],r.prototype,"opacitySliderElement");l([n.e("luzmo-color-field")],r.prototype,"colorFieldElement");l([n.e("luzmo-swatch")],r.prototype,"swatchElement");l([d.r()],r.prototype,"_format");customElements.get("luzmo-color-menu")||customElements.define("luzmo-color-menu",r);exports.LuzmoColorMenu=r;