@luzmo/analytics-components-kit 1.0.1-alpha.5 → 1.0.1-alpha.50

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

@@ -1,6 +1,6 @@
 /*! * A kit of modern Luzmo Web Components for analytics in your web application.
  * 
- * Copyright © 2024 Luzmo
+ * Copyright © 2025 Luzmo
  * All rights reserved.
  * Luzmo web components (“Luzmo Web Components”)
  * must be used according to the Luzmo Terms of Service.
@@ -17,2470 +17,27 @@
  * 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 { r as R, H as s, I as O, x as m, a as uo, n as F } from "../property-CD3dwBJC.js";
-import { n as ho } from "../directive-helpers-BLDZnGQv-oKMCBvb2.js";
-import { m as N, d as C } from "../if-defined-CYpcjGCb-tXzyj9Dq.js";
-import { m as X } from "../sized-mixin-PyCYpyQq-B40Ek2UB.js";
-import { O as J, n as Eo, b as _o, T as Ao } from "../luzmo-icons-CZEpXpvy.js";
-import { w as Mo, a as Ho } from "../async-directive-FGzMycjH-Bgeca09f.js";
-import { l as mo, u as po } from "../language-resolution-8yZa5r_P-CTSmbE1U.js";
-import { i as Po } from "../text-field-7ITo3Lac-DqVO04kR.js";
-import { p as Ro, d as Fo, a as To } from "../index-BRk42NQn.js";
-import "../index-BqTdFs1o.js";
-import "../index-DVaeDCbe.js";
-import { o as eo } from "../when-CDK1Tt5Y-C6ViXC43.js";
-import { a as Bo } from "../observe-slot-text-BG0H7bQK-C0wmc4DO.js";
-import { m as Io } from "../roving-tabindex-DOg4z6ZU-dufnVmvL.js";
-import "../index-BD3VxQBH.js";
-import { e as No } from "../query-Ddbd72Um.js";
-import { L as Uo } from "../edit-option-base-oIvlolV9.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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(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 Do = 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 && Do(o, e, l), l;
-};
-const bo = class extends O {
-  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 Lo = () => {
-  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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
-  }
-};
-Lo();
-const jo = ':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 qo = 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 && qo(o, e, l), l;
-};
-const fo = class extends O {
-  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(jo);
-let D = fo;
-W([
-  s({ type: Boolean, reflect: !0 })
-], D.prototype, "disabled");
-W([
-  s({ type: Boolean, reflect: !0 })
-], D.prototype, "focused");
-W([
-  s({ type: Boolean, reflect: !0 })
-], D.prototype, "open");
-W([
-  s({ type: String })
-], D.prototype, "color");
-customElements.get("luzmo-color-handle") || customElements.define("luzmo-color-handle", D);
-const Ko = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  LuzmoColorHandle: D
-}, 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) {
-  Vo(r) && (r = "100%");
-  const e = Xo(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 Vo(r) {
-  return typeof r == "string" && r.indexOf(".") !== -1 && parseFloat(r) === 1;
-}
-function Xo(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 I(r) {
-  return r.length === 1 ? "0" + r : String(r);
-}
-function Wo(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 Yo(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 Zo(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 = [
-    I(Math.round(r).toString(16)),
-    I(Math.round(o).toString(16)),
-    I(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 Go(r, o, e, t, l) {
-  const i = [
-    I(Math.round(r).toString(16)),
-    I(Math.round(o).toString(16)),
-    I(Math.round(e).toString(16)),
-    I(Qo(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 Jo(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 Qo(r) {
-  return Math.round(parseFloat(r) * 255).toString(16);
-}
-function ao(r) {
-  return x(r) / 255;
-}
-function x(r) {
-  return parseInt(r, 16);
-}
-function oe(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 ee(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 = le(r)), typeof r == "object" && (v(r.r) && v(r.g) && v(r.b) ? (o = Wo(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 = Zo(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 = Yo(r.h, t, i), a = !0, n = "hsl") : v(r.c) && v(r.m) && v(r.y) && v(r.k) && (o = Jo(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 re = "[-\\+]?\\d+%?", te = "[-\\+]?\\d*\\.\\d+%?", P = "(?:" + te + ")|(?:" + re + ")", 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 le(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 = oe(o)), this.originalInput = o;
-    const t = ee(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 Go(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 ie = () => {
+var a = Object.getPrototypeOf;
+var d = Reflect.get;
+var s = (l, c, i) => d(a(l), i, c);
+import "../index-DTI4dIyd.js";
+import "../index-BssHAgUU.js";
+import { x as p, n as r } from "../property-DCzt3DR1.js";
+import { e as f } from "../query-Ddbd72Um.js";
+import { L as h } from "../edit-option-base-CG0JcbX9.js";
+const z = () => {
   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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
-  }
-};
-ie();
-const ae = "@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 se = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, z = (r, o, e, t) => {
-  for (var l = t > 1 ? void 0 : t ? ne(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 && se(o, e, l), l;
-};
-class g extends O {
-  constructor() {
-    super(...arguments), this.disabled = !1, this.focused = !1, this.labelX = "saturation", this.labelY = "luminosity", this.isLTR = !0, this.languageResolver = new mo(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(ae)];
-  }
-  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 = N(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=${N(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);`}
-        ${po({
-      start: ["pointerdown", this.handlePointerdown],
-      streamInside: ["pointermove", this.handlePointermove],
-      end: [
-        ["pointerup", "pointercancel", "pointerleave"],
-        this.handlePointerup
-      ]
-    })}
-      ></luzmo-color-handle>
-
-      <fieldset
-        class="fieldset"
-        aria-label=${N(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 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-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
-  }
-};
-ce();
-var ue = Object.defineProperty, he = (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 && ue(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(() => Ko), 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;
-  }
-};
-he([
-  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 de = () => {
-  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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
-  }
-};
-de();
-const me = '.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 pe = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, y = (r, o, e, t) => {
-  for (var l = t > 1 ? void 0 : t ? ge(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 && pe(o, e, l), l;
-};
-let f = class extends uo {
-  constructor() {
-    super(...arguments), this.disabled = !1, this.focused = !1, this.label = "hue", this.vertical = !1, this.languageResolver = new mo(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(me)];
-  }
-  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=${N(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}
-        ${po({
-      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=${N(this.vertical ? "vertical" : void 0)}
-        orient=${N(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 be = () => {
-  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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
-  }
-};
-be();
-const ze = '@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-color-negative);--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 fe = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, E = (r, o, e, t) => {
-  for (var l = t > 1 ? void 0 : t ? ve(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 && fe(o, e, l), l;
-};
-let $ = class extends X(uo, {
-  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(ze)];
-  }
-  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=${N(
-      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 xe = ":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 ye = Object.defineProperty, we = Object.getOwnPropertyDescriptor, U = (r, o, e, t) => {
-  for (var l = t > 1 ? void 0 : t ? we(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 && ye(o, e, l), l;
-};
-class T extends X(O, {
-  validSizes: ["xs", "s", "m", "l"],
-  noDefaultSize: !0
-}) {
-  constructor() {
-    super(), this._selected = [], this.selectedSet = /* @__PURE__ */ new Set(), this.rovingTabindexController = new Io(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(xe)];
-  }
-  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 }
-    );
-  }
-}
-U([
-  s({ reflect: !0 })
-], T.prototype, "border", 2);
-U([
-  s({ reflect: !0 })
-], T.prototype, "density", 2);
-U([
-  s({ reflect: !0 })
-], T.prototype, "rounding", 2);
-U([
-  s({ type: Array })
-], T.prototype, "selected", 1);
-U([
-  s()
-], T.prototype, "selects", 2);
-U([
-  s({ reflect: !0 })
-], T.prototype, "shape", 2);
-U([
-  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 ke = () => {
-  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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
-  }
-};
-ke();
-const Ce = '@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 $e = 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 && $e(o, e, l), l;
-};
-const wo = class extends X(O) {
-  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(Ce);
-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([
-  ho()
-], 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 Se = () => {
-  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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
-  }
-};
-Se();
-const Ee = "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 _e = 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 && _e(o, e, l), l;
-};
-const ko = class extends X(O) {
-  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>
-    `;
+    const l = document.createElement("style");
+    l.setAttribute("data-luzmo-vars", ""), l.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--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(l);
   }
 };
-ko.styles = R(Ee);
-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");
-_([
-  ho()
-], S.prototype, "_renderMenu");
-customElements.get("luzmo-color-picker") || customElements.define("luzmo-color-picker", S);
-var Ae = 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 && Ae(o, e, l), l;
+z();
+var b = Object.defineProperty, e = (l, c, i, g) => {
+  for (var t = void 0, m = l.length - 1, n; m >= 0; m--)
+    (n = l[m]) && (t = n(c, i, t) || t);
+  return t && b(c, i, t), t;
 };
-const L = class L extends Uo {
+const u = class u extends h {
   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;
   }
@@ -2499,7 +56,7 @@ const L = class L extends Uo {
     }, this.debounce ?? 200);
   }
   renderController() {
-    return m`
+    return p`
       <luzmo-color-picker
         .color=${this.value}
         .size=${this.size}
@@ -2515,39 +72,39 @@ const L = class L extends Uo {
     `;
   }
 };
-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([
-  No("luzmo-color-picker")
-], k.prototype, "colorPicker");
+u.styles = [s(u, u, "styles")];
+let o = u;
+e([
+  r({ type: String, reflect: !0 })
+], o.prototype, "value");
+e([
+  r({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled");
+e([
+  r({ type: Boolean, reflect: !0 })
+], o.prototype, "noAlphaChannel");
+e([
+  r({ type: Array, reflect: !0 })
+], o.prototype, "swatches");
+e([
+  r({ type: String, reflect: !0 })
+], o.prototype, "rounding");
+e([
+  r({ type: String, reflect: !0 })
+], o.prototype, "shape");
+e([
+  r()
+], o.prototype, "placement");
+e([
+  r({ type: Number, reflect: !0 })
+], o.prototype, "debounce");
+e([
+  f("luzmo-color-picker")
+], o.prototype, "colorPicker");
 customElements.get("luzmo-edit-option-color-picker") || customElements.define(
   "luzmo-edit-option-color-picker",
-  k
+  o
 );
 export {
-  k as LuzmoEditOptionColorPicker
+  o as LuzmoEditOptionColorPicker
 };