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

@rcarls/rc-menu-button 0.5.0 → 0.6.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 (12) hide show

package/CHANGELOG.md +44 -0
package/README.md +58 -52
package/dist/custom-elements.json +72 -5
package/dist/{rc-menu-button-BuLMtVMw.js → rc-menu-button-DPs2AT2d.js} +159 -55
package/dist/rc-menu-button-DPs2AT2d.js.map +1 -0
package/dist/rc-menu-button-define.js +1 -1
package/dist/rc-menu-button.js +1 -1
package/dist/types/packages/rc-menu-button/src/index.d.ts +1 -1
package/dist/types/packages/rc-menu-button/src/rc-menu-button.d.ts +27 -2
package/package.json +4 -4
package/dist/rc-menu-button-BuLMtVMw.js.map +0 -1
package/dist/types/packages/rc-menu-button/src/rc-menu-button.test.d.ts +0 -0

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,49 @@
 # @rcarls/rc-menu-button
+## 0.6.0
+### Minor Changes
+- 30eb232: Add icon-only activation-area sizing and Material icon-button variants. Align menu
+  selection and submenu affordances, and keep anchored popups within the viewport
+  across native and fallback positioning.
+- 30eb232: Add `--rc-menu-button-touch-target-overlap-inline-start` and
+  `-inline-end` for an `icon-only` trigger, zero by default. A theme or
+  consumer sets one to let the accessible touch-target inflation on that
+  side overlap into whatever sits just outside the host, such as a toolbar's
+  own edge padding, instead of also reserving layout space there: the
+  visible trigger shifts flush with that edge while the invisible hit
+  region keeps its full accessible size. Mirrors `@rcarls/rc-button`'s own
+  touch-target overlap tokens.
+### Patch Changes
+- 7382c71: Add a priority-aware action toolbar that moves original controls into an
+  overflow menu. Which actions are promoted is a purely declarative computation
+  from `max-shown` and each action's `data-priority`/authored `slot`, with no
+  runtime measurement of the toolbar's or its children's rendered size: a
+  consumer whose promoted count needs to react to available space owns that
+  decision and writes the resulting `max-shown` value down. Include controlled
+  and uncontrolled open state, keyboard navigation, light dismissal, and a
+  non-Popover fallback.
+  Fix `--rc-adaptive-menu-touch-target-overlap-inline-start`/`-end`: the host's
+  own `max-inline-size: 100%` self-referenced a shrink-to-fit ancestor's
+  already-margin-reduced auto size (an app bar's own trailing group, for
+  example), quietly clamping the host back down and canceling the overlap out
+  from under it. The cap now grows by the overlap amount so it only ever bounds
+  the host's real content.
+- 57370e4: Align component metadata, aggregate framework typings, development-time native-child
+  validation, controlled menu state, package declarations, and public documentation before the
+  next release.
+- Updated dependencies [7382c71]
+- Updated dependencies [6683eb9]
+- Updated dependencies [ee7ba6c]
+- Updated dependencies [30eb232]
+  - @rcarls/rc-menu@0.6.0
+  - @rcarls/rc-common@0.6.0
 ## 0.5.0
 ### Minor Changes

package/README.md CHANGED Viewed

@@ -18,8 +18,8 @@ npm install @rcarls/rc-menu-button
 ## Import
 ```js
-import '@rcarls/rc-menu-button/define';                  // side-effect: registers <rc-menu-button>
-import { RCMenuButton } from '@rcarls/rc-menu-button';   // named class export
+import '@rcarls/rc-menu-button/define'; // side-effect: registers <rc-menu-button>
+import { RCMenuButton } from '@rcarls/rc-menu-button'; // named class export
 ```
 `rc-menu-button` depends on `rc-menu`. Ensure both are installed.
@@ -53,56 +53,62 @@ item.
 ### Properties / attributes
-| Property | Attribute | Type | Default | Description |
-|---|---|---|---|---|
-| `open` | `open` | `boolean` | `false` | Whether the menu popup is visible. Reflects to attribute. Controlled mode: host writes silently. |
-| `defaultOpen` | `default-open` | `boolean` | `false` | Initial open state for uncontrolled mode. Ignored after the first controlled write to `open`. |
-| `orientation` | `orientation` | `'horizontal' \| 'vertical' \| undefined` | `undefined` | Arrow-key axis for opening the menu. When unset, inherited from a parent `rc-menubar` or `[role="menubar"]` element. Falls back to `'horizontal'`. |
-| `placement` | `placement` | `AnchorPlacement` | `'bottom-start'` | Preferred placement of the popup relative to the trigger. Switches to `'right-start'` under vertical orientation unless explicitly overridden. |
+| Property      | Attribute      | Type                                      | Default          | Description                                                                                                                                                                                               |
+| ------------- | -------------- | ----------------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `open`        | `open`         | `boolean`                                 | `false`          | Whether the menu popup is visible. Reflects to attribute. Controlled mode: host writes silently.                                                                                                          |
+| `defaultOpen` | `default-open` | `boolean`                                 | `false`          | Initial open state for uncontrolled mode. Ignored after the first controlled write to `open`.                                                                                                             |
+| `orientation` | `orientation`  | `'horizontal' \| 'vertical' \| undefined` | `undefined`      | Arrow-key axis for opening the menu. Vertical triggers span their allocated menu-row width. When unset, inherited from a parent `rc-menubar` or `[role="menubar"]` element. Falls back to `'horizontal'`. |
+| `placement`   | `placement`    | `AnchorPlacement`                         | `'bottom-start'` | Preferred placement of the popup relative to the trigger. Switches to `'right-start'` under vertical orientation unless explicitly overridden.                                                            |
+|               | `icon-only`    | boolean attribute                         | absent           | Hints that the trigger has no visible label so themes can apply icon-button sizing and activation-area geometry.                                                                                          |
 ### CSS custom properties
-| 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` | `none` | 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-indicator-size` | `1em` | Inline and block size reserved for the optional indicator |
-| `--rc-menu-button-indicator-color` | `currentColor` | Color of the optional indicator |
-| `--rc-menu-button-indicator-inset` | Trigger inline padding | Indicator distance from the trigger's inline end |
+| 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`                | `none`                                           | 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-indicator-size`                    | `1em`                                            | Inline and block size reserved for the optional indicator       |
+| `--rc-menu-button-indicator-color`                   | `currentColor`                                   | Color of the optional indicator                                 |
+| `--rc-menu-button-indicator-inset`                   | Trigger inline padding                           | Indicator distance from the trigger's inline end                |
+| `--rc-menu-button-icon-size`                         | Trigger block size                               | Visible inline size of an `icon-only` trigger                   |
+| `--rc-menu-button-touch-target-block-size`           | `3rem`                                           | Minimum block size of an `icon-only` trigger's activation area  |
+| `--rc-menu-button-touch-target-inline-size`          | Activation-area block size                       | Minimum inline size of an `icon-only` trigger's activation area |
+| `--rc-menu-button-touch-target-overlap-inline-start` | `0px`                                            | Allows touch-target inflation to overlap the leading neighbor   |
+| `--rc-menu-button-touch-target-overlap-inline-end`   | `0px`                                            | Allows touch-target inflation to overlap the trailing neighbor  |
 ### CSS parts
-| Part | Element | Description |
-|---|---|---|
-| `root` | Outer `div` | Root wrapper |
+| Part    | Element     | Description                                             |
+| ------- | ----------- | ------------------------------------------------------- |
+| `root`  | Outer `div` | Root wrapper                                            |
 | `popup` | Popup `div` | Container that shows/hides around the slotted `rc-menu` |
 ### Slots
-| Slot | Description |
-|---|---|
-| `trigger` | The button (or other interactive element) that toggles the menu. Receives `aria-haspopup` and `aria-expanded` automatically. |
+| Slot        | Description                                                                                                                                    |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `trigger`   | The button (or other interactive element) that toggles the menu. Receives `aria-haspopup` and `aria-expanded` automatically.                   |
 | `indicator` | Optional author-supplied decorative submenu indicator. Rendered at the trigger's inline end with pointer events passed through to the trigger. |
-| *(default)* | The `rc-menu` to show as the popup. |
+| _(default)_ | The `rc-menu` to show as the popup.                                                                                                            |
 ### Events
-| Event | Bubbles | Cancelable | Detail | When |
-|---|---|---|---|---|
-| `rc-menu-button-toggle` | Yes (composed) | No | `{ open: boolean }` | Menu opens or closes |
+| Event                   | Bubbles        | Cancelable | Detail              | When                 |
+| ----------------------- | -------------- | ---------- | ------------------- | -------------------- |
+| `rc-menu-button-toggle` | Yes (composed) | No         | `{ open: boolean }` | Menu opens or closes |
 ### Public methods
@@ -124,25 +130,25 @@ toggleMenu(): void
 Keyboard handling depends on the resolved `orientation` (horizontal by
 default, or inherited from a parent menubar).
-| Key | Condition | Action |
-|---|---|---|
-| `ArrowDown` | Horizontal orientation | Open menu, focus first item |
-| `ArrowUp` | Horizontal orientation | Open menu, focus last item |
-| `ArrowRight` | Vertical orientation | Open menu, focus first item |
-| `ArrowLeft` | Vertical orientation | Open menu, focus last item |
-| `Enter` / `Space` | Menu closed | Open menu |
-| `Enter` / `Space` | Menu open | Activate focused item, close menu |
-| `Escape` | Menu open | Close menu, return focus to trigger |
+| Key               | Condition              | Action                              |
+| ----------------- | ---------------------- | ----------------------------------- |
+| `ArrowDown`       | Horizontal orientation | Open menu, focus first item         |
+| `ArrowUp`         | Horizontal orientation | Open menu, focus last item          |
+| `ArrowRight`      | Vertical orientation   | Open menu, focus first item         |
+| `ArrowLeft`       | Vertical orientation   | Open menu, focus last item          |
+| `Enter` / `Space` | Menu closed            | Open menu                           |
+| `Enter` / `Space` | Menu open              | Activate focused item, close menu   |
+| `Escape`          | Menu open              | Close menu, return focus to trigger |
 ---
 ## ARIA
-| Attribute | Where | Value |
-|---|---|---|
-| `aria-haspopup="menu"` | Trigger element | Set automatically on slot change |
-| `aria-expanded` | Trigger element | `"true"` / `"false"`, kept in sync with `open` |
-| `open` | Host element | Reflected boolean attribute when menu is open |
+| Attribute              | Where           | Value                                          |
+| ---------------------- | --------------- | ---------------------------------------------- |
+| `aria-haspopup="menu"` | Trigger element | Set automatically on slot change               |
+| `aria-expanded`        | Trigger element | `"true"` / `"false"`, kept in sync with `open` |
+| `open`                 | Host element    | Reflected boolean attribute when menu is open  |
 ---

package/dist/custom-elements.json CHANGED Viewed

@@ -35,7 +35,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/rc-menu-button"
+            "module": "src/rc-menu-button.js"
           }
         }
       ]
@@ -137,6 +137,29 @@
               "description": "Indicator distance from the trigger's inline end",
               "name": "--rc-menu-button-indicator-inset",
               "default": "var(--rc-menu-button-trigger-padding-inline)"
+            },
+            {
+              "description": "Inline size of an `icon-only` trigger's visible box. Square by default (equal to `--rc-menu-button-trigger-block-size`); set narrower or wider to change only the trigger's width, independent of its height.",
+              "name": "--rc-menu-button-icon-size"
+            },
+            {
+              "description": "Minimum accessible touch target block size for an `icon-only` trigger. A floor, not a fixed size: has no effect once `--rc-menu-button-trigger-block-size` already meets or exceeds it. Grows the shadow-DOM trigger wrapper (reserving layout space) and the light-DOM hit-slop (the actual larger clickable region) together; the visible trigger itself stays at its own size, centered.",
+              "name": "--rc-menu-button-touch-target-block-size",
+              "default": "3rem"
+            },
+            {
+              "description": "Minimum accessible touch target inline size for an `icon-only` trigger. Defers to `--rc-menu-button-touch-target-block-size` when unset.",
+              "name": "--rc-menu-button-touch-target-inline-size"
+            },
+            {
+              "description": "Zero by default. A theme or consumer sets this on an `icon-only` trigger that sits at a real leading edge (no neighbor on that side) to let its touch-target inflation overlap into whatever sits just outside the host, such as a container's own edge padding, instead of also reserving layout space there.",
+              "name": "--rc-menu-button-touch-target-overlap-inline-start",
+              "default": "0px"
+            },
+            {
+              "description": "The trailing-edge counterpart to `--rc-menu-button-touch-target-overlap-inline-start`.",
+              "name": "--rc-menu-button-touch-target-overlap-inline-end",
+              "default": "0px"
             }
           ],
           "cssParts": [
@@ -174,6 +197,33 @@
               "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }",
               "description": "Enables delegatesFocus so the browser routes focus() on the host element\nto the slotted trigger button."
             },
+            {
+              "kind": "field",
+              "name": "_styledRoots",
+              "privacy": "protected",
+              "static": true,
+              "readonly": true,
+              "default": "new Set<Document | ShadowRoot>()"
+            },
+            {
+              "kind": "method",
+              "name": "_ensureBaseStyles",
+              "privacy": "protected",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "Document | ShadowRoot"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "_defaultOpen",
@@ -187,10 +237,17 @@
               "kind": "field",
               "name": "_open",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "privacy": "private",
-              "default": "false"
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_uncontrolledOpen",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -355,7 +412,13 @@
               "kind": "method",
               "name": "_dispatchToggle",
               "privacy": "protected",
-              "description": "Dispatches the `rc-menu-button-toggle` bubbling composed event with the current open state."
+              "parameters": [
+                {
+                  "name": "open",
+                  "default": "this.open"
+                }
+              ],
+              "description": "Dispatches the `rc-menu-button-toggle` bubbling composed event with the requested open state."
             },
             {
               "kind": "method",
@@ -543,6 +606,10 @@
               },
               "default": "'bottom-start'",
               "fieldName": "placement"
+            },
+            {
+              "description": "Hints that the slotted trigger has no visible label, so themes can size it and its touch target as an icon button (see `--rc-menu-button-icon-size` and `--rc-menu-button-touch-target-*` above). Purely a styling hook; RCMenuButton does not read or derive it — set it whenever the trigger is rendered icon-only.",
+              "name": "icon-only"
             }
           ],
           "superclass": {

package/dist/{rc-menu-button-BuLMtVMw.js → rc-menu-button-DPs2AT2d.js} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { css as h, LitElement as d, html as b } from "lit";
-import { property as l, query as g, state as p } from "lit/decorators.js";
+import { css as p, LitElement as g, html as b } from "lit";
+import { property as l, query as d, state as h } from "lit/decorators.js";
 import { AnchorController as m, keyNavigation as v, keyInteraction as f } from "@rcarls/rc-common";
-const _ = h`
+const y = p`
   :host {
     display: inline-block;
   }
@@ -16,6 +16,7 @@ const _ = h`
   :host([orientation='vertical']) #root {
     display: block;
+    inline-size: 100%;
   }
   #trigger-wrap {
@@ -25,10 +26,73 @@ const _ = h`
   :host([orientation='vertical']) #trigger-wrap {
     display: block;
+    inline-size: 100%;
+  }
+  /*
+   * Icon-only triggers (e.g. a toolbar's overflow button) can render
+   * visually smaller than the accessible 48dp touch-target minimum,
+   * especially at a narrow width. This is a floor, not a fixed size: a
+   * trigger already at or above it (the default width, or a labeled
+   * trigger) is unaffected. #trigger-wrap reserves the layout space and
+   * centers the (possibly smaller) slotted trigger within it; the actual
+   * larger hit region comes from the light-DOM hit-slop pseudo-element in
+   * rc-menu-button.ts. Mirrors rc-button's own touch-target affordance.
+   *
+   * Scoped to [icon-only] rather than applied unconditionally: switching
+   * #trigger-wrap to a flex/grid container would blockify the slotted
+   * trigger's own inline-flex display (its getComputedStyle().display
+   * becomes "flex", per the CSS Display spec's flex-item blockification —
+   * harmless for layout, since a flex item is sized by its container's
+   * flex algorithm regardless of its own inline/block outer type, but an
+   * observable change other callers shouldn't have to account for).
+   */
+  :host([icon-only]) #trigger-wrap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: var(--rc-menu-button-touch-target-block-size, 3rem);
+    min-inline-size: var(
+      --rc-menu-button-touch-target-inline-size,
+      var(--rc-menu-button-touch-target-block-size, 3rem)
+    );
+    /*
+     * Zero by default. A theme or consumer sets one of these on a trigger
+     * that sits at a real edge (no neighbor on that side) to let the
+     * touch-target inflation above overlap into whatever sits just outside
+     * the host instead of also reserving layout space there. Mirrors
+     * rc-button's own --rc-button-touch-target-overlap-inline-* tokens.
+     */
+    margin-inline-start: calc(-1 * var(--rc-menu-button-touch-target-overlap-inline-start, 0px));
+    margin-inline-end: calc(-1 * var(--rc-menu-button-touch-target-overlap-inline-end, 0px));
+  }
+  :host([icon-only][orientation='vertical']) #trigger-wrap {
+    display: flex;
+  }
+  /*
+   * Icon-only trigger width: square by default (matches its own block
+   * size), or a distinct value for a narrower/wider variant. Padding is
+   * cleared since an icon-only trigger centers its (typically single) icon
+   * child via the flex alignment above rather than via inline padding.
+   */
+  :host([icon-only]) slot[name='trigger']::slotted(button),
+  :host([icon-only]) slot[name='trigger']::slotted([role='button']) {
+    inline-size: var(
+      --rc-menu-button-icon-size,
+      var(--rc-menu-button-trigger-block-size, var(--rc-control-block-size, 2.25em))
+    );
+    min-inline-size: var(
+      --rc-menu-button-icon-size,
+      var(--rc-menu-button-trigger-block-size, var(--rc-control-block-size, 2.25em))
+    );
+    padding-inline: 0;
   }
   slot[name='trigger']::slotted(button),
   slot[name='trigger']::slotted([role='button']) {
+    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -118,14 +182,48 @@ const _ = h`
     color: inherit;
   }
 `;
-var $ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, o = (u, t, e, r) => {
-  for (var n = r > 1 ? void 0 : r ? k(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 && $(t, e, n), n;
+var _ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (u, t, e, n) => {
+  for (var i = n > 1 ? void 0 : n ? k(t, e) : t, s = u.length - 1, c; s >= 0; s--)
+    (c = u[s]) && (i = (n ? c(t, e, i) : c(i)) || i);
+  return n && i && _(t, e, i), i;
 };
-const a = class a extends d {
+const x = `
+@layer rc-base {
+  /*
+   * Expands an icon-only trigger's clickable region beyond its visible box
+   * up to the accessible touch-target minimum, the same way rc-button and
+   * rc-chip do: an absolutely-positioned, invisible pseudo-element on the
+   * actual slotted trigger element (not the host) extends the hit area
+   * symmetrically. The trigger already has position: relative from the
+   * shadow-scoped ::slotted(button) rule. max(100%, size) keeps this a
+   * no-op once the visible trigger already meets or exceeds the touch
+   * target, rather than shrinking it.
+   */
+  rc-menu-button[icon-only] > [slot='trigger']::before {
+    content: '';
+    position: absolute;
+    inset-block: calc(
+      (
+          var(--rc-menu-button-touch-target-block-size, 3rem) -
+            max(100%, var(--rc-menu-button-trigger-block-size, 0px))
+        ) / -2
+    );
+    inset-inline: calc(
+      (
+          var(
+              --rc-menu-button-touch-target-inline-size,
+              var(--rc-menu-button-touch-target-block-size, 3rem)
+            ) -
+            max(100%, var(--rc-menu-button-icon-size, var(--rc-menu-button-trigger-block-size, 0px)))
+        ) / -2
+    );
+  }
+}
+`;
+var r;
+const o = (r = class extends g {
   constructor() {
-    super(...arguments), this._defaultOpen = !1, this._open = !1, this._openInitialized = !1, this.placement = "bottom-start", this._anchorCtrl = new m(this, {
+    super(...arguments), this._defaultOpen = !1, this._openInitialized = !1, this.placement = "bottom-start", this._anchorCtrl = new m(this, {
       anchor: () => this._$root ?? null,
       floating: () => this._$popup ?? null,
       shadowHost: () => this,
@@ -146,13 +244,20 @@ const a = class a extends d {
       }
     };
   }
+  static _ensureBaseStyles(t) {
+    if (r._styledRoots.has(t))
+      return;
+    r._styledRoots.add(t);
+    const e = document.createElement("style");
+    e.setAttribute("data-rc-light-dom-base", "rc-menu-button"), e.textContent = x, t instanceof Document ? t.head.append(e) : t.append(e);
+  }
   get open() {
-    return this._open;
+    return this._open ?? this._uncontrolledOpen ?? this._defaultOpen;
   }
   /** Applies open state in controlled mode without dispatching an event. */
   set open(t) {
-    const e = this._open;
-    t !== void 0 && (this._openInitialized = !0, this._setOpen(t, !1), this.requestUpdate("open", e));
+    const e = this.open;
+    this._open = t, this._openInitialized = !0, this.requestUpdate("open", e), this._syncTriggerAria();
   }
   get defaultOpen() {
     return this._defaultOpen;
@@ -160,7 +265,7 @@ const a = class a extends d {
   /** Applies the uncontrolled default before any controlled write occurs. */
   set defaultOpen(t) {
     const e = this._defaultOpen;
-    this._defaultOpen = t, t && !this._openInitialized && this._setOpen(!0, !1), this.requestUpdate("defaultOpen", e);
+    this._defaultOpen = t, !this._openInitialized && this._open === void 0 && this._uncontrolledOpen === void 0 && this.requestUpdate("open", e), this.requestUpdate("defaultOpen", e);
   }
   /**
    * Popup placement adjusted for orientation.
@@ -190,7 +295,7 @@ const a = class a extends d {
   }
   /** 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);
+    super.connectedCallback(), r._ensureBaseStyles(this.getRootNode()), this._tabObserver = new MutationObserver(() => this._syncTriggerTabindex()), this._tabObserver.observe(this, { attributes: !0, attributeFilter: ["tabindex"] }), document.addEventListener("click", this._boundHandleDocumentClick, !0), this.requestUpdate("open");
   }
   /** Disconnects the tabindex observer and removes the document-level click listener. */
   disconnectedCallback() {
@@ -202,7 +307,9 @@ const a = class a extends d {
    * @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(() => {
+    this.open || (this._anchorCtrl.setOptions({ placement: this._effectivePlacement }), this._setOpen(!0, !0), this.updateComplete.then(() => {
+      if (!this.open)
+        return;
       const e = this._$menu?.deref();
       t === "last" ? e?.focusLast() : e?.focusFirst();
     }));
@@ -213,26 +320,26 @@ const a = class a extends d {
    * @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.open && this._$trigger?.deref()?.focus());
   }
   /** 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() {
+  /** Dispatches the `rc-menu-button-toggle` bubbling composed event with the requested open state. */
+  _dispatchToggle(t = this.open) {
     this.dispatchEvent(
       new CustomEvent("rc-menu-button-toggle", {
         bubbles: !0,
         composed: !0,
-        detail: { open: this.open }
+        detail: { open: t }
       })
     );
   }
   /** 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());
+    const n = t.currentTarget.assignedElements()[0];
+    n && (this._$trigger = new WeakRef(n), this._syncTriggerAria(), this._syncTriggerTabindex());
   }
   /** Tracks optional indicator content so the trigger reserves its inline-end space. */
   _handleIndicatorSlotChange(t) {
@@ -273,8 +380,8 @@ const a = class a extends d {
   }
   /** 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));
+    const i = t.currentTarget.assignedElements().find((s) => s.tagName === "RC-MENU");
+    i && (this._$menu = new WeakRef(i));
   }
   /** Prevents the default button action and delegates to `toggleMenu`. */
   _handleTriggerClick(t) {
@@ -294,13 +401,11 @@ const a = class a extends d {
   }
   /** Syncs trigger ARIA when `open` changes; updates anchor placement when `placement` or `orientation` change. */
   updated(t) {
-    super.updated(t), t.has("open") && (this._syncTriggerAria(), this._$popup?.isConnected && this._$popup.togglePopover(this.open)), (t.has("placement") || t.has("orientation")) && this._anchorCtrl.setOptions({ placement: this._effectivePlacement });
+    super.updated(t), t.has("open") && (this._syncTriggerAria(), this._$popup?.isConnected && (this._$popup.togglePopover(this.open), this.open && this._anchorCtrl.update())), (t.has("placement") || t.has("orientation")) && this._anchorCtrl.setOptions({ placement: this._effectivePlacement });
   }
   _setOpen(t, e) {
-    if (this._open === t)
-      return;
-    const r = this._open;
-    this._open = t, this.requestUpdate("open", r), this._syncTriggerAria(), e && this._dispatchToggle();
+    const n = this.open;
+    n !== t && (this._open === void 0 && (this._uncontrolledOpen = t), this.requestUpdate("open", n), this._syncTriggerAria(), e && this._dispatchToggle(t));
   }
   /** Writes `aria-haspopup` and `aria-expanded` to the trigger button to match the current open state. */
   _syncTriggerAria() {
@@ -342,37 +447,36 @@ const a = class a extends d {
       </div>
     `;
   }
-};
-a.styles = [_], a.shadowRootOptions = {
-  ...d.shadowRootOptions,
+}, r.styles = [y], r.shadowRootOptions = {
+  ...g.shadowRootOptions,
   delegatesFocus: !0
-};
-let i = a;
-o([
+}, r._styledRoots = /* @__PURE__ */ new Set(), r);
+a([
   l({ type: Boolean, reflect: !0 })
-], i.prototype, "open", 1);
-o([
+], o.prototype, "open", 1);
+a([
   l({ type: Boolean, attribute: "default-open" })
-], i.prototype, "defaultOpen", 1);
-o([
+], o.prototype, "defaultOpen", 1);
+a([
   l({ type: String, reflect: !0 })
-], i.prototype, "orientation", 2);
-o([
+], o.prototype, "orientation", 2);
+a([
   l({ reflect: !0 })
-], i.prototype, "placement", 2);
-o([
-  g("#root")
-], i.prototype, "_$root", 2);
-o([
-  g("#popup")
-], i.prototype, "_$popup", 2);
-o([
-  p()
-], i.prototype, "_$trigger", 2);
-o([
-  p()
-], i.prototype, "_$menu", 2);
+], o.prototype, "placement", 2);
+a([
+  d("#root")
+], o.prototype, "_$root", 2);
+a([
+  d("#popup")
+], o.prototype, "_$popup", 2);
+a([
+  h()
+], o.prototype, "_$trigger", 2);
+a([
+  h()
+], o.prototype, "_$menu", 2);
+let C = o;
 export {
-  i as R
+  C as R
 };
-//# sourceMappingURL=rc-menu-button-BuLMtVMw.js.map
+//# sourceMappingURL=rc-menu-button-DPs2AT2d.js.map

package/dist/rc-menu-button-DPs2AT2d.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"rc-menu-button-DPs2AT2d.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 inline-size: 100%;\n }\n\n #trigger-wrap {\n position: relative;\n display: inline-block;\n }\n\n :host([orientation='vertical']) #trigger-wrap {\n display: block;\n inline-size: 100%;\n }\n\n /*\n * Icon-only triggers (e.g. a toolbar's overflow button) can render\n * visually smaller than the accessible 48dp touch-target minimum,\n * especially at a narrow width. This is a floor, not a fixed size: a\n * trigger already at or above it (the default width, or a labeled\n * trigger) is unaffected. #trigger-wrap reserves the layout space and\n * centers the (possibly smaller) slotted trigger within it; the actual\n * larger hit region comes from the light-DOM hit-slop pseudo-element in\n * rc-menu-button.ts. Mirrors rc-button's own touch-target affordance.\n *\n * Scoped to [icon-only] rather than applied unconditionally: switching\n * #trigger-wrap to a flex/grid container would blockify the slotted\n * trigger's own inline-flex display (its getComputedStyle().display\n * becomes \"flex\", per the CSS Display spec's flex-item blockification —\n * harmless for layout, since a flex item is sized by its container's\n * flex algorithm regardless of its own inline/block outer type, but an\n * observable change other callers shouldn't have to account for).\n */\n :host([icon-only]) #trigger-wrap {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-block-size: var(--rc-menu-button-touch-target-block-size, 3rem);\n min-inline-size: var(\n --rc-menu-button-touch-target-inline-size,\n var(--rc-menu-button-touch-target-block-size, 3rem)\n );\n /*\n * Zero by default. A theme or consumer sets one of these on a trigger\n * that sits at a real edge (no neighbor on that side) to let the\n * touch-target inflation above overlap into whatever sits just outside\n * the host instead of also reserving layout space there. Mirrors\n * rc-button's own --rc-button-touch-target-overlap-inline-* tokens.\n */\n margin-inline-start: calc(-1 * var(--rc-menu-button-touch-target-overlap-inline-start, 0px));\n margin-inline-end: calc(-1 * var(--rc-menu-button-touch-target-overlap-inline-end, 0px));\n }\n\n :host([icon-only][orientation='vertical']) #trigger-wrap {\n display: flex;\n }\n\n /*\n * Icon-only trigger width: square by default (matches its own block\n * size), or a distinct value for a narrower/wider variant. Padding is\n * cleared since an icon-only trigger centers its (typically single) icon\n * child via the flex alignment above rather than via inline padding.\n */\n :host([icon-only]) slot[name='trigger']::slotted(button),\n :host([icon-only]) slot[name='trigger']::slotted([role='button']) {\n inline-size: var(\n --rc-menu-button-icon-size,\n var(--rc-menu-button-trigger-block-size, var(--rc-control-block-size, 2.25em))\n );\n min-inline-size: var(\n --rc-menu-button-icon-size,\n var(--rc-menu-button-trigger-block-size, var(--rc-control-block-size, 2.25em))\n );\n padding-inline: 0;\n }\n\n slot[name='trigger']::slotted(button),\n slot[name='trigger']::slotted([role='button']) {\n position: relative;\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 :host([has-indicator]) slot[name='trigger']::slotted(button),\n :host([has-indicator]) slot[name='trigger']::slotted([role='button']) {\n padding-inline-end: calc(\n var(\n --rc-menu-button-indicator-inset,\n var(--rc-menu-button-trigger-padding-inline, var(--rc-control-padding-inline, 0.5em))\n ) +\n var(--rc-menu-button-indicator-size, 1em) +\n var(--rc-menu-button-trigger-gap, var(--rc-item-gap, 0.5em))\n );\n }\n\n slot[name='indicator'] {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(\n --rc-menu-button-indicator-inset,\n var(--rc-menu-button-trigger-padding-inline, var(--rc-control-padding-inline, 0.5em))\n );\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--rc-menu-button-indicator-size, 1em);\n block-size: var(--rc-menu-button-indicator-size, 1em);\n color: var(--rc-menu-button-indicator-color, currentColor);\n pointer-events: none;\n transform: translateY(-50%);\n }\n\n slot[name='indicator']::slotted(*) {\n inline-size: 100%;\n block-size: 100%;\n }\n\n #popup {\n margin: 0;\n padding: 0;\n border: none;\n background: none;\n overflow: visible;\n color: inherit;\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.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-menu-button': RCMenuButton;\n }\n}\n\nconst LIGHT_DOM_CSS = `\n@layer rc-base {\n /*\n * Expands an icon-only trigger's clickable region beyond its visible box\n * up to the accessible touch-target minimum, the same way rc-button and\n * rc-chip do: an absolutely-positioned, invisible pseudo-element on the\n * actual slotted trigger element (not the host) extends the hit area\n * symmetrically. The trigger already has position: relative from the\n * shadow-scoped ::slotted(button) rule. max(100%, size) keeps this a\n * no-op once the visible trigger already meets or exceeds the touch\n * target, rather than shrinking it.\n */\n rc-menu-button[icon-only] > [slot='trigger']::before {\n content: '';\n position: absolute;\n inset-block: calc(\n (\n var(--rc-menu-button-touch-target-block-size, 3rem) -\n max(100%, var(--rc-menu-button-trigger-block-size, 0px))\n ) / -2\n );\n inset-inline: calc(\n (\n var(\n --rc-menu-button-touch-target-inline-size,\n var(--rc-menu-button-touch-target-block-size, 3rem)\n ) -\n max(100%, var(--rc-menu-button-icon-size, var(--rc-menu-button-trigger-block-size, 0px)))\n ) / -2\n );\n }\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 indicator - Optional decorative indicator rendered at the trigger's inline end\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-indicator-size=1em] - Inline and block size of the slotted indicator\n * @cssprop [--rc-menu-button-indicator-color=currentColor] - Color of the slotted indicator\n * @cssprop [--rc-menu-button-indicator-inset=var(--rc-menu-button-trigger-padding-inline)] - Indicator distance from the trigger's inline end\n * @cssprop [--rc-menu-button-icon-size] - Inline size of an `icon-only` trigger's visible box.\n * Square by default (equal to `--rc-menu-button-trigger-block-size`); set narrower or wider\n * to change only the trigger's width, independent of its height.\n * @cssprop [--rc-menu-button-touch-target-block-size=3rem] - Minimum accessible touch target\n * block size for an `icon-only` trigger. A floor, not a fixed size: has no effect once\n * `--rc-menu-button-trigger-block-size` already meets or exceeds it. Grows the shadow-DOM\n * trigger wrapper (reserving layout space) and the light-DOM hit-slop (the actual larger\n * clickable region) together; the visible trigger itself stays at its own size, centered.\n * @cssprop [--rc-menu-button-touch-target-inline-size] - Minimum accessible touch target inline\n * size for an `icon-only` trigger. Defers to `--rc-menu-button-touch-target-block-size` when\n * unset.\n * @cssprop [--rc-menu-button-touch-target-overlap-inline-start=0px] - Zero by default. A theme\n * or consumer sets this on an `icon-only` trigger that sits at a real leading edge (no\n * neighbor on that side) to let its touch-target inflation overlap into whatever sits just\n * outside the host, such as a container's own edge padding, instead of also reserving layout\n * space there.\n * @cssprop [--rc-menu-button-touch-target-overlap-inline-end=0px] - The trailing-edge\n * counterpart to `--rc-menu-button-touch-target-overlap-inline-start`.\n *\n * @csspart root - The root container element\n * @csspart popup - The popup container element\n *\n * @attr open - Whether the menu popup is visible. Controlled mode: host writes silently.\n * @attr default-open - Initial open state for uncontrolled mode. Ignored after the first\n * controlled write to `open`.\n * @attr orientation - Arrow-key axis for opening the menu. Inherits from a parent\n * `rc-menubar` or `[role=\"menubar\"]` when unset.\n * @attr placement - Preferred placement of the popup relative to the trigger.\n * @attr icon-only - Hints that the slotted trigger has no visible label, so themes can size\n * it and its touch target as an icon button (see `--rc-menu-button-icon-size` and\n * `--rc-menu-button-touch-target-*` above). Purely a styling hook; RCMenuButton does not read\n * or derive it — set it whenever the trigger is rendered icon-only.\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 protected static readonly _styledRoots = new Set<Document | ShadowRoot>();\n\n protected static _ensureBaseStyles(root: Document | ShadowRoot): void {\n if (RCMenuButton._styledRoots.has(root)) {\n return;\n }\n\n RCMenuButton._styledRoots.add(root);\n\n const style = document.createElement('style');\n\n style.setAttribute('data-rc-light-dom-base', 'rc-menu-button');\n style.textContent = LIGHT_DOM_CSS;\n\n if (root instanceof Document) {\n root.head.append(style);\n } else {\n root.append(style);\n }\n }\n\n private _defaultOpen = false;\n private _open: boolean | undefined;\n private _uncontrolledOpen: boolean | undefined;\n private _openInitialized = 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 ?? this._uncontrolledOpen ?? this._defaultOpen;\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 this._open = value;\n this._openInitialized = true;\n this.requestUpdate('open', oldValue);\n this._syncTriggerAria();\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 (\n !this._openInitialized &&\n this._open === undefined &&\n this._uncontrolledOpen === undefined\n ) {\n this.requestUpdate('open', oldValue);\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 RCMenuButton._ensureBaseStyles(this.getRootNode() as Document | ShadowRoot);\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 this.requestUpdate('open');\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) {\n return;\n }\n\n this._anchorCtrl.setOptions({ placement: this._effectivePlacement });\n this._setOpen(true, true);\n\n this.updateComplete.then(() => {\n if (!this.open) {\n return;\n }\n\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) {\n return;\n }\n\n this._setOpen(false, true);\n\n if (returnFocus && !this.open) {\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 requested open state. */\n protected _dispatchToggle(open = this.open) {\n this.dispatchEvent(\n new CustomEvent<RCMenuButtonToggleEvent>('rc-menu-button-toggle', {\n bubbles: true,\n composed: true,\n detail: { 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 /** Tracks optional indicator content so the trigger reserves its inline-end space. */\n protected _handleIndicatorSlotChange(e: Event) {\n const $slot = e.currentTarget as HTMLSlotElement;\n\n this.toggleAttribute('has-indicator', $slot.assignedElements().length > 0);\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) {\n return;\n }\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\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 // A pending update can flush after the host (and its shadow tree) has\n // already been disconnected — e.g. a framework unmounting this element\n // in the same tick as an `open` change. togglePopover() throws\n // InvalidStateError on a disconnected popover, so guard on connectivity\n // rather than letting that reach the caller.\n if (this._$popup?.isConnected) {\n this._$popup.togglePopover(this.open);\n\n if (this.open) {\n this._anchorCtrl.update();\n }\n }\n }\n\n if (changedProperties.has('placement') || changedProperties.has('orientation')) {\n this._anchorCtrl.setOptions({ placement: this._effectivePlacement });\n }\n }\n\n protected _setOpen(open: boolean, dispatch: boolean): void {\n const oldValue = this.open;\n\n if (oldValue === open) {\n return;\n }\n\n if (this._open === undefined) {\n this._uncontrolledOpen = open;\n }\n\n this.requestUpdate('open', oldValue);\n this._syncTriggerAria();\n\n if (dispatch) {\n this._dispatchToggle(open);\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 <slot\n name=\"indicator\"\n aria-hidden=\"true\"\n @slotchange=${this._handleIndicatorSlotChange}\n ></slot>\n </div>\n\n <div\n id=\"popup\"\n part=\"popup\"\n popover=\"manual\"\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","LIGHT_DOM_CSS","_RCMenuButton","_a","LitElement","AnchorController","action","root","style","value","oldValue","$menubar","orientation","focusTarget","$menu","returnFocus","open","e","$trigger","$slot","options","$el","changedProperties","dispatch","html","keyNavigation","keyInteraction","__decorateClass","property","query","state","RCMenuButton"],"mappings":"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"}

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

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

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

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

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

	@@ -1 +1 @@
1	- export * from './rc-menu-button';
1	+ export * from './rc-menu-button.js';

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

@@ -42,6 +42,24 @@ export interface RCMenuButtonToggleEvent {
  * @cssprop [--rc-menu-button-indicator-size=1em] - Inline and block size of the slotted indicator
  * @cssprop [--rc-menu-button-indicator-color=currentColor] - Color of the slotted indicator
  * @cssprop [--rc-menu-button-indicator-inset=var(--rc-menu-button-trigger-padding-inline)] - Indicator distance from the trigger's inline end
+ * @cssprop [--rc-menu-button-icon-size] - Inline size of an `icon-only` trigger's visible box.
+ *   Square by default (equal to `--rc-menu-button-trigger-block-size`); set narrower or wider
+ *   to change only the trigger's width, independent of its height.
+ * @cssprop [--rc-menu-button-touch-target-block-size=3rem] - Minimum accessible touch target
+ *   block size for an `icon-only` trigger. A floor, not a fixed size: has no effect once
+ *   `--rc-menu-button-trigger-block-size` already meets or exceeds it. Grows the shadow-DOM
+ *   trigger wrapper (reserving layout space) and the light-DOM hit-slop (the actual larger
+ *   clickable region) together; the visible trigger itself stays at its own size, centered.
+ * @cssprop [--rc-menu-button-touch-target-inline-size] - Minimum accessible touch target inline
+ *   size for an `icon-only` trigger. Defers to `--rc-menu-button-touch-target-block-size` when
+ *   unset.
+ * @cssprop [--rc-menu-button-touch-target-overlap-inline-start=0px] - Zero by default. A theme
+ *   or consumer sets this on an `icon-only` trigger that sits at a real leading edge (no
+ *   neighbor on that side) to let its touch-target inflation overlap into whatever sits just
+ *   outside the host, such as a container's own edge padding, instead of also reserving layout
+ *   space there.
+ * @cssprop [--rc-menu-button-touch-target-overlap-inline-end=0px] - The trailing-edge
+ *   counterpart to `--rc-menu-button-touch-target-overlap-inline-start`.
  *
  * @csspart root - The root container element
  * @csspart popup - The popup container element
@@ -52,6 +70,10 @@ export interface RCMenuButtonToggleEvent {
  * @attr orientation - Arrow-key axis for opening the menu. Inherits from a parent
  *   `rc-menubar` or `[role="menubar"]` when unset.
  * @attr placement - Preferred placement of the popup relative to the trigger.
+ * @attr icon-only - Hints that the slotted trigger has no visible label, so themes can size
+ *   it and its touch target as an icon button (see `--rc-menu-button-icon-size` and
+ *   `--rc-menu-button-touch-target-*` above). Purely a styling hook; RCMenuButton does not read
+ *   or derive it — set it whenever the trigger is rendered icon-only.
  */
 export declare class RCMenuButton extends LitElement {
     static styles: import('lit').CSSResult[];
@@ -60,8 +82,11 @@ export declare class RCMenuButton extends LitElement {
      * to the slotted trigger button.
      */
     static shadowRootOptions: ShadowRootInit;
+    protected static readonly _styledRoots: Set<Document | ShadowRoot>;
+    protected static _ensureBaseStyles(root: Document | ShadowRoot): void;
     private _defaultOpen;
     private _open;
+    private _uncontrolledOpen;
     private _openInitialized;
     /**
      * Whether the menu is currently open.
@@ -142,8 +167,8 @@ export declare class RCMenuButton extends LitElement {
     closeMenu(returnFocus?: boolean): void;
     /** Toggles the menu between open and closed. */
     toggleMenu(): void;
-    /** Dispatches the `rc-menu-button-toggle` bubbling composed event with the current open state. */
-    protected _dispatchToggle(): void;
+    /** Dispatches the `rc-menu-button-toggle` bubbling composed event with the requested open state. */
+    protected _dispatchToggle(open?: boolean): void;
     /** Caches a weak reference to the first assigned trigger element and syncs its ARIA and tabindex state. */
     protected _handleTriggerSlotChange(e: Event): void;
     /** Tracks optional indicator content so the trigger reserves its inline-end space. */

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Trigger button that opens an rc-menu popup.",
   "repository": {
     "type": "git",
@@ -45,12 +45,12 @@
     "test:browser:firefox": "vitest --run --project=firefox"
   },
   "dependencies": {
-    "@rcarls/rc-common": "0.5.0",
-    "@rcarls/rc-menu": "0.5.0",
-    "@types/node": "^25.6.0"
+    "@rcarls/rc-common": "0.6.0",
+    "@rcarls/rc-menu": "0.6.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",
+    "@types/node": "^25.6.0",
     "@vitest/browser-playwright": "4.1.5",
     "lit": "^3.0.0",
     "playwright": "^1.56.0",

package/dist/rc-menu-button-BuLMtVMw.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"rc-menu-button-BuLMtVMw.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 position: relative;\n display: inline-block;\n }\n\n :host([orientation='vertical']) #trigger-wrap {\n display: block;\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 :host([has-indicator]) slot[name='trigger']::slotted(button),\n :host([has-indicator]) slot[name='trigger']::slotted([role='button']) {\n padding-inline-end: calc(\n var(\n --rc-menu-button-indicator-inset,\n var(--rc-menu-button-trigger-padding-inline, var(--rc-control-padding-inline, 0.5em))\n ) +\n var(--rc-menu-button-indicator-size, 1em) +\n var(--rc-menu-button-trigger-gap, var(--rc-item-gap, 0.5em))\n );\n }\n\n slot[name='indicator'] {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(\n --rc-menu-button-indicator-inset,\n var(--rc-menu-button-trigger-padding-inline, var(--rc-control-padding-inline, 0.5em))\n );\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--rc-menu-button-indicator-size, 1em);\n block-size: var(--rc-menu-button-indicator-size, 1em);\n color: var(--rc-menu-button-indicator-color, currentColor);\n pointer-events: none;\n transform: translateY(-50%);\n }\n\n slot[name='indicator']::slotted(*) {\n inline-size: 100%;\n block-size: 100%;\n }\n\n #popup {\n margin: 0;\n padding: 0;\n border: none;\n background: none;\n overflow: visible;\n color: inherit;\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 indicator - Optional decorative indicator rendered at the trigger's inline end\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-indicator-size=1em] - Inline and block size of the slotted indicator\n * @cssprop [--rc-menu-button-indicator-color=currentColor] - Color of the slotted indicator\n * @cssprop [--rc-menu-button-indicator-inset=var(--rc-menu-button-trigger-padding-inline)] - Indicator distance from the trigger's inline end\n *\n * @csspart root - The root container element\n * @csspart popup - The popup container element\n *\n * @attr open - Whether the menu popup is visible. Controlled mode: host writes silently.\n * @attr default-open - Initial open state for uncontrolled mode. Ignored after the first\n * controlled write to `open`.\n * @attr orientation - Arrow-key axis for opening the menu. Inherits from a parent\n * `rc-menubar` or `[role=\"menubar\"]` when unset.\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 private _openInitialized = 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) {\n return;\n }\n\n this._openInitialized = true;\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._openInitialized) {\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) {\n return;\n }\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) {\n return;\n }\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 /** Tracks optional indicator content so the trigger reserves its inline-end space. */\n protected _handleIndicatorSlotChange(e: Event) {\n const $slot = e.currentTarget as HTMLSlotElement;\n\n this.toggleAttribute('has-indicator', $slot.assignedElements().length > 0);\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) {\n return;\n }\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\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 // A pending update can flush after the host (and its shadow tree) has\n // already been disconnected — e.g. a framework unmounting this element\n // in the same tick as an `open` change. togglePopover() throws\n // InvalidStateError on a disconnected popover, so guard on connectivity\n // rather than letting that reach the caller.\n if (this._$popup?.isConnected) {\n this._$popup.togglePopover(this.open);\n }\n }\n\n if (changedProperties.has('placement') || changedProperties.has('orientation')) {\n this._anchorCtrl.setOptions({ placement: this._effectivePlacement });\n }\n }\n\n protected _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 <slot\n name=\"indicator\"\n aria-hidden=\"true\"\n @slotchange=${this._handleIndicatorSlotChange}\n ></slot>\n </div>\n\n <div\n id=\"popup\"\n part=\"popup\"\n popover=\"manual\"\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","$slot","options","$el","changedProperties","open","dispatch","html","keyNavigation","keyInteraction","RCMenuButton","__decorateClass","property","query","state"],"mappings":"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"}

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

File without changes