@rcarls/rc-menubar 0.3.1 → 0.4.0

package/README.md

@@ -118,7 +118,7 @@ Place `rc-menu-button` elements as direct children. The menubar manages focus an
 ### Public methods
 
 ```ts
-focusItem(item?: HTMLElement | null): void
+focusItem($item?: HTMLElement | null): void
   // Focus a specific trigger element.
 
 closeActiveMenu(): void
@@ -128,12 +128,12 @@ closeActiveMenu(): void
 ### Read-only getters
 
 ```ts
-items: HTMLElement[]           // All trigger elements across all child rc-menu-buttons
-menuButtons: RCMenuButton[]    // All child rc-menu-button elements
-firstItem: HTMLElement | undefined
-lastItem: HTMLElement | undefined
-nextItem: HTMLElement | undefined    // Relative to last-focused trigger
-previousItem: HTMLElement | undefined
+$items: HTMLElement[]           // All trigger elements across all child rc-menu-buttons
+$menuButtons: RCMenuButton[]    // All child rc-menu-button elements
+$firstItem: HTMLElement | undefined
+$lastItem: HTMLElement | undefined
+$nextItem: HTMLElement | undefined    // Relative to last-focused trigger
+$previousItem: HTMLElement | undefined
 ```
 
 ---

package/dist/custom-elements.json

@@ -352,7 +352,7 @@
               "name": "focusItem",
               "parameters": [
                 {
-                  "name": "item",
+                  "name": "$item",
                   "optional": true,
                   "type": {
                     "text": "HTMLElement | null"
@@ -463,21 +463,21 @@
           ],
           "attributes": [
             {
+              "description": "Accessible label for the `role=\"menubar\"` element.",
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "'Menu'",
-              "description": "Accessible label for the `role=\"menubar\"` element.",
               "fieldName": "label"
             },
             {
+              "description": "Orientation of the menubar, controls which arrow keys move between items.",
               "name": "orientation",
               "type": {
                 "text": "'horizontal' | 'vertical'"
               },
               "default": "'horizontal'",
-              "description": "Orientation of the menubar, controls which arrow keys move between items.",
               "fieldName": "orientation"
             }
           ],

package/dist/{rc-menubar-tmPcN84a.js → rc-menubar-VPb8lXg9.js}

@@ -151,7 +151,7 @@ const $ = {
   /**
    * Moves focus to a trigger element.
    *
-   * @param item - trigger to focus; no-ops when `null` or `undefined`
+   * @param $item - trigger to focus; no-ops when `null` or `undefined`
    */
   focusItem(t) {
     t?.focus();
@@ -269,4 +269,4 @@ u([
 export {
   s as R
 };
-//# sourceMappingURL=rc-menubar-tmPcN84a.js.map
+//# sourceMappingURL=rc-menubar-VPb8lXg9.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-menubar-VPb8lXg9.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 * @attr label - Accessible label for the `role=\"menubar\"` element.\n * @attr orientation - Layout direction and keyboard navigation axis, propagated to\n *   child `rc-menu-button` elements.\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","index","$trigger","$item","$activeMenuButton","e","$target","$elements","prevButtons","$items","action","wasMenuOpen","key","navNext","navPrev","html","RCMenubar","__decorateClass","property","state"],"mappings":"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"}

package/dist/rc-menubar-define.js

@@ -1,5 +1,5 @@
 import "@rcarls/rc-menu-button/define";
-import { R as e } from "./rc-menubar-tmPcN84a.js";
+import { R as e } from "./rc-menubar-VPb8lXg9.js";
 customElements.get("rc-menubar") || customElements.define("rc-menubar", e);
 export {
   e as RCMenubar

package/dist/rc-menubar.js

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

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

@@ -21,6 +21,10 @@ declare global {
  *
  * @csspart root - The root container element
  *
+ * @attr label - Accessible label for the `role="menubar"` element.
+ * @attr orientation - Layout direction and keyboard navigation axis, propagated to
+ *   child `rc-menu-button` elements.
+ *
  * @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
@@ -89,9 +93,9 @@ export declare class RCMenubar extends LitElement {
     /**
      * Moves focus to a trigger element.
      *
-     * @param item - trigger to focus; no-ops when `null` or `undefined`
+     * @param $item - trigger to focus; no-ops when `null` or `undefined`
      */
-    focusItem(item?: HTMLElement | null): void;
+    focusItem($item?: HTMLElement | null): void;
     /** Closes the currently open child menu without returning focus to its trigger. */
     closeActiveMenu(): void;
     /** Updates roving-tabindex state when a trigger element receives focus. */

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Menubar coordinator for rc-menu-button children with roving tabindex and submenu handoff.",
   "repository": {
     "type": "git",

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

@@ -1 +0,0 @@
-{"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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"}