@haiyue/ui 0.1.0

package/src/tooltip.ts

@@ -0,0 +1,321 @@
+export type GETooltipPlacement =
+  | 'top'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottom'
+  | 'bottomLeft'
+  | 'bottomRight'
+  | 'left'
+  | 'leftTop'
+  | 'leftBottom'
+  | 'right'
+  | 'rightTop'
+  | 'rightBottom';
+
+const DEFAULT_DELAY = 1000;
+const VIEWPORT_PADDING = 8;
+const TRIGGER_GAP = 8;
+const ARROW_SIZE = 8;
+const ARROW_OFFSET = 16;
+const TOOLTIP_PLACEMENTS = new Set<GETooltipPlacement>([
+  'top',
+  'topLeft',
+  'topRight',
+  'bottom',
+  'bottomLeft',
+  'bottomRight',
+  'left',
+  'leftTop',
+  'leftBottom',
+  'right',
+  'rightTop',
+  'rightBottom',
+]);
+
+export class GETooltip extends HTMLElement {
+  private readonly _root: ShadowRoot;
+  private readonly _style = document.createElement('style');
+  private readonly _slot = document.createElement('slot');
+  private readonly _tooltip = document.createElement('div');
+  private readonly _content = document.createElement('div');
+  private readonly _arrow = document.createElement('span');
+  private _showTimer: number | null = null;
+  private _visible = false;
+
+  static get observedAttributes(): string[] {
+    return ['label', 'placement', 'delay', 'disabled', 'arrow', 'no-arrow'];
+  }
+
+  constructor() {
+    super();
+    this._root = this.attachShadow({ mode: 'open' });
+    this._style.textContent = `
+      :host {
+        display: inline-block;
+        width: max-content;
+        min-width: 0;
+      }
+      .tooltip {
+        position: fixed;
+        z-index: 10001;
+        box-sizing: border-box;
+        max-width: min(280px, calc(100vw - 16px));
+        padding: 5px 8px;
+        border-radius: 4px;
+        color: var(--ge-tooltip-text-color, #f4f7fb);
+        background: var(--ge-tooltip-bg-color, #0f141c);
+        border: 1px solid var(--ge-tooltip-border-color, rgba(255, 255, 255, 0.08));
+        box-shadow: 0 8px 24px var(--ge-tooltip-shadow-color, rgba(0, 0, 0, 0.35));
+        font: 12px system-ui, sans-serif;
+        line-height: 1.35;
+        width: max-content;
+        white-space: normal;
+        overflow-wrap: anywhere;
+        pointer-events: none;
+        opacity: 0;
+        transform: translate3d(0, -2px, 0);
+        transition: opacity 0.12s ease, transform 0.12s ease;
+      }
+      .arrow {
+        position: absolute;
+        width: ${ARROW_SIZE}px;
+        height: ${ARROW_SIZE}px;
+        background: var(--ge-tooltip-bg-color, #0f141c);
+        border: solid var(--ge-tooltip-border-color, rgba(255, 255, 255, 0.08));
+        border-width: 0 1px 1px 0;
+        transform: rotate(45deg);
+      }
+      .tooltip.no-arrow .arrow {
+        display: none;
+      }
+      .tooltip.visible {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
+    `;
+    this._tooltip.className = 'tooltip';
+    this._tooltip.setAttribute('role', 'tooltip');
+    this._content.className = 'content';
+    this._arrow.className = 'arrow';
+    this._tooltip.append(this._content, this._arrow);
+    this._root.append(this._style, this._slot, this._tooltip);
+  }
+
+  connectedCallback(): void {
+    this.addEventListener('pointerenter', this._onEnter);
+    this.addEventListener('pointerleave', this._onLeave);
+    this.addEventListener('focusin', this._onEnter);
+    this.addEventListener('focusout', this._onLeave);
+    this.addEventListener('keydown', this._onKeyDown);
+    this._syncLabel();
+  }
+
+  disconnectedCallback(): void {
+    this.removeEventListener('pointerenter', this._onEnter);
+    this.removeEventListener('pointerleave', this._onLeave);
+    this.removeEventListener('focusin', this._onEnter);
+    this.removeEventListener('focusout', this._onLeave);
+    this.removeEventListener('keydown', this._onKeyDown);
+    this._clearShowTimer();
+    this._hide();
+  }
+
+  attributeChangedCallback(name: string): void {
+    if (name === 'label') this._syncLabel();
+    if (name === 'arrow' || name === 'no-arrow') this._syncArrow();
+    if ((name === 'placement' || name === 'disabled' || name === 'arrow' || name === 'no-arrow') && this._visible) {
+      this._syncPosition();
+    }
+  }
+
+  get label(): string {
+    return this.getAttribute('label') ?? '';
+  }
+
+  set label(value: string) {
+    if (value) this.setAttribute('label', value);
+    else this.removeAttribute('label');
+  }
+
+  get placement(): GETooltipPlacement {
+    return normalizePlacement(this.getAttribute('placement'));
+  }
+
+  set placement(value: GETooltipPlacement) {
+    this.setAttribute('placement', value);
+  }
+
+  get delay(): number {
+    const value = Number(this.getAttribute('delay'));
+    return Number.isFinite(value) && value >= 0 ? value : DEFAULT_DELAY;
+  }
+
+  set delay(value: number) {
+    this.setAttribute('delay', String(Math.max(0, value)));
+  }
+
+  get arrow(): boolean {
+    if (this.hasAttribute('no-arrow')) return false;
+    const value = this.getAttribute('arrow');
+    return value === null || value !== 'false';
+  }
+
+  set arrow(value: boolean) {
+    if (value) {
+      this.removeAttribute('no-arrow');
+      this.setAttribute('arrow', '');
+    } else {
+      this.setAttribute('arrow', 'false');
+    }
+  }
+
+  private _onEnter = (): void => {
+    if (this.hasAttribute('disabled') || !this.label) return;
+    this._clearShowTimer();
+    this._showTimer = window.setTimeout(() => this._show(), this.delay);
+  };
+
+  private _onLeave = (): void => {
+    this._clearShowTimer();
+    this._hide();
+  };
+
+  private _onKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape') this._hide();
+  };
+
+  private _show(): void {
+    this._showTimer = null;
+    if (!this.isConnected || this.hasAttribute('disabled') || !this.label) return;
+    this._visible = true;
+    this._syncArrow();
+    this._syncPosition();
+    this._tooltip.classList.add('visible');
+    window.addEventListener('scroll', this._onViewportChange, { capture: true, passive: true });
+    window.addEventListener('resize', this._onViewportChange);
+  }
+
+  private _hide(): void {
+    if (!this._visible) return;
+    this._visible = false;
+    this._tooltip.classList.remove('visible');
+    window.removeEventListener('scroll', this._onViewportChange, { capture: true });
+    window.removeEventListener('resize', this._onViewportChange);
+  }
+
+  private _onViewportChange = (): void => {
+    if (this._visible) this._syncPosition();
+  };
+
+  private _syncLabel(): void {
+    this._content.textContent = this.label;
+  }
+
+  private _syncArrow(): void {
+    this._tooltip.classList.toggle('no-arrow', !this.arrow);
+  }
+
+  private _syncPosition(): void {
+    const hostRect = this.getBoundingClientRect();
+    const tooltipRect = this._measureTooltip();
+    const placement = this.placement;
+    let top = getAlignedTop(hostRect, tooltipRect, placement);
+    let left = getAlignedLeft(hostRect, tooltipRect, placement);
+
+    if (placement.startsWith('top')) top = hostRect.top - tooltipRect.height - TRIGGER_GAP;
+    else if (placement.startsWith('bottom')) top = hostRect.bottom + TRIGGER_GAP;
+    else if (placement.startsWith('left')) left = hostRect.left - tooltipRect.width - TRIGGER_GAP;
+    else if (placement.startsWith('right')) left = hostRect.right + TRIGGER_GAP;
+
+    top = clamp(top, VIEWPORT_PADDING, window.innerHeight - tooltipRect.height - VIEWPORT_PADDING);
+    left = clamp(left, VIEWPORT_PADDING, window.innerWidth - tooltipRect.width - VIEWPORT_PADDING);
+    this._tooltip.style.top = `${top}px`;
+    this._tooltip.style.left = `${left}px`;
+    this._syncArrowPosition(hostRect, tooltipRect, top, left, placement);
+  }
+
+  private _syncArrowPosition(
+    hostRect: DOMRect,
+    tooltipRect: DOMRect,
+    top: number,
+    left: number,
+    placement: GETooltipPlacement,
+  ): void {
+    const x = clamp(hostRect.left + hostRect.width / 2 - left - ARROW_SIZE / 2, ARROW_OFFSET, tooltipRect.width - ARROW_OFFSET - ARROW_SIZE);
+    const y = clamp(hostRect.top + hostRect.height / 2 - top - ARROW_SIZE / 2, ARROW_OFFSET, tooltipRect.height - ARROW_OFFSET - ARROW_SIZE);
+    this._arrow.style.inset = 'auto';
+
+    if (placement.startsWith('top')) {
+      this._arrow.style.left = `${x}px`;
+      this._arrow.style.bottom = `${-ARROW_SIZE / 2}px`;
+      this._arrow.style.transform = 'rotate(45deg)';
+      return;
+    }
+
+    if (placement.startsWith('bottom')) {
+      this._arrow.style.left = `${x}px`;
+      this._arrow.style.top = `${-ARROW_SIZE / 2}px`;
+      this._arrow.style.transform = 'rotate(225deg)';
+      return;
+    }
+
+    if (placement.startsWith('left')) {
+      this._arrow.style.top = `${y}px`;
+      this._arrow.style.right = `${-ARROW_SIZE / 2}px`;
+      this._arrow.style.transform = 'rotate(315deg)';
+      return;
+    }
+
+    this._arrow.style.top = `${y}px`;
+    this._arrow.style.left = `${-ARROW_SIZE / 2}px`;
+    this._arrow.style.transform = 'rotate(135deg)';
+  }
+
+  private _measureTooltip(): DOMRect {
+    const previousVisibility = this._tooltip.style.visibility;
+    const previousOpacity = this._tooltip.style.opacity;
+    this._tooltip.style.visibility = 'hidden';
+    this._tooltip.style.opacity = '0';
+    this._tooltip.classList.add('visible');
+    const rect = this._tooltip.getBoundingClientRect();
+    this._tooltip.classList.toggle('visible', this._visible);
+    this._tooltip.style.visibility = previousVisibility;
+    this._tooltip.style.opacity = previousOpacity;
+    return rect;
+  }
+
+  private _clearShowTimer(): void {
+    if (this._showTimer === null) return;
+    window.clearTimeout(this._showTimer);
+    this._showTimer = null;
+  }
+}
+
+function clamp(value: number, min: number, max: number): number {
+  if (max < min) return min;
+  return Math.min(Math.max(value, min), max);
+}
+
+function normalizePlacement(value: string | null): GETooltipPlacement {
+  return value && TOOLTIP_PLACEMENTS.has(value as GETooltipPlacement)
+    ? value as GETooltipPlacement
+    : 'top';
+}
+
+function getAlignedTop(hostRect: DOMRect, tooltipRect: DOMRect, placement: GETooltipPlacement): number {
+  if (placement.endsWith('Top')) return hostRect.top;
+  if (placement.endsWith('Bottom')) return hostRect.bottom - tooltipRect.height;
+  return hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+}
+
+function getAlignedLeft(hostRect: DOMRect, tooltipRect: DOMRect, placement: GETooltipPlacement): number {
+  if (placement.endsWith('Left')) return hostRect.left;
+  if (placement.endsWith('Right')) return hostRect.right - tooltipRect.width;
+  return hostRect.left + (hostRect.width - tooltipRect.width) / 2;
+}
+
+export function defineTooltipComponents(): void {
+  if (!customElements.get('ge-tooltip')) {
+    customElements.define('ge-tooltip', GETooltip);
+  }
+}

package/src/tree-model.ts

@@ -0,0 +1,305 @@
+import type {
+  FlatTreeNode,
+  GETreeDropPosition,
+  GETreeNodeData,
+  IndexedTreeNode,
+} from './tree-types.js';
+
+/** Mutable hierarchy model owned by ge-tree. It has no DOM dependency and is safe to unit test. */
+export class GETreeModel {
+  private _data: GETreeNodeData[] = [];
+  private readonly _expandedIds: Set<string>;
+  private readonly _nodeIndex = new Map<string, IndexedTreeNode>();
+  private readonly _visibleNodes: FlatTreeNode[] = [];
+  private readonly _visibleIds: string[] = [];
+  private readonly _visibleIndex = new Map<string, number>();
+  private _indexDirty = true;
+  private _visibleDirty = true;
+
+  constructor(expandedIds: Set<string>) {
+    this._expandedIds = expandedIds;
+  }
+
+  get index(): ReadonlyMap<string, IndexedTreeNode> {
+    this._ensureIndex();
+    return this._nodeIndex;
+  }
+
+  get visibleIndex(): ReadonlyMap<string, number> {
+    this.getVisibleNodes();
+    return this._visibleIndex;
+  }
+
+  get isVisibilityDirty(): boolean {
+    return this._visibleDirty;
+  }
+
+  setData(data: GETreeNodeData[]): void {
+    this._data = data;
+    this._indexDirty = true;
+    this._visibleDirty = true;
+  }
+
+  invalidateVisibility(): void {
+    this._visibleDirty = true;
+  }
+
+  getVisibleNodes(): readonly FlatTreeNode[] {
+    if (!this._visibleDirty) return this._visibleNodes;
+    this._ensureIndex();
+    this._visibleNodes.length = 0;
+    this._visibleIds.length = 0;
+    this._visibleIndex.clear();
+    const visit = (nodes: GETreeNodeData[], parent: GETreeNodeData | null, depth: number): void => {
+      for (const node of nodes) {
+        this._visibleIndex.set(node.id, this._visibleIds.length);
+        this._visibleNodes.push(this._nodeIndex.get(node.id) ?? { node, parent, depth });
+        this._visibleIds.push(node.id);
+        if (node.children?.length && this._expandedIds.has(node.id)) {
+          visit(node.children, node, depth + 1);
+        }
+      }
+    };
+    visit(this._data, null, 0);
+    this._visibleDirty = false;
+    return this._visibleNodes;
+  }
+
+  getVisibleIds(): readonly string[] {
+    this.getVisibleNodes();
+    return this._visibleIds;
+  }
+
+  getIndexedNode(id: string): IndexedTreeNode | null {
+    this._ensureIndex();
+    return this._nodeIndex.get(id) ?? null;
+  }
+
+  findNode(id: string): { node: GETreeNodeData; parent: GETreeNodeData | null } | null {
+    const found = this.getIndexedNode(id);
+    return found ? { node: found.node, parent: found.parent } : null;
+  }
+
+  topLevelSelection(ids: Iterable<string>): string[] {
+    this._ensureIndex();
+    const existing = [...new Set(ids)].filter(id => this._nodeIndex.has(id));
+    const selected = new Set(existing);
+    return existing.filter(id => {
+      const indexed = this._nodeIndex.get(id);
+      return indexed !== undefined && !indexed.ancestorIds.some(ancestorId => selected.has(ancestorId));
+    });
+  }
+
+  removeNode(id: string): boolean {
+    const found = this.findNode(id);
+    if (!found) return false;
+    const list = found.parent?.children ?? this._data;
+    const index = this._nodeIndex.get(id)?.index ?? -1;
+    if (index < 0) return false;
+    list.splice(index, 1);
+    this.setData(this._data);
+    return true;
+  }
+
+  moveNode(sourceId: string, targetId: string, position: GETreeDropPosition): boolean {
+    this._ensureIndex();
+    this.getVisibleNodes();
+    const source = this._nodeIndex.get(sourceId);
+    const target = this._nodeIndex.get(targetId);
+    if (!source || !target || sourceId === targetId) return false;
+    if (target.ancestorIds.includes(sourceId)) return false;
+
+    const sourceList = source.parent?.children ?? this._data;
+    const sourceIndex = source.index;
+    if (sourceIndex < 0) return false;
+    const previousDepth = source.depth;
+    const visibleStart = this._visibleIndex.get(sourceId) ?? -1;
+    let visibleCount = 0;
+    if (visibleStart >= 0) {
+      visibleCount = 1;
+      while (visibleStart + visibleCount < this._visibleNodes.length
+        && (this._visibleNodes[visibleStart + visibleCount]?.depth ?? -1) > previousDepth) {
+        visibleCount++;
+      }
+    }
+    sourceList.splice(sourceIndex, 1);
+
+    let nextParent: GETreeNodeData | null;
+    let targetList: GETreeNodeData[];
+    let insertIndex: number;
+    let expandedNextParent = false;
+    if (position === 'inside') {
+      target.node.children ??= [];
+      nextParent = target.node;
+      targetList = target.node.children;
+      insertIndex = targetList.length;
+      expandedNextParent = !this._expandedIds.has(target.node.id);
+      this._expandedIds.add(target.node.id);
+    } else {
+      nextParent = target.parent;
+      targetList = target.parent?.children ?? this._data;
+      let targetIndex = target.index;
+      if (sourceList === targetList && sourceIndex < targetIndex) targetIndex--;
+      if (targetIndex < 0) return false;
+      insertIndex = position === 'before' ? targetIndex : targetIndex + 1;
+    }
+    targetList.splice(insertIndex, 0, source.node);
+    this._refreshSiblingIndexes(sourceList);
+    if (targetList !== sourceList) this._refreshSiblingIndexes(targetList);
+    const parentIndex = nextParent ? this._nodeIndex.get(nextParent.id) : null;
+    const ancestorIds = parentIndex ? [...parentIndex.ancestorIds, nextParent!.id] : [];
+    this._refreshSubtreeIndex(
+      source.node,
+      nextParent,
+      parentIndex ? parentIndex.depth + 1 : 0,
+      ancestorIds,
+    );
+    this._moveVisibleSubtree(
+      source.node,
+      visibleStart,
+      visibleCount,
+      nextParent,
+      expandedNextParent,
+    );
+    return true;
+  }
+
+  private _refreshSiblingIndexes(nodes: readonly GETreeNodeData[]): void {
+    for (let index = 0; index < nodes.length; index++) {
+      const item = nodes[index];
+      const indexed = item ? this._nodeIndex.get(item.id) : null;
+      if (indexed) indexed.index = index;
+    }
+  }
+
+  private _refreshSubtreeIndex(
+    node: GETreeNodeData,
+    parent: GETreeNodeData | null,
+    depth: number,
+    ancestorIds: readonly string[],
+  ): void {
+    const indexed = this._nodeIndex.get(node.id);
+    if (!indexed) return;
+    indexed.parent = parent;
+    indexed.depth = depth;
+    indexed.ancestorIds = ancestorIds;
+    const childAncestors = [...ancestorIds, node.id];
+    for (let index = 0; index < (node.children?.length ?? 0); index++) {
+      const child = node.children?.[index];
+      if (!child) continue;
+      const childIndex = this._nodeIndex.get(child.id);
+      if (childIndex) childIndex.index = index;
+      this._refreshSubtreeIndex(child, node, depth + 1, childAncestors);
+    }
+  }
+
+  private _moveVisibleSubtree(
+    source: GETreeNodeData,
+    previousStart: number,
+    previousCount: number,
+    nextParent: GETreeNodeData | null,
+    expandedNextParent: boolean,
+  ): void {
+    if (previousStart >= 0 && previousCount > 0) {
+      this._visibleNodes.splice(previousStart, previousCount);
+      this._visibleIds.splice(previousStart, previousCount);
+      this._refreshVisibleIndexes(previousStart);
+    }
+
+    if (expandedNextParent && nextParent) {
+      const parentVisible = this._visibleIndex.get(nextParent.id);
+      if (parentVisible === undefined) return;
+      const expandedChildren: IndexedTreeNode[] = [];
+      for (const child of nextParent.children ?? []) {
+        this._collectVisibleSubtree(child, expandedChildren);
+      }
+      if (expandedChildren.length === 0) return;
+      const insertAt = parentVisible + 1;
+      this._visibleNodes.splice(insertAt, 0, ...expandedChildren);
+      this._visibleIds.splice(insertAt, 0, ...expandedChildren.map(item => item.node.id));
+      this._refreshVisibleIndexes(insertAt);
+      return;
+    }
+
+    let insertAt = -1;
+    const sourceIndex = this._nodeIndex.get(source.id)?.index ?? -1;
+    const siblings = nextParent?.children ?? this._data;
+    if (sourceIndex >= 0) {
+      if (nextParent) {
+        const parentVisible = this._visibleIndex.get(nextParent.id);
+        if (parentVisible !== undefined && this._expandedIds.has(nextParent.id)) {
+          insertAt = sourceIndex === 0
+            ? parentVisible + 1
+            : this._visibleSubtreeEnd(siblings[sourceIndex - 1]?.id);
+        }
+      } else {
+        insertAt = sourceIndex === 0
+          ? 0
+          : this._visibleSubtreeEnd(siblings[sourceIndex - 1]?.id);
+      }
+    }
+    if (insertAt < 0) return;
+
+    const moved: IndexedTreeNode[] = [];
+    this._collectVisibleSubtree(source, moved);
+    if (moved.length === 0) return;
+    this._visibleNodes.splice(insertAt, 0, ...moved);
+    this._visibleIds.splice(insertAt, 0, ...moved.map(item => item.node.id));
+    this._refreshVisibleIndexes(insertAt);
+  }
+
+  private _collectVisibleSubtree(node: GETreeNodeData, result: IndexedTreeNode[]): void {
+    const indexed = this._nodeIndex.get(node.id);
+    if (!indexed) return;
+    result.push(indexed);
+    if (!this._expandedIds.has(node.id)) return;
+    for (const child of node.children ?? []) this._collectVisibleSubtree(child, result);
+  }
+
+  private _visibleSubtreeEnd(id: string | undefined): number {
+    if (!id) return -1;
+    const start = this._visibleIndex.get(id);
+    const depth = this._nodeIndex.get(id)?.depth;
+    if (start === undefined || depth === undefined) return -1;
+    let end = start + 1;
+    while (end < this._visibleNodes.length
+      && (this._visibleNodes[end]?.depth ?? -1) > depth) {
+      end++;
+    }
+    return end;
+  }
+
+  private _refreshVisibleIndexes(start: number): void {
+    for (let index = Math.max(0, start); index < this._visibleIds.length; index++) {
+      const id = this._visibleIds[index];
+      if (id !== undefined) this._visibleIndex.set(id, index);
+    }
+    for (const [id, index] of this._visibleIndex) {
+      if (index < this._visibleIds.length && this._visibleIds[index] === id) continue;
+      this._visibleIndex.delete(id);
+    }
+  }
+
+  private _ensureIndex(): void {
+    if (!this._indexDirty) return;
+    this._nodeIndex.clear();
+    const ancestorIds: string[] = [];
+    const visit = (nodes: GETreeNodeData[], parent: GETreeNodeData | null, depth: number): void => {
+      for (let index = 0; index < nodes.length; index++) {
+        const node = nodes[index];
+        if (!node) continue;
+        this._nodeIndex.set(node.id, { node, parent, depth, ancestorIds: ancestorIds.slice(), index });
+        if (node.children?.length) {
+          ancestorIds.push(node.id);
+          visit(node.children, node, depth + 1);
+          ancestorIds.pop();
+        }
+      }
+    };
+    visit(this._data, null, 0);
+    for (const id of this._expandedIds) {
+      if (!this._nodeIndex.has(id)) this._expandedIds.delete(id);
+    }
+    this._indexDirty = false;
+  }
+}

package/src/tree-node.ts

@@ -0,0 +1,67 @@
+import type { GETreeNodeData } from './tree-types.js';
+
+export class GETreeNode extends HTMLElement {
+  private readonly _icon = document.createElement('span');
+  private readonly _label = document.createElement('span');
+
+  static get observedAttributes(): string[] {
+    return ['label', 'icon', 'selected'];
+  }
+
+  constructor() {
+    super();
+    const root = this.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    style.textContent = `
+      :host {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+        gap: 6px;
+        color: inherit;
+        font: inherit;
+      }
+      .icon {
+        width: 16px;
+        flex: 0 0 16px;
+        display: inline-grid;
+        place-items: center;
+        color: var(--ge-tree-icon-color, var(--ge-secondary-text-color, #8fa7c8));
+        font-size: 12px;
+      }
+      .label {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      :host([selected]) .label {
+        color: var(--ge-selected-text-color, #ffffff);
+      }
+    `;
+    this._icon.className = 'icon';
+    this._label.className = 'label';
+    root.append(style, this._icon, this._label);
+  }
+
+  connectedCallback(): void {
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'treeitem');
+    this._sync();
+  }
+
+  attributeChangedCallback(): void {
+    this._sync();
+  }
+
+  set node(value: GETreeNodeData) {
+    this.setAttribute('label', String(value.label ?? value.id));
+    if (value.icon) this.setAttribute('icon', String(value.icon));
+    else this.removeAttribute('icon');
+  }
+
+  private _sync(): void {
+    this._icon.textContent = this.getAttribute('icon') ?? '';
+    this._label.textContent = this.getAttribute('label') ?? '';
+    this.setAttribute('aria-selected', this.hasAttribute('selected') ? 'true' : 'false');
+  }
+}