@c2n/menu 0.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @c2n/menu
+
+`c2-menu` is a menu of commands: a trigger plus a popover of `c2-menu-item` rows, positioned by `c2-overlay` on the
+browser's top layer.
+
+```html
+<c2-menu aria-label="File">
+  <button slot="trigger">Actions</button>
+  <c2-menu-item value="new">New file<kbd slot="shortcut">⌘N</kbd></c2-menu-item>
+  <c2-menu-item value="rename" disabled>Rename</c2-menu-item>
+  <hr />
+  <c2-menu-item value="delete" destructive>Delete file</c2-menu-item>
+</c2-menu>
+```
+
+- The trigger goes in the `trigger` slot, or stays anywhere on the page and is named by `anchor` (an element id).
+- Rows are `c2-menu-item` children: a command, a link (`href`), a `checkbox` or `radio` (`type` + `checked`, radios
+  grouped by `name`), or the parent of a nested `c2-menu` slotted into `submenu`. `<hr>` separates, `<h1>`–`<h6>` head
+  a group.
+- `menu-select` bubbles from the activated row with `detail.value`, `detail.checked` and `detail.data`; the menu then
+  closes unless it (or that row) is marked `keep-open`.
+- `open`, `placement`, `fit-anchor`, `disabled`, plus `show()`, `hide()` and `toggle()`.
+- Width: as wide as the rows, with `--c2-menu--min-width` (128px) as a floor, and never narrower than a slotted
+  trigger. `fit-anchor` pins it to exactly the trigger's width.
+- Keyboard: Enter / Space / ArrowDown opens on the first row (ArrowUp on the last); arrows, Home / End and typeahead
+  move; ArrowRight and ArrowLeft enter and leave a submenu; Escape and Tab close and restore focus to the trigger.
+- Theming: `--c2-menu--*` (surface), `--c2-menu__separator--*`, `--c2-menu__heading--*`, and `--c2-menu-item--*` for
+  the rows. See the docs site for the full list.

package/dist/menu-item-C08rN4HS.js

@@ -0,0 +1,195 @@
+import { LitElement, html, nothing, svg, unsafeCSS } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/menu-item.scss?inline
+var menu_item_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n  flex: none;\n  user-select: none;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-menu-item {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  text-decoration: none;\n  min-height: var(--c2-menu-item--min-height,32px);\n  gap: var(--c2-menu-item--gap,8px);\n  font-size: var(--c2-menu-item--font-size,14px);\n  font-weight: var(--c2-menu-item--font-weight);\n  font-style: var(--c2-menu-item--font-style);\n  font-family: var(--c2-menu-item--font-family);\n  line-height: var(--c2-menu-item--line-height,20px);\n  border-top-left-radius: var(--c2-menu-item--border-top-left-radius,6px);\n  border-top-right-radius: var(--c2-menu-item--border-top-right-radius,6px);\n  border-bottom-left-radius: var(--c2-menu-item--border-bottom-left-radius,6px);\n  border-bottom-right-radius: var(--c2-menu-item--border-bottom-right-radius,6px);\n  padding-top: var(--c2-menu-item--padding-top,6px);\n  padding-right: var(--c2-menu-item--padding-right,8px);\n  padding-bottom: var(--c2-menu-item--padding-bottom,6px);\n  padding-left: var(--c2-menu-item--padding-left,8px);\n  background: var(--c2-menu-item--background,transparent);\n  color: var(--c2-menu-item--color,#18181b);\n  will-change: background, color;\n  transition: background 250ms cubic-bezier(0.2, 0, 0, 1), color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-menu-item:hover {\n  background: var(--c2-menu-item__hover--background,var(--c2-menu-item--background,#f4f4f5));\n  color: var(--c2-menu-item__hover--color,var(--c2-menu-item--color,#18181b));\n}\n\n.content {\n  flex: 1;\n  min-width: 0;\n}\n\n.description {\n  margin-top: var(--c2-menu-item__description--margin-top,1px);\n  color: var(--c2-menu-item__description--color,#71717a);\n  font-size: var(--c2-menu-item__description--font-size,12px);\n  line-height: var(--c2-menu-item__description--line-height,16px);\n  font-weight: normal;\n}\n.description[hidden] {\n  display: none;\n}\n\n.indicator {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--c2-menu-item__indicator--size,16px);\n  height: var(--c2-menu-item__indicator--size,16px);\n  color: var(--c2-menu-item__indicator--color,var(--c2-menu-item--color,#18181b));\n}\n.indicator svg {\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.indicator[data-checked] svg {\n  opacity: 1;\n}\n\n::slotted([slot=prefix-icon]),\n::slotted([slot=suffix-icon]),\n.submenu-icon {\n  flex: none;\n  width: var(--c2-menu-item__icon--size,16px);\n  height: var(--c2-menu-item__icon--size,16px);\n  color: var(--c2-menu-item__icon--color,#71717a);\n  --c2-feather-icon--size: var(--c2-menu-item__icon--size,16px);\n  --c2-mat-icon--font-size: var(--c2-menu-item__icon--size,16px);\n}\n\n::slotted([slot=shortcut]) {\n  flex: none;\n  margin-left: auto;\n  color: var(--c2-menu-item__shortcut--color,#52525b);\n  font-size: var(--c2-menu-item__shortcut--font-size,11px);\n  letter-spacing: var(--c2-menu-item__shortcut--letter-spacing,0.08em);\n  --c2-kbd--color: var(--c2-menu-item__shortcut--color,#52525b);\n  --c2-kbd--font-size: var(--c2-menu-item__shortcut--font-size,11px);\n  --c2-kbd--letter-spacing: var(--c2-menu-item__shortcut--letter-spacing,0.08em);\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n:host(:focus-visible) .c2-menu-item {\n  background: var(--c2-menu-item__hover--background,var(--c2-menu-item--background,#f4f4f5));\n  color: var(--c2-menu-item__hover--color,var(--c2-menu-item--color,#18181b));\n  outline: var(--c2-menu-item__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-menu-item__focus--outline-offset,-2px);\n}\n\n:host([destructive]) .c2-menu-item {\n  color: var(--c2-menu-item__destructive--color,#dc2626);\n}\n:host([destructive]) .c2-menu-item:hover {\n  background: var(--c2-menu-item__destructive__hover--background,#fef2f2);\n  color: var(--c2-menu-item__destructive--color,#dc2626);\n}\n:host([destructive]) ::slotted([slot=prefix-icon]),\n:host([destructive]) ::slotted([slot=suffix-icon]),\n:host([destructive]) .indicator {\n  color: var(--c2-menu-item__destructive--color,#dc2626);\n}\n\n:host([destructive]:focus-visible) .c2-menu-item {\n  background: var(--c2-menu-item__destructive__hover--background,#fef2f2);\n  color: var(--c2-menu-item__destructive--color,#dc2626);\n}\n\n:host([disabled]) .c2-menu-item {\n  pointer-events: none;\n  cursor: default;\n  opacity: var(--c2-menu-item__disabled--opacity,0.38);\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/menu-item.ts
+var MenuItem = class MenuItem extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.disabled = false;
+		this.type = "item";
+		this.checked = false;
+		this.destructive = false;
+		this.keepOpen = false;
+		this.expanded = false;
+		this.reserveIndicator = false;
+		this.hasDescription = false;
+		this.submenuPresent = false;
+		this.authorRole = null;
+		this.handleClick = (event) => {
+			if (this.disabled) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			if (this.hasSubmenu) return;
+			this.select();
+		};
+	}
+	static {
+		this.styles = unsafeCSS(menu_item_default);
+	}
+	/** Whether a menu is slotted into `submenu`. */
+	get hasSubmenu() {
+		return this.submenuPresent;
+	}
+	/** The element slotted into `submenu`, if any. The parent menu opens and closes it. */
+	get submenuElement() {
+		return (this.submenuSlot?.assignedElements({ flatten: true }) ?? []).find((element) => element instanceof HTMLElement) ?? null;
+	}
+	/** The text the menu matches while typing: `label` when set, otherwise the slotted label text. */
+	get displayText() {
+		if (this.label !== void 0) return this.label;
+		return ((this.contentSlot?.assignedNodes({ flatten: true }) ?? []).map((node) => node.innerText ?? node.textContent ?? "").join(" ").trim() || this.contentSlot?.textContent?.trim() || this.value).trim();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.authorRole === null) this.authorRole = this.getAttribute("role");
+	}
+	/**
+	* Activates the row the way Enter does: a link is navigated, a checkable row toggles, and `menu-select` fires.
+	* A row with a submenu does nothing — the menu opens the submenu instead.
+	*/
+	activate() {
+		if (this.disabled || this.hasSubmenu) return;
+		if (this.href) {
+			this.renderRoot.querySelector("a")?.click();
+			return;
+		}
+		this.select();
+	}
+	select() {
+		if (this.type === "checkbox") this.checked = !this.checked;
+		else if (this.type === "radio") this.checked = true;
+		this.dispatchEvent(new CustomEvent("menu-select", {
+			bubbles: true,
+			composed: true,
+			cancelable: true,
+			detail: {
+				value: this.value,
+				checked: this.checked,
+				data: this.data
+			}
+		}));
+	}
+	handleDescriptionSlotChange(event) {
+		const slot = event.target;
+		this.hasDescription = slot.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+	}
+	handleSubmenuSlotChange(event) {
+		this.submenuPresent = event.target.assignedElements({ flatten: true }).length > 0;
+	}
+	updated(changed) {
+		if (changed.has("checked") && changed.get("checked") !== void 0) this.dispatchEvent(new CustomEvent("checked-change", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				checked: this.checked,
+				value: this.value
+			}
+		}));
+		this.syncAria();
+	}
+	syncAria() {
+		const role = this.authorRole ?? (this.href ? "menuitem" : this.type === "checkbox" ? "menuitemcheckbox" : this.type === "radio" ? "menuitemradio" : "menuitem");
+		this.setAttribute("role", role);
+		if (this.type === "checkbox" || this.type === "radio") this.setAttribute("aria-checked", String(this.checked));
+		else this.removeAttribute("aria-checked");
+		if (this.hasSubmenu) {
+			this.setAttribute("aria-haspopup", "menu");
+			this.setAttribute("aria-expanded", String(this.expanded));
+		} else {
+			this.removeAttribute("aria-haspopup");
+			this.removeAttribute("aria-expanded");
+		}
+		if (this.disabled) this.setAttribute("aria-disabled", "true");
+		else this.removeAttribute("aria-disabled");
+		if (this.disabled) this.tabIndex = -1;
+		else if (!this.hasAttribute("tabindex")) this.tabIndex = -1;
+	}
+	renderIndicator() {
+		if (this.type === "item" && !this.reserveIndicator) return nothing;
+		const glyph = this.type === "radio" ? svg`<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="5"></circle></svg>` : svg`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"></path></svg>`;
+		return html`<span class="indicator" ?data-checked=${this.checked}>${this.type === "item" ? nothing : glyph}</span>`;
+	}
+	renderSubmenuIcon() {
+		return svg`<svg class="submenu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m9 6 6 6-6 6"></path></svg>`;
+	}
+	renderInner() {
+		return html`
+      ${this.renderIndicator()}
+      <slot name="prefix-icon"></slot>
+      <div class="content">
+        <div class="text"><slot>${this.label ?? this.value}</slot></div>
+        <div class="description" ?hidden=${!this.hasDescription}>
+          <slot name="description" @slotchange=${this.handleDescriptionSlotChange}></slot>
+        </div>
+      </div>
+      <slot name="shortcut"></slot>
+      <slot name="suffix-icon">${this.hasSubmenu ? this.renderSubmenuIcon() : nothing}</slot>
+    `;
+	}
+	render() {
+		const row = this.href && !this.disabled ? html`<a
+            class="c2-menu-item"
+            href=${this.href}
+            target=${ifDefined(this.target)}
+            rel=${this.target === "_blank" ? "noopener noreferrer" : nothing}
+            tabindex="-1"
+            @click=${this.handleClick}
+            >${this.renderInner()}</a
+          >` : html`<div class="c2-menu-item" @click=${this.handleClick}>${this.renderInner()}</div>`;
+		return html`${row}<slot name="submenu" @slotchange=${this.handleSubmenuSlotChange}></slot>`;
+	}
+};
+__decorate([property({ reflect: true })], MenuItem.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], MenuItem.prototype, "disabled", void 0);
+__decorate([property({ reflect: true })], MenuItem.prototype, "type", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], MenuItem.prototype, "checked", void 0);
+__decorate([property({ reflect: true })], MenuItem.prototype, "name", void 0);
+__decorate([property()], MenuItem.prototype, "href", void 0);
+__decorate([property()], MenuItem.prototype, "target", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], MenuItem.prototype, "destructive", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "keep-open"
+})], MenuItem.prototype, "keepOpen", void 0);
+__decorate([property({ reflect: true })], MenuItem.prototype, "label", void 0);
+__decorate([property({ attribute: false })], MenuItem.prototype, "data", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], MenuItem.prototype, "expanded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "reserve-indicator"
+})], MenuItem.prototype, "reserveIndicator", void 0);
+__decorate([state()], MenuItem.prototype, "hasDescription", void 0);
+__decorate([state()], MenuItem.prototype, "submenuPresent", void 0);
+__decorate([query("slot:not([name])")], MenuItem.prototype, "contentSlot", void 0);
+__decorate([query("slot[name=\"submenu\"]")], MenuItem.prototype, "submenuSlot", void 0);
+MenuItem = __decorate([customElement("c2-menu-item")], MenuItem);
+//#endregion
+export { __decorate as n, MenuItem as t };

package/dist/menu-item.js

@@ -0,0 +1,2 @@
+import { t as MenuItem } from "./menu-item-C08rN4HS.js";
+export { MenuItem };

package/dist/menu.js

@@ -0,0 +1,381 @@
+import { n as __decorate, t as MenuItem } from "./menu-item-C08rN4HS.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { isServer } from "lit-html/is-server.js";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { redispatchEvent } from "@c2n/core/dom-helper.js";
+import "@c2n/overlay";
+//#region src/menu.scss?inline
+var menu_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: contents;\n}\n\n:host([has-trigger]) {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([slot=submenu]) {\n  --c2-overlay--offset-y: 2px;\n  --c2-overlay--offset-x: -4px;\n}\n\n.menu {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  margin: 0;\n  gap: var(--c2-menu--gap);\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  min-width: var(--c2-menu--min-width,128px);\n  max-height: var(--c2-menu--max-height,320px);\n  background: var(--c2-menu--background,#ffffff);\n  box-shadow: var(--c2-menu--box-shadow,0 8px 24px rgba(24, 24, 27, 0.08));\n  border-top: var(--c2-menu--border-top,1px solid #e4e4e7);\n  border-right: var(--c2-menu--border-right,1px solid #e4e4e7);\n  border-bottom: var(--c2-menu--border-bottom,1px solid #e4e4e7);\n  border-left: var(--c2-menu--border-left,1px solid #e4e4e7);\n  border-top-left-radius: var(--c2-menu--border-top-left-radius,8px);\n  border-top-right-radius: var(--c2-menu--border-top-right-radius,8px);\n  border-bottom-left-radius: var(--c2-menu--border-bottom-left-radius,8px);\n  border-bottom-right-radius: var(--c2-menu--border-bottom-right-radius,8px);\n  padding-top: var(--c2-menu--padding-top,4px);\n  padding-right: var(--c2-menu--padding-right,4px);\n  padding-bottom: var(--c2-menu--padding-bottom,4px);\n  padding-left: var(--c2-menu--padding-left,4px);\n}\n.menu:focus {\n  outline: none;\n}\n\n::slotted(hr) {\n  flex: none;\n  border: none;\n  border-top: 1px solid var(--c2-menu__separator--color,#e4e4e7);\n  margin: var(--c2-menu__separator--margin,4px 0);\n}\n\n::slotted(:is(h1, h2, h3, h4, h5, h6)) {\n  flex: none;\n  margin: 0;\n  color: var(--c2-menu__heading--color,#71717a);\n  font-size: var(--c2-menu__heading--font-size,11px);\n  font-weight: var(--c2-menu__heading--font-weight,600);\n  letter-spacing: var(--c2-menu__heading--letter-spacing,0.06em);\n  text-transform: var(--c2-menu__heading--text-transform,uppercase);\n  line-height: 1.4;\n  padding-top: var(--c2-menu__heading--padding-top,8px);\n  padding-right: var(--c2-menu__heading--padding-right,8px);\n  padding-bottom: var(--c2-menu__heading--padding-bottom,4px);\n  padding-left: var(--c2-menu__heading--padding-left,8px);\n  user-select: none;\n}\n\n:host([disabled]) ::slotted([slot=trigger]) {\n  pointer-events: none;\n  opacity: 0.38;\n}";
+//#endregion
+//#region src/menu.ts
+var _Menu;
+var Menu = class Menu extends LitElement {
+	static {
+		_Menu = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.placement = "bottom-start";
+		this.offset = void 0;
+		this.crossOffset = void 0;
+		this.anchor = void 0;
+		this.fitAnchor = false;
+		this.keepOpen = false;
+		this.disabled = false;
+		this.ariaLabel = null;
+		this.anchorElement = null;
+		this.hasTrigger = false;
+		this.focusedItem = void 0;
+		this.pendingFocus = "first";
+		this.typeahead = "";
+		this.openBeforePress = void 0;
+		this.handleTriggerPointerDown = () => {
+			this.openBeforePress = this.open;
+		};
+		this.handleTriggerClick = (event) => {
+			const wasOpen = this.openBeforePress ?? this.open;
+			this.openBeforePress = void 0;
+			if (this.disabled) return;
+			event.preventDefault();
+			if (wasOpen) this.hide();
+			else this.show("first");
+		};
+		this.handleTriggerKeydown = (event) => {
+			if (this.disabled) return;
+			switch (event.key) {
+				case "ArrowDown":
+				case "Enter":
+				case " ":
+					event.preventDefault();
+					this.show("first");
+					return;
+				case "ArrowUp":
+					event.preventDefault();
+					this.show("last");
+					return;
+			}
+		};
+		this.handleItemClick = (event) => {
+			const item = this.itemFromEvent(event);
+			if (!item || item.disabled) return;
+			if (item.hasSubmenu) this.openSubmenu(item, "none");
+		};
+		this.handlePointerOver = (event) => {
+			const item = this.itemFromEvent(event);
+			if (!item) return;
+			if (!item.disabled && this.focusedItem !== item) {
+				this.focusedItem = item;
+				for (const other of this.items) other.tabIndex = other === item ? 0 : -1;
+			}
+			if (item.hasSubmenu && !item.disabled) this.openSubmenu(item, "none");
+			else this.closeSubmenus();
+		};
+		this.handleKeydown = (event) => {
+			const enabled = this.enabledItems;
+			const current = this.itemFromEvent(event) ?? this.focusedItem;
+			const index = current ? enabled.indexOf(current) : -1;
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					event.stopPropagation();
+					this.focusItem(enabled[index + 1] ?? enabled[0]);
+					return;
+				case "ArrowUp":
+					event.preventDefault();
+					event.stopPropagation();
+					this.focusItem(index > 0 ? enabled[index - 1] : enabled[enabled.length - 1]);
+					return;
+				case "Home":
+					event.preventDefault();
+					event.stopPropagation();
+					this.focusItem(enabled[0]);
+					return;
+				case "End":
+					event.preventDefault();
+					event.stopPropagation();
+					this.focusItem(enabled[enabled.length - 1]);
+					return;
+				case "ArrowRight":
+					if (current?.hasSubmenu) {
+						event.preventDefault();
+						event.stopPropagation();
+						this.openSubmenu(current, "first");
+					}
+					return;
+				case "ArrowLeft":
+					if (this.ownerItem) {
+						event.preventDefault();
+						event.stopPropagation();
+						this.hide();
+						this.ownerItem.focus();
+					}
+					return;
+				case "Enter":
+				case " ":
+					if (!current) return;
+					event.preventDefault();
+					event.stopPropagation();
+					if (current.hasSubmenu) this.openSubmenu(current, "first");
+					else current.activate();
+					return;
+				case "Tab":
+					event.preventDefault();
+					event.stopPropagation();
+					this.hide();
+					return;
+			}
+			if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+				event.stopPropagation();
+				clearTimeout(this.typeaheadTimer);
+				this.typeahead += event.key.toLowerCase();
+				this.typeaheadTimer = setTimeout(() => this.typeahead = "", 600);
+				const start = Math.max(this.typeahead.length === 1 ? index + 1 : index, 0);
+				const match = [...enabled.slice(start), ...enabled.slice(0, start)].find((item) => item.displayText.toLowerCase().startsWith(this.typeahead));
+				if (match) this.focusItem(match);
+			}
+		};
+		this.handleMenuSelect = (event) => {
+			const source = event.target instanceof MenuItem ? event.target : void 0;
+			const own = source && this.items.includes(source) ? source : void 0;
+			if (own?.type === "radio") {
+				for (const item of this.items) if (item !== own && item.type === "radio" && item.name === own.name) item.checked = false;
+			}
+			if (this.keepOpen || source?.keepOpen) return;
+			this.hide();
+		};
+		this.handleOverlayToggle = (event) => {
+			const isOpen = event.newState === "open";
+			this.open = isOpen;
+			if (isOpen) {
+				this.syncItems();
+				if (this.pendingFocus === "last") this.focusLastItem();
+				else if (this.pendingFocus === "first") this.focusFirstItem();
+			} else {
+				this.closeSubmenus();
+				if (this.shouldReturnFocus()) this.returnFocus();
+			}
+			this.pendingFocus = "first";
+			this.syncTriggerAria();
+			redispatchEvent(this, event);
+		};
+		this.handleSlotChange = () => {
+			this.syncItems();
+		};
+		this.handleTriggerSlotChange = () => {
+			this.syncAnchor();
+		};
+	}
+	static {
+		this.styles = unsafeCSS(menu_default);
+	}
+	/** Slotted rows, in DOM order (separators and headings excluded). */
+	get items() {
+		return (this.itemSlot?.assignedElements({ flatten: true }) ?? []).map((element) => element instanceof MenuItem ? element : element.firstElementChild).filter((element) => element instanceof MenuItem);
+	}
+	get enabledItems() {
+		return this.items.filter((item) => !item.disabled);
+	}
+	/** The element that opens this menu: the slotted trigger, or the resolved `anchor`. */
+	get triggerElement() {
+		return (this.triggerSlot?.assignedElements({ flatten: true }) ?? []).find((element) => element instanceof HTMLElement) ?? null;
+	}
+	/** The row this menu is a submenu of, when it is slotted into a `c2-menu-item`. */
+	get ownerItem() {
+		return this.parentElement instanceof MenuItem ? this.parentElement : null;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!isServer && this.getAttribute("slot") === "submenu" && !this.hasAttribute("placement")) this.placement = "right-start";
+	}
+	/** Opens the menu. Pass `'last'` to start on the last row, `'none'` to leave focus where it is. */
+	show(focus = "first") {
+		if (this.disabled) return;
+		this.pendingFocus = focus;
+		this.open = true;
+	}
+	hide() {
+		this.open = false;
+	}
+	toggle(force) {
+		if (force ?? !this.open) this.show();
+		else this.hide();
+	}
+	/** Moves focus to the first enabled row. */
+	focusFirstItem() {
+		this.focusItem(this.enabledItems[0]);
+	}
+	/** Moves focus to the last enabled row. */
+	focusLastItem() {
+		const enabled = this.enabledItems;
+		this.focusItem(enabled[enabled.length - 1]);
+	}
+	resolveAnchor() {
+		if (this.anchor instanceof HTMLElement) return this.anchor;
+		if (typeof this.anchor === "string" && this.anchor) return this.getRootNode().querySelector?.(`#${CSS.escape(this.anchor)}`) ?? null;
+		return this.triggerElement;
+	}
+	syncAnchor() {
+		const resolved = this.resolveAnchor();
+		if (resolved !== this.anchorElement) this.anchorElement = resolved;
+		this.hasTrigger = !!this.triggerElement;
+		this.toggleAttribute("has-trigger", this.hasTrigger);
+		this.syncTriggerAria();
+	}
+	/**
+	* `aria-haspopup` / `aria-expanded` belong on the element that carries the button role. For a `c2-*` trigger that is
+	* the control inside its shadow root, not the host, which is a plain generic element.
+	*/
+	async syncTriggerAria() {
+		const trigger = this.triggerElement;
+		if (!trigger) return;
+		const element = trigger;
+		if (element.updateComplete) await element.updateComplete;
+		const target = (trigger.localName.includes("-") ? trigger.shadowRoot?.querySelector("button, a, [role=\"button\"]") : null) ?? trigger;
+		target.setAttribute("aria-haspopup", "menu");
+		target.setAttribute("aria-expanded", String(this.open));
+	}
+	focusItem(item) {
+		if (!item) return;
+		this.focusedItem = item;
+		for (const other of this.items) other.tabIndex = other === item ? 0 : -1;
+		item.focus();
+	}
+	/** Assigns the roving `tabindex` and reserves the indicator column when any row is checkable. */
+	syncItems() {
+		const items = this.items;
+		const enabled = this.enabledItems;
+		if (!this.focusedItem || !enabled.includes(this.focusedItem)) this.focusedItem = enabled[0];
+		const checkable = items.some((item) => item.type !== "item");
+		for (const item of items) {
+			item.reserveIndicator = checkable;
+			item.tabIndex = item === this.focusedItem ? 0 : -1;
+		}
+		for (const element of this.itemSlot?.assignedElements({ flatten: true }) ?? []) if (/^h[1-6]$/.test(element.localName)) element.setAttribute("role", "presentation");
+	}
+	openSubmenu(item, focus) {
+		const submenu = item.submenuElement;
+		if (!(submenu instanceof _Menu) || item.disabled) return;
+		if (submenu.open) {
+			if (focus === "first") submenu.focusFirstItem();
+			return;
+		}
+		this.closeSubmenus(item);
+		submenu.anchor = item;
+		item.expanded = true;
+		submenu.show(focus);
+	}
+	closeSubmenus(except) {
+		for (const item of this.items) {
+			if (item === except || !item.hasSubmenu) continue;
+			const submenu = item.submenuElement;
+			if (submenu instanceof _Menu) submenu.hide();
+			item.expanded = false;
+		}
+	}
+	itemFromEvent(event) {
+		const target = event.target;
+		if (!(target instanceof Element)) return void 0;
+		const item = target instanceof MenuItem ? target : target.closest("c2-menu-item") ?? void 0;
+		return item && this.items.includes(item) ? item : void 0;
+	}
+	/**
+	* Focus goes back to the trigger unless the dismissal handed it to a real control elsewhere — clicking a row leaves
+	* the focus on that row in Chromium and WebKit but on the body in Firefox, and either way the trigger is where the
+	* user was.
+	*/
+	shouldReturnFocus() {
+		let active = document.activeElement;
+		while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+		if (!active || active === document.body || active === document.documentElement) return true;
+		return this.items.some((item) => item === active || item.contains(active)) || !!this.overlay?.contains(active);
+	}
+	/** Focus goes back to the row that owns this submenu, or to the trigger. */
+	returnFocus() {
+		const owner = this.ownerItem;
+		if (owner) {
+			owner.focus();
+			return;
+		}
+		(this.triggerElement ?? this.anchorElement)?.focus();
+	}
+	firstUpdated() {
+		this.syncAnchor();
+		this.syncItems();
+	}
+	willUpdate(changed) {
+		if (changed.has("anchor") && this.anchor) this.anchorElement = this.resolveAnchor();
+		else if (!this.anchorElement) this.anchorElement = this.querySelector(":scope > [slot=\"trigger\"]");
+	}
+	updated(changed) {
+		if (changed.has("open") && this.ownerItem) this.ownerItem.expanded = this.open;
+		if (changed.has("disabled") && this.disabled) this.hide();
+	}
+	render() {
+		return html`<slot
+        name="trigger"
+        @slotchange=${this.handleTriggerSlotChange}
+        @pointerdown=${this.handleTriggerPointerDown}
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleTriggerKeydown}
+      ></slot>
+      <c2-overlay
+        id="overlay"
+        class="overlay"
+        .anchor=${this.anchorElement ?? void 0}
+        .placement=${this.placement}
+        .offset=${this.offset}
+        .crossOffset=${this.crossOffset}
+        .open=${this.open}
+        ?fit-anchor=${this.fitAnchor}
+        ?free-width=${!this.hasTrigger}
+        @toggle=${this.handleOverlayToggle}
+      >
+        <div
+          class="menu"
+          role="menu"
+          aria-orientation="vertical"
+          aria-label=${this.ariaLabel || nothing}
+          @click=${this.handleItemClick}
+          @pointerover=${this.handlePointerOver}
+          @keydown=${this.handleKeydown}
+          @menu-select=${this.handleMenuSelect}
+        >
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </c2-overlay>`;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Menu.prototype, "open", void 0);
+__decorate([property({ reflect: true })], Menu.prototype, "placement", void 0);
+__decorate([property({ type: Number })], Menu.prototype, "offset", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "cross-offset"
+})], Menu.prototype, "crossOffset", void 0);
+__decorate([property()], Menu.prototype, "anchor", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "fit-anchor"
+})], Menu.prototype, "fitAnchor", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "keep-open"
+})], Menu.prototype, "keepOpen", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Menu.prototype, "disabled", void 0);
+__decorate([property({ attribute: "aria-label" })], Menu.prototype, "ariaLabel", void 0);
+__decorate([query("#overlay")], Menu.prototype, "overlay", void 0);
+__decorate([query("slot[name=\"trigger\"]")], Menu.prototype, "triggerSlot", void 0);
+__decorate([query("slot:not([name])")], Menu.prototype, "itemSlot", void 0);
+__decorate([state()], Menu.prototype, "anchorElement", void 0);
+__decorate([state()], Menu.prototype, "hasTrigger", void 0);
+Menu = _Menu = __decorate([customElement("c2-menu")], Menu);
+//#endregion
+export { Menu };

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@c2n/menu",
+  "version": "0.0.7",
+  "type": "module",
+  "main": "dist/menu.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/menu.d.ts",
+      "default": "./dist/menu.js"
+    },
+    "./menu-item.js": {
+      "types": "./types/src/menu-item.d.ts",
+      "default": "./dist/menu-item.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "menu",
+    "dropdown menu",
+    "context menu",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build",
+        "../overlay:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.7",
+    "@c2n/overlay": "0.0.7",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
+}

package/react.d.ts

@@ -0,0 +1,26 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/menu. Import once, anywhere in the program:
+//
+//     import '@c2n/menu/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Menu } from '@c2n/menu'
+import type { MenuItem } from '@c2n/menu/menu-item.js'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-menu': C2Props<Menu>
+      'c2-menu-item': C2Props<MenuItem>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/menu-item.d.ts

@@ -0,0 +1,156 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+/** Plain command (`item`), or a checkable row announced as `menuitemcheckbox` / `menuitemradio`. */
+export type MenuItemType = 'item' | 'checkbox' | 'radio';
+export interface MenuSelectEventDetail {
+    /** The `value` of the activated row. */
+    value: string;
+    /** The `checked` state after the activation; always `false` for a plain row. */
+    checked: boolean;
+    /** The `data` payload of the activated row. */
+    data: unknown;
+}
+/** Events fired by {@link MenuItem}, keyed for `addEventListener`. */
+export interface MenuItemEventMap {
+    'menu-select': CustomEvent<MenuSelectEventDetail>;
+    'checked-change': CustomEvent<{
+        checked: boolean;
+        value: string;
+    }>;
+}
+export interface MenuItem {
+    addEventListener: TypedAddEventListener<MenuItem, MenuItemEventMap>;
+    removeEventListener: TypedRemoveEventListener<MenuItem, MenuItemEventMap>;
+}
+/**
+ * A row of a `c2-menu`: a command, a link (`href`), a checkbox or a radio (`type`), or the parent of a nested menu
+ * slotted into `submenu`. Activating a row fires `menu-select` and closes the menu unless the row is marked
+ * `keep-open`. The default slot is the label, `description` a second muted line, `prefix-icon` / `suffix-icon` take an
+ * inline SVG, a `c2-feather-*` icon or a `c2-mat-icon`, and `shortcut` holds a keyboard hint (plain text or a `c2-kbd`).
+ *
+ * Rows never handle the keyboard themselves: the menu owns arrow keys, typeahead and the roving `tabindex`, and marks
+ * every row `reserve-indicator` while any sibling is checkable so the labels of plain and checkable rows line up.
+ *
+ * @tag c2-menu-item
+ *
+ * @slot default - The row label. Falls back to `label`, then `value`, when empty.
+ * @slot description - Secondary line under the label (muted, smaller).
+ * @slot prefix-icon - Icon shown before the label.
+ * @slot suffix-icon - Icon shown after the label; replaced by the chevron when the row has a submenu.
+ * @slot shortcut - Keyboard hint, aligned to the end of the row.
+ * @slot submenu - A nested `c2-menu` opened by hover, click, Enter or ArrowRight.
+ *
+ * @event {CustomEvent<MenuSelectEventDetail>} menu-select - Fired after the row is activated by a click, Enter or Space. Cancelable; a row with a submenu never fires it.
+ * @event {CustomEvent<{ checked: boolean; value: string }>} checked-change - Fired after the `checked` state of a `checkbox` / `radio` row changes.
+ *
+ * @cssproperty {pixel} [--c2-menu-item--min-height=32px]
+ * @cssproperty {pixel} [--c2-menu-item--gap=8px] - Space between the indicator, icons, label and shortcut.
+ *
+ * @cssproperty {border-radius} [--c2-menu-item--border-top-left-radius=6px]
+ * @cssproperty {border-radius} [--c2-menu-item--border-top-right-radius=6px]
+ * @cssproperty {border-radius} [--c2-menu-item--border-bottom-left-radius=6px]
+ * @cssproperty {border-radius} [--c2-menu-item--border-bottom-right-radius=6px]
+ *
+ * @cssproperty {padding} [--c2-menu-item--padding-top=6px]
+ * @cssproperty {padding} [--c2-menu-item--padding-right=8px]
+ * @cssproperty {padding} [--c2-menu-item--padding-bottom=6px]
+ * @cssproperty {padding} [--c2-menu-item--padding-left=8px]
+ *
+ * @cssproperty {font-size} [--c2-menu-item--font-size=14px]
+ * @cssproperty {font-weight} --c2-menu-item--font-weight
+ * @cssproperty {font-style} --c2-menu-item--font-style
+ * @cssproperty {font-family} --c2-menu-item--font-family
+ * @cssproperty {pixel} [--c2-menu-item--line-height=20px]
+ *
+ * @cssproperty {color} [--c2-menu-item--color=#18181b]
+ * @cssproperty {color} [--c2-menu-item--background=transparent]
+ *
+ * @cssproperty {color} [--c2-menu-item__hover--background=#f4f4f5] - Also the highlight of the keyboard-focused row.
+ * @cssproperty {color} --c2-menu-item__hover--color - Defaults to the row colour.
+ *
+ * @cssproperty {color} [--c2-menu-item__description--color=#71717a]
+ * @cssproperty {font-size} [--c2-menu-item__description--font-size=12px]
+ * @cssproperty {pixel} [--c2-menu-item__description--line-height=16px]
+ * @cssproperty {pixel} [--c2-menu-item__description--margin-top=1px]
+ *
+ * @cssproperty {color} [--c2-menu-item__shortcut--color=#52525b]
+ * @cssproperty {font-size} [--c2-menu-item__shortcut--font-size=11px]
+ * @cssproperty {letter-spacing} [--c2-menu-item__shortcut--letter-spacing=0.08em]
+ *
+ * @cssproperty {pixel} [--c2-menu-item__icon--size=16px]
+ * @cssproperty {color} [--c2-menu-item__icon--color=#71717a]
+ *
+ * @cssproperty {pixel} [--c2-menu-item__indicator--size=16px]
+ * @cssproperty {color} --c2-menu-item__indicator--color - The check mark / radio dot. Defaults to the row colour.
+ *
+ * @cssproperty {color} [--c2-menu-item__destructive--color=#dc2626] - Label and icon colour of a `destructive` row.
+ * @cssproperty {color} [--c2-menu-item__destructive__hover--background=#fef2f2]
+ *
+ * @cssproperty {outline} [--c2-menu-item__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-menu-item__focus--outline-offset=-2px]
+ *
+ * @cssproperty {opacity} [--c2-menu-item__disabled--opacity=0.38]
+ */
+export declare class MenuItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The value reported in `menu-select`. */
+    value: string;
+    /** Dims the row and ignores clicks and keyboard. */
+    disabled: boolean;
+    /** `item` is a command, `checkbox` toggles, `radio` picks one row of a `name` group. */
+    type: MenuItemType;
+    /** Checked state of a `checkbox` / `radio` row; shown as a check mark or a dot. */
+    checked: boolean;
+    /** Radio group name. Selecting a `radio` row unchecks the other rows of the same group in that menu. */
+    name?: string;
+    /** Makes the row a link; Enter and a click navigate, and `menu-select` still fires. */
+    href?: string;
+    /** Browsing context used when `href` is set, such as `_blank`. */
+    target?: string;
+    /** Paints the row in the destructive colour, for delete-style commands. */
+    destructive: boolean;
+    /** Keeps the menu open after this row is activated, e.g. for a checkbox row. */
+    keepOpen: boolean;
+    /** Label used for typeahead and as the default slot's fallback content. */
+    label?: string;
+    /** Arbitrary payload returned alongside `value` in `menu-select`. Not an attribute. */
+    data?: unknown;
+    /** Set by the parent menu while this row's submenu is open. Announced as `aria-expanded`. */
+    expanded: boolean;
+    /** Private: set by the parent menu on every row while any sibling is checkable, so the labels line up. */
+    reserveIndicator: boolean;
+    private hasDescription;
+    private submenuPresent;
+    private contentSlot;
+    private submenuSlot?;
+    /** `role` written by the author, kept over the automatic one. */
+    private authorRole;
+    /** Whether a menu is slotted into `submenu`. */
+    get hasSubmenu(): boolean;
+    /** The element slotted into `submenu`, if any. The parent menu opens and closes it. */
+    get submenuElement(): HTMLElement | null;
+    /** The text the menu matches while typing: `label` when set, otherwise the slotted label text. */
+    get displayText(): string;
+    connectedCallback(): void;
+    /**
+     * Activates the row the way Enter does: a link is navigated, a checkable row toggles, and `menu-select` fires.
+     * A row with a submenu does nothing — the menu opens the submenu instead.
+     */
+    activate(): void;
+    private select;
+    private handleClick;
+    private handleDescriptionSlotChange;
+    private handleSubmenuSlotChange;
+    protected updated(changed: PropertyValues<this>): void;
+    private syncAria;
+    private renderIndicator;
+    private renderSubmenuIcon;
+    private renderInner;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-menu-item': MenuItem;
+    }
+}
+//# sourceMappingURL=menu-item.d.ts.map

package/types/src/menu-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiC,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAGpF,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAIhG,oGAAoG;AACpG,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CAAA;AAExD,MAAM,WAAW,qBAAqB;IACpC,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,OAAO,EAAE,OAAO,CAAA;IAChB,+CAA+C;IAC/C,IAAI,EAAE,OAAO,CAAA;CACd;AAED,sEAAsE;AACtE,MAAM,WAAW,gBAAgB;IAC/B,aAAa,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAA;IACjD,gBAAgB,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACnE;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,qBAAqB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;IACnE,mBAAmB,EAAE,wBAAwB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;CAC1E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAoB;IAE1C,2CAA2C;IACd,KAAK,SAAK;IAEvC,oDAAoD;IACR,QAAQ,UAAQ;IAE5D,wFAAwF;IAC3D,IAAI,EAAE,YAAY,CAAS;IAExD,mFAAmF;IACvC,OAAO,UAAQ;IAE3D,wGAAwG;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAA;IAE1C,uFAAuF;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAA;IAEzB,kEAAkE;IACtD,MAAM,CAAC,EAAE,MAAM,CAAA;IAE3B,2EAA2E;IAC/B,WAAW,UAAQ;IAE/D,gFAAgF;IAC3B,QAAQ,UAAQ;IAErE,2EAA2E;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAA;IAE3C,uFAAuF;IACvD,IAAI,CAAC,EAAE,OAAO,CAAA;IAE9C,6FAA6F;IACjD,QAAQ,UAAQ;IAE5D,0GAA0G;IAC9B,gBAAgB,UAAQ;IAE3F,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,cAAc,CAAQ;IAEZ,OAAO,CAAC,WAAW,CAAkB;IAEjC,OAAO,CAAC,WAAW,CAAC,CAAiB;IAEpE,iEAAiE;IACjE,OAAO,CAAC,UAAU,CAAsB;IAExC,gDAAgD;IAChD,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,uFAAuF;IACvF,IAAI,cAAc,IAAI,WAAW,GAAG,IAAI,CAGvC;IAED,kGAAkG;IAClG,IAAI,WAAW,IAAI,MAAM,CAKxB;IAEQ,iBAAiB;IAK1B;;;OAGG;IACH,QAAQ,IAAI,IAAI;IAShB,OAAO,CAAC,MAAM;IAcd,OAAO,CAAC,WAAW,CASlB;IAED,OAAO,CAAC,2BAA2B;IAKnC,OAAO,CAAC,uBAAuB;cAIZ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO/D,OAAO,CAAC,QAAQ;IAwBhB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,WAAW;IAeV,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAA;KACzB;CACF"}

package/types/src/menu.d.ts

@@ -0,0 +1,182 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+import type { Placement } from '@c2n/overlay';
+import { MenuItem } from './menu-item';
+import type { MenuSelectEventDetail } from './menu-item';
+import '@c2n/overlay';
+import './menu-item';
+export type { Placement };
+export type { MenuItemType, MenuSelectEventDetail } from './menu-item';
+/** Events fired by {@link Menu}, keyed for `addEventListener`. */
+export interface MenuEventMap {
+    'menu-select': CustomEvent<MenuSelectEventDetail>;
+    toggle: ToggleEvent;
+}
+export interface Menu {
+    addEventListener: TypedAddEventListener<Menu, MenuEventMap>;
+    removeEventListener: TypedRemoveEventListener<Menu, MenuEventMap>;
+}
+/**
+ * A menu of commands anchored to a trigger. The trigger is slotted into `trigger` (a `c2-button`, a `c2-icon-button`,
+ * a plain `<button>`, …) or named by `anchor`; the rows are `c2-menu-item` children, with `<hr>` separators and
+ * `<h1>`–`<h6>` group headings between them. The surface is a native popover on the top layer positioned by
+ * `c2-overlay`, so it flips near the viewport edge, light-dismisses on Escape and outside clicks, and is never clipped
+ * by an `overflow: hidden` parent.
+ *
+ * Keyboard: the trigger opens the menu with Enter, Space or ArrowDown (ArrowUp opens it on the last row). Inside,
+ * Arrow Up/Down move between enabled rows, Home/End jump to the first/last, typing letters jumps to a matching row,
+ * Enter and Space activate, ArrowRight opens a submenu, ArrowLeft returns to its parent row, and Escape or Tab closes
+ * the menu and returns focus to the trigger.
+ *
+ * Activating a row fires `menu-select` and closes the menu; `keep-open` on the menu (or on a single row) leaves it
+ * open, which is what a list of `checkbox` rows wants.
+ *
+ * The surface is as wide as its rows, never narrower than `--c2-menu--min-width` and, when the menu owns its trigger,
+ * never narrower than that trigger either. `fit-anchor` pins it to exactly the trigger's width instead.
+ *
+ * @tag c2-menu
+ *
+ * @slot default - The rows: `c2-menu-item` elements, plus `<hr>` separators and `<h1>`–`<h6>` group headings.
+ * @slot trigger - The element that opens the menu. Omit it and point `anchor` at an element elsewhere on the page.
+ *
+ * @event {CustomEvent<MenuSelectEventDetail>} menu-select - Bubbles from the activated row: `detail.value`, `detail.checked` and `detail.data` of that row.
+ * @event {ToggleEvent} toggle - Fired after the menu opens or closes; `newState` is `open` or `closed`.
+ *
+ * @cssproperty {color} [--c2-menu--background=#ffffff]
+ * @cssproperty {pixel} [--c2-menu--min-width=128px] - Floor for the surface, which is otherwise as wide as its content (and never narrower than a slotted trigger).
+ * @cssproperty {pixel} [--c2-menu--max-height=320px] - The menu scrolls past this height.
+ *
+ * @cssproperty {border} [--c2-menu--border-top=1px solid #e4e4e7]
+ * @cssproperty {border} [--c2-menu--border-right=1px solid #e4e4e7]
+ * @cssproperty {border} [--c2-menu--border-bottom=1px solid #e4e4e7]
+ * @cssproperty {border} [--c2-menu--border-left=1px solid #e4e4e7]
+ *
+ * @cssproperty {border-radius} [--c2-menu--border-top-left-radius=8px]
+ * @cssproperty {border-radius} [--c2-menu--border-top-right-radius=8px]
+ * @cssproperty {border-radius} [--c2-menu--border-bottom-left-radius=8px]
+ * @cssproperty {border-radius} [--c2-menu--border-bottom-right-radius=8px]
+ *
+ * @cssproperty {box-shadow} [--c2-menu--box-shadow=0 8px 24px rgba(24, 24, 27, 0.08)]
+ *
+ * @cssproperty {padding} [--c2-menu--padding-top=4px]
+ * @cssproperty {padding} [--c2-menu--padding-right=4px]
+ * @cssproperty {padding} [--c2-menu--padding-bottom=4px]
+ * @cssproperty {padding} [--c2-menu--padding-left=4px]
+ *
+ * @cssproperty {pixel} --c2-menu--gap - Space between the rows.
+ *
+ * @cssproperty {color} [--c2-menu__separator--color=#e4e4e7]
+ * @cssproperty {margin} [--c2-menu__separator--margin=4px 0]
+ *
+ * @cssproperty {color} [--c2-menu__heading--color=#71717a]
+ * @cssproperty {font-size} [--c2-menu__heading--font-size=11px]
+ * @cssproperty {font-weight} [--c2-menu__heading--font-weight=600]
+ * @cssproperty {letter-spacing} [--c2-menu__heading--letter-spacing=0.06em]
+ * @cssproperty {text-transform} [--c2-menu__heading--text-transform=uppercase]
+ * @cssproperty {padding} [--c2-menu__heading--padding-top=8px]
+ * @cssproperty {padding} [--c2-menu__heading--padding-right=8px]
+ * @cssproperty {padding} [--c2-menu__heading--padding-bottom=4px]
+ * @cssproperty {padding} [--c2-menu__heading--padding-left=8px]
+ *
+ * @internalcomponent c2-overlay
+ *
+ * @slotcomponent c2-menu-item
+ */
+export declare class Menu extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Whether the menu is showing. Set it to open or close the menu from code. */
+    open: boolean;
+    /** Preferred placement of the surface (floating-ui names). Submenus default to `right-start`. */
+    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    /** Distance in pixels from the trigger along the placement direction. Defaults to the overlay's 8px gap. */
+    offset: number | undefined;
+    /** Shift in pixels perpendicular to the placement direction. Positive values move towards the aligned end. */
+    crossOffset: number | undefined;
+    /** Anchor element, or (attribute) the id of an element in the same tree. Defaults to the slotted trigger. */
+    anchor: string | HTMLElement | undefined;
+    /** Make the surface exactly as wide as the anchor instead of as wide as its content. */
+    fitAnchor: boolean;
+    /** Keep the menu open after a row is activated. Also available per row as `keep-open`. */
+    keepOpen: boolean;
+    /** Ignores the trigger and never opens. */
+    disabled: boolean;
+    /** Accessible name of the surface. */
+    ariaLabel: string | null;
+    private overlay?;
+    private triggerSlot?;
+    private itemSlot?;
+    private anchorElement;
+    /** Whether something is slotted into `trigger`; a menu opened from one is never narrower than it. */
+    private hasTrigger;
+    /** The row that holds the roving `tabindex`. */
+    private focusedItem;
+    /** Which row to focus once the surface is open. */
+    private pendingFocus;
+    private typeahead;
+    private typeaheadTimer;
+    /** Open state at the pointerdown that started the current press on the trigger, see `handleTriggerPointerDown`. */
+    private openBeforePress;
+    /** Slotted rows, in DOM order (separators and headings excluded). */
+    get items(): MenuItem[];
+    private get enabledItems();
+    /** The element that opens this menu: the slotted trigger, or the resolved `anchor`. */
+    get triggerElement(): HTMLElement | null;
+    /** The row this menu is a submenu of, when it is slotted into a `c2-menu-item`. */
+    get ownerItem(): MenuItem | null;
+    connectedCallback(): void;
+    /** Opens the menu. Pass `'last'` to start on the last row, `'none'` to leave focus where it is. */
+    show(focus?: 'first' | 'last' | 'none'): void;
+    hide(): void;
+    toggle(force?: boolean): void;
+    /** Moves focus to the first enabled row. */
+    focusFirstItem(): void;
+    /** Moves focus to the last enabled row. */
+    focusLastItem(): void;
+    private resolveAnchor;
+    private syncAnchor;
+    /**
+     * `aria-haspopup` / `aria-expanded` belong on the element that carries the button role. For a `c2-*` trigger that is
+     * the control inside its shadow root, not the host, which is a plain generic element.
+     */
+    private syncTriggerAria;
+    private focusItem;
+    /** Assigns the roving `tabindex` and reserves the indicator column when any row is checkable. */
+    private syncItems;
+    private openSubmenu;
+    private closeSubmenus;
+    private itemFromEvent;
+    /**
+     * The popover light-dismisses itself when the press lands outside it — the trigger included — so by the time the
+     * click arrives the menu is already closed and a naive toggle would reopen it. Remember the state at pointerdown,
+     * which runs before the dismissal, and toggle from that instead.
+     */
+    private handleTriggerPointerDown;
+    private handleTriggerClick;
+    private handleTriggerKeydown;
+    private handleItemClick;
+    /** Hovering a row highlights it and swaps which submenu is open, the way a desktop menu does. */
+    private handlePointerOver;
+    private handleKeydown;
+    private handleMenuSelect;
+    private handleOverlayToggle;
+    /**
+     * Focus goes back to the trigger unless the dismissal handed it to a real control elsewhere — clicking a row leaves
+     * the focus on that row in Chromium and WebKit but on the body in Firefox, and either way the trigger is where the
+     * user was.
+     */
+    private shouldReturnFocus;
+    /** Focus goes back to the row that owns this submenu, or to the trigger. */
+    private returnFocus;
+    private handleSlotChange;
+    private handleTriggerSlotChange;
+    protected firstUpdated(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-menu': Menu;
+    }
+}
+//# sourceMappingURL=menu.d.ts.map

package/types/src/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/menu.ts"],"names":[],"mappings":"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"}

package/vue.d.ts

@@ -0,0 +1,47 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/menu. Import once, anywhere in the program:
+//
+//     import '@c2n/menu/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Menu, MenuEventMap } from '@c2n/menu'
+import type { MenuItem, MenuItemEventMap } from '@c2n/menu/menu-item.js'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-menu': DefineComponent<
+      C2Props<Menu> & {
+        'cross-offset'?: unknown
+        'fit-anchor'?: unknown
+        'keep-open'?: unknown
+        'aria-label'?: unknown
+        onMenuSelect?: (event: MenuEventMap['menu-select']) => void
+        onToggle?: (event: MenuEventMap['toggle']) => void
+      }
+    >
+    'c2-menu-item': DefineComponent<
+      C2Props<MenuItem> & {
+        'keep-open'?: unknown
+        'reserve-indicator'?: unknown
+        onMenuSelect?: (event: MenuItemEventMap['menu-select']) => void
+        onCheckedChange?: (event: MenuItemEventMap['checked-change']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}