@rcarls/rc-fab-menu 0.6.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +171 -0
- package/README.md +4 -4
- package/dist/custom-elements.json +38 -14
- package/dist/rc-fab-menu-J-nIWi86.js +44 -0
- package/dist/rc-fab-menu-J-nIWi86.js.map +1 -0
- package/dist/rc-fab-menu-define.js +1 -1
- package/dist/rc-fab-menu.js +1 -1
- package/dist/types/packages/rc-fab-menu/src/rc-fab-menu.d.ts +17 -5
- package/package.json +4 -4
- package/dist/rc-fab-menu-DqKyQYNn.js +0 -166
- package/dist/rc-fab-menu-DqKyQYNn.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,176 @@
|
|
|
1
1
|
# @rcarls/rc-fab-menu
|
|
2
2
|
|
|
3
|
+
## 0.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 9ee769c: Anchor popups in logical terms only. A placement is now `block-start`,
|
|
8
|
+
`block-end`, `inline-start`, or `inline-end`, each with an optional
|
|
9
|
+
`-start`/`-end` edge alignment, and all of them follow the writing mode and
|
|
10
|
+
direction. Block sides open above or below a row in horizontal text and
|
|
11
|
+
beside it in vertical text; inline sides open along the reading direction,
|
|
12
|
+
so `inline-end` opens to the left in RTL. `resolveAnchorPlacement` exposes
|
|
13
|
+
the resolution for other consumers.
|
|
14
|
+
|
|
15
|
+
**Breaking:** the physical placements `top*`, `bottom*`, `left*`, and
|
|
16
|
+
`right*` are removed from `AnchorPlacement`, `rc-menu-button`'s and
|
|
17
|
+
`rc-fab-menu`'s `placement`, and the React and Solid typings. Migrate:
|
|
18
|
+
|
|
19
|
+
- `bottom*` → `block-end*`
|
|
20
|
+
- `top*` → `block-start*`
|
|
21
|
+
- `right*` → `inline-end*` (in LTR)
|
|
22
|
+
- `left*` → `inline-start*` (in LTR)
|
|
23
|
+
|
|
24
|
+
Defaults move with them and render the same in horizontal LTR text:
|
|
25
|
+
`rc-menu-button`, `rc-select`, and `rc-combobox` open at `block-end-start`,
|
|
26
|
+
`rc-adaptive-menu`'s overflow menu at `block-end-end`, and `rc-fab-menu` at
|
|
27
|
+
`block-start-end`. In vertical text these popups now open beside their
|
|
28
|
+
trigger instead of over the next item. Vertical menubars and vertical
|
|
29
|
+
adaptive menus open submenus at `inline-end-start`. Open popups also
|
|
30
|
+
re-resolve their physical side and alignment when an ancestor's `dir`
|
|
31
|
+
changes, and `rc-fab-menu` keeps its corner-aware default even when nested in
|
|
32
|
+
a vertical menubar.
|
|
33
|
+
|
|
34
|
+
- 079e025: Standardize component styling contracts for the breaking 0.7 release.
|
|
35
|
+
|
|
36
|
+
BREAKING CHANGE: Rename the Markdown editor's `--rme-*` properties to
|
|
37
|
+
`--rc-markdown-editor-*`, `--rc-app-bar-background` to `--rc-app-bar-bg`,
|
|
38
|
+
`--rc-textarea-radius` to `--rc-textarea-border-radius`, the transfer-list
|
|
39
|
+
`--rc-transfer-list-panel-*` properties to `--rc-transfer-list-listbox-*`,
|
|
40
|
+
`--rc-chip-group-webkit-scrollbar-display` to
|
|
41
|
+
`--rc-chip-group-scrollbar-display`, and `--rc-text` to `--rc-field-text`.
|
|
42
|
+
Compatibility aliases are intentionally not provided.
|
|
43
|
+
|
|
44
|
+
BREAKING CHANGE: Replace `--rc-select-chip-padding-inline` and
|
|
45
|
+
`--rc-combobox-chip-padding-inline` with explicit `*-padding-inline-start` and
|
|
46
|
+
`*-padding-inline-end` tokens. Generated removable chips now reserve the full
|
|
47
|
+
remove target and its edge offset, so their indicator cannot overlap label text.
|
|
48
|
+
|
|
49
|
+
Add canonical app-bar elevation, transfer-list listbox radius, and textarea
|
|
50
|
+
line-action tokens. Add logical `rc-chip` inline-padding properties so themes
|
|
51
|
+
can implement Material's icon-aware spacing without overriding authored child
|
|
52
|
+
styles. Make `rc-field` consume the shared semantic token layer,
|
|
53
|
+
and place the `rc-chip` and `rc-search-bar` light-DOM structural styles in the
|
|
54
|
+
`rc-base` cascade layer so normal consumer rules override them.
|
|
55
|
+
|
|
56
|
+
Prevent decorative, `aria-hidden` trailing list content from intercepting a
|
|
57
|
+
whole-row action target, and keep segmented-list item geometry from leaking
|
|
58
|
+
into nested standard lists.
|
|
59
|
+
|
|
60
|
+
Remove unused Material navigation-rail toggle tokens and obsolete list-item
|
|
61
|
+
theme tokens. Register the segmented-button private theme seam and enforce
|
|
62
|
+
token ownership, documentation, removed-name, selector-budget, and cascade
|
|
63
|
+
layer contracts through the component architecture audit.
|
|
64
|
+
|
|
65
|
+
- 2d79bd0: Name the `position` corners for what they already do: each pins to a
|
|
66
|
+
logical block and inline edge, so they turn with the writing mode.
|
|
67
|
+
|
|
68
|
+
**Breaking:** the `position` values are renamed. Migrate:
|
|
69
|
+
|
|
70
|
+
- `bottom-end` → `block-end-inline-end` (the default)
|
|
71
|
+
- `bottom-start` → `block-end-inline-start`
|
|
72
|
+
- `top-end` → `block-start-inline-end`
|
|
73
|
+
- `top-start` → `block-start-inline-start`
|
|
74
|
+
|
|
75
|
+
- 94dc987: `rc-menu-button`'s, `rc-select`'s, and `rc-combobox`'s popup/listbox now fade
|
|
76
|
+
in and out through CSS alone, using `@starting-style` and a discrete
|
|
77
|
+
`display`/`overlay` transition, driven by new `--rc-menu-button-popup-duration`,
|
|
78
|
+
`--rc-select-listbox-duration`, and `--rc-combobox-listbox-duration`
|
|
79
|
+
properties. `showPopover()`/`hidePopover()` (via `openPopup()`/`closePopup()`)
|
|
80
|
+
stay synchronous, and nothing waits on the transition finishing.
|
|
81
|
+
|
|
82
|
+
These animate opacity only, not a scale or slide transform: all three
|
|
83
|
+
position their popup with the shared `AnchorController`, which applies its
|
|
84
|
+
own viewport-clamping `translate` and reads `getBoundingClientRect()` to
|
|
85
|
+
compute the next correction. A second, CSS-driven transform on the same
|
|
86
|
+
element and property would fight that positioning math on every open, not
|
|
87
|
+
only during an edge case.
|
|
88
|
+
|
|
89
|
+
`rc-fab-menu` already had a scale-based entrance for its popup (verified safe
|
|
90
|
+
here: unlike the general `AnchorController` case, this popup isn't
|
|
91
|
+
collision-clamped), but no exit animation at all and no directional easing.
|
|
92
|
+
Both are added: the popup now fades and scales back out on close, and enter
|
|
93
|
+
uses a decelerating curve while exit uses an accelerating one.
|
|
94
|
+
|
|
95
|
+
- 6e548d9: Several components handle `prefers-reduced-motion: reduce` in their own
|
|
96
|
+
shadow styles, outside a theme's reach, and refine it the same way the theme
|
|
97
|
+
layer already does: spatial motion (`translate`, `scale`, `transform`,
|
|
98
|
+
`inline-size`, `block-size`) goes fully to zero, while effects motion (color,
|
|
99
|
+
opacity) shortens instead of disappearing.
|
|
100
|
+
|
|
101
|
+
`rc-app-bar` zeros its host's hide/show `translate` but shortens the
|
|
102
|
+
expanded title's fade-in. `rc-disclosure` keeps its panel's expand/collapse
|
|
103
|
+
zeroed, but its summary/content backstop for a theme-added transition now
|
|
104
|
+
shortens instead of zeroing it outright. `rc-list-item`'s row and
|
|
105
|
+
state-layer transition only color and opacity, so the whole sweep shortens.
|
|
106
|
+
`rc-fab-menu`'s popup mixes `scale` with opacity/overlay/display under one
|
|
107
|
+
shared duration; reduced motion now zeros the scale and shortens the rest.
|
|
108
|
+
`rc-switch`'s thumb mixes background-color with inline-size/block-size/
|
|
109
|
+
transform the same way; the icons and track, which each transition only one
|
|
110
|
+
kind of property, needed only the zero-or-shorten call. `rc-fab`'s
|
|
111
|
+
scroll-reveal is opacity/visibility only with no time-based duration to
|
|
112
|
+
shorten in its scroll-linked path, so reduced motion narrows the scroll
|
|
113
|
+
window instead of collapsing it to zero; its JS-transition fallback path
|
|
114
|
+
shortens the same fade rather than removing it. `rc-progress`'s determinate
|
|
115
|
+
fill transition, previously unguarded under reduced motion, is now zeroed;
|
|
116
|
+
its indeterminate loop, a continuous sweep with no meaningful shortened
|
|
117
|
+
form, stays fully stopped rather than shortened.
|
|
118
|
+
|
|
119
|
+
### Patch Changes
|
|
120
|
+
|
|
121
|
+
- 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
|
|
122
|
+
and light-DOM structural styles through Lightning CSS, removing comments and
|
|
123
|
+
whitespace while keeping source maps that resolve to each template. Rendered
|
|
124
|
+
styles are unchanged.
|
|
125
|
+
|
|
126
|
+
`@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
|
|
127
|
+
string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
|
|
128
|
+
depend on `@rcarls/rc-common` for it.
|
|
129
|
+
|
|
130
|
+
- d50f18c: The open `rc-fab-menu` popup no longer draws the browser's default popover border, padding,
|
|
131
|
+
and background around its menu. Its styles replace `rc-menu-button`'s instead of extending
|
|
132
|
+
them, so the popup now resets those defaults itself and the slotted `rc-menu` draws the
|
|
133
|
+
only surface.
|
|
134
|
+
- Updated dependencies [e3dfa59]
|
|
135
|
+
- Updated dependencies [50d5610]
|
|
136
|
+
- Updated dependencies [9ee769c]
|
|
137
|
+
- Updated dependencies [1179f24]
|
|
138
|
+
- Updated dependencies [595fe37]
|
|
139
|
+
- Updated dependencies [38cd00c]
|
|
140
|
+
- Updated dependencies [5c006de]
|
|
141
|
+
- Updated dependencies [a6553ff]
|
|
142
|
+
- Updated dependencies [2205478]
|
|
143
|
+
- Updated dependencies [4341311]
|
|
144
|
+
- Updated dependencies [899bb5e]
|
|
145
|
+
- Updated dependencies [25fcfe0]
|
|
146
|
+
- Updated dependencies [51f6403]
|
|
147
|
+
- Updated dependencies [9caca6b]
|
|
148
|
+
- Updated dependencies [b764a3c]
|
|
149
|
+
- Updated dependencies [54d9ead]
|
|
150
|
+
- Updated dependencies [94dc987]
|
|
151
|
+
- Updated dependencies [b9175e9]
|
|
152
|
+
- Updated dependencies [c8b762b]
|
|
153
|
+
- Updated dependencies [55e1e7f]
|
|
154
|
+
- Updated dependencies [f1ca82d]
|
|
155
|
+
- Updated dependencies [687a9be]
|
|
156
|
+
- Updated dependencies [b87f27b]
|
|
157
|
+
- Updated dependencies [32ebead]
|
|
158
|
+
- Updated dependencies [bfefedd]
|
|
159
|
+
- Updated dependencies [c130173]
|
|
160
|
+
- Updated dependencies [f0f7511]
|
|
161
|
+
- Updated dependencies [c5b6f15]
|
|
162
|
+
- Updated dependencies [11680b6]
|
|
163
|
+
- Updated dependencies [223d36c]
|
|
164
|
+
- Updated dependencies [7b91a44]
|
|
165
|
+
- Updated dependencies [aa04ead]
|
|
166
|
+
- Updated dependencies [ac65b5b]
|
|
167
|
+
- Updated dependencies [6d126fd]
|
|
168
|
+
- Updated dependencies [afcfef8]
|
|
169
|
+
- Updated dependencies [11ef1ad]
|
|
170
|
+
- @rcarls/rc-common@0.7.0
|
|
171
|
+
- @rcarls/rc-menu-button@0.7.0
|
|
172
|
+
- @rcarls/rc-menu@0.7.0
|
|
173
|
+
|
|
3
174
|
## 0.6.0
|
|
4
175
|
|
|
5
176
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -44,10 +44,10 @@ standalone menu package.
|
|
|
44
44
|
`rc-fab-menu` inherits `open`, `defaultOpen`, `openMenu()`, `closeMenu()`, and `toggleMenu()`
|
|
45
45
|
from `rc-menu-button` unchanged. It also overrides `placement`'s default (see below).
|
|
46
46
|
|
|
47
|
-
| Property | Attribute | Type
|
|
48
|
-
| ----------- | ----------- |
|
|
49
|
-
| `position` | `position` | `'
|
|
50
|
-
| `placement` | `placement` | `AnchorPlacement`
|
|
47
|
+
| Property | Attribute | Type | Default | Description |
|
|
48
|
+
| ----------- | ----------- | -------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
49
|
+
| `position` | `position` | `'block-end-inline-end' \| 'block-end-inline-start' \| 'block-start-inline-end' \| 'block-start-inline-start'` | `'block-end-inline-end'` | Viewport corner where the trigger is anchored. |
|
|
50
|
+
| `placement` | `placement` | `AnchorPlacement` | `'block-start-end'` | Preferred popup placement. Overrides `rc-menu-button`'s `'block-end-start'` default: the trigger is pinned to the block-end corner, so the menu opens back toward the block start, aligned to the inline end. |
|
|
51
51
|
|
|
52
52
|
| Event | Detail | Description |
|
|
53
53
|
| -------------------- | ------------------- | ------------------------------------------------------------ |
|
|
@@ -69,6 +69,21 @@
|
|
|
69
69
|
"name": "--rc-fab-menu-z-index",
|
|
70
70
|
"default": "10"
|
|
71
71
|
},
|
|
72
|
+
{
|
|
73
|
+
"description": "Shared FAB-family block-axis inset fallback.",
|
|
74
|
+
"name": "--rc-fab-inset-block",
|
|
75
|
+
"default": "1.5rem"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"description": "Shared FAB-family inline-axis inset fallback.",
|
|
79
|
+
"name": "--rc-fab-inset-inline",
|
|
80
|
+
"default": "1.5rem"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"description": "Shared FAB-family stacking-order fallback.",
|
|
84
|
+
"name": "--rc-fab-z-index",
|
|
85
|
+
"default": "10"
|
|
86
|
+
},
|
|
72
87
|
{
|
|
73
88
|
"description": "Gap between trigger icon and label content. No default.",
|
|
74
89
|
"name": "--rc-fab-menu-trigger-gap"
|
|
@@ -186,6 +201,11 @@
|
|
|
186
201
|
"name": "--rc-fab-menu-popup-z-index",
|
|
187
202
|
"default": "1000"
|
|
188
203
|
},
|
|
204
|
+
{
|
|
205
|
+
"description": "Shared menu-button popup stacking-order fallback.",
|
|
206
|
+
"name": "--rc-menu-button-popup-z-index",
|
|
207
|
+
"default": "1000"
|
|
208
|
+
},
|
|
189
209
|
{
|
|
190
210
|
"description": "Popup reveal transition duration.",
|
|
191
211
|
"name": "--rc-fab-menu-popup-duration",
|
|
@@ -224,21 +244,30 @@
|
|
|
224
244
|
"type": {
|
|
225
245
|
"text": "RCFabMenuPosition"
|
|
226
246
|
},
|
|
227
|
-
"default": "'
|
|
247
|
+
"default": "'block-end-inline-end'",
|
|
228
248
|
"description": "Viewport corner where the floating action menu trigger is anchored.",
|
|
229
249
|
"attribute": "position",
|
|
230
250
|
"reflects": true
|
|
231
251
|
},
|
|
232
252
|
{
|
|
233
253
|
"kind": "field",
|
|
234
|
-
"name": "
|
|
254
|
+
"name": "_defaultPlacement",
|
|
235
255
|
"type": {
|
|
236
256
|
"text": "AnchorPlacement"
|
|
237
257
|
},
|
|
238
|
-
"
|
|
239
|
-
"description": "
|
|
240
|
-
"
|
|
241
|
-
|
|
258
|
+
"privacy": "protected",
|
|
259
|
+
"description": "The trigger is pinned to the block-end corner, so the menu opens back\ntoward the block start, aligned to the inline end.",
|
|
260
|
+
"readonly": true
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"kind": "field",
|
|
264
|
+
"name": "_effectivePlacement",
|
|
265
|
+
"type": {
|
|
266
|
+
"text": "AnchorPlacement"
|
|
267
|
+
},
|
|
268
|
+
"privacy": "protected",
|
|
269
|
+
"description": "Keeps the FAB-specific default independent of inherited menubar orientation.",
|
|
270
|
+
"readonly": true
|
|
242
271
|
},
|
|
243
272
|
{
|
|
244
273
|
"kind": "method",
|
|
@@ -274,17 +303,12 @@
|
|
|
274
303
|
"type": {
|
|
275
304
|
"text": "RCFabMenuPosition"
|
|
276
305
|
},
|
|
277
|
-
"default": "'
|
|
306
|
+
"default": "'block-end-inline-end'",
|
|
278
307
|
"fieldName": "position"
|
|
279
308
|
},
|
|
280
309
|
{
|
|
281
|
-
"description": "Preferred placement of the action menu relative to the trigger button.",
|
|
282
|
-
"name": "placement"
|
|
283
|
-
"type": {
|
|
284
|
-
"text": "AnchorPlacement"
|
|
285
|
-
},
|
|
286
|
-
"default": "'top-end'",
|
|
287
|
-
"fieldName": "placement"
|
|
310
|
+
"description": "Preferred placement of the action menu relative to the trigger button, in logical terms (see `rc-menu-button`). Defaults to `block-start-end`: back toward the block start from the corner the trigger is pinned to, aligned to the inline end.",
|
|
311
|
+
"name": "placement"
|
|
288
312
|
}
|
|
289
313
|
],
|
|
290
314
|
"superclass": {
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { property as c } from "lit/decorators.js";
|
|
2
|
+
import { RCMenuButton as l } from "@rcarls/rc-menu-button";
|
|
3
|
+
import { css as u } from "lit";
|
|
4
|
+
const p = u`:host{position:var(--rc-fab-menu-position-css,fixed);z-index:var(--rc-fab-menu-z-index,var(--rc-fab-z-index,10));display:inline-block;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))}:host([hidden]){display:none}:host([position=block-end-inline-start]){inset-inline-start:var(--rc-fab-menu-inset-inline,var(--rc-fab-inset-inline,1.5rem));inset-inline-end:unset}:host([position=block-start-inline-end]){inset-block-start:var(--rc-fab-menu-inset-block,var(--rc-fab-inset-block,1.5rem));inset-block-end:unset}:host([position=block-start-inline-start]){inset-block-start:var(--rc-fab-menu-inset-block,var(--rc-fab-inset-block,1.5rem));inset-block-end:unset;inset-inline-start:var(--rc-fab-menu-inset-inline,var(--rc-fab-inset-inline,1.5rem));inset-inline-end:unset}#root{display:inline-block}#trigger-wrap{display:contents}slot[name=trigger]::slotted(button),slot[name=trigger]::slotted([role=button]){justify-content:center;align-items: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);display:inline-flex}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{color:inherit;z-index:var(--rc-fab-menu-popup-z-index,var(--rc-menu-button-popup-z-index,1000));transform-origin:var(--rc-fab-menu-popup-transform-origin,bottom right);background:0 0;border:none;margin:0;padding:0;overflow:visible}:host([open]) #popup{opacity:1;transition:opacity var(--rc-fab-menu-popup-duration,0s) var(--rc-motion-effects-easing-enter,ease-out), scale var(--rc-fab-menu-popup-duration,0s) var(--rc-motion-spatial-easing-enter,ease-out), overlay var(--rc-fab-menu-popup-duration,0s) allow-discrete, display var(--rc-fab-menu-popup-duration,0s) allow-discrete;scale:1}:host(:not([open])) #popup{opacity:0;transition:opacity var(--rc-fab-menu-popup-duration,0s) var(--rc-motion-effects-easing-exit,ease-in), scale var(--rc-fab-menu-popup-duration,0s) var(--rc-motion-spatial-easing-exit,ease-in), overlay var(--rc-fab-menu-popup-duration,0s) allow-discrete, display var(--rc-fab-menu-popup-duration,0s) allow-discrete;scale:.92}#popup[hidden]{display:none}@starting-style{:host([open]) #popup{opacity:0;scale:.92}}@media (prefers-reduced-motion:reduce){slot[name=trigger]::slotted(button),slot[name=trigger]::slotted([role=button]){transition-duration:0s}:host([open]) #popup{transition:opacity 50ms var(--rc-motion-effects-easing-enter,ease-out), scale 0s var(--rc-motion-spatial-easing-enter,ease-out), overlay 50ms allow-discrete, display 50ms allow-discrete}:host(:not([open])) #popup{transition:opacity 50ms var(--rc-motion-effects-easing-exit,ease-in), scale 0s var(--rc-motion-spatial-easing-exit,ease-in), overlay 50ms allow-discrete, display 50ms allow-discrete}slot[name=trigger]::slotted(button:active),slot[name=trigger]::slotted([role=button]:active){transform:none}}`;
|
|
5
|
+
var b = Object.defineProperty, d = (o, r, i, v) => {
|
|
6
|
+
for (var e = void 0, t = o.length - 1, s; t >= 0; t--)
|
|
7
|
+
(s = o[t]) && (e = s(r, i, e) || e);
|
|
8
|
+
return e && b(r, i, e), e;
|
|
9
|
+
};
|
|
10
|
+
const a = class a extends l {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments), this.position = "block-end-inline-end";
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* The trigger is pinned to the block-end corner, so the menu opens back
|
|
16
|
+
* toward the block start, aligned to the inline end.
|
|
17
|
+
*/
|
|
18
|
+
get _defaultPlacement() {
|
|
19
|
+
return "block-start-end";
|
|
20
|
+
}
|
|
21
|
+
/** Keeps the FAB-specific default independent of inherited menubar orientation. */
|
|
22
|
+
get _effectivePlacement() {
|
|
23
|
+
return this.placement;
|
|
24
|
+
}
|
|
25
|
+
/** Dispatches the `rc-fab-menu-toggle` bubbling composed event with the requested open state. */
|
|
26
|
+
_dispatchToggle(r = this.open) {
|
|
27
|
+
this.dispatchEvent(
|
|
28
|
+
new CustomEvent("rc-fab-menu-toggle", {
|
|
29
|
+
bubbles: !0,
|
|
30
|
+
composed: !0,
|
|
31
|
+
detail: { open: r }
|
|
32
|
+
})
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
a.styles = [p];
|
|
37
|
+
let n = a;
|
|
38
|
+
d([
|
|
39
|
+
c({ type: String, reflect: !0 })
|
|
40
|
+
], n.prototype, "position");
|
|
41
|
+
export {
|
|
42
|
+
n as R
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=rc-fab-menu-J-nIWi86.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rc-fab-menu-J-nIWi86.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='block-end-inline-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='block-start-inline-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='block-start-inline-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 /*\n * These styles replace rc-menu-button's rather than extend them, so the popup\n * restates its reset of the UA [popover] border, padding, and Canvas\n * background. The slotted rc-menu draws the visible surface.\n */\n #popup {\n margin: 0;\n padding: 0;\n border: none;\n background: none;\n overflow: visible;\n color: inherit;\n z-index: var(--rc-fab-menu-popup-z-index, var(--rc-menu-button-popup-z-index, 1000));\n transform-origin: var(--rc-fab-menu-popup-transform-origin, bottom right);\n }\n\n /*\n * Enter decelerates, exit accelerates, using the same directional tokens\n * every other open/close surface in this project reads. Previously this\n * only had an entrance (a bare, unconditional #popup rule plus a\n * @starting-style for it): closing relied entirely on the popover's own\n * instant display:none, with no exit fade at all. display/overlay join\n * the transition list, allow-discrete, so closing now fades out over the\n * same duration before the popover actually leaves the top layer.\n */\n :host([open]) #popup {\n opacity: 1;\n scale: 1;\n transition:\n opacity var(--rc-fab-menu-popup-duration, 0ms) var(--rc-motion-effects-easing-enter, ease-out),\n scale var(--rc-fab-menu-popup-duration, 0ms) var(--rc-motion-spatial-easing-enter, ease-out),\n overlay var(--rc-fab-menu-popup-duration, 0ms) allow-discrete,\n display var(--rc-fab-menu-popup-duration, 0ms) allow-discrete;\n }\n\n :host(:not([open])) #popup {\n opacity: 0;\n scale: 0.92;\n transition:\n opacity var(--rc-fab-menu-popup-duration, 0ms) var(--rc-motion-effects-easing-exit, ease-in),\n scale var(--rc-fab-menu-popup-duration, 0ms) var(--rc-motion-spatial-easing-exit, ease-in),\n overlay var(--rc-fab-menu-popup-duration, 0ms) allow-discrete,\n display var(--rc-fab-menu-popup-duration, 0ms) allow-discrete;\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 /*\n * #popup mixes a spatial property (scale) and effects properties (opacity,\n * plus the overlay/display pair keyed to whichever is still animating)\n * under one shared --rc-fab-menu-popup-duration, so the reduced-motion\n * override restates the transition list rather than zeroing the shared\n * duration: scale drops to 0s, opacity (and overlay/display, which track\n * it) shortens instead. The trigger's own --rc-fab-menu-transition is an\n * opaque, theme-authored value with no visible property list, so the\n * component cannot split it the same way and zeros it outright, matching\n * the Substrate dialog exception.\n */\n @media (prefers-reduced-motion: reduce) {\n slot[name='trigger']::slotted(button),\n slot[name='trigger']::slotted([role='button']) {\n transition-duration: 0s;\n }\n\n :host([open]) #popup {\n transition:\n opacity 50ms var(--rc-motion-effects-easing-enter, ease-out),\n scale 0s var(--rc-motion-spatial-easing-enter, ease-out),\n overlay 50ms allow-discrete,\n display 50ms allow-discrete;\n }\n\n :host(:not([open])) #popup {\n transition:\n opacity 50ms var(--rc-motion-effects-easing-exit, ease-in),\n scale 0s var(--rc-motion-spatial-easing-exit, ease-in),\n overlay 50ms allow-discrete,\n display 50ms allow-discrete;\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 =\n | 'block-end-inline-end'\n | 'block-end-inline-start'\n | 'block-start-inline-end'\n | 'block-start-inline-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 - Logical viewport corner where the trigger is anchored: `block-end-inline-end`\n * (default), `block-end-inline-start`, `block-start-inline-end`, or `block-start-inline-start`.\n * @attr placement - Preferred placement of the action menu relative to the trigger button, in\n * logical terms (see `rc-menu-button`). Defaults to `block-start-end`: back toward the block\n * start from the corner the trigger is pinned to, aligned to the inline end.\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-inset-block=1.5rem] - Shared FAB-family block-axis inset fallback.\n * @cssprop [--rc-fab-inset-inline=1.5rem] - Shared FAB-family inline-axis inset fallback.\n * @cssprop [--rc-fab-z-index=10] - Shared FAB-family stacking-order fallback.\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-menu-button-popup-z-index=1000] - Shared menu-button popup stacking-order fallback.\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 = 'block-end-inline-end';\n\n /**\n * The trigger is pinned to the block-end corner, so the menu opens back\n * toward the block start, aligned to the inline end.\n */\n protected override get _defaultPlacement(): AnchorPlacement {\n return 'block-start-end';\n }\n\n /** Keeps the FAB-specific default independent of inherited menubar orientation. */\n protected override get _effectivePlacement(): AnchorPlacement {\n return this.placement;\n }\n\n /** Dispatches the `rc-fab-menu-toggle` bubbling composed event with the requested open state. */\n protected override _dispatchToggle(open = this.open): void {\n this.dispatchEvent(\n new CustomEvent<RCFabMenuToggleEvent>('rc-fab-menu-toggle', {\n bubbles: true,\n composed: true,\n detail: { open },\n }),\n );\n }\n}\n\nexport default RCFabMenu;\n"],"names":["fabMenuStyles","css","_RCFabMenu","RCMenuButton","open","RCFabMenu","__decorateClass","property"],"mappings":";;;AAEO,MAAMA,IAAgBC;;;;;;ACoItB,MAAMC,IAAN,MAAMA,UAAkBC,EAAa;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAKL,KAAA,WAA8B;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM9B,IAAuB,oBAAqC;AAC1D,WAAO;AAAA,EACT;AAAA;AAAA,EAGA,IAAuB,sBAAuC;AAC5D,WAAO,KAAK;AAAA,EACd;AAAA;AAAA,EAGmB,gBAAgBC,IAAO,KAAK,MAAY;AACzD,SAAK;AAAA,MACH,IAAI,YAAkC,sBAAsB;AAAA,QAC1D,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,MAAAA,EAAA;AAAA,MAAK,CAChB;AAAA,IAAA;AAAA,EAEL;AACF;AA7BEF,EAAgB,SAAS,CAACF,CAAa;AADlC,IAAMK,IAANH;AAKLI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BF,EAKX,WAAA,UAAA;"}
|
package/dist/rc-fab-menu.js
CHANGED
|
@@ -10,7 +10,7 @@ declare global {
|
|
|
10
10
|
}
|
|
11
11
|
/** Detail payload for the `rc-fab-menu-toggle` event. */
|
|
12
12
|
export type RCFabMenuToggleEvent = RCMenuButtonToggleEvent;
|
|
13
|
-
export type RCFabMenuPosition = '
|
|
13
|
+
export type RCFabMenuPosition = 'block-end-inline-end' | 'block-end-inline-start' | 'block-start-inline-end' | 'block-start-inline-start';
|
|
14
14
|
/**
|
|
15
15
|
* Floating action button menu wrapper for an `rc-menu` action surface.
|
|
16
16
|
*
|
|
@@ -40,8 +40,11 @@ export type RCFabMenuPosition = 'bottom-end' | 'bottom-start' | 'top-end' | 'top
|
|
|
40
40
|
*
|
|
41
41
|
* @fires rc-fab-menu-toggle - Fired when user interaction opens or closes the action menu.
|
|
42
42
|
*
|
|
43
|
-
* @attr position -
|
|
44
|
-
*
|
|
43
|
+
* @attr position - Logical viewport corner where the trigger is anchored: `block-end-inline-end`
|
|
44
|
+
* (default), `block-end-inline-start`, `block-start-inline-end`, or `block-start-inline-start`.
|
|
45
|
+
* @attr placement - Preferred placement of the action menu relative to the trigger button, in
|
|
46
|
+
* logical terms (see `rc-menu-button`). Defaults to `block-start-end`: back toward the block
|
|
47
|
+
* start from the corner the trigger is pinned to, aligned to the inline end.
|
|
45
48
|
*
|
|
46
49
|
* @cssprop [--rc-fab-menu-position-css=fixed] - CSS position value for the floating wrapper.
|
|
47
50
|
* @cssprop [--rc-fab-menu-inset-block=1.5rem] - Distance from the block-axis edge; falls back
|
|
@@ -50,6 +53,9 @@ export type RCFabMenuPosition = 'bottom-end' | 'bottom-start' | 'top-end' | 'top
|
|
|
50
53
|
* through --rc-fab-inset-inline.
|
|
51
54
|
* @cssprop [--rc-fab-menu-z-index=10] - Stacking order for the floating wrapper; falls back
|
|
52
55
|
* through --rc-fab-z-index.
|
|
56
|
+
* @cssprop [--rc-fab-inset-block=1.5rem] - Shared FAB-family block-axis inset fallback.
|
|
57
|
+
* @cssprop [--rc-fab-inset-inline=1.5rem] - Shared FAB-family inline-axis inset fallback.
|
|
58
|
+
* @cssprop [--rc-fab-z-index=10] - Shared FAB-family stacking-order fallback.
|
|
53
59
|
* @cssprop [--rc-fab-menu-trigger-gap] - Gap between trigger icon and label content. No default.
|
|
54
60
|
* @cssprop [--rc-fab-menu-size] - Trigger minimum inline and block size. No default; set
|
|
55
61
|
* explicitly or apply a theme.
|
|
@@ -106,6 +112,7 @@ export type RCFabMenuPosition = 'bottom-end' | 'bottom-start' | 'top-end' | 'top
|
|
|
106
112
|
* native disabled styling when unset).
|
|
107
113
|
* @cssprop [--rc-fab-menu-popup-z-index=1000] - Stacking order of the popup container; falls back
|
|
108
114
|
* through --rc-menu-button-popup-z-index.
|
|
115
|
+
* @cssprop [--rc-menu-button-popup-z-index=1000] - Shared menu-button popup stacking-order fallback.
|
|
109
116
|
* @cssprop [--rc-fab-menu-popup-duration=0ms] - Popup reveal transition duration.
|
|
110
117
|
* @cssprop [--rc-fab-menu-popup-transform-origin=bottom right] - Popup reveal transform origin.
|
|
111
118
|
*
|
|
@@ -116,8 +123,13 @@ export declare class RCFabMenu extends RCMenuButton {
|
|
|
116
123
|
static styles: import('lit').CSSResult[];
|
|
117
124
|
/** Viewport corner where the floating action menu trigger is anchored. */
|
|
118
125
|
position: RCFabMenuPosition;
|
|
119
|
-
/**
|
|
120
|
-
|
|
126
|
+
/**
|
|
127
|
+
* The trigger is pinned to the block-end corner, so the menu opens back
|
|
128
|
+
* toward the block start, aligned to the inline end.
|
|
129
|
+
*/
|
|
130
|
+
protected get _defaultPlacement(): AnchorPlacement;
|
|
131
|
+
/** Keeps the FAB-specific default independent of inherited menubar orientation. */
|
|
132
|
+
protected get _effectivePlacement(): AnchorPlacement;
|
|
121
133
|
/** Dispatches the `rc-fab-menu-toggle` bubbling composed event with the requested open state. */
|
|
122
134
|
protected _dispatchToggle(open?: boolean): void;
|
|
123
135
|
}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.
|
|
6
|
+
"version": "0.7.0",
|
|
7
7
|
"description": "Floating action button menu wrapper for an rc-menu action surface.",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -45,9 +45,9 @@
|
|
|
45
45
|
"test:browser:firefox": "vitest --run --project=firefox"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@rcarls/rc-common": "0.
|
|
49
|
-
"@rcarls/rc-menu": "0.
|
|
50
|
-
"@rcarls/rc-menu-button": "0.
|
|
48
|
+
"@rcarls/rc-common": "0.7.0",
|
|
49
|
+
"@rcarls/rc-menu": "0.7.0",
|
|
50
|
+
"@rcarls/rc-menu-button": "0.7.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@custom-elements-manifest/analyzer": "0.11.0",
|
|
@@ -1,166 +0,0 @@
|
|
|
1
|
-
import { property as c } from "lit/decorators.js";
|
|
2
|
-
import { RCMenuButton as b } from "@rcarls/rc-menu-button";
|
|
3
|
-
import { css as u } from "lit";
|
|
4
|
-
const d = u`
|
|
5
|
-
:host {
|
|
6
|
-
position: var(--rc-fab-menu-position-css, fixed);
|
|
7
|
-
inset-block-end: var(--rc-fab-menu-inset-block, var(--rc-fab-inset-block, 1.5rem));
|
|
8
|
-
inset-inline-end: var(--rc-fab-menu-inset-inline, var(--rc-fab-inset-inline, 1.5rem));
|
|
9
|
-
z-index: var(--rc-fab-menu-z-index, var(--rc-fab-z-index, 10));
|
|
10
|
-
display: inline-block;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:host([hidden]) {
|
|
14
|
-
display: none;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
:host([position='bottom-start']) {
|
|
18
|
-
inset-inline-end: unset;
|
|
19
|
-
inset-inline-start: var(--rc-fab-menu-inset-inline, var(--rc-fab-inset-inline, 1.5rem));
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
:host([position='top-end']) {
|
|
23
|
-
inset-block-end: unset;
|
|
24
|
-
inset-block-start: var(--rc-fab-menu-inset-block, var(--rc-fab-inset-block, 1.5rem));
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
:host([position='top-start']) {
|
|
28
|
-
inset-block-end: unset;
|
|
29
|
-
inset-block-start: var(--rc-fab-menu-inset-block, var(--rc-fab-inset-block, 1.5rem));
|
|
30
|
-
inset-inline-end: unset;
|
|
31
|
-
inset-inline-start: var(--rc-fab-menu-inset-inline, var(--rc-fab-inset-inline, 1.5rem));
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
#root {
|
|
35
|
-
display: inline-block;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
#trigger-wrap {
|
|
39
|
-
display: contents;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
slot[name='trigger']::slotted(button),
|
|
43
|
-
slot[name='trigger']::slotted([role='button']) {
|
|
44
|
-
display: inline-flex;
|
|
45
|
-
align-items: center;
|
|
46
|
-
justify-content: center;
|
|
47
|
-
gap: var(--rc-fab-menu-trigger-gap);
|
|
48
|
-
min-inline-size: var(--rc-fab-menu-size);
|
|
49
|
-
min-block-size: var(--rc-fab-menu-size);
|
|
50
|
-
padding-block: var(--rc-fab-menu-padding-block, revert);
|
|
51
|
-
padding-inline: var(--rc-fab-menu-padding-inline, revert);
|
|
52
|
-
appearance: var(--rc-fab-menu-appearance, revert);
|
|
53
|
-
box-sizing: border-box;
|
|
54
|
-
border: var(--rc-fab-menu-border, revert);
|
|
55
|
-
border-radius: var(--rc-fab-menu-radius, revert);
|
|
56
|
-
background: var(--rc-fab-menu-bg, revert);
|
|
57
|
-
color: var(--rc-fab-menu-color, revert);
|
|
58
|
-
box-shadow: var(--rc-fab-menu-shadow, revert);
|
|
59
|
-
font: var(--rc-fab-menu-font, revert);
|
|
60
|
-
font-family: var(--rc-fab-menu-font-family, revert);
|
|
61
|
-
font-size: var(--rc-fab-menu-font-size, revert);
|
|
62
|
-
font-weight: var(--rc-fab-menu-font-weight, revert);
|
|
63
|
-
letter-spacing: var(--rc-fab-menu-letter-spacing, revert);
|
|
64
|
-
white-space: nowrap;
|
|
65
|
-
text-decoration: var(--rc-fab-menu-text-decoration, revert);
|
|
66
|
-
user-select: var(--rc-fab-menu-user-select, revert);
|
|
67
|
-
transition: var(--rc-fab-menu-transition, revert);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
slot[name='trigger']::slotted(button:hover),
|
|
71
|
-
slot[name='trigger']::slotted([role='button']:hover) {
|
|
72
|
-
background: var(--rc-fab-menu-bg-hover, revert);
|
|
73
|
-
box-shadow: var(--rc-fab-menu-shadow-hover, revert);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
slot[name='trigger']::slotted(button[aria-expanded='true']),
|
|
77
|
-
slot[name='trigger']::slotted([role='button'][aria-expanded='true']) {
|
|
78
|
-
background: var(--rc-fab-menu-bg-open, revert);
|
|
79
|
-
box-shadow: var(--rc-fab-menu-shadow-open, revert);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
slot[name='trigger']::slotted(button:active),
|
|
83
|
-
slot[name='trigger']::slotted([role='button']:active) {
|
|
84
|
-
box-shadow: var(--rc-fab-menu-shadow-active, revert);
|
|
85
|
-
transform: var(--rc-fab-menu-active-transform, revert);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
slot[name='trigger']::slotted(button:focus-visible),
|
|
89
|
-
slot[name='trigger']::slotted([role='button']:focus-visible) {
|
|
90
|
-
outline: var(--rc-fab-menu-focus-ring, revert);
|
|
91
|
-
outline-offset: var(--rc-fab-menu-focus-ring-offset, revert);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
slot[name='trigger']::slotted(button:disabled),
|
|
95
|
-
slot[name='trigger']::slotted([role='button'][aria-disabled='true']) {
|
|
96
|
-
opacity: var(--rc-fab-menu-disabled-opacity, revert);
|
|
97
|
-
pointer-events: none;
|
|
98
|
-
box-shadow: var(--rc-fab-menu-disabled-shadow, revert);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
#popup {
|
|
102
|
-
z-index: var(--rc-fab-menu-popup-z-index, var(--rc-menu-button-popup-z-index, 1000));
|
|
103
|
-
opacity: 1;
|
|
104
|
-
scale: 1;
|
|
105
|
-
transform-origin: var(--rc-fab-menu-popup-transform-origin, bottom right);
|
|
106
|
-
transition:
|
|
107
|
-
opacity var(--rc-fab-menu-popup-duration, 0ms) ease,
|
|
108
|
-
scale var(--rc-fab-menu-popup-duration, 0ms) ease;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
#popup[hidden] {
|
|
112
|
-
display: none;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
@starting-style {
|
|
116
|
-
:host([open]) #popup {
|
|
117
|
-
opacity: 0;
|
|
118
|
-
scale: 0.92;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
@media (prefers-reduced-motion: reduce) {
|
|
123
|
-
slot[name='trigger']::slotted(button),
|
|
124
|
-
slot[name='trigger']::slotted([role='button']),
|
|
125
|
-
#popup {
|
|
126
|
-
transition-duration: 0s;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
slot[name='trigger']::slotted(button:active),
|
|
130
|
-
slot[name='trigger']::slotted([role='button']:active) {
|
|
131
|
-
transform: none;
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
`;
|
|
135
|
-
var v = Object.defineProperty, l = (a, t, i, m) => {
|
|
136
|
-
for (var e = void 0, n = a.length - 1, s; n >= 0; n--)
|
|
137
|
-
(s = a[n]) && (e = s(t, i, e) || e);
|
|
138
|
-
return e && v(t, i, e), e;
|
|
139
|
-
};
|
|
140
|
-
const o = class o extends b {
|
|
141
|
-
constructor() {
|
|
142
|
-
super(...arguments), this.position = "bottom-end", this.placement = "top-end";
|
|
143
|
-
}
|
|
144
|
-
/** Dispatches the `rc-fab-menu-toggle` bubbling composed event with the requested open state. */
|
|
145
|
-
_dispatchToggle(t = this.open) {
|
|
146
|
-
this.dispatchEvent(
|
|
147
|
-
new CustomEvent("rc-fab-menu-toggle", {
|
|
148
|
-
bubbles: !0,
|
|
149
|
-
composed: !0,
|
|
150
|
-
detail: { open: t }
|
|
151
|
-
})
|
|
152
|
-
);
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
|
-
o.styles = [d];
|
|
156
|
-
let r = o;
|
|
157
|
-
l([
|
|
158
|
-
c({ type: String, reflect: !0 })
|
|
159
|
-
], r.prototype, "position");
|
|
160
|
-
l([
|
|
161
|
-
c({ reflect: !0 })
|
|
162
|
-
], r.prototype, "placement");
|
|
163
|
-
export {
|
|
164
|
-
r as R
|
|
165
|
-
};
|
|
166
|
-
//# sourceMappingURL=rc-fab-menu-DqKyQYNn.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"rc-fab-menu-DqKyQYNn.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 requested open state. */\n protected override _dispatchToggle(open = this.open): void {\n this.dispatchEvent(\n new CustomEvent<RCFabMenuToggleEvent>('rc-fab-menu-toggle', {\n bubbles: true,\n composed: true,\n detail: { open },\n }),\n );\n }\n}\n\nexport default RCFabMenu;\n"],"names":["fabMenuStyles","css","_RCFabMenu","RCMenuButton","open","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,gBAAgBC,IAAO,KAAK,MAAY;AACzD,SAAK;AAAA,MACH,IAAI,YAAkC,sBAAsB;AAAA,QAC1D,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,MAAAA,EAAA;AAAA,MAAK,CAChB;AAAA,IAAA;AAAA,EAEL;AACF;AApBEF,EAAgB,SAAS,CAACF,CAAa;AADlC,IAAMK,IAANH;AAKLI,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;"}
|