@luzmo/analytics-components-kit 1.0.1-alpha.3 → 1.0.1-alpha.31

package/components/edit-option-color-picker/index.js

@@ -0,0 +1,2554 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. 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.
+ * */
+var Co = Object.getPrototypeOf;
+var $o = Reflect.get;
+var oo = (r, o, e) => $o(Co(r), e, o);
+import { a as R, D as s, z as I, R as m, m as X } from "../base-D76d76ww-D0dTUBua.js";
+import { n as uo } from "../directive-helpers-Bx_ey3Gk-Csi4AxXe.js";
+import { m as U, d as C } from "../if-defined-D-1p2bLN-Bn-33APC.js";
+import { S as J, g as Eo, v as _o, s as Ao } from "../luzmo-icons-BLN3xVgr-Tz5XXgbL.js";
+import { w as Mo, a as Ho } from "../async-directive-C_bp5UcZ-B5_19oN_.js";
+import { l as ho, u as mo } from "../streaming-listener-C8Ctj0Q6-lanbGKR9.js";
+import { i as Po } from "../text-field-C0pFjPG1-B4TRivuD.js";
+import { p as Ro, d as Fo, a as To } from "../index-BXMPi13W.js";
+import { r as po } from "../focusable-BNESohBR-DYvAZYXL.js";
+import "../index-fl13NYnO.js";
+import "../index-Brg_sVUg.js";
+import { o as eo } from "../when-CDK1Tt5Y-C6ViXC43.js";
+import { a as Bo } from "../observe-slot-text-CVKLDesL-CXUeCmXW.js";
+import { m as No } from "../roving-tabindex-DOg4z6ZU-dufnVmvL.js";
+import "../index-Rjoe8cIs.js";
+import { x as Uo, n as F } from "../focusable-Dw_pMNQL.js";
+import { e as Do } from "../query-Ddbd72Um.js";
+import { L as Io } from "../edit-option-base-DOezOLDd.js";
+const So = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const r = document.createElement("style");
+    r.setAttribute("data-luzmo-vars", ""), r.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-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-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(r);
+  }
+};
+So();
+/*! * 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.
+ * */
+const Oo = ':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 Lo = Object.defineProperty, go = (r, o, e, t) => {
+  for (var l = void 0, i = r.length - 1, a; i >= 0; i--)
+    (a = r[i]) && (l = a(o, e, l) || l);
+  return l && Lo(o, e, l), l;
+};
+const bo = class extends I {
+  constructor() {
+    super(...arguments), this.open = !1, this.color = "rgba(255, 0, 0, 0.5)";
+  }
+  render() {
+    return m`
+      <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>
+    `;
+  }
+};
+bo.styles = R(Oo);
+let zo = bo;
+go([
+  s({ type: Boolean, reflect: !0 })
+], zo.prototype, "open");
+go([
+  s({ type: String })
+], zo.prototype, "color");
+/*! * 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.
+ * */
+const jo = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const r = document.createElement("style");
+    r.setAttribute("data-luzmo-vars", ""), r.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
+  }
+};
+jo();
+const qo = ':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 Ko = Object.defineProperty, W = (r, o, e, t) => {
+  for (var l = void 0, i = r.length - 1, a; i >= 0; i--)
+    (a = r[i]) && (l = a(o, e, l) || l);
+  return l && Ko(o, e, l), l;
+};
+const fo = class extends I {
+  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 m`
+      <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);
+  }
+};
+fo.styles = R(qo);
+let O = fo;
+W([
+  s({ type: Boolean, reflect: !0 })
+], O.prototype, "disabled");
+W([
+  s({ type: Boolean, reflect: !0 })
+], O.prototype, "focused");
+W([
+  s({ type: Boolean, reflect: !0 })
+], O.prototype, "open");
+W([
+  s({ type: String })
+], O.prototype, "color");
+customElements.get("luzmo-color-handle") || customElements.define("luzmo-color-handle", O);
+const Vo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  LuzmoColorHandle: O
+}, Symbol.toStringTag, { value: "Module" }));
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+function p(r, o) {
+  Xo(r) && (r = "100%");
+  const e = Wo(r);
+  return r = o === 360 ? r : Math.min(o, Math.max(0, parseFloat(r))), e && (r = parseInt(String(r * o), 10) / 100), Math.abs(r - o) < 1e-6 ? 1 : (o === 360 ? r = (r < 0 ? r % o + o : r % o) / parseFloat(String(o)) : r = r % o / parseFloat(String(o)), r);
+}
+function j(r) {
+  return Math.min(1, Math.max(0, r));
+}
+function Xo(r) {
+  return typeof r == "string" && r.indexOf(".") !== -1 && parseFloat(r) === 1;
+}
+function Wo(r) {
+  return typeof r == "string" && r.indexOf("%") !== -1;
+}
+function vo(r) {
+  return r = parseFloat(r), (isNaN(r) || r < 0 || r > 1) && (r = 1), r;
+}
+function q(r) {
+  return Number(r) <= 1 ? `${Number(r) * 100}%` : r;
+}
+function N(r) {
+  return r.length === 1 ? "0" + r : String(r);
+}
+function Yo(r, o, e) {
+  return {
+    r: p(r, 255) * 255,
+    g: p(o, 255) * 255,
+    b: p(e, 255) * 255
+  };
+}
+function ro(r, o, e) {
+  r = p(r, 255), o = p(o, 255), e = p(e, 255);
+  const t = Math.max(r, o, e), l = Math.min(r, o, e);
+  let i = 0, a = 0;
+  const n = (t + l) / 2;
+  if (t === l)
+    a = 0, i = 0;
+  else {
+    const c = t - l;
+    switch (a = n > 0.5 ? c / (2 - t - l) : c / (t + l), t) {
+      case r:
+        i = (o - e) / c + (o < e ? 6 : 0);
+        break;
+      case o:
+        i = (e - r) / c + 2;
+        break;
+      case e:
+        i = (r - o) / c + 4;
+        break;
+    }
+    i /= 6;
+  }
+  return { h: i, s: a, l: n };
+}
+function Z(r, o, e) {
+  return e < 0 && (e += 1), e > 1 && (e -= 1), e < 1 / 6 ? r + (o - r) * (6 * e) : e < 1 / 2 ? o : e < 2 / 3 ? r + (o - r) * (2 / 3 - e) * 6 : r;
+}
+function Zo(r, o, e) {
+  let t, l, i;
+  if (r = p(r, 360), o = p(o, 100), e = p(e, 100), o === 0)
+    l = e, i = e, t = e;
+  else {
+    const a = e < 0.5 ? e * (1 + o) : e + o - e * o, n = 2 * e - a;
+    t = Z(n, a, r + 1 / 3), l = Z(n, a, r), i = Z(n, a, r - 1 / 3);
+  }
+  return { r: t * 255, g: l * 255, b: i * 255 };
+}
+function to(r, o, e) {
+  r = p(r, 255), o = p(o, 255), e = p(e, 255);
+  const t = Math.max(r, o, e), l = Math.min(r, o, e);
+  let i = 0;
+  const a = t, n = t - l, c = t === 0 ? 0 : n / t;
+  if (t === l)
+    i = 0;
+  else {
+    switch (t) {
+      case r:
+        i = (o - e) / n + (o < e ? 6 : 0);
+        break;
+      case o:
+        i = (e - r) / n + 2;
+        break;
+      case e:
+        i = (r - o) / n + 4;
+        break;
+    }
+    i /= 6;
+  }
+  return { h: i, s: c, v: a };
+}
+function Go(r, o, e) {
+  r = p(r, 360) * 6, o = p(o, 100), e = p(e, 100);
+  const t = Math.floor(r), l = r - t, i = e * (1 - o), a = e * (1 - l * o), n = e * (1 - (1 - l) * o), c = t % 6, d = [e, a, i, i, n, e][c], b = [n, e, e, a, i, i][c], B = [i, i, n, e, e, a][c];
+  return { r: d * 255, g: b * 255, b: B * 255 };
+}
+function lo(r, o, e, t) {
+  const l = [
+    N(Math.round(r).toString(16)),
+    N(Math.round(o).toString(16)),
+    N(Math.round(e).toString(16))
+  ];
+  return t && l[0].startsWith(l[0].charAt(1)) && l[1].startsWith(l[1].charAt(1)) && l[2].startsWith(l[2].charAt(1)) ? l[0].charAt(0) + l[1].charAt(0) + l[2].charAt(0) : l.join("");
+}
+function Jo(r, o, e, t, l) {
+  const i = [
+    N(Math.round(r).toString(16)),
+    N(Math.round(o).toString(16)),
+    N(Math.round(e).toString(16)),
+    N(oe(t))
+  ];
+  return l && i[0].startsWith(i[0].charAt(1)) && i[1].startsWith(i[1].charAt(1)) && i[2].startsWith(i[2].charAt(1)) && i[3].startsWith(i[3].charAt(1)) ? i[0].charAt(0) + i[1].charAt(0) + i[2].charAt(0) + i[3].charAt(0) : i.join("");
+}
+function Qo(r, o, e, t) {
+  const l = r / 100, i = o / 100, a = e / 100, n = t / 100, c = 255 * (1 - l) * (1 - n), d = 255 * (1 - i) * (1 - n), b = 255 * (1 - a) * (1 - n);
+  return { r: c, g: d, b };
+}
+function io(r, o, e) {
+  let t = 1 - r / 255, l = 1 - o / 255, i = 1 - e / 255, a = Math.min(t, l, i);
+  return a === 1 ? (t = 0, l = 0, i = 0) : (t = (t - a) / (1 - a) * 100, l = (l - a) / (1 - a) * 100, i = (i - a) / (1 - a) * 100), a *= 100, {
+    c: Math.round(t),
+    m: Math.round(l),
+    y: Math.round(i),
+    k: Math.round(a)
+  };
+}
+function oe(r) {
+  return Math.round(parseFloat(r) * 255).toString(16);
+}
+function ao(r) {
+  return x(r) / 255;
+}
+function x(r) {
+  return parseInt(r, 16);
+}
+function ee(r) {
+  return {
+    r: r >> 16,
+    g: (r & 65280) >> 8,
+    b: r & 255
+  };
+}
+const Q = {
+  aliceblue: "#f0f8ff",
+  antiquewhite: "#faebd7",
+  aqua: "#00ffff",
+  aquamarine: "#7fffd4",
+  azure: "#f0ffff",
+  beige: "#f5f5dc",
+  bisque: "#ffe4c4",
+  black: "#000000",
+  blanchedalmond: "#ffebcd",
+  blue: "#0000ff",
+  blueviolet: "#8a2be2",
+  brown: "#a52a2a",
+  burlywood: "#deb887",
+  cadetblue: "#5f9ea0",
+  chartreuse: "#7fff00",
+  chocolate: "#d2691e",
+  coral: "#ff7f50",
+  cornflowerblue: "#6495ed",
+  cornsilk: "#fff8dc",
+  crimson: "#dc143c",
+  cyan: "#00ffff",
+  darkblue: "#00008b",
+  darkcyan: "#008b8b",
+  darkgoldenrod: "#b8860b",
+  darkgray: "#a9a9a9",
+  darkgreen: "#006400",
+  darkgrey: "#a9a9a9",
+  darkkhaki: "#bdb76b",
+  darkmagenta: "#8b008b",
+  darkolivegreen: "#556b2f",
+  darkorange: "#ff8c00",
+  darkorchid: "#9932cc",
+  darkred: "#8b0000",
+  darksalmon: "#e9967a",
+  darkseagreen: "#8fbc8f",
+  darkslateblue: "#483d8b",
+  darkslategray: "#2f4f4f",
+  darkslategrey: "#2f4f4f",
+  darkturquoise: "#00ced1",
+  darkviolet: "#9400d3",
+  deeppink: "#ff1493",
+  deepskyblue: "#00bfff",
+  dimgray: "#696969",
+  dimgrey: "#696969",
+  dodgerblue: "#1e90ff",
+  firebrick: "#b22222",
+  floralwhite: "#fffaf0",
+  forestgreen: "#228b22",
+  fuchsia: "#ff00ff",
+  gainsboro: "#dcdcdc",
+  ghostwhite: "#f8f8ff",
+  goldenrod: "#daa520",
+  gold: "#ffd700",
+  gray: "#808080",
+  green: "#008000",
+  greenyellow: "#adff2f",
+  grey: "#808080",
+  honeydew: "#f0fff0",
+  hotpink: "#ff69b4",
+  indianred: "#cd5c5c",
+  indigo: "#4b0082",
+  ivory: "#fffff0",
+  khaki: "#f0e68c",
+  lavenderblush: "#fff0f5",
+  lavender: "#e6e6fa",
+  lawngreen: "#7cfc00",
+  lemonchiffon: "#fffacd",
+  lightblue: "#add8e6",
+  lightcoral: "#f08080",
+  lightcyan: "#e0ffff",
+  lightgoldenrodyellow: "#fafad2",
+  lightgray: "#d3d3d3",
+  lightgreen: "#90ee90",
+  lightgrey: "#d3d3d3",
+  lightpink: "#ffb6c1",
+  lightsalmon: "#ffa07a",
+  lightseagreen: "#20b2aa",
+  lightskyblue: "#87cefa",
+  lightslategray: "#778899",
+  lightslategrey: "#778899",
+  lightsteelblue: "#b0c4de",
+  lightyellow: "#ffffe0",
+  lime: "#00ff00",
+  limegreen: "#32cd32",
+  linen: "#faf0e6",
+  magenta: "#ff00ff",
+  maroon: "#800000",
+  mediumaquamarine: "#66cdaa",
+  mediumblue: "#0000cd",
+  mediumorchid: "#ba55d3",
+  mediumpurple: "#9370db",
+  mediumseagreen: "#3cb371",
+  mediumslateblue: "#7b68ee",
+  mediumspringgreen: "#00fa9a",
+  mediumturquoise: "#48d1cc",
+  mediumvioletred: "#c71585",
+  midnightblue: "#191970",
+  mintcream: "#f5fffa",
+  mistyrose: "#ffe4e1",
+  moccasin: "#ffe4b5",
+  navajowhite: "#ffdead",
+  navy: "#000080",
+  oldlace: "#fdf5e6",
+  olive: "#808000",
+  olivedrab: "#6b8e23",
+  orange: "#ffa500",
+  orangered: "#ff4500",
+  orchid: "#da70d6",
+  palegoldenrod: "#eee8aa",
+  palegreen: "#98fb98",
+  paleturquoise: "#afeeee",
+  palevioletred: "#db7093",
+  papayawhip: "#ffefd5",
+  peachpuff: "#ffdab9",
+  peru: "#cd853f",
+  pink: "#ffc0cb",
+  plum: "#dda0dd",
+  powderblue: "#b0e0e6",
+  purple: "#800080",
+  rebeccapurple: "#663399",
+  red: "#ff0000",
+  rosybrown: "#bc8f8f",
+  royalblue: "#4169e1",
+  saddlebrown: "#8b4513",
+  salmon: "#fa8072",
+  sandybrown: "#f4a460",
+  seagreen: "#2e8b57",
+  seashell: "#fff5ee",
+  sienna: "#a0522d",
+  silver: "#c0c0c0",
+  skyblue: "#87ceeb",
+  slateblue: "#6a5acd",
+  slategray: "#708090",
+  slategrey: "#708090",
+  snow: "#fffafa",
+  springgreen: "#00ff7f",
+  steelblue: "#4682b4",
+  tan: "#d2b48c",
+  teal: "#008080",
+  thistle: "#d8bfd8",
+  tomato: "#ff6347",
+  turquoise: "#40e0d0",
+  violet: "#ee82ee",
+  wheat: "#f5deb3",
+  white: "#ffffff",
+  whitesmoke: "#f5f5f5",
+  yellow: "#ffff00",
+  yellowgreen: "#9acd32"
+};
+function re(r) {
+  let o = { r: 0, g: 0, b: 0 }, e = 1, t = null, l = null, i = null, a = !1, n = !1;
+  return typeof r == "string" && (r = ie(r)), typeof r == "object" && (v(r.r) && v(r.g) && v(r.b) ? (o = Yo(r.r, r.g, r.b), a = !0, n = String(r.r).substr(-1) === "%" ? "prgb" : "rgb") : v(r.h) && v(r.s) && v(r.v) ? (t = q(r.s), l = q(r.v), o = Go(r.h, t, l), a = !0, n = "hsv") : v(r.h) && v(r.s) && v(r.l) ? (t = q(r.s), i = q(r.l), o = Zo(r.h, t, i), a = !0, n = "hsl") : v(r.c) && v(r.m) && v(r.y) && v(r.k) && (o = Qo(r.c, r.m, r.y, r.k), a = !0, n = "cmyk"), Object.prototype.hasOwnProperty.call(r, "a") && (e = r.a)), e = vo(e), {
+    ok: a,
+    format: r.format || n,
+    r: Math.min(255, Math.max(o.r, 0)),
+    g: Math.min(255, Math.max(o.g, 0)),
+    b: Math.min(255, Math.max(o.b, 0)),
+    a: e
+  };
+}
+const te = "[-\\+]?\\d+%?", le = "[-\\+]?\\d*\\.\\d+%?", P = "(?:" + le + ")|(?:" + te + ")", G = "[\\s|\\(]+(" + P + ")[,|\\s]+(" + P + ")[,|\\s]+(" + P + ")\\s*\\)?", K = (
+  // eslint-disable-next-line prettier/prettier
+  "[\\s|\\(]+(" + P + ")[,|\\s]+(" + P + ")[,|\\s]+(" + P + ")[,|\\s]+(" + P + ")\\s*\\)?"
+), w = {
+  CSS_UNIT: new RegExp(P),
+  rgb: new RegExp("rgb" + G),
+  rgba: new RegExp("rgba" + K),
+  hsl: new RegExp("hsl" + G),
+  hsla: new RegExp("hsla" + K),
+  hsv: new RegExp("hsv" + G),
+  hsva: new RegExp("hsva" + K),
+  cmyk: new RegExp("cmyk" + K),
+  hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+  hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+  hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+  hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
+};
+function ie(r) {
+  if (r = r.trim().toLowerCase(), r.length === 0)
+    return !1;
+  let o = !1;
+  if (Q[r])
+    r = Q[r], o = !0;
+  else if (r === "transparent")
+    return { r: 0, g: 0, b: 0, a: 0, format: "name" };
+  let e = w.rgb.exec(r);
+  return e ? { r: e[1], g: e[2], b: e[3] } : (e = w.rgba.exec(r), e ? { r: e[1], g: e[2], b: e[3], a: e[4] } : (e = w.hsl.exec(r), e ? { h: e[1], s: e[2], l: e[3] } : (e = w.hsla.exec(r), e ? { h: e[1], s: e[2], l: e[3], a: e[4] } : (e = w.hsv.exec(r), e ? { h: e[1], s: e[2], v: e[3] } : (e = w.hsva.exec(r), e ? { h: e[1], s: e[2], v: e[3], a: e[4] } : (e = w.cmyk.exec(r), e ? {
+    c: e[1],
+    m: e[2],
+    y: e[3],
+    k: e[4]
+  } : (e = w.hex8.exec(r), e ? {
+    r: x(e[1]),
+    g: x(e[2]),
+    b: x(e[3]),
+    a: ao(e[4]),
+    format: o ? "name" : "hex8"
+  } : (e = w.hex6.exec(r), e ? {
+    r: x(e[1]),
+    g: x(e[2]),
+    b: x(e[3]),
+    format: o ? "name" : "hex"
+  } : (e = w.hex4.exec(r), e ? {
+    r: x(e[1] + e[1]),
+    g: x(e[2] + e[2]),
+    b: x(e[3] + e[3]),
+    a: ao(e[4] + e[4]),
+    format: o ? "name" : "hex8"
+  } : (e = w.hex3.exec(r), e ? {
+    r: x(e[1] + e[1]),
+    g: x(e[2] + e[2]),
+    b: x(e[3] + e[3]),
+    format: o ? "name" : "hex"
+  } : !1))))))))));
+}
+function v(r) {
+  return typeof r == "number" ? !Number.isNaN(r) : w.CSS_UNIT.test(r);
+}
+let h = class u {
+  constructor(o = "", e = {}) {
+    if (o instanceof u)
+      return o;
+    typeof o == "number" && (o = ee(o)), this.originalInput = o;
+    const t = re(o);
+    this.originalInput = o, this.r = t.r, this.g = t.g, this.b = t.b, this.a = t.a, this.roundA = Math.round(100 * this.a) / 100, this.format = e.format ?? t.format, this.gradientType = e.gradientType, this.r < 1 && (this.r = Math.round(this.r)), this.g < 1 && (this.g = Math.round(this.g)), this.b < 1 && (this.b = Math.round(this.b)), this.isValid = t.ok;
+  }
+  isDark() {
+    return this.getBrightness() < 128;
+  }
+  isLight() {
+    return !this.isDark();
+  }
+  /**
+   * Returns the perceived brightness of the color, from 0-255.
+   */
+  getBrightness() {
+    const o = this.toRgb();
+    return (o.r * 299 + o.g * 587 + o.b * 114) / 1e3;
+  }
+  /**
+   * Returns the perceived luminance of a color, from 0-1.
+   */
+  getLuminance() {
+    const o = this.toRgb();
+    let e, t, l;
+    const i = o.r / 255, a = o.g / 255, n = o.b / 255;
+    return i <= 0.03928 ? e = i / 12.92 : e = Math.pow((i + 0.055) / 1.055, 2.4), a <= 0.03928 ? t = a / 12.92 : t = Math.pow((a + 0.055) / 1.055, 2.4), n <= 0.03928 ? l = n / 12.92 : l = Math.pow((n + 0.055) / 1.055, 2.4), 0.2126 * e + 0.7152 * t + 0.0722 * l;
+  }
+  /**
+   * Returns the alpha value of a color, from 0-1.
+   */
+  getAlpha() {
+    return this.a;
+  }
+  /**
+   * Sets the alpha value on the current color.
+   *
+   * @param alpha - The new alpha value. The accepted range is 0-1.
+   */
+  setAlpha(o) {
+    return this.a = vo(o), this.roundA = Math.round(100 * this.a) / 100, this;
+  }
+  /**
+   * Returns whether the color is monochrome.
+   */
+  isMonochrome() {
+    const { s: o } = this.toHsl();
+    return o === 0;
+  }
+  /**
+   * Returns the object as a HSVA object.
+   */
+  toHsv() {
+    const o = to(this.r, this.g, this.b);
+    return { h: o.h * 360, s: o.s, v: o.v, a: this.a };
+  }
+  /**
+   * Returns the hsva values interpolated into a string with the following format:
+   * "hsva(xxx, xxx, xxx, xx)".
+   */
+  toHsvString() {
+    const o = to(this.r, this.g, this.b), e = Math.round(o.h * 360), t = Math.round(o.s * 100), l = Math.round(o.v * 100);
+    return this.a === 1 ? `hsv(${e}, ${t}%, ${l}%)` : `hsva(${e}, ${t}%, ${l}%, ${this.roundA})`;
+  }
+  /**
+   * Returns the object as a HSLA object.
+   */
+  toHsl() {
+    const o = ro(this.r, this.g, this.b);
+    return { h: o.h * 360, s: o.s, l: o.l, a: this.a };
+  }
+  /**
+   * Returns the hsla values interpolated into a string with the following format:
+   * "hsla(xxx, xxx, xxx, xx)".
+   */
+  toHslString() {
+    const o = ro(this.r, this.g, this.b), e = Math.round(o.h * 360), t = Math.round(o.s * 100), l = Math.round(o.l * 100);
+    return this.a === 1 ? `hsl(${e}, ${t}%, ${l}%)` : `hsla(${e}, ${t}%, ${l}%, ${this.roundA})`;
+  }
+  /**
+   * Returns the hex value of the color.
+   * @param allow3Char will shorten hex value to 3 char if possible
+   */
+  toHex(o = !1) {
+    return lo(this.r, this.g, this.b, o);
+  }
+  /**
+   * Returns the hex value of the color -with a # prefixed.
+   * @param allow3Char will shorten hex value to 3 char if possible
+   */
+  toHexString(o = !1) {
+    return "#" + this.toHex(o);
+  }
+  /**
+   * Returns the hex 8 value of the color.
+   * @param allow4Char will shorten hex value to 4 char if possible
+   */
+  toHex8(o = !1) {
+    return Jo(this.r, this.g, this.b, this.a, o);
+  }
+  /**
+   * Returns the hex 8 value of the color -with a # prefixed.
+   * @param allow4Char will shorten hex value to 4 char if possible
+   */
+  toHex8String(o = !1) {
+    return "#" + this.toHex8(o);
+  }
+  /**
+   * Returns the shorter hex value of the color depends on its alpha -with a # prefixed.
+   * @param allowShortChar will shorten hex value to 3 or 4 char if possible
+   */
+  toHexShortString(o = !1) {
+    return this.a === 1 ? this.toHexString(o) : this.toHex8String(o);
+  }
+  /**
+   * Returns the object as a RGBA object.
+   */
+  toRgb() {
+    return {
+      r: Math.round(this.r),
+      g: Math.round(this.g),
+      b: Math.round(this.b),
+      a: this.a
+    };
+  }
+  /**
+   * Returns the RGBA values interpolated into a string with the following format:
+   * "RGBA(xxx, xxx, xxx, xx)".
+   */
+  toRgbString() {
+    const o = Math.round(this.r), e = Math.round(this.g), t = Math.round(this.b);
+    return this.a === 1 ? `rgb(${o}, ${e}, ${t})` : `rgba(${o}, ${e}, ${t}, ${this.roundA})`;
+  }
+  /**
+   * Returns the object as a RGBA object.
+   */
+  toPercentageRgb() {
+    const o = (e) => `${Math.round(p(e, 255) * 100)}%`;
+    return {
+      r: o(this.r),
+      g: o(this.g),
+      b: o(this.b),
+      a: this.a
+    };
+  }
+  /**
+   * Returns the RGBA relative values interpolated into a string
+   */
+  toPercentageRgbString() {
+    const o = (e) => Math.round(p(e, 255) * 100);
+    return this.a === 1 ? `rgb(${o(this.r)}%, ${o(this.g)}%, ${o(this.b)}%)` : `rgba(${o(this.r)}%, ${o(this.g)}%, ${o(this.b)}%, ${this.roundA})`;
+  }
+  toCmyk() {
+    return {
+      ...io(this.r, this.g, this.b)
+    };
+  }
+  toCmykString() {
+    const { c: o, m: e, y: t, k: l } = io(this.r, this.g, this.b);
+    return `cmyk(${o}, ${e}, ${t}, ${l})`;
+  }
+  /**
+   * The 'real' name of the color -if there is one.
+   */
+  toName() {
+    if (this.a === 0)
+      return "transparent";
+    if (this.a < 1)
+      return !1;
+    const o = "#" + lo(this.r, this.g, this.b, !1);
+    for (const [e, t] of Object.entries(Q))
+      if (o === t)
+        return e;
+    return !1;
+  }
+  toString(o) {
+    const e = !!o;
+    o = o ?? this.format;
+    let t = !1;
+    const l = this.a < 1 && this.a >= 0;
+    return !e && l && (o.startsWith("hex") || o === "name") ? o === "name" && this.a === 0 ? this.toName() : this.toRgbString() : (o === "rgb" && (t = this.toRgbString()), o === "prgb" && (t = this.toPercentageRgbString()), (o === "hex" || o === "hex6") && (t = this.toHexString()), o === "hex3" && (t = this.toHexString(!0)), o === "hex4" && (t = this.toHex8String(!0)), o === "hex8" && (t = this.toHex8String()), o === "name" && (t = this.toName()), o === "hsl" && (t = this.toHslString()), o === "hsv" && (t = this.toHsvString()), o === "cmyk" && (t = this.toCmykString()), t || this.toHexString());
+  }
+  toNumber() {
+    return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
+  }
+  clone() {
+    return new u(this.toString());
+  }
+  /**
+   * Lighten the color a given amount. Providing 100 will always return white.
+   * @param amount - valid between 1-100
+   */
+  lighten(o = 10) {
+    const e = this.toHsl();
+    return e.l += o / 100, e.l = j(e.l), new u(e);
+  }
+  /**
+   * Brighten the color a given amount, from 0 to 100.
+   * @param amount - valid between 1-100
+   */
+  brighten(o = 10) {
+    const e = this.toRgb();
+    return e.r = Math.max(0, Math.min(255, e.r - Math.round(255 * -(o / 100)))), e.g = Math.max(0, Math.min(255, e.g - Math.round(255 * -(o / 100)))), e.b = Math.max(0, Math.min(255, e.b - Math.round(255 * -(o / 100)))), new u(e);
+  }
+  /**
+   * Darken the color a given amount, from 0 to 100.
+   * Providing 100 will always return black.
+   * @param amount - valid between 1-100
+   */
+  darken(o = 10) {
+    const e = this.toHsl();
+    return e.l -= o / 100, e.l = j(e.l), new u(e);
+  }
+  /**
+   * Mix the color with pure white, from 0 to 100.
+   * Providing 0 will do nothing, providing 100 will always return white.
+   * @param amount - valid between 1-100
+   */
+  tint(o = 10) {
+    return this.mix("white", o);
+  }
+  /**
+   * Mix the color with pure black, from 0 to 100.
+   * Providing 0 will do nothing, providing 100 will always return black.
+   * @param amount - valid between 1-100
+   */
+  shade(o = 10) {
+    return this.mix("black", o);
+  }
+  /**
+   * Desaturate the color a given amount, from 0 to 100.
+   * Providing 100 will is the same as calling greyscale
+   * @param amount - valid between 1-100
+   */
+  desaturate(o = 10) {
+    const e = this.toHsl();
+    return e.s -= o / 100, e.s = j(e.s), new u(e);
+  }
+  /**
+   * Saturate the color a given amount, from 0 to 100.
+   * @param amount - valid between 1-100
+   */
+  saturate(o = 10) {
+    const e = this.toHsl();
+    return e.s += o / 100, e.s = j(e.s), new u(e);
+  }
+  /**
+   * Completely desaturates a color into greyscale.
+   * Same as calling `desaturate(100)`
+   */
+  greyscale() {
+    return this.desaturate(100);
+  }
+  /**
+   * Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
+   * Values outside of this range will be wrapped into this range.
+   */
+  spin(o) {
+    const e = this.toHsl(), t = (e.h + o) % 360;
+    return e.h = t < 0 ? 360 + t : t, new u(e);
+  }
+  /**
+   * Mix the current color a given amount with another color, from 0 to 100.
+   * 0 means no mixing (return current color).
+   */
+  mix(o, e = 50) {
+    const t = this.toRgb(), l = new u(o).toRgb(), i = e / 100, a = {
+      r: (l.r - t.r) * i + t.r,
+      g: (l.g - t.g) * i + t.g,
+      b: (l.b - t.b) * i + t.b,
+      a: (l.a - t.a) * i + t.a
+    };
+    return new u(a);
+  }
+  analogous(o = 6, e = 30) {
+    const t = this.toHsl(), l = 360 / e, i = [this];
+    for (t.h = (t.h - (l * o >> 1) + 720) % 360; --o; )
+      t.h = (t.h + l) % 360, i.push(new u(t));
+    return i;
+  }
+  /**
+   * taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
+   */
+  complement() {
+    const o = this.toHsl();
+    return o.h = (o.h + 180) % 360, new u(o);
+  }
+  monochromatic(o = 6) {
+    const e = this.toHsv(), { h: t } = e, { s: l } = e;
+    let { v: i } = e;
+    const a = [], n = 1 / o;
+    for (; o--; )
+      a.push(new u({ h: t, s: l, v: i })), i = (i + n) % 1;
+    return a;
+  }
+  splitcomplement() {
+    const o = this.toHsl(), { h: e } = o;
+    return [
+      this,
+      new u({ h: (e + 72) % 360, s: o.s, l: o.l }),
+      new u({ h: (e + 216) % 360, s: o.s, l: o.l })
+    ];
+  }
+  /**
+   * Compute how the color would appear on a background
+   */
+  onBackground(o) {
+    const e = this.toRgb(), t = new u(o).toRgb(), l = e.a + t.a * (1 - e.a);
+    return new u({
+      r: (e.r * e.a + t.r * t.a * (1 - e.a)) / l,
+      g: (e.g * e.a + t.g * t.a * (1 - e.a)) / l,
+      b: (e.b * e.a + t.b * t.a * (1 - e.a)) / l,
+      a: l
+    });
+  }
+  /**
+   * Alias for `polyad(3)`
+   */
+  triad() {
+    return this.polyad(3);
+  }
+  /**
+   * Alias for `polyad(4)`
+   */
+  tetrad() {
+    return this.polyad(4);
+  }
+  /**
+   * Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)
+   * monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...
+   */
+  polyad(o) {
+    const e = this.toHsl(), { h: t } = e, l = [this], i = 360 / o;
+    for (let a = 1; a < o; a++)
+      l.push(new u({ h: (t + a * i) % 360, s: e.s, l: e.l }));
+    return l;
+  }
+  /**
+   * compare color vs current color
+   */
+  equals(o) {
+    const e = new u(o);
+    return this.format === "cmyk" || e.format === "cmyk" ? this.toCmykString() === e.toCmykString() : this.toRgbString() === e.toRgbString();
+  }
+};
+/*! * 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.
+ * */
+const so = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, no = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/, co = /(^hs[v|l]a?\()\d{1,3}/, V = (r, o) => o ? r.toHexString() : r.toHex();
+let xo = class {
+  constructor(o, {
+    applyColorToState: e,
+    extractColorFromState: t,
+    maintains: l
+  }) {
+    this.maintains = "hue", this._hue = 0, this._opacity = 1, this.getColorProcesses = {
+      rgb: (i, a) => a ? i.toRgbString() : i.toRgb(),
+      prgb: (i, a) => a ? i.toPercentageRgbString() : i.toPercentageRgb(),
+      hex8: (i, a) => a ? i.toHex8String() : i.toHex8(),
+      name: (i) => i.toName() || i.toRgbString(),
+      hsl: (i, a) => {
+        if (this.maintains === "hue") {
+          if (a)
+            return i.toHslString().replace(co, `$1${this.hue}`);
+          const { s: b, l: B, a: Y } = i.toHsl();
+          return { h: this.hue, s: b, l: B, a: Y };
+        }
+        if (a)
+          return i.toHslString().replace(
+            no,
+            `$1${this.hue}$2${this.saturation}`
+          );
+        const { s: n, l: c, a: d } = i.toHsl();
+        return { h: this.hue, s: n, l: c, a: d };
+      },
+      hsv: (i, a) => {
+        if (this.maintains === "hue") {
+          if (a)
+            return i.toHsvString().replace(co, `$1${this.hue}`);
+          const { s: b, v: B, a: Y } = i.toHsv();
+          return { h: this.hue, s: b, v: B, a: Y };
+        }
+        if (a)
+          return i.toHsvString().replace(
+            no,
+            `$1${this.hue}$2${this.saturation}`
+          );
+        const { s: n, v: c, a: d } = i.toHsv();
+        return { h: this.hue, s: n, v: c, a: d };
+      },
+      hex: V,
+      hex3: V,
+      hex4: V,
+      hex6: V
+    }, this._color = new h({ h: 0, s: 1, v: 1 }), this._previousColor = new h({ h: 0, s: 1, v: 1 }), this._format = {
+      format: "",
+      isString: !1
+    }, this.host = o, this.applyColorToState = e, this.extractColorFromState = t, this.maintains = l || this.maintains;
+  }
+  setColorProcess(o, e, t, l) {
+    this.maintains === "hue" ? this.setColorMaintainHue(o, e, t, l) : this.maintains === "saturation" && this.setColorMaintainSaturation(
+      o,
+      e,
+      t,
+      l
+    );
+  }
+  setColorMaintainHue(o, e, t, l) {
+    const { h: i, s: a, v: n, a: c } = this._color.toHsv();
+    let d;
+    if (l && t.startsWith("hs")) {
+      const b = so.exec(e);
+      if (b !== null) {
+        const [, B] = b;
+        d = Number(B);
+      }
+    } else if (!l && t.startsWith("hs")) {
+      const b = o.originalInput;
+      d = Object.values(b)[0];
+    }
+    this.hue = d || i, this.opacity = c ?? 1, this.applyColorToState({ h: i, s: a, v: n, a: c });
+  }
+  setColorMaintainSaturation(o, e, t, l) {
+    const { a: i } = this._color.toHsv();
+    if (l && t.startsWith("hs")) {
+      const a = so.exec(e);
+      if (a !== null) {
+        const [, n, c] = a;
+        this.hue = Number(n), this.saturation = Number(c);
+      }
+    } else if (!l && t.startsWith("hs")) {
+      const a = o.originalInput, n = Object.values(a);
+      this.hue = n[0], this.saturation = n[1];
+    } else {
+      const { h: a } = o.toHsv();
+      this.hue = a;
+    }
+    this.opacity = i ?? 1, this.applyColorToState(o.toHsv());
+  }
+  applyColorFromState() {
+    this._color = new h(this.extractColorFromState(this));
+  }
+  get hue() {
+    return this._hue;
+  }
+  set hue(o) {
+    const e = Math.min(360, Math.max(0, o));
+    if (e === this.hue)
+      return;
+    const t = this.hue, { s: l, v: i, a } = this._color.toHsv();
+    this._color = new h({ h: e, s: l, v: i, a }), this._hue = e, this.host.requestUpdate("hue", t);
+  }
+  get opacity() {
+    return this._opacity;
+  }
+  set opacity(o) {
+    const e = Math.min(1, Math.max(0, o));
+    if (e === this.opacity)
+      return;
+    const t = this.opacity, { h: l, s: i, v: a } = this._color.toHsv();
+    this._color = new h({ h: l, s: i, v: a, a: e }), this._opacity = e, this.host.requestUpdate("opacity", t);
+  }
+  /* c8 ignore next 3 */
+  get value() {
+    return this.color;
+  }
+  get color() {
+    return this.getColorProcesses[this._format.format || "hex"](
+      this._color,
+      this._format.isString
+    );
+  }
+  set color(o) {
+    if (o === this.color)
+      return;
+    const e = this._color;
+    this._color = new h(o);
+    const t = this._color.format;
+    let l = typeof o == "string" || o instanceof String;
+    t.startsWith("hex") && (l = o.startsWith("#")), this._format = {
+      format: t,
+      isString: l
+    }, this.setColorProcess(this._color, o, t, l), this.host.requestUpdate("color", e);
+  }
+  getColor(o) {
+    const e = {
+      hsl: "toHsl"
+    };
+    return this._color[e[o]]();
+  }
+  setColor(o) {
+    this._color = o;
+    const e = typeof this._color.originalInput == "string" || this._color.originalInput instanceof String;
+    this.setColorProcess(this._color, o, this._color.format, e);
+  }
+  getHslString() {
+    return this._color.toHslString();
+  }
+  savePreviousColor() {
+    this._previousColor = this._color.clone();
+  }
+  restorePreviousColor() {
+    this.setColor(this._previousColor);
+  }
+};
+/*! * 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.
+ * */
+const ae = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const r = document.createElement("style");
+    r.setAttribute("data-luzmo-vars", ""), r.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
+  }
+};
+ae();
+const se = "@media (forced-colors: active){:host{--highcontrast-color-area-border-color-disabled: GrayText;--highcontrast-color-area-border-color: Canvas;--highcontrast-color-area-fill-color-disabled: Canvas}.gradient,:host([disabled]){forced-color-adjust:none}}:host{cursor:default;-webkit-user-select:none;user-select:none;min-inline-size:var(--luzmo-color-area-min-width, 64px);min-block-size:var(--luzmo-color-area-min-height, 64px);inline-size:var(--luzmo-color-area-width, 192px);block-size:var(--luzmo-color-area-height, 192px);box-sizing:border-box;border-radius:var(--luzmo-color-area-border-radius, var(--luzmo-border-radius-s));border:var(--luzmo-color-area-border-width, var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color, var(--luzmo-color-area-border-color, var(--luzmo-border-color)));display:inline-block;position:relative}:host([focused]){z-index:1}:host([disabled]){pointer-events:none;background:var(--highcontrast-color-area-fill-color-disabled, var(--luzmo-color-area-disabled-background-color, var(--luzmo-dimmed-color)));border:var(--luzmo-color-area-border-width, var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color-disabled)}:host([disabled]) .gradient{display:none}.handle{transform:translate(calc(var(--luzmo-color-area-width, 192px) - var(--luzmo-border-width)));inset-block-start:0}.handle:dir(rtl),:host([dir=rtl]) .handle{inset-inline-end:0}.gradient{inline-size:100%;block-size:100%;border-radius:var(--luzmo-color-area-border-radius, var(--luzmo-border-radius-s))}.slider{opacity:0;inline-size:100%;block-size:100%;z-index:0;pointer-events:none;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--luzmo-color-area-default-width))}::slotted(*){width:100%;height:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}";
+var ne = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, z = (r, o, e, t) => {
+  for (var l = t > 1 ? void 0 : t ? ce(o, e) : o, i = r.length - 1, a; i >= 0; i--)
+    (a = r[i]) && (l = (t ? a(o, e, l) : a(l)) || l);
+  return t && l && ne(o, e, l), l;
+};
+class g extends I {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.focused = !1, this.labelX = "saturation", this.labelY = "luminosity", this.isLTR = !0, this.languageResolver = new ho(this), this.colorController = new xo(this, {
+      extractColorFromState: () => ({
+        h: this.hue,
+        s: this.x,
+        v: this.y
+      }),
+      applyColorToState: ({ s: o, v: e }) => {
+        this._x = o, this._y = e, this.requestUpdate();
+      }
+    }), this.activeAxis = "x", this._x = 1, this._y = 1, this.step = 0.01, this.altered = 0, this.activeKeys = /* @__PURE__ */ new Set(), this._valueChanged = !1, this._pointerDown = !1;
+  }
+  static get styles() {
+    return [R(se)];
+  }
+  get hue() {
+    return this.colorController.hue;
+  }
+  set hue(o) {
+    this.colorController.hue = o;
+  }
+  get value() {
+    return this.colorController.color;
+  }
+  get color() {
+    return this.colorController.color;
+  }
+  set color(o) {
+    this.colorController.color = o;
+  }
+  get x() {
+    return this._x;
+  }
+  set x(o) {
+    if (o === this.x)
+      return;
+    const e = this.x;
+    this._x = o, this.inputX && (this.inputX.value = o.toString(), this._x = this.inputX.valueAsNumber), this.requestUpdate("x", e), this.colorController.applyColorFromState();
+  }
+  get y() {
+    return this._y;
+  }
+  set y(o) {
+    if (o === this.y)
+      return;
+    const e = this.y;
+    this._y = o, this.inputY && (this.inputY.value = o.toString(), this._y = this.inputY.valueAsNumber), this.requestUpdate("y", e), this.colorController.applyColorFromState();
+  }
+  focus(o = {}) {
+    super.focus(o), this.forwardFocus();
+  }
+  forwardFocus() {
+    this.activeAxis === "x" ? this.inputX.focus() : this.inputY.focus();
+  }
+  handleFocus() {
+    this.focused = !0, this._valueChanged = !1;
+  }
+  handleBlur() {
+    this._pointerDown || (this.altered = 0, this.focused = !1, this._valueChanged = !1);
+  }
+  handleKeydown(o) {
+    const { code: e } = o;
+    this.focused = !0, this.altered = [o.shiftKey, o.ctrlKey, o.altKey].filter(
+      (t) => !!t
+    ).length, (e.search("Arrow") === 0 || e.search("Page") === 0 || e.search("Home") === 0 || e.search("End") === 0) && (o.preventDefault(), this.activeKeys.add(e), this.handleKeypress());
+  }
+  handleKeypress() {
+    let o = 0, e = 0;
+    const t = Math.max(this.step, this.altered * 5 * this.step);
+    this.activeKeys.forEach((l) => {
+      switch (l) {
+        case "ArrowUp": {
+          e = t;
+          break;
+        }
+        case "ArrowDown": {
+          e = t * -1;
+          break;
+        }
+        case "ArrowLeft": {
+          o = this.step * (this.isLTR ? -1 : 1);
+          break;
+        }
+        case "ArrowRight": {
+          o = this.step * (this.isLTR ? 1 : -1);
+          break;
+        }
+        case "PageUp": {
+          e = t * 10;
+          break;
+        }
+        case "PageDown": {
+          e = t * -10;
+          break;
+        }
+        case "Home": {
+          o = t * (this.isLTR ? -10 : 10);
+          break;
+        }
+        case "End": {
+          o = t * (this.isLTR ? 10 : -10);
+          break;
+        }
+      }
+    }), o !== 0 ? (this.activeAxis = "x", this.inputX.focus()) : e !== 0 && (this.activeAxis = "y", this.inputY.focus()), this.x = Math.min(1, Math.max(this.x + o, 0)), this.y = Math.min(1, Math.max(this.y + e, 0)), this.colorController.savePreviousColor(), this.colorController.applyColorFromState(), (o !== 0 || e !== 0) && (this._valueChanged = !0, this.dispatchEvent(
+      new Event("input", {
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    ) || this.colorController.restorePreviousColor());
+  }
+  handleKeyup(o) {
+    o.preventDefault();
+    const { code: e } = o;
+    this.activeKeys.delete(e);
+  }
+  handleInput(o) {
+    const { valueAsNumber: e, name: t } = o.target;
+    this[t] = e, this.colorController.applyColorFromState();
+  }
+  handleChange(o) {
+    this.handleInput(o), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    );
+  }
+  handlePointerdown(o) {
+    if (o.button !== 0) {
+      o.preventDefault();
+      return;
+    }
+    this._pointerDown = !0, this.colorController.savePreviousColor(), this.boundingClientRect = this.getBoundingClientRect(), o.target.setPointerCapture(o.pointerId), o.pointerType === "mouse" && (this.focused = !0);
+  }
+  handlePointermove(o) {
+    const [e, t] = this.calculateHandlePosition(o);
+    this._valueChanged = !1, this.x = e, this.y = 1 - t, this.colorController.applyColorFromState(), this.dispatchEvent(
+      new Event("input", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    );
+  }
+  handlePointerup(o) {
+    o.preventDefault(), this._pointerDown = !1, o.target.releasePointerCapture(o.pointerId);
+    const e = this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    );
+    this.inputX.focus(), o.pointerType === "mouse" && (this.focused = !1), e || this.colorController.restorePreviousColor();
+  }
+  /**
+   * Returns the value under the cursor
+   * @param: PointerEvent on slider
+   * @return: Slider value that correlates to the position under the pointer
+   */
+  calculateHandlePosition(o) {
+    if (!this.boundingClientRect)
+      return [this.x, this.y];
+    const e = this.boundingClientRect, t = e.left, l = e.top, i = o.clientX, a = o.clientY, n = e.width, c = e.height, d = Math.max(0, Math.min(1, (i - t) / n)), b = Math.max(0, Math.min(1, (a - l) / c));
+    return [this.isLTR ? d : 1 - d, b];
+  }
+  handleAreaPointerdown(o) {
+    o.button === 0 && (o.stopPropagation(), o.preventDefault(), this.handle.dispatchEvent(new PointerEvent("pointerdown", o)), this.handlePointermove(o));
+  }
+  render() {
+    const { width: o = 0, height: e = 0 } = this.boundingClientRect || {}, t = Mo() || Ho(), l = "Color Picker", i = U(t ? void 0 : "2d slider"), a = this.labelX, n = this.labelY, c = new Intl.NumberFormat(this.languageResolver.language, {
+      style: "percent",
+      unitDisplay: "narrow"
+    }).format(this.x), d = new Intl.NumberFormat(this.languageResolver.language, {
+      style: "percent",
+      unitDisplay: "narrow"
+    }).format(this.y), b = `linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`;
+    return m`
+      <div
+        @pointerdown=${this.handleAreaPointerdown}
+        class="gradient"
+        style="background: ${b}"
+      >
+        <slot name="gradient"></slot>
+      </div>
+
+      <luzmo-color-handle
+        tabindex=${U(this.focused ? void 0 : "0")}
+        @focus=${this.forwardFocus}
+        ?focused=${this.focused}
+        class="handle"
+        color=${this.colorController.getHslString()}
+        ?disabled=${this.disabled}
+        style=${`transform: translate(${(this.isLTR ? this.x : 1 - this.x) * o}px, ${e - this.y * e}px);`}
+        ${mo({
+      start: ["pointerdown", this.handlePointerdown],
+      streamInside: ["pointermove", this.handlePointermove],
+      end: [
+        ["pointerup", "pointercancel", "pointerleave"],
+        this.handlePointerup
+      ]
+    })}
+      ></luzmo-color-handle>
+
+      <fieldset
+        class="fieldset"
+        aria-label=${U(t ? l : void 0)}
+      >
+        <div role="presentation">
+          <input
+            type="range"
+            class="slider"
+            name="x"
+            aria-label=${t ? a : `${a} ${l}`}
+            aria-roledescription=${i}
+            aria-orientation="horizontal"
+            aria-valuetext=${t ? c : `${c}, ${a}${this._valueChanged ? "" : `, ${d}, ${n}`}`}
+            min="0"
+            max="1"
+            step=${this.step}
+            tabindex="-1"
+            .value=${String(this.x)}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+        </div>
+        <div role="presentation">
+          <input
+            type="range"
+            class="slider"
+            name="y"
+            aria-label=${t ? n : `${n} ${l}`}
+            aria-roledescription=${i}
+            aria-orientation="vertical"
+            aria-valuetext=${t ? d : `${d}, ${n}${this._valueChanged ? "" : `, ${c}, ${a}`}`}
+            orient="vertical"
+            min="0"
+            max="1"
+            step=${this.step}
+            tabindex="-1"
+            .value=${String(this.y)}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+        </div>
+      </fieldset>
+    `;
+  }
+  firstUpdated(o) {
+    super.firstUpdated(o), this.boundingClientRect = this.getBoundingClientRect(), this.addEventListener("focus", this.handleFocus), this.addEventListener("blur", this.handleBlur), this.addEventListener("keyup", this.handleKeyup), this.addEventListener("keydown", this.handleKeydown);
+  }
+  updated(o) {
+    if (super.updated(o), this.x !== this.inputX.valueAsNumber && (this._x = this.inputX.valueAsNumber), this.y !== this.inputY.valueAsNumber && (this._y = this.inputY.valueAsNumber), o.has("focused") && this.focused) {
+      const e = this.inputX.parentElement, t = this.inputY.parentElement;
+      if (!e.shadowRoot && !t.shadowRoot) {
+        e.attachShadow({ mode: "open" }), t.attachShadow({ mode: "open" });
+        const l = '<div tabindex="-1"><slot></slot></div>';
+        e.shadowRoot.innerHTML = l, t.shadowRoot.innerHTML = l;
+      }
+    }
+  }
+  connectedCallback() {
+    var o;
+    super.connectedCallback(), !this.observer && window.ResizeObserver && (this.observer = new window.ResizeObserver((e) => {
+      for (const t of e)
+        this.boundingClientRect = t.contentRect;
+      this.requestUpdate();
+    })), (o = this.observer) == null || o.observe(this);
+  }
+  disconnectedCallback() {
+    var o;
+    (o = this.observer) == null || o.unobserve(this), super.disconnectedCallback();
+  }
+}
+z([
+  s({ type: String, reflect: !0 })
+], g.prototype, "dir", 2);
+z([
+  s({ type: Boolean, reflect: !0 })
+], g.prototype, "disabled", 2);
+z([
+  s({ type: Boolean, reflect: !0 })
+], g.prototype, "focused", 2);
+z([
+  s({ type: String, attribute: "label-x" })
+], g.prototype, "labelX", 2);
+z([
+  s({ type: String, attribute: "label-y" })
+], g.prototype, "labelY", 2);
+z([
+  s({ type: Boolean, attribute: "is-ltr" })
+], g.prototype, "isLTR", 2);
+z([
+  C(".handle")
+], g.prototype, "handle", 2);
+z([
+  s({ type: Number })
+], g.prototype, "hue", 1);
+z([
+  s({ type: String })
+], g.prototype, "value", 1);
+z([
+  s({ type: String })
+], g.prototype, "color", 1);
+z([
+  s({ attribute: !1 })
+], g.prototype, "activeAxis", 2);
+z([
+  s({ type: Number })
+], g.prototype, "x", 1);
+z([
+  s({ type: Number })
+], g.prototype, "y", 1);
+z([
+  s({ type: Number })
+], g.prototype, "step", 2);
+z([
+  C('[name="x"]')
+], g.prototype, "inputX", 2);
+z([
+  C('[name="y"]')
+], g.prototype, "inputY", 2);
+customElements.get("luzmo-color-area") || customElements.define("luzmo-color-area", g);
+/*! * 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.
+ * */
+const ue = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const r = document.createElement("style");
+    r.setAttribute("data-luzmo-vars", ""), r.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
+  }
+};
+ue();
+var he = Object.defineProperty, de = (r, o, e, t) => {
+  for (var l = void 0, i = r.length - 1, a; i >= 0; i--)
+    (a = r[i]) && (l = a(o, e, l) || l);
+  return l && he(o, e, l), l;
+};
+let yo = class extends Po {
+  constructor() {
+    super(...arguments), this.viewColor = !1, this._value = "", this.cachedColor = null, this.cachedTinyColor = null;
+  }
+  static get styles() {
+    return [...super.styles];
+  }
+  set value(o) {
+    if (o === this.value)
+      return;
+    const e = this._value;
+    this._value = o, this.requestUpdate("value", e);
+  }
+  get value() {
+    return this._value;
+  }
+  getColorValue() {
+    if (!this.value)
+      return "";
+    if (!this.cachedColor || this.cachedColor !== this.value) {
+      const o = new h(this.value);
+      this.cachedColor = o.isValid ? o.toRgbString() : "";
+    }
+    return this.cachedColor;
+  }
+  renderColorHandle() {
+    return this.viewColor ? m`
+          <luzmo-color-handle
+            size="m"
+            color=${this.getColorValue()}
+          ></luzmo-color-handle>
+        ` : m``;
+  }
+  render() {
+    return this.viewColor && Promise.resolve().then(() => Vo), m` ${super.render()} ${this.renderColorHandle()} `;
+  }
+  checkValidity() {
+    let o = super.checkValidity();
+    return this.value && ((!this.cachedTinyColor || this.cachedTinyColor.originalInput !== this.value) && (this.cachedTinyColor = new h(this.value)), this.valid = o = this.cachedTinyColor.isValid, this.invalid = !o), o;
+  }
+};
+de([
+  s({ type: Boolean, attribute: "view-color" })
+], yo.prototype, "viewColor");
+customElements.get("luzmo-color-field") || customElements.define("luzmo-color-field", yo);
+/*! * 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.
+ * */
+const me = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const r = document.createElement("style");
+    r.setAttribute("data-luzmo-vars", ""), r.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
+  }
+};
+me();
+const pe = '.opacity-checkerboard{position:absolute;block-size:100%;inline-size:100%;background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-color-loupe-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-color-loupe-checkerboard-position, left top)/calc(var(--luzmo-color-loupe-checkerboard-size, 8px) * 2) calc(var(--luzmo-color-loupe-checkerboard-size, 8px) * 2)}:host{--luzmo-color-slider-gradient-fallback: rgb(255 0 0) 0%, rgb(255 255 0) 17%, rgb(0 255 0) 33%, rgb(0 255 255) 50%, rgb(0 0 255) 67%, rgb(255 0 255) 83%, rgb(255 0 0) 100%;touch-action:none}:host([vertical]) .handle{inset-block-start:unset;inset-block-end:0}:host([vertical]) .slider{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){width:100%;height:100%}@media (forced-colors: active){:host{--highcontrast-color-slider-border-color: CanvasText;--highcontrast-color-slider-border-color-disabled: GrayText;--highcontrast-color-slider-background-color-disabled: Canvas;forced-color-adjust:none}}:host{--luzmo-color-handle-hitarea-border-radius: var( --luzmo-color-slider-handle-hitarea-border-radius, 0px );min-inline-size:var(--luzmo-color-slider-minimum-length, 80px);inline-size:var(--luzmo-color-slider-length, 192px);block-size:var(--luzmo-color-slider-control-track-width, 24px);-webkit-user-select:none;user-select:none;cursor:default;display:block;position:relative}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([disabled]) .gradient{display:none}:host([vertical]){min-block-size:var(--luzmo-color-slider-vertical-minimum-height, var(--luzmo-color-slider-minimum-length, 80px));block-size:var(--luzmo-color-slider-vertical-height, var(--luzmo-color-slider-length, 192px));min-inline-size:0;inline-size:var(--luzmo-color-slider-vertical-control-track-width, var(--luzmo-color-slider-control-track-height, 24px));display:inline-block}:host([vertical]) .handle{inset-inline-start:50%}.handle{inset-block-start:50%;inset-inline-start:0}.checkerboard{--luzmo-color-slider-border-color-local: var( --highcontrast-color-slider-border-color, var(--luzmo-color-slider-border-color, var(--luzmo-border-color)) )}.checkerboard:before{content:"";z-index:1;box-shadow:inset 0 0 0 var(--luzmo-color-slider-border-width, var(--luzmo-border-width)) var(--luzmo-color-slider-border-color-local);border-radius:var(--luzmo-color-slider-border-rounding, var(--luzmo-border-radius-s));position:absolute;top:0;right:0;bottom:0;left:0}:host([disabled]) .checkerboard{--luzmo-color-slider-border-color-local: var( --highcontrast-color-slider-border-color-disabled, var(--luzmo-color-slider-border-color-disabled, var(--luzmo-dimmed-color)) );background:var(--highcontrast-color-slider-background-color-disabled, var(--luzmo-color-slider-background-color-disabled, var(--luzmo-dimmed-color)))}.checkerboard,.gradient{inline-size:100%;block-size:100%;border-radius:var(--luzmo-color-slider-border-rounding, var(--luzmo-border-radius-s))}.gradient:dir(rtl),:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider{opacity:0;inline-size:100%;block-size:100%;z-index:0;pointer-events:none;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}';
+var ge = Object.defineProperty, be = Object.getOwnPropertyDescriptor, y = (r, o, e, t) => {
+  for (var l = t > 1 ? void 0 : t ? be(o, e) : o, i = r.length - 1, a; i >= 0; i--)
+    (a = r[i]) && (l = (t ? a(o, e, l) : a(l)) || l);
+  return t && l && ge(o, e, l), l;
+};
+let f = class extends po {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.focused = !1, this.label = "hue", this.vertical = !1, this.languageResolver = new ho(this), this.colorController = new xo(this, {
+      /* c8 ignore next 3 */
+      applyColorToState: () => {
+        if (this.mode === "opacity") {
+          const o = new h(this.colorController.color);
+          this.sliderHandlePosition = 100 * o.getAlpha();
+        } else
+          this.sliderHandlePosition = 100 * (this.colorController.hue / 360);
+      },
+      extractColorFromState: (o) => this.mode === "opacity" ? {
+        ...o.getColor("hsl"),
+        a: this.value
+      } : {
+        ...o.getColor("hsl"),
+        h: this.value
+      },
+      maintains: "saturation"
+    }), this.sliderHandlePosition = 0, this.step = 1, this.isLTR = !0, this._altered = 0, this._pointerDown = !1;
+  }
+  static get styles() {
+    return [R(pe)];
+  }
+  get value() {
+    return this.mode === "opacity" ? this.colorController.opacity : this.colorController.hue;
+  }
+  set value(o) {
+    this.mode === "opacity" ? this.colorController.opacity = o : this.colorController.hue = o;
+  }
+  get color() {
+    return this.colorController.color;
+  }
+  set color(o) {
+    this.colorController.color = o;
+  }
+  get altered() {
+    return this._altered;
+  }
+  set altered(o) {
+    this._altered = o, this.step = Math.max(1, this.altered * 10);
+  }
+  get focusElement() {
+    return this.input;
+  }
+  handleKeydown(o) {
+    const { key: e } = o;
+    this.focused = !0, this.altered = [o.shiftKey, o.ctrlKey, o.altKey].filter(
+      (i) => !!i
+    ).length;
+    let t = 0;
+    switch (e) {
+      case "ArrowUp": {
+        t = this.step;
+        break;
+      }
+      case "ArrowDown": {
+        t = -this.step;
+        break;
+      }
+      case "ArrowLeft": {
+        t = this.step * (this.isLTR ? -1 : 1);
+        break;
+      }
+      case "ArrowRight": {
+        t = this.step * (this.isLTR ? 1 : -1);
+        break;
+      }
+      default:
+        return;
+    }
+    o.preventDefault();
+    const l = 100 / (this.mode === "opacity" ? 100 : 360);
+    this.sliderHandlePosition = Math.min(
+      100,
+      Math.max(0, this.sliderHandlePosition + t * l)
+    ), this.value = this.mode === "opacity" ? Math.min(1, Math.max(0, this.value + t / 100)) : Math.min(360, Math.max(0, this.value + t)), this.colorController.applyColorFromState(), t !== 0 && (this.dispatchEvent(
+      new Event("input", {
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  handleInput(o) {
+    const { valueAsNumber: e } = o.target;
+    this.value = e, this.sliderHandlePosition = 100 * (this.mode === "opacity" ? this.value : this.value / 360), this.colorController.applyColorFromState();
+  }
+  handleChange(o) {
+    this.handleInput(o), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  focus(o = {}) {
+    super.focus(o), this.forwardFocus();
+  }
+  forwardFocus() {
+    this.input.focus();
+  }
+  handleFocus() {
+    this.focused = !0;
+  }
+  handleBlur() {
+    this._pointerDown || (this.altered = 0, this.focused = !1);
+  }
+  handlePointerdown(o) {
+    if (o.button !== 0) {
+      o.preventDefault();
+      return;
+    }
+    this._pointerDown = !0, this.colorController.savePreviousColor(), this.boundingClientRect = this.getBoundingClientRect(), o.target.setPointerCapture(o.pointerId), o.pointerType === "mouse" && (this.focused = !0);
+  }
+  handlePointermove(o) {
+    this.sliderHandlePosition = this.calculateHandlePosition(o), this.value = (this.mode === "opacity" ? 1 : 360) * (this.sliderHandlePosition / 100), this.colorController.applyColorFromState(), this.dispatchEvent(
+      new Event("input", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    );
+  }
+  handlePointerup(o) {
+    this._pointerDown = !1, o.target.releasePointerCapture(o.pointerId), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    ) || this.colorController.restorePreviousColor(), this.focus(), o.pointerType === "mouse" && (this.focused = !1);
+  }
+  /**
+   * Returns the value under the cursor
+   * @param: PointerEvent on slider
+   * @return: Slider value that correlates to the position under the pointer
+   */
+  calculateHandlePosition(o) {
+    if (!this.boundingClientRect)
+      return this.sliderHandlePosition;
+    const e = this.boundingClientRect, t = this.vertical ? e.top : e.left, l = this.vertical ? o.clientY : o.clientX, i = this.vertical ? e.height : e.width, a = Math.max(0, Math.min(1, (l - t) / i));
+    return this.vertical || !this.isLTR ? 100 - 100 * a : 100 * a;
+  }
+  handleGradientPointerdown(o) {
+    o.button === 0 && (o.stopPropagation(), o.preventDefault(), this.handle.dispatchEvent(new PointerEvent("pointerdown", o)), this.handlePointermove(o));
+  }
+  get handlePositionStyles() {
+    return `${this.vertical ? "inset-block-end" : "inset-inline-start"}: ${this.sliderHandlePosition}%`;
+  }
+  get getColorSliderStyle() {
+    const o = this.vertical ? "top" : "right";
+    if (this.mode === "opacity") {
+      const e = new h(this.colorController.color).setAlpha(1).toRgbString();
+      return {
+        background: `linear-gradient(to ${o}, transparent, ${e})`
+      };
+    }
+    return {
+      background: `linear-gradient(to ${o}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))`
+    };
+  }
+  render() {
+    return m`
+      <div
+        class="opacity-checkerboard checkerboard"
+        role="presentation"
+        @pointerdown=${this.handleGradientPointerdown}
+      >
+        <div
+          class="gradient"
+          role="presentation"
+          style=${Ro(this.getColorSliderStyle)}
+        >
+          <slot name="gradient"></slot>
+        </div>
+      </div>
+      <luzmo-color-handle
+        tabindex=${U(this.focused ? void 0 : "0")}
+        @focus=${this.forwardFocus}
+        ?focused=${this.focused}
+        class="handle"
+        color=${this.mode === "opacity" ? this.color : "hsl(" + this.value + ", 100%, 50%)"}
+        ?disabled=${this.disabled}
+        style=${this.handlePositionStyles}
+        ${mo({
+      start: ["pointerdown", this.handlePointerdown],
+      streamInside: ["pointermove", this.handlePointermove],
+      end: [
+        ["pointerup", "pointercancel", "pointerleave"],
+        this.handlePointerup
+      ]
+    })}
+      ></luzmo-color-handle>
+      <input
+        type="range"
+        class="slider"
+        min="0"
+        max=${this.mode === "opacity" ? "100" : "360"}
+        aria-orientation=${U(this.vertical ? "vertical" : void 0)}
+        orient=${U(this.vertical ? "vertical" : void 0)}
+        step=${this.step}
+        aria-label=${this.label}
+        .value=${String(
+      this.mode === "opacity" ? this.value * 100 : this.value
+    )}
+        aria-valuetext=${`${new Intl.NumberFormat(
+      this.languageResolver.language,
+      {
+        maximumFractionDigits: 0,
+        minimumIntegerDigits: 1,
+        style: "unit",
+        unit: this.mode === "opacity" ? "percent" : "degree",
+        unitDisplay: "narrow"
+      }
+    ).format(this.mode === "opacity" ? this.value * 100 : this.value)}`}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+        @keydown=${this.handleKeydown}
+      />
+    `;
+  }
+  firstUpdated(o) {
+    super.firstUpdated(o), this.boundingClientRect = this.getBoundingClientRect(), this.addEventListener("focus", this.handleFocus), this.addEventListener("blur", this.handleBlur);
+  }
+  updated(o) {
+    o.has("mode") && (this.handle.style.insetInlineStart = "", this.handle.style.insetBlockEnd = "", this.mode === "opacity" && (this.colorController.color = new h(
+      this.colorController.color
+    ).toRgbString(), this.handle.style.insetInlineStart = 100 * this.colorController.opacity + "%"));
+  }
+};
+y([
+  s({ type: String, reflect: !0 })
+], f.prototype, "dir", 2);
+y([
+  s({ type: String, reflect: !0 })
+], f.prototype, "mode", 2);
+y([
+  s({ type: Boolean, reflect: !0 })
+], f.prototype, "disabled", 2);
+y([
+  s({ type: Boolean, reflect: !0 })
+], f.prototype, "focused", 2);
+y([
+  C(".handle")
+], f.prototype, "handle", 2);
+y([
+  s({ type: String })
+], f.prototype, "label", 2);
+y([
+  s({ type: Boolean, reflect: !0 })
+], f.prototype, "vertical", 2);
+y([
+  s({ type: Number })
+], f.prototype, "value", 1);
+y([
+  s({ type: Number, reflect: !0 })
+], f.prototype, "sliderHandlePosition", 2);
+y([
+  s({ type: String })
+], f.prototype, "color", 1);
+y([
+  s({ type: Number })
+], f.prototype, "step", 2);
+y([
+  s({ type: Boolean, attribute: "is-ltr" })
+], f.prototype, "isLTR", 2);
+y([
+  C("input")
+], f.prototype, "input", 2);
+customElements.get("luzmo-color-slider") || customElements.define("luzmo-color-slider", f);
+/*! * 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.
+ * */
+const ze = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const r = document.createElement("style");
+    r.setAttribute("data-luzmo-vars", ""), r.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
+  }
+};
+ze();
+const fe = '@media (forced-colors: active){:host{--highcontrast-swatch-disabled-icon-color: GrayText;--highcontrast-swatch-focus-indicator-color: ButtonText;--highcontrast-swatch-background-color-selected: Background;--highcontrast-swatch-border-color-selected: Highlight;--highcontrast-swatch-border-color: ButtonText;--highcontrast-swatch-fill-foreground-color: ButtonText}.fill{forced-color-adjust:none}:host([disabled]){--highcontrast-swatch-border-color: GrayText}}:host{box-sizing:border-box;inline-size:var(--luzmo-swatch-size, var(--swatch-size));block-size:var(--luzmo-swatch-size, var(--swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabled-icon{inline-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size));block-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected, var(--luzmo-swatch-inner-border-color-selected, var(--swatch-inner-border-color-selected)))}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:none;background:var(--picked-color, transparent)}:host([mixed-value]) .mixed-value-icon{color:var(--swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--picked-color, transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--luzmo-swatch-slash-thickness, var(--swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color, var(--luzmo-swatch-slash-icon-color, var(--swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabled-icon{display:block}:host:before{content:"";border-width:var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected, var(--luzmo-swatch-border-color-selected, var(--swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}:host:after{content:"";inset:calc(var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)) * -2);opacity:0;border-width:var(--luzmo-swatch-focus-indicator-width, var(--swatch-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color, var(--luzmo-swatch-focus-indicator-color, var(--swatch-focus-indicator-color)));border-radius:var(--luzmo-swatch-focus-indicator-border-radius, var(--swatch-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-sizing:border-box;box-shadow:inset 0 0 0 var(--luzmo-swatch-border-thickness, var(--swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--luzmo-swatch-border-color, var(--swatch-border-color)));border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));position:absolute;top:0;right:0;bottom:0;left:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--picked-color, transparent)}:host([border=none]) .fill:before{box-shadow:none}.mixed-value-icon{pointer-events:none;color:#0000;color:var(--picked-color, transparent);display:none}.disabled-icon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));display:none;position:relative}.disabled-icon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)))}.disabled-icon path:last-child{fill:var(--luzmo-swatch-icon-border-color, var(--swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([selected]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)));height:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}:host([selected][shape=rectangle]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2 - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--luzmo-animation-duration) ease-in-out,height var(--luzmo-animation-duration) ease-in-out}:host([size=xl]){--swatch-size: var(--luzmo-component-height-xl);--swatch-disabled-icon-size: 24px;--swatch-slash-thickness: 6px}:host([size=l]){--swatch-size: var(--luzmo-component-height-l);--swatch-disabled-icon-size: 20px;--swatch-slash-thickness: 5px}:host([size=s]){--swatch-size: var(--luzmo-component-height-s);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 3px}:host([size=xs]){--swatch-size: var(--luzmo-component-height-xs);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 2px}:host([size=xxs]){--swatch-size: var(--luzmo-component-height-xxs);--swatch-disabled-icon-size: 14px;--swatch-slash-thickness: 2px}:host{--swatch-size: var(--luzmo-component-height);--swatch-disabled-icon-size: 18px;--swatch-slash-thickness: 4px}:host{--swatch-border-radius: var(--luzmo-border-radius-s);--swatch-focus-indicator-border-radius: var(--luzmo-border-radius-s);--swatch-border-thickness: var(--luzmo-border-width);--swatch-border-thickness-selected: var(--luzmo-border-width);--swatch-focus-indicator-width: var(--luzmo-indicator-width);--swatch-focus-indicator-gap: var(--luzmo-indicator-gap);--swatch-border-color: var(--luzmo-border-color-down);--swatch-icon-border-color: var(--luzmo-border-color);--swatch-border-color-selected: var(--luzmo-border-color-full-down);--swatch-inner-border-color-selected: var(--luzmo-background-color);--swatch-disabled-icon-color: rgb(255, 255, 255);--swatch-dash-icon-color: var(--luzmo-font-color);--swatch-slash-icon-color: var(--luzmo-negative-color);--swatch-focus-indicator-color: var(--luzmo-primary)}.fill:before{background:var(--picked-color, transparent)}:host([border=none]) .fill:before{background:var(--picked-color, transparent)}:host .is-image .fill:before{background:#0000}:host .opacity-checkerboard{background:repeating-conic-gradient(var(--luzmo-swatch-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-swatch-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-swatch-checkerboard-position, left top)/calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2) calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2)}';
+var ve = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, E = (r, o, e, t) => {
+  for (var l = t > 1 ? void 0 : t ? xe(o, e) : o, i = r.length - 1, a; i >= 0; i--)
+    (a = r[i]) && (l = (t ? a(o, e, l) : a(l)) || l);
+  return t && l && ve(o, e, l), l;
+};
+let $ = class extends X(po, {
+  validSizes: ["xxs", "xs", "s", "m", "l", "xl"],
+  noDefaultSize: !0
+}) {
+  constructor() {
+    super(...arguments), this.color = "", this.label = "", this.mixedValue = !1, this.nothing = !1, this.role = "button", this.selected = !1, this.readonly = !1, this.renderDisabled = () => m`
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="disabled-icon"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z"
+        stroke="none"
+        fill="var(--swatch-disabled-icon-color)"
+      />
+      <path
+        d="M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z"
+        stroke="none"
+        fill="var(--swatch-disabled-icon-stroke-color)"
+      />
+    </svg>
+  `, this.renderMixedValue = () => J(Eo);
+  }
+  static get styles() {
+    return [R(fe)];
+  }
+  get value() {
+    return this._value || this.color || this.label;
+  }
+  set value(o) {
+    if (o === this._value)
+      return;
+    const e = this.value;
+    this._value = o, this.requestUpdate("value", e);
+  }
+  get focusElement() {
+    return this;
+  }
+  toggle(o) {
+    this.readonly || (this.selected = o ?? !this.selected);
+  }
+  handleClick() {
+    this.disabled || this.mixedValue || (this.toggle(), this.dispatchEvent(
+      new Event("change", {
+        cancelable: !0,
+        bubbles: !0
+      })
+    ) || this.toggle());
+  }
+  handleKeydown(o) {
+    const { code: e } = o;
+    switch (e) {
+      case "Space": {
+        o.preventDefault(), this.addEventListener("keyup", this.handleKeyup);
+        break;
+      }
+    }
+  }
+  handleKeypress(o) {
+    const { code: e } = o;
+    switch (e) {
+      case "Enter":
+      case "NumpadEnter": {
+        this.click();
+        break;
+      }
+    }
+  }
+  handleKeyup(o) {
+    const { code: e } = o;
+    switch (e) {
+      case "Space": {
+        this.removeEventListener("keyup", this.handleKeyup), this.click();
+        break;
+      }
+    }
+  }
+  render() {
+    return m`
+      <div
+        class="opacity-checkerboard fill"
+        style=${U(
+      this.color ? `--picked-color: ${this.color}` : void 0
+    )}
+      >
+        <slot name="image"></slot>
+        ${eo(this.disabled, this.renderDisabled)}
+        ${eo(this.mixedValue, this.renderMixedValue)}
+      </div>
+    `;
+  }
+  willUpdate(o) {
+    var e;
+    if (this.getAttribute("role") || this.setAttribute("role", "button"), (o.has("selected") || o.has("role")) && !this.readonly) {
+      const t = this.role === "button" ? "aria-pressed" : "aria-checked", l = this.role === "button" ? "aria-checked" : "aria-pressed";
+      o.has("role") && this.removeAttribute(l), this.setAttribute(t, this.selected ? "true" : "false");
+    }
+    (o.has("label") || o.has("color") || o.has("mixedValue")) && (this.label !== this.color && (e = this.label) != null && e.length ? this.setAttribute("aria-label", this.label) : this.color ? this.setAttribute("aria-label", this.color) : this.mixedValue ? this.setAttribute("aria-label", "Mixed") : this.removeAttribute("aria-label"));
+  }
+  firstUpdated(o) {
+    super.firstUpdated(o), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown), this.addEventListener("keypress", this.handleKeypress), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0");
+  }
+};
+E([
+  s({ reflect: !0 })
+], $.prototype, "border", 2);
+E([
+  s()
+], $.prototype, "color", 2);
+E([
+  s()
+], $.prototype, "label", 2);
+E([
+  s({ type: Boolean, reflect: !0, attribute: "mixed-value" })
+], $.prototype, "mixedValue", 2);
+E([
+  s({ type: Boolean, reflect: !0 })
+], $.prototype, "nothing", 2);
+E([
+  s({ reflect: !0 })
+], $.prototype, "role", 2);
+E([
+  s({ reflect: !0 })
+], $.prototype, "rounding", 2);
+E([
+  s({ type: Boolean, reflect: !0 })
+], $.prototype, "selected", 2);
+E([
+  s({ type: Boolean, reflect: !0 })
+], $.prototype, "readonly", 2);
+E([
+  s({ reflect: !0 })
+], $.prototype, "shape", 2);
+E([
+  s()
+], $.prototype, "value", 1);
+const ye = ":host{justify-content:flex-start;align-items:flex-start;gap:var(--luzmo-swatch-group-spacing-regular, var(--swatch-group-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--luzmo-swatch-group-spacing-compact, var(--swatch-group-spacing-compact))}:host([density=spacious]){gap:var(--luzmo-swatch-group-spacing-spacious, var(--swatch-group-spacing-spacious))}:host{--swatch-group-spacing-compact: 2px;--swatch-group-spacing-regular: 4px;--swatch-group-spacing-spacious: 8px}";
+var we = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, D = (r, o, e, t) => {
+  for (var l = t > 1 ? void 0 : t ? ke(o, e) : o, i = r.length - 1, a; i >= 0; i--)
+    (a = r[i]) && (l = (t ? a(o, e, l) : a(l)) || l);
+  return t && l && we(o, e, l), l;
+};
+class T extends X(I, {
+  validSizes: ["xs", "s", "m", "l"],
+  noDefaultSize: !0
+}) {
+  constructor() {
+    super(), this._selected = [], this.selectedSet = /* @__PURE__ */ new Set(), this.rovingTabindexController = new No(this, {
+      focusInIndex: (o) => {
+        let e = -1;
+        const t = o.findIndex((l, i) => (!o[e] && !l.disabled && (e = i), l.selected && !l.disabled));
+        return o[t] ? t : e;
+      },
+      elements: () => this.swatches,
+      isFocusableElement: (o) => !o.disabled
+    }), this.manageChange = async () => {
+      const o = /* @__PURE__ */ new Set();
+      this.selectedSet = new Set(this.selected), await Promise.all(this.swatches.map((e) => e.updateComplete)), this.swatches.forEach((e) => {
+        o.add(e.value), e.selected && this.selectedSet.add(e.value);
+      }), this.selectedSet.forEach((e) => {
+        o.has(e) || this.selectedSet.delete(e);
+      }), this._selected = [...this.selectedSet], this.rovingTabindexController.clearElementCache();
+    }, new Bo(this, {
+      config: {
+        attributes: !0,
+        childList: !0,
+        subtree: !0
+      },
+      callback: () => {
+        this.manageChange();
+      }
+    });
+  }
+  static get styles() {
+    return [R(ye)];
+  }
+  get selected() {
+    return this._selected;
+  }
+  set selected(o) {
+    if (o === this.selected)
+      return;
+    const e = this.selected;
+    this._selected = o, this.requestUpdate("selected", e);
+  }
+  focus(o) {
+    this.rovingTabindexController.focus(o);
+  }
+  handleChange(o) {
+    o.stopPropagation();
+    const e = this.selected;
+    if (!this.selects) {
+      o.preventDefault();
+      return;
+    }
+    if (this.selects === "single") {
+      const { target: t } = o;
+      if (t.tabIndex = 0, t.selected = !0, this.selectedSet.has(t.value))
+        return;
+      this.selectedSet.clear(), this.selectedSet.add(t.value), this.rovingTabindexController.elements.forEach((l) => {
+        l !== t && (l.selected = !1);
+      });
+    } else if (this.selects === "multiple") {
+      const { target: t } = o;
+      t.selected ? this.selectedSet.add(t.value) : this.selectedSet.delete(t.value);
+    }
+    this._selected = [...this.selectedSet], this.dispatchEvent(
+      new Event("change", {
+        cancelable: !0,
+        bubbles: !0
+      })
+    ) || (this._selected = e, o.preventDefault());
+  }
+  getPassthroughSwatchActions(o) {
+    const e = {};
+    o.has("selects") && (this.selects || o.get("selects") !== void 0) && (e.selects = this.selects), o.has("border") && (this.border || o.get("border") !== void 0) && (e.border = this.border), o.has("rounding") && (this.rounding || o.get("rounding") !== void 0) && (e.rounding = this.rounding), o.has("size") && (this.size !== "m" || o.get("size") !== void 0) && (e.size = this.size), o.has("shape") && (this.shape || o.get("shape") !== void 0) && (e.shape = this.shape);
+    const t = [];
+    return Object.keys(e).length > 0 && t.push((l) => {
+      "border" in e && (l.border = e.border), "rounding" in e && (l.rounding = e.rounding), "shape" in e && (l.shape = e.shape), "size" in e && (l.size = e.size);
+    }), t;
+  }
+  getSelectionSwatchActions(o) {
+    const e = [];
+    if (!o.has("selects"))
+      return e;
+    this.selects ? this.setAttribute(
+      "role",
+      this.selects === "single" ? "radiogroup" : "group"
+    ) : this.removeAttribute("role");
+    const t = {
+      single: "radio",
+      multiple: "checkbox"
+    }, l = this.selects ? t[this.selects] : "button";
+    return e.push((i) => {
+      i.setAttribute("role", l);
+    }), e;
+  }
+  render() {
+    return m`
+      <slot
+        @change=${this.handleChange}
+        @slotchange=${this.manageChange}
+      ></slot>
+    `;
+  }
+  willUpdate(o) {
+    const e = [
+      ...this.getPassthroughSwatchActions(o),
+      ...this.getSelectionSwatchActions(o)
+    ];
+    let t = new Set(this.selected);
+    const l = /* @__PURE__ */ new Set();
+    o.has("selected") && e.push((a) => {
+      l.add(a.value), a.selected = !!(t.has(a.value) || !this.hasUpdated && a.selected);
+    });
+    const i = () => {
+      t = new Set(this.selected), this.swatches.forEach((a) => {
+        e.forEach((n) => {
+          n(a);
+        });
+      }), o.has("selected") && (this._selected = [...t.values()].filter(
+        (a) => l.has(a)
+      ));
+    };
+    this.hasUpdated ? i() : this.renderRoot.addEventListener(
+      "slotchange",
+      () => {
+        requestAnimationFrame(i);
+      },
+      { once: !0 }
+    );
+  }
+}
+D([
+  s({ reflect: !0 })
+], T.prototype, "border", 2);
+D([
+  s({ reflect: !0 })
+], T.prototype, "density", 2);
+D([
+  s({ reflect: !0 })
+], T.prototype, "rounding", 2);
+D([
+  s({ type: Array })
+], T.prototype, "selected", 1);
+D([
+  s()
+], T.prototype, "selects", 2);
+D([
+  s({ reflect: !0 })
+], T.prototype, "shape", 2);
+D([
+  Fo({ flatten: !0 })
+], T.prototype, "swatches", 2);
+customElements.get("luzmo-swatch") || customElements.define("luzmo-swatch", $);
+customElements.get("luzmo-swatch-group") || customElements.define("luzmo-swatch-group", T);
+/*! * 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.
+ * */
+const Ce = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const r = document.createElement("style");
+    r.setAttribute("data-luzmo-vars", ""), r.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
+  }
+};
+Ce();
+const $e = '@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 Se = Object.defineProperty, M = (r, o, e, t) => {
+  for (var l = void 0, i = r.length - 1, a; i >= 0; i--)
+    (a = r[i]) && (l = a(o, e, l) || l);
+  return l && Se(o, e, l), l;
+};
+const wo = class extends X(I) {
+  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 h((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 e = new h(this._rgbColor);
+    this._rgbaColor = e.setAlpha(this._alpha).toRgbString(), this.colorFieldElement.value = this._rgbaColor, 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 }));
+  }
+  handleHueSliderChange(o) {
+    o.stopPropagation(), o.preventDefault();
+    const e = new h(this._rgbColor).toHsl();
+    e.h = this.hueSliderElement.value;
+    const t = new h(e);
+    this._rgbColor = t.toRgbString(), this._rgbaColor = t.setAlpha(this._alpha).toRgbString(), this.areaElement.color = this._rgbColor, 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 }));
+  }
+  handleOpacitySliderChange(o) {
+    o.stopPropagation(), o.preventDefault(), this._alpha = this.opacitySliderElement.sliderHandlePosition / 100;
+    const e = new h(this._rgbColor).setAlpha(this._alpha);
+    this._rgbaColor = e.toRgbString(), 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 }));
+  }
+  handleFieldChange(o) {
+    if (o.stopPropagation(), o.preventDefault(), this.colorFieldElement.checkValidity()) {
+      const e = new h(this.colorFieldElement.value);
+      this._format = e.format, this._rgbaColor = e.toRgbString(), this._alpha = e.getAlpha(), this._rgbColor = e.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 e = new h(this.color), t = this.formatTextField(e);
+    this.colorFieldElement.value = t;
+  }
+  updated(o) {
+    if (o.has("color") && this.color !== this._previousColor) {
+      this._previousColor = this.color;
+      const e = new h(this.color);
+      this._alpha = e.getAlpha(), this._rgbColor = e.setAlpha(1).toRgbString(), this._rgbaColor = e.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 m`
+      <luzmo-color-slider
+        id="luzmo-opacity-slider"
+        mode="opacity"
+        @input=${this.handleOpacitySliderChange}
+      >
+      </luzmo-color-slider>
+    `;
+  }
+  render() {
+    var o;
+    return m`
+      <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">${J(_o)}</div>
+                <div class="angle-icon">${J(Ao)}</div>
+              </div>
+            </button>
+          </div>
+          ${((o = this.swatches) == null ? void 0 : o.length) > 0 ? m`
+                <luzmo-divider></luzmo-divider>
+                <div class="swatches-container">
+                  ${this.swatches.map(
+      (e) => m`
+                      <div class="swatch-choice">
+                        <luzmo-swatch
+                          @click=${this.setColor}
+                          .color=${e}
+                          .size=${this.size}
+                          readonly
+                        >
+                        </luzmo-swatch>
+                      </div>
+                    `
+    )}
+                </div>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+wo.styles = R($e);
+let A = wo;
+M([
+  s({ type: String, reflect: !0 })
+], A.prototype, "color");
+M([
+  s({ type: Boolean, reflect: !0, attribute: "no-alpha-channel" })
+], A.prototype, "noAlphaChannel");
+M([
+  s({ type: Array, reflect: !0 })
+], A.prototype, "swatches");
+M([
+  C("luzmo-color-area")
+], A.prototype, "areaElement");
+M([
+  C("#luzmo-hue-slider")
+], A.prototype, "hueSliderElement");
+M([
+  C("#luzmo-opacity-slider")
+], A.prototype, "opacitySliderElement");
+M([
+  C("luzmo-color-field")
+], A.prototype, "colorFieldElement");
+M([
+  C("luzmo-swatch")
+], A.prototype, "swatchElement");
+M([
+  uo()
+], A.prototype, "_format");
+customElements.get("luzmo-color-menu") || customElements.define("luzmo-color-menu", A);
+/*! * 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.
+ * */
+const Ee = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const r = document.createElement("style");
+    r.setAttribute("data-luzmo-vars", ""), r.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
+  }
+};
+Ee();
+const _e = "luzmo-popover{margin-left:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap));margin-right:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap))}luzmo-swatch{cursor:pointer}:host{--luzmo-popover-content-area-spacing-vertical: 0;--color-picker-popover-horizontal-gap: var(--luzmo-spacing-4)}:host([size=s]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-3)}:host([size=l]),:host([size=xl]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-5)}";
+var Ae = Object.defineProperty, _ = (r, o, e, t) => {
+  for (var l = void 0, i = r.length - 1, a; i >= 0; i--)
+    (a = r[i]) && (l = a(o, e, l) || l);
+  return l && Ae(o, e, l), l;
+};
+const ko = class extends X(I) {
+  constructor() {
+    super(...arguments), this.color = "rgb(255, 0, 0)", this.open = !1, this.disabled = !1, this.placement = "left-start", this.rounding = "full", this.swatches = [], this.noAlphaChannel = !1, this._renderMenu = !1;
+  }
+  overlayCloseEvent() {
+    this.open = !1;
+  }
+  overlayOpenEvent() {
+    this.open = !0;
+  }
+  handleColorChange() {
+    this.color = this.menuElement.color, this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  firstUpdated() {
+    this.overlayElement.addEventListener("slottable-request", (o) => {
+      this._renderMenu = o.data !== To;
+    });
+  }
+  updated(o) {
+    o.has("open") && this.open === !0 && (this._renderMenu = !0);
+  }
+  renderColorMenu() {
+    return m`
+      <luzmo-color-menu
+        .size=${this.size}
+        .color=${this.color}
+        .noAlphaChannel=${this.noAlphaChannel}
+        .swatches=${this.swatches}
+        @change=${this.handleColorChange}
+      ></luzmo-color-menu>
+    `;
+  }
+  render() {
+    return m`
+      <luzmo-swatch
+        id="trigger"
+        .shape=${this.shape}
+        .rounding=${this.rounding}
+        .size=${this.size}
+        .color=${this.color}
+        .selected=${this.open && !this.disabled}
+        ?disabled=${this.disabled}
+        @luzmo-closed=${this.overlayCloseEvent}
+        @luzmo-opened=${this.overlayOpenEvent}
+      ></luzmo-swatch>
+      <luzmo-overlay
+        trigger=${this.disabled ? "" : "trigger@click"}
+        type="auto"
+        .placement=${this.placement}
+        type="page"
+      >
+        <luzmo-popover style="position:relative">
+          ${this._renderMenu ? this.renderColorMenu() : m``}
+        </luzmo-popover>
+      </luzmo-overlay>
+    `;
+  }
+};
+ko.styles = R(_e);
+let S = ko;
+_([
+  s({ type: String, reflect: !0 })
+], S.prototype, "color");
+_([
+  s({ type: Boolean, reflect: !0 })
+], S.prototype, "open");
+_([
+  s({ type: Boolean, reflect: !0 })
+], S.prototype, "disabled");
+_([
+  s({ type: String, reflect: !0 })
+], S.prototype, "placement");
+_([
+  s({ type: String, reflect: !0 })
+], S.prototype, "rounding");
+_([
+  s({ type: String, reflect: !0 })
+], S.prototype, "shape");
+_([
+  s({ type: Array, reflect: !0 })
+], S.prototype, "swatches");
+_([
+  s({ type: Boolean, reflect: !0, attribute: "no-alpha-channel" })
+], S.prototype, "noAlphaChannel");
+_([
+  C("luzmo-color-menu")
+], S.prototype, "menuElement");
+_([
+  C("luzmo-overlay")
+], S.prototype, "overlayElement");
+_([
+  uo()
+], S.prototype, "_renderMenu");
+customElements.get("luzmo-color-picker") || customElements.define("luzmo-color-picker", S);
+var Me = Object.defineProperty, H = (r, o, e, t) => {
+  for (var l = void 0, i = r.length - 1, a; i >= 0; i--)
+    (a = r[i]) && (l = a(o, e, l) || l);
+  return l && Me(o, e, l), l;
+};
+const L = class L extends Io {
+  constructor() {
+    super(...arguments), this.value = "transparent", this.disabled = !1, this.noAlphaChannel = !1, this.swatches = [], this.rounding = "full", this.shape = "circle", this.placement = "left-start", this.debounce = 50;
+  }
+  _handleEvent() {
+    this.debounceTimeout && clearTimeout(this.debounceTimeout), this.debounceTimeout = setTimeout(() => {
+      this.dispatchEvent(
+        new CustomEvent("option-changed", {
+          bubbles: !0,
+          composed: !0,
+          cancelable: !0,
+          detail: {
+            value: this.colorPicker.color
+          }
+        })
+      );
+    }, this.debounce ?? 200);
+  }
+  renderController() {
+    return Uo`
+      <luzmo-color-picker
+        .color=${this.value}
+        .size=${this.size}
+        .rounding=${this.rounding}
+        .shape=${this.shape}
+        .swatches=${this.swatches}
+        .placement=${this.placement}
+        .noAlphaChannel=${this.noAlphaChannel}
+        ?disabled=${this.disabled}
+        @change=${this._handleEvent}
+      >
+      </luzmo-color-picker>
+    `;
+  }
+};
+L.styles = [oo(L, L, "styles")];
+let k = L;
+H([
+  F({ type: String, reflect: !0 })
+], k.prototype, "value");
+H([
+  F({ type: Boolean, reflect: !0 })
+], k.prototype, "disabled");
+H([
+  F({ type: Boolean, reflect: !0 })
+], k.prototype, "noAlphaChannel");
+H([
+  F({ type: Array, reflect: !0 })
+], k.prototype, "swatches");
+H([
+  F({ type: String, reflect: !0 })
+], k.prototype, "rounding");
+H([
+  F({ type: String, reflect: !0 })
+], k.prototype, "shape");
+H([
+  F()
+], k.prototype, "placement");
+H([
+  F({ type: Number, reflect: !0 })
+], k.prototype, "debounce");
+H([
+  Do("luzmo-color-picker")
+], k.prototype, "colorPicker");
+customElements.get("luzmo-edit-option-color-picker") || customElements.define(
+  "luzmo-edit-option-color-picker",
+  k
+);
+export {
+  k as LuzmoEditOptionColorPicker
+};