npm - @rcarls/rc-menu - Versions diffs - 0.6.0 → 0.7.0 - Mend

@rcarls/rc-menu 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/CHANGELOG.md +85 -0
package/dist/custom-elements.json +42 -12
package/dist/rc-menu-define.js +1 -1
package/dist/rc-menu-zM-Q3-uP.js +182 -0
package/dist/rc-menu-zM-Q3-uP.js.map +1 -0
package/dist/rc-menu.js +1 -1
package/dist/types/packages/rc-menu/src/rc-menu.d.ts +15 -9
package/package.json +2 -2
package/dist/rc-menu-Df7GAw1H.js +0 -353
package/dist/rc-menu-Df7GAw1H.js.map +0 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,90 @@
 # @rcarls/rc-menu
+## 0.7.0
+### Minor Changes
+- 687a9be: Add shared popup surface tokens: `--rc-popup-background`, `--rc-popup-color`,
+  `--rc-popup-border`, `--rc-popup-radius`, `--rc-popup-shadow`, and
+  `--rc-popup-padding-block`. Menus, adaptive-menu popups, and select and
+  combobox listboxes read them before their own fallbacks. Themes set them at the
+  theme root, so popups rendered inside other shadow roots keep the theme's
+  surface. Select and combobox add `--rc-*-listbox-background` and
+  `--rc-*-listbox-color`.
+  Breaking: popup surfaces no longer fall back to `--rc-control-radius`. Set
+  `--rc-popup-radius` (or the per-component radius token) to change popup
+  corners. The Material, Substrate, and Win31 themes no longer set per-component
+  popup surface tokens such as `--rc-menu-radius` or
+  `--rc-adaptive-menu-popup-background`; override the `--rc-popup-*` tokens
+  instead. Material select and combobox listboxes now use the menu container
+  color, Material forced-colors popups gain a border, and Substrate listboxes use
+  the menu shadow and padding. Material retains its two-layer adaptive-menu popup
+  shadow through a component token while other popups continue using the shared
+  shadow.
+- 6d126fd: Add shared item type tokens: `--rc-item-font-family`, `--rc-item-font-size`,
+  `--rc-item-font-weight`, `--rc-item-line-height`, `--rc-item-letter-spacing`,
+  and `--rc-item-icon-size`. Menu, listbox, and adaptive-menu items read them.
+  Adaptive menu adds `--rc-adaptive-menu-trigger-hover-background`,
+  `--rc-adaptive-menu-trigger-shadow`, and
+  `--rc-adaptive-menu-trigger-active-shadow`, and styles overflowed `rc-button`
+  and `rc-menu-button` rows from its item tokens. Themes declare their menu,
+  adaptive-menu, and item tokens on the theme root, so menus inside other shadow
+  roots match menus in the document. Substrate's adaptive-menu trigger now shows
+  its hover background.
+  Breaking: theme menu and adaptive-menu tokens are inherited from the theme root
+  instead of set on each element, so a value set on an ancestor now reaches
+  nested menus. Material sets menu, listbox, and adaptive-menu item type through
+  `--rc-item-*` instead of per-component rules; override those tokens to change
+  item type. Themes no longer style the adaptive-menu trigger through
+  `::part(overflow-trigger)` hover and pressed rules; use the new trigger tokens.
+### Patch Changes
+- 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
+  and light-DOM structural styles through Lightning CSS, removing comments and
+  whitespace while keeping source maps that resolve to each template. Rendered
+  styles are unchanged.
+  `@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
+  string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
+  depend on `@rcarls/rc-common` for it.
+- Updated dependencies [e3dfa59]
+- Updated dependencies [50d5610]
+- Updated dependencies [9ee769c]
+- Updated dependencies [1179f24]
+- Updated dependencies [595fe37]
+- Updated dependencies [38cd00c]
+- Updated dependencies [5c006de]
+- Updated dependencies [a6553ff]
+- Updated dependencies [2205478]
+- Updated dependencies [4341311]
+- Updated dependencies [899bb5e]
+- Updated dependencies [25fcfe0]
+- Updated dependencies [51f6403]
+- Updated dependencies [9caca6b]
+- Updated dependencies [b764a3c]
+- Updated dependencies [54d9ead]
+- Updated dependencies [b9175e9]
+- Updated dependencies [c8b762b]
+- Updated dependencies [55e1e7f]
+- Updated dependencies [f1ca82d]
+- Updated dependencies [b87f27b]
+- Updated dependencies [32ebead]
+- Updated dependencies [bfefedd]
+- Updated dependencies [c130173]
+- Updated dependencies [11680b6]
+- Updated dependencies [223d36c]
+- Updated dependencies [7b91a44]
+- Updated dependencies [aa04ead]
+- Updated dependencies [ac65b5b]
+- Updated dependencies [afcfef8]
+- Updated dependencies [11ef1ad]
+  - @rcarls/rc-common@0.7.0
 ## 0.6.0
 ### Patch Changes

package/dist/custom-elements.json CHANGED Viewed

@@ -57,32 +57,32 @@
             {
               "description": "Block (top/bottom) padding inside the panel.",
               "name": "--rc-menu-padding-block",
-              "default": "0.25em"
+              "default": "var(--rc-popup-padding-block)"
             },
             {
-              "description": "Background color; falls back through --rc-surface.",
+              "description": "Background color.",
               "name": "--rc-menu-background",
-              "default": "Canvas"
+              "default": "var(--rc-popup-background)"
             },
             {
-              "description": "Border; falls back through --rc-border.",
+              "description": "Border.",
               "name": "--rc-menu-border",
-              "default": "1px solid ButtonBorder"
+              "default": "var(--rc-popup-border)"
             },
             {
               "description": "Menu panel border radius.",
               "name": "--rc-menu-radius",
-              "default": "var(--rc-control-radius)"
+              "default": "var(--rc-popup-radius)"
             },
             {
-              "description": "Box shadow; falls back through --rc-shadow.",
+              "description": "Box shadow.",
               "name": "--rc-menu-shadow",
-              "default": "0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)"
+              "default": "var(--rc-popup-shadow)"
             },
             {
-              "description": "Text color; falls back through --rc-field-text.",
+              "description": "Text color.",
               "name": "--rc-menu-color",
-              "default": "CanvasText"
+              "default": "var(--rc-popup-color)"
             },
             {
               "description": "Viewport-aware maximum inline size.",
@@ -192,6 +192,36 @@
               "description": "Text color of `[data-group-label]` section headings.",
               "name": "--rc-menu-group-label-color",
               "default": "GrayText"
+            },
+            {
+              "description": "Item font family; shared with listbox and adaptive-menu items.",
+              "name": "--rc-item-font-family",
+              "default": "var(--rc-font-family)"
+            },
+            {
+              "description": "Item font size; shared with listbox and adaptive-menu items.",
+              "name": "--rc-item-font-size",
+              "default": "var(--rc-font-size)"
+            },
+            {
+              "description": "Item font weight; shared with listbox and adaptive-menu items.",
+              "name": "--rc-item-font-weight",
+              "default": "inherit"
+            },
+            {
+              "description": "Item line height; shared with listbox and adaptive-menu items.",
+              "name": "--rc-item-line-height",
+              "default": "var(--rc-line-height)"
+            },
+            {
+              "description": "Item letter spacing; shared with listbox and adaptive-menu items.",
+              "name": "--rc-item-letter-spacing",
+              "default": "inherit"
+            },
+            {
+              "description": "Size of icons marked with `data-rc-icon`, `data-rc-menu-leading`, or `data-rc-menu-icon`.",
+              "name": "--rc-item-icon-size",
+              "default": "inherit"
             }
           ],
           "slots": [
@@ -298,7 +328,7 @@
                   "type": {
                     "text": "Element | null"
                   },
-                  "description": "The element to make active. No-op when null or undefined."
+                  "description": "the element to make active. No-op when null or undefined"
                 }
               ],
               "description": "Move the virtual cursor to a specific item."
@@ -317,7 +347,7 @@
                   "type": {
                     "text": "number"
                   },
-                  "description": "Zero-based index into the navigable items array."
+                  "description": "zero-based index into the navigable items array"
                 }
               ],
               "description": "Move the virtual cursor to the item at `index`."

package/dist/rc-menu-define.js CHANGED Viewed

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

package/dist/rc-menu-zM-Q3-uP.js ADDED Viewed

@@ -0,0 +1,182 @@
+import { css as u, LitElement as m, html as d } from "lit";
+import { property as h } from "lit/decorators.js";
+import { ActiveDescendantController as v, isFocusable as s, cssText as b } from "@rcarls/rc-common";
+const p = u`:host{box-sizing:border-box;min-width:var(--rc-menu-min-width,10em);padding-block:var(--rc-menu-padding-block,var(--rc-popup-padding-block,var(--rc-control-padding-block,.25em)));background:var(--rc-menu-background,var(--rc-popup-background,var(--rc-surface,Canvas)));border:var(--rc-menu-border,var(--rc-popup-border,var(--rc-border,1px solid ButtonBorder)));border-radius:var(--rc-menu-radius,var(--rc-popup-radius,var(--rc-radius-sm,0)));box-shadow:var(--rc-menu-shadow,var(--rc-popup-shadow,var(--rc-shadow,0 2px 8px color-mix(in srgb, CanvasText 15%, transparent))));color:var(--rc-menu-color,var(--rc-popup-color,var(--rc-field-text,CanvasText)));font-family:var(--rc-item-font-family,var(--rc-font-family,inherit));font-size:var(--rc-item-font-size,var(--rc-font-size,inherit));font-weight:var(--rc-item-font-weight,inherit);line-height:var(--rc-item-line-height,var(--rc-line-height,normal));letter-spacing:var(--rc-item-letter-spacing,inherit);max-inline-size:var(--rc-menu-max-inline-size,calc(100dvi - .5rem));max-block-size:var(--rc-menu-max-block-size,calc(100dvb - .5rem));overscroll-behavior:contain;scrollbar-gutter:stable;flex-direction:column;display:flex;overflow:auto}:host(:focus-visible){outline:var(--rc-focus-ring,auto);outline-offset:var(--rc-focus-ring-offset,0)}`;
+var g = Object.defineProperty, f = (c, e, t, r) => {
+  for (var n = void 0, i = c.length - 1, o; i >= 0; i--)
+    (o = c[i]) && (n = o(e, t, n) || n);
+  return n && g(e, t, n), n;
+};
+const k = ["menuitem", "menuitemcheckbox", "menuitemradio"], x = b`@layer rc-base{rc-menu [role=menuitem],rc-menu [role=menuitemcheckbox],rc-menu [role=menuitemradio],rc-menu button:disabled{align-items:center;gap:var(--rc-menu-item-gap,var(--rc-item-gap,.5em));min-block-size:var(--rc-menu-item-min-block-size,0px);text-align:start;width:100%;padding:var(--rc-menu-item-padding-block,var(--rc-item-padding-block,.3em)) var(--rc-menu-item-padding-inline,var(--rc-item-padding-inline,.75em));appearance:none;box-sizing:border-box;color:inherit;font:inherit;cursor:default;user-select:none;transition:var(--rc-menu-item-transition);background:0 0;border:none;outline:none;flex-shrink:0;text-decoration:none;display:flex}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)}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)}rc-menu [role=menuitemcheckbox]:after,rc-menu [role=menuitemradio]:after{content:"";flex:0 0 var(--rc-menu-check-size,1.25em);text-align:center;color:var(--rc-menu-check-color,inherit);margin-inline-start:auto;line-height:1}rc-menu [role=menuitemcheckbox]:has(:is([data-rc-menu-shortcut],[data-menu-shortcut])):after,rc-menu [role=menuitemradio]:has(:is([data-rc-menu-shortcut],[data-menu-shortcut])):after{margin-inline-start:0}rc-menu [role=menuitemcheckbox][aria-checked=true]:after{content:"✓"}rc-menu [role=menuitemcheckbox][aria-checked=mixed]:after{content:"−"}rc-menu [role=menuitemradio][aria-checked=true]:after{content:"•"}rc-menu [data-rc-menu-leading],rc-menu [data-rc-menu-trailing]{flex:none;justify-content:center;align-items:center;display:inline-flex}rc-menu :is([role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]) :is([data-rc-icon],[data-rc-menu-leading],[data-rc-menu-icon]){font-size:var(--rc-item-icon-size,inherit);line-height:var(--rc-item-icon-size,inherit);flex:none}rc-menu [data-rc-menu-label]{flex:auto;min-inline-size:0}rc-menu [data-rc-menu-trailing],rc-menu [data-rc-menu-shortcut],rc-menu [data-menu-shortcut]{margin-inline-start:auto}rc-menu [data-rc-menu-shortcut],rc-menu [data-menu-shortcut]{font-size:var(--rc-menu-shortcut-size,.8em);color:var(--rc-menu-shortcut-color,GrayText);white-space:nowrap}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,.25em));margin-inline:var(--rc-menu-separator-margin-inline,0px)}rc-menu [role=group]{flex-direction:column;align-items:stretch;display:flex}rc-menu [data-group-label]{padding-block:var(--rc-menu-group-label-padding-block,.1em);padding-inline:var(--rc-menu-item-padding-inline,.75em);color:var(--rc-menu-group-label-color,GrayText);user-select:none;pointer-events:none}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,.55));pointer-events:none}}`;
+var a;
+const l = (a = class extends m {
+  constructor() {
+    super(...arguments), this.label = "", this._$menuItems = [], this._activeDescendantCtrl = new v(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":
+        // Falls through so both activation keys share the same handler.
+        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 = x, 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 || !k.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 = [p], a._$styledRoots = /* @__PURE__ */ new Set(), a);
+f([
+  h({ type: String })
+], l.prototype, "label");
+let A = l;
+export {
+  A as R
+};
+//# sourceMappingURL=rc-menu-zM-Q3-uP.js.map

package/dist/rc-menu-zM-Q3-uP.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"rc-menu-zM-Q3-uP.js","sources":["../src/rc-menu.styles.ts","../src/rc-menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const menuStyles = css`\n :host {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n min-width: var(--rc-menu-min-width, 10em);\n padding-block: var(\n --rc-menu-padding-block,\n var(--rc-popup-padding-block, var(--rc-control-padding-block, 0.25em))\n );\n background: var(--rc-menu-background, var(--rc-popup-background, var(--rc-surface, Canvas)));\n border: var(--rc-menu-border, var(--rc-popup-border, var(--rc-border, 1px solid ButtonBorder)));\n border-radius: var(--rc-menu-radius, var(--rc-popup-radius, var(--rc-radius-sm, 0)));\n box-shadow: var(\n --rc-menu-shadow,\n var(\n --rc-popup-shadow,\n var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent))\n )\n );\n color: var(--rc-menu-color, var(--rc-popup-color, var(--rc-field-text, CanvasText)));\n font-family: var(--rc-item-font-family, var(--rc-font-family, inherit));\n font-size: var(--rc-item-font-size, var(--rc-font-size, inherit));\n font-weight: var(--rc-item-font-weight, inherit);\n line-height: var(--rc-item-line-height, var(--rc-line-height, normal));\n letter-spacing: var(--rc-item-letter-spacing, inherit);\n max-inline-size: var(--rc-menu-max-inline-size, calc(100dvi - 0.5rem));\n max-block-size: var(--rc-menu-max-block-size, calc(100dvb - 0.5rem));\n overflow: auto;\n overscroll-behavior: contain;\n scrollbar-gutter: stable;\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, cssText, isFocusable } from '@rcarls/rc-common';\n\nimport menuStyles from './rc-menu.styles.js';\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 = cssText`\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 flex-shrink: 0;\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 — ::after acts as a fixed-width trailing column,\n pushed to the item's inline-end regardless of label length (same\n positioning as the [data-rc-menu-shortcut] slot below). Trailing rather\n than leading so it coexists with a leading icon a consumer supplies for\n the item itself (a radio/checkbox item's own icon and its checked state\n are different things; leading is already spoken for). Content is empty\n (unchecked) or a Unicode symbol (checked/mixed). Semantic state is\n conveyed by aria-checked; the visual symbol is decorative. */\n rc-menu [role='menuitemcheckbox']::after,\n rc-menu [role='menuitemradio']::after {\n content: '';\n flex: 0 0 var(--rc-menu-check-size, 1.25em);\n margin-inline-start: auto;\n text-align: center;\n line-height: 1;\n color: var(--rc-menu-check-color, inherit);\n }\n\n /* A shortcut owns the auto margin when both trailing affordances exist,\n keeping the shortcut and selection indicator in one end-aligned group. */\n rc-menu [role='menuitemcheckbox']:has(:is([data-rc-menu-shortcut], [data-menu-shortcut]))::after,\n rc-menu [role='menuitemradio']:has(:is([data-rc-menu-shortcut], [data-menu-shortcut]))::after {\n margin-inline-start: 0;\n }\n\n rc-menu [role='menuitemcheckbox'][aria-checked='true']::after {\n content: '✓';\n }\n\n rc-menu [role='menuitemcheckbox'][aria-checked='mixed']::after {\n content: '−';\n }\n\n rc-menu [role='menuitemradio'][aria-checked='true']::after {\n content: '•';\n }\n\n rc-menu [data-rc-menu-leading],\n rc-menu [data-rc-menu-trailing] {\n flex: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n rc-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])\n :is([data-rc-icon], [data-rc-menu-leading], [data-rc-menu-icon]) {\n flex: none;\n font-size: var(--rc-item-icon-size, inherit);\n line-height: var(--rc-item-icon-size, inherit);\n }\n\n rc-menu [data-rc-menu-label] {\n flex: 1 1 auto;\n min-inline-size: 0;\n }\n\n /* Trailing label — keyboard shortcut or hint, pushed to the inline-end of the item */\n rc-menu [data-rc-menu-trailing],\n rc-menu [data-rc-menu-shortcut],\n rc-menu [data-menu-shortcut] {\n margin-inline-start: auto;\n }\n\n rc-menu [data-rc-menu-shortcut],\n rc-menu [data-menu-shortcut] {\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 /* 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 trailing indicator column via `::after`\n * (coexists with a leading icon the item supplies itself); `aria-checked` is initialized when missing and\n * 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, use `[data-rc-menu-leading]`, `[data-rc-menu-label]`, and\n * `[data-rc-menu-trailing]` to identify content columns. `[data-rc-menu-shortcut]`\n * (and the legacy `[data-menu-shortcut]`) is pushed to the inline-end edge.\n * - Nested menu triggers supply their own trailing indicator through `rc-menu-button`'s `indicator` slot.\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 * @attr label - Accessible label for the menu; synced to `aria-label` on the host.\n *\n * @cssprop [--rc-menu-min-width=10em] - Minimum width of the menu panel.\n * @cssprop [--rc-menu-padding-block=var(--rc-popup-padding-block)] - Block (top/bottom) padding inside the panel.\n * @cssprop [--rc-menu-background=var(--rc-popup-background)] - Background color.\n * @cssprop [--rc-menu-border=var(--rc-popup-border)] - Border.\n * @cssprop [--rc-menu-radius=var(--rc-popup-radius)] - Menu panel border radius.\n * @cssprop [--rc-menu-shadow=var(--rc-popup-shadow)] - Box shadow.\n * @cssprop [--rc-menu-color=var(--rc-popup-color)] - Text color.\n * @cssprop [--rc-menu-max-inline-size=calc(100dvi - 0.5rem)] - Viewport-aware maximum inline size.\n * @cssprop [--rc-menu-max-block-size=calc(100dvb - 0.5rem)] - Viewport-aware maximum block size; taller menus scroll.\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 trailing 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-rc-menu-shortcut]` labels.\n * @cssprop [--rc-menu-shortcut-color=GrayText] - Text color of `[data-rc-menu-shortcut]` labels.\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 * @cssprop [--rc-item-font-family=var(--rc-font-family)] - Item font family; shared with listbox and adaptive-menu items.\n * @cssprop [--rc-item-font-size=var(--rc-font-size)] - Item font size; shared with listbox and adaptive-menu items.\n * @cssprop [--rc-item-font-weight=inherit] - Item font weight; shared with listbox and adaptive-menu items.\n * @cssprop [--rc-item-line-height=var(--rc-line-height)] - Item line height; shared with listbox and adaptive-menu items.\n * @cssprop [--rc-item-letter-spacing=inherit] - Item letter spacing; shared with listbox and adaptive-menu items.\n * @cssprop [--rc-item-icon-size=inherit] - Size of icons marked with `data-rc-icon`, `data-rc-menu-leading`, or `data-rc-menu-icon`.\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) {\n return;\n }\n\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') {\n continue;\n }\n\n if (role === 'group') {\n for (const $child of $el.children) {\n if (isFocusable($child)) {\n $items.push($child);\n }\n }\n\n continue;\n }\n\n if (isFocusable($el)) {\n $items.push($el);\n }\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 // Falls through so both activation keys share the same handler.\n\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: $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","cssText","_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.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { R as r } from "./rc-menu-Df7GAw1H.js";
+import { R as r } from "./rc-menu-zM-Q3-uP.js";
 export {
   r as RCMenu
 };

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

@@ -43,12 +43,12 @@ export interface RCMenuActivateEvent {
  * @attr label - Accessible label for the menu; synced to `aria-label` on the host.
  *
  * @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-color=CanvasText] - Text color; falls back through --rc-field-text.
+ * @cssprop [--rc-menu-padding-block=var(--rc-popup-padding-block)] - Block (top/bottom) padding inside the panel.
+ * @cssprop [--rc-menu-background=var(--rc-popup-background)] - Background color.
+ * @cssprop [--rc-menu-border=var(--rc-popup-border)] - Border.
+ * @cssprop [--rc-menu-radius=var(--rc-popup-radius)] - Menu panel border radius.
+ * @cssprop [--rc-menu-shadow=var(--rc-popup-shadow)] - Box shadow.
+ * @cssprop [--rc-menu-color=var(--rc-popup-color)] - Text color.
  * @cssprop [--rc-menu-max-inline-size=calc(100dvi - 0.5rem)] - Viewport-aware maximum inline size.
  * @cssprop [--rc-menu-max-block-size=calc(100dvb - 0.5rem)] - Viewport-aware maximum block size; taller menus scroll.
  * @cssprop [--rc-menu-item-min-block-size=0] - Minimum block size for menu item rows.
@@ -71,6 +71,12 @@ export interface RCMenuActivateEvent {
  * @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.
+ * @cssprop [--rc-item-font-family=var(--rc-font-family)] - Item font family; shared with listbox and adaptive-menu items.
+ * @cssprop [--rc-item-font-size=var(--rc-font-size)] - Item font size; shared with listbox and adaptive-menu items.
+ * @cssprop [--rc-item-font-weight=inherit] - Item font weight; shared with listbox and adaptive-menu items.
+ * @cssprop [--rc-item-line-height=var(--rc-line-height)] - Item line height; shared with listbox and adaptive-menu items.
+ * @cssprop [--rc-item-letter-spacing=inherit] - Item letter spacing; shared with listbox and adaptive-menu items.
+ * @cssprop [--rc-item-icon-size=inherit] - Size of icons marked with `data-rc-icon`, `data-rc-menu-leading`, or `data-rc-menu-icon`.
  */
 export declare class RCMenu extends LitElement {
     static styles: import('lit').CSSResult[];
@@ -87,7 +93,7 @@ export declare class RCMenu extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: Map<PropertyKey, unknown>): void;
-    protected render(): import('lit').TemplateResult<1>;
+    protected render(): import('lit-html').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. */
@@ -97,13 +103,13 @@ export declare class RCMenu extends LitElement {
     /**
      * Move the virtual cursor to a specific item.
      *
-     * @param $item - The element to make active. No-op when null or undefined.
+     * @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.
+     * @param index - zero-based index into the navigable items array
      */
     focusItemAt(index: number): void;
     protected _syncAriaLabel(): void;

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Menu popup for command surfaces with keyboard navigation and typed activation events.",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
     "test:browser:firefox": "vitest --run --project=firefox"
   },
   "dependencies": {
-    "@rcarls/rc-common": "0.6.0"
+    "@rcarls/rc-common": "0.7.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",

package/dist/rc-menu-Df7GAw1H.js DELETED Viewed

@@ -1,353 +0,0 @@
-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 {
-    box-sizing: border-box;
-    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);
-    max-inline-size: var(--rc-menu-max-inline-size, calc(100dvi - 0.5rem));
-    max-block-size: var(--rc-menu-max-block-size, calc(100dvb - 0.5rem));
-    overflow: auto;
-    overscroll-behavior: contain;
-    scrollbar-gutter: stable;
-  }
-  :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;
-    flex-shrink: 0;
-    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 — ::after acts as a fixed-width trailing column,
-     pushed to the item's inline-end regardless of label length (same
-     positioning as the [data-rc-menu-shortcut] slot below). Trailing rather
-     than leading so it coexists with a leading icon a consumer supplies for
-     the item itself (a radio/checkbox item's own icon and its checked state
-     are different things; leading is already spoken for). 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']::after,
-  rc-menu [role='menuitemradio']::after {
-    content: '';
-    flex: 0 0 var(--rc-menu-check-size, 1.25em);
-    margin-inline-start: auto;
-    text-align: center;
-    line-height: 1;
-    color: var(--rc-menu-check-color, inherit);
-  }
-  /* A shortcut owns the auto margin when both trailing affordances exist,
-     keeping the shortcut and selection indicator in one end-aligned group. */
-  rc-menu [role='menuitemcheckbox']:has(:is([data-rc-menu-shortcut], [data-menu-shortcut]))::after,
-  rc-menu [role='menuitemradio']:has(:is([data-rc-menu-shortcut], [data-menu-shortcut]))::after {
-    margin-inline-start: 0;
-  }
-  rc-menu [role='menuitemcheckbox'][aria-checked='true']::after {
-    content: '✓';
-  }
-  rc-menu [role='menuitemcheckbox'][aria-checked='mixed']::after {
-    content: '−';
-  }
-  rc-menu [role='menuitemradio'][aria-checked='true']::after {
-    content: '•';
-  }
-  rc-menu [data-rc-menu-leading],
-  rc-menu [data-rc-menu-trailing] {
-    flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-  rc-menu [data-rc-menu-label] {
-    flex: 1 1 auto;
-    min-inline-size: 0;
-  }
-  /* Trailing label — keyboard shortcut or hint, pushed to the inline-end of the item */
-  rc-menu [data-rc-menu-trailing],
-  rc-menu [data-rc-menu-shortcut],
-  rc-menu [data-menu-shortcut] {
-    margin-inline-start: auto;
-  }
-  rc-menu [data-rc-menu-shortcut],
-  rc-menu [data-menu-shortcut] {
-    font-size: var(--rc-menu-shortcut-size, 0.8em);
-    color: var(--rc-menu-shortcut-color, GrayText);
-    white-space: nowrap;
-  }
-  /* 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":
-        // Falls through so both activation keys share the same handler.
-        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-Df7GAw1H.js.map

package/dist/rc-menu-Df7GAw1H.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"rc-menu-Df7GAw1H.js","sources":["../src/rc-menu.styles.ts","../src/rc-menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const menuStyles = css`\n :host {\n box-sizing: border-box;\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 max-inline-size: var(--rc-menu-max-inline-size, calc(100dvi - 0.5rem));\n max-block-size: var(--rc-menu-max-block-size, calc(100dvb - 0.5rem));\n overflow: auto;\n overscroll-behavior: contain;\n scrollbar-gutter: stable;\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.js';\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 flex-shrink: 0;\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 — ::after acts as a fixed-width trailing column,\n pushed to the item's inline-end regardless of label length (same\n positioning as the [data-rc-menu-shortcut] slot below). Trailing rather\n than leading so it coexists with a leading icon a consumer supplies for\n the item itself (a radio/checkbox item's own icon and its checked state\n are different things; leading is already spoken for). Content is empty\n (unchecked) or a Unicode symbol (checked/mixed). Semantic state is\n conveyed by aria-checked; the visual symbol is decorative. */\n rc-menu [role='menuitemcheckbox']::after,\n rc-menu [role='menuitemradio']::after {\n content: '';\n flex: 0 0 var(--rc-menu-check-size, 1.25em);\n margin-inline-start: auto;\n text-align: center;\n line-height: 1;\n color: var(--rc-menu-check-color, inherit);\n }\n\n /* A shortcut owns the auto margin when both trailing affordances exist,\n keeping the shortcut and selection indicator in one end-aligned group. */\n rc-menu [role='menuitemcheckbox']:has(:is([data-rc-menu-shortcut], [data-menu-shortcut]))::after,\n rc-menu [role='menuitemradio']:has(:is([data-rc-menu-shortcut], [data-menu-shortcut]))::after {\n margin-inline-start: 0;\n }\n\n rc-menu [role='menuitemcheckbox'][aria-checked='true']::after {\n content: '✓';\n }\n\n rc-menu [role='menuitemcheckbox'][aria-checked='mixed']::after {\n content: '−';\n }\n\n rc-menu [role='menuitemradio'][aria-checked='true']::after {\n content: '•';\n }\n\n rc-menu [data-rc-menu-leading],\n rc-menu [data-rc-menu-trailing] {\n flex: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n rc-menu [data-rc-menu-label] {\n flex: 1 1 auto;\n min-inline-size: 0;\n }\n\n /* Trailing label — keyboard shortcut or hint, pushed to the inline-end of the item */\n rc-menu [data-rc-menu-trailing],\n rc-menu [data-rc-menu-shortcut],\n rc-menu [data-menu-shortcut] {\n margin-inline-start: auto;\n }\n\n rc-menu [data-rc-menu-shortcut],\n rc-menu [data-menu-shortcut] {\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 /* 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 trailing indicator column via `::after`\n * (coexists with a leading icon the item supplies itself); `aria-checked` is initialized when missing and\n * 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, use `[data-rc-menu-leading]`, `[data-rc-menu-label]`, and\n * `[data-rc-menu-trailing]` to identify content columns. `[data-rc-menu-shortcut]`\n * (and the legacy `[data-menu-shortcut]`) is pushed to the inline-end edge.\n * - Nested menu triggers supply their own trailing indicator through `rc-menu-button`'s `indicator` slot.\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 * @attr label - Accessible label for the menu; synced to `aria-label` on the host.\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-color=CanvasText] - Text color; falls back through --rc-field-text.\n * @cssprop [--rc-menu-max-inline-size=calc(100dvi - 0.5rem)] - Viewport-aware maximum inline size.\n * @cssprop [--rc-menu-max-block-size=calc(100dvb - 0.5rem)] - Viewport-aware maximum block size; taller menus scroll.\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 trailing 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-rc-menu-shortcut]` labels.\n * @cssprop [--rc-menu-shortcut-color=GrayText] - Text color of `[data-rc-menu-shortcut]` labels.\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) {\n return;\n }\n\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') {\n continue;\n }\n\n if (role === 'group') {\n for (const $child of $el.children) {\n if (isFocusable($child)) {\n $items.push($child);\n }\n }\n\n continue;\n }\n\n if (isFocusable($el)) {\n $items.push($el);\n }\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 // Falls through so both activation keys share the same handler.\n\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: $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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"}