@rcarls/rc-menu 0.1.0

package/README.md

@@ -0,0 +1,125 @@
+# `@rcarls/rc-menu`
+
+A WAI-ARIA compliant menu component implementing the [Menu pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu/). Manages roving tabindex across slotted items and dispatches typed events on activation and close. Built with [Lit 3](https://lit.dev).
+
+---
+
+## Installation
+
+```bash
+npm install @rcarls/rc-menu
+```
+
+## Import
+
+```js
+import '@rcarls/rc-menu';                    // side-effect: registers <rc-menu>
+import { RCMenu } from '@rcarls/rc-menu';    // named class export
+```
+
+---
+
+## Basic usage
+
+Slot any focusable elements as menu items. Non-focusable elements (separators, headings) are rendered but excluded from keyboard navigation.
+
+```html
+<rc-menu label="File">
+  <button>New</button>
+  <button>Open…</button>
+  <hr aria-hidden="true" />
+  <button disabled>Save</button>
+  <button>Save As…</button>
+</rc-menu>
+```
+
+`rc-menu` is typically used inside an [`rc-menu-button`](../rc-menu-button/README.md) or [`rc-menubar`](../rc-menubar/README.md), which handle positioning and trigger wiring. It can also be used standalone as a context menu.
+
+---
+
+## API
+
+### Properties / attributes
+
+| Property | Attribute | Type | Default | Description |
+|---|---|---|---|---|
+| `label` | `label` | `string` | `''` | Value of the `aria-label` on the menu container. Required for accessibility when no visible label is present. |
+
+### CSS custom properties
+
+| Property | Default | Description |
+|---|---|---|
+| `--rc-menu-min-width` | `10em` | Minimum width of the menu container |
+| `--rc-menu-padding-block` | `0.25em` | Block-axis (top/bottom) padding inside the root |
+| `--rc-menu-background` | `Canvas` | Menu background color (system color keyword) |
+| `--rc-menu-border` | `1px solid ButtonBorder` | Menu border |
+| `--rc-menu-shadow` | `0 2px 8px rgba(0,0,0,0.15)` | Box shadow |
+
+### CSS parts
+
+| Part | Element | Description |
+|---|---|---|
+| `root` | `div[role="menu"]` | The inner menu container |
+
+### Slots
+
+| Slot | Description |
+|---|---|
+| *(default)* | Menu items. Only focusable elements participate in keyboard navigation. `<button>`, `<a href>`, elements with `tabindex`, and `<input>`/`<select>`/`<textarea>` are recognised as focusable; all others are skipped. |
+
+### Events
+
+| Event | Bubbles | Cancelable | Detail | When |
+|---|---|---|---|---|
+| `rc-menu-activate` | Yes (composed) | No | `{ item: HTMLElement }` | User presses Enter or Space on a focused item |
+| `rc-menu-close` | Yes (composed) | No | — | User presses Escape |
+
+### Public methods
+
+```ts
+focusFirst(): void            // Focus the first navigable item
+focusLast(): void             // Focus the last navigable item
+focusItem(item: HTMLElement): void     // Focus a specific item
+focusItemAt(index: number): void       // Focus item at zero-based index
+```
+
+### Read-only getters
+
+```ts
+items: HTMLElement[]          // All currently navigable (focusable) slotted items
+firstItem: HTMLElement | undefined
+lastItem: HTMLElement | undefined
+nextItem: HTMLElement | undefined    // Relative to the currently focused item
+previousItem: HTMLElement | undefined
+```
+
+---
+
+## Keyboard behaviour
+
+| Key | Action |
+|---|---|
+| `ArrowDown` | Focus next item (wraps) |
+| `ArrowUp` | Focus previous item (wraps) |
+| `Home` | Focus first item |
+| `End` | Focus last item |
+| `Enter` / `Space` | Activate focused item (fires `rc-menu-activate`) |
+| `Escape` | Fire `rc-menu-close` |
+
+---
+
+## ARIA
+
+| Attribute | Where | Value |
+|---|---|---|
+| `role="menu"` | Root `div` | — |
+| `aria-label` | Root `div` | Value of `label` property |
+| `role="menuitem"` | Each slotted focusable item | Set dynamically on slot change |
+| `tabindex="0"` | Active item | One item is tabbable at a time (roving tabindex) |
+| `tabindex="-1"` | All other items | 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,253 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-menu",
+          "declaration": {
+            "name": "RCMenu",
+            "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-menu"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-menu.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A menu component, as defined in WAI-ARIA",
+          "name": "RCMenu",
+          "cssProperties": [
+            {
+              "description": "Minimum width of the menu panel",
+              "name": "--rc-menu-min-width",
+              "default": "10em"
+            },
+            {
+              "description": "Block (top/bottom) padding inside the panel",
+              "name": "--rc-menu-padding-block",
+              "default": "0.25em"
+            },
+            {
+              "description": "Background color; falls back through --rc-surface",
+              "name": "--rc-menu-background",
+              "default": "Canvas"
+            },
+            {
+              "description": "Border; falls back through --rc-border",
+              "name": "--rc-menu-border",
+              "default": "1px solid ButtonBorder"
+            },
+            {
+              "description": "Menu panel border radius",
+              "name": "--rc-menu-radius",
+              "default": "var(--rc-control-radius)"
+            },
+            {
+              "description": "Box shadow; falls back through --rc-shadow",
+              "name": "--rc-menu-shadow",
+              "default": "0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)"
+            },
+            {
+              "description": "Menu item block-axis padding",
+              "name": "--rc-menu-item-padding-block",
+              "default": "var(--rc-item-padding-block)"
+            },
+            {
+              "description": "Menu item inline-axis padding",
+              "name": "--rc-menu-item-padding-inline",
+              "default": "var(--rc-item-padding-inline)"
+            },
+            {
+              "description": "Gap between icon and text content in flex menu items",
+              "name": "--rc-menu-item-gap",
+              "default": "var(--rc-item-gap)"
+            },
+            {
+              "description": "Size clamp for direct slotted icon media",
+              "name": "--rc-menu-icon-size",
+              "default": "1.2em"
+            },
+            {
+              "description": "Disabled menu item text color",
+              "name": "--rc-menu-disabled-color",
+              "default": "GrayText"
+            },
+            {
+              "description": "Disabled menu item opacity",
+              "name": "--rc-menu-disabled-opacity",
+              "default": "var(--rc-disabled-opacity)"
+            },
+            {
+              "description": "Separator border",
+              "name": "--rc-menu-separator-border",
+              "default": "var(--rc-border)"
+            },
+            {
+              "description": "Separator block-axis margin",
+              "name": "--rc-menu-separator-margin-block",
+              "default": "var(--rc-control-gap)"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The root container element",
+              "name": "root"
+            }
+          ],
+          "slots": [
+            {
+              "description": "any number of child elements to display in the menu. Only focusable elements are navigable.",
+              "name": "Takes"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for this menu.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "_$root",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "_collectItems",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "FocusableElement[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "slot",
+                  "type": {
+                    "text": "HTMLSlotElement"
+                  }
+                }
+              ],
+              "description": "Collects navigable menu items from the slot, supporting `role=\"group\"`\ncontainers and skipping `role=\"separator\"` elements.\n\nDirect focusable children are included as-is. Elements with\n`role=\"group\"` are traversed one level deep so their focusable children\nparticipate in arrow-key navigation. Separators and non-focusable\ncontainer elements are excluded."
+            },
+            {
+              "kind": "method",
+              "name": "_initItems",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "_onNavigate",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "action",
+                  "type": {
+                    "text": "KeyboardNavigationAction"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "rc-menu-activate",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when a menu item is activated via Enter or Space"
+            },
+            {
+              "name": "rc-menu-close",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when Escape is pressed"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for this menu.",
+              "fieldName": "label"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "RovingTabIndexMixin",
+              "package": "@rcarls/rc-common"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "rc-menu",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCMenu",
+          "declaration": {
+            "name": "RCMenu",
+            "module": "src/rc-menu.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCMenu",
+            "module": "src/rc-menu.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-menu-Bd1Ytmx9.js

@@ -0,0 +1,187 @@
+import { css as m, LitElement as u, html as v } from "lit";
+import { property as h, query as p } from "lit/decorators.js";
+import { RovingTabIndexMixin as b, isFocusable as l, keyNavigation as f } from "@rcarls/rc-common";
+const g = m`
+  :host {
+    display: block;
+  }
+
+  #root {
+    display: flex;
+    flex-direction: column;
+    min-width: var(--rc-menu-min-width, 10em);
+    padding-block: var(--rc-menu-padding-block, var(--rc-control-padding-block, 0.25em));
+    background: var(--rc-menu-background, var(--rc-surface, Canvas));
+    border: var(--rc-menu-border, var(--rc-border, 1px solid ButtonBorder));
+    border-radius: var(--rc-menu-radius, var(--rc-control-radius, 0));
+    box-shadow: var(--rc-menu-shadow, var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)));
+    color: var(--rc-menu-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);
+    overflow: hidden;
+
+    /* Focus styling for keyboard navigation */
+    &[data-interaction-mode='keyboard']:focus-within {
+      outline: var(--rc-focus-ring, auto);
+      outline-offset: var(--rc-focus-ring-offset, 0);
+    }
+  }
+
+  #slot-wrap {
+    display: contents;
+  }
+
+  ::slotted(button),
+  ::slotted([role='menuitem']),
+  ::slotted([role='menuitemradio']),
+  ::slotted([role='menuitemcheckbox']) {
+    display: flex;
+    align-items: center;
+    gap: var(--rc-menu-item-gap, var(--rc-item-gap, 0.5em));
+    width: 100%;
+    text-align: start;
+    padding: var(--rc-menu-item-padding-block, var(--rc-item-padding-block, 0.3em))
+      var(--rc-menu-item-padding-inline, var(--rc-item-padding-inline, 0.75em));
+  }
+
+  ::slotted(svg),
+  ::slotted(img) {
+    flex: 0 0 auto;
+    inline-size: var(--rc-menu-icon-size, 1.2em);
+    block-size: var(--rc-menu-icon-size, 1.2em);
+    max-inline-size: var(--rc-menu-icon-size, 1.2em);
+    max-block-size: var(--rc-menu-icon-size, 1.2em);
+  }
+
+  ::slotted(button:disabled),
+  ::slotted([aria-disabled='true']) {
+    color: var(--rc-menu-disabled-color, var(--rc-text-disabled, GrayText));
+    opacity: var(--rc-menu-disabled-opacity, var(--rc-disabled-opacity, 0.55));
+    cursor: default;
+  }
+
+  /* Groups stack their children vertically and stretch them to full width. */
+  ::slotted([role='group']) {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  ::slotted([role='separator']),
+  ::slotted(hr) {
+    border: none;
+    border-block-start: var(--rc-menu-separator-border, var(--rc-border, 1px solid ButtonBorder));
+    margin-block: var(--rc-menu-separator-margin-block, var(--rc-control-gap, 0.25em));
+  }
+`;
+var x = Object.defineProperty, d = (n, e, t, o) => {
+  for (var r = void 0, i = n.length - 1, c; i >= 0; i--)
+    (c = n[i]) && (r = c(e, t, r) || r);
+  return r && x(e, t, r), r;
+};
+const k = ["menuitem", "menuitemcheckbox", "menuitemradio"], s = class s extends b(u) {
+  constructor() {
+    super(...arguments), this.label = "";
+  }
+  /**
+   * Collects navigable menu items from the slot, supporting `role="group"`
+   * containers and skipping `role="separator"` elements.
+   *
+   * Direct focusable children are included as-is. Elements with
+   * `role="group"` are traversed one level deep so their focusable children
+   * participate in arrow-key navigation. Separators and non-focusable
+   * container elements are excluded.
+   */
+  _collectItems(e) {
+    const t = [];
+    for (const o of e.assignedElements()) {
+      const r = o.getAttribute("role");
+      if (r !== "separator") {
+        if (r === "group") {
+          for (const i of o.children)
+            l(i) && t.push(i);
+          continue;
+        }
+        l(o) && t.push(o);
+      }
+    }
+    return t;
+  }
+  _initItems() {
+    super._initItems(), this.items.forEach((e) => {
+      const t = e.getAttribute("role");
+      (!t || !k.includes(t)) && e.setAttribute("role", "menuitem");
+    });
+  }
+  _onNavigate(e) {
+    switch (e) {
+      case "next":
+        this.focusItem(this.nextItem);
+        break;
+      case "prev":
+        this.focusItem(this.previousItem);
+        break;
+      case "start":
+        this.focusItem(this.firstItem);
+        break;
+      case "end":
+        this.focusItem(this.lastItem);
+        break;
+      case "activate":
+        this._lastFocused && (this._lastFocused.click(), this.dispatchEvent(
+          new CustomEvent("rc-menu-activate", {
+            bubbles: !0,
+            composed: !0,
+            detail: {
+              item: this._lastFocused,
+              value: this._lastFocused.dataset.value ?? this._lastFocused.getAttribute("value") ?? "",
+              text: this._lastFocused.textContent?.trim() ?? ""
+            }
+          })
+        ));
+        break;
+      case "escape":
+        this.dispatchEvent(
+          new CustomEvent("rc-menu-close", {
+            bubbles: !0,
+            composed: !0,
+            detail: { reason: "escape" }
+          })
+        );
+        break;
+    }
+  }
+  render() {
+    return v`
+      <div
+        id="root"
+        part="root"
+        ${f(this._onNavigate, {
+      handleEscape: !0,
+      handleActivate: !0
+    })}
+        data-interaction-mode="keyboard"
+        role="menu"
+        aria-label=${this.label}
+        tabindex="-1"
+      >
+        <div id="slot-wrap" @focusin=${this._handleItemFocus}>
+          <slot id="items" @slotchange=${this._onSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+s.styles = [g];
+let a = s;
+d([
+  h({ type: String })
+], a.prototype, "label");
+d([
+  p("#root", !0)
+], a.prototype, "_$root");
+export {
+  a as R
+};
+//# sourceMappingURL=rc-menu-Bd1Ytmx9.js.map

package/dist/rc-menu-Bd1Ytmx9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-menu-Bd1Ytmx9.js","sources":["../src/rc-menu.styles.ts","../src/rc-menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const menuStyles = css`\n  :host {\n    display: block;\n  }\n\n  #root {\n    display: flex;\n    flex-direction: column;\n    min-width: var(--rc-menu-min-width, 10em);\n    padding-block: var(--rc-menu-padding-block, var(--rc-control-padding-block, 0.25em));\n    background: var(--rc-menu-background, var(--rc-surface, Canvas));\n    border: var(--rc-menu-border, var(--rc-border, 1px solid ButtonBorder));\n    border-radius: var(--rc-menu-radius, var(--rc-control-radius, 0));\n    box-shadow: var(--rc-menu-shadow, var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)));\n    color: var(--rc-menu-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    overflow: hidden;\n\n    /* Focus styling for keyboard navigation */\n    &[data-interaction-mode='keyboard']:focus-within {\n      outline: var(--rc-focus-ring, auto);\n      outline-offset: var(--rc-focus-ring-offset, 0);\n    }\n  }\n\n  #slot-wrap {\n    display: contents;\n  }\n\n  ::slotted(button),\n  ::slotted([role='menuitem']),\n  ::slotted([role='menuitemradio']),\n  ::slotted([role='menuitemcheckbox']) {\n    display: flex;\n    align-items: center;\n    gap: var(--rc-menu-item-gap, var(--rc-item-gap, 0.5em));\n    width: 100%;\n    text-align: start;\n    padding: var(--rc-menu-item-padding-block, var(--rc-item-padding-block, 0.3em))\n      var(--rc-menu-item-padding-inline, var(--rc-item-padding-inline, 0.75em));\n  }\n\n  ::slotted(svg),\n  ::slotted(img) {\n    flex: 0 0 auto;\n    inline-size: var(--rc-menu-icon-size, 1.2em);\n    block-size: var(--rc-menu-icon-size, 1.2em);\n    max-inline-size: var(--rc-menu-icon-size, 1.2em);\n    max-block-size: var(--rc-menu-icon-size, 1.2em);\n  }\n\n  ::slotted(button:disabled),\n  ::slotted([aria-disabled='true']) {\n    color: var(--rc-menu-disabled-color, var(--rc-text-disabled, GrayText));\n    opacity: var(--rc-menu-disabled-opacity, var(--rc-disabled-opacity, 0.55));\n    cursor: default;\n  }\n\n  /* Groups stack their children vertically and stretch them to full width. */\n  ::slotted([role='group']) {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  ::slotted([role='separator']),\n  ::slotted(hr) {\n    border: none;\n    border-block-start: var(--rc-menu-separator-border, var(--rc-border, 1px solid ButtonBorder));\n    margin-block: var(--rc-menu-separator-margin-block, var(--rc-control-gap, 0.25em));\n  }\n`;\n\nexport default menuStyles;\n","import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport {\n  isFocusable,\n  keyNavigation,\n  type FocusableElement,\n  type KeyboardNavigationAction,\n  RovingTabIndexMixin,\n} from '@rcarls/rc-common';\n\nimport menuStyles from './rc-menu.styles';\n\nexport interface RCMenuActivateEvent {\n  item: HTMLElement;\n  value: string;\n  text: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-menu': RCMenu;\n  }\n}\n\n/** WAI-ARIA roles that are valid direct children of `role=\"menu\"`. */\nconst MENU_ITEM_ROLES = ['menuitem', 'menuitemcheckbox', 'menuitemradio'] as const;\n\n/**\n * A menu component, as defined in WAI-ARIA\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/menu/\n * @slot Takes any number of child elements to display in the menu. Only focusable elements are navigable.\n * @fires rc-menu-activate - Fired when a menu item is activated via Enter or Space\n * @fires rc-menu-close - Fired when Escape is pressed\n * @cssprop [--rc-menu-min-width=10em] - Minimum width of the menu panel\n * @cssprop [--rc-menu-padding-block=0.25em] - Block (top/bottom) padding inside the panel\n * @cssprop [--rc-menu-background=Canvas] - Background color; falls back through --rc-surface\n * @cssprop [--rc-menu-border=1px solid ButtonBorder] - Border; falls back through --rc-border\n * @cssprop [--rc-menu-radius=var(--rc-control-radius)] - Menu panel border radius\n * @cssprop [--rc-menu-shadow=0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)] - Box shadow; falls back through --rc-shadow\n * @cssprop [--rc-menu-item-padding-block=var(--rc-item-padding-block)] - Menu item block-axis padding\n * @cssprop [--rc-menu-item-padding-inline=var(--rc-item-padding-inline)] - Menu item inline-axis padding\n * @cssprop [--rc-menu-item-gap=var(--rc-item-gap)] - Gap between icon and text content in flex menu items\n * @cssprop [--rc-menu-icon-size=1.2em] - Size clamp for direct slotted icon media\n * @cssprop [--rc-menu-disabled-color=GrayText] - Disabled menu item text color\n * @cssprop [--rc-menu-disabled-opacity=var(--rc-disabled-opacity)] - Disabled menu item opacity\n * @cssprop [--rc-menu-separator-border=var(--rc-border)] - Separator border\n * @cssprop [--rc-menu-separator-margin-block=var(--rc-control-gap)] - Separator block-axis margin\n * @csspart root - The root container element\n */\nexport class RCMenu extends RovingTabIndexMixin(LitElement) {\n  static styles = [menuStyles];\n\n  /** Accessible label for this menu. */\n  @property({ type: String })\n  label = '';\n\n  @query('#root', true)\n  protected _$root!: HTMLDivElement;\n\n  /**\n   * Collects navigable menu items from the slot, supporting `role=\"group\"`\n   * containers and skipping `role=\"separator\"` elements.\n   *\n   * Direct focusable children are included as-is. Elements with\n   * `role=\"group\"` are traversed one level deep so their focusable children\n   * participate in arrow-key navigation. Separators and non-focusable\n   * container elements are excluded.\n   */\n  protected override _collectItems(slot: HTMLSlotElement): FocusableElement[] {\n    const items: FocusableElement[] = [];\n\n    for (const el of slot.assignedElements()) {\n      const role = el.getAttribute('role');\n\n      if (role === 'separator') continue;\n\n      if (role === 'group') {\n        for (const child of el.children) {\n          if (isFocusable(child)) items.push(child as FocusableElement);\n        }\n        continue;\n      }\n\n      if (isFocusable(el)) items.push(el as FocusableElement);\n    }\n\n    return items;\n  }\n\n  protected override _initItems() {\n    super._initItems(); // sets tabindex 0/−1\n\n    this.items.forEach((el) => {\n      const existingRole = el.getAttribute('role');\n\n      // Preserve explicit WAI-ARIA menu item roles set by the consumer.\n      // Only assign the menuitem default when no valid role is present.\n      if (!existingRole || !MENU_ITEM_ROLES.includes(existingRole as typeof MENU_ITEM_ROLES[number])) {\n        el.setAttribute('role', 'menuitem');\n      }\n    });\n  }\n\n  protected _onNavigate(action: KeyboardNavigationAction) {\n    switch (action) {\n      case 'next':\n        this.focusItem(this.nextItem);\n        break;\n      case 'prev':\n        this.focusItem(this.previousItem);\n        break;\n      case 'start':\n        this.focusItem(this.firstItem);\n        break;\n      case 'end':\n        this.focusItem(this.lastItem);\n        break;\n      case 'activate':\n        if (this._lastFocused) {\n          this._lastFocused.click();\n          this.dispatchEvent(\n            new CustomEvent<RCMenuActivateEvent>('rc-menu-activate', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                item: this._lastFocused,\n                value: this._lastFocused.dataset.value ?? this._lastFocused.getAttribute('value') ?? '',\n                text: this._lastFocused.textContent?.trim() ?? '',\n              },\n            }),\n          );\n        }\n        break;\n      case 'escape':\n        this.dispatchEvent(\n          new CustomEvent('rc-menu-close', {\n            bubbles: true,\n            composed: true,\n            detail: { reason: 'escape' },\n          }),\n        );\n        break;\n    }\n  }\n\n  protected render() {\n    return html`\n      <div\n        id=\"root\"\n        part=\"root\"\n        ${keyNavigation(this._onNavigate, {\n          handleEscape: true,\n          handleActivate: true,\n        })}\n        data-interaction-mode=\"keyboard\"\n        role=\"menu\"\n        aria-label=${this.label}\n        tabindex=\"-1\"\n      >\n        <div id=\"slot-wrap\" @focusin=${this._handleItemFocus}>\n          <slot id=\"items\" @slotchange=${this._onSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default RCMenu;\n"],"names":["menuStyles","css","MENU_ITEM_ROLES","_RCMenu","RovingTabIndexMixin","LitElement","slot","items","el","role","child","isFocusable","existingRole","action","html","keyNavigation","RCMenu","__decorateClass","property","query"],"mappings":"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"}

package/dist/rc-menu-define.js

@@ -0,0 +1,6 @@
+import { R as e } from "./rc-menu-Bd1Ytmx9.js";
+customElements.get("rc-menu") || customElements.define("rc-menu", e);
+export {
+  e as RCMenu
+};
+//# sourceMappingURL=rc-menu-define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-menu-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCMenu } from './index.js';\n\ncustomElements.get('rc-menu') || customElements.define('rc-menu', RCMenu);\n\nexport * from './index.js';\n"],"names":["RCMenu"],"mappings":";AAEA,eAAe,IAAI,SAAS,KAAK,eAAe,OAAO,WAAWA,CAAM;"}

package/dist/rc-menu.js

@@ -0,0 +1,5 @@
+import { R as r } from "./rc-menu-Bd1Ytmx9.js";
+export {
+  r as RCMenu
+};
+//# sourceMappingURL=rc-menu.js.map

package/dist/rc-menu.js.map

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

package/dist/types/define.d.ts

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

package/dist/types/index.d.ts

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

package/dist/types/rc-menu.d.ts

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+import { FocusableElement, KeyboardNavigationAction } from '@rcarls/rc-common';
+export interface RCMenuActivateEvent {
+    item: HTMLElement;
+    value: string;
+    text: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-menu': RCMenu;
+    }
+}
+declare const RCMenu_base: typeof LitElement & (new (...args: any[]) => import('@rcarls/rc-common').RovingTabIndexMixinBase);
+/**
+ * A menu component, as defined in WAI-ARIA
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/menu/
+ * @slot Takes any number of child elements to display in the menu. Only focusable elements are navigable.
+ * @fires rc-menu-activate - Fired when a menu item is activated via Enter or Space
+ * @fires rc-menu-close - Fired when Escape is pressed
+ * @cssprop [--rc-menu-min-width=10em] - Minimum width of the menu panel
+ * @cssprop [--rc-menu-padding-block=0.25em] - Block (top/bottom) padding inside the panel
+ * @cssprop [--rc-menu-background=Canvas] - Background color; falls back through --rc-surface
+ * @cssprop [--rc-menu-border=1px solid ButtonBorder] - Border; falls back through --rc-border
+ * @cssprop [--rc-menu-radius=var(--rc-control-radius)] - Menu panel border radius
+ * @cssprop [--rc-menu-shadow=0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)] - Box shadow; falls back through --rc-shadow
+ * @cssprop [--rc-menu-item-padding-block=var(--rc-item-padding-block)] - Menu item block-axis padding
+ * @cssprop [--rc-menu-item-padding-inline=var(--rc-item-padding-inline)] - Menu item inline-axis padding
+ * @cssprop [--rc-menu-item-gap=var(--rc-item-gap)] - Gap between icon and text content in flex menu items
+ * @cssprop [--rc-menu-icon-size=1.2em] - Size clamp for direct slotted icon media
+ * @cssprop [--rc-menu-disabled-color=GrayText] - Disabled menu item text color
+ * @cssprop [--rc-menu-disabled-opacity=var(--rc-disabled-opacity)] - Disabled menu item opacity
+ * @cssprop [--rc-menu-separator-border=var(--rc-border)] - Separator border
+ * @cssprop [--rc-menu-separator-margin-block=var(--rc-control-gap)] - Separator block-axis margin
+ * @csspart root - The root container element
+ */
+export declare class RCMenu extends RCMenu_base {
+    static styles: import('lit').CSSResult[];
+    /** Accessible label for this menu. */
+    label: string;
+    protected _$root: HTMLDivElement;
+    /**
+     * Collects navigable menu items from the slot, supporting `role="group"`
+     * containers and skipping `role="separator"` elements.
+     *
+     * Direct focusable children are included as-is. Elements with
+     * `role="group"` are traversed one level deep so their focusable children
+     * participate in arrow-key navigation. Separators and non-focusable
+     * container elements are excluded.
+     */
+    protected _collectItems(slot: HTMLSlotElement): FocusableElement[];
+    protected _initItems(): void;
+    protected _onNavigate(action: KeyboardNavigationAction): void;
+    protected render(): import('lit').TemplateResult<1>;
+}
+export default RCMenu;

package/dist/types/rc-menu.styles.d.ts

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

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@rcarls/rc-menu",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "Headless WAI-ARIA menu popup web component built with Lit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-menu"
+  },
+  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-menu.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/rc-menu.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/define.d.ts",
+        "default": "./dist/rc-menu-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-menu-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:^"
+  },
+  "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"
+  }
+}