@luzmo/lucero 0.0.3 → 0.0.4

package/lib/color-handle/index.js

@@ -0,0 +1,74 @@
+/*! * 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 "../color-loupe-DBEApMDT.js";
+import { L as s, n as a } from "../base-nYalvNMy.js";
+import { unsafeCSS as m, html as z } from "lit";
+const u = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const l = document.createElement("style");
+    l.setAttribute("data-luzmo-vars", ""), l.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(l);
+  }
+};
+u();
+const h = ':host{touch-action:none;transition:inline-size var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),block-size var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),border-width var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),margin-inline var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),margin-block var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out)}:host{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);background-position:50%}:host(:focus){outline:none}:host{z-index:1;box-sizing:border-box;inline-size:var(--luzmo-color-handle-size, 16px);block-size:var(--luzmo-color-handle-size, 16px);margin-inline:calc(var(--luzmo-color-handle-size, 16px) / 2 * -1);margin-block:calc(var(--luzmo-color-handle-size, 16px) / 2 * -1);border-width:var(--luzmo-color-handle-border-width, 2px);border-color:var(--luzmo-color-handle-border-color, rgb(255, 255, 255));box-shadow:0 0 0 var(--luzmo-color-handle-outer-border-width, 1px) var(--luzmo-color-handle-outer-border-color, rgba(0, 0, 0, .42));transition:all var(--luzmo-color-handle-animation-duration, 0) var(--luzmo-color-handle-animation-easing, ease-in-out);border-style:solid}:host,:host:after{border-radius:100%;display:block;position:absolute}:host:after{content:"";inset-inline:calc(50% - var(--luzmo-color-handle-hitarea-size, 24px) / 2);inset-block:calc(50% - var(--luzmo-color-handle-hitarea-size, 24px) / 2);inline-size:var(--luzmo-color-handle-hitarea-size, 24px);block-size:var(--luzmo-color-handle-hitarea-size, 24px);border-radius:var(--luzmo-color-handle-hitarea-border-radius, 100%)}:host([focused]),:host(:focus-visible){inline-size:var(--luzmo-color-handle-focused-size, 32px);block-size:var(--luzmo-color-handle-focused-size, 32px);margin-inline:calc(var(--luzmo-color-handle-size, 16px) * -1);margin-block:calc(var(--luzmo-color-handle-size, 16px) * -1);outline:none}:host([disabled]){pointer-events:none;border-color:var(--highcontrast-color-handle-border-color-disabled, var(--luzmo-color-handle-border-color-disabled, var(--luzmo-font-color-disabled)));background:var(--highcontrast-color-handle-fill-color-disabled, var(--luzmo-color-handle-fill-color-disabled, var(--luzmo-font-color-disabled)));box-shadow:none}:host([disabled]) .inner{display:none}.inner{inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--luzmo-color-handle-inner-border-width, var(--luzmo-border-width)) var(--luzmo-color-handle-inner-border-color, rgba(0, 0, 0, .42));background-color:var(--luzmo-picked-color);border-radius:100%}@media (forced-colors: active){:host{forced-color-adjust:none}:host([disabled]){--highcontrast-color-handle-border-color-disabled: GrayText;--highcontrast-color-handle-fill-color-disabled: Canvas}}';
+var b = Object.defineProperty, i = (l, o, c, p) => {
+  for (var e = void 0, n = l.length - 1, d; n >= 0; n--)
+    (d = l[n]) && (e = d(o, c, e) || e);
+  return e && b(o, c, e), e;
+};
+const t = class t extends s {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.focused = !1, this.open = !1, this.color = "rgba(255, 0, 0, 0.5)";
+  }
+  handlePointerdown(o) {
+    o.pointerType === "touch" && (this.open = !0), this.setPointerCapture(o.pointerId);
+  }
+  handlePointerup(o) {
+    this.open = !1, this.releasePointerCapture(o.pointerId);
+  }
+  render() {
+    return z`
+      <div class="inner" style="background-color: ${this.color}"></div>
+      <luzmo-color-loupe
+        color=${this.color}
+        ?open=${this.open && !this.disabled}
+      ></luzmo-color-loupe>
+    `;
+  }
+  firstUpdated(o) {
+    super.firstUpdated(o), this.addEventListener("pointerdown", this.handlePointerdown), this.addEventListener("pointerup", this.handlePointerup), this.addEventListener("pointercancel", this.handlePointerup);
+  }
+};
+t.styles = m(h);
+let r = t;
+i([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled");
+i([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "focused");
+i([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "open");
+i([
+  a({ type: String })
+], r.prototype, "color");
+customElements.get("luzmo-color-handle") || customElements.define("luzmo-color-handle", r);
+export {
+  r as LuzmoColorHandle
+};

package/lib/color-loupe/index.cjs

@@ -0,0 +1,18 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../color-loupe-BICpNqFs.cjs");customElements.get("luzmo-color-loupe")||customElements.define("luzmo-color-loupe",o.LuzmoColorLoupe);exports.LuzmoColorLoupe=o.LuzmoColorLoupe;

package/lib/color-loupe/index.js

@@ -0,0 +1,29 @@
+/*! * 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 { L as r } from "../color-loupe-DBEApMDT.js";
+const l = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const o = document.createElement("style");
+    o.setAttribute("data-luzmo-vars", ""), o.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(o);
+  }
+};
+l();
+customElements.get("luzmo-color-loupe") || customElements.define("luzmo-color-loupe", r);
+export {
+  r as LuzmoColorLoupe
+};

package/lib/color-loupe-BICpNqFs.cjs

@@ -0,0 +1,56 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";const l=require("./base-BCmA9Wxv.cjs"),u=require("lit"),n=':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 d=Object.defineProperty,s=(a,c,i,h)=>{for(var o=void 0,e=a.length-1,p;e>=0;e--)(p=a[e])&&(o=p(c,i,o)||o);return o&&d(c,i,o),o};const t=class t extends l.LuzmoElement{constructor(){super(...arguments),this.open=!1,this.color="rgba(255, 0, 0, 0.5)"}render(){return u.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>
+    `}};t.styles=u.unsafeCSS(n);let r=t;s([l.n({type:Boolean,reflect:!0})],r.prototype,"open");s([l.n({type:String})],r.prototype,"color");exports.LuzmoColorLoupe=r;

package/lib/color-loupe-DBEApMDT.js

@@ -0,0 +1,82 @@
+/*! * 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 { L as s, n as p } from "./base-nYalvNMy.js";
+import { unsafeCSS as n, html as d } from "lit";
+const h = ':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 m = Object.defineProperty, u = (a, t, c, b) => {
+  for (var o = void 0, l = a.length - 1, i; l >= 0; l--)
+    (i = a[l]) && (o = i(t, c, o) || o);
+  return o && m(t, c, o), o;
+};
+const e = class e extends s {
+  constructor() {
+    super(...arguments), this.open = !1, this.color = "rgba(255, 0, 0, 0.5)";
+  }
+  render() {
+    return d`
+      <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>
+    `;
+  }
+};
+e.styles = n(h);
+let r = e;
+u([
+  p({ type: Boolean, reflect: !0 })
+], r.prototype, "open");
+u([
+  p({ type: String })
+], r.prototype, "color");
+export {
+  r as L
+};

package/lib/color-menu/index.cjs

@@ -0,0 +1,86 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@luzmo/icons"),h=require("../base-BCmA9Wxv.cjs"),g=require("../sized-mixin-BSYHt8nT.cjs"),n=require("lit"),z=require("../state-DReJ3hB6.cjs"),s=require("../query-BL-TJj7K.cjs");require("../divider/index.cjs");require("../popover/index.cjs");require("../swatch/index.cjs");require("../color-area/index.cjs");require("../color-field/index.cjs");require("../color-handle/index.cjs");require("../color-slider/index.cjs");const a=require("../index-DCKCHDTt.cjs"),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 f=Object.defineProperty,l=(p,o,t,e)=>{for(var i=void 0,m=p.length-1,d;m>=0;m--)(d=p[m])&&(i=d(o,t,i)||i);return i&&f(o,t,i),i};const u=class u extends g.SizedMixin(h.LuzmoElement){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(o){var e;const t=new a.TinyColor((e=o==null?void 0:o.target)==null?void 0:e.color);this._format=t.format==="name"?"rgb":t.format,this._rgbaColor=t.toRgbString(),this._alpha=this.noAlphaChannel?1:t.getAlpha(),this._rgbColor=t.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(t),this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}handleAreaChange(o){o.stopPropagation(),o.preventDefault(),this._rgbColor=this.areaElement.color;const t=new a.TinyColor(this._rgbColor);this._rgbaColor=t.setAlpha(this._alpha).toRgbString(),this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(t),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}handleHueSliderChange(o){o.stopPropagation(),o.preventDefault();const t=new a.TinyColor(this._rgbColor).toHsl();t.h=this.hueSliderElement.value;const e=new a.TinyColor(t);this._rgbColor=e.toRgbString(),this._rgbaColor=e.setAlpha(this._alpha).toRgbString(),this.areaElement.color=this._rgbColor,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(o){o.stopPropagation(),o.preventDefault(),this._alpha=this.opacitySliderElement.sliderHandlePosition/100;const t=new a.TinyColor(this._rgbColor).setAlpha(this._alpha);this._rgbaColor=t.toRgbString(),this.colorFieldElement.value=this.formatTextField(t),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent("change",{detail:this.color}))}handleFieldChange(o){if(o.stopPropagation(),o.preventDefault(),this.colorFieldElement.checkValidity()){const t=new a.TinyColor(this.colorFieldElement.value);this._format=t.format,this._rgbaColor=t.toRgbString(),this._alpha=t.getAlpha(),this._rgbColor=t.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(o){return this._format==="hsl"?o.toHslString():this._format==="hex"?this.noAlphaChannel?o.toHexString():o.toHex8String():(this._format==="name"&&(this._format="rgb"),o.toRgbString())}cycleFormat(){const o=["rgb","hsl","hex"];this._format=o[(o.indexOf(this._format)+1)%o.length];const t=new a.TinyColor(this.color),e=this.formatTextField(t);this.colorFieldElement.value=e}updated(o){if(o.has("color")&&this.color!==this._previousColor){this._previousColor=this.color;const t=new a.TinyColor(this.color);this._alpha=t.getAlpha(),this._rgbColor=t.setAlpha(1).toRgbString(),this._rgbaColor=t.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"}o.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 o;return n.html`
+      <div>
+        <luzmo-color-area
+          .size=${this.size}
+          @input=${this.handleAreaChange}
+        ></luzmo-color-area>
+        <div class="hue-opacity-text-swatches-container">
+          <div class="swatch-sliders-container">
+            <div class="swatch-example-container">
+              <luzmo-swatch
+                rounding="full"
+                .size=${this.noAlphaChannel&&["s","m"].includes(this.size)?"s":"l"}
+                readonly
+              ></luzmo-swatch>
+            </div>
+            <div class="slider-container" style="flex-grow: 1;">
+              <luzmo-color-slider
+                id="luzmo-hue-slider"
+                @input=${this.handleHueSliderChange}
+              >
+              </luzmo-color-slider>
+              ${this.noAlphaChannel?"":this.renderOpacitySlider()}
+            </div>
+          </div>
+          <div class="field-container">
+            <luzmo-color-field
+              .size=${this.size}
+              @input=${this.handleFieldChange}
+            >
+            </luzmo-color-field>
+            <button
+              class="format-container"
+              aria-label="Color format"
+              @click=${this.cycleFormat}
+              tabindex="0"
+            >
+              <div class="format-label">${this._format}</div>
+              <div class="change-format-icon">
+                <div class="angle-icon">${c.luzmoIcon(c.luzmoAngleUp)}</div>
+                <div class="angle-icon">${c.luzmoIcon(c.luzmoAngleDown)}</div>
+              </div>
+            </button>
+          </div>
+          ${((o=this.swatches)==null?void 0:o.length)>0?n.html`
+                <luzmo-divider></luzmo-divider>
+                <div class="swatches-container">
+                  ${this.swatches.map(t=>n.html`
+                      <div class="swatch-choice">
+                        <luzmo-swatch
+                          @click=${this.setColor}
+                          .color=${t}
+                          .size=${this.size}
+                          readonly
+                        >
+                        </luzmo-swatch>
+                      </div>
+                    `)}
+                </div>
+              `:""}
+        </div>
+      </div>
+    `}};u.styles=n.unsafeCSS(v);let r=u;l([h.n({type:String,reflect:!0})],r.prototype,"color");l([h.n({type:Boolean,reflect:!0,attribute:"no-alpha-channel"})],r.prototype,"noAlphaChannel");l([h.n({type:Array,reflect:!0})],r.prototype,"swatches");l([s.e("luzmo-color-area")],r.prototype,"areaElement");l([s.e("#luzmo-hue-slider")],r.prototype,"hueSliderElement");l([s.e("#luzmo-opacity-slider")],r.prototype,"opacitySliderElement");l([s.e("luzmo-color-field")],r.prototype,"colorFieldElement");l([s.e("luzmo-swatch")],r.prototype,"swatchElement");l([z.r()],r.prototype,"_format");customElements.get("luzmo-color-menu")||customElements.define("luzmo-color-menu",r);exports.LuzmoColorMenu=r;

package/lib/color-menu/index.js

@@ -0,0 +1,204 @@
+/*! * 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 { luzmoIcon as p, luzmoAngleUp as z, luzmoAngleDown as f } from "@luzmo/icons";
+import { L as v, n as h } from "../base-nYalvNMy.js";
+import { S as b } from "../sized-mixin-Dl0KoEcV.js";
+import { unsafeCSS as x, html as s } from "lit";
+import { r as w } from "../state-BAO-13Bs.js";
+import { e as n } from "../query-D_KR_GUc.js";
+import "../divider/index.js";
+import "../popover/index.js";
+import "../swatch/index.js";
+import "../color-area/index.js";
+import "../color-field/index.js";
+import "../color-handle/index.js";
+import "../color-slider/index.js";
+import { T as a } from "../index-C1chwzNp.js";
+const g = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const i = document.createElement("style");
+    i.setAttribute("data-luzmo-vars", ""), i.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(i);
+  }
+};
+g();
+const C = '@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 y = Object.defineProperty, t = (i, o, r, e) => {
+  for (var c = void 0, m = i.length - 1, d; m >= 0; m--)
+    (d = i[m]) && (c = d(o, r, c) || c);
+  return c && y(o, r, c), c;
+};
+const u = class u extends b(v) {
+  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(o) {
+    var e;
+    const r = new a((e = o == null ? void 0 : o.target) == null ? void 0 : e.color);
+    this._format = r.format === "name" ? "rgb" : r.format, this._rgbaColor = r.toRgbString(), this._alpha = this.noAlphaChannel ? 1 : r.getAlpha(), this._rgbColor = r.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(r), this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
+  }
+  handleAreaChange(o) {
+    o.stopPropagation(), o.preventDefault(), this._rgbColor = this.areaElement.color;
+    const r = new a(this._rgbColor);
+    this._rgbaColor = r.setAlpha(this._alpha).toRgbString(), this.colorFieldElement.value = this._rgbaColor, this.noAlphaChannel || (this.opacitySliderElement.color = this._rgbaColor), this.colorFieldElement.value = this.formatTextField(r), this.swatchElement.color = this._rgbaColor, this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
+  }
+  handleHueSliderChange(o) {
+    o.stopPropagation(), o.preventDefault();
+    const r = new a(this._rgbColor).toHsl();
+    r.h = this.hueSliderElement.value;
+    const e = new a(r);
+    this._rgbColor = e.toRgbString(), this._rgbaColor = e.setAlpha(this._alpha).toRgbString(), this.areaElement.color = this._rgbColor, 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(o) {
+    o.stopPropagation(), o.preventDefault(), this._alpha = this.opacitySliderElement.sliderHandlePosition / 100;
+    const r = new a(this._rgbColor).setAlpha(this._alpha);
+    this._rgbaColor = r.toRgbString(), this.colorFieldElement.value = this.formatTextField(r), this.swatchElement.color = this._rgbaColor, this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
+  }
+  handleFieldChange(o) {
+    if (o.stopPropagation(), o.preventDefault(), this.colorFieldElement.checkValidity()) {
+      const r = new a(this.colorFieldElement.value);
+      this._format = r.format, this._rgbaColor = r.toRgbString(), this._alpha = r.getAlpha(), this._rgbColor = r.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(o) {
+    return this._format === "hsl" ? o.toHslString() : this._format === "hex" ? this.noAlphaChannel ? o.toHexString() : o.toHex8String() : (this._format === "name" && (this._format = "rgb"), o.toRgbString());
+  }
+  cycleFormat() {
+    const o = ["rgb", "hsl", "hex"];
+    this._format = o[(o.indexOf(this._format) + 1) % o.length];
+    const r = new a(this.color), e = this.formatTextField(r);
+    this.colorFieldElement.value = e;
+  }
+  updated(o) {
+    if (o.has("color") && this.color !== this._previousColor) {
+      this._previousColor = this.color;
+      const r = new a(this.color);
+      this._alpha = r.getAlpha(), this._rgbColor = r.setAlpha(1).toRgbString(), this._rgbaColor = r.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";
+    }
+    o.has("noAlphaChannel") && !this.noAlphaChannel && (this.opacitySliderElement.color = this._rgbaColor);
+  }
+  renderOpacitySlider() {
+    return s`
+      <luzmo-color-slider
+        id="luzmo-opacity-slider"
+        mode="opacity"
+        @input=${this.handleOpacitySliderChange}
+      >
+      </luzmo-color-slider>
+    `;
+  }
+  render() {
+    var o;
+    return s`
+      <div>
+        <luzmo-color-area
+          .size=${this.size}
+          @input=${this.handleAreaChange}
+        ></luzmo-color-area>
+        <div class="hue-opacity-text-swatches-container">
+          <div class="swatch-sliders-container">
+            <div class="swatch-example-container">
+              <luzmo-swatch
+                rounding="full"
+                .size=${this.noAlphaChannel && ["s", "m"].includes(this.size) ? "s" : "l"}
+                readonly
+              ></luzmo-swatch>
+            </div>
+            <div class="slider-container" style="flex-grow: 1;">
+              <luzmo-color-slider
+                id="luzmo-hue-slider"
+                @input=${this.handleHueSliderChange}
+              >
+              </luzmo-color-slider>
+              ${this.noAlphaChannel ? "" : this.renderOpacitySlider()}
+            </div>
+          </div>
+          <div class="field-container">
+            <luzmo-color-field
+              .size=${this.size}
+              @input=${this.handleFieldChange}
+            >
+            </luzmo-color-field>
+            <button
+              class="format-container"
+              aria-label="Color format"
+              @click=${this.cycleFormat}
+              tabindex="0"
+            >
+              <div class="format-label">${this._format}</div>
+              <div class="change-format-icon">
+                <div class="angle-icon">${p(z)}</div>
+                <div class="angle-icon">${p(f)}</div>
+              </div>
+            </button>
+          </div>
+          ${((o = this.swatches) == null ? void 0 : o.length) > 0 ? s`
+                <luzmo-divider></luzmo-divider>
+                <div class="swatches-container">
+                  ${this.swatches.map(
+      (r) => s`
+                      <div class="swatch-choice">
+                        <luzmo-swatch
+                          @click=${this.setColor}
+                          .color=${r}
+                          .size=${this.size}
+                          readonly
+                        >
+                        </luzmo-swatch>
+                      </div>
+                    `
+    )}
+                </div>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+u.styles = x(C);
+let l = u;
+t([
+  h({ type: String, reflect: !0 })
+], l.prototype, "color");
+t([
+  h({ type: Boolean, reflect: !0, attribute: "no-alpha-channel" })
+], l.prototype, "noAlphaChannel");
+t([
+  h({ type: Array, reflect: !0 })
+], l.prototype, "swatches");
+t([
+  n("luzmo-color-area")
+], l.prototype, "areaElement");
+t([
+  n("#luzmo-hue-slider")
+], l.prototype, "hueSliderElement");
+t([
+  n("#luzmo-opacity-slider")
+], l.prototype, "opacitySliderElement");
+t([
+  n("luzmo-color-field")
+], l.prototype, "colorFieldElement");
+t([
+  n("luzmo-swatch")
+], l.prototype, "swatchElement");
+t([
+  w()
+], l.prototype, "_format");
+customElements.get("luzmo-color-menu") || customElements.define("luzmo-color-menu", l);
+export {
+  l as LuzmoColorMenu
+};