@rcarls/rc-fab-menu 0.4.0

package/README.md

@@ -0,0 +1,71 @@
+# `@rcarls/rc-fab-menu`
+
+Floating action button menu wrapper for an `rc-menu` action surface.
+
+Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-fab-menu](https://richardcarls.github.io/rc-webcomponents/components/rc-fab-menu).
+
+Use this when a primary floating action needs a short menu of related commands. The component
+specializes `rc-menu-button`, so it keeps the same menu keyboard behavior, light dismiss, focus
+return, and anchor positioning while adding floating action button placement and reveal styling.
+
+## Installation
+
+```bash
+npm install @rcarls/rc-fab-menu
+```
+
+## Import
+
+```js
+import '@rcarls/rc-fab-menu/define';
+```
+
+## Basic usage
+
+```html
+<rc-fab-menu>
+  <button slot="trigger" type="button" aria-label="Create">
+    <span aria-hidden="true">+</span>
+  </button>
+
+  <rc-menu label="Create">
+    <button data-value="recipe">Recipe</button>
+    <button data-value="collection">Collection</button>
+  </rc-menu>
+</rc-fab-menu>
+```
+
+The trigger is a consumer-authored native button. The menu is a normal `rc-menu`, so command
+activation comes from `rc-menu-activate` and menu rows keep the same APG menu semantics as the
+standalone menu package.
+
+## API
+
+`rc-fab-menu` inherits `open`, `defaultOpen`, `openMenu()`, `closeMenu()`, and `toggleMenu()`
+from `rc-menu-button` unchanged. It also overrides `placement`'s default (see below).
+
+| Property    | Attribute   | Type                                                         | Default        | Description                                                                                                                   |
+| ----------- | ----------- | ------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `position`  | `position`  | `'bottom-end' \| 'bottom-start' \| 'top-end' \| 'top-start'` | `'bottom-end'` | Viewport corner where the trigger is anchored.                                                                                |
+| `placement` | `placement` | `AnchorPlacement`                                             | `'top-end'`    | Preferred popup placement. Overrides `rc-menu-button`'s `'bottom-start'` default so the action menu opens above the trigger. |
+
+| Event                | Detail              | Description                                                  |
+| -------------------- | ------------------- | ------------------------------------------------------------ |
+| `rc-fab-menu-toggle` | `{ open: boolean }` | Fired when user interaction opens or closes the action menu. |
+
+## Theming
+
+The default styling is design-system neutral and follows the `rc-fab` token names where possible.
+
+| CSS custom property            | Default  | Description                                                                     |
+| ------------------------------ | -------- | ------------------------------------------------------------------------------- |
+| `--rc-fab-menu-position-css`   | `fixed`  | CSS position value for the floating wrapper.                                    |
+| `--rc-fab-menu-inset-block`    | `1.5rem` | Distance from the block-axis edge; falls back through `--rc-fab-inset-block`.   |
+| `--rc-fab-menu-inset-inline`   | `1.5rem` | Distance from the inline-axis edge; falls back through `--rc-fab-inset-inline`. |
+| `--rc-fab-menu-size`           | (none)   | Trigger minimum inline and block size. Set explicitly or apply a theme.         |
+| `--rc-fab-menu-radius`         | (none)   | Trigger border radius, deferring to native button radius when unset.            |
+| `--rc-fab-menu-bg`             | (none)   | Trigger background, deferring to native button background when unset.           |
+| `--rc-fab-menu-color`          | (none)   | Trigger foreground, deferring to native button color when unset.                |
+| `--rc-fab-menu-popup-duration` | `0ms`    | Popup reveal transition duration.                                               |
+
+Use `::part(popup)` for popup container refinements and theme `rc-menu` for action rows.

package/dist/custom-elements.json

@@ -0,0 +1,312 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-fab-menu",
+          "declaration": {
+            "name": "RCFabMenu",
+            "module": "/src/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/rc-fab-menu"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-fab-menu.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Floating action button menu wrapper for an `rc-menu` action surface.\n\n`rc-fab-menu` specializes `rc-menu-button` for floating action menus. It\npreserves the menu-button keyboard, focus return, light-dismiss, and popup\npositioning behavior while applying FAB placement and reveal styling.",
+          "name": "RCFabMenu",
+          "cssProperties": [
+            {
+              "description": "CSS position value for the floating wrapper.",
+              "name": "--rc-fab-menu-position-css",
+              "default": "fixed"
+            },
+            {
+              "description": "Distance from the block-axis edge; falls back through --rc-fab-inset-block.",
+              "name": "--rc-fab-menu-inset-block",
+              "default": "1.5rem"
+            },
+            {
+              "description": "Distance from the inline-axis edge; falls back through --rc-fab-inset-inline.",
+              "name": "--rc-fab-menu-inset-inline",
+              "default": "1.5rem"
+            },
+            {
+              "description": "Stacking order for the floating wrapper; falls back through --rc-fab-z-index.",
+              "name": "--rc-fab-menu-z-index",
+              "default": "10"
+            },
+            {
+              "description": "Gap between trigger icon and label content. No default.",
+              "name": "--rc-fab-menu-trigger-gap"
+            },
+            {
+              "description": "Trigger minimum inline and block size. No default; set explicitly or apply a theme.",
+              "name": "--rc-fab-menu-size"
+            },
+            {
+              "description": "Trigger block-axis padding (defers to native button padding when unset).",
+              "name": "--rc-fab-menu-padding-block"
+            },
+            {
+              "description": "Trigger inline-axis padding (defers to native button padding when unset).",
+              "name": "--rc-fab-menu-padding-inline"
+            },
+            {
+              "description": "Trigger appearance (defers to native button appearance when unset).",
+              "name": "--rc-fab-menu-appearance"
+            },
+            {
+              "description": "Trigger border (defers to native button border when unset).",
+              "name": "--rc-fab-menu-border"
+            },
+            {
+              "description": "Trigger border radius (defers to native button radius when unset).",
+              "name": "--rc-fab-menu-radius"
+            },
+            {
+              "description": "Trigger background (defers to native button background when unset).",
+              "name": "--rc-fab-menu-bg"
+            },
+            {
+              "description": "Trigger foreground color (defers to native button color when unset).",
+              "name": "--rc-fab-menu-color"
+            },
+            {
+              "description": "Trigger elevation shadow (defers to native button shadow when unset).",
+              "name": "--rc-fab-menu-shadow"
+            },
+            {
+              "description": "Trigger font shorthand (defers to native button font when unset).",
+              "name": "--rc-fab-menu-font"
+            },
+            {
+              "description": "Trigger font family (defers to native button font-family when unset).",
+              "name": "--rc-fab-menu-font-family"
+            },
+            {
+              "description": "Trigger font size (defers to native button font-size when unset).",
+              "name": "--rc-fab-menu-font-size"
+            },
+            {
+              "description": "Trigger font weight (defers to native button font-weight when unset).",
+              "name": "--rc-fab-menu-font-weight"
+            },
+            {
+              "description": "Trigger letter spacing (defers to native button letter-spacing when unset).",
+              "name": "--rc-fab-menu-letter-spacing"
+            },
+            {
+              "description": "Trigger text decoration (defers to native button text-decoration when unset).",
+              "name": "--rc-fab-menu-text-decoration"
+            },
+            {
+              "description": "Trigger user-select (defers to native button user-select when unset).",
+              "name": "--rc-fab-menu-user-select"
+            },
+            {
+              "description": "Trigger transition shorthand (defers to native button transition when unset).",
+              "name": "--rc-fab-menu-transition"
+            },
+            {
+              "description": "Trigger hover background (defers to native button hover styling when unset).",
+              "name": "--rc-fab-menu-bg-hover"
+            },
+            {
+              "description": "Trigger hover elevation shadow (defers to native button hover styling when unset).",
+              "name": "--rc-fab-menu-shadow-hover"
+            },
+            {
+              "description": "Trigger background while the menu is open (defers to native button styling when unset).",
+              "name": "--rc-fab-menu-bg-open"
+            },
+            {
+              "description": "Trigger elevation shadow while the menu is open (defers to native button styling when unset).",
+              "name": "--rc-fab-menu-shadow-open"
+            },
+            {
+              "description": "Trigger pressed elevation shadow (defers to native button styling when unset).",
+              "name": "--rc-fab-menu-shadow-active"
+            },
+            {
+              "description": "Trigger transform while pressed (defers to native button styling when unset).",
+              "name": "--rc-fab-menu-active-transform"
+            },
+            {
+              "description": "Trigger focus ring (defers to native button focus styling when unset).",
+              "name": "--rc-fab-menu-focus-ring"
+            },
+            {
+              "description": "Trigger focus ring offset (defers to native button focus styling when unset).",
+              "name": "--rc-fab-menu-focus-ring-offset"
+            },
+            {
+              "description": "Trigger opacity while disabled (defers to native disabled styling when unset).",
+              "name": "--rc-fab-menu-disabled-opacity"
+            },
+            {
+              "description": "Trigger elevation shadow while disabled (defers to native disabled styling when unset).",
+              "name": "--rc-fab-menu-disabled-shadow"
+            },
+            {
+              "description": "Stacking order of the popup container; falls back through --rc-menu-button-popup-z-index.",
+              "name": "--rc-fab-menu-popup-z-index",
+              "default": "1000"
+            },
+            {
+              "description": "Popup reveal transition duration.",
+              "name": "--rc-fab-menu-popup-duration",
+              "default": "0ms"
+            },
+            {
+              "description": "Popup reveal transform origin.",
+              "name": "--rc-fab-menu-popup-transform-origin",
+              "default": "bottom right"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The root popup anchor inherited from `rc-menu-button`.",
+              "name": "root"
+            },
+            {
+              "description": "The popup container inherited from `rc-menu-button`.",
+              "name": "popup"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Native button or button-like element that opens the action menu.",
+              "name": "trigger"
+            },
+            {
+              "description": "`rc-menu` element containing floating action commands.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "RCFabMenuPosition"
+              },
+              "default": "'bottom-end'",
+              "description": "Viewport corner where the floating action menu trigger is anchored.",
+              "attribute": "position",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "AnchorPlacement"
+              },
+              "default": "'top-end'",
+              "description": "Preferred placement of the action menu relative to the trigger button.",
+              "attribute": "placement",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "_dispatchToggle",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Dispatches the `rc-fab-menu-toggle` bubbling composed event with the current open state."
+            }
+          ],
+          "events": [
+            {
+              "name": "rc-fab-menu-toggle",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when user interaction opens or closes the action menu."
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Viewport corner where the floating action menu trigger is anchored.",
+              "name": "position",
+              "type": {
+                "text": "RCFabMenuPosition"
+              },
+              "default": "'bottom-end'",
+              "fieldName": "position"
+            },
+            {
+              "description": "Preferred placement of the action menu relative to the trigger button.",
+              "name": "placement",
+              "type": {
+                "text": "AnchorPlacement"
+              },
+              "default": "'top-end'",
+              "fieldName": "placement"
+            }
+          ],
+          "superclass": {
+            "name": "RCMenuButton",
+            "package": "@rcarls/rc-menu-button"
+          },
+          "tagName": "rc-fab-menu",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCFabMenu",
+          "declaration": {
+            "name": "RCFabMenu",
+            "module": "src/rc-fab-menu.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCFabMenu",
+            "module": "src/rc-fab-menu.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/rc-fab-menu-BhXCZQuw.js

@@ -0,0 +1,166 @@
+import { property as c } from "lit/decorators.js";
+import { RCMenuButton as b } from "@rcarls/rc-menu-button";
+import { css as u } from "lit";
+const d = u`
+  :host {
+    position: var(--rc-fab-menu-position-css, fixed);
+    inset-block-end: var(--rc-fab-menu-inset-block, var(--rc-fab-inset-block, 1.5rem));
+    inset-inline-end: var(--rc-fab-menu-inset-inline, var(--rc-fab-inset-inline, 1.5rem));
+    z-index: var(--rc-fab-menu-z-index, var(--rc-fab-z-index, 10));
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  :host([position='bottom-start']) {
+    inset-inline-end: unset;
+    inset-inline-start: var(--rc-fab-menu-inset-inline, var(--rc-fab-inset-inline, 1.5rem));
+  }
+
+  :host([position='top-end']) {
+    inset-block-end: unset;
+    inset-block-start: var(--rc-fab-menu-inset-block, var(--rc-fab-inset-block, 1.5rem));
+  }
+
+  :host([position='top-start']) {
+    inset-block-end: unset;
+    inset-block-start: var(--rc-fab-menu-inset-block, var(--rc-fab-inset-block, 1.5rem));
+    inset-inline-end: unset;
+    inset-inline-start: var(--rc-fab-menu-inset-inline, var(--rc-fab-inset-inline, 1.5rem));
+  }
+
+  #root {
+    display: inline-block;
+  }
+
+  #trigger-wrap {
+    display: contents;
+  }
+
+  slot[name='trigger']::slotted(button),
+  slot[name='trigger']::slotted([role='button']) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--rc-fab-menu-trigger-gap);
+    min-inline-size: var(--rc-fab-menu-size);
+    min-block-size: var(--rc-fab-menu-size);
+    padding-block: var(--rc-fab-menu-padding-block, revert);
+    padding-inline: var(--rc-fab-menu-padding-inline, revert);
+    appearance: var(--rc-fab-menu-appearance, revert);
+    box-sizing: border-box;
+    border: var(--rc-fab-menu-border, revert);
+    border-radius: var(--rc-fab-menu-radius, revert);
+    background: var(--rc-fab-menu-bg, revert);
+    color: var(--rc-fab-menu-color, revert);
+    box-shadow: var(--rc-fab-menu-shadow, revert);
+    font: var(--rc-fab-menu-font, revert);
+    font-family: var(--rc-fab-menu-font-family, revert);
+    font-size: var(--rc-fab-menu-font-size, revert);
+    font-weight: var(--rc-fab-menu-font-weight, revert);
+    letter-spacing: var(--rc-fab-menu-letter-spacing, revert);
+    white-space: nowrap;
+    text-decoration: var(--rc-fab-menu-text-decoration, revert);
+    user-select: var(--rc-fab-menu-user-select, revert);
+    transition: var(--rc-fab-menu-transition, revert);
+  }
+
+  slot[name='trigger']::slotted(button:hover),
+  slot[name='trigger']::slotted([role='button']:hover) {
+    background: var(--rc-fab-menu-bg-hover, revert);
+    box-shadow: var(--rc-fab-menu-shadow-hover, revert);
+  }
+
+  slot[name='trigger']::slotted(button[aria-expanded='true']),
+  slot[name='trigger']::slotted([role='button'][aria-expanded='true']) {
+    background: var(--rc-fab-menu-bg-open, revert);
+    box-shadow: var(--rc-fab-menu-shadow-open, revert);
+  }
+
+  slot[name='trigger']::slotted(button:active),
+  slot[name='trigger']::slotted([role='button']:active) {
+    box-shadow: var(--rc-fab-menu-shadow-active, revert);
+    transform: var(--rc-fab-menu-active-transform, revert);
+  }
+
+  slot[name='trigger']::slotted(button:focus-visible),
+  slot[name='trigger']::slotted([role='button']:focus-visible) {
+    outline: var(--rc-fab-menu-focus-ring, revert);
+    outline-offset: var(--rc-fab-menu-focus-ring-offset, revert);
+  }
+
+  slot[name='trigger']::slotted(button:disabled),
+  slot[name='trigger']::slotted([role='button'][aria-disabled='true']) {
+    opacity: var(--rc-fab-menu-disabled-opacity, revert);
+    pointer-events: none;
+    box-shadow: var(--rc-fab-menu-disabled-shadow, revert);
+  }
+
+  #popup {
+    z-index: var(--rc-fab-menu-popup-z-index, var(--rc-menu-button-popup-z-index, 1000));
+    opacity: 1;
+    scale: 1;
+    transform-origin: var(--rc-fab-menu-popup-transform-origin, bottom right);
+    transition:
+      opacity var(--rc-fab-menu-popup-duration, 0ms) ease,
+      scale var(--rc-fab-menu-popup-duration, 0ms) ease;
+  }
+
+  #popup[hidden] {
+    display: none;
+  }
+
+  @starting-style {
+    :host([open]) #popup {
+      opacity: 0;
+      scale: 0.92;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    slot[name='trigger']::slotted(button),
+    slot[name='trigger']::slotted([role='button']),
+    #popup {
+      transition-duration: 0s;
+    }
+
+    slot[name='trigger']::slotted(button:active),
+    slot[name='trigger']::slotted([role='button']:active) {
+      transform: none;
+    }
+  }
+`;
+var v = Object.defineProperty, l = (o, a, i, m) => {
+  for (var e = void 0, r = o.length - 1, s; r >= 0; r--)
+    (s = o[r]) && (e = s(a, i, e) || e);
+  return e && v(a, i, e), e;
+};
+const n = class n extends b {
+  constructor() {
+    super(...arguments), this.position = "bottom-end", this.placement = "top-end";
+  }
+  /** Dispatches the `rc-fab-menu-toggle` bubbling composed event with the current open state. */
+  _dispatchToggle() {
+    this.dispatchEvent(
+      new CustomEvent("rc-fab-menu-toggle", {
+        bubbles: !0,
+        composed: !0,
+        detail: { open: this.open }
+      })
+    );
+  }
+};
+n.styles = [d];
+let t = n;
+l([
+  c({ type: String, reflect: !0 })
+], t.prototype, "position");
+l([
+  c({ reflect: !0 })
+], t.prototype, "placement");
+export {
+  t as R
+};
+//# sourceMappingURL=rc-fab-menu-BhXCZQuw.js.map

package/dist/rc-fab-menu-BhXCZQuw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-fab-menu-BhXCZQuw.js","sources":["../src/rc-fab-menu.styles.ts","../src/rc-fab-menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const fabMenuStyles = css`\n  :host {\n    position: var(--rc-fab-menu-position-css, fixed);\n    inset-block-end: var(--rc-fab-menu-inset-block, var(--rc-fab-inset-block, 1.5rem));\n    inset-inline-end: var(--rc-fab-menu-inset-inline, var(--rc-fab-inset-inline, 1.5rem));\n    z-index: var(--rc-fab-menu-z-index, var(--rc-fab-z-index, 10));\n    display: inline-block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([position='bottom-start']) {\n    inset-inline-end: unset;\n    inset-inline-start: var(--rc-fab-menu-inset-inline, var(--rc-fab-inset-inline, 1.5rem));\n  }\n\n  :host([position='top-end']) {\n    inset-block-end: unset;\n    inset-block-start: var(--rc-fab-menu-inset-block, var(--rc-fab-inset-block, 1.5rem));\n  }\n\n  :host([position='top-start']) {\n    inset-block-end: unset;\n    inset-block-start: var(--rc-fab-menu-inset-block, var(--rc-fab-inset-block, 1.5rem));\n    inset-inline-end: unset;\n    inset-inline-start: var(--rc-fab-menu-inset-inline, var(--rc-fab-inset-inline, 1.5rem));\n  }\n\n  #root {\n    display: inline-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-fab-menu-trigger-gap);\n    min-inline-size: var(--rc-fab-menu-size);\n    min-block-size: var(--rc-fab-menu-size);\n    padding-block: var(--rc-fab-menu-padding-block, revert);\n    padding-inline: var(--rc-fab-menu-padding-inline, revert);\n    appearance: var(--rc-fab-menu-appearance, revert);\n    box-sizing: border-box;\n    border: var(--rc-fab-menu-border, revert);\n    border-radius: var(--rc-fab-menu-radius, revert);\n    background: var(--rc-fab-menu-bg, revert);\n    color: var(--rc-fab-menu-color, revert);\n    box-shadow: var(--rc-fab-menu-shadow, revert);\n    font: var(--rc-fab-menu-font, revert);\n    font-family: var(--rc-fab-menu-font-family, revert);\n    font-size: var(--rc-fab-menu-font-size, revert);\n    font-weight: var(--rc-fab-menu-font-weight, revert);\n    letter-spacing: var(--rc-fab-menu-letter-spacing, revert);\n    white-space: nowrap;\n    text-decoration: var(--rc-fab-menu-text-decoration, revert);\n    user-select: var(--rc-fab-menu-user-select, revert);\n    transition: var(--rc-fab-menu-transition, revert);\n  }\n\n  slot[name='trigger']::slotted(button:hover),\n  slot[name='trigger']::slotted([role='button']:hover) {\n    background: var(--rc-fab-menu-bg-hover, revert);\n    box-shadow: var(--rc-fab-menu-shadow-hover, revert);\n  }\n\n  slot[name='trigger']::slotted(button[aria-expanded='true']),\n  slot[name='trigger']::slotted([role='button'][aria-expanded='true']) {\n    background: var(--rc-fab-menu-bg-open, revert);\n    box-shadow: var(--rc-fab-menu-shadow-open, revert);\n  }\n\n  slot[name='trigger']::slotted(button:active),\n  slot[name='trigger']::slotted([role='button']:active) {\n    box-shadow: var(--rc-fab-menu-shadow-active, revert);\n    transform: var(--rc-fab-menu-active-transform, revert);\n  }\n\n  slot[name='trigger']::slotted(button:focus-visible),\n  slot[name='trigger']::slotted([role='button']:focus-visible) {\n    outline: var(--rc-fab-menu-focus-ring, revert);\n    outline-offset: var(--rc-fab-menu-focus-ring-offset, revert);\n  }\n\n  slot[name='trigger']::slotted(button:disabled),\n  slot[name='trigger']::slotted([role='button'][aria-disabled='true']) {\n    opacity: var(--rc-fab-menu-disabled-opacity, revert);\n    pointer-events: none;\n    box-shadow: var(--rc-fab-menu-disabled-shadow, revert);\n  }\n\n  #popup {\n    z-index: var(--rc-fab-menu-popup-z-index, var(--rc-menu-button-popup-z-index, 1000));\n    opacity: 1;\n    scale: 1;\n    transform-origin: var(--rc-fab-menu-popup-transform-origin, bottom right);\n    transition:\n      opacity var(--rc-fab-menu-popup-duration, 0ms) ease,\n      scale var(--rc-fab-menu-popup-duration, 0ms) ease;\n  }\n\n  #popup[hidden] {\n    display: none;\n  }\n\n  @starting-style {\n    :host([open]) #popup {\n      opacity: 0;\n      scale: 0.92;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    slot[name='trigger']::slotted(button),\n    slot[name='trigger']::slotted([role='button']),\n    #popup {\n      transition-duration: 0s;\n    }\n\n    slot[name='trigger']::slotted(button:active),\n    slot[name='trigger']::slotted([role='button']:active) {\n      transform: none;\n    }\n  }\n`;\n\nexport default fabMenuStyles;\n","import { property } from 'lit/decorators.js';\n\nimport type { AnchorPlacement } from '@rcarls/rc-common';\nimport { RCMenuButton, type RCMenuButtonToggleEvent } from '@rcarls/rc-menu-button';\n\nimport fabMenuStyles from './rc-fab-menu.styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-fab-menu': RCFabMenu;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-fab-menu-toggle': CustomEvent<RCFabMenuToggleEvent>;\n  }\n}\n\n/** Detail payload for the `rc-fab-menu-toggle` event. */\nexport type RCFabMenuToggleEvent = RCMenuButtonToggleEvent;\n\nexport type RCFabMenuPosition = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';\n\n/**\n * Floating action button menu wrapper for an `rc-menu` action surface.\n *\n * `rc-fab-menu` specializes `rc-menu-button` for floating action menus. It\n * preserves the menu-button keyboard, focus return, light-dismiss, and popup\n * positioning behavior while applying FAB placement and reveal styling.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-fab-menu rc-fab-menu docs}\n * @see {@link https://m3.material.io/components/floating-action-button/overview Material 3 floating action button}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ WAI-ARIA Menu Button pattern}\n *\n * @example\n * ```html\n * <rc-fab-menu>\n *   <button slot=\"trigger\" type=\"button\" aria-label=\"Create\">\n *     <span aria-hidden=\"true\">+</span>\n *   </button>\n *   <rc-menu label=\"Create\">\n *     <button>Recipe</button>\n *     <button>Collection</button>\n *   </rc-menu>\n * </rc-fab-menu>\n * ```\n *\n * @slot trigger - Native button or button-like element that opens the action menu.\n * @slot default - `rc-menu` element containing floating action commands.\n *\n * @fires rc-fab-menu-toggle - Fired when user interaction opens or closes the action menu.\n *\n * @attr position - Viewport corner where the floating action menu trigger is anchored.\n * @attr placement - Preferred placement of the action menu relative to the trigger button.\n *\n * @cssprop [--rc-fab-menu-position-css=fixed] - CSS position value for the floating wrapper.\n * @cssprop [--rc-fab-menu-inset-block=1.5rem] - Distance from the block-axis edge; falls back\n *   through --rc-fab-inset-block.\n * @cssprop [--rc-fab-menu-inset-inline=1.5rem] - Distance from the inline-axis edge; falls back\n *   through --rc-fab-inset-inline.\n * @cssprop [--rc-fab-menu-z-index=10] - Stacking order for the floating wrapper; falls back\n *   through --rc-fab-z-index.\n * @cssprop [--rc-fab-menu-trigger-gap] - Gap between trigger icon and label content. No default.\n * @cssprop [--rc-fab-menu-size] - Trigger minimum inline and block size. No default; set\n *   explicitly or apply a theme.\n * @cssprop [--rc-fab-menu-padding-block] - Trigger block-axis padding (defers to native button\n *   padding when unset).\n * @cssprop [--rc-fab-menu-padding-inline] - Trigger inline-axis padding (defers to native button\n *   padding when unset).\n * @cssprop [--rc-fab-menu-appearance] - Trigger appearance (defers to native button appearance\n *   when unset).\n * @cssprop [--rc-fab-menu-border] - Trigger border (defers to native button border when unset).\n * @cssprop [--rc-fab-menu-radius] - Trigger border radius (defers to native button radius when\n *   unset).\n * @cssprop [--rc-fab-menu-bg] - Trigger background (defers to native button background when\n *   unset).\n * @cssprop [--rc-fab-menu-color] - Trigger foreground color (defers to native button color when\n *   unset).\n * @cssprop [--rc-fab-menu-shadow] - Trigger elevation shadow (defers to native button shadow\n *   when unset).\n * @cssprop [--rc-fab-menu-font] - Trigger font shorthand (defers to native button font when\n *   unset).\n * @cssprop [--rc-fab-menu-font-family] - Trigger font family (defers to native button font-family\n *   when unset).\n * @cssprop [--rc-fab-menu-font-size] - Trigger font size (defers to native button font-size when\n *   unset).\n * @cssprop [--rc-fab-menu-font-weight] - Trigger font weight (defers to native button font-weight\n *   when unset).\n * @cssprop [--rc-fab-menu-letter-spacing] - Trigger letter spacing (defers to native button\n *   letter-spacing when unset).\n * @cssprop [--rc-fab-menu-text-decoration] - Trigger text decoration (defers to native button\n *   text-decoration when unset).\n * @cssprop [--rc-fab-menu-user-select] - Trigger user-select (defers to native button user-select\n *   when unset).\n * @cssprop [--rc-fab-menu-transition] - Trigger transition shorthand (defers to native button\n *   transition when unset).\n * @cssprop [--rc-fab-menu-bg-hover] - Trigger hover background (defers to native button hover\n *   styling when unset).\n * @cssprop [--rc-fab-menu-shadow-hover] - Trigger hover elevation shadow (defers to native button\n *   hover styling when unset).\n * @cssprop [--rc-fab-menu-bg-open] - Trigger background while the menu is open (defers to native\n *   button styling when unset).\n * @cssprop [--rc-fab-menu-shadow-open] - Trigger elevation shadow while the menu is open (defers\n *   to native button styling when unset).\n * @cssprop [--rc-fab-menu-shadow-active] - Trigger pressed elevation shadow (defers to native\n *   button styling when unset).\n * @cssprop [--rc-fab-menu-active-transform] - Trigger transform while pressed (defers to native\n *   button styling when unset).\n * @cssprop [--rc-fab-menu-focus-ring] - Trigger focus ring (defers to native button focus styling\n *   when unset).\n * @cssprop [--rc-fab-menu-focus-ring-offset] - Trigger focus ring offset (defers to native button\n *   focus styling when unset).\n * @cssprop [--rc-fab-menu-disabled-opacity] - Trigger opacity while disabled (defers to native\n *   disabled styling when unset).\n * @cssprop [--rc-fab-menu-disabled-shadow] - Trigger elevation shadow while disabled (defers to\n *   native disabled styling when unset).\n * @cssprop [--rc-fab-menu-popup-z-index=1000] - Stacking order of the popup container; falls back\n *   through --rc-menu-button-popup-z-index.\n * @cssprop [--rc-fab-menu-popup-duration=0ms] - Popup reveal transition duration.\n * @cssprop [--rc-fab-menu-popup-transform-origin=bottom right] - Popup reveal transform origin.\n *\n * @csspart root - The root popup anchor inherited from `rc-menu-button`.\n * @csspart popup - The popup container inherited from `rc-menu-button`.\n */\nexport class RCFabMenu extends RCMenuButton {\n  static override styles = [fabMenuStyles];\n\n  /** Viewport corner where the floating action menu trigger is anchored. */\n  @property({ type: String, reflect: true })\n  position: RCFabMenuPosition = 'bottom-end';\n\n  /** Preferred placement of the action menu relative to the trigger button. */\n  @property({ reflect: true })\n  override placement: AnchorPlacement = 'top-end';\n\n  /** Dispatches the `rc-fab-menu-toggle` bubbling composed event with the current open state. */\n  protected override _dispatchToggle(): void {\n    this.dispatchEvent(\n      new CustomEvent<RCFabMenuToggleEvent>('rc-fab-menu-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { open: this.open },\n      }),\n    );\n  }\n}\n\nexport default RCFabMenu;\n"],"names":["fabMenuStyles","css","_RCFabMenu","RCMenuButton","RCFabMenu","__decorateClass","property"],"mappings":";;;AAEO,MAAMA,IAAgBC;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;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;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;;;;;;ACyHtB,MAAMC,IAAN,MAAMA,UAAkBC,EAAa;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAKL,KAAA,WAA8B,cAI9B,KAAS,YAA6B;AAAA,EAAA;AAAA;AAAA,EAGnB,kBAAwB;AACzC,SAAK;AAAA,MACH,IAAI,YAAkC,sBAAsB;AAAA,QAC1D,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,MAAM,KAAK,KAAA;AAAA,MAAK,CAC3B;AAAA,IAAA;AAAA,EAEL;AACF;AApBED,EAAgB,SAAS,CAACF,CAAa;AADlC,IAAMI,IAANF;AAKLG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BF,EAKX,WAAA,UAAA;AAISC,EAAA;AAAA,EADRC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GARhBF,EASF,WAAA,WAAA;"}

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

@@ -0,0 +1,7 @@
+import "@rcarls/rc-menu/define";
+import { R as e } from "./rc-fab-menu-BhXCZQuw.js";
+customElements.get("rc-fab-menu") || customElements.define("rc-fab-menu", e);
+export {
+  e as RCFabMenu
+};
+//# sourceMappingURL=rc-fab-menu-define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-fab-menu-define.js","sources":["../src/define.ts"],"sourcesContent":["import '@rcarls/rc-menu/define';\nimport { RCFabMenu } from './index.js';\n\ncustomElements.get('rc-fab-menu') || customElements.define('rc-fab-menu', RCFabMenu);\n\nexport * from './index.js';\n"],"names":["RCFabMenu"],"mappings":";;AAGA,eAAe,IAAI,aAAa,KAAK,eAAe,OAAO,eAAeA,CAAS;"}

package/dist/rc-fab-menu.js

@@ -0,0 +1,5 @@
+import { R as o } from "./rc-fab-menu-BhXCZQuw.js";
+export {
+  o as RCFabMenu
+};
+//# sourceMappingURL=rc-fab-menu.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,124 @@
+import { AnchorPlacement } from '@rcarls/rc-common';
+import { RCMenuButton, RCMenuButtonToggleEvent } from '@rcarls/rc-menu-button';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-fab-menu': RCFabMenu;
+    }
+    interface HTMLElementEventMap {
+        'rc-fab-menu-toggle': CustomEvent<RCFabMenuToggleEvent>;
+    }
+}
+/** Detail payload for the `rc-fab-menu-toggle` event. */
+export type RCFabMenuToggleEvent = RCMenuButtonToggleEvent;
+export type RCFabMenuPosition = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+/**
+ * Floating action button menu wrapper for an `rc-menu` action surface.
+ *
+ * `rc-fab-menu` specializes `rc-menu-button` for floating action menus. It
+ * preserves the menu-button keyboard, focus return, light-dismiss, and popup
+ * positioning behavior while applying FAB placement and reveal styling.
+ *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-fab-menu rc-fab-menu docs}
+ * @see {@link https://m3.material.io/components/floating-action-button/overview Material 3 floating action button}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ WAI-ARIA Menu Button pattern}
+ *
+ * @example
+ * ```html
+ * <rc-fab-menu>
+ *   <button slot="trigger" type="button" aria-label="Create">
+ *     <span aria-hidden="true">+</span>
+ *   </button>
+ *   <rc-menu label="Create">
+ *     <button>Recipe</button>
+ *     <button>Collection</button>
+ *   </rc-menu>
+ * </rc-fab-menu>
+ * ```
+ *
+ * @slot trigger - Native button or button-like element that opens the action menu.
+ * @slot default - `rc-menu` element containing floating action commands.
+ *
+ * @fires rc-fab-menu-toggle - Fired when user interaction opens or closes the action menu.
+ *
+ * @attr position - Viewport corner where the floating action menu trigger is anchored.
+ * @attr placement - Preferred placement of the action menu relative to the trigger button.
+ *
+ * @cssprop [--rc-fab-menu-position-css=fixed] - CSS position value for the floating wrapper.
+ * @cssprop [--rc-fab-menu-inset-block=1.5rem] - Distance from the block-axis edge; falls back
+ *   through --rc-fab-inset-block.
+ * @cssprop [--rc-fab-menu-inset-inline=1.5rem] - Distance from the inline-axis edge; falls back
+ *   through --rc-fab-inset-inline.
+ * @cssprop [--rc-fab-menu-z-index=10] - Stacking order for the floating wrapper; falls back
+ *   through --rc-fab-z-index.
+ * @cssprop [--rc-fab-menu-trigger-gap] - Gap between trigger icon and label content. No default.
+ * @cssprop [--rc-fab-menu-size] - Trigger minimum inline and block size. No default; set
+ *   explicitly or apply a theme.
+ * @cssprop [--rc-fab-menu-padding-block] - Trigger block-axis padding (defers to native button
+ *   padding when unset).
+ * @cssprop [--rc-fab-menu-padding-inline] - Trigger inline-axis padding (defers to native button
+ *   padding when unset).
+ * @cssprop [--rc-fab-menu-appearance] - Trigger appearance (defers to native button appearance
+ *   when unset).
+ * @cssprop [--rc-fab-menu-border] - Trigger border (defers to native button border when unset).
+ * @cssprop [--rc-fab-menu-radius] - Trigger border radius (defers to native button radius when
+ *   unset).
+ * @cssprop [--rc-fab-menu-bg] - Trigger background (defers to native button background when
+ *   unset).
+ * @cssprop [--rc-fab-menu-color] - Trigger foreground color (defers to native button color when
+ *   unset).
+ * @cssprop [--rc-fab-menu-shadow] - Trigger elevation shadow (defers to native button shadow
+ *   when unset).
+ * @cssprop [--rc-fab-menu-font] - Trigger font shorthand (defers to native button font when
+ *   unset).
+ * @cssprop [--rc-fab-menu-font-family] - Trigger font family (defers to native button font-family
+ *   when unset).
+ * @cssprop [--rc-fab-menu-font-size] - Trigger font size (defers to native button font-size when
+ *   unset).
+ * @cssprop [--rc-fab-menu-font-weight] - Trigger font weight (defers to native button font-weight
+ *   when unset).
+ * @cssprop [--rc-fab-menu-letter-spacing] - Trigger letter spacing (defers to native button
+ *   letter-spacing when unset).
+ * @cssprop [--rc-fab-menu-text-decoration] - Trigger text decoration (defers to native button
+ *   text-decoration when unset).
+ * @cssprop [--rc-fab-menu-user-select] - Trigger user-select (defers to native button user-select
+ *   when unset).
+ * @cssprop [--rc-fab-menu-transition] - Trigger transition shorthand (defers to native button
+ *   transition when unset).
+ * @cssprop [--rc-fab-menu-bg-hover] - Trigger hover background (defers to native button hover
+ *   styling when unset).
+ * @cssprop [--rc-fab-menu-shadow-hover] - Trigger hover elevation shadow (defers to native button
+ *   hover styling when unset).
+ * @cssprop [--rc-fab-menu-bg-open] - Trigger background while the menu is open (defers to native
+ *   button styling when unset).
+ * @cssprop [--rc-fab-menu-shadow-open] - Trigger elevation shadow while the menu is open (defers
+ *   to native button styling when unset).
+ * @cssprop [--rc-fab-menu-shadow-active] - Trigger pressed elevation shadow (defers to native
+ *   button styling when unset).
+ * @cssprop [--rc-fab-menu-active-transform] - Trigger transform while pressed (defers to native
+ *   button styling when unset).
+ * @cssprop [--rc-fab-menu-focus-ring] - Trigger focus ring (defers to native button focus styling
+ *   when unset).
+ * @cssprop [--rc-fab-menu-focus-ring-offset] - Trigger focus ring offset (defers to native button
+ *   focus styling when unset).
+ * @cssprop [--rc-fab-menu-disabled-opacity] - Trigger opacity while disabled (defers to native
+ *   disabled styling when unset).
+ * @cssprop [--rc-fab-menu-disabled-shadow] - Trigger elevation shadow while disabled (defers to
+ *   native disabled styling when unset).
+ * @cssprop [--rc-fab-menu-popup-z-index=1000] - Stacking order of the popup container; falls back
+ *   through --rc-menu-button-popup-z-index.
+ * @cssprop [--rc-fab-menu-popup-duration=0ms] - Popup reveal transition duration.
+ * @cssprop [--rc-fab-menu-popup-transform-origin=bottom right] - Popup reveal transform origin.
+ *
+ * @csspart root - The root popup anchor inherited from `rc-menu-button`.
+ * @csspart popup - The popup container inherited from `rc-menu-button`.
+ */
+export declare class RCFabMenu extends RCMenuButton {
+    static styles: import('lit').CSSResult[];
+    /** Viewport corner where the floating action menu trigger is anchored. */
+    position: RCFabMenuPosition;
+    /** Preferred placement of the action menu relative to the trigger button. */
+    placement: AnchorPlacement;
+    /** Dispatches the `rc-fab-menu-toggle` bubbling composed event with the current open state. */
+    protected _dispatchToggle(): void;
+}
+export default RCFabMenu;

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

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

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@rcarls/rc-fab-menu",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.4.0",
+  "description": "Floating action button menu wrapper for an rc-menu action surface.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-fab-menu"
+  },
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-fab-menu",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-fab-menu.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-fab-menu/src/index.d.ts",
+        "default": "./dist/rc-fab-menu.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-fab-menu/src/define.d.ts",
+        "default": "./dist/rc-fab-menu-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-fab-menu/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-fab-menu-define.js"
+  ],
+  "customElements": "dist/custom-elements.json",
+  "scripts": {
+    "build": "tsc && vite build && cem analyze",
+    "cem:analyze": "cem analyze",
+    "preview": "vite preview",
+    "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-menu-button": "workspace:*"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@vitest/browser-playwright": "4.1.5",
+    "lit": "^3.0.0",
+    "playwright": "^1.56.0",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}