@orangelogic/design-system 2.113.0 → 2.115.0

package/library/components/audio.js

@@ -1,45 +1,27 @@
-import { r as m, R as y } from "../chunks/resizable-component.styles.DpK0TTP5.js";
+import { r as f, R as y } from "../chunks/resizable-component.styles.DpK0TTP5.js";
 import { c as v } from "../chunks/component.styles.CRO4Odto.js";
-import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as S } from "../chunks/i18n.C21qyGi6.js";
-import { w as f } from "../chunks/watch.CThbualB.js";
-import { i as w, x as p } from "../chunks/lit-element.jLBm65_O.js";
-import { n as c } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { r as u } from "../chunks/state.CSDxrqLd.js";
-import { r as x } from "../chunks/query-async.CTgXGyQ5.js";
+import { U as u, g, f as x, D as w } from "../chunks/time.BSmpFe2G.js";
+import { c as _ } from "../chunks/custom-element.L4WJXn1j.js";
+import { L as S } from "../chunks/i18n.CH-wak_P.js";
+import { w as m } from "../chunks/watch.CThbualB.js";
+import { e as b, b as P } from "../chunks/waveform.1U9U_0rd.js";
+import { i as $, b as z, x as h } from "../chunks/lit-element.jLBm65_O.js";
+import { n } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { r as s } from "../chunks/state.CSDxrqLd.js";
+import { e as E } from "../chunks/query.BBf1UFkC.js";
 import { e as C } from "../chunks/class-map.BiVq-cVR.js";
 import { n as d } from "../chunks/when.Dr1es41R.js";
-import { C as b } from "../chunks/icon-button.DxkJ-cp-.js";
-import { C as W } from "../chunks/typography.DJC_UXgs.js";
-const _ = w`:host{background-color:var(--background-color,var(--cx-color-neutral-0));border-radius:var(--border-radius,0px);border:var(--border,0px);box-sizing:border-box;color:var(--text-color,var(--cx-color-neutral));height:var(--height,auto);width:var(--width,100%);border-style:solid;display:block;position:relative}.audio{border-radius:inherit;gap:var(--cx-spacing-x-small,4px);height:100%;padding:var(--cx-spacing-small,8px);flex-direction:column;justify-content:center;display:flex;overflow:hidden}.audio--empty{height:var(--height,200px);min-height:var(--min-height,100%);padding:0}.audio--empty:before{background-color:var(--cx-color-neutral-1000);color:var(--cx-color-neutral-0);content:attr(data-empty-label);font-family:var(--cx-font-sans);font-size:clamp(var(--cx-font-size-x-small), 4cqw, var(--cx-font-size-large));font-weight:var(--cx-font-weight-semibold);text-align:center;height:100%;text-shadow:.05em .05em .1em var(--cx-color-neutral-1000);justify-content:center;align-items:center;width:100%;line-height:1;display:flex}.audio__play-button{--cx-input-border-width:2px;--cx-input-border-color:var(--text-color,var(--cx-color-neutral))}.audio__play-button::part(base){width:50px;height:50px;color:var(--text-color,var(--cx-color-neutral))!important}.audio__player{align-items:center;gap:var(--cx-spacing-small,8px);display:flex}.audio__waveform{flex:1;min-width:0;overflow:hidden}.audio__footer{font-size:var(--cx-font-size-x-small,11px);color:var(--text-color,var(--cx-color-neutral));flex-direction:column;gap:0;padding-left:2px;display:flex}.audio__time{color:var(--text-color,var(--cx-color-neutral));font-variant-numeric:tabular-nums}.audio__filename{opacity:.75;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}`;
-var P = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (e, t, r, o) => {
-  for (var i = o > 1 ? void 0 : o ? z(t, r) : t, s = e.length - 1, l; s >= 0; s--)
-    (l = e[s]) && (i = (o ? l(t, r, i) : l(i)) || i);
-  return o && i && P(t, r, i), i;
+import { C as k } from "../chunks/icon-button.CQiBjznj.js";
+import { C as T } from "../chunks/typography.DJC_UXgs.js";
+const A = $`audio{display:none}:host{background-color:var(--background-color,var(--cx-color-neutral-0));border-radius:var(--border-radius,0px);border:var(--border,0px);box-sizing:border-box;color:var(--text-color,var(--cx-color-neutral));height:var(--height,auto);width:var(--width,100%);border-style:solid;display:block;position:relative}.audio{border-radius:inherit;gap:var(--cx-spacing-x-small,4px);height:100%;padding:var(--cx-spacing-small,8px);flex-direction:column;justify-content:center;display:flex;overflow:hidden}.audio--empty{height:var(--height,200px);min-height:var(--min-height,100%);padding:0}.audio--empty:before{background-color:var(--cx-color-neutral-1000);color:var(--cx-color-neutral-0);content:attr(data-empty-label);font-family:var(--cx-font-sans);font-size:clamp(var(--cx-font-size-x-small), 4cqw, var(--cx-font-size-large));font-weight:var(--cx-font-weight-semibold);text-align:center;height:100%;text-shadow:.05em .05em .1em var(--cx-color-neutral-1000);justify-content:center;align-items:center;width:100%;line-height:1;display:flex}.audio__play-button{--cx-input-border-width:2px;--cx-input-border-color:var(--text-color,var(--cx-color-neutral))}.audio__play-button::part(base){width:50px;height:50px;color:var(--text-color,var(--cx-color-neutral))!important}.audio__player{align-items:center;gap:var(--cx-spacing-small,8px);height:148px;display:flex}.audio__waveform{flex:1;min-width:0;overflow:hidden}.audio__waveform-svg{cursor:pointer;flex:1;width:100%;min-width:0;height:100%;display:block;overflow:hidden}.audio__waveform-wave{fill:var(--waves-color,var(--cx-color-primary))}.audio__waveform-played{fill:var(--played-color,var(--cx-color-primary-700,var(--cx-color-primary)))}.audio__waveform-playhead{fill:var(--playhead-color,var(--cx-color-neutral-0));opacity:.9}.audio__footer{font-size:var(--cx-font-size-x-small,11px);color:var(--text-color,var(--cx-color-neutral));flex-direction:column;gap:0;padding-left:2px;display:flex}.audio__time{color:var(--text-color,var(--cx-color-neutral));font-variant-numeric:tabular-nums}.audio__filename{opacity:.75;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}`;
+var B = Object.defineProperty, W = Object.getOwnPropertyDescriptor, i = (t, a, o, r) => {
+  for (var l = r > 1 ? void 0 : r ? W(a, o) : a, c = t.length - 1, p; c >= 0; c--)
+    (p = t[c]) && (l = (r ? p(a, o, l) : p(l)) || l);
+  return r && l && B(a, o, l), l;
 };
-function $(e) {
-  const t = "light-dark(";
-  if (!e.startsWith(t) || !e.endsWith(")"))
-    return null;
-  const r = e.slice(t.length, -1);
-  let o = 0, i = -1;
-  for (let h = 0; h < r.length; h++)
-    if (r[h] === "(")
-      o++;
-    else if (r[h] === ")")
-      o--;
-    else if (r[h] === "," && o === 0) {
-      i = h;
-      break;
-    }
-  if (i === -1)
-    return null;
-  const s = r.slice(0, i).trim(), l = r.slice(i + 1).trim();
-  return !CSS.supports("color", s) || !CSS.supports("color", l) ? null : [s, l];
-}
-let a = class extends y {
+let e = class extends y {
   constructor() {
-    super(), this.localize = new S(this), this.waveSurfer = null, this.srcLoadVersion = 0, this.src = "", this.name = "", this.autoplay = !1, this.loop = !1, this.waveColor = ["", ""], this.isPlaying = !1, this.isLoaded = !1, this.isError = !1, this.currentTimeSeconds = 0, this.durationSeconds = 0, this.onWaveSurferReady = this.onWaveSurferReady.bind(this), this.onWaveSurferPlay = this.onWaveSurferPlay.bind(this), this.onWaveSurferPause = this.onWaveSurferPause.bind(this), this.onWaveSurferTimeUpdate = this.onWaveSurferTimeUpdate.bind(this), this.onWaveSurferFinish = this.onWaveSurferFinish.bind(this), this.onWaveSurferError = this.onWaveSurferError.bind(this);
+    super(...arguments), this.localize = new S(this), this.srcLoadVersion = 0, this.extractWaveformPeaks = b, this.src = "", this.name = "", this.autoplay = !1, this.loop = !1, this.waveformSrc = "", this.isPlaying = !1, this.isLoaded = !1, this.isError = !1, this.currentTimeSeconds = 0, this.durationSeconds = 0, this.waveformPath = "", this.waveformViewBoxWidth = 1e3, this.playedFraction = 0, this.audioSrc = "";
   }
   runConnectedCallback() {
     this.hasUpdated && this.requestUpdate("src");
@@ -50,188 +32,155 @@ let a = class extends y {
   async handleSrcChange() {
     await this.applySrc(this.src);
   }
-  async applySrc(e) {
-    const t = ++this.srcLoadVersion;
-    if (this.isLoaded = !1, this.isPlaying = !1, !e) {
+  async applySrc(t) {
+    const a = ++this.srcLoadVersion;
+    if (this.isLoaded = !1, this.isPlaying = !1, !this.waveformSrc) {
       this.cleanUp();
       return;
     }
-    await this.waveformContainerAsync, !(t !== this.srcLoadVersion || !this.isConnected) && await this.setupWaveSurfer(e, t);
+    await this.setupPngWaveform(t, a);
   }
-  async handleWaveColorThemeChange() {
-    this.src && this.waveSurfer && (await this.updateComplete, this.waveSurfer.setOptions(this.setupColors()));
+  updated(t) {
+    super.updated(t), (t.has("width") || t.has("height") || t.has("resizeSize")) && this.handleSizeChange();
   }
-  updated(e) {
-    super.updated(e), (e.has("width") || e.has("height") || e.has("resizeSize")) && this.handleSizeChange();
+  cleanUp() {
+    this.audioEl?.pause(), this.audioSrc = "", this.waveformPath = "", this.waveformViewBoxWidth = 1e3, this.playedFraction = 0, this.isLoaded = !1, this.isPlaying = !1, this.currentTimeSeconds = 0, this.durationSeconds = 0;
   }
-  onWaveSurferReady() {
-    this.isLoaded = !0, this.durationSeconds = this.waveSurfer.getDuration();
+  async setupPngWaveform(t, a) {
+    this.cleanUp();
+    const o = await this.extractWaveformPeaks(this.waveformSrc);
+    if (a !== this.srcLoadVersion || !this.isConnected)
+      return;
+    if (!o) {
+      this.isError = !0, this.emit("cx-error");
+      return;
+    }
+    const r = o.peaks.length;
+    this.waveformViewBoxWidth = r, this.waveformPath = P(o.peaks, r, 200), t && (this.audioSrc = t), this.isLoaded = !0, this.autoplay && t && (await this.updateComplete, this.audioEl?.play());
   }
-  onWaveSurferPlay() {
+  handleAudioPlay() {
     this.isPlaying = !0, this.emit("cx-play");
   }
-  onWaveSurferPause() {
+  handleAudioPause() {
     this.isPlaying = !1, this.emit("cx-pause");
   }
-  onWaveSurferTimeUpdate(e) {
-    this.currentTimeSeconds = e, this.emit("cx-time-update", {
-      detail: {
-        time: e
-      }
-    });
+  handleAudioTimeUpdate() {
+    if (!this.audioEl)
+      return;
+    const t = this.audioEl.duration ? this.audioEl.currentTime / this.audioEl.duration : 0;
+    this.playedFraction = t, this.style.setProperty("--played-fraction", String(t)), this.currentTimeSeconds = this.audioEl.currentTime, this.emit("cx-time-update", { detail: { time: this.audioEl.currentTime } });
+  }
+  handleAudioDurationChange() {
+    this.durationSeconds = this.audioEl?.duration || 0;
   }
-  onWaveSurferFinish() {
+  handleAudioEnded() {
     this.isPlaying = !1, this.emit("cx-ended");
   }
-  onWaveSurferError() {
-    this.isError = !0, this.emit("cx-error");
-  }
-  resolveColorValue(e) {
-    if (!e.startsWith("var("))
-      return e;
-    const t = e.match(/var\(\s*(--[\w-]+)/)?.[1];
-    return t && getComputedStyle(this).getPropertyValue(t).trim() || e;
-  }
-  computeCursorColor(e) {
-    const t = document.createElement("canvas");
-    t.width = 1, t.height = 1;
-    const r = t.getContext("2d");
-    if (!r)
-      return e;
-    r.fillStyle = e, r.fillRect(0, 0, 1, 1);
-    const [o, i, s] = r.getImageData(0, 0, 1, 1).data;
-    return (0.299 * o + 0.587 * i + 0.114 * s) / 255 > 0.5 ? `rgb(${Math.round(o * 0.5)}, ${Math.round(i * 0.5)}, ${Math.round(s * 0.5)})` : `rgb(${Math.round(o + (255 - o) * 0.5)}, ${Math.round(i + (255 - i) * 0.5)}, ${Math.round(s + (255 - s) * 0.5)})`;
-  }
-  setupColors() {
-    const t = getComputedStyle(this).getPropertyValue("--cx-color-primary").trim(), r = (this.theme === "dark" ? this.waveColor[1] : this.waveColor[0]) || t, o = this.resolveColorValue(r), i = this.resolveColorValue(
-      this.theme === "dark" ? this.waveColor[1] : this.waveColor[0]
-    ), s = this.computeCursorColor(o);
-    return {
-      cursorColor: s,
-      progressColor: s,
-      waveColor: i
-    };
-  }
-  async setupWaveSurfer(e, t = this.srcLoadVersion) {
-    this.cleanUp();
-    const r = await this.waveformContainerAsync;
-    if (t !== this.srcLoadVersion || !r || !e || !this.isConnected)
-      return;
-    const { default: o } = await import("../chunks/wavesurfer.esm.Cwi1pz64.js");
-    t !== this.srcLoadVersion || !this.isConnected || (this.waveSurfer = o.create({
-      barGap: 1,
-      barRadius: 2,
-      barWidth: 2,
-      container: r,
-      height: "auto",
-      normalize: !0,
-      url: e,
-      ...this.setupColors()
-    }), this.attachWaveSurferEvents(), this.autoplay && this.waveSurfer.play());
-  }
-  attachWaveSurferEvents() {
-    this.waveSurfer && (this.waveSurfer.on("ready", this.onWaveSurferReady), this.waveSurfer.on("play", this.onWaveSurferPlay), this.waveSurfer.on("pause", this.onWaveSurferPause), this.waveSurfer.on("timeupdate", this.onWaveSurferTimeUpdate), this.waveSurfer.on("finish", this.onWaveSurferFinish), this.waveSurfer.on("error", this.onWaveSurferError));
-  }
-  cleanUp() {
-    this.waveSurfer && (this.waveSurfer.destroy(), this.waveSurfer = null), this.isLoaded = !1, this.isPlaying = !1, this.currentTimeSeconds = 0, this.durationSeconds = 0;
+  handleAudioError() {
+    this.audioSrc && (this.isError = !0, this.emit("cx-error"));
   }
   handleSizeChange() {
-    const e = this.isResizing ? `${this.resizeSize.width}px` : this.width, t = this.isResizing ? `${this.resizeSize.height}px` : this.height;
-    this.width || this.isResizing ? this.style.setProperty("--width", e) : this.style.removeProperty("--width"), this.height || this.isResizing ? this.style.setProperty("--height", t) : this.style.removeProperty("--height");
+    const t = this.isResizing ? `${this.resizeSize.width}px` : this.width, a = this.isResizing ? `${this.resizeSize.height}px` : this.height;
+    this.width || this.isResizing ? this.style.setProperty("--width", t) : this.style.removeProperty("--width"), this.height || this.isResizing ? this.style.setProperty("--height", a) : this.style.removeProperty("--height");
   }
   /** Starts audio playback. */
   play() {
-    this.waveSurfer?.play();
+    this.audioEl?.play();
   }
   /** Pauses audio playback. */
   pause() {
-    this.waveSurfer?.pause();
+    this.audioEl?.pause();
   }
   /** Toggles between play and pause. */
   togglePlay() {
     this.isPlaying ? this.pause() : this.play();
   }
-  formatTime(e) {
-    const t = Math.floor(e / 60), r = Math.floor(e % 60);
-    return `${t}:${r.toString().padStart(2, "0")}`;
+  formatTime(t) {
+    const o = this.durationSeconds >= 3600 ? u.HourMinuteSecond : u.MinuteSecond, r = g(t * 1e3, o);
+    return x(r, w.Digital);
+  }
+  handleWaveformClick(t) {
+    if (t.stopPropagation(), !this.audioEl || !this.durationSeconds)
+      return;
+    const o = t.currentTarget.getBoundingClientRect(), r = Math.max(0, Math.min(1, (t.clientX - o.left) / o.width));
+    this.audioEl.currentTime = r * this.durationSeconds;
   }
-  handlePlayButtonKeyDown(e) {
-    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.togglePlay());
+  handlePlayButtonKeyDown(t) {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.togglePlay());
   }
   render() {
-    const e = !this.src, t = this.formatTime(this.currentTimeSeconds), r = this.formatTime(this.durationSeconds);
-    return p`<div part="base" class=${C({ audio: !0, "audio--empty": e })} data-empty-label=${this.localize.term("emptyAudio")} @click=${this.startResizing}>${d(
-      !e,
-      () => p`<div part="player" class="audio__player"><cx-icon-button part="play-button" class="audio__play-button" aria-pressed=${String(this.isPlaying)} circle label=${this.localize.term(this.isPlaying ? "pause" : "play")} name=${this.isPlaying ? "pause" : "play_arrow"} variant="filled" outline @click=${this.togglePlay} @keydown=${this.handlePlayButtonKeyDown}></cx-icon-button><div part="waveform" class="audio__waveform"></div></div><div part="footer" class="audio__footer"><cx-typography part="time" variant="small" class="audio__time">${t} / ${r}</cx-typography>${d(
+    const t = !this.src && !this.waveformSrc, a = this.formatTime(this.currentTimeSeconds), o = this.formatTime(this.durationSeconds);
+    return h`<audio src=${this.audioSrc} ?loop=${this.loop} @play=${this.handleAudioPlay} @pause=${this.handleAudioPause} @timeupdate=${this.handleAudioTimeUpdate} @durationchange=${this.handleAudioDurationChange} @ended=${this.handleAudioEnded} @error=${this.handleAudioError}></audio><div part="base" class=${C({ audio: !0, "audio--empty": t })} data-empty-label=${this.localize.term("emptyAudio")} @click=${this.startResizing}>${d(
+      !t,
+      () => h`<div part="player" class="audio__player"><cx-icon-button part="play-button" class="audio__play-button" aria-pressed=${String(this.isPlaying)} circle label=${this.localize.term(this.isPlaying ? "pause" : "play")} name=${this.isPlaying ? "pause" : "play_arrow"} variant="filled" outline @click=${this.togglePlay} @keydown=${this.handlePlayButtonKeyDown}></cx-icon-button>${d(
+        this.waveformPath,
+        () => z`<svg class="audio__waveform-svg" part="waveform-svg" viewBox="0 0 ${this.waveformViewBoxWidth} 200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" @click=${this.handleWaveformClick}><path class="audio__waveform-wave" d=${this.waveformPath} /><svg x="0" y="0" width=${String(Math.round(this.playedFraction * this.waveformViewBoxWidth))} height="200" overflow="hidden"><path class="audio__waveform-played" d=${this.waveformPath} /></svg><rect class="audio__waveform-playhead" x=${String(Math.max(0, Math.round(this.playedFraction * this.waveformViewBoxWidth) - 1))} y="0" width="2" height="200"/></svg>`,
+        () => h`<div part="waveform" class="audio__waveform"></div>`
+      )}</div><div part="footer" class="audio__footer"><cx-typography part="time" variant="small" class="audio__time">${a} / ${o}</cx-typography>${d(
         this.name,
-        () => p`<cx-typography part="filename" class="audio__filename">${this.name}</cx-typography>`
+        () => h`<cx-typography part="filename" class="audio__filename">${this.name}</cx-typography>`
       )}</div>`
     )}</div>${d(this.resizable && this.isResizeActive, () => this.renderResizer())}
     `;
   }
 };
-a.styles = [v, m, _];
-a.dependencies = {
-  "cx-icon-button": b,
-  "cx-typography": W
+e.styles = [v, f, A];
+e.dependencies = {
+  "cx-icon-button": k,
+  "cx-typography": T
 };
-n([
-  x(".audio__waveform")
-], a.prototype, "waveformContainerAsync", 2);
-n([
-  c({ reflect: !0, type: String })
-], a.prototype, "src", 2);
-n([
-  c({ reflect: !0, type: String })
-], a.prototype, "name", 2);
-n([
-  c({ reflect: !0, type: Boolean })
-], a.prototype, "autoplay", 2);
-n([
-  c({ reflect: !0, type: Boolean })
-], a.prototype, "loop", 2);
-n([
-  c({
-    attribute: "wave-color",
-    converter: {
-      fromAttribute(e) {
-        if (!e)
-          return ["", ""];
-        const t = $(e);
-        return t || (CSS.supports("color", e) ? [e, e] : ["", ""]);
-      },
-      toAttribute([e, t]) {
-        return e === t ? e : `light-dark(${e}, ${t})`;
-      }
-    },
-    reflect: !0
-  })
-], a.prototype, "waveColor", 2);
-n([
-  u()
-], a.prototype, "isPlaying", 2);
-n([
-  u()
-], a.prototype, "isLoaded", 2);
-n([
-  u()
-], a.prototype, "isError", 2);
-n([
-  u()
-], a.prototype, "currentTimeSeconds", 2);
-n([
-  u()
-], a.prototype, "durationSeconds", 2);
-n([
-  f("src")
-], a.prototype, "handleSrcChange", 1);
-n([
-  f("theme", { waitUntilFirstUpdate: !0 }),
-  f("waveColor", { waitUntilFirstUpdate: !0 })
-], a.prototype, "handleWaveColorThemeChange", 1);
-a = n([
-  g("cx-audio")
-], a);
+i([
+  E("audio")
+], e.prototype, "audioEl", 2);
+i([
+  n({ reflect: !0, type: String })
+], e.prototype, "src", 2);
+i([
+  n({ reflect: !0, type: String })
+], e.prototype, "name", 2);
+i([
+  n({ reflect: !0, type: Boolean })
+], e.prototype, "autoplay", 2);
+i([
+  n({ reflect: !0, type: Boolean })
+], e.prototype, "loop", 2);
+i([
+  n({ attribute: "waveform-src", reflect: !0, type: String })
+], e.prototype, "waveformSrc", 2);
+i([
+  s()
+], e.prototype, "isPlaying", 2);
+i([
+  s()
+], e.prototype, "isLoaded", 2);
+i([
+  s()
+], e.prototype, "isError", 2);
+i([
+  s()
+], e.prototype, "currentTimeSeconds", 2);
+i([
+  s()
+], e.prototype, "durationSeconds", 2);
+i([
+  s()
+], e.prototype, "waveformPath", 2);
+i([
+  s()
+], e.prototype, "waveformViewBoxWidth", 2);
+i([
+  s()
+], e.prototype, "playedFraction", 2);
+i([
+  s()
+], e.prototype, "audioSrc", 2);
+i([
+  m("waveformSrc", { waitUntilFirstUpdate: !0 }),
+  m("src")
+], e.prototype, "handleSrcChange", 1);
+e = i([
+  _("cx-audio")
+], e);
 export {
-  a as default
+  e as default
 };

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

@@ -1,9 +1,9 @@
-import { C as n } from "../chunks/input.DdeXWD_F.js";
+import { C as n } from "../chunks/input.CH4lKxPM.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.CRO4Odto.js";
 import { c as d } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as x } from "../chunks/i18n.C21qyGi6.js";
+import { L as x } from "../chunks/i18n.CH-wak_P.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}`;

package/library/components/breadcrumb.js

@@ -1,7 +1,7 @@
 import { n as p, C as h } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as d } from "../chunks/component.styles.CRO4Odto.js";
 import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as u } from "../chunks/i18n.C21qyGi6.js";
+import { L as u } from "../chunks/i18n.CH-wak_P.js";
 import { i as f, x as b } from "../chunks/lit-element.jLBm65_O.js";
 import { e as c } from "../chunks/query.BBf1UFkC.js";
 import { C as g } from "../chunks/icon.DnBh6-56.js";

package/library/components/button.js

@@ -1,9 +1,9 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C as h } from "../chunks/button.DIvU_uFU.js";
+import { C as h } from "../chunks/button.DwJEeW2t.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/form.B-5nQJva.js";
-import "../chunks/i18n.C21qyGi6.js";
+import "../chunks/i18n.CH-wak_P.js";
 import "../chunks/slot.j5oheLJC.js";
 import "../chunks/watch.CThbualB.js";
 import "../chunks/state.CSDxrqLd.js";

package/library/components/color-picker.js

@@ -5,7 +5,7 @@ import { d as C } from "../chunks/debounce.CIEhztrj.js";
 import { d as z } from "../chunks/default-value.COZopaet.js";
 import { d as y } from "../chunks/drag.DXEXVXPv.js";
 import { F as D } from "../chunks/form.B-5nQJva.js";
-import { L as I } from "../chunks/i18n.C21qyGi6.js";
+import { L as I } from "../chunks/i18n.CH-wak_P.js";
 import { c as u } from "../chunks/math.DqTA6ya4.js";
 import { w as k } from "../chunks/watch.CThbualB.js";
 import { i as E, x as h } from "../chunks/lit-element.jLBm65_O.js";
@@ -16,11 +16,11 @@ import { e as b } from "../chunks/class-map.BiVq-cVR.js";
 import { o as x } from "../chunks/if-defined.BRoBj_Rp.js";
 import { o as f } from "../chunks/style-map.llVFPd__.js";
 import { n as d } from "../chunks/when.Dr1es41R.js";
-import { C as M } from "../chunks/button.DIvU_uFU.js";
+import { C as M } from "../chunks/button.DwJEeW2t.js";
 import O from "./button-group.js";
 import A from "./dropdown.js";
 import { C as B } from "../chunks/icon.DnBh6-56.js";
-import { C as P } from "../chunks/input.DdeXWD_F.js";
+import { C as P } from "../chunks/input.CH4lKxPM.js";
 import L from "./spinner.js";
 import N from "./visually-hidden.js";
 import { T as w } from "../chunks/index.C1chwzNp.js";

package/library/components/color-swatch-group.js

@@ -1,14 +1,14 @@
 import "./space.js";
-import "../chunks/table.CP3oGDY1.js";
+import "../chunks/table.BvbReIZh.js";
 import "../chunks/typography.DJC_UXgs.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/color-swatch.BoUZGGs4.js";
+import "../chunks/color-swatch.DVzEaNeL.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C as w } from "../chunks/color-swatch-group.DV5uB8OC.js";
+import { C as w } from "../chunks/color-swatch-group.DjjSIHSV.js";
 import "../chunks/content-builder.OsUmm8Wu.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.CIEhztrj.js";
-import "../chunks/i18n.C21qyGi6.js";
+import "../chunks/i18n.CH-wak_P.js";
 import "../chunks/watch.CThbualB.js";
 import "../chunks/responsive.C8NCkfCG.js";
 import "../chunks/lit-element.jLBm65_O.js";

package/library/components/color-swatch.js

@@ -5,11 +5,11 @@ import "./space.js";
 import "../chunks/typography.DJC_UXgs.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C as q } from "../chunks/color-swatch.BoUZGGs4.js";
+import { C as q } from "../chunks/color-swatch.DVzEaNeL.js";
 import "../chunks/color.LzSGBy7o.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.CIEhztrj.js";
-import "../chunks/i18n.C21qyGi6.js";
+import "../chunks/i18n.CH-wak_P.js";
 import "../chunks/watch.CThbualB.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";

package/library/components/confirm-popover.js

@@ -1,12 +1,12 @@
-import "../chunks/button.DIvU_uFU.js";
-import "../chunks/dialog.DyT-Nai2.js";
+import "../chunks/button.DwJEeW2t.js";
+import "../chunks/dialog.BYCWepBc.js";
 import "./dropdown.js";
 import "../chunks/typography.DJC_UXgs.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C as x } from "../chunks/confirm-popover.DS9HIy3c.js";
+import { C as x } from "../chunks/confirm-popover.BifwpSuf.js";
 import "../chunks/custom-element.L4WJXn1j.js";
-import "../chunks/i18n.C21qyGi6.js";
+import "../chunks/i18n.CH-wak_P.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/query.BBf1UFkC.js";
 import "../chunks/class-map.BiVq-cVR.js";

package/library/components/copy-button.js

@@ -1,7 +1,7 @@
 import { n as r, C as y } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as m } from "../chunks/component.styles.CRO4Odto.js";
 import { c as f } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as g } from "../chunks/i18n.C21qyGi6.js";
+import { L as g } from "../chunks/i18n.CH-wak_P.js";
 import { H as x } from "../chunks/slot.j5oheLJC.js";
 import { w as v } from "../chunks/watch.CThbualB.js";
 import { i as _, x as b } from "../chunks/lit-element.jLBm65_O.js";

package/library/components/corner-position-input-group.js

@@ -1,12 +1,12 @@
-import { C as u } from "../chunks/input.DdeXWD_F.js";
-import { C as h } from "../chunks/option.CcGRV3jj.js";
+import { C as u } from "../chunks/input.CH4lKxPM.js";
+import { C as h } from "../chunks/option.Bvh35v8S.js";
 import m from "./select.js";
 import x from "./space.js";
 import { n as l, C as g } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as C } from "../chunks/component.styles.CRO4Odto.js";
 import { C as o } from "../chunks/index.Cpamj0jB.js";
 import { c as d } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as _ } from "../chunks/i18n.C21qyGi6.js";
+import { L as _ } from "../chunks/i18n.CH-wak_P.js";
 import { i as v, x as y } from "../chunks/lit-element.jLBm65_O.js";
 const $ = v`:host{width:100%;display:block}.corner-position-input-group__inputs{width:100%}.corner-position-input-group__input{flex:1}`;
 var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, r = (e, t, f, n) => {

package/library/components/date-calendar.js

@@ -7,7 +7,7 @@ import { i as f, x as n } from "../chunks/lit-element.jLBm65_O.js";
 import { r as h } from "../chunks/state.CSDxrqLd.js";
 import { e as w } from "../chunks/class-map.BiVq-cVR.js";
 import { c as k } from "../chunks/repeat.DbF2p5ae.js";
-import { C as D } from "../chunks/icon-button.DxkJ-cp-.js";
+import { C as D } from "../chunks/icon-button.CQiBjznj.js";
 const M = f`:host{display:inline-block}.calendar{background:var(--cx-color-neutral-0);border:1px solid var(--cx-color-neutral-200);border-radius:var(--cx-border-radius-medium);user-select:none;width:fit-content;overflow:hidden}.calendar__header{padding:var(--cx-spacing-3x-small);background:var(--header-background,var(--cx-color-neutral-100));border-bottom:1px solid var(--cx-color-neutral-200);justify-content:space-between;align-items:center;display:flex}.calendar__title{font-size:var(--cx-font-size-small);font-weight:var(--cx-font-weight-semibold);color:var(--cx-color-neutral-900)}.calendar__weekdays{grid-template-columns:repeat(7, var(--cell-size,30px));border-bottom:1px solid var(--cx-color-neutral-200);display:grid}.calendar__weekday{text-align:center;font-size:var(--cx-font-size-2x-small);font-weight:var(--cx-font-weight-regular);color:var(--cx-color-neutral-500);padding-block:var(--cx-spacing-2x-small)}.calendar__grid{grid-template-columns:repeat(7, var(--cell-size,30px));border-top:1px solid var(--cx-color-neutral-200);border-left:1px solid var(--cx-color-neutral-200);display:grid}.calendar__cell{height:var(--cell-size,30px);border:none;border-right:1px solid var(--cx-color-neutral-200);border-bottom:1px solid var(--cx-color-neutral-200);border-radius:var(--cell-border-radius,0);color:var(--cx-color-neutral-900);font-size:var(--cx-font-size-x-small);cursor:pointer;transition:background var(--cx-transition-x-fast) ease;background:0 0;justify-content:center;align-items:center;padding:0;display:flex}.calendar__cell:hover:not(.calendar__cell--selected){background:var(--cell-hover-background,var(--cx-color-primary-50))}.calendar__cell--disabled{background:var(--cx-color-neutral-50);color:var(--cx-color-neutral-300);cursor:not-allowed}.calendar__cell--disabled:hover{background:var(--cx-color-neutral-50)}.calendar__cell--outside{background:var(--cx-color-neutral-100);color:var(--cx-color-neutral-400)}.calendar__cell--today:not(.calendar__cell--selected){background:var(--cell-today-background,var(--cx-color-primary-200))}.calendar__cell--selected{background:var(--cell-selected-background,var(--cx-color-neutral-300));color:var(--cell-selected-color,var(--cx-color-neutral-0));font-weight:var(--cx-font-weight-bold)}.calendar__cell--selected:hover{background:var(--cell-selected-background,var(--cx-color-neutral-300));opacity:.85}`;
 var $ = Object.defineProperty, C = Object.getOwnPropertyDescriptor, c = (e, a, o, r) => {
   for (var l = r > 1 ? void 0 : r ? C(a, o) : a, i = e.length - 1, s; i >= 0; i--)

package/library/components/details.js

@@ -2,7 +2,7 @@ import { n as l, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as v } from "../chunks/component.styles.CRO4Odto.js";
 import { s as h, a as p, b as m, w as u } from "../chunks/event.BeKOsirN.js";
 import { c as x } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as _ } from "../chunks/i18n.C21qyGi6.js";
+import { L as _ } from "../chunks/i18n.CH-wak_P.js";
 import { w as g } from "../chunks/watch.CThbualB.js";
 import { i as w, x as k } from "../chunks/lit-element.jLBm65_O.js";
 import { e as n } from "../chunks/query.BBf1UFkC.js";

package/library/components/dialog.js

@@ -1,10 +1,10 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/overlayscrollbars.BMav4RQ4.js";
-import { C as v } from "../chunks/dialog.DyT-Nai2.js";
+import { C as v } from "../chunks/dialog.BYCWepBc.js";
 import "../chunks/event.BeKOsirN.js";
 import "../chunks/custom-element.L4WJXn1j.js";
-import "../chunks/i18n.C21qyGi6.js";
+import "../chunks/i18n.CH-wak_P.js";
 import "../chunks/modal.U1QltQKe.js";
 import "../chunks/scroll.xtO5yojm.js";
 import "../chunks/slot.j5oheLJC.js";
@@ -18,7 +18,7 @@ import "../chunks/style-map.llVFPd__.js";
 import "../chunks/when.Dr1es41R.js";
 import "../chunks/animation-registry.HmpwNuGH.js";
 import "./divider.js";
-import "../chunks/icon-button.DxkJ-cp-.js";
+import "../chunks/icon-button.CQiBjznj.js";
 import "./popup.js";
 export {
   v as default

package/library/components/divider.js

@@ -5,17 +5,17 @@ import { w as h } from "../chunks/watch.CThbualB.js";
 import { i as b, x as g } from "../chunks/lit-element.jLBm65_O.js";
 import { n as f } from "../chunks/when.Dr1es41R.js";
 const m = b`:host{--color:var(--cx-panel-border-color);--label-color:var(--cx-color-neutral-600);--label-font-size:var(--cx-font-size-small);--width:var(--cx-panel-border-width);--spacing:var(--cx-spacing-medium);--border-style:solid;--padding:var(--spacing)}:host(:not([vertical])){width:100%;display:block}:host(:not([vertical]):not([use-padding])){padding:var(--spacing) 0}.divider__label{text-align:center;margin-bottom:var(--cx-spacing-2x-small);color:var(--label-color);font-size:var(--label-font-size);display:block}:host(:not([vertical])):after{content:" ";border-top:var(--border-style) var(--width) var(--color);display:block}:host([vertical]){height:100%;display:inline-block}:host([vertical]:not([use-padding])){padding:0 var(--spacing)}:host([vertical]):after{content:" ";border-left:var(--border-style) var(--width) var(--color);height:100%;display:inline-block}:host([use-padding]){padding:var(--padding)}`;
-var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (a, l, i, o) => {
-  for (var e = o > 1 ? void 0 : o ? y(l, i) : l, s = a.length - 1, n; s >= 0; s--)
-    (n = a[s]) && (e = (o ? n(l, i, e) : n(e)) || e);
-  return o && e && u(l, i, e), e;
+var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (a, o, i, l) => {
+  for (var t = l > 1 ? void 0 : l ? y(o, i) : o, s = a.length - 1, n; s >= 0; s--)
+    (n = a[s]) && (t = (l ? n(o, i, t) : n(t)) || t);
+  return l && t && u(o, i, t), t;
 };
-let t = class extends d {
+let e = class extends d {
   constructor() {
     super(...arguments), this.vertical = !1, this.label = "", this.usePadding = !1;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "separator");
+  runFirstUpdated() {
+    this.setAttribute("role", "separator");
   }
   handleVerticalChange() {
     this.setAttribute(
@@ -31,22 +31,22 @@ let t = class extends d {
     );
   }
 };
-t.styles = [p, m];
+e.styles = [p, m];
 r([
   c({ reflect: !0, type: Boolean })
-], t.prototype, "vertical", 2);
+], e.prototype, "vertical", 2);
 r([
   c({ reflect: !0, type: String })
-], t.prototype, "label", 2);
+], e.prototype, "label", 2);
 r([
   c({ attribute: "use-padding", reflect: !0, type: Boolean })
-], t.prototype, "usePadding", 2);
+], e.prototype, "usePadding", 2);
 r([
   h("vertical")
-], t.prototype, "handleVerticalChange", 1);
-t = r([
+], e.prototype, "handleVerticalChange", 1);
+e = r([
   v("cx-divider")
-], t);
+], e);
 export {
-  t as default
+  e as default
 };