@orangelogic/design-system 2.0.0-29DUO2-beta-3 → 2.0.0-29IORR-beta-2

package/library/components/color-picker.js

@@ -1,22 +1,22 @@
 import { n as l, C as V } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as S } from "../chunks/component.styles.DMSLciL5.js";
+import { c as S } from "../chunks/component.styles.CRO4Odto.js";
 import { c as F } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as C } from "../chunks/debounce.DaHuiSGU.js";
 import { d as z } from "../chunks/default-value.COZopaet.js";
 import { d as y } from "../chunks/drag.DXEXVXPv.js";
-import { F as D } from "../chunks/form.DgwYWi0O.js";
-import { L as I } from "../chunks/i18n.C0iakJkV.js";
+import { F as D } from "../chunks/form.CFc09rKh.js";
+import { L as I } from "../chunks/i18n.BFqTRDCA.js";
 import { c as u } from "../chunks/math.DqTA6ya4.js";
-import { w as k } from "../chunks/watch.q1sEjPWL.js";
+import { w as k } from "../chunks/watch.BCJD77bD.js";
 import { i as E, x as h } from "../chunks/lit-element.jLBm65_O.js";
 import { r as g } from "../chunks/state.CSDxrqLd.js";
 import { t as H } from "../chunks/event-options.CYHYGOd8.js";
 import { e as _ } from "../chunks/query.BBf1UFkC.js";
 import { e as b } from "../chunks/class-map.BiVq-cVR.js";
 import { o as x } from "../chunks/if-defined.BRoBj_Rp.js";
-import { o as m } from "../chunks/style-map.llVFPd__.js";
+import { o as f } from "../chunks/style-map.llVFPd__.js";
 import { n as d } from "../chunks/when.Dr1es41R.js";
-import { C as M } from "../chunks/button.KnE3mcyM.js";
+import { C as M } from "../chunks/button.CauAHfdl.js";
 import O from "./button-group.js";
 import A from "./dropdown.js";
 import B from "./icon.js";
@@ -24,411 +24,8 @@ import P from "./input.js";
 import L from "./spinner.js";
 import N from "./visually-hidden.js";
 import { T as w } from "../chunks/index.C1chwzNp.js";
-var f = /* @__PURE__ */ ((t) => (t.Hex = "hex", t.Rgb = "rgb", t.Hsl = "hsl", t.Hsv = "hsv", t))(f || {});
-const T = E`
-  :host {
-    --grid-width: 280px;
-    --grid-height: 200px;
-    --grid-handle-size: 16px;
-    --slider-height: 15px;
-    --slider-handle-size: 17px;
-    --swatch-size: 25px;
-    --format-button-width: 52px;
-    --eye-dropper-button-width: 52px;
-
-    --control-border-color: var(--cx-color-neutral-300);
-    --control-button-color: var(--cx-color-neutral-0);
-    --control-caret-color: var(--cx-color-neutral-800);
-
-    display: inline-block;
-  }
-
-  .color-picker {
-    width: var(--grid-width);
-    font-family: var(--cx-font-sans);
-    font-size: var(--cx-font-size-medium);
-    font-weight: var(--cx-font-weight-regular);
-    color: var(--color);
-    background-color: var(--cx-panel-background-color);
-    border-radius: var(--cx-border-radius-small);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .color-picker--inline {
-    border: solid var(--cx-panel-border-width) var(--cx-panel-border-color);
-  }
-
-  .color-picker--inline:focus-visible {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  .color-picker__grid {
-    position: relative;
-    height: var(--grid-height);
-    background-image:
-      linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
-      linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
-    border-top-left-radius: var(--cx-border-radius-small);
-    border-top-right-radius: var(--cx-border-radius-small);
-    cursor: crosshair;
-    forced-color-adjust: none;
-  }
-
-  .color-picker__grid-handle {
-    position: absolute;
-    width: var(--grid-handle-size);
-    height: var(--grid-handle-size);
-    border-radius: 50%;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
-    border: solid 2px white;
-    margin-top: calc(var(--grid-handle-size) / -2);
-    margin-left: calc(var(--grid-handle-size) / -2);
-    transition: var(--cx-transition-fast) scale;
-  }
-
-  .color-picker__grid-handle--dragging {
-    cursor: none;
-    scale: 1.5;
-  }
-
-  .color-picker__grid-handle:focus-visible {
-    outline: var(--cx-focus-ring);
-  }
-
-  .color-picker__controls {
-    padding: var(--cx-spacing-small);
-    display: flex;
-    align-items: center;
-    gap: var(--cx-spacing-small);
-  }
-
-  .color-picker__sliders {
-    flex: 1 1 auto;
-  }
-
-  .color-picker__slider {
-    position: relative;
-    height: var(--slider-height);
-    border-radius: var(--cx-border-radius-pill);
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-    forced-color-adjust: none;
-  }
-
-  .color-picker__slider:not(:last-of-type) {
-    margin-bottom: var(--cx-spacing-small);
-  }
-
-  .color-picker__slider-handle {
-    position: absolute;
-    top: calc(50% - var(--slider-handle-size) / 2);
-    width: var(--slider-handle-size);
-    height: var(--slider-handle-size);
-    background-color: white;
-    border-radius: 50%;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
-    margin-left: calc(var(--slider-handle-size) / -2);
-  }
-
-  .color-picker__slider-handle:focus-visible {
-    outline: var(--cx-focus-ring);
-  }
-
-  .color-picker__hue {
-    background-image: linear-gradient(
-      to right,
-      rgb(255, 0, 0) 0%,
-      rgb(255, 255, 0) 17%,
-      rgb(0, 255, 0) 33%,
-      rgb(0, 255, 255) 50%,
-      rgb(0, 0, 255) 67%,
-      rgb(255, 0, 255) 83%,
-      rgb(255, 0, 0) 100%
-    );
-  }
-
-  .color-picker__alpha .color-picker__alpha-gradient {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-  }
-
-  .color-picker__preview {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--cx-border-radius-circle);
-    position: relative;
-    width: 2rem;
-    height: 2rem;
-    border: none;
-    background: none;
-    cursor: pointer;
-    forced-color-adjust: none;
-    width: var(--cx-input-height-medium);
-    height: var(--cx-input-height-medium);
-  }
-
-  .color-picker__preview--button,
-  .color-picker__preview--button::part(base) {
-    border-radius: var(--cx-border-radius-small);
-  }
-
-  .color-picker__preview:focus-visible {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  .color-picker__preview-color {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: solid 1px rgba(0, 0, 0, 0.125);
-  }
-
-  .color-picker__preview-color--copied {
-    animation: pulse 0.75s;
-  }
-
-  .color-picker__preview.color-picker__preview--button {
-    outline: solid 1px var(--control-border-color);
-  }
-
-  .color-picker__preview--small.color-picker__preview--button {
-    width: var(--cx-toggle-size-small);
-    height: var(--cx-toggle-size-small);
-  }
-
-  .color-picker__preview--medium.color-picker__preview--button {
-    width: var(--cx-toggle-size-medium);
-    height: var(--cx-toggle-size-medium);
-  }
-
-  .color-picker__preview--large.color-picker__preview--button {
-    width: var(--cx-toggle-size-large);
-    height: var(--cx-toggle-size-large);
-  }
-
-  .color-picker__preview:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    background-color: var(--preview-color, currentColor);
-  }
-
-  .color-picker__preview--empty:before {
-    background-color: transparent;
-  }
-
-  .color-picker__preview__transparent-bg {
-    background-image:
-      linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%),
-      linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%),
-      linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%);
-    background-size: 10px 10px;
-    background-position:
-      0 0,
-      0 0,
-      -5px -5px,
-      5px 5px;
-  }
-
-  @keyframes pulse {
-    0% {
-      box-shadow: 0 0 0 0 var(--cx-color-primary-500);
-    }
-    70% {
-      box-shadow: 0 0 0 0.5rem transparent;
-    }
-    100% {
-      box-shadow: 0 0 0 0 transparent;
-    }
-  }
-
-  .color-picker__preview__container {
-    display: flex;
-    align-items: center;
-  }
-
-  .color-picker__user-input__container {
-    display: flex;
-    padding: 0 var(--cx-spacing-small) var(--cx-spacing-small)
-      var(--cx-spacing-small);
-  }
-
-  .color-picker__input_color {
-    min-width: 0; /* fix input width in Safari */
-    flex: 1 1 auto;
-  }
-
-  .color-picker__input_opacity {
-    margin-left: var(--cx-spacing-2x-small);
-    width: 54px;
-  }
-
-  .color-picker__input_opacity::part(input) {
-    padding-left: var(--cx-spacing-x-small);
-    padding-right: var(--cx-spacing-x-small);
-  }
-
-  .color-picker__user-input__container cx-button-group {
-    margin-left: var(--cx-spacing-2x-small);
-  }
-
-  .color-picker__user-input__container cx-button {
-    font-size: var(--cx-font-size-medium);
-  }
-
-  .color-picker__user-input__container cx-button[part='format-button'] {
-    min-width: var(--format-button-width);
-    max-width: var(--format-button-width);
-  }
-
-  .color-picker__user-input__container cx-button[part='eye-dropper-button'] {
-    min-width: var(--eye-dropper-button-width);
-    max-width: var(--eye-dropper-button-width);
-  }
-
-  .color-picker__swatches {
-    display: grid;
-    grid-template-columns: repeat(8, 1fr);
-    grid-gap: 0.5rem;
-    justify-items: center;
-    border-top: solid 1px var(--cx-color-neutral-200);
-    padding: var(--cx-spacing-small);
-    forced-color-adjust: none;
-  }
-
-  .color-picker__customSwatches {
-    display: grid;
-    grid-template-columns: repeat(8, 1fr);
-    grid-gap: 0.5rem;
-    justify-items: center;
-    padding: 0 var(--cx-spacing-small) var(--cx-spacing-small)
-      var(--cx-spacing-small);
-    forced-color-adjust: none;
-  }
-
-  .color-picker__customSwatches-label {
-    padding: var(--cx-spacing-small);
-    display: inline-flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .color-picker__spinner {
-    text-align: center;
-    margin: var(--cx-spacing-small) 0;
-  }
-
-  .color-picker__swatch {
-    position: relative;
-    width: var(--swatch-size);
-    height: var(--swatch-size);
-    border-radius: var(--cx-border-radius-small);
-  }
-
-  .color-picker__swatch .color-picker__swatch-color {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: solid 1px rgba(0, 0, 0, 0.125);
-    border-radius: inherit;
-    cursor: pointer;
-  }
-
-  .color-picker__swatch:focus-visible {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  .color-picker--disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .color-picker--disabled .color-picker__grid,
-  .color-picker--disabled .color-picker__grid-handle,
-  .color-picker--disabled .color-picker__slider,
-  .color-picker--disabled .color-picker__slider-handle,
-  .color-picker--disabled .color-picker__preview,
-  .color-picker--disabled .color-picker__swatch,
-  .color-picker--disabled .color-picker__swatch-color {
-    pointer-events: none;
-  }
-
-  /*
-   * Color dropdown
-   */
-
-  .color-dropdown::part(panel) {
-    max-height: none;
-    background-color: var(--cx-panel-background-color);
-    border: solid var(--cx-panel-border-width) var(--cx-panel-border-color);
-    border-radius: var(--cx-border-radius-small);
-    overflow: visible;
-  }
-
-  .color-dropdown__trigger::part(base) {
-    background-color: var(--control-button-color);
-    border-color: var(--control-border-color);
-    border-radius: var(--cx-border-radius-medium);
-    padding-inline-start: var(--cx-spacing-2x-small);
-    padding-inline-end: var(--cx-spacing-2x-small);
-  }
-
-  .color-dropdown__trigger::part(label) {
-    padding-inline-start: var(--cx-spacing-2x-small);
-    padding-inline-end: var(--cx-spacing-2x-small);
-  }
-
-  .color-dropdown__trigger {
-    display: inline-block;
-    position: relative;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    forced-color-adjust: none;
-  }
-
-  .color-dropdown__trigger:focus-visible {
-    outline: none;
-  }
-
-  .color-dropdown__trigger.color-dropdown__trigger--disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .color-dropdown__trigger-icon {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    color: var(--control-caret-color);
-    font-size: var(--cx-font-size-large);
-    width: 100%;
-    height: 100%;
-  }
-
-  cx-tooltip {
-    display: inline-block;
-  }
-`;
+var m = /* @__PURE__ */ ((t) => (t.Hex = "hex", t.Rgb = "rgb", t.Hsl = "hsl", t.Hsv = "hsv", t))(m || {});
+const T = E`:host{--grid-width:280px;--grid-height:200px;--grid-handle-size:16px;--slider-height:15px;--slider-handle-size:17px;--swatch-size:25px;--format-button-width:52px;--eye-dropper-button-width:52px;--control-border-color:var(--cx-color-neutral-300);--control-button-color:var(--cx-color-neutral-0);--control-caret-color:var(--cx-color-neutral-800);display:inline-block}.color-picker{width:var(--grid-width);font-family:var(--cx-font-sans);font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-regular);color:var(--color);background-color:var(--cx-panel-background-color);border-radius:var(--cx-border-radius-small);-webkit-user-select:none;user-select:none}.color-picker--inline{border:solid var(--cx-panel-border-width) var(--cx-panel-border-color)}.color-picker--inline:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-picker__grid{height:var(--grid-height);border-top-left-radius:var(--cx-border-radius-small);border-top-right-radius:var(--cx-border-radius-small);cursor:crosshair;forced-color-adjust:none;background-image:linear-gradient(#0000 0%,#000 100%),linear-gradient(90deg,#fff 0%,#fff0 100%);position:relative}.color-picker__grid-handle{width:var(--grid-handle-size);height:var(--grid-handle-size);margin-top:calc(var(--grid-handle-size) / -2);margin-left:calc(var(--grid-handle-size) / -2);transition:var(--cx-transition-fast) scale;border:2px solid #fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000040}.color-picker__grid-handle--dragging{cursor:none;scale:1.5}.color-picker__grid-handle:focus-visible{outline:var(--cx-focus-ring)}.color-picker__controls{padding:var(--cx-spacing-small);align-items:center;gap:var(--cx-spacing-small);display:flex}.color-picker__sliders{flex:auto}.color-picker__slider{height:var(--slider-height);border-radius:var(--cx-border-radius-pill);forced-color-adjust:none;position:relative;box-shadow:inset 0 0 0 1px #0003}.color-picker__slider:not(:last-of-type){margin-bottom:var(--cx-spacing-small)}.color-picker__slider-handle{top:calc(50% - var(--slider-handle-size) / 2);width:var(--slider-handle-size);height:var(--slider-handle-size);margin-left:calc(var(--slider-handle-size) / -2);background-color:#fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000040}.color-picker__slider-handle:focus-visible{outline:var(--cx-focus-ring)}.color-picker__hue{background-image:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.color-picker__alpha .color-picker__alpha-gradient{border-radius:inherit;width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__preview{border-radius:var(--cx-border-radius-circle);cursor:pointer;forced-color-adjust:none;width:2rem;height:2rem;width:var(--cx-input-height-medium);height:var(--cx-input-height-medium);background:0 0;border:none;flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.color-picker__preview--button,.color-picker__preview--button::part(base){border-radius:var(--cx-border-radius-small)}.color-picker__preview:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-picker__preview-color{border:1px solid #00000020;width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__preview-color--copied{animation:.75s pulse}.color-picker__preview.color-picker__preview--button{outline:solid 1px var(--control-border-color)}.color-picker__preview--small.color-picker__preview--button{width:var(--cx-toggle-size-small);height:var(--cx-toggle-size-small)}.color-picker__preview--medium.color-picker__preview--button{width:var(--cx-toggle-size-medium);height:var(--cx-toggle-size-medium)}.color-picker__preview--large.color-picker__preview--button{width:var(--cx-toggle-size-large);height:var(--cx-toggle-size-large)}.color-picker__preview:before{content:"";border-radius:inherit;background-color:var(--preview-color,currentColor);width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__preview--empty:before{background-color:#0000}.color-picker__preview__transparent-bg{background-image:linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%);background-position:0 0,0 0,-5px -5px,5px 5px;background-size:10px 10px}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--cx-color-primary-500)}70%{box-shadow:0 0 0 .5rem #0000}to{box-shadow:0 0 #0000}}.color-picker__preview__container{align-items:center;display:flex}.color-picker__user-input__container{padding:0 var(--cx-spacing-small) var(--cx-spacing-small) var(--cx-spacing-small);display:flex}.color-picker__input_color{flex:auto;min-width:0}.color-picker__input_opacity{margin-left:var(--cx-spacing-2x-small);width:54px}.color-picker__input_opacity::part(input){padding-left:var(--cx-spacing-x-small);padding-right:var(--cx-spacing-x-small)}.color-picker__user-input__container cx-button-group{margin-left:var(--cx-spacing-2x-small)}.color-picker__user-input__container cx-button{font-size:var(--cx-font-size-medium)}.color-picker__user-input__container cx-button[part=format-button]{min-width:var(--format-button-width);max-width:var(--format-button-width)}.color-picker__user-input__container cx-button[part=eye-dropper-button]{min-width:var(--eye-dropper-button-width);max-width:var(--eye-dropper-button-width)}.color-picker__swatches{grid-gap:.5rem;border-top:solid 1px var(--cx-color-neutral-200);padding:var(--cx-spacing-small);forced-color-adjust:none;grid-template-columns:repeat(8,1fr);justify-items:center;display:grid}.color-picker__customSwatches{grid-gap:.5rem;padding:0 var(--cx-spacing-small) var(--cx-spacing-small) var(--cx-spacing-small);forced-color-adjust:none;grid-template-columns:repeat(8,1fr);justify-items:center;display:grid}.color-picker__customSwatches-label{padding:var(--cx-spacing-small);justify-content:space-between;align-items:center;width:100%;display:inline-flex}.color-picker__spinner{text-align:center;margin:var(--cx-spacing-small) 0}.color-picker__swatch{width:var(--swatch-size);height:var(--swatch-size);border-radius:var(--cx-border-radius-small);position:relative}.color-picker__swatch .color-picker__swatch-color{border-radius:inherit;cursor:pointer;border:1px solid #00000020;width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__swatch:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-picker--disabled{opacity:.5;cursor:default}.color-picker--disabled .color-picker__grid,.color-picker--disabled .color-picker__grid-handle,.color-picker--disabled .color-picker__slider,.color-picker--disabled .color-picker__slider-handle,.color-picker--disabled .color-picker__preview,.color-picker--disabled .color-picker__swatch,.color-picker--disabled .color-picker__swatch-color{pointer-events:none}.color-dropdown::part(panel){background-color:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-border-radius-small);max-height:none;overflow:visible}.color-dropdown__trigger::part(base){background-color:var(--control-button-color);border-color:var(--control-border-color);border-radius:var(--cx-border-radius-medium);padding-inline-start:var(--cx-spacing-2x-small);padding-inline-end:var(--cx-spacing-2x-small)}.color-dropdown__trigger::part(label){padding-inline-start:var(--cx-spacing-2x-small);padding-inline-end:var(--cx-spacing-2x-small)}.color-dropdown__trigger{cursor:pointer;forced-color-adjust:none;background-color:#0000;border:none;display:inline-block;position:relative}.color-dropdown__trigger:focus-visible{outline:none}.color-dropdown__trigger.color-dropdown__trigger--disabled{opacity:.5;cursor:default}.color-dropdown__trigger-icon{color:var(--control-caret-color);font-size:var(--cx-font-size-large);justify-content:flex-end;align-items:center;width:100%;height:100%;display:flex}cx-tooltip{display:inline-block}`;
 var K = Object.defineProperty, j = Object.getOwnPropertyDescriptor, o = (t, e, i, s) => {
   for (var a = s > 1 ? void 0 : s ? j(e, i) : e, c = t.length - 1, p; c >= 0; c--)
     (p = t[c]) && (a = (s ? p(e, i, a) : p(a)) || a);
@@ -437,10 +34,10 @@ var K = Object.defineProperty, j = Object.getOwnPropertyDescriptor, o = (t, e, i
 const $ = "EyeDropper" in window;
 let r = class extends V {
   constructor() {
-    super(), this.formControlController = new D(this), this.isSafeValue = !1, this.localize = new I(this), this.hasFocus = !1, this.isDraggingGridHandle = !1, this.isEmpty = !1, this.inputColorValue = "", this.inputOpacityValue = "", this.hue = 0, this.saturation = 100, this.brightness = 100, this.alpha = 100, this.value = "", this.defaultValue = "", this.label = "", this.variant = "default", this.format = f.Hex, this.formats = [
-      f.Hex,
-      f.Rgb,
-      f.Hsl
+    super(), this.formControlController = new D(this), this.isSafeValue = !1, this.localize = new I(this), this.hasFocus = !1, this.isDraggingGridHandle = !1, this.isEmpty = !1, this.inputColorValue = "", this.inputOpacityValue = "", this.hue = 0, this.saturation = 100, this.brightness = 100, this.alpha = 100, this.value = "", this.defaultValue = "", this.label = "", this.variant = "default", this.format = m.Hex, this.formats = [
+      m.Hex,
+      m.Rgb,
+      m.Hsl
     ], this.emitFormat = void 0, this.inline = !1, this.size = "medium", this.noFormatToggle = !1, this.name = "", this.disabled = !1, this.hoist = !1, this.opacity = !1, this.uppercase = !1, this.clearable = !1, this.tooltip = "", this.swatches = "", this.customSwatches = "", this.loading = !1, this.creatable = !1, this.form = void 0, this.required = !1, this.emitValue = "", this.handleFocusIn = this.handleFocusIn.bind(this), this.handleFocusOut = this.handleFocusOut.bind(this), this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut);
   }
   /** Gets the validity state object */
@@ -471,10 +68,10 @@ let r = class extends V {
   }
   handleFormatToggle() {
     const t = [
-      f.Hex,
-      f.Rgb,
-      f.Hsl,
-      f.Hsv
+      m.Hex,
+      m.Rgb,
+      m.Hsl,
+      m.Hsv
     ].filter((i) => this.formats.includes(i)), e = (t.indexOf(this.format) + 1) % t.length;
     this.format = t[e], this.setColor(this.value), this.emit("cx-change"), this.emit("cx-input");
   }
@@ -824,63 +421,24 @@ let r = class extends V {
       if (!i)
         return console.error(`Unable to parse swatch color: "${e}"`, this), "";
       const s = () => this.selectSwatch(e), a = (c) => !this.disabled && c.key === "Enter" && this.setColor(i.hexa);
-      return h`
-        <div
-          part="swatch"
-          class="color-picker__swatch color-picker__transparent-bg"
-          tabindex=${x(this.disabled ? void 0 : "0")}
-          role="button"
-          aria-label=${e}
-          @click=${s}
-          @keydown=${a}
-        >
-          <div
-            class="color-picker__swatch-color"
-            style=${m({ backgroundColor: i.hexa })}
-          ></div>
-        </div>
-      `;
+      return h`<div part="swatch" class="color-picker__swatch color-picker__transparent-bg" tabindex=${x(this.disabled ? void 0 : "0")} role="button" aria-label=${e} @click=${s} @keydown=${a}><div class="color-picker__swatch-color" style=${f({ backgroundColor: i.hexa })}></div></div>`;
     });
   }
   render() {
-    const t = this.saturation, e = 100 - this.brightness, i = this.swatches ? Array.isArray(this.swatches) ? this.swatches : this.swatches.split(";").filter((n) => n.trim() !== "") : [], s = this.customSwatches ? Array.isArray(this.customSwatches) ? this.customSwatches : this.customSwatches.split(";").filter((n) => n.trim() !== "") : [], a = this.inputOpacityValue.endsWith("%") ? this.inputOpacityValue : `${this.inputOpacityValue}%`, c = h`
-      <div
-        part="base"
-        class=${b({
+    const t = this.saturation, e = 100 - this.brightness, i = this.swatches ? Array.isArray(this.swatches) ? this.swatches : this.swatches.split(";").filter((n) => n.trim() !== "") : [], s = this.customSwatches ? Array.isArray(this.customSwatches) ? this.customSwatches : this.customSwatches.split(";").filter((n) => n.trim() !== "") : [], a = this.inputOpacityValue.endsWith("%") ? this.inputOpacityValue : `${this.inputOpacityValue}%`, c = h`<div part="base" class=${b({
       "color-picker": !0,
       "color-picker--disabled": this.disabled,
       "color-picker--focused": this.hasFocus,
       "color-picker--inline": this.inline
-    })}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        aria-labelledby="label"
-        tabindex=${this.inline ? "0" : "-1"}
-      >
-        ${d(
+    })} aria-disabled=${this.disabled ? "true" : "false"} aria-labelledby="label" tabindex=${this.inline ? "0" : "-1"}>${d(
       this.inline,
-      () => h`
-            <cx-visually-hidden id="label">
-              <slot name="label">${this.label}</slot>
-            </cx-visually-hidden>
-          `
-    )}
-
-        <div
-          part="grid"
-          class="color-picker__grid"
-          style=${m({
+      () => h`<cx-visually-hidden id="label"><slot name="label">${this.label}</slot></cx-visually-hidden>`
+    )}<div part="grid" class="color-picker__grid" style=${f({
       backgroundColor: this.getHexString(this.hue, 100, 100)
-    })}
-          @pointerdown=${this.handleGridDrag}
-          @touchmove=${this.handleTouchMove}
-        >
-          <span
-            part="grid-handle"
-            class=${b({
+    })} @pointerdown=${this.handleGridDrag} @touchmove=${this.handleTouchMove}><span part="grid-handle" class=${b({
       "color-picker__grid-handle": !0,
       "color-picker__grid-handle--dragging": this.isDraggingGridHandle
-    })}
-            style=${m({
+    })} style=${f({
       backgroundColor: this.getHexString(
         this.hue,
         this.saturation,
@@ -889,51 +447,11 @@ let r = class extends V {
       ),
       left: `${t}%`,
       top: `${e}%`
-    })}
-            role="application"
-            aria-label="HSV"
-            tabindex=${x(this.disabled ? void 0 : "0")}
-            @keydown=${this.handleGridKeyDown}
-          ></span>
-        </div>
-
-        <div class="color-picker__controls">
-          <div class="color-picker__sliders">
-            <div
-              part="slider hue-slider"
-              class="color-picker__hue color-picker__slider"
-              @pointerdown=${this.handleHueDrag}
-              @touchmove=${this.handleTouchMove}
-            >
-              <span
-                part="slider-handle hue-slider-handle"
-                class="color-picker__slider-handle"
-                style=${m({
+    })} role="application" aria-label="HSV" tabindex=${x(this.disabled ? void 0 : "0")} @keydown=${this.handleGridKeyDown}></span></div><div class="color-picker__controls"><div class="color-picker__sliders"><div part="slider hue-slider" class="color-picker__hue color-picker__slider" @pointerdown=${this.handleHueDrag} @touchmove=${this.handleTouchMove}><span part="slider-handle hue-slider-handle" class="color-picker__slider-handle" style=${f({
       left: `${this.hue === 0 ? 0 : 100 / (360 / this.hue)}%`
-    })}
-                role="slider"
-                aria-label="hue"
-                aria-orientation="horizontal"
-                aria-valuemin="0"
-                aria-valuemax="360"
-                aria-valuenow=${`${Math.round(this.hue)}`}
-                tabindex=${x(this.disabled ? void 0 : "0")}
-                @keydown=${this.handleHueKeyDown}
-              ></span>
-            </div>
-
-            ${d(
+    })} role="slider" aria-label="hue" aria-orientation="horizontal" aria-valuemin="0" aria-valuemax="360" aria-valuenow=${`${Math.round(this.hue)}`} tabindex=${x(this.disabled ? void 0 : "0")} @keydown=${this.handleHueKeyDown}></span></div>${d(
       this.opacity,
-      () => h`
-                <div
-                  part="slider opacity-slider"
-                  class="color-picker__alpha color-picker__slider color-picker__transparent-bg"
-                  @pointerdown=${this.handleAlphaDrag}
-                  @touchmove=${this.handleTouchMove}
-                >
-                  <div
-                    class="color-picker__alpha-gradient"
-                    style=${m({
+      () => h`<div part="slider opacity-slider" class="color-picker__alpha color-picker__slider color-picker__transparent-bg" @pointerdown=${this.handleAlphaDrag} @touchmove=${this.handleTouchMove}><div class="color-picker__alpha-gradient" style=${f({
         backgroundImage: `linear-gradient(
                         to right,
                         ${this.getHexString(
@@ -949,108 +467,33 @@ let r = class extends V {
           100
         )} 100%
                       )`
-      })}
-                  ></div>
-                  <span
-                    part="slider-handle opacity-slider-handle"
-                    class="color-picker__slider-handle"
-                    style=${m({
+      })}></div><span part="slider-handle opacity-slider-handle" class="color-picker__slider-handle" style=${f({
         left: `${this.alpha}%`
-      })}
-                    role="slider"
-                    aria-label="alpha"
-                    aria-orientation="horizontal"
-                    aria-valuemin="0"
-                    aria-valuemax="100"
-                    aria-valuenow=${Math.round(this.alpha)}
-                    tabindex=${x(this.disabled ? void 0 : "0")}
-                    @keydown=${this.handleAlphaKeyDown}
-                  ></span>
-                </div>
-              `
-    )}
-          </div>
-
-          <div class="color-picker__preview__container">
-            <button
-              type="button"
-              part="preview"
-              class=${b({
+      })} role="slider" aria-label="alpha" aria-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-valuenow=${Math.round(this.alpha)} tabindex=${x(this.disabled ? void 0 : "0")} @keydown=${this.handleAlphaKeyDown}></span></div>`
+    )}</div><div class="color-picker__preview__container"><button type="button" part="preview" class=${b({
       "color-picker__preview": !0,
       "color-picker__preview--button": this.variant === "button",
       "color-picker__preview--empty": this.isEmpty,
       "color-picker__preview__transparent-bg": this.isEmpty
-    })}
-              aria-label=${this.localize.term("copy")}
-              style=${m({
+    })} aria-label=${this.localize.term("copy")} style=${f({
       "--preview-color": this.getHexString(
         this.hue,
         this.saturation,
         this.brightness,
         this.alpha
       )
-    })}
-              @click=${this.handleCopy}
-            ></button>
-
-            ${d(
+    })} @click=${this.handleCopy}></button>${d(
       this.clearable,
-      () => h`
-                <cx-button
-                  variant="text"
-                  class="color-picker__clear-button"
-                  part="clear-button"
-                  size="small"
-                  exportparts="
+      () => h`<cx-button variant="text" class="color-picker__clear-button" part="clear-button" size="small" exportparts="
                     base:clear-button__base,
                     prefix:clear-button__prefix,
                     label:clear-button__label,
                     suffix:clear-button__suffix,
                     caret:clear-button__caret
-                  "
-                  @click=${this.handleClear}
-                  @cx-blur=${this.stopNestedEventPropagation}
-                  @cx-focus=${this.stopNestedEventPropagation}
-                >
-                  <cx-icon
-                    class="color-picker__clear-button__icon"
-                    name="close"
-                  ></cx-icon>
-                </cx-button>
-              `
-    )}
-          </div>
-        </div>
-
-        <div class="color-picker__user-input__container" aria-live="polite">
-          <cx-input
-            class="color-picker__input_color"
-            part="input"
-            type="text"
-            name=${this.name}
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
-            value=${this.isEmpty ? "" : this.inputColorValue}
-            ?required=${this.required}
-            ?disabled=${this.disabled}
-            aria-label=${this.localize.term("currentValue")}
-            @keydown=${this.handleInputKeyDown}
-            @cx-change=${this.handleInputChange}
-            @cx-input=${this.handleInputInput}
-            @cx-invalid=${this.handleInputInvalid}
-            @cx-blur=${this.stopNestedEventPropagation}
-            @cx-focus=${this.stopNestedEventPropagation}
-          ></cx-input>
-          ${d(
+                  " @click=${this.handleClear} @cx-blur=${this.stopNestedEventPropagation} @cx-focus=${this.stopNestedEventPropagation}><cx-icon class="color-picker__clear-button__icon" name="close"></cx-icon></cx-button>`
+    )}</div></div><div class="color-picker__user-input__container" aria-live="polite"><cx-input class="color-picker__input_color" part="input" type="text" name=${this.name} autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" value=${this.isEmpty ? "" : this.inputColorValue} ?required=${this.required} ?disabled=${this.disabled} aria-label=${this.localize.term("currentValue")} @keydown=${this.handleInputKeyDown} @cx-change=${this.handleInputChange} @cx-input=${this.handleInputInput} @cx-invalid=${this.handleInputInvalid} @cx-blur=${this.stopNestedEventPropagation} @cx-focus=${this.stopNestedEventPropagation}></cx-input>${d(
       this.opacity,
-      () => h`<cx-input
-                class="color-picker__input_opacity"
-                part="opacity-input"
-                type="text"
-                name=${this.name}
-                .maskBlocks=${{
+      () => h`<cx-input class="color-picker__input_opacity" part="opacity-input" type="text" name=${this.name} .maskBlocks=${{
         num: {
           mask: Number,
           max: 100,
@@ -1058,127 +501,49 @@ let r = class extends V {
           scale: 0,
           thousandsSeparator: ""
         }
-      }}
-                mask="num%"
-                no-spin-buttons
-                value=${this.isEmpty ? "%" : a}
-                ?required=${this.required}
-                ?disabled=${this.disabled}
-                aria-label=${this.localize.term("opacity")}
-                @keydown=${this.handleOpacityInputKeyDown}
-                @cx-change=${this.handleOpacityInputChange}
-                @cx-input=${this.handleOpacityInputInput}
-                @cx-invalid=${this.handleInputInvalid}
-                @cx-blur=${this.stopNestedEventPropagation}
-                @cx-focus=${this.stopNestedEventPropagation}
-              ></cx-input>`
-    )}
-
-          <cx-button-group>
-            ${d(
+      }} mask="num%" no-spin-buttons value=${this.isEmpty ? "%" : a} ?required=${this.required} ?disabled=${this.disabled} aria-label=${this.localize.term("opacity")} @keydown=${this.handleOpacityInputKeyDown} @cx-change=${this.handleOpacityInputChange} @cx-input=${this.handleOpacityInputInput} @cx-invalid=${this.handleInputInvalid} @cx-blur=${this.stopNestedEventPropagation} @cx-focus=${this.stopNestedEventPropagation}></cx-input>`
+    )}<cx-button-group>${d(
       !this.noFormatToggle,
-      () => h`
-                <cx-button
-                  part="format-button"
-                  aria-label=${this.localize.term("toggleColorFormat")}
-                  exportparts="
+      () => h`<cx-button part="format-button" aria-label=${this.localize.term("toggleColorFormat")} exportparts="
                     base:format-button__base,
                     prefix:format-button__prefix,
                     label:format-button__label,
                     suffix:format-button__suffix,
                     caret:format-button__caret
-                  "
-                  @click=${this.handleFormatToggle}
-                  @cx-blur=${this.stopNestedEventPropagation}
-                  @cx-focus=${this.stopNestedEventPropagation}
-                >
-                  ${this.setLetterCase(this.format)}
-                </cx-button>
-              `
+                  " @click=${this.handleFormatToggle} @cx-blur=${this.stopNestedEventPropagation} @cx-focus=${this.stopNestedEventPropagation}>${this.setLetterCase(this.format)}</cx-button>`
     )}
             ${d(
       $,
-      () => h`
-                <cx-button
-                  part="eye-dropper-button"
-                  exportparts="
+      () => h`<cx-button part="eye-dropper-button" exportparts="
                 base:eye-dropper-button__base,
                 prefix:eye-dropper-button__prefix,
                 label:eye-dropper-button__label,
                 suffix:eye-dropper-button__suffix,
                 caret:eye-dropper-button__caret
-              "
-                  @click=${this.handleEyeDropper}
-                  @cx-blur=${this.stopNestedEventPropagation}
-                  @cx-focus=${this.stopNestedEventPropagation}
-                >
-                  <cx-icon
-                    name="colorize"
-                    label=${this.localize.term("selectAColorFromTheScreen")}
-                  ></cx-icon>
-                </cx-button>
-              `
-    )}
-          </cx-button-group>
-        </div>
-
-        ${d(
+              " @click=${this.handleEyeDropper} @cx-blur=${this.stopNestedEventPropagation} @cx-focus=${this.stopNestedEventPropagation}><cx-icon name="colorize" label=${this.localize.term("selectAColorFromTheScreen")}></cx-icon></cx-button>`
+    )}</cx-button-group></div>${d(
       i.length > 0,
-      () => h`
-            <div part="swatches" class="color-picker__swatches">
-              ${this.renderSwatches(i)}
-            </div>
-          `
+      () => h`<div part="swatches" class="color-picker__swatches">${this.renderSwatches(i)}</div>`
     )}
         ${d(
       s.length > 0 || this.creatable,
-      () => h`
-            <div class="color-picker__customSwatches-label">
-              ${this.localize.term("custom")}
+      () => h`<div class="color-picker__customSwatches-label">${this.localize.term("custom")}
               ${d(
         this.creatable,
-        () => h`<cx-button
-                    part="swatch-add-button"
-                    size="small"
-                    @click=${this.handleSwatchAdd}
-                    >${this.localize.term("addCurrent")}</cx-button
-                  >`
-      )}
-            </div>
-          `
+        () => h`<cx-button part="swatch-add-button" size="small" @click=${this.handleSwatchAdd}>${this.localize.term("addCurrent")}</cx-button>`
+      )}</div>`
     )}
         ${d(
       s.length > 0,
-      () => h`
-            <div part="custom-swatches" class="color-picker__customSwatches">
-              ${this.renderSwatches(s)}
-            </div>
-          `
+      () => h`<div part="custom-swatches" class="color-picker__customSwatches">${this.renderSwatches(s)}</div>`
     )}
         ${d(
       this.loading,
-      () => h`<div part="loading-spinner" class="color-picker__spinner">
-              <cx-spinner></cx-spinner>
-            </div>`
-    )}
-      </div>
-    `, p = this.variant === "button" ? h`<cx-button
-            part="trigger"
-            class=${b({
+      () => h`<div part="loading-spinner" class="color-picker__spinner"><cx-spinner></cx-spinner></div>`
+    )}</div>`, p = this.variant === "button" ? h`<cx-button part="trigger" class=${b({
       "color-dropdown__trigger": !0,
       "color-dropdown__trigger--focused": this.hasFocus
-    })}
-            outline
-            aria-label=${this.label}
-            ?disabled=${this.disabled}
-            type="button"
-            size=${this.size}
-            @cx-blur=${this.stopNestedEventPropagation}
-          >
-            <div
-              slot="prefix"
-              part="preview"
-              class=${b({
+    })} outline aria-label=${this.label} ?disabled=${this.disabled} type="button" size=${this.size} @cx-blur=${this.stopNestedEventPropagation}><div slot="prefix" part="preview" class=${b({
       "color-picker__preview": !0,
       "color-picker__preview--button": !0,
       "color-picker__preview--empty": this.isEmpty,
@@ -1186,72 +551,36 @@ let r = class extends V {
       "color-picker__preview--medium": this.size === "medium",
       "color-picker__preview--small": this.size === "small",
       "color-picker__preview__transparent-bg": !0
-    })}
-              style=${m({
+    })} style=${f({
       color: this.getHexString(
         this.hue,
         this.saturation,
         this.brightness,
         this.alpha
       )
-    })}
-            ></div>
-            <slot
-              slot="suffix"
-              name="expand-icon"
-              part="expand-icon"
-              class="color-dropdown__trigger-icon"
-            >
-              <cx-icon name="expand_more"></cx-icon>
-            </slot>
-            <cx-visually-hidden>
-              <slot name="label">${this.label}</slot>
-            </cx-visually-hidden>
-          </cx-button>` : h`<button
-            part="trigger"
-            class=${b({
+    })}></div><slot slot="suffix" name="expand-icon" part="expand-icon" class="color-dropdown__trigger-icon"><cx-icon name="expand_more"></cx-icon></slot><cx-visually-hidden><slot name="label">${this.label}</slot></cx-visually-hidden></cx-button>` : h`<button part="trigger" class=${b({
       "color-picker__preview": !0,
       "color-picker__preview--empty": this.isEmpty,
       "color-picker__preview--large": this.size === "large",
       "color-picker__preview--medium": this.size === "medium",
       "color-picker__preview--small": this.size === "small",
       "color-picker__preview__transparent-bg": !0
-    })}
-            style=${m({
+    })} style=${f({
       color: this.getHexString(
         this.hue,
         this.saturation,
         this.brightness,
         this.alpha
       )
-    })}
-          >
-            <cx-visually-hidden>
-              <slot name="label">${this.label}</slot>
-            </cx-visually-hidden>
-          </button>`, v = d(
+    })}><cx-visually-hidden><slot name="label">${this.label}</slot></cx-visually-hidden></button>`, v = d(
       this.tooltip,
-      () => h`<cx-tooltip content=${this.tooltip}>
-          ${p}
-        </cx-tooltip>`,
+      () => h`<cx-tooltip content=${this.tooltip}>${p}</cx-tooltip>`,
       () => p
     );
-    return this.inline ? c : h`
-      <cx-dropdown
-        aria-disabled=${this.disabled ? "true" : "false"}
-        class=${b({
+    return this.inline ? c : h`<cx-dropdown aria-disabled=${this.disabled ? "true" : "false"} class=${b({
       "color-dropdown": !0,
       "color-dropdown--opened": !!this.dropdown?.open
-    })}
-        .containing-element=${this}
-        ?disabled=${this.disabled}
-        ?hoist=${this.hoist}
-        @cx-after-hide=${this.handleAfterHide}
-      >
-        <slot name="trigger" slot="trigger">${v}</slot>
-        ${c}
-      </cx-dropdown>
-    `;
+    })} .containing-element=${this} ?disabled=${this.disabled} ?hoist=${this.hoist} @cx-after-hide=${this.handleAfterHide}><slot name="trigger" slot="trigger">${v}</slot>${c}</cx-dropdown>`;
   }
 };
 r.styles = [S, T];