@luzmo/analytics-components-kit 1.0.1-alpha.53 → 1.0.1-alpha.55

package/components/{index-DTI4dIyd.js → index-BY1yDIAI.js}

@@ -18,19 +18,19 @@
  * SOFTWARE.
  * */
 import { a as io, z as m, I as jo, R as N, m as ie } from "./base-D76d76ww-BGkuhs54.js";
-import { n as ut } from "./directive-helpers-Cm6gitnu-CeYtlPO9.js";
-import { m as wo, d as V } from "./if-defined-DOaE2coe-CNT45Xcl.js";
-import { D as Se, g as ua, v as ha, s as da } from "./luzmo-icons-DbwDQtuO-QG0fLECn.js";
+import { n as ht } from "./directive-helpers-Cm6gitnu-CeYtlPO9.js";
+import { m as wo, d as J } from "./if-defined-DOaE2coe-CNT45Xcl.js";
+import { D as Se, g as ha, v as da, s as ma } from "./luzmo-icons-4nDFv1Lq-DffGNBpO.js";
 import { r as Fe } from "./focusable-BxtpnzWp-DJQkL8Zv.js";
-import { w as ma, a as pa } from "./async-directive-BfcqVjDp-BCT-lA4F.js";
-import { l as ht, u as dt } from "./streaming-listener-CP-JE6Fa-9MH0gENR.js";
-import { i as ga } from "./text-field-BIADXoLC-B9oE05VF.js";
-import { p as fa, d as ba, a as za } from "./index-DUF6bALI.js";
+import { w as pa, a as ga } from "./async-directive-BfcqVjDp-BCT-lA4F.js";
+import { l as dt, u as mt } from "./streaming-listener-CP-JE6Fa-9MH0gENR.js";
+import { i as fa } from "./text-field-ol9Ed5lQ-DbpeM4EP.js";
+import { p as ba, d as za, a as va } from "./index-DUF6bALI.js";
 import "./index-CskV_bXp.js";
 import "./index-CTVNGPeT.js";
-import { o as Qe } from "./when-CDK1Tt5Y-C6ViXC43.js";
-import { a as va } from "./mutation-controller-DH7YOCyj-E7gpCmwh.js";
-import { m as wa } from "./roving-tabindex-DOg4z6ZU-dufnVmvL.js";
+import { o as or } from "./when-CDK1Tt5Y-C6ViXC43.js";
+import { a as wa } from "./mutation-controller-DH7YOCyj-E7gpCmwh.js";
+import { m as ya } from "./roving-tabindex-DOg4z6ZU-dufnVmvL.js";
 /*! * Lucero - The design system for Luzmo.
  * 
  * Copyright © 2025 Luzmo
@@ -48,13 +48,13 @@ import { m as wa } from "./roving-tabindex-DOg4z6ZU-dufnVmvL.js";
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-const ya = ':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 xa = Object.defineProperty, mt = (r, o, e, t) => {
+const xa = ':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 Ca = Object.defineProperty, pt = (r, o, e, t) => {
   for (var a = void 0, l = r.length - 1, s; l >= 0; l--)
     (s = r[l]) && (a = s(o, e, a) || a);
-  return a && xa(o, e, a), a;
+  return a && Ca(o, e, a), a;
 };
-const pt = class extends jo {
+const gt = class extends jo {
   constructor() {
     super(...arguments), this.open = !1, this.color = "rgba(255, 0, 0, 0.5)";
   }
@@ -100,14 +100,14 @@ const pt = class extends jo {
     `;
   }
 };
-pt.styles = io(ya);
-let gt = pt;
-mt([
+gt.styles = io(xa);
+let ft = gt;
+pt([
   m({ type: Boolean, reflect: !0 })
-], gt.prototype, "open");
-mt([
+], ft.prototype, "open");
+pt([
   m({ type: String })
-], gt.prototype, "color");
+], ft.prototype, "color");
 /*! * Lucero - The design system for Luzmo.
  * 
  * Copyright © 2025 Luzmo
@@ -125,20 +125,20 @@ mt([
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-const Ca = () => {
+const ka = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const r = document.createElement("style");
     r.setAttribute("data-luzmo-vars", ""), r.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
   }
 };
-Ca();
-const ka = ':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 Ma = Object.defineProperty, ce = (r, o, e, t) => {
+ka();
+const Ma = ':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 $a = Object.defineProperty, ce = (r, o, e, t) => {
   for (var a = void 0, l = r.length - 1, s; l >= 0; l--)
     (s = r[l]) && (a = s(o, e, a) || a);
-  return a && Ma(o, e, a), a;
+  return a && $a(o, e, a), a;
 };
-const ft = class extends jo {
+const bt = class extends jo {
   constructor() {
     super(...arguments), this.disabled = !1, this.focused = !1, this.open = !1, this.color = "rgba(255, 0, 0, 0.5)";
   }
@@ -161,8 +161,8 @@ const ft = class extends jo {
     super.firstUpdated(o), this.addEventListener("pointerdown", this.handlePointerdown), this.addEventListener("pointerup", this.handlePointerup), this.addEventListener("pointercancel", this.handlePointerup);
   }
 };
-ft.styles = io(ka);
-let Ro = ft;
+bt.styles = io(Ma);
+let Ro = bt;
 ce([
   m({ type: Boolean, reflect: !0 })
 ], Ro.prototype, "disabled");
@@ -176,7 +176,7 @@ ce([
   m({ type: String })
 ], Ro.prototype, "color");
 customElements.get("luzmo-color-handle") || customElements.define("luzmo-color-handle", Ro);
-const $a = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Sa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   LuzmoColorHandle: Ro
 }, Symbol.toStringTag, { value: "Module" }));
@@ -197,7 +197,7 @@ const $a = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-var Sa = Object.defineProperty, _a = (r, o, e) => o in r ? Sa(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e, or = (r, o, e) => _a(r, typeof o != "symbol" ? o + "" : o, e);
+var _a = Object.defineProperty, Ea = (r, o, e) => o in r ? _a(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e, er = (r, o, e) => Ea(r, typeof o != "symbol" ? o + "" : o, e);
 function $(r, o) {
   let e = r.length;
   Array.isArray(r[0]) || (r = [r]), Array.isArray(o[0]) || (o = o.map((s) => [s]));
@@ -221,7 +221,7 @@ function ho(r) {
   return (Object.prototype.toString.call(r).match(/^\[object\s+(.*?)\]$/)[1] || "").toLowerCase();
 }
 function ae(r, { precision: o, unit: e }) {
-  return mo(r) ? "none" : bt(r, o) + (e ?? "");
+  return mo(r) ? "none" : zt(r, o) + (e ?? "");
 }
 function mo(r) {
   return Number.isNaN(r) || r instanceof Number && (r == null ? void 0 : r.none);
@@ -229,7 +229,7 @@ function mo(r) {
 function R(r) {
   return mo(r) ? 0 : r;
 }
-function bt(r, o) {
+function zt(r, o) {
   if (r === 0)
     return 0;
   let e = ~~r, t = 0;
@@ -237,13 +237,13 @@ function bt(r, o) {
   const a = 10 ** (o - t);
   return Math.floor(r * a + 0.5) / a;
 }
-const Ea = {
+const Aa = {
   deg: 1,
   grad: 0.9,
   rad: 180 / Math.PI,
   turn: 360
 };
-function zt(r) {
+function vt(r) {
   if (!r)
     return;
   r = r.trim();
@@ -255,7 +255,7 @@ function zt(r) {
       let c = i.match(t), u = i;
       if (c) {
         let h = c[0], d = u.slice(0, -h.length);
-        h === "%" ? (u = new Number(d / 100), u.type = "<percentage>") : (u = new Number(d * Ea[h]), u.type = "<angle>", u.unit = h);
+        h === "%" ? (u = new Number(d / 100), u.type = "<percentage>") : (u = new Number(d * Aa[h]), u.type = "<angle>", u.unit = h);
       } else e.test(u) ? (u = new Number(u), u.type = "<number>") : u === "none" && (u = new Number(NaN), u.none = !0);
       n.startsWith("/") && (u = u instanceof Number ? u : new Number(u), u.alpha = !0), typeof u == "object" && u instanceof Number && (u.raw = i), s.push(u);
     }), {
@@ -268,19 +268,19 @@ function zt(r) {
     };
   }
 }
-function vt(r) {
+function wt(r) {
   return r[r.length - 1];
 }
-function Oo(r, o, e) {
+function Io(r, o, e) {
   return isNaN(r) ? o : isNaN(o) ? r : r + (o - r) * e;
 }
-function wt(r, o, e) {
+function yt(r, o, e) {
   return (e - r) / (o - r);
 }
 function Le(r, o, e) {
-  return Oo(o[0], o[1], wt(r[0], r[1], e));
+  return Io(o[0], o[1], yt(r[0], r[1], e));
 }
-function yt(r) {
+function xt(r) {
   return r.map((o) => o.split("|").map((e) => {
     e = e.trim();
     let t = e.match(/^(<[a-z]+>)\[(-?[.\d]+),\s*(-?[.\d]+)\]?$/);
@@ -291,7 +291,7 @@ function yt(r) {
     return e;
   }));
 }
-function xt(r, o, e) {
+function Ct(r, o, e) {
   return Math.max(Math.min(e, o), r);
 }
 function ue(r, o) {
@@ -303,35 +303,35 @@ function to(r, o) {
 function je(r, o) {
   return o === 0 ? 0 : r / o;
 }
-function Ct(r, o, e = 0, t = r.length) {
+function kt(r, o, e = 0, t = r.length) {
   for (; e < t; ) {
     const a = e + t >> 1;
     r[a] < o ? e = a + 1 : t = a;
   }
   return e;
 }
-var Aa = /* @__PURE__ */ Object.freeze({
+var Ra = /* @__PURE__ */ Object.freeze({
   __proto__: null,
-  bisectLeft: Ct,
-  clamp: xt,
+  bisectLeft: kt,
+  clamp: Ct,
   copySign: ue,
-  interpolate: Oo,
-  interpolateInv: wt,
+  interpolate: Io,
+  interpolateInv: yt,
   isNone: mo,
   isString: Do,
-  last: vt,
+  last: wt,
   mapRange: Le,
   multiplyMatrices: $,
-  parseCoordGrammar: yt,
-  parseFunction: zt,
+  parseCoordGrammar: xt,
+  parseFunction: vt,
   serializeNumber: ae,
   skipNone: R,
   spow: to,
-  toPrecision: bt,
+  toPrecision: zt,
   type: ho,
   zdiv: je
 });
-class Ra {
+class Pa {
   add(o, e, t) {
     if (typeof arguments[0] != "string") {
       for (var o in arguments[0])
@@ -348,13 +348,13 @@ class Ra {
     });
   }
 }
-const po = new Ra();
-var er, rr, tr, G = {
+const po = new Pa();
+var rr, tr, ar, G = {
   gamut_mapping: "css",
   precision: 5,
   deltaE: "76",
   // Default deltaE method
-  verbose: ((tr = (rr = (er = globalThis == null ? void 0 : globalThis.process) == null ? void 0 : er.env) == null ? void 0 : rr.NODE_ENV) == null ? void 0 : tr.toLowerCase()) !== "test",
+  verbose: ((ar = (tr = (rr = globalThis == null ? void 0 : globalThis.process) == null ? void 0 : rr.env) == null ? void 0 : tr.NODE_ENV) == null ? void 0 : ar.toLowerCase()) !== "test",
   warn: function(r) {
     var o, e;
     this.verbose && ((e = (o = globalThis == null ? void 0 : globalThis.console) == null ? void 0 : o.warn) == null || e.call(o, r));
@@ -386,11 +386,11 @@ function le(r, o, e, t = {}) {
     return $(a.M, a.XYZ);
   throw new TypeError("Only Bradford CAT with white points D50 and D65 supported for now.");
 }
-const Pa = /* @__PURE__ */ new Set(["<number>", "<percentage>", "<angle>"]);
-function ar(r, o, e, t) {
+const Ha = /* @__PURE__ */ new Set(["<number>", "<percentage>", "<angle>"]);
+function lr(r, o, e, t) {
   return Object.entries(r.coords).map(([a, l], s) => {
     let n = o.coordGrammar[s], i = t[s], c = i == null ? void 0 : i.type, u;
-    if (i.none ? u = n.find((f) => Pa.has(f)) : u = n.find((f) => f == c), !u) {
+    if (i.none ? u = n.find((f) => Ha.has(f)) : u = n.find((f) => f == c), !u) {
       let f = l.name || a;
       throw new TypeError(`${c ?? i.raw} not allowed for ${f} in ${e}()`);
     }
@@ -400,12 +400,12 @@ function ar(r, o, e, t) {
     return h && d && (t[s] = Le(h, d, t[s])), u;
   });
 }
-function kt(r, { meta: o } = {}) {
+function Mt(r, { meta: o } = {}) {
   var e, t, a, l;
   let s = { str: (e = String(r)) == null ? void 0 : e.trim() };
   if (po.run("parse-start", s), s.color)
     return s.color;
-  if (s.parsed = zt(s.str), s.parsed) {
+  if (s.parsed = vt(s.str), s.parsed) {
     let n = s.parsed.name;
     if (n === "color") {
       let i = s.parsed.args.shift(), c = i.startsWith("--") ? i.substring(2) : `--${i}`, u = [i, c], h = s.parsed.rawArgs.indexOf("/") > 0 ? s.parsed.args.pop() : 1;
@@ -414,7 +414,7 @@ function kt(r, { meta: o } = {}) {
         if (p && (u.includes(p.id) || (t = p.ids) != null && t.filter((z) => u.includes(z)).length)) {
           const z = Object.keys(b.coords).map((y, C) => s.parsed.args[C] || 0);
           let w;
-          return p.coordGrammar && (w = ar(b, p, "color", z)), o && Object.assign(o, { formatId: "color", types: w }), p.id.startsWith("--") && !i.startsWith("--") && G.warn(`${b.name} is a non-standard space and not currently supported in the CSS spec. Use prefixed color(${p.id}) instead of color(${i}).`), i.startsWith("--") && !p.id.startsWith("--") && G.warn(`${b.name} is a standard space and supported in the CSS spec. Use color(${p.id}) instead of prefixed color(${i}).`), { spaceId: b.id, coords: z, alpha: h };
+          return p.coordGrammar && (w = lr(b, p, "color", z)), o && Object.assign(o, { formatId: "color", types: w }), p.id.startsWith("--") && !i.startsWith("--") && G.warn(`${b.name} is a non-standard space and not currently supported in the CSS spec. Use prefixed color(${p.id}) instead of color(${i}).`), i.startsWith("--") && !p.id.startsWith("--") && G.warn(`${b.name} is a standard space and supported in the CSS spec. Use color(${p.id}) instead of prefixed color(${i}).`), { spaceId: b.id, coords: z, alpha: h };
         }
       }
       let d = "", f = i in g.registry ? i : c;
@@ -428,9 +428,9 @@ function kt(r, { meta: o } = {}) {
         let c = i.getFormat(n);
         if (c && c.type === "function") {
           let u = 1;
-          (c.lastAlpha || vt(s.parsed.args).alpha) && (u = s.parsed.args.pop());
+          (c.lastAlpha || wt(s.parsed.args).alpha) && (u = s.parsed.args.pop());
           let h = s.parsed.args, d;
-          return c.coordGrammar && (d = ar(i, c, n, h)), o && Object.assign(o, { formatId: c.name, types: d }), {
+          return c.coordGrammar && (d = lr(i, c, n, h)), o && Object.assign(o, { formatId: c.name, types: d }), {
             spaceId: i.id,
             coords: h,
             alpha: u
@@ -454,14 +454,14 @@ function v(r) {
     return r.map(v);
   if (!r)
     throw new TypeError("Empty color reference");
-  Do(r) && (r = kt(r));
+  Do(r) && (r = Mt(r));
   let o = r.space || r.spaceId;
   return o instanceof g || (r.space = g.get(o)), r.alpha === void 0 && (r.alpha = 1), r;
 }
-const Ha = 75e-6, Ee = class oo {
+const Na = 75e-6, Ee = class eo {
   constructor(o) {
     var e;
-    this.id = o.id, this.name = o.name, this.base = o.base ? oo.get(o.base) : null, this.aliases = o.aliases, this.base && (this.fromBase = o.fromBase, this.toBase = o.toBase);
+    this.id = o.id, this.name = o.name, this.base = o.base ? eo.get(o.base) : null, this.aliases = o.aliases, this.base && (this.fromBase = o.fromBase, this.toBase = o.toBase);
     let t = o.coords ?? this.base.coords;
     for (let l in t)
       "name" in t[l] || (t[l].name = l);
@@ -475,14 +475,14 @@ const Ha = 75e-6, Ee = class oo {
     (e = this.formats.color) != null && e.id || (this.formats.color = {
       ...this.formats.color ?? {},
       id: o.cssId || this.id
-    }), o.gamutSpace ? this.gamutSpace = o.gamutSpace === "self" ? this : oo.get(o.gamutSpace) : this.isPolar ? this.gamutSpace = this.base : this.gamutSpace = this, this.gamutSpace.isUnbounded && (this.inGamut = (l, s) => !0), this.referred = o.referred, Object.defineProperty(this, "path", {
-      value: Na(this).reverse(),
+    }), o.gamutSpace ? this.gamutSpace = o.gamutSpace === "self" ? this : eo.get(o.gamutSpace) : this.isPolar ? this.gamutSpace = this.base : this.gamutSpace = this, this.gamutSpace.isUnbounded && (this.inGamut = (l, s) => !0), this.referred = o.referred, Object.defineProperty(this, "path", {
+      value: Ba(this).reverse(),
       writable: !1,
       enumerable: !0,
       configurable: !0
     }), po.run("colorspace-init-end", this);
   }
-  inGamut(o, { epsilon: e = Ha } = {}) {
+  inGamut(o, { epsilon: e = Na } = {}) {
     if (!this.equals(this.gamutSpace))
       return o = this.to(this.gamutSpace, o), this.gamutSpace.inGamut(o, { epsilon: e });
     let t = Object.values(this.coords);
@@ -512,9 +512,9 @@ const Ha = 75e-6, Ee = class oo {
   }
   getFormat(o) {
     if (typeof o == "object")
-      return o = lr(o, this), o;
+      return o = sr(o, this), o;
     let e;
-    return o === "default" ? e = Object.values(this.formats)[0] : e = this.formats[o], e ? (e = lr(e, this), e) : null;
+    return o === "default" ? e = Object.values(this.formats)[0] : e = this.formats[o], e ? (e = sr(e, this), e) : null;
   }
   /**
    * Check if this color space is the same as another color space reference.
@@ -530,7 +530,7 @@ const Ha = 75e-6, Ee = class oo {
       const n = v(o);
       [o, e] = [n.space, n.coords];
     }
-    if (o = oo.get(o), this.equals(o))
+    if (o = eo.get(o), this.equals(o))
       return e;
     e = e.map((n) => Number.isNaN(n) ? 0 : n);
     let t = this.path, a = o.path, l, s;
@@ -549,7 +549,7 @@ const Ha = 75e-6, Ee = class oo {
       const t = v(o);
       [o, e] = [t.space, t.coords];
     }
-    return o = oo.get(o), o.to(this, e);
+    return o = eo.get(o), o.to(this, e);
   }
   toString() {
     return `${this.name} (${this.id})`;
@@ -564,7 +564,7 @@ const Ha = 75e-6, Ee = class oo {
   }
   // Returns array of unique color spaces
   static get all() {
-    return [...new Set(Object.values(oo.registry))];
+    return [...new Set(Object.values(eo.registry))];
   }
   static register(o, e) {
     if (arguments.length === 1 && (e = arguments[0], o = e.id), e = this.get(e), this.registry[o] && this.registry[o] !== e)
@@ -579,16 +579,16 @@ const Ha = 75e-6, Ee = class oo {
    * @param {ColorSpace | string} name
    */
   static get(o, ...e) {
-    if (!o || o instanceof oo)
+    if (!o || o instanceof eo)
       return o;
     if (ho(o) === "string") {
-      let t = oo.registry[o.toLowerCase()];
+      let t = eo.registry[o.toLowerCase()];
       if (!t)
         throw new TypeError(`No color space found with id = "${o}"`);
       return t;
     }
     if (e.length)
-      return oo.get(...e);
+      return eo.get(...e);
     throw new TypeError(`${o} is not a valid color space`);
   }
   /**
@@ -602,14 +602,14 @@ const Ha = 75e-6, Ee = class oo {
   static resolveCoord(o, e) {
     var t;
     let a = ho(o), l, s;
-    if (a === "string" ? o.includes(".") ? [l, s] = o.split(".") : [l, s] = [, o] : Array.isArray(o) ? [l, s] = o : (l = o.space, s = o.coordId), l = oo.get(l), l || (l = e), !l)
+    if (a === "string" ? o.includes(".") ? [l, s] = o.split(".") : [l, s] = [, o] : Array.isArray(o) ? [l, s] = o : (l = o.space, s = o.coordId), l = eo.get(l), l || (l = e), !l)
       throw new TypeError(`Cannot resolve coordinate reference ${o}: No color space specified and relative references are not allowed here`);
     if (a = ho(s), a === "number" || a === "string" && s >= 0) {
       let c = Object.entries(l.coords)[s];
       if (c)
         return { space: l, id: c[0], index: s, ...c[1] };
     }
-    l = oo.get(l);
+    l = eo.get(l);
     let n = s.toLowerCase(), i = 0;
     for (let c in l.coords) {
       let u = l.coords[c];
@@ -620,20 +620,20 @@ const Ha = 75e-6, Ee = class oo {
     throw new TypeError(`No "${s}" coordinate found in ${l.name}. Its coordinates are: ${Object.keys(l.coords).join(", ")}`);
   }
 };
-or(Ee, "registry", {}), or(Ee, "DEFAULT_FORMAT", {
+er(Ee, "registry", {}), er(Ee, "DEFAULT_FORMAT", {
   type: "functions",
   name: "color"
 });
 let g = Ee;
-function Na(r) {
+function Ba(r) {
   let o = [r];
   for (let e = r; e = e.base; )
     o.push(e);
   return o;
 }
-function lr(r, { coords: o } = {}) {
+function sr(r, { coords: o } = {}) {
   if (r.coords && !r.coordGrammar) {
-    r.type || (r.type = "function"), r.name || (r.name = "color"), r.coordGrammar = yt(r.coords);
+    r.type || (r.type = "function"), r.name || (r.name = "color"), r.coordGrammar = xt(r.coords);
     let e = Object.entries(o).map(([t, a], l) => {
       let s = r.coordGrammar[l][0], n = a.range || a.refRange, i = s.range, c = "";
       return s == "<percentage>" ? (i = [0, 100], c = "%") : s == "<angle>" && (c = "deg"), { fromRange: n, toRange: i, suffix: c };
@@ -724,7 +724,7 @@ var Te = new g({
   fromBase: (r) => le(B.white, "D50", r),
   toBase: (r) => le("D50", B.white, r)
 });
-const Ba = 216 / 24389, sr = 24 / 116, Uo = 24389 / 27;
+const Oa = 216 / 24389, nr = 24 / 116, Uo = 24389 / 27;
 let ge = j.D50;
 var Y = new g({
   id: "lab",
@@ -748,7 +748,7 @@ var Y = new g({
   // Convert D50-adapted XYX to Lab
   //  CIE 15.3:2004 section 8.2.1.1
   fromBase(r) {
-    let o = r.map((e, t) => e / ge[t]).map((e) => e > Ba ? Math.cbrt(e) : (Uo * e + 16) / 116);
+    let o = r.map((e, t) => e / ge[t]).map((e) => e > Oa ? Math.cbrt(e) : (Uo * e + 16) / 116);
     return [
       116 * o[1] - 16,
       // L
@@ -764,9 +764,9 @@ var Y = new g({
   toBase(r) {
     let o = [];
     return o[1] = (r[0] + 16) / 116, o[0] = r[1] / 500 + o[1], o[2] = o[1] - r[2] / 200, [
-      o[0] > sr ? Math.pow(o[0], 3) : (116 * o[0] - 16) / Uo,
+      o[0] > nr ? Math.pow(o[0], 3) : (116 * o[0] - 16) / Uo,
       r[0] > 8 ? Math.pow((r[0] + 16) / 116, 3) : r[0] / Uo,
-      o[2] > sr ? Math.pow(o[2], 3) : (116 * o[2] - 16) / Uo
+      o[2] > nr ? Math.pow(o[2], 3) : (116 * o[2] - 16) / Uo
     ].map((e, t) => e * ge[t]);
   },
   formats: {
@@ -832,39 +832,39 @@ var Fo = new g({
     }
   }
 });
-const nr = 25 ** 7, se = Math.PI, ir = 180 / se, Co = se / 180;
-function cr(r) {
+const ir = 25 ** 7, se = Math.PI, cr = 180 / se, Co = se / 180;
+function ur(r) {
   const o = r * r;
   return o * o * o * r;
 }
-function Mt(r, o, { kL: e = 1, kC: t = 1, kH: a = 1 } = {}) {
+function $t(r, o, { kL: e = 1, kC: t = 1, kH: a = 1 } = {}) {
   [r, o] = v([r, o]);
   let [l, s, n] = Y.from(r), i = Fo.from(Y, [l, s, n])[1], [c, u, h] = Y.from(o), d = Fo.from(Y, [c, u, h])[1];
   i < 0 && (i = 0), d < 0 && (d = 0);
-  let f = (i + d) / 2, b = cr(f), p = 0.5 * (1 - Math.sqrt(b / (b + nr))), z = (1 + p) * s, w = (1 + p) * u, y = Math.sqrt(z ** 2 + n ** 2), C = Math.sqrt(w ** 2 + h ** 2), x = z === 0 && n === 0 ? 0 : Math.atan2(n, z), k = w === 0 && h === 0 ? 0 : Math.atan2(h, w);
-  x < 0 && (x += 2 * se), k < 0 && (k += 2 * se), x *= ir, k *= ir;
-  let S = c - l, F = C - y, E = k - x, Po = x + k, Ye = Math.abs(E), Ho;
-  y * C === 0 ? Ho = 0 : Ye <= 180 ? Ho = E : E > 180 ? Ho = E - 360 : E < -180 ? Ho = E + 360 : G.warn("the unthinkable has happened");
-  let Ge = 2 * Math.sqrt(C * y) * Math.sin(Ho * Co / 2), la = (l + c) / 2, pe = (y + C) / 2, Ze = cr(pe), so;
-  y * C === 0 ? so = Po : Ye <= 180 ? so = Po / 2 : Po < 360 ? so = (Po + 360) / 2 : so = (Po - 360) / 2;
-  let Ke = (la - 50) ** 2, sa = 1 + 0.015 * Ke / Math.sqrt(20 + Ke), Ve = 1 + 0.045 * pe, No = 1;
+  let f = (i + d) / 2, b = ur(f), p = 0.5 * (1 - Math.sqrt(b / (b + ir))), z = (1 + p) * s, w = (1 + p) * u, y = Math.sqrt(z ** 2 + n ** 2), C = Math.sqrt(w ** 2 + h ** 2), x = z === 0 && n === 0 ? 0 : Math.atan2(n, z), k = w === 0 && h === 0 ? 0 : Math.atan2(h, w);
+  x < 0 && (x += 2 * se), k < 0 && (k += 2 * se), x *= cr, k *= cr;
+  let S = c - l, F = C - y, E = k - x, Po = x + k, Ge = Math.abs(E), Ho;
+  y * C === 0 ? Ho = 0 : Ge <= 180 ? Ho = E : E > 180 ? Ho = E - 360 : E < -180 ? Ho = E + 360 : G.warn("the unthinkable has happened");
+  let Ze = 2 * Math.sqrt(C * y) * Math.sin(Ho * Co / 2), sa = (l + c) / 2, pe = (y + C) / 2, Ke = ur(pe), so;
+  y * C === 0 ? so = Po : Ge <= 180 ? so = Po / 2 : Po < 360 ? so = (Po + 360) / 2 : so = (Po - 360) / 2;
+  let Ve = (sa - 50) ** 2, na = 1 + 0.015 * Ve / Math.sqrt(20 + Ve), Je = 1 + 0.045 * pe, No = 1;
   No -= 0.17 * Math.cos((so - 30) * Co), No += 0.24 * Math.cos(2 * so * Co), No += 0.32 * Math.cos((3 * so + 6) * Co), No -= 0.2 * Math.cos((4 * so - 63) * Co);
-  let Je = 1 + 0.015 * pe * No, na = 30 * Math.exp(-1 * ((so - 275) / 25) ** 2), ia = 2 * Math.sqrt(Ze / (Ze + nr)), ca = -1 * Math.sin(2 * na * Co) * ia, Wo = (S / (e * sa)) ** 2;
-  return Wo += (F / (t * Ve)) ** 2, Wo += (Ge / (a * Je)) ** 2, Wo += ca * (F / (t * Ve)) * (Ge / (a * Je)), Math.sqrt(Wo);
+  let Qe = 1 + 0.015 * pe * No, ia = 30 * Math.exp(-1 * ((so - 275) / 25) ** 2), ca = 2 * Math.sqrt(Ke / (Ke + ir)), ua = -1 * Math.sin(2 * ia * Co) * ca, Wo = (S / (e * na)) ** 2;
+  return Wo += (F / (t * Je)) ** 2, Wo += (Ze / (a * Qe)) ** 2, Wo += ua * (F / (t * Je)) * (Ze / (a * Qe)), Math.sqrt(Wo);
 }
-const Oa = [
+const Fa = [
   [0.819022437996703, 0.3619062600528904, -0.1288737815209879],
   [0.0329836539323885, 0.9292868615863434, 0.0361446663506424],
   [0.0481771893596242, 0.2642395317527308, 0.6335478284694309]
-], Fa = [
+], La = [
   [1.2268798758459243, -0.5578149944602171, 0.2813910456659647],
   [-0.0405757452148008, 1.112286803280317, -0.0717110580655164],
   [-0.0763729366746601, -0.4214933324022432, 1.5869240198367816]
-], La = [
+], ja = [
   [0.210454268309314, 0.7936177747023054, -0.0040720430116193],
   [1.9779985324311684, -2.42859224204858, 0.450593709617411],
   [0.0259040424655478, 0.7827717124575296, -0.8086757549230774]
-], ja = [
+], Da = [
   [1, 0.3963377773761749, 0.2158037573099136],
   [1, -0.1055613458156586, -0.0638541728258133],
   [1, -0.0894841775298119, -1.2914855480194092]
@@ -888,12 +888,12 @@ var So = new g({
   white: "D65",
   base: B,
   fromBase(r) {
-    let o = $(Oa, r).map((e) => Math.cbrt(e));
-    return $(La, o);
+    let o = $(Fa, r).map((e) => Math.cbrt(e));
+    return $(ja, o);
   },
   toBase(r) {
-    let o = $(ja, r).map((e) => e ** 3);
-    return $(Fa, o);
+    let o = $(Da, r).map((e) => e ** 3);
+    return $(La, o);
   },
   formats: {
     oklab: {
@@ -906,8 +906,8 @@ function Ae(r, o) {
   let [e, t, a] = So.from(r), [l, s, n] = So.from(o), i = e - l, c = t - s, u = a - n;
   return Math.sqrt(i ** 2 + c ** 2 + u ** 2);
 }
-const Da = 75e-6;
-function yo(r, o, { epsilon: e = Da } = {}) {
+const Ta = 75e-6;
+function yo(r, o, { epsilon: e = Ta } = {}) {
   r = v(r), o || (o = r.space), o = g.get(o);
   let t = r.coords;
   return o !== r.space && (t = o.from(r)), o.inGamut(t, { epsilon: e });
@@ -919,7 +919,7 @@ function _o(r) {
     alpha: r.alpha
   };
 }
-function $t(r, o, e = "lab") {
+function St(r, o, e = "lab") {
   e = g.get(e);
   let t = e.from(r), a = e.from(o);
   return Math.sqrt(t.reduce((l, s, n) => {
@@ -927,22 +927,22 @@ function $t(r, o, e = "lab") {
     return isNaN(s) || isNaN(i) ? l : l + (i - s) ** 2;
   }, 0));
 }
-function Ta(r, o) {
-  return $t(r, o, "lab");
+function qa(r, o) {
+  return St(r, o, "lab");
 }
-const qa = Math.PI, ur = qa / 180;
-function Wa(r, o, { l: e = 2, c: t = 1 } = {}) {
+const Wa = Math.PI, hr = Wa / 180;
+function Ua(r, o, { l: e = 2, c: t = 1 } = {}) {
   [r, o] = v([r, o]);
   let [a, l, s] = Y.from(r), [, n, i] = Fo.from(Y, [a, l, s]), [c, u, h] = Y.from(o), d = Fo.from(Y, [c, u, h])[1];
   n < 0 && (n = 0), d < 0 && (d = 0);
   let f = a - c, b = n - d, p = l - u, z = s - h, w = p ** 2 + z ** 2 - b ** 2, y = 0.511;
   a >= 16 && (y = 0.040975 * a / (1 + 0.01765 * a));
   let C = 0.0638 * n / (1 + 0.0131 * n) + 0.638, x;
-  Number.isNaN(i) && (i = 0), i >= 164 && i <= 345 ? x = 0.56 + Math.abs(0.2 * Math.cos((i + 168) * ur)) : x = 0.36 + Math.abs(0.4 * Math.cos((i + 35) * ur));
+  Number.isNaN(i) && (i = 0), i >= 164 && i <= 345 ? x = 0.56 + Math.abs(0.2 * Math.cos((i + 168) * hr)) : x = 0.36 + Math.abs(0.4 * Math.cos((i + 35) * hr));
   let k = Math.pow(n, 4), S = Math.sqrt(k / (k + 1900)), F = C * (S * x + 1 - S), E = (f / (e * y)) ** 2;
   return E += (b / (t * C)) ** 2, E += w / F ** 2, Math.sqrt(E);
 }
-const hr = 203;
+const dr = 203;
 var qe = new g({
   // Absolute CIE XYZ, with a D65 whitepoint,
   // as used in most HDR colorspaces as a starting point.
@@ -967,30 +967,30 @@ var qe = new g({
   },
   base: B,
   fromBase(r) {
-    return r.map((o) => Math.max(o * hr, 0));
+    return r.map((o) => Math.max(o * dr, 0));
   },
   toBase(r) {
-    return r.map((o) => Math.max(o / hr, 0));
+    return r.map((o) => Math.max(o / dr, 0));
   }
 });
-const Xo = 1.15, Yo = 0.66, dr = 2610 / 2 ** 14, Ua = 2 ** 14 / 2610, mr = 3424 / 2 ** 12, pr = 2413 / 2 ** 7, gr = 2392 / 2 ** 7, Xa = 1.7 * 2523 / 2 ** 5, fr = 2 ** 5 / (1.7 * 2523), Go = -0.56, fe = 16295499532821565e-27, Ya = [
+const Xo = 1.15, Yo = 0.66, mr = 2610 / 2 ** 14, Xa = 2 ** 14 / 2610, pr = 3424 / 2 ** 12, gr = 2413 / 2 ** 7, fr = 2392 / 2 ** 7, Ya = 1.7 * 2523 / 2 ** 5, br = 2 ** 5 / (1.7 * 2523), Go = -0.56, fe = 16295499532821565e-27, Ga = [
   [0.41478972, 0.579999, 0.014648],
   [-0.20151, 1.120649, 0.0531008],
   [-0.0166008, 0.2648, 0.6684799]
-], Ga = [
+], Za = [
   [1.9242264357876067, -1.0047923125953657, 0.037651404030618],
   [0.35031676209499907, 0.7264811939316552, -0.06538442294808501],
   [-0.09098281098284752, -0.3127282905230739, 1.5227665613052603]
-], Za = [
+], Ka = [
   [0.5, 0.5, 0],
   [3.524, -4.066708, 0.542708],
   [0.199076, 1.096799, -1.295875]
-], Ka = [
+], Va = [
   [1, 0.1386050432715393, 0.05804731615611886],
   [0.9999999999999999, -0.1386050432715393, -0.05804731615611886],
   [0.9999999999999998, -0.09601924202631895, -0.8118918960560388]
 ];
-var St = new g({
+var _t = new g({
   id: "jzazbz",
   name: "Jzazbz",
   coords: {
@@ -1007,17 +1007,17 @@ var St = new g({
   },
   base: qe,
   fromBase(r) {
-    let [o, e, t] = r, a = Xo * o - (Xo - 1) * t, l = Yo * e - (Yo - 1) * o, s = $(Ya, [a, l, t]).map(function(u) {
-      let h = mr + pr * (u / 1e4) ** dr, d = 1 + gr * (u / 1e4) ** dr;
-      return (h / d) ** Xa;
-    }), [n, i, c] = $(Za, s);
+    let [o, e, t] = r, a = Xo * o - (Xo - 1) * t, l = Yo * e - (Yo - 1) * o, s = $(Ga, [a, l, t]).map(function(u) {
+      let h = pr + gr * (u / 1e4) ** mr, d = 1 + fr * (u / 1e4) ** mr;
+      return (h / d) ** Ya;
+    }), [n, i, c] = $(Ka, s);
     return [(1 + Go) * n / (1 + Go * n) - fe, i, c];
   },
   toBase(r) {
-    let [o, e, t] = r, a = (o + fe) / (1 + Go - Go * (o + fe)), l = $(Ka, [a, e, t]).map(function(h) {
-      let d = mr - h ** fr, f = gr * h ** fr - pr;
-      return 1e4 * (d / f) ** Ua;
-    }), [s, n, i] = $(Ga, l), c = (s + (Xo - 1) * i) / Xo, u = (n + (Yo - 1) * c) / Yo;
+    let [o, e, t] = r, a = (o + fe) / (1 + Go - Go * (o + fe)), l = $(Va, [a, e, t]).map(function(h) {
+      let d = pr - h ** br, f = fr * h ** br - gr;
+      return 1e4 * (d / f) ** Xa;
+    }), [s, n, i] = $(Za, l), c = (s + (Xo - 1) * i) / Xo, u = (n + (Yo - 1) * c) / Yo;
     return [c, u, i];
   },
   formats: {
@@ -1044,7 +1044,7 @@ var St = new g({
       name: "Hue"
     }
   },
-  base: St,
+  base: _t,
   fromBase(r) {
     let [o, e, t] = r, a;
     const l = 2e-4;
@@ -1068,26 +1068,26 @@ var St = new g({
     ];
   }
 });
-function Va(r, o) {
+function Ja(r, o) {
   [r, o] = v([r, o]);
   let [e, t, a] = Re.from(r), [l, s, n] = Re.from(o), i = e - l, c = t - s;
   Number.isNaN(a) && Number.isNaN(n) ? (a = 0, n = 0) : Number.isNaN(a) ? a = n : Number.isNaN(n) && (n = a);
   let u = a - n, h = 2 * Math.sqrt(t * s) * Math.sin(u / 2 * (Math.PI / 180));
   return Math.sqrt(i ** 2 + c ** 2 + h ** 2);
 }
-const _t = 3424 / 4096, Et = 2413 / 128, At = 2392 / 128, br = 2610 / 16384, Ja = 2523 / 32, Qa = 16384 / 2610, zr = 32 / 2523, ol = [
+const Et = 3424 / 4096, At = 2413 / 128, Rt = 2392 / 128, zr = 2610 / 16384, Qa = 2523 / 32, ol = 16384 / 2610, vr = 32 / 2523, el = [
   [0.3592832590121217, 0.6976051147779502, -0.035891593232029],
   [-0.1920808463704993, 1.100476797037432, 0.0753748658519118],
   [0.0070797844607479, 0.0748396662186362, 0.8433265453898765]
-], el = [
+], rl = [
   [2048 / 4096, 2048 / 4096, 0],
   [6610 / 4096, -13613 / 4096, 7003 / 4096],
   [17933 / 4096, -17390 / 4096, -543 / 4096]
-], rl = [
+], tl = [
   [0.9999999999999998, 0.0086090370379328, 0.111029625003026],
   [0.9999999999999998, -0.0086090370379328, -0.1110296250030259],
   [0.9999999999999998, 0.5600313357106791, -0.3206271749873188]
-], tl = [
+], al = [
   [2.0701522183894223, -1.3263473389671563, 0.2066510476294053],
   [0.3647385209748072, 0.6805660249472273, -0.0453045459220347],
   [-0.0497472075358123, -0.0492609666966131, 1.1880659249923042]
@@ -1122,45 +1122,45 @@ var Pe = new g({
   },
   base: qe,
   fromBase(r) {
-    let o = $(ol, r);
-    return al(o);
+    let o = $(el, r);
+    return ll(o);
   },
   toBase(r) {
-    let o = ll(r);
-    return $(tl, o);
+    let o = sl(r);
+    return $(al, o);
   }
 });
-function al(r) {
+function ll(r) {
   let o = r.map(function(e) {
-    let t = _t + Et * (e / 1e4) ** br, a = 1 + At * (e / 1e4) ** br;
-    return (t / a) ** Ja;
+    let t = Et + At * (e / 1e4) ** zr, a = 1 + Rt * (e / 1e4) ** zr;
+    return (t / a) ** Qa;
   });
-  return $(el, o);
+  return $(rl, o);
 }
-function ll(r) {
-  return $(rl, r).map(function(o) {
-    let e = Math.max(o ** zr - _t, 0), t = Et - At * o ** zr;
-    return 1e4 * (e / t) ** Qa;
+function sl(r) {
+  return $(tl, r).map(function(o) {
+    let e = Math.max(o ** vr - Et, 0), t = At - Rt * o ** vr;
+    return 1e4 * (e / t) ** ol;
   });
 }
-function sl(r, o) {
+function nl(r, o) {
   [r, o] = v([r, o]);
   let [e, t, a] = Pe.from(r), [l, s, n] = Pe.from(o);
   return 720 * Math.sqrt((e - l) ** 2 + 0.25 * (t - s) ** 2 + (a - n) ** 2);
 }
-const nl = j.D65, Rt = 0.42, vr = 1 / Rt, be = 2 * Math.PI, Pt = [
+const il = j.D65, Pt = 0.42, wr = 1 / Pt, be = 2 * Math.PI, Ht = [
   [0.401288, 0.650173, -0.051461],
   [-0.250268, 1.204414, 0.045854],
   [-2079e-6, 0.048952, 0.953127]
-], il = [
+], cl = [
   [1.8620678550872327, -1.0112546305316843, 0.14918677544445175],
   [0.38752654323613717, 0.6214474419314753, -0.008973985167612518],
   [-0.015841498849333856, -0.03412293802851557, 1.0499644368778496]
-], cl = [
+], ul = [
   [460, 451, 288],
   [460, -891, -261],
   [460, -220, -6300]
-], ul = {
+], hl = {
   dark: [0.8, 0.525, 0.8],
   dim: [0.9, 0.59, 0.9],
   average: [1, 0.69, 1]
@@ -1169,27 +1169,27 @@ const nl = j.D65, Rt = 0.42, vr = 1 / Rt, be = 2 * Math.PI, Pt = [
   h: [20.14, 90, 164.25, 237.53, 380.14],
   e: [0.8, 0.7, 1, 1.2, 0.8],
   H: [0, 100, 200, 300, 400]
-}, hl = 180 / Math.PI, wr = Math.PI / 180;
-function Ht(r, o) {
+}, dl = 180 / Math.PI, yr = Math.PI / 180;
+function Nt(r, o) {
   return r.map((e) => {
-    const t = to(o * Math.abs(e) * 0.01, Rt);
+    const t = to(o * Math.abs(e) * 0.01, Pt);
     return 400 * ue(t, e) / (t + 27.13);
   });
 }
-function dl(r, o) {
-  const e = 100 / o * 27.13 ** vr;
+function ml(r, o) {
+  const e = 100 / o * 27.13 ** wr;
   return r.map((t) => {
     const a = Math.abs(t);
-    return ue(e * to(a / (400 - a), vr), t);
+    return ue(e * to(a / (400 - a), wr), t);
   });
 }
-function ml(r) {
+function pl(r) {
   let o = ao(r);
   o <= zo.h[0] && (o += 360);
-  const e = Ct(zo.h, o) - 1, [t, a] = zo.h.slice(e, e + 2), [l, s] = zo.e.slice(e, e + 2), n = zo.H[e], i = (o - t) / l;
+  const e = kt(zo.h, o) - 1, [t, a] = zo.h.slice(e, e + 2), [l, s] = zo.e.slice(e, e + 2), n = zo.H[e], i = (o - t) / l;
   return n + 100 * i / (i + (a - o) / s);
 }
-function pl(r) {
+function gl(r) {
   let o = (r % 400 + 400) % 400;
   const e = Math.floor(0.01 * o);
   o = o % 100;
@@ -1198,13 +1198,13 @@ function pl(r) {
     (o * (s * t - l * a) - 100 * t * s) / (o * (s - l) - 100 * s)
   );
 }
-function Nt(r, o, e, t, a) {
+function Bt(r, o, e, t, a) {
   const l = {};
   l.discounting = a, l.refWhite = r, l.surround = t;
   const s = r.map((b) => b * 100);
   l.la = o, l.yb = e;
-  const n = s[1], i = $(Pt, s);
-  t = ul[l.surround];
+  const n = s[1], i = $(Ht, s);
+  t = hl[l.surround];
   const c = t[0];
   l.c = t[1], l.nc = t[2];
   const u = (1 / (5 * l.la + 1)) ** 4;
@@ -1213,12 +1213,12 @@ function Nt(r, o, e, t, a) {
     Math.min(c * (1 - 1 / 3.6 * Math.exp((-l.la - 42) / 92)), 1),
     0
   );
-  l.dRgb = i.map((b) => Oo(1, n / b, h)), l.dRgbInv = l.dRgb.map((b) => 1 / b);
-  const d = i.map((b, p) => b * l.dRgb[p]), f = Ht(d, l.fl);
+  l.dRgb = i.map((b) => Io(1, n / b, h)), l.dRgbInv = l.dRgb.map((b) => 1 / b);
+  const d = i.map((b, p) => b * l.dRgb[p]), f = Nt(d, l.fl);
   return l.aW = l.nbb * (2 * f[0] + f[1] + 0.05 * f[2]), l;
 }
-const yr = Nt(
-  nl,
+const xr = Bt(
+  il,
   64 / Math.PI * 0.2,
   20,
   "average",
@@ -1234,7 +1234,7 @@ function He(r, o) {
   if (r.J === 0 || r.Q === 0)
     return [0, 0, 0];
   let e = 0;
-  r.h !== void 0 ? e = ao(r.h) * wr : e = pl(r.H) * wr;
+  r.h !== void 0 ? e = ao(r.h) * yr : e = gl(r.H) * yr;
   const t = Math.cos(e), a = Math.sin(e);
   let l = 0;
   r.J !== void 0 ? l = to(r.J, 1 / 2) * 0.1 : r.Q !== void 0 && (l = 0.25 * o.c * r.Q / ((o.aW + 4) * o.flRoot));
@@ -1243,26 +1243,26 @@ function He(r, o) {
   const n = to(
     s * Math.pow(1.64 - Math.pow(0.29, o.n), -0.73),
     10 / 9
-  ), i = 0.25 * (Math.cos(e + 2) + 3.8), c = o.aW * to(l, 2 / o.c / o.z), u = 5e4 / 13 * o.nc * o.ncb * i, h = c / o.nbb, d = 23 * (h + 0.305) * je(n, 23 * u + n * (11 * t + 108 * a)), f = d * t, b = d * a, p = dl(
-    $(cl, [h, f, b]).map((z) => z * 1 / 1403),
+  ), i = 0.25 * (Math.cos(e + 2) + 3.8), c = o.aW * to(l, 2 / o.c / o.z), u = 5e4 / 13 * o.nc * o.ncb * i, h = c / o.nbb, d = 23 * (h + 0.305) * je(n, 23 * u + n * (11 * t + 108 * a)), f = d * t, b = d * a, p = ml(
+    $(ul, [h, f, b]).map((z) => z * 1 / 1403),
     o.fl
   );
   return $(
-    il,
+    cl,
     p.map((z, w) => z * o.dRgbInv[w])
   ).map((z) => z / 100);
 }
-function Bt(r, o) {
-  const e = r.map((C) => C * 100), t = Ht(
-    $(Pt, e).map((C, x) => C * o.dRgb[x]),
+function Ot(r, o) {
+  const e = r.map((C) => C * 100), t = Nt(
+    $(Ht, e).map((C, x) => C * o.dRgb[x]),
     o.fl
   ), a = t[0] + (-12 * t[1] + t[2]) / 11, l = (t[0] + t[1] - 2 * t[2]) / 9, s = (Math.atan2(l, a) % be + be) % be, n = 0.25 * (Math.cos(s + 2) + 3.8), i = 5e4 / 13 * o.nc * o.ncb * je(
     n * Math.sqrt(a ** 2 + l ** 2),
     t[0] + t[1] + 1.05 * t[2] + 0.305
-  ), c = to(i, 0.9) * Math.pow(1.64 - Math.pow(0.29, o.n), 0.73), u = o.nbb * (2 * t[0] + t[1] + 0.05 * t[2]), h = to(u / o.aW, 0.5 * o.c * o.z), d = 100 * to(h, 2), f = 4 / o.c * h * (o.aW + 4) * o.flRoot, b = c * h, p = b * o.flRoot, z = ao(s * hl), w = ml(z), y = 50 * to(o.c * c / (o.aW + 4), 1 / 2);
+  ), c = to(i, 0.9) * Math.pow(1.64 - Math.pow(0.29, o.n), 0.73), u = o.nbb * (2 * t[0] + t[1] + 0.05 * t[2]), h = to(u / o.aW, 0.5 * o.c * o.z), d = 100 * to(h, 2), f = 4 / o.c * h * (o.aW + 4) * o.flRoot, b = c * h, p = b * o.flRoot, z = ao(s * dl), w = pl(z), y = 50 * to(o.c * c / (o.aW + 4), 1 / 2);
   return { J: d, C: b, h: z, s: y, Q: f, M: p, H: w };
 }
-var gl = new g({
+var fl = new g({
   id: "cam16-jmh",
   cssId: "--cam16-jmh",
   name: "CAM16-JMh",
@@ -1283,24 +1283,24 @@ var gl = new g({
   },
   base: B,
   fromBase(r) {
-    const o = Bt(r, yr);
+    const o = Ot(r, xr);
     return [o.J, o.M, o.h];
   },
   toBase(r) {
     return He(
       { J: r[0], M: r[1], h: r[2] },
-      yr
+      xr
     );
   }
 });
-const fl = j.D65, bl = 216 / 24389, It = 24389 / 27;
-function zl(r) {
-  return 116 * (r > bl ? Math.cbrt(r) : (It * r + 16) / 116) - 16;
+const bl = j.D65, zl = 216 / 24389, It = 24389 / 27;
+function vl(r) {
+  return 116 * (r > zl ? Math.cbrt(r) : (It * r + 16) / 116) - 16;
 }
 function Ne(r) {
   return r > 8 ? Math.pow((r + 16) / 116, 3) : r / It;
 }
-function vl(r, o) {
+function wl(r, o) {
   let [e, t, a] = r, l = [], s = 0;
   if (a === 0)
     return [0, 0, 0];
@@ -1320,15 +1320,15 @@ function vl(r, o) {
   }
   return He({ J: s, C: t, h: e }, o);
 }
-function wl(r, o) {
-  const e = zl(r[1]);
+function yl(r, o) {
+  const e = vl(r[1]);
   if (e === 0)
     return [0, 0, 0];
-  const t = Bt(r, We);
+  const t = Ot(r, We);
   return [ao(t.h), t.C, e];
 }
-const We = Nt(
-  fl,
+const We = Bt(
+  bl,
   200 / Math.PI * Ne(50),
   Ne(50) * 100,
   "average",
@@ -1354,10 +1354,10 @@ var Lo = new g({
   },
   base: B,
   fromBase(r) {
-    return wl(r);
+    return yl(r);
   },
   toBase(r) {
-    return vl(r, We);
+    return wl(r, We);
   },
   formats: {
     color: {
@@ -1366,31 +1366,31 @@ var Lo = new g({
     }
   }
 });
-const yl = Math.PI / 180, xr = [1, 7e-3, 0.0228];
-function Cr(r) {
+const xl = Math.PI / 180, Cr = [1, 7e-3, 0.0228];
+function kr(r) {
   r[1] < 0 && (r = Lo.fromBase(Lo.toBase(r)));
-  const o = Math.log(Math.max(1 + xr[2] * r[1] * We.flRoot, 1)) / xr[2], e = r[0] * yl, t = o * Math.cos(e), a = o * Math.sin(e);
+  const o = Math.log(Math.max(1 + Cr[2] * r[1] * We.flRoot, 1)) / Cr[2], e = r[0] * xl, t = o * Math.cos(e), a = o * Math.sin(e);
   return [r[2], t, a];
 }
-function xl(r, o) {
+function Cl(r, o) {
   [r, o] = v([r, o]);
-  let [e, t, a] = Cr(Lo.from(r)), [l, s, n] = Cr(Lo.from(o));
+  let [e, t, a] = kr(Lo.from(r)), [l, s, n] = kr(Lo.from(o));
   return Math.sqrt((e - l) ** 2 + (t - s) ** 2 + (a - n) ** 2);
 }
 var Eo = {
-  deltaE76: Ta,
-  deltaECMC: Wa,
-  deltaE2000: Mt,
-  deltaEJz: Va,
-  deltaEITP: sl,
+  deltaE76: qa,
+  deltaECMC: Ua,
+  deltaE2000: $t,
+  deltaEJz: Ja,
+  deltaEITP: nl,
   deltaEOK: Ae,
-  deltaEHCT: xl
+  deltaEHCT: Cl
 };
-function Cl(r) {
+function kl(r) {
   const o = r ? Math.floor(Math.log10(Math.abs(r))) : 0;
   return Math.max(parseFloat(`1e${o - 2}`), 1e-6);
 }
-const kr = {
+const Mr = {
   hct: {
     method: "hct.c",
     jnd: 2,
@@ -1415,11 +1415,11 @@ function go(r, {
     return r;
   let s;
   if (o === "css")
-    s = kl(r, { space: e });
+    s = Ml(r, { space: e });
   else {
     if (o !== "clip" && !yo(r, e)) {
-      Object.prototype.hasOwnProperty.call(kr, o) && ({ method: o, jnd: a, deltaEMethod: t, blackWhiteClamp: l } = kr[o]);
-      let n = Mt;
+      Object.prototype.hasOwnProperty.call(Mr, o) && ({ method: o, jnd: a, deltaEMethod: t, blackWhiteClamp: l } = Mr[o]);
+      let n = $t;
       if (t !== "") {
         for (let c in Eo)
           if ("deltae" + t.toLowerCase() === c.toLowerCase()) {
@@ -1440,7 +1440,7 @@ function go(r, {
         d.coords.forEach((w, y) => {
           mo(w) && (d.coords[y] = 0);
         });
-        let f = (c.range || c.refRange)[0], b = Cl(a), p = f, z = X(d, h);
+        let f = (c.range || c.refRange)[0], b = kl(a), p = f, z = X(d, h);
         for (; z - p > b; ) {
           let w = _o(d);
           w = go(w, { space: e, method: "clip" }), n(d, w) - a < b ? p = X(d, h) : z = X(d, h), no(d, h, (p + z) / 2);
@@ -1461,11 +1461,11 @@ function go(r, {
   return e !== r.space && (s = M(s, r.space)), r.coords = s.coords, r;
 }
 go.returns = "color";
-const Mr = {
+const $r = {
   WHITE: { space: So, coords: [1, 0, 0] },
   BLACK: { space: So, coords: [0, 0, 0] }
 };
-function kl(r, { space: o } = {}) {
+function Ml(r, { space: o } = {}) {
   r = v(r), o || (o = r.space), o = g.get(o);
   const e = g.get("oklch");
   if (o.isUnbounded)
@@ -1473,11 +1473,11 @@ function kl(r, { space: o } = {}) {
   const t = M(r, e);
   let a = t.coords[0];
   if (a >= 1) {
-    const d = M(Mr.WHITE, o);
+    const d = M($r.WHITE, o);
     return d.alpha = r.alpha, M(d, o);
   }
   if (a <= 0) {
-    const d = M(Mr.BLACK, o);
+    const d = M($r.BLACK, o);
     return d.alpha = r.alpha, M(d, o);
   }
   if (yo(t, o, { epsilon: 0 }))
@@ -1487,7 +1487,7 @@ function kl(r, { space: o } = {}) {
     return f.coords = f.coords.map((p, z) => {
       if ("range" in b[z]) {
         const [w, y] = b[z].range;
-        return xt(w, p, y);
+        return Ct(w, p, y);
       }
       return p;
     }), f;
@@ -1514,7 +1514,7 @@ function M(r, o, { inGamut: e } = {}) {
   return e && (a = go(a, e === !0 ? void 0 : e)), a;
 }
 M.returns = "color";
-function Io(r, {
+function Oo(r, {
   precision: o = G.precision,
   format: e = "default",
   inGamut: t = !0,
@@ -1546,11 +1546,11 @@ function Io(r, {
   }
   return s;
 }
-const Ml = [
+const $l = [
   [0.6369580483012914, 0.14461690358620832, 0.1688809751641721],
   [0.2627002120112671, 0.6779980715188708, 0.05930171646986196],
   [0, 0.028072693049087428, 1.060985057710791]
-], $l = [
+], Sl = [
   [1.716651187971268, -0.355670783776392, -0.25336628137366],
   [-0.666684351832489, 1.616481236634939, 0.0157685458139111],
   [0.017639857445311, -0.042770613257809, 0.942103121235474]
@@ -1560,44 +1560,44 @@ var he = new T({
   cssId: "--rec2020-linear",
   name: "Linear REC.2020",
   white: "D65",
-  toXYZ_M: Ml,
-  fromXYZ_M: $l
+  toXYZ_M: $l,
+  fromXYZ_M: Sl
 });
-const Zo = 1.09929682680944, $r = 0.018053968510807;
-var Ot = new T({
+const Zo = 1.09929682680944, Sr = 0.018053968510807;
+var Ft = new T({
   id: "rec2020",
   name: "REC.2020",
   base: he,
   // Non-linear transfer function from Rec. ITU-R BT.2020-2 table 4
   toBase(r) {
     return r.map(function(o) {
-      return o < $r * 4.5 ? o / 4.5 : Math.pow((o + Zo - 1) / Zo, 1 / 0.45);
+      return o < Sr * 4.5 ? o / 4.5 : Math.pow((o + Zo - 1) / Zo, 1 / 0.45);
     });
   },
   fromBase(r) {
     return r.map(function(o) {
-      return o >= $r ? Zo * Math.pow(o, 0.45) - (Zo - 1) : 4.5 * o;
+      return o >= Sr ? Zo * Math.pow(o, 0.45) - (Zo - 1) : 4.5 * o;
     });
   }
 });
-const Sl = [
+const _l = [
   [0.4865709486482162, 0.26566769316909306, 0.1982172852343625],
   [0.2289745640697488, 0.6917385218365064, 0.079286914093745],
   [0, 0.04511338185890264, 1.043944368900976]
-], _l = [
+], El = [
   [2.493496911941425, -0.9313836179191239, -0.40271078445071684],
   [-0.8294889695615747, 1.7626640603183463, 0.023624685841943577],
   [0.03584583024378447, -0.07617238926804182, 0.9568845240076872]
 ];
-var Ft = new T({
+var Lt = new T({
   id: "p3-linear",
   cssId: "--display-p3-linear",
   name: "Linear P3",
   white: "D65",
-  toXYZ_M: Sl,
-  fromXYZ_M: _l
+  toXYZ_M: _l,
+  fromXYZ_M: El
 });
-const El = [
+const Al = [
   [0.41239079926595934, 0.357584339383878, 0.1804807884018343],
   [0.21263900587151027, 0.715168678767756, 0.07219231536073371],
   [0.01933081871559182, 0.11919477979462598, 0.9505321522496607]
@@ -1606,13 +1606,13 @@ const El = [
   [-0.9692436362808796, 1.8759675015077202, 0.04155505740717559],
   [0.05563007969699366, -0.20397695888897652, 1.0569715142428786]
 ];
-var Lt = new T({
+var jt = new T({
   id: "srgb-linear",
   name: "Linear sRGB",
   white: "D65",
-  toXYZ_M: El,
+  toXYZ_M: Al,
   fromXYZ_M: P
-}), Sr = {
+}), _r = {
   aliceblue: [240 / 255, 248 / 255, 1],
   antiquewhite: [250 / 255, 235 / 255, 215 / 255],
   aqua: [0, 1, 1],
@@ -1762,11 +1762,11 @@ var Lt = new T({
   yellow: [1, 1, 0],
   yellowgreen: [154 / 255, 205 / 255, 50 / 255]
 };
-let _r = Array(3).fill("<percentage> | <number>[0, 255]"), Er = Array(3).fill("<number>[0, 255]");
+let Er = Array(3).fill("<percentage> | <number>[0, 255]"), Ar = Array(3).fill("<number>[0, 255]");
 var Ao = new T({
   id: "srgb",
   name: "sRGB",
-  base: Lt,
+  base: jt,
   fromBase: (r) => r.map((o) => {
     let e = o < 0 ? -1 : 1, t = o * e;
     return t > 31308e-7 ? e * (1.055 * t ** (1 / 2.4) - 0.055) : 12.92 * o;
@@ -1777,26 +1777,26 @@ var Ao = new T({
   }),
   formats: {
     rgb: {
-      coords: _r
+      coords: Er
     },
     rgb_number: {
       name: "rgb",
       commas: !0,
-      coords: Er,
+      coords: Ar,
       noAlpha: !0
     },
     color: {
       /* use defaults */
     },
     rgba: {
-      coords: _r,
+      coords: Er,
       commas: !0,
       lastAlpha: !0
     },
     rgba_number: {
       name: "rgba",
       commas: !0,
-      coords: Er
+      coords: Ar
     },
     hex: {
       type: "custom",
@@ -1828,108 +1828,108 @@ var Ao = new T({
       parse(r) {
         r = r.toLowerCase();
         let o = { spaceId: "srgb", coords: null, alpha: 1 };
-        if (r === "transparent" ? (o.coords = Sr.black, o.alpha = 0) : o.coords = Sr[r], o.coords)
+        if (r === "transparent" ? (o.coords = _r.black, o.alpha = 0) : o.coords = _r[r], o.coords)
           return o;
       }
     }
   }
-}), jt = new T({
+}), Dt = new T({
   id: "p3",
   cssId: "display-p3",
   name: "P3",
-  base: Ft,
+  base: Lt,
   // Gamma encoding/decoding is the same as sRGB
   fromBase: Ao.fromBase,
   toBase: Ao.toBase
 });
 G.display_space = Ao;
-let Ar;
+let Rr;
 if (typeof CSS < "u" && CSS.supports)
-  for (let r of [Y, Ot, jt]) {
-    let o = r.getMinCoords(), e = Io({ space: r, coords: o, alpha: 1 });
+  for (let r of [Y, Ft, Dt]) {
+    let o = r.getMinCoords(), e = Oo({ space: r, coords: o, alpha: 1 });
     if (CSS.supports("color", e)) {
       G.display_space = r;
       break;
     }
   }
-function Al(r, { space: o = G.display_space, ...e } = {}) {
-  let t = Io(r, e);
+function Rl(r, { space: o = G.display_space, ...e } = {}) {
+  let t = Oo(r, e);
   if (typeof CSS > "u" || CSS.supports("color", t) || !G.display_space)
     t = new String(t), t.color = r;
   else {
     let a = r;
-    if ((r.coords.some(mo) || mo(r.alpha)) && !(Ar ?? (Ar = CSS.supports("color", "hsl(none 50% 50%)"))) && (a = _o(r), a.coords = a.coords.map(R), a.alpha = R(a.alpha), t = Io(a, e), CSS.supports("color", t)))
+    if ((r.coords.some(mo) || mo(r.alpha)) && !(Rr ?? (Rr = CSS.supports("color", "hsl(none 50% 50%)"))) && (a = _o(r), a.coords = a.coords.map(R), a.alpha = R(a.alpha), t = Oo(a, e), CSS.supports("color", t)))
       return t = new String(t), t.color = a, t;
-    a = M(a, o), t = new String(Io(a, e)), t.color = a;
+    a = M(a, o), t = new String(Oo(a, e)), t.color = a;
   }
   return t;
 }
-function Rl(r, o) {
+function Pl(r, o) {
   return r = v(r), o = v(o), r.space === o.space && r.alpha === o.alpha && r.coords.every((e, t) => e === o.coords[t]);
 }
 function fo(r) {
   return X(r, [B, "y"]);
 }
-function Dt(r, o) {
+function Tt(r, o) {
   no(r, [B, "y"], o);
 }
-function Pl(r) {
+function Hl(r) {
   Object.defineProperty(r.prototype, "luminance", {
     get() {
       return fo(this);
     },
     set(o) {
-      Dt(this, o);
+      Tt(this, o);
     }
   });
 }
-var Hl = /* @__PURE__ */ Object.freeze({
+var Nl = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   getLuminance: fo,
-  register: Pl,
-  setLuminance: Dt
+  register: Hl,
+  setLuminance: Tt
 });
-function Nl(r, o) {
+function Bl(r, o) {
   r = v(r), o = v(o);
   let e = Math.max(fo(r), 0), t = Math.max(fo(o), 0);
   return t > e && ([e, t] = [t, e]), (e + 0.05) / (t + 0.05);
 }
-const Bl = 0.56, Il = 0.57, Ol = 0.62, Fl = 0.65, Rr = 0.022, Ll = 1.414, jl = 0.1, Dl = 5e-4, Tl = 1.14, Pr = 0.027, ql = 1.14;
-function Hr(r) {
-  return r >= Rr ? r : r + (Rr - r) ** Ll;
+const Ol = 0.56, Il = 0.57, Fl = 0.62, Ll = 0.65, Pr = 0.022, jl = 1.414, Dl = 0.1, Tl = 5e-4, ql = 1.14, Hr = 0.027, Wl = 1.14;
+function Nr(r) {
+  return r >= Pr ? r : r + (Pr - r) ** jl;
 }
 function ko(r) {
   let o = r < 0 ? -1 : 1, e = Math.abs(r);
   return o * Math.pow(e, 2.4);
 }
-function Wl(r, o) {
+function Ul(r, o) {
   o = v(o), r = v(r);
   let e, t, a, l, s, n;
   o = M(o, "srgb"), [l, s, n] = o.coords;
   let i = ko(l) * 0.2126729 + ko(s) * 0.7151522 + ko(n) * 0.072175;
   r = M(r, "srgb"), [l, s, n] = r.coords;
-  let c = ko(l) * 0.2126729 + ko(s) * 0.7151522 + ko(n) * 0.072175, u = Hr(i), h = Hr(c), d = h > u;
-  return Math.abs(h - u) < Dl ? t = 0 : d ? (e = h ** Bl - u ** Il, t = e * Tl) : (e = h ** Fl - u ** Ol, t = e * ql), Math.abs(t) < jl ? a = 0 : t > 0 ? a = t - Pr : a = t + Pr, a * 100;
+  let c = ko(l) * 0.2126729 + ko(s) * 0.7151522 + ko(n) * 0.072175, u = Nr(i), h = Nr(c), d = h > u;
+  return Math.abs(h - u) < Tl ? t = 0 : d ? (e = h ** Ol - u ** Il, t = e * ql) : (e = h ** Ll - u ** Fl, t = e * Wl), Math.abs(t) < Dl ? a = 0 : t > 0 ? a = t - Hr : a = t + Hr, a * 100;
 }
-function Ul(r, o) {
+function Xl(r, o) {
   r = v(r), o = v(o);
   let e = Math.max(fo(r), 0), t = Math.max(fo(o), 0);
   t > e && ([e, t] = [t, e]);
   let a = e + t;
   return a === 0 ? 0 : (e - t) / a;
 }
-const Xl = 5e4;
-function Yl(r, o) {
+const Yl = 5e4;
+function Gl(r, o) {
   r = v(r), o = v(o);
   let e = Math.max(fo(r), 0), t = Math.max(fo(o), 0);
-  return t > e && ([e, t] = [t, e]), t === 0 ? Xl : (e - t) / t;
+  return t > e && ([e, t] = [t, e]), t === 0 ? Yl : (e - t) / t;
 }
-function Gl(r, o) {
+function Zl(r, o) {
   r = v(r), o = v(o);
   let e = X(r, [Y, "l"]), t = X(o, [Y, "l"]);
   return Math.abs(e - t);
 }
-const Zl = 216 / 24389, Nr = 24 / 116, Ko = 24389 / 27;
+const Kl = 216 / 24389, Br = 24 / 116, Ko = 24389 / 27;
 let ze = j.D65;
 var Be = new g({
   id: "lab-d65",
@@ -1953,7 +1953,7 @@ var Be = new g({
   // Convert D65-adapted XYZ to Lab
   //  CIE 15.3:2004 section 8.2.1.1
   fromBase(r) {
-    let o = r.map((e, t) => e / ze[t]).map((e) => e > Zl ? Math.cbrt(e) : (Ko * e + 16) / 116);
+    let o = r.map((e, t) => e / ze[t]).map((e) => e > Kl ? Math.cbrt(e) : (Ko * e + 16) / 116);
     return [
       116 * o[1] - 16,
       // L
@@ -1969,9 +1969,9 @@ var Be = new g({
   toBase(r) {
     let o = [];
     return o[1] = (r[0] + 16) / 116, o[0] = r[1] / 500 + o[1], o[2] = o[1] - r[2] / 200, [
-      o[0] > Nr ? Math.pow(o[0], 3) : (116 * o[0] - 16) / Ko,
+      o[0] > Br ? Math.pow(o[0], 3) : (116 * o[0] - 16) / Ko,
       r[0] > 8 ? Math.pow((r[0] + 16) / 116, 3) : r[0] / Ko,
-      o[2] > Nr ? Math.pow(o[2], 3) : (116 * o[2] - 16) / Ko
+      o[2] > Br ? Math.pow(o[2], 3) : (116 * o[2] - 16) / Ko
     ].map((e, t) => e * ze[t]);
   },
   formats: {
@@ -1981,21 +1981,21 @@ var Be = new g({
   }
 });
 const ve = Math.pow(5, 0.5) * 0.5 + 0.5;
-function Kl(r, o) {
+function Vl(r, o) {
   r = v(r), o = v(o);
   let e = X(r, [Be, "l"]), t = X(o, [Be, "l"]), a = Math.abs(Math.pow(e, ve) - Math.pow(t, ve)), l = Math.pow(a, 1 / ve) * Math.SQRT2 - 40;
   return l < 7.5 ? 0 : l;
 }
 var te = /* @__PURE__ */ Object.freeze({
   __proto__: null,
-  contrastAPCA: Wl,
-  contrastDeltaPhi: Kl,
-  contrastLstar: Gl,
-  contrastMichelson: Ul,
-  contrastWCAG21: Nl,
-  contrastWeber: Yl
+  contrastAPCA: Ul,
+  contrastDeltaPhi: Vl,
+  contrastLstar: Zl,
+  contrastMichelson: Xl,
+  contrastWCAG21: Bl,
+  contrastWeber: Gl
 });
-function Vl(r, o, e = {}) {
+function Jl(r, o, e = {}) {
   Do(e) && (e = { algorithm: e });
   let { algorithm: t, ...a } = e;
   if (!t) {
@@ -2012,26 +2012,26 @@ function de(r) {
   let [o, e, t] = To(r, B), a = o + 15 * e + 3 * t;
   return [4 * o / a, 9 * e / a];
 }
-function Tt(r) {
+function qt(r) {
   let [o, e, t] = To(r, B), a = o + e + t;
   return [o / a, e / a];
 }
-function Jl(r) {
+function Ql(r) {
   Object.defineProperty(r.prototype, "uv", {
     get() {
       return de(this);
     }
   }), Object.defineProperty(r.prototype, "xy", {
     get() {
-      return Tt(this);
+      return qt(this);
     }
   });
 }
-var Ql = /* @__PURE__ */ Object.freeze({
+var os = /* @__PURE__ */ Object.freeze({
   __proto__: null,
-  register: Jl,
+  register: Ql,
   uv: de,
-  xy: Tt
+  xy: qt
 });
 function Bo(r, o, e = {}) {
   Do(e) && (e = { method: e });
@@ -2041,23 +2041,23 @@ function Bo(r, o, e = {}) {
       return Eo[l](r, o, a);
   throw new TypeError(`Unknown deltaE method: ${t}`);
 }
-function os(r, o = 0.25) {
+function es(r, o = 0.25) {
   let e = [g.get("oklch", "lch"), "l"];
   return no(r, e, (t) => t * (1 + o));
 }
-function es(r, o = 0.25) {
+function rs(r, o = 0.25) {
   let e = [g.get("oklch", "lch"), "l"];
   return no(r, e, (t) => t * (1 - o));
 }
-var rs = /* @__PURE__ */ Object.freeze({
+var ts = /* @__PURE__ */ Object.freeze({
   __proto__: null,
-  darken: es,
-  lighten: os
+  darken: rs,
+  lighten: es
 });
-function qt(r, o, e = 0.5, t = {}) {
+function Wt(r, o, e = 0.5, t = {}) {
   return [r, o] = [v(r), v(o)], ho(e) === "object" && ([e, t] = [0.5, e]), qo(r, o, t)(e);
 }
-function Wt(r, o, e = {}) {
+function Ut(r, o, e = {}) {
   let t;
   Ue(r) && ([t, e] = [r, o], [r, o] = t.rangeArgs.colors);
   let {
@@ -2111,8 +2111,8 @@ function qo(r, o, e = {}) {
     i = l ? l(i) : i;
     let c = r.coords.map((d, f) => {
       let b = o.coords[f];
-      return Oo(d, b, i);
-    }), u = Oo(r.alpha, o.alpha, i), h = { space: t, coords: c, alpha: u };
+      return Io(d, b, i);
+    }), u = Io(r.alpha, o.alpha, i), h = { space: t, coords: c, alpha: u };
     return s && (h.coords = h.coords.map((d) => d / u)), a !== t && (h = M(h, a)), h;
   }, {
     rangeArgs: n
@@ -2122,17 +2122,17 @@ function Ue(r) {
   return ho(r) === "function" && !!r.rangeArgs;
 }
 G.interpolationSpace = "lab";
-function ts(r) {
-  r.defineFunction("mix", qt, { returns: "color" }), r.defineFunction("range", qo, { returns: "function<color>" }), r.defineFunction("steps", Wt, { returns: "array<color>" });
+function as(r) {
+  r.defineFunction("mix", Wt, { returns: "color" }), r.defineFunction("range", qo, { returns: "function<color>" }), r.defineFunction("steps", Ut, { returns: "array<color>" });
 }
-var as = /* @__PURE__ */ Object.freeze({
+var ls = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   isRange: Ue,
-  mix: qt,
+  mix: Wt,
   range: qo,
-  register: ts,
-  steps: Wt
-}), Ut = new g({
+  register: as,
+  steps: Ut
+}), Xt = new g({
   id: "hsl",
   name: "HSL",
   coords: {
@@ -2189,7 +2189,7 @@ var as = /* @__PURE__ */ Object.freeze({
       lastAlpha: !0
     }
   }
-}), Xt = new g({
+}), Yt = new g({
   id: "hsv",
   name: "HSV",
   coords: {
@@ -2207,7 +2207,7 @@ var as = /* @__PURE__ */ Object.freeze({
       name: "Value"
     }
   },
-  base: Ut,
+  base: Xt,
   // https://en.wikipedia.org/wiki/HSL_and_HSV#Interconversion
   fromBase(r) {
     let [o, e, t] = r;
@@ -2239,7 +2239,7 @@ var as = /* @__PURE__ */ Object.freeze({
       coords: ["<number> | <angle>", "<percentage> | <number>", "<percentage> | <number>"]
     }
   }
-}), ls = new g({
+}), ss = new g({
   id: "hwb",
   name: "HWB",
   coords: {
@@ -2257,7 +2257,7 @@ var as = /* @__PURE__ */ Object.freeze({
       name: "Blackness"
     }
   },
-  base: Xt,
+  base: Yt,
   fromBase(r) {
     let [o, e, t] = r;
     return [o, t * (100 - e) / 100, 100 - t];
@@ -2279,61 +2279,61 @@ var as = /* @__PURE__ */ Object.freeze({
     }
   }
 });
-const ss = [
+const ns = [
   [0.5766690429101305, 0.1855582379065463, 0.1882286462349947],
   [0.29734497525053605, 0.6273635662554661, 0.07529145849399788],
   [0.02703136138641234, 0.07068885253582723, 0.9913375368376388]
-], ns = [
+], is = [
   [2.0415879038107465, -0.5650069742788596, -0.34473135077832956],
   [-0.9692436362808795, 1.8759675015077202, 0.04155505740717557],
   [0.013444280632031142, -0.11836239223101838, 1.0151749943912054]
 ];
-var Yt = new T({
+var Gt = new T({
   id: "a98rgb-linear",
   cssId: "--a98-rgb-linear",
   name: "Linear Adobe® 98 RGB compatible",
   white: "D65",
-  toXYZ_M: ss,
-  fromXYZ_M: ns
-}), is = new T({
+  toXYZ_M: ns,
+  fromXYZ_M: is
+}), cs = new T({
   id: "a98rgb",
   cssId: "a98-rgb",
   name: "Adobe® 98 RGB compatible",
-  base: Yt,
+  base: Gt,
   toBase: (r) => r.map((o) => Math.pow(Math.abs(o), 563 / 256) * Math.sign(o)),
   fromBase: (r) => r.map((o) => Math.pow(Math.abs(o), 256 / 563) * Math.sign(o))
 });
-const cs = [
+const us = [
   [0.7977666449006423, 0.13518129740053308, 0.0313477341283922],
   [0.2880748288194013, 0.711835234241873, 8993693872564e-17],
   [0, 0, 0.8251046025104602]
-], us = [
+], hs = [
   [1.3457868816471583, -0.25557208737979464, -0.05110186497554526],
   [-0.5446307051249019, 1.5082477428451468, 0.02052744743642139],
   [0, 0, 1.2119675456389452]
 ];
-var Gt = new T({
+var Zt = new T({
   id: "prophoto-linear",
   cssId: "--prophoto-rgb-linear",
   name: "Linear ProPhoto",
   white: "D50",
   base: Te,
-  toXYZ_M: cs,
-  fromXYZ_M: us
+  toXYZ_M: us,
+  fromXYZ_M: hs
 });
-const hs = 1 / 512, ds = 16 / 512;
-var ms = new T({
+const ds = 1 / 512, ms = 16 / 512;
+var ps = new T({
   id: "prophoto",
   cssId: "prophoto-rgb",
   name: "ProPhoto",
-  base: Gt,
+  base: Zt,
   toBase(r) {
-    return r.map((o) => o < ds ? o / 16 : o ** 1.8);
+    return r.map((o) => o < ms ? o / 16 : o ** 1.8);
   },
   fromBase(r) {
-    return r.map((o) => o >= hs ? o ** (1 / 1.8) : 16 * o);
+    return r.map((o) => o >= ds ? o ** (1 / 1.8) : 16 * o);
   }
-}), ps = new g({
+}), gs = new g({
   id: "oklch",
   name: "Oklch",
   coords: {
@@ -2376,9 +2376,9 @@ var ms = new T({
     }
   }
 });
-let Zt = j.D65;
-const gs = 216 / 24389, Br = 24389 / 27, [Ir, Or] = de({ space: B, coords: Zt });
-var Kt = new g({
+let Kt = j.D65;
+const fs = 216 / 24389, Or = 24389 / 27, [Ir, Fr] = de({ space: B, coords: Kt });
+var Vt = new g({
   id: "luv",
   name: "Luv",
   coords: {
@@ -2394,7 +2394,7 @@ var Kt = new g({
       refRange: [-215, 215]
     }
   },
-  white: Zt,
+  white: Kt,
   base: B,
   // Convert D65-adapted XYZ to Luv
   // https://en.wikipedia.org/wiki/CIELUV#The_forward_transformation
@@ -2402,11 +2402,11 @@ var Kt = new g({
     let o = [R(r[0]), R(r[1]), R(r[2])], e = o[1], [t, a] = de({ space: B, coords: o });
     if (!Number.isFinite(t) || !Number.isFinite(a))
       return [0, 0, 0];
-    let l = e <= gs ? Br * e : 116 * Math.cbrt(e) - 16;
+    let l = e <= fs ? Or * e : 116 * Math.cbrt(e) - 16;
     return [
       l,
       13 * l * (t - Ir),
-      13 * l * (a - Or)
+      13 * l * (a - Fr)
     ];
   },
   // Convert Luv to D65-adapted XYZ
@@ -2416,7 +2416,7 @@ var Kt = new g({
     if (o === 0 || mo(o))
       return [0, 0, 0];
     e = R(e), t = R(t);
-    let a = e / (13 * o) + Ir, l = t / (13 * o) + Or, s = o <= 8 ? o / Br : Math.pow((o + 16) / 116, 3);
+    let a = e / (13 * o) + Ir, l = t / (13 * o) + Fr, s = o <= 8 ? o / Or : Math.pow((o + 16) / 116, 3);
     return [
       s * (9 * a / (4 * l)),
       s,
@@ -2447,7 +2447,7 @@ var Kt = new g({
       name: "Hue"
     }
   },
-  base: Kt,
+  base: Vt,
   fromBase(r) {
     let [o, e, t] = r, a;
     const l = 0.02;
@@ -2478,13 +2478,13 @@ var Kt = new g({
     }
   }
 });
-const fs = 216 / 24389, bs = 24389 / 27, Fr = P[0][0], Lr = P[0][1], we = P[0][2], jr = P[1][0], Dr = P[1][1], ye = P[1][2], Tr = P[2][0], qr = P[2][1], xe = P[2][2];
+const bs = 216 / 24389, zs = 24389 / 27, Lr = P[0][0], jr = P[0][1], we = P[0][2], Dr = P[1][0], Tr = P[1][1], ye = P[1][2], qr = P[2][0], Wr = P[2][1], xe = P[2][2];
 function Mo(r, o, e) {
   const t = o / (Math.sin(e) - r * Math.cos(e));
   return t < 0 ? 1 / 0 : t;
 }
 function ne(r) {
-  const o = Math.pow(r + 16, 3) / 1560896, e = o > fs ? o : r / bs, t = e * (284517 * Fr - 94839 * we), a = e * (838422 * we + 769860 * Lr + 731718 * Fr), l = e * (632260 * we - 126452 * Lr), s = e * (284517 * jr - 94839 * ye), n = e * (838422 * ye + 769860 * Dr + 731718 * jr), i = e * (632260 * ye - 126452 * Dr), c = e * (284517 * Tr - 94839 * xe), u = e * (838422 * xe + 769860 * qr + 731718 * Tr), h = e * (632260 * xe - 126452 * qr);
+  const o = Math.pow(r + 16, 3) / 1560896, e = o > bs ? o : r / zs, t = e * (284517 * Lr - 94839 * we), a = e * (838422 * we + 769860 * jr + 731718 * Lr), l = e * (632260 * we - 126452 * jr), s = e * (284517 * Dr - 94839 * ye), n = e * (838422 * ye + 769860 * Tr + 731718 * Dr), i = e * (632260 * ye - 126452 * Tr), c = e * (284517 * qr - 94839 * xe), u = e * (838422 * xe + 769860 * Wr + 731718 * qr), h = e * (632260 * xe - 126452 * Wr);
   return {
     r0s: t / l,
     r0i: a * r / l,
@@ -2500,11 +2500,11 @@ function ne(r) {
     b1i: (u - 769860) * r / (h + 126452)
   };
 }
-function Wr(r, o) {
+function Ur(r, o) {
   const e = o / 360 * Math.PI * 2, t = Mo(r.r0s, r.r0i, e), a = Mo(r.r1s, r.r1i, e), l = Mo(r.g0s, r.g0i, e), s = Mo(r.g1s, r.g1i, e), n = Mo(r.b0s, r.b0i, e), i = Mo(r.b1s, r.b1i, e);
   return Math.min(t, a, l, s, n, i);
 }
-var zs = new g({
+var vs = new g({
   id: "hsluv",
   name: "HSLuv",
   coords: {
@@ -2532,7 +2532,7 @@ var zs = new g({
     else if (o < 1e-8)
       a = 0, o = 0;
     else {
-      let l = ne(o), s = Wr(l, t);
+      let l = ne(o), s = Ur(l, t);
       a = e / s * 100;
     }
     return [t, a, o];
@@ -2546,7 +2546,7 @@ var zs = new g({
       t = 0, a = 0;
     else {
       let l = ne(t);
-      a = Wr(l, o) / 100 * e;
+      a = Ur(l, o) / 100 * e;
     }
     return [t, a, o];
   },
@@ -2569,11 +2569,11 @@ P[2][2];
 function $o(r, o) {
   return Math.abs(o) / Math.sqrt(Math.pow(r, 2) + 1);
 }
-function Ur(r) {
+function Xr(r) {
   let o = $o(r.r0s, r.r0i), e = $o(r.r1s, r.r1i), t = $o(r.g0s, r.g0i), a = $o(r.g1s, r.g1i), l = $o(r.b0s, r.b0i), s = $o(r.b1s, r.b1i);
   return Math.min(o, e, t, a, l, s);
 }
-var vs = new g({
+var ws = new g({
   id: "hpluv",
   name: "HPLuv",
   coords: {
@@ -2601,7 +2601,7 @@ var vs = new g({
     else if (o < 1e-8)
       a = 0, o = 0;
     else {
-      let l = ne(o), s = Ur(l);
+      let l = ne(o), s = Xr(l);
       a = e / s * 100;
     }
     return [t, a, o];
@@ -2615,7 +2615,7 @@ var vs = new g({
       t = 0, a = 0;
     else {
       let l = ne(t);
-      a = Ur(l) / 100 * e;
+      a = Xr(l) / 100 * e;
     }
     return [t, a, o];
   },
@@ -2626,26 +2626,26 @@ var vs = new g({
     }
   }
 });
-const Xr = 203, Yr = 2610 / 2 ** 14, ws = 2 ** 14 / 2610, ys = 2523 / 2 ** 5, Gr = 2 ** 5 / 2523, Zr = 3424 / 2 ** 12, Kr = 2413 / 2 ** 7, Vr = 2392 / 2 ** 7;
-var xs = new T({
+const Yr = 203, Gr = 2610 / 2 ** 14, ys = 2 ** 14 / 2610, xs = 2523 / 2 ** 5, Zr = 2 ** 5 / 2523, Kr = 3424 / 2 ** 12, Vr = 2413 / 2 ** 7, Jr = 2392 / 2 ** 7;
+var Cs = new T({
   id: "rec2100pq",
   cssId: "rec2100-pq",
   name: "REC.2100-PQ",
   base: he,
   toBase(r) {
     return r.map(function(o) {
-      return (Math.max(o ** Gr - Zr, 0) / (Kr - Vr * o ** Gr)) ** ws * 1e4 / Xr;
+      return (Math.max(o ** Zr - Kr, 0) / (Vr - Jr * o ** Zr)) ** ys * 1e4 / Yr;
     });
   },
   fromBase(r) {
     return r.map(function(o) {
-      let e = Math.max(o * Xr / 1e4, 0), t = Zr + Kr * e ** Yr, a = 1 + Vr * e ** Yr;
-      return (t / a) ** ys;
+      let e = Math.max(o * Yr / 1e4, 0), t = Kr + Vr * e ** Gr, a = 1 + Jr * e ** Gr;
+      return (t / a) ** xs;
     });
   }
 });
-const Jr = 0.17883277, Qr = 0.28466892, ot = 0.55991073, Ce = 3.7743;
-var Cs = new T({
+const Qr = 0.17883277, ot = 0.28466892, et = 0.55991073, Ce = 3.7743;
+var ks = new T({
   id: "rec2100hlg",
   cssId: "rec2100-hlg",
   name: "REC.2100-HLG",
@@ -2653,27 +2653,27 @@ var Cs = new T({
   base: he,
   toBase(r) {
     return r.map(function(o) {
-      return o <= 0.5 ? o ** 2 / 3 * Ce : (Math.exp((o - ot) / Jr) + Qr) / 12 * Ce;
+      return o <= 0.5 ? o ** 2 / 3 * Ce : (Math.exp((o - et) / Qr) + ot) / 12 * Ce;
     });
   },
   fromBase(r) {
     return r.map(function(o) {
-      return o /= Ce, o <= 1 / 12 ? Math.sqrt(3 * o) : Jr * Math.log(12 * o - Qr) + ot;
+      return o /= Ce, o <= 1 / 12 ? Math.sqrt(3 * o) : Qr * Math.log(12 * o - ot) + et;
     });
   }
 });
-const Vt = {};
+const Jt = {};
 po.add("chromatic-adaptation-start", (r) => {
-  r.options.method && (r.M = Jt(r.W1, r.W2, r.options.method));
+  r.options.method && (r.M = Qt(r.W1, r.W2, r.options.method));
 });
 po.add("chromatic-adaptation-end", (r) => {
-  r.M || (r.M = Jt(r.W1, r.W2, r.options.method));
+  r.M || (r.M = Qt(r.W1, r.W2, r.options.method));
 });
 function me({ id: r, toCone_M: o, fromCone_M: e }) {
-  Vt[r] = arguments[0];
+  Jt[r] = arguments[0];
 }
-function Jt(r, o, e = "Bradford") {
-  let t = Vt[e], [a, l, s] = $(t.toCone_M, r), [n, i, c] = $(t.toCone_M, o), u = [
+function Qt(r, o, e = "Bradford") {
+  let t = Jt[e], [a, l, s] = $(t.toCone_M, r), [n, i, c] = $(t.toCone_M, o), u = [
     [n / a, 0, 0],
     [0, i / l, 0],
     [0, 0, c / s]
@@ -2757,16 +2757,16 @@ Object.assign(j, {
   F11: [1.00962, 1, 0.6435]
 });
 j.ACES = [0.32168 / 0.33767, 1, (1 - 0.32168 - 0.33767) / 0.33767];
-const ks = [
+const Ms = [
   [0.6624541811085053, 0.13400420645643313, 0.1561876870049078],
   [0.27222871678091454, 0.6740817658111484, 0.05368951740793705],
   [-0.005574649490394108, 0.004060733528982826, 1.0103391003129971]
-], Ms = [
+], $s = [
   [1.6410233796943257, -0.32480329418479, -0.23642469523761225],
   [-0.6636628587229829, 1.6153315916573379, 0.016756347685530137],
   [0.011721894328375376, -0.008284441996237409, 0.9883948585390215]
 ];
-var Qt = new T({
+var oa = new T({
   id: "acescg",
   cssId: "--acescg",
   name: "ACEScg",
@@ -2789,11 +2789,11 @@ var Qt = new T({
   },
   referred: "scene",
   white: j.ACES,
-  toXYZ_M: ks,
-  fromXYZ_M: Ms
+  toXYZ_M: Ms,
+  fromXYZ_M: $s
 });
 const Vo = 2 ** -16, ke = -0.35828683, Jo = (Math.log2(65504) + 9.72) / 17.52;
-var $s = new T({
+var Ss = new T({
   id: "acescc",
   cssId: "--acescc",
   name: "ACEScc",
@@ -2819,7 +2819,7 @@ var $s = new T({
     }
   },
   referred: "scene",
-  base: Qt,
+  base: oa,
   // from section 4.4.2 Decoding Function
   toBase(r) {
     const o = -0.3013698630136986;
@@ -2835,42 +2835,42 @@ var $s = new T({
   }
   // encoded media white (rgb 1,1,1) => linear  [ 222.861, 222.861, 222.861 ]
   // encoded media black (rgb 0,0,0) => linear [ 0.0011857, 0.0011857, 0.0011857]
-}), et = /* @__PURE__ */ Object.freeze({
+}), rt = /* @__PURE__ */ Object.freeze({
   __proto__: null,
-  A98RGB: is,
-  A98RGB_Linear: Yt,
-  ACEScc: $s,
-  ACEScg: Qt,
-  CAM16_JMh: gl,
+  A98RGB: cs,
+  A98RGB_Linear: Gt,
+  ACEScc: Ss,
+  ACEScg: oa,
+  CAM16_JMh: fl,
   HCT: Lo,
-  HPLuv: vs,
-  HSL: Ut,
-  HSLuv: zs,
-  HSV: Xt,
-  HWB: ls,
+  HPLuv: ws,
+  HSL: Xt,
+  HSLuv: vs,
+  HSV: Yt,
+  HWB: ss,
   ICTCP: Pe,
   JzCzHz: Re,
-  Jzazbz: St,
+  Jzazbz: _t,
   LCH: Fo,
   LCHuv: Xe,
   Lab: Y,
   Lab_D65: Be,
-  Luv: Kt,
-  OKLCH: ps,
+  Luv: Vt,
+  OKLCH: gs,
   OKLab: So,
-  P3: jt,
-  P3_Linear: Ft,
-  ProPhoto: ms,
-  ProPhoto_Linear: Gt,
-  REC_2020: Ot,
+  P3: Dt,
+  P3_Linear: Lt,
+  ProPhoto: ps,
+  ProPhoto_Linear: Zt,
+  REC_2020: Ft,
   REC_2020_Linear: he,
-  REC_2100_HLG: Cs,
-  REC_2100_PQ: xs,
+  REC_2100_HLG: ks,
+  REC_2100_PQ: Cs,
   XYZ_ABS_D65: qe,
   XYZ_D50: Te,
   XYZ_D65: B,
   sRGB: Ao,
-  sRGB_Linear: Lt
+  sRGB_Linear: jt
 });
 let _ = class D {
   /**
@@ -2915,7 +2915,7 @@ let _ = class D {
     };
   }
   display(...o) {
-    let e = Al(this, ...o);
+    let e = Rl(this, ...o);
     return e.color = new D(e.color), e;
   }
   /**
@@ -2961,33 +2961,33 @@ _.defineFunctions({
   set: no,
   setAll: De,
   to: M,
-  equals: Rl,
+  equals: Pl,
   inGamut: yo,
   toGamut: go,
-  distance: $t,
-  toString: Io
+  distance: St,
+  toString: Oo
 });
 Object.assign(_, {
-  util: Aa,
+  util: Ra,
   hooks: po,
   WHITES: j,
   Space: g,
   spaces: g.registry,
-  parse: kt,
+  parse: Mt,
   // Global defaults one may want to configure
   defaults: G
 });
-for (let r of Object.keys(et))
-  g.register(et[r]);
+for (let r of Object.keys(rt))
+  g.register(rt[r]);
 for (let r in g.registry)
-  Ie(r, g.registry[r]);
+  Oe(r, g.registry[r]);
 po.add("colorspace-init-end", (r) => {
   var o;
-  Ie(r.id, r), (o = r.aliases) == null || o.forEach((e) => {
-    Ie(e, r);
+  Oe(r.id, r), (o = r.aliases) == null || o.forEach((e) => {
+    Oe(e, r);
   });
 });
-function Ie(r, o) {
+function Oe(r, o) {
   let e = r.replace(/-/g, "_");
   Object.defineProperty(_.prototype, e, {
     // Convert coords to coords in another colorspace and return them
@@ -3034,13 +3034,13 @@ function Ie(r, o) {
 _.extend(Eo);
 _.extend({ deltaE: Bo });
 Object.assign(_, { deltaEMethods: Eo });
-_.extend(rs);
-_.extend({ contrast: Vl });
-_.extend(Ql);
-_.extend(Hl);
-_.extend(as);
+_.extend(ts);
+_.extend({ contrast: Jl });
+_.extend(os);
+_.extend(Nl);
+_.extend(ls);
 _.extend(te);
-class oa {
+class ea {
   /**
    * Creates an instance of ColorController.
    *
@@ -3080,31 +3080,63 @@ class oa {
       isValid: !1,
       alpha: 1
     }, n = [
+      // With commas
       /rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d*\.?\d+)\s*\)/i,
+      // rgba(r, g, b, a)
       /rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/i,
+      // rgb(r, g, b)
+      // With spaces
       /^rgba\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(0|0?\.\d+|1)\s*$/i,
+      // rgba r g b a
       /^rgb\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*$/i,
+      // rgb r g b
+      // Spaces inside parentheses
       /^rgba\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(\d*\.?\d+)\s*\)$/i,
+      // rgba(r g b a)
       /^rgb\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*\)$/i,
+      // rgb(r g b)
+      // Percentage values
       /rgb\(\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*\)/i,
+      // rgb(r%, g%, b%)
       /rgba\(\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(\d*\.?\d+)\s*\)/i
+      // rgba(r%, g%, b%, a)
     ], i = [
+      // With commas
       /hsla\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,
+      // hsla(h, s, l, a)
       /hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,
+      // hsl(h, s, l)
+      // With spaces
       /^hsla\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,
+      // hsla h s l a
       /^hsl\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,
+      // hsl h s l
+      // Spaces inside parentheses
       /^hsla\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,
+      // hsla(h s l a)
       /^hsl\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i
+      // hsl(h s l)
     ], c = [
+      // With commas
       /hsva\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,
+      // hsva(h, s, v, a)
       /hsv\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,
+      // hsv(h, s, v)
+      // With spaces
       /^hsva\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,
+      // hsva h s v a
       /^hsv\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,
+      // hsv h s v
+      // Spaces inside parentheses
       /^hsva\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,
+      // hsva(h s v a)
       /^hsv\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i
+      // hsv(h s v)
     ], u = [
-      /^#([A-Fa-f0-9]{6})(?:\s*([01](?:\.\d+)?))?$/,
-      /^#([A-Fa-f0-9]{3})(?:\s*([01](?:\.\d+)?))?$/
+      /^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})?$/,
+      // 6-digit hex with optional hex alpha
+      /^#([A-Fa-f0-9]{3})([A-Fa-f0-9]{1})?$/
+      // 3-digit hex with optional hex alpha
     ], h = (e = n.find((p) => p.test(o))) == null ? void 0 : e.exec(o), d = (t = i.find((p) => p.test(o))) == null ? void 0 : t.exec(o), f = (a = c.find((p) => p.test(o))) == null ? void 0 : a.exec(o), b = (l = u.find((p) => p.test(o))) == null ? void 0 : l.exec(o);
     if (h) {
       const [, p, z, w, y] = h.filter(
@@ -3125,7 +3157,7 @@ class oa {
       const [, p, z] = b, w = (S) => (S.length === 1 && (S = S + S), Number.parseInt(S, 16) / 255);
       let y, C, x;
       p.length === 3 ? (y = w(p.slice(0, 1)), C = w(p.slice(1, 2)), x = w(p.slice(2, 3))) : (y = w(p.slice(0, 2)), C = w(p.slice(2, 4)), x = w(p.slice(4, 6)));
-      const k = z ? Number(z) : 1;
+      const k = z ? w(z) : 1;
       s.spaceId = "srgb", s.coords = [y, C, x], s.alpha = k, s.isValid = y >= 0 && y <= 1 && C >= 0 && C <= 1 && x >= 0 && x <= 1 && k >= 0 && k <= 1;
     }
     return s;
@@ -3390,25 +3422,25 @@ class oa {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-const Ss = () => {
+const _s = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const r = document.createElement("style");
     r.setAttribute("data-luzmo-vars", ""), r.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
   }
 };
-Ss();
-const _s = "@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 Es = Object.defineProperty, As = Object.getOwnPropertyDescriptor, L = (r, o, e, t) => {
-  for (var a = t > 1 ? void 0 : t ? As(o, e) : o, l = r.length - 1, s; l >= 0; l--)
+_s();
+const Es = "@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 As = Object.defineProperty, Rs = Object.getOwnPropertyDescriptor, L = (r, o, e, t) => {
+  for (var a = t > 1 ? void 0 : t ? Rs(o, e) : o, l = r.length - 1, s; l >= 0; l--)
     (s = r[l]) && (a = (t ? s(o, e, a) : s(a)) || a);
-  return t && a && Es(o, e, a), a;
+  return t && a && As(o, e, a), a;
 };
-let O = class extends jo {
+let I = class extends jo {
   constructor() {
-    super(...arguments), this.disabled = !1, this.focused = !1, this.labelX = "saturation", this.labelY = "luminosity", this.isLTR = !0, this.languageResolver = new ht(this), this.colorController = new oa(this, { manageAs: "hsv" }), this.activeAxis = "x", this.step = 0.01, this.altered = 0, this.activeKeys = /* @__PURE__ */ new Set(), this._valueChanged = !1, this._pointerDown = !1;
+    super(...arguments), this.disabled = !1, this.focused = !1, this.labelX = "saturation", this.labelY = "luminosity", this.isLTR = !0, this.languageResolver = new dt(this), this.colorController = new ea(this, { manageAs: "hsv" }), this.activeAxis = "x", this.step = 0.01, this.altered = 0, this.activeKeys = /* @__PURE__ */ new Set(), this._valueChanged = !1, this._pointerDown = !1;
   }
   static get styles() {
-    return [io(_s)];
+    return [io(Es)];
   }
   get hue() {
     return this.colorController.hue;
@@ -3573,7 +3605,7 @@ let O = class extends jo {
     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 = ma() || pa(), a = "Color Picker", l = wo(t ? void 0 : "2d slider"), s = this.labelX, n = this.labelY, i = new Intl.NumberFormat(this.languageResolver.language, {
+    const { width: o = 0, height: e = 0 } = this.boundingClientRect || {}, t = pa() || ga(), a = "Color Picker", l = wo(t ? void 0 : "2d slider"), s = this.labelX, n = this.labelY, i = new Intl.NumberFormat(this.languageResolver.language, {
       style: "percent",
       unitDisplay: "narrow"
     }).format(this.x), c = new Intl.NumberFormat(this.languageResolver.language, {
@@ -3599,7 +3631,7 @@ let O = class extends jo {
         color=${this.colorController.getHslString()}
         ?disabled=${this.disabled}
         style=${`transform: translate(${(this.isLTR ? this.x : 1 - this.x) * o}px, ${e - this.y * e}px);`}
-        ${dt({
+        ${mt({
       start: ["pointerdown", this.handlePointerdown],
       streamInside: ["pointermove", this.handlePointermove],
       end: [
@@ -3696,53 +3728,53 @@ let O = class extends jo {
 };
 L([
   m({ type: String, reflect: !0 })
-], O.prototype, "dir", 2);
+], I.prototype, "dir", 2);
 L([
   m({ type: Boolean, reflect: !0 })
-], O.prototype, "disabled", 2);
+], I.prototype, "disabled", 2);
 L([
   m({ type: Boolean, reflect: !0 })
-], O.prototype, "focused", 2);
+], I.prototype, "focused", 2);
 L([
   m({ type: String, attribute: "label-x" })
-], O.prototype, "labelX", 2);
+], I.prototype, "labelX", 2);
 L([
   m({ type: String, attribute: "label-y" })
-], O.prototype, "labelY", 2);
+], I.prototype, "labelY", 2);
 L([
   m({ type: Boolean, attribute: "is-ltr" })
-], O.prototype, "isLTR", 2);
+], I.prototype, "isLTR", 2);
 L([
-  V(".handle")
-], O.prototype, "handle", 2);
+  J(".handle")
+], I.prototype, "handle", 2);
 L([
   m({ type: Number })
-], O.prototype, "hue", 1);
+], I.prototype, "hue", 1);
 L([
   m({ type: String })
-], O.prototype, "value", 1);
+], I.prototype, "value", 1);
 L([
   m({ type: String })
-], O.prototype, "color", 1);
+], I.prototype, "color", 1);
 L([
   m({ attribute: !1 })
-], O.prototype, "activeAxis", 2);
+], I.prototype, "activeAxis", 2);
 L([
   m({ type: Number })
-], O.prototype, "x", 1);
+], I.prototype, "x", 1);
 L([
   m({ type: Number })
-], O.prototype, "y", 1);
+], I.prototype, "y", 1);
 L([
   m({ type: Number })
-], O.prototype, "step", 2);
+], I.prototype, "step", 2);
 L([
-  V('[name="x"]')
-], O.prototype, "inputX", 2);
+  J('[name="x"]')
+], I.prototype, "inputX", 2);
 L([
-  V('[name="y"]')
-], O.prototype, "inputY", 2);
-customElements.get("luzmo-color-area") || customElements.define("luzmo-color-area", O);
+  J('[name="y"]')
+], I.prototype, "inputY", 2);
+customElements.get("luzmo-color-area") || customElements.define("luzmo-color-area", I);
 /*! * Lucero - The design system for Luzmo.
  * 
  * Copyright © 2025 Luzmo
@@ -3760,25 +3792,25 @@ customElements.get("luzmo-color-area") || customElements.define("luzmo-color-are
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-const Rs = () => {
+const Ps = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const r = document.createElement("style");
     r.setAttribute("data-luzmo-vars", ""), r.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(r);
   }
 };
-Rs();
-const Ps = ":host{position:relative}";
-var Hs = Object.defineProperty, Ns = (r, o, e, t) => {
+Ps();
+const Hs = ":host{position:relative}";
+var Ns = Object.defineProperty, ra = (r, o, e, t) => {
   for (var a = void 0, l = r.length - 1, s; l >= 0; l--)
     (s = r[l]) && (a = s(o, e, a) || a);
-  return a && Hs(o, e, a), a;
+  return a && Ns(o, e, a), a;
 };
-class ea extends ga {
+class Ye extends fa {
   constructor() {
-    super(), this.viewColor = !1, this._value = "", this.colorController = new oa(this);
+    super(), this.viewColor = !1, this.noAlphaChannel = !1, this._value = "", this.colorController = new ea(this);
   }
   static get styles() {
-    return [...super.styles, io(Ps)];
+    return [...super.styles, io(Hs)];
   }
   set value(o) {
     if (o === this.value)
@@ -3789,31 +3821,43 @@ class ea extends ga {
   get value() {
     return this._value;
   }
+  updated(o) {
+    super.updated(o), o.has("noAlphaChannel") && this.checkValidity();
+  }
   renderColorHandle() {
     return this.viewColor && this.valid ? N`
-          <sp-color-handle
+          <luzmo-color-handle
             size="m"
             color=${this.colorController.getColor("srgb").toString()}
-          ></sp-color-handle>
+          ></luzmo-color-handle>
         ` : N``;
   }
   getColorValue() {
     return this.valid ? this.colorController.getColor("srgb").toString() : "";
   }
   render() {
-    return this.viewColor && Promise.resolve().then(() => $a), N` ${super.render()} ${this.renderColorHandle()} `;
+    return this.viewColor && Promise.resolve().then(() => Sa), N` ${super.render()} ${this.renderColorHandle()} `;
   }
   checkValidity() {
     let o = super.checkValidity();
-    return this.value ? (this.valid = o = this.colorController.validateColorString(
-      this.value
-    ).isValid, this.invalid = !o, this.valid && (this.colorController.color = this.value)) : this.valid = this.invalid = !1, o;
+    if (this.value) {
+      const e = this.colorController.validateColorString(
+        this.value
+      );
+      let t = !1;
+      this.value.startsWith("rgba") ? t = !0 : this.value.startsWith("rgb") ? t = !1 : this.value.startsWith("hsla") ? t = !0 : this.value.startsWith("hsl") ? t = !1 : this.value.startsWith("#") && (t = this.value.length === 9), this.valid = o = e.isValid && (!this.noAlphaChannel || !t), this.invalid = !o, this.valid && (this.colorController.color = this.value);
+    } else
+      this.valid = this.invalid = !1;
+    return o;
   }
 }
-Ns([
+ra([
   m({ type: Boolean, attribute: "view-color" })
-], ea.prototype, "viewColor");
-customElements.get("luzmo-color-field") || customElements.define("luzmo-color-field", ea);
+], Ye.prototype, "viewColor");
+ra([
+  m({ type: Boolean, attribute: "no-alpha-channel" })
+], Ye.prototype, "noAlphaChannel");
+customElements.get("luzmo-color-field") || customElements.define("luzmo-color-field", Ye);
 /*! * Lucero - The design system for Luzmo.
  * 
  * Copyright © 2025 Luzmo
@@ -3831,9 +3875,9 @@ customElements.get("luzmo-color-field") || customElements.define("luzmo-color-fi
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-function I(r, o) {
+function O(r, o) {
   Bs(r) && (r = "100%");
-  const e = Is(r);
+  const e = Os(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 Qo(r) {
@@ -3842,10 +3886,10 @@ function Qo(r) {
 function Bs(r) {
   return typeof r == "string" && r.indexOf(".") !== -1 && parseFloat(r) === 1;
 }
-function Is(r) {
+function Os(r) {
   return typeof r == "string" && r.indexOf("%") !== -1;
 }
-function ra(r) {
+function ta(r) {
   return r = parseFloat(r), (isNaN(r) || r < 0 || r > 1) && (r = 1), r;
 }
 function oe(r) {
@@ -3854,15 +3898,15 @@ function oe(r) {
 function vo(r) {
   return r.length === 1 ? "0" + r : String(r);
 }
-function Os(r, o, e) {
+function Is(r, o, e) {
   return {
-    r: I(r, 255) * 255,
-    g: I(o, 255) * 255,
-    b: I(e, 255) * 255
+    r: O(r, 255) * 255,
+    g: O(o, 255) * 255,
+    b: O(e, 255) * 255
   };
 }
-function rt(r, o, e) {
-  r = I(r, 255), o = I(o, 255), e = I(e, 255);
+function tt(r, o, e) {
+  r = O(r, 255), o = O(o, 255), e = O(e, 255);
   const t = Math.max(r, o, e), a = Math.min(r, o, e);
   let l = 0, s = 0;
   const n = (t + a) / 2;
@@ -3890,7 +3934,7 @@ function Me(r, o, e) {
 }
 function Fs(r, o, e) {
   let t, a, l;
-  if (r = I(r, 360), o = I(o, 100), e = I(e, 100), o === 0)
+  if (r = O(r, 360), o = O(o, 100), e = O(e, 100), o === 0)
     a = e, l = e, t = e;
   else {
     const s = e < 0.5 ? e * (1 + o) : e + o - e * o, n = 2 * e - s;
@@ -3898,8 +3942,8 @@ function Fs(r, o, e) {
   }
   return { r: t * 255, g: a * 255, b: l * 255 };
 }
-function tt(r, o, e) {
-  r = I(r, 255), o = I(o, 255), e = I(e, 255);
+function at(r, o, e) {
+  r = O(r, 255), o = O(o, 255), e = O(e, 255);
   const t = Math.max(r, o, e), a = Math.min(r, o, e);
   let l = 0;
   const s = t, n = t - a, i = t === 0 ? 0 : n / t;
@@ -3922,11 +3966,11 @@ function tt(r, o, e) {
   return { h: l, s: i, v: s };
 }
 function Ls(r, o, e) {
-  r = I(r, 360) * 6, o = I(o, 100), e = I(e, 100);
+  r = O(r, 360) * 6, o = O(o, 100), e = O(e, 100);
   const t = Math.floor(r), a = r - t, l = e * (1 - o), s = e * (1 - a * o), n = e * (1 - (1 - a) * o), i = t % 6, c = [e, s, l, l, n, e][i], u = [n, e, e, s, l, l][i], h = [l, l, n, e, e, s][i];
   return { r: c * 255, g: u * 255, b: h * 255 };
 }
-function at(r, o, e, t) {
+function lt(r, o, e, t) {
   const a = [
     vo(Math.round(r).toString(16)),
     vo(Math.round(o).toString(16)),
@@ -3947,7 +3991,7 @@ function Ds(r, o, e, t) {
   const a = r / 100, l = o / 100, s = e / 100, n = t / 100, i = 255 * (1 - a) * (1 - n), c = 255 * (1 - l) * (1 - n), u = 255 * (1 - s) * (1 - n);
   return { r: i, g: c, b: u };
 }
-function lt(r, o, e) {
+function st(r, o, e) {
   let t = 1 - r / 255, a = 1 - o / 255, l = 1 - e / 255, s = Math.min(t, a, l);
   return s === 1 ? (t = 0, a = 0, l = 0) : (t = (t - s) / (1 - s) * 100, a = (a - s) / (1 - s) * 100, l = (l - s) / (1 - s) * 100), s *= 100, {
     c: Math.round(t),
@@ -3959,7 +4003,7 @@ function lt(r, o, e) {
 function Ts(r) {
   return Math.round(parseFloat(r) * 255).toString(16);
 }
-function st(r) {
+function nt(r) {
   return U(r) / 255;
 }
 function U(r) {
@@ -3972,7 +4016,7 @@ function qs(r) {
     b: r & 255
   };
 }
-const Oe = {
+const Ie = {
   aliceblue: "#f0f8ff",
   antiquewhite: "#faebd7",
   aqua: "#00ffff",
@@ -4124,7 +4168,7 @@ const Oe = {
 };
 function Ws(r) {
   let o = { r: 0, g: 0, b: 0 }, e = 1, t = null, a = null, l = null, s = !1, n = !1;
-  return typeof r == "string" && (r = Ys(r)), typeof r == "object" && (W(r.r) && W(r.g) && W(r.b) ? (o = Os(r.r, r.g, r.b), s = !0, n = String(r.r).substr(-1) === "%" ? "prgb" : "rgb") : W(r.h) && W(r.s) && W(r.v) ? (t = oe(r.s), a = oe(r.v), o = Ls(r.h, t, a), s = !0, n = "hsv") : W(r.h) && W(r.s) && W(r.l) ? (t = oe(r.s), l = oe(r.l), o = Fs(r.h, t, l), s = !0, n = "hsl") : W(r.c) && W(r.m) && W(r.y) && W(r.k) && (o = Ds(r.c, r.m, r.y, r.k), s = !0, n = "cmyk"), Object.prototype.hasOwnProperty.call(r, "a") && (e = r.a)), e = ra(e), {
+  return typeof r == "string" && (r = Ys(r)), typeof r == "object" && (W(r.r) && W(r.g) && W(r.b) ? (o = Is(r.r, r.g, r.b), s = !0, n = String(r.r).substr(-1) === "%" ? "prgb" : "rgb") : W(r.h) && W(r.s) && W(r.v) ? (t = oe(r.s), a = oe(r.v), o = Ls(r.h, t, a), s = !0, n = "hsv") : W(r.h) && W(r.s) && W(r.l) ? (t = oe(r.s), l = oe(r.l), o = Fs(r.h, t, l), s = !0, n = "hsl") : W(r.c) && W(r.m) && W(r.y) && W(r.k) && (o = Ds(r.c, r.m, r.y, r.k), s = !0, n = "cmyk"), Object.prototype.hasOwnProperty.call(r, "a") && (e = r.a)), e = ta(e), {
     ok: s,
     format: r.format || n,
     r: Math.min(255, Math.max(o.r, 0)),
@@ -4136,7 +4180,7 @@ function Ws(r) {
 const Us = "[-\\+]?\\d+%?", Xs = "[-\\+]?\\d*\\.\\d+%?", uo = "(?:" + Xs + ")|(?:" + Us + ")", $e = "[\\s|\\(]+(" + uo + ")[,|\\s]+(" + uo + ")[,|\\s]+(" + uo + ")\\s*\\)?", ee = (
   // eslint-disable-next-line prettier/prettier
   "[\\s|\\(]+(" + uo + ")[,|\\s]+(" + uo + ")[,|\\s]+(" + uo + ")[,|\\s]+(" + uo + ")\\s*\\)?"
-), K = {
+), V = {
   CSS_UNIT: new RegExp(uo),
   rgb: new RegExp("rgb" + $e),
   rgba: new RegExp("rgba" + ee),
@@ -4154,34 +4198,34 @@ function Ys(r) {
   if (r = r.trim().toLowerCase(), r.length === 0)
     return !1;
   let o = !1;
-  if (Oe[r])
-    r = Oe[r], o = !0;
+  if (Ie[r])
+    r = Ie[r], o = !0;
   else if (r === "transparent")
     return { r: 0, g: 0, b: 0, a: 0, format: "name" };
-  let e = K.rgb.exec(r);
-  return e ? { r: e[1], g: e[2], b: e[3] } : (e = K.rgba.exec(r), e ? { r: e[1], g: e[2], b: e[3], a: e[4] } : (e = K.hsl.exec(r), e ? { h: e[1], s: e[2], l: e[3] } : (e = K.hsla.exec(r), e ? { h: e[1], s: e[2], l: e[3], a: e[4] } : (e = K.hsv.exec(r), e ? { h: e[1], s: e[2], v: e[3] } : (e = K.hsva.exec(r), e ? { h: e[1], s: e[2], v: e[3], a: e[4] } : (e = K.cmyk.exec(r), e ? {
+  let e = V.rgb.exec(r);
+  return e ? { r: e[1], g: e[2], b: e[3] } : (e = V.rgba.exec(r), e ? { r: e[1], g: e[2], b: e[3], a: e[4] } : (e = V.hsl.exec(r), e ? { h: e[1], s: e[2], l: e[3] } : (e = V.hsla.exec(r), e ? { h: e[1], s: e[2], l: e[3], a: e[4] } : (e = V.hsv.exec(r), e ? { h: e[1], s: e[2], v: e[3] } : (e = V.hsva.exec(r), e ? { h: e[1], s: e[2], v: e[3], a: e[4] } : (e = V.cmyk.exec(r), e ? {
     c: e[1],
     m: e[2],
     y: e[3],
     k: e[4]
-  } : (e = K.hex8.exec(r), e ? {
+  } : (e = V.hex8.exec(r), e ? {
     r: U(e[1]),
     g: U(e[2]),
     b: U(e[3]),
-    a: st(e[4]),
+    a: nt(e[4]),
     format: o ? "name" : "hex8"
-  } : (e = K.hex6.exec(r), e ? {
+  } : (e = V.hex6.exec(r), e ? {
     r: U(e[1]),
     g: U(e[2]),
     b: U(e[3]),
     format: o ? "name" : "hex"
-  } : (e = K.hex4.exec(r), e ? {
+  } : (e = V.hex4.exec(r), e ? {
     r: U(e[1] + e[1]),
     g: U(e[2] + e[2]),
     b: U(e[3] + e[3]),
-    a: st(e[4] + e[4]),
+    a: nt(e[4] + e[4]),
     format: o ? "name" : "hex8"
-  } : (e = K.hex3.exec(r), e ? {
+  } : (e = V.hex3.exec(r), e ? {
     r: U(e[1] + e[1]),
     g: U(e[2] + e[2]),
     b: U(e[3] + e[3]),
@@ -4189,7 +4233,7 @@ function Ys(r) {
   } : !1))))))))));
 }
 function W(r) {
-  return typeof r == "number" ? !Number.isNaN(r) : K.CSS_UNIT.test(r);
+  return typeof r == "number" ? !Number.isNaN(r) : V.CSS_UNIT.test(r);
 }
 let H = class A {
   constructor(o = "", e = {}) {
@@ -4233,7 +4277,7 @@ let H = class A {
    * @param alpha - The new alpha value. The accepted range is 0-1.
    */
   setAlpha(o) {
-    return this.a = ra(o), this.roundA = Math.round(100 * this.a) / 100, this;
+    return this.a = ta(o), this.roundA = Math.round(100 * this.a) / 100, this;
   }
   /**
    * Returns whether the color is monochrome.
@@ -4246,7 +4290,7 @@ let H = class A {
    * Returns the object as a HSVA object.
    */
   toHsv() {
-    const o = tt(this.r, this.g, this.b);
+    const o = at(this.r, this.g, this.b);
     return { h: o.h * 360, s: o.s, v: o.v, a: this.a };
   }
   /**
@@ -4254,14 +4298,14 @@ let H = class A {
    * "hsva(xxx, xxx, xxx, xx)".
    */
   toHsvString() {
-    const o = tt(this.r, this.g, this.b), e = Math.round(o.h * 360), t = Math.round(o.s * 100), a = Math.round(o.v * 100);
+    const o = at(this.r, this.g, this.b), e = Math.round(o.h * 360), t = Math.round(o.s * 100), a = Math.round(o.v * 100);
     return this.a === 1 ? `hsv(${e}, ${t}%, ${a}%)` : `hsva(${e}, ${t}%, ${a}%, ${this.roundA})`;
   }
   /**
    * Returns the object as a HSLA object.
    */
   toHsl() {
-    const o = rt(this.r, this.g, this.b);
+    const o = tt(this.r, this.g, this.b);
     return { h: o.h * 360, s: o.s, l: o.l, a: this.a };
   }
   /**
@@ -4269,7 +4313,7 @@ let H = class A {
    * "hsla(xxx, xxx, xxx, xx)".
    */
   toHslString() {
-    const o = rt(this.r, this.g, this.b), e = Math.round(o.h * 360), t = Math.round(o.s * 100), a = Math.round(o.l * 100);
+    const o = tt(this.r, this.g, this.b), e = Math.round(o.h * 360), t = Math.round(o.s * 100), a = Math.round(o.l * 100);
     return this.a === 1 ? `hsl(${e}, ${t}%, ${a}%)` : `hsla(${e}, ${t}%, ${a}%, ${this.roundA})`;
   }
   /**
@@ -4277,7 +4321,7 @@ let H = class A {
    * @param allow3Char will shorten hex value to 3 char if possible
    */
   toHex(o = !1) {
-    return at(this.r, this.g, this.b, o);
+    return lt(this.r, this.g, this.b, o);
   }
   /**
    * Returns the hex value of the color -with a # prefixed.
@@ -4330,7 +4374,7 @@ let H = class A {
    * Returns the object as a RGBA object.
    */
   toPercentageRgb() {
-    const o = (e) => `${Math.round(I(e, 255) * 100)}%`;
+    const o = (e) => `${Math.round(O(e, 255) * 100)}%`;
     return {
       r: o(this.r),
       g: o(this.g),
@@ -4342,16 +4386,16 @@ let H = class A {
    * Returns the RGBA relative values interpolated into a string
    */
   toPercentageRgbString() {
-    const o = (e) => Math.round(I(e, 255) * 100);
+    const o = (e) => Math.round(O(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 {
-      ...lt(this.r, this.g, this.b)
+      ...st(this.r, this.g, this.b)
     };
   }
   toCmykString() {
-    const { c: o, m: e, y: t, k: a } = lt(this.r, this.g, this.b);
+    const { c: o, m: e, y: t, k: a } = st(this.r, this.g, this.b);
     return `cmyk(${o}, ${e}, ${t}, ${a})`;
   }
   /**
@@ -4362,8 +4406,8 @@ let H = class A {
       return "transparent";
     if (this.a < 1)
       return !1;
-    const o = "#" + at(this.r, this.g, this.b, !1);
-    for (const [e, t] of Object.entries(Oe))
+    const o = "#" + lt(this.r, this.g, this.b, !1);
+    for (const [e, t] of Object.entries(Ie))
       if (o === t)
         return e;
     return !1;
@@ -4538,7 +4582,7 @@ let H = class A {
     return this.format === "cmyk" || e.format === "cmyk" ? this.toCmykString() === e.toCmykString() : this.toRgbString() === e.toRgbString();
   }
 };
-const nt = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, it = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/, ct = /(^hs[v|l]a?\()\d{1,3}/, re = (r, o) => o ? r.toHexString() : r.toHex();
+const it = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, ct = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/, ut = /(^hs[v|l]a?\()\d{1,3}/, re = (r, o) => o ? r.toHexString() : r.toHex();
 class Gs {
   constructor(o, {
     applyColorToState: e,
@@ -4553,13 +4597,13 @@ class Gs {
       hsl: (l, s) => {
         if (this.maintains === "hue") {
           if (s)
-            return l.toHslString().replace(ct, `$1${this.hue}`);
+            return l.toHslString().replace(ut, `$1${this.hue}`);
           const { s: u, l: h, a: d } = l.toHsl();
           return { h: this.hue, s: u, l: h, a: d };
         }
         if (s)
           return l.toHslString().replace(
-            it,
+            ct,
             `$1${this.hue}$2${this.saturation}`
           );
         const { s: n, l: i, a: c } = l.toHsl();
@@ -4568,13 +4612,13 @@ class Gs {
       hsv: (l, s) => {
         if (this.maintains === "hue") {
           if (s)
-            return l.toHsvString().replace(ct, `$1${this.hue}`);
+            return l.toHsvString().replace(ut, `$1${this.hue}`);
           const { s: u, v: h, a: d } = l.toHsv();
           return { h: this.hue, s: u, v: h, a: d };
         }
         if (s)
           return l.toHsvString().replace(
-            it,
+            ct,
             `$1${this.hue}$2${this.saturation}`
           );
         const { s: n, v: i, a: c } = l.toHsv();
@@ -4601,7 +4645,7 @@ class Gs {
     const { h: l, s, v: n, a: i } = this._color.toHsv();
     let c;
     if (a && t.startsWith("hs")) {
-      const u = nt.exec(e);
+      const u = it.exec(e);
       if (u !== null) {
         const [, h] = u;
         c = Number(h);
@@ -4615,7 +4659,7 @@ class Gs {
   setColorMaintainSaturation(o, e, t, a) {
     const { a: l } = this._color.toHsv();
     if (a && t.startsWith("hs")) {
-      const s = nt.exec(e);
+      const s = it.exec(e);
       if (s !== null) {
         const [, n, i] = s;
         this.hue = Number(n), this.saturation = Number(i);
@@ -4703,7 +4747,7 @@ var Ks = Object.defineProperty, Vs = Object.getOwnPropertyDescriptor, Z = (r, o,
 };
 let q = class extends Fe {
   constructor() {
-    super(...arguments), this.disabled = !1, this.focused = !1, this.label = "hue", this.vertical = !1, this.languageResolver = new ht(this), this.colorController = new Gs(this, {
+    super(...arguments), this.disabled = !1, this.focused = !1, this.label = "hue", this.vertical = !1, this.languageResolver = new dt(this), this.colorController = new Gs(this, {
       /* c8 ignore next 3 */
       applyColorToState: () => {
         if (this.mode === "opacity") {
@@ -4877,7 +4921,7 @@ let q = class extends Fe {
         <div
           class="gradient"
           role="presentation"
-          style=${fa(this.getColorSliderStyle)}
+          style=${ba(this.getColorSliderStyle)}
         >
           <slot name="gradient"></slot>
         </div>
@@ -4890,7 +4934,7 @@ let q = class extends Fe {
         color=${this.mode === "opacity" ? this.color : "hsl(" + this.value + ", 100%, 50%)"}
         ?disabled=${this.disabled}
         style=${this.handlePositionStyles}
-        ${dt({
+        ${mt({
       start: ["pointerdown", this.handlePointerdown],
       streamInside: ["pointermove", this.handlePointermove],
       end: [
@@ -4949,7 +4993,7 @@ Z([
   m({ type: Boolean, reflect: !0 })
 ], q.prototype, "focused", 2);
 Z([
-  V(".handle")
+  J(".handle")
 ], q.prototype, "handle", 2);
 Z([
   m({ type: String })
@@ -4973,7 +5017,7 @@ Z([
   m({ type: Boolean, attribute: "is-ltr" })
 ], q.prototype, "isLTR", 2);
 Z([
-  V("input")
+  J("input")
 ], q.prototype, "input", 2);
 customElements.get("luzmo-color-slider") || customElements.define("luzmo-color-slider", q);
 /*! * Lucero - The design system for Luzmo.
@@ -5000,13 +5044,13 @@ const Js = () => {
   }
 };
 Js();
-const Qs = '@media (forced-colors: active){:host{--highcontrast-swatch-disabled-icon-color: GrayText;--highcontrast-swatch-focus-indicator-color: ButtonText;--highcontrast-swatch-background-color-selected: Background;--highcontrast-swatch-border-color-selected: Highlight;--highcontrast-swatch-border-color: ButtonText;--highcontrast-swatch-fill-foreground-color: ButtonText}.fill{forced-color-adjust:none}:host([disabled]){--highcontrast-swatch-border-color: GrayText}}:host{box-sizing:border-box;inline-size:var(--luzmo-swatch-size, var(--swatch-size));block-size:var(--luzmo-swatch-size, var(--swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabled-icon{inline-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size));block-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected, var(--luzmo-swatch-inner-border-color-selected, var(--swatch-inner-border-color-selected)))}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:none;background:var(--picked-color, transparent)}:host([mixed-value]) .mixed-value-icon{color:var(--swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--picked-color, transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--luzmo-swatch-slash-thickness, var(--swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color, var(--luzmo-swatch-slash-icon-color, var(--swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabled-icon{display:block}:host:before{content:"";border-width:var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected, var(--luzmo-swatch-border-color-selected, var(--swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}:host:after{content:"";inset:calc(var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)) * -2);opacity:0;border-width:var(--luzmo-swatch-focus-indicator-width, var(--swatch-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color, var(--luzmo-swatch-focus-indicator-color, var(--swatch-focus-indicator-color)));border-radius:var(--luzmo-swatch-focus-indicator-border-radius, var(--swatch-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-sizing:border-box;box-shadow:inset 0 0 0 var(--luzmo-swatch-border-thickness, var(--swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--luzmo-swatch-border-color, var(--swatch-border-color)));border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));position:absolute;top:0;right:0;bottom:0;left:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--picked-color, transparent)}:host([border=none]) .fill:before{box-shadow:none}.mixed-value-icon{pointer-events:none;color:#0000;color:var(--picked-color, transparent);display:none}.disabled-icon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));display:none;position:relative}.disabled-icon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)))}.disabled-icon path:last-child{fill:var(--luzmo-swatch-icon-border-color, var(--swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([selected]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)));height:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}:host([selected][shape=rectangle]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2 - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--luzmo-animation-duration) ease-in-out,height var(--luzmo-animation-duration) ease-in-out}:host([size=xl]){--swatch-size: var(--luzmo-component-height-xl);--swatch-disabled-icon-size: 24px;--swatch-slash-thickness: 6px}:host([size=l]){--swatch-size: var(--luzmo-component-height-l);--swatch-disabled-icon-size: 20px;--swatch-slash-thickness: 5px}:host([size=s]){--swatch-size: var(--luzmo-component-height-s);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 3px}:host([size=xs]){--swatch-size: var(--luzmo-component-height-xs);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 2px}:host([size=xxs]){--swatch-size: var(--luzmo-component-height-xxs);--swatch-disabled-icon-size: 14px;--swatch-slash-thickness: 2px}:host{--swatch-size: var(--luzmo-component-height);--swatch-disabled-icon-size: 18px;--swatch-slash-thickness: 4px}:host{--swatch-border-radius: var(--luzmo-border-radius-s);--swatch-focus-indicator-border-radius: var(--luzmo-border-radius-s);--swatch-border-thickness: var(--luzmo-border-width);--swatch-border-thickness-selected: var(--luzmo-border-width);--swatch-focus-indicator-width: var(--luzmo-indicator-width);--swatch-focus-indicator-gap: var(--luzmo-indicator-gap);--swatch-border-color: var(--luzmo-border-color-down);--swatch-icon-border-color: var(--luzmo-border-color);--swatch-border-color-selected: var(--luzmo-border-color-full-down);--swatch-inner-border-color-selected: var(--luzmo-background-color);--swatch-disabled-icon-color: rgb(255, 255, 255);--swatch-dash-icon-color: var(--luzmo-font-color);--swatch-slash-icon-color: var(--luzmo-negative-color);--swatch-focus-indicator-color: var(--luzmo-primary)}.fill:before{background:var(--picked-color, transparent)}:host([border=none]) .fill:before{background:var(--picked-color, transparent)}:host .is-image .fill:before{background:#0000}:host .opacity-checkerboard{background:repeating-conic-gradient(var(--luzmo-swatch-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-swatch-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-swatch-checkerboard-position, left top)/calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2) calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2)}';
-var on = Object.defineProperty, en = Object.getOwnPropertyDescriptor, eo = (r, o, e, t) => {
+const Qs = '@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);background-color:var(--luzmo-swatch-focus-indicator-background-color, var(--luzmo-background-color));z-index:-1;opacity:0;border-width:var(--luzmo-swatch-focus-indicator-width, var(--swatch-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color, var(--luzmo-swatch-focus-indicator-color, var(--swatch-focus-indicator-color)));border-radius:var(--luzmo-swatch-focus-indicator-border-radius, var(--swatch-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-sizing:border-box;box-shadow:inset 0 0 0 var(--luzmo-swatch-border-thickness, var(--swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--luzmo-swatch-border-color, var(--swatch-border-color)));border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));position:absolute;top:0;right:0;bottom:0;left:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--picked-color, transparent)}:host([border=none]) .fill:before{box-shadow:none}.mixed-value-icon{pointer-events:none;color:#0000;color:var(--picked-color, transparent);display:none}.disabled-icon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));display:none;position:relative}.disabled-icon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)))}.disabled-icon path:last-child{fill:var(--luzmo-swatch-icon-border-color, var(--swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([selected]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)));height:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}:host([selected][shape=rectangle]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2 - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--luzmo-animation-duration) ease-in-out,height var(--luzmo-animation-duration) ease-in-out}:host([size=xl]){--swatch-size: var(--luzmo-component-height-xl);--swatch-disabled-icon-size: 24px;--swatch-slash-thickness: 6px}:host([size=l]){--swatch-size: var(--luzmo-component-height-l);--swatch-disabled-icon-size: 20px;--swatch-slash-thickness: 5px}:host([size=s]){--swatch-size: var(--luzmo-component-height-s);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 3px}:host([size=xs]){--swatch-size: var(--luzmo-component-height-xs);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 2px}:host([size=xxs]){--swatch-size: var(--luzmo-component-height-xxs);--swatch-disabled-icon-size: 14px;--swatch-slash-thickness: 2px}:host{--swatch-size: var(--luzmo-component-height);--swatch-disabled-icon-size: 18px;--swatch-slash-thickness: 4px}:host{--swatch-border-radius: var(--luzmo-border-radius-s);--swatch-focus-indicator-border-radius: var(--luzmo-border-radius-s);--swatch-border-thickness: var(--luzmo-border-width);--swatch-border-thickness-selected: var(--luzmo-border-width);--swatch-focus-indicator-width: var(--luzmo-indicator-width);--swatch-focus-indicator-gap: var(--luzmo-indicator-gap);--swatch-border-color: var(--luzmo-border-color-down);--swatch-icon-border-color: var(--luzmo-border-color);--swatch-border-color-selected: var(--luzmo-border-color-full-down);--swatch-inner-border-color-selected: var(--luzmo-background-color);--swatch-disabled-icon-color: rgb(255, 255, 255);--swatch-dash-icon-color: var(--luzmo-font-color);--swatch-slash-icon-color: var(--luzmo-negative-color);--swatch-focus-indicator-color: var(--luzmo-primary)}.fill:before{background:var(--picked-color, transparent)}:host([border=none]) .fill:before{background:var(--picked-color, transparent)}:host .is-image .fill:before{background:#0000}:host .opacity-checkerboard{background:repeating-conic-gradient(var(--luzmo-swatch-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-swatch-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-swatch-checkerboard-position, left top)/calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2) calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2)}';
+var on = Object.defineProperty, en = Object.getOwnPropertyDescriptor, ro = (r, o, e, t) => {
   for (var a = t > 1 ? void 0 : t ? en(o, e) : o, l = r.length - 1, s; l >= 0; l--)
     (s = r[l]) && (a = (t ? s(o, e, a) : s(a)) || a);
   return t && a && on(o, e, a), a;
 };
-let J = class extends ie(Fe, {
+let Q = class extends ie(Fe, {
   validSizes: ["xxs", "xs", "s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
@@ -5028,7 +5072,7 @@ let J = class extends ie(Fe, {
         fill="var(--swatch-disabled-icon-stroke-color)"
       />
     </svg>
-  `, this.renderMixedValue = () => Se(ua);
+  `, this.renderMixedValue = () => Se(ha);
   }
   static get styles() {
     return [io(Qs)];
@@ -5093,8 +5137,8 @@ let J = class extends ie(Fe, {
     )}
       >
         <slot name="image"></slot>
-        ${Qe(this.disabled, this.renderDisabled)}
-        ${Qe(this.mixedValue, this.renderMixedValue)}
+        ${or(this.disabled, this.renderDisabled)}
+        ${or(this.mixedValue, this.renderMixedValue)}
       </div>
     `;
   }
@@ -5110,39 +5154,39 @@ let J = class extends ie(Fe, {
     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");
   }
 };
-eo([
+ro([
   m({ reflect: !0 })
-], J.prototype, "border", 2);
-eo([
+], Q.prototype, "border", 2);
+ro([
   m()
-], J.prototype, "color", 2);
-eo([
+], Q.prototype, "color", 2);
+ro([
   m()
-], J.prototype, "label", 2);
-eo([
+], Q.prototype, "label", 2);
+ro([
   m({ type: Boolean, reflect: !0, attribute: "mixed-value" })
-], J.prototype, "mixedValue", 2);
-eo([
+], Q.prototype, "mixedValue", 2);
+ro([
   m({ type: Boolean, reflect: !0 })
-], J.prototype, "nothing", 2);
-eo([
+], Q.prototype, "nothing", 2);
+ro([
   m({ reflect: !0 })
-], J.prototype, "role", 2);
-eo([
+], Q.prototype, "role", 2);
+ro([
   m({ reflect: !0 })
-], J.prototype, "rounding", 2);
-eo([
+], Q.prototype, "rounding", 2);
+ro([
   m({ type: Boolean, reflect: !0 })
-], J.prototype, "selected", 2);
-eo([
+], Q.prototype, "selected", 2);
+ro([
   m({ type: Boolean, reflect: !0 })
-], J.prototype, "readonly", 2);
-eo([
+], Q.prototype, "readonly", 2);
+ro([
   m({ reflect: !0 })
-], J.prototype, "shape", 2);
-eo([
+], Q.prototype, "shape", 2);
+ro([
   m()
-], J.prototype, "value", 1);
+], Q.prototype, "value", 1);
 const rn = ":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 tn = Object.defineProperty, an = Object.getOwnPropertyDescriptor, xo = (r, o, e, t) => {
   for (var a = t > 1 ? void 0 : t ? an(o, e) : o, l = r.length - 1, s; l >= 0; l--)
@@ -5154,7 +5198,7 @@ class bo extends ie(jo, {
   noDefaultSize: !0
 }) {
   constructor() {
-    super(), this._selected = [], this.selectedSet = /* @__PURE__ */ new Set(), this.rovingTabindexController = new wa(this, {
+    super(), this._selected = [], this.selectedSet = /* @__PURE__ */ new Set(), this.rovingTabindexController = new ya(this, {
       focusInIndex: (o) => {
         let e = -1;
         const t = o.findIndex((a, l) => (!o[e] && !a.disabled && (e = l), a.selected && !a.disabled));
@@ -5169,7 +5213,7 @@ class bo extends ie(jo, {
       }), this.selectedSet.forEach((e) => {
         o.has(e) || this.selectedSet.delete(e);
       }), this._selected = [...this.selectedSet], this.rovingTabindexController.clearElementCache();
-    }, new va(this, {
+    }, new wa(this, {
       config: {
         attributes: !0,
         childList: !0,
@@ -5299,9 +5343,9 @@ xo([
   m({ reflect: !0 })
 ], bo.prototype, "shape", 2);
 xo([
-  ba({ flatten: !0 })
+  za({ flatten: !0 })
 ], bo.prototype, "swatches", 2);
-customElements.get("luzmo-swatch") || customElements.define("luzmo-swatch", J);
+customElements.get("luzmo-swatch") || customElements.define("luzmo-swatch", Q);
 customElements.get("luzmo-swatch-group") || customElements.define("luzmo-swatch-group", bo);
 /*! * Lucero - The design system for Luzmo.
  * 
@@ -5333,7 +5377,7 @@ var nn = Object.defineProperty, co = (r, o, e, t) => {
     (s = r[l]) && (a = s(o, e, a) || a);
   return a && nn(o, e, a), a;
 };
-const ta = class extends ie(Fe) {
+const aa = class extends ie(Fe) {
   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)";
   }
@@ -5355,7 +5399,7 @@ const ta = class extends ie(Fe) {
     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 }));
+    this._rgbColor = t.toRgbString(), this._rgbaColor = t.setAlpha(this._alpha).toRgbString(), this.areaElement.color = `hsla(${e.h}, ${e.s * 100}%, ${e.l * 100}%, ${e.a})`, 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;
@@ -5435,8 +5479,8 @@ const ta = class extends ie(Fe) {
             >
               <div class="format-label">${this._format}</div>
               <div class="change-format-icon">
-                <div class="angle-icon">${Se(ha)}</div>
                 <div class="angle-icon">${Se(da)}</div>
+                <div class="angle-icon">${Se(ma)}</div>
               </div>
             </button>
           </div>
@@ -5463,8 +5507,8 @@ const ta = class extends ie(Fe) {
     `;
   }
 };
-ta.styles = io(sn);
-let lo = ta;
+aa.styles = io(sn);
+let lo = aa;
 co([
   m({ type: String, reflect: !0 })
 ], lo.prototype, "color");
@@ -5475,22 +5519,22 @@ co([
   m({ type: Array, reflect: !0 })
 ], lo.prototype, "swatches");
 co([
-  V("luzmo-color-area")
+  J("luzmo-color-area")
 ], lo.prototype, "areaElement");
 co([
-  V("#luzmo-hue-slider")
+  J("#luzmo-hue-slider")
 ], lo.prototype, "hueSliderElement");
 co([
-  V("#luzmo-opacity-slider")
+  J("#luzmo-opacity-slider")
 ], lo.prototype, "opacitySliderElement");
 co([
-  V("luzmo-color-field")
+  J("luzmo-color-field")
 ], lo.prototype, "colorFieldElement");
 co([
-  V("luzmo-swatch")
+  J("luzmo-swatch")
 ], lo.prototype, "swatchElement");
 co([
-  ut()
+  ht()
 ], lo.prototype, "_format");
 customElements.get("luzmo-color-menu") || customElements.define("luzmo-color-menu", lo);
 /*! * Lucero - The design system for Luzmo.
@@ -5517,15 +5561,15 @@ const cn = () => {
   }
 };
 cn();
-const un = "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 hn = Object.defineProperty, ro = (r, o, e, t) => {
+const un = "luzmo-popover{margin-left:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap));margin-right:var(--luzmo-color-picker-popover-horizontal-gap, var(--color-picker-popover-horizontal-gap))}luzmo-swatch{cursor:pointer}:host([read-only]) luzmo-swatch{cursor:default;pointer-events:none}:host{--luzmo-popover-content-area-spacing-vertical: 0;--color-picker-popover-horizontal-gap: var(--luzmo-spacing-4)}:host([size=s]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-3)}:host([size=l]),:host([size=xl]){--color-picker-popover-horizontal-gap: var(--luzmo-spacing-5)}";
+var hn = Object.defineProperty, oo = (r, o, e, t) => {
   for (var a = void 0, l = r.length - 1, s; l >= 0; l--)
     (s = r[l]) && (a = s(o, e, a) || a);
   return a && hn(o, e, a), a;
 };
-const aa = class extends ie(jo) {
+const la = class extends ie(jo) {
   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;
+    super(...arguments), this.color = "rgb(255, 0, 0)", this.open = !1, this.disabled = !1, this.readOnly = !1, this.placement = "left-start", this.rounding = "full", this.swatches = [], this.noAlphaChannel = !1, this._renderMenu = !1;
   }
   overlayCloseEvent() {
     this.open = !1;
@@ -5544,7 +5588,7 @@ const aa = class extends ie(jo) {
   }
   firstUpdated() {
     this.overlayElement.addEventListener("slottable-request", (o) => {
-      this._renderMenu = o.data !== za;
+      this._renderMenu = o.data !== va;
     });
   }
   updated(o) {
@@ -5571,11 +5615,12 @@ const aa = class extends ie(jo) {
         .color=${this.color}
         .selected=${this.open && !this.disabled}
         ?disabled=${this.disabled}
+        ?read-only=${this.readOnly}
         @luzmo-closed=${this.overlayCloseEvent}
         @luzmo-opened=${this.overlayOpenEvent}
       ></luzmo-swatch>
       <luzmo-overlay
-        trigger=${this.disabled ? "" : "trigger@click"}
+        trigger=${this.disabled || this.readOnly ? "" : "trigger@click"}
         .placement=${this.placement}
         type="auto"
       >
@@ -5586,39 +5631,42 @@ const aa = class extends ie(jo) {
     `;
   }
 };
-aa.styles = io(un);
-let Q = aa;
-ro([
+la.styles = io(un);
+let K = la;
+oo([
   m({ type: String, reflect: !0 })
-], Q.prototype, "color");
-ro([
+], K.prototype, "color");
+oo([
   m({ type: Boolean, reflect: !0 })
-], Q.prototype, "open");
-ro([
+], K.prototype, "open");
+oo([
   m({ type: Boolean, reflect: !0 })
-], Q.prototype, "disabled");
-ro([
+], K.prototype, "disabled");
+oo([
+  m({ type: Boolean, reflect: !0, attribute: "read-only" })
+], K.prototype, "readOnly");
+oo([
   m({ type: String, reflect: !0 })
-], Q.prototype, "placement");
-ro([
+], K.prototype, "placement");
+oo([
   m({ type: String, reflect: !0 })
-], Q.prototype, "rounding");
-ro([
+], K.prototype, "rounding");
+oo([
   m({ type: String, reflect: !0 })
-], Q.prototype, "shape");
-ro([
+], K.prototype, "shape");
+oo([
   m({ type: Array, reflect: !0 })
-], Q.prototype, "swatches");
-ro([
+], K.prototype, "swatches");
+oo([
   m({ type: Boolean, reflect: !0, attribute: "no-alpha-channel" })
-], Q.prototype, "noAlphaChannel");
-ro([
-  V("luzmo-color-menu")
-], Q.prototype, "menuElement");
-ro([
-  V("luzmo-overlay")
-], Q.prototype, "overlayElement");
-ro([
-  ut()
-], Q.prototype, "_renderMenu");
-customElements.get("luzmo-color-picker") || customElements.define("luzmo-color-picker", Q);
+], K.prototype, "noAlphaChannel");
+oo([
+  J("luzmo-color-menu")
+], K.prototype, "menuElement");
+oo([
+  J("luzmo-overlay")
+], K.prototype, "overlayElement");
+oo([
+  ht()
+], K.prototype, "_renderMenu");
+customElements.get("luzmo-color-picker") || customElements.define("luzmo-color-picker", K);