@rcarls/rc-menubar 0.1.0

package/README.md

@@ -0,0 +1,149 @@
+# `@rcarls/rc-menubar`
+
+A WAI-ARIA compliant menubar component implementing the [Menubar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/). Manages roving tabindex across `rc-menu-button` triggers and cascades menu open/close as the user navigates. Built with [Lit 3](https://lit.dev).
+
+---
+
+## Installation
+
+```bash
+npm install @rcarls/rc-menubar
+```
+
+## Import
+
+```js
+import '@rcarls/rc-menubar';                        // side-effect: registers <rc-menubar>
+import { RCMenubar } from '@rcarls/rc-menubar';     // named class export
+```
+
+`rc-menubar` depends on `rc-menu-button` and `rc-menu`. Ensure all three are installed.
+
+---
+
+## Basic usage
+
+Place `rc-menu-button` elements as direct children. The menubar manages focus and opens the appropriate menu as the user navigates.
+
+```html
+<rc-menubar label="Application menu">
+  <rc-menu-button>
+    <button slot="trigger">File</button>
+    <rc-menu label="File">
+      <button>New</button>
+      <button>Open…</button>
+      <button>Save</button>
+    </rc-menu>
+  </rc-menu-button>
+
+  <rc-menu-button>
+    <button slot="trigger">Edit</button>
+    <rc-menu label="Edit">
+      <button>Undo</button>
+      <button>Redo</button>
+      <button>Cut</button>
+      <button>Copy</button>
+      <button>Paste</button>
+    </rc-menu>
+  </rc-menu-button>
+
+  <rc-menu-button>
+    <button slot="trigger">View</button>
+    <rc-menu label="View">
+      <button>Zoom In</button>
+      <button>Zoom Out</button>
+    </rc-menu>
+  </rc-menu-button>
+</rc-menubar>
+```
+
+---
+
+## API
+
+### Properties / attributes
+
+| Property | Attribute | Type | Default | Description |
+|---|---|---|---|---|
+| `label` | `label` | `string` | `'Menu'` | `aria-label` for the menubar. Required — no visible label is rendered by the component. |
+| `orientation` | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction and keyboard navigation axis. Propagated to child `rc-menu-button` elements for arrow-key open direction. |
+
+### CSS custom properties
+
+| Property | Default | Description |
+|---|---|---|
+| `--rc-menubar-gap` | `0` | Gap between menu buttons |
+| `--rc-menubar-padding-inline` | `0` | Horizontal padding on the menubar container |
+| `--rc-menubar-padding-block` | `0` | Vertical padding on the menubar container |
+
+### CSS parts
+
+| Part | Element | Description |
+|---|---|---|
+| `root` | `div[role="menubar"]` | The inner menubar container |
+
+### Slots
+
+| Slot | Description |
+|---|---|
+| *(default)* | `rc-menu-button` elements. Non-menu-button elements are rendered but excluded from keyboard navigation. |
+
+### Events
+
+`rc-menubar` dispatches no events of its own. Listen for `rc-menu-button-toggle` and `rc-menu-activate` bubbling up from child components.
+
+### Public methods
+
+```ts
+focusItem(item?: HTMLElement | null): void
+  // Focus a specific trigger element.
+
+closeActiveMenu(): void
+  // Close the currently open menu without returning focus to the trigger.
+```
+
+### 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
+```
+
+---
+
+## Keyboard behaviour
+
+Horizontal orientation (default):
+
+| Key | Action |
+|---|---|
+| `ArrowRight` | Focus next trigger (wraps); if a menu is open, closes current and opens next |
+| `ArrowLeft` | Focus previous trigger (wraps); if a menu is open, closes current and opens previous |
+| `Home` | Focus first trigger |
+| `End` | Focus last trigger |
+| `Escape` | Close the active menu; focus remains on trigger |
+| `Tab` | Leaves the menubar (standard tab order) |
+
+For vertical orientation, `ArrowDown`/`ArrowUp` replace `ArrowRight`/`ArrowLeft`. The `rc-menu-button` children automatically inherit the menubar's orientation to determine their own open-axis arrow keys.
+
+---
+
+## ARIA
+
+| Attribute | Where | Value |
+|---|---|---|
+| `role="menubar"` | Root `div` | — |
+| `aria-orientation` | Root `div` | `"horizontal"` or `"vertical"` |
+| `aria-label` | Root `div` | Value of `label` property |
+| `tabindex="0"` | Active trigger | One trigger tabbable at a time (roving tabindex) |
+| `tabindex="-1"` | All other triggers | Removed from tab order |
+
+---
+
+## Browser support
+
+All modern browsers. Requires Web Components support (Chrome 67+, Firefox 63+, Safari 12.1+).

package/dist/custom-elements.json

@@ -0,0 +1,444 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-menubar",
+          "declaration": {
+            "name": "RCMenubar",
+            "module": "/src/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/rc-menubar"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-menubar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A menubar component containing menu buttons, as defined in WAI-ARIA",
+          "name": "RCMenubar",
+          "cssProperties": [
+            {
+              "description": "Gap between menu buttons",
+              "name": "--rc-menubar-gap",
+              "default": "var(--rc-control-gap)"
+            },
+            {
+              "description": "Inline-axis padding",
+              "name": "--rc-menubar-padding-inline",
+              "default": "var(--rc-control-padding-inline)"
+            },
+            {
+              "description": "Block-axis padding",
+              "name": "--rc-menubar-padding-block",
+              "default": "var(--rc-control-padding-block)"
+            },
+            {
+              "description": "Root container border",
+              "name": "--rc-menubar-border",
+              "default": "var(--rc-border)"
+            },
+            {
+              "description": "Root container border radius",
+              "name": "--rc-menubar-radius",
+              "default": "var(--rc-control-radius)"
+            },
+            {
+              "description": "Root container background",
+              "name": "--rc-menubar-background",
+              "default": "Canvas"
+            },
+            {
+              "description": "Root container text color",
+              "name": "--rc-menubar-color",
+              "default": "CanvasText"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The root container element",
+              "name": "root"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Takes rc-menu-button elements to display in the menubar",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Menu'",
+              "description": "Accessible label for this menubar",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "description": "Menubar orientation, for keyboard navigation",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_activeMenuButton",
+              "type": {
+                "text": "WeakRef<RCMenuButton> | undefined"
+              },
+              "privacy": "private",
+              "description": "Reference to the currently open menu button"
+            },
+            {
+              "kind": "field",
+              "name": "_lastFocused",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private",
+              "description": "The last menu button trigger to have focus"
+            },
+            {
+              "kind": "field",
+              "name": "_menuButtons",
+              "type": {
+                "text": "WeakRef<RCMenuButton>[]"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "description": "Array of menu button elements"
+            },
+            {
+              "kind": "field",
+              "name": "_boundHandleKeydown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_boundHandleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_syncHostAria",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Keep ARIA semantics on the custom element host for slotted children."
+            },
+            {
+              "kind": "method",
+              "name": "_syncMenuButtonOrientation",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_getTrigger",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "menuButton",
+                  "type": {
+                    "text": "RCMenuButton"
+                  }
+                }
+              ],
+              "description": "Get the trigger element from a menu button"
+            },
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "description": "Array of focusable trigger elements",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "menuButtons",
+              "type": {
+                "text": "RCMenuButton[]"
+              },
+              "description": "Array of menu button elements",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "firstItem",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "description": "First trigger element",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "lastItem",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "description": "Last trigger element",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "nextItem",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "description": "Next trigger element, in tab-order",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "previousItem",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "description": "Previous trigger element, in tab-order",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_getMenuButtonForTrigger",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "RCMenuButton | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "trigger",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "Get the menu button that contains a trigger"
+            },
+            {
+              "kind": "method",
+              "name": "focusItem",
+              "parameters": [
+                {
+                  "name": "item",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLElement | null"
+                  }
+                }
+              ],
+              "description": "Set focus to a specific trigger element"
+            },
+            {
+              "kind": "method",
+              "name": "closeActiveMenu",
+              "description": "Close any open menu"
+            },
+            {
+              "kind": "method",
+              "name": "_handleItemFocus",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "FocusEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleSlotChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleMenuButtonToggle",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent<RCMenuButtonToggleEvent>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleNavigate",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "action",
+                  "type": {
+                    "text": "KeyboardNavigationAction"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_openCurrentMenu",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleKeydown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_normalizeKey",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Menu'",
+              "description": "Accessible label for this menubar",
+              "fieldName": "label"
+            },
+            {
+              "name": "orientation",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "description": "Menubar orientation, for keyboard navigation",
+              "fieldName": "orientation"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "rc-menubar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCMenubar",
+          "declaration": {
+            "name": "RCMenubar",
+            "module": "src/rc-menubar.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCMenubar",
+            "module": "src/rc-menubar.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/demo.css

@@ -0,0 +1,85 @@
+*, *::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;
+}

package/dist/demo.js

@@ -0,0 +1,40 @@
+const THEMES = ['', 'light', 'dark', 'solarized-light', 'solarized-dark'];
+const LABELS = ['Auto', 'Light', 'Dark', 'Solarized ☀', 'Solarized ☾'];
+
+const stored = localStorage.getItem('rc-demo-theme') ?? '';
+applyTheme(stored);
+
+function applyTheme(theme) {
+  if (theme) {
+    document.documentElement.dataset.theme = theme;
+  } else {
+    delete document.documentElement.dataset.theme;
+  }
+}
+
+function currentIndex() {
+  const current = document.documentElement.dataset.theme ?? '';
+  const idx = THEMES.indexOf(current);
+  return idx === -1 ? 0 : idx;
+}
+
+function updateButtons() {
+  const label = LABELS[currentIndex()];
+  document.querySelectorAll('.theme-picker').forEach((btn) => {
+    btn.textContent = label;
+  });
+}
+
+window.cycleTheme = function () {
+  const next = THEMES[(currentIndex() + 1) % THEMES.length];
+  applyTheme(next);
+  localStorage.setItem('rc-demo-theme', next);
+  updateButtons();
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  updateButtons();
+  document.querySelectorAll('.theme-picker').forEach((btn) => {
+    btn.addEventListener('click', window.cycleTheme);
+  });
+});

package/dist/rc-menubar-BWcf6GHO.js

@@ -0,0 +1,227 @@
+import { css as f, LitElement as g, html as v } from "lit";
+import { property as d, state as m } from "lit/decorators.js";
+import "@rcarls/rc-common";
+const p = f`
+  :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;
+  }
+
+  :host([orientation='vertical']) ::slotted(rc-menu-button) {
+    inline-size: 100%;
+  }
+`;
+var b = Object.defineProperty, u = (c, t, e, n) => {
+  for (var r = void 0, i = c.length - 1, s; i >= 0; i--)
+    (s = c[i]) && (r = s(t, e, r) || r);
+  return r && b(t, e, r), r;
+};
+const l = class l extends g {
+  constructor() {
+    super(...arguments), this.label = "Menu", this.orientation = "horizontal", this._menuButtons = [], this._boundHandleKeydown = this._handleKeydown.bind(this), this._boundHandleClick = this._handleClick.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._syncHostAria(), this.addEventListener("keydown", this._boundHandleKeydown), this.addEventListener("click", this._boundHandleClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._boundHandleKeydown), this.removeEventListener("click", this._boundHandleClick);
+  }
+  updated(t) {
+    super.updated(t), (t.has("label") || t.has("orientation")) && (this._syncHostAria(), this._syncMenuButtonOrientation());
+  }
+  /** Keep ARIA semantics on the custom element host for slotted children. */
+  _syncHostAria() {
+    this.setAttribute("role", "menubar"), this.setAttribute("aria-label", this.label), this.setAttribute("aria-orientation", this.orientation);
+  }
+  _syncMenuButtonOrientation() {
+    this.menuButtons.forEach((t) => {
+      t.orientation = this.orientation;
+    });
+  }
+  /** Get the trigger element from a menu button */
+  _getTrigger(t) {
+    return t.querySelector('[slot="trigger"]');
+  }
+  /** Array of focusable trigger elements */
+  get items() {
+    return this._menuButtons.map((t) => t.deref()).filter((t) => t != null).map((t) => this._getTrigger(t)).filter((t) => t != null);
+  }
+  /** Array of menu button elements */
+  get menuButtons() {
+    return this._menuButtons.map((t) => t.deref()).filter((t) => t != null);
+  }
+  /** First trigger element */
+  get firstItem() {
+    return this.items.at(0);
+  }
+  /** Last trigger element */
+  get lastItem() {
+    return this.items.at(-1);
+  }
+  /** Next trigger element, in tab-order */
+  get nextItem() {
+    const t = this._lastFocused ? this.items.indexOf(this._lastFocused) : 0;
+    return this.items.at((t + 1) % this.items.length);
+  }
+  /** Previous trigger element, in tab-order */
+  get previousItem() {
+    const t = this._lastFocused ? this.items.indexOf(this._lastFocused) : 0;
+    return this.items.at((t - 1) % this.items.length);
+  }
+  /** Get the menu button that contains a trigger */
+  _getMenuButtonForTrigger(t) {
+    return this.menuButtons.find((e) => this._getTrigger(e) === t);
+  }
+  /** Set focus to a specific trigger element */
+  focusItem(t) {
+    t?.focus();
+  }
+  /** Close any open menu */
+  closeActiveMenu() {
+    const t = this._activeMenuButton?.deref();
+    t && (t.closeMenu(!1), this._activeMenuButton = void 0);
+  }
+  _handleItemFocus(t) {
+    const e = t.target;
+    e.slot === "trigger" && (this._lastFocused = e, this.items.forEach((n) => n.setAttribute("tabindex", "-1")), e.setAttribute("tabindex", "0"));
+  }
+  _handleSlotChange(t) {
+    const n = t.currentTarget.assignedElements(), r = this._menuButtons;
+    this._menuButtons = n.filter((i) => i.tagName === "RC-MENU-BUTTON").map((i) => new WeakRef(i)), queueMicrotask(() => {
+      if (!this.isConnected) return;
+      r.forEach((s) => {
+        const o = s.deref();
+        if (!o) return;
+        o.removeAttribute("role");
+        const h = this._getTrigger(o);
+        h?.removeAttribute("tabindex"), h?.removeAttribute("role");
+      }), this.menuButtons.forEach((s) => {
+        s.removeAttribute("role"), s.orientation = this.orientation, this._getTrigger(s)?.setAttribute("role", "menuitem");
+      });
+      const i = this.items;
+      i.forEach((s, o) => {
+        s.setAttribute("tabindex", o === 0 ? "0" : "-1");
+      }), i.length > 0 && !this._lastFocused && (this._lastFocused = i[0]);
+    });
+  }
+  _handleMenuButtonToggle(t) {
+    const e = t.target;
+    t.detail.open ? this._activeMenuButton = new WeakRef(e) : this._activeMenuButton?.deref() === e && (this._activeMenuButton = void 0);
+  }
+  _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;
+    }
+  }
+  _openCurrentMenu() {
+    if (this._lastFocused) {
+      const t = this._getMenuButtonForTrigger(this._lastFocused);
+      t && t.openMenu();
+    }
+  }
+  _handleKeydown(t) {
+    const e = this._normalizeKey(t.key), n = this.orientation === "horizontal" ? "ArrowRight" : "ArrowDown", r = this.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+    let i;
+    e === n ? i = "next" : e === r ? i = "prev" : e === "Home" ? i = "start" : e === "End" ? i = "end" : e === "Escape" ? i = "escape" : e === "Tab" && this.setAttribute("data-interaction-mode", "keyboard"), i && (this._handleNavigate(i), this.setAttribute("data-interaction-mode", "keyboard"), t.stopPropagation(), t.preventDefault());
+  }
+  _handleClick() {
+    this.removeAttribute("data-interaction-mode");
+  }
+  _normalizeKey(t) {
+    switch (t) {
+      case "Up":
+        return "ArrowUp";
+      case "Down":
+        return "ArrowDown";
+      case "Left":
+        return "ArrowLeft";
+      case "Right":
+        return "ArrowRight";
+      default:
+        return t;
+    }
+  }
+  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>
+    `;
+  }
+};
+l.styles = [p];
+let a = l;
+u([
+  d({ type: String })
+], a.prototype, "label");
+u([
+  d({ type: String, reflect: !0 })
+], a.prototype, "orientation");
+u([
+  m()
+], a.prototype, "_activeMenuButton");
+u([
+  m()
+], a.prototype, "_lastFocused");
+export {
+  a as R
+};
+//# sourceMappingURL=rc-menubar-BWcf6GHO.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-menubar-BWcf6GHO.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  }\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 {\n  RCMenuButton,\n  RCMenuButtonToggleEvent,\n} 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\n// Roving tabindex (not aria-activedescendant): trigger buttons need real focus\n// for submenu handoff and screen reader announcements.\n\n/**\n * A menubar component containing menu buttons, as defined in WAI-ARIA\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n * @slot default - Takes rc-menu-button elements to display in the menubar\n * @csspart root - The root container element\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 */\nexport class RCMenubar extends LitElement {\n  static styles = [menubarStyles];\n\n  /** Accessible label for this menubar */\n  @property({ type: String })\n  label = 'Menu';\n\n  /** Menubar orientation, for keyboard navigation */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Reference to the currently open menu button */\n  @state()\n  private _activeMenuButton: WeakRef<RCMenuButton> | undefined;\n\n  /** The last menu button trigger to have focus */\n  @state()\n  private _lastFocused: HTMLElement | undefined;\n\n  /** Array of menu button elements */\n  private _menuButtons: WeakRef<RCMenuButton>[] = [];\n\n  private _boundHandleKeydown = this._handleKeydown.bind(this);\n\n  private _boundHandleClick = this._handleClick.bind(this);\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this._syncHostAria();\n    this.addEventListener('keydown', this._boundHandleKeydown);\n    this.addEventListener('click', this._boundHandleClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('keydown', this._boundHandleKeydown);\n    this.removeEventListener('click', this._boundHandleClick);\n  }\n\n  protected override updated(changedProperties: Map<PropertyKey, unknown>) {\n    super.updated(changedProperties);\n\n    if (\n      changedProperties.has('label') ||\n      changedProperties.has('orientation')\n    ) {\n      this._syncHostAria();\n      this._syncMenuButtonOrientation();\n    }\n  }\n\n  /** Keep ARIA semantics on the custom element host for slotted children. */\n  private _syncHostAria(): void {\n    this.setAttribute('role', 'menubar');\n    this.setAttribute('aria-label', this.label);\n    this.setAttribute('aria-orientation', this.orientation);\n  }\n\n  private _syncMenuButtonOrientation(): void {\n    this.menuButtons.forEach((menuButton) => {\n      menuButton.orientation = this.orientation;\n    });\n  }\n\n  /** Get the trigger element from a menu button */\n  private _getTrigger(menuButton: RCMenuButton): HTMLElement | null {\n    return menuButton.querySelector('[slot=\"trigger\"]');\n  }\n\n  /** Array of focusable trigger elements */\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  /** Array of menu button elements */\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 */\n  get firstItem(): HTMLElement | undefined {\n    return this.items.at(0);\n  }\n\n  /** Last trigger element */\n  get lastItem(): HTMLElement | undefined {\n    return this.items.at(-1);\n  }\n\n  /** Next trigger element, in tab-order */\n  get nextItem(): HTMLElement | undefined {\n    const index = this._lastFocused ? this.items.indexOf(this._lastFocused) : 0;\n    return this.items.at((index + 1) % this.items.length);\n  }\n\n  /** Previous trigger element, in tab-order */\n  get previousItem(): HTMLElement | undefined {\n    const index = this._lastFocused ? this.items.indexOf(this._lastFocused) : 0;\n    return this.items.at((index - 1) % this.items.length);\n  }\n\n  /** Get the menu button that contains a trigger */\n  private _getMenuButtonForTrigger(\n    trigger: HTMLElement,\n  ): RCMenuButton | undefined {\n    return this.menuButtons.find((mb) => this._getTrigger(mb) === trigger);\n  }\n\n  /** Set focus to a specific trigger element */\n  focusItem(item?: HTMLElement | null) {\n    if (item != null) {\n      item.focus();\n    }\n  }\n\n  /** Close any open menu */\n  closeActiveMenu() {\n    const activeMenuButton = this._activeMenuButton?.deref();\n    if (activeMenuButton) {\n      activeMenuButton.closeMenu(false);\n      this._activeMenuButton = undefined;\n    }\n  }\n\n  private _handleItemFocus(e: FocusEvent) {\n    const target = e.target as HTMLElement;\n\n    // Check if focus is on a trigger (slot=\"trigger\")\n    if (target.slot !== 'trigger') return;\n\n    this._lastFocused = target;\n\n    // Set roving tab index\n    this.items.forEach((el) => el.setAttribute('tabindex', '-1'));\n    target.setAttribute('tabindex', '0');\n  }\n\n  private _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) return;\n\n      prevButtons.forEach((ref) => {\n        const menuButton = ref.deref();\n        if (!menuButton) return;\n\n        menuButton.removeAttribute('role');\n\n        const trigger = this._getTrigger(menuButton);\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        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  private _handleMenuButtonToggle(e: CustomEvent<RCMenuButtonToggleEvent>) {\n    const menuButton = e.target as RCMenuButton;\n\n    if (e.detail.open) {\n      // Track the newly opened menu\n      this._activeMenuButton = new WeakRef(menuButton);\n    } else {\n      // Clear active menu if this was the active one\n      if (this._activeMenuButton?.deref() === menuButton) {\n        this._activeMenuButton = undefined;\n      }\n    }\n  }\n\n  private _handleNavigate(action: KeyboardNavigationAction) {\n    const activeMenu = this._activeMenuButton?.deref();\n    const wasMenuOpen = activeMenu?.open ?? false;\n\n    switch (action) {\n      case 'next': {\n        // Close current menu and move to next\n        if (wasMenuOpen) {\n          this.closeActiveMenu();\n        }\n        this.focusItem(this.nextItem);\n        // If a menu was open, open the new one\n        if (wasMenuOpen) {\n          this._openCurrentMenu();\n        }\n        break;\n      }\n      case 'prev': {\n        // Close current menu and move to previous\n        if (wasMenuOpen) {\n          this.closeActiveMenu();\n        }\n        this.focusItem(this.previousItem);\n        // If a menu was open, open the new one\n        if (wasMenuOpen) {\n          this._openCurrentMenu();\n        }\n        break;\n      }\n      case 'start':\n        if (wasMenuOpen) {\n          this.closeActiveMenu();\n        }\n        this.focusItem(this.firstItem);\n        if (wasMenuOpen) {\n          this._openCurrentMenu();\n        }\n        break;\n      case 'end':\n        if (wasMenuOpen) {\n          this.closeActiveMenu();\n        }\n        this.focusItem(this.lastItem);\n        if (wasMenuOpen) {\n          this._openCurrentMenu();\n        }\n        break;\n      case 'escape':\n        this.closeActiveMenu();\n        break;\n    }\n  }\n\n  private _openCurrentMenu() {\n    if (this._lastFocused) {\n      const menuButton = this._getMenuButtonForTrigger(this._lastFocused);\n      if (menuButton) {\n        menuButton.openMenu();\n      }\n    }\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    const key = this._normalizeKey(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) return;\n\n    this._handleNavigate(action);\n    this.setAttribute('data-interaction-mode', 'keyboard');\n    e.stopPropagation();\n    e.preventDefault();\n  }\n\n  private _handleClick(): void {\n    this.removeAttribute('data-interaction-mode');\n  }\n\n  private _normalizeKey(key: string): string {\n    switch (key) {\n      case 'Up':\n        return 'ArrowUp';\n      case 'Down':\n        return 'ArrowDown';\n      case 'Left':\n        return 'ArrowLeft';\n      case 'Right':\n        return 'ArrowRight';\n      default:\n        return key;\n    }\n  }\n\n  protected render() {\n    return html`\n      <div\n        id=\"root\"\n        part=\"root\"\n      >\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","_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":";;;AAEO,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACiCtB,MAAMC,IAAN,MAAMA,UAAkBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAKL,KAAA,QAAQ,QAIR,KAAA,cAAyC,cAWzC,KAAQ,eAAwC,CAAA,GAEhD,KAAQ,sBAAsB,KAAK,eAAe,KAAK,IAAI,GAE3D,KAAQ,oBAAoB,KAAK,aAAa,KAAK,IAAI;AAAA,EAAA;AAAA,EAE9C,oBAAoB;AAC3B,UAAM,kBAAA,GAEN,KAAK,cAAA,GACL,KAAK,iBAAiB,WAAW,KAAK,mBAAmB,GACzD,KAAK,iBAAiB,SAAS,KAAK,iBAAiB;AAAA,EACvD;AAAA,EAES,uBAAuB;AAC9B,UAAM,qBAAA,GAEN,KAAK,oBAAoB,WAAW,KAAK,mBAAmB,GAC5D,KAAK,oBAAoB,SAAS,KAAK,iBAAiB;AAAA,EAC1D;AAAA,EAEmB,QAAQC,GAA8C;AACvE,UAAM,QAAQA,CAAiB,IAG7BA,EAAkB,IAAI,OAAO,KAC7BA,EAAkB,IAAI,aAAa,OAEnC,KAAK,cAAA,GACL,KAAK,2BAAA;AAAA,EAET;AAAA;AAAA,EAGQ,gBAAsB;AAC5B,SAAK,aAAa,QAAQ,SAAS,GACnC,KAAK,aAAa,cAAc,KAAK,KAAK,GAC1C,KAAK,aAAa,oBAAoB,KAAK,WAAW;AAAA,EACxD;AAAA,EAEQ,6BAAmC;AACzC,SAAK,YAAY,QAAQ,CAACC,MAAe;AACvC,MAAAA,EAAW,cAAc,KAAK;AAAA,IAChC,CAAC;AAAA,EACH;AAAA;AAAA,EAGQ,YAAYA,GAA8C;AAChE,WAAOA,EAAW,cAAc,kBAAkB;AAAA,EACpD;AAAA;AAAA,EAGA,IAAI,QAAuB;AACzB,WAAO,KAAK,aACT,IAAI,CAACC,MAAQA,EAAI,OAAO,EACxB,OAAO,CAACC,MAA2BA,KAAM,IAAI,EAC7C,IAAI,CAACC,MAAO,KAAK,YAAYA,CAAE,CAAC,EAChC,OAAO,CAACD,MAA0BA,KAAM,IAAI;AAAA,EACjD;AAAA;AAAA,EAGA,IAAI,cAA8B;AAChC,WAAO,KAAK,aACT,IAAI,CAACD,MAAQA,EAAI,MAAA,CAAO,EACxB,OAAO,CAACC,MAA2BA,KAAM,IAAI;AAAA,EAClD;AAAA;AAAA,EAGA,IAAI,YAAqC;AACvC,WAAO,KAAK,MAAM,GAAG,CAAC;AAAA,EACxB;AAAA;AAAA,EAGA,IAAI,WAAoC;AACtC,WAAO,KAAK,MAAM,GAAG,EAAE;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,WAAoC;AACtC,UAAME,IAAQ,KAAK,eAAe,KAAK,MAAM,QAAQ,KAAK,YAAY,IAAI;AAC1E,WAAO,KAAK,MAAM,IAAIA,IAAQ,KAAK,KAAK,MAAM,MAAM;AAAA,EACtD;AAAA;AAAA,EAGA,IAAI,eAAwC;AAC1C,UAAMA,IAAQ,KAAK,eAAe,KAAK,MAAM,QAAQ,KAAK,YAAY,IAAI;AAC1E,WAAO,KAAK,MAAM,IAAIA,IAAQ,KAAK,KAAK,MAAM,MAAM;AAAA,EACtD;AAAA;AAAA,EAGQ,yBACNC,GAC0B;AAC1B,WAAO,KAAK,YAAY,KAAK,CAACF,MAAO,KAAK,YAAYA,CAAE,MAAME,CAAO;AAAA,EACvE;AAAA;AAAA,EAGA,UAAUC,GAA2B;AACnC,IACEA,GAAK,MAAA;AAAA,EAET;AAAA;AAAA,EAGA,kBAAkB;AAChB,UAAMC,IAAmB,KAAK,mBAAmB,MAAA;AACjD,IAAIA,MACFA,EAAiB,UAAU,EAAK,GAChC,KAAK,oBAAoB;AAAA,EAE7B;AAAA,EAEQ,iBAAiBC,GAAe;AACtC,UAAMC,IAASD,EAAE;AAGjB,IAAIC,EAAO,SAAS,cAEpB,KAAK,eAAeA,GAGpB,KAAK,MAAM,QAAQ,CAACP,MAAOA,EAAG,aAAa,YAAY,IAAI,CAAC,GAC5DO,EAAO,aAAa,YAAY,GAAG;AAAA,EACrC;AAAA,EAEQ,kBAAkBD,GAAU;AAElC,UAAME,IADOF,EAAE,cACO,iBAAA,GAEhBG,IAAc,KAAK;AAMzB,SAAK,eAAeD,EACjB,OAAO,CAACR,MAA2BA,EAAG,YAAY,gBAAgB,EAClE,IAAI,CAACA,MAAO,IAAI,QAAQA,CAAE,CAAC,GAE9B,eAAe,MAAM;AACnB,UAAI,CAAC,KAAK,YAAa;AAEvB,MAAAS,EAAY,QAAQ,CAACV,MAAQ;AAC3B,cAAMD,IAAaC,EAAI,MAAA;AACvB,YAAI,CAACD,EAAY;AAEjB,QAAAA,EAAW,gBAAgB,MAAM;AAEjC,cAAMK,IAAU,KAAK,YAAYL,CAAU;AAC3C,QAAAK,GAAS,gBAAgB,UAAU,GACnCA,GAAS,gBAAgB,MAAM;AAAA,MACjC,CAAC,GAED,KAAK,YAAY,QAAQ,CAACL,MAAe;AACvC,QAAAA,EAAW,gBAAgB,MAAM,GACjCA,EAAW,cAAc,KAAK,aAEd,KAAK,YAAYA,CAAU,GAClC,aAAa,QAAQ,UAAU;AAAA,MAC1C,CAAC;AAED,YAAMY,IAAQ,KAAK;AAEnB,MAAAA,EAAM,QAAQ,CAACP,GAASD,MAAU;AAChC,QAAAC,EAAQ,aAAa,YAAYD,MAAU,IAAI,MAAM,IAAI;AAAA,MAC3D,CAAC,GAEGQ,EAAM,SAAS,KAAK,CAAC,KAAK,iBAC5B,KAAK,eAAeA,EAAM,CAAC;AAAA,IAE/B,CAAC;AAAA,EACH;AAAA,EAEQ,wBAAwBJ,GAAyC;AACvE,UAAMR,IAAaQ,EAAE;AAErB,IAAIA,EAAE,OAAO,OAEX,KAAK,oBAAoB,IAAI,QAAQR,CAAU,IAG3C,KAAK,mBAAmB,MAAA,MAAYA,MACtC,KAAK,oBAAoB;AAAA,EAG/B;AAAA,EAEQ,gBAAgBa,GAAkC;AAExD,UAAMC,IADa,KAAK,mBAAmB,MAAA,GACX,QAAQ;AAExC,YAAQD,GAAA;AAAA,MACN,KAAK,QAAQ;AAEX,QAAIC,KACF,KAAK,gBAAA,GAEP,KAAK,UAAU,KAAK,QAAQ,GAExBA,KACF,KAAK,iBAAA;AAEP;AAAA,MACF;AAAA,MACA,KAAK,QAAQ;AAEX,QAAIA,KACF,KAAK,gBAAA,GAEP,KAAK,UAAU,KAAK,YAAY,GAE5BA,KACF,KAAK,iBAAA;AAEP;AAAA,MACF;AAAA,MACA,KAAK;AACH,QAAIA,KACF,KAAK,gBAAA,GAEP,KAAK,UAAU,KAAK,SAAS,GACzBA,KACF,KAAK,iBAAA;AAEP;AAAA,MACF,KAAK;AACH,QAAIA,KACF,KAAK,gBAAA,GAEP,KAAK,UAAU,KAAK,QAAQ,GACxBA,KACF,KAAK,iBAAA;AAEP;AAAA,MACF,KAAK;AACH,aAAK,gBAAA;AACL;AAAA,IAAA;AAAA,EAEN;AAAA,EAEQ,mBAAmB;AACzB,QAAI,KAAK,cAAc;AACrB,YAAMd,IAAa,KAAK,yBAAyB,KAAK,YAAY;AAClE,MAAIA,KACFA,EAAW,SAAA;AAAA,IAEf;AAAA,EACF;AAAA,EAEQ,eAAeQ,GAAwB;AAC7C,UAAMO,IAAM,KAAK,cAAcP,EAAE,GAAG,GAC9BQ,IAAU,KAAK,gBAAgB,eAAe,eAAe,aAC7DC,IAAU,KAAK,gBAAgB,eAAe,cAAc;AAElE,QAAIJ;AAgBJ,IAdIE,MAAQC,IACVH,IAAS,SACAE,MAAQE,IACjBJ,IAAS,SACAE,MAAQ,SACjBF,IAAS,UACAE,MAAQ,QACjBF,IAAS,QACAE,MAAQ,WACjBF,IAAS,WACAE,MAAQ,SACjB,KAAK,aAAa,yBAAyB,UAAU,GAGlDF,MAEL,KAAK,gBAAgBA,CAAM,GAC3B,KAAK,aAAa,yBAAyB,UAAU,GACrDL,EAAE,gBAAA,GACFA,EAAE,eAAA;AAAA,EACJ;AAAA,EAEQ,eAAqB;AAC3B,SAAK,gBAAgB,uBAAuB;AAAA,EAC9C;AAAA,EAEQ,cAAcO,GAAqB;AACzC,YAAQA,GAAA;AAAA,MACN,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAOA;AAAA,IAAA;AAAA,EAEb;AAAA,EAEU,SAAS;AACjB,WAAOG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOU,KAAK,gBAAgB;AAAA,mCACP,KAAK,uBAAuB;AAAA;AAAA,8BAEjC,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAIlD;AACF;AA5UErB,EAAO,SAAS,CAACF,CAAa;AADzB,IAAMwB,IAANtB;AAKLuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfF,EAKX,WAAA,OAAA;AAIAC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BF,EASX,WAAA,aAAA;AAIQC,EAAA;AAAA,EADPE,EAAA;AAAM,GAZIH,EAaH,WAAA,mBAAA;AAIAC,EAAA;AAAA,EADPE,EAAA;AAAM,GAhBIH,EAiBH,WAAA,cAAA;"}

package/dist/rc-menubar-define.js

@@ -0,0 +1,7 @@
+import "@rcarls/rc-menu-button/define";
+import { R as e } from "./rc-menubar-BWcf6GHO.js";
+customElements.get("rc-menubar") || customElements.define("rc-menubar", e);
+export {
+  e as RCMenubar
+};
+//# sourceMappingURL=rc-menubar-define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-menubar-define.js","sources":["../src/define.ts"],"sourcesContent":["import '@rcarls/rc-menu-button/define';\nimport { RCMenubar } from './index.js';\n\ncustomElements.get('rc-menubar') || customElements.define('rc-menubar', RCMenubar);\n\nexport * from './index.js';\n"],"names":["RCMenubar"],"mappings":";;AAGA,eAAe,IAAI,YAAY,KAAK,eAAe,OAAO,cAAcA,CAAS;"}

package/dist/rc-menubar.js

@@ -0,0 +1,5 @@
+import { R as e } from "./rc-menubar-BWcf6GHO.js";
+export {
+  e as RCMenubar
+};
+//# sourceMappingURL=rc-menubar.js.map

package/dist/rc-menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-menubar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1 @@
+export * from './index.js';

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

@@ -0,0 +1 @@
+export * from './rc-menubar';

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

@@ -0,0 +1,72 @@
+import { LitElement } from 'lit';
+import { RCMenuButton } from '@rcarls/rc-menu-button';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-menubar': RCMenubar;
+    }
+}
+/**
+ * A menubar component containing menu buttons, as defined in WAI-ARIA
+ *
+ * @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
+ * @cssprop [--rc-menubar-border=var(--rc-border)] - Root container border
+ * @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
+ */
+export declare class RCMenubar extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Accessible label for this menubar */
+    label: string;
+    /** Menubar orientation, for keyboard navigation */
+    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;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    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 */
+    focusItem(item?: HTMLElement | null): void;
+    /** Close any open menu */
+    closeActiveMenu(): void;
+    private _handleItemFocus;
+    private _handleSlotChange;
+    private _handleMenuButtonToggle;
+    private _handleNavigate;
+    private _openCurrentMenu;
+    private _handleKeydown;
+    private _handleClick;
+    private _normalizeKey;
+    protected render(): import('lit').TemplateResult<1>;
+}
+export default RCMenubar;

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

@@ -0,0 +1,2 @@
+export declare const menubarStyles: import('lit').CSSResult;
+export default menubarStyles;

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@rcarls/rc-menubar",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "Headless WAI-ARIA menubar with roving tabindex, built with Lit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-menubar"
+  },
+  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-menubar.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-menubar/src/index.d.ts",
+        "default": "./dist/rc-menubar.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-menubar/src/define.d.ts",
+        "default": "./dist/rc-menubar-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-menubar/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-menubar-define.js"
+  ],
+  "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"
+  },
+  "dependencies": {
+    "@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",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}