@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/definition51.js

@@ -0,0 +1,319 @@
+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, t as DelegatesAria } from "./delegates-aria.js";
+import { t as Localized } from "./localized.js";
+import { i as Button, t as buttonDefinition } from "./definition7.js";
+import { r as Elevation, t as elevationDefinition } from "./definition8.js";
+import { attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+import { arrow, autoUpdate, computePosition, flip, hide, inline, offset, shift } from "@floating-ui/dom";
+//#region src/lib/popover/popover.scss?inline
+var popover_default = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";
+//#endregion
+//#region src/lib/popover/popover.ts
+/**
+* @public
+* @component popover
+* @slot - Default slot for the popover content.
+* @slot anchor - Slot for the trigger element.
+* @slot footer - Use the footer slot in order to add action buttons or other contents to the bottom of the dialog.
+* @event {CustomEvent} open - Fired when the popover opens.
+* @event {CustomEvent} close - Fired when the popover closes.
+*/
+var Popover = class extends Localized(DelegatesAria(VividElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.placement = "bottom";
+		this.manual = false;
+		this.layout = "default";
+		this.offset = 8;
+		this.alternate = false;
+		this.dismissButtonAriaLabel = null;
+		this.arrow = false;
+		this.open = false;
+	}
+	/**
+	* @internal
+	*/
+	placementChanged() {
+		this.#updateAutoUpdate();
+	}
+	/**
+	* @internal
+	*/
+	arrowChanged() {
+		this.#updateAutoUpdate();
+	}
+	/**
+	* @internal
+	*/
+	openChanged(_oldValue, newValue) {
+		if (!this._popoverEl) return;
+		const isOpen = this._popoverEl.matches(":popover-open");
+		if (newValue && !isOpen) this._popoverEl.showPopover();
+		else if (!newValue && isOpen) this._popoverEl.hidePopover();
+		this.#updateAutoUpdate();
+	}
+	/**
+	* @internal
+	*/
+	anchorChanged() {
+		this.#updateAnchor();
+	}
+	/**
+	* @internal
+	*/
+	_slottedAnchorChanged() {
+		this.#updateAnchor();
+	}
+	/**
+	* @internal
+	*/
+	#currentAnchor = null;
+	/**
+	* @internal
+	*/
+	#updateAnchor() {
+		if (!this._popoverEl) return;
+		const newAnchor = this.anchor || this._slottedAnchor?.[0] || null;
+		if (this.#currentAnchor === newAnchor) return;
+		if (this.#currentAnchor) this.#unbindTrigger(this.#currentAnchor);
+		this.#currentAnchor = newAnchor;
+		if (this.#currentAnchor && this._popoverEl) {
+			this.#bindTrigger(this.#currentAnchor);
+			this.#updateAutoUpdate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	#bindTrigger(anchor) {
+		anchor.setAttribute("aria-haspopup", "dialog");
+		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = this._popoverEl;
+		else anchor.addEventListener("click", this.#manualToggle);
+	}
+	/**
+	* @internal
+	*/
+	#unbindTrigger(anchor) {
+		anchor.removeAttribute("aria-haspopup");
+		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = null;
+		else anchor.removeEventListener("click", this.#manualToggle);
+	}
+	/**
+	* @internal
+	*/
+	#manualToggle = () => {
+		this._popoverEl.togglePopover();
+	};
+	/**
+	* @internal
+	*/
+	get #middleware() {
+		let middleware = [
+			inline(),
+			flip(),
+			shift(),
+			hide()
+		];
+		/* v8 ignore next -- @preserve */
+		let offsetValue = this.offset ?? 0;
+		if (this.arrow && this._arrowEl) {
+			offsetValue = 12;
+			middleware = [...middleware, arrow({
+				element: this._arrowEl,
+				padding: 10
+			})];
+		}
+		/* v8 ignore else -- @preserve */
+		if (offsetValue > 0) middleware.unshift(offset(offsetValue));
+		return middleware;
+	}
+	/**
+	* @internal
+	*/
+	#cleanup;
+	/**
+	* @internal
+	*/
+	#updateAutoUpdate() {
+		this.#cleanup?.();
+		if (this.open && this.#currentAnchor && this._popoverEl) this.#cleanup = autoUpdate(this.#currentAnchor, this._popoverEl, this.#autoUpdateCallback);
+	}
+	/**
+	* Tracks the promise of the last position update.
+	* @internal
+	*/
+	#lastPositionUpdate;
+	/**
+	* @internal
+	*/
+	#autoUpdateCallback = () => {
+		this.#lastPositionUpdate = this.updatePosition();
+	};
+	/**
+	* Updates the position of the popover
+	* @public
+	*/
+	async updatePosition() {
+		/* v8 ignore if -- @preserve */
+		if (!this.open || !this.#currentAnchor || !this._popoverEl) return;
+		const positionData = await computePosition(this.#currentAnchor, this._popoverEl, {
+			placement: this.placement,
+			strategy: "fixed",
+			middleware: this.#middleware
+		});
+		/* v8 ignore if -- @preserve */
+		if (!this.open) return;
+		this.#assignPopoverPosition(positionData);
+		if (this.arrow && this._arrowEl) this.#assignArrowPosition(positionData);
+	}
+	/**
+	* @internal
+	*/
+	#assignPopoverPosition(data) {
+		const { x, y } = data;
+		Object.assign(this._popoverEl.style, {
+			left: `${x}px`,
+			top: `${y}px`,
+			visibility: data.middlewareData.hide?.referenceHidden ? "hidden" : "visible"
+		});
+	}
+	/**
+	* @internal
+	*/
+	#assignArrowPosition(data) {
+		/* v8 ignore if -- @preserve */
+		if (!this._arrowEl) return;
+		const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
+		const styles = {
+			left: "calc(100% - 4px)",
+			right: "-4px",
+			top: "calc(100% - 4px)",
+			bottom: "-4px"
+		};
+		const staticAxis = data.placement.split("-")[0];
+		Object.assign(this._arrowEl.style, {
+			left: arrowX ? `${arrowX}px` : styles[staticAxis],
+			top: arrowY ? `${arrowY}px` : styles[staticAxis]
+		});
+	}
+	/**
+	* Syncs native toggle state (Esc key, light dismiss) back to the 'open' attribute.
+	* @internal
+	*/
+	#handleNativeToggle = (e) => {
+		const isOpen = e.newState ? e.newState === "open" : this._popoverEl.matches(":popover-open");
+		if (this.open !== isOpen) this.open = isOpen;
+		this.$emit(isOpen ? "open" : "close", void 0, { bubbles: false });
+	};
+	connectedCallback() {
+		super.connectedCallback();
+		this.#updateAnchor();
+		/* v8 ignore else -- @preserve */
+		if (this._popoverEl) {
+			this._popoverEl.addEventListener("toggle", this.#handleNativeToggle);
+			if (this.open && !this._popoverEl.matches(":popover-open")) {
+				this._popoverEl.showPopover();
+				this.#updateAutoUpdate();
+			}
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanup?.();
+		if (this.#currentAnchor) {
+			this.#unbindTrigger(this.#currentAnchor);
+			this.#currentAnchor = null;
+		}
+		/* v8 ignore else -- @preserve */
+		if (this._popoverEl) this._popoverEl.removeEventListener("toggle", this.#handleNativeToggle);
+	}
+	show() {
+		this.open = true;
+		return this.#lastPositionUpdate ?? Promise.resolve();
+	}
+	hide() {
+		this.open = false;
+	}
+	toggle() {
+		this.open = !this.open;
+	}
+};
+__decorate([attr({ mode: "fromView" })], Popover.prototype, "placement", void 0);
+__decorate([attr({ mode: "boolean" })], Popover.prototype, "manual", void 0);
+__decorate([attr({ mode: "fromView" })], Popover.prototype, "layout", void 0);
+__decorate([attr({
+	attribute: "offset",
+	mode: "fromView",
+	converter: nullableNumberConverter
+})], Popover.prototype, "offset", void 0);
+__decorate([attr({ mode: "boolean" })], Popover.prototype, "alternate", void 0);
+__decorate([attr({ attribute: "dismiss-button-aria-label" })], Popover.prototype, "dismissButtonAriaLabel", void 0);
+__decorate([attr({ mode: "boolean" })], Popover.prototype, "arrow", void 0);
+__decorate([attr({ mode: "boolean" })], Popover.prototype, "open", void 0);
+__decorate([observable], Popover.prototype, "anchor", void 0);
+__decorate([observable], Popover.prototype, "_slottedAnchor", void 0);
+//#endregion
+//#region src/lib/popover/popover.template.ts
+var getClasses = ({ open, manual, layout }) => classNames("control", ["open", Boolean(open)], ["manual", Boolean(manual)], ["condensed", layout === "condensed"]);
+/**
+* The template for the Popover component.
+*
+* @param context - element definition context
+* @public
+*/
+var popoverTemplate = (context) => {
+	const elevationTag = context.tagFor(Elevation);
+	const buttonTag = context.tagFor(Button);
+	const iconTag = context.tagFor(Icon);
+	return html`
+		<slot name="anchor" ${slotted("_slottedAnchor")}></slot>
+		<${elevationTag}>
+			<div class="base" 
+				${ref("_popoverEl")} 
+				popover="${(x) => x.manual ? "manual" : "auto"}"
+				tabindex="-1"
+				autofocus
+				${delegateAria({
+		role: "dialog",
+		ariaModal: "false"
+	})}
+			>
+				<div class="${getClasses}" 
+					part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
+					<slot></slot>
+					<slot name="footer"></slot>
+					${when((x) => x.manual, html`<${buttonTag}
+							aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.popover.dismissButtonLabel}"
+							type="button"
+							size="condensed"
+							class="dismiss-button"
+							@click="${(x) => x.hide()}">
+							<${iconTag} name="close-line" slot="icon"></${iconTag}>
+						</${buttonTag}>`)}
+					${when((x) => x.arrow, html`<div class="arrow" ${ref("_arrowEl")}></div>`)}
+				</div>
+			</div>
+		</${elevationTag}>
+	`;
+};
+//#endregion
+//#region src/lib/popover/definition.ts
+var popoverDefinition = defineVividComponent("popover", Popover, popoverTemplate, [
+	buttonDefinition,
+	iconDefinition,
+	elevationDefinition
+], {
+	styles: popover_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the popover element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerPopover = createRegisterFunction(popoverDefinition);
+//#endregion
+export { registerPopover as n, Popover as r, popoverDefinition as t };

package/unbundled/definition52.cjs

@@ -0,0 +1,86 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
+const require_base_progress = require("./base-progress.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/progress/progress.scss?inline
+var progress_default = ".base{outline:none;align-items:center;height:6px;margin:0}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary:var(--vvd-progress-cta-primary,var(--vvd-color-cta-500));--_connotation-color-soft:var(--vvd-progress-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary:var(--vvd-progress-alert-primary,var(--vvd-color-alert-500));--_connotation-color-soft:var(--vvd-progress-alert-soft,var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary:var(--vvd-progress-success-primary,var(--vvd-color-success-500));--_connotation-color-soft:var(--vvd-progress-success-soft,var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary:var(--vvd-progress-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-progress-accent-soft,var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-pacific{--_connotation-color-primary:linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{align-items:center;block-size:100%;inline-size:100%;display:flex;position:relative;overflow:hidden}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%;display:flex}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{inline-size:30%;animation:2s infinite indeterminate-1}.indicator-2{inline-size:60%;animation:2s infinite indeterminate-2}.indicator-1,.indicator-2{background-color:var(--vvd-color-neutral-100);opacity:0;block-size:100%;animation-timing-function:cubic-bezier(.4,0,.6,1);position:absolute}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{background-color:var(--_connotation-color-primary);animation-play-state:paused}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
+//#endregion
+//#region src/lib/progress/progress.ts
+/**
+* @public
+* @component progress
+*/
+var Progress = class extends require_delegates_aria.DelegatesAria(require_base_progress.BaseProgress) {
+	constructor(..._args) {
+		super(..._args);
+		this.reverse = false;
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], Progress.prototype, "shape", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], Progress.prototype, "connotation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Progress.prototype, "reverse", void 0);
+//#endregion
+//#region src/lib/progress/progress.template.ts
+var getClasses = ({ connotation, shape, reverse, paused }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], [`shape-${shape}`, Boolean(shape)], ["reverse", Boolean(reverse)], ["paused", Boolean(paused)]);
+function determinate() {
+	return _microsoft_fast_element.html` <span
+		class="determinate"
+		style="width: ${(x) => x.percentComplete}%"
+	></span>`;
+}
+function indeterminate() {
+	return _microsoft_fast_element.html` <span class="indeterminate" name="indeterminate">
+		<span class="indicator-1"></span>
+		<span class="indicator-2"></span>
+	</span>`;
+}
+var ProgressTemplate = _microsoft_fast_element.html`<template>
+	<div
+		class="${getClasses}"
+		${require_delegates_aria.delegateAria({
+	role: "progressbar",
+	ariaValueNow: (x) => x.value,
+	ariaValueMin: (x) => x.min,
+	ariaValueMax: (x) => x.max
+})}
+	>
+		<div class="progress">
+			${(0, _microsoft_fast_element.when)((x) => typeof x.value === "number", determinate())}
+			${(0, _microsoft_fast_element.when)((x) => typeof x.value !== "number", indeterminate())}
+		</div>
+	</div>
+</template>`;
+//#endregion
+//#region src/lib/progress/definition.ts
+/**
+* @internal
+*/
+var progressDefinition = require_vivid_element.defineVividComponent("progress", Progress, ProgressTemplate, [], { styles: progress_default });
+/**
+* Registers the progress elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerProgress = require_vivid_element.createRegisterFunction(progressDefinition);
+//#endregion
+Object.defineProperty(exports, "Progress", {
+	enumerable: true,
+	get: function() {
+		return Progress;
+	}
+});
+Object.defineProperty(exports, "progressDefinition", {
+	enumerable: true,
+	get: function() {
+		return progressDefinition;
+	}
+});
+Object.defineProperty(exports, "registerProgress", {
+	enumerable: true,
+	get: function() {
+		return registerProgress;
+	}
+});

package/unbundled/definition52.js

@@ -0,0 +1,67 @@
+import { o as defineVividComponent, s as createRegisterFunction } from "./vivid-element.js";
+import { t as __decorate } from "./decorate.js";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { t as BaseProgress } from "./base-progress.js";
+import { attr, html, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/progress/progress.scss?inline
+var progress_default = ".base{outline:none;align-items:center;height:6px;margin:0}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary:var(--vvd-progress-cta-primary,var(--vvd-color-cta-500));--_connotation-color-soft:var(--vvd-progress-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary:var(--vvd-progress-alert-primary,var(--vvd-color-alert-500));--_connotation-color-soft:var(--vvd-progress-alert-soft,var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary:var(--vvd-progress-success-primary,var(--vvd-color-success-500));--_connotation-color-soft:var(--vvd-progress-success-soft,var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary:var(--vvd-progress-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-progress-accent-soft,var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-pacific{--_connotation-color-primary:linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{align-items:center;block-size:100%;inline-size:100%;display:flex;position:relative;overflow:hidden}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%;display:flex}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{inline-size:30%;animation:2s infinite indeterminate-1}.indicator-2{inline-size:60%;animation:2s infinite indeterminate-2}.indicator-1,.indicator-2{background-color:var(--vvd-color-neutral-100);opacity:0;block-size:100%;animation-timing-function:cubic-bezier(.4,0,.6,1);position:absolute}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{background-color:var(--_connotation-color-primary);animation-play-state:paused}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
+//#endregion
+//#region src/lib/progress/progress.ts
+/**
+* @public
+* @component progress
+*/
+var Progress = class extends DelegatesAria(BaseProgress) {
+	constructor(..._args) {
+		super(..._args);
+		this.reverse = false;
+	}
+};
+__decorate([attr()], Progress.prototype, "shape", void 0);
+__decorate([attr()], Progress.prototype, "connotation", void 0);
+__decorate([attr({ mode: "boolean" })], Progress.prototype, "reverse", void 0);
+//#endregion
+//#region src/lib/progress/progress.template.ts
+var getClasses = ({ connotation, shape, reverse, paused }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], [`shape-${shape}`, Boolean(shape)], ["reverse", Boolean(reverse)], ["paused", Boolean(paused)]);
+function determinate() {
+	return html` <span
+		class="determinate"
+		style="width: ${(x) => x.percentComplete}%"
+	></span>`;
+}
+function indeterminate() {
+	return html` <span class="indeterminate" name="indeterminate">
+		<span class="indicator-1"></span>
+		<span class="indicator-2"></span>
+	</span>`;
+}
+//#endregion
+//#region src/lib/progress/definition.ts
+/**
+* @internal
+*/
+var progressDefinition = defineVividComponent("progress", Progress, html`<template>
+	<div
+		class="${getClasses}"
+		${delegateAria({
+	role: "progressbar",
+	ariaValueNow: (x) => x.value,
+	ariaValueMin: (x) => x.min,
+	ariaValueMax: (x) => x.max
+})}
+	>
+		<div class="progress">
+			${when((x) => typeof x.value === "number", determinate())}
+			${when((x) => typeof x.value !== "number", indeterminate())}
+		</div>
+	</div>
+</template>`, [], { styles: progress_default });
+/**
+* Registers the progress elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerProgress = createRegisterFunction(progressDefinition);
+//#endregion
+export { registerProgress as n, Progress as r, progressDefinition as t };

package/unbundled/definition53.cjs

@@ -0,0 +1,193 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_form_associated = require("./form-associated.cjs");
+const require_form_element = require("./form-element.cjs");
+const require_with_error_text = require("./with-error-text.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/radio/radio.scss?inline
+var radio_default = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-radio-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-radio-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-radio-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-radio-cta-firm,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-radio-cta-fierce,var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-radio-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-radio-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-radio-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-radio-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-radio-accent-fierce,var(--vvd-color-neutral-700))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base{cursor:pointer;align-items:center;gap:8px;display:inline-flex}@supports (user-select:none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:50%;flex-shrink:0;position:relative}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";opacity:1;transition:opacity .2s;position:absolute;inset:5px}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color:transparent;position:relative}:host(:focus-visible) .control:before{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
+//#endregion
+//#region src/lib/radio/radio.ts
+/**
+* @public
+* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value changes
+* @component radio
+* @testAction check click #control
+* @testQuery checked checked true
+* @testQuery unchecked checked false
+* @testRef control shadow .control
+*/
+var Radio = class extends require_with_error_text.WithErrorText(require_form_element.FormElement(require_form_associated.CheckableFormAssociated(require_vivid_element.VividElement))) {
+	/**
+	* @internal
+	*/
+	readOnlyChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.readOnly = this.readOnly;
+	}
+	/**
+	* @internal
+	*/
+	defaultCheckedChanged() {
+		if (this.$fastController.isConnected && !this.dirtyChecked) {
+			/* v8 ignore else -- @preserve */
+			if (!this.isInsideRadioGroup()) {
+				this.checked = this.defaultChecked;
+				this.dirtyChecked = false;
+			}
+		}
+	}
+	constructor() {
+		super();
+		this.initialValue = "on";
+		this.defaultSlottedNodes = [];
+		this.keypressHandler = (e) => {
+			switch (e.key) {
+				case _microsoft_fast_web_utilities.keySpace:
+					if (!this.checked && !this.readOnly) this.checked = true;
+					return;
+			}
+			return true;
+		};
+		this.proxy = document.createElement("input");
+		this.proxy.setAttribute("type", "radio");
+		this.proxy.setAttribute("name", this.name);
+		this.checked = this.defaultChecked;
+		this.dirtyChecked = false;
+	}
+	/**
+	* @internal
+	*/
+	nameChanged(previous, next) {
+		super.nameChanged(previous, next);
+		next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
+		_microsoft_fast_element.Updates.enqueue(this.validate);
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		_microsoft_fast_element.Updates.enqueue(this.validate);
+		if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
+			/* v8 ignore else -- @preserve */
+			if (!this.disabled) this.setAttribute("tabindex", "0");
+		}
+		if (this.defaultChecked) {
+			/* v8 ignore else -- @preserve */
+			if (!this.dirtyChecked) {
+				if (!this.isInsideRadioGroup()) {
+					this.checked = this.defaultChecked;
+					this.dirtyChecked = false;
+				}
+			}
+		}
+	}
+	isInsideRadioGroup() {
+		return this.closest("[data-vvd-component=\"radio-group\"]") !== null;
+	}
+	/**
+	* @internal
+	*/
+	clickHandler(_) {
+		if (!this.disabled && !this.readOnly && !this.checked) this.checked = true;
+	}
+	get #radioSiblings() {
+		const siblings = this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);
+		if (siblings) return Array.from(siblings);
+		return [];
+	}
+	get #radioGroup() {
+		const parentGroup = this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`);
+		if (parentGroup) return parentGroup;
+		return null;
+	}
+	#validateValueMissingWithSiblings = () => {
+		const siblings = this.#radioSiblings;
+		const group = this.#radioGroup;
+		if (siblings && siblings.length > 1) {
+			if (siblings.some((x) => x.checked)) {
+				this.setValidity({ valueMissing: false });
+				this.errorValidationMessage = "";
+				if (group) group.errorValidationMessage = "";
+			}
+		}
+	};
+	#syncSiblingsRequiredValidationStatus = () => {
+		if (this.elementInternals && !this.validity.valueMissing) {
+			const siblings = this.#radioSiblings;
+			const group = this.#radioGroup;
+			if (siblings && siblings.length > 1) siblings.forEach((x) => {
+				x.elementInternals.setValidity({ valueMissing: false });
+				x.errorValidationMessage = "";
+				if (group) group.errorValidationMessage = "";
+			});
+		}
+	};
+	/**
+	* @internal
+	*/
+	validate(anchor) {
+		super.validate(anchor);
+		if (this.proxy) {
+			this.errorValidationMessage = this.validationMessage || "";
+			if (this.validity.valueMissing) this.#validateValueMissingWithSiblings();
+			else this.#syncSiblingsRequiredValidationStatus();
+		}
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.attr], Radio.prototype, "connotation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "readonly",
+	mode: "boolean"
+})], Radio.prototype, "readOnly", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Radio.prototype, "defaultSlottedNodes", void 0);
+//#endregion
+//#region src/lib/radio/radio.template.ts
+var getClasses = ({ connotation, checked, readOnly, disabled }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["checked", Boolean(checked)], ["readonly", Boolean(readOnly)], ["disabled", Boolean(disabled)]);
+var RadioTemplate = _microsoft_fast_element.html`<template
+	aria-checked="${(x) => x?.checked}"
+	aria-disabled="${(x) => x?.disabled}"
+	aria-required="${(x) => x?.required}"
+	@keypress="${(x, c) => x?.keypressHandler(c.event)}"
+	@click="${(x, c) => x?.clickHandler(c.event)}"
+	role="radio"
+>
+	<div class="${getClasses}">
+		<div class="control"></div>
+		${(0, _microsoft_fast_element.when)((x) => x?.label, _microsoft_fast_element.html`<label class="label">${(x) => x?.label}</label>`)}
+	</div>
+</template>`;
+//#endregion
+//#region src/lib/radio/definition.ts
+/**
+* @internal
+*/
+var radioDefinition = require_vivid_element.defineVividComponent("radio", Radio, RadioTemplate, [], { styles: radio_default });
+/**
+* Registers the radio elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerRadio = require_vivid_element.createRegisterFunction(radioDefinition);
+//#endregion
+Object.defineProperty(exports, "Radio", {
+	enumerable: true,
+	get: function() {
+		return Radio;
+	}
+});
+Object.defineProperty(exports, "radioDefinition", {
+	enumerable: true,
+	get: function() {
+		return radioDefinition;
+	}
+});
+Object.defineProperty(exports, "registerRadio", {
+	enumerable: true,
+	get: function() {
+		return registerRadio;
+	}
+});