@ixfx/components 0.6.2 → 0.7.1

package/dist/menu-item-D2S4i8u1.js

@@ -0,0 +1,809 @@
+import { t as TickledController } from "./tickled-controller-h9GmJ_bU.js";
+import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
+import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
+import { t as popupSurfaceStyles } from "./popup-D80sj2QC.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import "./icon-DcEEGQa_.js";
+import "./interaction-D5XdKzbR.js";
+import { LitElement, css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+//#region src/menu/menu-container.ts
+let MenuContainer = class MenuContainer extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.tickled = new TickledController(this, {
+			getItems: () => {
+				return this._getMenuItems().map((item, i) => ({
+					id: i,
+					enabled: !item.hasAttribute(`disabled`)
+				}));
+			},
+			onTickle: (index) => {
+				const items = this._getMenuItems();
+				if (index !== void 0) {
+					const item = items[index];
+					item.tabIndex = 0;
+					item.focus({ preventScroll: true });
+				}
+			},
+			onStateChange: () => {
+				this._syncTickledClasses();
+			}
+		});
+		this._handleMouseOver = (e) => {
+			const items = this._getMenuItems();
+			const path = e.composedPath();
+			const hoveredIndex = items.findIndex((item) => path.includes(item));
+			if (hoveredIndex !== -1) {
+				const item = items[hoveredIndex];
+				const itemPathIndex = path.indexOf(item);
+				if (!path.slice(0, itemPathIndex).some((node) => node instanceof Element && node.tagName === `IXFX-MENU-CONTAINER`)) this.tickled.handlePointerEnter(hoveredIndex);
+				e.stopPropagation();
+			}
+		};
+		this._handleKeydown = (e) => {
+			const items = this._getMenuItems();
+			if (items.length === 0) return;
+			switch (e.key) {
+				case `ArrowDown`:
+					e.preventDefault();
+					e.stopPropagation();
+					this._focusNext(items, 1);
+					break;
+				case `ArrowUp`:
+					e.preventDefault();
+					e.stopPropagation();
+					this._focusNext(items, -1);
+					break;
+				case `Home`:
+					e.preventDefault();
+					e.stopPropagation();
+					this._focusItem(items, 0);
+					break;
+				case `End`:
+					e.preventDefault();
+					e.stopPropagation();
+					this._focusItem(items, items.length - 1);
+					break;
+				case `Enter`:
+				case ` `:
+					e.preventDefault();
+					e.stopPropagation();
+					this._activateFocusedItem(items);
+			}
+		};
+	}
+	static {
+		this.styles = [
+			popupSurfaceStyles,
+			themeFallbacks,
+			tickledStyles,
+			css`
+    :host {
+      display: block;
+    }
+
+    .popover {
+      padding: var(--space-xs) 0;
+      min-width: 160px;
+    }
+
+    :host {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      transition: opacity 0.12s ease-out, transform 0.12s ease-out,
+                  display 0.12s allow-discrete, overlay 0.12s allow-discrete;
+    }
+
+    @starting-style :host {
+      opacity: 0;
+      transform: translateY(-4px) scale(0.97);
+    }
+
+    ::slotted(menu-separator) {
+      display: block;
+      margin: var(--space-xs) 0;
+    }
+  `
+		];
+	}
+	_updateIconSections() {
+		const slot = this.shadowRoot?.querySelector(`slot`);
+		if (!slot) return;
+		const assigned = slot.assignedElements({ flatten: true });
+		const sections = [];
+		let section = [];
+		for (const el of assigned) if (el.tagName === `IXFX-MENU-SEPARATOR` || el.tagName === `IXFX-MENU-HEADER`) {
+			if (section.length > 0) {
+				sections.push(section);
+				section = [];
+			}
+		} else section.push(el);
+		if (section.length > 0) sections.push(section);
+		this._propagateContext();
+		for (const sec of sections) {
+			const hasIcon = sec.some((el) => {
+				if (el.tagName === `IXFX-MENU-RADIO-GROUP`) return [...el.children].some((ri) => ri.hasAttribute(`icon-name`));
+				return el.hasAttribute(`icon-name`);
+			});
+			for (const el of sec) if (el.tagName === `IXFX-MENU-RADIO-GROUP`) for (const ri of el.children) if (hasIcon) ri.setAttribute(`data-icon-section`, ``);
+			else ri.removeAttribute(`data-icon-section`);
+			else if (hasIcon) el.setAttribute(`data-icon-section`, ``);
+			else el.removeAttribute(`data-icon-section`);
+		}
+		this.performUpdate();
+	}
+	_propagateContext() {
+		const slot = this.shadowRoot?.querySelector(`slot`);
+		if (!slot) return;
+		for (const el of slot.assignedElements({ flatten: true })) {
+			if (`registry` in el) el.registry = this.registry;
+			if (`keyboardManager` in el) el.keyboardManager = this.keyboardManager;
+		}
+	}
+	updated(changedProperties) {
+		if (changedProperties.has(`registry`) || changedProperties.has(`keyboardManager`)) this._propagateContext();
+	}
+	/**
+	* Sync data-input-mode to :host so CSS variables cascade to slotted items
+	*/
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+	}
+	render() {
+		return html`
+      <div
+        class="popover popup-surface"
+        role="menu"
+        @keydown=${this._handleKeydown}
+        @mouseover=${this._handleMouseOver}
+      >
+        <slot @slotchange=${this._updateIconSections}></slot>
+      </div>
+    `;
+	}
+	_getMenuItems() {
+		const slot = this.shadowRoot?.querySelector(`slot`);
+		if (!slot) return [];
+		const skipTags = [`IXFX-MENU-SEPARATOR`, `IXFX-MENU-HEADER`];
+		const result = [];
+		for (const el of slot.assignedElements({ flatten: true })) {
+			if (skipTags.includes(el.tagName)) continue;
+			if (el.hasAttribute(`disabled`)) continue;
+			const role = el.getAttribute(`role`);
+			if (role === `none` || role === `presentation`) continue;
+			if (el.tagName === `IXFX-MENU-RADIO-GROUP`) {
+				const groupSlot = el.shadowRoot?.querySelector(`slot`);
+				for (const radioItem of groupSlot?.assignedElements({ flatten: true }) ?? []) if (!radioItem.hasAttribute(`disabled`)) result.push(radioItem);
+			} else result.push(el);
+		}
+		return result;
+	}
+	/**
+	* Sync .tickled class on slotted items to match controller state
+	* This is called via onStateChange whenever the tickled state changes
+	*/
+	_syncTickledClasses() {
+		const items = this._getMenuItems();
+		items.forEach((item, i) => {
+			if (this.tickled.isTickled(i)) {
+				item.classList.add(`tickled`);
+				item.tabIndex = 0;
+				const innerItem = item.shadowRoot?.querySelector(`.item`);
+				if (innerItem) {
+					innerItem.style.background = `rgba(0, 0, 0, 0.06)`;
+					innerItem.style.borderColor = `var(--accent)`;
+					innerItem.style.color = `inherit`;
+				}
+			} else {
+				item.classList.remove(`tickled`);
+				item.tabIndex = -1;
+				const innerItem = item.shadowRoot?.querySelector(`.item`);
+				if (innerItem) {
+					innerItem.style.background = ``;
+					innerItem.style.borderColor = ``;
+					innerItem.style.color = ``;
+				}
+			}
+		});
+		if (this.tickled.inputMode === `keyboard` && this.tickled.tickledId !== void 0) items[this.tickled.tickledId]?.focus();
+	}
+	focusFirst() {
+		this.tickled.handleKeyboardNavigation(`first`);
+	}
+	_focusNext(items, direction) {
+		if (items.length === 0) return;
+		this.tickled.handleKeyboardNavigation(direction > 0 ? `next` : `previous`);
+	}
+	_focusItem(items, index) {
+		if (items.length === 0) return;
+		const clampedIndex = Math.max(0, Math.min(index, items.length - 1));
+		this.tickled.handleKeyboardNavigation(clampedIndex);
+	}
+	_activateFocusedItem(items) {
+		const tickledIndex = this.tickled.tickledId;
+		if (tickledIndex === void 0) return;
+		const item = items[tickledIndex];
+		if (!item) return;
+		const tagName = item.tagName;
+		if (tagName === `IXFX-MENU-SUB-TRIGGER`) return;
+		if (tagName === `IXFX-MENU-CHECK-ITEM`) {
+			const checkItem = item;
+			checkItem.checked = !checkItem.checked;
+			checkItem.dispatchEvent(new CustomEvent(`command`, {
+				detail: {
+					command: checkItem.command,
+					checked: checkItem.checked
+				},
+				bubbles: true,
+				composed: true
+			}));
+			return;
+		}
+		if (tagName === `IXFX-MENU-RADIO-ITEM`) {
+			item.dispatchEvent(new CustomEvent(`radio-select`, {
+				detail: { value: item.value },
+				bubbles: true,
+				composed: true
+			}));
+			return;
+		}
+		if (tagName === `IXFX-MENU-ITEM`) {
+			const command = item.command;
+			if (command) item.dispatchEvent(new CustomEvent(`command`, {
+				detail: { command },
+				bubbles: true,
+				composed: true
+			}));
+			return;
+		}
+		item.click();
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `anchor`
+})], MenuContainer.prototype, "anchor", void 0);
+__decorate([property({ attribute: false })], MenuContainer.prototype, "registry", void 0);
+__decorate([property({ attribute: false })], MenuContainer.prototype, "keyboardManager", void 0);
+__decorate([query(`.popover`)], MenuContainer.prototype, "_popover", void 0);
+MenuContainer = __decorate([safeCustomElement(`ixfx-menu-container`)], MenuContainer);
+//#endregion
+//#region src/menu/menu-trigger.ts
+var _MenuTrigger;
+let MenuTrigger = class MenuTrigger extends LitElement {
+	static {
+		_MenuTrigger = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.mode = `trigger`;
+		this.label = `⋮`;
+		this.iconName = ``;
+		this.placement = `bottom-start`;
+		this.tabStop = true;
+		this._isOpen = false;
+		this._hasMenu = false;
+		this._hasTriggerSlot = false;
+		this._anchorName = `--mt-${_MenuTrigger._count++}`;
+		this._clickListener = this._handleClickOutside.bind(this);
+		this._handlePopoverToggle = (e) => {
+			if (e.newState === `closed`) {
+				this._isOpen = false;
+				document.removeEventListener(`click`, this._clickListener);
+				this.dispatchEvent(new CustomEvent(`menu-trigger-close`, {
+					bubbles: true,
+					composed: true
+				}));
+			}
+		};
+		this._handleKeydown = (e) => {
+			if (!this._isOpen) return;
+			if (e.key === `Escape`) {
+				e.preventDefault();
+				e.stopPropagation();
+				this._closeMenu();
+				this._triggerBtn?.focus();
+			} else if (e.key === `Tab`) {
+				this._closeMenu();
+				this._triggerBtn?.focus();
+			}
+		};
+	}
+	static {
+		this._count = 0;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener(`keydown`, this._handleKeydown);
+		this.addEventListener(`command`, this._handleCommand);
+		this.addEventListener(`radio-change`, this._handleRadioChange);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener(`keydown`, this._handleKeydown);
+		this.removeEventListener(`command`, this._handleCommand);
+		this.removeEventListener(`radio-change`, this._handleRadioChange);
+		document.removeEventListener(`click`, this._clickListener);
+	}
+	firstUpdated() {
+		this.style.setProperty(`--anchor-name`, this._anchorName);
+		this._popup.addEventListener(`toggle`, this._handlePopoverToggle);
+		this.updateComplete.then(() => {
+			const slot = this.shadowRoot?.querySelector(`slot[name="menu"]`);
+			if (slot) {
+				if (slot.assignedElements({ flatten: true }).length > 0) {
+					this._hasMenu = true;
+					this._propagateContext();
+				}
+			}
+			this._updatePosition();
+		});
+	}
+	updated(changedProperties) {
+		if (changedProperties.has(`registry`) || changedProperties.has(`keyboardManager`)) this._propagateContext();
+	}
+	_updatePosition() {
+		const pos = {
+			"bottom-start": { insetArea: `block-end span-inline-start` },
+			"bottom-end": { insetArea: `block-end span-inline-end` },
+			"right-start": { insetArea: `inline-end span-block-start` }
+		}[this.placement];
+		this._popup.style.insetArea = pos.insetArea;
+		this._popup.style.positionAnchor = this._anchorName;
+		const fb = {
+			"bottom-start": {
+				top: `anchor(bottom)`,
+				left: `anchor(left)`,
+				right: `auto`
+			},
+			"bottom-end": {
+				top: `anchor(bottom)`,
+				left: `auto`,
+				right: `anchor(left)`
+			},
+			"right-start": {
+				top: `anchor(top)`,
+				left: `anchor(right)`,
+				right: `auto`
+			}
+		}[this.placement];
+		this._popup.style.top = fb.top;
+		this._popup.style.left = fb.left;
+		this._popup.style.right = fb.right;
+	}
+	_propagateContext() {
+		const items = (this.shadowRoot?.querySelector(`slot[name="menu"]`))?.assignedElements({ flatten: true }) ?? [];
+		for (const el of items) {
+			if (`registry` in el) el.registry = this.registry;
+			if (`keyboardManager` in el) el.keyboardManager = this.keyboardManager;
+		}
+	}
+	_handleSlotChange(e) {
+		const assigned = e.target.assignedElements({ flatten: true });
+		this._hasMenu = assigned.length > 0;
+		this._propagateContext();
+	}
+	_handleTriggerSlotChange(e) {
+		const slot = e.target;
+		this._hasTriggerSlot = slot.assignedElements({ flatten: true }).length > 0;
+	}
+	get isOpen() {
+		return this._isOpen;
+	}
+	openMenu() {
+		this._openMenu();
+	}
+	closeMenu() {
+		this._closeMenu();
+	}
+	focusTrigger() {
+		this._triggerBtn?.focus();
+	}
+	_openMenu() {
+		if (this._isOpen || !this._popup?.popover) return;
+		try {
+			this._popup.showPopover({ source: this });
+			this._isOpen = true;
+			document.addEventListener(`click`, this._clickListener);
+			this.dispatchEvent(new CustomEvent(`menu-trigger-open`, {
+				bubbles: true,
+				composed: true
+			}));
+			requestAnimationFrame(() => {
+				this._getMenuContainer()?.focusFirst();
+			});
+		} catch (err) {
+			console.warn(`showPopover failed:`, err);
+		}
+	}
+	_closeMenu() {
+		if (!this._isOpen) return;
+		if (this._popup?.popover) try {
+			this._popup.hidePopover();
+		} catch {}
+		this._isOpen = false;
+		document.removeEventListener(`click`, this._clickListener);
+	}
+	_handleTriggerClick(e) {
+		e.stopPropagation();
+		if (this._isOpen) {
+			this._closeMenu();
+			this._triggerBtn?.focus();
+		} else this._openMenu();
+	}
+	_handleClickOutside(e) {
+		if (!this.contains(e.target)) {
+			if (this._popup?.popover && this._popup.hasAttribute(`open`)) try {
+				this._popup.hidePopover();
+			} catch {}
+		}
+	}
+	_getMenuContainer() {
+		return ((this.shadowRoot?.querySelector(`slot[name="menu"]`))?.assignedElements({ flatten: true }) ?? []).find((el) => el.tagName === `IXFX-MENU-CONTAINER`) ?? null;
+	}
+	_handleCommand(e) {
+		if (this._popup?.popover) try {
+			this._popup.hidePopover();
+		} catch {}
+		this.dispatchEvent(new CustomEvent(`menu-command`, {
+			detail: e.detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_handleRadioChange(e) {
+		if (this._popup?.popover) try {
+			this._popup.hidePopover();
+		} catch {}
+		this.dispatchEvent(new CustomEvent(`menu-command`, {
+			detail: {
+				command: e.detail.name,
+				value: e.detail.value
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_handleContextMenu(e) {
+		if (this.mode !== `context`) return;
+		e.preventDefault();
+		this._popup.style.top = `${e.clientY}px`;
+		this._popup.style.left = `${e.clientX}px`;
+		this._popup.style.position = `fixed`;
+		this._popup.style.positionAnchor = `none`;
+		if (this._popup?.popover) try {
+			this._popup.showPopover();
+		} catch {}
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			popupSurfaceStyles,
+			css`
+    :host {
+      display: inline-block;
+      position: relative;
+      --ixfx-button-padding: var(--ixfx-button-padding, var(--space-s) var(--space-m));
+    }
+
+    .trigger-area {
+      anchor-name: var(--anchor-name);
+      /* Block flex (not inline-flex): as an inline-level box this would join
+         the host's inline formatting context and pick up strut/baseline gaps
+         above and below the button, offsetting the glyph from center. */
+      display: flex;
+      align-items: stretch;
+    }
+
+    .trigger-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      background: none;
+      border: none;
+      color: var(--surface-3-text);
+      cursor: pointer;
+      padding: var(--ixfx-button-padding);
+      font-family: var(--font-family, inherit);
+      font-size: var(--text-m);
+      font-weight: 600;
+      border-radius: var(--radius-s);
+      opacity: 0.6;
+      transition: opacity var(--transition), background var(--transition);
+    }
+
+    .trigger-btn:hover {
+      background: var(--_trigger-hover-bg, var(--surface-4));
+      color: var(--surface-3-text);
+      opacity: var(--_trigger-hover-opacity, 1);
+    }
+
+    .trigger-btn:focus-visible {
+      background: var(--surface-4);
+      color: var(--surface-3-text);
+      outline: none;
+      opacity: 1;
+    }
+
+    .popup {
+      position: fixed;
+      position-anchor: var(--anchor-name);
+      inset: auto;
+      margin: 8px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      z-index: 100;
+      max-height: min(60vh, 400px);
+      max-width: min(90vw, 320px);
+      overflow: auto;
+      overscroll-behavior: contain;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    }
+
+    .popup[popover] {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      transition: opacity 0.12s ease-out, transform 0.12s ease-out,
+                  display 0.12s allow-discrete, overlay 0.12s allow-discrete;
+    }
+
+    @starting-style .popup {
+      opacity: 0;
+      transform: translateY(-4px) scale(0.97);
+    }
+  `
+		];
+	}
+	render() {
+		const showButton = this.mode !== `dropdown` && this._hasMenu && !this._hasTriggerSlot;
+		return html`
+      <div
+        class="trigger-area"
+        @click=${this._handleTriggerClick}
+        @contextmenu=${this._handleContextMenu}
+      >
+        ${showButton ? html`<button class="trigger-btn" part="base" tabindex=${this.tabStop ? `0` : `-1`}>${this.iconName ? html`<ixfx-icon name=${this.iconName}></ixfx-icon>` : this.label}</button>` : null}
+        <slot name="trigger" @slotchange=${this._handleTriggerSlotChange}></slot>
+      </div>
+      <div
+        class="popup popup-surface"
+        popover="auto"
+        @click=${(e) => e.stopPropagation()}
+      >
+          <slot name="menu" @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: String })], MenuTrigger.prototype, "mode", void 0);
+__decorate([property({ type: String })], MenuTrigger.prototype, "label", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-name`
+})], MenuTrigger.prototype, "iconName", void 0);
+__decorate([property({ attribute: false })], MenuTrigger.prototype, "registry", void 0);
+__decorate([property({ attribute: false })], MenuTrigger.prototype, "keyboardManager", void 0);
+__decorate([property({ type: String })], MenuTrigger.prototype, "placement", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `tab-stop`
+})], MenuTrigger.prototype, "tabStop", void 0);
+__decorate([state()], MenuTrigger.prototype, "_isOpen", void 0);
+__decorate([state()], MenuTrigger.prototype, "_hasMenu", void 0);
+__decorate([state()], MenuTrigger.prototype, "_hasTriggerSlot", void 0);
+__decorate([query(`.trigger-btn`)], MenuTrigger.prototype, "_triggerBtn", void 0);
+__decorate([query(`.popup`)], MenuTrigger.prototype, "_popup", void 0);
+MenuTrigger = _MenuTrigger = __decorate([safeCustomElement(`ixfx-menu-trigger`)], MenuTrigger);
+//#endregion
+//#region src/menu/menu-item.ts
+let MenuItem = class MenuItem extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.command = ``;
+		this.commandArgs = ``;
+		this.label = ``;
+		this.disabled = false;
+		this.iconName = ``;
+		this._hasChildren = false;
+		this._hoverTimeout = null;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._hoverTimeout) clearTimeout(this._hoverTimeout);
+	}
+	_handleSlotChange() {
+		const assigned = this._slot?.assignedElements() ?? [];
+		this._hasChildren = assigned.length > 0;
+	}
+	_handleMouseEnter() {
+		if (this.disabled || !this._hasChildren || !this.submenuPopover) return;
+		if (this._hoverTimeout) clearTimeout(this._hoverTimeout);
+		this._hoverTimeout = window.setTimeout(() => {
+			this._showSubmenu();
+		}, 150);
+	}
+	_handleMouseLeave() {
+		if (this._hoverTimeout) {
+			clearTimeout(this._hoverTimeout);
+			this._hoverTimeout = null;
+		}
+		this._hideSubmenu();
+	}
+	_showSubmenu() {
+		if (!this.submenuPopover?.popover) return;
+		try {
+			this.submenuPopover.showPopover();
+		} catch (err) {
+			console.warn(`showPopover failed:`, err);
+		}
+	}
+	_hideSubmenu() {
+		if (!this.submenuPopover?.popover) return;
+		try {
+			this.submenuPopover.hidePopover();
+		} catch (err) {
+			console.warn(`hidePopover failed:`, err);
+		}
+	}
+	handleClick() {
+		if (this.disabled) return;
+		this.dispatchEvent(new CustomEvent(`command`, {
+			detail: {
+				command: this.command,
+				args: this.commandArgs
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_resolvedLabel() {
+		if (this.label) return this.label;
+		if (this.registry && this.command) return this.registry.get(this.command)?.label ?? ``;
+		return ``;
+	}
+	_resolvedIcon() {
+		if (this.iconName) return this.iconName;
+		if (this.registry && this.command) return this.registry.get(this.command)?.icon ?? null;
+		return null;
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		const resolvedIcon = this._resolvedIcon();
+		if (resolvedIcon && !this.iconName) this.setAttribute(`data-icon-section`, ``);
+		else if (!resolvedIcon && !this.iconName) this.removeAttribute(`data-icon-section`);
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+	}
+	_getShortcut() {
+		if (!this.keyboardManager || !this.command) return null;
+		const binding = (this.keyboardManager.getBindings?.() ?? []).find((b) => b.commandId === this.command);
+		if (!binding) return null;
+		const mods = Array.from(binding.modifiers ?? [], (m) => ({
+			ctrl: `⌃`,
+			shift: `⇧`,
+			alt: `⌥`,
+			meta: `⌘`
+		})[m] ?? m);
+		const key = binding.key?.length === 1 ? binding.key.toUpperCase() : binding.key;
+		return [...mods, key].join(``);
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			tickledItemStyles,
+			css`
+    :host {
+      display: block;
+    }
+
+    .item {
+      display: flex !important;
+      align-items: center;
+      padding: 6px var(--space-m);
+      font-size: var(--text-m);
+      background: var(--item-bg, transparent);
+      border: var(--item-border, 1px solid transparent);
+      color: var(--item-text, inherit);
+    }
+
+    :host(.tickled) .item {
+      background: var(--item-bg-tickled);
+      border: var(--item-border-tickled);
+      color: var(--item-text-tickled);
+    }
+
+    :host(:focus) {
+      outline: none;
+    }
+
+    .item.disabled {
+      opacity: var(--disabled-opacity);
+      cursor: default;
+    }
+
+    .item.disabled:hover {
+      background: transparent;
+    }
+
+    .icon-slot {
+      width: 0;
+      overflow: hidden;
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    :host([icon-name]) .icon-slot,
+    :host([data-icon-section]) .icon-slot {
+      width: 1em;
+      height: 1em;
+      margin-right: var(--space-s);
+    }
+
+    .label {
+      flex: 1;
+    }
+
+    .shortcut {
+      margin-left: auto;
+      color: var(--surface-muted-text);
+      font-size: var(--text-s);
+    }
+
+    .arrow {
+      color: var(--surface-muted-text);
+      margin-left: var(--space-m);
+    }
+  `
+		];
+	}
+	render() {
+		const shortcut = this._getShortcut();
+		const resolvedIcon = this._resolvedIcon();
+		return html`
+      <div 
+        class="item ${this.disabled ? `disabled` : ``}"
+        @click=${this.handleClick}
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+        tabindex="${this.disabled ? -1 : 0}"
+        role="menuitem"
+        aria-haspopup="${this._hasChildren ? `true` : `false`}"
+        aria-expanded="${this.submenuPopover?.matches(`:popover-open`) ?? false}"
+      >
+        <span class="icon-slot">${resolvedIcon ? html`<ixfx-icon name="${resolvedIcon}"></ixfx-icon>` : null}</span>
+        <span class="label"><slot></slot>${this._resolvedLabel()}</span>
+        ${shortcut ? html`<span class="shortcut">${shortcut}</span>` : null}
+        ${this._hasChildren ? html`<span class="arrow"><ixfx-icon name="chevron-right"></ixfx-icon></span>` : null}
+      </div>
+      <slot @slotchange=${this._handleSlotChange}></slot>
+    `;
+	}
+};
+__decorate([property({ type: String })], MenuItem.prototype, "command", void 0);
+__decorate([property({
+	type: String,
+	attribute: `command-args`
+})], MenuItem.prototype, "commandArgs", void 0);
+__decorate([property({ type: String })], MenuItem.prototype, "label", void 0);
+__decorate([property({ type: Boolean })], MenuItem.prototype, "disabled", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-name`
+})], MenuItem.prototype, "iconName", void 0);
+__decorate([property({ attribute: false })], MenuItem.prototype, "registry", void 0);
+__decorate([property({ attribute: false })], MenuItem.prototype, "keyboardManager", void 0);
+__decorate([property({ attribute: false })], MenuItem.prototype, "submenuPopover", void 0);
+__decorate([state()], MenuItem.prototype, "_hasChildren", void 0);
+__decorate([query(`slot`)], MenuItem.prototype, "_slot", void 0);
+MenuItem = __decorate([safeCustomElement(`ixfx-menu-item`)], MenuItem);
+//#endregion
+export { MenuTrigger as n, MenuContainer as r, MenuItem as t };
+
+//# sourceMappingURL=menu-item-D2S4i8u1.js.map