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

package/library/chunks/{color-swatch-group.p3Sdqlat.js → color-swatch-group.D5BP2W3P.js}

@@ -1,15 +1,15 @@
 import z from "../components/space.js";
-import { C as $ } from "./table.DNTm_GMS.js";
-import { C as k } from "./typography.oDzoLbZS.js";
+import { C as $ } from "./table.WNd284in.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.C0oPHfOu.js";
-import { c as A } from "./component.styles.DMSLciL5.js";
-import { D as p } from "./content-builder.D_phDrlo.js";
+import { C, a as g } from "./color-swatch.2HS4bc3N.js";
+import { c as A } from "./component.styles.CRO4Odto.js";
+import { D as p } from "./toast.B2cJgW5u.js";
 import { c as S } from "./custom-element.L4WJXn1j.js";
 import { d as T } from "./debounce.DaHuiSGU.js";
-import { L as E } from "./i18n.C0iakJkV.js";
-import { w as x } from "./watch.q1sEjPWL.js";
-import { g as D, a as R } from "./responsive.CrX-HUow.js";
+import { L as E } from "./i18n.BFqTRDCA.js";
+import { w as x } from "./watch.BCJD77bD.js";
+import { g as D, a as R } from "./responsive.BndCeSg0.js";
 import { x as l, B as H, i as O } from "./lit-element.jLBm65_O.js";
 import { r as d } from "./state.CSDxrqLd.js";
 import { e as P } from "./query.BBf1UFkC.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
 };

package/library/chunks/{color-swatch.C0oPHfOu.js → color-swatch.2HS4bc3N.js}

@@ -2,14 +2,14 @@ import v from "../components/copy-button.js";
 import f from "../components/line-clamp.js";
 import w from "../components/resize-observer.js";
 import b from "../components/space.js";
-import { C as _ } from "./typography.oDzoLbZS.js";
+import { C as _ } from "./typography.DJC_UXgs.js";
 import { n as a, C as k } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as F } from "./component.styles.DMSLciL5.js";
+import { c as F } from "./component.styles.CRO4Odto.js";
 import { c as n, C as h, H as $, l as z } from "./color.vLD2sNTs.js";
 import { c as O } from "./custom-element.L4WJXn1j.js";
 import { d as W } from "./debounce.DaHuiSGU.js";
-import { L as A } from "./i18n.C0iakJkV.js";
-import { w as i } from "./watch.q1sEjPWL.js";
+import { L as A } from "./i18n.BFqTRDCA.js";
+import { w as i } from "./watch.BCJD77bD.js";
 import { i as G, x as u } from "./lit-element.jLBm65_O.js";
 import { r as c } from "./state.CSDxrqLd.js";
 import { e as R } from "./query.BBf1UFkC.js";
@@ -19,102 +19,7 @@ import { c as U } from "./repeat.DbF2p5ae.js";
 import { o as l } from "./style-map.llVFPd__.js";
 import { n as E } from "./when.Dr1es41R.js";
 var p = /* @__PURE__ */ ((o) => (o.Circle = "circle", o.GridItem = "grid-item", o.Oval = "oval", o))(p || {});
-const S = G`
-  :host {
-    display: block;
-  }
-
-  .color-swatch {
-    border: 1px solid var(--cx-color-neutral-200);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .color-swatch:focus-visible {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  .color-swatch--circle {
-    aspect-ratio: 1 / 1;
-    height: auto;
-    width: var(--swatch-size, 350px);
-    min-width: var(--swatch-size, 230px);
-    max-width: 100%;
-    border-radius: var(--cx-border-radius-circle);
-  }
-
-  .color-swatch--oval {
-    height: var(--swatch-size, 350px);
-    width: 100%;
-    border-radius: calc(var(--swatch-size, 350px) / 2);
-  }
-
-  .color-swatch--grid {
-    width: 100%;
-    height: var(--swatch-size, 300px);
-    min-width: var(--swatch-grid-min-width, 165px);
-    border-radius: var(--cx-border-radius-x-large);
-  }
-
-  .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 {
-    max-width: 75%;
-    min-width: 50%;
-  }
-
-  .color-swatch--oval > .color-swatch__content {
-    max-width: 85%;
-  }
-
-  .color-swatch--grid > .color-swatch__content {
-    height: 100%;
-    width: 100%;
-    padding: var(--cx-spacing-large) var(--cx-spacing-medium);
-  }
-
-  .color-swatch__key::part(base) {
-    min-width: 50px;
-    height: 100%;
-    vertical-align: middle;
-  }
-
-  .color-swatch__key[variant='small']::part(base) {
-    display: inline-block;
-  }
-
-  .color-swatch__copy-button::part(button) {
-    min-height: fit-content;
-    height: fit-content;
-    border-width: 0 !important;
-    background: transparent !important;
-    padding: 0;
-  }
-
-  .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;
-  }
-`;
+const S = G`:host{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-size,350px);min-width:var(--swatch-size,230px);border-radius:var(--cx-border-radius-circle);max-width:100%}.color-swatch--oval{height:var(--swatch-size,350px);border-radius:calc(var(--swatch-size,350px) / 2);width:100%}.color-swatch--grid{width:100%;height:var(--swatch-size,300px);min-width:var(--swatch-grid-min-width,165px);border-radius:var(--cx-border-radius-x-large)}.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--grid>.color-swatch__content{width:100%;height:100%;padding:var(--cx-spacing-large) 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}`;
 var V = Object.defineProperty, B = Object.getOwnPropertyDescriptor, e = (o, r, y, d) => {
   for (var s = d > 1 ? void 0 : d ? B(r, y) : r, C = o.length - 1, m; C >= 0; C--)
     (m = o[C]) && (s = (d ? m(r, y, s) : m(s)) || s);
@@ -186,125 +91,36 @@ let t = class extends k {
       { key: "CMYK", value: this.cmyk },
       { key: "PMS", value: this.pms }
     ].filter((r) => this.showCodes.includes(r.key));
-    return u`
-      <cx-resize-observer @cx-resize=${this.handleResize}>
-        <div
-          part="base"
-          tabindex=${x(this.canFocusContainer ? "0" : void 0)}
-          class=${g({
+    return u`<cx-resize-observer @cx-resize=${this.handleResize}><div part="base" tabindex=${x(this.canFocusContainer ? "0" : void 0)} class=${g({
       "color-swatch": !0,
       "color-swatch--circle": this.variant === p.Circle,
       "color-swatch--grid": this.variant === p.GridItem,
       "color-swatch--oval": this.variant === p.Oval
-    })}
-          style=${l({
+    })} style=${l({
       backgroundColor: this.backgroundColor
-    })}
-          @focusin=${this.handleFocusIn}
-          @focusout=${this.handleFocusOut}
-        >
-          <cx-space
-            part="content"
-            direction="vertical"
-            class="color-swatch__content"
-          >
-            <cx-typography
-              variant="h5"
-              part="name"
-              style=${l({
+    })} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut}><cx-space part="content" direction="vertical" class="color-swatch__content"><cx-typography variant="h5" part="name" style=${l({
       "--color": this.textColor
-    })}
-            >
-              ${this.name}
-            </cx-typography>
-            <cx-space
-              direction="vertical"
-              spacing=${this.rowGap}
-              part="content"
-            >
-              ${U(
+    })}>${this.name}</cx-typography><cx-space direction="vertical" spacing=${this.rowGap} part="content">${U(
       o,
       (r) => r.key,
-      (r) => u`<cx-space
-                    direction="horizontal"
-                    align-items="center"
-                    spacing="small"
-                    part="item"
-                    wrap="nowrap"
-                  >
-                    <cx-typography
-                      variant=${this.textVariant}
-                      class="color-swatch__key"
-                      part="key"
-                      style=${l({
+      (r) => u`<cx-space direction="horizontal" align-items="center" spacing="small" part="item" wrap="nowrap"><cx-typography variant=${this.textVariant} class="color-swatch__key" part="key" style=${l({
         "--color": this.textColor
-      })}
-                    >
-                      ${r.key}
-                    </cx-typography>
-                    ${E(
+      })}>${r.key}</cx-typography>${E(
         this.canCopy && r.value !== "",
-        () => u`
-                        <cx-copy-button
-                          part="copy-button"
-                          tabindex=${x(
+        () => u`<cx-copy-button part="copy-button" tabindex=${x(
           this.canFocusCodeOnly ? void 0 : "-1"
-        )}
-                          class="color-swatch__copy-button"
-                          copy-label=${this.localize.term("clickToCopy")}
-                          focus-copy-label=${this.localize.term(
+        )} class="color-swatch__copy-button" copy-label=${this.localize.term("clickToCopy")} focus-copy-label=${this.localize.term(
           "pressEnterOrCtrlCToCopy"
-        )}
-                          label=${`${r.key} ${r.value}`}
-                          no-icon
-                          value=${r.value}
-                        >
-                          <cx-line-clamp
-                            lines=${this.lineClamp}
-                            disabled-tooltip
-                            class=${g({
+        )} label=${`${r.key} ${r.value}`} no-icon value=${r.value}><cx-line-clamp lines=${this.lineClamp} disabled-tooltip class=${g({
           "color-swatch__value-wrapper": !0
-        })}
-                          >
-                            <cx-typography
-                              variant=${this.textVariant}
-                              style=${l({
+        })}><cx-typography variant=${this.textVariant} style=${l({
           "--color": this.textColor
-        })}
-                              class="color-swatch__value"
-                              part="value"
-                            >
-                              ${r.value}
-                            </cx-typography>
-                          </cx-line-clamp>
-                        </cx-copy-button>
-                      `,
-        () => u`
-                        <cx-line-clamp
-                          lines=${this.lineClamp}
-                          disabled-tooltip
-                          class="color-swatch__value-wrapper"
-                        >
-                          <cx-typography
-                            variant=${this.textVariant}
-                            style=${l({
+        })} class="color-swatch__value" part="value">${r.value}</cx-typography></cx-line-clamp></cx-copy-button>`,
+        () => u`<cx-line-clamp lines=${this.lineClamp} disabled-tooltip class="color-swatch__value-wrapper"><cx-typography variant=${this.textVariant} style=${l({
           "--color": this.textColor
-        })}
-                            class="color-swatch__value"
-                            part="value"
-                          >
-                            ${r.value}
-                          </cx-typography>
-                        </cx-line-clamp>
-                      `
-      )}
-                  </cx-space>`
-    )}
-            </cx-space>
-          </cx-space>
-        </div>
-      </cx-resize-observer>
-    `;
+        })} class="color-swatch__value" part="value">${r.value}</cx-typography></cx-line-clamp>`
+      )}</cx-space>`
+    )}</cx-space></cx-space></div></cx-resize-observer>`;
   }
 };
 t.styles = [F, S];

package/library/chunks/{colorPicker.CJwbdhtn.js → colorPicker.06n6P3aK.js}

@@ -1,8 +1,8 @@
-import { D as L, q as i, R as m, d as s, x as c, H as A, C as h, w as g, L as R, T, B as y, G as _, b, s as G, c as S, a as x, f as p, bx as D, by as P } from "./am-chart.B_OdX4Q-.js";
-import { L as k } from "./LinearGradient.DuVS2EHe.js";
-import { C as M } from "./Circle.DhoXSsjo.js";
-import { E as H } from "./EditableLabel.BlQ7B4D0.js";
-import { S as B } from "./Slider.B27osQYu.js";
+import { D as L, q as i, R as m, d as s, x as c, H as A, C as h, w as g, L as R, T, B as y, G as _, b, s as G, c as S, a as x, f as p, bx as D, by as P } from "./am-chart.H2jnOzFc.js";
+import { L as k } from "./LinearGradient.B1z9AGUt.js";
+import { C as M } from "./Circle.DBa5Ok8V.js";
+import { E as H } from "./EditableLabel.BWeq6fgX.js";
+import { S as B } from "./Slider.C20No2z5.js";
 class O extends L {
   setupDefaultRules() {
     super.setupDefaultRules();