@luzmo/lucero 1.0.1-alpha.15 → 1.0.1-alpha.16

package/components/color-loupe-B_DDFv8l.js

@@ -0,0 +1,89 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { unsafeCSS, html } from "lit";
+import { property } from "lit/decorators.js";
+import { a as LuzmoElement } from "./base-DmeVy0cq.js";
+const styles = ':host{inline-size:var(--luzmo-color-loupe-width, 48px);block-size:var(--luzmo-color-loupe-height, 64px);transform:translateY(var(--luzmo-color-loupe-animation-distance, 8px));opacity:0;transform-origin:bottom;pointer-events:none;filter:drop-shadow(var(--luzmo-color-loupe-drop-shadow-x, 0) var(--luzmo-color-loupe-drop-shadow-y, 2px) var(--luzmo-color-loupe-drop-shadow-blur, 8px) var(--luzmo-color-loupe-drop-shadow-color, rgba(0, 0, 0, .25)));transition:transform .1s ease-in-out,opacity .125s ease-in-out;position:absolute;inset-block-end:calc(var(--luzmo-color-handle-size, 16px) - var(--luzmo-color-handle-outer-border-width, 1px) + var(--luzmo-color-loupe-offset, 12px));inset-inline-end:calc(50% - var(--luzmo-color-loupe-width, 48px) / 2)}:host:dir(rtl),:host([dir=rtl]){inset-inline-end:calc(50% - var(--luzmo-color-loupe-width, 48px) / 2 - 1px)}:host([open]){opacity:1;transform:translate(0)}.luzmo-color-loupe-inner-border{fill:var(--luzmo-picked-color);stroke:var(--luzmo-color-loupe-inner-border-color, rgba(0, 0, 0, .1));stroke-width:var(--luzmo-color-loupe-inner-border-width, 1px)}.luzmo-color-loupe-outer-border{fill:none;stroke:var(--luzmo-color-loupe-outer-border-color, white);stroke-width:calc(var(--luzmo-color-loupe-outer-border-width, 2px) + 2px);transform:translate(calc((var(--luzmo-color-loupe-outer-border-width, 2px) + 2px) / 2))}.luzmo-color-loupe-checkerboard-pattern{fill:var(--luzmo-color-loupe-checkerboard-dark-color, rgb(230, 230, 230))}.luzmo-color-loupe-checkerboard-background{fill:var(--luzmo-color-loupe-checkerboard-light-color, rgb(255, 255, 255))}.luzmo-color-loupe-checkerboard-fill{fill:var(--luzmo-color-loupe-checkerboard-fill, url(#checkerboard-primary))}@media (forced-colors: active){:host{--highcontrast-colorloupe-outer-border-color: CanvasText}}svg{width:inherit;height:inherit}.loupe-clipped{clip-path:path("M23 61.575C19.0044 57.435 15.2591 53.0606 11.784 48.475C8.68949 44.4532 5.96348 40.1608 3.639 35.65C1.224 30.8 0 26.549 0 23C0.00319993 17.6937 1.84059 12.5516 5.20091 8.44488C8.56122 4.33815 13.2378 1.51928 18.4385 0.465803C23.6392 -0.587678 29.0442 0.189006 33.7378 2.66428C38.4314 5.13955 42.125 9.16122 44.193 14.048C45.3915 16.88 46.0061 19.9248 46 23C46 26.551 44.774 30.811 42.355 35.661C40.0274 40.1747 37.298 44.4698 34.2 48.494C30.7297 53.0728 26.9898 57.4409 23 61.575ZZ")}.opacity-checkerboard{position:absolute;top:2px;left:2px;block-size:100%;inline-size:100%}.opacity-checkerboard{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)}';
+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 _LuzmoColorLoupe = class _LuzmoColorLoupe extends LuzmoElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.color = "rgba(255, 0, 0, 0.5)";
+  }
+  render() {
+    return html`
+      <div class="opacity-checkerboard loupe-clipped"></div>
+      <div class="luzmo-color-loupe-inner-border loupe-clipped"></div>
+      <div class="luzmo-color-loupe-outer-border loupe-clipped"></div>
+      <svg
+        aria-hidden="true"
+        class="luzmo-color-loupe is-open"
+        overflow="visible"
+        style="--luzmo-picked-color: ${this.color}; position: absolute;"
+      >
+        <defs>
+          <path
+            id="loupe-path"
+            d="M23 61.575C19.0044 57.435 15.2591 53.0606 11.784 48.475C8.68949 44.4532 5.96348 40.1608 3.639 35.65C1.224 30.8 0 26.549 0 23C0.00319993 17.6937 1.84059 12.5516 5.20091 8.44488C8.56122 4.33815 13.2378 1.51928 18.4385 0.465803C23.6392 -0.587678 29.0442 0.189006 33.7378 2.66428C38.4314 5.13955 42.125 9.16122 44.193 14.048C45.3915 16.88 46.0061 19.9248 46 23C46 26.551 44.774 30.811 42.355 35.661C40.0274 40.1747 37.298 44.4698 34.2 48.494C30.7297 53.0728 26.9898 57.4409 23 61.575ZZ"
+            transform="translate(2, 2)"
+          />
+          <mask id="loupe-mask">
+            <rect x="0" y="0" height="100" width="100" fill="white" />
+            <use xlink:href="#path" fill="black" />
+          </mask>
+        </defs>
+
+        <g class="luzmo-color-loupe-loupe">
+          <g>
+            <use
+              xlink:href="#loupe-path"
+              mask="url(#loupe-mask)"
+              transform="translate(2, 2)"
+              class="luzmo-color-loupe-inner-border"
+            />
+            <use
+              xlink:href="#loupe-path"
+              mask="url(#loupe-mask)"
+              class="luzmo-color-loupe-outer-border"
+            />
+          </g>
+        </g>
+      </svg>
+    `;
+  }
+};
+_LuzmoColorLoupe.styles = unsafeCSS(styles);
+let LuzmoColorLoupe = _LuzmoColorLoupe;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoColorLoupe.prototype, "open");
+__decorateClass([
+  property({ type: String })
+], LuzmoColorLoupe.prototype, "color");
+export {
+  LuzmoColorLoupe as L
+};

package/components/color-menu/index.cjs

@@ -15,14 +15,182 @@
  * 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-D47EGj-3.cjs"),i=require("../base-CBCg3yyw.cjs"),d=require("../state-D8JEtYqe.cjs"),n=require("../query-BL-TJj7K.cjs"),g=require("../focusable-EbipgXRh.cjs"),f=require("../sized-mixin-CPxE5C96.cjs");require("../color-area/index.cjs");require("../color-field/index.cjs");require("../color-handle/index.cjs");const a=require("../index-BwxgAdzi.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 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`
       <luzmo-color-slider
         id="luzmo-opacity-slider"
         mode="opacity"
         @input=${this.handleOpacitySliderChange}
       >
       </luzmo-color-slider>
-    `}render(){var t;return i.x`
+    `;
+  }
+  render() {
+    var _a;
+    return lit.html`
       <div id="color-menu" tabindex="0">
         <luzmo-color-area
           .size=${this.size}
@@ -33,7 +201,7 @@
             <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>
@@ -43,7 +211,7 @@
                 @input=${this.handleHueSliderChange}
               >
               </luzmo-color-slider>
-              ${this.noAlphaChannel?"":this.renderOpacitySlider()}
+              ${this.noAlphaChannel ? "" : this.renderOpacitySlider()}
             </div>
           </div>
           <div class="field-container">
@@ -60,27 +228,64 @@
             >
               <div class="format-label">${this._format}</div>
               <div class="change-format-icon">
-                <div class="angle-icon">${c.p3(c.b)}</div>
-                <div class="angle-icon">${c.p3(c.T)}</div>
+                <div class="angle-icon">${icons.luzmoIcon(icons.luzmoAngleUp)}</div>
+                <div class="angle-icon">${icons.luzmoIcon(icons.luzmoAngleDown)}</div>
               </div>
             </button>
           </div>
-          ${((t=this.swatches)==null?void 0:t.length)>0?i.x`
+          ${((_a = this.swatches) == null ? void 0 : _a.length) > 0 ? lit.html`
                 <luzmo-divider></luzmo-divider>
                 <div class="swatches-container">
-                  ${this.swatches.map(o=>i.x`
+                  ${this.swatches.map(
+      (color) => lit.html`
                       <div class="swatch-choice">
                         <luzmo-swatch
                           @click=${this.setColor}
-                          .color=${o}
+                          .color=${color}
                           .size=${this.size}
                           readonly
                         >
                         </luzmo-swatch>
                       </div>
-                    `)}
+                    `
+    )}
                 </div>
-              `:""}
+              ` : ""}
         </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;
+    `;
+  }
+};
+_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;