@reliability-design/web 1.4.5 → 1.4.7

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

@@ -1,777 +0,0 @@
-import { LitElement, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { matchesShortcut, isEditableTarget } from "../../utils/shortcuts.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";
-
-interface MenuState {
-  menu: RelMenubarMenu;
-  open: boolean;
-  panelElement?: HTMLElement;
-}
-
-@customElement("rel-menubar")
-export class RelMenubar extends LitElement {
-  /**
-   * Opt-in: actually BIND the keys declared via data-shortcut (e.g.
-   * data-shortcut="Ctrl+Z"), not just display them. "Ctrl" matches Cmd on
-   * Apple platforms when written as "Mod". Keystrokes originating in
-   * inputs/textareas/contenteditable are ignored.
-   */
-  @property({ type: Boolean, attribute: "bind-shortcuts" }) bindShortcuts = false;
-
-  @state() private menus: MenuState[] = [];
-  @state() private openMenuIndex: number = -1;
-  @state() private focusedTriggerIndex: number = 0;
-  @state() private focusedItemIndex: number = -1;
-  /** Virtual-focus index inside the open submenu; -1 = focus is in the panel. */
-  @state() private focusedSubItemIndex: number = -1;
-  @state() private openSubmenuElement: HTMLElement | null = null;
-
-  private hoverSwitchEnabled = false;
-  private _onScroll?: () => void;
-
-  /** Stable id prefix for aria-activedescendant targets (light DOM, so ids
-   *  must be unique per menubar instance on the page). */
-  private menubarId = `rel-menubar-${Math.random().toString(36).slice(2)}`;
-
-  public static readonly _css = `
-    /* This component renders into LIGHT DOM (createRenderRoot returns this), so
-       :host / <slot> don't work here — the raw <rel-menubar-menu> definitions
-       are data holders that must be hidden with a plain selector. Relying on the
-       global rel-menubar-menu.css is not enough: it can't cross a consumer's
-       shadow boundary AND it's a no-op in the tsup-built package (css:"copy"). */
-    rel-menubar {
-      color: var(--rel-text-default);
-      display: block;
-    }
-
-    rel-menubar-menu {
-      display: none;
-    }
-
-    .menubar-container {
-      display: flex;
-      align-items: stretch;
-      background: var(--rel-bg-surface-elevated);
-      border: var(--rel-stroke-sm) solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm);
-      overflow: hidden;
-      padding: 0;
-      gap: var(--rel-spacing-3xs);
-      height: 40px;
-      width: fit-content;
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-    }
-
-    .menubar-trigger {
-      display: flex;
-      align-items: center;
-      align-self: stretch;
-      height: 100%;
-      padding: 0 var(--rel-spacing-sm);
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      font-family: inherit;
-      font-size: inherit;
-      color: var(--rel-text-label);
-      transition: background 0.15s ease;
-      user-select: none;
-      outline: none;
-    }
-
-    .menubar-trigger:hover,
-    .menubar-trigger.active {
-      background: var(--rel-bg-neutral-elevated-2);
-    }
-
-    .menubar-trigger:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    .menubar-panel {
-      position: fixed;
-      min-width: 220px;
-      background: var(--rel-bg-surface);
-      border: var(--rel-stroke-sm) solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm);
-      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-sm);
-      padding: var(--rel-spacing-xs) var(--rel-spacing-md);
-      cursor: pointer;
-      transition: background 0.15s ease;
-      user-select: none;
-      color: var(--rel-text-label);
-      line-height: var(--rel-body-sm-regular-line-height);
-    }
-
-    .menu-item:hover,
-    .menu-item.focused {
-      background: var(--rel-bg-neutral-elevated-2);
-    }
-
-    .menu-item[data-disabled="true"] {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .menu-separator {
-      height: var(--rel-stroke-sm);
-      background: var(--rel-border-default);
-      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-bg-surface);
-      border: var(--rel-stroke-sm) solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm);
-      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;
-      margin-left: auto;
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-3xs);
-      font-family: var(--rel-body-xs-regular-font-family);
-      font-weight: var(--rel-body-xs-regular-font-weight);
-      font-size: var(--rel-body-xs-regular-font-size);
-      line-height: var(--rel-body-xs-regular-line-height);
-      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
-    }
-
-    .menubar-panel rel-checkbox {
-      display: block;
-      width: 100%;
-      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-md, 16px);
-      box-sizing: border-box;
-      cursor: pointer;
-    }
-  `;
-
-  createRenderRoot() {
-    return this;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.discoverMenus();
-    document.addEventListener("click", this.handleOutsideClick);
-    document.addEventListener("keydown", this.handleShortcutKeyDown);
-    this._onScroll = () => {
-      this._repositionOpenMenu();
-      this._repositionOpenSubmenu();
-    };
-    window.addEventListener('scroll', this._onScroll, { passive: true, capture: true });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("click", this.handleOutsideClick);
-    document.removeEventListener("keydown", this.handleShortcutKeyDown);
-    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 handleShortcutKeyDown = (e: KeyboardEvent) => {
-    if (!this.bindShortcuts || e.defaultPrevented) return;
-    if (isEditableTarget(e)) return;
-
-    for (const { menu } of this.menus) {
-      for (const item of this.getFocusableItems(menu)) {
-        const shortcut = item.getAttribute("data-shortcut");
-        if (!shortcut) continue;
-        if ((item as HTMLButtonElement).disabled) continue;
-        if (matchesShortcut(e, shortcut)) {
-          e.preventDefault();
-          this.handleItemClick(item as HTMLElement);
-          return;
-        }
-      }
-    }
-  };
-
-  private handleOutsideClick = (e: MouseEvent) => {
-    // composedPath (NOT e.target): a document-level listener sees e.target
-    // retargeted to the shadow host when the menubar lives inside a shadow root
-    // (e.g. any consumer component), so this.contains(e.target) is false for a
-    // click that is actually INSIDE the menubar — closing the menu on the very
-    // click that opened it. composedPath pierces shadow boundaries.
-    if (!e.composedPath().includes(this)) {
-      this.closeAllMenus();
-    }
-  };
-
-  private closeAllMenus() {
-    this.openMenuIndex = -1;
-    this.openSubmenuElement = null;
-    this.focusedItemIndex = -1;
-    this.focusedSubItemIndex = -1;
-    this.hoverSwitchEnabled = false;
-    this.requestUpdate();
-  }
-
-  /** Close everything and put DOM focus back on the trigger that owned the
-   *  open menu. (Capturing the index BEFORE closing — closeAllMenus resets
-   *  openMenuIndex to -1, which used to drop focus to <body>.) */
-  private closeAllMenusAndRefocusTrigger() {
-    const idx = this.openMenuIndex;
-    this.closeAllMenus();
-    if (idx !== -1) {
-      this.focusedTriggerIndex = idx;
-      this.focusTrigger(idx);
-    }
-  }
-
-  private openMenu(index: number, triggerElement: HTMLElement) {
-    this.openMenuIndex = index;
-    this.focusedItemIndex = -1;
-    this.focusedSubItemIndex = -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 === " " || key === "ArrowDown") {
-      event.preventDefault();
-      const trigger = this.querySelector(
-        `.menubar-trigger[data-index="${this.focusedTriggerIndex}"]`
-      ) as HTMLElement;
-      if (trigger) {
-        if (this.openMenuIndex !== this.focusedTriggerIndex) {
-          this.openMenu(this.focusedTriggerIndex, trigger);
-        }
-        this.updateComplete.then(() => this.focusMenuItem(0));
-      }
-    } else if (key === "Escape" && this.openMenuIndex !== -1) {
-      event.preventDefault();
-      this.closeAllMenusAndRefocusTrigger();
-    }
-  }
-
-  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;
-
-    // ── Virtual focus is inside an open submenu ──
-    if (this.openSubmenuElement) {
-      const subItems = this.getSubmenuItems(this.openSubmenuElement);
-      if (key === "ArrowDown") {
-        event.preventDefault();
-        this.focusedSubItemIndex = Math.min(
-          subItems.length - 1,
-          this.focusedSubItemIndex + 1
-        );
-      } else if (key === "ArrowUp") {
-        event.preventDefault();
-        this.focusedSubItemIndex = Math.max(0, this.focusedSubItemIndex - 1);
-      } else if (key === "Home") {
-        event.preventDefault();
-        this.focusedSubItemIndex = 0;
-      } else if (key === "End") {
-        event.preventDefault();
-        this.focusedSubItemIndex = subItems.length - 1;
-      } else if (key === "ArrowLeft" || key === "Escape") {
-        // Close only the submenu; keep the parent panel open and focused.
-        event.preventDefault();
-        event.stopPropagation();
-        this.openSubmenuElement = null;
-        this.focusedSubItemIndex = -1;
-      } else if (key === "Enter" || key === " ") {
-        event.preventDefault();
-        const subItem = subItems[this.focusedSubItemIndex];
-        if (subItem) this.handleSubmenuItemClick(subItem as HTMLElement);
-      }
-      this.requestUpdate();
-      return;
-    }
-
-    // ── Virtual focus is in the panel's main list ──
-    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 === "Home") {
-      event.preventDefault();
-      this.focusedItemIndex = 0;
-      this.requestUpdate();
-    } else if (key === "End") {
-      event.preventDefault();
-      this.focusedItemIndex = items.length - 1;
-      this.requestUpdate();
-    } else if (key === "ArrowRight") {
-      event.preventDefault();
-      const currentItem = items[this.focusedItemIndex];
-      if (currentItem?.hasAttribute("data-submenu")) {
-        // Position against the RENDERED row, not the display:none source
-        // element inside <rel-menubar-menu> (whose rect is 0×0).
-        const panel = this.querySelector<HTMLElement>(
-          `.menubar-panel[data-menu-index="${this.openMenuIndex}"]`
-        );
-        const renderedTrigger = panel?.querySelector<HTMLElement>(
-          `[data-focus-index="${this.focusedItemIndex}"]`
-        );
-        this.focusedSubItemIndex = 0;
-        this.openSubmenu(currentItem as HTMLElement, renderedTrigger ?? undefined);
-      }
-    } else if (key === "ArrowLeft") {
-      event.preventDefault();
-    } else if (key === "Escape") {
-      event.preventDefault();
-      this.closeAllMenusAndRefocusTrigger();
-    } else if (key === "Enter" || key === " ") {
-      event.preventDefault();
-      const currentItem = items[this.focusedItemIndex];
-      if (currentItem) {
-        if (currentItem.hasAttribute("data-submenu")) {
-          const panel = this.querySelector<HTMLElement>(
-            `.menubar-panel[data-menu-index="${this.openMenuIndex}"]`
-          );
-          const renderedTrigger = panel?.querySelector<HTMLElement>(
-            `[data-focus-index="${this.focusedItemIndex}"]`
-          );
-          this.focusedSubItemIndex = 0;
-          this.openSubmenu(currentItem as HTMLElement, renderedTrigger ?? undefined);
-        } else {
-          this.handleItemClick(currentItem as HTMLElement);
-        }
-      }
-    }
-  }
-
-  private getSubmenuItems(submenuElement: HTMLElement): Element[] {
-    return Array.from(submenuElement.children).filter((el) =>
-      el.hasAttribute("data-item")
-    );
-  }
-
-  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: notify (clicks, Enter, and bound shortcuts all land
-      // here — without this event none of them were observable) and close.
-      this.dispatchSelectEvent(item);
-      this.closeAllMenusAndRefocusTrigger();
-    }
-  }
-
-  private dispatchSelectEvent(item: HTMLElement) {
-    this.dispatchEvent(
-      new CustomEvent("rel-menubar-select", {
-        detail: {
-          label: item.textContent?.trim() ?? "",
-          value: item.getAttribute("value") ?? undefined,
-          shortcut: item.getAttribute("data-shortcut") ?? undefined,
-        },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private openSubmenu(submenuTrigger: HTMLElement, renderedTrigger?: HTMLElement) {
-    this.openSubmenuElement = submenuTrigger;
-    this.requestUpdate();
-
-    this.updateComplete.then(() => {
-      // Only one submenu is ever open; its rendered trigger row is its
-      // previous sibling in the panel template.
-      const submenuPanel = this.querySelector(".submenu-panel.open") as HTMLElement;
-      if (submenuPanel) {
-        const positionTarget =
-          renderedTrigger ?? (submenuPanel.previousElementSibling as HTMLElement);
-        const rect = positionTarget?.getBoundingClientRect();
-        if (rect) {
-          submenuPanel.style.top = `${rect.top}px`;
-          submenuPanel.style.left = `${rect.right + 4}px`;
-        }
-      }
-    });
-  }
-
-  private handleSubmenuItemClick(item: HTMLElement) {
-    // Regular item - notify, close, and hand focus back to the trigger
-    this.dispatchSelectEvent(item);
-    this.closeAllMenusAndRefocusTrigger();
-  }
-
-  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, focusIndex: number, menuIndex: number): any {
-    // focusIndex is the index within getFocusableItems() — the same list the
-    // keyboard handler walks. Comparing raw child indexes against
-    // focusedItemIndex highlighted the wrong row once separators existed.
-    const isFocused = focusIndex >= 0 && focusIndex === this.focusedItemIndex;
-    const itemId =
-      focusIndex >= 0 ? `${this.menubarId}-m${menuIndex}-i${focusIndex}` : nothing;
-
-    if (item.hasAttribute("data-item")) {
-      const button = item as HTMLButtonElement;
-      const disabled = button.disabled;
-      const shortcut = button.getAttribute("data-shortcut") || "";
-
-      return html`
-        <div
-          id="${itemId}"
-          class="menu-item ${isFocused ? "focused" : ""}"
-          role="menuitem"
-          data-focus-index="${focusIndex}"
-          data-disabled="${disabled}"
-          aria-disabled="${disabled ? "true" : nothing}"
-          @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" role="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
-          id="${itemId}"
-          data-focus-index="${focusIndex}"
-          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() || "";
-
-      return html`
-        <div
-          id="${itemId}"
-          class="menu-item menu-submenu-trigger ${isFocused ? "focused" : ""}"
-          role="menuitem"
-          data-focus-index="${focusIndex}"
-          aria-haspopup="menu"
-          aria-expanded="${this.openSubmenuElement === item}"
-          @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)}
-      `;
-    }
-
-    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) {
-    const isOpen = this.openSubmenuElement === submenuElement;
-    const submenuItems = this.getSubmenuItems(submenuElement);
-
-    return html`
-      <div class="submenu-panel ${isOpen ? "open" : ""}" role="menu">
-        ${submenuItems.map((subItem, subIdx) => {
-          const button = subItem as HTMLButtonElement;
-          return html`
-            <div
-              id="${isOpen ? `${this.menubarId}-sub-${subIdx}` : nothing}"
-              class="menu-item ${isOpen && subIdx === this.focusedSubItemIndex ? "focused" : ""}"
-              role="menuitem"
-              @click="${() => this.handleSubmenuItemClick(subItem as HTMLElement)}"
-            >
-              <span>${button.textContent}</span>
-            </div>
-          `;
-        })}
-      </div>
-    `;
-  }
-
-  private renderMenuPanel(menuState: MenuState, index: number) {
-    const isOpen = index === this.openMenuIndex;
-    const items = Array.from(menuState.menu.children);
-    const focusables = this.getFocusableItems(menuState.menu);
-
-    // DOM focus stays on the panel; this tells AT which row virtual focus is
-    // on as the user arrows around (panel list or open submenu).
-    const activeDescendant = !isOpen
-      ? nothing
-      : this.focusedSubItemIndex >= 0
-      ? `${this.menubarId}-sub-${this.focusedSubItemIndex}`
-      : this.focusedItemIndex >= 0
-      ? `${this.menubarId}-m${index}-i${this.focusedItemIndex}`
-      : nothing;
-
-    return html`
-      <div
-        class="menubar-panel ${isOpen ? "open" : ""}"
-        data-menu-index="${index}"
-        tabindex="-1"
-        role="menu"
-        aria-activedescendant="${activeDescendant}"
-        @keydown="${this.handlePanelKeyDown}"
-      >
-        ${items.map((item) =>
-          this.renderMenuItem(item, focusables.indexOf(item), index)
-        )}
-      </div>
-    `;
-  }
-
-  render() {
-    return html`
-      <style>${RelMenubar._css}</style>
-      <div class="menubar-container" role="menubar">
-        ${this.menus.map(
-          (menuState, index) => html`
-            <button
-              class="menubar-trigger ${index === this.openMenuIndex ? "active" : ""}"
-              data-index="${index}"
-              role="menuitem"
-              aria-haspopup="menu"
-              aria-expanded="${index === this.openMenuIndex}"
-              @click="${(e: Event) => this.handleTriggerClick(index, e)}"
-              @mouseenter="${(e: Event) => this.handleTriggerMouseEnter(index, e)}"
-              @focus="${() => { this.focusedTriggerIndex = index; }}"
-              @keydown="${this.handleTriggerKeyDown}"
-            >
-              ${menuState.menu.label}
-            </button>
-          `
-        )}
-      </div>
-      ${this.menus.map((menuState, index) => this.renderMenuPanel(menuState, index))}
-    `;
-  }
-}