@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition14.js

@@ -1,395 +1,85 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
-import { t as Localized } from "./localized.js";
-import { i as Button, t as buttonDefinition } from "./definition7.js";
-import { s as MediaSkipBy } from "./enums.js";
-import { n as sliderDefinition, r as Slider } from "./definition11.js";
-import { i as MenuItem, t as menuItemDefinition } from "./definition12.js";
-import { r as Menu, t as menuDefinition } from "./definition13.js";
-import { t as getPlaybackRatesArray } from "./playbackRates.js";
-import { Observable, attr, html, repeat, when } from "@microsoft/fast-element";
+import { n as delegateAria } from "./delegates-aria.js";
+import { t as Linkable } from "./linkable.js";
+import { attr, html, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/audio-player/audio-player.scss?inline
-var audio_player_default = ":host{display:block}.wrapper{container-type:inline-size}.base{box-sizing:border-box;color:var(--vvd-color-canvas-text);user-select:none;align-items:center;gap:8px;inline-size:100%;padding:8px;display:inline-flex}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{grid-area:controls;justify-content:center;align-items:center;gap:8px;display:flex}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{min-inline-size:32px;margin-inline:6px}.base .playback-button{grid-area:playback}@container (width<=500px){.base.two-lines{grid-template:\"slider\"\"controls\"/1fr;row-gap:4px;inline-size:100%;display:inline-grid}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-columns:1fr auto;grid-template-areas:\"slider slider\"\"controls playback\"}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";
+//#region src/lib/avatar/avatar.scss?inline
+var avatar_default = ":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%}";
 //#endregion
-//#region src/lib/audio-player/audio-player.ts
-var SKIP_DIRECTIONS = {
-	FORWARD: 1,
-	BACKWARD: -1
-};
-function formatTime(time) {
-	if (!time || Number.isNaN(time)) return "0:00";
-	const min = Math.floor(time / 60);
-	const sec = Math.floor(time % 60);
-	return `${min}:${sec < 10 ? `0${sec}` : sec}`;
-}
-var PAUSE = true;
-var PLAY = false;
-/**
-* Converter to filter out invalid values for the skip-by attribute.
-*/
-var validSkipByConverter = {
-	toView(value) {
-		return value;
-	},
-	fromView(value) {
-		return Object.values(MediaSkipBy).includes(value) ? value : void 0;
-	}
-};
+//#region src/lib/avatar/avatar.ts
 /**
 * @public
-* @component audio-player
-* @event {CustomEvent<undefined>} play - Fires when the audio playback is started.
-* @event {CustomEvent<undefined>} pause - Fires when the audio playback is paused.
+* @component avatar
+* @slot graphic - Assign nodes to the graphic slot to set a graphic media of any kind (e.g. image, illustration etc).
+* @slot icon - The preferred way to add an icon to the component.
 */
-var AudioPlayer = class extends Localized(VividElement) {
+var Avatar = class extends Linkable(VividElement) {
 	constructor(..._args) {
 		super(..._args);
-		this.playButtonAriaLabel = null;
-		this.pauseButtonAriaLabel = null;
-		this.sliderAriaLabel = null;
-		this.skipForwardButtonAriaLabel = null;
-		this.skipBackwardButtonAriaLabel = null;
-		this.disabled = false;
-		this.notime = false;
-		this.playbackRates = null;
-		this.#playerEl = new Audio();
-		this.#isProgrammaticSliderUpdate = false;
-		this.durationFallback = false;
-		this.#onPlay = () => {
-			if (!this.#sliderEl?.isDragging) this.$emit("play", void 0, { bubbles: false });
-		};
-		this.#onPause = () => {
-			if (!this.#sliderEl?.isDragging) this.$emit("pause", void 0, { bubbles: false });
-		};
-		this.#pausedChanged = (pausing) => {
-			if (pausing === this.paused) {
-				this.#setPausedState();
-				return;
-			}
-			if (!this.paused) this.#playerEl.pause();
-			else {
-				this.#updateProgress();
-				this.#playerEl.play();
-			}
-			this.#setPausedState();
-		};
-		this.#updateProgress = () => {
-			Observable.notify(this, "currentTime");
-			const duration = this.duration;
-			const currentTime = this.currentTime;
-			const isValid = Number.isFinite(duration) && duration > 0 && Number.isFinite(currentTime) && currentTime >= 0;
-			const percent = isValid ? currentTime / duration * 100 : 0;
-			/* v8 ignore else -- @preserve */
-			if (this.#sliderEl) {
-				this.#isProgrammaticSliderUpdate = true;
-				this.#sliderEl.value = percent.toString();
-				this.#isProgrammaticSliderUpdate = false;
-			}
-			if (isValid && percent === 100) this.pause();
-		};
-		this.#updateTotalTime = () => {
-			Observable.notify(this, "duration");
-			if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
-				if (this.durationFallback) this.#fetchAndCacheAudioBuffer();
-			}
-		};
-		this.#updateCurrentTimeOnSliderChange = () => {
-			if (!this.paused && this.#sliderEl.isDragging) {
-				this.pause();
-				this.#dragInterval = window.setInterval(() => {
-					/* v8 ignore else -- @preserve */
-					if (!this.#sliderEl.isDragging || !this.isConnected) {
-						clearInterval(this.#dragInterval);
-						if (this.isConnected) this.play();
-					}
-				}, 0);
-			}
-			if (this.#isProgrammaticSliderUpdate) return;
-			this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
-		};
-		this.#setPausedState = () => {
-			Observable.notify(this, "paused");
-		};
-	}
-	/**
-	* @internal
-	*/
-	srcChanged() {
-		if (this.src === void 0) this.setSrc("");
-		else this.setSrc(this.src);
-	}
-	revokeSrc() {
-		const src = this.getCurrentSrc();
-		if (src && src.startsWith("blob:")) URL.revokeObjectURL(src);
-	}
-	getCurrentSrc() {
-		return this.#playerEl.currentSrc || this.#playerEl.src || "";
-	}
-	canPlayType(type) {
-		return this.#playerEl.canPlayType(type) !== "";
-	}
-	setSrc(url, blob) {
-		const prevSrc = this.getCurrentSrc();
-		this.revokeSrc();
-		this.#audioBuffer = void 0;
-		if (this.#fetchAbortController) {
-			this.#fetchAbortController.abort();
-			this.#fetchAbortController = void 0;
-		}
-		const newSrc = blob && (this.canPlayType(blob.type) || !url) ? URL.createObjectURL(blob) : url;
-		if (prevSrc) this.#playerEl.removeAttribute("src");
-		if (newSrc || url) try {
-			this.#playerEl.src = newSrc;
-		} catch (error) {
-			console.log("Falling back to original URL due to error:", error);
-			this.#playerEl.src = url;
-		}
-	}
-	get playbackRate() {
-		Observable.track(this, "playbackRate");
-		return this.#playerEl.playbackRate;
-	}
-	set playbackRate(value) {
-		this.#playerEl.playbackRate = value;
-		Observable.notify(this, "playbackRate");
-	}
-	get paused() {
-		Observable.track(this, "paused");
-		return this.#playerEl.paused;
-	}
-	set paused(_) {}
-	#audioBuffer;
-	#fetchAbortController;
-	async #fetchAndCacheAudioBuffer() {
-		if (this.#audioBuffer || !this.src) return;
-		this.#fetchAbortController = new AbortController();
-		const signal = this.#fetchAbortController.signal;
-		try {
-			const blob = await (await fetch(this.src, { signal })).blob();
-			this.setSrc(this.src, blob);
-			const arrayBuffer = await blob.arrayBuffer();
-			const audioContext = new window.AudioContext();
-			const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-			audioContext.close();
-			this.#audioBuffer = audioBuffer;
-			Observable.notify(this, "duration");
-		} catch (e) {
-			/* v8 ignore else -- @preserve */
-			if (e instanceof Error && e.name !== "AbortError") console.error("Error loading audio:", e);
-		} finally {
-			this.#fetchAbortController = void 0;
-		}
-	}
-	get duration() {
-		Observable.track(this, "duration");
-		const duration = this.#playerEl.duration;
-		if (Number.isFinite(duration) && duration > 0) return duration;
-		if (this.#audioBuffer && this.#audioBuffer.duration > 0) return this.#audioBuffer.duration;
-		return duration;
-	}
-	set duration(_) {}
-	get currentTime() {
-		Observable.track(this, "currentTime");
-		return this.#playerEl.currentTime;
-	}
-	set currentTime(value) {
-		this.#playerEl.currentTime = value;
-	}
-	get #sliderEl() {
-		return this.shadowRoot.querySelector(".slider");
-	}
-	#playerEl;
-	#isProgrammaticSliderUpdate;
-	connectedCallback() {
-		super.connectedCallback();
-		this.#playerEl.addEventListener("timeupdate", this.#updateProgress);
-		this.#playerEl.addEventListener("loadedmetadata", this.#updateTotalTime);
-		this.#playerEl.addEventListener("durationchange", this.#updateTotalTime);
-		this.#playerEl.addEventListener("play", this.#onPlay);
-		this.#playerEl.addEventListener("pause", this.#onPause);
-		this.#setSliderInteractionListeners();
-		this.#setPausedState();
-		this.#updateProgress();
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#setSliderInteractionListeners(false);
-		this.pause();
-		this.#playerEl.removeEventListener("timeupdate", this.#updateProgress);
-		this.#playerEl.removeEventListener("loadedmetadata", this.#updateTotalTime);
-		this.#playerEl.removeEventListener("durationchange", this.#updateTotalTime);
-		this.#playerEl.removeEventListener("play", this.#onPlay);
-		this.#playerEl.removeEventListener("pause", this.#onPause);
-	}
-	play() {
-		this.#pausedChanged(PLAY);
-	}
-	pause() {
-		this.#pausedChanged(PAUSE);
-	}
-	#onPlay;
-	#onPause;
-	#setSliderInteractionListeners(add = true) {
-		const action = add ? "addEventListener" : "removeEventListener";
-		/* v8 ignore else -- @preserve */
-		if (this.#sliderEl) this.#sliderEl[action]("change", this.#updateCurrentTimeOnSliderChange);
-	}
-	#pausedChanged;
-	#updateProgress;
-	#updateTotalTime;
-	#dragInterval;
-	#updateCurrentTimeOnSliderChange;
-	#setPausedState;
-	/**
-	* Skips the current time by the skipBy value
-	*
-	* @param skipDirection - the direction to skip
-	*
-	* @internal
-	*/
-	skip(skipDirection) {
-		const newTime = this.currentTime + parseInt(this.skipBy) * skipDirection;
-		this.currentTime = Math.max(0, Math.min(this.duration, newTime));
+		this.clickable = false;
 	}
 };
-__decorate([attr({ attribute: "play-button-aria-label" })], AudioPlayer.prototype, "playButtonAriaLabel", void 0);
-__decorate([attr({ attribute: "pause-button-aria-label" })], AudioPlayer.prototype, "pauseButtonAriaLabel", void 0);
-__decorate([attr({ attribute: "slider-aria-label" })], AudioPlayer.prototype, "sliderAriaLabel", void 0);
-__decorate([attr({ attribute: "skip-forward-aria-label" })], AudioPlayer.prototype, "skipForwardButtonAriaLabel", void 0);
-__decorate([attr({ attribute: "skip-backward-aria-label" })], AudioPlayer.prototype, "skipBackwardButtonAriaLabel", void 0);
-__decorate([attr], AudioPlayer.prototype, "connotation", void 0);
-__decorate([attr], AudioPlayer.prototype, "src", void 0);
-__decorate([attr({ mode: "boolean" })], AudioPlayer.prototype, "disabled", void 0);
-__decorate([attr({ mode: "boolean" })], AudioPlayer.prototype, "notime", void 0);
-__decorate([attr({
-	attribute: "skip-by",
-	converter: validSkipByConverter
-})], AudioPlayer.prototype, "skipBy", void 0);
-__decorate([attr({ attribute: "playback-rates" })], AudioPlayer.prototype, "playbackRates", void 0);
+__decorate([attr], Avatar.prototype, "connotation", void 0);
+__decorate([attr], Avatar.prototype, "shape", void 0);
+__decorate([attr], Avatar.prototype, "appearance", void 0);
+__decorate([attr], Avatar.prototype, "size", void 0);
+__decorate([attr], Avatar.prototype, "icon", void 0);
+__decorate([attr], Avatar.prototype, "initials", void 0);
 __decorate([attr({
 	mode: "boolean",
-	attribute: "duration-fallback"
-})], AudioPlayer.prototype, "durationFallback", void 0);
+	attribute: "clickable"
+})], Avatar.prototype, "clickable", void 0);
 //#endregion
-//#region src/lib/audio-player/audio-player.template.ts
-var getClasses = ({ notime, disabled, duration, skipBy, playbackRates }) => classNames(["disabled", disabled || !duration], ["two-lines", !notime && (Boolean(Number(skipBy)) || Boolean(playbackRates))], ["playback", Boolean(playbackRates)]);
-var isMenuItemChekced = (playbackRate, { parent }) => {
-	return playbackRate === parent.playbackRate;
-};
-function renderButton(context) {
-	const buttonTag = context.tagFor(Button);
-	return html`<${buttonTag} class="pause" @click="${(x) => x.paused ? x.play() : x.pause()}"
-	icon="${(x) => x.paused ? "play-solid" : "pause-solid"}"
-	aria-label="${(x) => x.paused ? x.playButtonAriaLabel || x.locale.audioPlayer.playButtonLabel : x.pauseButtonAriaLabel || x.locale.audioPlayer.pauseButtonLabel}"
-	size='condensed'
-	connotation="${(x) => x.connotation}"
-	?disabled="${(x) => x.disabled || !x.duration}"
-  ></${buttonTag}>`;
-}
-function renderBackwardSkipButtons(context) {
-	const buttonTag = context.tagFor(Button);
+//#region src/lib/avatar/avatar.template.ts
+var getClasses = (x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.size}`, Boolean(x.size)]);
+/**
+* @deprecated To be fully replaced with icon slot
+* Avatar icon
+*/
+function renderIcon(iconTag) {
 	return html`
-		<${buttonTag} class="skip backward"
-			@click="${(element) => element.skip(SKIP_DIRECTIONS.BACKWARD)}"
-		icon="${(x) => x.skipBy == MediaSkipBy.Five ? "5-sec-backward-line" : x.skipBy == MediaSkipBy.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
-		size='condensed'
-		aria-label="${(x) => x.skipBackwardButtonAriaLabel || x.locale.audioPlayer.skipBackwardButton}"
-		connotation="${(x) => x.connotation}"
-		?disabled="${(x) => x.disabled || !x.duration}"
-		></${buttonTag}>
+		<${iconTag} name="${(x) => x.icon ? x.icon : "user-line"}"></${iconTag}>
 	`;
 }
-function renderForwardSkipButtons(context) {
-	const buttonTag = context.tagFor(Button);
+/** Avatar initials */
+function renderInitials() {
 	return html`
-		<${buttonTag} class="skip forward"
-		@click="${(element) => element.skip(SKIP_DIRECTIONS.FORWARD)}"
-		icon="${(x) => x.skipBy == MediaSkipBy.Five ? "5-sec-forward-line" : x.skipBy == MediaSkipBy.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
-		size='condensed'
-		aria-label="${(x) => x.skipForwardButtonAriaLabel || x.locale.audioPlayer.skipForwardButton}"
-		connotation="${(x) => x.connotation}"
-		?disabled="${(x) => x.disabled || !x.duration}"
-		></${buttonTag}>
+		<span class="initials">${({ initials }) => initials.substring(0, 2)}</span>
 	`;
 }
-function renderSlider(context) {
-	const sliderTag = context.tagFor(Slider);
-	return html`
-	<${sliderTag}
-		class="slider"
-		aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
-		max="100"
-		aria-valuetext="${(x) => formatTime(x.currentTime)}"
-		connotation="${(x) => x.connotation}"
-		?disabled="${(x) => x.disabled || !x.duration}"
-		internal-part>
-	</${sliderTag}>`;
-}
-function renderTimestamp() {
-	return html` <div class="time-stamp">
-		<span class="current-time">${(x) => formatTime(x.currentTime || 0)}</span>
-		${when((x) => x.duration && x.duration !== Infinity, html`
-				<span>/</span>
-				<span class="total-time">${(x) => formatTime(x.duration)}</span>
-			`)}
-	</div>`;
-}
-function handlePlaybackRateClick(playbackRate, context) {
-	context.parent.playbackRate = playbackRate;
-	return true;
+function renderAvatarBaseElement(x, content) {
+	if (x.href) return x._renderLinkElement(content, getClasses);
+	else if (x.clickable) return html`<button
+			type="button"
+			class="${getClasses}"
+			${delegateAria()}
+		>
+			${content}
+		</button>`;
+	else return html`<span class="${getClasses}">${content}</span>`;
 }
-var AudioPlayerTemplate = (context) => {
-	const menuTag = context.tagFor(Menu);
-	const buttonTag = context.tagFor(Button);
-	const menuItemTag = context.tagFor(MenuItem);
-	return html` <div class="wrapper">
-		<div class="base ${getClasses}">
-			<div class="controls">
-				${when((x) => x.skipBy && x.skipBy != MediaSkipBy.Zero, renderBackwardSkipButtons(context))}
-				${renderButton(context)}
-				${when((x) => x.skipBy && x.skipBy != MediaSkipBy.Zero, renderForwardSkipButtons(context))}
-				${when((x) => !x.notime, renderTimestamp())}
-			</div>
-			${renderSlider(context)}
-			${when((x) => Boolean(x.playbackRates), html`
-			<${menuTag} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
-				<${buttonTag} id="playback-open-button"
-							  class="playback-button"
-							  slot="anchor"
-							  icon="playback-speed-line"
-							  aria-label="play back rates"
-							  size='condensed'
-							  connotation="${(x) => x.connotation}"
-							  ?disabled="${(x) => x.disabled || !x.duration}"
-				></${buttonTag}>
-
-				${repeat((x) => getPlaybackRatesArray(x.playbackRates), html`<${menuItemTag} @click="${handlePlaybackRateClick}"
-																			 control-type="radio"
-																			 class="playback-rate"
-																			 text="${(x) => x}"
-																			 check-appearance="tick-only"
-																			 ?checked="${isMenuItemChekced}"></${menuItemTag}>`)}
-			</${menuTag}>`)}
-		</div>
-	</div>`;
+var AvatarTemplate = (context) => {
+	const iconTag = context.tagFor(Icon);
+	return html`
+		${(x) => renderAvatarBaseElement(x, html`<slot name="graphic">
+					${when((x) => x.initials, renderInitials())}
+					${when((x) => !x.initials, html`<span class="icon"
+							><slot name="icon">${renderIcon(iconTag)}</slot></span
+						>`)}</slot
+				>`)}
+	`;
 };
 //#endregion
-//#region src/lib/audio-player/definition.ts
-/**
-* @internal
-*/
-var audioPlayerDefinition = defineVividComponent("audio-player", AudioPlayer, AudioPlayerTemplate, [
-	buttonDefinition,
-	sliderDefinition,
-	menuDefinition,
-	menuItemDefinition
-], { styles: audio_player_default });
+//#region src/lib/avatar/definition.ts
+/** @internal */
+var avatarDefinition = defineVividComponent("avatar", Avatar, AvatarTemplate, [iconDefinition], { styles: avatar_default });
 /**
-* Registers the audio-player element with the design system.
+* Registers the avatar elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerAudioPlayer = createRegisterFunction(audioPlayerDefinition);
+var registerAvatar = createRegisterFunction(avatarDefinition);
 //#endregion
-export { registerAudioPlayer as n, AudioPlayer as r, audioPlayerDefinition as t };
+export { registerAvatar as n, Avatar as r, avatarDefinition as t };

package/unbundled/definition15.cjs

@@ -2,106 +2,61 @@ require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_delegates_aria = require("./delegates-aria.cjs");
-const require_linkable = require("./linkable.cjs");
+const require_affix = require("./affix.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/avatar/avatar.scss?inline
-var avatar_default = ":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%}";
-//#endregion
-//#region src/lib/avatar/avatar.ts
+//#region src/lib/badge/badge.ts
 /**
 * @public
-* @component avatar
-* @slot graphic - Assign nodes to the graphic slot to set a graphic media of any kind (e.g. image, illustration etc).
+* @component badge
 * @slot icon - The preferred way to add an icon to the component.
 */
-var Avatar = class extends require_linkable.Linkable(require_vivid_element.VividElement) {
-	constructor(..._args) {
-		super(..._args);
-		this.clickable = false;
-	}
-};
-require_decorate.__decorate([_microsoft_fast_element.attr], Avatar.prototype, "connotation", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Avatar.prototype, "shape", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Avatar.prototype, "appearance", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Avatar.prototype, "size", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Avatar.prototype, "icon", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Avatar.prototype, "initials", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	mode: "boolean",
-	attribute: "clickable"
-})], Avatar.prototype, "clickable", void 0);
+var Badge = class extends require_affix.AffixIconWithTrailing(require_vivid_element.VividElement) {};
+require_decorate.__decorate([_microsoft_fast_element.attr], Badge.prototype, "connotation", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Badge.prototype, "shape", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Badge.prototype, "size", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Badge.prototype, "appearance", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Badge.prototype, "text", void 0);
 //#endregion
-//#region src/lib/avatar/avatar.template.ts
-var getClasses = ({ appearance, connotation, shape, size }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)]);
-/**
-* @deprecated To be fully replaced with icon slot
-* Avatar icon
-*/
-function renderIcon(iconTag) {
-	return _microsoft_fast_element.html`
-		<${iconTag} name="${(x) => x.icon ? x.icon : "user-line"}"></${iconTag}>
-	`;
-}
-/**
-* Avatar initials
-*/
-function renderInitials() {
-	return _microsoft_fast_element.html`
-		<span class="initials">${({ initials }) => initials.substring(0, 2)}</span>
-	`;
-}
-function renderAvatarBaseElement(x, content) {
-	if (x.href) return x._renderLinkElement(content, getClasses);
-	else if (x.clickable) return _microsoft_fast_element.html`<button
-			type="button"
-			class="${getClasses}"
-			${require_delegates_aria.delegateAria()}
-		>
-			${content}
-		</button>`;
-	else return _microsoft_fast_element.html`<span class="${getClasses}">${content}</span>`;
-}
-var AvatarTemplate = (context) => {
-	const iconTag = context.tagFor(require_definition.Icon);
-	return _microsoft_fast_element.html`
-		${(x) => renderAvatarBaseElement(x, _microsoft_fast_element.html`<slot name="graphic">
-					${(0, _microsoft_fast_element.when)((x) => x.initials, renderInitials())}
-					${(0, _microsoft_fast_element.when)((x) => !x.initials, _microsoft_fast_element.html`<span class="icon"
-							><slot name="icon">${renderIcon(iconTag)}</slot></span
-						>`)}</slot
-				>`)}
-	`;
+//#region src/lib/badge/badge.scss?inline
+var badge_default = ":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{box-sizing:border-box;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);font:var(--vvd-typography-base-condensed-bold);vertical-align:middle;justify-content:center;align-items:center;column-gap:8px;inline-size:100%;padding-inline:8px;display:inline-flex}.base:not(.size-expanded){--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size-expanded{--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;place-content:center;padding-inline:0}@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{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_badge-block-size) / 1.6667);flex-shrink:0;line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}";
+//#endregion
+//#region src/lib/badge/badge.template.ts
+var badgeTemplate = (context) => {
+	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
+	return _microsoft_fast_element.html` <span
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.size}`, Boolean(x.size)], ["icon-trailing", x.iconTrailing], ["icon-only", !x.text && (Boolean(x.icon) || Boolean(x.iconSlottedContent?.length))])}"
+	>
+		${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
+		${(0, _microsoft_fast_element.when)((x) => x.text, (x) => _microsoft_fast_element.html`<span class="text">${x.text}</span>`)}
+	</span>`;
 };
 //#endregion
-//#region src/lib/avatar/definition.ts
-/**
-* @internal
-*/
-var avatarDefinition = require_vivid_element.defineVividComponent("avatar", Avatar, AvatarTemplate, [require_definition.iconDefinition], { styles: avatar_default });
+//#region src/lib/badge/definition.ts
+/** @internal */
+var badgeDefinition = require_vivid_element.defineVividComponent("badge", Badge, badgeTemplate, [require_definition.iconDefinition], { styles: badge_default });
 /**
-* Registers the avatar elements with the design system.
+* Registers the badge elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerAvatar = require_vivid_element.createRegisterFunction(avatarDefinition);
+var registerBadge = require_vivid_element.createRegisterFunction(badgeDefinition);
 //#endregion
-Object.defineProperty(exports, "Avatar", {
+Object.defineProperty(exports, "Badge", {
 	enumerable: true,
 	get: function() {
-		return Avatar;
+		return Badge;
 	}
 });
-Object.defineProperty(exports, "avatarDefinition", {
+Object.defineProperty(exports, "badgeDefinition", {
 	enumerable: true,
 	get: function() {
-		return avatarDefinition;
+		return badgeDefinition;
 	}
 });
-Object.defineProperty(exports, "registerAvatar", {
+Object.defineProperty(exports, "registerBadge", {
 	enumerable: true,
 	get: function() {
-		return registerAvatar;
+		return registerBadge;
 	}
 });