@rcarls/rc-menu 0.2.0 → 0.3.0

package/dist/rc-menu-Drg26iOK.js

@@ -0,0 +1,323 @@
+import { css as u, LitElement as m, html as d } from "lit";
+import { property as h } from "lit/decorators.js";
+import { ActiveDescendantController as b, isFocusable as s } from "@rcarls/rc-common";
+const v = u`
+  :host {
+    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;
+  }
+
+  :host(:focus-visible) {
+    outline: var(--rc-focus-ring, auto);
+    outline-offset: var(--rc-focus-ring-offset, 0);
+  }
+`;
+var p = Object.defineProperty, g = (o, e, t, r) => {
+  for (var n = void 0, i = o.length - 1, c; i >= 0; i--)
+    (c = o[i]) && (n = c(e, t, n) || n);
+  return n && p(e, t, n), n;
+};
+const f = ["menuitem", "menuitemcheckbox", "menuitemradio"], k = `
+@layer rc-base {
+  /* Item base layout */
+  rc-menu [role='menuitem'],
+  rc-menu [role='menuitemcheckbox'],
+  rc-menu [role='menuitemradio'],
+  rc-menu button:disabled {
+    display: flex;
+    align-items: center;
+    gap: var(--rc-menu-item-gap, var(--rc-item-gap, 0.5em));
+    min-block-size: var(--rc-menu-item-min-block-size, 0px);
+    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));
+    appearance: none;
+    box-sizing: border-box;
+    border: none;
+    background: transparent;
+    text-decoration: none;
+    color: inherit;
+    font: inherit;
+    cursor: default;
+    user-select: none;
+    outline: none;
+    transition: var(--rc-menu-item-transition);
+  }
+
+  /* Pointer hover */
+  rc-menu [role='menuitem']:hover,
+  rc-menu [role='menuitemcheckbox']:hover,
+  rc-menu [role='menuitemradio']:hover {
+    background: var(--rc-menu-hover-bg, color-mix(in srgb, Highlight 8%, transparent));
+    color: var(--rc-menu-hover-color, inherit);
+  }
+
+  /* Virtual cursor (set by ActiveDescendantController) */
+  rc-menu [role='menuitem'][data-active],
+  rc-menu [role='menuitemcheckbox'][data-active],
+  rc-menu [role='menuitemradio'][data-active] {
+    background: var(--rc-menu-active-bg, color-mix(in srgb, Highlight 8%, transparent));
+    color: var(--rc-menu-active-color, inherit);
+  }
+
+  /* Check/radio indicator — ::before acts as a fixed-width leading column.
+     Content is empty (unchecked) or a Unicode symbol (checked/mixed).
+     Semantic state is conveyed by aria-checked; the visual symbol is decorative. */
+  rc-menu [role='menuitemcheckbox']::before,
+  rc-menu [role='menuitemradio']::before {
+    content: '';
+    flex: 0 0 var(--rc-menu-check-size, 1.25em);
+    text-align: center;
+    line-height: 1;
+    color: var(--rc-menu-check-color, inherit);
+  }
+
+  rc-menu [role='menuitemcheckbox'][aria-checked='true']::before {
+    content: '✓';
+  }
+
+  rc-menu [role='menuitemcheckbox'][aria-checked='mixed']::before {
+    content: '−';
+  }
+
+  rc-menu [role='menuitemradio'][aria-checked='true']::before {
+    content: '•';
+  }
+
+  /* Trailing label — keyboard shortcut or hint, pushed to the inline-end of the item */
+  rc-menu [data-menu-shortcut] {
+    margin-inline-start: auto;
+    font-size: var(--rc-menu-shortcut-size, 0.8em);
+    color: var(--rc-menu-shortcut-color, GrayText);
+    white-space: nowrap;
+  }
+
+  /* Submenu indicator for items that open a child menu. */
+  rc-menu [aria-haspopup='menu']::after,
+  rc-menu [aria-haspopup='true']::after {
+    content: var(--rc-menu-submenu-indicator-content, '›');
+    margin-inline-start: auto;
+    font-size: var(--rc-menu-submenu-indicator-size, 1em);
+    color: var(--rc-menu-submenu-indicator-color, currentColor);
+  }
+
+  /* Separators */
+  rc-menu [role='separator'],
+  rc-menu 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));
+    margin-inline: var(--rc-menu-separator-margin-inline, 0px);
+  }
+
+  /* Group containers */
+  rc-menu [role='group'] {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* Optional section label (non-interactive heading above a group of items) */
+  rc-menu [data-group-label] {
+    padding-block: var(--rc-menu-group-label-padding-block, 0.1em);
+    padding-inline: var(--rc-menu-item-padding-inline, 0.75em);
+    color: var(--rc-menu-group-label-color, GrayText);
+    user-select: none;
+    pointer-events: none;
+  }
+
+  /* Disabled items */
+  rc-menu button:disabled,
+  rc-menu [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));
+    pointer-events: none;
+  }
+}
+`;
+var a;
+const l = (a = class extends m {
+  constructor() {
+    super(...arguments), this.label = "", this._menuItems = [], this._activeDescendantCtrl = new b(this, {
+      host: () => this,
+      items: () => this._menuItems
+    }), this._onKeydown = (e) => {
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault(), e.stopPropagation(), this._activeDescendantCtrl.activeItem ? this._activeDescendantCtrl.navigate(1) : this._activeDescendantCtrl.navigateToFirst();
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault(), e.stopPropagation(), this._activeDescendantCtrl.activeItem ? this._activeDescendantCtrl.navigate(-1) : this._activeDescendantCtrl.navigateToLast();
+          break;
+        }
+        case "Home": {
+          e.preventDefault(), e.stopPropagation(), this._activeDescendantCtrl.navigateToFirst();
+          break;
+        }
+        case "End": {
+          e.preventDefault(), e.stopPropagation(), this._activeDescendantCtrl.navigateToLast();
+          break;
+        }
+        case "Enter":
+        case " ": {
+          e.preventDefault(), e.stopPropagation();
+          const t = this._activeDescendantCtrl.activeItem;
+          t && t.click();
+          break;
+        }
+        case "Escape": {
+          e.preventDefault(), e.stopPropagation(), this.dispatchEvent(
+            new CustomEvent("rc-menu-close", {
+              bubbles: !0,
+              composed: !0,
+              detail: { reason: "escape" }
+            })
+          );
+          break;
+        }
+      }
+    }, this._onBlur = () => {
+      this._activeDescendantCtrl.clear();
+    }, this._onClick = (e) => {
+      const r = e.target.closest(
+        '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]'
+      );
+      if (!r || !this.contains(r) || r.matches(':disabled, [aria-disabled="true"]'))
+        return;
+      const n = this._applyCheckedState(r);
+      this.dispatchEvent(
+        new CustomEvent("rc-menu-activate", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            item: r,
+            value: r.dataset.value ?? r.getAttribute("value") ?? "",
+            text: r.textContent?.trim() ?? "",
+            checked: n
+          }
+        })
+      );
+    };
+  }
+  static _ensureBaseStyles(e) {
+    if (a._styledRoots.has(e))
+      return;
+    a._styledRoots.add(e);
+    const t = document.createElement("style");
+    t.setAttribute("data-rc-light-dom-base", "rc-menu"), t.textContent = k, e instanceof Document ? e.head.appendChild(t) : e.appendChild(t);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "menu"), this.setAttribute("tabindex", "0"), this._syncAriaLabel(), this.addEventListener("keydown", this._onKeydown), this.addEventListener("blur", this._onBlur), this.addEventListener("click", this._onClick), a._ensureBaseStyles(this.getRootNode());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("blur", this._onBlur), this.removeEventListener("click", this._onClick);
+  }
+  updated(e) {
+    e.has("label") && this._syncAriaLabel();
+  }
+  render() {
+    return d`<slot @slotchange=${this._onSlotChange}></slot>`;
+  }
+  /** All navigable menu item elements in document order. */
+  get items() {
+    return this._menuItems;
+  }
+  /** Move the virtual cursor and DOM focus to the first navigable item. */
+  focusFirst() {
+    this.focus(), this._activeDescendantCtrl.navigateToFirst();
+  }
+  /** Move the virtual cursor and DOM focus to the last navigable item. */
+  focusLast() {
+    this.focus(), this._activeDescendantCtrl.navigateToLast();
+  }
+  /**
+   * Move the virtual cursor to a specific item.
+   *
+   * @param item - The element to make active. No-op when null or undefined.
+   */
+  focusItem(e) {
+    e && (this.focus(), this._activeDescendantCtrl.navigateToItem(e));
+  }
+  /**
+   * Move the virtual cursor to the item at `index`.
+   *
+   * @param index - Zero-based index into the navigable items array.
+   */
+  focusItemAt(e) {
+    this.focus(), this._activeDescendantCtrl.navigateTo(e);
+  }
+  _syncAriaLabel() {
+    this.label ? this.setAttribute("aria-label", this.label) : this.removeAttribute("aria-label");
+  }
+  _onSlotChange(e) {
+    const t = e.currentTarget;
+    this._menuItems = this._collectMenuItems(t), this._initMenuItems();
+  }
+  /**
+   * 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.
+   */
+  _collectMenuItems(e) {
+    const t = [];
+    for (const r of e.assignedElements()) {
+      const n = r.getAttribute("role");
+      if (n !== "separator") {
+        if (n === "group") {
+          for (const i of r.children)
+            s(i) && t.push(i);
+          continue;
+        }
+        s(r) && t.push(r);
+      }
+    }
+    return t;
+  }
+  _initMenuItems() {
+    this._menuItems.forEach((e) => {
+      const t = e.getAttribute("role");
+      (!t || !f.includes(t)) && e.setAttribute("role", "menuitem"), e.setAttribute("tabindex", "-1"), (e.getAttribute("role") === "menuitemcheckbox" || e.getAttribute("role") === "menuitemradio") && !e.hasAttribute("aria-checked") && e.setAttribute("aria-checked", "false");
+    });
+  }
+  _applyCheckedState(e) {
+    const t = e.getAttribute("role");
+    if (t === "menuitemcheckbox") {
+      const r = e.getAttribute("aria-checked") === "true" ? "false" : "true";
+      return e.setAttribute("aria-checked", r), r;
+    }
+    if (t === "menuitemradio") {
+      const r = e.closest('[role="group"]'), n = r && this.contains(r) ? r : this;
+      for (const i of n.querySelectorAll('[role="menuitemradio"]'))
+        i.closest("rc-menu") === this && i.setAttribute("aria-checked", i === e ? "true" : "false");
+      return "true";
+    }
+  }
+}, a.styles = [v], a._styledRoots = /* @__PURE__ */ new Set(), a);
+g([
+  h({ type: String })
+], l.prototype, "label");
+let C = l;
+export {
+  C as R
+};
+//# sourceMappingURL=rc-menu-Drg26iOK.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-menu-Drg26iOK.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: 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(\n      --rc-menu-shadow,\n      var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent))\n    );\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\n  :host(:focus-visible) {\n    outline: var(--rc-focus-ring, auto);\n    outline-offset: var(--rc-focus-ring-offset, 0);\n  }\n`;\n\nexport default menuStyles;\n","import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { ActiveDescendantController, isFocusable } from '@rcarls/rc-common';\n\nimport menuStyles from './rc-menu.styles';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-menu': RCMenu;\n  }\n}\n\n/** Detail payload for the `rc-menu-activate` event. */\nexport interface RCMenuActivateEvent {\n  /** The activated menu item element. */\n  item: HTMLElement;\n\n  /** The item's `data-value` or `value` attribute, or an empty string. */\n  value: string;\n\n  /** Trimmed text content of the activated item. */\n  text: string;\n\n  /** Current `aria-checked` state for checkbox/radio menu items. */\n  checked?: 'true' | 'false' | 'mixed';\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/** Structural CSS for light-DOM menu items, injected into the containing document or shadow root. */\nconst LIGHT_DOM_CSS = `\n@layer rc-base {\n  /* Item base layout */\n  rc-menu [role='menuitem'],\n  rc-menu [role='menuitemcheckbox'],\n  rc-menu [role='menuitemradio'],\n  rc-menu button:disabled {\n    display: flex;\n    align-items: center;\n    gap: var(--rc-menu-item-gap, var(--rc-item-gap, 0.5em));\n    min-block-size: var(--rc-menu-item-min-block-size, 0px);\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    appearance: none;\n    box-sizing: border-box;\n    border: none;\n    background: transparent;\n    text-decoration: none;\n    color: inherit;\n    font: inherit;\n    cursor: default;\n    user-select: none;\n    outline: none;\n    transition: var(--rc-menu-item-transition);\n  }\n\n  /* Pointer hover */\n  rc-menu [role='menuitem']:hover,\n  rc-menu [role='menuitemcheckbox']:hover,\n  rc-menu [role='menuitemradio']:hover {\n    background: var(--rc-menu-hover-bg, color-mix(in srgb, Highlight 8%, transparent));\n    color: var(--rc-menu-hover-color, inherit);\n  }\n\n  /* Virtual cursor (set by ActiveDescendantController) */\n  rc-menu [role='menuitem'][data-active],\n  rc-menu [role='menuitemcheckbox'][data-active],\n  rc-menu [role='menuitemradio'][data-active] {\n    background: var(--rc-menu-active-bg, color-mix(in srgb, Highlight 8%, transparent));\n    color: var(--rc-menu-active-color, inherit);\n  }\n\n  /* Check/radio indicator — ::before acts as a fixed-width leading column.\n     Content is empty (unchecked) or a Unicode symbol (checked/mixed).\n     Semantic state is conveyed by aria-checked; the visual symbol is decorative. */\n  rc-menu [role='menuitemcheckbox']::before,\n  rc-menu [role='menuitemradio']::before {\n    content: '';\n    flex: 0 0 var(--rc-menu-check-size, 1.25em);\n    text-align: center;\n    line-height: 1;\n    color: var(--rc-menu-check-color, inherit);\n  }\n\n  rc-menu [role='menuitemcheckbox'][aria-checked='true']::before {\n    content: '✓';\n  }\n\n  rc-menu [role='menuitemcheckbox'][aria-checked='mixed']::before {\n    content: '−';\n  }\n\n  rc-menu [role='menuitemradio'][aria-checked='true']::before {\n    content: '•';\n  }\n\n  /* Trailing label — keyboard shortcut or hint, pushed to the inline-end of the item */\n  rc-menu [data-menu-shortcut] {\n    margin-inline-start: auto;\n    font-size: var(--rc-menu-shortcut-size, 0.8em);\n    color: var(--rc-menu-shortcut-color, GrayText);\n    white-space: nowrap;\n  }\n\n  /* Submenu indicator for items that open a child menu. */\n  rc-menu [aria-haspopup='menu']::after,\n  rc-menu [aria-haspopup='true']::after {\n    content: var(--rc-menu-submenu-indicator-content, '›');\n    margin-inline-start: auto;\n    font-size: var(--rc-menu-submenu-indicator-size, 1em);\n    color: var(--rc-menu-submenu-indicator-color, currentColor);\n  }\n\n  /* Separators */\n  rc-menu [role='separator'],\n  rc-menu 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    margin-inline: var(--rc-menu-separator-margin-inline, 0px);\n  }\n\n  /* Group containers */\n  rc-menu [role='group'] {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  /* Optional section label (non-interactive heading above a group of items) */\n  rc-menu [data-group-label] {\n    padding-block: var(--rc-menu-group-label-padding-block, 0.1em);\n    padding-inline: var(--rc-menu-item-padding-inline, 0.75em);\n    color: var(--rc-menu-group-label-color, GrayText);\n    user-select: none;\n    pointer-events: none;\n  }\n\n  /* Disabled items */\n  rc-menu button:disabled,\n  rc-menu [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    pointer-events: none;\n  }\n}\n`;\n\n/**\n * Menu popup for command surfaces with keyboard navigation and typed activation events,\n * following the WAI-ARIA Menu pattern.\n *\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-menu rc-menu docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/menu/ WAI-ARIA Menu pattern}\n *\n * @slot default - Menu items, groups, and separators. Supported content model:\n *   - Focusable elements (`<button>`, `<a>`, `[tabindex]`) become navigable `role=\"menuitem\"` entries.\n *   - `role=\"menuitemcheckbox\"` / `role=\"menuitemradio\"` elements get a leading indicator column via `::before`;\n *     `aria-checked` is initialized when missing and updated on activation.\n *   - `role=\"group\"` divs group related items; label them with `aria-label` or `aria-labelledby`. Optionally\n *     add a visible `[data-group-label]` element as first child of the group for section headings.\n *   - `role=\"separator\"` / `<hr>` produce horizontal dividers between sections.\n *   - Within any item, `[data-menu-shortcut]` elements are pushed to the inline-end edge for keyboard hints.\n *   - Items with `aria-haspopup=\"menu\"` or `aria-haspopup=\"true\"` get a trailing submenu indicator.\n *\n * @fires rc-menu-activate - Fired when a menu item is activated via keyboard (Enter/Space) or pointer click.\n * @fires rc-menu-close - Fired when Escape is pressed.\n *\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-min-block-size=0] - Minimum block size for menu item rows.\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 flex children inside each item.\n * @cssprop [--rc-menu-item-transition] - CSS transition applied to each item row.\n * @cssprop [--rc-menu-hover-bg=color-mix(in srgb, Highlight 8%, transparent)] - Pointer-hover background.\n * @cssprop [--rc-menu-hover-color=inherit] - Pointer-hover text color.\n * @cssprop [--rc-menu-active-bg=color-mix(in srgb, Highlight 8%, transparent)] - Virtual-cursor active background.\n * @cssprop [--rc-menu-active-color=inherit] - Virtual-cursor active text color.\n * @cssprop [--rc-menu-check-size=1.25em] - Width of the leading indicator column for checkbox/radio items.\n * @cssprop [--rc-menu-check-color=inherit] - Color of the check/radio symbol.\n * @cssprop [--rc-menu-shortcut-size=0.8em] - Font size of `[data-menu-shortcut]` labels.\n * @cssprop [--rc-menu-shortcut-color=GrayText] - Text color of `[data-menu-shortcut]` labels.\n * @cssprop [--rc-menu-submenu-indicator-content='›'] - Text content for submenu indicators.\n * @cssprop [--rc-menu-submenu-indicator-size=1em] - Font size of submenu indicators.\n * @cssprop [--rc-menu-submenu-indicator-color=currentColor] - Text color of submenu indicators.\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=1px solid ButtonBorder] - Separator border.\n * @cssprop [--rc-menu-separator-margin-block=var(--rc-control-gap)] - Separator block-axis margin.\n * @cssprop [--rc-menu-separator-margin-inline=0px] - Separator inline margin; set to match item padding for inset separators.\n * @cssprop [--rc-menu-group-label-padding-block=0.1em] - Block padding on `[data-group-label]` section headings.\n * @cssprop [--rc-menu-group-label-color=GrayText] - Text color of `[data-group-label]` section headings.\n */\nexport class RCMenu extends LitElement {\n  static styles = [menuStyles];\n\n  private static readonly _styledRoots = new Set<Document | ShadowRoot>();\n\n  private static _ensureBaseStyles(root: Document | ShadowRoot): void {\n    if (RCMenu._styledRoots.has(root)) {\n      return;\n    }\n\n    RCMenu._styledRoots.add(root);\n\n    const style = document.createElement('style');\n\n    style.setAttribute('data-rc-light-dom-base', 'rc-menu');\n    style.textContent = LIGHT_DOM_CSS;\n\n    if (root instanceof Document) {\n      root.head.appendChild(style);\n    } else {\n      root.appendChild(style);\n    }\n  }\n\n  /**\n   * Accessible label for this menu. Synced to `aria-label` on the host.\n   *\n   * Prefer `aria-labelledby` for a visible label associated via ID.\n   */\n  @property({ type: String })\n  label = '';\n\n  protected _menuItems: Element[] = [];\n\n  protected readonly _activeDescendantCtrl = new ActiveDescendantController(this, {\n    host: () => this,\n    items: () => this._menuItems,\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'menu');\n    }\n\n    this.setAttribute('tabindex', '0');\n    this._syncAriaLabel();\n\n    this.addEventListener('keydown', this._onKeydown);\n    this.addEventListener('blur', this._onBlur);\n    this.addEventListener('click', this._onClick);\n\n    RCMenu._ensureBaseStyles(this.getRootNode() as Document | ShadowRoot);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.removeEventListener('keydown', this._onKeydown);\n    this.removeEventListener('blur', this._onBlur);\n    this.removeEventListener('click', this._onClick);\n  }\n\n  protected override updated(changed: Map<PropertyKey, unknown>): void {\n    if (changed.has('label')) {\n      this._syncAriaLabel();\n    }\n  }\n\n  protected override render() {\n    return html`<slot @slotchange=${this._onSlotChange}></slot>`;\n  }\n\n  /** All navigable menu item elements in document order. */\n  get items(): readonly Element[] {\n    return this._menuItems;\n  }\n\n  /** Move the virtual cursor and DOM focus to the first navigable item. */\n  focusFirst(): void {\n    this.focus();\n    this._activeDescendantCtrl.navigateToFirst();\n  }\n\n  /** Move the virtual cursor and DOM focus to the last navigable item. */\n  focusLast(): void {\n    this.focus();\n    this._activeDescendantCtrl.navigateToLast();\n  }\n\n  /**\n   * Move the virtual cursor to a specific item.\n   *\n   * @param item - The element to make active. No-op when null or undefined.\n   */\n  focusItem(item?: Element | null): void {\n    if (!item) return;\n    this.focus();\n    this._activeDescendantCtrl.navigateToItem(item);\n  }\n\n  /**\n   * Move the virtual cursor to the item at `index`.\n   *\n   * @param index - Zero-based index into the navigable items array.\n   */\n  focusItemAt(index: number): void {\n    this.focus();\n    this._activeDescendantCtrl.navigateTo(index);\n  }\n\n  protected _syncAriaLabel(): void {\n    if (this.label) {\n      this.setAttribute('aria-label', this.label);\n    } else {\n      this.removeAttribute('aria-label');\n    }\n  }\n\n  protected _onSlotChange(e: Event): void {\n    const slot = e.currentTarget as HTMLSlotElement;\n\n    this._menuItems = this._collectMenuItems(slot);\n    this._initMenuItems();\n  }\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 _collectMenuItems(slot: HTMLSlotElement): Element[] {\n    const items: Element[] = [];\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);\n        }\n        continue;\n      }\n\n      if (isFocusable(el)) items.push(el);\n    }\n\n    return items;\n  }\n\n  protected _initMenuItems(): void {\n    this._menuItems.forEach((el) => {\n      const existingRole = el.getAttribute('role');\n\n      // Preserve explicit roles; only assign the default when none is present.\n      if (\n        !existingRole ||\n        !MENU_ITEM_ROLES.includes(existingRole as (typeof MENU_ITEM_ROLES)[number])\n      ) {\n        el.setAttribute('role', 'menuitem');\n      }\n\n      el.setAttribute('tabindex', '-1');\n\n      if (\n        (el.getAttribute('role') === 'menuitemcheckbox' ||\n          el.getAttribute('role') === 'menuitemradio') &&\n        !el.hasAttribute('aria-checked')\n      ) {\n        el.setAttribute('aria-checked', 'false');\n      }\n    });\n  }\n\n  protected _applyCheckedState(item: HTMLElement): 'true' | 'false' | 'mixed' | undefined {\n    const role = item.getAttribute('role');\n\n    if (role === 'menuitemcheckbox') {\n      const checked = item.getAttribute('aria-checked') === 'true' ? 'false' : 'true';\n\n      item.setAttribute('aria-checked', checked);\n\n      return checked;\n    }\n\n    if (role === 'menuitemradio') {\n      const group = item.closest('[role=\"group\"]');\n      const scope = group && this.contains(group) ? group : this;\n\n      for (const radio of scope.querySelectorAll<HTMLElement>('[role=\"menuitemradio\"]')) {\n        if (radio.closest('rc-menu') === this) {\n          radio.setAttribute('aria-checked', radio === item ? 'true' : 'false');\n        }\n      }\n\n      return 'true';\n    }\n\n    return undefined;\n  }\n\n  protected _onKeydown = (e: KeyboardEvent): void => {\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (this._activeDescendantCtrl.activeItem) {\n          this._activeDescendantCtrl.navigate(1);\n        } else {\n          this._activeDescendantCtrl.navigateToFirst();\n        }\n\n        break;\n      }\n\n      case 'ArrowUp': {\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (this._activeDescendantCtrl.activeItem) {\n          this._activeDescendantCtrl.navigate(-1);\n        } else {\n          this._activeDescendantCtrl.navigateToLast();\n        }\n\n        break;\n      }\n\n      case 'Home': {\n        e.preventDefault();\n        e.stopPropagation();\n\n        this._activeDescendantCtrl.navigateToFirst();\n\n        break;\n      }\n\n      case 'End': {\n        e.preventDefault();\n        e.stopPropagation();\n\n        this._activeDescendantCtrl.navigateToLast();\n\n        break;\n      }\n\n      case 'Enter':\n      case ' ': {\n        e.preventDefault();\n        e.stopPropagation();\n\n        const active = this._activeDescendantCtrl.activeItem;\n\n        if (active) {\n          // _onClick dispatches rc-menu-activate when the synthetic click bubbles up.\n          (active as HTMLElement).click();\n        }\n\n        break;\n      }\n\n      case 'Escape': {\n        e.preventDefault();\n        e.stopPropagation();\n\n        this.dispatchEvent(\n          new CustomEvent('rc-menu-close', {\n            bubbles: true,\n            composed: true,\n            detail: { reason: 'escape' },\n          }),\n        );\n\n        break;\n      }\n    }\n  };\n\n  protected _onBlur = (): void => {\n    this._activeDescendantCtrl.clear();\n  };\n\n  protected _onClick = (e: MouseEvent): void => {\n    const target = e.target as Element;\n    const item = target.closest<HTMLElement>(\n      '[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]',\n    );\n\n    if (!item || !this.contains(item)) {\n      return;\n    }\n\n    if (item.matches(':disabled, [aria-disabled=\"true\"]')) {\n      return;\n    }\n\n    const checked = this._applyCheckedState(item);\n\n    this.dispatchEvent(\n      new CustomEvent<RCMenuActivateEvent>('rc-menu-activate', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          item,\n          value: item.dataset.value ?? item.getAttribute('value') ?? '',\n          text: item.textContent?.trim() ?? '',\n          checked,\n        },\n      }),\n    );\n  };\n}\n\nexport default RCMenu;\n"],"names":["menuStyles","css","MENU_ITEM_ROLES","LIGHT_DOM_CSS","_RCMenu","_a","LitElement","ActiveDescendantController","active","item","checked","root","style","changed","html","index","slot","items","el","role","child","isFocusable","existingRole","group","scope","radio","__decorateClass","property","RCMenu"],"mappings":"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"}

package/dist/rc-menu-define.js

@@ -1,4 +1,4 @@
-import { R as e } from "./rc-menu-Bd1Ytmx9.js";
+import { R as e } from "./rc-menu-Drg26iOK.js";
 customElements.get("rc-menu") || customElements.define("rc-menu", e);
 export {
   e as RCMenu

package/dist/rc-menu.js

@@ -1,4 +1,4 @@
-import { R as r } from "./rc-menu-Bd1Ytmx9.js";
+import { R as r } from "./rc-menu-Drg26iOK.js";
 export {
   r as RCMenu
 };

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

@@ -0,0 +1,122 @@
+import { LitElement } from 'lit';
+import { ActiveDescendantController } from '@rcarls/rc-common';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-menu': RCMenu;
+    }
+}
+/** Detail payload for the `rc-menu-activate` event. */
+export interface RCMenuActivateEvent {
+    /** The activated menu item element. */
+    item: HTMLElement;
+    /** The item's `data-value` or `value` attribute, or an empty string. */
+    value: string;
+    /** Trimmed text content of the activated item. */
+    text: string;
+    /** Current `aria-checked` state for checkbox/radio menu items. */
+    checked?: 'true' | 'false' | 'mixed';
+}
+/**
+ * Menu popup for command surfaces with keyboard navigation and typed activation events,
+ * following the WAI-ARIA Menu pattern.
+ *
+ *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-menu rc-menu docs}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/menu/ WAI-ARIA Menu pattern}
+ *
+ * @slot default - Menu items, groups, and separators. Supported content model:
+ *   - Focusable elements (`<button>`, `<a>`, `[tabindex]`) become navigable `role="menuitem"` entries.
+ *   - `role="menuitemcheckbox"` / `role="menuitemradio"` elements get a leading indicator column via `::before`;
+ *     `aria-checked` is initialized when missing and updated on activation.
+ *   - `role="group"` divs group related items; label them with `aria-label` or `aria-labelledby`. Optionally
+ *     add a visible `[data-group-label]` element as first child of the group for section headings.
+ *   - `role="separator"` / `<hr>` produce horizontal dividers between sections.
+ *   - Within any item, `[data-menu-shortcut]` elements are pushed to the inline-end edge for keyboard hints.
+ *   - Items with `aria-haspopup="menu"` or `aria-haspopup="true"` get a trailing submenu indicator.
+ *
+ * @fires rc-menu-activate - Fired when a menu item is activated via keyboard (Enter/Space) or pointer click.
+ * @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-min-block-size=0] - Minimum block size for menu item rows.
+ * @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 flex children inside each item.
+ * @cssprop [--rc-menu-item-transition] - CSS transition applied to each item row.
+ * @cssprop [--rc-menu-hover-bg=color-mix(in srgb, Highlight 8%, transparent)] - Pointer-hover background.
+ * @cssprop [--rc-menu-hover-color=inherit] - Pointer-hover text color.
+ * @cssprop [--rc-menu-active-bg=color-mix(in srgb, Highlight 8%, transparent)] - Virtual-cursor active background.
+ * @cssprop [--rc-menu-active-color=inherit] - Virtual-cursor active text color.
+ * @cssprop [--rc-menu-check-size=1.25em] - Width of the leading indicator column for checkbox/radio items.
+ * @cssprop [--rc-menu-check-color=inherit] - Color of the check/radio symbol.
+ * @cssprop [--rc-menu-shortcut-size=0.8em] - Font size of `[data-menu-shortcut]` labels.
+ * @cssprop [--rc-menu-shortcut-color=GrayText] - Text color of `[data-menu-shortcut]` labels.
+ * @cssprop [--rc-menu-submenu-indicator-content='›'] - Text content for submenu indicators.
+ * @cssprop [--rc-menu-submenu-indicator-size=1em] - Font size of submenu indicators.
+ * @cssprop [--rc-menu-submenu-indicator-color=currentColor] - Text color of submenu indicators.
+ * @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=1px solid ButtonBorder] - Separator border.
+ * @cssprop [--rc-menu-separator-margin-block=var(--rc-control-gap)] - Separator block-axis margin.
+ * @cssprop [--rc-menu-separator-margin-inline=0px] - Separator inline margin; set to match item padding for inset separators.
+ * @cssprop [--rc-menu-group-label-padding-block=0.1em] - Block padding on `[data-group-label]` section headings.
+ * @cssprop [--rc-menu-group-label-color=GrayText] - Text color of `[data-group-label]` section headings.
+ */
+export declare class RCMenu extends LitElement {
+    static styles: import('lit').CSSResult[];
+    private static readonly _styledRoots;
+    private static _ensureBaseStyles;
+    /**
+     * Accessible label for this menu. Synced to `aria-label` on the host.
+     *
+     * Prefer `aria-labelledby` for a visible label associated via ID.
+     */
+    label: string;
+    protected _menuItems: Element[];
+    protected readonly _activeDescendantCtrl: ActiveDescendantController;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<PropertyKey, unknown>): void;
+    protected render(): import('lit').TemplateResult<1>;
+    /** All navigable menu item elements in document order. */
+    get items(): readonly Element[];
+    /** Move the virtual cursor and DOM focus to the first navigable item. */
+    focusFirst(): void;
+    /** Move the virtual cursor and DOM focus to the last navigable item. */
+    focusLast(): void;
+    /**
+     * Move the virtual cursor to a specific item.
+     *
+     * @param item - The element to make active. No-op when null or undefined.
+     */
+    focusItem(item?: Element | null): void;
+    /**
+     * Move the virtual cursor to the item at `index`.
+     *
+     * @param index - Zero-based index into the navigable items array.
+     */
+    focusItemAt(index: number): void;
+    protected _syncAriaLabel(): void;
+    protected _onSlotChange(e: Event): void;
+    /**
+     * 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 _collectMenuItems(slot: HTMLSlotElement): Element[];
+    protected _initMenuItems(): void;
+    protected _applyCheckedState(item: HTMLElement): 'true' | 'false' | 'mixed' | undefined;
+    protected _onKeydown: (e: KeyboardEvent) => void;
+    protected _onBlur: () => void;
+    protected _onClick: (e: MouseEvent) => void;
+}
+export default RCMenu;

package/package.json

@@ -3,14 +3,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
-  "description": "Headless WAI-ARIA menu popup web component built with Lit",
+  "version": "0.3.0",
+  "description": "Menu popup for command surfaces with keyboard navigation and typed activation events.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
     "directory": "packages/rc-menu"
   },
-  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-menu",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -20,38 +20,35 @@
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/types/index.d.ts",
+        "types": "./dist/types/packages/rc-menu/src/index.d.ts",
         "default": "./dist/rc-menu.js"
       }
     },
     "./define": {
       "import": {
-        "types": "./dist/types/define.d.ts",
+        "types": "./dist/types/packages/rc-menu/src/define.d.ts",
         "default": "./dist/rc-menu-define.js"
       }
     }
   },
-  "types": "./dist/types/index.d.ts",
+  "types": "./dist/types/packages/rc-menu/src/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"
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
   },
   "dependencies": {
-    "@rcarls/rc-common": "workspace:^"
+    "@rcarls/rc-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",

package/dist/demo.css

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