@countermeasure-platform/web-components 0.2.0

package/dist/navigation/dropdown-menu/index.js

@@ -0,0 +1,231 @@
+import { n as e, t } from "../../utils-Cn_W3h3f.js";
+//#region src/navigation/dropdown-menu/index.ts
+function n(e) {
+	return Array.from(e.querySelectorAll(".cmm-dropdown-menu__item:not(.cmm-dropdown-menu__item--disabled)"));
+}
+var r = class {
+	trigger;
+	items;
+	placement;
+	className;
+	onOpenCallback;
+	onCloseCallback;
+	menuId;
+	menuEl = null;
+	subMenuEl = null;
+	opened = !1;
+	destroyed = !1;
+	activeIndex = -1;
+	subMenuActiveIndex = -1;
+	handleTriggerClick;
+	handleDocumentClick;
+	handleKeyDown;
+	constructor(n) {
+		t(n.container), this.trigger = n.trigger, this.items = [...n.items], this.placement = n.placement ?? "bottom-start", this.className = n.className, this.onOpenCallback = n.onOpen, this.onCloseCallback = n.onClose, this.menuId = e("cmm-dropdown-menu"), this.handleTriggerClick = () => {
+			this.toggle();
+		}, this.handleDocumentClick = (e) => {
+			let t = e.target;
+			t instanceof Node && this.menuEl && !this.menuEl.contains(t) && !this.trigger.contains(t) && this.subMenuEl?.contains(t) !== !0 && this.close();
+		}, this.handleKeyDown = (e) => {
+			this.opened && this.onKeyDown(e);
+		}, this.trigger.setAttribute("aria-haspopup", "menu"), this.trigger.setAttribute("aria-expanded", "false"), this.trigger.addEventListener("click", this.handleTriggerClick);
+	}
+	isOpen() {
+		return this.opened;
+	}
+	open() {
+		this.destroyed || this.opened || (this.opened = !0, this.activeIndex = 0, this.trigger.setAttribute("aria-expanded", "true"), this.createMenuElement(), this.positionMenu(), setTimeout(() => {
+			document.addEventListener("click", this.handleDocumentClick);
+		}, 0), document.addEventListener("keydown", this.handleKeyDown), this.highlightActiveItem(), this.onOpenCallback?.());
+	}
+	close() {
+		this.opened && (this.opened = !1, this.activeIndex = -1, this.trigger.setAttribute("aria-expanded", "false"), document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleKeyDown), this.closeSubMenu(), this.menuEl &&= (this.menuEl.remove(), null), this.onCloseCallback?.());
+	}
+	toggle() {
+		this.opened ? this.close() : this.open();
+	}
+	update(e) {
+		this.items.length = 0, this.items.push(...e), this.opened && (this.close(), this.open());
+	}
+	destroy() {
+		this.destroyed || (this.destroyed = !0, this.close(), this.trigger.removeEventListener("click", this.handleTriggerClick), this.trigger.removeAttribute("aria-haspopup"), this.trigger.removeAttribute("aria-expanded"));
+	}
+	closeSubMenu() {
+		this.subMenuEl &&= (this.subMenuEl.remove(), null), this.subMenuActiveIndex = -1;
+	}
+	createMenuElement() {
+		this.menuEl && this.menuEl.remove();
+		let e = document.createElement("div");
+		e.className = "cmm-dropdown-menu", e.id = this.menuId, e.setAttribute("role", "menu"), e.setAttribute("tabindex", "-1"), this.className && e.classList.add(this.className), this.renderItems(e, this.items), document.body.appendChild(e), this.menuEl = e;
+	}
+	renderItems(e, t) {
+		for (let n of t) {
+			if (this.isRadioGroup(n)) {
+				this.renderRadioGroup(e, n);
+				continue;
+			}
+			let t = n;
+			if (t.type === "separator") {
+				let t = document.createElement("div");
+				t.className = "cmm-dropdown-menu__separator", t.setAttribute("role", "separator"), e.appendChild(t);
+				continue;
+			}
+			let r = document.createElement("div");
+			if (r.className = "cmm-dropdown-menu__item", r.setAttribute("role", "menuitem"), t.disabled === !0 && (r.classList.add("cmm-dropdown-menu__item--disabled"), r.setAttribute("aria-disabled", "true")), t.type === "checkbox") {
+				let e = document.createElement("span");
+				e.className = "cmm-dropdown-menu__check", e.setAttribute("aria-hidden", "true"), e.textContent = t.checked === !0 ? "✓" : "", r.appendChild(e), t.checked === !0 && r.classList.add("cmm-dropdown-menu__item--checked");
+			}
+			if (t.icon) {
+				let e = document.createElement("span");
+				e.className = "cmm-dropdown-menu__icon", e.setAttribute("aria-hidden", "true"), e.innerHTML = t.icon, r.appendChild(e);
+			}
+			if (t.label) {
+				let e = document.createElement("span");
+				e.className = "cmm-dropdown-menu__label", e.textContent = t.label, r.appendChild(e);
+			}
+			if (t.shortcut) {
+				let e = document.createElement("span");
+				e.className = "cmm-dropdown-menu__shortcut", e.textContent = t.shortcut, r.appendChild(e);
+			}
+			if (t.children && t.children.length > 0) {
+				let e = document.createElement("span");
+				e.className = "cmm-dropdown-menu__arrow", e.setAttribute("aria-hidden", "true"), e.textContent = "▸", r.appendChild(e), r.addEventListener("mouseenter", () => {
+					t.children && this.openSubMenu(r, t.children);
+				});
+			} else r.addEventListener("mouseenter", () => {
+				this.closeSubMenu();
+			});
+			t.disabled !== !0 && (!t.children || t.children.length === 0) && r.addEventListener("click", (e) => {
+				e.stopPropagation(), t.type === "checkbox" && (t.checked = t.checked !== !0), t.onSelect && t.onSelect(), this.close();
+			}), e.appendChild(r);
+		}
+	}
+	renderRadioGroup(e, t) {
+		let n = document.createElement("div");
+		n.className = "cmm-dropdown-menu__radio-group", n.setAttribute("role", "group");
+		for (let e of t.items) {
+			let r = document.createElement("div");
+			r.className = "cmm-dropdown-menu__item", r.setAttribute("role", "menuitemradio"), e.disabled === !0 && (r.classList.add("cmm-dropdown-menu__item--disabled"), r.setAttribute("aria-disabled", "true"));
+			let i = t.value === e.value;
+			r.setAttribute("aria-checked", i ? "true" : "false");
+			let a = document.createElement("span");
+			a.className = "cmm-dropdown-menu__check", a.setAttribute("aria-hidden", "true"), a.textContent = i ? "●" : "", r.appendChild(a), i && r.classList.add("cmm-dropdown-menu__item--checked");
+			let o = document.createElement("span");
+			o.className = "cmm-dropdown-menu__label", o.textContent = e.label, r.appendChild(o), e.disabled !== !0 && r.addEventListener("click", (n) => {
+				n.stopPropagation(), t.value = e.value, t.onChange && t.onChange(e.value), this.close();
+			}), n.appendChild(r);
+		}
+		e.appendChild(n);
+	}
+	openSubMenu(e, t) {
+		this.closeSubMenu();
+		let n = document.createElement("div");
+		n.className = "cmm-dropdown-menu cmm-dropdown-menu--sub", n.setAttribute("role", "menu"), this.renderItems(n, t), document.body.appendChild(n), this.subMenuEl = n;
+		let r = e.getBoundingClientRect(), i = n.getBoundingClientRect(), a = r.right + 2, o = r.top;
+		a + i.width > window.innerWidth && (a = r.left - i.width - 2), o + i.height > window.innerHeight && (o = window.innerHeight - i.height - 4), n.style.left = `${String(Math.max(0, a))}px`, n.style.top = `${String(Math.max(0, o))}px`, this.subMenuActiveIndex = 0, this.highlightSubMenuActiveItem();
+	}
+	positionMenu() {
+		if (!this.menuEl) return;
+		let e = this.trigger.getBoundingClientRect(), t = this.menuEl.getBoundingClientRect(), n = window.innerWidth, r = window.innerHeight, i, a, o = this.placement.startsWith("top"), s = this.placement.endsWith("end");
+		i = o ? e.top - t.height - 4 : e.bottom + 4, a = s ? e.right - t.width : e.left, !o && i + t.height > r ? i = e.top - t.height - 4 : o && i < 0 && (i = e.bottom + 4), a = Math.max(4, Math.min(a, n - t.width - 4)), i = Math.max(4, Math.min(i, r - t.height - 4)), this.menuEl.style.left = `${String(a)}px`, this.menuEl.style.top = `${String(i)}px`;
+	}
+	highlightActiveItem() {
+		this.menuEl && n(this.menuEl).forEach((e, t) => {
+			t === this.activeIndex ? e.classList.add("cmm-dropdown-menu__item--active") : e.classList.remove("cmm-dropdown-menu__item--active");
+		});
+	}
+	highlightSubMenuActiveItem() {
+		this.subMenuEl && n(this.subMenuEl).forEach((e, t) => {
+			t === this.subMenuActiveIndex ? e.classList.add("cmm-dropdown-menu__item--active") : e.classList.remove("cmm-dropdown-menu__item--active");
+		});
+	}
+	onKeyDown(e) {
+		if (this.subMenuEl) {
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				let t = n(this.subMenuEl).length;
+				t > 0 && (this.subMenuActiveIndex = Math.min(this.subMenuActiveIndex + 1, t - 1), this.highlightSubMenuActiveItem());
+				return;
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault(), this.subMenuActiveIndex = Math.max(this.subMenuActiveIndex - 1, 0), this.highlightSubMenuActiveItem();
+				return;
+			}
+			if (e.key === "ArrowLeft" || e.key === "Escape") {
+				e.preventDefault(), this.closeSubMenu();
+				return;
+			}
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				let t = n(this.subMenuEl)[this.subMenuActiveIndex];
+				t && t.click();
+				return;
+			}
+			return;
+		}
+		if (e.key === "Escape") {
+			e.preventDefault(), this.close(), this.trigger.focus();
+			return;
+		}
+		if (e.key === "ArrowDown") {
+			if (e.preventDefault(), this.menuEl) {
+				let e = n(this.menuEl).length;
+				e > 0 && (this.activeIndex = Math.min(this.activeIndex + 1, e - 1), this.highlightActiveItem());
+			}
+			return;
+		}
+		if (e.key === "ArrowUp") {
+			e.preventDefault(), this.activeIndex = Math.max(this.activeIndex - 1, 0), this.highlightActiveItem();
+			return;
+		}
+		if (e.key === "Home") {
+			e.preventDefault(), this.activeIndex = 0, this.highlightActiveItem();
+			return;
+		}
+		if (e.key === "End") {
+			if (e.preventDefault(), this.menuEl) {
+				let e = n(this.menuEl).length;
+				this.activeIndex = Math.max(0, e - 1), this.highlightActiveItem();
+			}
+			return;
+		}
+		if (e.key === "ArrowRight") {
+			if (e.preventDefault(), this.menuEl) {
+				let e = n(this.menuEl)[this.activeIndex];
+				if (e?.querySelector(".cmm-dropdown-menu__arrow")) {
+					let t = this.getFlatMenuItems()[this.activeIndex];
+					t !== void 0 && "children" in t && this.openSubMenu(e, t.children);
+				}
+			}
+			return;
+		}
+		if ((e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.menuEl)) {
+			let e = n(this.menuEl)[this.activeIndex];
+			if (e) if (e.querySelector(".cmm-dropdown-menu__arrow")) {
+				let t = this.getFlatMenuItems()[this.activeIndex];
+				t !== void 0 && "children" in t && this.openSubMenu(e, t.children);
+			} else e.click();
+		}
+	}
+	getFlatMenuItems() {
+		let e = [];
+		for (let t of this.items) if (this.isRadioGroup(t)) for (let n of t.items) e.push({
+			type: "item",
+			label: n.label,
+			value: n.value,
+			disabled: n.disabled
+		});
+		else {
+			let n = t;
+			n.type !== "separator" && e.push(n);
+		}
+		return e;
+	}
+	isRadioGroup(e) {
+		return e.type === "radio-group" && "items" in e;
+	}
+};
+//#endregion
+export { r as DropdownMenu };
+
+//# sourceMappingURL=index.js.map

package/dist/navigation/dropdown-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/navigation/dropdown-menu/index.ts"],"sourcesContent":["/**\n * DropdownMenu - Dropdown action menu with nested sub-menus\n * @countermeasure/web-components/navigation/dropdown-menu\n */\n\nimport { resolveContainer, uniqueId } from '../../primitives/utils'\nimport {\n  type DropdownMenuConfig,\n  type DropdownMenuItem,\n  type DropdownPlacement,\n  type MenuItem,\n  type MenuRadioGroup,\n} from './types'\n\nexport type {\n  DropdownMenuConfig,\n  DropdownMenuItem,\n  DropdownPlacement,\n  MenuItem,\n  MenuRadioGroup,\n  MenuRadioItem,\n} from './types'\n\n/** Query all focusable menu items within a container */\nfunction getNavigableItems(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(\n      '.cmm-dropdown-menu__item:not(.cmm-dropdown-menu__item--disabled)'\n    )\n  )\n}\n\nexport class DropdownMenu {\n  private readonly trigger: HTMLElement\n  private readonly items: DropdownMenuItem[]\n  private readonly placement: DropdownPlacement\n  private readonly className: string | undefined\n  private readonly onOpenCallback: (() => void) | undefined\n  private readonly onCloseCallback: (() => void) | undefined\n  private readonly menuId: string\n\n  private menuEl: HTMLElement | null = null\n  private subMenuEl: HTMLElement | null = null\n  private opened = false\n  private destroyed = false\n  private activeIndex = -1\n  private subMenuActiveIndex = -1\n\n  /** Bound event handlers for cleanup */\n  private readonly handleTriggerClick: () => void\n  private readonly handleDocumentClick: (e: MouseEvent) => void\n  private readonly handleKeyDown: (e: KeyboardEvent) => void\n\n  constructor(config: DropdownMenuConfig) {\n    resolveContainer(config.container)\n    this.trigger = config.trigger\n    this.items = [...config.items]\n    this.placement = config.placement ?? 'bottom-start'\n    this.className = config.className\n    this.onOpenCallback = config.onOpen\n    this.onCloseCallback = config.onClose\n    this.menuId = uniqueId('cmm-dropdown-menu')\n\n    this.handleTriggerClick = () => {\n      this.toggle()\n    }\n\n    this.handleDocumentClick = (e: MouseEvent) => {\n      const target = e.target\n      if (\n        target instanceof Node &&\n        this.menuEl &&\n        !this.menuEl.contains(target) &&\n        !this.trigger.contains(target) &&\n        this.subMenuEl?.contains(target) !== true\n      ) {\n        this.close()\n      }\n    }\n\n    this.handleKeyDown = (e: KeyboardEvent) => {\n      if (this.opened) {\n        this.onKeyDown(e)\n      }\n    }\n\n    this.trigger.setAttribute('aria-haspopup', 'menu')\n    this.trigger.setAttribute('aria-expanded', 'false')\n    this.trigger.addEventListener('click', this.handleTriggerClick)\n  }\n\n  /** Check whether the menu is currently open */\n  isOpen(): boolean {\n    return this.opened\n  }\n\n  /** Open the dropdown menu */\n  open(): void {\n    if (this.destroyed || this.opened) {\n      return\n    }\n\n    this.opened = true\n    this.activeIndex = 0\n    this.trigger.setAttribute('aria-expanded', 'true')\n\n    this.createMenuElement()\n    this.positionMenu()\n\n    // Delay adding document listeners to avoid immediate close\n    setTimeout(() => {\n      document.addEventListener('click', this.handleDocumentClick)\n    }, 0)\n    document.addEventListener('keydown', this.handleKeyDown)\n\n    this.highlightActiveItem()\n    this.onOpenCallback?.()\n  }\n\n  /** Close the dropdown menu */\n  close(): void {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n    this.activeIndex = -1\n    this.trigger.setAttribute('aria-expanded', 'false')\n\n    document.removeEventListener('click', this.handleDocumentClick)\n    document.removeEventListener('keydown', this.handleKeyDown)\n\n    this.closeSubMenu()\n\n    if (this.menuEl) {\n      this.menuEl.remove()\n      this.menuEl = null\n    }\n\n    this.onCloseCallback?.()\n  }\n\n  /** Toggle the menu open/closed */\n  toggle(): void {\n    if (this.opened) {\n      this.close()\n    } else {\n      this.open()\n    }\n  }\n\n  /** Update the menu items */\n  update(items: DropdownMenuItem[]): void {\n    this.items.length = 0\n    this.items.push(...items)\n\n    if (this.opened) {\n      this.close()\n      this.open()\n    }\n  }\n\n  /** Remove all listeners and clean up */\n  destroy(): void {\n    if (this.destroyed) {\n      return\n    }\n    this.destroyed = true\n\n    this.close()\n    this.trigger.removeEventListener('click', this.handleTriggerClick)\n    this.trigger.removeAttribute('aria-haspopup')\n    this.trigger.removeAttribute('aria-expanded')\n  }\n\n  /** Close any open sub-menu */\n  private closeSubMenu(): void {\n    if (this.subMenuEl) {\n      this.subMenuEl.remove()\n      this.subMenuEl = null\n    }\n    this.subMenuActiveIndex = -1\n  }\n\n  /** Create the menu DOM element */\n  private createMenuElement(): void {\n    if (this.menuEl) {\n      this.menuEl.remove()\n    }\n\n    const menu = document.createElement('div')\n    menu.className = 'cmm-dropdown-menu'\n    menu.id = this.menuId\n    menu.setAttribute('role', 'menu')\n    menu.setAttribute('tabindex', '-1')\n\n    if (this.className) {\n      menu.classList.add(this.className)\n    }\n\n    this.renderItems(menu, this.items)\n\n    document.body.appendChild(menu)\n    this.menuEl = menu\n  }\n\n  /** Render menu items into a container element */\n  private renderItems(container: HTMLElement, items: DropdownMenuItem[]): void {\n    for (const item of items) {\n      if (this.isRadioGroup(item)) {\n        this.renderRadioGroup(container, item)\n        continue\n      }\n\n      const menuItem = item\n\n      if (menuItem.type === 'separator') {\n        const sep = document.createElement('div')\n        sep.className = 'cmm-dropdown-menu__separator'\n        sep.setAttribute('role', 'separator')\n        container.appendChild(sep)\n        continue\n      }\n\n      const itemEl = document.createElement('div')\n      itemEl.className = 'cmm-dropdown-menu__item'\n      itemEl.setAttribute('role', 'menuitem')\n\n      if (menuItem.disabled === true) {\n        itemEl.classList.add('cmm-dropdown-menu__item--disabled')\n        itemEl.setAttribute('aria-disabled', 'true')\n      }\n\n      // Checkbox indicator\n      if (menuItem.type === 'checkbox') {\n        const checkSpan = document.createElement('span')\n        checkSpan.className = 'cmm-dropdown-menu__check'\n        checkSpan.setAttribute('aria-hidden', 'true')\n        checkSpan.textContent = menuItem.checked === true ? '\\u2713' : ''\n        itemEl.appendChild(checkSpan)\n\n        if (menuItem.checked === true) {\n          itemEl.classList.add('cmm-dropdown-menu__item--checked')\n        }\n      }\n\n      // Icon\n      if (menuItem.icon) {\n        const iconSpan = document.createElement('span')\n        iconSpan.className = 'cmm-dropdown-menu__icon'\n        iconSpan.setAttribute('aria-hidden', 'true')\n        iconSpan.innerHTML = menuItem.icon\n        itemEl.appendChild(iconSpan)\n      }\n\n      // Label\n      if (menuItem.label) {\n        const labelSpan = document.createElement('span')\n        labelSpan.className = 'cmm-dropdown-menu__label'\n        labelSpan.textContent = menuItem.label\n        itemEl.appendChild(labelSpan)\n      }\n\n      // Shortcut\n      if (menuItem.shortcut) {\n        const shortcutSpan = document.createElement('span')\n        shortcutSpan.className = 'cmm-dropdown-menu__shortcut'\n        shortcutSpan.textContent = menuItem.shortcut\n        itemEl.appendChild(shortcutSpan)\n      }\n\n      // Sub-menu arrow\n      if (menuItem.children && menuItem.children.length > 0) {\n        const arrowSpan = document.createElement('span')\n        arrowSpan.className = 'cmm-dropdown-menu__arrow'\n        arrowSpan.setAttribute('aria-hidden', 'true')\n        arrowSpan.textContent = '\\u25B8'\n        itemEl.appendChild(arrowSpan)\n\n        itemEl.addEventListener('mouseenter', () => {\n          if (menuItem.children) {\n            this.openSubMenu(itemEl, menuItem.children)\n          }\n        })\n      } else {\n        itemEl.addEventListener('mouseenter', () => {\n          this.closeSubMenu()\n        })\n      }\n\n      // Click handler\n      if (menuItem.disabled !== true && (!menuItem.children || menuItem.children.length === 0)) {\n        itemEl.addEventListener('click', (e: MouseEvent) => {\n          e.stopPropagation()\n\n          if (menuItem.type === 'checkbox') {\n            menuItem.checked = menuItem.checked !== true\n          }\n\n          if (menuItem.onSelect) {\n            menuItem.onSelect()\n          }\n          this.close()\n        })\n      }\n\n      container.appendChild(itemEl)\n    }\n  }\n\n  /** Render a radio group */\n  private renderRadioGroup(container: HTMLElement, group: MenuRadioGroup): void {\n    const groupEl = document.createElement('div')\n    groupEl.className = 'cmm-dropdown-menu__radio-group'\n    groupEl.setAttribute('role', 'group')\n\n    for (const radioItem of group.items) {\n      const itemEl = document.createElement('div')\n      itemEl.className = 'cmm-dropdown-menu__item'\n      itemEl.setAttribute('role', 'menuitemradio')\n\n      if (radioItem.disabled === true) {\n        itemEl.classList.add('cmm-dropdown-menu__item--disabled')\n        itemEl.setAttribute('aria-disabled', 'true')\n      }\n\n      const isChecked = group.value === radioItem.value\n      itemEl.setAttribute('aria-checked', isChecked ? 'true' : 'false')\n\n      const checkSpan = document.createElement('span')\n      checkSpan.className = 'cmm-dropdown-menu__check'\n      checkSpan.setAttribute('aria-hidden', 'true')\n      checkSpan.textContent = isChecked ? '\\u25CF' : ''\n      itemEl.appendChild(checkSpan)\n\n      if (isChecked) {\n        itemEl.classList.add('cmm-dropdown-menu__item--checked')\n      }\n\n      const labelSpan = document.createElement('span')\n      labelSpan.className = 'cmm-dropdown-menu__label'\n      labelSpan.textContent = radioItem.label\n      itemEl.appendChild(labelSpan)\n\n      if (radioItem.disabled !== true) {\n        itemEl.addEventListener('click', (e: MouseEvent) => {\n          e.stopPropagation()\n          group.value = radioItem.value\n          if (group.onChange) {\n            group.onChange(radioItem.value)\n          }\n          this.close()\n        })\n      }\n\n      groupEl.appendChild(itemEl)\n    }\n\n    container.appendChild(groupEl)\n  }\n\n  /** Open a sub-menu next to the parent item */\n  private openSubMenu(parentEl: HTMLElement, children: MenuItem[]): void {\n    this.closeSubMenu()\n\n    const sub = document.createElement('div')\n    sub.className = 'cmm-dropdown-menu cmm-dropdown-menu--sub'\n    sub.setAttribute('role', 'menu')\n\n    this.renderItems(sub, children)\n    document.body.appendChild(sub)\n    this.subMenuEl = sub\n\n    // Position the sub-menu\n    const parentRect = parentEl.getBoundingClientRect()\n    const subRect = sub.getBoundingClientRect()\n\n    let left = parentRect.right + 2\n    let top = parentRect.top\n\n    // Flip left if near right edge\n    if (left + subRect.width > window.innerWidth) {\n      left = parentRect.left - subRect.width - 2\n    }\n\n    // Adjust top if near bottom edge\n    if (top + subRect.height > window.innerHeight) {\n      top = window.innerHeight - subRect.height - 4\n    }\n\n    sub.style.left = `${String(Math.max(0, left))}px`\n    sub.style.top = `${String(Math.max(0, top))}px`\n\n    this.subMenuActiveIndex = 0\n    this.highlightSubMenuActiveItem()\n  }\n\n  /** Position the main menu relative to the trigger */\n  private positionMenu(): void {\n    if (!this.menuEl) {\n      return\n    }\n\n    const triggerRect = this.trigger.getBoundingClientRect()\n    const menuRect = this.menuEl.getBoundingClientRect()\n    const viewportWidth = window.innerWidth\n    const viewportHeight = window.innerHeight\n\n    let top: number\n    let left: number\n\n    const isTop = this.placement.startsWith('top')\n    const isEnd = this.placement.endsWith('end')\n\n    if (isTop) {\n      top = triggerRect.top - menuRect.height - 4\n    } else {\n      top = triggerRect.bottom + 4\n    }\n\n    if (isEnd) {\n      left = triggerRect.right - menuRect.width\n    } else {\n      left = triggerRect.left\n    }\n\n    // Auto-flip vertically\n    if (!isTop && top + menuRect.height > viewportHeight) {\n      top = triggerRect.top - menuRect.height - 4\n    } else if (isTop && top < 0) {\n      top = triggerRect.bottom + 4\n    }\n\n    // Clamp horizontally\n    left = Math.max(4, Math.min(left, viewportWidth - menuRect.width - 4))\n    top = Math.max(4, Math.min(top, viewportHeight - menuRect.height - 4))\n\n    this.menuEl.style.left = `${String(left)}px`\n    this.menuEl.style.top = `${String(top)}px`\n  }\n\n  /** Highlight the active item in the main menu */\n  private highlightActiveItem(): void {\n    if (!this.menuEl) {\n      return\n    }\n\n    const navigable = getNavigableItems(this.menuEl)\n    navigable.forEach((el, i) => {\n      if (i === this.activeIndex) {\n        el.classList.add('cmm-dropdown-menu__item--active')\n      } else {\n        el.classList.remove('cmm-dropdown-menu__item--active')\n      }\n    })\n  }\n\n  /** Highlight the active item in the sub-menu */\n  private highlightSubMenuActiveItem(): void {\n    if (!this.subMenuEl) {\n      return\n    }\n\n    const navigable = getNavigableItems(this.subMenuEl)\n    navigable.forEach((el, i) => {\n      if (i === this.subMenuActiveIndex) {\n        el.classList.add('cmm-dropdown-menu__item--active')\n      } else {\n        el.classList.remove('cmm-dropdown-menu__item--active')\n      }\n    })\n  }\n\n  /** Handle keyboard navigation */\n  private onKeyDown(e: KeyboardEvent): void {\n    // Handle sub-menu navigation if a sub-menu is open\n    if (this.subMenuEl) {\n      if (e.key === 'ArrowDown') {\n        e.preventDefault()\n        const count = getNavigableItems(this.subMenuEl).length\n        if (count > 0) {\n          this.subMenuActiveIndex = Math.min(this.subMenuActiveIndex + 1, count - 1)\n          this.highlightSubMenuActiveItem()\n        }\n        return\n      }\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        this.subMenuActiveIndex = Math.max(this.subMenuActiveIndex - 1, 0)\n        this.highlightSubMenuActiveItem()\n        return\n      }\n\n      if (e.key === 'ArrowLeft' || e.key === 'Escape') {\n        e.preventDefault()\n        this.closeSubMenu()\n        return\n      }\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        const navigable = getNavigableItems(this.subMenuEl)\n        const activeEl = navigable[this.subMenuActiveIndex]\n        if (activeEl) {\n          activeEl.click()\n        }\n        return\n      }\n\n      return\n    }\n\n    // Main menu navigation\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      this.close()\n      this.trigger.focus()\n      return\n    }\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      if (this.menuEl) {\n        const count = getNavigableItems(this.menuEl).length\n        if (count > 0) {\n          this.activeIndex = Math.min(this.activeIndex + 1, count - 1)\n          this.highlightActiveItem()\n        }\n      }\n      return\n    }\n\n    if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      this.activeIndex = Math.max(this.activeIndex - 1, 0)\n      this.highlightActiveItem()\n      return\n    }\n\n    if (e.key === 'Home') {\n      e.preventDefault()\n      this.activeIndex = 0\n      this.highlightActiveItem()\n      return\n    }\n\n    if (e.key === 'End') {\n      e.preventDefault()\n      if (this.menuEl) {\n        const count = getNavigableItems(this.menuEl).length\n        this.activeIndex = Math.max(0, count - 1)\n        this.highlightActiveItem()\n      }\n      return\n    }\n\n    if (e.key === 'ArrowRight') {\n      e.preventDefault()\n      // Open sub-menu if the active item has children\n      if (this.menuEl) {\n        const navigable = getNavigableItems(this.menuEl)\n        const activeEl = navigable[this.activeIndex]\n        if (activeEl?.querySelector('.cmm-dropdown-menu__arrow')) {\n          const flatItems = this.getFlatMenuItems()\n          const flatItem = flatItems[this.activeIndex]\n          if (flatItem !== undefined && 'children' in flatItem) {\n            this.openSubMenu(activeEl, flatItem.children)\n          }\n        }\n      }\n      return\n    }\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      if (this.menuEl) {\n        const navigable = getNavigableItems(this.menuEl)\n        const activeEl = navigable[this.activeIndex]\n        if (activeEl) {\n          // If has children, open sub-menu instead\n          if (activeEl.querySelector('.cmm-dropdown-menu__arrow')) {\n            const flatItems = this.getFlatMenuItems()\n            const flatItem = flatItems[this.activeIndex]\n            if (flatItem !== undefined && 'children' in flatItem) {\n              this.openSubMenu(activeEl, flatItem.children)\n            }\n          } else {\n            activeEl.click()\n          }\n        }\n      }\n    }\n  }\n\n  /** Get a flat list of navigable menu item data (excluding separators) */\n  private getFlatMenuItems(): DropdownMenuItem[] {\n    const result: DropdownMenuItem[] = []\n\n    for (const item of this.items) {\n      if (this.isRadioGroup(item)) {\n        for (const radioItem of item.items) {\n          result.push({\n            type: 'item',\n            label: radioItem.label,\n            value: radioItem.value,\n            disabled: radioItem.disabled,\n          } as MenuItem)\n        }\n      } else {\n        const menuItem = item\n        if (menuItem.type !== 'separator') {\n          result.push(menuItem)\n        }\n      }\n    }\n\n    return result\n  }\n\n  /** Type guard for radio group */\n  private isRadioGroup(item: DropdownMenuItem): item is MenuRadioGroup {\n    return item.type === 'radio-group' && 'items' in item\n  }\n}\n"],"mappings":"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"}

package/dist/navigation/dropdown-menu/types.d.ts

@@ -0,0 +1,38 @@
+/**
+ * DropdownMenu type definitions
+ * @countermeasure/web-components/navigation/dropdown-menu
+ */
+export interface MenuItem {
+    type: 'item' | 'separator' | 'checkbox' | 'radio-group';
+    label?: string;
+    icon?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    value?: string;
+    children?: MenuItem[];
+    onSelect?: () => void;
+}
+export interface MenuRadioItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface MenuRadioGroup {
+    type: 'radio-group';
+    items: MenuRadioItem[];
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export type DropdownMenuItem = MenuItem | MenuRadioGroup;
+export type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+export interface DropdownMenuConfig {
+    container: HTMLElement | string;
+    trigger: HTMLElement;
+    items: DropdownMenuItem[];
+    placement?: DropdownPlacement;
+    className?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/navigation/dropdown-menu/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/navigation/dropdown-menu/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAA;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,aAAa,CAAA;IACnB,KAAK,EAAE,aAAa,EAAE,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,cAAc,CAAA;AAExD,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAA;AAEvF,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,OAAO,EAAE,WAAW,CAAA;IACpB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB"}

package/dist/navigation/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Navigation - Navigation component library
+ * @countermeasure/web-components/navigation
+ */
+export { Breadcrumb } from './breadcrumb/index';
+export type { BreadcrumbConfig, BreadcrumbItem } from './breadcrumb/types';
+export { Menubar } from './menubar/index';
+export type { MenubarConfig, MenubarItem, MenuItem as MenubarMenuItem } from './menubar/types';
+export { DropdownMenu } from './dropdown-menu/index';
+export type { DropdownMenuConfig, DropdownMenuItem, DropdownPlacement, MenuItem as DropdownMenuItemDef, MenuRadioGroup, MenuRadioItem, } from './dropdown-menu/types';
+export { NavigationMenu } from './navigation-menu/index';
+export type { NavChild, NavItem, NavMenuConfig } from './navigation-menu/types';
+export { Stepper } from './stepper/index';
+export type { Step, StepperConfig, StepperOrientation, StepStatus } from './stepper/types';
+export { Drawer } from './drawer/index';
+export type { DrawerConfig, DrawerSide, DrawerSize } from './drawer/types';
+//# sourceMappingURL=index.d.ts.map

package/dist/navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC/C,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAG1E,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG9F,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,YAAY,EACV,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,IAAI,mBAAmB,EAC/B,cAAc,EACd,aAAa,GACd,MAAM,uBAAuB,CAAA;AAG9B,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAG/E,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAG1F,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/navigation/index.js

@@ -0,0 +1,7 @@
+import { Breadcrumb as e } from "./breadcrumb/index.js";
+import { Menubar as t } from "./menubar/index.js";
+import { DropdownMenu as n } from "./dropdown-menu/index.js";
+import { NavigationMenu as r } from "./navigation-menu/index.js";
+import { Stepper as i } from "./stepper/index.js";
+import { Drawer as a } from "./drawer/index.js";
+export { e as Breadcrumb, a as Drawer, n as DropdownMenu, t as Menubar, r as NavigationMenu, i as Stepper };

package/dist/navigation/menubar/index.d.ts

@@ -0,0 +1,38 @@
+import { MenubarConfig, MenubarItem } from './types';
+export type { MenubarConfig, MenubarItem, MenuItem } from './types';
+export declare class Menubar {
+    private readonly container;
+    private readonly items;
+    private readonly className;
+    private readonly menubarId;
+    private barEl;
+    private openIndex;
+    private activeItemIndex;
+    private dropdownEl;
+    private destroyed;
+    /** Bound event handlers for cleanup */
+    private readonly handleDocumentClick;
+    private readonly handleKeyDown;
+    constructor(config: MenubarConfig);
+    /** Update the menubar items and re-render */
+    update(items: MenubarItem[]): void;
+    /** Remove all DOM elements and clean up */
+    destroy(): void;
+    /** Close the currently open menu */
+    private closeMenu;
+    /** Open a specific top-level menu by index */
+    private openMenu;
+    /** Render menu items into a container */
+    private renderMenuItems;
+    /** Update aria-expanded on trigger buttons */
+    private updateTriggerStates;
+    /** Highlight the active item in the dropdown */
+    private highlightActiveItem;
+    /** Get the count of navigable items in the current dropdown */
+    private getNavigableItemCount;
+    /** Handle keyboard navigation */
+    private onKeyDown;
+    /** Render the full menubar */
+    private render;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/navigation/menubar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/navigation/menubar/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,WAAW,EAAiB,MAAM,SAAS,CAAA;AAE7E,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEnE,qBAAa,OAAO;IAClB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAa;IACvC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAe;IACrC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoB;IAC9C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAQ;IAElC,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,eAAe,CAAK;IAC5B,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,SAAS,CAAQ;IAEzB,uCAAuC;IACvC,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAyB;IAC7D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA4B;gBAE9C,MAAM,EAAE,aAAa;IA4BjC,6CAA6C;IAC7C,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI;IAUlC,2CAA2C;IAC3C,OAAO,IAAI,IAAI;IAYf,oCAAoC;IACpC,OAAO,CAAC,SAAS;IAUjB,8CAA8C;IAC9C,OAAO,CAAC,QAAQ;IAqDhB,yCAAyC;IACzC,OAAO,CAAC,eAAe;IAyEvB,8CAA8C;IAC9C,OAAO,CAAC,mBAAmB;IAiB3B,gDAAgD;IAChD,OAAO,CAAC,mBAAmB;IAkB3B,+DAA+D;IAC/D,OAAO,CAAC,qBAAqB;IAQ7B,iCAAiC;IACjC,OAAO,CAAC,SAAS;IAmGjB,8BAA8B;IAC9B,OAAO,CAAC,MAAM;CA+Cf"}

package/dist/navigation/menubar/index.js

@@ -0,0 +1,166 @@
+import { n as e, t } from "../../utils-Cn_W3h3f.js";
+//#region src/navigation/menubar/index.ts
+var n = class {
+	container;
+	items;
+	className;
+	menubarId;
+	barEl = null;
+	openIndex = -1;
+	activeItemIndex = -1;
+	dropdownEl = null;
+	destroyed = !1;
+	handleDocumentClick;
+	handleKeyDown;
+	constructor(n) {
+		this.container = t(n.container), this.items = [...n.items], this.className = n.className, this.menubarId = e("cmm-menubar"), this.handleDocumentClick = (e) => {
+			let t = e.target;
+			t instanceof Node && this.barEl && !this.barEl.contains(t) && this.dropdownEl && !this.dropdownEl.contains(t) && this.closeMenu();
+		}, this.handleKeyDown = (e) => {
+			this.onKeyDown(e);
+		}, this.render(), document.addEventListener("click", this.handleDocumentClick), document.addEventListener("keydown", this.handleKeyDown);
+	}
+	update(e) {
+		this.destroyed || (this.items.length = 0, this.items.push(...e), this.closeMenu(), this.render());
+	}
+	destroy() {
+		this.destroyed || (this.destroyed = !0, this.closeMenu(), document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleKeyDown), this.container.innerHTML = "", this.barEl = null);
+	}
+	closeMenu() {
+		this.dropdownEl &&= (this.dropdownEl.remove(), null), this.openIndex = -1, this.activeItemIndex = -1, this.updateTriggerStates();
+	}
+	openMenu(t) {
+		this.closeMenu();
+		let n = this.items[t];
+		if (!n || n.children.length === 0) return;
+		this.openIndex = t, this.activeItemIndex = 0, this.updateTriggerStates();
+		let r = this.barEl?.querySelectorAll(".cmm-menubar__trigger")?.[t];
+		if (!r) return;
+		let i = r.getBoundingClientRect(), a = document.createElement("div");
+		a.className = "cmm-menubar__dropdown", a.setAttribute("role", "menu"), a.id = e("cmm-menubar-dropdown"), r.setAttribute("aria-controls", a.id), this.renderMenuItems(a, n.children), document.body.appendChild(a), this.dropdownEl = a;
+		let o = a.getBoundingClientRect(), s = i.left, c = i.bottom + 2;
+		s + o.width > window.innerWidth && (s = window.innerWidth - o.width - 4), c + o.height > window.innerHeight && (c = i.top - o.height - 2), a.style.left = `${String(Math.max(0, s))}px`, a.style.top = `${String(Math.max(0, c))}px`, this.highlightActiveItem();
+	}
+	renderMenuItems(e, t) {
+		for (let n of t) {
+			if (n.type === "separator") {
+				let t = document.createElement("div");
+				t.className = "cmm-menubar__separator", t.setAttribute("role", "separator"), e.appendChild(t);
+				continue;
+			}
+			let t = document.createElement("div");
+			if (t.className = "cmm-menubar__item", t.setAttribute("role", "menuitem"), n.disabled === !0 && (t.classList.add("cmm-menubar__item--disabled"), t.setAttribute("aria-disabled", "true")), (n.type === "checkbox" || n.type === "radio") && n.checked === !0) {
+				t.classList.add("cmm-menubar__item--checked");
+				let e = document.createElement("span");
+				e.className = "cmm-menubar__check", e.setAttribute("aria-hidden", "true"), e.textContent = n.type === "radio" ? "●" : "✓", t.appendChild(e);
+			}
+			if (n.icon) {
+				let e = document.createElement("span");
+				e.className = "cmm-menubar__icon", e.setAttribute("aria-hidden", "true"), e.innerHTML = n.icon, t.appendChild(e);
+			}
+			if (n.label) {
+				let e = document.createElement("span");
+				e.className = "cmm-menubar__label", e.textContent = n.label, t.appendChild(e);
+			}
+			if (n.shortcut) {
+				let e = document.createElement("span");
+				e.className = "cmm-menubar__shortcut", e.textContent = n.shortcut, t.appendChild(e);
+			}
+			if (n.children && n.children.length > 0) {
+				let e = document.createElement("span");
+				e.className = "cmm-menubar__arrow", e.setAttribute("aria-hidden", "true"), e.textContent = "▸", t.appendChild(e);
+			}
+			n.disabled !== !0 && t.addEventListener("click", (e) => {
+				e.stopPropagation(), n.onSelect && n.onSelect(), this.closeMenu();
+			}), e.appendChild(t);
+		}
+	}
+	updateTriggerStates() {
+		let e = this.barEl?.querySelectorAll(".cmm-menubar__trigger");
+		e && e.forEach((e, t) => {
+			let n = t === this.openIndex;
+			e.setAttribute("aria-expanded", n ? "true" : "false"), n ? e.classList.add("cmm-menubar__trigger--active") : e.classList.remove("cmm-menubar__trigger--active");
+		});
+	}
+	highlightActiveItem() {
+		this.dropdownEl && this.dropdownEl.querySelectorAll(".cmm-menubar__item:not(.cmm-menubar__item--disabled)").forEach((e, t) => {
+			t === this.activeItemIndex ? e.classList.add("cmm-menubar__item--active") : e.classList.remove("cmm-menubar__item--active");
+		});
+	}
+	getNavigableItemCount() {
+		return this.dropdownEl ? this.dropdownEl.querySelectorAll(".cmm-menubar__item:not(.cmm-menubar__item--disabled)").length : 0;
+	}
+	onKeyDown(e) {
+		if (this.destroyed) return;
+		let t = e.target;
+		if (!(t instanceof Node && this.barEl && !this.barEl.contains(t) && this.dropdownEl?.contains(t) !== !0 && this.openIndex < 0)) {
+			if (e.key === "Escape") {
+				this.openIndex >= 0 && (e.preventDefault(), this.closeMenu());
+				return;
+			}
+			if (e.key === "ArrowRight") {
+				if (e.preventDefault(), this.openIndex >= 0) {
+					let e = (this.openIndex + 1) % this.items.length;
+					this.openMenu(e);
+				}
+				return;
+			}
+			if (e.key === "ArrowLeft") {
+				if (e.preventDefault(), this.openIndex >= 0) {
+					let e = (this.openIndex - 1 + this.items.length) % this.items.length;
+					this.openMenu(e);
+				}
+				return;
+			}
+			if (e.key === "ArrowDown") {
+				if (e.preventDefault(), this.openIndex >= 0) {
+					let e = this.getNavigableItemCount();
+					e > 0 && (this.activeItemIndex = Math.min(this.activeItemIndex + 1, e - 1), this.highlightActiveItem());
+				}
+				return;
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault(), this.openIndex >= 0 && (this.activeItemIndex = Math.max(this.activeItemIndex - 1, 0), this.highlightActiveItem());
+				return;
+			}
+			if (e.key === "Home") {
+				e.preventDefault(), this.openIndex >= 0 && (this.activeItemIndex = 0, this.highlightActiveItem());
+				return;
+			}
+			if (e.key === "End") {
+				if (e.preventDefault(), this.openIndex >= 0) {
+					let e = this.getNavigableItemCount();
+					this.activeItemIndex = Math.max(0, e - 1), this.highlightActiveItem();
+				}
+				return;
+			}
+			if ((e.key === "Enter" || e.key === " ") && this.openIndex >= 0 && this.activeItemIndex >= 0 && this.dropdownEl) {
+				e.preventDefault();
+				let t = this.dropdownEl.querySelectorAll(".cmm-menubar__item:not(.cmm-menubar__item--disabled)")[this.activeItemIndex];
+				t && t.click();
+			}
+		}
+	}
+	render() {
+		this.container.innerHTML = "";
+		let e = document.createElement("div");
+		e.className = "cmm-menubar", e.id = this.menubarId, e.setAttribute("role", "menubar"), this.className && e.classList.add(this.className);
+		for (let t = 0; t < this.items.length; t++) {
+			let n = this.items[t];
+			if (!n) continue;
+			let r = document.createElement("button");
+			r.className = "cmm-menubar__trigger", r.type = "button", r.textContent = n.label, r.setAttribute("aria-haspopup", "true"), r.setAttribute("aria-expanded", "false");
+			let i = t;
+			r.addEventListener("click", (e) => {
+				e.stopPropagation(), this.openIndex === i ? this.closeMenu() : this.openMenu(i);
+			}), r.addEventListener("mouseenter", () => {
+				this.openIndex >= 0 && this.openIndex !== i && this.openMenu(i);
+			}), e.appendChild(r);
+		}
+		this.container.appendChild(e), this.barEl = e;
+	}
+};
+//#endregion
+export { n as Menubar };
+
+//# sourceMappingURL=index.js.map

package/dist/navigation/menubar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/navigation/menubar/index.ts"],"sourcesContent":["/**\n * Menubar - Horizontal menu bar with dropdown sub-menus\n * @countermeasure/web-components/navigation/menubar\n */\n\nimport { resolveContainer, uniqueId } from '../../primitives/utils'\nimport { type MenubarConfig, type MenubarItem, type MenuItem } from './types'\n\nexport type { MenubarConfig, MenubarItem, MenuItem } from './types'\n\nexport class Menubar {\n  private readonly container: HTMLElement\n  private readonly items: MenubarItem[]\n  private readonly className: string | undefined\n  private readonly menubarId: string\n\n  private barEl: HTMLElement | null = null\n  private openIndex = -1\n  private activeItemIndex = -1\n  private dropdownEl: HTMLElement | null = null\n  private destroyed = false\n\n  /** Bound event handlers for cleanup */\n  private readonly handleDocumentClick: (e: MouseEvent) => void\n  private readonly handleKeyDown: (e: KeyboardEvent) => void\n\n  constructor(config: MenubarConfig) {\n    this.container = resolveContainer(config.container)\n    this.items = [...config.items]\n    this.className = config.className\n    this.menubarId = uniqueId('cmm-menubar')\n\n    this.handleDocumentClick = (e: MouseEvent) => {\n      const target = e.target\n      if (\n        target instanceof Node &&\n        this.barEl &&\n        !this.barEl.contains(target) &&\n        this.dropdownEl &&\n        !this.dropdownEl.contains(target)\n      ) {\n        this.closeMenu()\n      }\n    }\n\n    this.handleKeyDown = (e: KeyboardEvent) => {\n      this.onKeyDown(e)\n    }\n\n    this.render()\n    document.addEventListener('click', this.handleDocumentClick)\n    document.addEventListener('keydown', this.handleKeyDown)\n  }\n\n  /** Update the menubar items and re-render */\n  update(items: MenubarItem[]): void {\n    if (this.destroyed) {\n      return\n    }\n    this.items.length = 0\n    this.items.push(...items)\n    this.closeMenu()\n    this.render()\n  }\n\n  /** Remove all DOM elements and clean up */\n  destroy(): void {\n    if (this.destroyed) {\n      return\n    }\n    this.destroyed = true\n    this.closeMenu()\n    document.removeEventListener('click', this.handleDocumentClick)\n    document.removeEventListener('keydown', this.handleKeyDown)\n    this.container.innerHTML = ''\n    this.barEl = null\n  }\n\n  /** Close the currently open menu */\n  private closeMenu(): void {\n    if (this.dropdownEl) {\n      this.dropdownEl.remove()\n      this.dropdownEl = null\n    }\n    this.openIndex = -1\n    this.activeItemIndex = -1\n    this.updateTriggerStates()\n  }\n\n  /** Open a specific top-level menu by index */\n  private openMenu(index: number): void {\n    this.closeMenu()\n\n    const menuItem = this.items[index]\n    if (!menuItem || menuItem.children.length === 0) {\n      return\n    }\n\n    this.openIndex = index\n    this.activeItemIndex = 0\n    this.updateTriggerStates()\n\n    // Get the trigger button position\n    const triggers = this.barEl?.querySelectorAll<HTMLElement>('.cmm-menubar__trigger')\n    const triggerEl = triggers?.[index]\n    if (!triggerEl) {\n      return\n    }\n\n    const rect = triggerEl.getBoundingClientRect()\n\n    // Create dropdown\n    const dropdown = document.createElement('div')\n    dropdown.className = 'cmm-menubar__dropdown'\n    dropdown.setAttribute('role', 'menu')\n    dropdown.id = uniqueId('cmm-menubar-dropdown')\n\n    triggerEl.setAttribute('aria-controls', dropdown.id)\n\n    this.renderMenuItems(dropdown, menuItem.children)\n\n    document.body.appendChild(dropdown)\n    this.dropdownEl = dropdown\n\n    // Position below the trigger\n    const dropdownRect = dropdown.getBoundingClientRect()\n    let left = rect.left\n    let top = rect.bottom + 2\n\n    // Flip if near viewport edges\n    if (left + dropdownRect.width > window.innerWidth) {\n      left = window.innerWidth - dropdownRect.width - 4\n    }\n    if (top + dropdownRect.height > window.innerHeight) {\n      top = rect.top - dropdownRect.height - 2\n    }\n\n    dropdown.style.left = `${String(Math.max(0, left))}px`\n    dropdown.style.top = `${String(Math.max(0, top))}px`\n\n    this.highlightActiveItem()\n  }\n\n  /** Render menu items into a container */\n  private renderMenuItems(container: HTMLElement, items: MenuItem[]): void {\n    for (const item of items) {\n      if (item.type === 'separator') {\n        const sep = document.createElement('div')\n        sep.className = 'cmm-menubar__separator'\n        sep.setAttribute('role', 'separator')\n        container.appendChild(sep)\n        continue\n      }\n\n      const itemEl = document.createElement('div')\n      itemEl.className = 'cmm-menubar__item'\n      itemEl.setAttribute('role', 'menuitem')\n\n      if (item.disabled === true) {\n        itemEl.classList.add('cmm-menubar__item--disabled')\n        itemEl.setAttribute('aria-disabled', 'true')\n      }\n\n      if ((item.type === 'checkbox' || item.type === 'radio') && item.checked === true) {\n        itemEl.classList.add('cmm-menubar__item--checked')\n\n        const checkSpan = document.createElement('span')\n        checkSpan.className = 'cmm-menubar__check'\n        checkSpan.setAttribute('aria-hidden', 'true')\n        checkSpan.textContent = item.type === 'radio' ? '\\u25CF' : '\\u2713'\n        itemEl.appendChild(checkSpan)\n      }\n\n      if (item.icon) {\n        const iconSpan = document.createElement('span')\n        iconSpan.className = 'cmm-menubar__icon'\n        iconSpan.setAttribute('aria-hidden', 'true')\n        iconSpan.innerHTML = item.icon\n        itemEl.appendChild(iconSpan)\n      }\n\n      if (item.label) {\n        const labelSpan = document.createElement('span')\n        labelSpan.className = 'cmm-menubar__label'\n        labelSpan.textContent = item.label\n        itemEl.appendChild(labelSpan)\n      }\n\n      if (item.shortcut) {\n        const shortcutSpan = document.createElement('span')\n        shortcutSpan.className = 'cmm-menubar__shortcut'\n        shortcutSpan.textContent = item.shortcut\n        itemEl.appendChild(shortcutSpan)\n      }\n\n      if (item.children && item.children.length > 0) {\n        const arrowSpan = document.createElement('span')\n        arrowSpan.className = 'cmm-menubar__arrow'\n        arrowSpan.setAttribute('aria-hidden', 'true')\n        arrowSpan.textContent = '\\u25B8'\n        itemEl.appendChild(arrowSpan)\n      }\n\n      if (item.disabled !== true) {\n        itemEl.addEventListener('click', (e: MouseEvent) => {\n          e.stopPropagation()\n          if (item.onSelect) {\n            item.onSelect()\n          }\n          this.closeMenu()\n        })\n      }\n\n      container.appendChild(itemEl)\n    }\n  }\n\n  /** Update aria-expanded on trigger buttons */\n  private updateTriggerStates(): void {\n    const triggers = this.barEl?.querySelectorAll<HTMLElement>('.cmm-menubar__trigger')\n    if (!triggers) {\n      return\n    }\n\n    triggers.forEach((trigger, i) => {\n      const isOpen = i === this.openIndex\n      trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false')\n      if (isOpen) {\n        trigger.classList.add('cmm-menubar__trigger--active')\n      } else {\n        trigger.classList.remove('cmm-menubar__trigger--active')\n      }\n    })\n  }\n\n  /** Highlight the active item in the dropdown */\n  private highlightActiveItem(): void {\n    if (!this.dropdownEl) {\n      return\n    }\n\n    const menuItems = this.dropdownEl.querySelectorAll<HTMLElement>(\n      '.cmm-menubar__item:not(.cmm-menubar__item--disabled)'\n    )\n\n    menuItems.forEach((el, i) => {\n      if (i === this.activeItemIndex) {\n        el.classList.add('cmm-menubar__item--active')\n      } else {\n        el.classList.remove('cmm-menubar__item--active')\n      }\n    })\n  }\n\n  /** Get the count of navigable items in the current dropdown */\n  private getNavigableItemCount(): number {\n    if (!this.dropdownEl) {\n      return 0\n    }\n    return this.dropdownEl.querySelectorAll('.cmm-menubar__item:not(.cmm-menubar__item--disabled)')\n      .length\n  }\n\n  /** Handle keyboard navigation */\n  private onKeyDown(e: KeyboardEvent): void {\n    if (this.destroyed) {\n      return\n    }\n\n    // Only handle keys when the menubar or dropdown is focused\n    const target = e.target\n    if (\n      target instanceof Node &&\n      this.barEl &&\n      !this.barEl.contains(target) &&\n      this.dropdownEl?.contains(target) !== true\n    ) {\n      // Check if nothing is focused and the menu is open\n      if (this.openIndex < 0) {\n        return\n      }\n    }\n\n    if (e.key === 'Escape') {\n      if (this.openIndex >= 0) {\n        e.preventDefault()\n        this.closeMenu()\n      }\n      return\n    }\n\n    if (e.key === 'ArrowRight') {\n      e.preventDefault()\n      if (this.openIndex >= 0) {\n        const nextIndex = (this.openIndex + 1) % this.items.length\n        this.openMenu(nextIndex)\n      }\n      return\n    }\n\n    if (e.key === 'ArrowLeft') {\n      e.preventDefault()\n      if (this.openIndex >= 0) {\n        const prevIndex = (this.openIndex - 1 + this.items.length) % this.items.length\n        this.openMenu(prevIndex)\n      }\n      return\n    }\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      if (this.openIndex >= 0) {\n        const count = this.getNavigableItemCount()\n        if (count > 0) {\n          this.activeItemIndex = Math.min(this.activeItemIndex + 1, count - 1)\n          this.highlightActiveItem()\n        }\n      }\n      return\n    }\n\n    if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      if (this.openIndex >= 0) {\n        this.activeItemIndex = Math.max(this.activeItemIndex - 1, 0)\n        this.highlightActiveItem()\n      }\n      return\n    }\n\n    if (e.key === 'Home') {\n      e.preventDefault()\n      if (this.openIndex >= 0) {\n        this.activeItemIndex = 0\n        this.highlightActiveItem()\n      }\n      return\n    }\n\n    if (e.key === 'End') {\n      e.preventDefault()\n      if (this.openIndex >= 0) {\n        const count = this.getNavigableItemCount()\n        this.activeItemIndex = Math.max(0, count - 1)\n        this.highlightActiveItem()\n      }\n      return\n    }\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      if (this.openIndex >= 0 && this.activeItemIndex >= 0 && this.dropdownEl) {\n        e.preventDefault()\n        const menuItems = this.dropdownEl.querySelectorAll<HTMLElement>(\n          '.cmm-menubar__item:not(.cmm-menubar__item--disabled)'\n        )\n        const activeEl = menuItems[this.activeItemIndex]\n        if (activeEl) {\n          activeEl.click()\n        }\n      }\n    }\n  }\n\n  /** Render the full menubar */\n  private render(): void {\n    this.container.innerHTML = ''\n\n    const bar = document.createElement('div')\n    bar.className = 'cmm-menubar'\n    bar.id = this.menubarId\n    bar.setAttribute('role', 'menubar')\n\n    if (this.className) {\n      bar.classList.add(this.className)\n    }\n\n    for (let i = 0; i < this.items.length; i++) {\n      const menuItem = this.items[i]\n      if (!menuItem) {\n        continue\n      }\n\n      const trigger = document.createElement('button')\n      trigger.className = 'cmm-menubar__trigger'\n      trigger.type = 'button'\n      trigger.textContent = menuItem.label\n      trigger.setAttribute('aria-haspopup', 'true')\n      trigger.setAttribute('aria-expanded', 'false')\n\n      const index = i\n      trigger.addEventListener('click', (e: MouseEvent) => {\n        e.stopPropagation()\n        if (this.openIndex === index) {\n          this.closeMenu()\n        } else {\n          this.openMenu(index)\n        }\n      })\n\n      trigger.addEventListener('mouseenter', () => {\n        if (this.openIndex >= 0 && this.openIndex !== index) {\n          this.openMenu(index)\n        }\n      })\n\n      bar.appendChild(trigger)\n    }\n\n    this.container.appendChild(bar)\n    this.barEl = bar\n  }\n}\n"],"mappings":"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"}

package/dist/navigation/menubar/types.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Menubar type definitions
+ * @countermeasure/web-components/navigation/menubar
+ */
+export interface MenuItem {
+    type: 'item' | 'separator' | 'checkbox' | 'radio';
+    label?: string;
+    icon?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    children?: MenuItem[];
+    onSelect?: () => void;
+}
+export interface MenubarItem {
+    label: string;
+    children: MenuItem[];
+}
+export interface MenubarConfig {
+    container: HTMLElement | string;
+    items: MenubarItem[];
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map