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

package/library/components/atoms.js

@@ -1,23 +1,23 @@
 import { default as s } from "./alert.js";
-import { bw as C } from "../chunks/am-chart.B_OdX4Q-.js";
+import { bw as C } from "../chunks/am-chart.H2jnOzFc.js";
 import { default as l } from "./animated-image.js";
-import { a, e as o } from "../chunks/animation.DfUHRQry.js";
-import { C as n } from "../chunks/animation.DfUHRQry.js";
+import { a, e as o } from "../chunks/animation.7ifl4x2S.js";
+import { C as n } from "../chunks/animation.7ifl4x2S.js";
 import { default as g } from "./array-line-clamp.js";
 import { default as b } from "./avatar.js";
 import { default as T } from "./badge.js";
 import { default as A } from "./breadcrumb.js";
 import { default as D } from "./breadcrumb-item.js";
-import { C as P } from "../chunks/button.KnE3mcyM.js";
+import { C as P } from "../chunks/button.CauAHfdl.js";
 import { default as G } from "./button-group.js";
 import { default as h } from "./card.js";
 import { default as w } from "./checkbox.js";
 import { default as k } from "./color-picker.js";
 import { default as E } from "./copy-button.js";
 import { default as L } from "./details.js";
-import { C as j } from "../chunks/dialog.CKP1W_u1.js";
+import { C as j } from "../chunks/dialog.2UW1LNm1.js";
 import { default as z } from "./divider.js";
-import { C as q } from "../chunks/dot-pagination.COBkyhoJ.js";
+import { C as q } from "../chunks/dot-pagination.DsAfSNzr.js";
 import { default as K } from "./dot-status.js";
 import { default as W } from "./drawer.js";
 import { default as Y } from "./dropdown.js";
@@ -29,12 +29,12 @@ import { default as fe } from "./format-number.js";
 import { default as se } from "./format-time.js";
 import { default as Ce } from "./grid.js";
 import { default as le } from "./grid-item.js";
-import { C as ne } from "../chunks/header.BduX6KJP.js";
-import { C as ge } from "../chunks/hub-connection.CfARlehM.js";
+import { C as ne } from "../chunks/header.BePZwMCQ.js";
+import { C as ge } from "../chunks/hub-connection.Ot2odiCz.js";
 import { default as be } from "./icon.js";
-import { default as Te } from "./icon-button.js";
-import { C as Ae } from "../chunks/iframe.BPKV2K7z.js";
-import { C as De } from "../chunks/image.C9avagDq.js";
+import { C as Te } from "../chunks/icon-button.rKe0N4VB.js";
+import { C as Ae } from "../chunks/iframe.DznmlYpV.js";
+import { C as De } from "../chunks/image.CEtCGsNL.js";
 import { default as Pe } from "./image-comparer.js";
 import { default as Ge } from "./include.js";
 import { default as he } from "./input.js";
@@ -46,8 +46,8 @@ import { default as je } from "./menu-item.js";
 import { default as ze } from "./menu-label.js";
 import { default as qe } from "./menu-section.js";
 import { default as Ke } from "./mutation-observer.js";
-import { C as We } from "../chunks/option.DnpkE8Xi.js";
-import { C as Ye } from "../chunks/pagination.C30LoTya.js";
+import { C as We } from "../chunks/option.COnEtd3X.js";
+import { C as Ye } from "../chunks/pagination.DaD9Yul6.js";
 import { default as _e } from "./popup.js";
 import { default as ea } from "./progress-bar.js";
 import { default as oa } from "./progress-ring.js";
@@ -69,18 +69,18 @@ import { default as wa } from "./step.js";
 import { default as ka } from "./stepper.js";
 import { default as Ea } from "./switch.js";
 import { default as La } from "./tab.js";
-import { C as ja } from "../chunks/tab-group.05PY0smt.js";
-import { C as za } from "../chunks/table.DNTm_GMS.js";
+import { C as ja } from "../chunks/tab-group.0Po0eoxR.js";
+import { C as za } from "../chunks/table.Cs5a0duW.js";
 import { default as qa } from "./tab-panel.js";
 import { default as Ka } from "./tag.js";
 import { default as Wa } from "./textarea.js";
 import { default as Ya } from "./timecode.js";
 import { default as _a } from "./tooltip.js";
-import { a as eo, C as ao } from "../chunks/tree.CeMLCbs-.js";
-import { C as ro } from "../chunks/typography.oDzoLbZS.js";
+import { a as eo, C as ao } from "../chunks/tree.QCQd_cuc.js";
+import { C as ro } from "../chunks/typography.DJC_UXgs.js";
 import { default as xo } from "./video.js";
 import { default as mo } from "./visually-hidden.js";
-import { c as po } from "../chunks/component.styles.DMSLciL5.js";
+import { c as po } from "../chunks/component.styles.CRO4Odto.js";
 import { g as uo, a as lo, s as no } from "../chunks/animation-registry.HmpwNuGH.js";
 function t() {
   return Object.entries(a).filter(([e]) => e !== "easings").map(([e]) => e);

package/library/components/avatar.js

@@ -1,75 +1,12 @@
 import { n as i, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as d } from "../chunks/component.styles.DMSLciL5.js";
+import { c as d } from "../chunks/component.styles.CRO4Odto.js";
 import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
-import { w as v } from "../chunks/watch.q1sEjPWL.js";
+import { w as v } from "../chunks/watch.BCJD77bD.js";
 import { i as g, x as l } from "../chunks/lit-element.jLBm65_O.js";
 import { r as u } from "../chunks/state.CSDxrqLd.js";
 import { e as f } from "../chunks/class-map.BiVq-cVR.js";
 import _ from "./icon.js";
-const x = g`
-  :host {
-    display: inline-block;
-
-    --size: 3rem;
-  }
-
-  .avatar {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: var(--size);
-    height: var(--size);
-    background-color: var(--cx-color-neutral-400);
-    font-family: var(--cx-font-sans);
-    font-size: calc(var(--size) * 0.5);
-    font-weight: var(--cx-font-weight-regular);
-    color: var(--cx-color-neutral-0);
-    user-select: none;
-    -webkit-user-select: none;
-    vertical-align: middle;
-  }
-
-  .avatar--circle,
-  .avatar--circle .avatar__image {
-    border-radius: var(--cx-border-radius-circle);
-  }
-
-  .avatar--rounded,
-  .avatar--rounded .avatar__image {
-    border-radius: var(--cx-border-radius-small);
-  }
-
-  .avatar--square {
-    border-radius: 0;
-  }
-
-  .avatar__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .avatar__initials {
-    line-height: 1;
-    text-transform: uppercase;
-  }
-
-  .avatar__image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    overflow: hidden;
-  }
-`;
+const x = g`:host{--size:3rem;display:inline-block}.avatar{width:var(--size);height:var(--size);background-color:var(--cx-color-neutral-400);font-family:var(--cx-font-sans);font-size:calc(var(--size) * .5);font-weight:var(--cx-font-weight-regular);color:var(--cx-color-neutral-0);-webkit-user-select:none;user-select:none;vertical-align:middle;justify-content:center;align-items:center;display:inline-flex;position:relative}.avatar--circle,.avatar--circle .avatar__image{border-radius:var(--cx-border-radius-circle)}.avatar--rounded,.avatar--rounded .avatar__image{border-radius:var(--cx-border-radius-small)}.avatar--square{border-radius:0}.avatar__icon{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.avatar__initials{text-transform:uppercase;line-height:1}.avatar__image{object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}`;
 var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (o, r, n, s) => {
   for (var t = s > 1 ? void 0 : s ? y(r, n) : r, c = o.length - 1, h; c >= 0; c--)
     (h = o[c]) && (t = (s ? h(r, n, t) : h(t)) || t);
@@ -86,40 +23,14 @@ let a = class extends p {
     this.hasError = !0, this.emit("cx-error");
   }
   render() {
-    const o = l`
-      <img
-        part="image"
-        class="avatar__image"
-        src=${this.image}
-        loading=${this.loading}
-        alt=""
-        @error=${this.handleImageLoadError}
-      />
-    `;
+    const o = l`<img part="image" class="avatar__image" src=${this.image} loading=${this.loading} alt="" @error=${this.handleImageLoadError}>`;
     let r = null;
-    return this.initials ? r = l`<div part="initials" class="avatar__initials">
-        ${this.initials}
-      </div>` : r = l`
-        <div part="icon" class="avatar__icon" aria-hidden="true">
-          <slot name="icon">
-            <cx-icon name="person"></cx-icon>
-          </slot>
-        </div>
-      `, l`
-      <div
-        part="base"
-        class=${f({
+    return this.initials ? r = l`<div part="initials" class="avatar__initials">${this.initials}</div>` : r = l`<div part="icon" class="avatar__icon" aria-hidden="true"><slot name="icon"><cx-icon name="person"></cx-icon></slot></div>`, l`<div part="base" class=${f({
       avatar: !0,
       "avatar--circle": this.shape === "circle",
       "avatar--rounded": this.shape === "rounded",
       "avatar--square": this.shape === "square"
-    })}
-        role="img"
-        aria-label=${this.label}
-      >
-        ${this.image && !this.hasError ? o : r}
-      </div>
-    `;
+    })} role="img" aria-label=${this.label}>${this.image && !this.hasError ? o : r}</div>`;
   }
 };
 a.styles = [d, x];

package/library/components/badge.js

@@ -1,143 +1,20 @@
-import { n as s, C as d } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as g } from "../chunks/component.styles.DMSLciL5.js";
+import { n as s, C as g } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as d } from "../chunks/component.styles.CRO4Odto.js";
 import { c as p } from "../chunks/custom-element.L4WJXn1j.js";
 import { i as u, x as m } from "../chunks/lit-element.jLBm65_O.js";
 import { e as x } from "../chunks/class-map.BiVq-cVR.js";
-const v = u`
-  :host {
-    display: inline-flex;
-  }
-
-  .badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--font-size, var(--cx-font-size-small));
-    font-weight: var(--cx-font-weight-medium);
-    letter-spacing: var(--cx-letter-spacing-normal);
-    line-height: 1;
-    border-radius: var(--cx-border-radius-small);
-    border: solid 1px var(--cx-color-neutral-0);
-    white-space: nowrap;
-    user-select: none;
-    -webkit-user-select: none;
-    cursor: inherit;
-    line-height: normal;
-  }
-
-  /* Variant modifiers */
-  .badge--primary {
-    background-color: var(--cx-color-primary);
-    border-color: var(--cx-color-primary);
-    color: var(--cx-color-neutral-0);
-  }
-
-  .badge--success {
-    background-color: var(--cx-color-success);
-    border-color: var(--cx-color-success);
-    color: var(--cx-color-neutral-0);
-  }
-
-  .badge--neutral {
-    background-color: var(--cx-color-neutral-100);
-    border-color: var(--cx-color-neutral-100);
-    color: var(--cx-color-neutral);
-  }
-
-  .badge--warning {
-    background-color: var(--cx-color-warning);
-    border-color: var(--cx-color-warning);
-    color: var(--cx-color-neutral-0);
-  }
-
-  .badge--danger {
-    background-color: var(--cx-color-danger);
-    border-color: var(--cx-color-danger);
-    color: var(--cx-color-danger-0);
-  }
-
-  /* Size modifiers */
-  .badge--x-small {
-    padding: var(--cx-spacing-2x-small) var(--cx-spacing-x-small);
-    height: var(--cx-spacing-x-small);
-    min-width: var(--cx-spacing-x-small);
-    font-size: var(--font-size, var(--cx-font-size-2x-small));
-  }
-
-  .badge--small {
-    padding: var(--cx-spacing-2x-small) var(--cx-spacing-x-small);
-    height: var(--cx-input-height-small);
-    min-width: var(--cx-input-height-small);
-  }
-
-  .badge--medium {
-    padding: var(--cx-spacing-x-small) var(--cx-spacing-small);
-    height: var(--cx-input-height-medium);
-    min-width: var(--cx-input-height-medium);
-  }
-
-  .badge--large {
-    padding: var(--cx-spacing-small) var(--cx-spacing-medium);
-    height: var(--cx-input-height-large);
-    min-width: var(--cx-input-height-large);
-  }
-
-  /* Pill modifier */
-  .badge--pill {
-    border-radius: var(--cx-border-radius-pill);
-  }
-
-  /* Pulse modifier */
-  .badge--pulse {
-    animation: pulse 1.5s infinite;
-  }
-
-  .badge--pulse.badge--primary {
-    --pulse-color: var(--cx-color-primary);
-  }
-
-  .badge--pulse.badge--success {
-    --pulse-color: var(--cx-color-success);
-  }
-
-  .badge--pulse.badge--neutral {
-    --pulse-color: var(--cx-color-neutral-600);
-  }
-
-  .badge--pulse.badge--warning {
-    --pulse-color: var(--cx-color-warning);
-  }
-
-  .badge--pulse.badge--danger {
-    --pulse-color: var(--cx-color-danger);
-  }
-
-  @keyframes pulse {
-    0% {
-      box-shadow: 0 0 0 0 var(--pulse-color);
-    }
-    70% {
-      box-shadow: 0 0 0 0.5rem transparent;
-    }
-    100% {
-      box-shadow: 0 0 0 0 transparent;
-    }
-  }
-`;
-var b = Object.defineProperty, h = Object.getOwnPropertyDescriptor, a = (n, l, i, o) => {
-  for (var r = o > 1 ? void 0 : o ? h(l, i) : l, c = n.length - 1, t; c >= 0; c--)
-    (t = n[c]) && (r = (o ? t(l, i, r) : t(r)) || r);
-  return o && r && b(l, i, r), r;
+const v = u`:host{display:inline-flex}.badge{font-size:var(--font-size,var(--cx-font-size-small));font-weight:var(--cx-font-weight-medium);letter-spacing:var(--cx-letter-spacing-normal);border-radius:var(--cx-border-radius-small);border:solid 1px var(--cx-color-neutral-0);white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:inherit;justify-content:center;align-items:center;line-height:normal;display:inline-flex}.badge--primary{background-color:var(--cx-color-primary);border-color:var(--cx-color-primary);color:var(--cx-color-neutral-0)}.badge--success{background-color:var(--cx-color-success);border-color:var(--cx-color-success);color:var(--cx-color-neutral-0)}.badge--neutral{background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral)}.badge--warning{background-color:var(--cx-color-warning);border-color:var(--cx-color-warning);color:var(--cx-color-neutral-0)}.badge--danger{background-color:var(--cx-color-danger);border-color:var(--cx-color-danger);color:var(--cx-color-danger-0)}.badge--x-small{padding:var(--cx-spacing-2x-small) var(--cx-spacing-x-small);height:var(--cx-spacing-x-small);min-width:var(--cx-spacing-x-small);font-size:var(--font-size,var(--cx-font-size-2x-small))}.badge--small{padding:var(--cx-spacing-2x-small) var(--cx-spacing-x-small);height:var(--cx-input-height-small);min-width:var(--cx-input-height-small)}.badge--medium{padding:var(--cx-spacing-x-small) var(--cx-spacing-small);height:var(--cx-input-height-medium);min-width:var(--cx-input-height-medium)}.badge--large{padding:var(--cx-spacing-small) var(--cx-spacing-medium);height:var(--cx-input-height-large);min-width:var(--cx-input-height-large)}.badge--pill{border-radius:var(--cx-border-radius-pill)}.badge--pulse{animation:1.5s infinite pulse}.badge--pulse.badge--primary{--pulse-color:var(--cx-color-primary)}.badge--pulse.badge--success{--pulse-color:var(--cx-color-success)}.badge--pulse.badge--neutral{--pulse-color:var(--cx-color-neutral-600)}.badge--pulse.badge--warning{--pulse-color:var(--cx-color-warning)}.badge--pulse.badge--danger{--pulse-color:var(--cx-color-danger)}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse-color)}70%{box-shadow:0 0 0 .5rem #0000}to{box-shadow:0 0 #0000}}`;
+var b = Object.defineProperty, h = Object.getOwnPropertyDescriptor, a = (n, l, c, o) => {
+  for (var r = o > 1 ? void 0 : o ? h(l, c) : l, i = n.length - 1, t; i >= 0; i--)
+    (t = n[i]) && (r = (o ? t(l, c, r) : t(r)) || r);
+  return o && r && b(l, c, r), r;
 };
-let e = class extends d {
+let e = class extends g {
   constructor() {
     super(...arguments), this.variant = "primary", this.pill = !1, this.pulse = !1, this.size = "medium";
   }
   render() {
-    return m`
-      <span
-        part="base"
-        class=${x({
+    return m`<span part="base" class=${x({
       badge: !0,
       "badge--danger": this.variant === "danger",
       "badge--large": this.size === "large",
@@ -150,15 +27,10 @@ let e = class extends d {
       "badge--success": this.variant === "success",
       "badge--warning": this.variant === "warning",
       "badge--x-small": this.size === "x-small"
-    })}
-        role="status"
-      >
-        <slot></slot>
-      </span>
-    `;
+    })} role="status"><slot></slot></span>`;
   }
 };
-e.styles = [g, v];
+e.styles = [d, v];
 a([
   s({ reflect: !0 })
 ], e.prototype, "variant", 2);

package/library/components/bicolor-picker.js

@@ -1,7 +1,7 @@
 import h from "./color-picker.js";
 import m from "./space.js";
 import { n as p, C as u } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as f } from "../chunks/component.styles.DMSLciL5.js";
+import { c as f } from "../chunks/component.styles.CRO4Odto.js";
 import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
 import { i as x, x as C } from "../chunks/lit-element.jLBm65_O.js";
 import { o as n } from "../chunks/style-map.llVFPd__.js";
@@ -32,32 +32,13 @@ let t = class extends u {
     });
   }
   render() {
-    return C`<cx-space spacing="x-small" wrap="nowrap">
-      <cx-color-picker
-        variant="button"
-        value=${this.value[0]}
-        hoist
-        opacity
-        .form=${this.form || this.closest("form")}
-        @cx-change=${this.handleFirstColorPickerChange}
-        style=${n({
+    return C`<cx-space spacing="x-small" wrap="nowrap"><cx-color-picker variant="button" value=${this.value[0]} hoist opacity .form=${this.form || this.closest("form")} @cx-change=${this.handleFirstColorPickerChange} style=${n({
       "--control-button-color": "#FFFFFF",
       "--control-caret-color": "#1A1A1E"
-    })}
-      ></cx-color-picker>
-      <cx-color-picker
-        variant="button"
-        value=${this.value[1]}
-        hoist
-        opacity
-        .form=${this.form || this.closest("form")}
-        @cx-change=${this.handleSecondColorPickerChange}
-        style=${n({
+    })}></cx-color-picker><cx-color-picker variant="button" value=${this.value[1]} hoist opacity .form=${this.form || this.closest("form")} @cx-change=${this.handleSecondColorPickerChange} style=${n({
       "--control-button-color": "#1A1A1E",
       "--control-caret-color": "#FFFFFF"
-    })}
-      ></cx-color-picker>
-    </cx-space>`;
+    })}></cx-color-picker></cx-space>`;
   }
 };
 t.styles = [f, g];

package/library/components/border-input-group.js

@@ -1,16 +1,12 @@
 import n from "./input.js";
 import p from "./space.js";
 import { n as u, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as h } from "../chunks/component.styles.DMSLciL5.js";
+import { c as h } from "../chunks/component.styles.CRO4Odto.js";
 import { c as d } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as x } from "../chunks/i18n.C0iakJkV.js";
+import { L as x } from "../chunks/i18n.BFqTRDCA.js";
 import { i as v, x as b } from "../chunks/lit-element.jLBm65_O.js";
 import f from "./bicolor-picker.js";
-const g = v`
-  .border-width {
-    width: 72px;
-  }
-`;
+const g = v`.border-width{width:72px}`;
 var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (r, e, t, o) => {
   for (var a = o > 1 ? void 0 : o ? w(e, t) : e, s = r.length - 1, l; s >= 0; s--)
     (l = r[s]) && (a = (o ? l(e, t, a) : l(a)) || a);
@@ -39,31 +35,14 @@ let i = class extends m {
     });
   }
   render() {
-    return b`<cx-space spacing="x-small" wrap="nowrap">
-      <cx-bicolor-picker
-        part="border-color"
-        value=${`${this.value[0]} ${this.value[1]}`}
-        .form=${this.closest("form")}
-        @cx-bicolor-picker-change=${this.handleBiColorPickerChange}
-      ></cx-bicolor-picker>
-      <cx-input
-        part="border-width"
-        class="border-width"
-        value=${this.value[2]}
-        mask="numpx"
-        .maskBlocks=${{
+    return b`<cx-space spacing="x-small" wrap="nowrap"><cx-bicolor-picker part="border-color" value=${`${this.value[0]} ${this.value[1]}`} .form=${this.closest("form")} @cx-bicolor-picker-change=${this.handleBiColorPickerChange}></cx-bicolor-picker><cx-input part="border-width" class="border-width" value=${this.value[2]} mask="numpx" .maskBlocks=${{
       num: {
         mask: Number,
         min: 0,
         scale: 0,
         thousandsSeparator: ""
       }
-    }}
-        .form=${this.closest("form")}
-        @cx-change=${this.handleBorderWidthInputChange}
-        placeholder=${this.localize.term("borderWidth")}
-      ></cx-input>
-    </cx-space>`;
+    }} .form=${this.closest("form")} @cx-change=${this.handleBorderWidthInputChange} placeholder=${this.localize.term("borderWidth")}></cx-input></cx-space>`;
   }
 };
 i.styles = [h, g];