@rcarls/rc-menu-button 0.1.0 → 0.3.0

package/README.md

@@ -1,6 +1,10 @@
 # `@rcarls/rc-menu-button`
 
-A WAI-ARIA compliant menu button component implementing the [Menu Button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/). Wraps a trigger element and an `rc-menu` popup, wiring ARIA attributes, light-dismiss, and keyboard open/close automatically. Built with [Lit 3](https://lit.dev).
+Trigger button that opens an `rc-menu` popup, following the [WAI-ARIA Menu Button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/).
+
+Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-menu-button](https://richardcarls.github.io/rc-webcomponents/components/rc-menu-button).
+
+Wraps a trigger element and an `rc-menu` popup, wiring ARIA attributes, light-dismiss, and keyboard open/close automatically.
 
 ---
 
@@ -13,7 +17,7 @@ npm install @rcarls/rc-menu-button
 ## Import
 
 ```js
-import '@rcarls/rc-menu-button';                         // side-effect: registers <rc-menu-button>
+import '@rcarls/rc-menu-button/define';                  // side-effect: registers <rc-menu-button>
 import { RCMenuButton } from '@rcarls/rc-menu-button';   // named class export
 ```
 
@@ -54,6 +58,21 @@ The component automatically sets `aria-haspopup="menu"` and `aria-expanded` on t
 
 | Property | Default | Description |
 |---|---|---|
+| `--rc-menu-button-trigger-block-size` | `var(--rc-control-block-size)` | Minimum block size of the trigger |
+| `--rc-menu-button-trigger-padding-block` | `var(--rc-control-padding-block)` | Trigger block-axis padding |
+| `--rc-menu-button-trigger-padding-inline` | `var(--rc-control-padding-inline)` | Trigger inline-axis padding |
+| `--rc-menu-button-trigger-gap` | `var(--rc-item-gap)` | Gap between flex children inside the trigger |
+| `--rc-menu-button-trigger-border` | `var(--rc-border)` | Trigger border |
+| `--rc-menu-button-trigger-radius` | `var(--rc-control-radius)` | Trigger border radius |
+| `--rc-menu-button-trigger-background` | `var(--rc-button-bg)` | Trigger background |
+| `--rc-menu-button-trigger-color` | `var(--rc-button-text)` | Trigger text color |
+| `--rc-menu-button-trigger-transition` | — | Trigger state transition |
+| `--rc-menu-button-trigger-hover-background` | `color-mix(in srgb, Highlight 8%, transparent)` | Trigger hover background |
+| `--rc-menu-button-trigger-hover-color` | `inherit` | Trigger hover text color |
+| `--rc-menu-button-trigger-hover-border-color` | `currentColor` | Trigger hover border color |
+| `--rc-menu-button-trigger-open-background` | `color-mix(in srgb, Highlight 12%, transparent)` | Trigger background while the menu is open |
+| `--rc-menu-button-trigger-open-color` | `inherit` | Trigger text color while the menu is open |
+| `--rc-menu-button-trigger-open-border-color` | `currentColor` | Trigger border color while the menu is open |
 | `--rc-menu-button-popup-z-index` | `1000` | `z-index` of the popup container |
 
 ### CSS parts
@@ -119,7 +138,9 @@ Keyboard handling depends on the resolved `orientation` (horizontal by default,
 
 ## Notes
 
-**Popup positioning** currently uses `position: absolute; top: 100%; left: 0` relative to the host. A future release will migrate to `AnchorController` (CSS Anchor Positioning) to support directional flipping and better viewport-aware placement.
+**Popup positioning** uses `AnchorController`, with native CSS Anchor
+Positioning when available and a viewport-aware fallback otherwise. Set the
+`placement` property or attribute to choose the preferred direction.
 
 **Light dismiss** is active at all times. A capture-phase `click` listener on `document` closes the menu whenever the click falls outside the component boundary (checked via `composedPath()`).
 

package/dist/custom-elements.json

@@ -46,7 +46,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A menu button component that opens/closes a menu popup",
+          "description": "Trigger button that opens an rc-menu popup, following the WAI-ARIA Menu Button pattern.",
           "name": "RCMenuButton",
           "cssProperties": [
             {
@@ -64,6 +64,11 @@
               "name": "--rc-menu-button-trigger-padding-inline",
               "default": "var(--rc-control-padding-inline)"
             },
+            {
+              "description": "Gap between flex children in the trigger",
+              "name": "--rc-menu-button-trigger-gap",
+              "default": "var(--rc-item-gap)"
+            },
             {
               "description": "Trigger border",
               "name": "--rc-menu-button-trigger-border",
@@ -84,6 +89,40 @@
               "name": "--rc-menu-button-trigger-color",
               "default": "var(--rc-button-text)"
             },
+            {
+              "description": "CSS transition applied to the trigger",
+              "name": "--rc-menu-button-trigger-transition"
+            },
+            {
+              "description": "Trigger hover background",
+              "name": "--rc-menu-button-trigger-hover-background",
+              "default": "color-mix(in srgb, Highlight 8%, transparent)"
+            },
+            {
+              "description": "Trigger hover text color",
+              "name": "--rc-menu-button-trigger-hover-color",
+              "default": "inherit"
+            },
+            {
+              "description": "Trigger hover border color",
+              "name": "--rc-menu-button-trigger-hover-border-color",
+              "default": "currentColor"
+            },
+            {
+              "description": "Trigger background when the menu is open",
+              "name": "--rc-menu-button-trigger-open-background",
+              "default": "color-mix(in srgb, Highlight 12%, transparent)"
+            },
+            {
+              "description": "Trigger text color when the menu is open",
+              "name": "--rc-menu-button-trigger-open-color",
+              "default": "inherit"
+            },
+            {
+              "description": "Trigger border color when the menu is open",
+              "name": "--rc-menu-button-trigger-open-border-color",
+              "default": "currentColor"
+            },
             {
               "description": "Z-index of the popup overlay",
               "name": "--rc-menu-button-popup-z-index",
@@ -119,7 +158,7 @@
               },
               "static": true,
               "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }",
-              "description": "Enables delegatesFocus so the browser routes focus() on the host element\nto the slotted trigger button. This lets the host participate in a\nroving-tabindex group (e.g. rc-toolbar) as a single tab stop while the\ntrigger remains the visible focus target."
+              "description": "Enables delegatesFocus so the browser routes focus() on the host element\nto the slotted trigger button."
             },
             {
               "kind": "field",
@@ -145,7 +184,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Whether the menu is currently open. Host writes update silently.",
+              "description": "Applies open state in controlled mode without dispatching an event.",
               "attribute": "open",
               "reflects": true
             },
@@ -155,7 +194,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Initial uncontrolled open state.",
+              "description": "Applies the uncontrolled default before any controlled write occurs.",
               "attribute": "default-open"
             },
             {
@@ -164,7 +203,7 @@
               "type": {
                 "text": "'horizontal' | 'vertical' | undefined"
               },
-              "description": "Orientation of this menu button, affects which arrow keys open/close the menu.\nIf not set, inherits from a parent rc-menubar or element with role=\"menubar\".",
+              "description": "Orientation of this menu button, affects which arrow keys open/close the menu.\n\nIf not set, inherits from a parent rc-menubar or element with role=\"menubar\".",
               "attribute": "orientation",
               "reflects": true
             },
@@ -185,7 +224,8 @@
               "type": {
                 "text": "AnchorPlacement"
               },
-              "privacy": "private",
+              "privacy": "protected",
+              "description": "Popup placement adjusted for orientation.\n\nSwitches from `bottom-start` to `right-start` when the resolved orientation\nis `vertical`, so vertical menubars open submenus to the side.",
               "readonly": true
             },
             {
@@ -194,7 +234,7 @@
               "type": {
                 "text": "'horizontal' | 'vertical'"
               },
-              "privacy": "private",
+              "privacy": "protected",
               "description": "Resolved orientation, considering inheritance from parent menubar.\nFalls back to 'horizontal' if no orientation is set or inherited.",
               "readonly": true
             },
@@ -204,7 +244,8 @@
               "type": {
                 "text": "HTMLElement"
               },
-              "privacy": "private"
+              "privacy": "protected",
+              "description": "Shadow DOM root container. Serves as the anchor element for `_anchorCtrl`."
             },
             {
               "kind": "field",
@@ -212,37 +253,39 @@
               "type": {
                 "text": "HTMLElement"
               },
-              "privacy": "private"
+              "privacy": "protected",
+              "description": "Shadow DOM popup container. Hidden when `open` is `false`."
             },
             {
               "kind": "field",
-              "name": "_trigger",
+              "name": "_$trigger",
               "type": {
                 "text": "WeakRef<HTMLElement> | undefined"
               },
-              "privacy": "private",
-              "description": "Reference to the trigger button element"
+              "privacy": "protected",
+              "description": "Weak reference to the slotted trigger button."
             },
             {
               "kind": "field",
-              "name": "_menu",
+              "name": "_$menu",
               "type": {
                 "text": "WeakRef<RCMenu> | undefined"
               },
-              "privacy": "private",
-              "description": "Reference to the menu element"
+              "privacy": "protected",
+              "description": "Weak reference to the slotted `rc-menu` element."
             },
             {
               "kind": "field",
               "name": "_anchorCtrl",
-              "privacy": "private",
-              "default": "new AnchorController(this, { anchor: () => this._$root ?? null, floating: () => this._$popup ?? null, shadowHost: () => this, placement: 'bottom-start', offset: 2, })"
+              "privacy": "protected",
+              "default": "new AnchorController(this, { anchor: () => this._$root ?? null, floating: () => this._$popup ?? null, shadowHost: () => this, placement: 'bottom-start', offset: 2, })",
+              "description": "Positions the popup relative to the trigger using CSS anchor positioning."
             },
             {
               "kind": "field",
               "name": "_boundHandleDocumentClick",
-              "privacy": "private",
-              "description": "Bound handler for document click (light dismiss)"
+              "privacy": "protected",
+              "description": "Bound handler for document click (light dismiss). Stored for `removeEventListener` pairing."
             },
             {
               "kind": "field",
@@ -250,8 +293,8 @@
               "type": {
                 "text": "MutationObserver | undefined"
               },
-              "privacy": "private",
-              "description": "Watches the host's own `tabindex` attribute so the trigger button's\ntabindex can be kept in sync. When a parent (e.g. rc-toolbar) places the\nhost under roving-tabindex management it sets/removes tabindex on the\nhost; we mirror that to the trigger so it doesn't become an independent\ntab stop. When the host has no tabindex the trigger keeps its natural\ntabindex=0 for standalone usage."
+              "privacy": "protected",
+              "description": "Watches the host's own `tabindex` attribute so the trigger button's\ntabindex can be kept in sync.\n\nWhen a parent (e.g. rc-toolbar) places the\nhost under roving-tabindex management it sets/removes tabindex on the\nhost; we mirror that to the trigger so it doesn't become an independent\ntab stop. When the host has no tabindex the trigger keeps its natural\ntabindex=0 for standalone usage."
             },
             {
               "kind": "method",
@@ -262,10 +305,11 @@
                   "default": "'first'",
                   "type": {
                     "text": "'first' | 'last'"
-                  }
+                  },
+                  "description": "which item receives initial focus when the menu opens"
                 }
               ],
-              "description": "Opens the menu and focuses the first or last item"
+              "description": "Opens the menu and moves focus into it."
             },
             {
               "kind": "method",
@@ -273,25 +317,27 @@
               "parameters": [
                 {
                   "name": "returnFocus",
-                  "default": "true"
+                  "default": "true",
+                  "description": "when `true`, returns focus to the trigger button after closing"
                 }
               ],
-              "description": "Closes the menu and optionally returns focus to trigger"
+              "description": "Closes the menu."
             },
             {
               "kind": "method",
               "name": "toggleMenu",
-              "description": "Toggles the menu open/closed"
+              "description": "Toggles the menu between open and closed."
             },
             {
               "kind": "method",
               "name": "_dispatchToggle",
-              "privacy": "private"
+              "privacy": "protected",
+              "description": "Dispatches the `rc-menu-button-toggle` bubbling composed event with the current open state."
             },
             {
               "kind": "method",
               "name": "_handleTriggerSlotChange",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "e",
@@ -299,12 +345,13 @@
                     "text": "Event"
                   }
                 }
-              ]
+              ],
+              "description": "Caches a weak reference to the first assigned trigger element and syncs its ARIA and tabindex state."
             },
             {
               "kind": "method",
               "name": "_syncTriggerTabindex",
-              "privacy": "private",
+              "privacy": "protected",
               "description": "Mirrors the host's `tabindex` attribute to the trigger button.\n\nWhen a roving-tabindex parent (e.g. rc-toolbar) marks this host inactive\nwith `tabindex=\"-1\"`, the trigger must also be suppressed so it does not\nbecome an independent tab stop. When the host is the active item\n(`tabindex=\"0\"`) or standalone (no tabindex), the trigger retains its\nnatural focusability so that Chrome's delegatesFocus can route sequential\nTab navigation through the host to the trigger."
             },
             {
@@ -324,7 +371,7 @@
             {
               "kind": "method",
               "name": "_handleMenuSlotChange",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "e",
@@ -332,17 +379,19 @@
                     "text": "Event"
                   }
                 }
-              ]
+              ],
+              "description": "Caches a weak reference to the first assigned `rc-menu` element."
             },
             {
               "kind": "field",
               "name": "_onNavigate",
-              "privacy": "private"
+              "privacy": "protected",
+              "description": "Keyboard navigation handler.\n\nOpens or closes the menu in response to arrow/Enter/Escape keys."
             },
             {
               "kind": "method",
               "name": "_handleTriggerClick",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "e",
@@ -350,22 +399,25 @@
                     "text": "MouseEvent"
                   }
                 }
-              ]
+              ],
+              "description": "Prevents the default button action and delegates to `toggleMenu`."
             },
             {
               "kind": "method",
               "name": "_handleMenuClose",
-              "privacy": "private"
+              "privacy": "protected",
+              "description": "Closes the menu when an `rc-menu-close` event bubbles up from the popup."
             },
             {
               "kind": "method",
               "name": "_handleMenuActivate",
-              "privacy": "private"
+              "privacy": "protected",
+              "description": "Closes the menu when an `rc-menu-activate` event bubbles up from the popup."
             },
             {
               "kind": "method",
               "name": "_handleDocumentClick",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "e",
@@ -373,7 +425,8 @@
                     "text": "MouseEvent"
                   }
                 }
-              ]
+              ],
+              "description": "Closes the menu on clicks outside this component (light dismiss)."
             },
             {
               "kind": "method",
@@ -402,12 +455,13 @@
             {
               "kind": "method",
               "name": "_syncTriggerAria",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "description": "Writes `aria-haspopup` and `aria-expanded` to the trigger button to match the current open state."
             }
           ],
           "events": [
@@ -434,7 +488,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Whether the menu is currently open. Host writes update silently.",
+              "description": "Applies open state in controlled mode without dispatching an event.",
               "fieldName": "open"
             },
             {
@@ -442,7 +496,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Initial uncontrolled open state.",
+              "description": "Applies the uncontrolled default before any controlled write occurs.",
               "fieldName": "defaultOpen"
             },
             {
@@ -450,7 +504,7 @@
               "type": {
                 "text": "'horizontal' | 'vertical' | undefined"
               },
-              "description": "Orientation of this menu button, affects which arrow keys open/close the menu.\nIf not set, inherits from a parent rc-menubar or element with role=\"menubar\".",
+              "description": "Orientation of this menu button, affects which arrow keys open/close the menu.\n\nIf not set, inherits from a parent rc-menubar or element with role=\"menubar\".",
               "fieldName": "orientation"
             }
           ],

package/dist/{rc-menu-button-CmzW7P4h.js → rc-menu-button-BEFLL7vi.js}

@@ -1,7 +1,7 @@
-import { css as g, LitElement as p, html as b } from "lit";
-import { property as l, query as h, state as d } from "lit/decorators.js";
-import { AnchorController as f, keyNavigation as m } from "@rcarls/rc-common";
-const _ = g`
+import { css as d, LitElement as p, html as b } from "lit";
+import { property as l, query as g, state as h } from "lit/decorators.js";
+import { AnchorController as m, keyNavigation as f, keyInteraction as v } from "@rcarls/rc-common";
+const _ = d`
   :host {
     display: inline-block;
   }
@@ -24,14 +24,44 @@ const _ = g`
 
   slot[name='trigger']::slotted(button),
   slot[name='trigger']::slotted([role='button']) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--rc-menu-button-trigger-gap, var(--rc-item-gap, 0.5em));
     min-block-size: var(--rc-menu-button-trigger-block-size, var(--rc-control-block-size, 2.25em));
     padding: var(--rc-menu-button-trigger-padding-block, var(--rc-control-padding-block, 0.25em))
       var(--rc-menu-button-trigger-padding-inline, var(--rc-control-padding-inline, 0.5em));
+    appearance: none;
+    box-sizing: border-box;
     border: var(--rc-menu-button-trigger-border, var(--rc-border, 1px solid ButtonBorder));
     border-radius: var(--rc-menu-button-trigger-radius, var(--rc-control-radius, 0.125em));
     background: var(--rc-menu-button-trigger-background, var(--rc-button-bg, ButtonFace));
     color: var(--rc-menu-button-trigger-color, var(--rc-button-text, ButtonText));
     font: inherit;
+    text-decoration: none;
+    cursor: default;
+    user-select: none;
+    transition: var(--rc-menu-button-trigger-transition);
+  }
+
+  slot[name='trigger']::slotted(button:hover),
+  slot[name='trigger']::slotted([role='button']:hover) {
+    border-color: var(--rc-menu-button-trigger-hover-border-color, currentColor);
+    background: var(
+      --rc-menu-button-trigger-hover-background,
+      color-mix(in srgb, Highlight 8%, transparent)
+    );
+    color: var(--rc-menu-button-trigger-hover-color, inherit);
+  }
+
+  slot[name='trigger']::slotted(button[aria-expanded='true']),
+  slot[name='trigger']::slotted([role='button'][aria-expanded='true']) {
+    border-color: var(--rc-menu-button-trigger-open-border-color, currentColor);
+    background: var(
+      --rc-menu-button-trigger-open-background,
+      color-mix(in srgb, Highlight 12%, transparent)
+    );
+    color: var(--rc-menu-button-trigger-open-color, inherit);
   }
 
   :host([orientation='vertical']) slot[name='trigger']::slotted(button),
@@ -48,14 +78,14 @@ const _ = g`
     display: none;
   }
 `;
-var v = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (u, t, e, r) => {
+var y = Object.defineProperty, O = Object.getOwnPropertyDescriptor, i = (u, t, e, r) => {
   for (var n = r > 1 ? void 0 : r ? O(t, e) : t, s = u.length - 1, c; s >= 0; s--)
     (c = u[s]) && (n = (r ? c(t, e, n) : c(n)) || n);
-  return r && n && v(t, e, n), n;
+  return r && n && y(t, e, n), n;
 };
 const a = class a extends p {
   constructor() {
-    super(...arguments), this._defaultOpen = !1, this._open = !1, this.placement = "bottom-start", this._anchorCtrl = new f(this, {
+    super(...arguments), this._defaultOpen = !1, this._open = !1, this.placement = "bottom-start", this._anchorCtrl = new m(this, {
       anchor: () => this._$root ?? null,
       floating: () => this._$popup ?? null,
       shadowHost: () => this,
@@ -79,7 +109,7 @@ const a = class a extends p {
   get open() {
     return this._open;
   }
-  /** Whether the menu is currently open. Host writes update silently. */
+  /** Applies open state in controlled mode without dispatching an event. */
   set open(t) {
     const e = this._open;
     t !== void 0 && (this._setOpen(t, !1), this.requestUpdate("open", e));
@@ -87,11 +117,17 @@ const a = class a extends p {
   get defaultOpen() {
     return this._defaultOpen;
   }
-  /** Initial uncontrolled open state. */
+  /** Applies the uncontrolled default before any controlled write occurs. */
   set defaultOpen(t) {
     const e = this._defaultOpen;
     this._defaultOpen = t, t && !this._open && this._setOpen(!0, !1), this.requestUpdate("defaultOpen", e);
   }
+  /**
+   * Popup placement adjusted for orientation.
+   *
+   * Switches from `bottom-start` to `right-start` when the resolved orientation
+   * is `vertical`, so vertical menubars open submenus to the side.
+   */
   get _effectivePlacement() {
     return this.placement !== "bottom-start" ? this.placement : this._resolvedOrientation === "vertical" ? "right-start" : this.placement;
   }
@@ -100,36 +136,50 @@ const a = class a extends p {
    * Falls back to 'horizontal' if no orientation is set or inherited.
    */
   get _resolvedOrientation() {
-    if (this.orientation) return this.orientation;
+    if (this.orientation)
+      return this.orientation;
     const t = this.closest('rc-menubar, [role="menubar"]');
     if (t) {
       const e = t.getAttribute("orientation") ?? t.getAttribute("aria-orientation");
-      if (e === "vertical") return "vertical";
-      if (e === "horizontal") return "horizontal";
+      if (e === "vertical")
+        return "vertical";
+      if (e === "horizontal")
+        return "horizontal";
     }
     return "horizontal";
   }
+  /** Installs the tabindex mutation observer and the document-level click listener. */
   connectedCallback() {
     super.connectedCallback(), this._tabObserver = new MutationObserver(() => this._syncTriggerTabindex()), this._tabObserver.observe(this, { attributes: !0, attributeFilter: ["tabindex"] }), document.addEventListener("click", this._boundHandleDocumentClick, !0), this.defaultOpen && this._setOpen(!0, !1);
   }
+  /** Disconnects the tabindex observer and removes the document-level click listener. */
   disconnectedCallback() {
     this._tabObserver?.disconnect(), this._tabObserver = void 0, super.disconnectedCallback(), document.removeEventListener("click", this._boundHandleDocumentClick, !0);
   }
-  /** Opens the menu and focuses the first or last item */
+  /**
+   * Opens the menu and moves focus into it.
+   *
+   * @param focusTarget - which item receives initial focus when the menu opens
+   */
   openMenu(t = "first") {
     this.open || (this._anchorCtrl.setOptions({ placement: this._effectivePlacement }), this._setOpen(!0, !0), this._anchorCtrl.update(), this.updateComplete.then(() => {
-      const e = this._menu?.deref();
+      const e = this._$menu?.deref();
       t === "last" ? e?.focusLast() : e?.focusFirst();
     }));
   }
-  /** Closes the menu and optionally returns focus to trigger */
+  /**
+   * Closes the menu.
+   *
+   * @param returnFocus - when `true`, returns focus to the trigger button after closing
+   */
   closeMenu(t = !0) {
-    this.open && (this._setOpen(!1, !0), t && this._trigger?.deref()?.focus());
+    this.open && (this._setOpen(!1, !0), t && this._$trigger?.deref()?.focus());
   }
-  /** Toggles the menu open/closed */
+  /** Toggles the menu between open and closed. */
   toggleMenu() {
     this.open ? this.closeMenu() : this.openMenu();
   }
+  /** Dispatches the `rc-menu-button-toggle` bubbling composed event with the current open state. */
   _dispatchToggle() {
     this.dispatchEvent(
       new CustomEvent("rc-menu-button-toggle", {
@@ -139,9 +189,10 @@ const a = class a extends p {
       })
     );
   }
+  /** Caches a weak reference to the first assigned trigger element and syncs its ARIA and tabindex state. */
   _handleTriggerSlotChange(t) {
     const r = t.currentTarget.assignedElements()[0];
-    r && (this._trigger = new WeakRef(r), this._syncTriggerAria(), this._syncTriggerTabindex());
+    r && (this._$trigger = new WeakRef(r), this._syncTriggerAria(), this._syncTriggerTabindex());
   }
   /**
    * Mirrors the host's `tabindex` attribute to the trigger button.
@@ -154,7 +205,7 @@ const a = class a extends p {
    * Tab navigation through the host to the trigger.
    */
   _syncTriggerTabindex() {
-    const t = this._trigger?.deref();
+    const t = this._$trigger?.deref();
     t && (this.getAttribute("tabindex") === "-1" ? t.setAttribute("tabindex", "-1") : t.removeAttribute("tabindex"));
   }
   /**
@@ -168,39 +219,47 @@ const a = class a extends p {
    * directly calling trigger.focus() bypasses that restriction.
    */
   focus(t) {
-    const e = this._trigger?.deref();
+    const e = this._$trigger?.deref();
     if (!e) {
       super.focus(t);
       return;
     }
     e.removeAttribute("tabindex"), e.focus(t);
   }
+  /** Caches a weak reference to the first assigned `rc-menu` element. */
   _handleMenuSlotChange(t) {
     const n = t.currentTarget.assignedElements().find((s) => s.tagName === "RC-MENU");
-    n && (this._menu = new WeakRef(n));
+    n && (this._$menu = new WeakRef(n));
   }
+  /** Prevents the default button action and delegates to `toggleMenu`. */
   _handleTriggerClick(t) {
     t.preventDefault(), this.toggleMenu();
   }
+  /** Closes the menu when an `rc-menu-close` event bubbles up from the popup. */
   _handleMenuClose() {
     this.closeMenu();
   }
+  /** Closes the menu when an `rc-menu-activate` event bubbles up from the popup. */
   _handleMenuActivate() {
     this.closeMenu();
   }
+  /** Closes the menu on clicks outside this component (light dismiss). */
   _handleDocumentClick(t) {
     !this.open || t.composedPath().includes(this) || this.closeMenu(!1);
   }
+  /** Syncs trigger ARIA when `open` changes; updates anchor placement when `placement` or `orientation` change. */
   updated(t) {
     super.updated(t), t.has("open") && this._syncTriggerAria(), (t.has("placement") || t.has("orientation")) && this._anchorCtrl.setOptions({ placement: this._effectivePlacement });
   }
   _setOpen(t, e) {
-    if (this._open === t) return;
+    if (this._open === t)
+      return;
     const r = this._open;
     this._open = t, this.requestUpdate("open", r), this._syncTriggerAria(), e && this._dispatchToggle();
   }
+  /** Writes `aria-haspopup` and `aria-expanded` to the trigger button to match the current open state. */
   _syncTriggerAria() {
-    const t = this._trigger?.deref();
+    const t = this._$trigger?.deref();
     t?.isConnected && (t.setAttribute("aria-haspopup", "menu"), t.setAttribute("aria-expanded", String(this.open)));
   }
   render() {
@@ -208,20 +267,19 @@ const a = class a extends p {
       <div id="root" part="root">
         <div
           id="trigger-wrap"
-          ${m(this._onNavigate, {
+          ${f(this._onNavigate, {
       navigationAxis: this._resolvedOrientation,
       handleNavAxis: !1,
       handleOpenAxis: !0,
       handleActivate: !0,
       handleEscape: this.open
     })}
+          ${v()}
           @click=${this._handleTriggerClick}
         >
-          <slot
-            name="trigger"
-            @slotchange=${this._handleTriggerSlotChange}
-          ></slot>
+          <slot name="trigger" @slotchange=${this._handleTriggerSlotChange}></slot>
         </div>
+
         <div
           id="popup"
           part="popup"
@@ -239,32 +297,32 @@ a.styles = [_], a.shadowRootOptions = {
   ...p.shadowRootOptions,
   delegatesFocus: !0
 };
-let i = a;
-o([
+let o = a;
+i([
   l({ type: Boolean, reflect: !0 })
-], i.prototype, "open", 1);
-o([
+], o.prototype, "open", 1);
+i([
   l({ type: Boolean, attribute: "default-open" })
-], i.prototype, "defaultOpen", 1);
-o([
+], o.prototype, "defaultOpen", 1);
+i([
   l({ type: String, reflect: !0 })
-], i.prototype, "orientation", 2);
-o([
+], o.prototype, "orientation", 2);
+i([
   l({ reflect: !0 })
-], i.prototype, "placement", 2);
-o([
-  h("#root")
-], i.prototype, "_$root", 2);
-o([
-  h("#popup")
-], i.prototype, "_$popup", 2);
-o([
-  d()
-], i.prototype, "_trigger", 2);
-o([
-  d()
-], i.prototype, "_menu", 2);
+], o.prototype, "placement", 2);
+i([
+  g("#root")
+], o.prototype, "_$root", 2);
+i([
+  g("#popup")
+], o.prototype, "_$popup", 2);
+i([
+  h()
+], o.prototype, "_$trigger", 2);
+i([
+  h()
+], o.prototype, "_$menu", 2);
 export {
-  i as R
+  o as R
 };
-//# sourceMappingURL=rc-menu-button-CmzW7P4h.js.map
+//# sourceMappingURL=rc-menu-button-BEFLL7vi.js.map

package/dist/rc-menu-button-BEFLL7vi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-menu-button-BEFLL7vi.js","sources":["../src/rc-menu-button.styles.ts","../src/rc-menu-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const menuButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([orientation='vertical']) {\n    display: block;\n  }\n\n  #root {\n    display: inline-block;\n  }\n\n  :host([orientation='vertical']) #root {\n    display: block;\n  }\n\n  #trigger-wrap {\n    display: contents;\n  }\n\n  slot[name='trigger']::slotted(button),\n  slot[name='trigger']::slotted([role='button']) {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--rc-menu-button-trigger-gap, var(--rc-item-gap, 0.5em));\n    min-block-size: var(--rc-menu-button-trigger-block-size, var(--rc-control-block-size, 2.25em));\n    padding: var(--rc-menu-button-trigger-padding-block, var(--rc-control-padding-block, 0.25em))\n      var(--rc-menu-button-trigger-padding-inline, var(--rc-control-padding-inline, 0.5em));\n    appearance: none;\n    box-sizing: border-box;\n    border: var(--rc-menu-button-trigger-border, var(--rc-border, 1px solid ButtonBorder));\n    border-radius: var(--rc-menu-button-trigger-radius, var(--rc-control-radius, 0.125em));\n    background: var(--rc-menu-button-trigger-background, var(--rc-button-bg, ButtonFace));\n    color: var(--rc-menu-button-trigger-color, var(--rc-button-text, ButtonText));\n    font: inherit;\n    text-decoration: none;\n    cursor: default;\n    user-select: none;\n    transition: var(--rc-menu-button-trigger-transition);\n  }\n\n  slot[name='trigger']::slotted(button:hover),\n  slot[name='trigger']::slotted([role='button']:hover) {\n    border-color: var(--rc-menu-button-trigger-hover-border-color, currentColor);\n    background: var(\n      --rc-menu-button-trigger-hover-background,\n      color-mix(in srgb, Highlight 8%, transparent)\n    );\n    color: var(--rc-menu-button-trigger-hover-color, inherit);\n  }\n\n  slot[name='trigger']::slotted(button[aria-expanded='true']),\n  slot[name='trigger']::slotted([role='button'][aria-expanded='true']) {\n    border-color: var(--rc-menu-button-trigger-open-border-color, currentColor);\n    background: var(\n      --rc-menu-button-trigger-open-background,\n      color-mix(in srgb, Highlight 12%, transparent)\n    );\n    color: var(--rc-menu-button-trigger-open-color, inherit);\n  }\n\n  :host([orientation='vertical']) slot[name='trigger']::slotted(button),\n  :host([orientation='vertical']) slot[name='trigger']::slotted([role='button']) {\n    inline-size: 100%;\n    text-align: start;\n  }\n\n  #popup {\n    z-index: var(--rc-menu-button-popup-z-index, 1000);\n  }\n\n  #popup[hidden] {\n    display: none;\n  }\n`;\n\nexport default menuButtonStyles;\n","import { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport {\n  AnchorController,\n  keyInteraction,\n  keyNavigation,\n  type AnchorPlacement,\n  type KeyboardNavigationAction,\n} from '@rcarls/rc-common';\nimport type { RCMenu } from '@rcarls/rc-menu';\n\nimport menuButtonStyles from './rc-menu-button.styles';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-menu-button': RCMenuButton;\n  }\n}\n\n/** Detail payload for the `rc-menu-button-toggle` event. */\nexport interface RCMenuButtonToggleEvent {\n  /** Whether the menu transitioned to open (`true`) or closed (`false`). */\n  open: boolean;\n}\n\n/**\n * Trigger button that opens an rc-menu popup, following the WAI-ARIA Menu Button pattern.\n *\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-menu-button rc-menu-button docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ WAI-ARIA Menu Button pattern}\n *\n * @slot trigger - The button element that triggers the menu\n * @slot default - The rc-menu element to display as popup\n *\n * @fires rc-menu-button-toggle - Fired when the menu opens or closes\n *\n * @cssprop [--rc-menu-button-trigger-block-size=var(--rc-control-block-size)] - Minimum block size of the trigger\n * @cssprop [--rc-menu-button-trigger-padding-block=var(--rc-control-padding-block)] - Trigger block-axis padding\n * @cssprop [--rc-menu-button-trigger-padding-inline=var(--rc-control-padding-inline)] - Trigger inline-axis padding\n * @cssprop [--rc-menu-button-trigger-gap=var(--rc-item-gap)] - Gap between flex children in the trigger\n * @cssprop [--rc-menu-button-trigger-border=var(--rc-border)] - Trigger border\n * @cssprop [--rc-menu-button-trigger-radius=var(--rc-control-radius)] - Trigger border radius\n * @cssprop [--rc-menu-button-trigger-background=var(--rc-button-bg)] - Trigger background\n * @cssprop [--rc-menu-button-trigger-color=var(--rc-button-text)] - Trigger text color\n * @cssprop [--rc-menu-button-trigger-transition] - CSS transition applied to the trigger\n * @cssprop [--rc-menu-button-trigger-hover-background=color-mix(in srgb, Highlight 8%, transparent)] - Trigger hover background\n * @cssprop [--rc-menu-button-trigger-hover-color=inherit] - Trigger hover text color\n * @cssprop [--rc-menu-button-trigger-hover-border-color=currentColor] - Trigger hover border color\n * @cssprop [--rc-menu-button-trigger-open-background=color-mix(in srgb, Highlight 12%, transparent)] - Trigger background when the menu is open\n * @cssprop [--rc-menu-button-trigger-open-color=inherit] - Trigger text color when the menu is open\n * @cssprop [--rc-menu-button-trigger-open-border-color=currentColor] - Trigger border color when the menu is open\n * @cssprop [--rc-menu-button-popup-z-index=1000] - Z-index of the popup overlay\n *\n * @csspart root - The root container element\n * @csspart popup - The popup container element\n *\n * @attr placement - Preferred placement of the popup relative to the trigger.\n */\nexport class RCMenuButton extends LitElement {\n  static styles = [menuButtonStyles];\n\n  /**\n   * Enables delegatesFocus so the browser routes focus() on the host element\n   * to the slotted trigger button.\n   */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n\n    delegatesFocus: true,\n  };\n\n  private _defaultOpen = false;\n  private _open = false;\n\n  /**\n   * Whether the menu is currently open.\n   *\n   * In controlled mode the host owns this value; writing the property applies\n   * the state silently without dispatching `rc-menu-button-toggle`.\n   */\n  @property({ type: Boolean, reflect: true })\n  get open(): boolean {\n    return this._open;\n  }\n\n  /** Applies open state in controlled mode without dispatching an event. */\n  set open(value: boolean | undefined) {\n    const oldValue = this._open;\n\n    if (value === undefined) return;\n\n    this._setOpen(value, false);\n    this.requestUpdate('open', oldValue);\n  }\n\n  /**\n   * Initial open state for uncontrolled mode.\n   *\n   * Ignored after the first controlled write; use `open` to update state\n   * programmatically after mount.\n   */\n  @property({ type: Boolean, attribute: 'default-open' })\n  get defaultOpen(): boolean {\n    return this._defaultOpen;\n  }\n\n  /** Applies the uncontrolled default before any controlled write occurs. */\n  set defaultOpen(value: boolean) {\n    const oldValue = this._defaultOpen;\n\n    this._defaultOpen = value;\n\n    if (value && !this._open) {\n      this._setOpen(true, false);\n    }\n\n    this.requestUpdate('defaultOpen', oldValue);\n  }\n\n  /**\n   * Orientation of this menu button, affects which arrow keys open/close the menu.\n   *\n   * If not set, inherits from a parent rc-menubar or element with role=\"menubar\".\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' | undefined;\n\n  /** Preferred placement of the popup relative to the trigger button. */\n  @property({ reflect: true })\n  placement: AnchorPlacement = 'bottom-start';\n\n  /**\n   * Popup placement adjusted for orientation.\n   *\n   * Switches from `bottom-start` to `right-start` when the resolved orientation\n   * is `vertical`, so vertical menubars open submenus to the side.\n   */\n  protected get _effectivePlacement(): AnchorPlacement {\n    if (this.placement !== 'bottom-start') {\n      return this.placement;\n    }\n\n    return this._resolvedOrientation === 'vertical' ? 'right-start' : this.placement;\n  }\n\n  /**\n   * Resolved orientation, considering inheritance from parent menubar.\n   * Falls back to 'horizontal' if no orientation is set or inherited.\n   */\n  protected get _resolvedOrientation(): 'horizontal' | 'vertical' {\n    if (this.orientation) {\n      return this.orientation;\n    }\n\n    const $menubar = this.closest('rc-menubar, [role=\"menubar\"]');\n\n    if ($menubar) {\n      const orientation =\n        $menubar.getAttribute('orientation') ?? $menubar.getAttribute('aria-orientation');\n\n      if (orientation === 'vertical') {\n        return 'vertical';\n      }\n\n      if (orientation === 'horizontal') {\n        return 'horizontal';\n      }\n    }\n\n    return 'horizontal';\n  }\n\n  /** Shadow DOM root container. Serves as the anchor element for `_anchorCtrl`. */\n  @query('#root') protected _$root!: HTMLElement;\n\n  /** Shadow DOM popup container. Hidden when `open` is `false`. */\n  @query('#popup') protected _$popup!: HTMLElement;\n\n  /** Weak reference to the slotted trigger button. */\n  @state()\n  protected _$trigger: WeakRef<HTMLElement> | undefined;\n\n  /** Weak reference to the slotted `rc-menu` element. */\n  @state()\n  protected _$menu: WeakRef<RCMenu> | undefined;\n\n  /** Positions the popup relative to the trigger using CSS anchor positioning. */\n  protected _anchorCtrl = new AnchorController(this, {\n    anchor: () => this._$root ?? null,\n    floating: () => this._$popup ?? null,\n    shadowHost: () => this,\n    placement: 'bottom-start',\n    offset: 2,\n  });\n\n  /** Bound handler for document click (light dismiss). Stored for `removeEventListener` pairing. */\n  protected _boundHandleDocumentClick = this._handleDocumentClick.bind(this);\n\n  /**\n   * Watches the host's own `tabindex` attribute so the trigger button's\n   * tabindex can be kept in sync.\n   *\n   * When a parent (e.g. rc-toolbar) places the\n   * host under roving-tabindex management it sets/removes tabindex on the\n   * host; we mirror that to the trigger so it doesn't become an independent\n   * tab stop. When the host has no tabindex the trigger keeps its natural\n   * tabindex=0 for standalone usage.\n   */\n  protected _tabObserver?: MutationObserver;\n\n  /** Installs the tabindex mutation observer and the document-level click listener. */\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this._tabObserver = new MutationObserver(() => this._syncTriggerTabindex());\n    this._tabObserver.observe(this, { attributes: true, attributeFilter: ['tabindex'] });\n\n    document.addEventListener('click', this._boundHandleDocumentClick, true);\n\n    if (this.defaultOpen) {\n      this._setOpen(true, false);\n    }\n  }\n\n  /** Disconnects the tabindex observer and removes the document-level click listener. */\n  override disconnectedCallback() {\n    this._tabObserver?.disconnect();\n    this._tabObserver = undefined;\n\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._boundHandleDocumentClick, true);\n  }\n\n  /**\n   * Opens the menu and moves focus into it.\n   *\n   * @param focusTarget - which item receives initial focus when the menu opens\n   */\n  openMenu(focusTarget: 'first' | 'last' = 'first') {\n    if (this.open) return;\n\n    this._anchorCtrl.setOptions({ placement: this._effectivePlacement });\n    this._setOpen(true, true);\n    this._anchorCtrl.update();\n\n    this.updateComplete.then(() => {\n      const $menu = this._$menu?.deref();\n\n      focusTarget === 'last' ? $menu?.focusLast() : $menu?.focusFirst();\n    });\n  }\n\n  /**\n   * Closes the menu.\n   *\n   * @param returnFocus - when `true`, returns focus to the trigger button after closing\n   */\n  closeMenu(returnFocus = true) {\n    if (!this.open) return;\n\n    this._setOpen(false, true);\n\n    if (returnFocus) {\n      const $trigger = this._$trigger?.deref();\n\n      $trigger?.focus();\n    }\n  }\n\n  /** Toggles the menu between open and closed. */\n  toggleMenu() {\n    if (this.open) {\n      this.closeMenu();\n    } else {\n      this.openMenu();\n    }\n  }\n\n  /** Dispatches the `rc-menu-button-toggle` bubbling composed event with the current open state. */\n  protected _dispatchToggle() {\n    this.dispatchEvent(\n      new CustomEvent<RCMenuButtonToggleEvent>('rc-menu-button-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { open: this.open },\n      }),\n    );\n  }\n\n  /** Caches a weak reference to the first assigned trigger element and syncs its ARIA and tabindex state. */\n  protected _handleTriggerSlotChange(e: Event) {\n    const slot = e.currentTarget as HTMLSlotElement;\n    const $trigger = slot.assignedElements()[0] as HTMLElement | undefined;\n\n    if ($trigger) {\n      this._$trigger = new WeakRef($trigger);\n      this._syncTriggerAria();\n      this._syncTriggerTabindex();\n    }\n  }\n\n  /**\n   * Mirrors the host's `tabindex` attribute to the trigger button.\n   *\n   * When a roving-tabindex parent (e.g. rc-toolbar) marks this host inactive\n   * with `tabindex=\"-1\"`, the trigger must also be suppressed so it does not\n   * become an independent tab stop. When the host is the active item\n   * (`tabindex=\"0\"`) or standalone (no tabindex), the trigger retains its\n   * natural focusability so that Chrome's delegatesFocus can route sequential\n   * Tab navigation through the host to the trigger.\n   */\n  protected _syncTriggerTabindex() {\n    const $trigger = this._$trigger?.deref();\n\n    if (!$trigger) return;\n\n    if (this.getAttribute('tabindex') === '-1') {\n      $trigger.setAttribute('tabindex', '-1');\n    } else {\n      $trigger.removeAttribute('tabindex');\n    }\n  }\n\n  /**\n   * Overrides the default focus() so that programmatic focus calls (e.g. from\n   * a roving-tabindex parent navigating back to this element via arrow keys)\n   * always reach the trigger.\n   *\n   * Chrome's delegatesFocus will not delegate to a tabindex=\"-1\" element, so\n   * when the toolbar marks this host inactive it suppresses the trigger — and\n   * the next focusItem() call silently fails. Lifting the suppression here and\n   * directly calling trigger.focus() bypasses that restriction.\n   */\n  override focus(options?: FocusOptions) {\n    const $trigger = this._$trigger?.deref();\n\n    if (!$trigger) {\n      super.focus(options);\n      return;\n    }\n\n    $trigger.removeAttribute('tabindex');\n    $trigger.focus(options);\n  }\n\n  /** Caches a weak reference to the first assigned `rc-menu` element. */\n  protected _handleMenuSlotChange(e: Event) {\n    const slot = e.currentTarget as HTMLSlotElement;\n    const elements = slot.assignedElements();\n    const $menu = elements.find((el) => el.tagName === 'RC-MENU') as RCMenu | undefined;\n\n    if ($menu) {\n      this._$menu = new WeakRef($menu);\n    }\n  }\n\n  /**\n   * Keyboard navigation handler.\n   *\n   * Opens or closes the menu in response to arrow/Enter/Escape keys.\n   **/\n  protected _onNavigate = (action: KeyboardNavigationAction) => {\n    switch (action) {\n      case 'open-to-first':\n      case 'activate':\n        this.openMenu();\n        break;\n\n      case 'open-to-last':\n        this.openMenu('last');\n        break;\n\n      case 'escape':\n        this.closeMenu();\n        break;\n    }\n  };\n\n  /** Prevents the default button action and delegates to `toggleMenu`. */\n  protected _handleTriggerClick(e: MouseEvent) {\n    e.preventDefault();\n\n    this.toggleMenu();\n  }\n\n  /** Closes the menu when an `rc-menu-close` event bubbles up from the popup. */\n  protected _handleMenuClose() {\n    this.closeMenu();\n  }\n\n  /** Closes the menu when an `rc-menu-activate` event bubbles up from the popup. */\n  protected _handleMenuActivate() {\n    this.closeMenu();\n  }\n\n  /** Closes the menu on clicks outside this component (light dismiss). */\n  protected _handleDocumentClick(e: MouseEvent) {\n    if (!this.open) {\n      return;\n    }\n\n    const path = e.composedPath();\n\n    if (path.includes(this)) {\n      return;\n    }\n\n    this.closeMenu(false);\n  }\n\n  /** Syncs trigger ARIA when `open` changes; updates anchor placement when `placement` or `orientation` change. */\n  protected override updated(changedProperties: Map<PropertyKey, unknown>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open')) {\n      this._syncTriggerAria();\n    }\n\n    if (changedProperties.has('placement') || changedProperties.has('orientation')) {\n      this._anchorCtrl.setOptions({ placement: this._effectivePlacement });\n    }\n  }\n\n  private _setOpen(open: boolean, dispatch: boolean): void {\n    if (this._open === open) {\n      return;\n    }\n\n    const oldValue = this._open;\n\n    this._open = open;\n\n    this.requestUpdate('open', oldValue);\n    this._syncTriggerAria();\n\n    if (dispatch) {\n      this._dispatchToggle();\n    }\n  }\n\n  /** Writes `aria-haspopup` and `aria-expanded` to the trigger button to match the current open state. */\n  protected _syncTriggerAria(): void {\n    const $trigger = this._$trigger?.deref();\n\n    if (!$trigger?.isConnected) {\n      return;\n    }\n\n    $trigger.setAttribute('aria-haspopup', 'menu');\n    $trigger.setAttribute('aria-expanded', String(this.open));\n  }\n\n  protected override render() {\n    return html`\n      <div id=\"root\" part=\"root\">\n        <div\n          id=\"trigger-wrap\"\n          ${keyNavigation(this._onNavigate, {\n            navigationAxis: this._resolvedOrientation,\n            handleNavAxis: false,\n            handleOpenAxis: true,\n            handleActivate: true,\n            handleEscape: this.open,\n          })}\n          ${keyInteraction()}\n          @click=${this._handleTriggerClick}\n        >\n          <slot name=\"trigger\" @slotchange=${this._handleTriggerSlotChange}></slot>\n        </div>\n\n        <div\n          id=\"popup\"\n          part=\"popup\"\n          ?hidden=${!this.open}\n          @rc-menu-close=${this._handleMenuClose}\n          @rc-menu-activate=${this._handleMenuActivate}\n        >\n          <slot @slotchange=${this._handleMenuSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default RCMenuButton;\n"],"names":["menuButtonStyles","css","_RCMenuButton","LitElement","AnchorController","action","value","oldValue","$menubar","orientation","focusTarget","$menu","returnFocus","e","$trigger","options","el","changedProperties","open","dispatch","html","keyNavigation","keyInteraction","RCMenuButton","__decorateClass","property","query","state"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import "@rcarls/rc-menu/define";
-import { R as t } from "./rc-menu-button-CmzW7P4h.js";
+import { R as t } from "./rc-menu-button-BEFLL7vi.js";
 customElements.get("rc-menu-button") || customElements.define("rc-menu-button", t);
 export {
   t as RCMenuButton

package/dist/rc-menu-button.js

@@ -1,4 +1,4 @@
-import { R as e } from "./rc-menu-button-CmzW7P4h.js";
+import { R as e } from "./rc-menu-button-BEFLL7vi.js";
 export {
   e as RCMenuButton
 };

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

@@ -1,92 +1,142 @@
 import { LitElement } from 'lit';
-import { AnchorPlacement } from '@rcarls/rc-common';
-export interface RCMenuButtonToggleEvent {
-    open: boolean;
-}
+import { AnchorController, AnchorPlacement, KeyboardNavigationAction } from '@rcarls/rc-common';
+import { RCMenu } from '@rcarls/rc-menu';
 declare global {
     interface HTMLElementTagNameMap {
         'rc-menu-button': RCMenuButton;
     }
 }
+/** Detail payload for the `rc-menu-button-toggle` event. */
+export interface RCMenuButtonToggleEvent {
+    /** Whether the menu transitioned to open (`true`) or closed (`false`). */
+    open: boolean;
+}
 /**
- * A menu button component that opens/closes a menu popup
+ * Trigger button that opens an rc-menu popup, following the WAI-ARIA Menu Button pattern.
+ *
+ *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-menu-button rc-menu-button docs}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ WAI-ARIA Menu Button pattern}
  *
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
  * @slot trigger - The button element that triggers the menu
  * @slot default - The rc-menu element to display as popup
+ *
  * @fires rc-menu-button-toggle - Fired when the menu opens or closes
+ *
  * @cssprop [--rc-menu-button-trigger-block-size=var(--rc-control-block-size)] - Minimum block size of the trigger
  * @cssprop [--rc-menu-button-trigger-padding-block=var(--rc-control-padding-block)] - Trigger block-axis padding
  * @cssprop [--rc-menu-button-trigger-padding-inline=var(--rc-control-padding-inline)] - Trigger inline-axis padding
+ * @cssprop [--rc-menu-button-trigger-gap=var(--rc-item-gap)] - Gap between flex children in the trigger
  * @cssprop [--rc-menu-button-trigger-border=var(--rc-border)] - Trigger border
  * @cssprop [--rc-menu-button-trigger-radius=var(--rc-control-radius)] - Trigger border radius
  * @cssprop [--rc-menu-button-trigger-background=var(--rc-button-bg)] - Trigger background
  * @cssprop [--rc-menu-button-trigger-color=var(--rc-button-text)] - Trigger text color
+ * @cssprop [--rc-menu-button-trigger-transition] - CSS transition applied to the trigger
+ * @cssprop [--rc-menu-button-trigger-hover-background=color-mix(in srgb, Highlight 8%, transparent)] - Trigger hover background
+ * @cssprop [--rc-menu-button-trigger-hover-color=inherit] - Trigger hover text color
+ * @cssprop [--rc-menu-button-trigger-hover-border-color=currentColor] - Trigger hover border color
+ * @cssprop [--rc-menu-button-trigger-open-background=color-mix(in srgb, Highlight 12%, transparent)] - Trigger background when the menu is open
+ * @cssprop [--rc-menu-button-trigger-open-color=inherit] - Trigger text color when the menu is open
+ * @cssprop [--rc-menu-button-trigger-open-border-color=currentColor] - Trigger border color when the menu is open
  * @cssprop [--rc-menu-button-popup-z-index=1000] - Z-index of the popup overlay
+ *
  * @csspart root - The root container element
  * @csspart popup - The popup container element
+ *
  * @attr placement - Preferred placement of the popup relative to the trigger.
  */
 export declare class RCMenuButton extends LitElement {
     static styles: import('lit').CSSResult[];
     /**
      * Enables delegatesFocus so the browser routes focus() on the host element
-     * to the slotted trigger button. This lets the host participate in a
-     * roving-tabindex group (e.g. rc-toolbar) as a single tab stop while the
-     * trigger remains the visible focus target.
+     * to the slotted trigger button.
      */
     static shadowRootOptions: ShadowRootInit;
     private _defaultOpen;
     private _open;
-    /** Whether the menu is currently open. Host writes update silently. */
+    /**
+     * Whether the menu is currently open.
+     *
+     * In controlled mode the host owns this value; writing the property applies
+     * the state silently without dispatching `rc-menu-button-toggle`.
+     */
     get open(): boolean;
-    /** Whether the menu is currently open. Host writes update silently. */
+    /** Applies open state in controlled mode without dispatching an event. */
     set open(value: boolean | undefined);
-    /** Initial uncontrolled open state. */
+    /**
+     * Initial open state for uncontrolled mode.
+     *
+     * Ignored after the first controlled write; use `open` to update state
+     * programmatically after mount.
+     */
     get defaultOpen(): boolean;
-    /** Initial uncontrolled open state. */
+    /** Applies the uncontrolled default before any controlled write occurs. */
     set defaultOpen(value: boolean);
     /**
      * Orientation of this menu button, affects which arrow keys open/close the menu.
+     *
      * If not set, inherits from a parent rc-menubar or element with role="menubar".
      */
     orientation: 'horizontal' | 'vertical' | undefined;
     /** Preferred placement of the popup relative to the trigger button. */
     placement: AnchorPlacement;
-    private get _effectivePlacement();
+    /**
+     * Popup placement adjusted for orientation.
+     *
+     * Switches from `bottom-start` to `right-start` when the resolved orientation
+     * is `vertical`, so vertical menubars open submenus to the side.
+     */
+    protected get _effectivePlacement(): AnchorPlacement;
     /**
      * Resolved orientation, considering inheritance from parent menubar.
      * Falls back to 'horizontal' if no orientation is set or inherited.
      */
-    private get _resolvedOrientation();
-    private _$root;
-    private _$popup;
-    /** Reference to the trigger button element */
-    private _trigger;
-    /** Reference to the menu element */
-    private _menu;
-    private _anchorCtrl;
-    /** Bound handler for document click (light dismiss) */
-    private _boundHandleDocumentClick;
+    protected get _resolvedOrientation(): 'horizontal' | 'vertical';
+    /** Shadow DOM root container. Serves as the anchor element for `_anchorCtrl`. */
+    protected _$root: HTMLElement;
+    /** Shadow DOM popup container. Hidden when `open` is `false`. */
+    protected _$popup: HTMLElement;
+    /** Weak reference to the slotted trigger button. */
+    protected _$trigger: WeakRef<HTMLElement> | undefined;
+    /** Weak reference to the slotted `rc-menu` element. */
+    protected _$menu: WeakRef<RCMenu> | undefined;
+    /** Positions the popup relative to the trigger using CSS anchor positioning. */
+    protected _anchorCtrl: AnchorController;
+    /** Bound handler for document click (light dismiss). Stored for `removeEventListener` pairing. */
+    protected _boundHandleDocumentClick: (e: MouseEvent) => void;
     /**
      * Watches the host's own `tabindex` attribute so the trigger button's
-     * tabindex can be kept in sync. When a parent (e.g. rc-toolbar) places the
+     * tabindex can be kept in sync.
+     *
+     * When a parent (e.g. rc-toolbar) places the
      * host under roving-tabindex management it sets/removes tabindex on the
      * host; we mirror that to the trigger so it doesn't become an independent
      * tab stop. When the host has no tabindex the trigger keeps its natural
      * tabindex=0 for standalone usage.
      */
-    private _tabObserver?;
+    protected _tabObserver?: MutationObserver;
+    /** Installs the tabindex mutation observer and the document-level click listener. */
     connectedCallback(): void;
+    /** Disconnects the tabindex observer and removes the document-level click listener. */
     disconnectedCallback(): void;
-    /** Opens the menu and focuses the first or last item */
+    /**
+     * Opens the menu and moves focus into it.
+     *
+     * @param focusTarget - which item receives initial focus when the menu opens
+     */
     openMenu(focusTarget?: 'first' | 'last'): void;
-    /** Closes the menu and optionally returns focus to trigger */
+    /**
+     * Closes the menu.
+     *
+     * @param returnFocus - when `true`, returns focus to the trigger button after closing
+     */
     closeMenu(returnFocus?: boolean): void;
-    /** Toggles the menu open/closed */
+    /** Toggles the menu between open and closed. */
     toggleMenu(): void;
-    private _dispatchToggle;
-    private _handleTriggerSlotChange;
+    /** Dispatches the `rc-menu-button-toggle` bubbling composed event with the current open state. */
+    protected _dispatchToggle(): void;
+    /** Caches a weak reference to the first assigned trigger element and syncs its ARIA and tabindex state. */
+    protected _handleTriggerSlotChange(e: Event): void;
     /**
      * Mirrors the host's `tabindex` attribute to the trigger button.
      *
@@ -97,7 +147,7 @@ export declare class RCMenuButton extends LitElement {
      * natural focusability so that Chrome's delegatesFocus can route sequential
      * Tab navigation through the host to the trigger.
      */
-    private _syncTriggerTabindex;
+    protected _syncTriggerTabindex(): void;
     /**
      * Overrides the default focus() so that programmatic focus calls (e.g. from
      * a roving-tabindex parent navigating back to this element via arrow keys)
@@ -109,15 +159,27 @@ export declare class RCMenuButton extends LitElement {
      * directly calling trigger.focus() bypasses that restriction.
      */
     focus(options?: FocusOptions): void;
-    private _handleMenuSlotChange;
-    private _onNavigate;
-    private _handleTriggerClick;
-    private _handleMenuClose;
-    private _handleMenuActivate;
-    private _handleDocumentClick;
+    /** Caches a weak reference to the first assigned `rc-menu` element. */
+    protected _handleMenuSlotChange(e: Event): void;
+    /**
+     * Keyboard navigation handler.
+     *
+     * Opens or closes the menu in response to arrow/Enter/Escape keys.
+     **/
+    protected _onNavigate: (action: KeyboardNavigationAction) => void;
+    /** Prevents the default button action and delegates to `toggleMenu`. */
+    protected _handleTriggerClick(e: MouseEvent): void;
+    /** Closes the menu when an `rc-menu-close` event bubbles up from the popup. */
+    protected _handleMenuClose(): void;
+    /** Closes the menu when an `rc-menu-activate` event bubbles up from the popup. */
+    protected _handleMenuActivate(): void;
+    /** Closes the menu on clicks outside this component (light dismiss). */
+    protected _handleDocumentClick(e: MouseEvent): void;
+    /** Syncs trigger ARIA when `open` changes; updates anchor placement when `placement` or `orientation` change. */
     protected updated(changedProperties: Map<PropertyKey, unknown>): void;
     private _setOpen;
-    private _syncTriggerAria;
+    /** Writes `aria-haspopup` and `aria-expanded` to the trigger button to match the current open state. */
+    protected _syncTriggerAria(): void;
     protected render(): import('lit').TemplateResult<1>;
 }
 export default RCMenuButton;

package/package.json

@@ -3,14 +3,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.0",
-  "description": "Headless WAI-ARIA menu button web component built with Lit",
+  "version": "0.3.0",
+  "description": "Trigger button that opens an rc-menu popup.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
     "directory": "packages/rc-menu-button"
   },
-  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-menu-button",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -37,23 +37,20 @@
   ],
   "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-menu": "workspace:^",
+    "@rcarls/rc-common": "workspace:*",
+    "@rcarls/rc-menu": "workspace:*",
     "@types/node": "^25.6.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",
-    "@guanghechen/rollup-plugin-copy": "^6.0.9",
     "@vitest/browser-playwright": "4.1.5",
     "lit": "^3.0.0",
     "playwright": "^1.56.0",

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;
-}

package/dist/demo.js

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

package/dist/rc-menu-button-CmzW7P4h.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"rc-menu-button-CmzW7P4h.js","sources":["../src/rc-menu-button.styles.ts","../src/rc-menu-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const menuButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([orientation='vertical']) {\n    display: block;\n  }\n\n  #root {\n    display: inline-block;\n  }\n\n  :host([orientation='vertical']) #root {\n    display: block;\n  }\n\n  #trigger-wrap {\n    display: contents;\n  }\n\n  slot[name='trigger']::slotted(button),\n  slot[name='trigger']::slotted([role='button']) {\n    min-block-size: var(--rc-menu-button-trigger-block-size, var(--rc-control-block-size, 2.25em));\n    padding: var(--rc-menu-button-trigger-padding-block, var(--rc-control-padding-block, 0.25em))\n      var(--rc-menu-button-trigger-padding-inline, var(--rc-control-padding-inline, 0.5em));\n    border: var(--rc-menu-button-trigger-border, var(--rc-border, 1px solid ButtonBorder));\n    border-radius: var(--rc-menu-button-trigger-radius, var(--rc-control-radius, 0.125em));\n    background: var(--rc-menu-button-trigger-background, var(--rc-button-bg, ButtonFace));\n    color: var(--rc-menu-button-trigger-color, var(--rc-button-text, ButtonText));\n    font: inherit;\n  }\n\n  :host([orientation='vertical']) slot[name='trigger']::slotted(button),\n  :host([orientation='vertical']) slot[name='trigger']::slotted([role='button']) {\n    inline-size: 100%;\n    text-align: start;\n  }\n\n  #popup {\n    z-index: var(--rc-menu-button-popup-z-index, 1000);\n  }\n\n  #popup[hidden] {\n    display: none;\n  }\n`;\n\nexport default menuButtonStyles;\n","import { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport {\n  AnchorController,\n  keyNavigation,\n  type AnchorPlacement,\n  type KeyboardNavigationAction,\n} from '@rcarls/rc-common';\nimport type { RCMenu } from '@rcarls/rc-menu';\n\nimport menuButtonStyles from './rc-menu-button.styles';\n\nexport interface RCMenuButtonToggleEvent {\n  open: boolean;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-menu-button': RCMenuButton;\n  }\n}\n\n/**\n * A menu button component that opens/closes a menu popup\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/\n * @slot trigger - The button element that triggers the menu\n * @slot default - The rc-menu element to display as popup\n * @fires rc-menu-button-toggle - Fired when the menu opens or closes\n * @cssprop [--rc-menu-button-trigger-block-size=var(--rc-control-block-size)] - Minimum block size of the trigger\n * @cssprop [--rc-menu-button-trigger-padding-block=var(--rc-control-padding-block)] - Trigger block-axis padding\n * @cssprop [--rc-menu-button-trigger-padding-inline=var(--rc-control-padding-inline)] - Trigger inline-axis padding\n * @cssprop [--rc-menu-button-trigger-border=var(--rc-border)] - Trigger border\n * @cssprop [--rc-menu-button-trigger-radius=var(--rc-control-radius)] - Trigger border radius\n * @cssprop [--rc-menu-button-trigger-background=var(--rc-button-bg)] - Trigger background\n * @cssprop [--rc-menu-button-trigger-color=var(--rc-button-text)] - Trigger text color\n * @cssprop [--rc-menu-button-popup-z-index=1000] - Z-index of the popup overlay\n * @csspart root - The root container element\n * @csspart popup - The popup container element\n * @attr placement - Preferred placement of the popup relative to the trigger.\n */\nexport class RCMenuButton extends LitElement {\n  static styles = [menuButtonStyles];\n\n  /**\n   * Enables delegatesFocus so the browser routes focus() on the host element\n   * to the slotted trigger button. This lets the host participate in a\n   * roving-tabindex group (e.g. rc-toolbar) as a single tab stop while the\n   * trigger remains the visible focus target.\n   */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  private _defaultOpen = false;\n  private _open = false;\n\n  /** Whether the menu is currently open. Host writes update silently. */\n  @property({ type: Boolean, reflect: true })\n  get open(): boolean {\n    return this._open;\n  }\n\n  /** Whether the menu is currently open. Host writes update silently. */\n  set open(value: boolean | undefined) {\n    const oldValue = this._open;\n\n    if (value === undefined) return;\n\n    this._setOpen(value, false);\n    this.requestUpdate('open', oldValue);\n  }\n\n  /** Initial uncontrolled open state. */\n  @property({ type: Boolean, attribute: 'default-open' })\n  get defaultOpen(): boolean {\n    return this._defaultOpen;\n  }\n\n  /** Initial uncontrolled open state. */\n  set defaultOpen(value: boolean) {\n    const oldValue = this._defaultOpen;\n\n    this._defaultOpen = value;\n\n    if (value && !this._open) {\n      this._setOpen(true, false);\n    }\n\n    this.requestUpdate('defaultOpen', oldValue);\n  }\n\n  /**\n   * Orientation of this menu button, affects which arrow keys open/close the menu.\n   * If not set, inherits from a parent rc-menubar or element with role=\"menubar\".\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' | undefined;\n\n  /** Preferred placement of the popup relative to the trigger button. */\n  @property({ reflect: true })\n  placement: AnchorPlacement = 'bottom-start';\n\n  private get _effectivePlacement(): AnchorPlacement {\n    if (this.placement !== 'bottom-start') return this.placement;\n    return this._resolvedOrientation === 'vertical' ? 'right-start' : this.placement;\n  }\n\n  /**\n   * Resolved orientation, considering inheritance from parent menubar.\n   * Falls back to 'horizontal' if no orientation is set or inherited.\n   */\n  private get _resolvedOrientation(): 'horizontal' | 'vertical' {\n    if (this.orientation) return this.orientation;\n\n    // Inherit from parent rc-menubar or element with role=\"menubar\"\n    const menubar = this.closest('rc-menubar, [role=\"menubar\"]');\n    if (menubar) {\n      const orientation =\n        menubar.getAttribute('orientation') ??\n        menubar.getAttribute('aria-orientation');\n      if (orientation === 'vertical') return 'vertical';\n      if (orientation === 'horizontal') return 'horizontal';\n    }\n\n    return 'horizontal';\n  }\n\n  @query('#root') private _$root!: HTMLElement;\n  @query('#popup') private _$popup!: HTMLElement;\n\n  /** Reference to the trigger button element */\n  @state()\n  private _trigger: WeakRef<HTMLElement> | undefined;\n\n  /** Reference to the menu element */\n  @state()\n  private _menu: WeakRef<RCMenu> | undefined;\n\n  private _anchorCtrl = new AnchorController(this, {\n    anchor: () => this._$root ?? null,\n    floating: () => this._$popup ?? null,\n    shadowHost: () => this,\n    placement: 'bottom-start',\n    offset: 2,\n  });\n\n  /** Bound handler for document click (light dismiss) */\n  private _boundHandleDocumentClick = this._handleDocumentClick.bind(this);\n\n  /**\n   * Watches the host's own `tabindex` attribute so the trigger button's\n   * tabindex can be kept in sync. When a parent (e.g. rc-toolbar) places the\n   * host under roving-tabindex management it sets/removes tabindex on the\n   * host; we mirror that to the trigger so it doesn't become an independent\n   * tab stop. When the host has no tabindex the trigger keeps its natural\n   * tabindex=0 for standalone usage.\n   */\n  private _tabObserver?: MutationObserver;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this._tabObserver = new MutationObserver(() => this._syncTriggerTabindex());\n    this._tabObserver.observe(this, { attributes: true, attributeFilter: ['tabindex'] });\n\n    document.addEventListener('click', this._boundHandleDocumentClick, true);\n\n    if (this.defaultOpen) {\n      this._setOpen(true, false);\n    }\n  }\n\n  disconnectedCallback() {\n    this._tabObserver?.disconnect();\n    this._tabObserver = undefined;\n\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._boundHandleDocumentClick, true);\n  }\n\n  /** Opens the menu and focuses the first or last item */\n  openMenu(focusTarget: 'first' | 'last' = 'first') {\n    if (this.open) return;\n\n    this._anchorCtrl.setOptions({ placement: this._effectivePlacement });\n    this._setOpen(true, true);\n    this._anchorCtrl.update();\n\n    this.updateComplete.then(() => {\n      const menu = this._menu?.deref();\n      focusTarget === 'last' ? menu?.focusLast() : menu?.focusFirst();\n    });\n  }\n\n  /** Closes the menu and optionally returns focus to trigger */\n  closeMenu(returnFocus = true) {\n    if (!this.open) return;\n\n    this._setOpen(false, true);\n\n    if (returnFocus) {\n      const trigger = this._trigger?.deref();\n      trigger?.focus();\n    }\n  }\n\n  /** Toggles the menu open/closed */\n  toggleMenu() {\n    if (this.open) {\n      this.closeMenu();\n    } else {\n      this.openMenu();\n    }\n  }\n\n  private _dispatchToggle() {\n    this.dispatchEvent(\n      new CustomEvent<RCMenuButtonToggleEvent>('rc-menu-button-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { open: this.open },\n      }),\n    );\n  }\n\n  private _handleTriggerSlotChange(e: Event) {\n    const slot = e.currentTarget as HTMLSlotElement;\n    const trigger = slot.assignedElements()[0] as HTMLElement | undefined;\n\n    if (trigger) {\n      this._trigger = new WeakRef(trigger);\n      this._syncTriggerAria();\n      this._syncTriggerTabindex();\n    }\n  }\n\n  /**\n   * Mirrors the host's `tabindex` attribute to the trigger button.\n   *\n   * When a roving-tabindex parent (e.g. rc-toolbar) marks this host inactive\n   * with `tabindex=\"-1\"`, the trigger must also be suppressed so it does not\n   * become an independent tab stop. When the host is the active item\n   * (`tabindex=\"0\"`) or standalone (no tabindex), the trigger retains its\n   * natural focusability so that Chrome's delegatesFocus can route sequential\n   * Tab navigation through the host to the trigger.\n   */\n  private _syncTriggerTabindex() {\n    const trigger = this._trigger?.deref();\n\n    if (!trigger) return;\n\n    if (this.getAttribute('tabindex') === '-1') {\n      trigger.setAttribute('tabindex', '-1');\n    } else {\n      trigger.removeAttribute('tabindex');\n    }\n  }\n\n  /**\n   * Overrides the default focus() so that programmatic focus calls (e.g. from\n   * a roving-tabindex parent navigating back to this element via arrow keys)\n   * always reach the trigger.\n   *\n   * Chrome's delegatesFocus will not delegate to a tabindex=\"-1\" element, so\n   * when the toolbar marks this host inactive it suppresses the trigger — and\n   * the next focusItem() call silently fails. Lifting the suppression here and\n   * directly calling trigger.focus() bypasses that restriction.\n   */\n  override focus(options?: FocusOptions) {\n    const trigger = this._trigger?.deref();\n\n    if (!trigger) {\n      super.focus(options);\n      return;\n    }\n\n    trigger.removeAttribute('tabindex');\n    trigger.focus(options);\n  }\n\n\n  private _handleMenuSlotChange(e: Event) {\n    const slot = e.currentTarget as HTMLSlotElement;\n    const elements = slot.assignedElements();\n    const menu = elements.find((el) => el.tagName === 'RC-MENU') as\n      | RCMenu\n      | undefined;\n\n    if (menu) {\n      this._menu = new WeakRef(menu);\n    }\n  }\n\n  private _onNavigate = (action: KeyboardNavigationAction) => {\n    switch (action) {\n      case 'open-to-first':\n      case 'activate':\n        this.openMenu();\n        break;\n      case 'open-to-last':\n        this.openMenu('last');\n        break;\n      case 'escape':\n        this.closeMenu();\n        break;\n    }\n  };\n\n  private _handleTriggerClick(e: MouseEvent) {\n    e.preventDefault();\n    this.toggleMenu();\n  }\n\n  private _handleMenuClose() {\n    this.closeMenu();\n  }\n\n  private _handleMenuActivate() {\n    // Close menu after item activation\n    this.closeMenu();\n  }\n\n  private _handleDocumentClick(e: MouseEvent) {\n    if (!this.open) return;\n\n    const path = e.composedPath();\n\n    // Check if click was inside this component\n    if (path.includes(this)) return;\n\n    // Close menu on outside click\n    this.closeMenu(false);\n  }\n\n  protected updated(changedProperties: Map<PropertyKey, unknown>) {\n    super.updated(changedProperties);\n\n    // Keep aria-expanded in sync\n    if (changedProperties.has('open')) {\n      this._syncTriggerAria();\n    }\n\n    if (\n      changedProperties.has('placement') ||\n      changedProperties.has('orientation')\n    ) {\n      this._anchorCtrl.setOptions({ placement: this._effectivePlacement });\n    }\n  }\n\n  private _setOpen(open: boolean, dispatch: boolean): void {\n    if (this._open === open) return;\n\n    const oldValue = this._open;\n\n    this._open = open;\n    this.requestUpdate('open', oldValue);\n    this._syncTriggerAria();\n\n    if (dispatch) this._dispatchToggle();\n  }\n\n  private _syncTriggerAria(): void {\n    const trigger = this._trigger?.deref();\n    if (!trigger?.isConnected) return;\n\n    trigger.setAttribute('aria-haspopup', 'menu');\n    trigger.setAttribute('aria-expanded', String(this.open));\n  }\n\n  protected render() {\n    return html`\n      <div id=\"root\" part=\"root\">\n        <div\n          id=\"trigger-wrap\"\n          ${keyNavigation(this._onNavigate, {\n            navigationAxis: this._resolvedOrientation,\n            handleNavAxis: false,\n            handleOpenAxis: true,\n            handleActivate: true,\n            handleEscape: this.open,\n          })}\n          @click=${this._handleTriggerClick}\n        >\n          <slot\n            name=\"trigger\"\n            @slotchange=${this._handleTriggerSlotChange}\n          ></slot>\n        </div>\n        <div\n          id=\"popup\"\n          part=\"popup\"\n          ?hidden=${!this.open}\n          @rc-menu-close=${this._handleMenuClose}\n          @rc-menu-activate=${this._handleMenuActivate}\n        >\n          <slot @slotchange=${this._handleMenuSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default RCMenuButton;\n"],"names":["menuButtonStyles","css","_RCMenuButton","LitElement","AnchorController","action","value","oldValue","menubar","orientation","focusTarget","menu","returnFocus","e","trigger","options","el","changedProperties","open","dispatch","html","keyNavigation","RCMenuButton","__decorateClass","property","query","state"],"mappings":";;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACwCzB,MAAMC,IAAN,MAAMA,UAAqBC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAcL,KAAQ,eAAe,IACvB,KAAQ,QAAQ,IA8ChB,KAAA,YAA6B,gBAsC7B,KAAQ,cAAc,IAAIC,EAAiB,MAAM;AAAA,MAC/C,QAAQ,MAAM,KAAK,UAAU;AAAA,MAC7B,UAAU,MAAM,KAAK,WAAW;AAAA,MAChC,YAAY,MAAM;AAAA,MAClB,WAAW;AAAA,MACX,QAAQ;AAAA,IAAA,CACT,GAGD,KAAQ,4BAA4B,KAAK,qBAAqB,KAAK,IAAI,GAkJvE,KAAQ,cAAc,CAACC,MAAqC;AAC1D,cAAQA,GAAA;AAAA,QACN,KAAK;AAAA,QACL,KAAK;AACH,eAAK,SAAA;AACL;AAAA,QACF,KAAK;AACH,eAAK,SAAS,MAAM;AACpB;AAAA,QACF,KAAK;AACH,eAAK,UAAA;AACL;AAAA,MAAA;AAAA,IAEN;AAAA,EAAA;AAAA,EAxPA,IAAI,OAAgB;AAClB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA,EAGA,IAAI,KAAKC,GAA4B;AACnC,UAAMC,IAAW,KAAK;AAEtB,IAAID,MAAU,WAEd,KAAK,SAASA,GAAO,EAAK,GAC1B,KAAK,cAAc,QAAQC,CAAQ;AAAA,EACrC;AAAA,EAIA,IAAI,cAAuB;AACzB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA,EAGA,IAAI,YAAYD,GAAgB;AAC9B,UAAMC,IAAW,KAAK;AAEtB,SAAK,eAAeD,GAEhBA,KAAS,CAAC,KAAK,SACjB,KAAK,SAAS,IAAM,EAAK,GAG3B,KAAK,cAAc,eAAeC,CAAQ;AAAA,EAC5C;AAAA,EAaA,IAAY,sBAAuC;AACjD,WAAI,KAAK,cAAc,iBAAuB,KAAK,YAC5C,KAAK,yBAAyB,aAAa,gBAAgB,KAAK;AAAA,EACzE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAY,uBAAkD;AAC5D,QAAI,KAAK,YAAa,QAAO,KAAK;AAGlC,UAAMC,IAAU,KAAK,QAAQ,8BAA8B;AAC3D,QAAIA,GAAS;AACX,YAAMC,IACJD,EAAQ,aAAa,aAAa,KAClCA,EAAQ,aAAa,kBAAkB;AACzC,UAAIC,MAAgB,WAAY,QAAO;AACvC,UAAIA,MAAgB,aAAc,QAAO;AAAA,IAC3C;AAEA,WAAO;AAAA,EACT;AAAA,EAkCA,oBAAoB;AAClB,UAAM,kBAAA,GAEN,KAAK,eAAe,IAAI,iBAAiB,MAAM,KAAK,sBAAsB,GAC1E,KAAK,aAAa,QAAQ,MAAM,EAAE,YAAY,IAAM,iBAAiB,CAAC,UAAU,GAAG,GAEnF,SAAS,iBAAiB,SAAS,KAAK,2BAA2B,EAAI,GAEnE,KAAK,eACP,KAAK,SAAS,IAAM,EAAK;AAAA,EAE7B;AAAA,EAEA,uBAAuB;AACrB,SAAK,cAAc,WAAA,GACnB,KAAK,eAAe,QAEpB,MAAM,qBAAA,GACN,SAAS,oBAAoB,SAAS,KAAK,2BAA2B,EAAI;AAAA,EAC5E;AAAA;AAAA,EAGA,SAASC,IAAgC,SAAS;AAChD,IAAI,KAAK,SAET,KAAK,YAAY,WAAW,EAAE,WAAW,KAAK,qBAAqB,GACnE,KAAK,SAAS,IAAM,EAAI,GACxB,KAAK,YAAY,OAAA,GAEjB,KAAK,eAAe,KAAK,MAAM;AAC7B,YAAMC,IAAO,KAAK,OAAO,MAAA;AACzB,MAAAD,MAAgB,SAASC,GAAM,UAAA,IAAcA,GAAM,WAAA;AAAA,IACrD,CAAC;AAAA,EACH;AAAA;AAAA,EAGA,UAAUC,IAAc,IAAM;AAC5B,IAAK,KAAK,SAEV,KAAK,SAAS,IAAO,EAAI,GAErBA,KACc,KAAK,UAAU,MAAA,GACtB,MAAA;AAAA,EAEb;AAAA;AAAA,EAGA,aAAa;AACX,IAAI,KAAK,OACP,KAAK,UAAA,IAEL,KAAK,SAAA;AAAA,EAET;AAAA,EAEQ,kBAAkB;AACxB,SAAK;AAAA,MACH,IAAI,YAAqC,yBAAyB;AAAA,QAChE,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,MAAM,KAAK,KAAA;AAAA,MAAK,CAC3B;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,yBAAyBC,GAAU;AAEzC,UAAMC,IADOD,EAAE,cACM,iBAAA,EAAmB,CAAC;AAEzC,IAAIC,MACF,KAAK,WAAW,IAAI,QAAQA,CAAO,GACnC,KAAK,iBAAA,GACL,KAAK,qBAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYQ,uBAAuB;AAC7B,UAAMA,IAAU,KAAK,UAAU,MAAA;AAE/B,IAAKA,MAED,KAAK,aAAa,UAAU,MAAM,OACpCA,EAAQ,aAAa,YAAY,IAAI,IAErCA,EAAQ,gBAAgB,UAAU;AAAA,EAEtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYS,MAAMC,GAAwB;AACrC,UAAMD,IAAU,KAAK,UAAU,MAAA;AAE/B,QAAI,CAACA,GAAS;AACZ,YAAM,MAAMC,CAAO;AACnB;AAAA,IACF;AAEA,IAAAD,EAAQ,gBAAgB,UAAU,GAClCA,EAAQ,MAAMC,CAAO;AAAA,EACvB;AAAA,EAGQ,sBAAsBF,GAAU;AAGtC,UAAMF,IAFOE,EAAE,cACO,iBAAA,EACA,KAAK,CAACG,MAAOA,EAAG,YAAY,SAAS;AAI3D,IAAIL,MACF,KAAK,QAAQ,IAAI,QAAQA,CAAI;AAAA,EAEjC;AAAA,EAiBQ,oBAAoBE,GAAe;AACzC,IAAAA,EAAE,eAAA,GACF,KAAK,WAAA;AAAA,EACP;AAAA,EAEQ,mBAAmB;AACzB,SAAK,UAAA;AAAA,EACP;AAAA,EAEQ,sBAAsB;AAE5B,SAAK,UAAA;AAAA,EACP;AAAA,EAEQ,qBAAqBA,GAAe;AAM1C,IALI,CAAC,KAAK,QAEGA,EAAE,aAAA,EAGN,SAAS,IAAI,KAGtB,KAAK,UAAU,EAAK;AAAA,EACtB;AAAA,EAEU,QAAQI,GAA8C;AAC9D,UAAM,QAAQA,CAAiB,GAG3BA,EAAkB,IAAI,MAAM,KAC9B,KAAK,iBAAA,IAILA,EAAkB,IAAI,WAAW,KACjCA,EAAkB,IAAI,aAAa,MAEnC,KAAK,YAAY,WAAW,EAAE,WAAW,KAAK,qBAAqB;AAAA,EAEvE;AAAA,EAEQ,SAASC,GAAeC,GAAyB;AACvD,QAAI,KAAK,UAAUD,EAAM;AAEzB,UAAMX,IAAW,KAAK;AAEtB,SAAK,QAAQW,GACb,KAAK,cAAc,QAAQX,CAAQ,GACnC,KAAK,iBAAA,GAEDY,UAAe,gBAAA;AAAA,EACrB;AAAA,EAEQ,mBAAyB;AAC/B,UAAML,IAAU,KAAK,UAAU,MAAA;AAC/B,IAAKA,GAAS,gBAEdA,EAAQ,aAAa,iBAAiB,MAAM,GAC5CA,EAAQ,aAAa,iBAAiB,OAAO,KAAK,IAAI,CAAC;AAAA,EACzD;AAAA,EAEU,SAAS;AACjB,WAAOM;AAAA;AAAA;AAAA;AAAA,YAICC,EAAc,KAAK,aAAa;AAAA,MAChC,gBAAgB,KAAK;AAAA,MACrB,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,cAAc,KAAK;AAAA,IAAA,CACpB,CAAC;AAAA,mBACO,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA,0BAIjB,KAAK,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMnC,CAAC,KAAK,IAAI;AAAA,2BACH,KAAK,gBAAgB;AAAA,8BAClB,KAAK,mBAAmB;AAAA;AAAA,8BAExB,KAAK,qBAAqB;AAAA;AAAA;AAAA;AAAA,EAItD;AACF;AAzWEnB,EAAO,SAAS,CAACF,CAAgB,GAQjCE,EAAgB,oBAAoC;AAAA,EAClD,GAAGC,EAAW;AAAA,EACd,gBAAgB;AAAA;AAXb,IAAMmB,IAANpB;AAmBDqB,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlB/BF,EAmBP,WAAA,QAAA,CAAA;AAgBAC,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,SAAS,WAAW,gBAAgB;AAAA,GAlC3CF,EAmCP,WAAA,eAAA,CAAA;AAsBJC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAxD9BF,EAyDX,WAAA,eAAA,CAAA;AAIAC,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA5DhBF,EA6DX,WAAA,aAAA,CAAA;AA2BwBC,EAAA;AAAA,EAAvBE,EAAM,OAAO;AAAA,GAxFHH,EAwFa,WAAA,UAAA,CAAA;AACCC,EAAA;AAAA,EAAxBE,EAAM,QAAQ;AAAA,GAzFJH,EAyFc,WAAA,WAAA,CAAA;AAIjBC,EAAA;AAAA,EADPG,EAAA;AAAM,GA5FIJ,EA6FH,WAAA,YAAA,CAAA;AAIAC,EAAA;AAAA,EADPG,EAAA;AAAM,GAhGIJ,EAiGH,WAAA,SAAA,CAAA;"}