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.
@@ -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. Emits `lazy-load` the first time a lazy item opens."
6433
+ "description": "Toggle expand state. Opening a `lazy` item emits `lazy-load` (via `updated`)."
6409
6434
  }
6410
6435
  ],
6411
6436
  "events": [
@@ -19,6 +19,7 @@
19
19
  line-height: 1.5;
20
20
  color: var(--l-color-text-primary, CanvasText);
21
21
  white-space: nowrap;
22
+ text-align: start;
22
23
  }
23
24
 
24
25
  .item:focus-visible {
@@ -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
- private _syncSubtree;
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;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,IAAK,SAAQ,YAAY;IACpC,OAAgB,MAAM,4BAAwB;IAE9C,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;IAUjB,oBAAoB;IAMpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAQ9C,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;IAsBhB,OAAO,CAAC,YAAY;IAQpB,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;IAoB1B,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;CAehB"}
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
- for (const root of roots) {
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
- _syncSubtree(item, depth, showCheckbox) {
278
- item.depth = depth;
279
- item.showCheckbox = showCheckbox && this._canShowCheckboxOn(item);
280
- for (const child of item.getChildrenItems()) {
281
- this._syncSubtree(child, depth + 1, showCheckbox);
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. Emits `lazy-load` the first time a lazy item opens. */
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;IAQjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAe9C,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,aAAa;IAmBrB,+EAA+E;IAC/E,MAAM;IASN,OAAO,CAAC,iBAAiB,CAUvB;IAEO,MAAM;CAwFhB"}
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"}