use-wc 1.0.0-pre.49 → 1.0.0-pre.50
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/custom-elements.json +204 -277
- package/dist/design-system.css +381 -295
- package/dist/docs/use-anchored.md +39 -0
- package/dist/docs/use-caret.md +107 -0
- package/dist/docs/use-menu.md +50 -2
- package/dist/docs/use-option.md +1 -1
- package/dist/docs/use-treeitem.md +1 -1
- package/dist/use-wc.d.mts +227 -141
- package/dist/use-wc.mjs +402 -525
- package/package.json +1 -1
- package/vscode.html-custom-data.json +36 -27
- package/dist/docs/use-dropdown.md +0 -60
- package/dist/docs/use-select-input.md +0 -44
package/custom-elements.json
CHANGED
|
@@ -8,6 +8,152 @@
|
|
|
8
8
|
"declarations": [],
|
|
9
9
|
"exports": []
|
|
10
10
|
},
|
|
11
|
+
{
|
|
12
|
+
"kind": "javascript-module",
|
|
13
|
+
"path": "src/elements/use-anchored/use-anchored.ts",
|
|
14
|
+
"declarations": [
|
|
15
|
+
{
|
|
16
|
+
"kind": "class",
|
|
17
|
+
"description": "`use-anchored` positions a single piece of dev-authored popover or dialog content relative to\nanother element on the page, using CSS anchor positioning. It doesn't render or manage the\npopover or dialog itself — bring your own `<dialog>` or `[popover]` element as its one child,\nand `use-anchored` handles the `anchor-name`/`position-anchor` plumbing and flip fallbacks:\n\n```html\n<button id=\"opener\" popovertarget=\"thing\">Open</button>\n<use-anchored target=\"opener\">\n <div id=\"thing\" popover>Content</div>\n</use-anchored>\n```\n\n`target`, an id resolved in `use-anchored`'s own root, is required — there's no invoker\ndiscovery or single-invoker fallback here, unlike `use-menu`. Point it at whichever element\nthe anchored content should track.\n\nThe wrapped element is resolved once, from `use-anchored`'s first element child, when\n`use-anchored` connects to the DOM — it must already exist in the document by then, the same\nassumption `use-menu` makes about its invokers.\n\nThe positioning rules only apply while the wrapped element is open —\n`::slotted(:is([open], :popover-open))`, matching both a `<dialog open>` and a `[popover]`\nelement while showing — so this works the same whether the wrapped element opens via\n`dialog.show()`/`showModal()` or the Popover API's `showPopover()`.",
|
|
18
|
+
"name": "UseAnchored",
|
|
19
|
+
"slots": [
|
|
20
|
+
{
|
|
21
|
+
"description": "A single `<dialog>` or `[popover]` element to position. Only the first element child is anchored; anything after it is ignored.",
|
|
22
|
+
"name": "default"
|
|
23
|
+
}
|
|
24
|
+
],
|
|
25
|
+
"members": [
|
|
26
|
+
{
|
|
27
|
+
"kind": "field",
|
|
28
|
+
"name": "target",
|
|
29
|
+
"type": {
|
|
30
|
+
"text": "string | undefined"
|
|
31
|
+
},
|
|
32
|
+
"attribute": "target",
|
|
33
|
+
"reflects": true
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"kind": "field",
|
|
37
|
+
"name": "anchoralign",
|
|
38
|
+
"type": {
|
|
39
|
+
"text": "string"
|
|
40
|
+
},
|
|
41
|
+
"default": "\"end start\"",
|
|
42
|
+
"attribute": "anchoralign",
|
|
43
|
+
"reflects": true
|
|
44
|
+
}
|
|
45
|
+
],
|
|
46
|
+
"attributes": [
|
|
47
|
+
{
|
|
48
|
+
"description": "Id of the element to anchor to, resolved in use-anchored's own tree.",
|
|
49
|
+
"name": "target",
|
|
50
|
+
"type": {
|
|
51
|
+
"text": "string | undefined"
|
|
52
|
+
},
|
|
53
|
+
"fieldName": "target"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"description": "`\"<block> <inline>\"`, each `\"start\" | \"end\"`: Aligns the wrapped element relative to its anchor. Defaults to `\"end start\"` — below the anchor, inline-start edges aligned.",
|
|
57
|
+
"name": "anchoralign",
|
|
58
|
+
"type": {
|
|
59
|
+
"text": "string"
|
|
60
|
+
},
|
|
61
|
+
"default": "\"end start\"",
|
|
62
|
+
"fieldName": "anchoralign"
|
|
63
|
+
}
|
|
64
|
+
],
|
|
65
|
+
"superclass": {
|
|
66
|
+
"name": "LitElement",
|
|
67
|
+
"package": "lit"
|
|
68
|
+
},
|
|
69
|
+
"tagName": "use-anchored",
|
|
70
|
+
"customElement": true
|
|
71
|
+
}
|
|
72
|
+
],
|
|
73
|
+
"exports": [
|
|
74
|
+
{
|
|
75
|
+
"kind": "js",
|
|
76
|
+
"name": "UseAnchored",
|
|
77
|
+
"declaration": {
|
|
78
|
+
"name": "UseAnchored",
|
|
79
|
+
"module": "src/elements/use-anchored/use-anchored.ts"
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"kind": "custom-element-definition",
|
|
84
|
+
"name": "use-anchored",
|
|
85
|
+
"declaration": {
|
|
86
|
+
"name": "UseAnchored",
|
|
87
|
+
"module": "src/elements/use-anchored/use-anchored.ts"
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
]
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"kind": "javascript-module",
|
|
94
|
+
"path": "src/elements/use-calendarday/use-calendarday.ts",
|
|
95
|
+
"declarations": [
|
|
96
|
+
{
|
|
97
|
+
"kind": "class",
|
|
98
|
+
"description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
|
|
99
|
+
"name": "UseCalendarday",
|
|
100
|
+
"slots": [
|
|
101
|
+
{
|
|
102
|
+
"description": "slot for custom day content (replaces the day number)",
|
|
103
|
+
"name": "default"
|
|
104
|
+
}
|
|
105
|
+
],
|
|
106
|
+
"members": [
|
|
107
|
+
{
|
|
108
|
+
"kind": "field",
|
|
109
|
+
"name": "date",
|
|
110
|
+
"type": {
|
|
111
|
+
"text": "string"
|
|
112
|
+
},
|
|
113
|
+
"attribute": "date"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"kind": "field",
|
|
117
|
+
"name": "day",
|
|
118
|
+
"readonly": true
|
|
119
|
+
}
|
|
120
|
+
],
|
|
121
|
+
"attributes": [
|
|
122
|
+
{
|
|
123
|
+
"name": "date",
|
|
124
|
+
"type": {
|
|
125
|
+
"text": "string"
|
|
126
|
+
},
|
|
127
|
+
"fieldName": "date"
|
|
128
|
+
}
|
|
129
|
+
],
|
|
130
|
+
"superclass": {
|
|
131
|
+
"name": "LitElement",
|
|
132
|
+
"package": "lit"
|
|
133
|
+
},
|
|
134
|
+
"tagName": "use-calendarday",
|
|
135
|
+
"customElement": true
|
|
136
|
+
}
|
|
137
|
+
],
|
|
138
|
+
"exports": [
|
|
139
|
+
{
|
|
140
|
+
"kind": "js",
|
|
141
|
+
"name": "UseCalendarday",
|
|
142
|
+
"declaration": {
|
|
143
|
+
"name": "UseCalendarday",
|
|
144
|
+
"module": "src/elements/use-calendarday/use-calendarday.ts"
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"kind": "custom-element-definition",
|
|
149
|
+
"name": "use-calendarday",
|
|
150
|
+
"declaration": {
|
|
151
|
+
"name": "UseCalendarday",
|
|
152
|
+
"module": "src/elements/use-calendarday/use-calendarday.ts"
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
]
|
|
156
|
+
},
|
|
11
157
|
{
|
|
12
158
|
"kind": "javascript-module",
|
|
13
159
|
"path": "src/elements/use-calendar-base/use-calendar-base.ts",
|
|
@@ -415,65 +561,56 @@
|
|
|
415
561
|
},
|
|
416
562
|
{
|
|
417
563
|
"kind": "javascript-module",
|
|
418
|
-
"path": "src/elements/use-
|
|
564
|
+
"path": "src/elements/use-caret/use-caret.ts",
|
|
419
565
|
"declarations": [
|
|
420
566
|
{
|
|
421
567
|
"kind": "class",
|
|
422
|
-
"description": "
|
|
423
|
-
"name": "
|
|
568
|
+
"description": "`use-caret` supplies the caret icon and label layout for a consumer who wants to own the\ninvoking button itself. It renders inside a plain `<button>`\nthat carries the native `popovertarget` attribute, pointing at a `use-menu`:\n\n```html\n<button id=\"thing\" popovertarget=\"thing-menu\">\n <use-caret>Menu</use-caret>\n</button>\n<use-menu id=\"thing-menu\" aria-label=\"Menu\">\n <button role=\"menuitem\">First thing</button>\n</use-menu>\n```\n\n`use-menu` finds this button on its own via `popovertarget` and anchors to it — no\n`anchortarget` needed here; that's only for a menu with more than one invoker. See `use-menu`'s\nown docs for that case.\n\nThe button is entirely the consumer's own element — their classes, their content, their event\nhandlers. `use-caret` contributes no interactivity of its own: no internal button, no focus\ntarget, no state. It only renders the label and caret glyph, so consumers get a consistent\nvisual trigger without giving up control of the button.\n\nThe caret direction is derived rather than configured: a trigger nested inside a `use-menu`\nis understood to open a submenu and renders pointing sideways; a top-level trigger renders\npointing down.\n\nSwapping in a different caret **per instance** is a slot: put your own element in the `icon`\nslot and it replaces `part(icon-default)` entirely for that trigger.\n\nSwapping the default caret **for every trigger in the app** doesn't need touching this\ncomponent's `render()` at all — style `::part(icon-default)` from an outside stylesheet, the\nsame way any shadow DOM part is themed:\n\n```css\nuse-caret::part(icon-default) {\n mask-image: url(\"/icons/my-caret.svg\");\n}\n```\n\n(When the design system's `theme.css` is loaded, this is already wired to a token —\n`--usewc-effect-dropdown-trigger-icon-mask-image` — so redefining that custom property has\nthe same effect without writing a `::part()` rule at all.)\n\n`::part()` only reaches CSS-expressible changes (a mask, a background, a transform). For\nanything else — different markup, an icon font, logic beyond a mask — set the static\n`customIcon` hook. Every `<use-caret>` in the page picks it up; consumers keep writing the\nsame tag, no new element to register or remember to use instead. Set it once, as early as\npossible (an app's entry point, before any triggers connect) — Lit calls `render()` fresh on\nevery update, so an already-connected instance only reflects the change once something causes\nit to re-render:\n\n```ts\n// A bare string or TemplateResult is used as-is, on every trigger, nested or not:\nUseCaret.customIcon = \"→\";\n\n// A function is called on every render instead, and told whether this particular trigger is\n// nested — the same distinction the built-in ▼/▶ caret already makes for submenus:\nUseCaret.customIcon = (html, isNested) =>\n isNested\n ? html`<my-icon name=\"chevron-right\"></my-icon>`\n : html`<my-icon name=\"chevron-down\"></my-icon>`;\n```\n\nThe function form is called with the component's own `html` tag as its (optional) first\nargument rather than requiring the caller to import one — a page can end up with more than one\ncopy of `lit-html` in its module graph, and a `TemplateResult` built from a *different* copy\nthan the one this component renders with can silently fail to render. Taking `html` in as a\nparameter sidesteps that: whatever's returned is guaranteed to come from the same `lit-html`\nthis component already uses. A bare string skips the concern entirely, at the cost of not\nbeing able to vary by `isNested`.\n\nOnly need to change the icon on **some** triggers, not every one in the app? Extend the\nclass, override `render()` normally, and register the subclass under a different tag name so\nit coexists with the built-in element instead of replacing it everywhere:\n\n```ts\nclass MyCaret extends UseCaret {\n override render() {\n return html`<slot></slot><slot name=\"icon\"><my-icon name=\"chevron\"></my-icon></slot>`;\n }\n}\ncustomElements.define(\"my-caret\", MyCaret);\n```",
|
|
569
|
+
"name": "UseCaret",
|
|
424
570
|
"slots": [
|
|
425
571
|
{
|
|
426
|
-
"description": "
|
|
572
|
+
"description": "Trigger label content.",
|
|
427
573
|
"name": "default"
|
|
428
|
-
}
|
|
429
|
-
],
|
|
430
|
-
"members": [
|
|
431
|
-
{
|
|
432
|
-
"kind": "field",
|
|
433
|
-
"name": "date",
|
|
434
|
-
"type": {
|
|
435
|
-
"text": "string"
|
|
436
|
-
},
|
|
437
|
-
"attribute": "date"
|
|
438
574
|
},
|
|
439
575
|
{
|
|
440
|
-
"
|
|
441
|
-
"name": "
|
|
442
|
-
"readonly": true
|
|
576
|
+
"description": "Replaces the default caret glyph.",
|
|
577
|
+
"name": "icon"
|
|
443
578
|
}
|
|
444
579
|
],
|
|
445
|
-
"
|
|
580
|
+
"members": [
|
|
446
581
|
{
|
|
447
|
-
"
|
|
582
|
+
"kind": "field",
|
|
583
|
+
"name": "customIcon",
|
|
448
584
|
"type": {
|
|
449
|
-
"text": "string"
|
|
585
|
+
"text": "| ((html: HtmlTag, isNested: boolean) => TemplateResult | string)\n | TemplateResult\n | string | undefined"
|
|
450
586
|
},
|
|
451
|
-
"
|
|
587
|
+
"static": true,
|
|
588
|
+
"description": "Global override for the default caret. When set, every `<use-caret>` in the page\nrenders this inside `part(icon-default)` instead of the built-in ▼/▶ character. A plain\nstring or `TemplateResult` is used as-is for every trigger, nested or not — for a caret that\nstill needs to point sideways on a submenu trigger, use the function form instead: it's\ncalled with the component's own `html` tag and whether *this* trigger is nested, so a\nreturned template is guaranteed to come from the same `lit-html` instance this component\nrenders with, and can still vary the same way the built-in caret does. Unset (the default)\nkeeps the built-in caret."
|
|
452
589
|
}
|
|
453
590
|
],
|
|
454
591
|
"superclass": {
|
|
455
592
|
"name": "LitElement",
|
|
456
593
|
"package": "lit"
|
|
457
594
|
},
|
|
458
|
-
"tagName": "use-
|
|
595
|
+
"tagName": "use-caret",
|
|
459
596
|
"customElement": true
|
|
460
597
|
}
|
|
461
598
|
],
|
|
462
599
|
"exports": [
|
|
463
600
|
{
|
|
464
601
|
"kind": "js",
|
|
465
|
-
"name": "
|
|
602
|
+
"name": "UseCaret",
|
|
466
603
|
"declaration": {
|
|
467
|
-
"name": "
|
|
468
|
-
"module": "src/elements/use-
|
|
604
|
+
"name": "UseCaret",
|
|
605
|
+
"module": "src/elements/use-caret/use-caret.ts"
|
|
469
606
|
}
|
|
470
607
|
},
|
|
471
608
|
{
|
|
472
609
|
"kind": "custom-element-definition",
|
|
473
|
-
"name": "use-
|
|
610
|
+
"name": "use-caret",
|
|
474
611
|
"declaration": {
|
|
475
|
-
"name": "
|
|
476
|
-
"module": "src/elements/use-
|
|
612
|
+
"name": "UseCaret",
|
|
613
|
+
"module": "src/elements/use-caret/use-caret.ts"
|
|
477
614
|
}
|
|
478
615
|
}
|
|
479
616
|
]
|
|
@@ -1267,115 +1404,6 @@
|
|
|
1267
1404
|
}
|
|
1268
1405
|
]
|
|
1269
1406
|
},
|
|
1270
|
-
{
|
|
1271
|
-
"kind": "javascript-module",
|
|
1272
|
-
"path": "src/elements/use-dropdown/use-dropdown.ts",
|
|
1273
|
-
"declarations": [
|
|
1274
|
-
{
|
|
1275
|
-
"kind": "class",
|
|
1276
|
-
"description": "When the popover is opened the tabbable elements are found and indexed for\nkeyboard navigation. The first tabbable element is focused when the popover is opened. The\nfollowing selector is used to find tabbable elements:\n\n```css\n:is(\n [role=\"menuitem\"],\n [role=\"menuitemcheckbox\"],\n [role=\"menuitemradio\"],\n use-menu\n):not(:is(\n [disabled],\n [hidden],\n [inert],\n [aria-hidden=\"true\"]\n))\n```\n\nMenu items are not used for navigation, they are intended for related action\nitems that allows a user to manipulate a user interface or content. Read the\nWCAG guidance for more details:\n[https://www.w3.org/WAI/ARIA/apg/patterns/menubar/](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)\n\nFor an icon-only trigger, omit `label` and set `aria-label` on `use-dropdown` itself — it is\nforwarded to the trigger button so the control still has an accessible name.",
|
|
1277
|
-
"name": "UseDropdown",
|
|
1278
|
-
"slots": [
|
|
1279
|
-
{
|
|
1280
|
-
"name": "default"
|
|
1281
|
-
},
|
|
1282
|
-
{
|
|
1283
|
-
"name": "trigger-content"
|
|
1284
|
-
},
|
|
1285
|
-
{
|
|
1286
|
-
"name": "trigger-label"
|
|
1287
|
-
},
|
|
1288
|
-
{
|
|
1289
|
-
"name": "trigger-arrow"
|
|
1290
|
-
}
|
|
1291
|
-
],
|
|
1292
|
-
"members": [
|
|
1293
|
-
{
|
|
1294
|
-
"kind": "field",
|
|
1295
|
-
"name": "trigger",
|
|
1296
|
-
"type": {
|
|
1297
|
-
"text": "HTMLButtonElement | null"
|
|
1298
|
-
},
|
|
1299
|
-
"default": "null"
|
|
1300
|
-
},
|
|
1301
|
-
{
|
|
1302
|
-
"kind": "field",
|
|
1303
|
-
"name": "disabled",
|
|
1304
|
-
"attribute": "disabled"
|
|
1305
|
-
},
|
|
1306
|
-
{
|
|
1307
|
-
"kind": "field",
|
|
1308
|
-
"name": "label",
|
|
1309
|
-
"type": {
|
|
1310
|
-
"text": "string"
|
|
1311
|
-
},
|
|
1312
|
-
"attribute": "label"
|
|
1313
|
-
},
|
|
1314
|
-
{
|
|
1315
|
-
"kind": "field",
|
|
1316
|
-
"name": "inlinealign",
|
|
1317
|
-
"type": {
|
|
1318
|
-
"text": "\"start\" | \"end\""
|
|
1319
|
-
},
|
|
1320
|
-
"default": "\"start\"",
|
|
1321
|
-
"description": "Aligns the menu along the inline axis relative to the trigger. Applies to top-level\nmenus; nested submenus are always positioned to the side of their parent trigger.\n\n- `start`: the menu's inline-start edge aligns with the trigger's inline-start edge\n- `end`: the menu's inline-end edge aligns with the trigger's inline-end edge",
|
|
1322
|
-
"attribute": "inlinealign",
|
|
1323
|
-
"reflects": true
|
|
1324
|
-
},
|
|
1325
|
-
{
|
|
1326
|
-
"kind": "method",
|
|
1327
|
-
"name": "getId"
|
|
1328
|
-
}
|
|
1329
|
-
],
|
|
1330
|
-
"attributes": [
|
|
1331
|
-
{
|
|
1332
|
-
"description": "Aligns the menu along the inline axis relative to the trigger. Applies to top-level\nmenus; nested submenus are always positioned to the side of their parent trigger.\n\n- `start`: the menu's inline-start edge aligns with the trigger's inline-start edge\n- `end`: the menu's inline-end edge aligns with the trigger's inline-end edge",
|
|
1333
|
-
"name": "inlinealign",
|
|
1334
|
-
"type": {
|
|
1335
|
-
"text": "\"start\" | \"end\""
|
|
1336
|
-
},
|
|
1337
|
-
"default": "\"start\"",
|
|
1338
|
-
"fieldName": "inlinealign"
|
|
1339
|
-
},
|
|
1340
|
-
{
|
|
1341
|
-
"name": "disabled",
|
|
1342
|
-
"fieldName": "disabled"
|
|
1343
|
-
},
|
|
1344
|
-
{
|
|
1345
|
-
"name": "label",
|
|
1346
|
-
"type": {
|
|
1347
|
-
"text": "string"
|
|
1348
|
-
},
|
|
1349
|
-
"fieldName": "label"
|
|
1350
|
-
}
|
|
1351
|
-
],
|
|
1352
|
-
"superclass": {
|
|
1353
|
-
"name": "LitElement",
|
|
1354
|
-
"package": "lit"
|
|
1355
|
-
},
|
|
1356
|
-
"tagName": "use-dropdown",
|
|
1357
|
-
"customElement": true
|
|
1358
|
-
}
|
|
1359
|
-
],
|
|
1360
|
-
"exports": [
|
|
1361
|
-
{
|
|
1362
|
-
"kind": "js",
|
|
1363
|
-
"name": "UseDropdown",
|
|
1364
|
-
"declaration": {
|
|
1365
|
-
"name": "UseDropdown",
|
|
1366
|
-
"module": "src/elements/use-dropdown/use-dropdown.ts"
|
|
1367
|
-
}
|
|
1368
|
-
},
|
|
1369
|
-
{
|
|
1370
|
-
"kind": "custom-element-definition",
|
|
1371
|
-
"name": "use-dropdown",
|
|
1372
|
-
"declaration": {
|
|
1373
|
-
"name": "UseDropdown",
|
|
1374
|
-
"module": "src/elements/use-dropdown/use-dropdown.ts"
|
|
1375
|
-
}
|
|
1376
|
-
}
|
|
1377
|
-
]
|
|
1378
|
-
},
|
|
1379
1407
|
{
|
|
1380
1408
|
"kind": "javascript-module",
|
|
1381
1409
|
"path": "src/elements/use-datetime-input/use-datetime-input.ts",
|
|
@@ -2766,7 +2794,7 @@
|
|
|
2766
2794
|
"declarations": [
|
|
2767
2795
|
{
|
|
2768
2796
|
"kind": "class",
|
|
2769
|
-
"description": "The first tabbable element is focused when the menu gains focus.\n\nMenu is not used for navigation, it is intended for related action items that\nallows a user to manipulate a user interface or content.\n\nThe following selector is used to find tabbable elements:\n\n```css\n:is(\n [role=\"menuitem\"],\n [role=\"menuitemcheckbox\"],\n [role=\"menuitemradio\"]
|
|
2797
|
+
"description": "The first tabbable element is focused when the menu gains focus.\n\nMenu is not used for navigation, it is intended for related action items that\nallows a user to manipulate a user interface or content.\n\nThe following selector is used to find tabbable elements:\n\n```css\n:is(\n [role=\"menuitem\"],\n [role=\"menuitemcheckbox\"],\n [role=\"menuitemradio\"]\n):not(:is(\n [disabled],\n [hidden],\n [inert],\n [aria-hidden=\"true\"]\n))\n```\n\nA menu can be opened one of two ways:\n\n1. **Anchored to an invoker**: point one or more `[popovertarget]` invokers at the menu's\n `id`, and `use-menu` applies `popover=\"auto\"` itself, discovers the invokers, wires up\n `aria-haspopup`/`aria-expanded`, and anchors the open menu to whichever invoker actually\n opened it, using CSS anchor positioning — a stand-in until `referenceTarget` ships. This is\n always on, with a single invoker or many, no `anchortarget` needed:\n\n ```html\n <button id=\"thing\" popovertarget=\"thing-menu\">\n <use-caret>Menu</use-caret>\n </button>\n <use-menu id=\"thing-menu\" aria-label=\"Menu\">\n <button role=\"menuitem\">First thing</button>\n </use-menu>\n ```\n\n A submenu is the same shape, nested: a `[role=\"menuitem\"]` invoker inside the parent menu,\n and its `use-menu` living alongside it as a sibling in the parent's slotted content — this\n is what keeps the submenu indexed for the parent's own keyboard navigation.\n\n `anchortarget`, set to an element's id (named to avoid colliding with the `anchor` content\n attribute HTML is gaining natively), overrides that default — use it to pin the menu to a\n specific element regardless of which invoker opened it, or to anchor to something that\n isn't an invoker at all:\n\n ```html\n <button popovertarget=\"shared-menu\">Left</button>\n <button id=\"pinned\" popovertarget=\"shared-menu\">Middle (anchor)</button>\n <button popovertarget=\"shared-menu\">Right</button>\n <use-menu id=\"shared-menu\" aria-label=\"Menu\" anchortarget=\"pinned\">\n <button role=\"menuitem\">First thing</button>\n </use-menu>\n ```\n\n2. **Standalone popover**: set `popover` on `<use-menu>` yourself — needed only when there's no\n `[popovertarget]` invoker anywhere for `use-menu` to discover, e.g. opening it from plain JS\n (`menu.showPopover()`). Setting `popover` by hand in the invoker case above is redundant,\n not wrong — auto-apply skips the attribute it finds already set, so both can coexist. With\n no invoker to anchor to, `use-menu` falls back to whatever element sits directly before it\n in markup — keep the trigger-then-menu adjacency every invoker-based usage already follows,\n or set `anchortarget` for anything else.\n\nInvokers are discovered once, when the menu connects to the DOM — they must already exist in\nthe document by then. An invoker's id must be set for `[popovertarget]` to resolve it, and\nthe menu assigns itself an id automatically if one isn't already set.",
|
|
2770
2798
|
"name": "UseMenu",
|
|
2771
2799
|
"slots": [
|
|
2772
2800
|
{
|
|
@@ -2796,12 +2824,48 @@
|
|
|
2796
2824
|
},
|
|
2797
2825
|
"attribute": "label"
|
|
2798
2826
|
},
|
|
2827
|
+
{
|
|
2828
|
+
"kind": "field",
|
|
2829
|
+
"name": "anchortarget",
|
|
2830
|
+
"type": {
|
|
2831
|
+
"text": "string | undefined"
|
|
2832
|
+
},
|
|
2833
|
+
"attribute": "anchortarget",
|
|
2834
|
+
"reflects": true
|
|
2835
|
+
},
|
|
2836
|
+
{
|
|
2837
|
+
"kind": "field",
|
|
2838
|
+
"name": "anchoralign",
|
|
2839
|
+
"type": {
|
|
2840
|
+
"text": "string"
|
|
2841
|
+
},
|
|
2842
|
+
"default": "\"end start\"",
|
|
2843
|
+
"attribute": "anchoralign",
|
|
2844
|
+
"reflects": true
|
|
2845
|
+
},
|
|
2799
2846
|
{
|
|
2800
2847
|
"kind": "method",
|
|
2801
2848
|
"name": "getId"
|
|
2802
2849
|
}
|
|
2803
2850
|
],
|
|
2804
2851
|
"attributes": [
|
|
2852
|
+
{
|
|
2853
|
+
"description": "Id of the element to anchor to, resolved in the menu's own tree. Falls back to whichever discovered invoker opened the menu, or the menu's previous sibling when there's no invoker at all, when unset.",
|
|
2854
|
+
"name": "anchortarget",
|
|
2855
|
+
"type": {
|
|
2856
|
+
"text": "string | undefined"
|
|
2857
|
+
},
|
|
2858
|
+
"fieldName": "anchortarget"
|
|
2859
|
+
},
|
|
2860
|
+
{
|
|
2861
|
+
"description": "`\"<block> <inline>\"`, each `\"start\" | \"end\"`: Aligns the menu relative to its anchor. Defaults to `\"end start\"` — below the anchor, inline-start edges aligned.",
|
|
2862
|
+
"name": "anchoralign",
|
|
2863
|
+
"type": {
|
|
2864
|
+
"text": "string"
|
|
2865
|
+
},
|
|
2866
|
+
"default": "\"end start\"",
|
|
2867
|
+
"fieldName": "anchoralign"
|
|
2868
|
+
},
|
|
2805
2869
|
{
|
|
2806
2870
|
"name": "disabled",
|
|
2807
2871
|
"fieldName": "disabled"
|
|
@@ -3111,7 +3175,7 @@
|
|
|
3111
3175
|
"declarations": [
|
|
3112
3176
|
{
|
|
3113
3177
|
"kind": "class",
|
|
3114
|
-
"description": "`use-option` is a custom element that represents an option in a `use-
|
|
3178
|
+
"description": "`use-option` is a custom element that represents an option in a `use-listbox-input` custom element.\n\nThe children of this element are the content of the option and must not contain any interactive elements.",
|
|
3115
3179
|
"name": "UseOption",
|
|
3116
3180
|
"slots": [
|
|
3117
3181
|
{
|
|
@@ -3250,143 +3314,6 @@
|
|
|
3250
3314
|
}
|
|
3251
3315
|
]
|
|
3252
3316
|
},
|
|
3253
|
-
{
|
|
3254
|
-
"kind": "javascript-module",
|
|
3255
|
-
"path": "src/elements/use-select-input/use-select-input.ts",
|
|
3256
|
-
"declarations": [
|
|
3257
|
-
{
|
|
3258
|
-
"kind": "class",
|
|
3259
|
-
"description": "## Multiple\n\nThe `use-listbox-input` provides an attribute for selecting multiple options.\n\n## Long term plan\n\nThis web component was built with the intent to be replaced by browser-native `base-select` support once it becomes baseline.\n\n<baseline-status featureId=\"customizable-select\"></baseline-status>",
|
|
3260
|
-
"name": "UseSelectInput",
|
|
3261
|
-
"slots": [
|
|
3262
|
-
{
|
|
3263
|
-
"description": "NodeList of `use-option` elements",
|
|
3264
|
-
"name": "default"
|
|
3265
|
-
},
|
|
3266
|
-
{
|
|
3267
|
-
"name": "arrow"
|
|
3268
|
-
}
|
|
3269
|
-
],
|
|
3270
|
-
"members": [
|
|
3271
|
-
{
|
|
3272
|
-
"kind": "field",
|
|
3273
|
-
"name": "name",
|
|
3274
|
-
"type": {
|
|
3275
|
-
"text": "string | undefined"
|
|
3276
|
-
},
|
|
3277
|
-
"attribute": "name"
|
|
3278
|
-
},
|
|
3279
|
-
{
|
|
3280
|
-
"kind": "field",
|
|
3281
|
-
"name": "placeholder",
|
|
3282
|
-
"type": {
|
|
3283
|
-
"text": "string"
|
|
3284
|
-
},
|
|
3285
|
-
"default": "\"\"",
|
|
3286
|
-
"attribute": "placeholder"
|
|
3287
|
-
},
|
|
3288
|
-
{
|
|
3289
|
-
"kind": "field",
|
|
3290
|
-
"name": "disabled",
|
|
3291
|
-
"attribute": "disabled"
|
|
3292
|
-
},
|
|
3293
|
-
{
|
|
3294
|
-
"kind": "field",
|
|
3295
|
-
"name": "selected",
|
|
3296
|
-
"readonly": true
|
|
3297
|
-
},
|
|
3298
|
-
{
|
|
3299
|
-
"kind": "field",
|
|
3300
|
-
"name": "firstSelected",
|
|
3301
|
-
"readonly": true
|
|
3302
|
-
},
|
|
3303
|
-
{
|
|
3304
|
-
"kind": "field",
|
|
3305
|
-
"name": "options",
|
|
3306
|
-
"type": {
|
|
3307
|
-
"text": "Array<UseOption>"
|
|
3308
|
-
}
|
|
3309
|
-
},
|
|
3310
|
-
{
|
|
3311
|
-
"kind": "field",
|
|
3312
|
-
"name": "trigger",
|
|
3313
|
-
"type": {
|
|
3314
|
-
"text": "HTMLButtonElement | null"
|
|
3315
|
-
},
|
|
3316
|
-
"default": "null"
|
|
3317
|
-
},
|
|
3318
|
-
{
|
|
3319
|
-
"kind": "field",
|
|
3320
|
-
"name": "label",
|
|
3321
|
-
"type": {
|
|
3322
|
-
"text": "HTMLSpanElement"
|
|
3323
|
-
}
|
|
3324
|
-
},
|
|
3325
|
-
{
|
|
3326
|
-
"kind": "method",
|
|
3327
|
-
"name": "getId"
|
|
3328
|
-
},
|
|
3329
|
-
{
|
|
3330
|
-
"kind": "field",
|
|
3331
|
-
"name": "activeOption"
|
|
3332
|
-
},
|
|
3333
|
-
{
|
|
3334
|
-
"kind": "field",
|
|
3335
|
-
"name": "value",
|
|
3336
|
-
"type": {
|
|
3337
|
-
"text": "FormData"
|
|
3338
|
-
},
|
|
3339
|
-
"readonly": true
|
|
3340
|
-
}
|
|
3341
|
-
],
|
|
3342
|
-
"attributes": [
|
|
3343
|
-
{
|
|
3344
|
-
"name": "name",
|
|
3345
|
-
"type": {
|
|
3346
|
-
"text": "string | undefined"
|
|
3347
|
-
},
|
|
3348
|
-
"fieldName": "name"
|
|
3349
|
-
},
|
|
3350
|
-
{
|
|
3351
|
-
"name": "placeholder",
|
|
3352
|
-
"type": {
|
|
3353
|
-
"text": "string"
|
|
3354
|
-
},
|
|
3355
|
-
"default": "\"\"",
|
|
3356
|
-
"fieldName": "placeholder"
|
|
3357
|
-
},
|
|
3358
|
-
{
|
|
3359
|
-
"name": "disabled",
|
|
3360
|
-
"fieldName": "disabled"
|
|
3361
|
-
}
|
|
3362
|
-
],
|
|
3363
|
-
"superclass": {
|
|
3364
|
-
"name": "LitElement",
|
|
3365
|
-
"package": "lit"
|
|
3366
|
-
},
|
|
3367
|
-
"tagName": "use-select-input",
|
|
3368
|
-
"customElement": true
|
|
3369
|
-
}
|
|
3370
|
-
],
|
|
3371
|
-
"exports": [
|
|
3372
|
-
{
|
|
3373
|
-
"kind": "js",
|
|
3374
|
-
"name": "UseSelectInput",
|
|
3375
|
-
"declaration": {
|
|
3376
|
-
"name": "UseSelectInput",
|
|
3377
|
-
"module": "src/elements/use-select-input/use-select-input.ts"
|
|
3378
|
-
}
|
|
3379
|
-
},
|
|
3380
|
-
{
|
|
3381
|
-
"kind": "custom-element-definition",
|
|
3382
|
-
"name": "use-select-input",
|
|
3383
|
-
"declaration": {
|
|
3384
|
-
"name": "UseSelectInput",
|
|
3385
|
-
"module": "src/elements/use-select-input/use-select-input.ts"
|
|
3386
|
-
}
|
|
3387
|
-
}
|
|
3388
|
-
]
|
|
3389
|
-
},
|
|
3390
3317
|
{
|
|
3391
3318
|
"kind": "javascript-module",
|
|
3392
3319
|
"path": "src/elements/use-time-input/use-time-input.ts",
|
|
@@ -3804,7 +3731,7 @@
|
|
|
3804
3731
|
"declarations": [
|
|
3805
3732
|
{
|
|
3806
3733
|
"kind": "class",
|
|
3807
|
-
"description": "`use-option` is a custom element that represents an option in a `use-
|
|
3734
|
+
"description": "`use-option` is a custom element that represents an option in a `use-listbox-input` custom element.\n\nThe children of this element are the content of the option and must not contain any interactive elements.\n\n## To Do\n\n- [ ] When the parent is no longer disabled, update the items without their own `[disabled]`",
|
|
3808
3735
|
"name": "UseTreeitem",
|
|
3809
3736
|
"slots": [
|
|
3810
3737
|
{
|