luxen-ui 0.9.1 → 0.9.2
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/cdn/custom-elements.json +197 -172
- package/cdn/elements/dropdown-item/dropdown-item.js +1 -1
- package/cdn/elements/dropdown-item/dropdown-item.js.map +1 -1
- package/cdn/elements/tree/tree.d.ts +11 -1
- package/cdn/elements/tree/tree.d.ts.map +1 -1
- package/cdn/elements/tree/tree.js +1 -3
- package/cdn/elements/tree/tree.js.map +1 -1
- package/cdn/elements/tree-item/tree-item.d.ts +17 -1
- package/cdn/elements/tree-item/tree-item.d.ts.map +1 -1
- package/cdn/elements/tree-item/tree-item.js +2 -1
- package/cdn/elements/tree-item/tree-item.js.map +1 -1
- package/cdn/standalone.js +64 -16
- package/cdn/standalone.js.map +1 -1
- package/dist/custom-elements.json +197 -172
- package/dist/elements/dropdown-item/dropdown-item.css +1 -0
- package/dist/elements/tree/tree.d.ts +11 -1
- package/dist/elements/tree/tree.d.ts.map +1 -1
- package/dist/elements/tree/tree.js +37 -11
- package/dist/elements/tree-item/tree-item.d.ts +17 -1
- package/dist/elements/tree-item/tree-item.d.ts.map +1 -1
- package/dist/elements/tree-item/tree-item.js +51 -10
- package/dist/metadata/index.json +22 -3
- package/dist/metadata/tree-item.json +20 -1
- package/dist/metadata/tree.json +1 -1
- package/dist/templates/elements/tree.md +18 -0
- package/package.json +4 -2
|
@@ -172,127 +172,6 @@
|
|
|
172
172
|
}
|
|
173
173
|
]
|
|
174
174
|
},
|
|
175
|
-
{
|
|
176
|
-
"kind": "javascript-module",
|
|
177
|
-
"path": "src/html/elements/badge/badge.ts",
|
|
178
|
-
"declarations": [
|
|
179
|
-
{
|
|
180
|
-
"kind": "class",
|
|
181
|
-
"description": "",
|
|
182
|
-
"name": "Badge",
|
|
183
|
-
"members": [
|
|
184
|
-
{
|
|
185
|
-
"kind": "field",
|
|
186
|
-
"name": "variant",
|
|
187
|
-
"type": {
|
|
188
|
-
"text": "BadgeVariant | undefined"
|
|
189
|
-
},
|
|
190
|
-
"description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
|
|
191
|
-
"attribute": "variant",
|
|
192
|
-
"reflects": true
|
|
193
|
-
},
|
|
194
|
-
{
|
|
195
|
-
"kind": "field",
|
|
196
|
-
"name": "pill",
|
|
197
|
-
"type": {
|
|
198
|
-
"text": "boolean"
|
|
199
|
-
},
|
|
200
|
-
"default": "false",
|
|
201
|
-
"description": "Display as pill shape",
|
|
202
|
-
"attribute": "pill",
|
|
203
|
-
"reflects": true
|
|
204
|
-
},
|
|
205
|
-
{
|
|
206
|
-
"kind": "field",
|
|
207
|
-
"name": "size",
|
|
208
|
-
"type": {
|
|
209
|
-
"text": "BadgeSize | undefined"
|
|
210
|
-
},
|
|
211
|
-
"description": "Badge size: `sm`, `lg`. Default is md.",
|
|
212
|
-
"attribute": "size",
|
|
213
|
-
"reflects": true
|
|
214
|
-
},
|
|
215
|
-
{
|
|
216
|
-
"kind": "field",
|
|
217
|
-
"name": "appearance",
|
|
218
|
-
"type": {
|
|
219
|
-
"text": "BadgeAppearance | undefined"
|
|
220
|
-
},
|
|
221
|
-
"description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
|
|
222
|
-
"attribute": "appearance",
|
|
223
|
-
"reflects": true
|
|
224
|
-
}
|
|
225
|
-
],
|
|
226
|
-
"attributes": [
|
|
227
|
-
{
|
|
228
|
-
"name": "variant",
|
|
229
|
-
"type": {
|
|
230
|
-
"text": "BadgeVariant | undefined"
|
|
231
|
-
},
|
|
232
|
-
"description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
|
|
233
|
-
"fieldName": "variant"
|
|
234
|
-
},
|
|
235
|
-
{
|
|
236
|
-
"name": "pill",
|
|
237
|
-
"type": {
|
|
238
|
-
"text": "boolean"
|
|
239
|
-
},
|
|
240
|
-
"default": "false",
|
|
241
|
-
"description": "Display as pill shape",
|
|
242
|
-
"fieldName": "pill"
|
|
243
|
-
},
|
|
244
|
-
{
|
|
245
|
-
"name": "size",
|
|
246
|
-
"type": {
|
|
247
|
-
"text": "BadgeSize | undefined"
|
|
248
|
-
},
|
|
249
|
-
"description": "Badge size: `sm`, `lg`. Default is md.",
|
|
250
|
-
"fieldName": "size"
|
|
251
|
-
},
|
|
252
|
-
{
|
|
253
|
-
"name": "appearance",
|
|
254
|
-
"type": {
|
|
255
|
-
"text": "BadgeAppearance | undefined"
|
|
256
|
-
},
|
|
257
|
-
"description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
|
|
258
|
-
"fieldName": "appearance"
|
|
259
|
-
}
|
|
260
|
-
],
|
|
261
|
-
"superclass": {
|
|
262
|
-
"name": "LuxenElement",
|
|
263
|
-
"module": "/src/html/shared/luxen-element.js"
|
|
264
|
-
},
|
|
265
|
-
"tagName": "l-badge",
|
|
266
|
-
"customElement": true,
|
|
267
|
-
"summary": "A badge component for displaying small status indicators."
|
|
268
|
-
}
|
|
269
|
-
],
|
|
270
|
-
"exports": [
|
|
271
|
-
{
|
|
272
|
-
"kind": "js",
|
|
273
|
-
"name": "Badge",
|
|
274
|
-
"declaration": {
|
|
275
|
-
"name": "Badge",
|
|
276
|
-
"module": "src/html/elements/badge/badge.ts"
|
|
277
|
-
}
|
|
278
|
-
}
|
|
279
|
-
]
|
|
280
|
-
},
|
|
281
|
-
{
|
|
282
|
-
"kind": "javascript-module",
|
|
283
|
-
"path": "src/html/elements/badge/index.ts",
|
|
284
|
-
"declarations": [],
|
|
285
|
-
"exports": [
|
|
286
|
-
{
|
|
287
|
-
"kind": "js",
|
|
288
|
-
"name": "*",
|
|
289
|
-
"declaration": {
|
|
290
|
-
"name": "*",
|
|
291
|
-
"module": "src/html/elements/badge/badge.js"
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
]
|
|
295
|
-
},
|
|
296
175
|
{
|
|
297
176
|
"kind": "javascript-module",
|
|
298
177
|
"path": "src/html/elements/button/button.meta.ts",
|
|
@@ -446,6 +325,127 @@
|
|
|
446
325
|
}
|
|
447
326
|
]
|
|
448
327
|
},
|
|
328
|
+
{
|
|
329
|
+
"kind": "javascript-module",
|
|
330
|
+
"path": "src/html/elements/badge/badge.ts",
|
|
331
|
+
"declarations": [
|
|
332
|
+
{
|
|
333
|
+
"kind": "class",
|
|
334
|
+
"description": "",
|
|
335
|
+
"name": "Badge",
|
|
336
|
+
"members": [
|
|
337
|
+
{
|
|
338
|
+
"kind": "field",
|
|
339
|
+
"name": "variant",
|
|
340
|
+
"type": {
|
|
341
|
+
"text": "BadgeVariant | undefined"
|
|
342
|
+
},
|
|
343
|
+
"description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
|
|
344
|
+
"attribute": "variant",
|
|
345
|
+
"reflects": true
|
|
346
|
+
},
|
|
347
|
+
{
|
|
348
|
+
"kind": "field",
|
|
349
|
+
"name": "pill",
|
|
350
|
+
"type": {
|
|
351
|
+
"text": "boolean"
|
|
352
|
+
},
|
|
353
|
+
"default": "false",
|
|
354
|
+
"description": "Display as pill shape",
|
|
355
|
+
"attribute": "pill",
|
|
356
|
+
"reflects": true
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
"kind": "field",
|
|
360
|
+
"name": "size",
|
|
361
|
+
"type": {
|
|
362
|
+
"text": "BadgeSize | undefined"
|
|
363
|
+
},
|
|
364
|
+
"description": "Badge size: `sm`, `lg`. Default is md.",
|
|
365
|
+
"attribute": "size",
|
|
366
|
+
"reflects": true
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
"kind": "field",
|
|
370
|
+
"name": "appearance",
|
|
371
|
+
"type": {
|
|
372
|
+
"text": "BadgeAppearance | undefined"
|
|
373
|
+
},
|
|
374
|
+
"description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
|
|
375
|
+
"attribute": "appearance",
|
|
376
|
+
"reflects": true
|
|
377
|
+
}
|
|
378
|
+
],
|
|
379
|
+
"attributes": [
|
|
380
|
+
{
|
|
381
|
+
"name": "variant",
|
|
382
|
+
"type": {
|
|
383
|
+
"text": "BadgeVariant | undefined"
|
|
384
|
+
},
|
|
385
|
+
"description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)",
|
|
386
|
+
"fieldName": "variant"
|
|
387
|
+
},
|
|
388
|
+
{
|
|
389
|
+
"name": "pill",
|
|
390
|
+
"type": {
|
|
391
|
+
"text": "boolean"
|
|
392
|
+
},
|
|
393
|
+
"default": "false",
|
|
394
|
+
"description": "Display as pill shape",
|
|
395
|
+
"fieldName": "pill"
|
|
396
|
+
},
|
|
397
|
+
{
|
|
398
|
+
"name": "size",
|
|
399
|
+
"type": {
|
|
400
|
+
"text": "BadgeSize | undefined"
|
|
401
|
+
},
|
|
402
|
+
"description": "Badge size: `sm`, `lg`. Default is md.",
|
|
403
|
+
"fieldName": "size"
|
|
404
|
+
},
|
|
405
|
+
{
|
|
406
|
+
"name": "appearance",
|
|
407
|
+
"type": {
|
|
408
|
+
"text": "BadgeAppearance | undefined"
|
|
409
|
+
},
|
|
410
|
+
"description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined.",
|
|
411
|
+
"fieldName": "appearance"
|
|
412
|
+
}
|
|
413
|
+
],
|
|
414
|
+
"superclass": {
|
|
415
|
+
"name": "LuxenElement",
|
|
416
|
+
"module": "/src/html/shared/luxen-element.js"
|
|
417
|
+
},
|
|
418
|
+
"tagName": "l-badge",
|
|
419
|
+
"customElement": true,
|
|
420
|
+
"summary": "A badge component for displaying small status indicators."
|
|
421
|
+
}
|
|
422
|
+
],
|
|
423
|
+
"exports": [
|
|
424
|
+
{
|
|
425
|
+
"kind": "js",
|
|
426
|
+
"name": "Badge",
|
|
427
|
+
"declaration": {
|
|
428
|
+
"name": "Badge",
|
|
429
|
+
"module": "src/html/elements/badge/badge.ts"
|
|
430
|
+
}
|
|
431
|
+
}
|
|
432
|
+
]
|
|
433
|
+
},
|
|
434
|
+
{
|
|
435
|
+
"kind": "javascript-module",
|
|
436
|
+
"path": "src/html/elements/badge/index.ts",
|
|
437
|
+
"declarations": [],
|
|
438
|
+
"exports": [
|
|
439
|
+
{
|
|
440
|
+
"kind": "js",
|
|
441
|
+
"name": "*",
|
|
442
|
+
"declaration": {
|
|
443
|
+
"name": "*",
|
|
444
|
+
"module": "src/html/elements/badge/badge.js"
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
]
|
|
448
|
+
},
|
|
449
449
|
{
|
|
450
450
|
"kind": "javascript-module",
|
|
451
451
|
"path": "src/html/elements/button-group/button-group.ts",
|
|
@@ -1144,55 +1144,6 @@
|
|
|
1144
1144
|
}
|
|
1145
1145
|
]
|
|
1146
1146
|
},
|
|
1147
|
-
{
|
|
1148
|
-
"kind": "javascript-module",
|
|
1149
|
-
"path": "src/html/elements/carousel-item/carousel-item.ts",
|
|
1150
|
-
"declarations": [
|
|
1151
|
-
{
|
|
1152
|
-
"kind": "class",
|
|
1153
|
-
"description": "A single slide inside an `<l-carousel>`.",
|
|
1154
|
-
"name": "CarouselItem",
|
|
1155
|
-
"cssProperties": [
|
|
1156
|
-
{
|
|
1157
|
-
"description": "Aspect ratio of the slide.",
|
|
1158
|
-
"name": "--aspect-ratio"
|
|
1159
|
-
}
|
|
1160
|
-
],
|
|
1161
|
-
"members": [],
|
|
1162
|
-
"superclass": {
|
|
1163
|
-
"name": "LuxenElement",
|
|
1164
|
-
"module": "/src/html/shared/luxen-element.js"
|
|
1165
|
-
},
|
|
1166
|
-
"tagName": "l-carousel-item",
|
|
1167
|
-
"customElement": true
|
|
1168
|
-
}
|
|
1169
|
-
],
|
|
1170
|
-
"exports": [
|
|
1171
|
-
{
|
|
1172
|
-
"kind": "js",
|
|
1173
|
-
"name": "CarouselItem",
|
|
1174
|
-
"declaration": {
|
|
1175
|
-
"name": "CarouselItem",
|
|
1176
|
-
"module": "src/html/elements/carousel-item/carousel-item.ts"
|
|
1177
|
-
}
|
|
1178
|
-
}
|
|
1179
|
-
]
|
|
1180
|
-
},
|
|
1181
|
-
{
|
|
1182
|
-
"kind": "javascript-module",
|
|
1183
|
-
"path": "src/html/elements/carousel-item/index.ts",
|
|
1184
|
-
"declarations": [],
|
|
1185
|
-
"exports": [
|
|
1186
|
-
{
|
|
1187
|
-
"kind": "js",
|
|
1188
|
-
"name": "*",
|
|
1189
|
-
"declaration": {
|
|
1190
|
-
"name": "*",
|
|
1191
|
-
"module": "src/html/elements/carousel-item/carousel-item.js"
|
|
1192
|
-
}
|
|
1193
|
-
}
|
|
1194
|
-
]
|
|
1195
|
-
},
|
|
1196
1147
|
{
|
|
1197
1148
|
"kind": "javascript-module",
|
|
1198
1149
|
"path": "src/html/elements/checkbox/checkbox.meta.ts",
|
|
@@ -1297,6 +1248,55 @@
|
|
|
1297
1248
|
}
|
|
1298
1249
|
]
|
|
1299
1250
|
},
|
|
1251
|
+
{
|
|
1252
|
+
"kind": "javascript-module",
|
|
1253
|
+
"path": "src/html/elements/carousel-item/carousel-item.ts",
|
|
1254
|
+
"declarations": [
|
|
1255
|
+
{
|
|
1256
|
+
"kind": "class",
|
|
1257
|
+
"description": "A single slide inside an `<l-carousel>`.",
|
|
1258
|
+
"name": "CarouselItem",
|
|
1259
|
+
"cssProperties": [
|
|
1260
|
+
{
|
|
1261
|
+
"description": "Aspect ratio of the slide.",
|
|
1262
|
+
"name": "--aspect-ratio"
|
|
1263
|
+
}
|
|
1264
|
+
],
|
|
1265
|
+
"members": [],
|
|
1266
|
+
"superclass": {
|
|
1267
|
+
"name": "LuxenElement",
|
|
1268
|
+
"module": "/src/html/shared/luxen-element.js"
|
|
1269
|
+
},
|
|
1270
|
+
"tagName": "l-carousel-item",
|
|
1271
|
+
"customElement": true
|
|
1272
|
+
}
|
|
1273
|
+
],
|
|
1274
|
+
"exports": [
|
|
1275
|
+
{
|
|
1276
|
+
"kind": "js",
|
|
1277
|
+
"name": "CarouselItem",
|
|
1278
|
+
"declaration": {
|
|
1279
|
+
"name": "CarouselItem",
|
|
1280
|
+
"module": "src/html/elements/carousel-item/carousel-item.ts"
|
|
1281
|
+
}
|
|
1282
|
+
}
|
|
1283
|
+
]
|
|
1284
|
+
},
|
|
1285
|
+
{
|
|
1286
|
+
"kind": "javascript-module",
|
|
1287
|
+
"path": "src/html/elements/carousel-item/index.ts",
|
|
1288
|
+
"declarations": [],
|
|
1289
|
+
"exports": [
|
|
1290
|
+
{
|
|
1291
|
+
"kind": "js",
|
|
1292
|
+
"name": "*",
|
|
1293
|
+
"declaration": {
|
|
1294
|
+
"name": "*",
|
|
1295
|
+
"module": "src/html/elements/carousel-item/carousel-item.js"
|
|
1296
|
+
}
|
|
1297
|
+
}
|
|
1298
|
+
]
|
|
1299
|
+
},
|
|
1300
1300
|
{
|
|
1301
1301
|
"kind": "javascript-module",
|
|
1302
1302
|
"path": "src/html/elements/close-button/close-button.meta.ts",
|
|
@@ -6040,7 +6040,7 @@
|
|
|
6040
6040
|
"declarations": [
|
|
6041
6041
|
{
|
|
6042
6042
|
"kind": "class",
|
|
6043
|
-
"description": "A hierarchical tree view composed of `<l-tree-item>` children.",
|
|
6043
|
+
"description": "A hierarchical tree view composed of `<l-tree-item>` children.\n\nThe host carries `role=\"tree\"`, so give it an accessible name with\n`aria-label` or `aria-labelledby` (e.g. `<l-tree aria-label=\"Files\">`).",
|
|
6044
6044
|
"name": "Tree",
|
|
6045
6045
|
"cssProperties": [
|
|
6046
6046
|
{
|
|
@@ -6357,6 +6357,31 @@
|
|
|
6357
6357
|
"text": "number"
|
|
6358
6358
|
}
|
|
6359
6359
|
},
|
|
6360
|
+
{
|
|
6361
|
+
"kind": "method",
|
|
6362
|
+
"name": "setPosition",
|
|
6363
|
+
"parameters": [
|
|
6364
|
+
{
|
|
6365
|
+
"name": "level",
|
|
6366
|
+
"type": {
|
|
6367
|
+
"text": "number"
|
|
6368
|
+
}
|
|
6369
|
+
},
|
|
6370
|
+
{
|
|
6371
|
+
"name": "posInSet",
|
|
6372
|
+
"type": {
|
|
6373
|
+
"text": "number"
|
|
6374
|
+
}
|
|
6375
|
+
},
|
|
6376
|
+
{
|
|
6377
|
+
"name": "setSize",
|
|
6378
|
+
"type": {
|
|
6379
|
+
"text": "number"
|
|
6380
|
+
}
|
|
6381
|
+
}
|
|
6382
|
+
],
|
|
6383
|
+
"description": "Set by `<l-tree>`: ARIA position within the tree. `level` is 1-based depth,\n`posInSet`/`setSize` describe the item's rank among its siblings. These let\nscreen readers announce \"level 2, 3 of 5\" even when `lazy` children keep the\nfull set out of the DOM."
|
|
6384
|
+
},
|
|
6360
6385
|
{
|
|
6361
6386
|
"kind": "field",
|
|
6362
6387
|
"name": "hasChildren",
|
|
@@ -6405,7 +6430,7 @@
|
|
|
6405
6430
|
{
|
|
6406
6431
|
"kind": "method",
|
|
6407
6432
|
"name": "toggle",
|
|
6408
|
-
"description": "Toggle expand state.
|
|
6433
|
+
"description": "Toggle expand state. Opening a `lazy` item emits `lazy-load` (via `updated`)."
|
|
6409
6434
|
}
|
|
6410
6435
|
],
|
|
6411
6436
|
"events": [
|
|
@@ -5,6 +5,9 @@ export type TreeSelection = 'single' | 'multiple' | 'leaf' | 'none';
|
|
|
5
5
|
/**
|
|
6
6
|
* A hierarchical tree view composed of `<l-tree-item>` children.
|
|
7
7
|
*
|
|
8
|
+
* The host carries `role="tree"`, so give it an accessible name with
|
|
9
|
+
* `aria-label` or `aria-labelledby` (e.g. `<l-tree aria-label="Files">`).
|
|
10
|
+
*
|
|
8
11
|
* @slot - One or more `l-tree-item` elements.
|
|
9
12
|
*
|
|
10
13
|
* @csspart base - The root tree container.
|
|
@@ -24,6 +27,7 @@ export type TreeSelection = 'single' | 'multiple' | 'leaf' | 'none';
|
|
|
24
27
|
*/
|
|
25
28
|
export declare class Tree extends LuxenElement {
|
|
26
29
|
static styles: import("lit").CSSResult[];
|
|
30
|
+
private _internals;
|
|
27
31
|
private _mutationObserver?;
|
|
28
32
|
private _lastFocusedItem;
|
|
29
33
|
/**
|
|
@@ -54,7 +58,13 @@ export declare class Tree extends LuxenElement {
|
|
|
54
58
|
/** Collapses every item. */
|
|
55
59
|
collapseAll(): void;
|
|
56
60
|
private _syncAll;
|
|
57
|
-
|
|
61
|
+
/**
|
|
62
|
+
* Sync depth, checkbox visibility and ARIA position for a sibling group, then
|
|
63
|
+
* recurse. `aria-level`/`aria-setsize`/`aria-posinset` let screen readers
|
|
64
|
+
* announce "level N, M of K" — valuable here because `lazy` items mean the
|
|
65
|
+
* full set isn't always in the DOM (see WAI-ARIA Tree View pattern).
|
|
66
|
+
*/
|
|
67
|
+
private _syncLevel;
|
|
58
68
|
private _canShowCheckboxOn;
|
|
59
69
|
private _rootItems;
|
|
60
70
|
private _ensureTabStop;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tree/tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAM1D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpE
|
|
1
|
+
{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tree/tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAM1D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,IAAK,SAAQ,YAAY;IACpC,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,UAAU,CAA0B;IAC5C,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAC7C,OAAO,CAAC,gBAAgB,CAAyB;IAEjD;;;;;;OAMG;IAEH,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAY;IAE7C;;;;OAIG;IAEH,QAAQ,CAAC,WAAW,UAAS;IAEpB,iBAAiB;IAgBjB,oBAAoB;IAMpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAe9C,yEAAyE;IACzE,WAAW,CAAC,EAAE,eAAsB,EAAE;;KAAK,GAAG,QAAQ,EAAE;IAOxD,wCAAwC;IACxC,YAAY,IAAI,QAAQ,EAAE;IAI1B,4CAA4C;IAC5C,SAAS;IAMT,4BAA4B;IAC5B,WAAW;IAQX,OAAO,CAAC,QAAQ;IAoBhB;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,cAAc;IAUtB,2DAA2D;IAC3D,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,aAAa,CAGnB;IAEF,OAAO,CAAC,kBAAkB;IAuB1B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,oBAAoB;IAS5B,0EAA0E;IAC1E,OAAO,CAAC,mBAAmB;IA6B3B,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,QAAQ,CAqDd;IAEF,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,UAAU,CAMhB;IAEF,OAAO,CAAC,UAAU,CAqEhB;IAEO,MAAM;CAahB"}
|
|
@@ -26,6 +26,9 @@ const styles = unsafeCSS(rawStyles);
|
|
|
26
26
|
/**
|
|
27
27
|
* A hierarchical tree view composed of `<l-tree-item>` children.
|
|
28
28
|
*
|
|
29
|
+
* The host carries `role="tree"`, so give it an accessible name with
|
|
30
|
+
* `aria-label` or `aria-labelledby` (e.g. `<l-tree aria-label="Files">`).
|
|
31
|
+
*
|
|
29
32
|
* @slot - One or more `l-tree-item` elements.
|
|
30
33
|
*
|
|
31
34
|
* @csspart base - The root tree container.
|
|
@@ -46,6 +49,7 @@ const styles = unsafeCSS(rawStyles);
|
|
|
46
49
|
export class Tree extends LuxenElement {
|
|
47
50
|
constructor() {
|
|
48
51
|
super(...arguments);
|
|
52
|
+
this._internals = this.attachInternals();
|
|
49
53
|
this._lastFocusedItem = null;
|
|
50
54
|
_Tree_selection_accessor_storage.set(this, 'single');
|
|
51
55
|
_Tree_independent_accessor_storage.set(this, false);
|
|
@@ -214,6 +218,13 @@ export class Tree extends LuxenElement {
|
|
|
214
218
|
set independent(value) { __classPrivateFieldSet(this, _Tree_independent_accessor_storage, value, "f"); }
|
|
215
219
|
connectedCallback() {
|
|
216
220
|
super.connectedCallback();
|
|
221
|
+
this._internals.role = 'tree';
|
|
222
|
+
// Mirror the role to a DOM attribute too. The ElementInternals role alone is
|
|
223
|
+
// not `[role]`-selectable (CSS, querySelector, Cypress/Playwright CSS), which
|
|
224
|
+
// silently breaks consumers migrating from libraries that expose an attribute
|
|
225
|
+
// role. Respect an author-provided role if one is already set.
|
|
226
|
+
if (!this.hasAttribute('role'))
|
|
227
|
+
this.setAttribute('role', 'tree');
|
|
217
228
|
this._mutationObserver = new MutationObserver(() => this._syncAll());
|
|
218
229
|
this._mutationObserver.observe(this, { childList: true, subtree: true });
|
|
219
230
|
this.addEventListener('l-tree-item-toggle', this._onItemToggle);
|
|
@@ -226,6 +237,13 @@ export class Tree extends LuxenElement {
|
|
|
226
237
|
this.removeEventListener('l-tree-item-toggle', this._onItemToggle);
|
|
227
238
|
}
|
|
228
239
|
updated(changed) {
|
|
240
|
+
if (changed.has('selection')) {
|
|
241
|
+
// Mirror to ElementInternals (a11y tree) and a content attribute, so
|
|
242
|
+
// `[aria-multiselectable]` selectors keep matching — see tree-item `_aria`.
|
|
243
|
+
const multiselectable = this.selection === 'multiple' ? 'true' : 'false';
|
|
244
|
+
this._internals.ariaMultiSelectable = multiselectable;
|
|
245
|
+
this.setAttribute('aria-multiselectable', multiselectable);
|
|
246
|
+
}
|
|
229
247
|
if (changed.has('selection') || changed.has('independent')) {
|
|
230
248
|
this._syncAll();
|
|
231
249
|
}
|
|
@@ -267,19 +285,25 @@ export class Tree extends LuxenElement {
|
|
|
267
285
|
return;
|
|
268
286
|
}
|
|
269
287
|
const showCheckbox = this.selection === 'multiple';
|
|
270
|
-
|
|
271
|
-
this._syncSubtree(root, 0, showCheckbox);
|
|
272
|
-
}
|
|
288
|
+
this._syncLevel(roots, 0, showCheckbox);
|
|
273
289
|
this._updateBranchStates();
|
|
274
290
|
// Ensure at least one item is tabbable.
|
|
275
291
|
this._ensureTabStop();
|
|
276
292
|
}
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
293
|
+
/**
|
|
294
|
+
* Sync depth, checkbox visibility and ARIA position for a sibling group, then
|
|
295
|
+
* recurse. `aria-level`/`aria-setsize`/`aria-posinset` let screen readers
|
|
296
|
+
* announce "level N, M of K" — valuable here because `lazy` items mean the
|
|
297
|
+
* full set isn't always in the DOM (see WAI-ARIA Tree View pattern).
|
|
298
|
+
*/
|
|
299
|
+
_syncLevel(items, depth, showCheckbox) {
|
|
300
|
+
const setSize = items.length;
|
|
301
|
+
items.forEach((item, index) => {
|
|
302
|
+
item.depth = depth;
|
|
303
|
+
item.showCheckbox = showCheckbox && this._canShowCheckboxOn(item);
|
|
304
|
+
item.setPosition(depth + 1, index + 1, setSize);
|
|
305
|
+
this._syncLevel(item.getChildrenItems(), depth + 1, showCheckbox);
|
|
306
|
+
});
|
|
283
307
|
}
|
|
284
308
|
_canShowCheckboxOn(_item) {
|
|
285
309
|
if (this.selection !== 'multiple')
|
|
@@ -322,6 +346,10 @@ export class Tree extends LuxenElement {
|
|
|
322
346
|
switch (this.selection) {
|
|
323
347
|
case 'single':
|
|
324
348
|
this._setSingleSelection(item);
|
|
349
|
+
// Mirror the row-click behaviour: activating a branch also toggles it,
|
|
350
|
+
// so keyboard users expand lazy branches (and trigger their fetch) too.
|
|
351
|
+
if (!item.isLeaf())
|
|
352
|
+
item.toggle();
|
|
325
353
|
break;
|
|
326
354
|
case 'leaf':
|
|
327
355
|
if (item.isLeaf())
|
|
@@ -421,8 +449,6 @@ export class Tree extends LuxenElement {
|
|
|
421
449
|
<div
|
|
422
450
|
class="tree"
|
|
423
451
|
part="base"
|
|
424
|
-
role="tree"
|
|
425
|
-
aria-multiselectable=${this.selection === 'multiple' ? 'true' : 'false'}
|
|
426
452
|
@click=${this._onClick}
|
|
427
453
|
@keydown=${this._onKeyDown}
|
|
428
454
|
@focusin=${this._onFocusIn}
|
|
@@ -52,6 +52,13 @@ export declare class TreeItem extends LuxenElement {
|
|
|
52
52
|
set depth(value: number);
|
|
53
53
|
get depth(): number;
|
|
54
54
|
private _depth;
|
|
55
|
+
/**
|
|
56
|
+
* Set by `<l-tree>`: ARIA position within the tree. `level` is 1-based depth,
|
|
57
|
+
* `posInSet`/`setSize` describe the item's rank among its siblings. These let
|
|
58
|
+
* screen readers announce "level 2, 3 of 5" even when `lazy` children keep the
|
|
59
|
+
* full set out of the DOM.
|
|
60
|
+
*/
|
|
61
|
+
setPosition(level: number, posInSet: number, setSize: number): void;
|
|
55
62
|
/** Whether this item has nested tree-item children. */
|
|
56
63
|
get hasChildren(): boolean;
|
|
57
64
|
private _hasChildren;
|
|
@@ -66,9 +73,18 @@ export declare class TreeItem extends LuxenElement {
|
|
|
66
73
|
connectedCallback(): void;
|
|
67
74
|
disconnectedCallback(): void;
|
|
68
75
|
updated(changed: PropertyValues<this>): void;
|
|
76
|
+
/** Leaf items omit `aria-expanded` entirely; branches reflect their state. */
|
|
77
|
+
private _reflectExpanded;
|
|
78
|
+
/**
|
|
79
|
+
* Write an ARIA state to BOTH ElementInternals (the semantic source, in the
|
|
80
|
+
* accessibility tree) and a content attribute (so `[aria-*]` CSS / query / test
|
|
81
|
+
* selectors keep matching — same belt-and-suspenders as the mirrored `role`).
|
|
82
|
+
* A `null` value clears both.
|
|
83
|
+
*/
|
|
84
|
+
private _aria;
|
|
69
85
|
private _setState;
|
|
70
86
|
private _syncChildren;
|
|
71
|
-
/** Toggle expand state.
|
|
87
|
+
/** Toggle expand state. Opening a `lazy` item emits `lazy-load` (via `updated`). */
|
|
72
88
|
toggle(): void;
|
|
73
89
|
private _onCheckboxChange;
|
|
74
90
|
render(): import("lit").TemplateResult<1>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tree-item/tree-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAQ7D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,OAAgB,MAAM,4BAA4C;IAElE,OAAO,CAAC,UAAU,CAA0B;IAC5C,OAAO,CAAC,cAAc,CAAC,CAAmB;IAE1C,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,yEAAyE;IAEzE,QAAQ,CAAC,aAAa,UAAS;IAE/B,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,8EAA8E;IAE9E,QAAQ,CAAC,IAAI,UAAS;IAEtB,+DAA+D;IAE/D,QAAQ,CAAC,OAAO,UAAS;IAEzB,sDAAsD;IACtD,IAAI,YAAY,CAAC,KAAK,EAAE,OAAO,EAG9B;IACD,IAAI,YAAY,IAAI,OAAO,CAE1B;IACD,OAAO,CAAC,aAAa,CAAS;IAE9B,mEAAmE;IACnE,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IACD,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,OAAO,CAAC,MAAM,CAAK;IAEnB,uDAAuD;IACvD,IAAI,WAAW,IAAI,OAAO,CAEzB;IACD,OAAO,CAAC,YAAY,CAAS;IAE7B,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,eAAsB,EAAE;;KAAK,GAAG,QAAQ,EAAE;IAO7D,4DAA4D;IAC5D,MAAM,IAAI,OAAO;IAIjB,2CAA2C;IAC3C,YAAY,IAAI,MAAM;IAUb,iBAAiB;
|
|
1
|
+
{"version":3,"file":"tree-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tree-item/tree-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAQ7D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,OAAgB,MAAM,4BAA4C;IAElE,OAAO,CAAC,UAAU,CAA0B;IAC5C,OAAO,CAAC,cAAc,CAAC,CAAmB;IAE1C,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,yEAAyE;IAEzE,QAAQ,CAAC,aAAa,UAAS;IAE/B,oCAAoC;IAEpC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,8EAA8E;IAE9E,QAAQ,CAAC,IAAI,UAAS;IAEtB,+DAA+D;IAE/D,QAAQ,CAAC,OAAO,UAAS;IAEzB,sDAAsD;IACtD,IAAI,YAAY,CAAC,KAAK,EAAE,OAAO,EAG9B;IACD,IAAI,YAAY,IAAI,OAAO,CAE1B;IACD,OAAO,CAAC,aAAa,CAAS;IAE9B,mEAAmE;IACnE,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IACD,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,OAAO,CAAC,MAAM,CAAK;IAEnB;;;;;OAKG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;IAM5D,uDAAuD;IACvD,IAAI,WAAW,IAAI,OAAO,CAEzB;IACD,OAAO,CAAC,YAAY,CAAS;IAE7B,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,eAAsB,EAAE;;KAAK,GAAG,QAAQ,EAAE;IAO7D,4DAA4D;IAC5D,MAAM,IAAI,OAAO;IAIjB,2CAA2C;IAC3C,YAAY,IAAI,MAAM;IAUb,iBAAiB;IAajB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAwB9C,8EAA8E;IAC9E,OAAO,CAAC,gBAAgB;IAIxB;;;;;OAKG;IACH,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,aAAa;IAmBrB,oFAAoF;IACpF,MAAM;IAMN,OAAO,CAAC,iBAAiB,CAUvB;IAEO,MAAM;CAyFhB"}
|