@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/definition14.js

@@ -0,0 +1,388 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.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 { 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}}";
+//#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;
+	}
+};
+/**
+* @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.
+*/
+var AudioPlayer = class extends Localized(VividElement) {
+	/**
+	* @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 = new Audio();
+	#isProgrammaticSliderUpdate = false;
+	constructor() {
+		super();
+		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.durationFallback = false;
+	}
+	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 = () => {
+		if (!this.#sliderEl?.isDragging) this.$emit("play", void 0, { bubbles: false });
+	};
+	#onPause = () => {
+		if (!this.#sliderEl?.isDragging) this.$emit("pause", void 0, { bubbles: false });
+	};
+	#setSliderInteractionListeners(add = true) {
+		const action = add ? "addEventListener" : "removeEventListener";
+		/* v8 ignore else -- @preserve */
+		if (this.#sliderEl) this.#sliderEl[action]("change", this.#updateCurrentTimeOnSliderChange);
+	}
+	#pausedChanged = (pausing) => {
+		if (pausing === this.paused) {
+			this.#setPausedState();
+			return;
+		}
+		if (!this.paused) this.#playerEl.pause();
+		else {
+			this.#updateProgress();
+			this.#playerEl.play();
+		}
+		this.#setPausedState();
+	};
+	#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();
+	};
+	#updateTotalTime = () => {
+		Observable.notify(this, "duration");
+		if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
+			if (this.durationFallback) this.#fetchAndCacheAudioBuffer();
+		}
+	};
+	#dragInterval;
+	#updateCurrentTimeOnSliderChange = () => {
+		if (!this.paused && this.#sliderEl.isDragging) {
+			this.pause();
+			this.#dragInterval = window.setInterval(() => {
+				if (!this.#sliderEl.isDragging) {
+					clearInterval(this.#dragInterval);
+					this.play();
+				}
+			}, 0);
+		}
+		if (this.#isProgrammaticSliderUpdate) return;
+		/* v8 ignore else -- @preserve */
+		if (this.#playerEl) this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
+	};
+	#setPausedState = () => {
+		Observable.notify(this, "paused");
+	};
+	/**
+	* 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));
+	}
+};
+__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({
+	mode: "boolean",
+	attribute: "duration-fallback"
+})], AudioPlayer.prototype, "durationFallback", void 0);
+//#endregion
+//#region src/lib/audio-player/audio-player.template.ts
+var getClasses = ({ notime, disabled, duration, skipBy, playbackRates }) => classNames(["disabled", Boolean(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);
+	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}>
+	`;
+}
+function renderForwardSkipButtons(context) {
+	const buttonTag = context.tagFor(Button);
+	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}>
+	`;
+}
+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;
+}
+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>`;
+};
+//#endregion
+//#region src/lib/audio-player/definition.ts
+/**
+* @internal
+*/
+var audioPlayerDefinition = defineVividComponent("audio-player", AudioPlayer, AudioPlayerTemplate, [
+	buttonDefinition,
+	sliderDefinition,
+	menuDefinition,
+	menuItemDefinition
+], { styles: audio_player_default });
+/**
+* Registers the audio-player element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerAudioPlayer = createRegisterFunction(audioPlayerDefinition);
+//#endregion
+export { registerAudioPlayer as n, AudioPlayer as r, audioPlayerDefinition as t };

package/unbundled/definition15.cjs

@@ -0,0 +1,107 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_definition = require("./definition2.cjs");
+const require_decorate = require("./decorate.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/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
+/**
+* @public
+* @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 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);
+//#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
+				>`)}
+	`;
+};
+//#endregion
+//#region src/lib/avatar/definition.ts
+/**
+* @internal
+*/
+var avatarDefinition = require_vivid_element.defineVividComponent("avatar", Avatar, AvatarTemplate, [require_definition.iconDefinition], { styles: avatar_default });
+/**
+* Registers the avatar elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerAvatar = require_vivid_element.createRegisterFunction(avatarDefinition);
+//#endregion
+Object.defineProperty(exports, "Avatar", {
+	enumerable: true,
+	get: function() {
+		return Avatar;
+	}
+});
+Object.defineProperty(exports, "avatarDefinition", {
+	enumerable: true,
+	get: function() {
+		return avatarDefinition;
+	}
+});
+Object.defineProperty(exports, "registerAvatar", {
+	enumerable: true,
+	get: function() {
+		return registerAvatar;
+	}
+});

package/unbundled/definition15.js

@@ -0,0 +1,89 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { t as __decorate } from "./decorate.js";
+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/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
+/**
+* @public
+* @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 Avatar = class extends Linkable(VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.clickable = false;
+	}
+};
+__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: "clickable"
+})], Avatar.prototype, "clickable", void 0);
+//#endregion
+//#region src/lib/avatar/avatar.template.ts
+var getClasses = ({ appearance, connotation, shape, size }) => 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 html`
+		<${iconTag} name="${(x) => x.icon ? `${x.icon}` : "user-line"}"></${iconTag}>
+	`;
+}
+/**
+* Avatar initials
+*/
+function renderInitials() {
+	return 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 html`<button
+			type="button"
+			class="${getClasses}"
+			${delegateAria()}
+		>
+			${content}
+		</button>`;
+	else return html`<span class="${getClasses}">${content}</span>`;
+}
+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/avatar/definition.ts
+/**
+* @internal
+*/
+var avatarDefinition = defineVividComponent("avatar", Avatar, AvatarTemplate, [iconDefinition], { styles: avatar_default });
+/**
+* Registers the avatar elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerAvatar = createRegisterFunction(avatarDefinition);
+//#endregion
+export { registerAvatar as n, Avatar as r, avatarDefinition as t };