@rcarls/rc-menu 0.2.0 → 0.3.1
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/README.md +3 -1
- package/dist/custom-elements.json +265 -53
- package/dist/rc-menu-Drg26iOK.js +323 -0
- package/dist/rc-menu-Drg26iOK.js.map +1 -0
- package/dist/rc-menu-define.js +1 -1
- package/dist/rc-menu.js +1 -1
- package/dist/types/packages/rc-menu/src/rc-menu.d.ts +122 -0
- package/package.json +10 -13
- package/dist/demo.css +0 -85
- package/dist/demo.js +0 -40
- package/dist/rc-menu-Bd1Ytmx9.js +0 -187
- package/dist/rc-menu-Bd1Ytmx9.js.map +0 -1
- package/dist/types/rc-menu.d.ts +0 -56
- /package/dist/types/{define.d.ts → packages/rc-menu/src/define.d.ts} +0 -0
- /package/dist/types/{index.d.ts → packages/rc-menu/src/index.d.ts} +0 -0
- /package/dist/types/{rc-menu.styles.d.ts → packages/rc-menu/src/rc-menu.styles.d.ts} +0 -0
- /package/dist/types/{rc-menu.test.d.ts → packages/rc-menu/src/rc-menu.test.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# `@rcarls/rc-menu`
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Menu popup for command surfaces with keyboard navigation and typed activation events, following the [WAI-ARIA Menu pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu/).
|
|
4
|
+
|
|
5
|
+
Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-menu](https://richardcarls.github.io/rc-webcomponents/components/rc-menu).
|
|
4
6
|
|
|
5
7
|
---
|
|
6
8
|
|
|
@@ -46,93 +46,188 @@
|
|
|
46
46
|
"declarations": [
|
|
47
47
|
{
|
|
48
48
|
"kind": "class",
|
|
49
|
-
"description": "
|
|
49
|
+
"description": "Menu popup for command surfaces with keyboard navigation and typed activation events,\nfollowing the WAI-ARIA Menu pattern.",
|
|
50
50
|
"name": "RCMenu",
|
|
51
51
|
"cssProperties": [
|
|
52
52
|
{
|
|
53
|
-
"description": "Minimum width of the menu panel",
|
|
53
|
+
"description": "Minimum width of the menu panel.",
|
|
54
54
|
"name": "--rc-menu-min-width",
|
|
55
55
|
"default": "10em"
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"description": "Block (top/bottom) padding inside the panel",
|
|
58
|
+
"description": "Block (top/bottom) padding inside the panel.",
|
|
59
59
|
"name": "--rc-menu-padding-block",
|
|
60
60
|
"default": "0.25em"
|
|
61
61
|
},
|
|
62
62
|
{
|
|
63
|
-
"description": "Background color; falls back through --rc-surface",
|
|
63
|
+
"description": "Background color; falls back through --rc-surface.",
|
|
64
64
|
"name": "--rc-menu-background",
|
|
65
65
|
"default": "Canvas"
|
|
66
66
|
},
|
|
67
67
|
{
|
|
68
|
-
"description": "Border; falls back through --rc-border",
|
|
68
|
+
"description": "Border; falls back through --rc-border.",
|
|
69
69
|
"name": "--rc-menu-border",
|
|
70
70
|
"default": "1px solid ButtonBorder"
|
|
71
71
|
},
|
|
72
72
|
{
|
|
73
|
-
"description": "Menu panel border radius",
|
|
73
|
+
"description": "Menu panel border radius.",
|
|
74
74
|
"name": "--rc-menu-radius",
|
|
75
75
|
"default": "var(--rc-control-radius)"
|
|
76
76
|
},
|
|
77
77
|
{
|
|
78
|
-
"description": "Box shadow; falls back through --rc-shadow",
|
|
78
|
+
"description": "Box shadow; falls back through --rc-shadow.",
|
|
79
79
|
"name": "--rc-menu-shadow",
|
|
80
80
|
"default": "0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)"
|
|
81
81
|
},
|
|
82
82
|
{
|
|
83
|
-
"description": "
|
|
83
|
+
"description": "Minimum block size for menu item rows.",
|
|
84
|
+
"name": "--rc-menu-item-min-block-size",
|
|
85
|
+
"default": "0"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"description": "Menu item block-axis padding.",
|
|
84
89
|
"name": "--rc-menu-item-padding-block",
|
|
85
90
|
"default": "var(--rc-item-padding-block)"
|
|
86
91
|
},
|
|
87
92
|
{
|
|
88
|
-
"description": "Menu item inline-axis padding",
|
|
93
|
+
"description": "Menu item inline-axis padding.",
|
|
89
94
|
"name": "--rc-menu-item-padding-inline",
|
|
90
95
|
"default": "var(--rc-item-padding-inline)"
|
|
91
96
|
},
|
|
92
97
|
{
|
|
93
|
-
"description": "Gap between
|
|
98
|
+
"description": "Gap between flex children inside each item.",
|
|
94
99
|
"name": "--rc-menu-item-gap",
|
|
95
100
|
"default": "var(--rc-item-gap)"
|
|
96
101
|
},
|
|
97
102
|
{
|
|
98
|
-
"description": "
|
|
99
|
-
"name": "--rc-menu-
|
|
100
|
-
|
|
103
|
+
"description": "CSS transition applied to each item row.",
|
|
104
|
+
"name": "--rc-menu-item-transition"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"description": "Pointer-hover background.",
|
|
108
|
+
"name": "--rc-menu-hover-bg",
|
|
109
|
+
"default": "color-mix(in srgb, Highlight 8%, transparent)"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"description": "Pointer-hover text color.",
|
|
113
|
+
"name": "--rc-menu-hover-color",
|
|
114
|
+
"default": "inherit"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"description": "Virtual-cursor active background.",
|
|
118
|
+
"name": "--rc-menu-active-bg",
|
|
119
|
+
"default": "color-mix(in srgb, Highlight 8%, transparent)"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"description": "Virtual-cursor active text color.",
|
|
123
|
+
"name": "--rc-menu-active-color",
|
|
124
|
+
"default": "inherit"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"description": "Width of the leading indicator column for checkbox/radio items.",
|
|
128
|
+
"name": "--rc-menu-check-size",
|
|
129
|
+
"default": "1.25em"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"description": "Color of the check/radio symbol.",
|
|
133
|
+
"name": "--rc-menu-check-color",
|
|
134
|
+
"default": "inherit"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"description": "Font size of `[data-menu-shortcut]` labels.",
|
|
138
|
+
"name": "--rc-menu-shortcut-size",
|
|
139
|
+
"default": "0.8em"
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"description": "Text color of `[data-menu-shortcut]` labels.",
|
|
143
|
+
"name": "--rc-menu-shortcut-color",
|
|
144
|
+
"default": "GrayText"
|
|
101
145
|
},
|
|
102
146
|
{
|
|
103
|
-
"description": "
|
|
147
|
+
"description": "Text content for submenu indicators.",
|
|
148
|
+
"name": "--rc-menu-submenu-indicator-content",
|
|
149
|
+
"default": "'›'"
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"description": "Font size of submenu indicators.",
|
|
153
|
+
"name": "--rc-menu-submenu-indicator-size",
|
|
154
|
+
"default": "1em"
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
"description": "Text color of submenu indicators.",
|
|
158
|
+
"name": "--rc-menu-submenu-indicator-color",
|
|
159
|
+
"default": "currentColor"
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"description": "Disabled menu item text color.",
|
|
104
163
|
"name": "--rc-menu-disabled-color",
|
|
105
164
|
"default": "GrayText"
|
|
106
165
|
},
|
|
107
166
|
{
|
|
108
|
-
"description": "Disabled menu item opacity",
|
|
167
|
+
"description": "Disabled menu item opacity.",
|
|
109
168
|
"name": "--rc-menu-disabled-opacity",
|
|
110
169
|
"default": "var(--rc-disabled-opacity)"
|
|
111
170
|
},
|
|
112
171
|
{
|
|
113
|
-
"description": "Separator border",
|
|
172
|
+
"description": "Separator border.",
|
|
114
173
|
"name": "--rc-menu-separator-border",
|
|
115
|
-
"default": "
|
|
174
|
+
"default": "1px solid ButtonBorder"
|
|
116
175
|
},
|
|
117
176
|
{
|
|
118
|
-
"description": "Separator block-axis margin",
|
|
177
|
+
"description": "Separator block-axis margin.",
|
|
119
178
|
"name": "--rc-menu-separator-margin-block",
|
|
120
179
|
"default": "var(--rc-control-gap)"
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"description": "Separator inline margin; set to match item padding for inset separators.",
|
|
183
|
+
"name": "--rc-menu-separator-margin-inline",
|
|
184
|
+
"default": "0px"
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
"description": "Block padding on `[data-group-label]` section headings.",
|
|
188
|
+
"name": "--rc-menu-group-label-padding-block",
|
|
189
|
+
"default": "0.1em"
|
|
190
|
+
},
|
|
124
191
|
{
|
|
125
|
-
"description": "
|
|
126
|
-
"name": "
|
|
192
|
+
"description": "Text color of `[data-group-label]` section headings.",
|
|
193
|
+
"name": "--rc-menu-group-label-color",
|
|
194
|
+
"default": "GrayText"
|
|
127
195
|
}
|
|
128
196
|
],
|
|
129
197
|
"slots": [
|
|
130
198
|
{
|
|
131
|
-
"description": "
|
|
132
|
-
"name": "
|
|
199
|
+
"description": "Menu items, groups, and separators. Supported content model: - Focusable elements (`<button>`, `<a>`, `[tabindex]`) become navigable `role=\"menuitem\"` entries. - `role=\"menuitemcheckbox\"` / `role=\"menuitemradio\"` elements get a leading indicator column via `::before`; `aria-checked` is initialized when missing and updated on activation. - `role=\"group\"` divs group related items; label them with `aria-label` or `aria-labelledby`. Optionally add a visible `[data-group-label]` element as first child of the group for section headings. - `role=\"separator\"` / `<hr>` produce horizontal dividers between sections. - Within any item, `[data-menu-shortcut]` elements are pushed to the inline-end edge for keyboard hints. - Items with `aria-haspopup=\"menu\"` or `aria-haspopup=\"true\"` get a trailing submenu indicator.",
|
|
200
|
+
"name": "default"
|
|
133
201
|
}
|
|
134
202
|
],
|
|
135
203
|
"members": [
|
|
204
|
+
{
|
|
205
|
+
"kind": "field",
|
|
206
|
+
"name": "_styledRoots",
|
|
207
|
+
"privacy": "private",
|
|
208
|
+
"static": true,
|
|
209
|
+
"readonly": true,
|
|
210
|
+
"default": "new Set<Document | ShadowRoot>()"
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
"kind": "method",
|
|
214
|
+
"name": "_ensureBaseStyles",
|
|
215
|
+
"privacy": "private",
|
|
216
|
+
"static": true,
|
|
217
|
+
"return": {
|
|
218
|
+
"type": {
|
|
219
|
+
"text": "void"
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
"parameters": [
|
|
223
|
+
{
|
|
224
|
+
"name": "root",
|
|
225
|
+
"type": {
|
|
226
|
+
"text": "Document | ShadowRoot"
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
]
|
|
230
|
+
},
|
|
136
231
|
{
|
|
137
232
|
"kind": "field",
|
|
138
233
|
"name": "label",
|
|
@@ -140,24 +235,128 @@
|
|
|
140
235
|
"text": "string"
|
|
141
236
|
},
|
|
142
237
|
"default": "''",
|
|
143
|
-
"description": "Accessible label for this menu.",
|
|
238
|
+
"description": "Accessible label for this menu. Synced to `aria-label` on the host.\n\nPrefer `aria-labelledby` for a visible label associated via ID.",
|
|
144
239
|
"attribute": "label"
|
|
145
240
|
},
|
|
146
241
|
{
|
|
147
242
|
"kind": "field",
|
|
148
|
-
"name": "
|
|
243
|
+
"name": "_menuItems",
|
|
149
244
|
"type": {
|
|
150
|
-
"text": "
|
|
245
|
+
"text": "Element[]"
|
|
151
246
|
},
|
|
152
|
-
"privacy": "protected"
|
|
247
|
+
"privacy": "protected",
|
|
248
|
+
"default": "[]"
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
"kind": "field",
|
|
252
|
+
"name": "_activeDescendantCtrl",
|
|
253
|
+
"privacy": "protected",
|
|
254
|
+
"readonly": true,
|
|
255
|
+
"default": "new ActiveDescendantController(this, { host: () => this, items: () => this._menuItems, })"
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
"kind": "field",
|
|
259
|
+
"name": "items",
|
|
260
|
+
"type": {
|
|
261
|
+
"text": "readonly Element[]"
|
|
262
|
+
},
|
|
263
|
+
"description": "All navigable menu item elements in document order.",
|
|
264
|
+
"readonly": true
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
"kind": "method",
|
|
268
|
+
"name": "focusFirst",
|
|
269
|
+
"return": {
|
|
270
|
+
"type": {
|
|
271
|
+
"text": "void"
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
"description": "Move the virtual cursor and DOM focus to the first navigable item."
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
"kind": "method",
|
|
278
|
+
"name": "focusLast",
|
|
279
|
+
"return": {
|
|
280
|
+
"type": {
|
|
281
|
+
"text": "void"
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
"description": "Move the virtual cursor and DOM focus to the last navigable item."
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
"kind": "method",
|
|
288
|
+
"name": "focusItem",
|
|
289
|
+
"return": {
|
|
290
|
+
"type": {
|
|
291
|
+
"text": "void"
|
|
292
|
+
}
|
|
293
|
+
},
|
|
294
|
+
"parameters": [
|
|
295
|
+
{
|
|
296
|
+
"name": "item",
|
|
297
|
+
"optional": true,
|
|
298
|
+
"type": {
|
|
299
|
+
"text": "Element | null"
|
|
300
|
+
},
|
|
301
|
+
"description": "The element to make active. No-op when null or undefined."
|
|
302
|
+
}
|
|
303
|
+
],
|
|
304
|
+
"description": "Move the virtual cursor to a specific item."
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
"kind": "method",
|
|
308
|
+
"name": "focusItemAt",
|
|
309
|
+
"return": {
|
|
310
|
+
"type": {
|
|
311
|
+
"text": "void"
|
|
312
|
+
}
|
|
313
|
+
},
|
|
314
|
+
"parameters": [
|
|
315
|
+
{
|
|
316
|
+
"name": "index",
|
|
317
|
+
"type": {
|
|
318
|
+
"text": "number"
|
|
319
|
+
},
|
|
320
|
+
"description": "Zero-based index into the navigable items array."
|
|
321
|
+
}
|
|
322
|
+
],
|
|
323
|
+
"description": "Move the virtual cursor to the item at `index`."
|
|
324
|
+
},
|
|
325
|
+
{
|
|
326
|
+
"kind": "method",
|
|
327
|
+
"name": "_syncAriaLabel",
|
|
328
|
+
"privacy": "protected",
|
|
329
|
+
"return": {
|
|
330
|
+
"type": {
|
|
331
|
+
"text": "void"
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
},
|
|
335
|
+
{
|
|
336
|
+
"kind": "method",
|
|
337
|
+
"name": "_onSlotChange",
|
|
338
|
+
"privacy": "protected",
|
|
339
|
+
"return": {
|
|
340
|
+
"type": {
|
|
341
|
+
"text": "void"
|
|
342
|
+
}
|
|
343
|
+
},
|
|
344
|
+
"parameters": [
|
|
345
|
+
{
|
|
346
|
+
"name": "e",
|
|
347
|
+
"type": {
|
|
348
|
+
"text": "Event"
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
]
|
|
153
352
|
},
|
|
154
353
|
{
|
|
155
354
|
"kind": "method",
|
|
156
|
-
"name": "
|
|
355
|
+
"name": "_collectMenuItems",
|
|
157
356
|
"privacy": "protected",
|
|
158
357
|
"return": {
|
|
159
358
|
"type": {
|
|
160
|
-
"text": "
|
|
359
|
+
"text": "Element[]"
|
|
161
360
|
}
|
|
162
361
|
},
|
|
163
362
|
"parameters": [
|
|
@@ -172,37 +371,56 @@
|
|
|
172
371
|
},
|
|
173
372
|
{
|
|
174
373
|
"kind": "method",
|
|
175
|
-
"name": "
|
|
176
|
-
"privacy": "protected"
|
|
374
|
+
"name": "_initMenuItems",
|
|
375
|
+
"privacy": "protected",
|
|
376
|
+
"return": {
|
|
377
|
+
"type": {
|
|
378
|
+
"text": "void"
|
|
379
|
+
}
|
|
380
|
+
}
|
|
177
381
|
},
|
|
178
382
|
{
|
|
179
383
|
"kind": "method",
|
|
180
|
-
"name": "
|
|
384
|
+
"name": "_applyCheckedState",
|
|
181
385
|
"privacy": "protected",
|
|
386
|
+
"return": {
|
|
387
|
+
"type": {
|
|
388
|
+
"text": "'true' | 'false' | 'mixed' | undefined"
|
|
389
|
+
}
|
|
390
|
+
},
|
|
182
391
|
"parameters": [
|
|
183
392
|
{
|
|
184
|
-
"name": "
|
|
393
|
+
"name": "item",
|
|
185
394
|
"type": {
|
|
186
|
-
"text": "
|
|
395
|
+
"text": "HTMLElement"
|
|
187
396
|
}
|
|
188
397
|
}
|
|
189
398
|
]
|
|
399
|
+
},
|
|
400
|
+
{
|
|
401
|
+
"kind": "field",
|
|
402
|
+
"name": "_onKeydown",
|
|
403
|
+
"privacy": "protected"
|
|
404
|
+
},
|
|
405
|
+
{
|
|
406
|
+
"kind": "field",
|
|
407
|
+
"name": "_onBlur",
|
|
408
|
+
"privacy": "protected"
|
|
409
|
+
},
|
|
410
|
+
{
|
|
411
|
+
"kind": "field",
|
|
412
|
+
"name": "_onClick",
|
|
413
|
+
"privacy": "protected"
|
|
190
414
|
}
|
|
191
415
|
],
|
|
192
416
|
"events": [
|
|
193
417
|
{
|
|
194
|
-
"
|
|
195
|
-
"
|
|
196
|
-
"text": "CustomEvent"
|
|
197
|
-
},
|
|
198
|
-
"description": "Fired when a menu item is activated via Enter or Space"
|
|
418
|
+
"description": "Fired when a menu item is activated via keyboard (Enter/Space) or pointer click.",
|
|
419
|
+
"name": "rc-menu-activate"
|
|
199
420
|
},
|
|
200
421
|
{
|
|
201
|
-
"
|
|
202
|
-
"
|
|
203
|
-
"text": "CustomEvent"
|
|
204
|
-
},
|
|
205
|
-
"description": "Fired when Escape is pressed"
|
|
422
|
+
"description": "Fired when Escape is pressed.",
|
|
423
|
+
"name": "rc-menu-close"
|
|
206
424
|
}
|
|
207
425
|
],
|
|
208
426
|
"attributes": [
|
|
@@ -212,16 +430,10 @@
|
|
|
212
430
|
"text": "string"
|
|
213
431
|
},
|
|
214
432
|
"default": "''",
|
|
215
|
-
"description": "Accessible label for this menu.",
|
|
433
|
+
"description": "Accessible label for this menu. Synced to `aria-label` on the host.\n\nPrefer `aria-labelledby` for a visible label associated via ID.",
|
|
216
434
|
"fieldName": "label"
|
|
217
435
|
}
|
|
218
436
|
],
|
|
219
|
-
"mixins": [
|
|
220
|
-
{
|
|
221
|
-
"name": "RovingTabIndexMixin",
|
|
222
|
-
"package": "@rcarls/rc-common"
|
|
223
|
-
}
|
|
224
|
-
],
|
|
225
437
|
"superclass": {
|
|
226
438
|
"name": "LitElement",
|
|
227
439
|
"package": "lit"
|