luxen-ui 0.9.1 → 0.9.2

package/dist/elements/tree-item/tree-item.js

@@ -109,6 +109,17 @@ export class TreeItem extends LuxenElement {
     get depth() {
         return this._depth;
     }
+    /**
+     * Set by `<l-tree>`: ARIA position within the tree. `level` is 1-based depth,
+     * `posInSet`/`setSize` describe the item's rank among its siblings. These let
+     * screen readers announce "level 2, 3 of 5" even when `lazy` children keep the
+     * full set out of the DOM.
+     */
+    setPosition(level, posInSet, setSize) {
+        this._aria('ariaLevel', 'aria-level', String(level));
+        this._aria('ariaPosInSet', 'aria-posinset', String(posInSet));
+        this._aria('ariaSetSize', 'aria-setsize', String(setSize));
+    }
     /** Whether this item has nested tree-item children. */
     get hasChildren() {
         return this._hasChildren;
@@ -136,6 +147,12 @@ export class TreeItem extends LuxenElement {
     connectedCallback() {
         super.connectedCallback();
         this._internals.role = 'treeitem';
+        // Mirror the role to a DOM attribute too, so `[role="treeitem"]` selectors
+        // (CSS, querySelector, Cypress/Playwright CSS) keep matching — the
+        // ElementInternals role alone is not attribute-selectable. ARIA states are
+        // mirrored the same way in `_aria()` (aria-expanded/selected/disabled/…).
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'treeitem');
         this._childObserver = new MutationObserver(() => this._syncChildren());
         this._childObserver.observe(this, { childList: true });
         this._syncChildren();
@@ -146,16 +163,42 @@ export class TreeItem extends LuxenElement {
     }
     updated(changed) {
         if (changed.has('expanded')) {
-            this._internals.ariaExpanded = this.isLeaf() ? null : String(this.expanded);
+            this._reflectExpanded();
+            // Emit lazy-load for ANY transition to expanded (keyboard, chevron,
+            // `expandAll()`…), not just `toggle()` — otherwise keyboard users expand a
+            // lazy branch with no children and no fetch. Fires while still `lazy`; the
+            // consumer appends children and clears `lazy`, so it won't re-fire.
+            if (this.expanded && this.lazy)
+                this.emit('lazy-load');
             this.emit(this.expanded ? 'expand' : 'collapse');
         }
         if (changed.has('selected')) {
-            this._internals.ariaSelected = String(this.selected);
+            this._aria('ariaSelected', 'aria-selected', String(this.selected));
         }
         if (changed.has('disabled')) {
-            this._internals.ariaDisabled = this.disabled ? 'true' : null;
+            this._aria('ariaDisabled', 'aria-disabled', this.disabled ? 'true' : null);
+        }
+        if (changed.has('loading')) {
+            this._aria('ariaBusy', 'aria-busy', this.loading ? 'true' : null);
         }
     }
+    /** Leaf items omit `aria-expanded` entirely; branches reflect their state. */
+    _reflectExpanded() {
+        this._aria('ariaExpanded', 'aria-expanded', this.isLeaf() ? null : String(this.expanded));
+    }
+    /**
+     * Write an ARIA state to BOTH ElementInternals (the semantic source, in the
+     * accessibility tree) and a content attribute (so `[aria-*]` CSS / query / test
+     * selectors keep matching — same belt-and-suspenders as the mirrored `role`).
+     * A `null` value clears both.
+     */
+    _aria(key, attr, value) {
+        this._internals[key] = value;
+        if (value === null)
+            this.removeAttribute(attr);
+        else
+            this.setAttribute(attr, value);
+    }
     _setState(name, on) {
         if (!this._internals.states)
             return;
@@ -181,17 +224,14 @@ export class TreeItem extends LuxenElement {
         if (!this._hasChildren && !this.lazy && this.expanded) {
             this.expanded = false;
         }
-        this._internals.ariaExpanded = this.isLeaf() ? null : String(this.expanded);
+        this._reflectExpanded();
     }
-    /** Toggle expand state. Emits `lazy-load` the first time a lazy item opens. */
+    /** Toggle expand state. Opening a `lazy` item emits `lazy-load` (via `updated`). */
     toggle() {
         if (this.isLeaf() && !this.lazy)
             return;
-        const next = !this.expanded;
-        if (next && this.lazy) {
-            this.emit('lazy-load');
-        }
-        this.expanded = next;
+        // lazy-load is emitted centrally from `updated()` on the expand transition.
+        this.expanded = !this.expanded;
     }
     render() {
         return html `
@@ -245,6 +285,7 @@ export class TreeItem extends LuxenElement {
           part="checkbox"
           type="checkbox"
           tabindex="-1"
+          aria-hidden="true"
           .checked=${this.selected}
           .indeterminate=${this.indeterminate}
           ?disabled=${this.disabled}

package/dist/metadata/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.1",
+  "version": "0.9.2",
   "elements": [
     {
       "name": "avatar",
@@ -4017,7 +4017,7 @@
       "tag": "l-tree",
       "nativeTag": null,
       "selector": "l-tree",
-      "summary": "A hierarchical tree view composed of `<l-tree-item>` children.",
+      "summary": "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\">`).",
       "status": "stable",
       "appearances": [],
       "import": {
@@ -4247,6 +4247,25 @@
         }
       ],
       "methods": [
+        {
+          "name": "setPosition",
+          "params": [
+            {
+              "name": "level",
+              "type": "number"
+            },
+            {
+              "name": "posInSet",
+              "type": "number"
+            },
+            {
+              "name": "setSize",
+              "type": "number"
+            }
+          ],
+          "returns": null,
+          "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."
+        },
         {
           "name": "getChildrenItems",
           "params": [
@@ -4274,7 +4293,7 @@
           "name": "toggle",
           "params": [],
           "returns": null,
-          "description": "Toggle expand state. Emits `lazy-load` the first time a lazy item opens."
+          "description": "Toggle expand state. Opening a `lazy` item emits `lazy-load` (via `updated`)."
         }
       ],
       "slots": [

package/dist/metadata/tree-item.json

@@ -106,6 +106,25 @@
     }
   ],
   "methods": [
+    {
+      "name": "setPosition",
+      "params": [
+        {
+          "name": "level",
+          "type": "number"
+        },
+        {
+          "name": "posInSet",
+          "type": "number"
+        },
+        {
+          "name": "setSize",
+          "type": "number"
+        }
+      ],
+      "returns": null,
+      "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."
+    },
     {
       "name": "getChildrenItems",
       "params": [
@@ -133,7 +152,7 @@
       "name": "toggle",
       "params": [],
       "returns": null,
-      "description": "Toggle expand state. Emits `lazy-load` the first time a lazy item opens."
+      "description": "Toggle expand state. Opening a `lazy` item emits `lazy-load` (via `updated`)."
     }
   ],
   "slots": [

package/dist/metadata/tree.json

@@ -6,7 +6,7 @@
   "tag": "l-tree",
   "nativeTag": null,
   "selector": "l-tree",
-  "summary": "A hierarchical tree view composed of `<l-tree-item>` children.",
+  "summary": "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\">`).",
   "status": "stable",
   "appearances": [],
   "import": {

package/dist/templates/elements/tree.md

@@ -286,6 +286,24 @@ A roadmap of phases and tasks, where collapsing folds away phase details for a h
 - `Space` — Activates the item (selects or toggles expansion depending on mode)
 - `*` — Expands all sibling branches of the focused item
 
+### Selectors & testing
+
+Roles and ARIA states are set on `ElementInternals` (the accessibility-tree source) **and** mirrored to DOM attributes, so both `[role]` and `[aria-*]` selectors keep matching in CSS, `querySelector`, and Cypress/Playwright. Selection state is additionally exposed as the reflected `selected`/`expanded`/`disabled`/`indeterminate` boolean attributes (the component's own API).
+
+```js
+document.querySelectorAll('[role="treeitem"]'); // ✅ role is mirrored to an attribute
+document.querySelectorAll('[aria-selected="true"]'); // ✅ ARIA state is mirrored too
+tree.querySelectorAll('l-tree-item[selected]'); // ✅ reflected boolean attribute
+screen.getByRole('treeitem', { selected: true, expanded: true }); // ✅ name + state
+```
+
+```css
+/* Style by ARIA state or the reflected boolean attribute — both work. */
+l-tree-item[aria-selected='true']::part(base) {
+  background: var(--l-color-bg-fill-brand-subtle);
+}
+```
+
 ## API reference
 
 ### Importing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxen-ui",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Modern web components and CSS-first UI library built with Lit. Framework-agnostic, customizable prefix, design tokens.",
   "keywords": [
     "custom-elements",
@@ -161,7 +161,9 @@
     "manifest": "cem analyze",
     "metadata": "pnpm run manifest && node scripts/normalize-metadata.mjs && node scripts/check-metadata.mjs",
     "preview": "vp preview",
-    "test": "vp test run --passWithNoTests",
+    "test": "vp test run --passWithNoTests && vp test run --config vitest.browser.config.ts",
+    "test:unit": "vp test run --passWithNoTests",
+    "test:components": "vp test run --config vitest.browser.config.ts",
     "test:e2e": "playwright test"
   }
 }