@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/definition12.cjs

@@ -0,0 +1,317 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_definition = require("./definition2.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_affix = require("./affix.cjs");
+const require_key_codes = require("./key-codes.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@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)}";
+//#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
+/**
+* @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
+*/
+var MenuItem = class extends require_host_semantics.HostSemantics(require_affix.AffixIcon(require_vivid_element.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();
+	}
+	/**
+	* @internal
+	*/
+	checkedChanged() {
+		if (this.$fastController.isConnected) this.$emit("change");
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		_microsoft_fast_element.Updates.enqueue(() => {
+			this._isPresentational = this._isPresentational ?? true;
+			this.#ensureRoleMatchesPresentational();
+		});
+	}
+	/**
+	* @internal
+	*/
+	slottedSubmenuChanged() {
+		if (this.submenu) {
+			this.submenu.anchor = this;
+			this.submenu.placement = "right-start";
+			this.submenu.collapseExpandedItem = () => this.#collapseExpandedItem();
+			this.submenu._popupOffset = 5;
+		}
+	}
+	/**
+	* @internal
+	*/
+	get submenu() {
+		if (this.slottedSubmenu?.length) return this.slottedSubmenu[0];
+		else return null;
+	}
+	/**
+	* @internal
+	*/
+	get hasSubmenu() {
+		return this.submenu !== null;
+	}
+	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 _microsoft_fast_web_utilities.keyEnter:
+				case _microsoft_fast_web_utilities.keySpace:
+					this.invoke();
+					if (!this.disabled) this.#emitSyntheticClick();
+					return false;
+				case require_key_codes.keyArrowRight:
+					/* v8 ignore else -- @preserve */
+					if (this.submenu) {
+						this.expanded = true;
+						this.#emitSyntheticClick();
+					}
+					return false;
+				case require_key_codes.keyArrowLeft: if (this.expanded) {
+					this.#emitSyntheticClick();
+					this.expanded = false;
+					this.focus();
+					return false;
+				}
+			}
+			return true;
+		};
+		this.addEventListener("expanded-change", this.#expandedChange);
+	}
+	#collapseExpandedItem() {
+		this.expanded = false;
+	}
+	#expandedChange() {
+		if (this.submenu) this.submenu.open = this.expanded;
+	}
+	#syntheticClickEvents = /* @__PURE__ */ new WeakSet();
+	/**
+	* @internal
+	*/
+	_isSyntheticClickEvent(event) {
+		return this.#syntheticClickEvents.has(event);
+	}
+	#emitSyntheticClick() {
+		const mouseEvent = new MouseEvent("click", {
+			bubbles: true,
+			composed: true
+		});
+		this.#syntheticClickEvents.add(mouseEvent);
+		this.dispatchEvent(mouseEvent);
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], MenuItem.prototype, "disabled", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], MenuItem.prototype, "expanded", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], MenuItem.prototype, "_isPresentational", void 0);
+require_decorate.__decorate([require_vivid_element.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";
+		}
+	}
+}), (0, _microsoft_fast_element.attr)({ attribute: "control-type" })], MenuItem.prototype, "controlType", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], MenuItem.prototype, "checked", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], MenuItem.prototype, "text", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "text-secondary" })], MenuItem.prototype, "textSecondary", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], MenuItem.prototype, "connotation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	mode: "boolean",
+	attribute: "check-trailing"
+})], MenuItem.prototype, "checkTrailing", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "check-appearance" })], MenuItem.prototype, "checkedAppearance", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], MenuItem.prototype, "metaSlottedContent", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], MenuItem.prototype, "trailingMetaSlottedContent", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], MenuItem.prototype, "slottedSubmenu", void 0);
+//#endregion
+//#region src/lib/menu/name.ts
+var menuName = "menu";
+//#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 }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["disabled", Boolean(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(require_definition.Icon);
+	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => Boolean(x.controlType), _microsoft_fast_element.html`<span class="action"><${iconTag} class="icon" name="${(x) => getIndicatorIcon(x)}"></${iconTag}></span>`)}`;
+}
+function text() {
+	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => x.text || x.textSecondary, _microsoft_fast_element.html`<span class="text">
+			${(0, _microsoft_fast_element.when)((x) => x.text, _microsoft_fast_element.html`<span class="text-primary">${(x) => x.text}</span>`)}
+			${(0, _microsoft_fast_element.when)((x) => x.textSecondary, _microsoft_fast_element.html`<span class="text-secondary">${(x) => x.textSecondary}</span>`)}
+		</span>`)}`;
+}
+var MenuItemTemplate = (context) => {
+	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
+	const iconTag = context.tagFor(require_definition.Icon);
+	return _microsoft_fast_element.html`
+		<template
+			${require_host_semantics.applyHostSemantics({
+		role: MenuItemRole.menuitem,
+		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" ${(0, _microsoft_fast_element.slotted)("metaSlottedContent")}></slot>
+				${checkIndicator(context)}
+				${(0, _microsoft_fast_element.when)((x) => x.icon, _microsoft_fast_element.html`<span class="decorative"
+						>${(x) => affixIconTemplate(x.icon)}</span
+					>`)}
+				${text()}
+				<slot
+					name="trailing-meta"
+					${(0, _microsoft_fast_element.slotted)("trailingMetaSlottedContent")}
+				></slot>
+				${(0, _microsoft_fast_element.when)((x) => x.hasSubmenu, _microsoft_fast_element.html`<${iconTag} class="chevron" name="chevron-right-line"></${iconTag}>`)}
+			</div>
+			<slot
+				name="submenu"
+				${(0, _microsoft_fast_element.slotted)({
+		property: "slottedSubmenu",
+		filter: (0, _microsoft_fast_element.elements)(context.tagForNonDependency(menuName))
+	})}
+			></slot>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/menu-item/definition.ts
+/**
+* @internal
+*/
+var menuItemDefinition = require_vivid_element.defineVividComponent("menu-item", MenuItem, MenuItemTemplate, [require_definition.iconDefinition], { styles: menu_item_default });
+/**
+* Registers the menu-item elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerMenuItem = require_vivid_element.createRegisterFunction(menuItemDefinition);
+//#endregion
+Object.defineProperty(exports, "MenuItem", {
+	enumerable: true,
+	get: function() {
+		return MenuItem;
+	}
+});
+Object.defineProperty(exports, "MenuItemRole", {
+	enumerable: true,
+	get: function() {
+		return MenuItemRole;
+	}
+});
+Object.defineProperty(exports, "menuItemDefinition", {
+	enumerable: true,
+	get: function() {
+		return menuItemDefinition;
+	}
+});
+Object.defineProperty(exports, "menuName", {
+	enumerable: true,
+	get: function() {
+		return menuName;
+	}
+});
+Object.defineProperty(exports, "registerMenuItem", {
+	enumerable: true,
+	get: function() {
+		return registerMenuItem;
+	}
+});

package/unbundled/definition12.js

@@ -0,0 +1,287 @@
+import { n as replaces, 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 { a as affixIconTemplateFactory, t as AffixIcon } from "./affix.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 { 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)}";
+//#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
+/**
+* @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
+*/
+var MenuItem = class extends 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();
+	}
+	/**
+	* @internal
+	*/
+	checkedChanged() {
+		if (this.$fastController.isConnected) this.$emit("change");
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		Updates.enqueue(() => {
+			this._isPresentational = this._isPresentational ?? true;
+			this.#ensureRoleMatchesPresentational();
+		});
+	}
+	/**
+	* @internal
+	*/
+	slottedSubmenuChanged() {
+		if (this.submenu) {
+			this.submenu.anchor = this;
+			this.submenu.placement = "right-start";
+			this.submenu.collapseExpandedItem = () => this.#collapseExpandedItem();
+			this.submenu._popupOffset = 5;
+		}
+	}
+	/**
+	* @internal
+	*/
+	get submenu() {
+		if (this.slottedSubmenu?.length) return this.slottedSubmenu[0];
+		else return null;
+	}
+	/**
+	* @internal
+	*/
+	get hasSubmenu() {
+		return this.submenu !== null;
+	}
+	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.addEventListener("expanded-change", this.#expandedChange);
+	}
+	#collapseExpandedItem() {
+		this.expanded = false;
+	}
+	#expandedChange() {
+		if (this.submenu) this.submenu.open = this.expanded;
+	}
+	#syntheticClickEvents = /* @__PURE__ */ new WeakSet();
+	/**
+	* @internal
+	*/
+	_isSyntheticClickEvent(event) {
+		return this.#syntheticClickEvents.has(event);
+	}
+	#emitSyntheticClick() {
+		const mouseEvent = new MouseEvent("click", {
+			bubbles: true,
+			composed: true
+		});
+		this.#syntheticClickEvents.add(mouseEvent);
+		this.dispatchEvent(mouseEvent);
+	}
+};
+__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";
+		}
+	}
+}), 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({
+	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";
+//#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", Boolean(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>`)}`;
+}
+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);
+	return html`
+		<template
+			${applyHostSemantics({
+		role: MenuItemRole.menuitem,
+		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>
+				${when((x) => x.hasSubmenu, html`<${iconTag} class="chevron" name="chevron-right-line"></${iconTag}>`)}
+			</div>
+			<slot
+				name="submenu"
+				${slotted({
+		property: "slottedSubmenu",
+		filter: elements(context.tagForNonDependency(menuName))
+	})}
+			></slot>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/menu-item/definition.ts
+/**
+* @internal
+*/
+var menuItemDefinition = defineVividComponent("menu-item", MenuItem, MenuItemTemplate, [iconDefinition], { styles: menu_item_default });
+/**
+* Registers the menu-item elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerMenuItem = createRegisterFunction(menuItemDefinition);
+//#endregion
+export { MenuItemRole as a, MenuItem as i, registerMenuItem as n, menuName as r, menuItemDefinition as t };