@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/definition13.cjs

@@ -0,0 +1,328 @@
+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_dialog = require("./dialog.cjs");
+const require_definition = require("./definition10.cjs");
+const require_definition$1 = require("./definition12.cjs");
+const require_anchored = require("./anchored.cjs");
+const require_divider = require("./divider.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/menu/menu.scss?inline
+var menu_default = ":host{display:var(--_popup-display,inline)}:host([slotted-anchor]){--_popup-display:contents}.base{box-sizing:border-box;inline-size:max-content;max-block-size:var(--menu-block-size,408px);min-inline-size:var(--menu-min-inline-size);flex-direction:column;gap:8px;padding:4px;display:flex;overflow:hidden auto}@media not all and (width>=600px){.base{max-inline-size:var(--menu-max-inline-size,300px)}}@media (width>=600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]: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));--focus-stroke-gap-color:transparent;display:block}.header{padding:4px}.hide-header .header{display:none}.body{flex-direction:column;row-gap:1px;display:flex}.hide-body .body{display:none}.action-items{justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px;display:flex}.hide-actions .action-items{display:none}";
+//#endregion
+//#region src/lib/menu/menu.ts
+var isCheckbox = (el) => el instanceof require_definition$1.MenuItem && el.controlType === "checkbox";
+var isRadio = (el) => el instanceof require_definition$1.MenuItem && el.controlType === "radio";
+var isSeparator = (el) => el instanceof require_divider.Divider ? true : el.role === "separator";
+var isMenuItemElement = (el) => el instanceof require_definition$1.MenuItem ? true : Boolean(el.role && el.role in require_definition$1.MenuItemRole);
+/**
+* @public
+* @component menu
+* @slot - Default slot.
+* @slot anchor - Used to set the anchor element for the menu.
+* @slot header - Used to add additional content to the top of the menu.
+* @slot action-items - Used to add action items to the bottom of the menu.
+* @event {CustomEvent<undefined>} open - Fired when the menu is opened
+* @event {CustomEvent<undefined>} close - Fired when the menu is closed
+* @testSelector byLabel byLabel
+* @testQuery open open true
+* @testQuery closed open false
+*/
+var Menu = class extends require_anchored.Anchored(require_delegates_aria.DelegatesAria(require_vivid_element.VividElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.offset = null;
+		this.expandedItem = null;
+		this.focusIndex = -1;
+		this.handleFocusOut = (e) => {
+			if (!this.contains(e.relatedTarget) && this.menuItems !== void 0 && this.menuItems.length) {
+				this.collapseExpandedItem();
+				this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+				this.menuItems[0].setAttribute("tabindex", "0");
+				this.focusIndex = 0;
+			}
+		};
+		this.handleItemFocus = (e) => {
+			const targetItem = e.target;
+			if (this.menuItems !== void 0 && targetItem !== this.menuItems[this.focusIndex]) {
+				this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+				this.focusIndex = this.menuItems.indexOf(targetItem);
+				targetItem.setAttribute("tabindex", "0");
+			}
+		};
+		this.handleExpandedChanged = (e) => {
+			const changedItem = e.target;
+			if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) this.expandedItem = null;
+			if (changedItem.expanded) this.expandedItem = changedItem;
+		};
+		this.removeItemListeners = () => {
+			if (this.menuItems !== void 0) this.menuItems.forEach((item) => {
+				item.removeEventListener("expanded-change", this.handleExpandedChanged);
+				item.removeEventListener("focus", this.handleItemFocus);
+			});
+		};
+		this.setItems = () => {
+			const newItems = this.domChildren();
+			this.removeItemListeners();
+			this.menuItems = newItems.filter(isMenuItemElement);
+			if (this.menuItems.length) this.focusIndex = 0;
+			this.menuItems.forEach((item, index) => {
+				if (item instanceof require_definition$1.MenuItem) item._isPresentational = false;
+				item.setAttribute("tabindex", index === 0 ? "0" : "-1");
+				item.addEventListener("expanded-change", this.handleExpandedChanged);
+				item.addEventListener("focus", this.handleItemFocus);
+			});
+		};
+		this.placement = "bottom";
+		this.autoDismiss = false;
+		this.positionStrategy = "fixed";
+		this.open = false;
+		this._onFocusout = (e) => {
+			const focusTarget = e.relatedTarget;
+			const focusMovedAway = !this.contains(focusTarget) && !this._anchorEl?.contains(focusTarget);
+			if (this.autoDismiss && focusMovedAway) this.open = false;
+		};
+	}
+	/**
+	* @internal
+	*/
+	itemsChanged() {
+		if (this.$fastController.isConnected && this.menuItems !== void 0) this.setItems();
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		_microsoft_fast_element.Updates.enqueue(() => {
+			this.setItems();
+		});
+	}
+	/**
+	* @internal
+	*/
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeItemListeners();
+		this.menuItems = void 0;
+	}
+	/**
+	* Moves focus into the Menu. If there is a child with the `autofocus` attribute, it will be
+	* focused. Otherwise, the first Menu Item will be focused.
+	*
+	* @public
+	*/
+	focus() {
+		const autoFocusElement = this.querySelector("[autofocus]:not([slot=\"anchor\"])");
+		if (autoFocusElement instanceof HTMLElement) autoFocusElement.focus();
+		else this.setFocus(0);
+	}
+	/**
+	* Collapses any expanded Menu Items.
+	*
+	* @public
+	*/
+	collapseExpandedItem() {
+		if (this.expandedItem !== null) {
+			this.expandedItem.expanded = false;
+			this.expandedItem = null;
+		}
+	}
+	/**
+	* @internal
+	*/
+	handleMenuKeyDown(e) {
+		if (e.defaultPrevented || this.menuItems === void 0) return;
+		switch (e.key) {
+			case _microsoft_fast_web_utilities.keyArrowDown:
+				this.setFocus(this.focusIndex + 1);
+				return;
+			case _microsoft_fast_web_utilities.keyArrowUp:
+				this.setFocus(this.focusIndex - 1);
+				return;
+			case _microsoft_fast_web_utilities.keyEnd:
+				this.setFocus(this.menuItems.length - 1);
+				return;
+			case _microsoft_fast_web_utilities.keyHome:
+				this.setFocus(0);
+				return;
+			default: return true;
+		}
+	}
+	/**
+	* get an array of valid DOM children
+	*/
+	domChildren() {
+		return Array.from(this.children).filter((child) => !child.hasAttribute("hidden")).filter((child) => !child.hasAttribute("slot"));
+	}
+	setFocus(focusIndex) {
+		if (this.menuItems === void 0) return;
+		if (focusIndex >= 0 && focusIndex < this.menuItems.length) {
+			const child = this.menuItems[focusIndex];
+			/* v8 ignore else -- @preserve */
+			if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+			this.focusIndex = focusIndex;
+			child.setAttribute("tabindex", "0");
+			child.focus();
+		}
+	}
+	get #triggerBehaviour() {
+		return this.trigger ?? "auto";
+	}
+	openChanged(_, newValue) {
+		if (newValue) this._popupEl?.show().then(() => this.focus());
+		newValue ? this.$emit("open", void 0, { bubbles: false }) : this.$emit("close", void 0, { bubbles: false });
+		if (this._anchorEl) this.#updateAnchor(this._anchorEl);
+	}
+	/**
+	* @internal
+	*/
+	_anchorElChanged(oldValue, newValue) {
+		if (oldValue) this.#cleanupAnchor(oldValue);
+		if (newValue) this.#setupAnchor(newValue);
+	}
+	#setupAnchor(a) {
+		a.addEventListener("click", this.#onAnchorClick, true);
+		a.addEventListener("focusout", this._onFocusout);
+		a.ariaHasPopup = "menu";
+		this.#updateAnchor(a);
+	}
+	#updateAnchor(a) {
+		a.ariaExpanded = this.open.toString();
+		a.dataset.expanded = this.open.toString();
+	}
+	#cleanupAnchor(a) {
+		a.removeEventListener("click", this.#onAnchorClick, true);
+		a.removeEventListener("focusout", this._onFocusout);
+		a.ariaHasPopup = null;
+		a.ariaExpanded = null;
+		delete a.dataset.expanded;
+	}
+	#onAnchorClick = () => {
+		if (this.#triggerBehaviour === "off") return;
+		if (this.#triggerBehaviour === "legacy" && this.open) return;
+		const newValue = !this.open;
+		_microsoft_fast_element.Updates.enqueue(() => this.open = newValue);
+	};
+	/**
+	* @internal
+	*/
+	_onBodyChange(e) {
+		if (this.menuItems === void 0 || !(e.target instanceof Element)) return;
+		if (this.#triggerBehaviour === "auto" && !isCheckbox(e.target)) this.open = false;
+		const domChildren = this.domChildren();
+		const targetItemIndex = domChildren.indexOf(e.target);
+		if (targetItemIndex === -1) return;
+		if (isRadio(e.target) && e.target.checked) {
+			for (let i = targetItemIndex - 1; i >= 0; --i) {
+				const item = domChildren[i];
+				if (isRadio(item)) item.checked = false;
+				if (isSeparator(item)) break;
+			}
+			for (let i = targetItemIndex + 1; i <= domChildren.length - 1; ++i) {
+				const item = domChildren[i];
+				if (isRadio(item)) item.checked = false;
+				if (isSeparator(item)) break;
+			}
+		}
+		return true;
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "offset",
+	converter: _microsoft_fast_element.nullableNumberConverter
+})], Menu.prototype, "offset", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Menu.prototype, "items", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], Menu.prototype, "placement", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Menu.prototype, "trigger", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	mode: "boolean",
+	attribute: "auto-dismiss"
+})], Menu.prototype, "autoDismiss", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	mode: "fromView",
+	attribute: "position-strategy"
+})], Menu.prototype, "positionStrategy", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Menu.prototype, "open", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Menu.prototype, "headerSlottedContent", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Menu.prototype, "actionItemsSlottedContent", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Menu.prototype, "_popupOffset", void 0);
+//#endregion
+//#region src/lib/menu/menu.template.ts
+var getClasses = ({ headerSlottedContent, actionItemsSlottedContent, items }) => (0, _microsoft_fast_web_utilities.classNames)("base", ["hide-header", !headerSlottedContent?.length], ["hide-actions", !actionItemsSlottedContent?.length], ["hide-body", items && !items.length]);
+function handleEscapeKey(menu, event) {
+	if (menu.open && require_dialog.handleEscapeKeyAndStopPropogation(event)) menu.open = false;
+	return true;
+}
+var MenuTemplate = (context) => {
+	const popupTag = context.tagFor(require_definition.Popup);
+	const anchorSlotTemplate = require_anchored.anchorSlotTemplateFactory();
+	function handlePopupEvents(x, e, state) {
+		e.stopPropagation();
+		x.open = state;
+	}
+	return _microsoft_fast_element.html`
+		<template @focusout="${(x, c) => x._onFocusout(c.event)}">
+			${anchorSlotTemplate}
+			<${popupTag}
+				${(0, _microsoft_fast_element.ref)("_popupEl")}
+				:placement=${(x) => x.placement}
+				:open=${(x) => x.open}
+				:anchor=${(x) => x._anchorEl}
+				:strategy="${(x) => x.positionStrategy}"
+				:offset=${(x) => x.offset || x._popupOffset}
+				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
+				@vwc-popup:open="${(x, c) => handlePopupEvents(x, c.event, true)}"
+				@vwc-popup:close="${(x, c) => handlePopupEvents(x, c.event, false)}"
+			>
+			<div class="${getClasses}">
+				<div class="header">
+					<slot name="header" ${(0, _microsoft_fast_element.slotted)("headerSlottedContent")}></slot>
+				</div>
+				<div
+					class="body"
+					${require_delegates_aria.delegateAria({ role: "menu" })}
+					@change="${(x, c) => x._onBodyChange(c.event)}"
+					@keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
+					@focusout="${(x, c) => x.handleFocusOut(c.event)}"
+				>
+					<slot ${(0, _microsoft_fast_element.slotted)("items")}></slot>
+				</div>
+				<footer class="action-items"><slot name="action-items"  ${(0, _microsoft_fast_element.slotted)("actionItemsSlottedContent")}></slot></footer>
+			</div>
+		</${popupTag}>
+	</template>`;
+};
+//#endregion
+//#region src/lib/menu/definition.ts
+/**
+* @internal
+*/
+var menuDefinition = require_vivid_element.defineVividComponent(require_definition$1.menuName, Menu, MenuTemplate, [require_definition.popupDefinition, require_definition$1.menuItemDefinition], { styles: menu_default });
+/**
+* Registers the calendar-event elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerMenu = require_vivid_element.createRegisterFunction(menuDefinition);
+//#endregion
+Object.defineProperty(exports, "Menu", {
+	enumerable: true,
+	get: function() {
+		return Menu;
+	}
+});
+Object.defineProperty(exports, "menuDefinition", {
+	enumerable: true,
+	get: function() {
+		return menuDefinition;
+	}
+});
+Object.defineProperty(exports, "registerMenu", {
+	enumerable: true,
+	get: function() {
+		return registerMenu;
+	}
+});

package/unbundled/definition13.js

@@ -0,0 +1,310 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } 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 handleEscapeKeyAndStopPropogation } from "./dialog.js";
+import { i as Popup, t as popupDefinition } from "./definition10.js";
+import { a as MenuItemRole, i as MenuItem, r as menuName, t as menuItemDefinition } from "./definition12.js";
+import { n as anchorSlotTemplateFactory, t as Anchored } from "./anchored.js";
+import { t as Divider } from "./divider.js";
+import { Updates, attr, html, nullableNumberConverter, observable, ref, slotted } from "@microsoft/fast-element";
+import { classNames, keyArrowDown, keyArrowUp, keyEnd, keyHome } from "@microsoft/fast-web-utilities";
+//#region src/lib/menu/menu.scss?inline
+var menu_default = ":host{display:var(--_popup-display,inline)}:host([slotted-anchor]){--_popup-display:contents}.base{box-sizing:border-box;inline-size:max-content;max-block-size:var(--menu-block-size,408px);min-inline-size:var(--menu-min-inline-size);flex-direction:column;gap:8px;padding:4px;display:flex;overflow:hidden auto}@media not all and (width>=600px){.base{max-inline-size:var(--menu-max-inline-size,300px)}}@media (width>=600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]: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));--focus-stroke-gap-color:transparent;display:block}.header{padding:4px}.hide-header .header{display:none}.body{flex-direction:column;row-gap:1px;display:flex}.hide-body .body{display:none}.action-items{justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px;display:flex}.hide-actions .action-items{display:none}";
+//#endregion
+//#region src/lib/menu/menu.ts
+var isCheckbox = (el) => el instanceof MenuItem && el.controlType === "checkbox";
+var isRadio = (el) => el instanceof MenuItem && el.controlType === "radio";
+var isSeparator = (el) => el instanceof Divider ? true : el.role === "separator";
+var isMenuItemElement = (el) => el instanceof MenuItem ? true : Boolean(el.role && el.role in MenuItemRole);
+/**
+* @public
+* @component menu
+* @slot - Default slot.
+* @slot anchor - Used to set the anchor element for the menu.
+* @slot header - Used to add additional content to the top of the menu.
+* @slot action-items - Used to add action items to the bottom of the menu.
+* @event {CustomEvent<undefined>} open - Fired when the menu is opened
+* @event {CustomEvent<undefined>} close - Fired when the menu is closed
+* @testSelector byLabel byLabel
+* @testQuery open open true
+* @testQuery closed open false
+*/
+var Menu = class extends Anchored(DelegatesAria(VividElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.offset = null;
+		this.expandedItem = null;
+		this.focusIndex = -1;
+		this.handleFocusOut = (e) => {
+			if (!this.contains(e.relatedTarget) && this.menuItems !== void 0 && this.menuItems.length) {
+				this.collapseExpandedItem();
+				this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+				this.menuItems[0].setAttribute("tabindex", "0");
+				this.focusIndex = 0;
+			}
+		};
+		this.handleItemFocus = (e) => {
+			const targetItem = e.target;
+			if (this.menuItems !== void 0 && targetItem !== this.menuItems[this.focusIndex]) {
+				this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+				this.focusIndex = this.menuItems.indexOf(targetItem);
+				targetItem.setAttribute("tabindex", "0");
+			}
+		};
+		this.handleExpandedChanged = (e) => {
+			const changedItem = e.target;
+			if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) this.expandedItem = null;
+			if (changedItem.expanded) this.expandedItem = changedItem;
+		};
+		this.removeItemListeners = () => {
+			if (this.menuItems !== void 0) this.menuItems.forEach((item) => {
+				item.removeEventListener("expanded-change", this.handleExpandedChanged);
+				item.removeEventListener("focus", this.handleItemFocus);
+			});
+		};
+		this.setItems = () => {
+			const newItems = this.domChildren();
+			this.removeItemListeners();
+			this.menuItems = newItems.filter(isMenuItemElement);
+			if (this.menuItems.length) this.focusIndex = 0;
+			this.menuItems.forEach((item, index) => {
+				if (item instanceof MenuItem) item._isPresentational = false;
+				item.setAttribute("tabindex", index === 0 ? "0" : "-1");
+				item.addEventListener("expanded-change", this.handleExpandedChanged);
+				item.addEventListener("focus", this.handleItemFocus);
+			});
+		};
+		this.placement = "bottom";
+		this.autoDismiss = false;
+		this.positionStrategy = "fixed";
+		this.open = false;
+		this._onFocusout = (e) => {
+			const focusTarget = e.relatedTarget;
+			const focusMovedAway = !this.contains(focusTarget) && !this._anchorEl?.contains(focusTarget);
+			if (this.autoDismiss && focusMovedAway) this.open = false;
+		};
+	}
+	/**
+	* @internal
+	*/
+	itemsChanged() {
+		if (this.$fastController.isConnected && this.menuItems !== void 0) this.setItems();
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		Updates.enqueue(() => {
+			this.setItems();
+		});
+	}
+	/**
+	* @internal
+	*/
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeItemListeners();
+		this.menuItems = void 0;
+	}
+	/**
+	* Moves focus into the Menu. If there is a child with the `autofocus` attribute, it will be
+	* focused. Otherwise, the first Menu Item will be focused.
+	*
+	* @public
+	*/
+	focus() {
+		const autoFocusElement = this.querySelector("[autofocus]:not([slot=\"anchor\"])");
+		if (autoFocusElement instanceof HTMLElement) autoFocusElement.focus();
+		else this.setFocus(0);
+	}
+	/**
+	* Collapses any expanded Menu Items.
+	*
+	* @public
+	*/
+	collapseExpandedItem() {
+		if (this.expandedItem !== null) {
+			this.expandedItem.expanded = false;
+			this.expandedItem = null;
+		}
+	}
+	/**
+	* @internal
+	*/
+	handleMenuKeyDown(e) {
+		if (e.defaultPrevented || this.menuItems === void 0) return;
+		switch (e.key) {
+			case keyArrowDown:
+				this.setFocus(this.focusIndex + 1);
+				return;
+			case keyArrowUp:
+				this.setFocus(this.focusIndex - 1);
+				return;
+			case keyEnd:
+				this.setFocus(this.menuItems.length - 1);
+				return;
+			case keyHome:
+				this.setFocus(0);
+				return;
+			default: return true;
+		}
+	}
+	/**
+	* get an array of valid DOM children
+	*/
+	domChildren() {
+		return Array.from(this.children).filter((child) => !child.hasAttribute("hidden")).filter((child) => !child.hasAttribute("slot"));
+	}
+	setFocus(focusIndex) {
+		if (this.menuItems === void 0) return;
+		if (focusIndex >= 0 && focusIndex < this.menuItems.length) {
+			const child = this.menuItems[focusIndex];
+			/* v8 ignore else -- @preserve */
+			if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+			this.focusIndex = focusIndex;
+			child.setAttribute("tabindex", "0");
+			child.focus();
+		}
+	}
+	get #triggerBehaviour() {
+		return this.trigger ?? "auto";
+	}
+	openChanged(_, newValue) {
+		if (newValue) this._popupEl?.show().then(() => this.focus());
+		newValue ? this.$emit("open", void 0, { bubbles: false }) : this.$emit("close", void 0, { bubbles: false });
+		if (this._anchorEl) this.#updateAnchor(this._anchorEl);
+	}
+	/**
+	* @internal
+	*/
+	_anchorElChanged(oldValue, newValue) {
+		if (oldValue) this.#cleanupAnchor(oldValue);
+		if (newValue) this.#setupAnchor(newValue);
+	}
+	#setupAnchor(a) {
+		a.addEventListener("click", this.#onAnchorClick, true);
+		a.addEventListener("focusout", this._onFocusout);
+		a.ariaHasPopup = "menu";
+		this.#updateAnchor(a);
+	}
+	#updateAnchor(a) {
+		a.ariaExpanded = this.open.toString();
+		a.dataset.expanded = this.open.toString();
+	}
+	#cleanupAnchor(a) {
+		a.removeEventListener("click", this.#onAnchorClick, true);
+		a.removeEventListener("focusout", this._onFocusout);
+		a.ariaHasPopup = null;
+		a.ariaExpanded = null;
+		delete a.dataset.expanded;
+	}
+	#onAnchorClick = () => {
+		if (this.#triggerBehaviour === "off") return;
+		if (this.#triggerBehaviour === "legacy" && this.open) return;
+		const newValue = !this.open;
+		Updates.enqueue(() => this.open = newValue);
+	};
+	/**
+	* @internal
+	*/
+	_onBodyChange(e) {
+		if (this.menuItems === void 0 || !(e.target instanceof Element)) return;
+		if (this.#triggerBehaviour === "auto" && !isCheckbox(e.target)) this.open = false;
+		const domChildren = this.domChildren();
+		const targetItemIndex = domChildren.indexOf(e.target);
+		if (targetItemIndex === -1) return;
+		if (isRadio(e.target) && e.target.checked) {
+			for (let i = targetItemIndex - 1; i >= 0; --i) {
+				const item = domChildren[i];
+				if (isRadio(item)) item.checked = false;
+				if (isSeparator(item)) break;
+			}
+			for (let i = targetItemIndex + 1; i <= domChildren.length - 1; ++i) {
+				const item = domChildren[i];
+				if (isRadio(item)) item.checked = false;
+				if (isSeparator(item)) break;
+			}
+		}
+		return true;
+	}
+};
+__decorate([attr({
+	attribute: "offset",
+	converter: nullableNumberConverter
+})], Menu.prototype, "offset", void 0);
+__decorate([observable], Menu.prototype, "items", void 0);
+__decorate([attr({ mode: "fromView" })], Menu.prototype, "placement", void 0);
+__decorate([attr], Menu.prototype, "trigger", void 0);
+__decorate([attr({
+	mode: "boolean",
+	attribute: "auto-dismiss"
+})], Menu.prototype, "autoDismiss", void 0);
+__decorate([attr({
+	mode: "fromView",
+	attribute: "position-strategy"
+})], Menu.prototype, "positionStrategy", void 0);
+__decorate([attr({ mode: "boolean" })], Menu.prototype, "open", void 0);
+__decorate([observable], Menu.prototype, "headerSlottedContent", void 0);
+__decorate([observable], Menu.prototype, "actionItemsSlottedContent", void 0);
+__decorate([observable], Menu.prototype, "_popupOffset", void 0);
+//#endregion
+//#region src/lib/menu/menu.template.ts
+var getClasses = ({ headerSlottedContent, actionItemsSlottedContent, items }) => classNames("base", ["hide-header", !headerSlottedContent?.length], ["hide-actions", !actionItemsSlottedContent?.length], ["hide-body", items && !items.length]);
+function handleEscapeKey(menu, event) {
+	if (menu.open && handleEscapeKeyAndStopPropogation(event)) menu.open = false;
+	return true;
+}
+var MenuTemplate = (context) => {
+	const popupTag = context.tagFor(Popup);
+	const anchorSlotTemplate = anchorSlotTemplateFactory();
+	function handlePopupEvents(x, e, state) {
+		e.stopPropagation();
+		x.open = state;
+	}
+	return html`
+		<template @focusout="${(x, c) => x._onFocusout(c.event)}">
+			${anchorSlotTemplate}
+			<${popupTag}
+				${ref("_popupEl")}
+				:placement=${(x) => x.placement}
+				:open=${(x) => x.open}
+				:anchor=${(x) => x._anchorEl}
+				:strategy="${(x) => x.positionStrategy}"
+				:offset=${(x) => x.offset || x._popupOffset}
+				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
+				@vwc-popup:open="${(x, c) => handlePopupEvents(x, c.event, true)}"
+				@vwc-popup:close="${(x, c) => handlePopupEvents(x, c.event, false)}"
+			>
+			<div class="${getClasses}">
+				<div class="header">
+					<slot name="header" ${slotted("headerSlottedContent")}></slot>
+				</div>
+				<div
+					class="body"
+					${delegateAria({ role: "menu" })}
+					@change="${(x, c) => x._onBodyChange(c.event)}"
+					@keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
+					@focusout="${(x, c) => x.handleFocusOut(c.event)}"
+				>
+					<slot ${slotted("items")}></slot>
+				</div>
+				<footer class="action-items"><slot name="action-items"  ${slotted("actionItemsSlottedContent")}></slot></footer>
+			</div>
+		</${popupTag}>
+	</template>`;
+};
+//#endregion
+//#region src/lib/menu/definition.ts
+/**
+* @internal
+*/
+var menuDefinition = defineVividComponent(menuName, Menu, MenuTemplate, [popupDefinition, menuItemDefinition], { styles: menu_default });
+/**
+* Registers the calendar-event elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerMenu = createRegisterFunction(menuDefinition);
+//#endregion
+export { registerMenu as n, Menu as r, menuDefinition as t };