@aceshooting/lyra-ui 2.0.0 → 2.2.0

package/dist/components/tree/tree-node.class.d.ts

@@ -0,0 +1,78 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import type { TreeItem } from './tree.class.js';
+/**
+ * `<lyra-tree-node>` — internal recursive renderer for `<lyra-tree>`.
+ *
+ * `role="treeitem"` (plus `aria-expanded`/`aria-level`/`aria-setsize`/
+ * `aria-posinset` and the roving `tabindex`, driven by `<lyra-tree>`) live on
+ * the *host* element, not the internal `[part="row"]` div — that makes this
+ * node's own nested children (rendered in *its own* shadow root as further
+ * `role="group"` content) genuine DOM descendants of the treeitem, which is
+ * what the WAI-ARIA treeitem pattern requires (previously a shadow-root
+ * sibling).
+ *
+ * @customElement lyra-tree-node
+ * @event lyra-node-toggle - `detail: { id, expanded }`, fired when this node is expanded or collapsed (via `expand()`/`collapse()`, the toggle button, or ArrowRight/ArrowLeft).
+ * @event lyra-node-select - `detail: { id }`, fired when this node's primary action is activated (via `select()`, clicking anywhere in its row, or Enter/Space).
+ * @csspart row - The tree row.
+ * @csspart toggle - The expand/collapse button.
+ * @csspart label - The node label.
+ * @csspart badge - The optional node badge.
+ */
+export interface LyraTreeNodeEventMap {
+    'lyra-node-toggle': CustomEvent<{
+        id: string;
+        expanded: boolean;
+    }>;
+    'lyra-node-select': CustomEvent<{
+        id: string;
+    }>;
+}
+export declare class LyraTreeNode extends LyraElement<LyraTreeNodeEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    item: TreeItem;
+    depth: number;
+    expanded: boolean;
+    /** The id of the tree's roving-tabindex-focused item, pushed down from `<lyra-tree>`. */
+    activeId: string | null;
+    setSize: number;
+    posInSet: number;
+    get hasChildren(): boolean;
+    protected willUpdate(): void;
+    /** Expand this node (no-op if already expanded or a leaf). */
+    expand(): void;
+    /** Collapse this node (no-op if already collapsed or a leaf). */
+    collapse(): void;
+    /**
+     * Fire this item's primary "select" action (Enter/Space, or clicking
+     * anywhere in the row). Emits *before* calling `.focus()`: `<lyra-tree>`'s
+     * `onNodeActivate` listener for `lyra-node-select` runs synchronously
+     * (native `dispatchEvent` is sync) and updates `activeId`, which pushes
+     * `tabIndex = 0` down onto this node via its own render -- calling
+     * `.focus()` after that emit, rather than before, means real DOM focus
+     * lands correctly the very first time a previously-inactive node is
+     * clicked, not one render late.
+     */
+    select(): void;
+    /** See `cascadeUpdateComplete` and the matching override on `<lyra-tree>`. */
+    protected getUpdateComplete(): Promise<boolean>;
+    /**
+     * A `<button>` is a real focusable click target even with
+     * `tabindex="-1" aria-hidden="true"` -- only *sequential* (Tab-key)
+     * navigation honors `tabindex="-1"`, a mouse click does not. Left
+     * unguarded, clicking this toggle parks real DOM focus on this hidden,
+     * non-treeitem button instead of the host, which is both an a11y dead end
+     * and invisible to `:host(:focus-visible)`'s ring. `preventDefault()` on
+     * `mousedown` blocks that default focus move; focusing the host instead
+     * keeps focus on the actual `role="treeitem"` element the row represents.
+     */
+    private onToggleMouseDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-tree-node': LyraTreeNode;
+    }
+}
+//# sourceMappingURL=tree-node.class.d.ts.map

package/dist/components/tree/tree-node.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-node.class.d.ts","sourceRoot":"","sources":["../../../src/components/tree/tree-node.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAK7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAmEhD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,oBAAoB;IACnC,kBAAkB,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACnE,kBAAkB,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACjD;AACD,qBAAa,YAAa,SAAQ,WAAW,CAAC,oBAAoB,CAAC;IACjE,MAAM,CAAC,MAAM,iCAAgC;IAEb,IAAI,EAAG,QAAQ,CAAC;IACpB,KAAK,SAAK;IACM,QAAQ,UAAS;IAC7D,yFAAyF;IACzD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjB,OAAO,SAAK;IACZ,QAAQ,SAAK;IAE3D,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,SAAS,CAAC,UAAU,IAAI,IAAI,CAQ3B;IAED,8DAA8D;IAC9D,MAAM,IAAI,IAAI,CAIb;IAED,iEAAiE;IACjE,QAAQ,IAAI,IAAI,CAIf;IAED;;;;;;;;;OASG;IACH,MAAM,IAAI,IAAI,CAGb;IAED,8EAA8E;IAC9E,UAAgB,iBAAiB,IAAI,OAAO,CAAC,OAAO,CAAC,CAMpD;IAED;;;;;;;;;OASG;IACH,OAAO,CAAC,iBAAiB,CAGvB;IAEF,MAAM,IAAI,cAAc,CAoCvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/components/tree/tree-node.class.js

@@ -0,0 +1,204 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { tag } from '../../internal/prefix.js';
+import { chevronIcon } from '../../internal/icons.js';
+import { css } from 'lit';
+import { cascadeUpdateComplete } from './update-cascade.js';
+const styles = css `
+  :host {
+    display: block;
+    outline: none; /* the host is the focusable treeitem; the visible ring lives on [part=row] */
+  }
+  :host(:focus-visible) [part='row'] {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='row'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    /* Depth-based indent is capped at 8rem so a deeply-nested item can't
+       push its content off-screen with no way back; [part=label] below
+       truncates the remaining overflow and tree.styles.ts's [part=base]
+       adds an overflow-x:auto fallback for whatever's left. */
+    padding-inline-start: calc(var(--lyra-space-s) + min(var(--lyra-tree-depth, 0) * 1rem, 8rem));
+    cursor: pointer;
+    border-radius: var(--lyra-radius);
+  }
+  [part='row']:hover {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part='toggle'] {
+    /* Deliberately smaller than the shared --lyra-icon-button-size (2.5rem,
+       for standalone icon-only buttons) — this toggle sits inline in a
+       compact row, but still needs a real touch target, not a 1rem hitbox. */
+    min-inline-size: 1.75rem;
+    min-block-size: 1.75rem;
+    padding: var(--lyra-space-xs);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    color: var(--lyra-color-text-quiet);
+    cursor: pointer;
+    flex: 0 0 auto;
+  }
+  [part='toggle'][hidden] {
+    /* visibility (not display) so the placeholder keeps its layout box --
+       a leaf row still lines up with sibling rows that do have a chevron. */
+    visibility: hidden;
+  }
+  :host([expanded]) [part='toggle'] {
+    transform: rotate(90deg);
+  }
+  [part='label'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [part='badge'] {
+    font-size: 0.75rem;
+    color: var(--lyra-color-text);
+    background: var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    padding: 0 0.35rem;
+  }
+`;
+export class LyraTreeNode extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.depth = 0;
+        this.expanded = false;
+        /** The id of the tree's roving-tabindex-focused item, pushed down from `<lyra-tree>`. */
+        this.activeId = null;
+        this.setSize = 1;
+        this.posInSet = 1;
+        /**
+         * A `<button>` is a real focusable click target even with
+         * `tabindex="-1" aria-hidden="true"` -- only *sequential* (Tab-key)
+         * navigation honors `tabindex="-1"`, a mouse click does not. Left
+         * unguarded, clicking this toggle parks real DOM focus on this hidden,
+         * non-treeitem button instead of the host, which is both an a11y dead end
+         * and invisible to `:host(:focus-visible)`'s ring. `preventDefault()` on
+         * `mousedown` blocks that default focus move; focusing the host instead
+         * keeps focus on the actual `role="treeitem"` element the row represents.
+         */
+        this.onToggleMouseDown = (e) => {
+            e.preventDefault();
+            this.focus();
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    get hasChildren() {
+        return Boolean(this.item.children?.length);
+    }
+    willUpdate() {
+        this.setAttribute('role', 'treeitem');
+        this.setAttribute('aria-level', String(this.depth + 1));
+        this.setAttribute('aria-setsize', String(this.setSize));
+        this.setAttribute('aria-posinset', String(this.posInSet));
+        if (this.hasChildren)
+            this.setAttribute('aria-expanded', String(this.expanded));
+        else
+            this.removeAttribute('aria-expanded');
+        this.tabIndex = this.item?.id === this.activeId ? 0 : -1;
+    }
+    /** Expand this node (no-op if already expanded or a leaf). */
+    expand() {
+        if (!this.hasChildren || this.expanded)
+            return;
+        this.expanded = true;
+        this.emit('lyra-node-toggle', { id: this.item.id, expanded: true });
+    }
+    /** Collapse this node (no-op if already collapsed or a leaf). */
+    collapse() {
+        if (!this.hasChildren || !this.expanded)
+            return;
+        this.expanded = false;
+        this.emit('lyra-node-toggle', { id: this.item.id, expanded: false });
+    }
+    /**
+     * Fire this item's primary "select" action (Enter/Space, or clicking
+     * anywhere in the row). Emits *before* calling `.focus()`: `<lyra-tree>`'s
+     * `onNodeActivate` listener for `lyra-node-select` runs synchronously
+     * (native `dispatchEvent` is sync) and updates `activeId`, which pushes
+     * `tabIndex = 0` down onto this node via its own render -- calling
+     * `.focus()` after that emit, rather than before, means real DOM focus
+     * lands correctly the very first time a previously-inactive node is
+     * clicked, not one render late.
+     */
+    select() {
+        this.emit('lyra-node-select', { id: this.item.id });
+        this.focus();
+    }
+    /** See `cascadeUpdateComplete` and the matching override on `<lyra-tree>`. */
+    async getUpdateComplete() {
+        const result = await super.getUpdateComplete();
+        await cascadeUpdateComplete([...(this.shadowRoot?.querySelectorAll(tag('tree-node')) ?? [])]);
+        return result;
+    }
+    render() {
+        return html `
+      <div part="row" style=${`--lyra-tree-depth:${this.depth}`} @click=${() => this.select()}>
+        <button
+          part="toggle"
+          type="button"
+          tabindex="-1"
+          aria-hidden="true"
+          ?hidden=${!this.hasChildren}
+          @mousedown=${this.onToggleMouseDown}
+          @click=${(e) => {
+            e.stopPropagation();
+            this.expanded ? this.collapse() : this.expand();
+        }}
+        >
+          ${this.hasChildren ? chevronIcon() : nothing}
+        </button>
+        <span part="label">${this.item.label}</span>
+        ${this.item.badge != null ? html `<span part="badge">${this.item.badge}</span>` : nothing}
+      </div>
+      ${this.expanded && this.hasChildren
+            ? html `<div role="group">
+            ${repeat(this.item.children, (child) => child.id, (child, i) => html `<lyra-tree-node
+                .item=${child}
+                .depth=${this.depth + 1}
+                .activeId=${this.activeId}
+                .setSize=${this.item.children.length}
+                .posInSet=${i + 1}
+              ></lyra-tree-node>`)}
+          </div>`
+            : nothing}
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraTreeNode.prototype, "item", void 0);
+__decorate([
+    property({ type: Number })
+], LyraTreeNode.prototype, "depth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraTreeNode.prototype, "expanded", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraTreeNode.prototype, "activeId", void 0);
+__decorate([
+    property({ type: Number, attribute: false })
+], LyraTreeNode.prototype, "setSize", void 0);
+__decorate([
+    property({ type: Number, attribute: false })
+], LyraTreeNode.prototype, "posInSet", void 0);
+//# sourceMappingURL=tree-node.class.js.map

package/dist/components/tree/tree-node.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-node.class.js","sourceRoot":"","sources":["../../../src/components/tree/tree-node.class.ts"],"names":[],"mappings":"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"}

package/dist/components/tree/tree-node.d.ts

@@ -1,65 +1,2 @@
-import { type TemplateResult } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-import type { TreeItem } from './tree.js';
-/**
- * `<lyra-tree-node>` — internal recursive renderer for `<lyra-tree>`.
- *
- * `role="treeitem"` (plus `aria-expanded`/`aria-level`/`aria-setsize`/
- * `aria-posinset` and the roving `tabindex`, driven by `<lyra-tree>`) live on
- * the *host* element, not the internal `[part="row"]` div — that makes this
- * node's own nested children (rendered in *its own* shadow root as further
- * `role="group"` content) genuine DOM descendants of the treeitem, which is
- * what the WAI-ARIA treeitem pattern requires (previously a shadow-root
- * sibling).
- *
- * @customElement lyra-tree-node
- * @event lyra-node-toggle - `detail: { id, expanded }`, fired when this node is expanded or collapsed (via `expand()`/`collapse()`, the toggle button, or ArrowRight/ArrowLeft).
- * @event lyra-node-select - `detail: { id }`, fired when this node's primary action is activated (via `select()`, clicking anywhere in its row, or Enter/Space).
- * @csspart row, toggle, label, badge
- */
-export declare class LyraTreeNode extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    item: TreeItem;
-    depth: number;
-    expanded: boolean;
-    /** The id of the tree's roving-tabindex-focused item, pushed down from `<lyra-tree>`. */
-    activeId: string | null;
-    setSize: number;
-    posInSet: number;
-    get hasChildren(): boolean;
-    protected willUpdate(): void;
-    /** Expand this node (no-op if already expanded or a leaf). */
-    expand(): void;
-    /** Collapse this node (no-op if already collapsed or a leaf). */
-    collapse(): void;
-    /**
-     * Fire this item's primary "select" action (Enter/Space, or clicking
-     * anywhere in the row). Emits *before* calling `.focus()`: `<lyra-tree>`'s
-     * `onNodeActivate` listener for `lyra-node-select` runs synchronously
-     * (native `dispatchEvent` is sync) and updates `activeId`, which pushes
-     * `tabIndex = 0` down onto this node via its own render -- calling
-     * `.focus()` after that emit, rather than before, means real DOM focus
-     * lands correctly the very first time a previously-inactive node is
-     * clicked, not one render late.
-     */
-    select(): void;
-    /** See `cascadeUpdateComplete` and the matching override on `<lyra-tree>`. */
-    protected getUpdateComplete(): Promise<boolean>;
-    /**
-     * A `<button>` is a real focusable click target even with
-     * `tabindex="-1" aria-hidden="true"` -- only *sequential* (Tab-key)
-     * navigation honors `tabindex="-1"`, a mouse click does not. Left
-     * unguarded, clicking this toggle parks real DOM focus on this hidden,
-     * non-treeitem button instead of the host, which is both an a11y dead end
-     * and invisible to `:host(:focus-visible)`'s ring. `preventDefault()` on
-     * `mousedown` blocks that default focus move; focusing the host instead
-     * keeps focus on the actual `role="treeitem"` element the row represents.
-     */
-    private onToggleMouseDown;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-tree-node': LyraTreeNode;
-    }
-}
+export * from './tree-node.class.js';
+//# sourceMappingURL=tree-node.d.ts.map

package/dist/components/tree/tree-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-node.d.ts","sourceRoot":"","sources":["../../../src/components/tree/tree-node.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/components/tree/tree-node.js

@@ -1,220 +1,5 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { LyraElement } from '../../internal/lyra-element.js';
-import { defineElement, tag } from '../../internal/prefix.js';
-import { chevronIcon } from '../../internal/icons.js';
-import { css } from 'lit';
-import { cascadeUpdateComplete } from './update-cascade.js';
-const styles = css `
-  :host {
-    display: block;
-    outline: none; /* the host is the focusable treeitem; the visible ring lives on [part=row] */
-  }
-  :host(:focus-visible) [part='row'] {
-    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
-    outline-offset: var(--lyra-focus-ring-offset);
-  }
-  [part='row'] {
-    display: flex;
-    align-items: center;
-    gap: var(--lyra-space-xs);
-    padding: var(--lyra-space-xs) var(--lyra-space-s);
-    /* Depth-based indent is capped at 8rem so a deeply-nested item can't
-       push its content off-screen with no way back; [part=label] below
-       truncates the remaining overflow and tree.styles.ts's [part=base]
-       adds an overflow-x:auto fallback for whatever's left. */
-    padding-inline-start: calc(var(--lyra-space-s) + min(var(--lyra-tree-depth, 0) * 1rem, 8rem));
-    cursor: pointer;
-    border-radius: var(--lyra-radius);
-  }
-  [part='row']:hover {
-    background: var(--lyra-color-brand-quiet);
-  }
-  [part='toggle'] {
-    /* Deliberately smaller than the shared --lyra-icon-button-size (2.5rem,
-       for standalone icon-only buttons) — this toggle sits inline in a
-       compact row, but still needs a real touch target, not a 1rem hitbox. */
-    min-inline-size: 1.75rem;
-    min-block-size: 1.75rem;
-    padding: var(--lyra-space-xs);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    background: none;
-    color: var(--lyra-color-text-quiet);
-    cursor: pointer;
-    flex: 0 0 auto;
-  }
-  [part='toggle'][hidden] {
-    /* visibility (not display) so the placeholder keeps its layout box --
-       a leaf row still lines up with sibling rows that do have a chevron. */
-    visibility: hidden;
-  }
-  :host([expanded]) [part='toggle'] {
-    transform: rotate(90deg);
-  }
-  [part='label'] {
-    flex: 1 1 auto;
-    min-inline-size: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  [part='badge'] {
-    font-size: 0.75rem;
-    color: var(--lyra-color-text);
-    background: var(--lyra-color-border);
-    border-radius: var(--lyra-radius);
-    padding: 0 0.35rem;
-  }
-`;
-/**
- * `<lyra-tree-node>` — internal recursive renderer for `<lyra-tree>`.
- *
- * `role="treeitem"` (plus `aria-expanded`/`aria-level`/`aria-setsize`/
- * `aria-posinset` and the roving `tabindex`, driven by `<lyra-tree>`) live on
- * the *host* element, not the internal `[part="row"]` div — that makes this
- * node's own nested children (rendered in *its own* shadow root as further
- * `role="group"` content) genuine DOM descendants of the treeitem, which is
- * what the WAI-ARIA treeitem pattern requires (previously a shadow-root
- * sibling).
- *
- * @customElement lyra-tree-node
- * @event lyra-node-toggle - `detail: { id, expanded }`, fired when this node is expanded or collapsed (via `expand()`/`collapse()`, the toggle button, or ArrowRight/ArrowLeft).
- * @event lyra-node-select - `detail: { id }`, fired when this node's primary action is activated (via `select()`, clicking anywhere in its row, or Enter/Space).
- * @csspart row, toggle, label, badge
- */
-export class LyraTreeNode extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.depth = 0;
-        this.expanded = false;
-        /** The id of the tree's roving-tabindex-focused item, pushed down from `<lyra-tree>`. */
-        this.activeId = null;
-        this.setSize = 1;
-        this.posInSet = 1;
-        /**
-         * A `<button>` is a real focusable click target even with
-         * `tabindex="-1" aria-hidden="true"` -- only *sequential* (Tab-key)
-         * navigation honors `tabindex="-1"`, a mouse click does not. Left
-         * unguarded, clicking this toggle parks real DOM focus on this hidden,
-         * non-treeitem button instead of the host, which is both an a11y dead end
-         * and invisible to `:host(:focus-visible)`'s ring. `preventDefault()` on
-         * `mousedown` blocks that default focus move; focusing the host instead
-         * keeps focus on the actual `role="treeitem"` element the row represents.
-         */
-        this.onToggleMouseDown = (e) => {
-            e.preventDefault();
-            this.focus();
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    get hasChildren() {
-        return Boolean(this.item.children?.length);
-    }
-    willUpdate() {
-        this.setAttribute('role', 'treeitem');
-        this.setAttribute('aria-level', String(this.depth + 1));
-        this.setAttribute('aria-setsize', String(this.setSize));
-        this.setAttribute('aria-posinset', String(this.posInSet));
-        if (this.hasChildren)
-            this.setAttribute('aria-expanded', String(this.expanded));
-        else
-            this.removeAttribute('aria-expanded');
-        this.tabIndex = this.item?.id === this.activeId ? 0 : -1;
-    }
-    /** Expand this node (no-op if already expanded or a leaf). */
-    expand() {
-        if (!this.hasChildren || this.expanded)
-            return;
-        this.expanded = true;
-        this.emit('lyra-node-toggle', { id: this.item.id, expanded: true });
-    }
-    /** Collapse this node (no-op if already collapsed or a leaf). */
-    collapse() {
-        if (!this.hasChildren || !this.expanded)
-            return;
-        this.expanded = false;
-        this.emit('lyra-node-toggle', { id: this.item.id, expanded: false });
-    }
-    /**
-     * Fire this item's primary "select" action (Enter/Space, or clicking
-     * anywhere in the row). Emits *before* calling `.focus()`: `<lyra-tree>`'s
-     * `onNodeActivate` listener for `lyra-node-select` runs synchronously
-     * (native `dispatchEvent` is sync) and updates `activeId`, which pushes
-     * `tabIndex = 0` down onto this node via its own render -- calling
-     * `.focus()` after that emit, rather than before, means real DOM focus
-     * lands correctly the very first time a previously-inactive node is
-     * clicked, not one render late.
-     */
-    select() {
-        this.emit('lyra-node-select', { id: this.item.id });
-        this.focus();
-    }
-    /** See `cascadeUpdateComplete` and the matching override on `<lyra-tree>`. */
-    async getUpdateComplete() {
-        const result = await super.getUpdateComplete();
-        await cascadeUpdateComplete([...(this.shadowRoot?.querySelectorAll(tag('tree-node')) ?? [])]);
-        return result;
-    }
-    render() {
-        return html `
-      <div part="row" style=${`--lyra-tree-depth:${this.depth}`} @click=${() => this.select()}>
-        <button
-          part="toggle"
-          type="button"
-          tabindex="-1"
-          aria-hidden="true"
-          ?hidden=${!this.hasChildren}
-          @mousedown=${this.onToggleMouseDown}
-          @click=${(e) => {
-            e.stopPropagation();
-            this.expanded ? this.collapse() : this.expand();
-        }}
-        >
-          ${this.hasChildren ? chevronIcon() : nothing}
-        </button>
-        <span part="label">${this.item.label}</span>
-        ${this.item.badge != null ? html `<span part="badge">${this.item.badge}</span>` : nothing}
-      </div>
-      ${this.expanded && this.hasChildren
-            ? html `<div role="group">
-            ${repeat(this.item.children, (child) => child.id, (child, i) => html `<lyra-tree-node
-                .item=${child}
-                .depth=${this.depth + 1}
-                .activeId=${this.activeId}
-                .setSize=${this.item.children.length}
-                .posInSet=${i + 1}
-              ></lyra-tree-node>`)}
-          </div>`
-            : nothing}
-    `;
-    }
-}
-__decorate([
-    property({ attribute: false })
-], LyraTreeNode.prototype, "item", void 0);
-__decorate([
-    property({ type: Number })
-], LyraTreeNode.prototype, "depth", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraTreeNode.prototype, "expanded", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraTreeNode.prototype, "activeId", void 0);
-__decorate([
-    property({ type: Number, attribute: false })
-], LyraTreeNode.prototype, "setSize", void 0);
-__decorate([
-    property({ type: Number, attribute: false })
-], LyraTreeNode.prototype, "posInSet", void 0);
+export * from './tree-node.class.js';
+import { LyraTreeNode } from './tree-node.class.js';
+import { defineElement } from '../../internal/prefix.js';
 defineElement('tree-node', LyraTreeNode);
+//# sourceMappingURL=tree-node.js.map

package/dist/components/tree/tree-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-node.js","sourceRoot":"","sources":["../../../src/components/tree/tree-node.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC"}