@luzmo/lucero 1.0.1-alpha.21 → 1.0.1-alpha.22

package/components/color-menu/index.cjs

@@ -15,14 +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 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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@ctrl/tinycolor"),c=require("@luzmo/icons"),n=require("lit"),l=require("lit/decorators.js"),d=require("../focusable-CbVKgGfS.cjs"),g=require("../sized-mixin-DcvJLFeo.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 f='@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 v=Object.defineProperty,a=(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&&v(t,o,s),s};const m=class m extends g.SizedMixin(d.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 i.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 i.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 i.TinyColor(this._rgbColor).toHsl();o.h=this.hueSliderElement.value;const e=new i.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 i.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 i.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 i.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 i.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 n.html`
       <luzmo-color-slider
         id="luzmo-opacity-slider"
         mode="opacity"
         @input=${this.handleOpacitySliderChange}
       >
       </luzmo-color-slider>
-    `}render(){var t;return i.x`
+    `}render(){var t;return n.html`
       <div id="color-menu" tabindex="0">
         <luzmo-color-area
           .size=${this.size}
@@ -60,15 +60,15 @@
             >
               <div class="format-label">${this._format}</div>
               <div class="change-format-icon">
-                <div class="angle-icon">${c.T3(c.b)}</div>
-                <div class="angle-icon">${c.T3(c.T)}</div>
+                <div class="angle-icon">${c.luzmoIcon(c.luzmoAngleUp)}</div>
+                <div class="angle-icon">${c.luzmoIcon(c.luzmoAngleDown)}</div>
               </div>
             </button>
           </div>
-          ${((t=this.swatches)==null?void 0:t.length)>0?i.x`
+          ${((t=this.swatches)==null?void 0:t.length)>0?n.html`
                 <luzmo-divider></luzmo-divider>
                 <div class="swatches-container">
-                  ${this.swatches.map(o=>i.x`
+                  ${this.swatches.map(o=>n.html`
                       <div class="swatch-choice">
                         <luzmo-swatch
                           @click=${this.setColor}
@@ -83,4 +83,4 @@
               `:""}
         </div>
       </div>
-    `}};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;
+    `}};m.styles=n.unsafeCSS(f);let r=m;a([l.property({type:String,reflect:!0})],r.prototype,"color");a([l.property({type:Boolean,reflect:!0,attribute:"no-alpha-channel"})],r.prototype,"noAlphaChannel");a([l.property({type:Array,reflect:!0})],r.prototype,"swatches");a([l.query("luzmo-color-area")],r.prototype,"areaElement");a([l.query("#luzmo-hue-slider")],r.prototype,"hueSliderElement");a([l.query("#luzmo-opacity-slider")],r.prototype,"opacitySliderElement");a([l.query("luzmo-color-field")],r.prototype,"colorFieldElement");a([l.query("luzmo-swatch")],r.prototype,"swatchElement");a([l.state()],r.prototype,"_format");customElements.get("luzmo-color-menu")||customElements.define("luzmo-color-menu",r);exports.LuzmoColorMenu=r;

package/components/color-menu/index.js

@@ -15,16 +15,16 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { T as p, d as z, c as f } from "../luzmo-icons-CiSek5iM.js";
-import { r as v, x as s, n as h } from "../base-CFWO09N1.js";
-import { r as b } from "../state-DwIwYPvt.js";
-import { e as n } from "../query-D_KR_GUc.js";
-import { F as x } from "../focusable-C5JjRZmT.js";
-import { S as w } from "../sized-mixin-CJbBHWRQ.js";
+import { TinyColor as a } from "@ctrl/tinycolor";
+import { luzmoIcon as p, luzmoAngleUp as z, luzmoAngleDown as f } from "@luzmo/icons";
+import { unsafeCSS as v, html as s } from "lit";
+import { property as h, query as n, state as b } from "lit/decorators.js";
+import { F as x } from "../focusable-BjvsvVam.js";
+import { S as w } from "../sized-mixin-cJbo3PKR.js";
 import "../color-area/index.js";
 import "../color-field/index.js";
 import "../color-handle/index.js";
-import { T as a } from "../index-D3ICqC7S.js";
+import "../color-slider/index.js";
 import "../divider/index.js";
 import "../popover/index.js";
 import "../swatch/index.js";

package/components/color-palette/index.cjs

@@ -15,4 +15,4 @@
  * 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 r=require("../base-Cy0MQrPT.cjs"),u=require("../focusable-B_KwfEec.cjs"),n=require("../sized-mixin-WPHH0a_D.cjs"),h=":host{box-sizing:border-box}:host([focused]),:host(:focus-visible){outline:none}:host([focused]) #palette,:host(:focus-visible) #palette{border:var(--luzmo-color-palette-focus-indicator-width, var(--color-palette-focus-indicator-width)) solid var(--luzmo-color-palette-focus-indicator-color, var(--color-palette-focus-indicator-color))!important}:host([disabled]){pointer-events:none;cursor:not-allowed}:host([disabled]) #palette{opacity:var(--luzmo-color-palette-disabled-opacity, .3);border-color:transparent!important;background-color:var(--luzmo-color-palette-disabled-background-color, var(--color-palette-disabled-background-color))!important}:host([selected]) #palette{border-color:var(--luzmo-color-palette-selected-border-color, var(--color-palette-selected-border-color));background-color:var(--luzmo-color-palette-selected-background-color, var(--color-palette-selected-background-color))}:host:hover #palette{border-color:var(--luzmo-color-palette-hover-border-color, var(--color-palette-hover-border-color))}#palette{box-sizing:border-box;height:100%;width:fit-content;padding:var(--luzmo-color-palette-padding, var(--color-palette-padding));border:var(--luzmo-color-palette-border-width, var(--color-palette-border-width)) solid transparent;cursor:pointer;border-radius:var(--luzmo-color-palette-border-radius, var(--color-palette-border-radius));display:flex}#palette>div{box-sizing:border-box;border:var(--luzmo-color-palette-color-border-width, var(--color-palette-color-border-width)) solid var(--luzmo-color-palette-color-border-color, var(--color-palette-color-border-color));height:var(--luzmo-color-palette-color-height, var(--color-palette-color-height));width:var(--luzmo-color-palette-color-width, var(--color-palette-color-width))}#palette:hover{background-color:var(--luzmo-color-palette-hover-background-color, var(--color-palette-hover-background-color))}#palette:focus-visible{outline:none}:host(:not([reverse]):not([horizontal])) #palette{flex-direction:column}:host(:not([reverse]):not([horizontal])) #palette>div:not(:first-child){border-top:0}:host(:not([reverse]):not([horizontal])) #palette>div:first-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host(:not([reverse]):not([horizontal])) #palette>div:last-child{border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([reverse]:not([horizontal])) #palette{flex-direction:column-reverse}:host([reverse]:not([horizontal])) #palette>div:not(:first-child){border-bottom:0}:host([reverse]:not([horizontal])) #palette>div:first-child{border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([reverse]:not([horizontal])) #palette>div:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal]:not([reverse])) #palette{flex-direction:row}:host([horizontal]:not([reverse])) #palette>div:not(:first-child){border-left:0}:host([horizontal]:not([reverse])) #palette>div:first-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal]:not([reverse])) #palette>div:last-child{border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal][reverse]) #palette{flex-direction:row-reverse}:host([horizontal][reverse]) #palette>div:not(:first-child){border-right:0}:host([horizontal][reverse]) #palette>div:first-child{border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal][reverse]) #palette>div:last-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host{--color-palette-padding: var(--luzmo-spacing-1);--color-palette-background-color: transparent;--color-palette-hover-background-color: var( --luzmo-background-color-highlight );--color-palette-selected-border-color: var(--luzmo-border-color-down);--color-palette-selected-background-color: var( --luzmo-background-color-highlight-hover );--color-palette-disabled-background-color: transparent;--color-palette-border-width: var(--luzmo-border-width);--color-palette-hover-border-color: var(--luzmo-border-color);--color-palette-focus-indicator-width: var(--luzmo-indicator-width);--color-palette-focus-indicator-color: var(--luzmo-indicator-color);--color-palette-color-width: var(--luzmo-spacing-5);--color-palette-color-height: 1.25rem;--color-palette-color-border-radius: var(--luzmo-border-radius);--color-palette-color-border-width: var(--luzmo-border-width);--color-palette-color-border-color: var(--luzmo-border-color);--color-palette-border-radius: calc( var(--color-palette-color-border-radius) + var(--color-palette-padding) )}:host([horizontal]){--color-palette-color-height: var(--luzmo-spacing-5);--color-palette-color-width: 1.25rem}:host([size=s]){--color-palette-color-width: .75rem;--color-palette-color-height: var(--luzmo-spacing-5);--color-palette-padding: var(--luzmo-spacing-1);--color-palette-color-border-radius: var(--luzmo-border-radius-s)}:host([size=s][horizontal]){--color-palette-color-height: .75rem;--color-palette-color-width: var(--luzmo-spacing-5)}:host([size=l]){--color-palette-color-width: 1.25rem;--color-palette-color-height: 1.5rem;--color-palette-padding: var(--luzmo-spacing-2);--color-palette-color-border-radius: var(--luzmo-border-radius-l)}:host([size=l][horizontal]){--color-palette-color-height: 1.25rem;--color-palette-color-width: 1.5rem}:host([size=xl]){--color-palette-color-width: 1.5rem;--color-palette-color-height: 1.75rem;--color-palette-padding: var(--luzmo-spacing-2);--color-palette-color-border-radius: var(--luzmo-border-radius-xl)}:host([size=xl][horizontal]){--color-palette-color-height: 1.5rem;--color-palette-color-width: 1.75rem}";var b=Object.defineProperty,t=(i,e,a,s)=>{for(var l=void 0,d=i.length-1,p;d>=0;d--)(p=i[d])&&(l=p(e,a,l)||l);return l&&b(e,a,l),l};const c=class c extends n.SizedMixin(u.Focusable,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.selected=!1,this.active=!1,this.reverse=!1,this.horizontal=!1}get focusElement(){return this}render(){var a;const e=(a=this.colors)==null?void 0:a.map(s=>r.x`<div class="color" style="background-color: ${s}"></div>`);return r.x` <div id="palette">${e}</div> `}firstUpdated(e){super.firstUpdated(e)}updated(e){super.updated(e),e.has("selected")&&this.setAttribute("tabindex",this.selected?"0":"-1"),e.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}};c.styles=r.r(h);let o=c;t([r.n({type:Boolean,reflect:!0})],o.prototype,"disabled");t([r.n({type:Boolean,reflect:!0})],o.prototype,"focused");t([r.n({type:Boolean,reflect:!0})],o.prototype,"selected");t([r.n({type:Boolean,reflect:!0})],o.prototype,"active");t([r.n({type:String,reflect:!0})],o.prototype,"value");t([r.n({type:Array,reflect:!0})],o.prototype,"colors");t([r.n({type:Boolean,reflect:!0})],o.prototype,"reverse");t([r.n({type:Boolean,reflect:!0})],o.prototype,"horizontal");customElements.get("luzmo-color-palette")||customElements.define("luzmo-color-palette",o);exports.LuzmoColorPalette=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("lit"),e=require("lit/decorators.js"),h=require("../focusable-CbVKgGfS.cjs"),b=require("../sized-mixin-DcvJLFeo.cjs"),n=":host{box-sizing:border-box}:host([focused]),:host(:focus-visible){outline:none}:host([focused]) #palette,:host(:focus-visible) #palette{border:var(--luzmo-color-palette-focus-indicator-width, var(--color-palette-focus-indicator-width)) solid var(--luzmo-color-palette-focus-indicator-color, var(--color-palette-focus-indicator-color))!important}:host([disabled]){pointer-events:none;cursor:not-allowed}:host([disabled]) #palette{opacity:var(--luzmo-color-palette-disabled-opacity, .3);border-color:transparent!important;background-color:var(--luzmo-color-palette-disabled-background-color, var(--color-palette-disabled-background-color))!important}:host([selected]) #palette{border-color:var(--luzmo-color-palette-selected-border-color, var(--color-palette-selected-border-color));background-color:var(--luzmo-color-palette-selected-background-color, var(--color-palette-selected-background-color))}:host:hover #palette{border-color:var(--luzmo-color-palette-hover-border-color, var(--color-palette-hover-border-color))}#palette{box-sizing:border-box;height:100%;width:fit-content;padding:var(--luzmo-color-palette-padding, var(--color-palette-padding));border:var(--luzmo-color-palette-border-width, var(--color-palette-border-width)) solid transparent;cursor:pointer;border-radius:var(--luzmo-color-palette-border-radius, var(--color-palette-border-radius));display:flex}#palette>div{box-sizing:border-box;border:var(--luzmo-color-palette-color-border-width, var(--color-palette-color-border-width)) solid var(--luzmo-color-palette-color-border-color, var(--color-palette-color-border-color));height:var(--luzmo-color-palette-color-height, var(--color-palette-color-height));width:var(--luzmo-color-palette-color-width, var(--color-palette-color-width))}#palette:hover{background-color:var(--luzmo-color-palette-hover-background-color, var(--color-palette-hover-background-color))}#palette:focus-visible{outline:none}:host(:not([reverse]):not([horizontal])) #palette{flex-direction:column}:host(:not([reverse]):not([horizontal])) #palette>div:not(:first-child){border-top:0}:host(:not([reverse]):not([horizontal])) #palette>div:first-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host(:not([reverse]):not([horizontal])) #palette>div:last-child{border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([reverse]:not([horizontal])) #palette{flex-direction:column-reverse}:host([reverse]:not([horizontal])) #palette>div:not(:first-child){border-bottom:0}:host([reverse]:not([horizontal])) #palette>div:first-child{border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([reverse]:not([horizontal])) #palette>div:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal]:not([reverse])) #palette{flex-direction:row}:host([horizontal]:not([reverse])) #palette>div:not(:first-child){border-left:0}:host([horizontal]:not([reverse])) #palette>div:first-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal]:not([reverse])) #palette>div:last-child{border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal][reverse]) #palette{flex-direction:row-reverse}:host([horizontal][reverse]) #palette>div:not(:first-child){border-right:0}:host([horizontal][reverse]) #palette>div:first-child{border-top-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-right-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host([horizontal][reverse]) #palette>div:last-child{border-top-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius));border-bottom-left-radius:var(--luzmo-color-palette-color-border-radius, var(--color-palette-color-border-radius))}:host{--color-palette-padding: var(--luzmo-spacing-1);--color-palette-background-color: transparent;--color-palette-hover-background-color: var( --luzmo-background-color-highlight );--color-palette-selected-border-color: var(--luzmo-border-color-down);--color-palette-selected-background-color: var( --luzmo-background-color-highlight-hover );--color-palette-disabled-background-color: transparent;--color-palette-border-width: var(--luzmo-border-width);--color-palette-hover-border-color: var(--luzmo-border-color);--color-palette-focus-indicator-width: var(--luzmo-indicator-width);--color-palette-focus-indicator-color: var(--luzmo-indicator-color);--color-palette-color-width: var(--luzmo-spacing-5);--color-palette-color-height: 1.25rem;--color-palette-color-border-radius: var(--luzmo-border-radius);--color-palette-color-border-width: var(--luzmo-border-width);--color-palette-color-border-color: var(--luzmo-border-color);--color-palette-border-radius: calc( var(--color-palette-color-border-radius) + var(--color-palette-padding) )}:host([horizontal]){--color-palette-color-height: var(--luzmo-spacing-5);--color-palette-color-width: 1.25rem}:host([size=s]){--color-palette-color-width: .75rem;--color-palette-color-height: var(--luzmo-spacing-5);--color-palette-padding: var(--luzmo-spacing-1);--color-palette-color-border-radius: var(--luzmo-border-radius-s)}:host([size=s][horizontal]){--color-palette-color-height: .75rem;--color-palette-color-width: var(--luzmo-spacing-5)}:host([size=l]){--color-palette-color-width: 1.25rem;--color-palette-color-height: 1.5rem;--color-palette-padding: var(--luzmo-spacing-2);--color-palette-color-border-radius: var(--luzmo-border-radius-l)}:host([size=l][horizontal]){--color-palette-color-height: 1.25rem;--color-palette-color-width: 1.5rem}:host([size=xl]){--color-palette-color-width: 1.5rem;--color-palette-color-height: 1.75rem;--color-palette-padding: var(--luzmo-spacing-2);--color-palette-color-border-radius: var(--luzmo-border-radius-xl)}:host([size=xl][horizontal]){--color-palette-color-height: 1.5rem;--color-palette-color-width: 1.75rem}";var v=Object.defineProperty,t=(s,r,a,p)=>{for(var l=void 0,d=s.length-1,u;d>=0;d--)(u=s[d])&&(l=u(r,a,l)||l);return l&&v(r,a,l),l};const i=class i extends b.SizedMixin(h.Focusable,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.selected=!1,this.active=!1,this.reverse=!1,this.horizontal=!1}get focusElement(){return this}render(){var a;const r=(a=this.colors)==null?void 0:a.map(p=>c.html`<div class="color" style="background-color: ${p}"></div>`);return c.html` <div id="palette">${r}</div> `}firstUpdated(r){super.firstUpdated(r)}updated(r){super.updated(r),r.has("selected")&&this.setAttribute("tabindex",this.selected?"0":"-1"),r.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}};i.styles=c.unsafeCSS(n);let o=i;t([e.property({type:Boolean,reflect:!0})],o.prototype,"disabled");t([e.property({type:Boolean,reflect:!0})],o.prototype,"focused");t([e.property({type:Boolean,reflect:!0})],o.prototype,"selected");t([e.property({type:Boolean,reflect:!0})],o.prototype,"active");t([e.property({type:String,reflect:!0})],o.prototype,"value");t([e.property({type:Array,reflect:!0})],o.prototype,"colors");t([e.property({type:Boolean,reflect:!0})],o.prototype,"reverse");t([e.property({type:Boolean,reflect:!0})],o.prototype,"horizontal");customElements.get("luzmo-color-palette")||customElements.define("luzmo-color-palette",o);exports.LuzmoColorPalette=o;

package/components/color-palette/index.js

@@ -15,9 +15,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { r as m, x as p, n as e } from "../base-CFWO09N1.js";
-import { F as b } from "../focusable-C5JjRZmT.js";
-import { S as z } from "../sized-mixin-CJbBHWRQ.js";
+import { unsafeCSS as m, html as p } from "lit";
+import { property as e } from "lit/decorators.js";
+import { F as b } from "../focusable-BjvsvVam.js";
+import { S as z } from "../sized-mixin-cJbo3PKR.js";
 const n = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const t = document.createElement("style");

package/components/color-palette-group/index.cjs

@@ -15,14 +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 r=require("../base-Cy0MQrPT.cjs"),u=require("../mutation-controller-DkOMCW-c.cjs"),d=require("../query-BL-TJj7K.cjs"),p=require("../if-defined-DaXWqfzc.cjs"),h=require("../roving-tabindex-By_fCy_e.cjs"),g=require("../sized-mixin-WPHH0a_D.cjs"),m=".color-palette-group{column-gap:var(--luzmo-color-palette-group-column-gap, var(--color-palette-group-column-gap));row-gap:var(--luzmo-color-palette-group-row-gap, var(--color-palette-group-row-gap));flex-wrap:wrap;display:flex}::slotted(*){flex-shrink:0}::slotted(:focus-visible){z-index:1}:host{--color-palette-group-column-gap: var(--luzmo-spacing-3);--color-palette-group-row-gap: var(--luzmo-spacing-3)}:host([size=s]){--color-palette-group-column-gap: var(--luzmo-spacing-2);--color-palette-group-row-gap: var(--luzmo-spacing-2)}:host,:host([size=l]),:host([size=xl]){--color-palette-group-column-gap: var(--luzmo-spacing-3);--color-palette-group-row-gap: var(--luzmo-spacing-3)}";var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,o=(n,e,t,s)=>{for(var a=s>1?void 0:s?b(e,t):e,l=n.length-1,c;l>=0;l--)(c=n[l])&&(a=(s?c(e,t,a):c(a))||a);return s&&a&&f(e,t,a),a};class i extends g.SizedMixin(r.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this.disabled=!1,this.horizontal=!1,this._palettes=[],this.rovingTabindexController=new h.RovingTabindexController(this,{focusInIndex:e=>e.findIndex(t=>this.selected?!t.disabled&&t.value===this.selected:!t.disabled),elements:()=>this.palettes,isFocusableElement:e=>!e.disabled}),this.label="",this._onKeyDown=e=>{if(e.code==="Enter"||e.code==="Space"){e.preventDefault();const t=e.target;if(t.value===void 0)return;this.deselectSelectedPalettes(),t.selected=!0,t.tabIndex=0,t.setAttribute("aria-checked","true"),this.setSelected(t.value,!0)}},this.manageColorPalettes=()=>{if(!this.slotElement)return;const t=this.slotElement.assignedElements({flatten:!0}).reduce((s,a)=>{if(a.matches("luzmo-color-palette"))s.push(a);else{const l=[...a.querySelectorAll(":scope > luzmo-color-palette")];s.push(...l)}return s},[]);this.palettes=t,this.manageChildren(),this.manageSelects()},new u.s(this,{config:{childList:!0,subtree:!0},callback:()=>{this.manageColorPalettes()},skipInitial:!0})}static get styles(){return[r.r(m)]}set palettes(e){e!==this.palettes&&(this._palettes=e,this.rovingTabindexController.clearElementCache())}get palettes(){return this._palettes}get selected(){return this._selected}set selected(e){this.requestUpdate("selected",this._selected),this._selected=e,this.updateComplete.then(()=>{this.applySelects(),this.manageChildren()})}dispatchChange(e){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||(this.setSelected(e),this.palettes.map(s=>{s.selected=!!(s.value&&this.selected===s.value)}))}setSelected(e,t){if(e===this.selected)return;const s=this.selected;this.requestUpdate("selected",s),this._selected=e,t&&this.dispatchChange(s)}focus(e){this.rovingTabindexController.focus(e)}deselectSelectedPalettes(){this.palettes.forEach(e=>{e.selected&&(e.selected=!1,e.tabIndex=-1,e.setAttribute("aria-checked","false"))})}_handleClick(e){const t=e.target;t.value!==void 0&&(this.deselectSelectedPalettes(),t.selected=!0,t.tabIndex=0,t.setAttribute("aria-checked","true"),this.setSelected(t.value,!0))}async applySelects(){await this.manageSelects()}async manageSelects(){if(this.palettes.length===0)return;const e=this.palettes;this.setAttribute("role","radiogroup");const t=[],s=e.map(async l=>{await l.updateComplete,l.setAttribute("role","radio"),l.setAttribute("aria-checked",l.selected?"true":"false"),l.selected&&t.push(l)});await Promise.all(s);const a=t.map(l=>l.value).find(Boolean);this.setSelected(a)}render(){return r.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("lit"),d=require("../mutation-controller-DkOMCW-c.cjs"),o=require("lit/decorators.js"),p=require("lit/directives/if-defined.js"),h=require("../base-5nDSSNeT.cjs"),g=require("../roving-tabindex-By_fCy_e.cjs"),m=require("../sized-mixin-DcvJLFeo.cjs"),f=".color-palette-group{column-gap:var(--luzmo-color-palette-group-column-gap, var(--color-palette-group-column-gap));row-gap:var(--luzmo-color-palette-group-row-gap, var(--color-palette-group-row-gap));flex-wrap:wrap;display:flex}::slotted(*){flex-shrink:0}::slotted(:focus-visible){z-index:1}:host{--color-palette-group-column-gap: var(--luzmo-spacing-3);--color-palette-group-row-gap: var(--luzmo-spacing-3)}:host([size=s]){--color-palette-group-column-gap: var(--luzmo-spacing-2);--color-palette-group-row-gap: var(--luzmo-spacing-2)}:host,:host([size=l]),:host([size=xl]){--color-palette-group-column-gap: var(--luzmo-spacing-3);--color-palette-group-row-gap: var(--luzmo-spacing-3)}";var b=Object.defineProperty,v=Object.getOwnPropertyDescriptor,i=(n,e,t,s)=>{for(var r=s>1?void 0:s?v(e,t):e,l=n.length-1,c;l>=0;l--)(c=n[l])&&(r=(s?c(e,t,r):c(r))||r);return s&&r&&b(e,t,r),r};class a extends m.SizedMixin(h.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this.disabled=!1,this.horizontal=!1,this._palettes=[],this.rovingTabindexController=new g.RovingTabindexController(this,{focusInIndex:e=>e.findIndex(t=>this.selected?!t.disabled&&t.value===this.selected:!t.disabled),elements:()=>this.palettes,isFocusableElement:e=>!e.disabled}),this.label="",this._onKeyDown=e=>{if(e.code==="Enter"||e.code==="Space"){e.preventDefault();const t=e.target;if(t.value===void 0)return;this.deselectSelectedPalettes(),t.selected=!0,t.tabIndex=0,t.setAttribute("aria-checked","true"),this.setSelected(t.value,!0)}},this.manageColorPalettes=()=>{if(!this.slotElement)return;const t=this.slotElement.assignedElements({flatten:!0}).reduce((s,r)=>{if(r.matches("luzmo-color-palette"))s.push(r);else{const l=[...r.querySelectorAll(":scope > luzmo-color-palette")];s.push(...l)}return s},[]);this.palettes=t,this.manageChildren(),this.manageSelects()},new d.s(this,{config:{childList:!0,subtree:!0},callback:()=>{this.manageColorPalettes()},skipInitial:!0})}static get styles(){return[u.unsafeCSS(f)]}set palettes(e){e!==this.palettes&&(this._palettes=e,this.rovingTabindexController.clearElementCache())}get palettes(){return this._palettes}get selected(){return this._selected}set selected(e){this.requestUpdate("selected",this._selected),this._selected=e,this.updateComplete.then(()=>{this.applySelects(),this.manageChildren()})}dispatchChange(e){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||(this.setSelected(e),this.palettes.map(s=>{s.selected=!!(s.value&&this.selected===s.value)}))}setSelected(e,t){if(e===this.selected)return;const s=this.selected;this.requestUpdate("selected",s),this._selected=e,t&&this.dispatchChange(s)}focus(e){this.rovingTabindexController.focus(e)}deselectSelectedPalettes(){this.palettes.forEach(e=>{e.selected&&(e.selected=!1,e.tabIndex=-1,e.setAttribute("aria-checked","false"))})}_handleClick(e){const t=e.target;t.value!==void 0&&(this.deselectSelectedPalettes(),t.selected=!0,t.tabIndex=0,t.setAttribute("aria-checked","true"),this.setSelected(t.value,!0))}async applySelects(){await this.manageSelects()}async manageSelects(){if(this.palettes.length===0)return;const e=this.palettes;this.setAttribute("role","radiogroup");const t=[],s=e.map(async l=>{await l.updateComplete,l.setAttribute("role","radio"),l.setAttribute("aria-checked",l.selected?"true":"false"),l.selected&&t.push(l)});await Promise.all(s);const r=t.map(l=>l.value).find(Boolean);this.setSelected(r)}render(){return u.html`
       <div
         class="color-palette-group"
-        aria-label=${p.o(this.label??void 0)}
+        aria-label=${p.ifDefined(this.label??void 0)}
         role="radiogroup"
         @keydown=${this._onKeyDown}
         @slotchange=${this.manageColorPalettes}
       >
         <slot role="presentation"></slot>
       </div>
-    `}firstUpdated(e){super.firstUpdated(e),this.addEventListener("click",this._handleClick)}updated(e){super.updated(e),e.has("horizontal")&&this.palettes.forEach(s=>{s.horizontal=this.horizontal}),this.manageSelects(),this.manageChildren(),e.has("size")&&this.manageChildren(e),e.has("label")&&(this.label||e.get("label")!==void 0)&&(this.label.length>0?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}manageChildren(e){this.palettes.forEach(t=>{t.setAttribute("aria-label",`color palette: ${t.value}`),t.selected=!!(t.value&&this.selected===t.value),this.size&&(this.size!=="m"||(e==null?void 0:e.get("size"))!==void 0)&&(t.size=this.size),this.disabled&&(t.disabled=!0),t.horizontal=this.horizontal})}}o([r.n({type:Boolean,reflect:!0})],i.prototype,"disabled",2);o([r.n({type:Boolean,reflect:!0})],i.prototype,"horizontal",2);o([r.n({type:String})],i.prototype,"label",2);o([r.n({type:String})],i.prototype,"selected",1);o([d.e("slot")],i.prototype,"slotElement",2);customElements.get("luzmo-color-palette-group")||customElements.define("luzmo-color-palette-group",i);exports.LuzmoColorPaletteGroup=i;
+    `}firstUpdated(e){super.firstUpdated(e),this.addEventListener("click",this._handleClick)}updated(e){super.updated(e),e.has("horizontal")&&this.palettes.forEach(s=>{s.horizontal=this.horizontal}),this.manageSelects(),this.manageChildren(),e.has("size")&&this.manageChildren(e),e.has("label")&&(this.label||e.get("label")!==void 0)&&(this.label.length>0?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}manageChildren(e){this.palettes.forEach(t=>{t.setAttribute("aria-label",`color palette: ${t.value}`),t.selected=!!(t.value&&this.selected===t.value),this.size&&(this.size!=="m"||(e==null?void 0:e.get("size"))!==void 0)&&(t.size=this.size),this.disabled&&(t.disabled=!0),t.horizontal=this.horizontal})}}i([o.property({type:Boolean,reflect:!0})],a.prototype,"disabled",2);i([o.property({type:Boolean,reflect:!0})],a.prototype,"horizontal",2);i([o.property({type:String})],a.prototype,"label",2);i([o.property({type:String})],a.prototype,"selected",1);i([o.query("slot")],a.prototype,"slotElement",2);customElements.get("luzmo-color-palette-group")||customElements.define("luzmo-color-palette-group",a);exports.LuzmoColorPaletteGroup=a;

package/components/color-palette-group/index.js

@@ -15,12 +15,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as d, r as m, x as p, n as u } from "../base-CFWO09N1.js";
-import { s as h } from "../mutation-controller-DH7YOCyj.js";
-import { e as z } from "../query-D_KR_GUc.js";
-import { o as g } from "../if-defined-DULpqYwi.js";
-import { R as f } from "../roving-tabindex-DOg4z6ZU.js";
-import { S as b } from "../sized-mixin-CJbBHWRQ.js";
+import { unsafeCSS as d, html as m } from "lit";
+import { s as p } from "../mutation-controller-DH7YOCyj.js";
+import { property as u, query as h } from "lit/decorators.js";
+import { ifDefined as z } from "lit/directives/if-defined.js";
+import { a as f } from "../base-CdYjmV_8.js";
+import { R as g } from "../roving-tabindex-DOg4z6ZU.js";
+import { S as b } from "../sized-mixin-cJbo3PKR.js";
 const n = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const s = document.createElement("style");
@@ -29,17 +30,17 @@ const n = () => {
 };
 n();
 const v = ".color-palette-group{column-gap:var(--luzmo-color-palette-group-column-gap, var(--color-palette-group-column-gap));row-gap:var(--luzmo-color-palette-group-row-gap, var(--color-palette-group-row-gap));flex-wrap:wrap;display:flex}::slotted(*){flex-shrink:0}::slotted(:focus-visible){z-index:1}:host{--color-palette-group-column-gap: var(--luzmo-spacing-3);--color-palette-group-row-gap: var(--luzmo-spacing-3)}:host([size=s]){--color-palette-group-column-gap: var(--luzmo-spacing-2);--color-palette-group-row-gap: var(--luzmo-spacing-2)}:host,:host([size=l]),:host([size=xl]){--color-palette-group-column-gap: var(--luzmo-spacing-3);--color-palette-group-row-gap: var(--luzmo-spacing-3)}";
-var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (s, e, o, l) => {
-  for (var r = l > 1 ? void 0 : l ? y(e, o) : e, t = s.length - 1, c; t >= 0; t--)
-    (c = s[t]) && (r = (l ? c(e, o, r) : c(r)) || r);
-  return l && r && x(e, o, r), r;
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (s, e, o, t) => {
+  for (var r = t > 1 ? void 0 : t ? y(e, o) : e, l = s.length - 1, c; l >= 0; l--)
+    (c = s[l]) && (r = (t ? c(e, o, r) : c(r)) || r);
+  return t && r && x(e, o, r), r;
 };
-class a extends b(d, {
+class a extends b(f, {
   validSizes: ["s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
   constructor() {
-    super(), this.disabled = !1, this.horizontal = !1, this._palettes = [], this.rovingTabindexController = new f(
+    super(), this.disabled = !1, this.horizontal = !1, this._palettes = [], this.rovingTabindexController = new g(
       this,
       {
         focusInIndex: (e) => e.findIndex(
@@ -61,19 +62,19 @@ class a extends b(d, {
         return;
       const o = this.slotElement.assignedElements({
         flatten: !0
-      }).reduce((l, r) => {
+      }).reduce((t, r) => {
         if (r.matches("luzmo-color-palette"))
-          l.push(r);
+          t.push(r);
         else {
-          const t = [
+          const l = [
             ...r.querySelectorAll(":scope > luzmo-color-palette")
           ];
-          l.push(...t);
+          t.push(...l);
         }
-        return l;
+        return t;
       }, []);
       this.palettes = o, this.manageChildren(), this.manageSelects();
-    }, new h(this, {
+    }, new p(this, {
       config: {
         childList: !0,
         subtree: !0
@@ -89,7 +90,7 @@ class a extends b(d, {
    * @internal
    */
   static get styles() {
-    return [m(v)];
+    return [d(v)];
   }
   /**
    * The color palette elements in the group
@@ -120,15 +121,15 @@ class a extends b(d, {
         composed: !0,
         cancelable: !0
       })
-    ) || (this.setSelected(e), this.palettes.map((l) => {
-      l.selected = !!(l.value && this.selected === l.value);
+    ) || (this.setSelected(e), this.palettes.map((t) => {
+      t.selected = !!(t.value && this.selected === t.value);
     }));
   }
   setSelected(e, o) {
     if (e === this.selected)
       return;
-    const l = this.selected;
-    this.requestUpdate("selected", l), this._selected = e, o && this.dispatchChange(l);
+    const t = this.selected;
+    this.requestUpdate("selected", t), this._selected = e, o && this.dispatchChange(t);
   }
   focus(e) {
     this.rovingTabindexController.focus(e);
@@ -150,18 +151,18 @@ class a extends b(d, {
       return;
     const e = this.palettes;
     this.setAttribute("role", "radiogroup");
-    const o = [], l = e.map(async (t) => {
-      await t.updateComplete, t.setAttribute("role", "radio"), t.setAttribute("aria-checked", t.selected ? "true" : "false"), t.selected && o.push(t);
+    const o = [], t = e.map(async (l) => {
+      await l.updateComplete, l.setAttribute("role", "radio"), l.setAttribute("aria-checked", l.selected ? "true" : "false"), l.selected && o.push(l);
     });
-    await Promise.all(l);
-    const r = o.map((t) => t.value).find(Boolean);
+    await Promise.all(t);
+    const r = o.map((l) => l.value).find(Boolean);
     this.setSelected(r);
   }
   render() {
-    return p`
+    return m`
       <div
         class="color-palette-group"
-        aria-label=${g(this.label ?? void 0)}
+        aria-label=${z(this.label ?? void 0)}
         role="radiogroup"
         @keydown=${this._onKeyDown}
         @slotchange=${this.manageColorPalettes}
@@ -174,8 +175,8 @@ class a extends b(d, {
     super.firstUpdated(e), this.addEventListener("click", this._handleClick);
   }
   updated(e) {
-    super.updated(e), e.has("horizontal") && this.palettes.forEach((l) => {
-      l.horizontal = this.horizontal;
+    super.updated(e), e.has("horizontal") && this.palettes.forEach((t) => {
+      t.horizontal = this.horizontal;
     }), this.manageSelects(), this.manageChildren(), e.has("size") && this.manageChildren(e), e.has("label") && (this.label || e.get("label") !== void 0) && (this.label.length > 0 ? this.setAttribute("aria-label", this.label) : this.removeAttribute("aria-label"));
   }
   manageChildren(e) {
@@ -197,7 +198,7 @@ i([
   u({ type: String })
 ], a.prototype, "selected", 1);
 i([
-  z("slot")
+  h("slot")
 ], a.prototype, "slotElement", 2);
 customElements.get("luzmo-color-palette-group") || customElements.define("luzmo-color-palette-group", a);
 export {

package/components/color-picker/index.cjs

@@ -15,7 +15,7 @@
  * 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 t=require("../base-Cy0MQrPT.cjs"),h=require("../state-vf0PJN3_.cjs"),u=require("../query-BL-TJj7K.cjs"),c=require("../sized-mixin-WPHH0a_D.cjs");require("../color-menu/index.cjs");require("../overlay/index.cjs");const d=require("../slottable-request-event-BfUUt1Mh.cjs");require("../popover/index.cjs");require("../swatch/index.cjs");const m="luzmo-popover{margin-left:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap));margin-right:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap))}luzmo-swatch{cursor:pointer}:host([read-only]) luzmo-swatch{cursor:default;pointer-events:none}:host{--luzmo-popover-content-area-spacing-vertical: 0;--color-picker-popover-horizontal-gap: var(--luzmo-spacing-4)}:host([size=s]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-3)}:host([size=l]),:host([size=xl]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-5)}";var y=Object.defineProperty,o=(i,r,a,v)=>{for(var l=void 0,n=i.length-1,p;n>=0;n--)(p=i[n])&&(l=p(r,a,l)||l);return l&&y(r,a,l),l};const s=class s extends c.SizedMixin(t.LuzmoElement){constructor(){super(...arguments),this.color="rgb(255, 0, 0)",this.open=!1,this.disabled=!1,this.readOnly=!1,this.placement="left-start",this.rounding="full",this.swatches=[],this.noAlphaChannel=!1,this._renderMenu=!1}overlayCloseEvent(){this.open=!1}overlayOpenEvent(){this.open=!0}handleColorChange(){const r=this.menuElement.color;this.color=typeof r=="string"?r:String(r),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}firstUpdated(){this.overlayElement.addEventListener("slottable-request",r=>{this._renderMenu=r.data!==d.removeSlottableRequest})}updated(r){r.has("open")&&this.open===!0&&(this._renderMenu=!0)}renderColorMenu(){return t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("lit"),t=require("lit/decorators.js"),h=require("../base-5nDSSNeT.cjs"),c=require("../sized-mixin-DcvJLFeo.cjs");require("../color-menu/index.cjs");require("../overlay/index.cjs");const d=require("../slottable-request-event-BfUUt1Mh.cjs");require("../popover/index.cjs");require("../swatch/index.cjs");const y="luzmo-popover{margin-left:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap));margin-right:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap))}luzmo-swatch{cursor:pointer}:host([read-only]) luzmo-swatch{cursor:default;pointer-events:none}:host{--luzmo-popover-content-area-spacing-vertical: 0;--color-picker-popover-horizontal-gap: var(--luzmo-spacing-4)}:host([size=s]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-3)}:host([size=l]),:host([size=xl]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-5)}";var m=Object.defineProperty,r=(i,o,a,v)=>{for(var l=void 0,s=i.length-1,u;s>=0;s--)(u=i[s])&&(l=u(o,a,l)||l);return l&&m(o,a,l),l};const p=class p extends c.SizedMixin(h.LuzmoElement){constructor(){super(...arguments),this.color="rgb(255, 0, 0)",this.open=!1,this.disabled=!1,this.readOnly=!1,this.placement="left-start",this.rounding="full",this.swatches=[],this.noAlphaChannel=!1,this._renderMenu=!1}overlayCloseEvent(){this.open=!1}overlayOpenEvent(){this.open=!0}handleColorChange(){const o=this.menuElement.color;this.color=typeof o=="string"?o:String(o),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}firstUpdated(){this.overlayElement.addEventListener("slottable-request",o=>{this._renderMenu=o.data!==d.removeSlottableRequest})}updated(o){o.has("open")&&this.open===!0&&(this._renderMenu=!0)}renderColorMenu(){return n.html`
       <luzmo-color-menu
         .size=${this.size}
         .color=${this.color}
@@ -23,7 +23,7 @@
         .swatches=${this.swatches}
         @change=${this.handleColorChange}
       ></luzmo-color-menu>
-    `}render(){return t.x`
+    `}render(){return n.html`
       <luzmo-swatch
         id="trigger"
         .shape=${this.shape}
@@ -42,7 +42,7 @@
         type="auto"
       >
         <luzmo-popover style="position:relative">
-          ${this._renderMenu?this.renderColorMenu():t.x``}
+          ${this._renderMenu?this.renderColorMenu():n.html``}
         </luzmo-popover>
       </luzmo-overlay>
-    `}};s.styles=t.r(m);let e=s;o([t.n({type:String,reflect:!0})],e.prototype,"color");o([t.n({type:Boolean,reflect:!0})],e.prototype,"open");o([t.n({type:Boolean,reflect:!0})],e.prototype,"disabled");o([t.n({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly");o([t.n({type:String,reflect:!0})],e.prototype,"placement");o([t.n({type:String,reflect:!0})],e.prototype,"rounding");o([t.n({type:String,reflect:!0})],e.prototype,"shape");o([t.n({type:Array,reflect:!0})],e.prototype,"swatches");o([t.n({type:Boolean,reflect:!0,attribute:"no-alpha-channel"})],e.prototype,"noAlphaChannel");o([u.e("luzmo-color-menu")],e.prototype,"menuElement");o([u.e("luzmo-overlay")],e.prototype,"overlayElement");o([h.r()],e.prototype,"_renderMenu");customElements.get("luzmo-color-picker")||customElements.define("luzmo-color-picker",e);exports.LuzmoColorPicker=e;
+    `}};p.styles=n.unsafeCSS(y);let e=p;r([t.property({type:String,reflect:!0})],e.prototype,"color");r([t.property({type:Boolean,reflect:!0})],e.prototype,"open");r([t.property({type:Boolean,reflect:!0})],e.prototype,"disabled");r([t.property({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly");r([t.property({type:String,reflect:!0})],e.prototype,"placement");r([t.property({type:String,reflect:!0})],e.prototype,"rounding");r([t.property({type:String,reflect:!0})],e.prototype,"shape");r([t.property({type:Array,reflect:!0})],e.prototype,"swatches");r([t.property({type:Boolean,reflect:!0,attribute:"no-alpha-channel"})],e.prototype,"noAlphaChannel");r([t.query("luzmo-color-menu")],e.prototype,"menuElement");r([t.query("luzmo-overlay")],e.prototype,"overlayElement");r([t.state()],e.prototype,"_renderMenu");customElements.get("luzmo-color-picker")||customElements.define("luzmo-color-picker",e);exports.LuzmoColorPicker=e;

package/components/color-picker/index.js

@@ -15,10 +15,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as z, r as d, x as u, n as l } from "../base-CFWO09N1.js";
-import { r as h } from "../state-DwIwYPvt.js";
-import { e as m } from "../query-D_KR_GUc.js";
-import { S as g } from "../sized-mixin-CJbBHWRQ.js";
+import { unsafeCSS as z, html as u } from "lit";
+import { property as l, query as c, state as d } from "lit/decorators.js";
+import { a as h } from "../base-CdYjmV_8.js";
+import { S as g } from "../sized-mixin-cJbo3PKR.js";
 import "../color-menu/index.js";
 import "../overlay/index.js";
 import { r as f } from "../slottable-request-event-DggLA4Rx.js";
@@ -33,11 +33,11 @@ const p = () => {
 p();
 const b = "luzmo-popover{margin-left:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap));margin-right:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap))}luzmo-swatch{cursor:pointer}:host([read-only]) luzmo-swatch{cursor:default;pointer-events:none}:host{--luzmo-popover-content-area-spacing-vertical: 0;--color-picker-popover-horizontal-gap: var(--luzmo-spacing-4)}:host([size=s]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-3)}:host([size=l]),:host([size=xl]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-5)}";
 var v = Object.defineProperty, e = (t, r, s, y) => {
-  for (var n = void 0, i = t.length - 1, c; i >= 0; i--)
-    (c = t[i]) && (n = c(r, s, n) || n);
+  for (var n = void 0, i = t.length - 1, m; i >= 0; i--)
+    (m = t[i]) && (n = m(r, s, n) || n);
   return n && v(r, s, n), n;
 };
-const a = class a extends g(z) {
+const a = class a extends g(h) {
   constructor() {
     super(...arguments), this.color = "rgb(255, 0, 0)", this.open = !1, this.disabled = !1, this.readOnly = !1, this.placement = "left-start", this.rounding = "full", this.swatches = [], this.noAlphaChannel = !1, this._renderMenu = !1;
   }
@@ -101,7 +101,7 @@ const a = class a extends g(z) {
     `;
   }
 };
-a.styles = d(b);
+a.styles = z(b);
 let o = a;
 e([
   l({ type: String, reflect: !0 })
@@ -131,13 +131,13 @@ e([
   l({ type: Boolean, reflect: !0, attribute: "no-alpha-channel" })
 ], o.prototype, "noAlphaChannel");
 e([
-  m("luzmo-color-menu")
+  c("luzmo-color-menu")
 ], o.prototype, "menuElement");
 e([
-  m("luzmo-overlay")
+  c("luzmo-overlay")
 ], o.prototype, "overlayElement");
 e([
-  h()
+  d()
 ], o.prototype, "_renderMenu");
 customElements.get("luzmo-color-picker") || customElements.define("luzmo-color-picker", o);
 export {

package/components/color-slider/index.cjs

@@ -15,4 +15,43 @@
  * 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 e=require("../index-CNK8wHXu.cjs");exports.LuzmoColorSlider=e.LuzmoColorSlider;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("@ctrl/tinycolor"),y=require("lit"),n=require("lit/decorators.js"),f=require("lit/directives/if-defined.js"),_=require("lit/directives/style-map.js");require("../color-handle/index.cjs");const x=require("../focusable-CbVKgGfS.cjs"),P=require("../language-resolution-EUER43cg.cjs"),H=require("../streaming-listener-CfUtuELp.cjs"),C=/^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/,z=/(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/,S=/(^hs[v|l]a?\()\d{1,3}/,v=(p,t)=>t?p.toHexString():p.toHex();class k{constructor(t,{applyColorToState:e,extractColorFromState:r,maintains:s}){this.maintains="hue",this._hue=0,this._opacity=1,this.getColorProcesses={rgb:(o,i)=>i?o.toRgbString():o.toRgb(),prgb:(o,i)=>i?o.toPercentageRgbString():o.toPercentageRgb(),hex8:(o,i)=>i?o.toHex8String():o.toHex8(),name:o=>o.toName()||o.toRgbString(),hsl:(o,i)=>{if(this.maintains==="hue"){if(i)return o.toHslString().replace(S,`$1${this.hue}`);const{s:c,l:m,a:b}=o.toHsl();return{h:this.hue,s:c,l:m,a:b}}if(i)return o.toHslString().replace(z,`$1${this.hue}$2${this.saturation}`);const{s:h,l:d,a:g}=o.toHsl();return{h:this.hue,s:h,l:d,a:g}},hsv:(o,i)=>{if(this.maintains==="hue"){if(i)return o.toHsvString().replace(S,`$1${this.hue}`);const{s:c,v:m,a:b}=o.toHsv();return{h:this.hue,s:c,v:m,a:b}}if(i)return o.toHsvString().replace(z,`$1${this.hue}$2${this.saturation}`);const{s:h,v:d,a:g}=o.toHsv();return{h:this.hue,s:h,v:d,a:g}},hex:v,hex3:v,hex4:v,hex6:v},this._color=new u.TinyColor({h:0,s:1,v:1}),this._previousColor=new u.TinyColor({h:0,s:1,v:1}),this._format={format:"",isString:!1},this.host=t,this.applyColorToState=e,this.extractColorFromState=r,this.maintains=s||this.maintains}setColorProcess(t,e,r,s){this.maintains==="hue"?this.setColorMaintainHue(t,e,r,s):this.maintains==="saturation"&&this.setColorMaintainSaturation(t,e,r,s)}setColorMaintainHue(t,e,r,s){const{h:o,s:i,v:h,a:d}=this._color.toHsv();let g;if(s&&r.startsWith("hs")){const c=C.exec(e);if(c!==null){const[,m]=c;g=Number(m)}}else if(!s&&r.startsWith("hs")){const c=t.originalInput;g=Object.values(c)[0]}this.hue=g||o,this.opacity=d??1,this.applyColorToState({h:o,s:i,v:h,a:d})}setColorMaintainSaturation(t,e,r,s){const{a:o}=this._color.toHsv();if(s&&r.startsWith("hs")){const i=C.exec(e);if(i!==null){const[,h,d]=i;this.hue=Number(h),this.saturation=Number(d)}}else if(!s&&r.startsWith("hs")){const i=t.originalInput,h=Object.values(i);this.hue=h[0],this.saturation=h[1]}else{const{h:i}=t.toHsv();this.hue=i}this.opacity=o??1,this.applyColorToState(t.toHsv())}applyColorFromState(){this._color=new u.TinyColor(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 r=this.hue,{s,v:o,a:i}=this._color.toHsv();this._color=new u.TinyColor({h:e,s,v:o,a:i}),this._hue=e,this.host.requestUpdate("hue",r)}get opacity(){return this._opacity}set opacity(t){const e=Math.min(1,Math.max(0,t));if(e===this.opacity)return;const r=this.opacity,{h:s,s:o,v:i}=this._color.toHsv();this._color=new u.TinyColor({h:s,s:o,v:i,a:e}),this._opacity=e,this.host.requestUpdate("opacity",r)}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 u.TinyColor(t);const r=this._color.format;let s=typeof t=="string"||t instanceof String;r.startsWith("hex")&&(s=t.startsWith("#")),this._format={format:r,isString:s},this.setColorProcess(this._color,t,r,s),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 $='.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 R=Object.defineProperty,T=Object.getOwnPropertyDescriptor,a=(p,t,e,r)=>{for(var s=r>1?void 0:r?T(t,e):t,o=p.length-1,i;o>=0;o--)(i=p[o])&&(s=(r?i(t,e,s):i(s))||s);return r&&s&&R(t,e,s),s};class l extends x.Focusable{constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.label="hue",this.vertical=!1,this.languageResolver=new P.LanguageResolutionController(this),this.colorController=new k(this,{applyColorToState:()=>{if(this.mode==="opacity"){const t=new u.TinyColor(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[y.unsafeCSS($)]}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(i=>!!i).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}t.preventDefault();const o=100/(this.mode==="opacity"?100:360);this.sliderHandlePosition=Math.min(100,Math.max(0,this.sliderHandlePosition+r*o)),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(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,r=this.vertical?e.top:e.left,s=this.vertical?t.clientY:t.clientX,o=this.vertical?e.height:e.width,i=Math.max(0,Math.min(1,(s-r)/o));return this.vertical||!this.isLTR?100-100*i:100*i}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 u.TinyColor(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 y.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=${f.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}
+        ${H.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=${f.ifDefined(this.vertical?"vertical":void 0)}
+        orient=${f.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(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 u.TinyColor(this.colorController.color).toRgbString(),this.handle.style.insetInlineStart=100*this.colorController.opacity+"%"))}}a([n.property({type:String,reflect:!0})],l.prototype,"dir",2);a([n.property({type:String,reflect:!0})],l.prototype,"mode",2);a([n.property({type:Boolean,reflect:!0})],l.prototype,"disabled",2);a([n.property({type:Boolean,reflect:!0})],l.prototype,"focused",2);a([n.query(".handle")],l.prototype,"handle",2);a([n.property({type:String})],l.prototype,"label",2);a([n.property({type:Boolean,reflect:!0})],l.prototype,"vertical",2);a([n.property({type:Number})],l.prototype,"value",1);a([n.property({type:Number,reflect:!0})],l.prototype,"sliderHandlePosition",2);a([n.property({type:String})],l.prototype,"color",1);a([n.property({type:Number})],l.prototype,"step",2);a([n.property({type:Boolean,attribute:"is-ltr"})],l.prototype,"isLTR",2);a([n.query("input")],l.prototype,"input",2);customElements.get("luzmo-color-slider")||customElements.define("luzmo-color-slider",l);exports.LuzmoColorSlider=l;