@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition12.js

@@ -1,300 +1,281 @@
-import { d as createRegisterFunction, n as replaces, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { a as affixIconTemplateFactory, t as AffixIcon } from "./affix.js";
-import { t as WithKbdShortcut } from "./kbd-shortcut.js";
-import { n as keyArrowRight$1, t as keyArrowLeft$1 } from "./key-codes.js";
-import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
-import { DOM, Updates, attr, elements, html, observable, slotted, when } from "@microsoft/fast-element";
-import { classNames, keyEnter, keySpace } from "@microsoft/fast-web-utilities";
-//#region src/lib/menu-item/menu-item.scss?inline
-var menu_item_default = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)),.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-primary:var(--vvd-menu-item-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-menu-item-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-menu-item-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-menu-item-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-menu-item-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-menu-item-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-menu-item-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-menu-item-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-menu-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-menu-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-menu-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-menu-item-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-menu-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-menu-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-menu-item-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-menu-item-accent-dim,var(--vvd-color-neutral-200))}.base{--_menu-item-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);border-radius:8px;align-items:center;inline-size:100%;display:flex}.base:not(.two-lines){min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));padding-block:8px;padding-inline:var(--_menu-item-padding-inline);gap:12px}.base.two-lines{min-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));padding-block:12px;padding-inline:var(--_menu-item-padding-inline);gap:16px}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);flex-shrink:0;line-height:1}.action,.decorative{place-content:center;display:flex}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[checked],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{flex-direction:column;gap:4px;margin-inline-end:auto;display:flex;overflow:hidden}.text-primary,.text-secondary{font:var(--vvd-typography-base);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp,1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp,1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}:host([internal-part]) .text-primary{font:var(--_text-primary-custom-size,var--vvd-typography-base)}";
+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 "./definition9.js";
+import { a as MenuItemRole, i as MenuItem, r as menuName, t as menuItemDefinition } from "./definition11.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-item/menu-item-role.ts
-var MenuItemRole = {
-	menuitem: "menuitem",
-	menuitemcheckbox: "menuitemcheckbox",
-	menuitemradio: "menuitemradio",
-	presentation: "presentation"
-};
-//#endregion
-//#region src/lib/menu-item/menu-item.ts
+//#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-item
-* @slot meta - Assign nodes to the `meta` slot to set a badge or an additional icon.
-* @slot trailing-meta - Assign nodes to the `meta` slot to set a badge or an additional icon.
-* @slot submenu - Assign a Menu to the `submenu` slot to add a submenu.
-* @event {CustomEvent<HTMLElement>} expanded-change - Fired when the expanded state changes.
-* @event {CustomEvent<undefined>} change - Fired when the item is triggered. Does not fire when a submenu is collapsed or expanded.
-* @vueModel modelValue checked change `event.currentTarget.checked`
-* @testSelector byText byText
-* @testAction click click #base
-* @testQuery checked checked true
-* @testQuery unchecked checked false
-* @testQuery disabled disabled
-* @testRef base shadow .base
+* @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 MenuItem = class extends WithKbdShortcut(HostSemantics(AffixIcon(VividElement))) {
-	/**
-	* @internal
-	*/
-	expandedChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.$fastController.isConnected) {
-			if (this.submenu && !this.expanded) this.submenu.collapseExpandedItem();
-			this.$emit("expanded-change", this, { bubbles: false });
-		}
-	}
-	#ensureRoleMatchesPresentational() {
-		if (this._isPresentational) {
-			if (this.role === "menuitem") this.role = "presentation";
-		} else if (this.role === "presentation") this.role = MenuItemRole.menuitem;
-	}
-	/**
-	* @internal
-	*/
-	_isPresentationalChanged() {
-		if (this.$fastController.isConnected) this.#ensureRoleMatchesPresentational();
+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) 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.#onAnchorClick = () => {
+			if (this.#triggerBehaviour === "off") return;
+			if (this.#triggerBehaviour === "legacy" && this.open) return;
+			const newValue = !this.open;
+			Updates.enqueue(() => this.open = newValue);
+		};
+		this._onFocusout = (e) => {
+			const focusTarget = e.relatedTarget;
+			const focusMovedAway = !this.contains(focusTarget) && !this._anchorEl?.contains(focusTarget);
+			if (this.autoDismiss && focusMovedAway) this.open = false;
+		};
 	}
-	/**
-	* @internal
-	*/
-	checkedChanged() {
-		if (this.$fastController.isConnected) this.$emit("change");
+	/** @internal */
+	itemsChanged() {
+		if (this.$fastController.isConnected && this.menuItems !== void 0) this.setItems();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	connectedCallback() {
 		super.connectedCallback();
 		Updates.enqueue(() => {
-			this._isPresentational = this._isPresentational ?? true;
-			this.#ensureRoleMatchesPresentational();
+			this.setItems();
 		});
 	}
 	/** @internal */
-	_kbdAriaShortcutsValueChanged() {
-		DOM.setAttribute(this, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeItemListeners();
+		this.menuItems = void 0;
 	}
 	/**
-	* @internal
+	* 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.
 	*/
-	slottedSubmenuChanged() {
-		if (this.submenu) {
-			this.submenu.anchor = this;
-			this.submenu.placement = "right-start";
-			this.submenu.collapseExpandedItem = () => this.#collapseExpandedItem();
-			this.submenu._popupOffset = 5;
+	focus() {
+		const autoFocusElement = this.querySelector("[autofocus]:not([slot=\"anchor\"])");
+		if (autoFocusElement instanceof HTMLElement) autoFocusElement.focus();
+		else this.setFocus(0);
+	}
+	/** Collapses any expanded Menu Items. */
+	collapseExpandedItem() {
+		if (this.expandedItem !== null) {
+			this.expandedItem.expanded = false;
+			this.expandedItem = null;
 		}
 	}
-	/**
-	* @internal
-	*/
-	get submenu() {
-		if (this.slottedSubmenu?.length) return this.slottedSubmenu[0];
-		else return 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;
+		}
 	}
-	/**
-	* @internal
-	*/
-	get hasSubmenu() {
-		return this.submenu !== null;
+	/** get an array of valid DOM children */
+	domChildren() {
+		return Array.from(this.children).filter((child) => !child.hasAttribute("hidden")).filter((child) => !child.hasAttribute("slot"));
 	}
-	constructor() {
-		super();
-		this.role = MenuItemRole.menuitem;
-		this.checked = false;
-		this.handleMenuItemClick = (e) => {
-			if (this._isSyntheticClickEvent(e)) return true;
-			this.invoke();
-			return Boolean(this._isPresentational);
-		};
-		this.handleMouseOver = (_) => {
-			if (this.disabled || !this.submenu || this.expanded) return false;
-			this.expanded = true;
-			return false;
-		};
-		this.handleMouseOut = (_) => {
-			if (!this.expanded || this.contains(document.activeElement)) return false;
-			this.expanded = false;
-			return false;
-		};
-		this.invoke = () => {
-			if (this.disabled || this._isPresentational) return;
-			switch (this.controlType) {
-				case "checkbox":
-					this.checked = !this.checked;
-					break;
-				case "radio":
-					if (!this.checked) this.checked = true;
-					break;
-				default:
-					if (this.submenu) this.expanded = true;
-					else this.$emit("change");
-					break;
-			}
-		};
-		this.checkTrailing = false;
-		this.handleMenuItemKeyDown = (e) => {
-			if (e.defaultPrevented) return false;
-			switch (e.key) {
-				case keyEnter:
-				case keySpace:
-					this.invoke();
-					if (!this.disabled) this.#emitSyntheticClick();
-					return false;
-				case keyArrowRight$1:
-					/* v8 ignore else -- @preserve */
-					if (this.submenu) {
-						this.expanded = true;
-						this.#emitSyntheticClick();
-					}
-					return false;
-				case keyArrowLeft$1: if (this.expanded) {
-					this.#emitSyntheticClick();
-					this.expanded = false;
-					this.focus();
-					return false;
-				}
-			}
-			return true;
-		};
-		this.#syntheticClickEvents = /* @__PURE__ */ new WeakSet();
-		this.addEventListener("expanded-change", this.#expandedChange);
+	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();
+		}
 	}
-	#collapseExpandedItem() {
-		this.expanded = false;
+	get #triggerBehaviour() {
+		return this.trigger ?? "auto";
 	}
-	#expandedChange() {
-		if (this.submenu) this.submenu.open = this.expanded;
+	openChanged(_, newValue) {
+		if (newValue) this._popupEl?.show().then(() => this.focus());
+		this.$emit(newValue ? "open" : "close", void 0, { bubbles: false });
+		if (this._anchorEl) this.#updateAnchor(this._anchorEl);
 	}
-	#syntheticClickEvents;
-	/**
-	* @internal
-	*/
-	_isSyntheticClickEvent(event) {
-		return this.#syntheticClickEvents.has(event);
+	/** @internal */
+	_anchorElChanged(oldValue, newValue) {
+		if (oldValue) this.#cleanupAnchor(oldValue);
+		if (newValue) this.#setupAnchor(newValue);
 	}
-	#emitSyntheticClick() {
-		const mouseEvent = new MouseEvent("click", {
-			bubbles: true,
-			composed: true
-		});
-		this.#syntheticClickEvents.add(mouseEvent);
-		this.dispatchEvent(mouseEvent);
+	#setupAnchor(a) {
+		a.addEventListener("click", this.#onAnchorClick, true);
+		a.addEventListener("focusout", this._onFocusout);
+		a.ariaHasPopup = "menu";
+		this.#updateAnchor(a);
 	}
-};
-__decorate([attr({ mode: "boolean" })], MenuItem.prototype, "disabled", void 0);
-__decorate([attr({ mode: "boolean" })], MenuItem.prototype, "expanded", void 0);
-__decorate([observable], MenuItem.prototype, "_isPresentational", void 0);
-__decorate([replaces({
-	deprecatedPropertyName: "role",
-	fromDeprecated: (role) => {
-		switch (role) {
-			case "menuitemcheckbox": return "checkbox";
-			case "menuitemradio": return "radio";
-			default: return;
-		}
-	},
-	toDeprecated: (controlType) => {
-		switch (controlType) {
-			case "checkbox": return "menuitemcheckbox";
-			case "radio": return "menuitemradio";
-			default: return "menuitem";
+	#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;
+	/** @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;
 	}
-}), attr({ attribute: "control-type" })], MenuItem.prototype, "controlType", void 0);
-__decorate([attr({ mode: "boolean" })], MenuItem.prototype, "checked", void 0);
-__decorate([attr], MenuItem.prototype, "text", void 0);
-__decorate([attr({ attribute: "text-secondary" })], MenuItem.prototype, "textSecondary", void 0);
-__decorate([attr], MenuItem.prototype, "connotation", void 0);
+};
+__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: "check-trailing"
-})], MenuItem.prototype, "checkTrailing", void 0);
-__decorate([attr({ attribute: "check-appearance" })], MenuItem.prototype, "checkedAppearance", void 0);
-__decorate([observable], MenuItem.prototype, "metaSlottedContent", void 0);
-__decorate([observable], MenuItem.prototype, "trailingMetaSlottedContent", void 0);
-__decorate([observable], MenuItem.prototype, "slottedSubmenu", void 0);
-//#endregion
-//#region src/lib/menu/name.ts
-var menuName = "menu";
+	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-item/menu-item.template.ts
-var getIndicatorIcon = (x) => {
-	if (x.checkedAppearance === "tick-only") return x.checked ? "check-line" : "";
-	return `${x.controlType === "checkbox" ? "checkbox" : "radio"}-${x.checked ? "checked" : "unchecked"}-2-line`;
-};
-var getClasses = ({ connotation, disabled, checked, controlType, text, textSecondary, icon, metaSlottedContent, checkTrailing }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], ["disabled", disabled], ["selected", Boolean(controlType && checked)], ["trailing", Boolean(controlType && (checkTrailing || Boolean(icon)))], ["item-checkbox", controlType === "checkbox"], ["item-radio", controlType === "radio"], ["two-lines", Boolean(text?.length) && Boolean(textSecondary?.length)], ["has-meta", Boolean(metaSlottedContent?.length)]);
-function checkIndicator(context) {
-	const iconTag = context.tagFor(Icon);
-	return html`${when((x) => Boolean(x.controlType), html`<span class="action"><${iconTag} class="icon" name="${(x) => getIndicatorIcon(x)}"></${iconTag}></span>`)}`;
+//#region src/lib/menu/menu.template.ts
+function handleEscapeKey(menu, event) {
+	if (menu.open && handleEscapeKeyAndStopPropogation(event)) menu.open = false;
+	return true;
 }
-function text() {
-	return html`${when((x) => x.text || x.textSecondary, html`<span class="text">
-			${when((x) => x.text, html`<span class="text-primary">${(x) => x.text}</span>`)}
-			${when((x) => x.textSecondary, html`<span class="text-secondary">${(x) => x.textSecondary}</span>`)}
-		</span>`)}`;
-}
-var MenuItemTemplate = (context) => {
-	const affixIconTemplate = affixIconTemplateFactory(context);
-	const iconTag = context.tagFor(Icon);
+var MenuTemplate = (context) => {
+	const popupTag = context.tagFor(Popup);
 	return html`
-		<template
-			${applyHostSemantics({
-		ariaHasPopup: (x) => x.hasSubmenu ? "menu" : void 0,
-		ariaChecked: (x) => x.controlType ? x.checked : void 0,
-		ariaDisabled: (x) => x.disabled,
-		ariaExpanded: (x) => x.expanded
-	})}
-			@keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}"
-			@click="${(x, c) => x.handleMenuItemClick(c.event)}"
-			@mouseover="${(x, c) => x.handleMouseOver(c.event)}"
-			@mouseout="${(x, c) => x.handleMouseOut(c.event)}"
-		>
-			<div class="${getClasses}">
-				<slot name="meta" ${slotted("metaSlottedContent")}></slot>
-				${checkIndicator(context)}
-				${when((x) => x.icon, html`<span class="decorative"
-						>${(x) => affixIconTemplate(x.icon)}</span
-					>`)}
-				${text()}
-				<slot
-					name="trailing-meta"
-					${slotted("trailingMetaSlottedContent")}
-				></slot>
-				<slot
-					name="kbd-shortcut"
-					class="kbd-shortcut-slot"
-					${slotted({
-		property: "_kbdShortcutSlotted",
-		filter: elements()
-	})}
-				></slot>
-				${when((x) => x.hasSubmenu, html`<${iconTag} class="chevron" name="chevron-right-line"></${iconTag}>`)}
+		<template @focusout="${(x, c) => x._onFocusout(c.event)}">
+			${anchorSlotTemplateFactory()}
+			<${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)}"
+			>
+			<div class="${(x) => classNames("base", ["hide-header", !x.headerSlottedContent?.length], ["hide-actions", !x.actionItemsSlottedContent?.length], ["hide-body", x.items && !x.items.length])}">
+				<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>
-			<slot
-				name="submenu"
-				${slotted({
-		property: "slottedSubmenu",
-		filter: elements(context.tagForNonDependency(menuName))
-	})}
-			></slot>
-		</template>
-	`;
+		</${popupTag}>
+	</template>`;
 };
 //#endregion
-//#region src/lib/menu-item/definition.ts
-/**
-* @internal
-*/
-var menuItemDefinition = defineVividComponent("menu-item", MenuItem, MenuItemTemplate, [iconDefinition], { styles: menu_item_default });
+//#region src/lib/menu/definition.ts
+/** @internal */
+var menuDefinition = defineVividComponent(menuName, Menu, MenuTemplate, [popupDefinition, menuItemDefinition], { styles: menu_default });
 /**
-* Registers the menu-item elements with the design system.
+* Registers the calendar-event elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerMenuItem = createRegisterFunction(menuItemDefinition);
+var registerMenu = createRegisterFunction(menuDefinition);
 //#endregion
-export { MenuItemRole as a, MenuItem as i, registerMenuItem as n, menuName as r, menuItemDefinition as t };
+export { registerMenu as n, Menu as r, menuDefinition as t };