@orangelogic/design-system 2.78.0 → 2.79.0-ci.2

package/library/chunks/{animation.DU8t6mrk.js → animation.7ifl4x2S.js}

@@ -1,14 +1,10 @@
 import { n as a, C as p } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as m } from "./component.styles.DMSLciL5.js";
+import { c as m } from "./component.styles.CRO4Odto.js";
 import { c as y } from "./custom-element.L4WJXn1j.js";
 import { w as d } from "./watch.BCJD77bD.js";
 import { i as b, x as u } from "./lit-element.jLBm65_O.js";
 import { r as g } from "./query-async.CTgXGyQ5.js";
-const h = b`
-  :host {
-    display: contents;
-  }
-`, x = [
+const h = b`:host{display:contents}`, x = [
   {
     easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
     offset: 0,
@@ -928,7 +924,7 @@ let t = class extends p {
     this.animation?.finish();
   }
   render() {
-    return u` <slot @slotchange=${this.handleSlotChange}></slot> `;
+    return u`<slot @slotchange=${this.handleSlotChange}></slot>`;
   }
 };
 t.styles = [m, h];

package/library/chunks/{button.DS64Tr8Z.js → button.B-ktz-w4.js}

@@ -1,5 +1,5 @@
 import { n as i, C as v } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as g } from "./component.styles.DMSLciL5.js";
+import { c as g } from "./component.styles.CRO4Odto.js";
 import { c as C } from "./custom-element.L4WJXn1j.js";
 import { F as x, v as w } from "./form.DgwYWi0O.js";
 import { L as $ } from "./i18n.BUW7B9hr.js";
@@ -13,7 +13,7 @@ import { n as f } from "./when.Dr1es41R.js";
 import { u as h, i as b } from "./static.UA3G1Deq.js";
 import B from "../components/icon.js";
 import F from "../components/spinner.js";
-import { b as _ } from "./button.styles.Dl5IQLHU.js";
+import { b as _ } from "./button.styles.CKqn956w.js";
 var y = /* @__PURE__ */ ((t) => (t.Adaptive = "adaptive", t.Fill = "fill", t.Hug = "hug", t))(y || {}), l = /* @__PURE__ */ ((t) => (t.Custom = "custom", t.Large = "large", t.Medium = "medium", t.Small = "small", t.XLarge = "x-large", t))(l || {}), k = Object.defineProperty, V = Object.getOwnPropertyDescriptor, r = (t, s, p, n) => {
   for (var a = n > 1 ? void 0 : n ? V(s, p) : s, d = t.length - 1, c; d >= 0; d--)
     (c = t[d]) && (a = (n ? c(s, p, a) : c(a)) || a);
@@ -126,15 +126,11 @@ let e = class extends v {
     this.isButton() && (this.button.setCustomValidity(t), this.formControlController.updateValidity());
   }
   renderLabel() {
-    return h`
-      <slot part="label" class="button__label" @slotchange=${this.handleLabelSlotChange}></slot>
-    `;
+    return h`<slot part="label" class="button__label" @slotchange=${this.handleLabelSlotChange}></slot>`;
   }
   render() {
     const t = this.isLink() && !this.forceButtonNavigation, s = t ? b`a` : b`button`;
-    return h`<${s}
-        part="base"
-        class=${D({
+    return h`<${s} part="base" class=${D({
       button: !0,
       "button--caret": this.caret,
       "button--circle": this.circle,
@@ -161,40 +157,11 @@ let e = class extends v {
       "button--text": this.variant === "text",
       "button--warning": this.variant === "warning",
       "button--x-large": this.size === l.XLarge
-    })}
-        ?disabled=${o(t ? void 0 : this.disabled)}
-        type=${o(t ? void 0 : this.type)}
-        title=${o(this.title || void 0)}
-        name=${o(t ? void 0 : this.name)}
-        value=${o(t ? void 0 : this.value)}
-        href=${o(t ? this.link || this.href : void 0)}
-        target=${o(t ? this.target : void 0)}
-        download=${o(t ? this.download : void 0)}
-        rel=${o(t ? this.rel : void 0)}
-        role=${o(t ? void 0 : "button")}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        aria-label=${o(this.mappedLabel || void 0)}
-        tabindex=${this.disabled ? "-1" : "0"}
-        @blur=${this.handleBlur}
-        @focus=${this.handleFocus}
-        @invalid=${this.isButton() ? this.handleInvalid : null}
-        @click=${this.handleClick}
-      >
-        <slot name="prefix" part="prefix" class="button__prefix"></slot>
-        ${this.renderLabel()}
-        <slot name="suffix" part="suffix" class="button__suffix"></slot>
-        ${f(
+    })} ?disabled=${o(t ? void 0 : this.disabled)} type=${o(t ? void 0 : this.type)} title=${o(this.title || void 0)} name=${o(t ? void 0 : this.name)} value=${o(t ? void 0 : this.value)} href=${o(t ? this.link || this.href : void 0)} target=${o(t ? this.target : void 0)} download=${o(t ? this.download : void 0)} rel=${o(t ? this.rel : void 0)} role=${o(t ? void 0 : "button")} aria-disabled=${this.disabled ? "true" : "false"} aria-label=${o(this.mappedLabel || void 0)} tabindex=${this.disabled ? "-1" : "0"} @blur=${this.handleBlur} @focus=${this.handleFocus} @invalid=${this.isButton() ? this.handleInvalid : null} @click=${this.handleClick}><slot name="prefix" part="prefix" class="button__prefix"></slot>${this.renderLabel()}<slot name="suffix" part="suffix" class="button__suffix"></slot>${f(
       this.caret,
-      () => h`
-            <cx-icon
-              part="caret"
-              class="button__caret"
-              name=${`keyboard_arrow_${this.caretDirection}`}
-            ></cx-icon>
-          `
+      () => h`<cx-icon part="caret" class="button__caret" name=${`keyboard_arrow_${this.caretDirection}`}></cx-icon>`
     )}
-        ${f(this.loading, () => h`<cx-spinner part="spinner"></cx-spinner>`)}
-      </${s}>`;
+        ${f(this.loading, () => h`<cx-spinner part="spinner"></cx-spinner>`)}</${s}>`;
   }
 };
 e.styles = [g, _];

package/library/chunks/button.styles.CKqn956w.js

@@ -0,0 +1,5 @@
+import { i as o } from "./lit-element.jLBm65_O.js";
+const r = o`:host{--background-color:var(--cx-color-primary);--color:light-dark(var(--cx-color-neutral-0),var(--cx-color-neutral-1000));--font-size:var(--cx-font-size-medium);--height:var(--cx-input-height-medium);--padding:0;--button-custom-height:32px;--button-custom-padding:4px 8px 4px 8px;--button-custom-font-size:var(--cx-font-size-medium);cursor:pointer;width:auto;max-width:100%;line-height:normal;display:inline-block;position:relative}:host([width-type=fill]),:host([width-type=adaptive][device-type=tablet]),:host([width-type=adaptive][device-type=mobile]){width:100%}.button{border-style:solid;border-width:var(--cx-input-border-width);width:100%;font-family:var(--cx-input-font-family);font-weight:var(--cx-font-weight-regular);font-size:var(--font-size,var(--cx-font-size-medium));height:var(--height,var(--cx-input-height-medium));padding:var(--padding,0);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:center;text-decoration:none;display:inline-flex}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.button--disabled{opacity:.5;cursor:default}.button--disabled *{pointer-events:none}.button__prefix,.button__suffix{pointer-events:none;flex:none;align-items:center;display:flex}.button__label{white-space:nowrap;text-overflow:ellipsis;line-height:1.15;display:inline-block;overflow:hidden}.button__label::slotted(cx-icon){vertical-align:-2px}.button--standard.button--default{background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral)}.button--standard.button--default:hover:not(.button--disabled),.button--standard.button--default.button--focused:not(.button--disabled){background-color:var(--cx-color-neutral-200);border-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral)}.button--standard.button--default:active:not(.button--disabled){background-color:var(--cx-color-neutral-300);border-color:var(--cx-color-neutral-300);color:var(--cx-color-neutral)}.button--standard.button--primary{background-color:var(--cx-color-primary);border-color:var(--cx-color-primary);color:var(--cx-color-neutral-0)}.button--standard.button--primary:hover:not(.button--disabled),.button--standard.button--primary.button--focused:not(.button--disabled){background-color:var(--cx-color-primary-500);border-color:var(--cx-color-primary-500);color:var(--cx-color-neutral-0)}.button--standard.button--primary:active:not(.button--disabled){background-color:var(--cx-color-primary-700);border-color:var(--cx-color-primary-700);color:var(--cx-color-neutral-0)}.button--standard.button--success{background-color:var(--cx-color-success);border-color:var(--cx-color-success);color:var(--cx-color-neutral-0)}.button--standard.button--success:hover:not(.button--disabled),.button--standard.button--success.button--focused:not(.button--disabled){background-color:var(--cx-color-success-500);border-color:var(--cx-color-success-500);color:var(--cx-color-neutral-0)}.button--standard.button--success:active:not(.button--disabled){background-color:var(--cx-color-success-700);border-color:var(--cx-color-success-700);color:var(--cx-color-neutral-0)}.button--standard.button--warning{background-color:var(--cx-color-warning);border-color:var(--cx-color-warning);color:var(--cx-color-neutral-0)}.button--standard.button--warning:hover:not(.button--disabled),.button--standard.button--warning.button--focused:not(.button--disabled){background-color:var(--cx-color-warning-500);border-color:var(--cx-color-warning-500);color:var(--cx-color-neutral-0)}.button--standard.button--warning:active:not(.button--disabled){background-color:var(--cx-color-warning-700);border-color:var(--cx-color-warning-700);color:var(--cx-color-neutral-0)}.button--standard.button--danger{background-color:var(--cx-color-danger);border-color:var(--cx-color-danger);color:var(--cx-color-neutral-0)}.button--standard.button--danger:hover:not(.button--disabled),.button--standard.button--danger.button--focused:not(.button--disabled){background-color:var(--cx-color-danger-500);border-color:var(--cx-color-danger-500);color:var(--cx-color-neutral-0)}.button--standard.button--danger:active:not(.button--disabled){background-color:var(--cx-color-danger-700);border-color:var(--cx-color-danger-700);color:var(--cx-color-neutral-0)}.button--standard.button--custom{background-color:var(--background-color);border-color:var(--background-color);color:var(--color)}.button--standard.button--custom:hover:not(.button--disabled),.button--standard.button--custom.button--focused:not(.button--disabled){background-color:var(--background-color-focus,var(--background-color));border-color:var(--background-color-focus,var(--background-color));color:var(--color-focus,var(--color))}.button--standard.button--custom:active:not(.button--disabled){background-color:var(--background-color-active,var(--background-color));border-color:var(--background-color-active,var(--background-color));color:var(--color-active,var(--color))}.button--outline{border:solid var(--cx-input-border-width);background:0 0}.button--outline.button--default{border-color:var(--cx-input-border-color);color:var(--cx-color-neutral)}.button--outline.button--default:hover:not(.button--disabled),.button--outline.button--default.button--focused:not(.button--disabled),.button--outline.button--default.button--checked:not(.button--disabled){border-color:var(--cx-color-neutral-300);background-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral)}.button--outline.button--default:active:not(.button--disabled){border-color:var(--cx-color-neutral-300);background-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral)}.button--outline.button--primary{border-color:var(--cx-color-primary);color:var(--cx-color-primary)}.button--outline.button--primary:hover:not(.button--disabled),.button--outline.button--primary.button--focused:not(.button--disabled),.button--outline.button--primary.button--checked:not(.button--disabled){background-color:var(--cx-color-primary-500);color:var(--cx-color-neutral-0)}.button--outline.button--primary:active:not(.button--disabled){border-color:var(--cx-color-primary-700);background-color:var(--cx-color-primary-700);color:var(--cx-color-neutral-0)}.button--outline.button--success{border-color:var(--cx-color-success);color:var(--cx-color-success)}.button--outline.button--success:hover:not(.button--disabled),.button--outline.button--success.button--focused:not(.button--disabled),.button--outline.button--success.button--checked:not(.button--disabled){background-color:var(--cx-color-success-500);color:var(--cx-color-neutral-0)}.button--outline.button--success:active:not(.button--disabled){border-color:var(--cx-color-success);background-color:var(--cx-color-success);color:var(--cx-color-neutral-0)}.button--outline.button--warning{border-color:var(--cx-color-warning);color:var(--cx-color-warning)}.button--outline.button--warning:hover:not(.button--disabled),.button--outline.button--warning.button--focused:not(.button--disabled),.button--outline.button--warning.button--checked:not(.button--disabled){background-color:var(--cx-color-warning-500);color:var(--cx-color-neutral-0)}.button--outline.button--warning:active:not(.button--disabled){border-color:var(--cx-color-warning-700);background-color:var(--cx-color-warning-700);color:var(--cx-color-neutral-0)}.button--outline.button--danger{border-color:var(--cx-color-danger);color:var(--cx-color-danger)}.button--outline.button--danger:hover:not(.button--disabled),.button--outline.button--danger.button--focused:not(.button--disabled),.button--outline.button--danger.button--checked:not(.button--disabled){background-color:var(--cx-color-danger-500);color:var(--cx-color-neutral-0)}.button--outline.button--danger:active:not(.button--disabled){border-color:var(--cx-color-danger-700);background-color:var(--cx-color-danger-700);color:var(--cx-color-neutral-0)}@media (forced-colors:active){.button.button--outline.button--checked:not(.button--disabled){outline:2px solid #0000}}.button--text{color:var(--cx-color-neutral);background-color:#0000;border-color:#0000}.button--text:hover:not(.button--disabled),.button--text.button--focused:not(.button--disabled){background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral)}.button--text:focus-visible:not(.button--disabled){color:var(--cx-color-neutral-800);background-color:#0000;border-color:#0000}.button--text:active:not(.button--disabled){background-color:var(--cx-color-neutral-200);border-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral)}.button--tertiary{color:var(--cx-color-neutral);background-color:#0000;border-color:#0000}.button--tertiary:hover:not(.button--disabled),.button--tertiary.button--focused:not(.button--disabled){background-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral);border-color:#0000}.button--tertiary:focus-visible:not(.button--disabled){background-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral);border-color:#0000}.button--tertiary:active:not(.button--disabled){background-color:var(--cx-color-neutral-300);color:var(--cx-color-neutral);border-color:#0000}.button--small{height:auto;min-height:var(--cx-input-height-small);font-size:var(--cx-button-font-size-medium);border-radius:var(--cx-button-border-radius-small)}.button--small ::slotted(cx-icon){--font-size:var(--cx-font-size-medium)}.button--medium{height:auto;min-height:var(--cx-input-height-medium);font-size:var(--cx-button-font-size-medium);border-radius:var(--cx-button-border-radius-medium)}.button--large{height:auto;min-height:var(--cx-input-height-large);font-size:var(--cx-button-font-size-medium);border-radius:var(--cx-button-border-radius-large)}.button--x-large{height:auto;min-height:var(--cx-input-height-x-large);font-size:var(--cx-button-font-size-medium);border-radius:var(--cx-button-border-radius-large)}.button--custom-size{--height:var(--button-custom-height);--padding:var(--button-custom-padding);--font-size:var(--button-custom-font-size);border-radius:var(--cx-button-border-radius-medium)}.button--pill.button--small{border-radius:var(--cx-input-height-small)}.button--pill.button--medium{border-radius:var(--cx-input-height-medium)}.button--pill.button--large{border-radius:var(--cx-input-height-large)}.button--pill.button--x-large{border-radius:var(--cx-input-height-x-large)}.button--circle{padding-left:0;padding-right:0}.button--circle.button--small{width:var(--cx-input-height-small);border-radius:50%}.button--circle.button--medium{width:var(--cx-input-height-medium);border-radius:50%}.button--circle.button--large{width:var(--cx-input-height-large);border-radius:50%}.button--circle.button--x-large{width:var(--cx-input-height-x-large);border-radius:50%}.button--circle .button__prefix,.button--circle .button__suffix,.button--circle .button__caret{display:none}.button--circle .button__label{justify-content:center;align-items:center;line-height:1;display:inline-flex}.button--caret .button__caret{--font-size:var(--cx-font-size-large);margin-block:auto}.button--caret.button--small .button__caret{--font-size:var(--cx-font-size-medium)}.button--caret .button__suffix{display:none}.button--loading{cursor:wait;position:relative}.button--loading .button__prefix,.button--loading .button__label,.button--loading .button__suffix,.button--loading .button__caret{visibility:hidden}.button--loading cx-spinner{--indicator-color:currentColor;width:1em;height:1em;font-size:1em;position:absolute;top:calc(50% - .5em);left:calc(50% - .5em)}.button ::slotted(cx-badge){pointer-events:none;position:absolute;top:0;right:0;translate:50% -50%}.button--rtl ::slotted(cx-badge){left:0;right:auto;translate:-50% -50%}.button--has-label.button--small .button__label{padding:0 var(--cx-spacing-x-small)}.button--has-label.button--medium .button__label{padding:0 var(--cx-spacing-small)}.button--has-label.button--large .button__label{padding:0 var(--cx-spacing-medium)}.button--has-label.button--x-large .button__label{padding:0 var(--cx-spacing-large)}.button--has-prefix.button--small,.button--has-prefix.button--small .button__label,.button--has-prefix.button--medium,.button--has-prefix.button--medium .button__label{padding-inline-start:var(--cx-spacing-x-small)}.button--has-prefix.button--large{padding-inline-start:var(--cx-spacing-small)}.button--has-prefix.button--large .button__label{padding-inline-start:var(--cx-spacing-x-small)}.button--has-prefix.button--x-large,.button--has-prefix.button--x-large .button__label{padding-inline-start:var(--cx-spacing-medium)}.button--has-suffix.button--small,.button--caret.button--small,.button--has-suffix.button--small .button__label,.button--caret.button--small .button__label,.button--has-suffix.button--medium,.button--caret.button--medium,.button--has-suffix.button--medium .button__label,.button--caret.button--medium .button__label{padding-inline-end:var(--cx-spacing-x-small)}.button--has-suffix.button--large,.button--caret.button--large{padding-inline-end:var(--cx-spacing-small)}.button--has-suffix.button--large .button__label,.button--caret.button--large .button__label{padding-inline-end:var(--cx-spacing-x-small)}.button--has-suffix.button--x-large,.button--caret.button--x-large,.button--has-suffix.button--x-large .button__label,.button--caret.button--x-large .button__label{padding-inline-end:var(--cx-spacing-medium)}.button--caret cx-icon::part(span){height:auto}:host([data-cx-button-group__button--first]:not([data-cx-button-group__button--last])) .button{border-start-end-radius:0;border-end-end-radius:0}:host([data-cx-button-group__button--inner]) .button{border-radius:0}:host([data-cx-button-group__button--last]:not([data-cx-button-group__button--first])) .button{border-start-start-radius:0;border-end-start-radius:0}:host([data-cx-button-group__button]:not([data-cx-button-group__button--first])){margin-inline-start:calc(-1 * var(--cx-input-border-width))}:host([data-cx-button-group__button]:not([data-cx-button-group__button--first],[data-cx-button-group__button--radio],[variant=default]):not(:hover)) .button:after{content:"";top:0;inset-inline-start:0;mix-blend-mode:multiply;border-left:1px solid #80808054;position:absolute;bottom:0}:host([data-cx-button-group__button--hover]){z-index:1}:host([data-cx-button-group__button--focus]),:host([data-cx-button-group__button][checked]){z-index:2}`;
+export {
+  r as b
+};

package/library/chunks/{color-swatch-group.C7T6-sY7.js → color-swatch-group.DvllHUil.js}

@@ -1,9 +1,9 @@
 import z from "../components/space.js";
-import { C as $ } from "./table.CcqrVieF.js";
-import { C as k } from "./typography.oDzoLbZS.js";
+import { C as $ } from "./table.B8LpbiGE.js";
+import { C as k } from "./typography.DJC_UXgs.js";
 import { n as h, C as F } from "./lib-cortex-element.CVMmyPMC.js";
-import { C, a as m } from "./color-swatch.BuUP5yG4.js";
-import { c as A } from "./component.styles.DMSLciL5.js";
+import { C, a as g } from "./color-swatch.Bx-HOp9f.js";
+import { c as A } from "./component.styles.CRO4Odto.js";
 import { D as p } from "./content-builder.B4Tqoc6M.js";
 import { c as S } from "./custom-element.L4WJXn1j.js";
 import { d as T } from "./debounce.DaHuiSGU.js";
@@ -20,8 +20,8 @@ import { o as M } from "./if-defined.BRoBj_Rp.js";
 import { c as G } from "./repeat.DbF2p5ae.js";
 import { o as f } from "./style-map.llVFPd__.js";
 import { n as L } from "./when.Dr1es41R.js";
-var n = /* @__PURE__ */ ((e) => (e.Circles = "circles", e.Grid = "grid", e.Table = "table", e))(n || {});
-const v = 165, B = ["HEX", "RGB", "CMYK", "PMS"], I = {
+var c = /* @__PURE__ */ ((e) => (e.Circles = "circles", e.Grid = "grid", e.Table = "table", e))(c || {});
+const y = 165, B = ["HEX", "RGB", "CMYK", "PMS"], I = {
   resizable: !1
 }, _ = [
   {
@@ -83,39 +83,22 @@ function u(e, r, t) {
   const i = r.getValue() ?? "";
   if (!i)
     return null;
-  const s = l`
-    <cx-copy-button
-      copy-label=${e.term("clickToCopy")}
-      focus-copy-label=${e.term("pressEnterOrCtrlCToCopy")}
-      hoist
-      label=${`${t}, ${r.getField()} ${e.term("code")} ${i}. ${e.term("clickOrPressCtrlCToCopy")}`}
-      no-icon
-      tooltip-distance="0"
-      value=${i}
-      style=${f({
+  const s = l`<cx-copy-button copy-label=${e.term("clickToCopy")} focus-copy-label=${e.term("pressEnterOrCtrlCToCopy")} hoist label=${`${t}, ${r.getField()} ${e.term("code")} ${i}. ${e.term("clickOrPressCtrlCToCopy")}`} no-icon tooltip-distance="0" value=${i} style=${f({
     "--button-background-color": "transparent",
     "--button-font-size": "var(--cx-font-size-large)",
     "--button-padding": "0",
     "max-width": "100%"
-  })}
-    >
-      <span
-        style=${f({
+  })}><span style=${f({
     display: "inline-block",
     maxWidth: "100%",
     overflow: "hidden",
     textOverflow: "ellipsis",
     verticalAlign: "middle",
     whiteSpace: "nowrap"
-  })}
-      >
-        ${i}
-      </span>
-    </cx-copy-button>
-  `, c = document.createDocumentFragment();
-  return H(s, c), c.firstElementChild;
+  })}>${i}</span></cx-copy-button>`, n = document.createDocumentFragment();
+  return H(s, n), n.firstElementChild;
 }
-const N = (e, r) => [
+const K = (e, r) => [
   ..._.slice(0, 2),
   {
     field: "hex",
@@ -153,106 +136,16 @@ const N = (e, r) => [
     title: "PMS",
     widthGrow: 2
   }
-], K = O`
-  :host {
-    --grid-gap: var(--cx-spacing-medium);
-    --padding: 0;
-
-    display: block;
-    padding: var(--cx-focus-ring-width);
-    width: 100%;
-    min-width: 0;
-    overflow: auto;
-  }
-
-  .color-swatch-group__swatches {
-    padding: var(--padding, 0);
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-  }
-
-  .color-swatch-group__table-container {
-    max-width: 100%;
-  }
-
-  .color-swatch-group__table-container:focus-visible {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  .color-swatch-group__swatches--circles--horizontal
-    > cx-color-swatch:not(:first-child) {
-    margin-left: var(--swatch-group-horizontal-gap, -100px);
-  }
-
-  .color-swatch-group__swatches--circles--vertical
-    > cx-color-swatch:not(:first-child) {
-    margin-top: var(--swatch-group-vertical-gap, -50px);
-  }
-
-  .color-swatch-group__swatches--circles--horizontal__item {
-    /** No padding for positive gap value - which give no overlapping */
-    --swatch-content-padding: 0
-      min(calc(var(--swatch-group-horizontal-gap, -100px) * -0.5), 0) 0 0;
-  }
-
-  .color-swatch-group__swatches--circles--vertical__item {
-    /** No padding for positive gap value - which give no overlapping */
-    --swatch-content-padding: 0 0
-      min(calc(var(--swatch-group-vertical-gap, -50px) * -0.5), 0) 0;
-  }
-
-  .color-swatch-group__swatches--circles--vertical__item--mobile {
-    --swatch-size: 100%;
-  }
-
-  .color-swatch-group__swatches--grid {
-    display: grid;
-    gap: var(--grid-gap, var(--cx-spacing-medium));
-  }
-
-  .color-swatch-group__table {
-    --body-background-color: transparent;
-    --row-background-color: transparent;
-    --row-even-background-color: transparent;
-    --row-hover-background-color: var(--cx-color-neutral-50);
-    --row-even-hover-background-color: var(--cx-color-neutral-50);
-    --header-background-color: transparent;
-    --group-row-background-color: transparent;
-    --cell-border-color: transparent;
-    --cell-bottom-border-color: transparent;
-
-    --header-font-size: var(--cx-font-size-large);
-    --header-font-weight: var(--cx-font-weight-semibold);
-    --header-border-right: none;
-
-    --cell-font-size: var(--cx-font-size-large);
-    --cell-font-weight: var(--cx-font-weight-regular);
-    --cell-line-height: 40px;
-    --cell-hover-background-color: transparent;
-
-    --placeholder-font-size: var(--cx-font-size-medium-large);
-    --cell-horizontal-padding: var(--cx-spacing-2x-small);
-    --header-horizontal-padding: var(--cx-spacing-2x-small);
-    --header-border-bottom: 1px solid var(--cx-color-neutral-200);
-    --hover-menu-background-color: var(--row-hover-background-color);
-    --outer-border-color: transparent;
-  }
-
-  .color-swatch-group__table::part(table) {
-    background-color: transparent;
-  }
-`;
+], N = O`:host{--grid-gap:var(--cx-spacing-medium);--padding:0;padding:var(--cx-focus-ring-width);width:100%;min-width:0;display:block;overflow:auto}.color-swatch-group__swatches{padding:var(--padding,0);width:100%;max-width:100%;height:100%}.color-swatch-group__table-container{max-width:100%}.color-swatch-group__table-container:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-swatch-group__swatches--circles--horizontal>cx-color-swatch:not(:first-child){margin-left:var(--swatch-group-horizontal-gap,-100px)}.color-swatch-group__swatches--circles--vertical>cx-color-swatch:not(:first-child){margin-top:var(--swatch-group-vertical-gap,-50px)}.color-swatch-group__swatches--circles--horizontal__item{--swatch-content-padding:0 min(calc(var(--swatch-group-horizontal-gap,-100px) * -.5), 0) 0 0}.color-swatch-group__swatches--circles--vertical__item{--swatch-content-padding:0 0 min(calc(var(--swatch-group-vertical-gap,-50px) * -.5), 0) 0}.color-swatch-group__swatches--circles--vertical__item--mobile{--swatch-size:100%}.color-swatch-group__swatches--grid{gap:var(--grid-gap,var(--cx-spacing-medium));display:grid}.color-swatch-group__table{--body-background-color:transparent;--row-background-color:transparent;--row-even-background-color:transparent;--row-hover-background-color:var(--cx-color-neutral-50);--row-even-hover-background-color:var(--cx-color-neutral-50);--header-background-color:transparent;--group-row-background-color:transparent;--cell-border-color:transparent;--cell-bottom-border-color:transparent;--header-font-size:var(--cx-font-size-large);--header-font-weight:var(--cx-font-weight-semibold);--header-border-right:none;--cell-font-size:var(--cx-font-size-large);--cell-font-weight:var(--cx-font-weight-regular);--cell-line-height:40px;--cell-hover-background-color:transparent;--placeholder-font-size:var(--cx-font-size-medium-large);--cell-horizontal-padding:var(--cx-spacing-2x-small);--header-horizontal-padding:var(--cx-spacing-2x-small);--header-border-bottom:1px solid var(--cx-color-neutral-200);--hover-menu-background-color:var(--row-hover-background-color);--outer-border-color:transparent}.color-swatch-group__table::part(table){background-color:#0000}`;
 var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, a = (e, r, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? j(r, t) : r, c = e.length - 1, g; c >= 0; c--)
-    (g = e[c]) && (s = (i ? g(r, t, s) : g(s)) || s);
+  for (var s = i > 1 ? void 0 : i ? j(r, t) : r, n = e.length - 1, m; n >= 0; n--)
+    (m = e[n]) && (s = (i ? m(r, t, s) : m(s)) || s);
   return i && s && U(r, t, s), s;
 };
-const y = "unnamed";
+const v = "unnamed";
 let o = class extends F {
   constructor() {
-    super(), this.localize = new E(this), this.variant = n.Table, this.data = [], this.maxCol = 4, this.canCopy = !1, this.showCodes = ["HEX", "RGB", "CMYK", "PMS"], this.multiLanguage = !1, this.breakpoints = [350, 696, 1024], this.deviceType = p.Desktop, this.currentCol = 0, this.isFocused = !1, this.canFocusContainer = !0, this.isContainerFocused = !1, this.handleWindowResize = this.handleWindowResize.bind(this);
+    super(), this.localize = new E(this), this.variant = c.Table, this.data = [], this.maxCol = 4, this.canCopy = !1, this.showCodes = ["HEX", "RGB", "CMYK", "PMS"], this.multiLanguage = !1, this.breakpoints = [350, 696, 1024], this.deviceType = p.Desktop, this.currentCol = 0, this.isFocused = !1, this.canFocusContainer = !0, this.isContainerFocused = !1, this.handleWindowResize = this.handleWindowResize.bind(this);
   }
   runFirstUpdated() {
     this.breakpoints = D(this, this.breakpoints), this.handleResize();
@@ -272,16 +165,16 @@ let o = class extends F {
   handleResize() {
     const e = window.innerWidth;
     switch (this.variant) {
-      case n.Grid: {
+      case c.Grid: {
         const r = Number.parseFloat(
           getComputedStyle(this.containerEl).getPropertyValue("--grid-gap")
         );
         this.currentCol = Math.floor(
-          (e + r) / (v + r)
+          (e + r) / (y + r)
         );
         break;
       }
-      case n.Circles: {
+      case c.Circles: {
         this.deviceType = R(this.breakpoints);
         break;
       }
@@ -304,7 +197,7 @@ let o = class extends F {
    * Filter out the columns that are not in the showCodes
    */
   getTableColumns(e) {
-    const r = this.canCopy ? N(this.localize, e) : _;
+    const r = this.canCopy ? K(this.localize, e) : _;
     return [
       ...r.slice(0, 2),
       ...r.slice(2).filter(
@@ -318,7 +211,7 @@ let o = class extends F {
   categorizeByPalette() {
     return Object.values(
       this.data.reduce((e, r) => {
-        const t = r.palette?.trim() ? r.palette : y;
+        const t = r.palette?.trim() ? r.palette : v;
         return e[t] || (e[t] = { colors: [], palette: t }), e[t].colors.push(r), e;
       }, {})
     );
@@ -336,17 +229,17 @@ let o = class extends F {
    * Get current direction of the color swatch group
    */
   get currentDirection() {
-    return this.variant === n.Circles && this.deviceType !== p.Desktop ? "vertical" : "horizontal";
+    return this.variant === c.Circles && this.deviceType !== p.Desktop ? "vertical" : "horizontal";
   }
   /**
    * Get the variant of the color swatch
    */
   get swatchVariant() {
     switch (this.variant) {
-      case n.Circles:
-        return this.deviceType === p.Tablet ? m.Oval : m.Circle;
-      case n.Grid:
-        return m.GridItem;
+      case c.Circles:
+        return this.deviceType === p.Tablet ? g.Oval : g.Circle;
+      case c.Grid:
+        return g.GridItem;
       default:
         return;
     }
@@ -355,14 +248,8 @@ let o = class extends F {
     const e = this.currentDirection, r = this.localize.lang();
     return l`
       ${L(
-      this.variant === n.Table,
-      () => l`
-          <cx-space
-            class="color-swatch-group__swatches"
-            direction="vertical"
-            spacing="2x-small"
-          >
-            ${b(
+      this.variant === c.Table,
+      () => l`<cx-space class="color-swatch-group__swatches" direction="vertical" spacing="2x-small">${b(
         [this.data, this.canCopy],
         () => this.categorizeByPalette().map(
           (t) => {
@@ -370,95 +257,38 @@ let o = class extends F {
               ...s,
               name: s[`name-${r.toLowerCase()}`] ?? s.name
             })) : t.colors;
-            return l`
-                    <div
-                      tabindex=${M(
+            return l`<div tabindex=${M(
               this.canFocusContainer ? "0" : void 0
-            )}
-                      data-table-container
-                      class="color-swatch-group__table-container"
-                      @focusin=${this.handleFocusIn}
-                      @focusout=${this.handleFocusOut}
-                      @keydown=${this.handleKeyDown}
-                    >
-                      <cx-typography variant="h3">
-                        ${t.palette === y ? this.localize.term("noPalette") : this.localize.term("shadesPalette", t.palette)}
-                      </cx-typography>
-                      <cx-table
-                        part="table"
-                        tabindex=${this.isFocused ? void 0 : "-1"}
-                        no-selectable
-                        layout="fitColumns"
-                        .columns=${b(
+            )} data-table-container class="color-swatch-group__table-container" @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut} @keydown=${this.handleKeyDown}><cx-typography variant="h3">${t.palette === v ? this.localize.term("noPalette") : this.localize.term("shadesPalette", t.palette)}</cx-typography><cx-table part="table" tabindex=${this.isFocused ? void 0 : "-1"} no-selectable layout="fitColumns" .columns=${b(
               [this.showCodes, this.canCopy, this.localize],
               () => this.getTableColumns(t.palette)
-            )}
-                        .columnDefaults=${I}
-                        .rowHeight=${48}
-                        .data=${i}
-                        class="color-swatch-group__table"
-                      ></cx-table>
-                    </div>
-                  `;
+            )} .columnDefaults=${I} .rowHeight=${48} .data=${i} class="color-swatch-group__table"></cx-table></div>`;
           }
         )
-      )}
-          </cx-space>
-        `,
-      () => l`
-          <cx-space
-            part="color-swatch"
-            role="list"
-            aria-label=${this.localize.term("listOfColors")}
-            aria-roledescription=${this.localize.term("listOfColors")}
-            direction=${e}
-            justify-content="flex-start"
-            wrap=${this.variant === "circles" ? "nowrap" : "wrap"}
-            class=${w({
+      )}</cx-space>`,
+      () => l`<cx-space part="color-swatch" role="list" aria-label=${this.localize.term("listOfColors")} aria-roledescription=${this.localize.term("listOfColors")} direction=${e} justify-content="flex-start" wrap=${this.variant === "circles" ? "nowrap" : "wrap"} class=${w({
         "color-swatch-group__swatches": !0,
-        "color-swatch-group__swatches--grid": this.variant === n.Grid,
-        [`color-swatch-group__swatches--circles--${e}`]: this.variant === n.Circles
-      })}
-            style=${f({
-        gridTemplateColumns: this.currentCol >= this.maxCol ? `repeat(${this.maxCol}, 1fr)` : `repeat(auto-fit, minmax(${v}px, 1fr))`
-      })}
-          >
-            ${G(
+        "color-swatch-group__swatches--grid": this.variant === c.Grid,
+        [`color-swatch-group__swatches--circles--${e}`]: this.variant === c.Circles
+      })} style=${f({
+        gridTemplateColumns: this.currentCol >= this.maxCol ? `repeat(${this.maxCol}, 1fr)` : `repeat(auto-fit, minmax(${y}px, 1fr))`
+      })}>${G(
         this.data,
         (t) => t.name,
-        (t, i) => l`<cx-color-swatch
-                  part="color-swatch-item"
-                  role="listitem"
-                  aria-label=${this.localize.term(
+        (t, i) => l`<cx-color-swatch part="color-swatch-item" role="listitem" aria-label=${this.localize.term(
           "colorOfTotal",
           i + 1,
           this.data.length
-        )}
-                  hex=${t.hex}
-                  rgb=${t.rgb}
-                  cmyk=${t.cmyk}
-                  pms=${t.pms}
-                  name=${this.multiLanguage && r ? t[`name-${r.toLowerCase()}`] ?? t.name : t.name}
-                  variant=${this.swatchVariant}
-                  ?can-copy=${this.canCopy}
-                  ?can-focus-code-only=${this.isFocused}
-                  .showCodes=${this.showCodes}
-                  no-auto-convert
-                  class=${w({
-          [`color-swatch-group__swatches--circles--${e}__item`]: this.variant === n.Circles,
-          "color-swatch-group__swatches--circles--vertical__item--mobile": this.variant === n.Circles && this.deviceType === p.Mobile
-        })}
-                  @keydown=${this.handleKeyDown}
-                  @focusout=${this.handleFocusOut}
-                ></cx-color-swatch>`
-      )}
-          </cx-space>
-        `
+        )} hex=${t.hex} rgb=${t.rgb} cmyk=${t.cmyk} pms=${t.pms} name=${this.multiLanguage && r ? t[`name-${r.toLowerCase()}`] ?? t.name : t.name} variant=${this.swatchVariant} ?can-copy=${this.canCopy} ?can-focus-code-only=${this.isFocused} .showCodes=${this.showCodes} no-auto-convert class=${w({
+          [`color-swatch-group__swatches--circles--${e}__item`]: this.variant === c.Circles,
+          "color-swatch-group__swatches--circles--vertical__item--mobile": this.variant === c.Circles && this.deviceType === p.Mobile
+        })} @keydown=${this.handleKeyDown} @focusout=${this.handleFocusOut}></cx-color-swatch>`
+      )}</cx-space>`
     )}
     `;
   }
 };
-o.styles = [A, K];
+o.styles = [A, N];
 o.dependencies = {
   "cx-color-swatch": C,
   "cx-space": z,
@@ -528,5 +358,5 @@ o = a([
 ], o);
 export {
   o as C,
-  n as a
+  c as a
 };