@rcarls/rc-menu-button 0.5.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 +164 -0
- package/README.md +68 -54
- package/dist/custom-elements.json +109 -13
- package/dist/rc-menu-button-C2gavu7b.js +284 -0
- package/dist/rc-menu-button-C2gavu7b.js.map +1 -0
- package/dist/rc-menu-button-define.js +1 -1
- package/dist/rc-menu-button.js +1 -1
- package/dist/types/packages/rc-menu-button/src/index.d.ts +1 -1
- package/dist/types/packages/rc-menu-button/src/rc-menu-button.d.ts +57 -12
- package/package.json +4 -4
- package/dist/rc-menu-button-BuLMtVMw.js +0 -378
- package/dist/rc-menu-button-BuLMtVMw.js.map +0 -1
- package/dist/types/packages/rc-menu-button/src/rc-menu-button.test.d.ts +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,169 @@
|
|
|
1
1
|
# @rcarls/rc-menu-button
|
|
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
|
+
- 94dc987: `rc-menu-button`'s, `rc-select`'s, and `rc-combobox`'s popup/listbox now fade
|
|
35
|
+
in and out through CSS alone, using `@starting-style` and a discrete
|
|
36
|
+
`display`/`overlay` transition, driven by new `--rc-menu-button-popup-duration`,
|
|
37
|
+
`--rc-select-listbox-duration`, and `--rc-combobox-listbox-duration`
|
|
38
|
+
properties. `showPopover()`/`hidePopover()` (via `openPopup()`/`closePopup()`)
|
|
39
|
+
stay synchronous, and nothing waits on the transition finishing.
|
|
40
|
+
|
|
41
|
+
These animate opacity only, not a scale or slide transform: all three
|
|
42
|
+
position their popup with the shared `AnchorController`, which applies its
|
|
43
|
+
own viewport-clamping `translate` and reads `getBoundingClientRect()` to
|
|
44
|
+
compute the next correction. A second, CSS-driven transform on the same
|
|
45
|
+
element and property would fight that positioning math on every open, not
|
|
46
|
+
only during an edge case.
|
|
47
|
+
|
|
48
|
+
`rc-fab-menu` already had a scale-based entrance for its popup (verified safe
|
|
49
|
+
here: unlike the general `AnchorController` case, this popup isn't
|
|
50
|
+
collision-clamped), but no exit animation at all and no directional easing.
|
|
51
|
+
Both are added: the popup now fades and scales back out on close, and enter
|
|
52
|
+
uses a decelerating curve while exit uses an accelerating one.
|
|
53
|
+
|
|
54
|
+
### Patch Changes
|
|
55
|
+
|
|
56
|
+
- 1179f24: Drop the `@oddbird/css-anchor-positioning` polyfill. Browsers without full
|
|
57
|
+
native anchor positioning now use `AnchorController`'s script positioning,
|
|
58
|
+
which applies the same placement and flip rules and re-positions when the page
|
|
59
|
+
scrolls or the viewport, anchor, or floating element resizes. Those browsers no
|
|
60
|
+
longer download the 41 kB polyfill the first time a popup opens.
|
|
61
|
+
- 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
|
|
62
|
+
and light-DOM structural styles through Lightning CSS, removing comments and
|
|
63
|
+
whitespace while keeping source maps that resolve to each template. Rendered
|
|
64
|
+
styles are unchanged.
|
|
65
|
+
|
|
66
|
+
`@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
|
|
67
|
+
string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
|
|
68
|
+
depend on `@rcarls/rc-common` for it.
|
|
69
|
+
|
|
70
|
+
- a6553ff: Batch layout sampling into a shared animation-frame read phase so mounting a
|
|
71
|
+
large component route no longer alternates forced layout reads with component
|
|
72
|
+
writes. Closed anchored popups now skip placement work until they open, while
|
|
73
|
+
scroller boundaries, carousel positioning, flow state, and opted-in initial
|
|
74
|
+
scroll observation settle before the next paint.
|
|
75
|
+
|
|
76
|
+
Add `RafScheduler.schedulePhased()`, live `AnchorController.disabled` getters,
|
|
77
|
+
and the `ScrollObserverController.initialEvaluation` timing option.
|
|
78
|
+
|
|
79
|
+
- f1ca82d: Add an anchored, non-modal popover package with a Material rich-tooltip recipe. Share native Popover API visibility and fallback behavior across existing popup components.
|
|
80
|
+
- f0f7511: Document `orientation` as the layout the trigger sits in, with the opening
|
|
81
|
+
keys for each writing mode and direction, and the `inline-end-start` default
|
|
82
|
+
placement under vertical orientation. List the
|
|
83
|
+
`--rc-menu-button-popup-duration` custom property in the README.
|
|
84
|
+
- c5b6f15: Read a plain `[role="menubar"]` parent's `aria-orientation` as the
|
|
85
|
+
orientation it renders, not its layout, so a menu button in a menubar row
|
|
86
|
+
in vertical text opens with the right arrow key.
|
|
87
|
+
- Updated dependencies [e3dfa59]
|
|
88
|
+
- Updated dependencies [50d5610]
|
|
89
|
+
- Updated dependencies [9ee769c]
|
|
90
|
+
- Updated dependencies [1179f24]
|
|
91
|
+
- Updated dependencies [595fe37]
|
|
92
|
+
- Updated dependencies [38cd00c]
|
|
93
|
+
- Updated dependencies [5c006de]
|
|
94
|
+
- Updated dependencies [a6553ff]
|
|
95
|
+
- Updated dependencies [2205478]
|
|
96
|
+
- Updated dependencies [4341311]
|
|
97
|
+
- Updated dependencies [899bb5e]
|
|
98
|
+
- Updated dependencies [25fcfe0]
|
|
99
|
+
- Updated dependencies [51f6403]
|
|
100
|
+
- Updated dependencies [9caca6b]
|
|
101
|
+
- Updated dependencies [b764a3c]
|
|
102
|
+
- Updated dependencies [54d9ead]
|
|
103
|
+
- Updated dependencies [b9175e9]
|
|
104
|
+
- Updated dependencies [c8b762b]
|
|
105
|
+
- Updated dependencies [55e1e7f]
|
|
106
|
+
- Updated dependencies [f1ca82d]
|
|
107
|
+
- Updated dependencies [687a9be]
|
|
108
|
+
- Updated dependencies [b87f27b]
|
|
109
|
+
- Updated dependencies [32ebead]
|
|
110
|
+
- Updated dependencies [bfefedd]
|
|
111
|
+
- Updated dependencies [c130173]
|
|
112
|
+
- Updated dependencies [11680b6]
|
|
113
|
+
- Updated dependencies [223d36c]
|
|
114
|
+
- Updated dependencies [7b91a44]
|
|
115
|
+
- Updated dependencies [aa04ead]
|
|
116
|
+
- Updated dependencies [ac65b5b]
|
|
117
|
+
- Updated dependencies [6d126fd]
|
|
118
|
+
- Updated dependencies [afcfef8]
|
|
119
|
+
- Updated dependencies [11ef1ad]
|
|
120
|
+
- @rcarls/rc-common@0.7.0
|
|
121
|
+
- @rcarls/rc-menu@0.7.0
|
|
122
|
+
|
|
123
|
+
## 0.6.0
|
|
124
|
+
|
|
125
|
+
### Minor Changes
|
|
126
|
+
|
|
127
|
+
- 30eb232: Add icon-only activation-area sizing and Material icon-button variants. Align menu
|
|
128
|
+
selection and submenu affordances, and keep anchored popups within the viewport
|
|
129
|
+
across native and fallback positioning.
|
|
130
|
+
- 30eb232: Add `--rc-menu-button-touch-target-overlap-inline-start` and
|
|
131
|
+
`-inline-end` for an `icon-only` trigger, zero by default. A theme or
|
|
132
|
+
consumer sets one to let the accessible touch-target inflation on that
|
|
133
|
+
side overlap into whatever sits just outside the host, such as a toolbar's
|
|
134
|
+
own edge padding, instead of also reserving layout space there: the
|
|
135
|
+
visible trigger shifts flush with that edge while the invisible hit
|
|
136
|
+
region keeps its full accessible size. Mirrors `@rcarls/rc-button`'s own
|
|
137
|
+
touch-target overlap tokens.
|
|
138
|
+
|
|
139
|
+
### Patch Changes
|
|
140
|
+
|
|
141
|
+
- 7382c71: Add a priority-aware action toolbar that moves original controls into an
|
|
142
|
+
overflow menu. Which actions are promoted is a purely declarative computation
|
|
143
|
+
from `max-shown` and each action's `data-priority`/authored `slot`, with no
|
|
144
|
+
runtime measurement of the toolbar's or its children's rendered size: a
|
|
145
|
+
consumer whose promoted count needs to react to available space owns that
|
|
146
|
+
decision and writes the resulting `max-shown` value down. Include controlled
|
|
147
|
+
and uncontrolled open state, keyboard navigation, light dismissal, and a
|
|
148
|
+
non-Popover fallback.
|
|
149
|
+
|
|
150
|
+
Fix `--rc-adaptive-menu-touch-target-overlap-inline-start`/`-end`: the host's
|
|
151
|
+
own `max-inline-size: 100%` self-referenced a shrink-to-fit ancestor's
|
|
152
|
+
already-margin-reduced auto size (an app bar's own trailing group, for
|
|
153
|
+
example), quietly clamping the host back down and canceling the overlap out
|
|
154
|
+
from under it. The cap now grows by the overlap amount so it only ever bounds
|
|
155
|
+
the host's real content.
|
|
156
|
+
|
|
157
|
+
- 57370e4: Align component metadata, aggregate framework typings, development-time native-child
|
|
158
|
+
validation, controlled menu state, package declarations, and public documentation before the
|
|
159
|
+
next release.
|
|
160
|
+
- Updated dependencies [7382c71]
|
|
161
|
+
- Updated dependencies [6683eb9]
|
|
162
|
+
- Updated dependencies [ee7ba6c]
|
|
163
|
+
- Updated dependencies [30eb232]
|
|
164
|
+
- @rcarls/rc-menu@0.6.0
|
|
165
|
+
- @rcarls/rc-common@0.6.0
|
|
166
|
+
|
|
3
167
|
## 0.5.0
|
|
4
168
|
|
|
5
169
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -18,8 +18,8 @@ npm install @rcarls/rc-menu-button
|
|
|
18
18
|
## Import
|
|
19
19
|
|
|
20
20
|
```js
|
|
21
|
-
import '@rcarls/rc-menu-button/define';
|
|
22
|
-
import { RCMenuButton } from '@rcarls/rc-menu-button';
|
|
21
|
+
import '@rcarls/rc-menu-button/define'; // side-effect: registers <rc-menu-button>
|
|
22
|
+
import { RCMenuButton } from '@rcarls/rc-menu-button'; // named class export
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
`rc-menu-button` depends on `rc-menu`. Ensure both are installed.
|
|
@@ -53,56 +53,63 @@ item.
|
|
|
53
53
|
|
|
54
54
|
### Properties / attributes
|
|
55
55
|
|
|
56
|
-
| Property
|
|
57
|
-
|
|
58
|
-
| `open`
|
|
59
|
-
| `defaultOpen` | `default-open` | `boolean`
|
|
60
|
-
| `orientation` | `orientation`
|
|
61
|
-
| `placement`
|
|
56
|
+
| Property | Attribute | Type | Default | Description |
|
|
57
|
+
| ------------- | -------------- | ----------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
58
|
+
| `open` | `open` | `boolean` | `false` | Whether the menu popup is visible. Reflects to attribute. Controlled mode: host writes silently. |
|
|
59
|
+
| `defaultOpen` | `default-open` | `boolean` | `false` | Initial open state for uncontrolled mode. Ignored after the first controlled write to `open`. |
|
|
60
|
+
| `orientation` | `orientation` | `'horizontal' \| 'vertical' \| undefined` | `undefined` | The layout the trigger sits in: `horizontal` along the inline axis, `vertical` along the block axis. Picks the arrow key that opens the menu, following how the layout renders in RTL and vertical text. Vertical triggers span their allocated menu-row width. When unset, inherited from a parent `rc-menubar` or `[role="menubar"]` element. Falls back to `'horizontal'`. |
|
|
61
|
+
| `placement` | `placement` | `AnchorPlacement` | `'block-end-start'` | Preferred placement of the popup relative to the trigger, in logical terms: `block-start*`/`block-end*` (above or below in horizontal text, beside the trigger in vertical text) or `inline-start*`/`inline-end*` (beside it along the reading direction), with an optional `-start`/`-end` edge alignment. When unset, switches to `'inline-end-start'` under vertical orientation. |
|
|
62
|
+
| | `icon-only` | boolean attribute | absent | Hints that the trigger has no visible label so themes can apply icon-button sizing and activation-area geometry. |
|
|
62
63
|
|
|
63
64
|
### CSS custom properties
|
|
64
65
|
|
|
65
|
-
| Property
|
|
66
|
-
|
|
67
|
-
| `--rc-menu-button-trigger-block-size`
|
|
68
|
-
| `--rc-menu-button-trigger-padding-block`
|
|
69
|
-
| `--rc-menu-button-trigger-padding-inline`
|
|
70
|
-
| `--rc-menu-button-trigger-gap`
|
|
71
|
-
| `--rc-menu-button-trigger-border`
|
|
72
|
-
| `--rc-menu-button-trigger-radius`
|
|
73
|
-
| `--rc-menu-button-trigger-background`
|
|
74
|
-
| `--rc-menu-button-trigger-color`
|
|
75
|
-
| `--rc-menu-button-trigger-transition`
|
|
76
|
-
| `--rc-menu-button-trigger-hover-background`
|
|
77
|
-
| `--rc-menu-button-trigger-hover-color`
|
|
78
|
-
| `--rc-menu-button-trigger-hover-border-color`
|
|
79
|
-
| `--rc-menu-button-trigger-open-background`
|
|
80
|
-
| `--rc-menu-button-trigger-open-color`
|
|
81
|
-
| `--rc-menu-button-trigger-open-border-color`
|
|
82
|
-
| `--rc-menu-button-indicator-size`
|
|
83
|
-
| `--rc-menu-button-indicator-color`
|
|
84
|
-
| `--rc-menu-button-indicator-inset`
|
|
66
|
+
| Property | Default | Description |
|
|
67
|
+
| ---------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
|
|
68
|
+
| `--rc-menu-button-trigger-block-size` | `var(--rc-control-block-size)` | Minimum block size of the trigger |
|
|
69
|
+
| `--rc-menu-button-trigger-padding-block` | `var(--rc-control-padding-block)` | Trigger block-axis padding |
|
|
70
|
+
| `--rc-menu-button-trigger-padding-inline` | `var(--rc-control-padding-inline)` | Trigger inline-axis padding |
|
|
71
|
+
| `--rc-menu-button-trigger-gap` | `var(--rc-item-gap)` | Gap between flex children inside the trigger |
|
|
72
|
+
| `--rc-menu-button-trigger-border` | `var(--rc-border)` | Trigger border |
|
|
73
|
+
| `--rc-menu-button-trigger-radius` | `var(--rc-control-radius)` | Trigger border radius |
|
|
74
|
+
| `--rc-menu-button-trigger-background` | `var(--rc-button-bg)` | Trigger background |
|
|
75
|
+
| `--rc-menu-button-trigger-color` | `var(--rc-button-text)` | Trigger text color |
|
|
76
|
+
| `--rc-menu-button-trigger-transition` | `none` | Trigger state transition |
|
|
77
|
+
| `--rc-menu-button-trigger-hover-background` | `color-mix(in srgb, Highlight 8%, transparent)` | Trigger hover background |
|
|
78
|
+
| `--rc-menu-button-trigger-hover-color` | `inherit` | Trigger hover text color |
|
|
79
|
+
| `--rc-menu-button-trigger-hover-border-color` | `currentColor` | Trigger hover border color |
|
|
80
|
+
| `--rc-menu-button-trigger-open-background` | `color-mix(in srgb, Highlight 12%, transparent)` | Trigger background while the menu is open |
|
|
81
|
+
| `--rc-menu-button-trigger-open-color` | `inherit` | Trigger text color while the menu is open |
|
|
82
|
+
| `--rc-menu-button-trigger-open-border-color` | `currentColor` | Trigger border color while the menu is open |
|
|
83
|
+
| `--rc-menu-button-indicator-size` | `1em` | Inline and block size reserved for the optional indicator |
|
|
84
|
+
| `--rc-menu-button-indicator-color` | `currentColor` | Color of the optional indicator |
|
|
85
|
+
| `--rc-menu-button-indicator-inset` | Trigger inline padding | Indicator distance from the trigger's inline end |
|
|
86
|
+
| `--rc-menu-button-icon-size` | Trigger block size | Visible inline size of an `icon-only` trigger |
|
|
87
|
+
| `--rc-menu-button-touch-target-block-size` | `3rem` | Minimum block size of an `icon-only` trigger's activation area |
|
|
88
|
+
| `--rc-menu-button-touch-target-inline-size` | Activation-area block size | Minimum inline size of an `icon-only` trigger's activation area |
|
|
89
|
+
| `--rc-menu-button-touch-target-overlap-inline-start` | `0px` | Allows touch-target inflation to overlap the leading neighbor |
|
|
90
|
+
| `--rc-menu-button-touch-target-overlap-inline-end` | `0px` | Allows touch-target inflation to overlap the trailing neighbor |
|
|
91
|
+
| `--rc-menu-button-popup-duration` | `150ms` | Popup open/close fade transition duration |
|
|
85
92
|
|
|
86
93
|
### CSS parts
|
|
87
94
|
|
|
88
|
-
| Part
|
|
89
|
-
|
|
90
|
-
| `root`
|
|
95
|
+
| Part | Element | Description |
|
|
96
|
+
| ------- | ----------- | ------------------------------------------------------- |
|
|
97
|
+
| `root` | Outer `div` | Root wrapper |
|
|
91
98
|
| `popup` | Popup `div` | Container that shows/hides around the slotted `rc-menu` |
|
|
92
99
|
|
|
93
100
|
### Slots
|
|
94
101
|
|
|
95
|
-
| Slot
|
|
96
|
-
|
|
97
|
-
| `trigger`
|
|
102
|
+
| Slot | Description |
|
|
103
|
+
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
104
|
+
| `trigger` | The button (or other interactive element) that toggles the menu. Receives `aria-haspopup` and `aria-expanded` automatically. |
|
|
98
105
|
| `indicator` | Optional author-supplied decorative submenu indicator. Rendered at the trigger's inline end with pointer events passed through to the trigger. |
|
|
99
|
-
|
|
|
106
|
+
| _(default)_ | The `rc-menu` to show as the popup. |
|
|
100
107
|
|
|
101
108
|
### Events
|
|
102
109
|
|
|
103
|
-
| Event
|
|
104
|
-
|
|
105
|
-
| `rc-menu-button-toggle` | Yes (composed) | No
|
|
110
|
+
| Event | Bubbles | Cancelable | Detail | When |
|
|
111
|
+
| ----------------------- | -------------- | ---------- | ------------------- | -------------------- |
|
|
112
|
+
| `rc-menu-button-toggle` | Yes (composed) | No | `{ open: boolean }` | Menu opens or closes |
|
|
106
113
|
|
|
107
114
|
### Public methods
|
|
108
115
|
|
|
@@ -122,27 +129,34 @@ toggleMenu(): void
|
|
|
122
129
|
## Keyboard behavior
|
|
123
130
|
|
|
124
131
|
Keyboard handling depends on the resolved `orientation` (horizontal by
|
|
125
|
-
default, or inherited from a parent menubar).
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
|
130
|
-
|
|
|
131
|
-
| `
|
|
132
|
-
| `
|
|
133
|
-
|
|
|
134
|
-
|
|
|
135
|
-
|
|
|
132
|
+
default, or inherited from a parent menubar) and on how that layout renders.
|
|
133
|
+
The opening keys turn with RTL and vertical writing modes:
|
|
134
|
+
|
|
135
|
+
| Layout | Flow | Open, focus first item | Open, focus last item |
|
|
136
|
+
| ---------- | -------------------- | ---------------------- | --------------------- |
|
|
137
|
+
| Horizontal | Horizontal text | `ArrowDown` | `ArrowUp` |
|
|
138
|
+
| Horizontal | `vertical-rl` | `ArrowLeft` | `ArrowRight` |
|
|
139
|
+
| Horizontal | `vertical-lr` | `ArrowRight` | `ArrowLeft` |
|
|
140
|
+
| Vertical | Horizontal text, LTR | `ArrowRight` | `ArrowLeft` |
|
|
141
|
+
| Vertical | Horizontal text, RTL | `ArrowLeft` | `ArrowRight` |
|
|
142
|
+
| Vertical | Vertical text, LTR | `ArrowDown` | `ArrowUp` |
|
|
143
|
+
| Vertical | Vertical text, RTL | `ArrowUp` | `ArrowDown` |
|
|
144
|
+
|
|
145
|
+
| Key | Condition | Action |
|
|
146
|
+
| ----------------- | ----------- | ----------------------------------- |
|
|
147
|
+
| `Enter` / `Space` | Menu closed | Open menu |
|
|
148
|
+
| `Enter` / `Space` | Menu open | Activate focused item, close menu |
|
|
149
|
+
| `Escape` | Menu open | Close menu, return focus to trigger |
|
|
136
150
|
|
|
137
151
|
---
|
|
138
152
|
|
|
139
153
|
## ARIA
|
|
140
154
|
|
|
141
|
-
| Attribute
|
|
142
|
-
|
|
143
|
-
| `aria-haspopup="menu"` | Trigger element | Set automatically on slot change
|
|
144
|
-
| `aria-expanded`
|
|
145
|
-
| `open`
|
|
155
|
+
| Attribute | Where | Value |
|
|
156
|
+
| ---------------------- | --------------- | ---------------------------------------------- |
|
|
157
|
+
| `aria-haspopup="menu"` | Trigger element | Set automatically on slot change |
|
|
158
|
+
| `aria-expanded` | Trigger element | `"true"` / `"false"`, kept in sync with `open` |
|
|
159
|
+
| `open` | Host element | Reflected boolean attribute when menu is open |
|
|
146
160
|
|
|
147
161
|
---
|
|
148
162
|
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"name": "*",
|
|
36
36
|
"declaration": {
|
|
37
37
|
"name": "*",
|
|
38
|
-
"module": "src/rc-menu-button"
|
|
38
|
+
"module": "src/rc-menu-button.js"
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
]
|
|
@@ -137,6 +137,34 @@
|
|
|
137
137
|
"description": "Indicator distance from the trigger's inline end",
|
|
138
138
|
"name": "--rc-menu-button-indicator-inset",
|
|
139
139
|
"default": "var(--rc-menu-button-trigger-padding-inline)"
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"description": "Inline size of an `icon-only` trigger's visible box. Square by default (equal to `--rc-menu-button-trigger-block-size`); set narrower or wider to change only the trigger's width, independent of its height.",
|
|
143
|
+
"name": "--rc-menu-button-icon-size"
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"description": "Minimum accessible touch target block size for an `icon-only` trigger. A floor, not a fixed size: has no effect once `--rc-menu-button-trigger-block-size` already meets or exceeds it. Grows the shadow-DOM trigger wrapper (reserving layout space) and the light-DOM hit-slop (the actual larger clickable region) together; the visible trigger itself stays at its own size, centered.",
|
|
147
|
+
"name": "--rc-menu-button-touch-target-block-size",
|
|
148
|
+
"default": "3rem"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"description": "Minimum accessible touch target inline size for an `icon-only` trigger. Defers to `--rc-menu-button-touch-target-block-size` when unset.",
|
|
152
|
+
"name": "--rc-menu-button-touch-target-inline-size"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"description": "Zero by default. A theme or consumer sets this on an `icon-only` trigger that sits at a real leading edge (no neighbor on that side) to let its touch-target inflation overlap into whatever sits just outside the host, such as a container's own edge padding, instead of also reserving layout space there.",
|
|
156
|
+
"name": "--rc-menu-button-touch-target-overlap-inline-start",
|
|
157
|
+
"default": "0px"
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
"description": "The trailing-edge counterpart to `--rc-menu-button-touch-target-overlap-inline-start`.",
|
|
161
|
+
"name": "--rc-menu-button-touch-target-overlap-inline-end",
|
|
162
|
+
"default": "0px"
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"description": "Popup open/close fade transition duration.",
|
|
166
|
+
"name": "--rc-menu-button-popup-duration",
|
|
167
|
+
"default": "150ms"
|
|
140
168
|
}
|
|
141
169
|
],
|
|
142
170
|
"cssParts": [
|
|
@@ -174,6 +202,33 @@
|
|
|
174
202
|
"default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }",
|
|
175
203
|
"description": "Enables delegatesFocus so the browser routes focus() on the host element\nto the slotted trigger button."
|
|
176
204
|
},
|
|
205
|
+
{
|
|
206
|
+
"kind": "field",
|
|
207
|
+
"name": "_styledRoots",
|
|
208
|
+
"privacy": "protected",
|
|
209
|
+
"static": true,
|
|
210
|
+
"readonly": true,
|
|
211
|
+
"default": "new Set<Document | ShadowRoot>()"
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
"kind": "method",
|
|
215
|
+
"name": "_ensureBaseStyles",
|
|
216
|
+
"privacy": "protected",
|
|
217
|
+
"static": true,
|
|
218
|
+
"return": {
|
|
219
|
+
"type": {
|
|
220
|
+
"text": "void"
|
|
221
|
+
}
|
|
222
|
+
},
|
|
223
|
+
"parameters": [
|
|
224
|
+
{
|
|
225
|
+
"name": "root",
|
|
226
|
+
"type": {
|
|
227
|
+
"text": "Document | ShadowRoot"
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
]
|
|
231
|
+
},
|
|
177
232
|
{
|
|
178
233
|
"kind": "field",
|
|
179
234
|
"name": "_defaultOpen",
|
|
@@ -187,10 +242,17 @@
|
|
|
187
242
|
"kind": "field",
|
|
188
243
|
"name": "_open",
|
|
189
244
|
"type": {
|
|
190
|
-
"text": "boolean"
|
|
245
|
+
"text": "boolean | undefined"
|
|
191
246
|
},
|
|
192
|
-
"privacy": "private"
|
|
193
|
-
|
|
247
|
+
"privacy": "private"
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
"kind": "field",
|
|
251
|
+
"name": "_uncontrolledOpen",
|
|
252
|
+
"type": {
|
|
253
|
+
"text": "boolean | undefined"
|
|
254
|
+
},
|
|
255
|
+
"privacy": "private"
|
|
194
256
|
},
|
|
195
257
|
{
|
|
196
258
|
"kind": "field",
|
|
@@ -226,21 +288,39 @@
|
|
|
226
288
|
"type": {
|
|
227
289
|
"text": "'horizontal' | 'vertical' | undefined"
|
|
228
290
|
},
|
|
229
|
-
"description": "
|
|
291
|
+
"description": "The layout this menu button sits in, which picks the arrow keys that open\nand close the menu. `horizontal` runs along the inline axis and `vertical`\nalong the block axis; the keys follow how that layout renders.\n\nIf not set, inherits from a parent rc-menubar or element with role=\"menubar\".",
|
|
230
292
|
"attribute": "orientation",
|
|
231
293
|
"reflects": true
|
|
232
294
|
},
|
|
295
|
+
{
|
|
296
|
+
"kind": "field",
|
|
297
|
+
"name": "_placement",
|
|
298
|
+
"type": {
|
|
299
|
+
"text": "AnchorPlacement | undefined"
|
|
300
|
+
},
|
|
301
|
+
"privacy": "private"
|
|
302
|
+
},
|
|
233
303
|
{
|
|
234
304
|
"kind": "field",
|
|
235
305
|
"name": "placement",
|
|
236
306
|
"type": {
|
|
237
307
|
"text": "AnchorPlacement"
|
|
238
308
|
},
|
|
239
|
-
"
|
|
240
|
-
"
|
|
309
|
+
"description": "Preferred placement of the popup relative to the trigger button. Reads the\ndefault until the author sets one.",
|
|
310
|
+
"default": "'block-end-start'",
|
|
241
311
|
"attribute": "placement",
|
|
242
312
|
"reflects": true
|
|
243
313
|
},
|
|
314
|
+
{
|
|
315
|
+
"kind": "field",
|
|
316
|
+
"name": "_defaultPlacement",
|
|
317
|
+
"type": {
|
|
318
|
+
"text": "AnchorPlacement"
|
|
319
|
+
},
|
|
320
|
+
"privacy": "protected",
|
|
321
|
+
"description": "The placement used when the author sets none. Subclasses override it.",
|
|
322
|
+
"readonly": true
|
|
323
|
+
},
|
|
244
324
|
{
|
|
245
325
|
"kind": "field",
|
|
246
326
|
"name": "_effectivePlacement",
|
|
@@ -248,7 +328,7 @@
|
|
|
248
328
|
"text": "AnchorPlacement"
|
|
249
329
|
},
|
|
250
330
|
"privacy": "protected",
|
|
251
|
-
"description": "Popup placement adjusted for orientation.\n\
|
|
331
|
+
"description": "Popup placement adjusted for orientation.\n\nWithout an author placement, a menu button whose resolved orientation is\n`vertical` opens at `inline-end-start`, so vertical menubars open\nsubmenus to the side, toward the inline end.",
|
|
252
332
|
"readonly": true
|
|
253
333
|
},
|
|
254
334
|
{
|
|
@@ -301,9 +381,15 @@
|
|
|
301
381
|
"kind": "field",
|
|
302
382
|
"name": "_anchorCtrl",
|
|
303
383
|
"privacy": "protected",
|
|
304
|
-
"default": "new AnchorController(this, { anchor: () => this._$root ?? null, floating: () => this._$popup ?? null, shadowHost: () => this, placement: '
|
|
384
|
+
"default": "new AnchorController(this, { anchor: () => this._$root ?? null, floating: () => this._$popup ?? null, shadowHost: () => this, placement: 'block-end-start', offset: 2, disabled: () => !this.open, })",
|
|
305
385
|
"description": "Positions the popup relative to the trigger using CSS anchor positioning."
|
|
306
386
|
},
|
|
387
|
+
{
|
|
388
|
+
"kind": "field",
|
|
389
|
+
"name": "_popoverCtrl",
|
|
390
|
+
"privacy": "protected",
|
|
391
|
+
"default": "new PopoverController(this, { element: () => this._$popup })"
|
|
392
|
+
},
|
|
307
393
|
{
|
|
308
394
|
"kind": "field",
|
|
309
395
|
"name": "_boundHandleDocumentClick",
|
|
@@ -355,7 +441,13 @@
|
|
|
355
441
|
"kind": "method",
|
|
356
442
|
"name": "_dispatchToggle",
|
|
357
443
|
"privacy": "protected",
|
|
358
|
-
"
|
|
444
|
+
"parameters": [
|
|
445
|
+
{
|
|
446
|
+
"name": "open",
|
|
447
|
+
"default": "this.open"
|
|
448
|
+
}
|
|
449
|
+
],
|
|
450
|
+
"description": "Dispatches the `rc-menu-button-toggle` bubbling composed event with the requested open state."
|
|
359
451
|
},
|
|
360
452
|
{
|
|
361
453
|
"kind": "method",
|
|
@@ -528,7 +620,7 @@
|
|
|
528
620
|
"fieldName": "defaultOpen"
|
|
529
621
|
},
|
|
530
622
|
{
|
|
531
|
-
"description": "
|
|
623
|
+
"description": "The layout this menu button sits in, which picks the arrow keys that open\nand close the menu. `horizontal` runs along the inline axis and `vertical`\nalong the block axis; the keys follow how that layout renders.\n\nIf not set, inherits from a parent rc-menubar or element with role=\"menubar\".",
|
|
532
624
|
"name": "orientation",
|
|
533
625
|
"type": {
|
|
534
626
|
"text": "'horizontal' | 'vertical' | undefined"
|
|
@@ -536,13 +628,17 @@
|
|
|
536
628
|
"fieldName": "orientation"
|
|
537
629
|
},
|
|
538
630
|
{
|
|
539
|
-
"description": "Preferred placement of the popup relative to the trigger button.",
|
|
631
|
+
"description": "Preferred placement of the popup relative to the trigger button. Reads the\ndefault until the author sets one.",
|
|
540
632
|
"name": "placement",
|
|
541
633
|
"type": {
|
|
542
634
|
"text": "AnchorPlacement"
|
|
543
635
|
},
|
|
544
|
-
"default": "'
|
|
636
|
+
"default": "'block-end-start'",
|
|
545
637
|
"fieldName": "placement"
|
|
638
|
+
},
|
|
639
|
+
{
|
|
640
|
+
"description": "Hints that the slotted trigger has no visible label, so themes can size it and its touch target as an icon button (see `--rc-menu-button-icon-size` and `--rc-menu-button-touch-target-*` above). Purely a styling hook; RCMenuButton does not read or derive it — set it whenever the trigger is rendered icon-only.",
|
|
641
|
+
"name": "icon-only"
|
|
546
642
|
}
|
|
547
643
|
],
|
|
548
644
|
"superclass": {
|