@reliability-design/web 1.1.1 → 1.3.0

package/dist/components/rel-menubar/rel-menubar.ts

@@ -1,605 +1,603 @@
-import { LitElement, html, css } from "lit";
-import { customElement, state, query } from "lit/decorators.js";
-import { RelMenubarMenu } from "./rel-menubar-menu";
-import "@reliability-design/icons/rel-icon";
-import "../rel-checkbox/rel-checkbox";
-
-interface MenuState {
-  menu: RelMenubarMenu;
-  open: boolean;
-  panelElement?: HTMLElement;
-}
-
-@customElement("rel-menubar")
-export class RelMenubar extends LitElement {
-  @state() private menus: MenuState[] = [];
-  @state() private openMenuIndex: number = -1;
-  @state() private focusedTriggerIndex: number = 0;
-  @state() private focusedItemIndex: number = 0;
-  @state() private openSubmenuElement: HTMLElement | null = null;
-
-  @query(".menubar-container") private container!: HTMLElement;
-
-  private hoverSwitchEnabled = false;
-
-  static styles = css`
-    :host {
-      display: block;
-    }
-
-    .menubar-container {
-      display: flex;
-      align-items: center;
-      background: var(--rel-colors-gray-light);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      padding: var(--rel-spacing-space-3xs);
-      gap: var(--rel-spacing-space-3xs);
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-sm);
-    }
-
-    .menubar-trigger {
-      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-sm);
-      border-radius: var(--rel-borders-radius-border-radius-100);
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      font-family: inherit;
-      font-size: inherit;
-      color: var(--rel-colors-gray-heading);
-      transition: background 0.15s ease;
-      user-select: none;
-      outline: none;
-    }
-
-    .menubar-trigger:hover {
-      background: var(--rel-color-bg-hover);
-    }
-
-    .menubar-trigger:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
-      outline-offset: 2px;
-    }
-
-    .menubar-trigger.active {
-      background: var(--rel-color-bg-hover);
-    }
-
-    .menubar-panel {
-      position: fixed;
-      min-width: 220px;
-      background: var(--rel-color-bg-primary);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      box-shadow: var(--rel-shadows-shadow-300);
-      padding: var(--rel-spacing-space-2xs) 0;
-      z-index: 1000;
-      display: none;
-    }
-
-    .menubar-panel.open {
-      display: block;
-    }
-
-    .menu-item {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--rel-spacing-space-sm);
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);
-      cursor: pointer;
-      transition: background 0.15s ease;
-      user-select: none;
-      color: var(--rel-colors-gray-heading);
-      line-height: var(--rel-lineHeights-sm);
-    }
-
-    .menu-item:hover,
-    .menu-item.focused {
-      background: var(--rel-color-bg-hover);
-    }
-
-    .menu-item[data-disabled="true"] {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .menu-separator {
-      height: var(--rel-borders-width-stroke-100);
-      background: var(--rel-colors-gray-divider);
-      margin: var(--rel-spacing-space-2xs) var(--rel-spacing-space-xs);
-    }
-
-    .menu-checkbox,
-    .menu-radio-item {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-space-xs);
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);
-      cursor: pointer;
-      transition: background 0.15s ease;
-      user-select: none;
-      color: var(--rel-colors-gray-heading);
-      line-height: var(--rel-lineHeights-sm);
-    }
-
-    .menu-checkbox:hover,
-    .menu-checkbox.focused,
-    .menu-radio-item:hover,
-    .menu-radio-item.focused {
-      background: var(--rel-color-bg-hover);
-    }
-
-    .menu-checkbox rel-checkbox,
-    .menu-radio-item::before {
-      margin: 0;
-    }
-
-    :host-context([data-theme="dark"]) rel-checkbox,
-    :host-context(.dark) rel-checkbox {
-      color: var(--rel-color-text-primary);
-    }
-
-    rel-icon {
-      display: inline-flex;
-      pointer-events: none;
-    }
-
-    .menu-radio-item {
-      position: relative;
-      padding-left: calc(var(--rel-spacing-space-md) + var(--rel-spacing-space-md));
-    }
-
-    .menu-radio-item::before {
-      content: "";
-      position: absolute;
-      left: var(--rel-spacing-space-md);
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      border: var(--rel-borders-width-stroke-150) solid var(--rel-colors-gray-border);
-      background: var(--rel-colors-white);
-    }
-
-    .menu-radio-item.checked::after {
-      content: "";
-      position: absolute;
-      left: calc(var(--rel-spacing-space-md) + 3px);
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: var(--rel-colors-blue-primary);
-    }
-
-    .menu-submenu-trigger {
-      position: relative;
-    }
-
-    .menu-submenu-trigger rel-icon {
-      opacity: 0.6;
-    }
-
-    .submenu-panel {
-      position: fixed;
-      min-width: 200px;
-      background: var(--rel-color-bg-primary);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
-      border-radius: var(--rel-borders-radius-border-radius-200);
-      box-shadow: var(--rel-shadows-shadow-300);
-      padding: var(--rel-spacing-space-2xs) 0;
-      z-index: 1001;
-      display: none;
-    }
-
-    .submenu-panel.open {
-      display: block;
-    }
-
-    .menu-shortcut {
-      opacity: 0.6;
-      font-size: var(--rel-fontSizes-xs);
-      margin-left: auto;
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-space-3xs);
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.discoverMenus();
-    document.addEventListener("click", this.handleOutsideClick);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("click", this.handleOutsideClick);
-  }
-
-  private discoverMenus() {
-    const menuElements = Array.from(
-      this.querySelectorAll("rel-menubar-menu")
-    ) as RelMenubarMenu[];
-    this.menus = menuElements.map((menu) => ({ menu, open: false }));
-  }
-
-  private handleOutsideClick = (e: MouseEvent) => {
-    const path = e.composedPath() as HTMLElement[];
-    const isInside = path.some(
-      (el) =>
-        el === this ||
-        el.classList?.contains("menubar-panel") ||
-        el.classList?.contains("submenu-panel")
-    );
-    if (!isInside) {
-      this.closeAllMenus();
-    }
-  };
-
-  private closeAllMenus() {
-    this.openMenuIndex = -1;
-    this.openSubmenuElement = null;
-    this.hoverSwitchEnabled = false;
-    this.requestUpdate();
-  }
-
-  private openMenu(index: number, triggerElement: HTMLElement) {
-    this.openMenuIndex = index;
-    this.focusedItemIndex = 0;
-    this.openSubmenuElement = null;
-    this.requestUpdate();
-
-    // Position the panel below the trigger
-    this.updateComplete.then(() => {
-      const panel = this.shadowRoot?.querySelector(
-        `.menubar-panel[data-menu-index="${index}"]`
-      ) as HTMLElement;
-      if (panel && triggerElement) {
-        const rect = triggerElement.getBoundingClientRect();
-        panel.style.top = `${rect.bottom + 4}px`;
-        panel.style.left = `${rect.left}px`;
-      }
-    });
-  }
-
-  private handleTriggerClick(index: number, event: Event) {
-    const target = event.currentTarget as HTMLElement;
-    if (this.openMenuIndex === index) {
-      this.closeAllMenus();
-    } else {
-      this.openMenu(index, target);
-      this.hoverSwitchEnabled = true;
-    }
-  }
-
-  private handleTriggerMouseEnter(index: number, event: Event) {
-    if (this.openMenuIndex !== -1 && this.hoverSwitchEnabled) {
-      const target = event.currentTarget as HTMLElement;
-      this.openMenu(index, target);
-    }
-  }
-
-  private handleTriggerKeyDown(event: KeyboardEvent) {
-    const { key } = event;
-
-    if (key === "ArrowRight") {
-      event.preventDefault();
-      this.focusedTriggerIndex = Math.min(
-        this.menus.length - 1,
-        this.focusedTriggerIndex + 1
-      );
-      this.focusTrigger(this.focusedTriggerIndex);
-    } else if (key === "ArrowLeft") {
-      event.preventDefault();
-      this.focusedTriggerIndex = Math.max(0, this.focusedTriggerIndex - 1);
-      this.focusTrigger(this.focusedTriggerIndex);
-    } else if (key === "Enter" || key === " ") {
-      event.preventDefault();
-      const trigger = this.shadowRoot?.querySelector(
-        `.menubar-trigger[data-index="${this.focusedTriggerIndex}"]`
-      ) as HTMLElement;
-      if (trigger) {
-        this.openMenu(this.focusedTriggerIndex, trigger);
-        this.updateComplete.then(() => {
-          const focusTarget = this.shadowRoot?.querySelector<HTMLElement>(
-            "[autofocus], [role='menuitem']"
-          );
-          if (focusTarget) {
-            focusTarget.focus();
-          } else {
-            this.focusMenuItem(0);
-          }
-        });
-      }
-    } else if (key === "ArrowDown" && this.openMenuIndex !== -1) {
-      event.preventDefault();
-      this.focusMenuItem(0);
-    }
-  }
-
-  private focusTrigger(index: number) {
-    const trigger = this.shadowRoot?.querySelector(
-      `.menubar-trigger[data-index="${index}"]`
-    ) as HTMLElement;
-    trigger?.focus();
-  }
-
-  private handlePanelKeyDown(event: KeyboardEvent) {
-    const { key } = event;
-    const menuContent = this.menus[this.openMenuIndex]?.menu;
-    if (!menuContent) return;
-
-    const items = this.getFocusableItems(menuContent);
-
-    if (key === "ArrowDown") {
-      event.preventDefault();
-      this.focusedItemIndex = Math.min(items.length - 1, this.focusedItemIndex + 1);
-      this.requestUpdate();
-    } else if (key === "ArrowUp") {
-      event.preventDefault();
-      this.focusedItemIndex = Math.max(0, this.focusedItemIndex - 1);
-      this.requestUpdate();
-    } else if (key === "ArrowRight") {
-      event.preventDefault();
-      const currentItem = items[this.focusedItemIndex];
-      if (currentItem?.hasAttribute("data-submenu")) {
-        this.openSubmenu(currentItem as HTMLElement);
-      }
-    } else if (key === "ArrowLeft") {
-      event.preventDefault();
-      if (this.openSubmenuElement) {
-        this.openSubmenuElement = null;
-        this.requestUpdate();
-      }
-    } else if (key === "Escape") {
-      event.preventDefault();
-      this.closeAllMenus();
-      this.focusTrigger(this.openMenuIndex);
-    } else if (key === "Enter" || key === " ") {
-      event.preventDefault();
-      const currentItem = items[this.focusedItemIndex];
-      if (currentItem) {
-        this.handleItemClick(currentItem as HTMLElement);
-      }
-    }
-  }
-
-  private getFocusableItems(menuContent: RelMenubarMenu): Element[] {
-    return Array.from(menuContent.children).filter(
-      (el) =>
-        el.hasAttribute("data-item") ||
-        el.hasAttribute("data-checkbox") ||
-        el.hasAttribute("data-radio") ||
-        el.hasAttribute("data-submenu")
-    );
-  }
-
-  private focusMenuItem(index: number) {
-    this.focusedItemIndex = index;
-    const panel = this.shadowRoot?.querySelector(
-      `.menubar-panel[data-menu-index="${this.openMenuIndex}"]`
-    ) as HTMLElement;
-    panel?.focus();
-  }
-
-  private handleItemClick(item: HTMLElement) {
-    if (item.hasAttribute("data-checkbox")) {
-      // Toggle is handled by rel-checkbox @rel-change; nothing to do here
-    } else if (item.hasAttribute("data-radio")) {
-      const radioGroup = item.closest("[data-radio-group]") as HTMLElement;
-      const value = item.getAttribute("data-radio") || item.getAttribute("value") || "";
-      const name = radioGroup?.getAttribute("name") || "";
-
-      // Update visual state
-      const allRadios = radioGroup?.querySelectorAll("[data-radio]");
-      allRadios?.forEach((radio) => radio.removeAttribute("data-checked"));
-      item.setAttribute("data-checked", "true");
-
-      // Update internal value
-      if (radioGroup) {
-        radioGroup.setAttribute("value", value);
-      }
-
-      this.dispatchChangeEvent("radio", name, value);
-      this.requestUpdate();
-    } else if (item.hasAttribute("data-submenu")) {
-      this.openSubmenu(item);
-    } else {
-      // Regular item click
-      this.closeAllMenus();
-    }
-  }
-
-  private openSubmenu(submenuTrigger: HTMLElement, renderedTrigger?: HTMLElement) {
-    this.openSubmenuElement = submenuTrigger;
-    this.requestUpdate();
-
-    this.updateComplete.then(() => {
-      const submenuPanel = this.shadowRoot?.querySelector(
-        `.submenu-panel[data-submenu-id="${submenuTrigger.getAttribute("data-submenu") || ""}"]`
-      ) as HTMLElement;
-      if (submenuPanel) {
-        // Use the rendered shadow-DOM element for getBoundingClientRect() —
-        // the light-DOM submenuTrigger is in a display:none slot and returns {0,0,0,0}.
-        const positionTarget = renderedTrigger ?? submenuTrigger;
-        const rect = positionTarget.getBoundingClientRect();
-        submenuPanel.style.top = `${rect.top}px`;
-        submenuPanel.style.left = `${rect.right + 4}px`;
-      }
-    });
-  }
-
-  private handleSubmenuItemClick(item: HTMLElement) {
-    // Regular item - just close
-    this.closeAllMenus();
-  }
-
-  private dispatchChangeEvent(type: "checkbox" | "radio", labelOrName: string, value: string | boolean) {
-    const detail =
-      type === "checkbox"
-        ? { type, label: labelOrName, name: "", checked: value as boolean }
-        : { type, label: "", name: labelOrName, value: value as string };
-    this.dispatchEvent(
-      new CustomEvent("rel-menubar-change", {
-        detail,
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private renderMenuItem(item: Element, index: number): any {
-    const isFocused = index === this.focusedItemIndex;
-
-    if (item.hasAttribute("data-item")) {
-      const button = item as HTMLButtonElement;
-      const disabled = button.disabled;
-      const shortcut = button.getAttribute("data-shortcut") || "";
-
-      return html`
-        <div
-          class="menu-item ${isFocused ? "focused" : ""}"
-          data-disabled="${disabled}"
-          @click="${() => !disabled && this.handleItemClick(item as HTMLElement)}"
-        >
-          <span>${button.textContent}</span>
-          ${shortcut ? html`<span class="menu-shortcut">${shortcut}</span>` : ""}
-        </div>
-      `;
-    }
-
-    if (item.hasAttribute("data-separator")) {
-      return html`<div class="menu-separator"></div>`;
-    }
-
-    if (item.hasAttribute("data-checkbox")) {
-      const label = item as HTMLLabelElement;
-      const checkbox = label.querySelector('input[type="checkbox"]') as HTMLInputElement;
-
-      return html`
-        <label
-          class="menu-checkbox ${isFocused ? "focused" : ""}"
-          @click="${(e: Event) => {
-            e.preventDefault();
-            this.handleItemClick(item as HTMLElement);
-          }}"
-        >
-          <rel-checkbox
-            .checked="${checkbox?.checked || false}"
-            @click="${(e: Event) => e.stopPropagation()}"
-            @rel-change="${(e: CustomEvent) => {
-              if (checkbox) checkbox.checked = e.detail.checked;
-              this.dispatchChangeEvent("checkbox", label.textContent?.replace(/\s+/g, " ").trim() || "", e.detail.checked);
-            }}"
-          ></rel-checkbox>
-          <span>${label.textContent?.replace(/\s+/g, " ").trim()}</span>
-        </label>
-      `;
-    }
-
-    if (item.hasAttribute("data-submenu")) {
-      const label = item.getAttribute("label") || item.textContent?.trim() || "";
-      const submenuId = item.getAttribute("data-submenu") || label;
-
-      return html`
-        <div
-          class="menu-item menu-submenu-trigger ${isFocused ? "focused" : ""}"
-          @click="${(e: Event) => this.openSubmenu(item as HTMLElement, e.currentTarget as HTMLElement)}"
-          @mouseenter="${(e: Event) => this.openSubmenu(item as HTMLElement, e.currentTarget as HTMLElement)}"
-        >
-          <span>${label}</span>
-          <rel-icon name="chevron-right"></rel-icon>
-        </div>
-        ${this.renderSubmenu(item as HTMLElement, submenuId)}
-      `;
-    }
-
-    if (item.hasAttribute("data-radio-group")) {
-      const radioButtons = Array.from(item.querySelectorAll("[data-radio]"));
-      const currentValue = item.getAttribute("value") || "";
-
-      return html`
-        ${radioButtons.map((radio) => {
-          const value = radio.getAttribute("data-radio") || radio.getAttribute("value") || "";
-          const isChecked = value === currentValue || radio.hasAttribute("data-checked");
-          const text = radio.textContent?.trim() || "";
-
-          return html`
-            <div
-              class="menu-radio-item ${isChecked ? "checked" : ""} ${isFocused ? "focused" : ""}"
-              @click="${() => this.handleItemClick(radio as HTMLElement)}"
-            >
-              <span>${text}</span>
-            </div>
-          `;
-        })}
-      `;
-    }
-
-    return null;
-  }
-
-  private renderSubmenu(submenuElement: HTMLElement, submenuId: string) {
-    const isOpen = this.openSubmenuElement === submenuElement;
-    const submenuItems = Array.from(submenuElement.children);
-
-    return html`
-      <div class="submenu-panel ${isOpen ? "open" : ""}" data-submenu-id="${submenuId}">
-        ${submenuItems.map((subItem) => {
-          if (subItem.hasAttribute("data-item")) {
-            const button = subItem as HTMLButtonElement;
-            return html`
-              <div
-                class="menu-item"
-                @click="${() => this.handleSubmenuItemClick(subItem as HTMLElement)}"
-              >
-                <span>${button.textContent}</span>
-              </div>
-            `;
-          }
-          return null;
-        })}
-      </div>
-    `;
-  }
-
-  private renderMenuPanel(menuState: MenuState, index: number) {
-    const isOpen = index === this.openMenuIndex;
-    const items = Array.from(menuState.menu.children);
-
-    return html`
-      <div
-        class="menubar-panel ${isOpen ? "open" : ""}"
-        data-menu-index="${index}"
-        tabindex="-1"
-        @keydown="${this.handlePanelKeyDown}"
-      >
-        ${items.map((item, idx) => this.renderMenuItem(item, idx))}
-      </div>
-    `;
-  }
-
-  render() {
-    return html`
-      <div class="menubar-container">
-        ${this.menus.map(
-          (menuState, index) => html`
-            <button
-              class="menubar-trigger ${index === this.openMenuIndex ? "active" : ""}"
-              data-index="${index}"
-              @click="${(e: Event) => this.handleTriggerClick(index, e)}"
-              @mouseenter="${(e: Event) => this.handleTriggerMouseEnter(index, e)}"
-              @keydown="${this.handleTriggerKeyDown}"
-            >
-              ${menuState.menu.label}
-            </button>
-          `
-        )}
-      </div>
-      ${this.menus.map((menuState, index) => this.renderMenuPanel(menuState, index))}
-      <slot style="display: none;"></slot>
-    `;
-  }
-}
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { RelMenubarMenu } from "./rel-menubar-menu";
+import "@reliability-design/icons/rel-icon";
+import "../rel-checkbox/rel-checkbox.js";
+import "../rel-radio/rel-radio.js";
+import "../../styles/vars-v2.css";
+
+interface MenuState {
+  menu: RelMenubarMenu;
+  open: boolean;
+  panelElement?: HTMLElement;
+}
+
+@customElement("rel-menubar")
+export class RelMenubar extends LitElement {
+  @state() private menus: MenuState[] = [];
+  @state() private openMenuIndex: number = -1;
+  @state() private focusedTriggerIndex: number = 0;
+  @state() private focusedItemIndex: number = -1;
+  @state() private openSubmenuElement: HTMLElement | null = null;
+
+  private hoverSwitchEnabled = false;
+  private _onScroll?: () => void;
+
+  public static readonly _css = `
+    :host {
+      display: block;
+    }
+
+    :host > slot {
+      display: none;
+    }
+
+    .menubar-container {
+      display: flex;
+      align-items: stretch;
+      background: var(--rel-color-bg-secondary);
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      overflow: hidden;
+      padding: 0;
+      gap: var(--rel-spacing-space-3xs);
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-sm);
+      height: 40px;
+      width: fit-content;
+    }
+
+    .menubar-trigger {
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+      height: 100%;
+      padding: 0 var(--rel-spacing-space-sm);
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: inherit;
+      color: var(--rel-color-text-heading);
+      transition: background 0.15s ease;
+      user-select: none;
+      outline: none;
+    }
+
+    .menubar-trigger:hover,
+    .menubar-trigger.active {
+      background: var(--rel-color-bg-selected);
+    }
+
+    .menubar-trigger:focus-visible {
+      outline: 2px solid var(--rel-color-border-focus);
+      outline-offset: 2px;
+    }
+
+    .menubar-panel {
+      position: fixed;
+      min-width: 220px;
+      background: var(--rel-color-bg-primary);
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      box-shadow: var(--rel-shadows-shadow-300);
+      padding: 0;
+      overflow: hidden;
+      z-index: 1000;
+      display: none;
+    }
+
+    .menubar-panel.open {
+      display: block;
+    }
+
+    .menu-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--rel-spacing-space-sm);
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);
+      cursor: pointer;
+      transition: background 0.15s ease;
+      user-select: none;
+      color: var(--rel-color-text-heading);
+      line-height: var(--rel-lineHeights-sm);
+    }
+
+    .menu-item:hover,
+    .menu-item.focused {
+      background: var(--rel-color-bg-selected);
+    }
+
+    .menu-item[data-disabled="true"] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .menu-separator {
+      height: var(--rel-borders-width-stroke-100);
+      background: var(--rel-color-border-divider);
+      margin: 0;
+      padding: 0;
+    }
+
+    rel-icon {
+      display: inline-flex;
+      pointer-events: none;
+    }
+
+    .menu-submenu-trigger {
+      position: relative;
+    }
+
+    .menu-submenu-trigger rel-icon {
+      opacity: 0.6;
+    }
+
+    .submenu-panel {
+      position: fixed;
+      min-width: 200px;
+      background: var(--rel-color-bg-primary);
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      box-shadow: var(--rel-shadows-shadow-300);
+      padding: 0;
+      overflow: hidden;
+      z-index: 1001;
+      display: none;
+    }
+
+    .submenu-panel.open {
+      display: block;
+    }
+
+    .menu-shortcut {
+      opacity: 0.6;
+      font-size: var(--rel-fontSizes-xs);
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-3xs);
+    }
+
+    .menubar-panel rel-checkbox {
+      display: block;
+      width: 100%;
+      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-md, 16px);
+      box-sizing: border-box;
+      cursor: pointer;
+    }
+  `;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.discoverMenus();
+    document.addEventListener("click", this.handleOutsideClick);
+    this._onScroll = () => {
+      this._repositionOpenMenu();
+      this._repositionOpenSubmenu();
+    };
+    window.addEventListener('scroll', this._onScroll, { passive: true, capture: true });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.handleOutsideClick);
+    if (this._onScroll) {
+      window.removeEventListener('scroll', this._onScroll, { capture: true });
+    }
+  }
+
+  private _repositionOpenSubmenu() {
+    if (!this.openSubmenuElement) return;
+    const submenuPanel = this.querySelector('.submenu-panel.open') as HTMLElement;
+    if (!submenuPanel) return;
+    const trigger = this.querySelector('.menu-submenu-trigger.focused, .menu-submenu-trigger:hover') as HTMLElement
+      ?? submenuPanel.previousElementSibling as HTMLElement;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    submenuPanel.style.top = `${rect.top}px`;
+    submenuPanel.style.left = `${rect.right + 4}px`;
+  }
+
+  private _repositionOpenMenu() {
+    if (this.openMenuIndex === -1) return;
+    const triggers = this.querySelectorAll('.menubar-trigger');
+    const trigger = triggers[this.openMenuIndex] as HTMLElement;
+    const panel = this.querySelector(`.menubar-panel[data-menu-index="${this.openMenuIndex}"]`) as HTMLElement;
+    if (!trigger || !panel) return;
+    const rect = trigger.getBoundingClientRect();
+    panel.style.top = `${rect.bottom + 4}px`;
+    panel.style.left = `${rect.left}px`;
+  }
+
+  private discoverMenus() {
+    const menuElements = Array.from(
+      this.querySelectorAll("rel-menubar-menu")
+    ) as RelMenubarMenu[];
+    this.menus = menuElements.map((menu) => ({ menu, open: false }));
+  }
+
+  private handleOutsideClick = (e: MouseEvent) => {
+    if (!this.contains(e.target as Node)) {
+      this.closeAllMenus();
+    }
+  };
+
+  private closeAllMenus() {
+    this.openMenuIndex = -1;
+    this.openSubmenuElement = null;
+    this.hoverSwitchEnabled = false;
+    this.requestUpdate();
+  }
+
+  private openMenu(index: number, triggerElement: HTMLElement) {
+    this.openMenuIndex = index;
+    this.focusedItemIndex = -1;
+    this.openSubmenuElement = null;
+    this.requestUpdate();
+
+    // Position the panel below the trigger
+    this.updateComplete.then(() => {
+      const panel = this.querySelector(
+        `.menubar-panel[data-menu-index="${index}"]`
+      ) as HTMLElement;
+      if (panel && triggerElement) {
+        const rect = triggerElement.getBoundingClientRect();
+        panel.style.top = `${rect.bottom + 4}px`;
+        panel.style.left = `${rect.left}px`;
+      }
+    });
+  }
+
+  private handleTriggerClick(index: number, event: Event) {
+    const target = event.currentTarget as HTMLElement;
+    if (this.openMenuIndex === index) {
+      this.closeAllMenus();
+    } else {
+      this.openMenu(index, target);
+      this.hoverSwitchEnabled = true;
+    }
+  }
+
+  private handleTriggerMouseEnter(index: number, event: Event) {
+    if (this.openMenuIndex !== -1 && this.hoverSwitchEnabled) {
+      const target = event.currentTarget as HTMLElement;
+      this.openMenu(index, target);
+    }
+  }
+
+  private handleTriggerKeyDown(event: KeyboardEvent) {
+    const { key } = event;
+
+    if (key === "ArrowRight") {
+      event.preventDefault();
+      this.focusedTriggerIndex = Math.min(
+        this.menus.length - 1,
+        this.focusedTriggerIndex + 1
+      );
+      this.focusTrigger(this.focusedTriggerIndex);
+    } else if (key === "ArrowLeft") {
+      event.preventDefault();
+      this.focusedTriggerIndex = Math.max(0, this.focusedTriggerIndex - 1);
+      this.focusTrigger(this.focusedTriggerIndex);
+    } else if (key === "Enter" || key === " ") {
+      event.preventDefault();
+      const trigger = this.querySelector(
+        `.menubar-trigger[data-index="${this.focusedTriggerIndex}"]`
+      ) as HTMLElement;
+      if (trigger) {
+        this.openMenu(this.focusedTriggerIndex, trigger);
+        this.updateComplete.then(() => {
+          const focusTarget = this.querySelector<HTMLElement>(
+            "[autofocus], [role='menuitem']"
+          );
+          if (focusTarget) {
+            focusTarget.focus();
+          } else {
+            this.focusMenuItem(0);
+          }
+        });
+      }
+    } else if (key === "ArrowDown" && this.openMenuIndex !== -1) {
+      event.preventDefault();
+      this.focusMenuItem(0);
+    }
+  }
+
+  private focusTrigger(index: number) {
+    const trigger = this.querySelector(
+      `.menubar-trigger[data-index="${index}"]`
+    ) as HTMLElement;
+    trigger?.focus();
+  }
+
+  private handlePanelKeyDown(event: KeyboardEvent) {
+    const { key } = event;
+    const menuContent = this.menus[this.openMenuIndex]?.menu;
+    if (!menuContent) return;
+
+    const items = this.getFocusableItems(menuContent);
+
+    if (key === "ArrowDown") {
+      event.preventDefault();
+      this.focusedItemIndex = Math.min(items.length - 1, this.focusedItemIndex + 1);
+      this.requestUpdate();
+    } else if (key === "ArrowUp") {
+      event.preventDefault();
+      this.focusedItemIndex = Math.max(0, this.focusedItemIndex - 1);
+      this.requestUpdate();
+    } else if (key === "ArrowRight") {
+      event.preventDefault();
+      const currentItem = items[this.focusedItemIndex];
+      if (currentItem?.hasAttribute("data-submenu")) {
+        this.openSubmenu(currentItem as HTMLElement);
+      }
+    } else if (key === "ArrowLeft") {
+      event.preventDefault();
+      if (this.openSubmenuElement) {
+        this.openSubmenuElement = null;
+        this.requestUpdate();
+      }
+    } else if (key === "Escape") {
+      event.preventDefault();
+      this.closeAllMenus();
+      this.focusTrigger(this.openMenuIndex);
+    } else if (key === "Enter" || key === " ") {
+      event.preventDefault();
+      const currentItem = items[this.focusedItemIndex];
+      if (currentItem) {
+        this.handleItemClick(currentItem as HTMLElement);
+      }
+    }
+  }
+
+  private getFocusableItems(menuContent: RelMenubarMenu): Element[] {
+    return Array.from(menuContent.children).filter(
+      (el) =>
+        el.hasAttribute("data-item") ||
+        el.hasAttribute("data-checkbox") ||
+        el.hasAttribute("data-radio") ||
+        el.hasAttribute("data-submenu")
+    );
+  }
+
+  private focusMenuItem(index: number) {
+    this.focusedItemIndex = index;
+    const panel = this.querySelector(
+      `.menubar-panel[data-menu-index="${this.openMenuIndex}"]`
+    ) as HTMLElement;
+    panel?.focus();
+  }
+
+  private handleItemClick(item: HTMLElement) {
+    if (item.hasAttribute("data-checkbox")) {
+      const checkbox = item.querySelector('input[type="checkbox"]') as HTMLInputElement;
+      const labelText = Array.from(item.childNodes)
+        .filter(n => n.nodeType === Node.TEXT_NODE)
+        .map(n => n.textContent?.trim())
+        .filter(Boolean)
+        .join(' ') || item.getAttribute('label') || '';
+      if (checkbox) {
+        checkbox.checked = !checkbox.checked;
+        this.dispatchChangeEvent("checkbox", labelText, checkbox.checked);
+        this.requestUpdate();
+      }
+    } else if (item.hasAttribute("data-radio")) {
+      const radioGroup = item.closest("[data-radio-group]") as HTMLElement;
+      const value = item.getAttribute("data-radio") || item.getAttribute("value") || "";
+      const name = radioGroup?.getAttribute("name") || "";
+
+      // Update visual state
+      const allRadios = radioGroup?.querySelectorAll("[data-radio]");
+      allRadios?.forEach((radio) => radio.removeAttribute("data-checked"));
+      item.setAttribute("data-checked", "true");
+
+      // Update internal value
+      if (radioGroup) {
+        radioGroup.setAttribute("value", value);
+      }
+
+      this.dispatchChangeEvent("radio", name, value);
+      this.requestUpdate();
+    } else if (item.hasAttribute("data-submenu")) {
+      this.openSubmenu(item);
+    } else {
+      // Regular item click
+      this.closeAllMenus();
+    }
+  }
+
+  private openSubmenu(submenuTrigger: HTMLElement, renderedTrigger?: HTMLElement, submenuIndex?: number) {
+    this.openSubmenuElement = submenuTrigger;
+    this.requestUpdate();
+
+    this.updateComplete.then(() => {
+      const submenuId = `submenu-${submenuIndex ?? 0}`;
+      const submenuPanel = this.querySelector(
+        `.submenu-panel[data-submenu-id="${submenuId}"]`
+      ) as HTMLElement;
+      if (submenuPanel) {
+        const positionTarget = renderedTrigger ?? submenuTrigger;
+        const rect = positionTarget.getBoundingClientRect();
+        submenuPanel.style.top = `${rect.top}px`;
+        submenuPanel.style.left = `${rect.right + 4}px`;
+      }
+    });
+  }
+
+  private handleSubmenuItemClick(_item: HTMLElement) {
+    // Regular item - just close
+    this.closeAllMenus();
+  }
+
+  private dispatchChangeEvent(type: "checkbox" | "radio", labelOrName: string, value: string | boolean) {
+    const detail =
+      type === "checkbox"
+        ? { type, label: labelOrName, name: "", checked: value as boolean }
+        : { type, label: "", name: labelOrName, value: value as string };
+    this.dispatchEvent(
+      new CustomEvent("rel-menubar-change", {
+        detail,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private renderMenuItem(item: Element, index: number): any {
+    const isFocused = index === this.focusedItemIndex;
+
+    if (item.hasAttribute("data-item")) {
+      const button = item as HTMLButtonElement;
+      const disabled = button.disabled;
+      const shortcut = button.getAttribute("data-shortcut") || "";
+
+      return html`
+        <div
+          class="menu-item ${isFocused ? "focused" : ""}"
+          data-disabled="${disabled}"
+          @click="${() => !disabled && this.handleItemClick(item as HTMLElement)}"
+        >
+          <span>${button.textContent}</span>
+          ${shortcut ? html`<span class="menu-shortcut">${shortcut}</span>` : ""}
+        </div>
+      `;
+    }
+
+    if (item.hasAttribute("data-separator")) {
+      return html`<div class="menu-separator"></div>`;
+    }
+
+    if (item.hasAttribute("data-checkbox")) {
+      const label = item as HTMLLabelElement;
+      const checkbox = label.querySelector('input[type="checkbox"]') as HTMLInputElement;
+      const labelText = Array.from(label.childNodes)
+        .filter(n => n.nodeType === Node.TEXT_NODE)
+        .map(n => n.textContent?.trim())
+        .filter(Boolean)
+        .join(' ') || label.getAttribute('label') || '';
+
+      return html`
+        <rel-checkbox
+          label=${labelText}
+          .status=${checkbox?.checked ? "checked" : "unchecked"}
+          @rel-change=${(e: CustomEvent) => {
+            if (checkbox) checkbox.checked = e.detail.checked;
+            this.dispatchChangeEvent("checkbox", labelText, e.detail.checked);
+          }}
+        ></rel-checkbox>
+      `;
+    }
+
+    if (item.hasAttribute("data-submenu")) {
+      const label = item.getAttribute("label") || item.textContent?.trim() || "";
+      const submenuId = `submenu-${index}`;
+
+      return html`
+        <div
+          class="menu-item menu-submenu-trigger ${isFocused ? "focused" : ""}"
+          @click="${(e: Event) => this.openSubmenu(item as HTMLElement, e.currentTarget as HTMLElement, index)}"
+          @mouseenter="${(e: Event) => this.openSubmenu(item as HTMLElement, e.currentTarget as HTMLElement, index)}"
+        >
+          <span>${label}</span>
+          <rel-icon name="chevron-right"></rel-icon>
+        </div>
+        ${this.renderSubmenu(item as HTMLElement, submenuId)}
+      `;
+    }
+
+    if (item.hasAttribute("data-radio-group")) {
+      const radioButtons = Array.from(item.querySelectorAll("[data-radio]"));
+      const currentValue = item.getAttribute("value") || "";
+      const groupName = item.getAttribute("name") || "";
+
+      const options = radioButtons.map(radio => ({
+        label: radio.textContent?.trim() || "",
+        value: radio.getAttribute("data-radio") || radio.getAttribute("value") || "",
+      }));
+
+      return html`
+        <rel-radio
+          .options=${options}
+          .value=${currentValue}
+          @rel-change=${(e: CustomEvent) => {
+            const newValue = e.detail.value;
+            item.setAttribute("value", newValue);
+            this.dispatchChangeEvent("radio", groupName, newValue);
+          }}
+        ></rel-radio>
+      `;
+    }
+
+    return null;
+  }
+
+  private renderSubmenu(submenuElement: HTMLElement, submenuId: string) {
+    const isOpen = this.openSubmenuElement === submenuElement;
+    const submenuItems = Array.from(submenuElement.children);
+
+    return html`
+      <div class="submenu-panel ${isOpen ? "open" : ""}" data-submenu-id="${submenuId}">
+        ${submenuItems.map((subItem) => {
+          if (subItem.hasAttribute("data-item")) {
+            const button = subItem as HTMLButtonElement;
+            return html`
+              <div
+                class="menu-item"
+                @click="${() => this.handleSubmenuItemClick(subItem as HTMLElement)}"
+              >
+                <span>${button.textContent}</span>
+              </div>
+            `;
+          }
+          return null;
+        })}
+      </div>
+    `;
+  }
+
+  private renderMenuPanel(menuState: MenuState, index: number) {
+    const isOpen = index === this.openMenuIndex;
+    const items = Array.from(menuState.menu.children);
+
+    return html`
+      <div
+        class="menubar-panel ${isOpen ? "open" : ""}"
+        data-menu-index="${index}"
+        tabindex="-1"
+        @keydown="${this.handlePanelKeyDown}"
+      >
+        ${items.map((item, idx) => this.renderMenuItem(item, idx))}
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <style>${RelMenubar._css}</style>
+      <slot></slot>
+      <div class="menubar-container">
+        ${this.menus.map(
+          (menuState, index) => html`
+            <button
+              class="menubar-trigger ${index === this.openMenuIndex ? "active" : ""}"
+              data-index="${index}"
+              @click="${(e: Event) => this.handleTriggerClick(index, e)}"
+              @mouseenter="${(e: Event) => this.handleTriggerMouseEnter(index, e)}"
+              @keydown="${this.handleTriggerKeyDown}"
+            >
+              ${menuState.menu.label}
+            </button>
+          `
+        )}
+      </div>
+      ${this.menus.map((menuState, index) => this.renderMenuPanel(menuState, index))}
+    `;
+  }
+}