@vonage/vivid 5.24.0 → 5.27.0

package/unbundled/definition57.js

@@ -1,64 +1,57 @@
-import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } 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%)}}";
+import { t as isApplePlatform } from "./platform.js";
+import { html, observable, slotted } from "@microsoft/fast-element";
+//#region src/lib/platform-switch/platform-switch.scss?inline
+var platform_switch_default = ":host{display:contents}";
 //#endregion
-//#region src/lib/progress/progress.ts
+//#region src/lib/platform-switch/platform-switch.ts
 /**
 * @public
-* @component progress
+* @component platform-switch
+* @slot - Default slot accepts children with optional platform constraints.
 */
-var Progress = class extends DelegatesAria(BaseProgress) {
-	constructor(..._args) {
-		super(..._args);
-		this.reverse = false;
+var PlatformSwitch = class extends VividElement {
+	/** @internal */
+	slottedContentChanged() {
+		this.#updateVisibility();
+	}
+	#updateVisibility() {
+		const children = this.slottedContent.filter((n) => n instanceof HTMLElement);
+		let matched = false;
+		for (const child of children) {
+			if (matched) {
+				child.hidden = true;
+				continue;
+			}
+			if (this.#matches(child)) {
+				child.hidden = false;
+				matched = true;
+			} else child.hidden = true;
+		}
+	}
+	#matches(el) {
+		const keyboard = isApplePlatform() ? "apple" : "standard";
+		const keyboardConstraint = el.dataset.keyboard;
+		if (keyboardConstraint === void 0) return true;
+		return keyboardConstraint === keyboard;
 	}
 };
-__decorate([attr()], Progress.prototype, "shape", void 0);
-__decorate([attr()], Progress.prototype, "connotation", void 0);
-__decorate([attr({ mode: "boolean" })], Progress.prototype, "reverse", void 0);
+__decorate([observable], PlatformSwitch.prototype, "slottedContent", void 0);
 //#endregion
-//#region src/lib/progress/progress.template.ts
-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>`;
-}
+//#region src/lib/platform-switch/platform-switch.template.ts
+var PlatformSwitchTemplate = () => {
+	return html`<slot ${slotted("slottedContent")}></slot>`;
+};
 //#endregion
-//#region src/lib/progress/definition.ts
+//#region src/lib/platform-switch/definition.ts
 /** @internal */
-var progressDefinition = defineVividComponent("progress", Progress, html`<template>
-	<div
-		class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], [`shape-${x.shape}`, Boolean(x.shape)], ["reverse", x.reverse], ["paused", x.paused])}"
-		${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 });
+var platformSwitchDefinition = defineVividComponent("platform-switch", PlatformSwitch, PlatformSwitchTemplate, [], { styles: platform_switch_default });
 /**
-* Registers the progress elements with the design system.
+* Registers the platform-switch element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerProgress = createRegisterFunction(progressDefinition);
+var registerPlatformSwitch = createRegisterFunction(platformSwitchDefinition);
 //#endregion
-export { registerProgress as n, Progress as r, progressDefinition as t };
+export { registerPlatformSwitch as n, PlatformSwitch as r, platformSwitchDefinition as t };

package/unbundled/definition58.cjs

@@ -1,181 +1,318 @@
-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_form_associated = require("./form-associated.cjs");
-const require_form_element = require("./form-element.cjs");
-const require_with_error_text = require("./with-error-text.cjs");
+const require_icon = require("./icon.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
+const require_localized = require("./localized.cjs");
+const require_definition$1 = require("./definition6.cjs");
+const require_definition$2 = require("./definition7.cjs");
+const require_anchored = require("./anchored.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-600);--_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;user-select:none;align-items:center;gap:8px;display:inline-flex}.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)}";
+let _floating_ui_dom = require("@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/radio/radio.ts
+//#region src/lib/popover/popover.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
+* @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 Popover.
+* @event {CustomEvent} open - Fired when the popover opens.
+* @event {CustomEvent} close - Fired when the popover closes.
 */
-var Radio = class extends require_with_error_text.WithErrorText(require_form_element.FormElement(require_form_associated.CheckableFormAssociated(require_vivid_element.VividElement))) {
+var Popover = class extends require_localized.Localized(require_delegates_aria.DelegatesAria(require_vivid_element.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;
+		this.#currentAnchor = null;
+		this.#manualToggle = () => {
+			this._popoverEl.togglePopover();
+		};
+		this.#autoUpdateCallback = () => {
+			this.#lastPositionUpdate = this.updatePosition();
+		};
+		this.#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 });
+		};
+	}
 	/** @internal */
-	readOnlyChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) this.proxy.readOnly = this.readOnly;
+	placementChanged() {
+		this.#updateAutoUpdate();
 	}
 	/** @internal */
-	defaultCheckedChanged() {
-		if (this.$fastController.isConnected && !this.dirtyChecked) {
-			/* v8 ignore else -- @preserve */
-			if (!this.isInsideRadioGroup()) {
-				this.checked = this.defaultChecked;
-				this.dirtyChecked = false;
-			}
-		}
+	arrowChanged() {
+		this.#updateAutoUpdate();
 	}
-	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.#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 = "";
-				}
-			}
-		};
-		this.#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 = "";
-				});
-			}
-		};
-		this.proxy.setAttribute("type", "radio");
-		this.proxy.setAttribute("name", this.name);
-		this.checked = this.defaultChecked;
-		this.dirtyChecked = false;
+	/** @internal */
+	openChanged(_oldValue, newValue) {
+		this.#updateAnchorExpandedState();
+		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 */
-	nameChanged(previous, next) {
-		super.nameChanged(previous, next);
-		if (next !== null) this.proxy.setAttribute("name", this.name);
-		else this.proxy.removeAttribute("name");
-		_microsoft_fast_element.Updates.enqueue(this.validate);
+	anchorChanged() {
+		this.#updateAnchor();
 	}
 	/** @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;
-				}
-			}
+	_slottedAnchorChanged() {
+		this.#updateAnchor();
+	}
+	/** @internal */
+	#currentAnchor;
+	/** @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();
 		}
 	}
-	isInsideRadioGroup() {
-		return this.closest("[data-vvd-component=\"radio-group\"]") !== null;
+	/** @internal */
+	#bindTrigger(anchor) {
+		anchor.setAttribute("aria-haspopup", "dialog");
+		this.#updateAnchorExpandedState();
+		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = this._popoverEl;
+		else anchor.addEventListener("click", this.#manualToggle);
 	}
 	/** @internal */
-	clickHandler(_) {
-		if (!this.disabled && !this.readOnly && !this.checked) this.checked = true;
+	#unbindTrigger(anchor) {
+		anchor.removeAttribute("aria-haspopup");
+		anchor.ariaExpanded = null;
+		require_anchored.clearAnchorExpanded(anchor);
+		if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) anchor.popoverTargetElement = null;
+		else anchor.removeEventListener("click", this.#manualToggle);
 	}
-	get #radioSiblings() {
-		const siblings = this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);
-		if (siblings) return Array.from(siblings);
-		return [];
+	/**
+	* Reflects the open state onto the anchor as `aria-expanded` (for assistive
+	* technology) and `data-expanded` (a styling hook, e.g. to show a pressed
+	* trigger while the Popover is open). Mirrors the Menu anchor behaviour.
+	* @internal
+	*/
+	#updateAnchorExpandedState() {
+		if (!this.#currentAnchor) return;
+		this.#currentAnchor.ariaExpanded = this.open.toString();
+		require_anchored.setAnchorExpanded(this.#currentAnchor, this.open);
 	}
-	get #radioGroup() {
-		return this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`);
+	/** @internal */
+	#manualToggle;
+	/** @internal */
+	get #middleware() {
+		let middleware = [
+			(0, _floating_ui_dom.inline)(),
+			(0, _floating_ui_dom.flip)(),
+			(0, _floating_ui_dom.shift)(),
+			(0, _floating_ui_dom.hide)()
+		];
+		/* v8 ignore next -- @preserve */
+		let offsetValue = this.offset ?? 0;
+		if (this.arrow && this._arrowEl) {
+			offsetValue = 12;
+			middleware = [...middleware, (0, _floating_ui_dom.arrow)({
+				element: this._arrowEl,
+				padding: 10
+			})];
+		}
+		/* v8 ignore else -- @preserve */
+		if (offsetValue > 0) middleware.unshift((0, _floating_ui_dom.offset)(offsetValue));
+		return middleware;
+	}
+	/** @internal */
+	#cleanup;
+	/** @internal */
+	#updateAutoUpdate() {
+		this.#cleanup?.();
+		if (this.open && this.#currentAnchor && this._popoverEl) this.#cleanup = (0, _floating_ui_dom.autoUpdate)(this.#currentAnchor, this._popoverEl, this.#autoUpdateCallback);
+	}
+	/**
+	* Tracks the promise of the last position update.
+	* @internal
+	*/
+	#lastPositionUpdate;
+	/** @internal */
+	#autoUpdateCallback;
+	/** Updates the position of the popover */
+	async updatePosition() {
+		/* v8 ignore if -- @preserve */
+		if (!this.open || !this.#currentAnchor || !this._popoverEl) return;
+		const positionData = await (0, _floating_ui_dom.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"
+		});
 	}
-	#validateValueMissingWithSiblings;
-	#syncSiblingsRequiredValidationStatus;
 	/** @internal */
-	validate(anchor) {
-		super.validate(anchor);
-		if (this.proxy) {
-			this.errorValidationMessage = this.validationMessage || "";
-			if (this.validity.valueMissing) this.#validateValueMissingWithSiblings();
-			else this.#syncSiblingsRequiredValidationStatus();
+	#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;
+	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);
+	}
+	/** Opens the Popover. */
+	show() {
+		this.open = true;
+		return this.#lastPositionUpdate ?? Promise.resolve();
+	}
+	/** Closes the Popover. */
+	hide() {
+		this.open = false;
+	}
+	/** Toggles the Popover between its open and closed states. */
+	toggle() {
+		this.open = !this.open;
 	}
 };
-require_decorate.__decorate([_microsoft_fast_element.attr], Radio.prototype, "connotation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], Popover.prototype, "placement", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Popover.prototype, "manual", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], Popover.prototype, "layout", 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);
+	attribute: "offset",
+	mode: "fromView",
+	converter: _microsoft_fast_element.nullableNumberConverter
+})], Popover.prototype, "offset", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Popover.prototype, "alternate", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "dismiss-button-aria-label" })], Popover.prototype, "dismissButtonAriaLabel", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Popover.prototype, "arrow", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Popover.prototype, "open", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "anchor", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "_slottedAnchor", void 0);
 //#endregion
-//#region src/lib/radio/radio.template.ts
-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="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["checked", x.checked], ["readonly", x.readOnly], ["disabled", x.disabled])}"
-	>
-		<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>`;
+//#region src/lib/popover/popover.template.ts
+var popoverTemplate = (context) => {
+	const elevationTag = context.tagFor(require_definition$2.Elevation);
+	const buttonTag = context.tagFor(require_definition$1.Button);
+	const iconTag = context.tagFor(require_icon.Icon);
+	return _microsoft_fast_element.html`
+		<slot name="anchor" ${(0, _microsoft_fast_element.slotted)("_slottedAnchor")}></slot>
+		<${elevationTag}>
+			<div class="base"
+				${(0, _microsoft_fast_element.ref)("_popoverEl")}
+				popover="${(x) => x.manual ? "manual" : "auto"}"
+				tabindex="-1"
+				autofocus
+				${require_delegates_aria.delegateAria({
+		role: "dialog",
+		ariaModal: "false"
+	})}
+			>
+				<div class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", x.open], ["manual", x.manual], ["condensed", x.layout === "condensed"])}"
+					part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
+					<slot></slot>
+					<slot name="footer"></slot>
+					${(0, _microsoft_fast_element.when)((x) => x.manual, _microsoft_fast_element.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}>`)}
+					${(0, _microsoft_fast_element.when)((x) => x.arrow, _microsoft_fast_element.html`<div class="arrow" ${(0, _microsoft_fast_element.ref)("_arrowEl")}></div>`)}
+				</div>
+			</div>
+		</${elevationTag}>
+	`;
+};
 //#endregion
-//#region src/lib/radio/definition.ts
-/** @internal */
-var radioDefinition = require_vivid_element.defineVividComponent("radio", Radio, RadioTemplate, [], { styles: radio_default });
+//#region src/lib/popover/definition.ts
+var popoverDefinition = require_vivid_element.defineVividComponent("popover", Popover, popoverTemplate, [
+	require_definition$1.buttonDefinition,
+	require_definition.iconDefinition,
+	require_definition$2.elevationDefinition
+], {
+	styles: popover_default,
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the radio elements with the design system.
+* Registers the popover element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerRadio = require_vivid_element.createRegisterFunction(radioDefinition);
+var registerPopover = require_vivid_element.createRegisterFunction(popoverDefinition);
 //#endregion
-Object.defineProperty(exports, "Radio", {
+Object.defineProperty(exports, "Popover", {
 	enumerable: true,
 	get: function() {
-		return Radio;
+		return Popover;
 	}
 });
-Object.defineProperty(exports, "radioDefinition", {
+Object.defineProperty(exports, "popoverDefinition", {
 	enumerable: true,
 	get: function() {
-		return radioDefinition;
+		return popoverDefinition;
 	}
 });
-Object.defineProperty(exports, "registerRadio", {
+Object.defineProperty(exports, "registerPopover", {
 	enumerable: true,
 	get: function() {
-		return registerRadio;
+		return registerPopover;
 	}
 });