@ixfx/components 0.6.2 → 0.7.1

package/dist/menu-CXDFJxNm.js

@@ -0,0 +1,825 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
+import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import "./icon-DcEEGQa_.js";
+import "./interaction-D5XdKzbR.js";
+import { n as MenuTrigger, r as MenuContainer, t as MenuItem } from "./menu-item-D2S4i8u1.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+//#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, menuFromTree as i, MenuCommandController as l, MenuRadioGroup as n, MenuHeader as o, MenuRadioItem as r, MenuSeparator as s, menu_exports as t, MenuCheckItem as u };
+
+//# sourceMappingURL=menu-CXDFJxNm.js.map