@orangelogic/design-system 4.2.0 → 4.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

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

@@ -1,5 +0,0 @@
-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);--font-weight:var(--cx-font-weight-medium);--height:var(--cx-input-height-medium);--justify-content:center;--gap:0;--min-height:auto;--padding:0;--label-line-height:1.15;--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{align-items:center;justify-content:var(--justify-content,center);gap:var(--gap,0);border-style:solid;border-width:var(--cx-input-border-width);width:100%;font-family:var(--font-family,var(--cx-input-font-family)), var(--cx-font-sans);font-style:var(--font-style,normal);font-weight:var(--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));min-height:var(--min-height,auto);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;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{line-height:var(--label-line-height);white-space:nowrap;text-overflow:ellipsis;display:none;overflow:hidden}.button__label::slotted(cx-icon){vertical-align:-2px}.button__label--has-label{display:inline-block}.button--standard.button--default{background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral-700)}.button--standard.button--default:hover:not(.button--disabled){background-color:var(--cx-color-neutral-200);border-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral-700)}.button--standard.button--default.button--focused:not(.button--disabled):not(:hover),.button--standard.button--default:focus-visible:not(.button--disabled):not(:hover){background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral-700)}.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-700)}.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){background-color:var(--cx-color-primary-500);border-color:var(--cx-color-primary-500);color:var(--cx-color-neutral-0)}.button--standard.button--primary.button--focused:not(.button--disabled):not(:hover),.button--standard.button--primary:focus-visible:not(.button--disabled):not(:hover){background-color:var(--cx-color-primary);border-color:var(--cx-color-primary);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){background-color:var(--cx-color-success-500);border-color:var(--cx-color-success-500);color:var(--cx-color-neutral-0)}.button--standard.button--success.button--focused:not(.button--disabled):not(:hover),.button--standard.button--success:focus-visible:not(.button--disabled):not(:hover){background-color:var(--cx-color-success);border-color:var(--cx-color-success);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){background-color:var(--cx-color-warning-500);border-color:var(--cx-color-warning-500);color:var(--cx-color-neutral-0)}.button--standard.button--warning.button--focused:not(.button--disabled):not(:hover),.button--standard.button--warning:focus-visible:not(.button--disabled):not(:hover){background-color:var(--cx-color-warning);border-color:var(--cx-color-warning);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){background-color:var(--cx-color-danger-500);border-color:var(--cx-color-danger-500);color:var(--cx-color-neutral-0)}.button--standard.button--danger.button--focused:not(.button--disabled):not(:hover),.button--standard.button--danger:focus-visible:not(.button--disabled):not(:hover){background-color:var(--cx-color-danger);border-color:var(--cx-color-danger);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){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.button--focused:not(.button--disabled):not(:hover),.button--standard.button--custom:focus-visible:not(.button--disabled):not(:hover){background-color:var(--background-color);border-color:var(--background-color);color: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--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.button--focused:not(.button--disabled):not(:hover):not(.button--checked),.button--outline.button--default:focus-visible:not(.button--disabled):not(:hover):not(.button--checked){border-color:var(--cx-input-border-color);color:var(--cx-color-neutral);background-color:#0000}.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--checked:not(.button--disabled){background-color:var(--cx-color-primary-500);color:var(--cx-color-neutral-0)}.button--outline.button--primary.button--focused:not(.button--disabled):not(:hover):not(.button--checked),.button--outline.button--primary:focus-visible:not(.button--disabled):not(:hover):not(.button--checked){border-color:var(--cx-color-primary);color:var(--cx-color-primary);background-color:#0000}.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--checked:not(.button--disabled){background-color:var(--cx-color-success-500);color:var(--cx-color-neutral-0)}.button--outline.button--success.button--focused:not(.button--disabled):not(:hover):not(.button--checked),.button--outline.button--success:focus-visible:not(.button--disabled):not(:hover):not(.button--checked){border-color:var(--cx-color-success);color:var(--cx-color-success);background-color:#0000}.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--checked:not(.button--disabled){background-color:var(--cx-color-warning-500);color:var(--cx-color-neutral-0)}.button--outline.button--warning.button--focused:not(.button--disabled):not(:hover):not(.button--checked),.button--outline.button--warning:focus-visible:not(.button--disabled):not(:hover):not(.button--checked){border-color:var(--cx-color-warning);color:var(--cx-color-warning);background-color:#0000}.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--checked:not(.button--disabled){background-color:var(--cx-color-danger-500);color:var(--cx-color-neutral-0)}.button--outline.button--danger.button--focused:not(.button--disabled):not(:hover):not(.button--checked),.button--outline.button--danger:focus-visible:not(.button--disabled):not(:hover):not(.button--checked){border-color:var(--cx-color-danger);color:var(--cx-color-danger);background-color:#0000}.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){background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral)}.button--text.button--focused:not(.button--disabled):not(:hover),.button--text:focus-visible:not(.button--disabled):not(:hover){color:var(--cx-color-neutral);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){background-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral);border-color:#0000}.button--tertiary.button--focused:not(.button--disabled):not(:hover),.button--tertiary:focus-visible:not(.button--disabled):not(:hover){color:var(--cx-color-neutral);background-color:#0000;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);--font-family:var(--button-custom-font-family), var(--cx-font-sans);--font-style:var(--button-custom-font-style);--font-weight:var(--button-custom-font-weight);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(--caret-font-size,var(--cx-font-size-large));margin-block:auto}.button--caret.button--small .button__caret{--font-size:var(--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:not(.button--has-prefix):not(.button--has-label).button--small,.button--has-suffix:not(.button--has-prefix):not(.button--has-label).button--small,.button--caret:not(.button--has-prefix):not(.button--has-label).button--medium,.button--has-suffix:not(.button--has-prefix):not(.button--has-label).button--medium{padding-inline-start:var(--cx-spacing-x-small)}.button--caret:not(.button--has-prefix):not(.button--has-label).button--large,.button--has-suffix:not(.button--has-prefix):not(.button--has-label).button--large{padding-inline-start:var(--cx-spacing-small)}.button--caret:not(.button--has-prefix):not(.button--has-label).button--x-large,.button--has-suffix:not(.button--has-prefix):not(.button--has-label).button--x-large{padding-inline-start:var(--cx-spacing-medium)}.button--has-prefix:not(.button--has-label).button--small,.button--has-prefix:not(.button--has-label).button--medium{gap:var(--cx-spacing-x-small)}.button--has-prefix:not(.button--has-label).button--large{gap:var(--cx-spacing-small)}.button--has-prefix:not(.button--has-label).button--x-large{gap: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.DdsUysbF.js

@@ -1,223 +0,0 @@
-import w from "../components/copy-button.js";
-import v from "../components/line-clamp.js";
-import f from "../components/resize-observer.js";
-import b from "../components/space.js";
-import { C as _ } from "./typography.T72DuoCa.js";
-import { n as r, C as k } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as F } from "./component.styles.CAS3c9pM.js";
-import { c as n, C as h, H as $, l as z } from "./color.LzSGBy7o.js";
-import { c as O } from "./custom-element.L4WJXn1j.js";
-import { d as W } from "./debounce.DaHuiSGU.js";
-import { L as A } from "./i18n.rtxrs1c1.js";
-import { w as i } from "./watch.DJF5K-8U.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";
-import { e as g } from "./class-map.BiVq-cVR.js";
-import { o as x } from "./if-defined.BRoBj_Rp.js";
-import { c as U } from "./repeat.CFjcER6_.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);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: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,1px solid var(--cx-color-neutral-200));box-shadow:var(--swatch-box-shadow,none);border-radius:var(--swatch-border-radius,var(--cx-border-radius-x-large));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--grid>.color-swatch__content{width:100%;max-height:none;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}.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 V = Object.defineProperty, B = Object.getOwnPropertyDescriptor, e = (o, a, y, d) => {
-  for (var s = d > 1 ? void 0 : d ? B(a, y) : a, m = o.length - 1, C; m >= 0; m--)
-    (C = o[m]) && (s = (d ? C(a, y, s) : C(s)) || s);
-  return d && s && V(a, y, s), s;
-};
-let t = class extends k {
-  constructor() {
-    super(...arguments), this.localize = new A(this), this.ignoreWatchColorChange = /* @__PURE__ */ new Set(), this.variant = p.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.textColor = "#27272A", this.textVariant = "body2", this.lineClamp = 3, this.backgroundColor = "#F9F9F9", this.canFocusContainer = !0, this.isContainerFocused = !1;
-  }
-  runFirstUpdated() {
-    this.handleColorChange();
-  }
-  /**
-   * Change to default color
-   */
-  setDefaultColor() {
-    this.backgroundColor = "#F9F9F9", this.textColor = "#27272A";
-  }
-  handleResize() {
-    const o = this.containerEl.offsetWidth;
-    o > 315 || this.variant === "grid-item" ? (this.textVariant = "body2", this.rowGap = "x-small", this.lineClamp = 3) : o > 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 = n(this.cmyk, h.Hex), this.rgb = n(this.cmyk, h.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 = n(this.rgb, h.Hex), this.cmyk = n(this.rgb, h.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 = n(this.hex, h.Rgb), this.cmyk = n(this.hex, h.Cmyk);
-    }
-  }
-  async handleColorChange() {
-    await this.updateComplete, this.hex && $.test(this.hex) ? (this.textColor = z(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 o = [
-      { key: "HEX", value: this.hex },
-      { key: "RGB", value: this.rgb },
-      { key: "CMYK", value: this.cmyk },
-      { key: "PMS", value: this.pms }
-    ].filter((a) => this.showCodes.includes(a.key));
-    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({
-      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" class="color-swatch__name" style=${l({
-      "--color": this.textColor
-    })}>${this.name}</cx-typography><cx-space direction="vertical" spacing=${this.rowGap} part="content">${U(
-      o,
-      (a) => a.key,
-      (a) => 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
-      })}>${a.key}</cx-typography>${E(
-        this.canCopy && a.value !== "",
-        () => 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(
-          "pressEnterOrCtrlCToCopy"
-        )} label=${`${a.key} ${a.value}`} no-icon hoist value=${a.value}><cx-line-clamp lines=${this.lineClamp} disabled-tooltip class=${g({
-          "color-swatch__value-wrapper": !0
-        })}><cx-typography variant=${this.textVariant} style=${l({
-          "--color": this.textColor
-        })} class="color-swatch__value" part="value">${a.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">${a.value}</cx-typography></cx-line-clamp>`
-      )}</cx-space>`
-    )}</cx-space></cx-space></div></cx-resize-observer>`;
-  }
-};
-t.styles = [F, S];
-t.dependencies = {
-  "cx-copy-button": w,
-  "cx-line-clamp": v,
-  "cx-resize-observer": f,
-  "cx-space": b,
-  "cx-typography": _
-};
-e([
-  R(".color-swatch")
-], t.prototype, "containerEl", 2);
-e([
-  r({ reflect: !0, type: String })
-], t.prototype, "variant", 2);
-e([
-  r({ reflect: !0, type: String })
-], t.prototype, "name", 2);
-e([
-  r({ reflect: !0, type: String })
-], t.prototype, "hex", 2);
-e([
-  r({ reflect: !0, type: String })
-], t.prototype, "rgb", 2);
-e([
-  r({ reflect: !0, type: String })
-], t.prototype, "cmyk", 2);
-e([
-  r({ reflect: !0, type: String })
-], t.prototype, "pms", 2);
-e([
-  r({ attribute: "can-copy", reflect: !0, type: Boolean })
-], t.prototype, "canCopy", 2);
-e([
-  r({
-    attribute: "show-codes",
-    converter: {
-      fromAttribute: (o) => o?.split(" ") ?? [],
-      toAttribute: (o) => o.join(" ")
-    }
-  })
-], t.prototype, "showCodes", 2);
-e([
-  r({ attribute: "can-focus-code-only", reflect: !0, type: Boolean })
-], t.prototype, "canFocusCodeOnly", 2);
-e([
-  r({ attribute: "no-auto-convert", reflect: !0, type: Boolean })
-], t.prototype, "noAutoConvert", 2);
-e([
-  c()
-], t.prototype, "textColor", 2);
-e([
-  c()
-], t.prototype, "textVariant", 2);
-e([
-  c()
-], t.prototype, "rowGap", 2);
-e([
-  c()
-], t.prototype, "lineClamp", 2);
-e([
-  c()
-], t.prototype, "backgroundColor", 2);
-e([
-  c()
-], t.prototype, "canFocusContainer", 2);
-e([
-  c()
-], t.prototype, "isContainerFocused", 2);
-e([
-  W(50)
-], t.prototype, "handleResize", 1);
-e([
-  i("variant")
-], t.prototype, "handleVariantChange", 1);
-e([
-  i("cmyk")
-], t.prototype, "handleCmykChange", 1);
-e([
-  i("rgb")
-], t.prototype, "handleRGBChange", 1);
-e([
-  i("hex")
-], t.prototype, "handleHexChange", 1);
-e([
-  i("hex", { waitUntilFirstUpdate: !0 }),
-  i("rgb", { waitUntilFirstUpdate: !0 }),
-  i("cmyk", { waitUntilFirstUpdate: !0 })
-], t.prototype, "handleColorChange", 1);
-e([
-  i("canFocusCodeOnly", { waitUntilFirstUpdate: !0 })
-], t.prototype, "handleCanFocusCodeOnlyChange", 1);
-t = e([
-  O("cx-color-swatch")
-], t);
-export {
-  t as C,
-  p as a
-};

package/library/chunks/color.LzSGBy7o.js

@@ -1,164 +0,0 @@
-import { T as l } from "./index.C1chwzNp.js";
-var k = /* @__PURE__ */ ((r) => (r.Cmyk = "cmyk", r.Hex = "hex", r.Rgb = "rgb", r.Unknown = "unknown", r))(k || {});
-const p = /^#([0-9A-Fa-f]{3}){1,2}$/, $ = /^(\s*(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\s*,){2}\s*(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\s*$/, x = /^(\s*(100|[1-9]?\d)\s*,){3}\s*(100|[1-9]?\d)\s*$/, y = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
-function b(r) {
-  return p.test(r) ? "hex" : $.test(r) ? "rgb" : x.test(r) ? "cmyk" : "unknown";
-}
-function d(r, c, n) {
-  return "#" + [r, c, n].map((a) => a.toString(16).padStart(2, "0")).join("").toUpperCase();
-}
-function g(r) {
-  r = r.trim().replace(/^#/, ""), r.length === 8 && (r = r.slice(0, 6)), r.length === 3 && (r = r.split("").map((n) => n + n).join(""));
-  const c = parseInt(r, 16);
-  return {
-    b: c & 255,
-    g: c >> 8 & 255,
-    r: c >> 16 & 255
-  };
-}
-function h(r, c, n) {
-  const a = 1 - r / 255, t = 1 - c / 255, e = 1 - n / 255, s = Math.min(a, t, e);
-  return s === 1 ? { c: 0, k: 100, m: 0, y: 0 } : {
-    c: Math.round((a - s) / (1 - s) * 100),
-    k: Math.round(s * 100),
-    m: Math.round((t - s) / (1 - s) * 100),
-    y: Math.round((e - s) / (1 - s) * 100)
-  };
-}
-function m(r, c, n, a) {
-  const t = 255 * (1 - r / 100) * (1 - a / 100), e = 255 * (1 - c / 100) * (1 - a / 100), s = 255 * (1 - n / 100) * (1 - a / 100);
-  return { b: Math.round(s), g: Math.round(e), r: Math.round(t) };
-}
-function I(r) {
-  switch (r = r.trim(), b(r)) {
-    case "hex":
-      return { hex: r };
-    case "rgb": {
-      const n = r.split(",").map((a) => a.trim());
-      return {
-        blue: parseInt(n[2], 10),
-        green: parseInt(n[1], 10),
-        red: parseInt(n[0], 10)
-      };
-    }
-    case "cmyk": {
-      const n = r.split(",").map((a) => a.trim());
-      return {
-        c: parseInt(n[0], 10),
-        k: parseInt(n[3], 10),
-        m: parseInt(n[1], 10),
-        y: parseInt(n[2], 10)
-      };
-    }
-    default:
-      return {};
-  }
-}
-function C(r, c, n) {
-  const a = b(r), t = I(r);
-  let e = {};
-  if (a === "unknown")
-    return "";
-  if (a === c && !n)
-    return r;
-  switch (c) {
-    case "hex":
-      if (a === "rgb")
-        e.hex = d(t.red, t.green, t.blue);
-      else if (a === "cmyk") {
-        const s = m(t.c, t.m, t.y, t.k);
-        e.hex = d(s.r, s.g, s.b);
-      } else
-        e.hex = t.hex;
-      break;
-    case "rgb":
-      if (a === "hex") {
-        const s = g(t.hex);
-        e.red = s.r, e.green = s.g, e.blue = s.b;
-      } else if (a === "cmyk") {
-        const s = m(t.c, t.m, t.y, t.k);
-        e.red = s.r, e.green = s.g, e.blue = s.b;
-      } else
-        Object.assign(e, t);
-      break;
-    case "cmyk":
-      if (a === "rgb")
-        e = h(t.red, t.green, t.blue);
-      else if (a === "hex") {
-        const s = g(t.hex);
-        e = h(s.r, s.g, s.b);
-      } else
-        Object.assign(e, t);
-      break;
-    default:
-      return r;
-  }
-  return n ? n.replace(/\$\{(.*?)\}/g, (s, i) => i in e ? String(e[i]) : "") : c === "hex" ? e.hex : c === "rgb" ? `${e.red}, ${e.green}, ${e.blue}` : c === "cmyk" ? `${e.c}, ${e.m}, ${e.y}, ${e.k}` : r;
-}
-function E(r, c = "#000", n = "#FFF") {
-  if (!((u) => y.test(u))(r))
-    return r;
-  const { b: t, g: e, r: s } = g(r);
-  return 0.299 * s + 0.587 * e + 0.114 * t > 186 ? c : n;
-}
-function A(r) {
-  const c = "light-dark", n = r.toLowerCase().indexOf(c + "(");
-  if (n === -1)
-    return "";
-  const a = r.indexOf("(", n + c.length);
-  if (a === -1)
-    return "";
-  let t = 0, e = -1, s = -1;
-  for (let o = a; o < r.length; o++) {
-    const f = r[o];
-    if (f === "(") {
-      t++;
-      continue;
-    }
-    if (f === ")") {
-      if (t--, t === 0) {
-        s = o;
-        break;
-      }
-      continue;
-    }
-    f === "," && t === 1 && e === -1 && (e = o);
-  }
-  if (e === -1 || s === -1)
-    return "";
-  const i = r.slice(a + 1, e).trim(), u = r.slice(e + 1, s).trim();
-  return `${i} ${u}`;
-}
-function M(r, c) {
-  const n = new l(r), a = new l(c), t = n.isValid ? r : "transparent", e = a.isValid ? c : "transparent";
-  return `light-dark(${t}, ${e})`;
-}
-function _(r) {
-  const c = A(r);
-  if (!c)
-    return null;
-  const n = r.replace(/light-dark\([^()]*(?:\([^()]*\)[^()]*)*\)/i, "").trim();
-  return `${c} ${n}`;
-}
-function L(r) {
-  const c = r.match(/([a-zA-Z-]+\([^)]*\))/);
-  if (!c)
-    return "";
-  const n = c[1], a = n.replace(/^[a-zA-Z-]+\(|\)$/g, "").trim(), t = r.replace(n, "").trim(), e = a.replace(/,/g, "").trim();
-  return `${t} ${e}`;
-}
-export {
-  k as C,
-  p as H,
-  $ as R,
-  _ as a,
-  L as b,
-  C as c,
-  x as d,
-  y as e,
-  b as f,
-  M as g,
-  I as h,
-  E as l,
-  A as p
-};

package/library/chunks/form-control.styles.CaGWmeAS.js

@@ -1,5 +0,0 @@
-import { i as o } from "./lit-element.jLBm65_O.js";
-const r = o`.form-control .form-control__label,.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{color:var(--cx-input-label-color);margin-bottom:var(--cx-spacing-3x-small);display:inline-block}.form-control--has-label.form-control--small .form-control__label{font-size:var(--cx-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--cx-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--cx-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label:after{color:var(--cx-input-required-content-color);content:var(--cx-input-required-content);margin-inline-start:var(--cx-input-required-content-offset)}.form-control--has-help-text .form-control__help-text{color:var(--cx-input-help-text-color);margin-top:max(var(--cx-spacing-3x-small), 3px);display:block}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--cx-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--cx-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--cx-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text{margin-top:max(var(--cx-spacing-2x-small), 3px)}:host([data-user-invalid])::part(form-control-help-text){color:var(--cx-input-invalid-color)}`;
-export {
-  r as f
-};