@orangelogic/design-system 3.18.0 → 3.19.0

package/library/components/color-picker.js

@@ -1,66 +1,406 @@
-import { n as l, C as D } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as E } from "../chunks/component.styles.CAS3c9pM.js";
-import { c as I } from "../chunks/custom-element.L4WJXn1j.js";
-import { d as S } from "../chunks/debounce.DaHuiSGU.js";
-import { d as H } from "../chunks/default-value.COZopaet.js";
-import { d as w } from "../chunks/drag.DenOh3AE.js";
-import { F as M } from "../chunks/form.DN2v7-DH.js";
-import { L as O } from "../chunks/i18n.CNnI4-0K.js";
-import { c as u } from "../chunks/math.DuKzLacZ.js";
-import { w as $ } from "../chunks/watch.DJF5K-8U.js";
-import { i as A, x as h } from "../chunks/lit-element.jLBm65_O.js";
+import { n, C as T } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as A } from "../chunks/component.styles.CAS3c9pM.js";
+import { M as j, s as D, G as $, C as v, a as b, p as Z, b as tt, c as F, i as et } from "../chunks/gradient.CIzq8fOU.js";
+import { c as O } from "../chunks/custom-element.L4WJXn1j.js";
+import { d as q } from "../chunks/debounce.DaHuiSGU.js";
+import { d as it } from "../chunks/default-value.COZopaet.js";
+import { d as G } from "../chunks/drag.DenOh3AE.js";
+import { F as rt } from "../chunks/form.DN2v7-DH.js";
+import { L as N } from "../chunks/i18n.rtxrs1c1.js";
+import { c as d } from "../chunks/math.DuKzLacZ.js";
+import { w as S } from "../chunks/watch.DJF5K-8U.js";
+import { i as L, x as c } from "../chunks/lit-element.jLBm65_O.js";
 import { r as g } from "../chunks/state.CSDxrqLd.js";
-import { t as P } from "../chunks/event-options.CYHYGOd8.js";
-import { e as b } from "../chunks/query.BBf1UFkC.js";
+import { t as at } from "../chunks/event-options.CYHYGOd8.js";
+import { e as k } from "../chunks/query.BBf1UFkC.js";
 import { e as _ } from "../chunks/class-map.BiVq-cVR.js";
-import { o as y } from "../chunks/if-defined.BRoBj_Rp.js";
-import { o as f } from "../chunks/style-map.llVFPd__.js";
-import { n as d } from "../chunks/when.Dr1es41R.js";
-import { C as B } from "../chunks/button.DCyoZrRj.js";
-import L from "./button-group.js";
-import T from "./dropdown.js";
-import { C as N } from "../chunks/icon.BLXWp6CU.js";
-import { C as K } from "../chunks/input.Csf-S2nB.js";
-import R from "./spinner.js";
-import q from "./visually-hidden.js";
-import { T as k } from "../chunks/index.C1chwzNp.js";
-var m = /* @__PURE__ */ ((t) => (t.Hex = "hex", t.Rgb = "rgb", t.Hsl = "hsl", t.Hsv = "hsv", t))(m || {});
-const G = A`: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:var(--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;gap:var(--cx-spacing-2x-small);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{--cx-button-text-transform:none;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 j = Object.defineProperty, U = Object.getOwnPropertyDescriptor, F = (t) => {
+import { o as I } from "../chunks/if-defined.BRoBj_Rp.js";
+import { c as H } from "../chunks/repeat.CFjcER6_.js";
+import { o as m } from "../chunks/style-map.llVFPd__.js";
+import { n as u } from "../chunks/when.Dr1es41R.js";
+import { C as U } from "../chunks/button.D1YIxtv-.js";
+import ot from "./button-group.js";
+import W from "./dropdown.js";
+import { C as X } from "../chunks/icon.BLXWp6CU.js";
+import { C as Y } from "../chunks/input.D1FFprPl.js";
+import { C as st } from "../chunks/option.CyorNG0S.js";
+import lt from "./select.js";
+import nt from "./spinner.js";
+import ct from "./tab.js";
+import { C as pt } from "../chunks/tab-group.C98CWzEH.js";
+import dt from "./tab-panel.js";
+import ht from "./visually-hidden.js";
+import { C as ut } from "../chunks/icon-button.CbUddcgI.js";
+import { T as x } from "../chunks/index.C1chwzNp.js";
+const gt = L`: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:var(--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;gap:var(--cx-spacing-2x-small);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{--cx-button-text-transform:none;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}.color-picker__tabs{--tab-group-top-gap:0;--tab-panel-padding:0}.color-picker__gradient-panel{gap:var(--cx-spacing-small);padding:var(--cx-spacing-small);flex-direction:column;display:flex}.color-picker__gradient-options{gap:var(--cx-spacing-2x-small);align-items:start;display:flex}.color-picker__gradient-type-select,.color-picker__gradient-angle{flex:1 1 0;min-width:0}`, mt = L`:host{--gradient-track-height:28px;--gradient-marker-size:20px;--gradient-marker-tail:6px;display:block}.gradient-slider{height:calc(var(--gradient-track-height) + var(--gradient-marker-size) + var(--gradient-marker-tail));margin:0 calc(var(--gradient-marker-size) / 2);forced-color-adjust:none;position:relative}.gradient-slider__track,.gradient-slider__checkerboard{height:var(--gradient-track-height);border-radius:var(--cx-border-radius-medium);position:absolute;bottom:0;left:0;right:0}.gradient-slider__track{box-shadow:inset 0 0 0 1px var(--cx-color-neutral-300)}.gradient-slider__checkerboard{pointer-events:none;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}.gradient-slider__marker{width:var(--gradient-marker-size);height:calc(var(--gradient-marker-size) + var(--gradient-marker-tail));margin-left:calc(var(--gradient-marker-size) / -2);cursor:grab;background:0 0;border:none;padding:0;display:block;position:absolute;top:0}.gradient-slider__marker:before,.gradient-slider__marker:after{pointer-events:none}.gradient-slider__marker:before{width:var(--gradient-marker-size);height:var(--gradient-marker-size);content:"";border:3px solid var(--cx-color-neutral-0);border-radius:var(--cx-border-radius-small);box-shadow:0 0 0 1px var(--cx-color-neutral-300);box-sizing:border-box;background-color:currentColor;position:absolute;top:0;left:0}.gradient-slider__marker:after{top:calc(var(--gradient-marker-size) - var(--gradient-marker-tail) / 2);left:calc(50% - var(--gradient-marker-tail) / 2);width:var(--gradient-marker-tail);height:var(--gradient-marker-tail);content:"";background:var(--cx-color-neutral-0);border-right:1px solid var(--cx-color-neutral-300);border-bottom:1px solid var(--cx-color-neutral-300);position:absolute;transform:rotate(45deg)}.gradient-slider__marker--active:before{box-shadow:0 0 0 2px var(--cx-color-primary-600)}.gradient-slider__marker--active{z-index:1}.gradient-slider__marker--dragging{cursor:grabbing}.gradient-slider__marker:focus-visible{outline:none}.gradient-slider__marker:focus-visible:before{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}:host([disabled]) .gradient-slider{opacity:.5}:host([disabled]) .gradient-slider__marker{cursor:not-allowed}`;
+var ft = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, V = (t, e, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? vt(e, i) : e, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (a = (r ? p(e, i, a) : p(a)) || a);
+  return r && a && ft(e, i, a), a;
+};
+const bt = 1, xt = 10;
+let y = class extends T {
+  constructor() {
+    super(...arguments), this.localize = new N(this), this.stops = [], this.activeStopId = "", this.disabled = !1, this.draggingStopId = "";
+  }
+  /** False once the gradient is down to the minimum number of stops. */
+  get canRemoveStop() {
+    return this.stops.length > j;
+  }
+  /**
+   * Selects a stop, making it the target of the picker's color controls.
+   * @param id - The stop to select.
+   */
+  selectStop(t) {
+    this.disabled || t === this.activeStopId || this.emit("cx-gradient-stop-select", { detail: { id: t } });
+  }
+  /**
+   * Moves a stop to a new position and reports the resulting set of stops.
+   * @param id - The stop to move.
+   * @param position - The new position, clamped to 0-100.
+   * @param commit - Whether this is the final position rather than an intermediate drag frame.
+   */
+  moveStop(t, e, i) {
+    const r = this.stops.map(
+      (a) => a.id === t ? { ...a, position: d(e, 0, 100) } : a
+    );
+    this.emit("cx-gradient-stop-change", { detail: { stops: r } }), i && this.emit("cx-gradient-change", { detail: { stops: r } });
+  }
+  /**
+   * Removes a stop, refusing when doing so would leave fewer than the minimum.
+   * @param id - The stop to remove.
+   */
+  removeStop(t) {
+    if (this.disabled || !this.canRemoveStop)
+      return;
+    const e = this.stops.filter((i) => i.id !== t);
+    this.emit("cx-gradient-stop-remove", { detail: { id: t } }), this.emit("cx-gradient-change", { detail: { stops: e } });
+  }
+  /**
+   * Converts a pointer offset within the bar into a stop position.
+   * @param offsetX - The pointer's horizontal offset from the bar's left edge.
+   * @param trackWidth - The bar's rendered width.
+   * @returns The equivalent position, 0-100.
+   */
+  getPositionFromOffset(t, e) {
+    return e === 0 ? 0 : d(t / e * 100, 0, 100);
+  }
+  handleMarkerPointerDown(t) {
+    if (this.disabled)
+      return;
+    t.preventDefault();
+    const e = t.currentTarget, i = e.dataset.stopId ?? "", r = this.shadowRoot.querySelector(
+      '[part~="track"]'
+    ), a = r.getBoundingClientRect(), { width: l } = a;
+    let f = this.stops.find((P) => P.id === i)?.position ?? 0;
+    const h = t.clientX - (a.left + f / 100 * l);
+    e.focus(), this.selectStop(i), this.draggingStopId = i, e.hasPointerCapture(t.pointerId) && e.releasePointerCapture(t.pointerId), G(r, {
+      onMove: (P) => {
+        f = this.getPositionFromOffset(P - h, l), this.moveStop(i, f, !1);
+      },
+      onStop: () => {
+        this.draggingStopId = "", this.moveStop(i, f, !0);
+      }
+    });
+  }
+  handleMarkerKeyDown(t) {
+    if (this.disabled)
+      return;
+    const i = t.currentTarget.dataset.stopId ?? "", r = this.stops.find((l) => l.id === i);
+    if (!r)
+      return;
+    const a = t.shiftKey ? xt : bt;
+    if (t.key === "ArrowLeft" || t.key === "ArrowDown") {
+      t.preventDefault(), this.selectStop(i), this.moveStop(i, r.position - a, !0);
+      return;
+    }
+    if (t.key === "ArrowRight" || t.key === "ArrowUp") {
+      t.preventDefault(), this.selectStop(i), this.moveStop(i, r.position + a, !0);
+      return;
+    }
+    if (t.key === "Home") {
+      t.preventDefault(), this.selectStop(i), this.moveStop(i, 0, !0);
+      return;
+    }
+    if (t.key === "End") {
+      t.preventDefault(), this.selectStop(i), this.moveStop(i, 100, !0);
+      return;
+    }
+    (t.key === "Delete" || t.key === "Backspace") && (t.preventDefault(), this.removeStop(i));
+  }
+  /**
+   * Builds the CSS gradient shown on the bar. The preview is always left-to-right regardless
+   * of the gradient's real type, because the bar represents the gradient line itself rather
+   * than its rendered orientation.
+   * @param sortedStops - The stops in ascending position order.
+   * @returns A CSS gradient string.
+   */
+  getTrackBackground(t) {
+    return t.length === 0 ? "transparent" : `linear-gradient(to right, ${t.map((i) => `${i.color} ${i.position}%`).join(", ")})`;
+  }
+  render() {
+    const t = D(this.stops);
+    return c`<div part="base" class="gradient-slider"><div class="gradient-slider__checkerboard" aria-hidden="true"></div><div part="track" class="gradient-slider__track" style=${m({
+      backgroundImage: this.getTrackBackground(t)
+    })}></div>${H(
+      t,
+      (e) => e.id,
+      (e, i) => c`<button part="marker" class=${_({
+        "gradient-slider__marker": !0,
+        "gradient-slider__marker--active": e.id === this.activeStopId,
+        "gradient-slider__marker--dragging": e.id === this.draggingStopId
+      })} type="button" data-stop-id=${e.id} style=${m({
+        color: e.color,
+        left: `${e.position}%`
+      })} role="slider" aria-label=${this.localize.term(
+        "gradientStopNumber",
+        i + 1
+      )} aria-valuemin="0" aria-valuemax="100" aria-valuenow=${Math.round(e.position)} aria-valuetext=${`${Math.round(e.position)}%, ${e.color}`} ?disabled=${this.disabled} @pointerdown=${this.handleMarkerPointerDown} @keydown=${this.handleMarkerKeyDown}></button>`
+    )}</div>`;
+  }
+};
+y.styles = [A, mt];
+V([
+  n({ type: Array })
+], y.prototype, "stops", 2);
+V([
+  n({ attribute: "active-stop-id", type: String })
+], y.prototype, "activeStopId", 2);
+V([
+  n({ reflect: !0, type: Boolean })
+], y.prototype, "disabled", 2);
+V([
+  g()
+], y.prototype, "draggingStopId", 2);
+y = V([
+  O("cx-gradient-slider")
+], y);
+const _t = L`:host{--stop-swatch-size:28px;--stop-list-max-height:auto;display:block}.stop-list{gap:var(--cx-spacing-2x-small);flex-direction:column;display:flex}.stop-list__rows{gap:var(--cx-spacing-2x-small);max-height:var(--stop-list-max-height);flex-direction:column;display:flex;overflow-y:auto}.stop-list__header{align-items:center;display:flex}.stop-list__add{display:block}.stop-list__add::part(base){width:100%}.stop-list__title{font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-semibold);color:var(--cx-color-neutral-900)}.stop-list__row{gap:var(--cx-spacing-2x-small);padding:var(--cx-spacing-2x-small);background:var(--cx-color-neutral-50);border-radius:var(--cx-border-radius-medium);cursor:pointer;border:1px solid #0000;grid-template-columns:1fr auto auto;align-items:center;display:grid}.stop-list__row--active{border-color:var(--cx-color-primary-600)}.stop-list__hex{min-width:0}.stop-list__numbers{gap:var(--cx-spacing-2x-small);grid-column:1/-1;display:flex}.stop-list__swatch{width:var(--stop-swatch-size);height:var(--stop-swatch-size);cursor:pointer;border:1px solid var(--cx-color-neutral-300);border-radius:var(--cx-border-radius-small);background:0 0;padding:0;display:block;position:relative;overflow:hidden}.stop-list__swatch--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,-4px -4px,4px 4px;background-size:8px 8px}.stop-list__swatch-color{position:absolute;inset:0}.stop-list__swatch:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.stop-list__picker-dropdown{flex:none}.stop-list__opacity,.stop-list__position{flex:1 1 0;min-width:0}.stop-list__delete{flex:none}:host([disabled]) .stop-list__row,:host([disabled]) .stop-list__swatch{cursor:not-allowed}`;
+var yt = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, M = (t, e, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? wt(e, i) : e, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (a = (r ? p(e, i, a) : p(a)) || a);
+  return r && a && yt(e, i, a), a;
+};
+const kt = 100;
+let w = class extends T {
+  constructor() {
+    super(...arguments), this.localize = new N(this), this.stops = [], this.activeStopId = "", this.disabled = !1;
+  }
+  /** False once the gradient is down to the minimum number of stops. */
+  get canRemoveStop() {
+    return this.stops.length > j;
+  }
+  /**
+   * Reads a row's stop id from the element that raised an event.
+   * @param event - The event whose `currentTarget` carries the id.
+   * @returns The stop id, or an empty string when the attribute is missing.
+   */
+  getStopId(t) {
+    return t.currentTarget.dataset.stopId ?? "";
+  }
+  /**
+   * Replaces one stop and reports the resulting set.
+   * @param id - The stop to change.
+   * @param changes - The fields to overwrite.
+   */
+  commitStopChange(t, e) {
+    const i = this.stops.map(
+      (r) => r.id === t ? { ...r, ...e } : r
+    );
+    this.emit("cx-gradient-change", { detail: { stops: i } });
+  }
+  handleRowClick(t) {
+    const e = this.getStopId(t);
+    this.disabled || e === this.activeStopId || this.emit("cx-gradient-stop-select", { detail: { id: e } });
+  }
+  handleAddClick() {
+    if (this.disabled)
+      return;
+    const t = D(this.stops), e = t[t.length - 1], i = t[t.length - 2], r = i ? (i.position + e.position) / 2 : kt;
+    this.emit("cx-gradient-stop-add", {
+      detail: { color: e?.color ?? "#ffffff", position: r }
+    });
+  }
+  handleDropdownClick(t) {
+    t.target.closest('[slot="trigger"]') || t.stopPropagation();
+  }
+  handlePickerInput(t) {
+    t.stopPropagation();
+    const e = t.target, i = e.dataset.stopId ?? "";
+    if (!this.stops.find((l) => l.id === i) || !e.value)
+      return;
+    const a = new x(e.value);
+    a.isValid && this.commitStopChange(i, { color: a.toRgbString() });
+  }
+  handleDeleteClick(t) {
+    if (t.stopPropagation(), this.disabled || !this.canRemoveStop)
+      return;
+    const e = this.getStopId(t), i = this.stops.filter((r) => r.id !== e);
+    this.emit("cx-gradient-stop-remove", { detail: { id: e } }), this.emit("cx-gradient-change", { detail: { stops: i } });
+  }
+  handleHexChange(t) {
+    t.stopPropagation();
+    const e = this.getStopId(t), i = t.target, r = this.stops.find((p) => p.id === e);
+    if (!r)
+      return;
+    const a = new x(i.value);
+    if (!a.isValid) {
+      i.value = new x(r.color).toHexString();
+      return;
+    }
+    const l = new x(r.color).getAlpha();
+    this.commitStopChange(e, {
+      color: a.setAlpha(l).toRgbString()
+    });
+  }
+  handleOpacityChange(t) {
+    t.stopPropagation();
+    const e = this.getStopId(t), i = t.target, r = this.stops.find((l) => l.id === e);
+    if (!r)
+      return;
+    const a = Number.parseInt(i.value.replace(/\D/g, ""), 10);
+    if (Number.isNaN(a)) {
+      i.value = `${Math.round(new x(r.color).getAlpha() * 100)}%`;
+      return;
+    }
+    this.commitStopChange(e, {
+      color: new x(r.color).setAlpha(d(a, 0, 100) / 100).toRgbString()
+    });
+  }
+  handlePositionChange(t) {
+    t.stopPropagation();
+    const e = this.getStopId(t), i = t.target, r = this.stops.find((l) => l.id === e);
+    if (!r)
+      return;
+    const a = Number.parseInt(i.value.replace(/\D/g, ""), 10);
+    if (Number.isNaN(a)) {
+      i.value = `${Math.round(r.position)}%`;
+      return;
+    }
+    this.commitStopChange(e, { position: d(a, 0, 100) });
+  }
+  /**
+   * Renders one stop's row of fields.
+   * @param stop - The stop this row edits.
+   * @param index - The stop's position in the sorted list, used for labelling.
+   */
+  renderRow(t, e) {
+    const i = new x(t.color), r = this.localize.term("gradientStopNumber", e + 1);
+    return c`<div part="row" class=${_({
+      "stop-list__row": !0,
+      "stop-list__row--active": t.id === this.activeStopId
+    })} data-stop-id=${t.id} role="group" aria-label=${r} @click=${this.handleRowClick}><cx-input part="hex-input" class="stop-list__hex" type="text" size="small" label=${this.localize.term("hex")} data-stop-id=${t.id} value=${i.toHexString().toUpperCase()} autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ?disabled=${this.disabled} @cx-change=${this.handleHexChange}></cx-input><cx-dropdown class="stop-list__picker-dropdown" hoist distance="4" placement="bottom-start" stay-open-on-select ?disabled=${this.disabled} @click=${this.handleDropdownClick}><button slot="trigger" part="swatch" class="stop-list__swatch stop-list__swatch--transparent-bg" type="button" data-stop-id=${t.id} aria-label=${this.localize.term("color")} ?disabled=${this.disabled} @click=${this.handleRowClick}><span class="stop-list__swatch-color" style=${m({ backgroundColor: t.color })}></span></button><cx-color-picker part="stop-color-picker" class="stop-list__picker" inline opacity data-stop-id=${t.id} value=${t.color} label=${r} @cx-input=${this.handlePickerInput} @cx-change=${this.handlePickerInput}></cx-color-picker></cx-dropdown><cx-icon-button part="delete-button" class="stop-list__delete" name="delete" label=${this.localize.term("removeGradientStop")} data-stop-id=${t.id} ?disabled=${this.disabled || !this.canRemoveStop} @click=${this.handleDeleteClick}></cx-icon-button><div class="stop-list__numbers"><cx-input part="opacity-input" class="stop-list__opacity" type="text" size="small" label=${this.localize.term("opacity")} data-stop-id=${t.id} .maskBlocks=${{
+      num: {
+        mask: Number,
+        max: 100,
+        min: 0,
+        scale: 0,
+        thousandsSeparator: ""
+      }
+    }} mask="num%" no-spin-buttons value=${`${Math.round(i.getAlpha() * 100)}%`} ?disabled=${this.disabled} @cx-change=${this.handleOpacityChange}></cx-input><cx-input part="position-input" class="stop-list__position" type="text" size="small" label=${this.localize.term("position")} data-stop-id=${t.id} .maskBlocks=${{
+      num: {
+        mask: Number,
+        max: 100,
+        min: 0,
+        scale: 0,
+        thousandsSeparator: ""
+      }
+    }} mask="num%" no-spin-buttons value=${`${Math.round(t.position)}%`} ?disabled=${this.disabled} @cx-change=${this.handlePositionChange}></cx-input></div></div>`;
+  }
+  render() {
+    const t = D(this.stops);
+    return c`<div part="base" class="stop-list"><div part="header" class="stop-list__header"><span class="stop-list__title">${this.localize.term("gradientStops")}</span></div><div class="stop-list__rows">${H(
+      t,
+      (e) => e.id,
+      (e, i) => this.renderRow(e, i)
+    )}</div><cx-button part="add-button" class="stop-list__add" size="small" ?disabled=${this.disabled} @click=${this.handleAddClick}><cx-icon slot="prefix" name="add"></cx-icon>${this.localize.term("addGradientStop")}</cx-button></div>`;
+  }
+};
+w.styles = [A, _t];
+w.dependencies = {
+  "cx-button": U,
+  "cx-dropdown": W,
+  "cx-icon": X,
+  "cx-icon-button": ut,
+  "cx-input": Y
+};
+M([
+  n({ type: Array })
+], w.prototype, "stops", 2);
+M([
+  n({ attribute: "active-stop-id", type: String })
+], w.prototype, "activeStopId", 2);
+M([
+  n({ reflect: !0, type: Boolean })
+], w.prototype, "disabled", 2);
+w = M([
+  O("cx-gradient-stop-list")
+], w);
+var $t = Object.defineProperty, St = Object.getOwnPropertyDescriptor, J = (t) => {
   throw TypeError(t);
-}, o = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? U(e, i) : e, c = t.length - 1, p; c >= 0; c--)
-    (p = t[c]) && (a = (s ? p(e, i, a) : p(a)) || a);
-  return s && a && j(e, i, a), a;
-}, z = (t, e, i) => e.has(t) || F("Cannot " + i), W = (t, e, i) => (z(t, e, "read from private field"), e.get(t)), X = (t, e, i) => e.has(t) ? F("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), C = (t, e, i, s) => (z(t, e, "write to private field"), e.set(t, i), i), x;
-const V = "EyeDropper" in window;
-let r = class extends D {
+}, s = (t, e, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? St(e, i) : e, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (a = (r ? p(e, i, a) : p(a)) || a);
+  return r && a && $t(e, i, a), a;
+}, Q = (t, e, i) => e.has(t) || J("Cannot " + i), Ct = (t, e, i) => (Q(t, e, "read from private field"), e.get(t)), Vt = (t, e, i) => e.has(t) ? J("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), R = (t, e, i, r) => (Q(t, e, "write to private field"), e.set(t, i), i), C;
+const B = "EyeDropper" in window, E = "solid", z = "gradient", K = 90;
+let o = class extends T {
   constructor() {
-    super(), this.formControlController = new M(this), this.isSafeValue = !1, X(this, x, !1), this.localize = new O(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);
+    super(), this.formControlController = new rt(this), this.isSafeValue = !1, Vt(this, C, !1), this.localize = new N(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.gradientValue = {
+      angle: K,
+      stops: [],
+      type: $.Linear
+    }, this.activeStopId = "", this.parsedSwatches = [], this.parsedCustomSwatches = [], this.value = "", this.defaultValue = "", this.label = "", this.variant = "default", this.format = v.Hex, this.formats = [
+      v.Hex,
+      v.Rgb,
+      v.Hsl
+    ], this.emitFormat = void 0, this.inline = !1, this.gradient = !1, this.mode = b.Solid, this.gradientTypes = [$.Linear, $.Radial], 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 */
+  /**
+   * Gets the validity state object.
+   *
+   * The text input lives in the Solid tab's controls, so it is absent while the Gradient tab
+   * is showing. `FormControlController` still polls this, so fall back to the host's own
+   * validity rather than dereferencing a missing input.
+   */
   get validity() {
-    return this.input.validity;
+    return this.input?.validity ?? this.formValidity;
   }
   /** Gets the validation message */
   get validationMessage() {
-    return this.input.validationMessage;
+    return this.input?.validationMessage ?? "";
+  }
+  /**
+   * Validity for the states this component can judge without the text input: a required
+   * control needs a value.
+   */
+  get formValidity() {
+    const t = this.required && !this.value;
+    return {
+      badInput: !1,
+      customError: !1,
+      patternMismatch: !1,
+      rangeOverflow: !1,
+      rangeUnderflow: !1,
+      stepMismatch: !1,
+      tooLong: !1,
+      tooShort: !1,
+      typeMismatch: !1,
+      valid: !t,
+      valueMissing: t
+    };
   }
   runFirstUpdated() {
-    this.input.updateComplete.then(() => {
+    this.input?.updateComplete.then(() => {
       this.formControlController.updateValidity();
-    }), this.value && this.emitFormat !== this.format && this.syncValues();
+    }), this.value && this.emitFormat !== this.format && this.syncValues(), this.syncTabToMode();
   }
   handleCopy() {
-    this.input.select(), document.execCommand("copy"), this.previewButton.focus(), this.previewButton.classList.add("color-picker__preview-color--copied"), this.previewButton.addEventListener("animationend", () => {
-      this.previewButton.classList.remove(
-        "color-picker__preview-color--copied"
-      );
-    });
+    this.input?.select(), document.execCommand("copy");
+    const t = this.previewButton;
+    t && (t.focus(), t.classList.add("color-picker__preview-color--copied"), t.addEventListener("animationend", () => {
+      t.classList.remove("color-picker__preview-color--copied");
+    }));
   }
   handleFocusIn() {
     this.hasFocus = !0, this.emit("cx-focus");
@@ -70,10 +410,10 @@ let r = class extends D {
   }
   handleFormatToggle() {
     const t = [
-      m.Hex,
-      m.Rgb,
-      m.Hsl,
-      m.Hsv
+      v.Hex,
+      v.Rgb,
+      v.Hsl,
+      v.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");
   }
@@ -82,12 +422,12 @@ let r = class extends D {
       ".color-picker__slider.color-picker__alpha"
     ), i = e.querySelector(
       ".color-picker__slider-handle"
-    ), { width: s } = e.getBoundingClientRect();
-    let a = this.value, c = this.value;
-    i.focus(), t.preventDefault(), w(e, {
+    ), { width: r } = e.getBoundingClientRect();
+    let a = this.value, l = this.value;
+    i.focus(), t.preventDefault(), G(e, {
       initialEvent: t,
       onMove: (p) => {
-        this.alpha = u(p / s * 100, 0, 100), this.syncValues(), this.value !== c && (c = this.value, this.emit("cx-input"));
+        this.alpha = d(p / r * 100, 0, 100), this.syncValues(), this.value !== l && (l = this.value, this.emit("cx-input"));
       },
       onStop: () => {
         this.value !== a && (a = this.value, this.emit("cx-change"));
@@ -99,12 +439,12 @@ let r = class extends D {
       ".color-picker__slider.color-picker__hue"
     ), i = e.querySelector(
       ".color-picker__slider-handle"
-    ), { width: s } = e.getBoundingClientRect();
-    let a = this.value, c = this.value;
-    i.focus(), t.preventDefault(), w(e, {
+    ), { width: r } = e.getBoundingClientRect();
+    let a = this.value, l = this.value;
+    i.focus(), t.preventDefault(), G(e, {
       initialEvent: t,
       onMove: (p) => {
-        this.hue = u(p / s * 360, 0, 360), this.syncValues(), this.value !== c && (c = this.value, this.emit("cx-input"));
+        this.hue = d(p / r * 360, 0, 360), this.syncValues(), this.value !== l && (l = this.value, this.emit("cx-input"));
       },
       onStop: () => {
         this.value !== a && (a = this.value, this.emit("cx-change"));
@@ -116,40 +456,40 @@ let r = class extends D {
       ".color-picker__grid"
     ), i = e.querySelector(
       ".color-picker__grid-handle"
-    ), { height: s, width: a } = e.getBoundingClientRect();
-    let c = this.value, p = this.value;
-    i.focus(), t.preventDefault(), this.isDraggingGridHandle = !0, w(e, {
+    ), { height: r, width: a } = e.getBoundingClientRect();
+    let l = this.value, p = this.value;
+    i.focus(), t.preventDefault(), this.isDraggingGridHandle = !0, G(e, {
       initialEvent: t,
-      onMove: (v, n) => {
-        this.saturation = u(v / a * 100, 0, 100), this.brightness = u(100 - n / s * 100, 0, 100), this.syncValues(), this.value !== p && (p = this.value, this.emit("cx-input"));
+      onMove: (f, h) => {
+        this.saturation = d(f / a * 100, 0, 100), this.brightness = d(100 - h / r * 100, 0, 100), this.syncValues(), this.value !== p && (p = this.value, this.emit("cx-input"));
       },
       onStop: () => {
-        this.isDraggingGridHandle = !1, this.value !== c && (c = this.value, this.emit("cx-change"));
+        this.isDraggingGridHandle = !1, this.value !== l && (l = this.value, this.emit("cx-change"));
       }
     });
   }
   handleAlphaKeyDown(t) {
     const e = t.shiftKey ? 10 : 1, i = this.value;
-    t.key === "ArrowLeft" && (t.preventDefault(), this.alpha = u(this.alpha - e, 0, 100), this.syncValues()), t.key === "ArrowRight" && (t.preventDefault(), this.alpha = u(this.alpha + e, 0, 100), this.syncValues()), t.key === "Home" && (t.preventDefault(), this.alpha = 0, this.syncValues()), t.key === "End" && (t.preventDefault(), this.alpha = 100, this.syncValues()), this.value !== i && (this.emit("cx-change"), this.emit("cx-input"));
+    t.key === "ArrowLeft" && (t.preventDefault(), this.alpha = d(this.alpha - e, 0, 100), this.syncValues()), t.key === "ArrowRight" && (t.preventDefault(), this.alpha = d(this.alpha + e, 0, 100), this.syncValues()), t.key === "Home" && (t.preventDefault(), this.alpha = 0, this.syncValues()), t.key === "End" && (t.preventDefault(), this.alpha = 100, this.syncValues()), this.value !== i && (this.emit("cx-change"), this.emit("cx-input"));
   }
   handleHueKeyDown(t) {
     const e = t.shiftKey ? 10 : 1, i = this.value;
-    t.key === "ArrowLeft" && (t.preventDefault(), this.hue = u(this.hue - e, 0, 360), this.syncValues()), t.key === "ArrowRight" && (t.preventDefault(), this.hue = u(this.hue + e, 0, 360), this.syncValues()), t.key === "Home" && (t.preventDefault(), this.hue = 0, this.syncValues()), t.key === "End" && (t.preventDefault(), this.hue = 360, this.syncValues()), this.value !== i && (this.emit("cx-change"), this.emit("cx-input"));
+    t.key === "ArrowLeft" && (t.preventDefault(), this.hue = d(this.hue - e, 0, 360), this.syncValues()), t.key === "ArrowRight" && (t.preventDefault(), this.hue = d(this.hue + e, 0, 360), this.syncValues()), t.key === "Home" && (t.preventDefault(), this.hue = 0, this.syncValues()), t.key === "End" && (t.preventDefault(), this.hue = 360, this.syncValues()), this.value !== i && (this.emit("cx-change"), this.emit("cx-input"));
   }
   handleGridKeyDown(t) {
     const e = t.shiftKey ? 10 : 1, i = this.value;
-    t.key === "ArrowLeft" && (t.preventDefault(), this.saturation = u(this.saturation - e, 0, 100), this.syncValues()), t.key === "ArrowRight" && (t.preventDefault(), this.saturation = u(this.saturation + e, 0, 100), this.syncValues()), t.key === "ArrowUp" && (t.preventDefault(), this.brightness = u(this.brightness + e, 0, 100), this.syncValues()), t.key === "ArrowDown" && (t.preventDefault(), this.brightness = u(this.brightness - e, 0, 100), this.syncValues()), this.value !== i && (this.emit("cx-change"), this.emit("cx-input"));
+    t.key === "ArrowLeft" && (t.preventDefault(), this.saturation = d(this.saturation - e, 0, 100), this.syncValues()), t.key === "ArrowRight" && (t.preventDefault(), this.saturation = d(this.saturation + e, 0, 100), this.syncValues()), t.key === "ArrowUp" && (t.preventDefault(), this.brightness = d(this.brightness + e, 0, 100), this.syncValues()), t.key === "ArrowDown" && (t.preventDefault(), this.brightness = d(this.brightness - e, 0, 100), this.syncValues()), this.value !== i && (this.emit("cx-change"), this.emit("cx-input"));
   }
   handleInputChange(t) {
-    const e = t.target, i = this.value, s = this.getFormatFromValue(e.value);
-    s && s !== this.format && (this.format = s), t.stopPropagation(), this.input.value ? (this.setColor(e.value), this.syncValues(), this.input.value = this.inputColorValue) : this.value = "", this.value !== i && (this.emit("cx-change"), this.emit("cx-input"));
+    const e = t.target, i = this.value, r = this.getFormatFromValue(e.value);
+    r && r !== this.format && (this.format = r), t.stopPropagation(), this.input.value ? (this.setColor(e.value), this.syncValues(), this.input.value = this.inputColorValue) : this.value = "", this.value !== i && (this.emit("cx-change"), this.emit("cx-input"));
   }
   handleInputInput(t) {
     this.formControlController.updateValidity(), t.stopPropagation(), this.debouncedSetColor();
   }
   debouncedSetColor() {
     const t = this.getFormatFromValue(this.input.value);
-    t && t !== this.format && (C(this, x, !0), this.format = t), this.setColor(this.input.value, !1), this.inputOpacityValue = Math.round(this.alpha).toString();
+    t && t !== this.format && (R(this, C, !0), this.format = t), this.setColor(this.input.value, !1), this.inputOpacityValue = Math.round(this.alpha).toString();
   }
   handleInputKeyDown(t) {
     if (t.key === "Enter") {
@@ -168,7 +508,7 @@ let r = class extends D {
   handleOpacityInputChange(t) {
     if (t.stopPropagation(), this.opacityInput.value) {
       const e = parseInt(this.opacityInput.value);
-      isNaN(e) || (this.alpha = u(e, 0, 100), this.syncValues());
+      isNaN(e) || (this.alpha = d(e, 0, 100), this.syncValues());
     }
     this.emit("cx-change"), this.emit("cx-input");
   }
@@ -178,13 +518,13 @@ let r = class extends D {
   setOpacity() {
     if (this.opacityInput.value) {
       const t = parseInt(this.opacityInput.value);
-      isNaN(t) || (this.alpha = u(t, 0, 100));
+      isNaN(t) || (this.alpha = d(t, 0, 100));
     }
   }
   handleOpacityInputKeyDown(t) {
     if (t.key === "Enter" && this.opacityInput.value) {
       const e = parseInt(this.opacityInput.value);
-      isNaN(e) || (this.alpha = u(e, 0, 100), this.syncValues(), this.emit("cx-change"), this.emit("cx-input"), setTimeout(() => this.opacityInput.select()));
+      isNaN(e) || (this.alpha = d(e, 0, 100), this.syncValues(), this.emit("cx-change"), this.emit("cx-input"), setTimeout(() => this.opacityInput.select()));
     }
   }
   handleTouchMove(t) {
@@ -196,64 +536,64 @@ let r = class extends D {
   parseColor(t) {
     if (!t)
       return null;
-    const e = new k(t);
+    const e = new x(t);
     if (!e.isValid)
       return null;
-    const i = e.toHsl(), s = {
+    const i = e.toHsl(), r = {
       a: i.a,
       h: i.h,
       l: i.l * 100,
       s: i.s * 100
-    }, a = e.toRgb(), c = e.toHexString(), p = e.toHex8String(), v = e.toHsv(), n = {
-      a: v.a,
-      h: v.h,
-      s: v.s * 100,
-      v: v.v * 100
+    }, a = e.toRgb(), l = e.toHexString(), p = e.toHex8String(), f = e.toHsv(), h = {
+      a: f.a,
+      h: f.h,
+      s: f.s * 100,
+      v: f.v * 100
     };
     return {
-      hex: this.setLetterCase(c),
+      hex: this.setLetterCase(l),
       hexa: this.setLetterCase(p),
       hsl: {
-        h: s.h,
-        l: s.l,
-        s: s.s,
+        h: r.h,
+        l: r.l,
+        s: r.s,
         string: this.setLetterCase(
-          `hsl(${Math.round(s.h)}, ${Math.round(s.s)}%, ${Math.round(
-            s.l
+          `hsl(${Math.round(r.h)}, ${Math.round(r.s)}%, ${Math.round(
+            r.l
           )}%)`
         )
       },
       hsla: {
-        a: s.a,
-        h: s.h,
-        l: s.l,
-        s: s.s,
+        a: r.a,
+        h: r.h,
+        l: r.l,
+        s: r.s,
         string: this.setLetterCase(
-          `hsla(${Math.round(s.h)}, ${Math.round(s.s)}%, ${Math.round(
-            s.l
-          )}%, ${s.a.toFixed(2).toString()})`
+          `hsla(${Math.round(r.h)}, ${Math.round(r.s)}%, ${Math.round(
+            r.l
+          )}%, ${r.a.toFixed(2).toString()})`
         )
       },
       hsv: {
-        h: n.h,
-        s: n.s,
+        h: h.h,
+        s: h.s,
         string: this.setLetterCase(
-          `hsv(${Math.round(n.h)}, ${Math.round(n.s)}%, ${Math.round(
-            n.v
+          `hsv(${Math.round(h.h)}, ${Math.round(h.s)}%, ${Math.round(
+            h.v
           )}%)`
         ),
-        v: n.v
+        v: h.v
       },
       hsva: {
-        a: n.a,
-        h: n.h,
-        s: n.s,
+        a: h.a,
+        h: h.h,
+        s: h.s,
         string: this.setLetterCase(
-          `hsva(${Math.round(n.h)}, ${Math.round(n.s)}%, ${Math.round(
-            n.v
-          )}%, ${n.a.toFixed(2).toString()})`
+          `hsva(${Math.round(h.h)}, ${Math.round(h.s)}%, ${Math.round(
+            h.v
+          )}%, ${h.a.toFixed(2).toString()})`
         ),
-        v: n.v
+        v: h.v
       },
       rgb: {
         b: a.b,
@@ -285,11 +625,108 @@ let r = class extends D {
   setLetterCase(t) {
     return typeof t != "string" ? "" : this.uppercase ? t.toUpperCase() : t.toLowerCase();
   }
+  /**
+   * Adopts an externally assigned CSS gradient string as the current gradient.
+   * @param value - The gradient string, already known to be parseable in shape.
+   */
+  adoptGradientValue(t) {
+    const e = Z(t);
+    if (!e)
+      return;
+    this.mode = b.Gradient, this.gradientValue = e;
+    const r = e.stops.some(
+      (a) => a.id === this.activeStopId
+    ) ? this.activeStop : e.stops[0];
+    r && (this.activeStopId = r.id, this.loadStopIntoControls(r));
+  }
+  /** True when the Gradient tab is enabled and active. */
+  get isGradientMode() {
+    return this.gradient && this.mode === b.Gradient;
+  }
+  /** The gradient stop the color controls currently edit, if any. */
+  get activeStop() {
+    return this.gradientValue.stops.find(
+      (t) => t.id === this.activeStopId
+    );
+  }
+  /**
+   * Writes the current HSVA state into the active stop and republishes `value` as a CSS
+   * gradient string.
+   * @param currentColor - The parsed color represented by the current HSVA state.
+   */
+  async syncGradientValue(t) {
+    const e = this.opacity ? t.rgba.string : t.hex;
+    this.gradientValue = {
+      ...this.gradientValue,
+      stops: this.gradientValue.stops.map(
+        (i) => i.id === this.activeStopId ? { ...i, color: e } : i
+      )
+    }, this.inputColorValue = this.getStopInputValue(t), this.inputOpacityValue = this.opacity ? Math.round(this.alpha).toString() : "", this.publishGradientValue(), await this.updateComplete, this.isSafeValue = !1;
+  }
+  /**
+   * Formats the active stop's color for the text input, honoring the current format.
+   * @param currentColor - The parsed color represented by the current HSVA state.
+   * @returns The formatted color string.
+   */
+  getStopInputValue(t) {
+    return this.format === v.Hsl ? t.hsl.string : this.format === v.Rgb ? t.rgb.string : this.format === v.Hsv ? t.hsv.string : t.hex;
+  }
+  /**
+   * Loads a stop's color into the HSVA controls without writing back to `value`.
+   * @param stop - The stop to load.
+   */
+  loadStopIntoControls(t) {
+    this.setColor(t.color, !1);
+    const e = this.parseColor(t.color);
+    e && (this.inputColorValue = this.getStopInputValue(e), this.inputOpacityValue = this.opacity ? Math.round(this.alpha).toString() : "");
+  }
+  /**
+   * Publishes the current gradient as `value` without letting the `value` watcher re-adopt
+   * it. Re-adopting would re-parse the string and mint fresh stop ids, which destroys the
+   * marker being dragged; `isSafeValue` is the existing guard for "this component wrote
+   * `value` itself", and it must always be cleared again once the update settles.
+   */
+  async publishGradientValue() {
+    this.isSafeValue = !0, this.value = tt(this.gradientValue), this.emitValue = this.value, await this.updateComplete, this.isSafeValue = !1;
+  }
+  /**
+   * Replaces the gradient's stops, republishes `value`, and keeps the active stop valid.
+   * @param stops - The next set of stops.
+   */
+  async applyGradientStops(t) {
+    const e = D(t);
+    if (this.gradientValue = { ...this.gradientValue, stops: e }, !e.some((i) => i.id === this.activeStopId)) {
+      const i = e[0];
+      i && (this.activeStopId = i.id, this.loadStopIntoControls(i));
+    }
+    await this.publishGradientValue();
+  }
+  /**
+   * Seeds a two-stop gradient from the current solid color so switching to the Gradient tab
+   * starts from something visible rather than an empty bar.
+   */
+  seedGradientFromCurrentColor() {
+    const t = this.parseColor(
+      `hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`
+    ), e = t ? this.opacity ? t.rgba.string : t.hex : "#ffffff", i = new x(e).setAlpha(0).toRgbString(), r = [
+      { color: e, id: F(), position: 0 },
+      { color: i, id: F(), position: 100 }
+    ];
+    this.gradientValue = {
+      angle: K,
+      stops: r,
+      type: this.gradientTypes[0] ?? $.Linear
+    }, this.activeStopId = r[0].id;
+  }
   async syncValues() {
     const t = this.parseColor(
       `hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`
     );
     if (t !== null) {
+      if (this.isGradientMode) {
+        await this.syncGradientValue(t);
+        return;
+      }
       if (this.emitFormat) {
         const e = `${this.emitFormat}${this.opacity ? "a" : ""}`, i = t[e];
         this.emitFormat === "hex" ? this.emitValue = i : this.emitValue = typeof i == "string" ? i : i.string;
@@ -298,10 +735,12 @@ let r = class extends D {
     }
   }
   handleAfterHide() {
-    this.previewButton.classList.remove("color-picker__preview-color--copied");
+    this.previewButton?.classList.remove(
+      "color-picker__preview-color--copied"
+    );
   }
   handleEyeDropper() {
-    if (!V)
+    if (!B)
       return;
     new EyeDropper().open().then((e) => {
       const i = this.value;
@@ -327,9 +766,9 @@ let r = class extends D {
     this.disabled || (this.setColor(t), this.value !== e && (this.emit("cx-change"), this.emit("cx-input")));
   }
   /** Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100. */
-  getHexString(t, e, i, s = 100) {
-    const a = new k(
-      `hsva(${t}, ${e}%, ${i}%, ${s / 100})`
+  getHexString(t, e, i, r = 100) {
+    const a = new x(
+      `hsva(${t}, ${e}%, ${i}%, ${r / 100})`
     );
     return a.isValid ? a.toHex8String() : "";
   }
@@ -339,16 +778,71 @@ let r = class extends D {
    * @returns The color format.
    */
   getFormatFromValue(t) {
-    const e = new k(t);
+    const e = new x(t);
     return !e.isValid || !this.formats || this.formats.length === 0 ? null : this.formats.includes(e.format) ? e.format : this.formats[0];
   }
   // Prevents nested components from leaking events
   stopNestedEventPropagation(t) {
     t.stopImmediatePropagation();
   }
+  handleTabShow(t) {
+    if (t.target !== this.tabGroup)
+      return;
+    const e = t.detail.name === z ? b.Gradient : b.Solid;
+    e !== this.mode && (this.mode = e, e === b.Gradient ? this.switchToGradientMode() : this.switchToSolidMode(), this.emit("cx-change"), this.emit("cx-input"));
+  }
+  /** Moves editing to the Gradient tab, seeding stops on first use. */
+  switchToGradientMode() {
+    this.gradientValue.stops.length === 0 && this.seedGradientFromCurrentColor();
+    const t = this.activeStop ?? this.gradientValue.stops[0];
+    t && (this.activeStopId = t.id, this.loadStopIntoControls(t)), this.publishGradientValue();
+  }
+  /** Moves editing back to the Solid tab, keeping the active stop's color. */
+  switchToSolidMode() {
+    const t = this.activeStop ?? this.gradientValue.stops[0];
+    if (t) {
+      this.setColor(t.color);
+      return;
+    }
+    this.syncValues();
+  }
+  handleGradientStopSelect(t) {
+    const e = this.gradientValue.stops.find(
+      (i) => i.id === t.detail.id
+    );
+    e && (this.activeStopId = e.id, this.loadStopIntoControls(e));
+  }
+  handleGradientStopAdd(t) {
+    const { color: e, position: i } = t.detail, r = { color: e, id: F(), position: i };
+    this.applyGradientStops([...this.gradientValue.stops, r]), this.activeStopId = r.id, this.loadStopIntoControls(r), this.emit("cx-change"), this.emit("cx-input");
+  }
+  handleGradientStopRemove(t) {
+    t.detail.id === this.activeStopId && (this.activeStopId = "");
+  }
+  handleGradientStopChange(t) {
+    this.applyGradientStops(t.detail.stops), this.emit("cx-input");
+  }
+  handleGradientChange(t) {
+    this.applyGradientStops(t.detail.stops), this.emit("cx-change"), this.emit("cx-input");
+  }
+  handleGradientTypeSelect(t) {
+    t.stopPropagation();
+    const e = t.target;
+    this.handleGradientTypeChange(e.value);
+  }
+  handleGradientTypeChange(t) {
+    t !== this.gradientValue.type && (this.gradientValue = { ...this.gradientValue, type: t }, this.publishGradientValue(), this.emit("cx-change"), this.emit("cx-input"));
+  }
+  handleGradientAngleInput(t) {
+    const e = t.target, i = Number.parseInt(e.value.replace(/\D/g, ""), 10);
+    t.stopPropagation(), !Number.isNaN(i) && (this.gradientValue = {
+      ...this.gradientValue,
+      angle: d(i, 0, 360)
+    }, this.publishGradientValue(), this.emit("cx-change"), this.emit("cx-input"));
+  }
   handleFormatChange() {
-    if (W(this, x)) {
-      C(this, x, !1);
+    if (Ct(this, C)) {
+      R(this, C, !1);
       return;
     }
     this.syncValues();
@@ -356,12 +850,42 @@ let r = class extends D {
   handleOpacityChange() {
     this.alpha = 100;
   }
+  /**
+   * Parses a swatch list once per change rather than on every render. `render()` used to
+   * split and filter these strings itself, which repeated the work on every update — and
+   * the gradient tab re-renders on every pointer move while a stop is dragged.
+   * @param value - The raw property value, either a delimited string or an array.
+   * @returns The individual color strings.
+   */
+  parseSwatchList(t) {
+    return t ? Array.isArray(t) ? t : t.split(";").filter((e) => e.trim() !== "") : [];
+  }
+  handleSwatchesChange() {
+    this.parsedSwatches = this.parseSwatchList(this.swatches);
+  }
+  handleCustomSwatchesChange() {
+    this.parsedCustomSwatches = this.parseSwatchList(this.customSwatches);
+  }
+  async handleModeChange() {
+    await this.updateComplete, this.syncTabToMode();
+  }
+  /** Selects the tab panel matching the current mode. */
+  syncTabToMode() {
+    if (!this.gradient)
+      return;
+    const t = this.mode === b.Gradient ? z : E;
+    this.tabGroup?.show(t);
+  }
   handleValueChange(t, e) {
-    this.isEmpty = !e;
+    if (this.isEmpty = !e, this.gradient && et(e)) {
+      this.isSafeValue || this.adoptGradientValue(e);
+      return;
+    }
+    this.isGradientMode && e && (this.mode = b.Solid);
     const i = this.getFormatFromValue(e);
     if (i && i !== this.format && (this.format = i), e || (this.hue = 0, this.saturation = 0, this.brightness = 100, this.alpha = 100), !this.isSafeValue) {
-      const s = this.parseColor(e);
-      s !== null ? (this.hue = s.hsva.h, this.saturation = s.hsva.s, this.brightness = s.hsva.v, this.alpha = s.hsva.a * 100, this.syncValues()) : (this.inputColorValue = t ?? "", this.inputOpacityValue = "");
+      const r = this.parseColor(e);
+      r !== null ? (this.hue = r.hsva.h, this.saturation = r.hsva.s, this.brightness = r.hsva.v, this.alpha = r.hsva.a * 100, this.syncValues()) : (this.inputColorValue = t ?? "", this.inputOpacityValue = "");
     }
   }
   /** Sets focus on the color picker. */
@@ -403,7 +927,7 @@ let r = class extends D {
   }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {
-    return this.input.checkValidity();
+    return this.input?.checkValidity() ?? this.formValidity.valid;
   }
   /** Gets the associated form, if one exists. */
   getForm() {
@@ -413,93 +937,142 @@ let r = class extends D {
   reportValidity() {
     return !this.inline && !this.validity.valid ? (this.dropdown.show(), this.addEventListener(
       "cx-after-show",
-      () => this.input.reportValidity(),
+      () => this.input?.reportValidity(),
       { once: !0 }
-    ), this.disabled || this.formControlController.emitInvalidEvent(), !1) : this.input.reportValidity();
+    ), this.disabled || this.formControlController.emitInvalidEvent(), !1) : this.input?.reportValidity() ?? this.formValidity.valid;
   }
   /** Sets a custom validation message. Pass an empty string to restore validity. */
   setCustomValidity(t) {
-    this.input.setCustomValidity(t), this.formControlController.updateValidity();
+    this.input?.setCustomValidity(t), this.formControlController.updateValidity();
   }
   renderSwatches(t) {
     return t.map((e) => {
       const i = this.parseColor(e);
       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=${y(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>`;
+      const r = () => this.selectSwatch(e), a = (l) => !this.disabled && l.key === "Enter" && this.setColor(i.hexa);
+      return c`<div part="swatch" class="color-picker__swatch color-picker__transparent-bg" tabindex=${I(this.disabled ? void 0 : "0")} role="button" aria-label=${e} @click=${r} @keydown=${a}><div class="color-picker__swatch-color" style=${m({ 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=${_({
-      "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(
-      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=${f({
+  /**
+   * Renders one gradient type toggle. The type travels on a data attribute so the click
+   * handler can stay a bound method rather than a per-render arrow function.
+   * @param type - The gradient type this button selects.
+   */
+  /**
+   * Returns a gradient type's user-facing name.
+   * @param type - The gradient type to label.
+   */
+  getGradientTypeLabel(t) {
+    return t === $.Radial ? this.localize.term("radial") : this.localize.term("linear");
+  }
+  /**
+   * Renders the gradient type selector and, for linear gradients, the angle input.
+   */
+  renderGradientOptions() {
+    return c`<div class="color-picker__gradient-options"><cx-select part="gradient-type-select" class="color-picker__gradient-type-select" size="small" hoist label=${this.localize.term("gradient")} value=${this.gradientValue.type} ?disabled=${this.disabled} @cx-change=${this.handleGradientTypeSelect} @cx-blur=${this.stopNestedEventPropagation} @cx-focus=${this.stopNestedEventPropagation}>${H(
+      this.gradientTypes,
+      (t) => t,
+      (t) => c`<cx-option value=${t}>${this.getGradientTypeLabel(t)}</cx-option>`
+    )}</cx-select>${u(
+      this.gradientValue.type === $.Linear,
+      () => c`<cx-input part="gradient-angle-input" class="color-picker__gradient-angle" type="text" size="small" label=${this.localize.term("gradientAngle")} .maskBlocks=${{
+        num: {
+          mask: Number,
+          max: 360,
+          min: 0,
+          scale: 0,
+          thousandsSeparator: ""
+        }
+      }} mask="num°" no-spin-buttons value=${`${Math.round(this.gradientValue.angle)}°`} ?disabled=${this.disabled} @cx-input=${this.handleGradientAngleInput} @cx-blur=${this.stopNestedEventPropagation} @cx-focus=${this.stopNestedEventPropagation}></cx-input>`
+    )}</div>`;
+  }
+  /**
+   * Renders the shared color controls, wrapped in a Solid / Gradient tab group when the
+   * gradient tab is enabled. When it is not, the controls render exactly as they always have,
+   * so existing consumers see an unchanged DOM.
+   */
+  renderTabsOrControls(t) {
+    return this.gradient ? c`<cx-tab-group class="color-picker__tabs" @cx-tab-show=${this.handleTabShow}><cx-tab slot="nav" panel=${E} ?active=${this.mode === b.Solid}>${this.localize.term("solid")}</cx-tab><cx-tab slot="nav" panel=${z} ?active=${this.isGradientMode}>${this.localize.term("gradient")}</cx-tab><cx-tab-panel name=${E} ?active=${this.mode === b.Solid}>${u(
+      this.mode === b.Solid,
+      () => this.renderColorControls(t)
+    )}</cx-tab-panel><cx-tab-panel name=${z} ?active=${this.isGradientMode}>${u(
+      this.isGradientMode,
+      () => c`<div class="color-picker__gradient-panel">${this.renderGradientOptions()}<cx-gradient-slider part="gradient-slider" exportparts="track:gradient-track,marker:gradient-marker" .stops=${this.gradientValue.stops} active-stop-id=${this.activeStopId} ?disabled=${this.disabled} @cx-gradient-stop-select=${this.handleGradientStopSelect} @cx-gradient-stop-change=${this.handleGradientStopChange} @cx-gradient-change=${this.handleGradientChange} @cx-gradient-stop-remove=${this.handleGradientStopRemove}></cx-gradient-slider><cx-gradient-stop-list part="gradient-stop-list" exportparts="
+                    row:gradient-stop-row,
+                    add-button:gradient-add-stop-button,
+                    delete-button:gradient-delete-stop-button
+                  " .stops=${this.gradientValue.stops} active-stop-id=${this.activeStopId} ?disabled=${this.disabled} @cx-gradient-stop-select=${this.handleGradientStopSelect} @cx-gradient-stop-add=${this.handleGradientStopAdd} @cx-gradient-stop-remove=${this.handleGradientStopRemove} @cx-gradient-change=${this.handleGradientChange}></cx-gradient-stop-list></div>`
+    )}</cx-tab-panel></cx-tab-group>` : this.renderColorControls(t);
+  }
+  /**
+   * Renders the color grid, hue/alpha sliders, and the text inputs. These controls are shared
+   * by both tabs: in Solid mode they edit `value` directly, and in Gradient mode they edit the
+   * active gradient stop.
+   */
+  renderColorControls(t) {
+    const e = this.saturation, i = 100 - this.brightness;
+    return c`<div part="grid" class="color-picker__grid" style=${m({
       backgroundColor: this.getHexString(this.hue, 100, 100)
     })} @pointerdown=${this.handleGridDrag} @touchmove=${this.handleTouchMove}><span part="grid-handle" class=${_({
       "color-picker__grid-handle": !0,
       "color-picker__grid-handle--dragging": this.isDraggingGridHandle
-    })} style=${f({
+    })} style=${m({
       backgroundColor: this.getHexString(
         this.hue,
         this.saturation,
         this.brightness,
         this.alpha
       ),
-      left: `${t}%`,
-      top: `${e}%`
-    })} role="application" aria-label="HSV" tabindex=${y(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: `${e}%`,
+      top: `${i}%`
+    })} role="application" aria-label="HSV" tabindex=${I(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({
       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=${y(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=${I(this.disabled ? void 0 : "0")} @keydown=${this.handleHueKeyDown}></span></div>${u(
       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=${f({
+      () => c`<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({
         backgroundImage: `linear-gradient(
-                        to right,
-                        ${this.getHexString(
+                      to right,
+                      ${this.getHexString(
           this.hue,
           this.saturation,
           this.brightness,
           0
         )} 0%,
-                        ${this.getHexString(
+                      ${this.getHexString(
           this.hue,
           this.saturation,
           this.brightness,
           100
         )} 100%
-                      )`
-      })}></div><span part="slider-handle opacity-slider-handle" class="color-picker__slider-handle" style=${f({
+                    )`
+      })}></div><span part="slider-handle opacity-slider-handle" class="color-picker__slider-handle" style=${m({
         left: `${this.alpha}%`
-      })} role="slider" aria-label="alpha" aria-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-valuenow=${Math.round(this.alpha)} tabindex=${y(this.disabled ? void 0 : "0")} @keydown=${this.handleAlphaKeyDown}></span></div>`
+      })} role="slider" aria-label="alpha" aria-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-valuenow=${Math.round(this.alpha)} tabindex=${I(this.disabled ? void 0 : "0")} @keydown=${this.handleAlphaKeyDown}></span></div>`
     )}</div><div class="color-picker__preview__container"><button type="button" part="preview" class=${_({
       "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=${f({
+    })} aria-label=${this.localize.term("copy")} style=${m({
       "--preview-color": this.getHexString(
         this.hue,
         this.saturation,
         this.brightness,
         this.alpha
       )
-    })} @click=${this.handleCopy}></button>${d(
+    })} @click=${this.handleCopy}></button>${u(
       this.clearable,
-      () => 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(
+      () => c`<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>${u(
       this.opacity,
-      () => h`<cx-input class="color-picker__input_opacity" part="opacity-input" type="text" name=${this.name} .maskBlocks=${{
+      () => c`<cx-input class="color-picker__input_opacity" part="opacity-input" type="text" name=${this.name} .maskBlocks=${{
         num: {
           mask: Number,
           max: 100,
@@ -507,46 +1080,61 @@ let r = class extends D {
           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 ? "%" : t} ?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>${u(
       !this.noFormatToggle,
-      () => 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>`
+      () => c`<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>`
+    )}
+          ${u(
+      B,
+      () => c`<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>`;
+  }
+  render() {
+    const t = this.parsedSwatches, e = this.parsedCustomSwatches, i = this.inputOpacityValue.endsWith("%") ? this.inputOpacityValue : `${this.inputOpacityValue}%`, r = c`<div part="base" class=${_({
+      "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"}>${u(
+      this.inline,
+      () => c`<cx-visually-hidden id="label"><slot name="label">${this.label}</slot></cx-visually-hidden>`
     )}
-            ${d(
-      V,
-      () => 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(
-      i.length > 0,
-      () => h`<div part="swatches" class="color-picker__swatches">${this.renderSwatches(i)}</div>`
+
+        ${this.renderTabsOrControls(i)}
+
+        ${u(
+      t.length > 0,
+      () => c`<div part="swatches" class="color-picker__swatches">${this.renderSwatches(t)}</div>`
     )}
-        ${d(
-      s.length > 0 || this.creatable,
-      () => h`<div class="color-picker__customSwatches-label">${this.localize.term("custom")}
-              ${d(
+        ${u(
+      e.length > 0 || this.creatable,
+      () => c`<div class="color-picker__customSwatches-label">${this.localize.term("custom")}
+              ${u(
         this.creatable,
-        () => h`<cx-button part="swatch-add-button" size="small" @click=${this.handleSwatchAdd}>${this.localize.term("addCurrent")}</cx-button>`
+        () => c`<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>`
+        ${u(
+      e.length > 0,
+      () => c`<div part="custom-swatches" class="color-picker__customSwatches">${this.renderSwatches(e)}</div>`
     )}
-        ${d(
+        ${u(
       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=${_({
+      () => c`<div part="loading-spinner" class="color-picker__spinner"><cx-spinner></cx-spinner></div>`
+    )}</div>`, a = this.variant === "button" ? c`<cx-button part="trigger" class=${_({
       "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=${_({
@@ -557,193 +1145,239 @@ let r = class extends D {
       "color-picker__preview--medium": this.size === "medium",
       "color-picker__preview--small": this.size === "small",
       "color-picker__preview__transparent-bg": !0
-    })} style=${f({
+    })} style=${m({
       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=${_({
+    })}></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>` : c`<button part="trigger" class=${_({
       "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=${f({
+    })} style=${m({
       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>`, l = u(
       this.tooltip,
-      () => h`<cx-tooltip content=${this.tooltip}>${p}</cx-tooltip>`,
-      () => p
+      () => c`<cx-tooltip content=${this.tooltip}>${a}</cx-tooltip>`,
+      () => a
     );
-    return this.inline ? c : h`<cx-dropdown aria-disabled=${this.disabled ? "true" : "false"} class=${_({
+    return this.inline ? r : c`<cx-dropdown aria-disabled=${this.disabled ? "true" : "false"} class=${_({
       "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">${l}</slot>${r}</cx-dropdown>`;
   }
 };
-x = /* @__PURE__ */ new WeakMap();
-r.styles = [E, G];
-r.dependencies = {
-  "cx-button": B,
-  "cx-button-group": L,
-  "cx-dropdown": T,
-  "cx-icon": N,
-  "cx-input": K,
-  "cx-spinner": R,
-  "cx-visually-hidden": q
+C = /* @__PURE__ */ new WeakMap();
+o.styles = [A, gt];
+o.dependencies = {
+  "cx-button": U,
+  "cx-button-group": ot,
+  "cx-dropdown": W,
+  "cx-gradient-slider": y,
+  "cx-gradient-stop-list": w,
+  "cx-icon": X,
+  "cx-input": Y,
+  "cx-option": st,
+  "cx-select": lt,
+  "cx-spinner": nt,
+  "cx-tab": ct,
+  "cx-tab-group": pt,
+  "cx-tab-panel": dt,
+  "cx-visually-hidden": ht
 };
-o([
-  b('[part~="base"]')
-], r.prototype, "base", 2);
-o([
-  b('[part~="input"]')
-], r.prototype, "input", 2);
-o([
-  b('[part~="opacity-input"]')
-], r.prototype, "opacityInput", 2);
-o([
-  b(".color-dropdown")
-], r.prototype, "dropdown", 2);
-o([
-  b('[part~="preview"]')
-], r.prototype, "previewButton", 2);
-o([
-  b('[part~="trigger"]')
-], r.prototype, "trigger", 2);
-o([
+s([
+  k('[part~="base"]')
+], o.prototype, "base", 2);
+s([
+  k('[part~="input"]')
+], o.prototype, "input", 2);
+s([
+  k('[part~="opacity-input"]')
+], o.prototype, "opacityInput", 2);
+s([
+  k(".color-dropdown")
+], o.prototype, "dropdown", 2);
+s([
+  k(".color-picker__tabs")
+], o.prototype, "tabGroup", 2);
+s([
+  k('[part~="preview"]')
+], o.prototype, "previewButton", 2);
+s([
+  k('[part~="trigger"]')
+], o.prototype, "trigger", 2);
+s([
+  g()
+], o.prototype, "hasFocus", 2);
+s([
+  g()
+], o.prototype, "isDraggingGridHandle", 2);
+s([
+  g()
+], o.prototype, "isEmpty", 2);
+s([
   g()
-], r.prototype, "hasFocus", 2);
-o([
+], o.prototype, "inputColorValue", 2);
+s([
   g()
-], r.prototype, "isDraggingGridHandle", 2);
-o([
+], o.prototype, "inputOpacityValue", 2);
+s([
   g()
-], r.prototype, "isEmpty", 2);
-o([
+], o.prototype, "hue", 2);
+s([
   g()
-], r.prototype, "inputColorValue", 2);
-o([
+], o.prototype, "saturation", 2);
+s([
   g()
-], r.prototype, "inputOpacityValue", 2);
-o([
+], o.prototype, "brightness", 2);
+s([
   g()
-], r.prototype, "hue", 2);
-o([
+], o.prototype, "alpha", 2);
+s([
   g()
-], r.prototype, "saturation", 2);
-o([
+], o.prototype, "gradientValue", 2);
+s([
   g()
-], r.prototype, "brightness", 2);
-o([
+], o.prototype, "activeStopId", 2);
+s([
   g()
-], r.prototype, "alpha", 2);
-o([
-  l({ reflect: !0, type: String })
-], r.prototype, "value", 2);
-o([
-  H()
-], r.prototype, "defaultValue", 2);
-o([
-  l()
-], r.prototype, "label", 2);
-o([
-  l({ reflect: !0, type: String })
-], r.prototype, "variant", 2);
-o([
-  l()
-], r.prototype, "format", 2);
-o([
-  l({
+], o.prototype, "parsedSwatches", 2);
+s([
+  g()
+], o.prototype, "parsedCustomSwatches", 2);
+s([
+  n({ reflect: !0, type: String })
+], o.prototype, "value", 2);
+s([
+  it()
+], o.prototype, "defaultValue", 2);
+s([
+  n()
+], o.prototype, "label", 2);
+s([
+  n({ reflect: !0, type: String })
+], o.prototype, "variant", 2);
+s([
+  n()
+], o.prototype, "format", 2);
+s([
+  n({
     attribute: "formats",
     converter: {
       fromAttribute: (t) => t?.split(" ") ?? [],
       toAttribute: (t) => t.join(" ")
     }
   })
-], r.prototype, "formats", 2);
-o([
-  l({ attribute: "emit-format", reflect: !0, type: String })
-], r.prototype, "emitFormat", 2);
-o([
-  l({ reflect: !0, type: Boolean })
-], r.prototype, "inline", 2);
-o([
-  l({ reflect: !0 })
-], r.prototype, "size", 2);
-o([
-  l({ attribute: "no-format-toggle", type: Boolean })
-], r.prototype, "noFormatToggle", 2);
-o([
-  l()
-], r.prototype, "name", 2);
-o([
-  l({ reflect: !0, type: Boolean })
-], r.prototype, "disabled", 2);
-o([
-  l({ type: Boolean })
-], r.prototype, "hoist", 2);
-o([
-  l({ type: Boolean })
-], r.prototype, "opacity", 2);
-o([
-  l({ type: Boolean })
-], r.prototype, "uppercase", 2);
-o([
-  l({ type: Boolean })
-], r.prototype, "clearable", 2);
-o([
-  l({ type: String })
-], r.prototype, "tooltip", 2);
-o([
-  l()
-], r.prototype, "swatches", 2);
-o([
-  l({ attribute: "custom-swatches", reflect: !0 })
-], r.prototype, "customSwatches", 2);
-o([
-  l({ reflect: !0, type: Boolean })
-], r.prototype, "loading", 2);
-o([
-  l({ reflect: !0, type: Boolean })
-], r.prototype, "creatable", 2);
-o([
-  l({ reflect: !1 })
-], r.prototype, "form", 2);
-o([
-  l({ reflect: !0, type: Boolean })
-], r.prototype, "required", 2);
-o([
+], o.prototype, "formats", 2);
+s([
+  n({ attribute: "emit-format", reflect: !0, type: String })
+], o.prototype, "emitFormat", 2);
+s([
+  n({ reflect: !0, type: Boolean })
+], o.prototype, "inline", 2);
+s([
+  n({ type: Boolean })
+], o.prototype, "gradient", 2);
+s([
+  n({ reflect: !0, type: String })
+], o.prototype, "mode", 2);
+s([
+  n({
+    attribute: "gradient-types",
+    converter: {
+      fromAttribute: (t) => t?.split(" ") ?? [],
+      toAttribute: (t) => t.join(" ")
+    }
+  })
+], o.prototype, "gradientTypes", 2);
+s([
+  n({ reflect: !0 })
+], o.prototype, "size", 2);
+s([
+  n({ attribute: "no-format-toggle", type: Boolean })
+], o.prototype, "noFormatToggle", 2);
+s([
+  n()
+], o.prototype, "name", 2);
+s([
+  n({ reflect: !0, type: Boolean })
+], o.prototype, "disabled", 2);
+s([
+  n({ type: Boolean })
+], o.prototype, "hoist", 2);
+s([
+  n({ type: Boolean })
+], o.prototype, "opacity", 2);
+s([
+  n({ type: Boolean })
+], o.prototype, "uppercase", 2);
+s([
+  n({ type: Boolean })
+], o.prototype, "clearable", 2);
+s([
+  n({ type: String })
+], o.prototype, "tooltip", 2);
+s([
+  n()
+], o.prototype, "swatches", 2);
+s([
+  n({ attribute: "custom-swatches", reflect: !0 })
+], o.prototype, "customSwatches", 2);
+s([
+  n({ reflect: !0, type: Boolean })
+], o.prototype, "loading", 2);
+s([
+  n({ reflect: !0, type: Boolean })
+], o.prototype, "creatable", 2);
+s([
+  n({ reflect: !1 })
+], o.prototype, "form", 2);
+s([
+  n({ reflect: !0, type: Boolean })
+], o.prototype, "required", 2);
+s([
   g()
-], r.prototype, "emitValue", 2);
-o([
-  S(300)
-], r.prototype, "debouncedSetColor", 1);
-o([
-  S(300)
-], r.prototype, "setOpacity", 1);
-o([
-  P({ passive: !1 })
-], r.prototype, "handleTouchMove", 1);
-o([
-  $("format", { waitUntilFirstUpdate: !0 })
-], r.prototype, "handleFormatChange", 1);
-o([
-  $("opacity", { waitUntilFirstUpdate: !0 })
-], r.prototype, "handleOpacityChange", 1);
-o([
-  $("value")
-], r.prototype, "handleValueChange", 1);
-r = o([
-  I("cx-color-picker")
-], r);
+], o.prototype, "emitValue", 2);
+s([
+  q(300)
+], o.prototype, "debouncedSetColor", 1);
+s([
+  q(300)
+], o.prototype, "setOpacity", 1);
+s([
+  at({ passive: !1 })
+], o.prototype, "handleTouchMove", 1);
+s([
+  S("format", { waitUntilFirstUpdate: !0 })
+], o.prototype, "handleFormatChange", 1);
+s([
+  S("opacity", { waitUntilFirstUpdate: !0 })
+], o.prototype, "handleOpacityChange", 1);
+s([
+  S("swatches")
+], o.prototype, "handleSwatchesChange", 1);
+s([
+  S("customSwatches")
+], o.prototype, "handleCustomSwatchesChange", 1);
+s([
+  S("mode")
+], o.prototype, "handleModeChange", 1);
+s([
+  S("value")
+], o.prototype, "handleValueChange", 1);
+o = s([
+  O("cx-color-picker")
+], o);
 export {
-  r as default
+  o as default
 };