@orangelogic/design-system 2.78.0 → 2.79.0

package/library/components/textarea.js

@@ -1,311 +1,24 @@
 import { n as a, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as b } from "../chunks/component.styles.DMSLciL5.js";
-import { f as g } from "../chunks/form-control.styles.CUGhvlfT.js";
+import { c as b } from "../chunks/component.styles.CRO4Odto.js";
+import { f as g } from "../chunks/form-control.styles.CaGWmeAS.js";
 import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as y } from "../chunks/default-value.COZopaet.js";
 import { F as _ } from "../chunks/form.DgwYWi0O.js";
 import { H as z } from "../chunks/slot.j5oheLJC.js";
 import { w as d } from "../chunks/watch.BCJD77bD.js";
-import { i as w, x as p } from "../chunks/lit-element.jLBm65_O.js";
-import { r as C } from "../chunks/state.CSDxrqLd.js";
+import { i as C, x as p } from "../chunks/lit-element.jLBm65_O.js";
+import { r as w } from "../chunks/state.CSDxrqLd.js";
 import { e as f } from "../chunks/query.BBf1UFkC.js";
 import { e as x } from "../chunks/class-map.BiVq-cVR.js";
 import { o as n } from "../chunks/if-defined.BRoBj_Rp.js";
 import { l as k } from "../chunks/live.SCz6M8Gs.js";
 import { n as $ } from "../chunks/when.Dr1es41R.js";
 var c = /* @__PURE__ */ ((t) => (t.Max = "max", t))(c || {});
-const F = w`
-  :host {
-    display: block;
-  }
-
-  :host([data-user-invalid])::part(base) {
-    border-color: var(--cx-input-invalid-border-color);
-  }
-
-  :host([data-user-invalid]:focus-within)::part(base) {
-    border-color: var(--cx-input-invalid-border-color);
-    box-shadow: var(--cx-input-invalid-shadow);
-  }
-
-  .textarea {
-    --textarea-background-color: var(--cx-input-background-color);
-    display: flex;
-    align-items: center;
-    position: relative;
-    width: 100%;
-    font-family: var(--cx-input-font-family);
-    font-weight: var(--cx-input-font-weight);
-    line-height: var(--cx-line-height-large);
-    letter-spacing: var(--cx-input-letter-spacing);
-    vertical-align: middle;
-    transition:
-      var(--cx-transition-fast) color,
-      var(--cx-transition-fast) border,
-      var(--cx-transition-fast) box-shadow,
-      var(--cx-transition-fast) background-color;
-    cursor: text;
-  }
-
-  /* Standard textareas */
-  .textarea--standard {
-    background-color: var(--textarea-background-color);
-    border: solid var(--cx-input-border-width) var(--cx-input-border-color);
-  }
-
-  .textarea--standard:hover:not(.textarea--disabled) {
-    --textarea-background-color: var(--cx-input-background-color-hover);
-    border-color: var(--cx-input-border-color-hover);
-  }
-  .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
-    color: var(--cx-input-color-hover);
-  }
-
-  .textarea--standard.textarea--focused:not(.textarea--disabled) {
-    --textarea-background-color: var(--cx-input-background-color-focus);
-    border-color: var(--cx-input-border-color-focus);
-    color: var(--cx-input-color-focus);
-  }
-
-  .textarea--standard.textarea--focused:not(.textarea--disabled)
-    .textarea__control {
-    color: var(--cx-input-color-focus);
-  }
-
-  .textarea--standard.textarea--disabled {
-    --textarea-background-color: var(--cx-input-background-color-disabled);
-    border-color: var(--cx-input-border-color-disabled);
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .textarea--standard.textarea--disabled .textarea__control {
-    color: var(--cx-input-color-disabled);
-  }
-
-  .textarea--standard.textarea--disabled .textarea__control::placeholder {
-    color: var(--cx-input-placeholder-color-disabled);
-  }
-
-  /* Filled textareas */
-  .textarea--filled {
-    --textarea-background-color: var(--cx-input-filled-background-color);
-    border: none;
-    background-color: var(--textarea-background-color);
-    color: var(--cx-input-color);
-  }
-
-  .textarea--filled:hover:not(.textarea--disabled) {
-    --textarea-background-color: var(--cx-input-filled-background-color-hover);
-  }
-
-  .textarea--filled.textarea--focused:not(.textarea--disabled) {
-    --textarea-background-color: var(--cx-input-filled-background-color-focus);
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  .textarea--filled.textarea--disabled {
-    --textarea-background-color: var(--cx-input-filled-background-color-disabled);
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .textarea__control {
-    flex: 1 1 auto;
-    font: inherit;
-    line-height: 1.4;
-    color: var(--cx-input-color);
-    border: none;
-    background: none;
-    box-shadow: none;
-    cursor: inherit;
-    -webkit-appearance: none;
-    line-height: var(--cx-line-height-medium);
-    padding-top: var(--cx-spacing-x-small);
-    padding-bottom: var(--cx-spacing-x-small);
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .textarea__control::-webkit-search-decoration,
-  .textarea__control::-webkit-search-cancel-button,
-  .textarea__control::-webkit-search-results-button,
-  .textarea__control::-webkit-search-results-decoration {
-    -webkit-appearance: none;
-  }
-
-  .textarea__control::placeholder {
-    color: var(--cx-input-placeholder-color);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .textarea__control:focus {
-    outline: none;
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  .textarea--small {
-    border-radius: var(--cx-input-border-radius-small);
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  .textarea--small .textarea-container {
-    padding-left: var(--cx-input-spacing-small);
-    padding-right: var(--cx-input-spacing-small);
-  }
-
-  .textarea--medium {
-    border-radius: var(--cx-input-border-radius-medium);
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  .textarea--medium .textarea-container {
-    padding-left: var(--cx-input-spacing-medium);
-    padding-right: var(--cx-input-spacing-medium);
-  }
-
-  .textarea--large {
-    border-radius: var(--cx-input-border-radius-large);
-    font-size: var(--cx-input-font-size-small);
-  }
-
-  .textarea--large .textarea-container {
-    padding-left: var(--cx-input-spacing-large);
-    padding-right: var(--cx-input-spacing-large);
-  }
-
-  /*
-   * Resize types
-   */
-
-  .textarea--resize-none .textarea__control {
-    resize: none;
-  }
-
-  .textarea--resize-vertical .textarea__control {
-    resize: vertical;
-  }
-
-  .textarea--resize-auto .textarea__control {
-    height: auto;
-    resize: none;
-    overflow-y: hidden;
-  }
-
-  /*
-   * Adapt label to be inside textarea
-   */
-
-  .textarea-container {
-    position: relative;
-    display: inline-flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-  }
-
-  /* set label's position to absolute */
-  .form-control__label {
-    position: relative;
-    -webkit-transition: transform 0.2s ease-in-out;
-    -moz-transition: transform 0.2s ease-in-out;
-    transition: transform 0.2s ease-in-out;
-    pointer-events: none;
-    width: fit-content;
-    line-height: 1; /* use line-height: 1 for easier transform calculation */
-    background-color: var(--textarea-background-color);
-  }
-
-  .form-control--has-label .textarea--small .form-control__label {
-    font-size: var(--cx-input-label-font-size-small);
-    margin: 0;
-  }
-
-  .form-control--has-label .textarea--medium .form-control__label {
-    font-size: var(--cx-input-label-font-size-medium);
-    margin: 0;
-  }
-
-  .form-control--has-label .textarea--large .form-control__label {
-    font-size: var(--cx-input-label-font-size-large);
-    margin: 0;
-  }
-
-  .textarea__character-count {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    color: var(--cx-input-suffix-color, var(--cx-input-color));
-    font-size: var(--cx-input-font-size);
-    font-weight: var(--cx-input-font-weight);
-    letter-spacing: var(--cx-input-letter-spacing);
-    line-height: var(--cx-input-line-height);
-    padding-inline-end: var(--cx-spacing-x-small);
-    padding-top: var(--cx-spacing-2x-small);
-    white-space: nowrap;
-  }
-
-  /* when empty with no placeholder (initial state), transform label to vertical center
-    = (input height - label height) / 2
-  */
-  .textarea--small .form-control__label {
-    transform: translateY(
-      calc(
-        (
-            var(--cx-input-height-small) +
-              1.25rem - var(--cx-input-label-font-size-small)
-          ) /
-          2
-      )
-    );
-  }
-
-  .textarea--medium .form-control__label {
-    transform: translateY(
-      calc(
-        (
-            var(--cx-input-height-medium) +
-              1rem - var(--cx-input-label-font-size-medium)
-          ) /
-          2
-      )
-    );
-  }
-
-  .textarea--large .form-control__label {
-    transform: translateY(
-      calc(
-        (
-            var(--cx-input-height-large) +
-              1rem - var(--cx-input-label-font-size-large)
-          ) /
-          2
-      )
-    );
-  }
-
-  /* When focused or not empty, transform label to top
-    Instead of 0, use var(--cx-spacing-2x-small) to have a distance from top
-  */
-  .form-control--has-label .textarea--focused .form-control__label,
-  .form-control--has-label .textarea--placeholder-visible .form-control__label,
-  .form-control--has-label
-    .textarea:not(.textarea--empty)
-    .form-control__label {
-    transform: translateY(
-      calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small))
-    ); /* distance from top */
-  }
-`;
-var H = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (t, o, i, l) => {
-  for (var s = l > 1 ? void 0 : l ? S(o, i) : o, h = t.length - 1, u; h >= 0; h--)
+const H = C`:host{display:block}:host([data-user-invalid])::part(base){border-color:var(--cx-input-invalid-border-color)}:host([data-user-invalid]:focus-within)::part(base){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.textarea{--textarea-background-color:var(--cx-input-background-color);width:100%;font-family:var(--cx-input-font-family);font-weight:var(--cx-input-font-weight);line-height:var(--cx-line-height-large);letter-spacing:var(--cx-input-letter-spacing);vertical-align:middle;transition:var(--cx-transition-fast) color, var(--cx-transition-fast) border, var(--cx-transition-fast) box-shadow, var(--cx-transition-fast) background-color;cursor:text;align-items:center;display:flex;position:relative}.textarea--standard{background-color:var(--textarea-background-color);border:solid var(--cx-input-border-width) var(--cx-input-border-color)}.textarea--standard:hover:not(.textarea--disabled){--textarea-background-color:var(--cx-input-background-color-hover);border-color:var(--cx-input-border-color-hover)}.textarea--standard:hover:not(.textarea--disabled) .textarea__control{color:var(--cx-input-color-hover)}.textarea--standard.textarea--focused:not(.textarea--disabled){--textarea-background-color:var(--cx-input-background-color-focus);border-color:var(--cx-input-border-color-focus);color:var(--cx-input-color-focus)}.textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--cx-input-color-focus)}.textarea--standard.textarea--disabled{--textarea-background-color:var(--cx-input-background-color-disabled);border-color:var(--cx-input-border-color-disabled);opacity:.5;cursor:default}.textarea--standard.textarea--disabled .textarea__control{color:var(--cx-input-color-disabled)}.textarea--standard.textarea--disabled .textarea__control::placeholder{color:var(--cx-input-placeholder-color-disabled)}.textarea--filled{--textarea-background-color:var(--cx-input-filled-background-color);background-color:var(--textarea-background-color);color:var(--cx-input-color);border:none}.textarea--filled:hover:not(.textarea--disabled){--textarea-background-color:var(--cx-input-filled-background-color-hover)}.textarea--filled.textarea--focused:not(.textarea--disabled){--textarea-background-color:var(--cx-input-filled-background-color-focus);outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.textarea--filled.textarea--disabled{--textarea-background-color:var(--cx-input-filled-background-color-disabled);opacity:.5;cursor:default}.textarea__control{font:inherit;color:var(--cx-input-color);box-shadow:none;cursor:inherit;-webkit-appearance:none;line-height:1.4;line-height:var(--cx-line-height-medium);padding-top:var(--cx-spacing-x-small);padding-bottom:var(--cx-spacing-x-small);background:0 0;border:none;flex:auto;padding-left:0;padding-right:0}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--cx-input-placeholder-color);-webkit-user-select:none;user-select:none}.textarea__control:focus{outline:none}.textarea--small{border-radius:var(--cx-input-border-radius-small);font-size:var(--cx-input-font-size-small)}.textarea--small .textarea-container{padding-left:var(--cx-input-spacing-small);padding-right:var(--cx-input-spacing-small)}.textarea--medium{border-radius:var(--cx-input-border-radius-medium);font-size:var(--cx-input-font-size-small)}.textarea--medium .textarea-container{padding-left:var(--cx-input-spacing-medium);padding-right:var(--cx-input-spacing-medium)}.textarea--large{border-radius:var(--cx-input-border-radius-large);font-size:var(--cx-input-font-size-small)}.textarea--large .textarea-container{padding-left:var(--cx-input-spacing-large);padding-right:var(--cx-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{resize:none;height:auto;overflow-y:hidden}.textarea-container{flex-direction:column;width:100%;height:100%;display:inline-flex;position:relative}.form-control__label{pointer-events:none;background-color:var(--textarea-background-color);width:fit-content;line-height:1;-webkit-transition:transform .2s ease-in-out;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;position:relative}.form-control--has-label .textarea--small .form-control__label{font-size:var(--cx-input-label-font-size-small);margin:0}.form-control--has-label .textarea--medium .form-control__label{font-size:var(--cx-input-label-font-size-medium);margin:0}.form-control--has-label .textarea--large .form-control__label{font-size:var(--cx-input-label-font-size-large);margin:0}.textarea__character-count{color:var(--cx-input-suffix-color,var(--cx-input-color));font-size:var(--cx-input-font-size);font-weight:var(--cx-input-font-weight);letter-spacing:var(--cx-input-letter-spacing);line-height:var(--cx-input-line-height);padding-inline-end:var(--cx-spacing-x-small);padding-top:var(--cx-spacing-2x-small);white-space:nowrap;justify-content:flex-end;align-items:center;display:flex}.textarea--small .form-control__label{transform:translateY(calc(( var(--cx-input-height-small) + 1.25rem - var(--cx-input-label-font-size-small) ) / 2))}.textarea--medium .form-control__label{transform:translateY(calc(( var(--cx-input-height-medium) + 1rem - var(--cx-input-label-font-size-medium) ) / 2))}.textarea--large .form-control__label{transform:translateY(calc(( var(--cx-input-height-large) + 1rem - var(--cx-input-label-font-size-large) ) / 2))}.form-control--has-label .textarea--focused .form-control__label,.form-control--has-label .textarea--placeholder-visible .form-control__label,.form-control--has-label .textarea:not(.textarea--empty) .form-control__label{transform:translateY(calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small)))}`;
+var F = Object.defineProperty, T = Object.getOwnPropertyDescriptor, r = (t, o, i, l) => {
+  for (var s = l > 1 ? void 0 : l ? T(o, i) : o, h = t.length - 1, u; h >= 0; h--)
     (u = t[h]) && (s = (l ? u(o, i, s) : u(s)) || s);
-  return l && s && H(o, i, s), s;
+  return l && s && F(o, i, s), s;
 };
 let e = class extends m {
   constructor() {
@@ -435,22 +148,14 @@ let e = class extends m {
   }
   render() {
     const t = this.hasSlotController.test("label"), o = this.hasSlotController.test("help-text"), i = this.label ? !0 : !!t, l = this.helpText ? !0 : !!o, s = this.placeholder && this.value.length === 0;
-    return p`
-      <div
-        part="form-control"
-        class=${x({
+    return p`<div part="form-control" class=${x({
       "form-control": !0,
       "form-control--has-help-text": l,
       "form-control--has-label": i,
       "form-control--large": this.size === "large",
       "form-control--medium": this.size === "medium",
       "form-control--small": this.size === "small"
-    })}
-      >
-        <div part="form-control-input" class="form-control-input">
-          <div
-            part="base"
-            class=${x({
+    })}><div part="form-control-input" class="form-control-input"><div part="base" class=${x({
       textarea: !0,
       "textarea--disabled": this.disabled,
       "textarea--empty": !this.value,
@@ -464,68 +169,14 @@ let e = class extends m {
       "textarea--resize-vertical": this.resize === "vertical",
       "textarea--small": this.size === "small",
       "textarea--standard": !this.filled
-    })}
-          >
-            <span class="textarea-container">
-              <label
-                part="form-control-label"
-                class="form-control__label"
-                for="input"
-                aria-hidden=${i ? "false" : "true"}
-              ><slot name="label">${this.label}</slot></label>
-              <textarea
-                part="textarea"
-                id="input"
-                class="textarea__control"
-                title=${this.title}
-                name=${n(this.name)}
-                .value=${k(this.value)}
-                ?disabled=${this.disabled}
-                ?readonly=${this.readonly}
-                ?required=${this.required}
-                placeholder=${n(this.placeholder)}
-                rows=${n(this.rows === c.Max ? void 0 : this.rows)}
-                minlength=${n(this.minlength)}
-                maxlength=${n(this.maxlength)}
-                autocapitalize=${n(this.autoCapitalize)}
-                autocorrect=${n(this.autoCorrect)}
-                ?autofocus=${this.autoFocus}
-                spellcheck=${n(this.spellCheck)}
-                enterkeyhint=${n(this.enterKeyHint)}
-                inputmode=${n(this.inputMode)}
-                aria-describedby="help-text"
-                @change=${this.handleChange}
-                @input=${this.handleInput}
-                @invalid=${this.handleInvalid}
-                @focus=${this.handleFocus}
-                @blur=${this.handleBlur}
-              ></textarea>
-            </span>
-          </div>
-          ${$(this.showLength, () => p`
-              <div part="character-count" class="textarea__character-count">
-                ${[
+    })}><span class="textarea-container"><label part="form-control-label" class="form-control__label" for="input" aria-hidden=${i ? "false" : "true"}><slot name="label">${this.label}</slot></label><textarea part="textarea" id="input" class="textarea__control" title=${this.title} name=${n(this.name)} .value=${k(this.value)} ?disabled=${this.disabled} ?readonly=${this.readonly} ?required=${this.required} placeholder=${n(this.placeholder)} rows=${n(this.rows === c.Max ? void 0 : this.rows)} minlength=${n(this.minlength)} maxlength=${n(this.maxlength)} autocapitalize=${n(this.autoCapitalize)} autocorrect=${n(this.autoCorrect)} ?autofocus=${this.autoFocus} spellcheck=${n(this.spellCheck)} enterkeyhint=${n(this.enterKeyHint)} inputmode=${n(this.inputMode)} aria-describedby="help-text" @change=${this.handleChange} @input=${this.handleInput} @invalid=${this.handleInvalid} @focus=${this.handleFocus} @blur=${this.handleBlur}></textarea></span></div>${$(this.showLength, () => p`<div part="character-count" class="textarea__character-count">${[
       this.minlength && `${this.minlength} /`,
       this.value.length,
       this.maxlength && `/ ${this.maxlength}`
-    ].filter(Boolean).join(" ")}
-              </div>
-            `)}
-        </div>
-
-        <div
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${l ? "false" : "true"}
-        >
-          <slot name="help-text">${this.helpText}</slot>
-        </div>
-      </div>
-    `;
+    ].filter(Boolean).join(" ")}</div>`)}</div><div part="form-control-help-text" id="help-text" class="form-control__help-text" aria-hidden=${l ? "false" : "true"}><slot name="help-text">${this.helpText}</slot></div></div>`;
   }
 };
-e.styles = [b, g, F];
+e.styles = [b, g, H];
 r([
   f(".textarea__control")
 ], e.prototype, "input", 2);
@@ -533,7 +184,7 @@ r([
   f(".form-control")
 ], e.prototype, "formControlRoot", 2);
 r([
-  C()
+  w()
 ], e.prototype, "hasFocus", 2);
 r([
   a()

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 { c as d } from "../chunks/component.styles.CRO4Odto.js";
 import { T as g, f as n } from "../chunks/string.B_rEG27K.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.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,5 +1,5 @@
-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";
@@ -10,69 +10,13 @@ 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,5 +1,5 @@
 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.BUW7B9hr.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.OXvhEOjS.js";
+import { C as j } from "../chunks/tree.q7xRVYyh.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.BUW7B9hr.js";
 import "../chunks/math.DqTA6ya4.js";
 import "../chunks/watch.BCJD77bD.js";
-import { a as y, b, s as f, c as x } from "../chunks/tree.OXvhEOjS.js";
+import { a as y, b, s as f, c as x } from "../chunks/tree.q7xRVYyh.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";