@rcarls/rc-fab-menu 0.0.0-next-20260921045401
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 +159 -0
- package/README.md +71 -0
- package/dist/custom-elements.json +338 -0
- package/dist/rc-fab-menu-CZqTZsbY.js +216 -0
- package/dist/rc-fab-menu-CZqTZsbY.js.map +1 -0
- package/dist/rc-fab-menu-define.js +7 -0
- package/dist/rc-fab-menu-define.js.map +1 -0
- package/dist/rc-fab-menu.js +5 -0
- package/dist/rc-fab-menu.js.map +1 -0
- package/dist/types/packages/rc-fab-menu/src/define.d.ts +1 -0
- package/dist/types/packages/rc-fab-menu/src/index.d.ts +1 -0
- package/dist/types/packages/rc-fab-menu/src/rc-fab-menu.d.ts +128 -0
- package/dist/types/packages/rc-fab-menu/src/rc-fab-menu.styles.d.ts +2 -0
- package/package.json +67 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
# @rcarls/rc-fab-menu
|
|
2
|
+
|
|
3
|
+
## 0.0.0-next-20260921045401
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 079e025: Standardize component styling contracts for the breaking 0.7 release.
|
|
8
|
+
|
|
9
|
+
BREAKING CHANGE: Rename the Markdown editor's `--rme-*` properties to
|
|
10
|
+
`--rc-markdown-editor-*`, `--rc-app-bar-background` to `--rc-app-bar-bg`,
|
|
11
|
+
`--rc-textarea-radius` to `--rc-textarea-border-radius`, the transfer-list
|
|
12
|
+
`--rc-transfer-list-panel-*` properties to `--rc-transfer-list-listbox-*`,
|
|
13
|
+
`--rc-chip-group-webkit-scrollbar-display` to
|
|
14
|
+
`--rc-chip-group-scrollbar-display`, and `--rc-text` to `--rc-field-text`.
|
|
15
|
+
Compatibility aliases are intentionally not provided.
|
|
16
|
+
|
|
17
|
+
BREAKING CHANGE: Replace `--rc-select-chip-padding-inline` and
|
|
18
|
+
`--rc-combobox-chip-padding-inline` with explicit `*-padding-inline-start` and
|
|
19
|
+
`*-padding-inline-end` tokens. Generated removable chips now reserve the full
|
|
20
|
+
remove target and its edge offset, so their indicator cannot overlap label text.
|
|
21
|
+
|
|
22
|
+
Add canonical app-bar elevation, transfer-list listbox radius, and textarea
|
|
23
|
+
line-action tokens. Add logical `rc-chip` inline-padding properties so themes
|
|
24
|
+
can implement Material's icon-aware spacing without overriding authored child
|
|
25
|
+
styles. Make `rc-field` consume the shared semantic token layer,
|
|
26
|
+
and place the `rc-chip` and `rc-search-bar` light-DOM structural styles in the
|
|
27
|
+
`rc-base` cascade layer so normal consumer rules override them.
|
|
28
|
+
|
|
29
|
+
Prevent decorative, `aria-hidden` trailing list content from intercepting a
|
|
30
|
+
whole-row action target, and keep segmented-list item geometry from leaking
|
|
31
|
+
into nested standard lists.
|
|
32
|
+
|
|
33
|
+
Remove unused Material navigation-rail toggle tokens and obsolete list-item
|
|
34
|
+
theme tokens. Register the segmented-button private theme seam and enforce
|
|
35
|
+
token ownership, documentation, removed-name, selector-budget, and cascade
|
|
36
|
+
layer contracts through the component architecture audit.
|
|
37
|
+
|
|
38
|
+
- 94dc987: `rc-menu-button`'s, `rc-select`'s, and `rc-combobox`'s popup/listbox now fade
|
|
39
|
+
in and out through CSS alone, using `@starting-style` and a discrete
|
|
40
|
+
`display`/`overlay` transition, driven by new `--rc-menu-button-popup-duration`,
|
|
41
|
+
`--rc-select-listbox-duration`, and `--rc-combobox-listbox-duration`
|
|
42
|
+
properties. `showPopover()`/`hidePopover()` (via `openPopup()`/`closePopup()`)
|
|
43
|
+
stay synchronous, and nothing waits on the transition finishing.
|
|
44
|
+
|
|
45
|
+
These animate opacity only, not a scale or slide transform: all three
|
|
46
|
+
position their popup with the shared `AnchorController`, which applies its
|
|
47
|
+
own viewport-clamping `translate` and reads `getBoundingClientRect()` to
|
|
48
|
+
compute the next correction. A second, CSS-driven transform on the same
|
|
49
|
+
element and property would fight that positioning math on every open, not
|
|
50
|
+
only during an edge case.
|
|
51
|
+
|
|
52
|
+
`rc-fab-menu` already had a scale-based entrance for its popup (verified safe
|
|
53
|
+
here: unlike the general `AnchorController` case, this popup isn't
|
|
54
|
+
collision-clamped), but no exit animation at all and no directional easing.
|
|
55
|
+
Both are added: the popup now fades and scales back out on close, and enter
|
|
56
|
+
uses a decelerating curve while exit uses an accelerating one.
|
|
57
|
+
|
|
58
|
+
- 6e548d9: Several components handle `prefers-reduced-motion: reduce` in their own
|
|
59
|
+
shadow styles, outside a theme's reach, and refine it the same way the theme
|
|
60
|
+
layer already does: spatial motion (`translate`, `scale`, `transform`,
|
|
61
|
+
`inline-size`, `block-size`) goes fully to zero, while effects motion (color,
|
|
62
|
+
opacity) shortens instead of disappearing.
|
|
63
|
+
|
|
64
|
+
`rc-app-bar` zeros its host's hide/show `translate` but shortens the
|
|
65
|
+
expanded title's fade-in. `rc-disclosure` keeps its panel's expand/collapse
|
|
66
|
+
zeroed, but its summary/content backstop for a theme-added transition now
|
|
67
|
+
shortens instead of zeroing it outright. `rc-list-item`'s row and
|
|
68
|
+
state-layer transition only color and opacity, so the whole sweep shortens.
|
|
69
|
+
`rc-fab-menu`'s popup mixes `scale` with opacity/overlay/display under one
|
|
70
|
+
shared duration; reduced motion now zeros the scale and shortens the rest.
|
|
71
|
+
`rc-switch`'s thumb mixes background-color with inline-size/block-size/
|
|
72
|
+
transform the same way; the icons and track, which each transition only one
|
|
73
|
+
kind of property, needed only the zero-or-shorten call. `rc-fab`'s
|
|
74
|
+
scroll-reveal is opacity/visibility only with no time-based duration to
|
|
75
|
+
shorten in its scroll-linked path, so reduced motion narrows the scroll
|
|
76
|
+
window instead of collapsing it to zero; its JS-transition fallback path
|
|
77
|
+
shortens the same fade rather than removing it. `rc-progress`'s determinate
|
|
78
|
+
fill transition, previously unguarded under reduced motion, is now zeroed;
|
|
79
|
+
its indeterminate loop, a continuous sweep with no meaningful shortened
|
|
80
|
+
form, stays fully stopped rather than shortened.
|
|
81
|
+
|
|
82
|
+
### Patch Changes
|
|
83
|
+
|
|
84
|
+
- Updated dependencies [50d5610]
|
|
85
|
+
- Updated dependencies [4341311]
|
|
86
|
+
- Updated dependencies [94dc987]
|
|
87
|
+
- @rcarls/rc-common@0.0.0-next-20260921045401
|
|
88
|
+
- @rcarls/rc-menu-button@0.0.0-next-20260921045401
|
|
89
|
+
- @rcarls/rc-menu@0.0.0-next-20260921045401
|
|
90
|
+
|
|
91
|
+
## 0.6.0
|
|
92
|
+
|
|
93
|
+
### Patch Changes
|
|
94
|
+
|
|
95
|
+
- 57370e4: Align component metadata, aggregate framework typings, development-time native-child
|
|
96
|
+
validation, controlled menu state, package declarations, and public documentation before the
|
|
97
|
+
next release.
|
|
98
|
+
- Updated dependencies [7382c71]
|
|
99
|
+
- Updated dependencies [6683eb9]
|
|
100
|
+
- Updated dependencies [ee7ba6c]
|
|
101
|
+
- Updated dependencies [30eb232]
|
|
102
|
+
- Updated dependencies [30eb232]
|
|
103
|
+
- Updated dependencies [57370e4]
|
|
104
|
+
- @rcarls/rc-menu@0.6.0
|
|
105
|
+
- @rcarls/rc-menu-button@0.6.0
|
|
106
|
+
- @rcarls/rc-common@0.6.0
|
|
107
|
+
|
|
108
|
+
## 0.5.0
|
|
109
|
+
|
|
110
|
+
### Patch Changes
|
|
111
|
+
|
|
112
|
+
- Updated dependencies [4ae2ef0]
|
|
113
|
+
- Updated dependencies [d33b92f]
|
|
114
|
+
- Updated dependencies [689340c]
|
|
115
|
+
- @rcarls/rc-common@0.5.0
|
|
116
|
+
- @rcarls/rc-menu-button@0.5.0
|
|
117
|
+
- @rcarls/rc-menu@0.5.0
|
|
118
|
+
|
|
119
|
+
## 0.4.2
|
|
120
|
+
|
|
121
|
+
### Patch Changes
|
|
122
|
+
|
|
123
|
+
- @rcarls/rc-common@0.4.2
|
|
124
|
+
- @rcarls/rc-menu@0.4.2
|
|
125
|
+
- @rcarls/rc-menu-button@0.4.2
|
|
126
|
+
|
|
127
|
+
## 0.4.1
|
|
128
|
+
|
|
129
|
+
### Patch Changes
|
|
130
|
+
|
|
131
|
+
- @rcarls/rc-common@0.4.1
|
|
132
|
+
- @rcarls/rc-menu@0.4.1
|
|
133
|
+
- @rcarls/rc-menu-button@0.4.1
|
|
134
|
+
|
|
135
|
+
## 0.4.0
|
|
136
|
+
|
|
137
|
+
### Minor Changes
|
|
138
|
+
|
|
139
|
+
- 4624eb2: Add the rc-fab-menu package for floating action menu surfaces.
|
|
140
|
+
|
|
141
|
+
### Patch Changes
|
|
142
|
+
|
|
143
|
+
- 55e8ab5: Preserve UA-like control and surface styling until an optional theme supplies decorative tokens.
|
|
144
|
+
Restore themed button hover and pressed state layers, including a pointer-origin Material ripple.
|
|
145
|
+
- 83d4734: Document `position`/`placement` attributes and the 17 CSS custom properties
|
|
146
|
+
that had no `@cssprop` tag, and correct 12 more whose documented default no
|
|
147
|
+
longer matched the "preserve UA-like component defaults" pass (most default
|
|
148
|
+
to `revert` now, and `--rc-fab-menu-popup-duration` defaults to `0ms`, not
|
|
149
|
+
`160ms`). Also fix the package README's theming and properties tables to
|
|
150
|
+
match, and the root README's dependency column, which was missing rc-common.
|
|
151
|
+
- Updated dependencies [e57277f]
|
|
152
|
+
- Updated dependencies [69e31c1]
|
|
153
|
+
- Updated dependencies [4cb5551]
|
|
154
|
+
- Updated dependencies [ccca8e2]
|
|
155
|
+
- Updated dependencies [037b1b3]
|
|
156
|
+
- Updated dependencies [3e89095]
|
|
157
|
+
- @rcarls/rc-common@0.4.0
|
|
158
|
+
- @rcarls/rc-menu-button@0.4.0
|
|
159
|
+
- @rcarls/rc-menu@0.4.0
|
package/README.md
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# `@rcarls/rc-fab-menu`
|
|
2
|
+
|
|
3
|
+
Floating action button menu wrapper for an `rc-menu` action surface.
|
|
4
|
+
|
|
5
|
+
Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-fab-menu](https://richardcarls.github.io/rc-webcomponents/components/rc-fab-menu).
|
|
6
|
+
|
|
7
|
+
Use this when a primary floating action needs a short menu of related commands. The component
|
|
8
|
+
specializes `rc-menu-button`, so it keeps the same menu keyboard behavior, light dismiss, focus
|
|
9
|
+
return, and anchor positioning while adding floating action button placement and reveal styling.
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @rcarls/rc-fab-menu
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Import
|
|
18
|
+
|
|
19
|
+
```js
|
|
20
|
+
import '@rcarls/rc-fab-menu/define';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Basic usage
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<rc-fab-menu>
|
|
27
|
+
<button slot="trigger" type="button" aria-label="Create">
|
|
28
|
+
<span aria-hidden="true">+</span>
|
|
29
|
+
</button>
|
|
30
|
+
|
|
31
|
+
<rc-menu label="Create">
|
|
32
|
+
<button data-value="recipe">Recipe</button>
|
|
33
|
+
<button data-value="collection">Collection</button>
|
|
34
|
+
</rc-menu>
|
|
35
|
+
</rc-fab-menu>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
The trigger is a consumer-authored native button. The menu is a normal `rc-menu`, so command
|
|
39
|
+
activation comes from `rc-menu-activate` and menu rows keep the same APG menu semantics as the
|
|
40
|
+
standalone menu package.
|
|
41
|
+
|
|
42
|
+
## API
|
|
43
|
+
|
|
44
|
+
`rc-fab-menu` inherits `open`, `defaultOpen`, `openMenu()`, `closeMenu()`, and `toggleMenu()`
|
|
45
|
+
from `rc-menu-button` unchanged. It also overrides `placement`'s default (see below).
|
|
46
|
+
|
|
47
|
+
| Property | Attribute | Type | Default | Description |
|
|
48
|
+
| ----------- | ----------- | ------------------------------------------------------------ | -------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
|
49
|
+
| `position` | `position` | `'bottom-end' \| 'bottom-start' \| 'top-end' \| 'top-start'` | `'bottom-end'` | Viewport corner where the trigger is anchored. |
|
|
50
|
+
| `placement` | `placement` | `AnchorPlacement` | `'top-end'` | Preferred popup placement. Overrides `rc-menu-button`'s `'bottom-start'` default so the action menu opens above the trigger. |
|
|
51
|
+
|
|
52
|
+
| Event | Detail | Description |
|
|
53
|
+
| -------------------- | ------------------- | ------------------------------------------------------------ |
|
|
54
|
+
| `rc-fab-menu-toggle` | `{ open: boolean }` | Fired when user interaction opens or closes the action menu. |
|
|
55
|
+
|
|
56
|
+
## Theming
|
|
57
|
+
|
|
58
|
+
The default styling is design-system neutral and follows the `rc-fab` token names where possible.
|
|
59
|
+
|
|
60
|
+
| CSS custom property | Default | Description |
|
|
61
|
+
| ------------------------------ | -------- | ------------------------------------------------------------------------------- |
|
|
62
|
+
| `--rc-fab-menu-position-css` | `fixed` | CSS position value for the floating wrapper. |
|
|
63
|
+
| `--rc-fab-menu-inset-block` | `1.5rem` | Distance from the block-axis edge; falls back through `--rc-fab-inset-block`. |
|
|
64
|
+
| `--rc-fab-menu-inset-inline` | `1.5rem` | Distance from the inline-axis edge; falls back through `--rc-fab-inset-inline`. |
|
|
65
|
+
| `--rc-fab-menu-size` | (none) | Trigger minimum inline and block size. Set explicitly or apply a theme. |
|
|
66
|
+
| `--rc-fab-menu-radius` | (none) | Trigger border radius, deferring to native button radius when unset. |
|
|
67
|
+
| `--rc-fab-menu-bg` | (none) | Trigger background, deferring to native button background when unset. |
|
|
68
|
+
| `--rc-fab-menu-color` | (none) | Trigger foreground, deferring to native button color when unset. |
|
|
69
|
+
| `--rc-fab-menu-popup-duration` | `0ms` | Popup reveal transition duration. |
|
|
70
|
+
|
|
71
|
+
Use `::part(popup)` for popup container refinements and theme `rc-menu` for action rows.
|
|
@@ -0,0 +1,338 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/define.ts",
|
|
8
|
+
"declarations": [],
|
|
9
|
+
"exports": [
|
|
10
|
+
{
|
|
11
|
+
"kind": "custom-element-definition",
|
|
12
|
+
"name": "rc-fab-menu",
|
|
13
|
+
"declaration": {
|
|
14
|
+
"name": "RCFabMenu",
|
|
15
|
+
"module": "/src/index.js"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"kind": "js",
|
|
20
|
+
"name": "*",
|
|
21
|
+
"declaration": {
|
|
22
|
+
"name": "*",
|
|
23
|
+
"module": "src/index.js"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
]
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"kind": "javascript-module",
|
|
30
|
+
"path": "src/index.ts",
|
|
31
|
+
"declarations": [],
|
|
32
|
+
"exports": [
|
|
33
|
+
{
|
|
34
|
+
"kind": "js",
|
|
35
|
+
"name": "*",
|
|
36
|
+
"declaration": {
|
|
37
|
+
"name": "*",
|
|
38
|
+
"module": "src/rc-fab-menu.js"
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
]
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"kind": "javascript-module",
|
|
45
|
+
"path": "src/rc-fab-menu.ts",
|
|
46
|
+
"declarations": [
|
|
47
|
+
{
|
|
48
|
+
"kind": "class",
|
|
49
|
+
"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.",
|
|
50
|
+
"name": "RCFabMenu",
|
|
51
|
+
"cssProperties": [
|
|
52
|
+
{
|
|
53
|
+
"description": "CSS position value for the floating wrapper.",
|
|
54
|
+
"name": "--rc-fab-menu-position-css",
|
|
55
|
+
"default": "fixed"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"description": "Distance from the block-axis edge; falls back through --rc-fab-inset-block.",
|
|
59
|
+
"name": "--rc-fab-menu-inset-block",
|
|
60
|
+
"default": "1.5rem"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"description": "Distance from the inline-axis edge; falls back through --rc-fab-inset-inline.",
|
|
64
|
+
"name": "--rc-fab-menu-inset-inline",
|
|
65
|
+
"default": "1.5rem"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"description": "Stacking order for the floating wrapper; falls back through --rc-fab-z-index.",
|
|
69
|
+
"name": "--rc-fab-menu-z-index",
|
|
70
|
+
"default": "10"
|
|
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
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"description": "Gap between trigger icon and label content. No default.",
|
|
89
|
+
"name": "--rc-fab-menu-trigger-gap"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"description": "Trigger minimum inline and block size. No default; set explicitly or apply a theme.",
|
|
93
|
+
"name": "--rc-fab-menu-size"
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"description": "Trigger block-axis padding (defers to native button padding when unset).",
|
|
97
|
+
"name": "--rc-fab-menu-padding-block"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"description": "Trigger inline-axis padding (defers to native button padding when unset).",
|
|
101
|
+
"name": "--rc-fab-menu-padding-inline"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"description": "Trigger appearance (defers to native button appearance when unset).",
|
|
105
|
+
"name": "--rc-fab-menu-appearance"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"description": "Trigger border (defers to native button border when unset).",
|
|
109
|
+
"name": "--rc-fab-menu-border"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"description": "Trigger border radius (defers to native button radius when unset).",
|
|
113
|
+
"name": "--rc-fab-menu-radius"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"description": "Trigger background (defers to native button background when unset).",
|
|
117
|
+
"name": "--rc-fab-menu-bg"
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"description": "Trigger foreground color (defers to native button color when unset).",
|
|
121
|
+
"name": "--rc-fab-menu-color"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"description": "Trigger elevation shadow (defers to native button shadow when unset).",
|
|
125
|
+
"name": "--rc-fab-menu-shadow"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"description": "Trigger font shorthand (defers to native button font when unset).",
|
|
129
|
+
"name": "--rc-fab-menu-font"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"description": "Trigger font family (defers to native button font-family when unset).",
|
|
133
|
+
"name": "--rc-fab-menu-font-family"
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"description": "Trigger font size (defers to native button font-size when unset).",
|
|
137
|
+
"name": "--rc-fab-menu-font-size"
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"description": "Trigger font weight (defers to native button font-weight when unset).",
|
|
141
|
+
"name": "--rc-fab-menu-font-weight"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"description": "Trigger letter spacing (defers to native button letter-spacing when unset).",
|
|
145
|
+
"name": "--rc-fab-menu-letter-spacing"
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"description": "Trigger text decoration (defers to native button text-decoration when unset).",
|
|
149
|
+
"name": "--rc-fab-menu-text-decoration"
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"description": "Trigger user-select (defers to native button user-select when unset).",
|
|
153
|
+
"name": "--rc-fab-menu-user-select"
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"description": "Trigger transition shorthand (defers to native button transition when unset).",
|
|
157
|
+
"name": "--rc-fab-menu-transition"
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
"description": "Trigger hover background (defers to native button hover styling when unset).",
|
|
161
|
+
"name": "--rc-fab-menu-bg-hover"
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"description": "Trigger hover elevation shadow (defers to native button hover styling when unset).",
|
|
165
|
+
"name": "--rc-fab-menu-shadow-hover"
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"description": "Trigger background while the menu is open (defers to native button styling when unset).",
|
|
169
|
+
"name": "--rc-fab-menu-bg-open"
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"description": "Trigger elevation shadow while the menu is open (defers to native button styling when unset).",
|
|
173
|
+
"name": "--rc-fab-menu-shadow-open"
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"description": "Trigger pressed elevation shadow (defers to native button styling when unset).",
|
|
177
|
+
"name": "--rc-fab-menu-shadow-active"
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"description": "Trigger transform while pressed (defers to native button styling when unset).",
|
|
181
|
+
"name": "--rc-fab-menu-active-transform"
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"description": "Trigger focus ring (defers to native button focus styling when unset).",
|
|
185
|
+
"name": "--rc-fab-menu-focus-ring"
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"description": "Trigger focus ring offset (defers to native button focus styling when unset).",
|
|
189
|
+
"name": "--rc-fab-menu-focus-ring-offset"
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"description": "Trigger opacity while disabled (defers to native disabled styling when unset).",
|
|
193
|
+
"name": "--rc-fab-menu-disabled-opacity"
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"description": "Trigger elevation shadow while disabled (defers to native disabled styling when unset).",
|
|
197
|
+
"name": "--rc-fab-menu-disabled-shadow"
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
"description": "Stacking order of the popup container; falls back through --rc-menu-button-popup-z-index.",
|
|
201
|
+
"name": "--rc-fab-menu-popup-z-index",
|
|
202
|
+
"default": "1000"
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
"description": "Shared menu-button popup stacking-order fallback.",
|
|
206
|
+
"name": "--rc-menu-button-popup-z-index",
|
|
207
|
+
"default": "1000"
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"description": "Popup reveal transition duration.",
|
|
211
|
+
"name": "--rc-fab-menu-popup-duration",
|
|
212
|
+
"default": "0ms"
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"description": "Popup reveal transform origin.",
|
|
216
|
+
"name": "--rc-fab-menu-popup-transform-origin",
|
|
217
|
+
"default": "bottom right"
|
|
218
|
+
}
|
|
219
|
+
],
|
|
220
|
+
"cssParts": [
|
|
221
|
+
{
|
|
222
|
+
"description": "The root popup anchor inherited from `rc-menu-button`.",
|
|
223
|
+
"name": "root"
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"description": "The popup container inherited from `rc-menu-button`.",
|
|
227
|
+
"name": "popup"
|
|
228
|
+
}
|
|
229
|
+
],
|
|
230
|
+
"slots": [
|
|
231
|
+
{
|
|
232
|
+
"description": "Native button or button-like element that opens the action menu.",
|
|
233
|
+
"name": "trigger"
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
"description": "`rc-menu` element containing floating action commands.",
|
|
237
|
+
"name": "default"
|
|
238
|
+
}
|
|
239
|
+
],
|
|
240
|
+
"members": [
|
|
241
|
+
{
|
|
242
|
+
"kind": "field",
|
|
243
|
+
"name": "position",
|
|
244
|
+
"type": {
|
|
245
|
+
"text": "RCFabMenuPosition"
|
|
246
|
+
},
|
|
247
|
+
"default": "'bottom-end'",
|
|
248
|
+
"description": "Viewport corner where the floating action menu trigger is anchored.",
|
|
249
|
+
"attribute": "position",
|
|
250
|
+
"reflects": true
|
|
251
|
+
},
|
|
252
|
+
{
|
|
253
|
+
"kind": "field",
|
|
254
|
+
"name": "placement",
|
|
255
|
+
"type": {
|
|
256
|
+
"text": "AnchorPlacement"
|
|
257
|
+
},
|
|
258
|
+
"default": "'top-end'",
|
|
259
|
+
"description": "Preferred placement of the action menu relative to the trigger button.",
|
|
260
|
+
"attribute": "placement",
|
|
261
|
+
"reflects": true
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
"kind": "method",
|
|
265
|
+
"name": "_dispatchToggle",
|
|
266
|
+
"privacy": "protected",
|
|
267
|
+
"return": {
|
|
268
|
+
"type": {
|
|
269
|
+
"text": "void"
|
|
270
|
+
}
|
|
271
|
+
},
|
|
272
|
+
"parameters": [
|
|
273
|
+
{
|
|
274
|
+
"name": "open",
|
|
275
|
+
"default": "this.open"
|
|
276
|
+
}
|
|
277
|
+
],
|
|
278
|
+
"description": "Dispatches the `rc-fab-menu-toggle` bubbling composed event with the requested open state."
|
|
279
|
+
}
|
|
280
|
+
],
|
|
281
|
+
"events": [
|
|
282
|
+
{
|
|
283
|
+
"name": "rc-fab-menu-toggle",
|
|
284
|
+
"type": {
|
|
285
|
+
"text": "CustomEvent"
|
|
286
|
+
},
|
|
287
|
+
"description": "Fired when user interaction opens or closes the action menu."
|
|
288
|
+
}
|
|
289
|
+
],
|
|
290
|
+
"attributes": [
|
|
291
|
+
{
|
|
292
|
+
"description": "Viewport corner where the floating action menu trigger is anchored.",
|
|
293
|
+
"name": "position",
|
|
294
|
+
"type": {
|
|
295
|
+
"text": "RCFabMenuPosition"
|
|
296
|
+
},
|
|
297
|
+
"default": "'bottom-end'",
|
|
298
|
+
"fieldName": "position"
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
"description": "Preferred placement of the action menu relative to the trigger button.",
|
|
302
|
+
"name": "placement",
|
|
303
|
+
"type": {
|
|
304
|
+
"text": "AnchorPlacement"
|
|
305
|
+
},
|
|
306
|
+
"default": "'top-end'",
|
|
307
|
+
"fieldName": "placement"
|
|
308
|
+
}
|
|
309
|
+
],
|
|
310
|
+
"superclass": {
|
|
311
|
+
"name": "RCMenuButton",
|
|
312
|
+
"package": "@rcarls/rc-menu-button"
|
|
313
|
+
},
|
|
314
|
+
"tagName": "rc-fab-menu",
|
|
315
|
+
"customElement": true
|
|
316
|
+
}
|
|
317
|
+
],
|
|
318
|
+
"exports": [
|
|
319
|
+
{
|
|
320
|
+
"kind": "js",
|
|
321
|
+
"name": "RCFabMenu",
|
|
322
|
+
"declaration": {
|
|
323
|
+
"name": "RCFabMenu",
|
|
324
|
+
"module": "src/rc-fab-menu.ts"
|
|
325
|
+
}
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
"kind": "js",
|
|
329
|
+
"name": "default",
|
|
330
|
+
"declaration": {
|
|
331
|
+
"name": "RCFabMenu",
|
|
332
|
+
"module": "src/rc-fab-menu.ts"
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
]
|
|
336
|
+
}
|
|
337
|
+
]
|
|
338
|
+
}
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
import { property as l } from "lit/decorators.js";
|
|
2
|
+
import { RCMenuButton as p } 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
|
+
transform-origin: var(--rc-fab-menu-popup-transform-origin, bottom right);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/*
|
|
107
|
+
* Enter decelerates, exit accelerates, using the same directional tokens
|
|
108
|
+
* every other open/close surface in this project reads. Previously this
|
|
109
|
+
* only had an entrance (a bare, unconditional #popup rule plus a
|
|
110
|
+
* @starting-style for it): closing relied entirely on the popover's own
|
|
111
|
+
* instant display:none, with no exit fade at all. display/overlay join
|
|
112
|
+
* the transition list, allow-discrete, so closing now fades out over the
|
|
113
|
+
* same duration before the popover actually leaves the top layer.
|
|
114
|
+
*/
|
|
115
|
+
:host([open]) #popup {
|
|
116
|
+
opacity: 1;
|
|
117
|
+
scale: 1;
|
|
118
|
+
transition:
|
|
119
|
+
opacity var(--rc-fab-menu-popup-duration, 0ms) var(--rc-motion-effects-easing-enter, ease-out),
|
|
120
|
+
scale var(--rc-fab-menu-popup-duration, 0ms) var(--rc-motion-spatial-easing-enter, ease-out),
|
|
121
|
+
overlay var(--rc-fab-menu-popup-duration, 0ms) allow-discrete,
|
|
122
|
+
display var(--rc-fab-menu-popup-duration, 0ms) allow-discrete;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
:host(:not([open])) #popup {
|
|
126
|
+
opacity: 0;
|
|
127
|
+
scale: 0.92;
|
|
128
|
+
transition:
|
|
129
|
+
opacity var(--rc-fab-menu-popup-duration, 0ms) var(--rc-motion-effects-easing-exit, ease-in),
|
|
130
|
+
scale var(--rc-fab-menu-popup-duration, 0ms) var(--rc-motion-spatial-easing-exit, ease-in),
|
|
131
|
+
overlay var(--rc-fab-menu-popup-duration, 0ms) allow-discrete,
|
|
132
|
+
display var(--rc-fab-menu-popup-duration, 0ms) allow-discrete;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
#popup[hidden] {
|
|
136
|
+
display: none;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
@starting-style {
|
|
140
|
+
:host([open]) #popup {
|
|
141
|
+
opacity: 0;
|
|
142
|
+
scale: 0.92;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/*
|
|
147
|
+
* #popup mixes a spatial property (scale) and effects properties (opacity,
|
|
148
|
+
* plus the overlay/display pair keyed to whichever is still animating)
|
|
149
|
+
* under one shared --rc-fab-menu-popup-duration, so the reduced-motion
|
|
150
|
+
* override restates the transition list rather than zeroing the shared
|
|
151
|
+
* duration: scale drops to 0s, opacity (and overlay/display, which track
|
|
152
|
+
* it) shortens instead. The trigger's own --rc-fab-menu-transition is an
|
|
153
|
+
* opaque, theme-authored value with no visible property list, so the
|
|
154
|
+
* component cannot split it the same way and zeros it outright, matching
|
|
155
|
+
* the Substrate dialog exception.
|
|
156
|
+
*/
|
|
157
|
+
@media (prefers-reduced-motion: reduce) {
|
|
158
|
+
slot[name='trigger']::slotted(button),
|
|
159
|
+
slot[name='trigger']::slotted([role='button']) {
|
|
160
|
+
transition-duration: 0s;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
:host([open]) #popup {
|
|
164
|
+
transition:
|
|
165
|
+
opacity 50ms var(--rc-motion-effects-easing-enter, ease-out),
|
|
166
|
+
scale 0s var(--rc-motion-spatial-easing-enter, ease-out),
|
|
167
|
+
overlay 50ms allow-discrete,
|
|
168
|
+
display 50ms allow-discrete;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
:host(:not([open])) #popup {
|
|
172
|
+
transition:
|
|
173
|
+
opacity 50ms var(--rc-motion-effects-easing-exit, ease-in),
|
|
174
|
+
scale 0s var(--rc-motion-spatial-easing-exit, ease-in),
|
|
175
|
+
overlay 50ms allow-discrete,
|
|
176
|
+
display 50ms allow-discrete;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
slot[name='trigger']::slotted(button:active),
|
|
180
|
+
slot[name='trigger']::slotted([role='button']:active) {
|
|
181
|
+
transform: none;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
`;
|
|
185
|
+
var m = Object.defineProperty, c = (o, t, i, v) => {
|
|
186
|
+
for (var e = void 0, a = o.length - 1, s; a >= 0; a--)
|
|
187
|
+
(s = o[a]) && (e = s(t, i, e) || e);
|
|
188
|
+
return e && m(t, i, e), e;
|
|
189
|
+
};
|
|
190
|
+
const n = class n extends p {
|
|
191
|
+
constructor() {
|
|
192
|
+
super(...arguments), this.position = "bottom-end", this.placement = "top-end";
|
|
193
|
+
}
|
|
194
|
+
/** Dispatches the `rc-fab-menu-toggle` bubbling composed event with the requested open state. */
|
|
195
|
+
_dispatchToggle(t = this.open) {
|
|
196
|
+
this.dispatchEvent(
|
|
197
|
+
new CustomEvent("rc-fab-menu-toggle", {
|
|
198
|
+
bubbles: !0,
|
|
199
|
+
composed: !0,
|
|
200
|
+
detail: { open: t }
|
|
201
|
+
})
|
|
202
|
+
);
|
|
203
|
+
}
|
|
204
|
+
};
|
|
205
|
+
n.styles = [d];
|
|
206
|
+
let r = n;
|
|
207
|
+
c([
|
|
208
|
+
l({ type: String, reflect: !0 })
|
|
209
|
+
], r.prototype, "position");
|
|
210
|
+
c([
|
|
211
|
+
l({ reflect: !0 })
|
|
212
|
+
], r.prototype, "placement");
|
|
213
|
+
export {
|
|
214
|
+
r as R
|
|
215
|
+
};
|
|
216
|
+
//# sourceMappingURL=rc-fab-menu-CZqTZsbY.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rc-fab-menu-CZqTZsbY.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 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 = '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-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 = '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;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;;;;;;AC6HtB,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;"}
|
|
@@ -0,0 +1 @@
|
|
|
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;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rc-fab-menu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './rc-fab-menu.js';
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { AnchorPlacement } from '@rcarls/rc-common';
|
|
2
|
+
import { RCMenuButton, RCMenuButtonToggleEvent } from '@rcarls/rc-menu-button';
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'rc-fab-menu': RCFabMenu;
|
|
6
|
+
}
|
|
7
|
+
interface HTMLElementEventMap {
|
|
8
|
+
'rc-fab-menu-toggle': CustomEvent<RCFabMenuToggleEvent>;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
/** Detail payload for the `rc-fab-menu-toggle` event. */
|
|
12
|
+
export type RCFabMenuToggleEvent = RCMenuButtonToggleEvent;
|
|
13
|
+
export type RCFabMenuPosition = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
|
|
14
|
+
/**
|
|
15
|
+
* Floating action button menu wrapper for an `rc-menu` action surface.
|
|
16
|
+
*
|
|
17
|
+
* `rc-fab-menu` specializes `rc-menu-button` for floating action menus. It
|
|
18
|
+
* preserves the menu-button keyboard, focus return, light-dismiss, and popup
|
|
19
|
+
* positioning behavior while applying FAB placement and reveal styling.
|
|
20
|
+
*
|
|
21
|
+
* @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-fab-menu rc-fab-menu docs}
|
|
22
|
+
* @see {@link https://m3.material.io/components/floating-action-button/overview Material 3 floating action button}
|
|
23
|
+
* @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ WAI-ARIA Menu Button pattern}
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```html
|
|
27
|
+
* <rc-fab-menu>
|
|
28
|
+
* <button slot="trigger" type="button" aria-label="Create">
|
|
29
|
+
* <span aria-hidden="true">+</span>
|
|
30
|
+
* </button>
|
|
31
|
+
* <rc-menu label="Create">
|
|
32
|
+
* <button>Recipe</button>
|
|
33
|
+
* <button>Collection</button>
|
|
34
|
+
* </rc-menu>
|
|
35
|
+
* </rc-fab-menu>
|
|
36
|
+
* ```
|
|
37
|
+
*
|
|
38
|
+
* @slot trigger - Native button or button-like element that opens the action menu.
|
|
39
|
+
* @slot default - `rc-menu` element containing floating action commands.
|
|
40
|
+
*
|
|
41
|
+
* @fires rc-fab-menu-toggle - Fired when user interaction opens or closes the action menu.
|
|
42
|
+
*
|
|
43
|
+
* @attr position - Viewport corner where the floating action menu trigger is anchored.
|
|
44
|
+
* @attr placement - Preferred placement of the action menu relative to the trigger button.
|
|
45
|
+
*
|
|
46
|
+
* @cssprop [--rc-fab-menu-position-css=fixed] - CSS position value for the floating wrapper.
|
|
47
|
+
* @cssprop [--rc-fab-menu-inset-block=1.5rem] - Distance from the block-axis edge; falls back
|
|
48
|
+
* through --rc-fab-inset-block.
|
|
49
|
+
* @cssprop [--rc-fab-menu-inset-inline=1.5rem] - Distance from the inline-axis edge; falls back
|
|
50
|
+
* through --rc-fab-inset-inline.
|
|
51
|
+
* @cssprop [--rc-fab-menu-z-index=10] - Stacking order for the floating wrapper; falls back
|
|
52
|
+
* through --rc-fab-z-index.
|
|
53
|
+
* @cssprop [--rc-fab-inset-block=1.5rem] - Shared FAB-family block-axis inset fallback.
|
|
54
|
+
* @cssprop [--rc-fab-inset-inline=1.5rem] - Shared FAB-family inline-axis inset fallback.
|
|
55
|
+
* @cssprop [--rc-fab-z-index=10] - Shared FAB-family stacking-order fallback.
|
|
56
|
+
* @cssprop [--rc-fab-menu-trigger-gap] - Gap between trigger icon and label content. No default.
|
|
57
|
+
* @cssprop [--rc-fab-menu-size] - Trigger minimum inline and block size. No default; set
|
|
58
|
+
* explicitly or apply a theme.
|
|
59
|
+
* @cssprop [--rc-fab-menu-padding-block] - Trigger block-axis padding (defers to native button
|
|
60
|
+
* padding when unset).
|
|
61
|
+
* @cssprop [--rc-fab-menu-padding-inline] - Trigger inline-axis padding (defers to native button
|
|
62
|
+
* padding when unset).
|
|
63
|
+
* @cssprop [--rc-fab-menu-appearance] - Trigger appearance (defers to native button appearance
|
|
64
|
+
* when unset).
|
|
65
|
+
* @cssprop [--rc-fab-menu-border] - Trigger border (defers to native button border when unset).
|
|
66
|
+
* @cssprop [--rc-fab-menu-radius] - Trigger border radius (defers to native button radius when
|
|
67
|
+
* unset).
|
|
68
|
+
* @cssprop [--rc-fab-menu-bg] - Trigger background (defers to native button background when
|
|
69
|
+
* unset).
|
|
70
|
+
* @cssprop [--rc-fab-menu-color] - Trigger foreground color (defers to native button color when
|
|
71
|
+
* unset).
|
|
72
|
+
* @cssprop [--rc-fab-menu-shadow] - Trigger elevation shadow (defers to native button shadow
|
|
73
|
+
* when unset).
|
|
74
|
+
* @cssprop [--rc-fab-menu-font] - Trigger font shorthand (defers to native button font when
|
|
75
|
+
* unset).
|
|
76
|
+
* @cssprop [--rc-fab-menu-font-family] - Trigger font family (defers to native button font-family
|
|
77
|
+
* when unset).
|
|
78
|
+
* @cssprop [--rc-fab-menu-font-size] - Trigger font size (defers to native button font-size when
|
|
79
|
+
* unset).
|
|
80
|
+
* @cssprop [--rc-fab-menu-font-weight] - Trigger font weight (defers to native button font-weight
|
|
81
|
+
* when unset).
|
|
82
|
+
* @cssprop [--rc-fab-menu-letter-spacing] - Trigger letter spacing (defers to native button
|
|
83
|
+
* letter-spacing when unset).
|
|
84
|
+
* @cssprop [--rc-fab-menu-text-decoration] - Trigger text decoration (defers to native button
|
|
85
|
+
* text-decoration when unset).
|
|
86
|
+
* @cssprop [--rc-fab-menu-user-select] - Trigger user-select (defers to native button user-select
|
|
87
|
+
* when unset).
|
|
88
|
+
* @cssprop [--rc-fab-menu-transition] - Trigger transition shorthand (defers to native button
|
|
89
|
+
* transition when unset).
|
|
90
|
+
* @cssprop [--rc-fab-menu-bg-hover] - Trigger hover background (defers to native button hover
|
|
91
|
+
* styling when unset).
|
|
92
|
+
* @cssprop [--rc-fab-menu-shadow-hover] - Trigger hover elevation shadow (defers to native button
|
|
93
|
+
* hover styling when unset).
|
|
94
|
+
* @cssprop [--rc-fab-menu-bg-open] - Trigger background while the menu is open (defers to native
|
|
95
|
+
* button styling when unset).
|
|
96
|
+
* @cssprop [--rc-fab-menu-shadow-open] - Trigger elevation shadow while the menu is open (defers
|
|
97
|
+
* to native button styling when unset).
|
|
98
|
+
* @cssprop [--rc-fab-menu-shadow-active] - Trigger pressed elevation shadow (defers to native
|
|
99
|
+
* button styling when unset).
|
|
100
|
+
* @cssprop [--rc-fab-menu-active-transform] - Trigger transform while pressed (defers to native
|
|
101
|
+
* button styling when unset).
|
|
102
|
+
* @cssprop [--rc-fab-menu-focus-ring] - Trigger focus ring (defers to native button focus styling
|
|
103
|
+
* when unset).
|
|
104
|
+
* @cssprop [--rc-fab-menu-focus-ring-offset] - Trigger focus ring offset (defers to native button
|
|
105
|
+
* focus styling when unset).
|
|
106
|
+
* @cssprop [--rc-fab-menu-disabled-opacity] - Trigger opacity while disabled (defers to native
|
|
107
|
+
* disabled styling when unset).
|
|
108
|
+
* @cssprop [--rc-fab-menu-disabled-shadow] - Trigger elevation shadow while disabled (defers to
|
|
109
|
+
* native disabled styling when unset).
|
|
110
|
+
* @cssprop [--rc-fab-menu-popup-z-index=1000] - Stacking order of the popup container; falls back
|
|
111
|
+
* through --rc-menu-button-popup-z-index.
|
|
112
|
+
* @cssprop [--rc-menu-button-popup-z-index=1000] - Shared menu-button popup stacking-order fallback.
|
|
113
|
+
* @cssprop [--rc-fab-menu-popup-duration=0ms] - Popup reveal transition duration.
|
|
114
|
+
* @cssprop [--rc-fab-menu-popup-transform-origin=bottom right] - Popup reveal transform origin.
|
|
115
|
+
*
|
|
116
|
+
* @csspart root - The root popup anchor inherited from `rc-menu-button`.
|
|
117
|
+
* @csspart popup - The popup container inherited from `rc-menu-button`.
|
|
118
|
+
*/
|
|
119
|
+
export declare class RCFabMenu extends RCMenuButton {
|
|
120
|
+
static styles: import('lit').CSSResult[];
|
|
121
|
+
/** Viewport corner where the floating action menu trigger is anchored. */
|
|
122
|
+
position: RCFabMenuPosition;
|
|
123
|
+
/** Preferred placement of the action menu relative to the trigger button. */
|
|
124
|
+
placement: AnchorPlacement;
|
|
125
|
+
/** Dispatches the `rc-fab-menu-toggle` bubbling composed event with the requested open state. */
|
|
126
|
+
protected _dispatchToggle(open?: boolean): void;
|
|
127
|
+
}
|
|
128
|
+
export default RCFabMenu;
|
package/package.json
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@rcarls/rc-fab-menu",
|
|
3
|
+
"publishConfig": {
|
|
4
|
+
"access": "public"
|
|
5
|
+
},
|
|
6
|
+
"version": "0.0.0-next-20260921045401",
|
|
7
|
+
"description": "Floating action button menu wrapper for an rc-menu action surface.",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/richardcarls/rc-webcomponents.git",
|
|
11
|
+
"directory": "packages/rc-fab-menu"
|
|
12
|
+
},
|
|
13
|
+
"homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-fab-menu",
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"type": "module",
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"module": "./dist/rc-fab-menu.js",
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"import": {
|
|
23
|
+
"types": "./dist/types/packages/rc-fab-menu/src/index.d.ts",
|
|
24
|
+
"default": "./dist/rc-fab-menu.js"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"./define": {
|
|
28
|
+
"import": {
|
|
29
|
+
"types": "./dist/types/packages/rc-fab-menu/src/define.d.ts",
|
|
30
|
+
"default": "./dist/rc-fab-menu-define.js"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"types": "./dist/types/packages/rc-fab-menu/src/index.d.ts",
|
|
35
|
+
"sideEffects": [
|
|
36
|
+
"./dist/rc-fab-menu-define.js"
|
|
37
|
+
],
|
|
38
|
+
"customElements": "dist/custom-elements.json",
|
|
39
|
+
"scripts": {
|
|
40
|
+
"build": "tsc && vite build && cem analyze",
|
|
41
|
+
"cem:analyze": "cem analyze",
|
|
42
|
+
"preview": "vite preview",
|
|
43
|
+
"test:browser": "vitest --run",
|
|
44
|
+
"test:browser:chrome": "vitest --run --project=chromium",
|
|
45
|
+
"test:browser:firefox": "vitest --run --project=firefox"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"@rcarls/rc-common": "0.0.0-next-20260921045401",
|
|
49
|
+
"@rcarls/rc-menu": "0.0.0-next-20260921045401",
|
|
50
|
+
"@rcarls/rc-menu-button": "0.0.0-next-20260921045401"
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@custom-elements-manifest/analyzer": "0.11.0",
|
|
54
|
+
"@vitest/browser-playwright": "4.1.5",
|
|
55
|
+
"lit": "^3.0.0",
|
|
56
|
+
"playwright": "^1.56.0",
|
|
57
|
+
"rollup": "^4.60.2",
|
|
58
|
+
"typescript": "~5.9.3",
|
|
59
|
+
"vite": "^7.1.7",
|
|
60
|
+
"vite-plugin-dts": "^4.5.4",
|
|
61
|
+
"vitest": "^4.0.6",
|
|
62
|
+
"vitest-browser-lit": "^1.0.1"
|
|
63
|
+
},
|
|
64
|
+
"peerDependencies": {
|
|
65
|
+
"lit": "^3.0.0"
|
|
66
|
+
}
|
|
67
|
+
}
|