@orangelogic/design-system 4.2.0 → 4.3.0

package/library/components/card.js

@@ -4,10 +4,10 @@ import { c as p } from "../chunks/custom-element.L4WJXn1j.js";
 import { H as b } from "../chunks/slot.j5oheLJC.js";
 import { i as v, x as m } from "../chunks/lit-element.jLBm65_O.js";
 import { e as g } from "../chunks/class-map.BiVq-cVR.js";
-const f = v`:host{--border-color:var(--cx-color-neutral-200);--border-radius:var(--cx-border-radius-x-large);--box-shadow:var(--cx-shadow-x-small);--image-border-radius:var(--cx-border-radius-x-large);--border-width:1px;--padding:var(--cx-spacing-large);width:var(--card-width,auto);height:var(--card-height,auto);display:inline-block}.card{background-color:var(--cx-panel-background-color);box-shadow:var(--box-shadow);border:solid var(--border-width) var(--border-color);border-radius:var(--border-radius);padding:var(--padding);flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:auto}.card--interactive{--border-color:var(--cx-color-primary-300);box-shadow:none;cursor:pointer;transition:box-shadow .2s ease-in-out}.card--interactive:hover{box-shadow:var(--cx-shadow-medium)}.card--disabled:before{content:"";background-color:rgb(from var(--cx-color-neutral-0) r g b / 50%);z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.card__image{background-color:var(--cx-color-neutral-100);border-radius:var(--image-border-radius);margin:calc(-1 * var(--border-width));margin-bottom:var(--padding);flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.card__image::slotted(img){width:100%;height:auto;display:block}.card:not(.card--has-image) .card__image{display:none}.card__header{border-bottom:solid var(--header-border-width,var(--border-width)) var(--border-color);padding-bottom:var(--padding);margin-bottom:var(--padding);display:block}.card:not(.card--has-header) .card__header{display:none}.card__title{font-size:var(--cx-font-size-large);font-weight:var(--cx-font-weight-bold);display:block}.card:not(.card--has-title) .card__title{display:none}.card__body{width:100%;display:block}.card--has-footer .card__footer{border-top:solid var(--border-width) var(--border-color);padding-top:var(--padding);margin-top:var(--padding);display:block}.card:not(.card--has-footer) .card__footer{display:none}`;
-var u = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (o, e, d, t) => {
-  for (var r = t > 1 ? void 0 : t ? _(e, d) : e, i = o.length - 1, s; i >= 0; i--)
-    (s = o[i]) && (r = (t ? s(e, d, r) : s(r)) || r);
+const f = v`:host{--border-color:var(--cx-color-neutral-200);--border-radius:var(--cx-border-radius-x-large);--box-shadow:var(--cx-shadow-x-small);--image-border-radius:var(--cx-border-radius-x-large);--border-width:1px;--padding:var(--cx-spacing-large);--card-overflow:auto;width:var(--card-width,auto);height:var(--card-height,auto);display:inline-block}.card{background-color:var(--cx-panel-background-color);box-shadow:var(--box-shadow);border:solid var(--border-width) var(--border-color);border-radius:var(--border-radius);padding:var(--padding);width:100%;height:100%;overflow:var(--card-overflow,auto);flex-direction:column;display:flex;position:relative}.card--interactive{--border-color:var(--cx-color-primary-300);box-shadow:none;cursor:pointer;transition:box-shadow .2s ease-in-out}.card--interactive:hover{box-shadow:var(--cx-shadow-medium)}.card--disabled:before{content:"";background-color:rgb(from var(--cx-color-neutral-0) r g b / 50%);z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.card__image{background-color:var(--cx-color-neutral-100);border-radius:var(--image-border-radius);margin:calc(-1 * var(--border-width));margin-bottom:var(--padding);flex-shrink:0;justify-content:center;align-items:center;display:flex;overflow:hidden}.card__image::slotted(img){width:100%;height:auto;display:block}.card:not(.card--has-image) .card__image{display:none}.card__header{border-bottom:solid var(--header-border-width,var(--border-width)) var(--border-color);padding-bottom:var(--padding);margin-bottom:var(--padding);display:block}.card:not(.card--has-header) .card__header{display:none}.card__title{font-size:var(--cx-font-size-large);font-weight:var(--cx-font-weight-bold);display:block}.card:not(.card--has-title) .card__title{display:none}.card__body{width:100%;display:block}.card--has-footer .card__footer{border-top:solid var(--border-width) var(--border-color);padding-top:var(--padding);margin-top:var(--padding);display:block}.card:not(.card--has-footer) .card__footer{display:none}`;
+var u = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, s = (o, e, d, t) => {
+  for (var r = t > 1 ? void 0 : t ? _(e, d) : e, i = o.length - 1, l; i >= 0; i--)
+    (l = o[i]) && (r = (t ? l(e, d, r) : l(r)) || r);
   return t && r && u(e, d, r), r;
 };
 let a = class extends n {
@@ -35,13 +35,13 @@ let a = class extends n {
   }
 };
 a.styles = [h, f];
-l([
+s([
   c({ reflect: !0, type: Boolean })
 ], a.prototype, "interactive", 2);
-l([
+s([
   c({ reflect: !0, type: Boolean })
 ], a.prototype, "disabled", 2);
-a = l([
+a = s([
   p("cx-card")
 ], a);
 export {

package/library/components/checkbox.js

@@ -1,9 +1,9 @@
 import { n as r, C as k } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as f } from "../chunks/component.styles.CAS3c9pM.js";
-import { f as v } from "../chunks/form-control.styles.CaGWmeAS.js";
+import { f as v } from "../chunks/form-control.styles.CHC7Q08Q.js";
 import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as y } from "../chunks/default-value.COZopaet.js";
-import { F as _ } from "../chunks/form.DN2v7-DH.js";
+import { F as _ } from "../chunks/form.LpappO1d.js";
 import { H as C } from "../chunks/slot.j5oheLJC.js";
 import { w as u } from "../chunks/watch.DJF5K-8U.js";
 import { i as w, x as n } from "../chunks/lit-element.jLBm65_O.js";

package/library/components/color-picker.js

@@ -1,12 +1,12 @@
-import { n, C as T } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as A } from "../chunks/component.styles.CAS3c9pM.js";
+import { n, C as E } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as T } 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 { F as rt } from "../chunks/form.LpappO1d.js";
+import { L as N } from "../chunks/i18n.Q5_2aVLU.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";
@@ -18,19 +18,19 @@ 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 { C as U } from "../chunks/button.DbAUlIXG.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.CkhHTlpl.js";
+import { C as Y } from "../chunks/input.ftEf4GS6.js";
+import { C as st } from "../chunks/option.C8IEnv5Q.js";
 import lt from "./select.js";
 import nt from "./spinner.js";
 import ct from "./tab.js";
-import { C as pt } from "../chunks/tab-group.CQfcMVEw.js";
+import { C as pt } from "../chunks/tab-group.DZ32f41G.js";
 import dt from "./tab-panel.js";
 import ht from "./visually-hidden.js";
-import { C as ut } from "../chunks/icon-button.CbUddcgI.js";
+import { C as ut } from "../chunks/icon-button.BjAbCuH8.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) => {
@@ -39,7 +39,7 @@ var ft = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, V = (t, e,
   return r && a && ft(e, i, a), a;
 };
 const bt = 1, xt = 10;
-let y = class extends T {
+let y = class extends E {
   constructor() {
     super(...arguments), this.localize = new N(this), this.stops = [], this.activeStopId = "", this.disabled = !1, this.draggingStopId = "";
   }
@@ -92,11 +92,11 @@ let y = class extends T {
     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;
+    let f = this.stops.find((M) => M.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);
+      onMove: (M) => {
+        f = this.getPositionFromOffset(M - h, l), this.moveStop(i, f, !1);
       },
       onStop: () => {
         this.draggingStopId = "", this.moveStop(i, f, !0);
@@ -159,7 +159,7 @@ let y = class extends T {
     )}</div>`;
   }
 };
-y.styles = [A, mt];
+y.styles = [T, mt];
 V([
   n({ type: Array })
 ], y.prototype, "stops", 2);
@@ -176,13 +176,13 @@ 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) => {
+var yt = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, P = (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 {
+let w = class extends E {
   constructor() {
     super(...arguments), this.localize = new N(this), this.stops = [], this.activeStopId = "", this.disabled = !1;
   }
@@ -316,7 +316,7 @@ let w = class extends T {
     )}</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.styles = [T, _t];
 w.dependencies = {
   "cx-button": U,
   "cx-dropdown": W,
@@ -324,16 +324,16 @@ w.dependencies = {
   "cx-icon-button": ut,
   "cx-input": Y
 };
-M([
+P([
   n({ type: Array })
 ], w.prototype, "stops", 2);
-M([
+P([
   n({ attribute: "active-stop-id", type: String })
 ], w.prototype, "activeStopId", 2);
-M([
+P([
   n({ reflect: !0, type: Boolean })
 ], w.prototype, "disabled", 2);
-w = M([
+w = P([
   O("cx-gradient-stop-list")
 ], w);
 var $t = Object.defineProperty, St = Object.getOwnPropertyDescriptor, J = (t) => {
@@ -343,10 +343,10 @@ var $t = Object.defineProperty, St = Object.getOwnPropertyDescriptor, J = (t) =>
     (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 {
+const B = "EyeDropper" in window, A = "solid", z = "gradient", K = 90;
+let o = class extends E {
   constructor() {
-    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 = {
+    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.lastParsedAlpha = 100, this.gradientValue = {
       angle: K,
       stops: [],
       type: $.Linear
@@ -620,7 +620,7 @@ let o = class extends T {
   }
   setColor(t, e = !0) {
     const i = this.parseColor(t);
-    return i === null ? !1 : (this.hue = i.hsva.h, this.saturation = i.hsva.s, this.brightness = i.hsva.v, this.alpha = this.opacity ? i.hsva.a * 100 : 100, e && this.syncValues(), !0);
+    return i === null ? !1 : (this.hue = i.hsva.h, this.saturation = i.hsva.s, this.brightness = i.hsva.v, this.lastParsedAlpha = i.hsva.a * 100, this.alpha = this.opacity ? this.lastParsedAlpha : 100, e && this.syncValues(), !0);
   }
   setLetterCase(t) {
     return typeof t != "string" ? "" : this.uppercase ? t.toUpperCase() : t.toLowerCase();
@@ -723,7 +723,7 @@ let o = class extends T {
       `hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`
     );
     if (t !== null) {
-      if (this.isGradientMode) {
+      if (this.opacity && (this.lastParsedAlpha = this.alpha), this.isGradientMode) {
         await this.syncGradientValue(t);
         return;
       }
@@ -848,7 +848,11 @@ let o = class extends T {
     this.syncValues();
   }
   handleOpacityChange() {
-    this.alpha = 100;
+    if (!this.opacity) {
+      this.alpha = 100;
+      return;
+    }
+    this.alpha = this.lastParsedAlpha;
   }
   /**
    * Parses a swatch list once per change rather than on every render. `render()` used to
@@ -873,7 +877,7 @@ let o = class extends T {
   syncTabToMode() {
     if (!this.gradient)
       return;
-    const t = this.mode === b.Gradient ? z : E;
+    const t = this.mode === b.Gradient ? z : A;
     this.tabGroup?.show(t);
   }
   handleValueChange(t, e) {
@@ -883,9 +887,9 @@ let o = class extends T {
     }
     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) {
+    if (i && i !== this.format && (this.format = i), e || (this.hue = 0, this.saturation = 0, this.brightness = 100, this.lastParsedAlpha = 100, this.alpha = 100), !this.isSafeValue) {
       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 = "");
+      r !== null ? (this.hue = r.hsva.h, this.saturation = r.hsva.s, this.brightness = r.hsva.v, this.lastParsedAlpha = r.hsva.a * 100, this.alpha = r.hsva.a * 100, this.syncValues()) : (this.inputColorValue = t ?? "", this.inputOpacityValue = "");
     }
   }
   /** Sets focus on the color picker. */
@@ -993,7 +997,7 @@ let o = class extends T {
    * 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(
+    return this.gradient ? c`<cx-tab-group class="color-picker__tabs" @cx-tab-show=${this.handleTabShow}><cx-tab slot="nav" panel=${A} ?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=${A} ?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(
@@ -1178,7 +1182,7 @@ let o = class extends T {
   }
 };
 C = /* @__PURE__ */ new WeakMap();
-o.styles = [A, gt];
+o.styles = [T, gt];
 o.dependencies = {
   "cx-button": U,
   "cx-button-group": ot,

package/library/components/color-swatch-group.js

@@ -1,15 +1,16 @@
 import "./space.js";
-import "../chunks/typography.T72DuoCa.js";
+import "../chunks/typography.BLYdTF0n.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/color-swatch.DdsUysbF.js";
+import "./color-swatch.js";
 import "../chunks/component.styles.CAS3c9pM.js";
-import { C as v } from "../chunks/color-swatch-group.BPXiMxjh.js";
-import "../chunks/transformation.B8m0Nbao.js";
+import { C as w } from "../chunks/color-swatch-group.B10yWbVM.js";
+import "../chunks/color.CIHdfM_a.js";
+import "../chunks/content-builder.CBBdfVOl.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.DaHuiSGU.js";
-import "../chunks/i18n.rtxrs1c1.js";
+import "../chunks/i18n.Q5_2aVLU.js";
 import "../chunks/watch.DJF5K-8U.js";
-import "../chunks/toast.BOkYwUIj.js";
+import "../chunks/responsive.BmBJSzC4.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";
@@ -21,5 +22,5 @@ import "../chunks/repeat.CFjcER6_.js";
 import "../chunks/style-map.llVFPd__.js";
 import "../chunks/when.Dr1es41R.js";
 export {
-  v as default
+  w as default
 };

package/library/components/color-swatch.js

@@ -1,24 +1,248 @@
-import "./copy-button.js";
-import "./line-clamp.js";
-import "./resize-observer.js";
-import "./space.js";
-import "../chunks/typography.T72DuoCa.js";
-import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.CAS3c9pM.js";
-import { C as q } from "../chunks/color-swatch.DdsUysbF.js";
-import "../chunks/color.LzSGBy7o.js";
-import "../chunks/custom-element.L4WJXn1j.js";
-import "../chunks/debounce.DaHuiSGU.js";
-import "../chunks/i18n.rtxrs1c1.js";
-import "../chunks/watch.DJF5K-8U.js";
-import "../chunks/lit-element.jLBm65_O.js";
-import "../chunks/state.CSDxrqLd.js";
-import "../chunks/query.BBf1UFkC.js";
-import "../chunks/class-map.BiVq-cVR.js";
-import "../chunks/if-defined.BRoBj_Rp.js";
-import "../chunks/repeat.CFjcER6_.js";
-import "../chunks/style-map.llVFPd__.js";
-import "../chunks/when.Dr1es41R.js";
+import v from "./copy-button.js";
+import b from "./line-clamp.js";
+import _ from "./resize-observer.js";
+import k from "./space.js";
+import { C as F } from "../chunks/typography.BLYdTF0n.js";
+import { n as a, C as $ } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as S } from "../chunks/component.styles.CAS3c9pM.js";
+import { C as m, a as C, b as z, c as O, d as h, e as l, H as A, l as W, f as R, g as x } from "../chunks/color.CIHdfM_a.js";
+import { c as U } from "../chunks/custom-element.L4WJXn1j.js";
+import { d as V } from "../chunks/debounce.DaHuiSGU.js";
+import { L as E } from "../chunks/i18n.Q5_2aVLU.js";
+import { w as s } from "../chunks/watch.DJF5K-8U.js";
+import { i as G, x as g } from "../chunks/lit-element.jLBm65_O.js";
+import { r as n } from "../chunks/state.CSDxrqLd.js";
+import { e as H } from "../chunks/query.BBf1UFkC.js";
+import { e as w } from "../chunks/class-map.BiVq-cVR.js";
+import { o as f } from "../chunks/if-defined.BRoBj_Rp.js";
+import { c as j } from "../chunks/repeat.CFjcER6_.js";
+import { o as p } from "../chunks/style-map.llVFPd__.js";
+import { n as I } from "../chunks/when.Dr1es41R.js";
+const B = G`:host{isolation:isolate;display:block}.color-swatch{border:1px solid var(--cx-color-neutral-200);justify-content:center;align-items:center;display:flex}.color-swatch:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-swatch--circle{aspect-ratio:1;height:auto;width:var(--swatch-circle-size,var(--swatch-size,350px));min-width:var(--swatch-size,230px);border-radius:var(--swatch-circle-border-radius,var(--cx-border-radius-circle));max-width:100%;overflow:hidden}.color-swatch--oval{height:var(--swatch-circle-size,var(--swatch-size,350px));border-radius:var(--swatch-circle-border-radius,calc(var(--swatch-circle-size,var(--swatch-size,350px)) / 2));width:100%}.color-swatch--grid{width:100%;height:100%;min-width:var(--swatch-grid-min-width,165px);min-height:max(var(--swatch-size,300px), var(--swatch-min-height,50px));border:var(--swatch-border,0px solid transparent);box-shadow:var(--swatch-box-shadow,none);border-radius:var(--swatch-border-radius,var(--cx-border-radius-x-large));border-style:solid;align-items:stretch}.color-swatch__content{max-height:100%;padding:var(--swatch-content-padding,0);justify-content:space-between;gap:var(--cx-spacing-medium)}.color-swatch--circle>.color-swatch__content{min-width:50%;max-width:75%}.color-swatch--oval>.color-swatch__content{max-width:85%}.color-swatch--circle>.color-swatch__content,.color-swatch--oval>.color-swatch__content{align-self:stretch;align-items:var(--swatch-circle-content-align,center);justify-content:var(--swatch-circle-content-justify,center);margin:var(--swatch-circle-content-margin,0)}.color-swatch--grid>.color-swatch__content{justify-content:var(--swatch-content-justify,space-between);width:100%;max-height:none;padding:var(--swatch-content-margin,var(--cx-spacing-medium))}.color-swatch__key::part(base){vertical-align:middle;min-width:50px;height:100%}.color-swatch__key[variant=small]::part(base){display:inline-block}.color-swatch__copy-button::part(button){height:fit-content;min-height:fit-content;padding:0;background:0 0!important;border-width:0!important}.color-swatch__copy-button::part(label){height:fit-content;padding:0}.color-swatch__value{text-transform:none}.color-swatch__value::part(base){word-break:break-word}.color-swatch__value-wrapper{text-align:left}.color-swatch__name,.color-swatch__key,.color-swatch__value{--font-family:var(--swatch-font-family), var(--cx-font-sans);--font-style:var(--swatch-font-style,normal);--font-weight:var(--swatch-font-weight);--font-size:var(--swatch-font-size);--line-height:1.2}`;
+var L = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (r, i, o, d) => {
+  for (var c = d > 1 ? void 0 : d ? D(i, o) : i, u = r.length - 1, y; u >= 0; u--)
+    (y = r[u]) && (c = (d ? y(i, o, c) : y(c)) || c);
+  return d && c && L(i, o, c), c;
+};
+let t = class extends $ {
+  constructor() {
+    super(...arguments), this.localize = new E(this), this.ignoreWatchColorChange = /* @__PURE__ */ new Set(), this.variant = m.Circle, this.name = "", this.hex = "", this.rgb = "", this.cmyk = "", this.pms = "", this.canCopy = !1, this.showCodes = ["HEX", "RGB", "CMYK", "PMS"], this.canFocusCodeOnly = !1, this.noAutoConvert = !1, this.codeAlignment = C.SameLine, this.codeSeparator = z.Comma, this.hexFormat = O.LeadingHash, this.gradientStops = "", this.textColor = "#27272A", this.textVariant = "body2", this.lineClamp = 3, this.backgroundColor = "#F9F9F9", this.canFocusContainer = !0, this.isContainerFocused = !1;
+  }
+  runFirstUpdated() {
+    this.handleColorChange();
+  }
+  /**
+   * `gradientStops` as a paintable image. Horizontal so the slice hands off
+   * along a shared edge; a diagonal ramp meets the next color in one corner
+   * only, leaving a visible break at the seam.
+   */
+  get gradientImage() {
+    return this.gradientStops ? `linear-gradient(to right, ${this.gradientStops})` : "";
+  }
+  /**
+   * Change to default color
+   */
+  setDefaultColor() {
+    this.backgroundColor = "#F9F9F9", this.textColor = "#27272A";
+  }
+  handleResize() {
+    const r = this.containerEl.offsetWidth;
+    r > 315 || this.variant === "grid-item" ? (this.textVariant = "body2", this.rowGap = "x-small", this.lineClamp = 3) : r > 230 ? (this.textVariant = "body3", this.rowGap = "2x-small", this.lineClamp = 2) : (this.textVariant = "small", this.rowGap = "3x-small", this.lineClamp = 1);
+  }
+  handleVariantChange() {
+    this.containerEl && this.handleResize();
+  }
+  handleCmykChange() {
+    if (!this.noAutoConvert) {
+      if (this.ignoreWatchColorChange.has("cmyk") || this.cmyk === "" && !this.hasUpdated) {
+        this.ignoreWatchColorChange.delete("cmyk");
+        return;
+      }
+      this.ignoreWatchColorChange.add("hex"), this.ignoreWatchColorChange.add("rgb"), this.hex = h(this.cmyk, l.Hex), this.rgb = h(this.cmyk, l.Rgb);
+    }
+  }
+  handleRGBChange() {
+    if (!this.noAutoConvert) {
+      if (this.ignoreWatchColorChange.has("rgb") || this.rgb === "" && !this.hasUpdated) {
+        this.ignoreWatchColorChange.delete("rgb");
+        return;
+      }
+      this.ignoreWatchColorChange.add("hex"), this.ignoreWatchColorChange.add("cmyk"), this.hex = h(this.rgb, l.Hex), this.cmyk = h(this.rgb, l.Cmyk);
+    }
+  }
+  handleHexChange() {
+    if (!this.noAutoConvert) {
+      if (this.ignoreWatchColorChange.has("hex") || this.hex === "" && !this.hasUpdated) {
+        this.ignoreWatchColorChange.delete("hex");
+        return;
+      }
+      this.ignoreWatchColorChange.add("rgb"), this.ignoreWatchColorChange.add("cmyk"), this.rgb = h(this.hex, l.Rgb), this.cmyk = h(this.hex, l.Cmyk);
+    }
+  }
+  async handleColorChange() {
+    await this.updateComplete, this.hex && A.test(this.hex) ? (this.textColor = W(this.hex, "#27272A", "#F9F9F9"), this.backgroundColor = this.hex) : this.setDefaultColor();
+  }
+  handleCanFocusCodeOnlyChange() {
+    this.isContainerFocused || (this.canFocusContainer = !this.canFocusCodeOnly);
+  }
+  handleFocusIn() {
+    this.isContainerFocused = !0;
+  }
+  handleFocusOut() {
+    this.isContainerFocused = !1;
+  }
+  render() {
+    const r = [
+      { key: "HEX", value: R(this.hex, this.hexFormat) },
+      {
+        key: "RGB",
+        value: x(this.rgb, this.codeSeparator)
+      },
+      {
+        key: "CMYK",
+        value: x(this.cmyk, this.codeSeparator)
+      },
+      { key: "PMS", value: this.pms }
+    ].filter((o) => this.showCodes.includes(o.key)), i = this.codeAlignment === C.SeparateLine ? "vertical" : "horizontal";
+    return g`<cx-resize-observer @cx-resize=${this.handleResize}><div part="base" tabindex=${f(this.canFocusContainer ? "0" : void 0)} class=${w({
+      "color-swatch": !0,
+      "color-swatch--circle": this.variant === m.Circle,
+      "color-swatch--grid": this.variant === m.GridItem,
+      "color-swatch--oval": this.variant === m.Oval
+    })} style=${p({
+      backgroundColor: this.backgroundColor,
+      ...this.gradientImage ? { backgroundImage: this.gradientImage } : {}
+    })} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut}><cx-space part="content" direction="vertical" class="color-swatch__content"><cx-typography variant="h5" part="name" class="color-swatch__name" style=${p({
+      "--color": this.textColor
+    })}>${this.name}</cx-typography><cx-space direction="vertical" spacing=${this.rowGap} part="content">${j(
+      r,
+      (o) => o.key,
+      (o) => g`<cx-space direction=${i} align-items=${i === "vertical" ? "flex-start" : "center"} spacing=${i === "vertical" ? "3x-small" : "small"} part="item" wrap="nowrap"><cx-typography variant=${this.textVariant} class="color-swatch__key" part="key" style=${p({
+        "--color": this.textColor
+      })}>${o.key}</cx-typography>${I(
+        this.canCopy && o.value !== "",
+        () => g`<cx-copy-button part="copy-button" tabindex=${f(
+          this.canFocusCodeOnly ? void 0 : "-1"
+        )} class="color-swatch__copy-button" copy-label=${this.localize.term("clickToCopy")} focus-copy-label=${this.localize.term(
+          "pressEnterOrCtrlCToCopy"
+        )} label=${`${o.key} ${o.value}`} no-icon hoist value=${o.value}><cx-line-clamp lines=${this.lineClamp} disabled-tooltip class=${w({
+          "color-swatch__value-wrapper": !0
+        })}><cx-typography variant=${this.textVariant} style=${p({
+          "--color": this.textColor
+        })} class="color-swatch__value" part="value">${o.value}</cx-typography></cx-line-clamp></cx-copy-button>`,
+        () => g`<cx-line-clamp lines=${this.lineClamp} disabled-tooltip class="color-swatch__value-wrapper"><cx-typography variant=${this.textVariant} style=${p({
+          "--color": this.textColor
+        })} class="color-swatch__value" part="value">${o.value}</cx-typography></cx-line-clamp>`
+      )}</cx-space>`
+    )}</cx-space></cx-space></div></cx-resize-observer>`;
+  }
+};
+t.styles = [S, B];
+t.dependencies = {
+  "cx-copy-button": v,
+  "cx-line-clamp": b,
+  "cx-resize-observer": _,
+  "cx-space": k,
+  "cx-typography": F
+};
+e([
+  H(".color-swatch")
+], t.prototype, "containerEl", 2);
+e([
+  a({ reflect: !0, type: String })
+], t.prototype, "variant", 2);
+e([
+  a({ reflect: !0, type: String })
+], t.prototype, "name", 2);
+e([
+  a({ reflect: !0, type: String })
+], t.prototype, "hex", 2);
+e([
+  a({ reflect: !0, type: String })
+], t.prototype, "rgb", 2);
+e([
+  a({ reflect: !0, type: String })
+], t.prototype, "cmyk", 2);
+e([
+  a({ reflect: !0, type: String })
+], t.prototype, "pms", 2);
+e([
+  a({ attribute: "can-copy", reflect: !0, type: Boolean })
+], t.prototype, "canCopy", 2);
+e([
+  a({
+    attribute: "show-codes",
+    converter: {
+      fromAttribute: (r) => r?.split(" ") ?? [],
+      toAttribute: (r) => r.join(" ")
+    }
+  })
+], t.prototype, "showCodes", 2);
+e([
+  a({ attribute: "can-focus-code-only", reflect: !0, type: Boolean })
+], t.prototype, "canFocusCodeOnly", 2);
+e([
+  a({ attribute: "no-auto-convert", reflect: !0, type: Boolean })
+], t.prototype, "noAutoConvert", 2);
+e([
+  a({ attribute: "code-alignment", reflect: !0, type: String })
+], t.prototype, "codeAlignment", 2);
+e([
+  a({ attribute: "code-separator", reflect: !0, type: String })
+], t.prototype, "codeSeparator", 2);
+e([
+  a({ attribute: "hex-format", reflect: !0, type: String })
+], t.prototype, "hexFormat", 2);
+e([
+  a({ attribute: "gradient-stops", reflect: !0, type: String })
+], t.prototype, "gradientStops", 2);
+e([
+  n()
+], t.prototype, "textColor", 2);
+e([
+  n()
+], t.prototype, "textVariant", 2);
+e([
+  n()
+], t.prototype, "rowGap", 2);
+e([
+  n()
+], t.prototype, "lineClamp", 2);
+e([
+  n()
+], t.prototype, "backgroundColor", 2);
+e([
+  n()
+], t.prototype, "canFocusContainer", 2);
+e([
+  n()
+], t.prototype, "isContainerFocused", 2);
+e([
+  V(50)
+], t.prototype, "handleResize", 1);
+e([
+  s("variant")
+], t.prototype, "handleVariantChange", 1);
+e([
+  s("cmyk")
+], t.prototype, "handleCmykChange", 1);
+e([
+  s("rgb")
+], t.prototype, "handleRGBChange", 1);
+e([
+  s("hex")
+], t.prototype, "handleHexChange", 1);
+e([
+  s("hex", { waitUntilFirstUpdate: !0 }),
+  s("rgb", { waitUntilFirstUpdate: !0 }),
+  s("cmyk", { waitUntilFirstUpdate: !0 })
+], t.prototype, "handleColorChange", 1);
+e([
+  s("canFocusCodeOnly", { waitUntilFirstUpdate: !0 })
+], t.prototype, "handleCanFocusCodeOnlyChange", 1);
+t = e([
+  U("cx-color-swatch")
+], t);
 export {
-  q as default
+  t as default
 };

package/library/components/confirm-popover.js

@@ -1,12 +1,12 @@
-import "../chunks/button.D1YIxtv-.js";
-import "../chunks/dialog.BbQ4Du0M.js";
+import "../chunks/button.DbAUlIXG.js";
+import "../chunks/dialog.CXphbq8N.js";
 import "./dropdown.js";
-import "../chunks/typography.T72DuoCa.js";
+import "../chunks/typography.BLYdTF0n.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CAS3c9pM.js";
-import { C as x } from "../chunks/confirm-popover.CJXyEa5A.js";
+import { C as x } from "../chunks/confirm-popover.Cd4HM5-B.js";
 import "../chunks/custom-element.L4WJXn1j.js";
-import "../chunks/i18n.rtxrs1c1.js";
+import "../chunks/i18n.Q5_2aVLU.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/query.BBf1UFkC.js";
 import "../chunks/class-map.BiVq-cVR.js";

package/library/components/copy-button.js

@@ -1,7 +1,7 @@
 import { n as r, C as y } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as m } from "../chunks/component.styles.CAS3c9pM.js";
 import { c as f } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as g } from "../chunks/i18n.rtxrs1c1.js";
+import { L as g } from "../chunks/i18n.Q5_2aVLU.js";
 import { H as x } from "../chunks/slot.j5oheLJC.js";
 import { w as v } from "../chunks/watch.DJF5K-8U.js";
 import { i as _, x as b } from "../chunks/lit-element.jLBm65_O.js";
@@ -12,7 +12,7 @@ import { n as C } from "../chunks/when.Dr1es41R.js";
 import { s as d, g as h } from "../chunks/animation-registry.HmpwNuGH.js";
 import { C as z } from "../chunks/icon.BLXWp6CU.js";
 import k from "./tooltip.js";
-const I = _`:host{--error-color:var(--cx-color-danger);--success-color:var(--cx-color-success);--background-color:light-dark(var(--cx-color-primary),var(--cx-color-primary));--color:light-dark(var(--cx-color-neutral-0),var(--cx-color-neutral-1000));cursor:pointer;width:auto;max-width:100%;line-height:normal;display:inline-block;position:relative}.copy-button{border-style:solid;border-width:var(--cx-input-border-width);width:100%;max-width:100%;font-family:var(--button-font-family,var(--cx-input-font-family));font-style:var(--button-font-style,normal);font-weight:var(--button-font-weight,var(--cx-font-weight-regular));text-transform:var(--cx-button-text-transform,none);-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;transition:var(--cx-transition-x-fast) background-color, var(--cx-transition-x-fast) color, var(--cx-transition-x-fast) border, var(--cx-transition-x-fast) box-shadow;cursor:inherit;justify-content:center;align-items:stretch;padding:0;text-decoration:none;display:inline-flex}.copy-button__label{max-width:100%}.copy-button::-moz-focus-inner{border:0}.copy-button:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.copy-button{color:var(--cx-color-neutral);background-color:#0000;border-color:#0000}.copy-button.copy-button--has-label:hover:not(.copy-button--disabled),.copy-button.copy-button--has-label.copy-button--focused:not(.copy-button--disabled){background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral)}.copy-button.copy-button--has-label:active:not(.copy-button--disabled){background-color:var(--cx-color-neutral-200);border-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral)}.copy-button--disabled{opacity:.5;cursor:default}.copy-button--disabled *{pointer-events:none}.copy-button__icon-wrapper{background:0 0;border:none;grid-template-columns:1fr;display:inline-grid}.copy-button__icon-wrapper slot{grid-row-start:1;grid-column-start:1;display:inline-flex}.copy-button__icon{pointer-events:none;flex:none;align-items:center;display:flex}.copy-button--copy-success .copy-button__icon{color:var(--success-color)}.copy-button--copy-error .copy-button__icon{color:var(--error-color)}.copy-button__label{justify-content:center;align-items:center;line-height:1;display:inline-flex}.copy-button{background-color:var(--button-background-color,unset)}.copy-button--small{height:auto;min-height:var(--cx-input-height-small);font-size:var(--button-font-size,var(--cx-button-font-size-medium));border-radius:var(--cx-button-border-radius-small)}.copy-button--small .copy-button__icon{--font-size:var(--button-font-size,var(--cx-font-size-medium))}.copy-button--medium{height:auto;min-height:var(--cx-input-height-medium);font-size:var(--button-font-size,var(--cx-button-font-size-medium));border-radius:var(--cx-button-border-radius-medium)}.copy-button--large{height:auto;min-height:var(--cx-input-height-large);font-size:var(--button-font-size,var(--cx-button-font-size-medium));border-radius:var(--cx-button-border-radius-large)}.copy-button--x-large{height:auto;min-height:var(--cx-input-height-x-large);font-size:var(--button-font-size,var(--cx-button-font-size-medium));border-radius:var(--cx-button-border-radius-large)}.copy-button--small{padding:var(--button-padding,0 var(--cx-spacing-x-small))}.copy-button--medium{padding:var(--button-padding,0 var(--cx-spacing-medium))}.copy-button--large{padding:var(--button-padding,0 var(--cx-spacing-large))}.copy-button--x-large{padding:var(--button-padding,0 var(--cx-spacing-x-large))}.copy-button--has-label:not(.copy-button--no-icon).copy-button--small .copy-button__label,.copy-button--has-label:not(.copy-button--no-icon).copy-button--medium .copy-button__label,.copy-button--has-label:not(.copy-button--no-icon).copy-button--large .copy-button__label,.copy-button--has-label:not(.copy-button--no-icon).copy-button--x-large .copy-button__label{padding-inline-start:var(--cx-spacing-x-small)}`;
+const I = _`:host{--error-color:var(--cx-color-danger);--success-color:var(--cx-color-success);--background-color:light-dark(var(--cx-color-primary),var(--cx-color-primary));--color:light-dark(var(--cx-color-neutral-0),var(--cx-color-neutral-1000));cursor:pointer;width:auto;max-width:100%;line-height:normal;display:inline-block;position:relative}.copy-button{border-style:solid;border-width:var(--cx-input-border-width);width:100%;max-width:100%;font-family:var(--button-font-family,var(--cx-input-font-family));font-style:var(--button-font-style,normal);font-weight:var(--button-font-weight,var(--cx-font-weight-regular));text-transform:var(--cx-button-text-transform,none);-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;transition:var(--cx-transition-x-fast) background-color, var(--cx-transition-x-fast) color, var(--cx-transition-x-fast) border, var(--cx-transition-x-fast) box-shadow;cursor:inherit;justify-content:center;align-items:stretch;padding:0;text-decoration:none;display:inline-flex}.copy-button__label{max-width:100%}.copy-button::-moz-focus-inner{border:0}.copy-button:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.copy-button{color:var(--button-text-color,var(--cx-color-neutral));background-color:#0000;border-color:#0000}.copy-button.copy-button--has-label:hover:not(.copy-button--disabled),.copy-button.copy-button--has-label.copy-button--focused:not(.copy-button--disabled){background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--button-text-color,var(--cx-color-neutral))}.copy-button.copy-button--has-label:active:not(.copy-button--disabled){background-color:var(--cx-color-neutral-200);border-color:var(--cx-color-neutral-200);color:var(--button-text-color,var(--cx-color-neutral))}.copy-button--disabled{opacity:.5;cursor:default}.copy-button--disabled *{pointer-events:none}.copy-button__icon-wrapper{background:0 0;border:none;grid-template-columns:1fr;display:inline-grid}.copy-button__icon-wrapper slot{grid-row-start:1;grid-column-start:1;display:inline-flex}.copy-button__icon{pointer-events:none;flex:none;align-items:center;display:flex}.copy-button--copy-success .copy-button__icon{color:var(--success-color)}.copy-button--copy-error .copy-button__icon{color:var(--error-color)}.copy-button__label{justify-content:center;align-items:center;line-height:1;display:inline-flex}.copy-button{background-color:var(--button-background-color,unset)}.copy-button--small{height:auto;min-height:var(--cx-input-height-small);font-size:var(--button-font-size,var(--cx-button-font-size-medium));border-radius:var(--cx-button-border-radius-small)}.copy-button--small .copy-button__icon{--font-size:var(--button-font-size,var(--cx-font-size-medium))}.copy-button--medium{height:auto;min-height:var(--cx-input-height-medium);font-size:var(--button-font-size,var(--cx-button-font-size-medium));border-radius:var(--cx-button-border-radius-medium)}.copy-button--large{height:auto;min-height:var(--cx-input-height-large);font-size:var(--button-font-size,var(--cx-button-font-size-medium));border-radius:var(--cx-button-border-radius-large)}.copy-button--x-large{height:auto;min-height:var(--cx-input-height-x-large);font-size:var(--button-font-size,var(--cx-button-font-size-medium));border-radius:var(--cx-button-border-radius-large)}.copy-button--small{padding:var(--button-padding,0 var(--cx-spacing-x-small))}.copy-button--medium{padding:var(--button-padding,0 var(--cx-spacing-medium))}.copy-button--large{padding:var(--button-padding,0 var(--cx-spacing-large))}.copy-button--x-large{padding:var(--button-padding,0 var(--cx-spacing-x-large))}.copy-button--has-label:not(.copy-button--no-icon).copy-button--small .copy-button__label,.copy-button--has-label:not(.copy-button--no-icon).copy-button--medium .copy-button__label,.copy-button--has-label:not(.copy-button--no-icon).copy-button--large .copy-button__label,.copy-button--has-label:not(.copy-button--no-icon).copy-button--x-large .copy-button__label{padding-inline-start:var(--cx-spacing-x-small)}`;
 var L = Object.defineProperty, F = Object.getOwnPropertyDescriptor, o = (e, a, c, n) => {
   for (var i = n > 1 ? void 0 : n ? F(a, c) : a, s = e.length - 1, l; s >= 0; s--)
     (l = e[s]) && (i = (n ? l(a, c, i) : l(i)) || i);