@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/unbundled/definition14.cjs

@@ -1,413 +1,103 @@
 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_localized = require("./localized.cjs");
-const require_definition = require("./definition7.cjs");
-const require_enums = require("./enums.cjs");
-const require_definition$1 = require("./definition11.cjs");
-const require_definition$2 = require("./definition12.cjs");
-const require_definition$3 = require("./definition13.cjs");
-const require_playbackRates = require("./playbackRates.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
+const require_linkable = require("./linkable.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@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(require_enums.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 require_localized.Localized(require_vivid_element.VividElement) {
+var Avatar = class extends require_linkable.Linkable(require_vivid_element.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 = () => {
-			_microsoft_fast_element.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 = () => {
-			_microsoft_fast_element.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 = () => {
-			_microsoft_fast_element.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() {
-		_microsoft_fast_element.Observable.track(this, "playbackRate");
-		return this.#playerEl.playbackRate;
-	}
-	set playbackRate(value) {
-		this.#playerEl.playbackRate = value;
-		_microsoft_fast_element.Observable.notify(this, "playbackRate");
-	}
-	get paused() {
-		_microsoft_fast_element.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;
-			_microsoft_fast_element.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() {
-		_microsoft_fast_element.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() {
-		_microsoft_fast_element.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;
 	}
 };
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "play-button-aria-label" })], AudioPlayer.prototype, "playButtonAriaLabel", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "pause-button-aria-label" })], AudioPlayer.prototype, "pauseButtonAriaLabel", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "slider-aria-label" })], AudioPlayer.prototype, "sliderAriaLabel", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "skip-forward-aria-label" })], AudioPlayer.prototype, "skipForwardButtonAriaLabel", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "skip-backward-aria-label" })], AudioPlayer.prototype, "skipBackwardButtonAriaLabel", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], AudioPlayer.prototype, "connotation", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], AudioPlayer.prototype, "src", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], AudioPlayer.prototype, "disabled", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], AudioPlayer.prototype, "notime", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "skip-by",
-	converter: validSkipByConverter
-})], AudioPlayer.prototype, "skipBy", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "playback-rates" })], AudioPlayer.prototype, "playbackRates", void 0);
+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: "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 }) => (0, _microsoft_fast_web_utilities.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(require_definition.Button);
-	return _microsoft_fast_element.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(require_definition.Button);
+//#region src/lib/avatar/avatar.template.ts
+var getClasses = (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)]);
+/**
+* @deprecated To be fully replaced with icon slot
+* Avatar icon
+*/
+function renderIcon(iconTag) {
 	return _microsoft_fast_element.html`
-		<${buttonTag} class="skip backward"
-			@click="${(element) => element.skip(SKIP_DIRECTIONS.BACKWARD)}"
-		icon="${(x) => x.skipBy == require_enums.MediaSkipBy.Five ? "5-sec-backward-line" : x.skipBy == require_enums.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(require_definition.Button);
+/** Avatar initials */
+function renderInitials() {
 	return _microsoft_fast_element.html`
-		<${buttonTag} class="skip forward"
-		@click="${(element) => element.skip(SKIP_DIRECTIONS.FORWARD)}"
-		icon="${(x) => x.skipBy == require_enums.MediaSkipBy.Five ? "5-sec-forward-line" : x.skipBy == require_enums.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(require_definition$1.Slider);
-	return _microsoft_fast_element.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 _microsoft_fast_element.html` <div class="time-stamp">
-		<span class="current-time">${(x) => formatTime(x.currentTime || 0)}</span>
-		${(0, _microsoft_fast_element.when)((x) => x.duration && x.duration !== Infinity, _microsoft_fast_element.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 _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 AudioPlayerTemplate = (context) => {
-	const menuTag = context.tagFor(require_definition$3.Menu);
-	const buttonTag = context.tagFor(require_definition.Button);
-	const menuItemTag = context.tagFor(require_definition$2.MenuItem);
-	return _microsoft_fast_element.html` <div class="wrapper">
-		<div class="base ${getClasses}">
-			<div class="controls">
-				${(0, _microsoft_fast_element.when)((x) => x.skipBy && x.skipBy != require_enums.MediaSkipBy.Zero, renderBackwardSkipButtons(context))}
-				${renderButton(context)}
-				${(0, _microsoft_fast_element.when)((x) => x.skipBy && x.skipBy != require_enums.MediaSkipBy.Zero, renderForwardSkipButtons(context))}
-				${(0, _microsoft_fast_element.when)((x) => !x.notime, renderTimestamp())}
-			</div>
-			${renderSlider(context)}
-			${(0, _microsoft_fast_element.when)((x) => Boolean(x.playbackRates), _microsoft_fast_element.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}>
-
-				${(0, _microsoft_fast_element.repeat)((x) => require_playbackRates.getPlaybackRatesArray(x.playbackRates), _microsoft_fast_element.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(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
+				>`)}
+	`;
 };
 //#endregion
-//#region src/lib/audio-player/definition.ts
-/**
-* @internal
-*/
-var audioPlayerDefinition = require_vivid_element.defineVividComponent("audio-player", AudioPlayer, AudioPlayerTemplate, [
-	require_definition.buttonDefinition,
-	require_definition$1.sliderDefinition,
-	require_definition$3.menuDefinition,
-	require_definition$2.menuItemDefinition
-], { styles: audio_player_default });
+//#region src/lib/avatar/definition.ts
+/** @internal */
+var avatarDefinition = require_vivid_element.defineVividComponent("avatar", Avatar, AvatarTemplate, [require_definition.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 = require_vivid_element.createRegisterFunction(audioPlayerDefinition);
+var registerAvatar = require_vivid_element.createRegisterFunction(avatarDefinition);
 //#endregion
-Object.defineProperty(exports, "AudioPlayer", {
+Object.defineProperty(exports, "Avatar", {
 	enumerable: true,
 	get: function() {
-		return AudioPlayer;
+		return Avatar;
 	}
 });
-Object.defineProperty(exports, "audioPlayerDefinition", {
+Object.defineProperty(exports, "avatarDefinition", {
 	enumerable: true,
 	get: function() {
-		return audioPlayerDefinition;
+		return avatarDefinition;
 	}
 });
-Object.defineProperty(exports, "registerAudioPlayer", {
+Object.defineProperty(exports, "registerAvatar", {
 	enumerable: true,
 	get: function() {
-		return registerAudioPlayer;
+		return registerAvatar;
 	}
 });