@rcarls/rc-menubar 0.2.0 → 0.3.1

package/dist/rc-menubar-tmPcN84a.js

@@ -0,0 +1,272 @@
+import { css as g, LitElement as b, html as v } from "lit";
+import { property as h, state as m } from "lit/decorators.js";
+import "@rcarls/rc-common";
+const p = g`
+  :host {
+    display: inline-block;
+  }
+
+  #root {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--rc-menubar-gap, var(--rc-control-gap, 0.25em));
+    padding-inline: var(--rc-menubar-padding-inline, var(--rc-control-padding-inline, 0.25em));
+    padding-block: var(--rc-menubar-padding-block, var(--rc-control-padding-block, 0.25em));
+    border: var(--rc-menubar-border, var(--rc-border, 1px solid ButtonBorder));
+    border-radius: var(--rc-menubar-radius, var(--rc-control-radius, 0));
+    background: var(--rc-menubar-background, var(--rc-surface, Canvas));
+    color: var(--rc-menubar-color, var(--rc-field-text, CanvasText));
+    font-family: var(--rc-font-family, inherit);
+    font-size: var(--rc-font-size, inherit);
+    line-height: var(--rc-line-height, normal);
+  }
+
+  :host([orientation='vertical']) #root {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  #slot-wrap {
+    display: flex;
+    flex-direction: inherit;
+    align-items: stretch;
+    gap: inherit;
+    min-inline-size: 0;
+  }
+
+  ::slotted(rc-menu-button) {
+    flex: 0 0 auto;
+    --rc-menu-button-trigger-block-size: var(--rc-menubar-item-block-size, 2.25em);
+    --rc-menu-button-trigger-padding-block: var(--rc-menubar-item-padding-block, 0.25em);
+    --rc-menu-button-trigger-padding-inline: var(--rc-menubar-item-padding-inline, 0.75em);
+    --rc-menu-button-trigger-gap: var(--rc-menubar-item-gap, var(--rc-item-gap, 0.5em));
+    --rc-menu-button-trigger-border: var(--rc-menubar-item-border, 1px solid transparent);
+    --rc-menu-button-trigger-radius: var(--rc-menubar-item-radius, var(--rc-control-radius, 0.125em));
+    --rc-menu-button-trigger-background: var(--rc-menubar-item-background, transparent);
+    --rc-menu-button-trigger-color: var(--rc-menubar-item-color, inherit);
+    --rc-menu-button-trigger-transition: var(--rc-menubar-item-transition);
+    --rc-menu-button-trigger-hover-border-color: var(--rc-menubar-item-hover-border-color, transparent);
+    --rc-menu-button-trigger-hover-background: var(
+      --rc-menubar-item-hover-background,
+      color-mix(in srgb, Highlight 8%, transparent)
+    );
+    --rc-menu-button-trigger-hover-color: var(--rc-menubar-item-hover-color, inherit);
+    --rc-menu-button-trigger-open-border-color: var(--rc-menubar-item-open-border-color, transparent);
+    --rc-menu-button-trigger-open-background: var(
+      --rc-menubar-item-open-background,
+      color-mix(in srgb, Highlight 12%, transparent)
+    );
+    --rc-menu-button-trigger-open-color: var(--rc-menubar-item-open-color, inherit);
+  }
+
+  ::slotted(rc-menu-button[open]) {
+    --rc-menu-button-trigger-background: var(
+      --rc-menubar-item-open-background,
+      color-mix(in srgb, Highlight 12%, transparent)
+    );
+    --rc-menu-button-trigger-color: var(--rc-menubar-item-open-color, inherit);
+    --rc-menu-button-trigger-hover-background: var(
+      --rc-menubar-item-open-background,
+      color-mix(in srgb, Highlight 12%, transparent)
+    );
+    --rc-menu-button-trigger-hover-color: var(--rc-menubar-item-open-color, inherit);
+    --rc-menu-button-trigger-hover-border-color: var(--rc-menubar-item-open-border-color, transparent);
+  }
+
+  :host([orientation='vertical']) ::slotted(rc-menu-button) {
+    inline-size: 100%;
+  }
+`;
+var f = Object.defineProperty, u = (l, t, e, n) => {
+  for (var i = void 0, r = l.length - 1, o; r >= 0; r--)
+    (o = l[r]) && (i = o(t, e, i) || i);
+  return i && f(t, e, i), i;
+};
+const $ = {
+  Up: "ArrowUp",
+  Down: "ArrowDown",
+  Left: "ArrowLeft",
+  Right: "ArrowRight"
+}, c = class c extends b {
+  constructor() {
+    super(...arguments), this.label = "Menu", this.orientation = "horizontal", this._$menuButtons = [], this._boundHandleKeydown = this._handleKeydown.bind(this), this._boundHandleClick = this._handleClick.bind(this);
+  }
+  /** Syncs host ARIA attributes and registers keyboard and click handlers. */
+  connectedCallback() {
+    super.connectedCallback(), this._syncHostAria(), this.addEventListener("keydown", this._boundHandleKeydown), this.addEventListener("click", this._boundHandleClick);
+  }
+  /** Removes keyboard and click handlers. */
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._boundHandleKeydown), this.removeEventListener("click", this._boundHandleClick);
+  }
+  /** Syncs host ARIA and child orientation when `label` or `orientation` change. */
+  updated(t) {
+    super.updated(t), (t.has("label") || t.has("orientation")) && (this._syncHostAria(), this._syncMenuButtonOrientation());
+  }
+  /** Writes `role`, `aria-label`, and `aria-orientation` to the host element. */
+  _syncHostAria() {
+    this.setAttribute("role", "menubar"), this.setAttribute("aria-label", this.label), this.setAttribute("aria-orientation", this.orientation);
+  }
+  /** Propagates the current `orientation` value to all slotted `rc-menu-button` children. */
+  _syncMenuButtonOrientation() {
+    this.$menuButtons.forEach((t) => {
+      t.orientation = this.orientation;
+    });
+  }
+  /** Returns the `[slot="trigger"]` element inside a child `rc-menu-button`. */
+  _$getTrigger(t) {
+    return t.querySelector('[slot="trigger"]');
+  }
+  /** All slotted trigger elements in DOM order. */
+  get $items() {
+    return this._$menuButtons.map((t) => t.deref()).filter((t) => t != null).map((t) => this._$getTrigger(t)).filter((t) => t != null);
+  }
+  /** All slotted `rc-menu-button` children in DOM order. */
+  get $menuButtons() {
+    return this._$menuButtons.map((t) => t.deref()).filter((t) => t != null);
+  }
+  /** First trigger element in the menubar. */
+  get $firstItem() {
+    return this.$items.at(0);
+  }
+  /** Last trigger element in the menubar. */
+  get $lastItem() {
+    return this.$items.at(-1);
+  }
+  /** Trigger after `_$lastFocused`, wrapping around to the first. */
+  get $nextItem() {
+    const t = this._$lastFocused ? this.$items.indexOf(this._$lastFocused) : 0;
+    return this.$items.at((t + 1) % this.$items.length);
+  }
+  /** Trigger before `_$lastFocused`, wrapping around to the last. */
+  get $previousItem() {
+    const t = this._$lastFocused ? this.$items.indexOf(this._$lastFocused) : 0;
+    return this.$items.at((t - 1) % this.$items.length);
+  }
+  /** Returns the `rc-menu-button` whose slotted trigger matches `$trigger`. */
+  _$getMenuButtonForTrigger(t) {
+    return this.$menuButtons.find((e) => this._$getTrigger(e) === t);
+  }
+  /**
+   * Moves focus to a trigger element.
+   *
+   * @param item - trigger to focus; no-ops when `null` or `undefined`
+   */
+  focusItem(t) {
+    t?.focus();
+  }
+  /** Closes the currently open child menu without returning focus to its trigger. */
+  closeActiveMenu() {
+    const t = this._$activeMenuButton?.deref();
+    t && (t.closeMenu(!1), this._$activeMenuButton = void 0);
+  }
+  /** Updates roving-tabindex state when a trigger element receives focus. */
+  _handleItemFocus(t) {
+    const e = t.target;
+    e.slot === "trigger" && (this._$lastFocused = e, this.$items.forEach((n) => n.setAttribute("tabindex", "-1")), e.setAttribute("tabindex", "0"));
+  }
+  /** Refreshes the cached `rc-menu-button` list when slotted children change. */
+  _handleSlotChange(t) {
+    const n = t.currentTarget.assignedElements(), i = this._$menuButtons;
+    this._$menuButtons = n.filter((r) => r.tagName === "RC-MENU-BUTTON").map((r) => new WeakRef(r)), queueMicrotask(() => {
+      if (!this.isConnected)
+        return;
+      i.forEach((o) => {
+        const a = o.deref();
+        if (!a)
+          return;
+        a.removeAttribute("role");
+        const d = this._$getTrigger(a);
+        d?.removeAttribute("tabindex"), d?.removeAttribute("role");
+      }), this.$menuButtons.forEach((o) => {
+        o.removeAttribute("role"), o.orientation = this.orientation, this._$getTrigger(o)?.setAttribute("role", "menuitem");
+      });
+      const r = this.$items;
+      r.forEach((o, a) => {
+        o.setAttribute("tabindex", a === 0 ? "0" : "-1");
+      }), r.length > 0 && !this._$lastFocused && (this._$lastFocused = r[0]);
+    });
+  }
+  /** Tracks which child `rc-menu-button` is currently open. */
+  _handleMenuButtonToggle(t) {
+    const e = t.target;
+    t.detail.open ? this._$activeMenuButton = new WeakRef(e) : this._$activeMenuButton?.deref() === e && (this._$activeMenuButton = void 0);
+  }
+  /**
+   * Routes keyboard navigation actions to item focus and menu open/close changes.
+   *
+   * When a menu is open, moving to an adjacent item closes the current menu and
+   * opens the one attached to the newly focused trigger.
+   *
+   * @param action - the navigation action produced by the keydown handler
+   */
+  _handleNavigate(t) {
+    const n = this._$activeMenuButton?.deref()?.open ?? !1;
+    switch (t) {
+      case "next":
+        n && this.closeActiveMenu(), this.focusItem(this.$nextItem), n && this._openCurrentMenu();
+        break;
+      case "prev":
+        n && this.closeActiveMenu(), this.focusItem(this.$previousItem), n && this._openCurrentMenu();
+        break;
+      case "start":
+        n && this.closeActiveMenu(), this.focusItem(this.$firstItem), n && this._openCurrentMenu();
+        break;
+      case "end":
+        n && this.closeActiveMenu(), this.focusItem(this.$lastItem), n && this._openCurrentMenu();
+        break;
+      case "escape":
+        this.closeActiveMenu();
+        break;
+    }
+  }
+  /** Opens the menu attached to the last-focused trigger. */
+  _openCurrentMenu() {
+    if (this._$lastFocused) {
+      const t = this._$getMenuButtonForTrigger(this._$lastFocused);
+      t && t.openMenu();
+    }
+  }
+  /** Translates keyboard events to navigation actions and activates keyboard interaction mode. */
+  _handleKeydown(t) {
+    const e = $[t.key] ?? t.key, n = this.orientation === "horizontal" ? "ArrowRight" : "ArrowDown", i = this.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+    let r;
+    e === n ? r = "next" : e === i ? r = "prev" : e === "Home" ? r = "start" : e === "End" ? r = "end" : e === "Escape" ? r = "escape" : e === "Tab" && this.setAttribute("data-interaction-mode", "keyboard"), r && (this._handleNavigate(r), this.setAttribute("data-interaction-mode", "keyboard"), t.stopPropagation(), t.preventDefault());
+  }
+  /** Clears keyboard interaction mode on pointer click. */
+  _handleClick() {
+    this.removeAttribute("data-interaction-mode");
+  }
+  render() {
+    return v`
+      <div id="root" part="root">
+        <div
+          id="slot-wrap"
+          @focusin=${this._handleItemFocus}
+          @rc-menu-button-toggle=${this._handleMenuButtonToggle}
+        >
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+c.styles = [p];
+let s = c;
+u([
+  h({ type: String })
+], s.prototype, "label");
+u([
+  h({ type: String, reflect: !0 })
+], s.prototype, "orientation");
+u([
+  m()
+], s.prototype, "_$activeMenuButton");
+u([
+  m()
+], s.prototype, "_$lastFocused");
+export {
+  s as R
+};
+//# sourceMappingURL=rc-menubar-tmPcN84a.js.map

package/dist/rc-menubar-tmPcN84a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-menubar-tmPcN84a.js","sources":["../src/rc-menubar.styles.ts","../src/rc-menubar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const menubarStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  #root {\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n    gap: var(--rc-menubar-gap, var(--rc-control-gap, 0.25em));\n    padding-inline: var(--rc-menubar-padding-inline, var(--rc-control-padding-inline, 0.25em));\n    padding-block: var(--rc-menubar-padding-block, var(--rc-control-padding-block, 0.25em));\n    border: var(--rc-menubar-border, var(--rc-border, 1px solid ButtonBorder));\n    border-radius: var(--rc-menubar-radius, var(--rc-control-radius, 0));\n    background: var(--rc-menubar-background, var(--rc-surface, Canvas));\n    color: var(--rc-menubar-color, var(--rc-field-text, CanvasText));\n    font-family: var(--rc-font-family, inherit);\n    font-size: var(--rc-font-size, inherit);\n    line-height: var(--rc-line-height, normal);\n  }\n\n  :host([orientation='vertical']) #root {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  #slot-wrap {\n    display: flex;\n    flex-direction: inherit;\n    align-items: stretch;\n    gap: inherit;\n    min-inline-size: 0;\n  }\n\n  ::slotted(rc-menu-button) {\n    flex: 0 0 auto;\n    --rc-menu-button-trigger-block-size: var(--rc-menubar-item-block-size, 2.25em);\n    --rc-menu-button-trigger-padding-block: var(--rc-menubar-item-padding-block, 0.25em);\n    --rc-menu-button-trigger-padding-inline: var(--rc-menubar-item-padding-inline, 0.75em);\n    --rc-menu-button-trigger-gap: var(--rc-menubar-item-gap, var(--rc-item-gap, 0.5em));\n    --rc-menu-button-trigger-border: var(--rc-menubar-item-border, 1px solid transparent);\n    --rc-menu-button-trigger-radius: var(--rc-menubar-item-radius, var(--rc-control-radius, 0.125em));\n    --rc-menu-button-trigger-background: var(--rc-menubar-item-background, transparent);\n    --rc-menu-button-trigger-color: var(--rc-menubar-item-color, inherit);\n    --rc-menu-button-trigger-transition: var(--rc-menubar-item-transition);\n    --rc-menu-button-trigger-hover-border-color: var(--rc-menubar-item-hover-border-color, transparent);\n    --rc-menu-button-trigger-hover-background: var(\n      --rc-menubar-item-hover-background,\n      color-mix(in srgb, Highlight 8%, transparent)\n    );\n    --rc-menu-button-trigger-hover-color: var(--rc-menubar-item-hover-color, inherit);\n    --rc-menu-button-trigger-open-border-color: var(--rc-menubar-item-open-border-color, transparent);\n    --rc-menu-button-trigger-open-background: var(\n      --rc-menubar-item-open-background,\n      color-mix(in srgb, Highlight 12%, transparent)\n    );\n    --rc-menu-button-trigger-open-color: var(--rc-menubar-item-open-color, inherit);\n  }\n\n  ::slotted(rc-menu-button[open]) {\n    --rc-menu-button-trigger-background: var(\n      --rc-menubar-item-open-background,\n      color-mix(in srgb, Highlight 12%, transparent)\n    );\n    --rc-menu-button-trigger-color: var(--rc-menubar-item-open-color, inherit);\n    --rc-menu-button-trigger-hover-background: var(\n      --rc-menubar-item-open-background,\n      color-mix(in srgb, Highlight 12%, transparent)\n    );\n    --rc-menu-button-trigger-hover-color: var(--rc-menubar-item-open-color, inherit);\n    --rc-menu-button-trigger-hover-border-color: var(--rc-menubar-item-open-border-color, transparent);\n  }\n\n  :host([orientation='vertical']) ::slotted(rc-menu-button) {\n    inline-size: 100%;\n  }\n`;\n\nexport default menubarStyles;\n","import { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { type KeyboardNavigationAction } from '@rcarls/rc-common';\n\nimport type { RCMenuButton, RCMenuButtonToggleEvent } from '@rcarls/rc-menu-button';\n\nimport menubarStyles from './rc-menubar.styles';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-menubar': RCMenubar;\n  }\n}\n\nconst IE_KEY_ALIASES: Record<string, string> = {\n  Up: 'ArrowUp',\n  Down: 'ArrowDown',\n  Left: 'ArrowLeft',\n  Right: 'ArrowRight',\n};\n\n/**\n * Menubar coordinator for rc-menu-button children with roving tabindex and submenu\n * handoff, following the WAI-ARIA Menubar pattern.\n *\n * Uses roving tabindex rather than aria-activedescendant so trigger buttons\n * receive real focus — required for submenu handoff and screen reader announcements.\n *\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-menubar rc-menubar docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/menubar/ WAI-ARIA Menubar pattern}\n *\n * @slot default - Takes rc-menu-button elements to display in the menubar\n *\n * @csspart root - The root container element\n *\n * @cssprop [--rc-menubar-gap=var(--rc-control-gap)] - Gap between menu buttons\n * @cssprop [--rc-menubar-padding-inline=var(--rc-control-padding-inline)] - Inline-axis padding\n * @cssprop [--rc-menubar-padding-block=var(--rc-control-padding-block)] - Block-axis padding\n * @cssprop [--rc-menubar-border=var(--rc-border)] - Root container border\n * @cssprop [--rc-menubar-radius=var(--rc-control-radius)] - Root container border radius\n * @cssprop [--rc-menubar-background=Canvas] - Root container background\n * @cssprop [--rc-menubar-color=CanvasText] - Root container text color\n * @cssprop [--rc-menubar-item-block-size=2.25em] - Minimum block size for child menu-button triggers\n * @cssprop [--rc-menubar-item-padding-block=0.25em] - Child trigger block-axis padding\n * @cssprop [--rc-menubar-item-padding-inline=0.75em] - Child trigger inline-axis padding\n * @cssprop [--rc-menubar-item-gap=var(--rc-item-gap)] - Gap between flex children inside child triggers\n * @cssprop [--rc-menubar-item-border=1px solid transparent] - Child trigger border\n * @cssprop [--rc-menubar-item-radius=var(--rc-control-radius)] - Child trigger border radius\n * @cssprop [--rc-menubar-item-background=transparent] - Child trigger background\n * @cssprop [--rc-menubar-item-color=inherit] - Child trigger text color\n * @cssprop [--rc-menubar-item-transition] - CSS transition applied to child triggers\n * @cssprop [--rc-menubar-item-hover-background=color-mix(in srgb, Highlight 8%, transparent)] - Child trigger hover background\n * @cssprop [--rc-menubar-item-hover-color=inherit] - Child trigger hover text color\n * @cssprop [--rc-menubar-item-hover-border-color=transparent] - Child trigger hover border color\n * @cssprop [--rc-menubar-item-open-background=color-mix(in srgb, Highlight 12%, transparent)] - Child trigger background when its menu is open\n * @cssprop [--rc-menubar-item-open-color=inherit] - Child trigger text color when its menu is open\n * @cssprop [--rc-menubar-item-open-border-color=transparent] - Child trigger border color when its menu is open\n */\nexport class RCMenubar extends LitElement {\n  static styles = [menubarStyles];\n\n  /** Accessible label for the `role=\"menubar\"` element. */\n  @property({ type: String })\n  label = 'Menu';\n\n  /** Orientation of the menubar, controls which arrow keys move between items. */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Weak reference to the currently open child `rc-menu-button`. */\n  @state()\n  protected _$activeMenuButton: WeakRef<RCMenuButton> | undefined;\n\n  /** The last trigger element to have received focus, used for roving-tabindex bookkeeping. */\n  @state()\n  protected _$lastFocused: HTMLElement | undefined;\n\n  /** Weak references to all slotted `rc-menu-button` children, in DOM order. */\n  protected _$menuButtons: WeakRef<RCMenuButton>[] = [];\n\n  /** Bound keydown handler, held for `removeEventListener` pairing. */\n  protected _boundHandleKeydown = this._handleKeydown.bind(this);\n\n  /** Bound click handler, held for `removeEventListener` pairing. */\n  protected _boundHandleClick = this._handleClick.bind(this);\n\n  /** Syncs host ARIA attributes and registers keyboard and click handlers. */\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this._syncHostAria();\n\n    this.addEventListener('keydown', this._boundHandleKeydown);\n    this.addEventListener('click', this._boundHandleClick);\n  }\n\n  /** Removes keyboard and click handlers. */\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('keydown', this._boundHandleKeydown);\n    this.removeEventListener('click', this._boundHandleClick);\n  }\n\n  /** Syncs host ARIA and child orientation when `label` or `orientation` change. */\n  protected override updated(changedProperties: Map<PropertyKey, unknown>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('label') || changedProperties.has('orientation')) {\n      this._syncHostAria();\n      this._syncMenuButtonOrientation();\n    }\n  }\n\n  /** Writes `role`, `aria-label`, and `aria-orientation` to the host element. */\n  protected _syncHostAria(): void {\n    this.setAttribute('role', 'menubar');\n    this.setAttribute('aria-label', this.label);\n    this.setAttribute('aria-orientation', this.orientation);\n  }\n\n  /** Propagates the current `orientation` value to all slotted `rc-menu-button` children. */\n  protected _syncMenuButtonOrientation(): void {\n    this.$menuButtons.forEach(($menuButton) => {\n      $menuButton.orientation = this.orientation;\n    });\n  }\n\n  /** Returns the `[slot=\"trigger\"]` element inside a child `rc-menu-button`. */\n  protected _$getTrigger($menuButton: RCMenuButton): HTMLElement | null {\n    return $menuButton.querySelector('[slot=\"trigger\"]');\n  }\n\n  /** All slotted trigger elements in DOM order. */\n  get $items(): HTMLElement[] {\n    return this._$menuButtons\n      .map((ref) => ref.deref())\n      .filter((el): el is RCMenuButton => el != null)\n      .map(($mb) => this._$getTrigger($mb))\n      .filter(($el): $el is HTMLElement => $el != null);\n  }\n\n  /** All slotted `rc-menu-button` children in DOM order. */\n  get $menuButtons(): RCMenuButton[] {\n    return this._$menuButtons\n      .map((ref) => ref.deref())\n      .filter((el): el is RCMenuButton => el != null);\n  }\n\n  /** First trigger element in the menubar. */\n  get $firstItem(): HTMLElement | undefined {\n    return this.$items.at(0);\n  }\n\n  /** Last trigger element in the menubar. */\n  get $lastItem(): HTMLElement | undefined {\n    return this.$items.at(-1);\n  }\n\n  /** Trigger after `_$lastFocused`, wrapping around to the first. */\n  get $nextItem(): HTMLElement | undefined {\n    const index = this._$lastFocused ? this.$items.indexOf(this._$lastFocused) : 0;\n\n    return this.$items.at((index + 1) % this.$items.length);\n  }\n\n  /** Trigger before `_$lastFocused`, wrapping around to the last. */\n  get $previousItem(): HTMLElement | undefined {\n    const index = this._$lastFocused ? this.$items.indexOf(this._$lastFocused) : 0;\n\n    return this.$items.at((index - 1) % this.$items.length);\n  }\n\n  /** Returns the `rc-menu-button` whose slotted trigger matches `$trigger`. */\n  protected _$getMenuButtonForTrigger($trigger: HTMLElement): RCMenuButton | undefined {\n    return this.$menuButtons.find(($mb) => this._$getTrigger($mb) === $trigger);\n  }\n\n  /**\n   * Moves focus to a trigger element.\n   *\n   * @param item - trigger to focus; no-ops when `null` or `undefined`\n   */\n  focusItem(item?: HTMLElement | null) {\n    if (item != null) {\n      item.focus();\n    }\n  }\n\n  /** Closes the currently open child menu without returning focus to its trigger. */\n  closeActiveMenu() {\n    const $activeMenuButton = this._$activeMenuButton?.deref();\n\n    if ($activeMenuButton) {\n      $activeMenuButton.closeMenu(false);\n\n      this._$activeMenuButton = undefined;\n    }\n  }\n\n  /** Updates roving-tabindex state when a trigger element receives focus. */\n  protected _handleItemFocus(e: FocusEvent) {\n    const $target = e.target as HTMLElement;\n\n    if ($target.slot !== 'trigger') return;\n\n    this._$lastFocused = $target;\n\n    this.$items.forEach(($item) => $item.setAttribute('tabindex', '-1'));\n\n    $target.setAttribute('tabindex', '0');\n  }\n\n  /** Refreshes the cached `rc-menu-button` list when slotted children change. */\n  protected _handleSlotChange(e: Event) {\n    const $slot = e.currentTarget as HTMLSlotElement;\n    const $elements = $slot.assignedElements();\n\n    const prevButtons = this._$menuButtons;\n\n    // Cache element references synchronously. Defer all DOM mutations.\n    // slotchange fires synchronously inside a framework reactive update pass\n    // on second+ mount (shadow DOM already exists), so the handler must be\n    // instantaneous to avoid interacting with the reactive system.\n    this._$menuButtons = $elements\n      .filter((el): el is RCMenuButton => el.tagName === 'RC-MENU-BUTTON')\n      .map((el) => new WeakRef(el));\n\n    queueMicrotask(() => {\n      if (!this.isConnected) {\n        return;\n      }\n\n      prevButtons.forEach((ref) => {\n        const $menuButton = ref.deref();\n        if (!$menuButton) {\n          return;\n        }\n\n        $menuButton.removeAttribute('role');\n\n        const $trigger = this._$getTrigger($menuButton);\n\n        $trigger?.removeAttribute('tabindex');\n        $trigger?.removeAttribute('role');\n      });\n\n      this.$menuButtons.forEach(($menuButton) => {\n        $menuButton.removeAttribute('role');\n        $menuButton.orientation = this.orientation;\n\n        const $trigger = this._$getTrigger($menuButton);\n\n        $trigger?.setAttribute('role', 'menuitem');\n      });\n\n      const $items = this.$items;\n\n      $items.forEach(($trigger, index) => {\n        $trigger.setAttribute('tabindex', index === 0 ? '0' : '-1');\n      });\n\n      if ($items.length > 0 && !this._$lastFocused) {\n        this._$lastFocused = $items[0];\n      }\n    });\n  }\n\n  /** Tracks which child `rc-menu-button` is currently open. */\n  protected _handleMenuButtonToggle(e: CustomEvent<RCMenuButtonToggleEvent>) {\n    const $menuButton = e.target as RCMenuButton;\n\n    if (e.detail.open) {\n      this._$activeMenuButton = new WeakRef($menuButton);\n    } else {\n      if (this._$activeMenuButton?.deref() === $menuButton) {\n        this._$activeMenuButton = undefined;\n      }\n    }\n  }\n\n  /**\n   * Routes keyboard navigation actions to item focus and menu open/close changes.\n   *\n   * When a menu is open, moving to an adjacent item closes the current menu and\n   * opens the one attached to the newly focused trigger.\n   *\n   * @param action - the navigation action produced by the keydown handler\n   */\n  protected _handleNavigate(action: KeyboardNavigationAction) {\n    const $activeMenu = this._$activeMenuButton?.deref();\n    const wasMenuOpen = $activeMenu?.open ?? false;\n\n    switch (action) {\n      case 'next':\n        if (wasMenuOpen) {\n          this.closeActiveMenu();\n        }\n\n        this.focusItem(this.$nextItem);\n\n        if (wasMenuOpen) {\n          this._openCurrentMenu();\n        }\n\n        break;\n\n      case 'prev':\n        if (wasMenuOpen) {\n          this.closeActiveMenu();\n        }\n\n        this.focusItem(this.$previousItem);\n\n        if (wasMenuOpen) {\n          this._openCurrentMenu();\n        }\n\n        break;\n\n      case 'start':\n        if (wasMenuOpen) {\n          this.closeActiveMenu();\n        }\n\n        this.focusItem(this.$firstItem);\n\n        if (wasMenuOpen) {\n          this._openCurrentMenu();\n        }\n\n        break;\n\n      case 'end':\n        if (wasMenuOpen) {\n          this.closeActiveMenu();\n        }\n\n        this.focusItem(this.$lastItem);\n\n        if (wasMenuOpen) {\n          this._openCurrentMenu();\n        }\n\n        break;\n\n      case 'escape':\n        this.closeActiveMenu();\n\n        break;\n    }\n  }\n\n  /** Opens the menu attached to the last-focused trigger. */\n  protected _openCurrentMenu() {\n    if (this._$lastFocused) {\n      const $menuButton = this._$getMenuButtonForTrigger(this._$lastFocused);\n\n      if ($menuButton) {\n        $menuButton.openMenu();\n      }\n    }\n  }\n\n  /** Translates keyboard events to navigation actions and activates keyboard interaction mode. */\n  protected _handleKeydown(e: KeyboardEvent): void {\n    const key = IE_KEY_ALIASES[e.key] ?? e.key;\n    const navNext = this.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n    const navPrev = this.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';\n\n    let action: KeyboardNavigationAction | undefined;\n\n    if (key === navNext) {\n      action = 'next';\n    } else if (key === navPrev) {\n      action = 'prev';\n    } else if (key === 'Home') {\n      action = 'start';\n    } else if (key === 'End') {\n      action = 'end';\n    } else if (key === 'Escape') {\n      action = 'escape';\n    } else if (key === 'Tab') {\n      this.setAttribute('data-interaction-mode', 'keyboard');\n    }\n\n    if (!action) {\n      return;\n    }\n\n    this._handleNavigate(action);\n    this.setAttribute('data-interaction-mode', 'keyboard');\n\n    e.stopPropagation();\n    e.preventDefault();\n  }\n\n  /** Clears keyboard interaction mode on pointer click. */\n  protected _handleClick(): void {\n    this.removeAttribute('data-interaction-mode');\n  }\n\n  protected override render() {\n    return html`\n      <div id=\"root\" part=\"root\">\n        <div\n          id=\"slot-wrap\"\n          @focusin=${this._handleItemFocus}\n          @rc-menu-button-toggle=${this._handleMenuButtonToggle}\n        >\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default RCMenubar;\n"],"names":["menubarStyles","css","IE_KEY_ALIASES","_RCMenubar","LitElement","changedProperties","$menuButton","ref","el","$mb","$el","index","$trigger","item","$activeMenuButton","e","$target","$item","$elements","prevButtons","$items","action","wasMenuOpen","key","navNext","navPrev","html","RCMenubar","__decorateClass","property","state"],"mappings":"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"}

package/dist/rc-menubar.js

@@ -1,4 +1,4 @@
-import { R as e } from "./rc-menubar-BWcf6GHO.js";
+import { R as e } from "./rc-menubar-tmPcN84a.js";
 export {
   e as RCMenubar
 };

package/dist/types/packages/rc-menubar/src/rc-menubar.d.ts

@@ -1,16 +1,26 @@
 import { LitElement } from 'lit';
-import { RCMenuButton } from '@rcarls/rc-menu-button';
+import { KeyboardNavigationAction } from '@rcarls/rc-common';
+import { RCMenuButton, RCMenuButtonToggleEvent } from '@rcarls/rc-menu-button';
 declare global {
     interface HTMLElementTagNameMap {
         'rc-menubar': RCMenubar;
     }
 }
 /**
- * A menubar component containing menu buttons, as defined in WAI-ARIA
+ * Menubar coordinator for rc-menu-button children with roving tabindex and submenu
+ * handoff, following the WAI-ARIA Menubar pattern.
+ *
+ * Uses roving tabindex rather than aria-activedescendant so trigger buttons
+ * receive real focus — required for submenu handoff and screen reader announcements.
+ *
+ *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-menubar rc-menubar docs}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/menubar/ WAI-ARIA Menubar pattern}
  *
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
  * @slot default - Takes rc-menu-button elements to display in the menubar
+ *
  * @csspart root - The root container element
+ *
  * @cssprop [--rc-menubar-gap=var(--rc-control-gap)] - Gap between menu buttons
  * @cssprop [--rc-menubar-padding-inline=var(--rc-control-padding-inline)] - Inline-axis padding
  * @cssprop [--rc-menubar-padding-block=var(--rc-control-padding-block)] - Block-axis padding
@@ -18,55 +28,93 @@ declare global {
  * @cssprop [--rc-menubar-radius=var(--rc-control-radius)] - Root container border radius
  * @cssprop [--rc-menubar-background=Canvas] - Root container background
  * @cssprop [--rc-menubar-color=CanvasText] - Root container text color
+ * @cssprop [--rc-menubar-item-block-size=2.25em] - Minimum block size for child menu-button triggers
+ * @cssprop [--rc-menubar-item-padding-block=0.25em] - Child trigger block-axis padding
+ * @cssprop [--rc-menubar-item-padding-inline=0.75em] - Child trigger inline-axis padding
+ * @cssprop [--rc-menubar-item-gap=var(--rc-item-gap)] - Gap between flex children inside child triggers
+ * @cssprop [--rc-menubar-item-border=1px solid transparent] - Child trigger border
+ * @cssprop [--rc-menubar-item-radius=var(--rc-control-radius)] - Child trigger border radius
+ * @cssprop [--rc-menubar-item-background=transparent] - Child trigger background
+ * @cssprop [--rc-menubar-item-color=inherit] - Child trigger text color
+ * @cssprop [--rc-menubar-item-transition] - CSS transition applied to child triggers
+ * @cssprop [--rc-menubar-item-hover-background=color-mix(in srgb, Highlight 8%, transparent)] - Child trigger hover background
+ * @cssprop [--rc-menubar-item-hover-color=inherit] - Child trigger hover text color
+ * @cssprop [--rc-menubar-item-hover-border-color=transparent] - Child trigger hover border color
+ * @cssprop [--rc-menubar-item-open-background=color-mix(in srgb, Highlight 12%, transparent)] - Child trigger background when its menu is open
+ * @cssprop [--rc-menubar-item-open-color=inherit] - Child trigger text color when its menu is open
+ * @cssprop [--rc-menubar-item-open-border-color=transparent] - Child trigger border color when its menu is open
  */
 export declare class RCMenubar extends LitElement {
     static styles: import('lit').CSSResult[];
-    /** Accessible label for this menubar */
+    /** Accessible label for the `role="menubar"` element. */
     label: string;
-    /** Menubar orientation, for keyboard navigation */
+    /** Orientation of the menubar, controls which arrow keys move between items. */
     orientation: 'horizontal' | 'vertical';
-    /** Reference to the currently open menu button */
-    private _activeMenuButton;
-    /** The last menu button trigger to have focus */
-    private _lastFocused;
-    /** Array of menu button elements */
-    private _menuButtons;
-    private _boundHandleKeydown;
-    private _boundHandleClick;
+    /** Weak reference to the currently open child `rc-menu-button`. */
+    protected _$activeMenuButton: WeakRef<RCMenuButton> | undefined;
+    /** The last trigger element to have received focus, used for roving-tabindex bookkeeping. */
+    protected _$lastFocused: HTMLElement | undefined;
+    /** Weak references to all slotted `rc-menu-button` children, in DOM order. */
+    protected _$menuButtons: WeakRef<RCMenuButton>[];
+    /** Bound keydown handler, held for `removeEventListener` pairing. */
+    protected _boundHandleKeydown: (e: KeyboardEvent) => void;
+    /** Bound click handler, held for `removeEventListener` pairing. */
+    protected _boundHandleClick: () => void;
+    /** Syncs host ARIA attributes and registers keyboard and click handlers. */
     connectedCallback(): void;
+    /** Removes keyboard and click handlers. */
     disconnectedCallback(): void;
+    /** Syncs host ARIA and child orientation when `label` or `orientation` change. */
     protected updated(changedProperties: Map<PropertyKey, unknown>): void;
-    /** Keep ARIA semantics on the custom element host for slotted children. */
-    private _syncHostAria;
-    private _syncMenuButtonOrientation;
-    /** Get the trigger element from a menu button */
-    private _getTrigger;
-    /** Array of focusable trigger elements */
-    get items(): HTMLElement[];
-    /** Array of menu button elements */
-    get menuButtons(): RCMenuButton[];
-    /** First trigger element */
-    get firstItem(): HTMLElement | undefined;
-    /** Last trigger element */
-    get lastItem(): HTMLElement | undefined;
-    /** Next trigger element, in tab-order */
-    get nextItem(): HTMLElement | undefined;
-    /** Previous trigger element, in tab-order */
-    get previousItem(): HTMLElement | undefined;
-    /** Get the menu button that contains a trigger */
-    private _getMenuButtonForTrigger;
-    /** Set focus to a specific trigger element */
+    /** Writes `role`, `aria-label`, and `aria-orientation` to the host element. */
+    protected _syncHostAria(): void;
+    /** Propagates the current `orientation` value to all slotted `rc-menu-button` children. */
+    protected _syncMenuButtonOrientation(): void;
+    /** Returns the `[slot="trigger"]` element inside a child `rc-menu-button`. */
+    protected _$getTrigger($menuButton: RCMenuButton): HTMLElement | null;
+    /** All slotted trigger elements in DOM order. */
+    get $items(): HTMLElement[];
+    /** All slotted `rc-menu-button` children in DOM order. */
+    get $menuButtons(): RCMenuButton[];
+    /** First trigger element in the menubar. */
+    get $firstItem(): HTMLElement | undefined;
+    /** Last trigger element in the menubar. */
+    get $lastItem(): HTMLElement | undefined;
+    /** Trigger after `_$lastFocused`, wrapping around to the first. */
+    get $nextItem(): HTMLElement | undefined;
+    /** Trigger before `_$lastFocused`, wrapping around to the last. */
+    get $previousItem(): HTMLElement | undefined;
+    /** Returns the `rc-menu-button` whose slotted trigger matches `$trigger`. */
+    protected _$getMenuButtonForTrigger($trigger: HTMLElement): RCMenuButton | undefined;
+    /**
+     * Moves focus to a trigger element.
+     *
+     * @param item - trigger to focus; no-ops when `null` or `undefined`
+     */
     focusItem(item?: HTMLElement | null): void;
-    /** Close any open menu */
+    /** Closes the currently open child menu without returning focus to its trigger. */
     closeActiveMenu(): void;
-    private _handleItemFocus;
-    private _handleSlotChange;
-    private _handleMenuButtonToggle;
-    private _handleNavigate;
-    private _openCurrentMenu;
-    private _handleKeydown;
-    private _handleClick;
-    private _normalizeKey;
+    /** Updates roving-tabindex state when a trigger element receives focus. */
+    protected _handleItemFocus(e: FocusEvent): void;
+    /** Refreshes the cached `rc-menu-button` list when slotted children change. */
+    protected _handleSlotChange(e: Event): void;
+    /** Tracks which child `rc-menu-button` is currently open. */
+    protected _handleMenuButtonToggle(e: CustomEvent<RCMenuButtonToggleEvent>): void;
+    /**
+     * Routes keyboard navigation actions to item focus and menu open/close changes.
+     *
+     * When a menu is open, moving to an adjacent item closes the current menu and
+     * opens the one attached to the newly focused trigger.
+     *
+     * @param action - the navigation action produced by the keydown handler
+     */
+    protected _handleNavigate(action: KeyboardNavigationAction): void;
+    /** Opens the menu attached to the last-focused trigger. */
+    protected _openCurrentMenu(): void;
+    /** Translates keyboard events to navigation actions and activates keyboard interaction mode. */
+    protected _handleKeydown(e: KeyboardEvent): void;
+    /** Clears keyboard interaction mode on pointer click. */
+    protected _handleClick(): void;
     protected render(): import('lit').TemplateResult<1>;
 }
 export default RCMenubar;

package/package.json

@@ -3,14 +3,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
-  "description": "Headless WAI-ARIA menubar with roving tabindex, built with Lit",
+  "version": "0.3.1",
+  "description": "Menubar coordinator for rc-menu-button children with roving tabindex and submenu handoff.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
     "directory": "packages/rc-menubar"
   },
-  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-menubar",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -37,24 +37,21 @@
   ],
   "customElements": "dist/custom-elements.json",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build && cem analyze",
     "cem:analyze": "cem analyze",
     "preview": "vite preview",
-    "test:browser": "vitest",
-    "test:browser:chrome": "vitest --project=chromium",
-    "test:browser:firefox": "vitest --project=firefox",
-    "yalc:publish": "yalc publish --push"
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
   },
   "dependencies": {
-    "@rcarls/rc-common": "workspace:^",
-    "@rcarls/rc-menu": "workspace:^",
-    "@rcarls/rc-menu-button": "workspace:^",
+    "@rcarls/rc-common": "workspace:*",
+    "@rcarls/rc-menu": "workspace:*",
+    "@rcarls/rc-menu-button": "workspace:*",
     "@types/node": "^25.6.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",
-    "@guanghechen/rollup-plugin-copy": "^6.0.9",
     "@vitest/browser-playwright": "4.1.5",
     "lit": "^3.0.0",
     "playwright": "^1.56.0",

package/dist/demo.css

@@ -1,85 +0,0 @@
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-:root {
-  color-scheme: light dark;
-  --rc-accent: Highlight; /* Chrome doesn't support AccentColor on the open web */
-}
-
-@supports (color: AccentColor) {
-  :root {
-    --rc-accent: AccentColor;
-  }
-}
-
-[data-theme="light"] { color-scheme: light; }
-[data-theme="dark"]  { color-scheme: dark;  }
-
-[data-theme="solarized-light"] {
-  color-scheme: light;
-  --rc-surface: #fdf6e3;
-  --rc-text:    #657b83;
-  --rc-border:  1px solid #93a1a1;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .12);
-}
-
-[data-theme="solarized-dark"] {
-  color-scheme: dark;
-  --rc-surface: #002b36;
-  --rc-text:    #839496;
-  --rc-border:  1px solid #586e75;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .3);
-}
-
-body {
-  font-family: system-ui, sans-serif;
-  margin: 0;
-}
-
-.demo-page {
-  max-width: 60rem;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-}
-
-.demo-controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid ButtonBorder;
-}
-
-.demo-controls .demo-title {
-  flex: 1;
-}
-
-.demo-controls h1 {
-  margin: 0 0 0.15rem;
-  font-size: 1.5rem;
-}
-
-.demo-controls a {
-  font-size: 0.8rem;
-}
-
-.demo-section {
-  margin-bottom: 2rem;
-}
-
-.demo-section h2 {
-  margin: 0 0 0.5rem;
-}
-
-.theme-picker {
-  padding: 0.35em 0.75em;
-  font-family: inherit;
-  font-size: 0.8rem;
-  cursor: pointer;
-  border: 1px solid ButtonBorder;
-  border-radius: 4px;
-  background: Canvas;
-  color: CanvasText;
-}