@vonage/vivid 5.18.0 → 5.20.0

package/audio-player/index.js

@@ -1,13 +1,12 @@
 import { t as e } from "../bundled/localized.js";
-import { d as t, l as n, o as r, s as i, t as a, w as o } from "../bundled/vivid-element.js";
+import { d as t, k as n, m as r, p as i, t as a, u as o } from "../bundled/vivid-element.js";
 import { n as s } from "../bundled/repeat.js";
 import { t as c } from "../bundled/when.js";
 import { r as l } from "../bundled/enums.js";
-import "../bundled/numberConverter.js";
 import { t as u } from "../bundled/decorate.js";
-import { t as d } from "../bundled/playbackRates.js";
-import { t as f } from "../bundled/class-names.js";
-import { n as p, r as m } from "../bundled/definition3.js";
+import { t as d } from "../bundled/class-names.js";
+import { n as f, r as p } from "../bundled/definition3.js";
+import { t as m } from "../bundled/playbackRates.js";
 import { i as h, t as g } from "../bundled/definition6.js";
 import { i as _, t as v } from "../bundled/definition20.js";
 import { r as y, t as b } from "../bundled/definition21.js";
@@ -53,13 +52,13 @@ var w = !0, T = !1, E = {
 		}
 	}
 	get playbackRate() {
-		return o.track(this, "playbackRate"), this.#i.playbackRate;
+		return n.track(this, "playbackRate"), this.#i.playbackRate;
 	}
 	set playbackRate(e) {
-		this.#i.playbackRate = e, o.notify(this, "playbackRate");
+		this.#i.playbackRate = e, n.notify(this, "playbackRate");
 	}
 	get paused() {
-		return o.track(this, "paused"), this.#i.paused;
+		return n.track(this, "paused"), this.#i.paused;
 	}
 	set paused(e) {}
 	#e;
@@ -71,8 +70,8 @@ var w = !0, T = !1, E = {
 		try {
 			let t = await (await fetch(this.src, { signal: e })).blob();
 			this.setSrc(this.src, t);
-			let n = await t.arrayBuffer(), r = new window.AudioContext(), i = await r.decodeAudioData(n);
-			r.close(), this.#e = i, o.notify(this, "duration");
+			let r = await t.arrayBuffer(), i = new window.AudioContext(), a = await i.decodeAudioData(r);
+			i.close(), this.#e = a, n.notify(this, "duration");
 		} catch (e) {
 			/* v8 ignore else -- @preserve */
 			e instanceof Error && e.name !== "AbortError" && console.error("Error loading audio:", e);
@@ -81,13 +80,13 @@ var w = !0, T = !1, E = {
 		}
 	}
 	get duration() {
-		o.track(this, "duration");
+		n.track(this, "duration");
 		let e = this.#i.duration;
 		return Number.isFinite(e) && e > 0 ? e : this.#e && this.#e.duration > 0 ? this.#e.duration : e;
 	}
 	set duration(e) {}
 	get currentTime() {
-		return o.track(this, "currentTime"), this.#i.currentTime;
+		return n.track(this, "currentTime"), this.#i.currentTime;
 	}
 	set currentTime(e) {
 		this.#i.currentTime = e;
@@ -95,10 +94,33 @@ var w = !0, T = !1, E = {
 	get #r() {
 		return this.shadowRoot.querySelector(".slider");
 	}
-	#i = new Audio();
-	#a = !1;
+	#i;
+	#a;
 	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.durationFallback = !1;
+		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.#i = new Audio(), this.#a = !1, this.durationFallback = !1, this.#o = () => {
+			this.#r?.isDragging || this.$emit("play", void 0, { bubbles: !1 });
+		}, this.#s = () => {
+			this.#r?.isDragging || this.$emit("pause", void 0, { bubbles: !1 });
+		}, this.#l = (e) => {
+			if (e === this.paused) {
+				this.#m();
+				return;
+			}
+			this.paused ? (this.#u(), this.#i.play()) : this.#i.pause(), this.#m();
+		}, this.#u = () => {
+			n.notify(this, "currentTime");
+			let e = this.duration, t = this.currentTime, r = Number.isFinite(e) && e > 0 && Number.isFinite(t) && t >= 0, i = r ? t / e * 100 : 0;
+			this.#r && (this.#a = !0, this.#r.value = i.toString(), this.#a = !1), r && i === 100 && this.pause();
+		}, this.#d = () => {
+			n.notify(this, "duration"), (!Number.isFinite(this.#i.duration) || this.#i.duration <= 0) && this.durationFallback && this.#n();
+		}, this.#p = () => {
+			!this.paused && this.#r.isDragging && (this.pause(), this.#f = window.setInterval(() => {
+				/* v8 ignore else -- @preserve */
+				(!this.#r.isDragging || !this.isConnected) && (clearInterval(this.#f), this.isConnected && this.play());
+			}, 0)), !this.#a && this.#i && (this.currentTime = this.duration * Number(this.#r.value) / 100);
+		}, this.#m = () => {
+			n.notify(this, "paused");
+		};
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.#i.addEventListener("timeupdate", this.#u), this.#i.addEventListener("loadedmetadata", this.#d), this.#i.addEventListener("durationchange", this.#d), this.#i.addEventListener("play", this.#o), this.#i.addEventListener("pause", this.#s), this.#c(), this.#m(), this.#u();
@@ -112,97 +134,74 @@ var w = !0, T = !1, E = {
 	pause() {
 		this.#l(w);
 	}
-	#o = () => {
-		this.#r?.isDragging || this.$emit("play", void 0, { bubbles: !1 });
-	};
-	#s = () => {
-		this.#r?.isDragging || this.$emit("pause", void 0, { bubbles: !1 });
-	};
+	#o;
+	#s;
 	#c(e = !0) {
 		let t = e ? "addEventListener" : "removeEventListener";
 		/* v8 ignore else -- @preserve */
 		this.#r && this.#r[t]("change", this.#p);
 	}
-	#l = (e) => {
-		if (e === this.paused) {
-			this.#m();
-			return;
-		}
-		this.paused ? (this.#u(), this.#i.play()) : this.#i.pause(), this.#m();
-	};
-	#u = () => {
-		o.notify(this, "currentTime");
-		let e = this.duration, t = this.currentTime, n = Number.isFinite(e) && e > 0 && Number.isFinite(t) && t >= 0, r = n ? t / e * 100 : 0;
-		this.#r && (this.#a = !0, this.#r.value = r.toString(), this.#a = !1), n && r === 100 && this.pause();
-	};
-	#d = () => {
-		o.notify(this, "duration"), (!Number.isFinite(this.#i.duration) || this.#i.duration <= 0) && this.durationFallback && this.#n();
-	};
+	#l;
+	#u;
+	#d;
 	#f;
-	#p = () => {
-		!this.paused && this.#r.isDragging && (this.pause(), this.#f = window.setInterval(() => {
-			/* v8 ignore else -- @preserve */
-			(!this.#r.isDragging || !this.isConnected) && (clearInterval(this.#f), this.isConnected && this.play());
-		}, 0)), !this.#a && this.#i && (this.currentTime = this.duration * Number(this.#r.value) / 100);
-	};
-	#m = () => {
-		o.notify(this, "paused");
-	};
+	#p;
+	#m;
 	skip(e) {
 		let t = this.currentTime + parseInt(this.skipBy) * e;
 		this.currentTime = Math.max(0, Math.min(this.duration, t));
 	}
 };
-u([n({ attribute: "play-button-aria-label" })], D.prototype, "playButtonAriaLabel", void 0), u([n({ attribute: "pause-button-aria-label" })], D.prototype, "pauseButtonAriaLabel", void 0), u([n({ attribute: "slider-aria-label" })], D.prototype, "sliderAriaLabel", void 0), u([n({ attribute: "skip-forward-aria-label" })], D.prototype, "skipForwardButtonAriaLabel", void 0), u([n({ attribute: "skip-backward-aria-label" })], D.prototype, "skipBackwardButtonAriaLabel", void 0), u([n], D.prototype, "connotation", void 0), u([n], D.prototype, "src", void 0), u([n({ mode: "boolean" })], D.prototype, "disabled", void 0), u([n({ mode: "boolean" })], D.prototype, "notime", void 0), u([n({
+u([r({ attribute: "play-button-aria-label" })], D.prototype, "playButtonAriaLabel", void 0), u([r({ attribute: "pause-button-aria-label" })], D.prototype, "pauseButtonAriaLabel", void 0), u([r({ attribute: "slider-aria-label" })], D.prototype, "sliderAriaLabel", void 0), u([r({ attribute: "skip-forward-aria-label" })], D.prototype, "skipForwardButtonAriaLabel", void 0), u([r({ attribute: "skip-backward-aria-label" })], D.prototype, "skipBackwardButtonAriaLabel", void 0), u([r], D.prototype, "connotation", void 0), u([r], D.prototype, "src", void 0), u([r({ mode: "boolean" })], D.prototype, "disabled", void 0), u([r({ mode: "boolean" })], D.prototype, "notime", void 0), u([r({
 	attribute: "skip-by",
 	converter: E
-})], D.prototype, "skipBy", void 0), u([n({ attribute: "playback-rates" })], D.prototype, "playbackRates", void 0), u([n({
+})], D.prototype, "skipBy", void 0), u([r({ attribute: "playback-rates" })], D.prototype, "playbackRates", void 0), u([r({
 	mode: "boolean",
 	attribute: "duration-fallback"
 })], D.prototype, "durationFallback", void 0);
 //#endregion
 //#region src/lib/audio-player/audio-player.template.ts
-var O = ({ notime: e, disabled: t, duration: n, skipBy: r, playbackRates: i }) => f(["disabled", !!t || !n], ["two-lines", !e && (!!Number(r) || !!i)], ["playback", !!i]), k = (e, { parent: t }) => e === t.playbackRate;
+var O = ({ notime: e, disabled: t, duration: n, skipBy: r, playbackRates: i }) => d(["disabled", !!t || !n], ["two-lines", !e && (!!Number(r) || !!i)], ["playback", !!i]), k = (e, { parent: t }) => e === t.playbackRate;
 function A(e) {
-	let n = e.tagFor(h);
-	return t`<${n} class="pause" @click="${(e) => e.paused ? e.play() : e.pause()}"
+	let t = e.tagFor(h);
+	return i`<${t} class="pause" @click="${(e) => e.paused ? e.play() : e.pause()}"
 	icon="${(e) => e.paused ? "play-solid" : "pause-solid"}"
 	aria-label="${(e) => e.paused ? e.playButtonAriaLabel || e.locale.audioPlayer.playButtonLabel : e.pauseButtonAriaLabel || e.locale.audioPlayer.pauseButtonLabel}"
 	size='condensed'
 	connotation="${(e) => e.connotation}"
 	?disabled="${(e) => e.disabled || !e.duration}"
-  ></${n}>`;
+  ></${t}>`;
 }
 function j(e) {
-	let n = e.tagFor(h);
-	return t`
-		<${n} class="skip backward"
+	let t = e.tagFor(h);
+	return i`
+		<${t} class="skip backward"
 			@click="${(e) => e.skip(S.BACKWARD)}"
 		icon="${(e) => e.skipBy == l.Five ? "5-sec-backward-line" : e.skipBy == l.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
 		size='condensed'
 		aria-label="${(e) => e.skipBackwardButtonAriaLabel || e.locale.audioPlayer.skipBackwardButton}"
 		connotation="${(e) => e.connotation}"
 		?disabled="${(e) => e.disabled || !e.duration}"
-		></${n}>
+		></${t}>
 	`;
 }
 function M(e) {
-	let n = e.tagFor(h);
-	return t`
-		<${n} class="skip forward"
+	let t = e.tagFor(h);
+	return i`
+		<${t} class="skip forward"
 		@click="${(e) => e.skip(S.FORWARD)}"
 		icon="${(e) => e.skipBy == l.Five ? "5-sec-forward-line" : e.skipBy == l.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
 		size='condensed'
 		aria-label="${(e) => e.skipForwardButtonAriaLabel || e.locale.audioPlayer.skipForwardButton}"
 		connotation="${(e) => e.connotation}"
 		?disabled="${(e) => e.disabled || !e.duration}"
-		></${n}>
+		></${t}>
 	`;
 }
 function N(e) {
-	let n = e.tagFor(m);
-	return t`
-	<${n}
+	let t = e.tagFor(p);
+	return i`
+	<${t}
 		class="slider"
 		aria-label="${(e) => e.sliderAriaLabel || e.locale.audioPlayer.sliderLabel}"
 		max="100"
@@ -210,14 +209,14 @@ function N(e) {
 		connotation="${(e) => e.connotation}"
 		?disabled="${(e) => e.disabled || !e.duration}"
 		internal-part>
-	</${n}>`;
+	</${t}>`;
 }
 function P() {
-	return t` <div class="time-stamp">
+	return i` <div class="time-stamp">
 		<span class="current-time"
 			>${(e) => C(e.currentTime || 0)}</span
 		>
-		${c((e) => e.duration && e.duration !== Infinity, t`
+		${c((e) => e.duration && e.duration !== Infinity, i`
 				<span>/</span>
 				<span class="total-time">${(e) => C(e?.duration)}</span>
 			`)}
@@ -228,9 +227,9 @@ function F(e, t) {
 }
 //#endregion
 //#region src/lib/audio-player/index.ts
-i(r("audio-player", D, (e) => {
-	let n = e.tagFor(y), r = e.tagFor(h), i = e.tagFor(_);
-	return t` <div class="wrapper">
+t(o("audio-player", D, (e) => {
+	let t = e.tagFor(y), n = e.tagFor(h), r = e.tagFor(_);
+	return i` <div class="wrapper">
 		<div class="base ${O}">
 			<div class="controls">
 				${c((e) => e.skipBy && e.skipBy != l.Zero, j(e))}
@@ -239,9 +238,9 @@ i(r("audio-player", D, (e) => {
 				${c((e) => !e.notime, P())}
 			</div>
 			${N(e)}
-			${c((e) => !!e.playbackRates, t`
-			<${n} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
-				<${r} id="playback-open-button"
+			${c((e) => !!e.playbackRates, i`
+			<${t} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
+				<${n} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"
 							  icon="playback-speed-line"
@@ -249,20 +248,20 @@ i(r("audio-player", D, (e) => {
 							  size='condensed'
 							  connotation="${(e) => e.connotation}"
 							  ?disabled="${(e) => e.disabled || !e.duration}"
-				></${r}>
+				></${n}>
 
-				${s((e) => d(e.playbackRates), t`<${i} @click="${F}"
+				${s((e) => m(e.playbackRates), i`<${r} @click="${F}"
 																			 control-type="radio"
 																			 class="playback-rate"
 																			 text="${(e) => e}"
 																			 check-appearance="tick-only"
-																			 ?checked="${k}"></${i}>`)}
-			</${n}>`)}
+																			 ?checked="${k}"></${r}>`)}
+			</${t}>`)}
 		</div>
 	</div>`;
 }, [
 	g,
-	p,
+	f,
 	b,
 	v
 ], { styles: x }))();

package/avatar/definition.cjs

@@ -1,5 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/numberConverter.cjs");
 const require_definition = require("../unbundled/definition15.cjs");
 exports.VwcAvatarElement = require_definition.Avatar;
 exports.avatarDefinition = require_definition.avatarDefinition;

package/avatar/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/numberConverter.js";
 import { n as registerAvatar, r as Avatar, t as avatarDefinition } from "../unbundled/definition15.js";
 export { Avatar as VwcAvatarElement, avatarDefinition, registerAvatar };

package/avatar/index.cjs

@@ -1,18 +1,18 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`);require(`../bundled/numberConverter.cjs`);const n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition2.cjs`),i=require(`../bundled/delegates-aria.cjs`),a=require(`../bundled/linkable.cjs`),o=require(`../bundled/class-names.cjs`);var s=`:host{display:inline-block}.base.connotation-cta{--_connotation-color-primary:var(--vvd-avatar-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-avatar-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-avatar-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-avatar-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-avatar-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-avatar-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-avatar-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-avatar-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-avatar-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-avatar-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-fierce:var(--vvd-avatar-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-avatar-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-avatar-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-avatar-accent-contrast,var(--vvd-color-neutral-800))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.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{border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle;border:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.base.size-condensed{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.base.size-expanded{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8)) / 2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color:transparent}.base:not(.shape-pill){--_avatar-border-radius:8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius:4px}.base:not(.size-condensed,.size-expanded){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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))}.base.shape-pill{--_avatar-border-radius:50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){object-fit:cover;block-size:100%;inline-size:100%}`,c=class extends a.t(e.t){constructor(...e){super(...e),this.clickable=!1}};n.t([e.l],c.prototype,`connotation`,void 0),n.t([e.l],c.prototype,`shape`,void 0),n.t([e.l],c.prototype,`appearance`,void 0),n.t([e.l],c.prototype,`size`,void 0),n.t([e.l],c.prototype,`icon`,void 0),n.t([e.l],c.prototype,`initials`,void 0),n.t([e.l({mode:`boolean`,attribute:`clickable`})],c.prototype,`clickable`,void 0);var l=({appearance:e,connotation:t,shape:n,size:r})=>o.t(`base`,[`connotation-${t}`,!!t],[`appearance-${e}`,!!e],[`shape-${n}`,!!n],[`size-${r}`,!!r]);function u(t){return e.d`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition2.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/linkable.cjs`);var s=`:host{display:inline-block}.base.connotation-cta{--_connotation-color-primary:var(--vvd-avatar-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-avatar-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-avatar-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-avatar-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-avatar-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-avatar-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-avatar-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-avatar-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-avatar-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-avatar-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-fierce:var(--vvd-avatar-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-avatar-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-avatar-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-avatar-accent-contrast,var(--vvd-color-neutral-800))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.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{border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle;border:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.base.size-condensed{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.base.size-expanded{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8)) / 2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color:transparent}.base:not(.shape-pill){--_avatar-border-radius:8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius:4px}.base:not(.size-condensed,.size-expanded){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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))}.base.shape-pill{--_avatar-border-radius:50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){object-fit:cover;block-size:100%;inline-size:100%}`,c=class extends o.t(e.t){constructor(...e){super(...e),this.clickable=!1}};n.t([e.m],c.prototype,`connotation`,void 0),n.t([e.m],c.prototype,`shape`,void 0),n.t([e.m],c.prototype,`appearance`,void 0),n.t([e.m],c.prototype,`size`,void 0),n.t([e.m],c.prototype,`icon`,void 0),n.t([e.m],c.prototype,`initials`,void 0),n.t([e.m({mode:`boolean`,attribute:`clickable`})],c.prototype,`clickable`,void 0);var l=({appearance:e,connotation:t,shape:n,size:r})=>i.t(`base`,[`connotation-${t}`,!!t],[`appearance-${e}`,!!e],[`shape-${n}`,!!n],[`size-${r}`,!!r]);function u(t){return e.p`
 		<${t} name="${e=>e.icon?`${e.icon}`:`user-line`}"></${t}>
-	`}function d(){return e.d`
+	`}function d(){return e.p`
 		<span class="initials">${({initials:e})=>e.substring(0,2)}</span>
-	`}function f(t,n){return t.href?t._renderLinkElement(n,l):t.clickable?e.d`<button
+	`}function f(t,n){return t.href?t._renderLinkElement(n,l):t.clickable?e.p`<button
 			type="button"
 			class="${l}"
-			${i.n()}
+			${a.n()}
 		>
 			${n}
-		</button>`:e.d`<span class="${l}">${n}</span>`}var p=e.o(`avatar`,c,n=>{let i=n.tagFor(r.r);return e.d`
-		${n=>f(n,e.d`<slot name="graphic">
+		</button>`:e.p`<span class="${l}">${n}</span>`}var p=e.u(`avatar`,c,n=>{let i=n.tagFor(r.r);return e.p`
+		${n=>f(n,e.p`<slot name="graphic">
 					${t.t(e=>e.initials,d())}
-					${t.t(e=>!e.initials,e.d`<span class="icon"
+					${t.t(e=>!e.initials,e.p`<span class="icon"
 							><slot name="icon">${u(i)}</slot></span
 						>`)}</slot
 				>`)}
-	`},[r.t],{styles:s});e.s(p)();
+	`},[r.t],{styles:s});e.d(p)();

package/avatar/index.js

@@ -1,13 +1,12 @@
-import { d as e, l as t, o as n, s as r, t as i } from "../bundled/vivid-element.js";
+import { d as e, m as t, p as n, t as r, u as i } from "../bundled/vivid-element.js";
 import { t as a } from "../bundled/when.js";
-import "../bundled/numberConverter.js";
 import { t as o } from "../bundled/decorate.js";
 import { r as s, t as c } from "../bundled/definition2.js";
-import { n as l } from "../bundled/delegates-aria.js";
-import { t as u } from "../bundled/linkable.js";
-import { t as d } from "../bundled/class-names.js";
+import { t as l } from "../bundled/class-names.js";
+import { n as u } from "../bundled/delegates-aria.js";
+import { t as d } from "../bundled/linkable.js";
 //#region src/lib/avatar/avatar.scss?inline
-var f = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary:var(--vvd-avatar-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-avatar-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-avatar-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-avatar-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-avatar-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-avatar-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-avatar-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-avatar-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-avatar-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-avatar-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-fierce:var(--vvd-avatar-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-avatar-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-avatar-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-avatar-accent-contrast,var(--vvd-color-neutral-800))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.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{border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle;border:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.base.size-condensed{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.base.size-expanded{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8)) / 2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color:transparent}.base:not(.shape-pill){--_avatar-border-radius:8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius:4px}.base:not(.size-condensed,.size-expanded){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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))}.base.shape-pill{--_avatar-border-radius:50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){object-fit:cover;block-size:100%;inline-size:100%}", p = class extends u(i) {
+var f = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary:var(--vvd-avatar-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-avatar-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-avatar-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-avatar-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-avatar-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-avatar-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-avatar-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-avatar-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-avatar-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-avatar-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-fierce:var(--vvd-avatar-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-avatar-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-avatar-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-avatar-accent-contrast,var(--vvd-color-neutral-800))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.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{border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle;border:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.base.size-condensed{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.base.size-expanded{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8)) / 2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color:transparent}.base:not(.shape-pill){--_avatar-border-radius:8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius:4px}.base:not(.size-condensed,.size-expanded){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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))}.base.shape-pill{--_avatar-border-radius:50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){object-fit:cover;block-size:100%;inline-size:100%}", p = class extends d(r) {
 	constructor(...e) {
 		super(...e), this.clickable = !1;
 	}
@@ -18,35 +17,35 @@ o([t], p.prototype, "connotation", void 0), o([t], p.prototype, "shape", void 0)
 })], p.prototype, "clickable", void 0);
 //#endregion
 //#region src/lib/avatar/avatar.template.ts
-var m = ({ appearance: e, connotation: t, shape: n, size: r }) => d("base", [`connotation-${t}`, !!t], [`appearance-${e}`, !!e], [`shape-${n}`, !!n], [`size-${r}`, !!r]);
-function h(t) {
-	return e`
-		<${t} name="${(e) => e.icon ? `${e.icon}` : "user-line"}"></${t}>
+var m = ({ appearance: e, connotation: t, shape: n, size: r }) => l("base", [`connotation-${t}`, !!t], [`appearance-${e}`, !!e], [`shape-${n}`, !!n], [`size-${r}`, !!r]);
+function h(e) {
+	return n`
+		<${e} name="${(e) => e.icon ? `${e.icon}` : "user-line"}"></${e}>
 	`;
 }
 function g() {
-	return e`
+	return n`
 		<span class="initials">${({ initials: e }) => e.substring(0, 2)}</span>
 	`;
 }
-function _(t, n) {
-	return t.href ? t._renderLinkElement(n, m) : t.clickable ? e`<button
+function _(e, t) {
+	return e.href ? e._renderLinkElement(t, m) : e.clickable ? n`<button
 			type="button"
 			class="${m}"
-			${l()}
+			${u()}
 		>
-			${n}
-		</button>` : e`<span class="${m}">${n}</span>`;
+			${t}
+		</button>` : n`<span class="${m}">${t}</span>`;
 }
 //#endregion
 //#region src/lib/avatar/index.ts
-r(n("avatar", p, (t) => {
-	let n = t.tagFor(s);
-	return e`
-		${(t) => _(t, e`<slot name="graphic">
+e(i("avatar", p, (e) => {
+	let t = e.tagFor(s);
+	return n`
+		${(e) => _(e, n`<slot name="graphic">
 					${a((e) => e.initials, g())}
-					${a((e) => !e.initials, e`<span class="icon"
-							><slot name="icon">${h(n)}</slot></span
+					${a((e) => !e.initials, n`<span class="icon"
+							><slot name="icon">${h(t)}</slot></span
 						>`)}</slot
 				>`)}
 	`;

package/badge/definition.cjs

@@ -1,5 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/numberConverter.cjs");
 const require_definition = require("../unbundled/definition16.cjs");
 exports.VwcBadgeElement = require_definition.Badge;
 exports.badgeDefinition = require_definition.badgeDefinition;

package/badge/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/numberConverter.js";
 import { n as registerBadge, r as Badge, t as badgeDefinition } from "../unbundled/definition16.js";
 export { Badge as VwcBadgeElement, badgeDefinition, registerBadge };

package/badge/index.cjs

@@ -1 +1 @@
-require(`../bundled/vivid-element.cjs`),require(`../bundled/numberConverter.cjs`),require(`../bundled/definition22.cjs`).n();
+require(`../bundled/definition22.cjs`).n();

package/badge/index.js

@@ -1,5 +1,3 @@
-import "../bundled/vivid-element.js";
-import "../bundled/numberConverter.js";
 import { n as e } from "../bundled/definition22.js";
 //#region src/lib/badge/index.ts
 e();

package/banner/definition.cjs

@@ -1,5 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/numberConverter.cjs");
 const require_definition = require("../unbundled/definition17.cjs");
 exports.VwcBannerElement = require_definition.Banner;
 exports.bannerDefinition = require_definition.bannerDefinition;

package/banner/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/numberConverter.js";
 import { n as registerBanner, r as Banner, t as bannerDefinition } from "../unbundled/definition17.js";
 export { Banner as VwcBannerElement, bannerDefinition, registerBanner };

package/banner/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/enums.cjs`);require(`../bundled/numberConverter.cjs`);const a=require(`../bundled/decorate.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/affix.cjs`),c=require(`../bundled/delegates-aria.cjs`),l=require(`../bundled/class-names.cjs`),u=require(`../bundled/definition6.cjs`);var d=`: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;background-color:var(--_appearance-color-fill);max-height:160px;color:var(--_appearance-color-text);transition:max-height var(--transition-delay,.2s);overflow:hidden}.control.removing{max-height:0}.header{box-sizing:border-box;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20));align-items:center;display:flex}.header .content{flex-grow:1;justify-content:center;align-items:center;column-gap:16px;inline-size:100%;padding:10px 16px;display:flex}.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}`,f={[i.n.Information]:`info-solid`,[i.n.Announcement]:`megaphone-solid`,[i.n.Success]:`check-circle-solid`,[i.n.Warning]:`warning-solid`,[i.n.Alert]:`error-solid`},p=(e=i.n.Information)=>f[e],m=class extends s.t(e.t(c.t(t.t))){constructor(...e){super(...e),this.dismissButtonAriaLabel=null,this.removable=!1}get conditionedIcon(){return this.icon??p(this.connotation)}connectedCallback(){super.connectedCallback(),this.addEventListener(`keydown`,this.#t)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`keydown`,this.#t)}remove(){this.$emit(`removing`);let e=this.shadowRoot&&this.shadowRoot.querySelector(`.control`);e?.classList.add(`removing`),e?.addEventListener(`transitionend`,this.#e)}#e=()=>{this.$emit(`removed`),this.parentElement&&this.parentElement.removeChild(this)};#t=e=>{e.key!==`Escape`||!this.removable||this.remove()}};a.t([t.l({attribute:`dismiss-aria-label`})],m.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.l({mode:`boolean`})],m.prototype,`removable`,void 0),a.t([t.l()],m.prototype,`text`,void 0),a.t([t.l()],m.prototype,`connotation`,void 0),a.t([t.T],m.prototype,`actionItemsSlottedContent`,void 0);var h=e=>l.t(`control`,[`connotation-${e.connotation}`,!!e.connotation]);function g(e){return t.d`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/enums.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/affix.cjs`),c=require(`../bundled/class-names.cjs`),l=require(`../bundled/delegates-aria.cjs`),u=require(`../bundled/definition6.cjs`);var d=`: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;background-color:var(--_appearance-color-fill);max-height:160px;color:var(--_appearance-color-text);transition:max-height var(--transition-delay,.2s);overflow:hidden}.control.removing{max-height:0}.header{box-sizing:border-box;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20));align-items:center;display:flex}.header .content{flex-grow:1;justify-content:center;align-items:center;column-gap:16px;inline-size:100%;padding:10px 16px;display:flex}.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}`,f={[i.n.Information]:`info-solid`,[i.n.Announcement]:`megaphone-solid`,[i.n.Success]:`check-circle-solid`,[i.n.Warning]:`warning-solid`,[i.n.Alert]:`error-solid`},p=(e=i.n.Information)=>f[e],m=class extends s.t(e.t(l.t(t.t))){constructor(...e){super(...e),this.dismissButtonAriaLabel=null,this.removable=!1,this.#e=()=>{this.$emit(`removed`),this.parentElement&&this.parentElement.removeChild(this)},this.#t=e=>{e.key!==`Escape`||!this.removable||this.remove()}}get conditionedIcon(){return this.icon??p(this.connotation)}connectedCallback(){super.connectedCallback(),this.addEventListener(`keydown`,this.#t)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`keydown`,this.#t)}remove(){this.$emit(`removing`);let e=this.shadowRoot&&this.shadowRoot.querySelector(`.control`);e?.classList.add(`removing`),e?.addEventListener(`transitionend`,this.#e)}#e;#t};a.t([t.m({attribute:`dismiss-aria-label`})],m.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.m({mode:`boolean`})],m.prototype,`removable`,void 0),a.t([t.m()],m.prototype,`text`,void 0),a.t([t.m()],m.prototype,`connotation`,void 0),a.t([t.A],m.prototype,`actionItemsSlottedContent`,void 0);var h=e=>c.t(`control`,[`connotation-${e.connotation}`,!!e.connotation]);function g(e){return t.p`
 	  <${e}
 	  		aria-label="${e=>e.dismissButtonAriaLabel||e.locale.banner.dismissButtonLabel}"
 			part="${e=>e.connotation===`warning`?``:`vvd-theme-alternate`}"
@@ -6,25 +6,25 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			class="dismiss-button"
 			icon="close-line"
 			@click="${e=>e.remove()}">
-	  </${e}>`}var _=(e,t)=>{let n=s.a(e),r=t.conditionedIcon,i=!t.icon&&t.connotation?{label:t.locale.connotationAnnoncement[`${t.connotation}Icon`],announceOnUpdate:!1}:void 0;return n(r,s.i.Slot,s.r.Hidden,i)},v=t.o(`banner`,m,e=>{let i=e.tagFor(u.i);return t.d`
+	  </${e}>`}var _=(e,t)=>{let n=s.a(e),r=t.conditionedIcon,i=!t.icon&&t.connotation?{label:t.locale.connotationAnnoncement[`${t.connotation}Icon`],announceOnUpdate:!1}:void 0;return n(r,s.i.Slot,s.r.Hidden,i)},v=t.u(`banner`,m,e=>{let i=e.tagFor(u.i);return t.p`
 		<div class="${h}">
 			<header class="header">
 				<div class="content">
 					${t=>_(e,t)}
 					<div
 						class="banner-message"
-						${c.n({role:e=>e.role?e.role:`status`,ariaLive:e=>e.ariaLive?e.ariaLive:`polite`})}
+						${l.n({role:e=>e.role?e.role:`status`,ariaLive:e=>e.ariaLive?e.ariaLive:`polite`})}
 					>
 						${e=>e.text}
 					</div>
 					<slot
 						class="action-items"
-						${r.t(`actionItemsSlottedContent`)}
+						${n.t(`actionItemsSlottedContent`)}
 						name="action-items"
 					></slot>
 				</div>
 
-				${n.t(e=>e.removable,g(i))}
+				${r.t(e=>e.removable,g(i))}
 			</header>
 		</div>
-	`},[o.t,u.t],{styles:d});t.s(v)();
+	`},[o.t,u.t],{styles:d});t.d(v)();

package/banner/index.js

@@ -1,14 +1,13 @@
 import { t as e } from "../bundled/localized.js";
-import { T as t, d as n, l as r, o as i, s as a, t as o } from "../bundled/vivid-element.js";
-import { t as s } from "../bundled/when.js";
-import { t as c } from "../bundled/slotted.js";
+import { A as t, d as n, m as r, p as i, t as a, u as o } from "../bundled/vivid-element.js";
+import { t as s } from "../bundled/slotted.js";
+import { t as c } from "../bundled/when.js";
 import { n as l } from "../bundled/enums.js";
-import "../bundled/numberConverter.js";
 import { t as u } from "../bundled/decorate.js";
 import { t as d } from "../bundled/definition2.js";
 import { a as f, i as p, r as m, t as h } from "../bundled/affix.js";
-import { n as g, t as _ } from "../bundled/delegates-aria.js";
-import { t as v } from "../bundled/class-names.js";
+import { t as g } from "../bundled/class-names.js";
+import { n as _, t as v } from "../bundled/delegates-aria.js";
 import { i as y, t as b } from "../bundled/definition6.js";
 //#region src/lib/banner/banner.scss?inline
 var x = ":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;background-color:var(--_appearance-color-fill);max-height:160px;color:var(--_appearance-color-text);transition:max-height var(--transition-delay,.2s);overflow:hidden}.control.removing{max-height:0}.header{box-sizing:border-box;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20));align-items:center;display:flex}.header .content{flex-grow:1;justify-content:center;align-items:center;column-gap:16px;inline-size:100%;padding:10px 16px;display:flex}.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}", S = {
@@ -17,9 +16,13 @@ var x = ":host{display:block}.control.connotation-success{--_connotation-color-p
 	[l.Success]: "check-circle-solid",
 	[l.Warning]: "warning-solid",
 	[l.Alert]: "error-solid"
-}, C = (e = l.Information) => S[e], w = class extends h(e(_(o))) {
+}, C = (e = l.Information) => S[e], w = class extends h(e(v(a))) {
 	constructor(...e) {
-		super(...e), this.dismissButtonAriaLabel = null, this.removable = !1;
+		super(...e), this.dismissButtonAriaLabel = null, this.removable = !1, this.#e = () => {
+			this.$emit("removed"), this.parentElement && this.parentElement.removeChild(this);
+		}, this.#t = (e) => {
+			e.key !== "Escape" || !this.removable || this.remove();
+		};
 	}
 	get conditionedIcon() {
 		return this.icon ?? C(this.connotation);
@@ -35,19 +38,15 @@ var x = ":host{display:block}.control.connotation-success{--_connotation-color-p
 		let e = this.shadowRoot && this.shadowRoot.querySelector(".control");
 		e?.classList.add("removing"), e?.addEventListener("transitionend", this.#e);
 	}
-	#e = () => {
-		this.$emit("removed"), this.parentElement && this.parentElement.removeChild(this);
-	};
-	#t = (e) => {
-		e.key !== "Escape" || !this.removable || this.remove();
-	};
+	#e;
+	#t;
 };
 u([r({ attribute: "dismiss-aria-label" })], w.prototype, "dismissButtonAriaLabel", void 0), u([r({ mode: "boolean" })], w.prototype, "removable", void 0), u([r()], w.prototype, "text", void 0), u([r()], w.prototype, "connotation", void 0), u([t], w.prototype, "actionItemsSlottedContent", void 0);
 //#endregion
 //#region src/lib/banner/banner.template.ts
-var T = (e) => v("control", [`connotation-${e.connotation}`, !!e.connotation]);
+var T = (e) => g("control", [`connotation-${e.connotation}`, !!e.connotation]);
 function E(e) {
-	return n`
+	return i`
 	  <${e}
 	  		aria-label="${(e) => e.dismissButtonAriaLabel || e.locale.banner.dismissButtonLabel}"
 			part="${(e) => e.connotation === "warning" ? "" : "vvd-theme-alternate"}"
@@ -66,16 +65,16 @@ var D = (e, t) => {
 };
 //#endregion
 //#region src/lib/banner/index.ts
-a(i("banner", w, (e) => {
+n(o("banner", w, (e) => {
 	let t = e.tagFor(y);
-	return n`
+	return i`
 		<div class="${T}">
 			<header class="header">
 				<div class="content">
 					${(t) => D(e, t)}
 					<div
 						class="banner-message"
-						${g({
+						${_({
 		role: (e) => e.role ? e.role : "status",
 		ariaLive: (e) => e.ariaLive ? e.ariaLive : "polite"
 	})}
@@ -84,12 +83,12 @@ a(i("banner", w, (e) => {
 					</div>
 					<slot
 						class="action-items"
-						${c("actionItemsSlottedContent")}
+						${s("actionItemsSlottedContent")}
 						name="action-items"
 					></slot>
 				</div>
 
-				${s((e) => e.removable, E(t))}
+				${c((e) => e.removable, E(t))}
 			</header>
 		</div>
 	`;