@vonage/vivid 5.1.0 → 5.3.0

package/audio-player/index.js

@@ -1,62 +1,83 @@
 import { B as b, b as f } from "../bundled/definition3.js";
 import { S as k, s as g } from "../bundled/definition5.js";
 import { M as v, m as B } from "../bundled/definition6.js";
-import { V as $, O as l, a as n, h as d, c as w, d as A } from "../bundled/vivid-element.js";
-import { M as T, m as L } from "../bundled/definition7.js";
-import { M as c } from "../bundled/enums.js";
-import { L as F } from "../bundled/localized.js";
-import { g as C } from "../bundled/playbackRates.js";
-import { r as R } from "../bundled/repeat.js";
-import { c as P } from "../bundled/class-names.js";
+import { V as $, O as l, a as n, h as c, c as w, d as A } from "../bundled/vivid-element.js";
+import { M as L, m as T } from "../bundled/definition7.js";
+import { M as u } from "../bundled/enums.js";
+import { L as S } from "../bundled/localized.js";
+import { g as R } from "../bundled/playbackRates.js";
 import { w as p } from "../bundled/when.js";
-const S = ':host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:"slider" "controls";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:"slider slider" "controls playback";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}';
-var D = Object.defineProperty, o = (a, e, t, r) => {
-  for (var i = void 0, u = a.length - 1, m; u >= 0; u--)
-    (m = a[u]) && (i = m(e, t, i) || i);
-  return i && D(e, t, i), i;
+import { r as C } from "../bundled/repeat.js";
+import { c as F } from "../bundled/class-names.js";
+const P = ':host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:"slider" "controls";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:"slider slider" "controls playback";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}';
+var E = Object.defineProperty, o = (a, e, t, r) => {
+  for (var i = void 0, d = a.length - 1, h; d >= 0; d--)
+    (h = a[d]) && (i = h(e, t, i) || i);
+  return i && E(e, t, i), i;
 };
 const y = {
   FORWARD: 1,
   BACKWARD: -1
 };
-function h(a) {
+function m(a) {
   if (!a || Number.isNaN(a))
     return "0:00";
   const e = Math.floor(a / 60), t = Math.floor(a % 60);
   return e + ":" + (t < 10 ? "0" + t : t);
 }
-const E = !0, I = !1, z = {
+const D = !0, I = !1, z = {
   toView(a) {
     return a;
   },
   fromView(a) {
-    return Object.values(c).includes(a) ? a : void 0;
+    return Object.values(u).includes(a) ? a : void 0;
   }
 };
-class s extends F($) {
+class s extends S($) {
   constructor() {
     super(), this.playButtonAriaLabel = null, this.pauseButtonAriaLabel = null, this.sliderAriaLabel = null, this.skipForwardButtonAriaLabel = null, this.skipBackwardButtonAriaLabel = null, this.disabled = !1, this.notime = !1, this.playbackRates = null, this.#t = new Audio(), this.#n = !1, this.durationFallback = !1, this.#l = (e) => {
       if (e === this.paused) {
         this.#o();
         return;
       }
-      this.paused ? (this.#s(), this.#t.play()) : this.#t.pause(), this.#o();
-    }, this.#s = () => {
+      this.paused ? (this.#r(), this.#t.play()) : this.#t.pause(), this.#o();
+    }, this.#r = () => {
       l.notify(this, "currentTime");
       const e = this.duration, t = this.currentTime, r = Number.isFinite(e) && e > 0 && Number.isFinite(t) && t >= 0, i = r ? t / e * 100 : 0;
       this.#e && (this.#n = !0, this.#e.value = i.toString(), this.#n = !1), r && i === 100 && this.pause();
-    }, this.#r = () => {
+    }, this.#s = () => {
       l.notify(this, "duration"), (!Number.isFinite(this.#t.duration) || this.#t.duration <= 0) && this.durationFallback && this.#p();
     }, this.#u = () => {
-      !this.paused && this.#e.isDragging && (this.pause(), this.#c = window.setInterval(() => {
-        this.#e.isDragging || (clearInterval(this.#c), this.play());
+      !this.paused && this.#e.isDragging && (this.pause(), this.#d = window.setInterval(() => {
+        this.#e.isDragging || (clearInterval(this.#d), this.play());
       }, 0)), !this.#n && this.#t && (this.currentTime = this.duration * Number(this.#e.value) / 100);
     }, this.#o = () => {
       l.notify(this, "paused");
     };
   }
   srcChanged() {
-    this.src === void 0 ? this.#t.removeAttribute("src") : this.#t.src = this.src, this.#a = void 0, this.#i && this.#i.abort(), this.#i = void 0;
+    this.src === void 0 ? this.setSrc("") : this.setSrc(this.src);
+  }
+  revokeSrc() {
+    const e = this.getCurrentSrc();
+    e && e.startsWith("blob:") && URL.revokeObjectURL(e);
+  }
+  getCurrentSrc() {
+    return this.#t.currentSrc || this.#t.src || "";
+  }
+  canPlayType(e) {
+    return this.#t.canPlayType(e) !== "";
+  }
+  setSrc(e, t) {
+    const r = this.getCurrentSrc();
+    this.revokeSrc(), this.#a = void 0, this.#i && (this.#i.abort(), this.#i = void 0);
+    const i = t && (this.canPlayType(t.type) || !e) ? URL.createObjectURL(t) : e;
+    if (r && this.#t.removeAttribute("src"), i || e)
+      try {
+        this.#t.src = i;
+      } catch (d) {
+        console.log("Falling back to original URL due to error:", d), this.#t.src = e;
+      }
   }
   get playbackRate() {
     return l.track(this, "playbackRate"), this.#t.playbackRate;
@@ -76,9 +97,12 @@ class s extends F($) {
     this.#i = new AbortController();
     const e = this.#i.signal;
     try {
-      const r = await (await fetch(this.src, { signal: e })).arrayBuffer(), i = new window.AudioContext(), u = await i.decodeAudioData(r);
-      i.close(), this.#a = u, l.notify(this, "duration");
-    } catch {
+      const r = await (await fetch(this.src, { signal: e })).blob();
+      this.setSrc(this.src, r);
+      const i = await r.arrayBuffer(), d = new window.AudioContext(), h = await d.decodeAudioData(i);
+      d.close(), this.#a = h, l.notify(this, "duration");
+    } catch (t) {
+      t instanceof Error && t.name !== "AbortError" && console.error("Error loading audio:", t);
     } finally {
       this.#i = void 0;
     }
@@ -102,25 +126,25 @@ class s extends F($) {
   #t;
   #n;
   connectedCallback() {
-    super.connectedCallback(), this.#t.addEventListener("timeupdate", this.#s), this.#t.addEventListener("loadedmetadata", this.#r), this.#t.addEventListener("durationchange", this.#r), this.#d(), this.#o(), this.#s();
+    super.connectedCallback(), this.#t.addEventListener("timeupdate", this.#r), this.#t.addEventListener("loadedmetadata", this.#s), this.#t.addEventListener("durationchange", this.#s), this.#c(), this.#o(), this.#r();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.#d(!1), this.pause(), this.#t.removeEventListener("timeupdate", this.#s), this.#t.removeEventListener("loadedmetadata", this.#r), this.#t.removeEventListener("durationchange", this.#r);
+    super.disconnectedCallback(), this.#c(!1), this.pause(), this.#t.removeEventListener("timeupdate", this.#r), this.#t.removeEventListener("loadedmetadata", this.#s), this.#t.removeEventListener("durationchange", this.#s);
   }
   play() {
     this.#l(I);
   }
   pause() {
-    this.#l(E);
+    this.#l(D);
   }
-  #d(e = !0) {
+  #c(e = !0) {
     const t = e ? "addEventListener" : "removeEventListener";
     this.#e && this.#e[t]("change", this.#u);
   }
   #l;
-  #s;
   #r;
-  #c;
+  #s;
+  #d;
   #u;
   #o;
   /**
@@ -180,7 +204,7 @@ const M = ({
   duration: t,
   skipBy: r,
   playbackRates: i
-}) => P(
+}) => F(
   ["disabled", !!e || !t],
   [
     "two-lines",
@@ -190,7 +214,7 @@ const M = ({
 ), N = (a, { parent: e }) => a === e.playbackRate;
 function O(a) {
   const e = a.tagFor(b);
-  return d`<${e} class="pause" @click="${(t) => t.paused ? t.play() : t.pause()}"
+  return c`<${e} class="pause" @click="${(t) => t.paused ? t.play() : t.pause()}"
 	icon="${(t) => t.paused ? "play-solid" : "pause-solid"}"
 	aria-label="${(t) => t.paused ? t.playButtonAriaLabel || t.locale.audioPlayer.playButtonLabel : t.pauseButtonAriaLabel || t.locale.audioPlayer.pauseButtonLabel}"
 	size='condensed'
@@ -198,12 +222,12 @@ function O(a) {
 	?disabled="${(t) => t.disabled || !t.duration}"
   ></${e}>`;
 }
-function V(a) {
+function U(a) {
   const e = a.tagFor(b);
-  return d`
+  return c`
 		<${e} class="skip backward"
 			@click="${(t) => t.skip(y.BACKWARD)}"
-		icon="${(t) => t.skipBy == c.Five ? "5-sec-backward-line" : t.skipBy == c.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
+		icon="${(t) => t.skipBy == u.Five ? "5-sec-backward-line" : t.skipBy == u.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
 		size='condensed'
 		aria-label="${(t) => t.skipBackwardButtonAriaLabel || t.locale.audioPlayer.skipBackwardButton}"
 		connotation="${(t) => t.connotation}"
@@ -211,12 +235,12 @@ function V(a) {
 		></${e}>
 	`;
 }
-function _(a) {
+function V(a) {
   const e = a.tagFor(b);
-  return d`
+  return c`
 		<${e} class="skip forward"
 		@click="${(t) => t.skip(y.FORWARD)}"
-		icon="${(t) => t.skipBy == c.Five ? "5-sec-forward-line" : t.skipBy == c.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
+		icon="${(t) => t.skipBy == u.Five ? "5-sec-forward-line" : t.skipBy == u.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
 		size='condensed'
 		aria-label="${(t) => t.skipForwardButtonAriaLabel || t.locale.audioPlayer.skipForwardButton}"
 		connotation="${(t) => t.connotation}"
@@ -224,54 +248,56 @@ function _(a) {
 		></${e}>
 	`;
 }
-function W(a) {
+function _(a) {
   const e = a.tagFor(k);
-  return d`
+  return c`
 	<${e}
 		class="slider"
 		aria-label="${(t) => t.sliderAriaLabel || t.locale.audioPlayer.sliderLabel}"
 		max="100"
-		aria-valuetext="${(t) => h(t.currentTime)}"
+		aria-valuetext="${(t) => m(t.currentTime)}"
 		connotation="${(t) => t.connotation}"
 		?disabled="${(t) => t.disabled || !t.duration}"
 		internal-part>
 	</${e}>`;
 }
 function j() {
-  return d` <div class="time-stamp">
-		<span class="current-time">${(a) => h(a.currentTime)}</span>
+  return c` <div class="time-stamp">
+		<span class="current-time"
+			>${(a) => m(a.currentTime || 0)}</span
+		>
 		${p(
     (a) => a.duration && a.duration !== 1 / 0,
-    d`
+    c`
 				<span>/</span>
-				<span class="total-time">${(a) => h(a.duration)}</span>
+				<span class="total-time">${(a) => m(a?.duration)}</span>
 			`
   )}
 	</div>`;
 }
-function K(a, e) {
+function W(a, e) {
   return e.parent.playbackRate = a, !0;
 }
-const U = (a) => {
-  const e = a.tagFor(v), t = a.tagFor(b), r = a.tagFor(T);
-  return d` <div class="wrapper">
+const K = (a) => {
+  const e = a.tagFor(v), t = a.tagFor(b), r = a.tagFor(L);
+  return c` <div class="wrapper">
 		<div class="base ${M}">
 			<div class="controls">
 				${p(
-    (i) => i.skipBy && i.skipBy != c.Zero,
-    V(a)
+    (i) => i.skipBy && i.skipBy != u.Zero,
+    U(a)
   )}
 				${O(a)}
 				${p(
-    (i) => i.skipBy && i.skipBy != c.Zero,
-    _(a)
+    (i) => i.skipBy && i.skipBy != u.Zero,
+    V(a)
   )}
 				${p((i) => !i.notime, j())}
 			</div>
-			${W(a)}
+			${_(a)}
 			${p(
     (i) => !!i.playbackRates,
-    d`
+    c`
 			<${e} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${t} id="playback-open-button"
 							  class="playback-button"
@@ -283,9 +309,9 @@ const U = (a) => {
 							  ?disabled="${(i) => i.disabled || !i.duration}"
 				></${t}>
 
-				${R(
-      (i) => C(i.playbackRates),
-      d`<${r} @click="${K}"
+				${C(
+      (i) => R(i.playbackRates),
+      c`<${r} @click="${W}"
 																			 control-type="radio"
 																			 class="playback-rate"
 																			 text="${(i) => i}"
@@ -299,10 +325,10 @@ const U = (a) => {
 }, Z = A(
   "audio-player",
   s,
-  U,
-  [f, g, B, L],
+  K,
+  [f, g, B, T],
   {
-    styles: S
+    styles: P
   }
 ), q = w(
   Z

package/badge/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const a=require("../bundled/vivid-element.cjs"),p=require("../bundled/definition2.cjs"),d=require("../bundled/affix.cjs"),m=require("../bundled/class-names.cjs"),f=require("../bundled/when.cjs");var b=Object.defineProperty,v=(n,t,o,l)=>{for(var r=void 0,c=n.length-1,i;c>=0;c--)(i=n[c])&&(r=i(t,o,r)||r);return r&&b(t,o,r),r};class e extends d.AffixIconWithTrailing(a.VividElement){}v([a.attr],e.prototype,"connotation");v([a.attr],e.prototype,"shape");v([a.attr],e.prototype,"size");v([a.attr],e.prototype,"appearance");v([a.attr],e.prototype,"text");const g=":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-badge-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-badge-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-badge-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-badge-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-badge-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-badge-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-badge-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-badge-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.size-expanded){--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded{--_badge-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}",_=({iconSlottedContent:n,connotation:t,appearance:o,shape:l,size:r,iconTrailing:c,text:i,icon:s})=>m.classNames("base",[`connotation-${t}`,!!t],[`appearance-${o}`,!!o],[`shape-${l}`,!!l],[`size-${r}`,!!r],["icon-trailing",c],["icon-only",!i&&(!!s||!!n?.length)]),u=n=>{const t=d.affixIconTemplateFactory(n);return a.html` <span class="${_}">
+"use strict";const a=require("../bundled/vivid-element.cjs"),p=require("../bundled/definition2.cjs"),d=require("../bundled/affix.cjs"),m=require("../bundled/when.cjs"),f=require("../bundled/class-names.cjs");var b=Object.defineProperty,v=(n,t,o,l)=>{for(var r=void 0,c=n.length-1,i;c>=0;c--)(i=n[c])&&(r=i(t,o,r)||r);return r&&b(t,o,r),r};class e extends d.AffixIconWithTrailing(a.VividElement){}v([a.attr],e.prototype,"connotation");v([a.attr],e.prototype,"shape");v([a.attr],e.prototype,"size");v([a.attr],e.prototype,"appearance");v([a.attr],e.prototype,"text");const g=":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-badge-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-badge-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-badge-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-badge-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-badge-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-badge-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-badge-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-badge-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.size-expanded){--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded{--_badge-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}",_=({iconSlottedContent:n,connotation:t,appearance:o,shape:l,size:r,iconTrailing:c,text:i,icon:s})=>f.classNames("base",[`connotation-${t}`,!!t],[`appearance-${o}`,!!o],[`shape-${l}`,!!l],[`size-${r}`,!!r],["icon-trailing",c],["icon-only",!i&&(!!s||!!n?.length)]),u=n=>{const t=d.affixIconTemplateFactory(n);return a.html` <span class="${_}">
 		${o=>t(o.icon,d.IconWrapper.Slot)}
-		${f.when(o=>o.text,o=>a.html`<span class="text">${o.text}</span>`)}
+		${m.when(o=>o.text,o=>a.html`<span class="text">${o.text}</span>`)}
 	</span>`},y=a.defineVividComponent("badge",e,u,[p.iconDefinition],{styles:g}),x=a.createRegisterFunction(y);x();

package/badge/index.js

@@ -1,8 +1,8 @@
 import { V as p, a as c, h as d, c as m, d as f } from "../bundled/vivid-element.js";
 import { i as b } from "../bundled/definition2.js";
 import { A as g, a as _, I as u } from "../bundled/affix.js";
-import { c as y } from "../bundled/class-names.js";
-import { w as x } from "../bundled/when.js";
+import { w as y } from "../bundled/when.js";
+import { c as x } from "../bundled/class-names.js";
 var w = Object.defineProperty, v = (r, n, o, l) => {
   for (var a = void 0, e = r.length - 1, i; e >= 0; e--)
     (i = r[e]) && (a = i(n, o, a) || a);
@@ -34,7 +34,7 @@ const h = ":host{display:inline-block}.base.connotation-cta{--_connotation-color
   iconTrailing: e,
   text: i,
   icon: s
-}) => y(
+}) => x(
   "base",
   [`connotation-${n}`, !!n],
   [`appearance-${o}`, !!o],
@@ -49,7 +49,7 @@ const h = ":host{display:inline-block}.base.connotation-cta{--_connotation-color
   const n = _(r);
   return d` <span class="${z}">
 		${(o) => n(o.icon, u.Slot)}
-		${x(
+		${y(
     (o) => o.text,
     (o) => d`<span class="text">${o.text}</span>`
   )}

package/banner/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const m=require("../bundled/definition3.cjs"),u=require("../bundled/definition2.cjs"),e=require("../bundled/vivid-element.cjs"),c=require("../bundled/enums.cjs"),p=require("../bundled/delegates-aria.cjs"),s=require("../bundled/affix.cjs"),h=require("../bundled/localized.cjs"),b=require("../bundled/class-names.cjs"),f=require("../bundled/slotted.cjs"),y=require("../bundled/when.cjs"),g=":host{display:block}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.removing{max-height:0}.header{display:flex;box-sizing:border-box;align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;padding:10px 16px;column-gap:16px;inline-size:100%}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";var x=Object.defineProperty,i=(o,n,t,d)=>{for(var r=void 0,l=o.length-1,v;l>=0;l--)(v=o[l])&&(r=v(n,t,r)||r);return r&&x(n,t,r),r};const _={[c.Connotation.Information]:"info-solid",[c.Connotation.Announcement]:"megaphone-solid",[c.Connotation.Success]:"check-circle-solid",[c.Connotation.Warning]:"warning-solid",[c.Connotation.Alert]:"error-solid"},C=(o=c.Connotation.Information)=>_[o];class a extends s.AffixIcon(h.Localized(p.DelegatesAria(e.VividElement))){constructor(){super(...arguments),this.dismissButtonAriaLabel=null,this.removable=!1,this.#o=()=>{this.$emit("removed"),this.parentElement&&this.parentElement.removeChild(this)},this.#n=n=>{n.key!=="Escape"||!this.removable||this.remove()}}get conditionedIcon(){return this.icon??C(this.connotation)}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.#n)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.#n)}remove(){this.$emit("removing");const n=this.shadowRoot&&this.shadowRoot.querySelector(".control");n&&(n.classList.add("removing"),n.addEventListener("transitionend",this.#o))}#o;#n}i([e.attr({attribute:"dismiss-aria-label"})],a.prototype,"dismissButtonAriaLabel");i([e.attr({attribute:"action-href"})],a.prototype,"actionHref");i([e.attr({attribute:"action-text"})],a.prototype,"actionText");i([e.attr({mode:"boolean"})],a.prototype,"removable");i([e.attr()],a.prototype,"text");i([e.attr()],a.prototype,"connotation");i([e.observable],a.prototype,"actionItemsSlottedContent");const w=o=>b.classNames("control",[`connotation-${o.connotation}`,!!o.connotation]);function I(o){return e.html`
+"use strict";const m=require("../bundled/definition3.cjs"),u=require("../bundled/definition2.cjs"),e=require("../bundled/vivid-element.cjs"),c=require("../bundled/enums.cjs"),p=require("../bundled/delegates-aria.cjs"),s=require("../bundled/affix.cjs"),h=require("../bundled/localized.cjs"),b=require("../bundled/slotted.cjs"),f=require("../bundled/when.cjs"),y=require("../bundled/class-names.cjs"),g=":host{display:block}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.removing{max-height:0}.header{display:flex;box-sizing:border-box;align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;padding:10px 16px;column-gap:16px;inline-size:100%}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";var x=Object.defineProperty,i=(o,n,t,d)=>{for(var r=void 0,l=o.length-1,v;l>=0;l--)(v=o[l])&&(r=v(n,t,r)||r);return r&&x(n,t,r),r};const _={[c.Connotation.Information]:"info-solid",[c.Connotation.Announcement]:"megaphone-solid",[c.Connotation.Success]:"check-circle-solid",[c.Connotation.Warning]:"warning-solid",[c.Connotation.Alert]:"error-solid"},C=(o=c.Connotation.Information)=>_[o];class a extends s.AffixIcon(h.Localized(p.DelegatesAria(e.VividElement))){constructor(){super(...arguments),this.dismissButtonAriaLabel=null,this.removable=!1,this.#o=()=>{this.$emit("removed"),this.parentElement&&this.parentElement.removeChild(this)},this.#n=n=>{n.key!=="Escape"||!this.removable||this.remove()}}get conditionedIcon(){return this.icon??C(this.connotation)}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.#n)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.#n)}remove(){this.$emit("removing");const n=this.shadowRoot&&this.shadowRoot.querySelector(".control");n&&(n.classList.add("removing"),n.addEventListener("transitionend",this.#o))}#o;#n}i([e.attr({attribute:"dismiss-aria-label"})],a.prototype,"dismissButtonAriaLabel");i([e.attr({attribute:"action-href"})],a.prototype,"actionHref");i([e.attr({attribute:"action-text"})],a.prototype,"actionText");i([e.attr({mode:"boolean"})],a.prototype,"removable");i([e.attr()],a.prototype,"text");i([e.attr()],a.prototype,"connotation");i([e.observable],a.prototype,"actionItemsSlottedContent");const w=o=>y.classNames("control",[`connotation-${o.connotation}`,!!o.connotation]);function I(o){return e.html`
 	  <${o}
 	  		aria-label="${n=>n.dismissButtonAriaLabel||n.locale.banner.dismissButtonLabel}"
 			part="${n=>n.connotation==="warning"?"":"vvd-theme-alternate"}"
@@ -19,12 +19,12 @@
 					</div>
 					<slot
 						class="action-items"
-						${f.slotted("actionItemsSlottedContent")}
+						${b.slotted("actionItemsSlottedContent")}
 						name="action-items"
 					></slot>
 				</div>
 
-				${y.when(t=>t.removable,I(n))}
+				${f.when(t=>t.removable,I(n))}
 			</header>
 		</div>
 	`},A=e.defineVividComponent("banner",a,k,[u.iconDefinition,m.buttonDefinition],{styles:g}),L=e.createRegisterFunction(A);L();

package/banner/index.js

@@ -5,9 +5,9 @@ import { C as i } from "../bundled/enums.js";
 import { D as g, d as x } from "../bundled/delegates-aria.js";
 import { b as _, a as I, I as w, c as k } from "../bundled/affix.js";
 import { L as C } from "../bundled/localized.js";
-import { c as $ } from "../bundled/class-names.js";
-import { s as L } from "../bundled/slotted.js";
-import { w as A } from "../bundled/when.js";
+import { s as $ } from "../bundled/slotted.js";
+import { w as L } from "../bundled/when.js";
+import { c as A } from "../bundled/class-names.js";
 const B = ":host{display:block}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.removing{max-height:0}.header{display:flex;box-sizing:border-box;align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;padding:10px 16px;column-gap:16px;inline-size:100%}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";
 var z = Object.defineProperty, r = (o, n, t, l) => {
   for (var e = void 0, s = o.length - 1, v; s >= 0; s--)
@@ -67,7 +67,7 @@ r([
 r([
   f
 ], a.prototype, "actionItemsSlottedContent");
-const O = (o) => $("control", [`connotation-${o.connotation}`, !!o.connotation]);
+const O = (o) => A("control", [`connotation-${o.connotation}`, !!o.connotation]);
 function T(o) {
   return d`
 	  <${o}
@@ -108,12 +108,12 @@ const N = (o, n) => {
 					</div>
 					<slot
 						class="action-items"
-						${L("actionItemsSlottedContent")}
+						${$("actionItemsSlottedContent")}
 						name="action-items"
 					></slot>
 				</div>
 
-				${A((t) => t.removable, T(n))}
+				${L((t) => t.removable, T(n))}
 			</header>
 		</div>
 	`;

package/breadcrumb-item/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const s=require("../bundled/definition2.cjs"),o=require("../bundled/vivid-element.cjs"),a=require("../bundled/breadcrumb-item.cjs"),c=require("../bundled/class-names.cjs"),t=require("../bundled/when.cjs"),l='.base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover: hover){.control:any-link:hover{text-decoration:underline}}',d=r=>c.classNames("base"),u=r=>{const n=r.tagFor(s.Icon);return o.html` <div role="listitem" class="${d}">
+"use strict";const s=require("../bundled/definition2.cjs"),o=require("../bundled/vivid-element.cjs"),a=require("../bundled/breadcrumb-item.cjs"),t=require("../bundled/when.cjs"),c=require("../bundled/class-names.cjs"),l='.base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover: hover){.control:any-link:hover{text-decoration:underline}}',d=r=>c.classNames("base"),u=r=>{const n=r.tagFor(s.Icon);return o.html` <div role="listitem" class="${d}">
 		${t.when(e=>e.text&&!e.href,o.html`${e=>e.text}`)}
 		${t.when(e=>e.text&&e.href&&e.href.length>0,o.html`${e=>e._renderLinkElement(o.html`${i=>i.text}`,"control")}`)}
 		${t.when(e=>e.separator,o.html`<${n} class="separator" name="chevron-right-solid"></${n}>`)}

package/breadcrumb-item/index.js

@@ -1,8 +1,8 @@
 import { I as i, i as n } from "../bundled/definition2.js";
 import { h as r, c, d as l } from "../bundled/vivid-element.js";
 import { B as d } from "../bundled/breadcrumb-item.js";
-import { c as v } from "../bundled/class-names.js";
 import { w as e } from "../bundled/when.js";
+import { c as v } from "../bundled/class-names.js";
 const m = '.base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover: hover){.control:any-link:hover{text-decoration:underline}}', p = (t) => v("base"), f = (t) => {
   const a = t.tagFor(i);
   return r` <div role="listitem" class="${p}">

package/bundled/affix.cjs

@@ -1,13 +1,13 @@
-"use strict";const u=require("./definition2.cjs"),v=require("./slotted.cjs"),a=require("./vivid-element.cjs");var $=Object.defineProperty,c=(i,n,o,r)=>{for(var e=void 0,t=i.length-1,l;t>=0;t--)(l=i[t])&&(e=l(n,o,e)||e);return e&&$(n,o,e),e};const f=i=>{class n extends i{}return c([a.attr],n.prototype,"icon"),c([a.observable],n.prototype,"iconSlottedContent"),n},I=i=>{class n extends f(i){constructor(){super(...arguments),this.iconTrailing=!1}}return c([a.attr({mode:"boolean",attribute:"icon-trailing"})],n.prototype,"iconTrailing"),n},d={Slot:!1,Span:!0},p={Hidden:"true"},m=i=>{const n=i.tagFor(u.Icon);return(o,r=d.Span,e=p.Hidden,t={label:"",announceOnUpdate:!1})=>{if(!o&&!r)return a.html`<slot
+"use strict";const u=require("./definition2.cjs"),r=require("./vivid-element.cjs"),v=require("./slotted.cjs");var $=Object.defineProperty,c=(i,n,t,a)=>{for(var e=void 0,o=i.length-1,l;o>=0;o--)(l=i[o])&&(e=l(n,t,e)||e);return e&&$(n,t,e),e};const f=i=>{class n extends i{}return c([r.attr],n.prototype,"icon"),c([r.observable],n.prototype,"iconSlottedContent"),n},I=i=>{class n extends f(i){constructor(){super(...arguments),this.iconTrailing=!1}}return c([r.attr({mode:"boolean",attribute:"icon-trailing"})],n.prototype,"iconTrailing"),n},d={Slot:!1,Span:!0},p={Hidden:"true"},m=i=>{const n=i.tagFor(u.Icon);return(t,a=d.Span,e=p.Hidden,o={label:"",announceOnUpdate:!1})=>{if(!t&&!a)return r.html`<slot
 				name="icon"
 				aria-hidden="${()=>e}"
 				${v.slotted("iconSlottedContent")}
-			></slot>`;if(!o&&r)return null;const l=a.html`<${n} :name="${()=>o}" :label="${()=>t?.label||void 0}"></${n}>`,s=r?"span":"slot";return a.html`<${s}
-					class="${()=>r?"icon":void 0}"
-					:name="${()=>r?void 0:"icon"}"
-					aria-hidden="${()=>t?.label?!1:e}"
-					:role="${()=>t?.announceOnUpdate?"status":void 0}"
-					:ariaLive="${()=>t?.announceOnUpdate?"polite":void 0}"
+			></slot>`;if(!t&&a)return null;const l=r.html`<${n} :name="${()=>t}" :label="${()=>o?.label||void 0}"></${n}>`,s=r.html.partial(a?"span":"slot");return r.html`<${s}
+					class="${()=>a?"icon":void 0}"
+					:name="${()=>a?void 0:"icon"}"
+					aria-hidden="${()=>o?.label?!1:e}"
+					:role="${()=>o?.announceOnUpdate?"status":void 0}"
+					:ariaLive="${()=>o?.announceOnUpdate?"polite":void 0}"
 			  >
 					${l}
 			  </${s}>`}};exports.AffixIcon=f;exports.AffixIconWithTrailing=I;exports.IconAriaHidden=p;exports.IconWrapper=d;exports.affixIconTemplateFactory=m;

package/bundled/affix.js

@@ -1,6 +1,6 @@
 import { I as f } from "./definition2.js";
-import { s as d } from "./slotted.js";
-import { a as p, h as s, o as u } from "./vivid-element.js";
+import { a as p, h as s, o as d } from "./vivid-element.js";
+import { s as u } from "./slotted.js";
 var $ = Object.defineProperty, l = (a, n, e, i) => {
   for (var o = void 0, r = a.length - 1, t; r >= 0; r--)
     (t = a[r]) && (o = t(n, e, o) || o);
@@ -12,7 +12,7 @@ const m = (a) => {
   return l([
     p
   ], n.prototype, "icon"), l([
-    u
+    d
   ], n.prototype, "iconSlottedContent"), n;
 }, x = (a) => {
   class n extends m(a) {
@@ -38,11 +38,11 @@ const m = (a) => {
       return s`<slot
 				name="icon"
 				aria-hidden="${() => o}"
-				${d("iconSlottedContent")}
+				${u("iconSlottedContent")}
 			></slot>`;
     if (!e && i)
       return null;
-    const t = s`<${n} :name="${() => e}" :label="${() => r?.label || void 0}"></${n}>`, c = i ? "span" : "slot";
+    const t = s`<${n} :name="${() => e}" :label="${() => r?.label || void 0}"></${n}>`, c = s.partial(i ? "span" : "slot");
     return s`<${c}
 					class="${() => i ? "icon" : void 0}"
 					:name="${() => i ? void 0 : "icon"}"

package/bundled/anchored.cjs

@@ -1,4 +1,4 @@
-"use strict";const n=require("./vivid-element.cjs"),l=require("./slotted.cjs");var a=Object.defineProperty,c=(s,o,r,t)=>{for(var e=void 0,h=s.length-1,i;h>=0;h--)(i=s[h])&&(e=i(o,r,e)||e);return e&&a(o,r,e),e};const d=s=>{class o extends s{anchorChanged(){this.#e()}_slottedAnchorChanged(){const t=!!(this._slottedAnchor&&this._slottedAnchor.length>0);n.DOM.setBooleanAttribute(this,"slotted-anchor",t),this.#e()}#e=()=>{if(!this.isConnected){this._anchorEl=void 0;return}this.#o();let t;this._slottedAnchor&&this._slottedAnchor.length>0?t=this._slottedAnchor[0]:this.anchor instanceof HTMLElement?t=this.anchor:typeof this.anchor=="string"&&(t=document.getElementById(this.anchor)??void 0,t||this.#n(this.anchor)),this._anchorEl=t};#t;#n=t=>{this.#t=new MutationObserver(()=>{const e=document.getElementById(t);e&&(this._anchorEl=e,this.#o())}),this.#t.observe(document.body,{childList:!0,subtree:!0})};#o=()=>{this.#t?.disconnect(),this.#t=void 0};connectedCallback(){super.connectedCallback(),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#o(),this._anchorEl=void 0}}return c([n.attr],o.prototype,"anchor"),c([n.observable],o.prototype,"_slottedAnchor"),c([n.observable],o.prototype,"_anchorEl"),o},u=()=>n.html`<slot
+"use strict";const l=require("./slotted.cjs"),n=require("./vivid-element.cjs");var a=Object.defineProperty,c=(s,o,r,t)=>{for(var e=void 0,h=s.length-1,i;h>=0;h--)(i=s[h])&&(e=i(o,r,e)||e);return e&&a(o,r,e),e};const d=s=>{class o extends s{anchorChanged(){this.#e()}_slottedAnchorChanged(){const t=!!(this._slottedAnchor&&this._slottedAnchor.length>0);n.DOM.setBooleanAttribute(this,"slotted-anchor",t),this.#e()}#e=()=>{if(!this.isConnected){this._anchorEl=void 0;return}this.#o();let t;this._slottedAnchor&&this._slottedAnchor.length>0?t=this._slottedAnchor[0]:this.anchor instanceof HTMLElement?t=this.anchor:typeof this.anchor=="string"&&(t=document.getElementById(this.anchor)??void 0,t||this.#n(this.anchor)),this._anchorEl=t};#t;#n=t=>{this.#t=new MutationObserver(()=>{const e=document.getElementById(t);e&&(this._anchorEl=e,this.#o())}),this.#t.observe(document.body,{childList:!0,subtree:!0})};#o=()=>{this.#t?.disconnect(),this.#t=void 0};connectedCallback(){super.connectedCallback(),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#o(),this._anchorEl=void 0}}return c([n.attr],o.prototype,"anchor"),c([n.observable],o.prototype,"_slottedAnchor"),c([n.observable],o.prototype,"_anchorEl"),o},u=()=>n.html`<slot
 		name="anchor"
 		${l.slotted("_slottedAnchor")}
 	></slot>`;exports.Anchored=d;exports.anchorSlotTemplateFactory=u;

package/bundled/anchored.js

@@ -1,5 +1,5 @@
-import { h as a, D as l, a as d, o as i } from "./vivid-element.js";
-import { s as p } from "./slotted.js";
+import { s as a } from "./slotted.js";
+import { h as l, D as d, a as p, o as i } from "./vivid-element.js";
 var u = Object.defineProperty, h = (s, o, n, t) => {
   for (var e = void 0, r = s.length - 1, c; r >= 0; r--)
     (c = s[r]) && (e = c(o, n, e) || e);
@@ -18,7 +18,7 @@ const v = (s) => {
      */
     _slottedAnchorChanged() {
       const t = !!(this._slottedAnchor && this._slottedAnchor.length > 0);
-      l.setBooleanAttribute(
+      d.setBooleanAttribute(
         this,
         "slotted-anchor",
         t
@@ -51,15 +51,15 @@ const v = (s) => {
     }
   }
   return h([
-    d
+    p
   ], o.prototype, "anchor"), h([
     i
   ], o.prototype, "_slottedAnchor"), h([
     i
   ], o.prototype, "_anchorEl"), o;
-}, b = () => a`<slot
+}, b = () => l`<slot
 		name="anchor"
-		${p("_slottedAnchor")}
+		${a("_slottedAnchor")}
 	></slot>`;
 export {
   v as A,

package/bundled/attribute-binding-behaviour.cjs

@@ -1 +1 @@
-"use strict";const e=require("./vivid-element.cjs");class r{constructor(i,t,s,n){this.target=i,this.binding=t,this.isBindingVolatile=s,this.attributeName=n,this.source=null,this.context=null}bind(i,t){this.source=i,this.context=t,this.bindingObserver||(this.bindingObserver=e.Observable.binding(this.binding,this,this.isBindingVolatile)),this.updateTarget(this.bindingObserver.observe(i,t))}unbind(){this.bindingObserver.disconnect(),this.source=null,this.context=null}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}updateTarget(i){e.DOM.setAttribute(this.target,this.attributeName,i)}}exports.AttributeBindingBehavior=r;
+"use strict";const i=require("./vivid-element.cjs");class r{constructor(t,e,s,n){this.target=t,this.binding=e,this.isBindingVolatile=s,this.attributeName=n,this.source=null,this.context=null}bind(t){this.source=t.source,this.context=t.context,this.bindingObserver||(this.bindingObserver=i.Observable.binding(this.binding.evaluate,this,this.isBindingVolatile)),this.bindingObserver.observe(this.source,this.context),this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}updateTarget(t){i.DOM.setAttribute(this.target,this.attributeName,t)}}exports.AttributeBindingBehavior=r;