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

package/library/components/timecode.js

@@ -1,28 +1,13 @@
-import { C as l, T as f } from "../chunks/typography.oDzoLbZS.js";
+import { C as l, T as f } from "../chunks/typography.DJC_UXgs.js";
 import { n as i, C as y } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as d } from "../chunks/component.styles.DMSLciL5.js";
-import { T as g, f as n } from "../chunks/string.B_rEG27K.js";
+import { c as d } from "../chunks/component.styles.CRO4Odto.js";
+import { T as g, f as n } from "../chunks/string.BigZhczf.js";
 import { t as u } from "../chunks/converters.DkDtLstb.js";
 import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
-import { w as h } from "../chunks/watch.q1sEjPWL.js";
+import { w as h } from "../chunks/watch.BCJD77bD.js";
 import { i as x, E as S, x as b } from "../chunks/lit-element.jLBm65_O.js";
 import { r as T } from "../chunks/state.CSDxrqLd.js";
-const w = x`
-  :host {
-    display: inline;
-    white-space: normal;
-  }
-  :host([is-preview]) {
-    background-color: var(--cx-color-primary-50, #e5f1ff);
-    padding-inline: var(--cx-spacing-2x-small, 4px);
-  }
-  .time {
-    --color: var(--cx-color-primary);
-    margin-block-start: var(--cx-spacing-x-small);
-    line-height: var(--cx-line-height-medium);
-    display: inline;
-  }
-`;
+const w = x`:host{white-space:normal;display:inline}:host([is-preview]){background-color:var(--cx-color-primary-50,#e5f1ff);padding-inline:var(--cx-spacing-2x-small,4px)}.time{--color:var(--cx-color-primary);line-height:var(--cx-line-height-medium);margin-block-start:var(--cx-spacing-x-small);display:inline}`;
 var C = Object.defineProperty, R = Object.getOwnPropertyDescriptor, e = (c, o, m, a) => {
   for (var r = a > 1 ? void 0 : a ? R(o, m) : o, s = c.length - 1, p; s >= 0; s--)
     (p = c[s]) && (r = (a ? p(o, m, r) : p(r)) || r);
@@ -53,11 +38,7 @@ let t = class extends y {
     });
   }
   render() {
-    return this.time?.length ? b`
-      <cx-typography class="time" variant=${this.typographyVariant}>
-        ${this.timeString}
-      </cx-typography>
-    ` : S;
+    return this.time?.length ? b`<cx-typography class="time" variant=${this.typographyVariant}>${this.timeString}</cx-typography>` : S;
   }
 };
 t.styles = [d, w];

package/library/components/tooltip.js

@@ -1,78 +1,22 @@
-import { n as i, C as g } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as b } from "../chunks/component.styles.DMSLciL5.js";
+import { n as i, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as g } from "../chunks/component.styles.CRO4Odto.js";
 import { p as c, s as u, a as m } from "../chunks/animate.El-MpOws.js";
 import { c as w } from "../chunks/custom-element.L4WJXn1j.js";
 import { w as y } from "../chunks/event.mFzZi4sr.js";
-import { L as x } from "../chunks/i18n.C0iakJkV.js";
-import { w as l } from "../chunks/watch.q1sEjPWL.js";
+import { L as x } from "../chunks/i18n.BFqTRDCA.js";
+import { w as l } from "../chunks/watch.BCJD77bD.js";
 import { i as C, x as k } from "../chunks/lit-element.jLBm65_O.js";
 import { e as d } from "../chunks/query.BBf1UFkC.js";
 import { e as O } from "../chunks/class-map.BiVq-cVR.js";
 import { s as v, g as f } from "../chunks/animation-registry.HmpwNuGH.js";
 import B from "./popup.js";
-const D = C`
-  :host {
-    --hide-delay: 0ms;
-    --show-delay: 500ms;
-
-    display: contents;
-  }
-
-  .tooltip {
-    --arrow-size: var(--cx-tooltip-arrow-size);
-    --arrow-color: var(--cx-tooltip-background-color);
-  }
-
-  .tooltip::part(popup) {
-    z-index: var(--cx-z-index-tooltip);
-  }
-
-  .tooltip[placement^='top']::part(popup) {
-    transform-origin: bottom;
-  }
-
-  .tooltip[placement^='bottom']::part(popup) {
-    transform-origin: top;
-  }
-
-  .tooltip[placement^='left']::part(popup) {
-    transform-origin: right;
-  }
-
-  .tooltip[placement^='right']::part(popup) {
-    transform-origin: left;
-  }
-
-  .tooltip--disabled-hover::part(popup) {
-    pointer-events: none;
-  }
-
-  .tooltip__body {
-    display: block;
-    width: max-content;
-    max-width: var(--max-width, min(80vw, 40rem));
-    border-radius: var(--cx-tooltip-border-radius);
-    background-color: var(--cx-tooltip-background-color);
-    font-family: var(--cx-tooltip-font-family);
-    font-size: var(--cx-tooltip-font-size);
-    font-weight: var(--cx-tooltip-font-weight);
-    line-height: var(--cx-tooltip-line-height);
-    text-align: start;
-    white-space: normal;
-    color: var(--cx-tooltip-color);
-    padding: var(--cx-tooltip-padding);
-    pointer-events: none;
-    user-select: none;
-    -webkit-user-select: none;
-    overflow-wrap: break-word;
-  }
-`;
+const D = C`:host{--hide-delay:0s;--show-delay:.5s;display:contents}.tooltip{--arrow-size:var(--cx-tooltip-arrow-size);--arrow-color:var(--cx-tooltip-background-color)}.tooltip::part(popup){z-index:var(--cx-z-index-tooltip)}.tooltip[placement^=top]::part(popup){transform-origin:bottom}.tooltip[placement^=bottom]::part(popup){transform-origin:top}.tooltip[placement^=left]::part(popup){transform-origin:100%}.tooltip[placement^=right]::part(popup){transform-origin:0}.tooltip--disabled-hover::part(popup){pointer-events:none}.tooltip__body{width:max-content;max-width:var(--max-width,min(80vw, 40rem));border-radius:var(--cx-tooltip-border-radius);background-color:var(--cx-tooltip-background-color);font-family:var(--cx-tooltip-font-family);font-size:var(--cx-tooltip-font-size);font-weight:var(--cx-tooltip-font-weight);line-height:var(--cx-tooltip-line-height);text-align:start;white-space:normal;color:var(--cx-tooltip-color);padding:var(--cx-tooltip-padding);pointer-events:none;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;display:block}`;
 var E = Object.defineProperty, T = Object.getOwnPropertyDescriptor, e = (o, s, n, a) => {
   for (var r = a > 1 ? void 0 : a ? T(s, n) : s, p = o.length - 1, h; p >= 0; p--)
     (h = o[p]) && (r = (a ? h(s, n, r) : h(r)) || r);
   return a && r && E(s, n, r), r;
 };
-let t = class extends g {
+let t = class extends b {
   constructor() {
     super(), this.localize = new x(this), this.content = "", this.placement = "top", this.disabled = !1, this.distance = 8, this.open = !1, this.skidding = 0, this.trigger = "hover focus", this.hoist = !1, this.disabledHoverBridge = !1, this.handleBlur = this.handleBlur.bind(this), this.handleFocus = this.handleFocus.bind(this), this.handleClick = this.handleClick.bind(this), this.handleMouseOver = this.handleMouseOver.bind(this), this.handleMouseOut = this.handleMouseOut.bind(this), this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
   }
@@ -158,45 +102,17 @@ let t = class extends g {
   // element, otherwise positioning is incorrect.
   //
   render() {
-    return k`
-      <cx-popup
-        part="base"
-        exportparts="
+    return k`<cx-popup part="base" exportparts="
           popup:base__popup,
           arrow:base__arrow
-        "
-        class=${O({
+        " class=${O({
       tooltip: !0,
       "tooltip--disabled-hover": this.disabledHoverBridge,
       "tooltip--open": this.open
-    })}
-        placement=${this.placement}
-        distance=${this.distance}
-        skidding=${this.skidding}
-        strategy=${this.hoist ? "overlay" : "absolute"}
-        flip
-        shift
-        arrow
-        ?hover-bridge=${!this.disabledHoverBridge}
-        .anchor=${this.anchor}
-        .flipBoundary=${this.flipBoundary}
-        .shiftBoundary=${this.shiftBoundary}
-      >
-        <slot slot="anchor" aria-describedby="tooltip"></slot>
-        <div
-          part="body"
-          id="tooltip"
-          class="tooltip__body"
-          role="tooltip"
-          aria-live=${this.open ? "polite" : "off"}
-        >
-          <slot name="content">${this.content}</slot>
-        </div>
-      </cx-popup>
-    `;
+    })} placement=${this.placement} distance=${this.distance} skidding=${this.skidding} strategy=${this.hoist ? "overlay" : "absolute"} flip shift arrow ?hover-bridge=${!this.disabledHoverBridge} .anchor=${this.anchor} .flipBoundary=${this.flipBoundary} .shiftBoundary=${this.shiftBoundary}><slot slot="anchor" aria-describedby="tooltip"></slot><div part="body" id="tooltip" class="tooltip__body" role="tooltip" aria-live=${this.open ? "polite" : "off"}><slot name="content">${this.content}</slot></div></cx-popup>`;
   }
 };
-t.styles = [b, D];
+t.styles = [g, D];
 t.dependencies = { "cx-popup": B };
 e([
   d("slot:not([name])")

package/library/components/tree-item.js

@@ -1,9 +1,9 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.DMSLciL5.js";
+import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/animate.El-MpOws.js";
 import "../chunks/custom-element.L4WJXn1j.js";
-import "../chunks/i18n.C0iakJkV.js";
-import "../chunks/watch.q1sEjPWL.js";
+import "../chunks/i18n.BFqTRDCA.js";
+import "../chunks/watch.BCJD77bD.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";
@@ -15,7 +15,7 @@ import "../chunks/animation-registry.HmpwNuGH.js";
 import "./checkbox.js";
 import "./icon.js";
 import "./spinner.js";
-import { C as j } from "../chunks/tree.CeMLCbs-.js";
+import { C as j } from "../chunks/tree.QCQd_cuc.js";
 export {
   j as default
 };

package/library/components/tree.js

@@ -1,10 +1,10 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.DMSLciL5.js";
+import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/custom-element.L4WJXn1j.js";
-import "../chunks/i18n.C0iakJkV.js";
+import "../chunks/i18n.BFqTRDCA.js";
 import "../chunks/math.DqTA6ya4.js";
-import "../chunks/watch.q1sEjPWL.js";
-import { a as y, b, s as f, c as x } from "../chunks/tree.CeMLCbs-.js";
+import "../chunks/watch.BCJD77bD.js";
+import { a as y, b, s as f, c as x } from "../chunks/tree.QCQd_cuc.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";

package/library/components/typeface.js

@@ -1,68 +1,23 @@
 import d from "./grid.js";
 import m from "./grid-item.js";
-import x from "./icon-button.js";
+import { C as x } from "../chunks/icon-button.rKe0N4VB.js";
 import h from "./line-clamp.js";
 import g from "./space.js";
-import { C as w } from "../chunks/typography.oDzoLbZS.js";
+import { C as w } from "../chunks/typography.DJC_UXgs.js";
 import { n as a, C as u } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as _ } from "../chunks/component.styles.DMSLciL5.js";
+import { c as _ } from "../chunks/component.styles.CRO4Odto.js";
 import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as S } from "../chunks/i18n.C0iakJkV.js";
+import { L as S } from "../chunks/i18n.BFqTRDCA.js";
 import { i as $, x as r } from "../chunks/lit-element.jLBm65_O.js";
 import { o as y } from "../chunks/if-defined.BRoBj_Rp.js";
 import { o as b } from "../chunks/style-map.llVFPd__.js";
 import { n as p } from "../chunks/when.Dr1es41R.js";
-import { c as C } from "../chunks/capitalize.WSkCXkNE.js";
-const D = $`
-  :host {
-    --typeface-font-family: var(--cx-font-sans);
-    --typeface-font-style: normal;
-    --typeface-font-weight: var(--cx-font-weight-normal);
-
-    display: block;
-    width: 100%;
-  }
-
-  .typeface__name,
-  .typeface__preview-text,
-  .typeface__static-text,
-  .typeface__description {
-    color: var(--color);
-    overflow-wrap: break-word;
-  }
-
-  .typeface__name,
-  .typeface__preview-text,
-  .typeface__static-text {
-    --font-family: var(--typeface-font-family);
-    --font-style: var(--typeface-font-style);
-    --font-weight: var(--typeface-font-weight);
-  }
-
-  .typeface__preview-text {
-    --font-size: var(--cx-font-size-4x-large);
-    text-align: var(--text-align, left);
-  }
-
-  .typeface__preview-text::part(base) {
-    line-height: 1.5;
-    padding-right: var(--cx-spacing-x-large);
-  }
-
-  .typeface__static-text {
-    --font-size: var(--cx-font-size-medium-large);
-    --line-height: 1;
-  }
-
-  .typeface__description {
-    flex-basis: 120px;
-    font-family: var(--cx-font-sans);
-  }
-`;
-var z = Object.defineProperty, I = Object.getOwnPropertyDescriptor, e = (o, c, l, n) => {
-  for (var i = n > 1 ? void 0 : n ? I(c, l) : c, s = o.length - 1, f; s >= 0; s--)
-    (f = o[s]) && (i = (n ? f(c, l, i) : f(i)) || i);
-  return n && i && z(c, l, i), i;
+import { c as C } from "../chunks/capitalize.CNStXZBq.js";
+const D = $`:host{--typeface-font-family:var(--cx-font-sans);--typeface-font-style:normal;--typeface-font-weight:var(--cx-font-weight-normal);width:100%;display:block}.typeface__name,.typeface__preview-text,.typeface__static-text,.typeface__description{color:var(--color);overflow-wrap:break-word}.typeface__name,.typeface__preview-text,.typeface__static-text{--font-family:var(--typeface-font-family);--font-style:var(--typeface-font-style);--font-weight:var(--typeface-font-weight)}.typeface__preview-text{--font-size:var(--cx-font-size-4x-large);text-align:var(--text-align,left)}.typeface__preview-text::part(base){padding-right:var(--cx-spacing-x-large);line-height:1.5}.typeface__static-text{--font-size:var(--cx-font-size-medium-large);--line-height:1}.typeface__description{font-family:var(--cx-font-sans);flex-basis:120px}`;
+var z = Object.defineProperty, I = Object.getOwnPropertyDescriptor, e = (o, c, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? I(c, s) : c, l = o.length - 1, f; l >= 0; l--)
+    (f = o[l]) && (i = (n ? f(c, s, i) : f(i)) || i);
+  return n && i && z(c, s, i), i;
 };
 let t = class extends u {
   constructor() {
@@ -73,89 +28,35 @@ let t = class extends u {
   }
   render() {
     const o = this.variant === "compact" ? "6" : "5";
-    return r`<div
-      class="typeface"
-      style=${b({
+    return r`<div class="typeface" style=${b({
       "--typeface-font-family": `"${this.fontFamily.replace(/"/g, '\\"')}"`,
       "--typeface-font-style": this.fontStyle,
       "--typeface-font-weight": this.fontWeight
-    })}
-    >
-      ${p(
+    })}>${p(
       this.variant === "detailed",
-      () => r`<cx-typography class="typeface__name">
-            ${this.fontFamily}-${this.fontWeight}
-          </cx-typography>`
-    )}
-      <cx-grid
-        columns=${o}
-        wrap="wrap"
-        column-spacing="var(--cx-spacing-medium)"
-        row-spacing="var(--cx-spacing-medium)"
-        use-flex-gap
-        use-container
-      >
-        ${p(
+      () => r`<cx-typography class="typeface__name">${this.fontFamily}-${this.fontWeight}</cx-typography>`
+    )}<cx-grid columns=${o} wrap="wrap" column-spacing="var(--cx-spacing-medium)" row-spacing="var(--cx-spacing-medium)" use-flex-gap use-container>${p(
       this.variant === "compact",
       () => r`<cx-grid-item xs=${o} md="1"></cx-grid-item>`
-    )}
-        <cx-grid-item xs=${o} md="2">
-          <cx-line-clamp lines="1">
-            <cx-typography class="typeface__preview-text">
-              ${this.previewText}
-            </cx-typography>
-          </cx-line-clamp>
-        </cx-grid-item>
-        <cx-grid-item xs=${o} md="2">
-          <cx-typography class="typeface__static-text">
+    )}<cx-grid-item xs=${o} md="2"><cx-line-clamp lines="1"><cx-typography class="typeface__preview-text">${this.previewText}</cx-typography></cx-line-clamp></cx-grid-item><cx-grid-item xs=${o} md="2"><cx-typography class="typeface__static-text">
             ABCDEFGHIJKLMNOPQRSTUVWXYZ
-          </cx-typography>
-          <cx-typography class="typeface__static-text">
+          </cx-typography><cx-typography class="typeface__static-text">
             abcdefghijklmnopqrstuvwxyz
-          </cx-typography>
-          <cx-typography class="typeface__static-text">
+          </cx-typography><cx-typography class="typeface__static-text">
             1234567890!@#$%^&*()-=/:;.,”
-          </cx-typography>
-        </cx-grid-item>
-        <cx-grid-item xs=${o} md="1">
-          <cx-space
-            direction="horizontal"
-            align-items="center"
-            justify-content="space-between"
-            wrap="nowrap"
-          >
-            ${p(
+          </cx-typography></cx-grid-item><cx-grid-item xs=${o} md="1"><cx-space direction="horizontal" align-items="center" justify-content="space-between" wrap="nowrap">${p(
       this.variant === "detailed",
-      () => r`
-                <div class="typeface__description">
-                  <cx-typography>${this.fontFamily}</cx-typography>
-                  <cx-typography>Weight: ${this.fontWeight}</cx-typography>
-                  <cx-typography>
-                    Style: ${C(this.fontStyle)}
-                  </cx-typography>
-                </div>
-              `
+      () => r`<div class="typeface__description"><cx-typography>${this.fontFamily}</cx-typography><cx-typography>Weight: ${this.fontWeight}</cx-typography><cx-typography>
+                    Style: ${C(this.fontStyle)}</cx-typography></div>`
     )}
             ${p(
       this.canDownload && this.fontSrc,
-      () => r`
-                <cx-icon-button
-                  name=${y(
+      () => r`<cx-icon-button name=${y(
         this.downloadIconSrc ? void 0 : this.downloadIconName
-      )}
-                  src=${y(this.downloadIconSrc || void 0)}
-                  class="typeface__download"
-                  label=${this.localize.term("download")}
-                  @click=${this.handleDownload}
-                >
+      )} src=${y(this.downloadIconSrc || void 0)} class="typeface__download" label=${this.localize.term("download")} @click=${this.handleDownload}>
                   Download
-                </cx-icon-button>
-              `
-    )}
-          </cx-space>
-        </cx-grid-item>
-      </cx-grid>
-    </div>`;
+                </cx-icon-button>`
+    )}</cx-space></cx-grid-item></cx-grid></div>`;
   }
 };
 t.styles = [_, D];