@ixfx/components 0.6.2 → 0.7.0

package/dist/menu-DIfU70AA.js

@@ -1,1609 +0,0 @@
-import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { t as TickledController } from "./tickled-controller-DkAU-0qL.js";
-import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
-import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
-import { t as popupSurfaceStyles } from "./popup-D80sj2QC.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { LitElement, css, html, nothing } 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.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);
-      display: inline-flex;
-      align-items: stretch;
-    }
-
-    .trigger-btn {
-      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.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({ 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
-//#region src/menu/menu-bar.ts
-let MenuBar = class MenuBar extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this._openTrigger = null;
-		this._inputMode = `mouse`;
-		this._handlePointerMove = () => {
-			this._setInputMode(`mouse`);
-		};
-		this._handleTriggerOpen = (e) => {
-			this._openTrigger = e.target;
-		};
-		this._handleTriggerClose = (e) => {
-			if (e.target === this._openTrigger) this._openTrigger = null;
-		};
-		this._handleFocusIn = (e) => {
-			const trigger = this._getTriggers().find((t) => t === e.target);
-			if (!trigger || !this._openTrigger || trigger === this._openTrigger) return;
-			this._openTrigger.closeMenu();
-			trigger.openMenu();
-		};
-		this._handleKeydown = (e) => {
-			if (e.key !== `ArrowLeft` && e.key !== `ArrowRight`) return;
-			const triggers = this._getTriggers();
-			if (triggers.length === 0) return;
-			const current = this._openTrigger ?? triggers.find((t) => t === e.target);
-			if (!current) return;
-			const idx = triggers.indexOf(current);
-			if (idx === -1) return;
-			e.preventDefault();
-			e.stopPropagation();
-			this._setInputMode(`keyboard`);
-			const next = triggers[(idx + (e.key === `ArrowRight` ? 1 : -1) + triggers.length) % triggers.length];
-			if (this._openTrigger) {
-				this._openTrigger.closeMenu();
-				next.openMenu();
-			} else next.focusTrigger();
-		};
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener(`menu-trigger-open`, this._handleTriggerOpen);
-		this.addEventListener(`menu-trigger-close`, this._handleTriggerClose);
-		this.addEventListener(`focusin`, this._handleFocusIn);
-		this.addEventListener(`keydown`, this._handleKeydown);
-		this.addEventListener(`pointermove`, this._handlePointerMove);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener(`menu-trigger-open`, this._handleTriggerOpen);
-		this.removeEventListener(`menu-trigger-close`, this._handleTriggerClose);
-		this.removeEventListener(`focusin`, this._handleFocusIn);
-		this.removeEventListener(`keydown`, this._handleKeydown);
-		this.removeEventListener(`pointermove`, this._handlePointerMove);
-	}
-	_setInputMode(mode) {
-		if (this._inputMode === mode) return;
-		this._inputMode = mode;
-		this.setAttribute(`data-input-mode`, mode);
-	}
-	_getTriggers() {
-		return [...this.children].filter((el) => el.tagName === `IXFX-MENU-TRIGGER`);
-	}
-	static {
-		this.styles = css`
-    :host {
-      display: flex;
-      align-items: center;
-    }
-
-    /* Keyboard mode: suppress hover highlight on trigger buttons */
-    :host([data-input-mode="keyboard"]) {
-      --_trigger-hover-bg: transparent;
-      --_trigger-hover-opacity: 0.6;
-    }
-  `;
-	}
-	render() {
-		return html`<slot role="menubar"></slot>`;
-	}
-};
-MenuBar = __decorate([safeCustomElement(`ixfx-menu-bar`)], MenuBar);
-//#endregion
-//#region src/menu/menu-check-item.ts
-let MenuCheckItem = class MenuCheckItem extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.command = ``;
-		this.commandArgs = ``;
-		this.label = ``;
-		this.checked = false;
-		this.disabled = false;
-		this.iconName = ``;
-	}
-	handleClick() {
-		if (this.disabled) return;
-		this.checked = !this.checked;
-		this.dispatchEvent(new CustomEvent(`command`, {
-			detail: {
-				command: this.command,
-				checked: this.checked,
-				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;
-      padding: 6px var(--space-m);
-      font-size: var(--text-m);
-    }
-
-    :host(:focus) {
-      outline: none;
-    }
-
-    .item.disabled {
-      opacity: var(--disabled-opacity);
-      cursor: default;
-    }
-
-    .item.disabled:hover {
-      background: transparent;
-    }
-
-    .check {
-      width: 16px;
-      margin-right: var(--space-s);
-      font-size: var(--text-m);
-      color: var(--accent);
-    }
-
-    .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: var(--space-l);
-      color: var(--surface-muted-text);
-      font-size: var(--text-s);
-    }
-  `
-		];
-	}
-	render() {
-		const shortcut = this._getShortcut();
-		const resolvedIcon = this._resolvedIcon();
-		return html`
-      <div 
-        class="item ${this.disabled ? `disabled` : ``}"
-        @click=${this.handleClick}
-        tabindex="${this.disabled ? -1 : 0}"
-        role="menuitemcheckbox"
-        aria-checked="${this.checked}"
-      >
-        <span class="check">${this.checked ? `✓` : ``}</span>
-        <span class="icon-slot">${resolvedIcon ? html`<ixfx-icon name="${resolvedIcon}"></ixfx-icon>` : null}</span>
-        <span class="label">${this._resolvedLabel()}</span>
-        ${shortcut ? html`<span class="shortcut">${shortcut}</span>` : null}
-      </div>
-    `;
-	}
-};
-__decorate([property({ type: String })], MenuCheckItem.prototype, "command", void 0);
-__decorate([property({
-	type: String,
-	attribute: `command-args`
-})], MenuCheckItem.prototype, "commandArgs", void 0);
-__decorate([property({ type: String })], MenuCheckItem.prototype, "label", void 0);
-__decorate([property({ type: Boolean })], MenuCheckItem.prototype, "checked", void 0);
-__decorate([property({ type: Boolean })], MenuCheckItem.prototype, "disabled", void 0);
-__decorate([property({
-	type: String,
-	attribute: `icon-name`
-})], MenuCheckItem.prototype, "iconName", void 0);
-__decorate([property({ attribute: false })], MenuCheckItem.prototype, "registry", void 0);
-__decorate([property({ attribute: false })], MenuCheckItem.prototype, "keyboardManager", void 0);
-MenuCheckItem = __decorate([safeCustomElement(`ixfx-menu-check-item`)], MenuCheckItem);
-//#endregion
-//#region src/menu/menu-command-controller.ts
-var MenuCommandController = class {
-	constructor(options) {
-		this.registry = options.registry;
-		this.target = options.target ?? document;
-		this.boundHandler = this.handleCommand.bind(this);
-	}
-	start() {
-		this.target.addEventListener(`command`, this.boundHandler);
-	}
-	stop() {
-		this.target.removeEventListener(`command`, this.boundHandler);
-	}
-	handleCommand(e) {
-		const target = e.target;
-		const command = target?.command;
-		if (!command) return;
-		const args = target?.commandArgs ?? ``;
-		this.registry.invoke(command, { args });
-	}
-};
-//#endregion
-//#region src/menu/menu-sub-trigger.ts
-var _MenuSubTrigger;
-let MenuSubTrigger = class MenuSubTrigger extends LitElement {
-	static {
-		_MenuSubTrigger = this;
-	}
-	constructor(..._args) {
-		super(..._args);
-		this.command = ``;
-		this.commandArgs = ``;
-		this.label = ``;
-		this.disabled = false;
-		this.iconName = ``;
-		this._hasSubmenu = false;
-		this._anchorName = `--mst-${_MenuSubTrigger._count++}`;
-		this._hoverTimeout = null;
-		this._hideTimeout = null;
-	}
-	static {
-		this._count = 0;
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener(`keydown`, this._handleKeydown);
-	}
-	firstUpdated() {
-		this.style.setProperty(`--anchor-name`, this._anchorName);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener(`keydown`, this._handleKeydown);
-		if (this._hoverTimeout) clearTimeout(this._hoverTimeout);
-		if (this._hideTimeout) clearTimeout(this._hideTimeout);
-	}
-	_propagateContext() {
-		const items = this._slot?.assignedElements({ flatten: true }) ?? [];
-		for (const el of items) {
-			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();
-	}
-	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`);
-	}
-	_resolvedIcon() {
-		if (this.iconName) return this.iconName;
-		if (this.registry && this.command) return this.registry.get(this.command)?.icon ?? null;
-		return null;
-	}
-	_handleSlotChange() {
-		this._hasSubmenu = this._slot?.assignedElements().length > 0;
-		this._propagateContext();
-	}
-	_showSubmenu() {
-		if (!this._submenuPopover?.popover) return;
-		try {
-			this._submenuPopover.showPopover();
-		} catch {}
-	}
-	_hideSubmenu() {
-		if (!this._submenuPopover?.popover) return;
-		try {
-			this._submenuPopover.hidePopover();
-		} catch {}
-	}
-	_cancelHide() {
-		if (this._hideTimeout) {
-			clearTimeout(this._hideTimeout);
-			this._hideTimeout = null;
-		}
-	}
-	_scheduleHide() {
-		this._cancelHide();
-		this._hideTimeout = window.setTimeout(() => {
-			this._hideSubmenu();
-			this._hideTimeout = null;
-		}, 100);
-	}
-	_handleMouseEnter() {
-		if (this.disabled || !this._hasSubmenu) return;
-		this._cancelHide();
-		if (this._hoverTimeout) clearTimeout(this._hoverTimeout);
-		this._hoverTimeout = window.setTimeout(() => {
-			this._showSubmenu();
-		}, 150);
-	}
-	_handleMouseLeave() {
-		if (this._hoverTimeout) {
-			clearTimeout(this._hoverTimeout);
-			this._hoverTimeout = null;
-		}
-		this._scheduleHide();
-	}
-	_handleSubmenuMouseEnter() {
-		this._cancelHide();
-	}
-	_handleSubmenuMouseLeave() {
-		this._scheduleHide();
-	}
-	_handleClick() {
-		if (this.disabled || !this.command) return;
-		this.dispatchEvent(new CustomEvent(`command`, {
-			detail: {
-				command: this.command,
-				args: this.commandArgs
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_handleKeydown(e) {
-		if (this.disabled) return;
-		switch (e.key) {
-			case `ArrowRight`:
-			case `Enter`:
-			case ` `:
-				e.preventDefault();
-				e.stopPropagation();
-				if (this._hasSubmenu) {
-					this._showSubmenu();
-					requestAnimationFrame(() => {
-						(this._slot?.assignedElements({ flatten: true }).find((el) => el.tagName === `IXFX-MENU-CONTAINER`))?.focusFirst();
-					});
-				}
-				break;
-			case `ArrowLeft`:
-				e.preventDefault();
-				e.stopPropagation();
-				this._hideSubmenu();
-				this._itemEl?.focus();
-				break;
-			case `Escape`:
-				e.preventDefault();
-				e.stopPropagation();
-				this._hideSubmenu();
-		}
-	}
-	static {
-		this.styles = [
-			themeFallbacks,
-			tickledItemStyles,
-			css`
-    :host {
-      display: block;
-    }
-
-    .item {
-      anchor-name: var(--anchor-name);
-      display: flex;
-      padding: 6px var(--space-m);
-      font-size: var(--text-m);
-    }
-
-    .submenu-popover {
-      position: fixed;
-      position-anchor: var(--anchor-name);
-      inset: auto;
-      top: anchor(top);
-      left: anchor(right);
-      margin: 0;
-      padding: 0;
-      border: none;
-      background: transparent;
-      /* UA stylesheet sets overflow:auto on [popover], which clips the box-shadow
-         of the inner ixfx-menu-container child. Override to let the shadow render. */
-      overflow: visible;
-      position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
-    }
-
-    :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;
-    }
-
-    .arrow {
-      color: var(--surface-muted-text);
-      margin-left: var(--space-m);
-    }
-  `
-		];
-	}
-	render() {
-		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="true"
-        aria-expanded="false"
-      >
-        <span class="icon-slot">${resolvedIcon ? html`<ixfx-icon name="${resolvedIcon}"></ixfx-icon>` : null}</span>
-        <span class="label"><slot></slot>${this.label}</span>
-        <span class="arrow">${this._hasSubmenu ? html`<ixfx-icon name="chevron-right"></ixfx-icon>` : nothing}</span>
-      </div>
-      <div class="submenu-popover" popover="auto"
-        @mouseenter=${this._handleSubmenuMouseEnter}
-        @mouseleave=${this._handleSubmenuMouseLeave}
-      >
-        <slot name="submenu" @slotchange=${this._handleSlotChange}></slot>
-      </div>
-    `;
-	}
-};
-__decorate([property({ type: String })], MenuSubTrigger.prototype, "command", void 0);
-__decorate([property({
-	type: String,
-	attribute: `command-args`
-})], MenuSubTrigger.prototype, "commandArgs", void 0);
-__decorate([property({ type: String })], MenuSubTrigger.prototype, "label", void 0);
-__decorate([property({ type: Boolean })], MenuSubTrigger.prototype, "disabled", void 0);
-__decorate([property({
-	type: String,
-	attribute: `icon-name`
-})], MenuSubTrigger.prototype, "iconName", void 0);
-__decorate([property({ attribute: false })], MenuSubTrigger.prototype, "registry", void 0);
-__decorate([property({ attribute: false })], MenuSubTrigger.prototype, "keyboardManager", void 0);
-__decorate([state()], MenuSubTrigger.prototype, "_hasSubmenu", void 0);
-__decorate([query(`slot[name="submenu"]`)], MenuSubTrigger.prototype, "_slot", void 0);
-__decorate([query(`.submenu-popover`)], MenuSubTrigger.prototype, "_submenuPopover", void 0);
-__decorate([query(`.item`)], MenuSubTrigger.prototype, "_itemEl", void 0);
-MenuSubTrigger = _MenuSubTrigger = __decorate([safeCustomElement(`ixfx-menu-sub-trigger`)], MenuSubTrigger);
-//#endregion
-//#region src/menu/menu-separator.ts
-let MenuSeparator = class MenuSeparator extends LitElement {
-	static {
-		this.styles = [themeFallbacks, css`
-    :host {
-      display: block;
-      margin: var(--space-xs) 0;
-    }
-
-    .separator {
-      height: 1px;
-      background: var(--surface-4);
-    }
-  `];
-	}
-	render() {
-		return html`<div class="separator"></div>`;
-	}
-};
-MenuSeparator = __decorate([safeCustomElement(`ixfx-menu-separator`)], MenuSeparator);
-//#endregion
-//#region src/menu/menu-header.ts
-let MenuHeader = class MenuHeader extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.label = ``;
-	}
-	static {
-		this.styles = [themeFallbacks, css`
-    :host {
-      display: block;
-      padding: 6px var(--space-m) var(--space-xs);
-      font-size: var(--text-s);
-      font-weight: var(--font-weight-bold);
-      text-transform: uppercase;
-      color: var(--surface-muted-text);
-      letter-spacing: 0.5px;
-    }
-  `];
-	}
-	render() {
-		return html`<div>${this.label}</div>`;
-	}
-};
-__decorate([property({ type: String })], MenuHeader.prototype, "label", void 0);
-MenuHeader = __decorate([safeCustomElement(`ixfx-menu-header`)], MenuHeader);
-//#endregion
-//#region src/menu/menu-from-tree.ts
-function isLeaf(node) {
-	return node.children === void 0 || node.children.length === 0;
-}
-function menuFromTree(nodes, options = {}) {
-	const { onCommand, registry, keyboardManager } = options;
-	return html`${nodes.map((node) => {
-		const label = node.item.label;
-		if (label === `-`) return html`<ixfx-menu-separator></ixfx-menu-separator>`;
-		if (label.startsWith(`# `)) return html`<ixfx-menu-header label="${label.slice(2)}"></ixfx-menu-header>`;
-		if (!isLeaf(node)) {
-			const submenu = menuFromTree(node.children, options);
-			return html`
-        <ixfx-menu-sub-trigger label="${label}">
-          <ixfx-menu-container
-            slot="submenu"
-            .registry=${registry ?? nothing}
-            .keyboardManager=${keyboardManager ?? nothing}
-          >${submenu}</ixfx-menu-container>
-        </ixfx-menu-sub-trigger>
-      `;
-		}
-		return html`
-      <ixfx-menu-item
-        command="${node.item.key}"
-        label="${label}"
-        icon-name="${node.item.icon ?? nothing}"
-        @command=${onCommand ? (e) => onCommand(e.detail) : nothing}
-      ></ixfx-menu-item>
-    `;
-	})}`;
-}
-function buildMenuItemEl(node, options) {
-	const { onCommand, registry } = options;
-	const label = node.item.label;
-	const el = document.createElement(`ixfx-menu-item`);
-	el.setAttribute(`command`, node.item.key);
-	el.setAttribute(`label`, label);
-	if (node.item.icon) el.setAttribute(`icon-name`, node.item.icon);
-	if (onCommand) el.addEventListener(`command`, (e) => onCommand(e.detail));
-	if (registry) el.registry = registry;
-	return el;
-}
-function buildMenuSeparatorEl() {
-	return document.createElement(`ixfx-menu-separator`);
-}
-function buildMenuHeaderEl(label) {
-	const el = document.createElement(`ixfx-menu-header`);
-	el.setAttribute(`label`, label);
-	return el;
-}
-function buildMenuSubTriggerEl(node, options) {
-	const { registry, keyboardManager } = options;
-	const el = document.createElement(`ixfx-menu-sub-trigger`);
-	el.setAttribute(`label`, node.item.label);
-	if (registry) el.registry = registry;
-	if (keyboardManager) el.keyboardManager = keyboardManager;
-	const container = document.createElement(`ixfx-menu-container`);
-	container.setAttribute(`slot`, `submenu`);
-	if (registry) container.registry = registry;
-	if (keyboardManager) container.keyboardManager = keyboardManager;
-	const childEls = menuFromTreeToElements(node.children, options);
-	for (const child of childEls) container.appendChild(child);
-	el.appendChild(container);
-	return el;
-}
-function menuFromTreeToElements(nodes, options = {}) {
-	return nodes.map((node) => {
-		const label = node.item.label;
-		if (label === `-`) return buildMenuSeparatorEl();
-		if (label.startsWith(`# `)) return buildMenuHeaderEl(label.slice(2));
-		if (!isLeaf(node)) return buildMenuSubTriggerEl(node, options);
-		return buildMenuItemEl(node, options);
-	});
-}
-//#endregion
-//#region src/menu/menu-radio-item.ts
-let MenuRadioItem = class MenuRadioItem extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.value = ``;
-		this.label = ``;
-		this.disabled = false;
-		this.groupValue = ``;
-		this.iconName = ``;
-	}
-	handleClick() {
-		if (this.disabled) return;
-		this.dispatchEvent(new CustomEvent(`radio-select`, {
-			detail: { value: this.value },
-			bubbles: true,
-			composed: true
-		}));
-	}
-	static {
-		this.styles = [
-			themeFallbacks,
-			tickledItemStyles,
-			css`
-    :host {
-      display: block;
-    }
-
-    .item {
-      display: flex;
-      padding: 6px var(--space-m);
-      font-size: var(--text-m);
-    }
-
-    :host(:focus) {
-      outline: none;
-    }
-
-    .item.disabled {
-      opacity: var(--disabled-opacity);
-      cursor: default;
-    }
-
-    .item.disabled:hover {
-      background: transparent;
-    }
-
-    .radio {
-      width: 16px;
-      margin-right: var(--space-s);
-      font-size: var(--text-m);
-      color: var(--accent);
-    }
-
-    .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;
-    }
-  `
-		];
-	}
-	render() {
-		const isSelected = this.groupValue === this.value;
-		return html`
-      <div 
-        class="item ${this.disabled ? `disabled` : ``}"
-        @click=${this.handleClick}
-        tabindex="${this.disabled ? -1 : 0}"
-        role="menuitemradio"
-        aria-checked="${isSelected}"
-      >
-        <span class="radio">${isSelected ? `●` : ``}</span>
-        <span class="icon-slot">${this.iconName ? html`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : null}</span>
-        <span class="label">${this.label}</span>
-      </div>
-    `;
-	}
-};
-__decorate([property({ type: String })], MenuRadioItem.prototype, "value", void 0);
-__decorate([property({ type: String })], MenuRadioItem.prototype, "label", void 0);
-__decorate([property({ type: Boolean })], MenuRadioItem.prototype, "disabled", void 0);
-__decorate([property({ type: String })], MenuRadioItem.prototype, "groupValue", void 0);
-__decorate([property({
-	type: String,
-	attribute: `icon-name`
-})], MenuRadioItem.prototype, "iconName", void 0);
-MenuRadioItem = __decorate([safeCustomElement(`ixfx-menu-radio-item`)], MenuRadioItem);
-//#endregion
-//#region src/menu/menu-radio-group.ts
-let MenuRadioGroup = class MenuRadioGroup extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.name = ``;
-		this.value = ``;
-		this.slottedElements = [];
-	}
-	handleSlotChange(e) {
-		const slot = e.target;
-		this.slottedElements = slot.assignedElements();
-		this.updateSlottedValues();
-	}
-	updateSlottedValues() {
-		for (const el of this.slottedElements) el.groupValue = this.value;
-	}
-	handleRadioSelect(e) {
-		this.value = e.detail.value;
-		this.dispatchEvent(new CustomEvent(`radio-change`, {
-			detail: {
-				name: this.name,
-				value: this.value
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	updated(changedProperties) {
-		if (changedProperties.has(`value`)) this.updateSlottedValues();
-	}
-	static {
-		this.styles = css`
-    :host {
-      display: block;
-    }
-
-    ::slotted(menu-radio-item) {
-      display: block;
-    }
-  `;
-	}
-	render() {
-		return html`
-      <slot @slotchange=${this.handleSlotChange} @radio-select=${this.handleRadioSelect}></slot>
-    `;
-	}
-};
-__decorate([property({ type: String })], MenuRadioGroup.prototype, "name", void 0);
-__decorate([property({ type: String })], MenuRadioGroup.prototype, "value", void 0);
-__decorate([state()], MenuRadioGroup.prototype, "slottedElements", void 0);
-MenuRadioGroup = __decorate([safeCustomElement(`ixfx-menu-radio-group`)], MenuRadioGroup);
-//#endregion
-//#region src/menu/index.ts
-var menu_exports = /* @__PURE__ */ __exportAll({
-	MenuBar: () => MenuBar,
-	MenuCheckItem: () => MenuCheckItem,
-	MenuCommandController: () => MenuCommandController,
-	MenuContainer: () => MenuContainer,
-	MenuHeader: () => MenuHeader,
-	MenuItem: () => MenuItem,
-	MenuRadioGroup: () => MenuRadioGroup,
-	MenuRadioItem: () => MenuRadioItem,
-	MenuSeparator: () => MenuSeparator,
-	MenuSubTrigger: () => MenuSubTrigger,
-	MenuTrigger: () => MenuTrigger,
-	menuFromTree: () => menuFromTree,
-	menuFromTreeToElements: () => menuFromTreeToElements
-});
-//#endregion
-export { menuFromTreeToElements as a, MenuSubTrigger as c, MenuBar as d, MenuItem as f, menuFromTree as i, MenuCommandController as l, MenuContainer as m, MenuRadioGroup as n, MenuHeader as o, MenuTrigger as p, MenuRadioItem as r, MenuSeparator as s, menu_exports as t, MenuCheckItem as u };
-
-//# sourceMappingURL=menu-DIfU70AA.js.map