@haiyue/ui 0.1.0 → 0.1.2

package/dist/tabs.js

@@ -1,10 +1,12 @@
-export class GETabs extends HTMLElement {
+export class HYTabs extends HTMLElement {
     _style = document.createElement('style');
     _tabs = document.createElement('div');
     _panels = document.createElement('div');
+    _instanceId = `hy-tabs-${globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)}`;
     _options = [];
+    _pendingFocusValue = null;
     static get observedAttributes() {
-        return ['options', 'value'];
+        return ['options', 'value', 'aria-label'];
     }
     constructor() {
         super();
@@ -18,8 +20,8 @@ export class GETabs extends HTMLElement {
         height: 100%;
         min-width: 0;
         min-height: 0;
-        color: var(--ge-text-color, #d8e2f2);
-        background: var(--ge-panel-bg-color, #171d28);
+        color: var(--hy-text-color, #d8e2f2);
+        background: var(--hy-panel-bg-color, #171d28);
         font: 12px system-ui, sans-serif;
       }
       .tabs {
@@ -27,30 +29,35 @@ export class GETabs extends HTMLElement {
         align-items: end;
         gap: 2px;
         min-width: 0;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
         padding: 4px 6px 0;
-        border-bottom: 1px solid var(--ge-border-color, #303746);
-        background: var(--ge-tabs-bar-bg-color, var(--ge-menu-bg-color, var(--ge-surface-elevated-color, #1b2230)));
+        border-bottom: 1px solid var(--hy-border-color, #303746);
+        background: var(--hy-tabs-bar-bg-color, var(--hy-menu-bg-color, var(--hy-surface-elevated-color, #1b2230)));
       }
       button {
         height: 28px;
         min-width: 0;
+        flex-shrink: 0;
+        white-space: nowrap;
         padding: 0 10px;
         border: 1px solid transparent;
         border-bottom: 0;
         border-radius: 4px 4px 0 0;
-        color: var(--ge-secondary-text-color, #8fa7c8);
+        color: var(--hy-secondary-text-color, #8fa7c8);
         background: transparent;
         font: inherit;
         cursor: pointer;
       }
       button:hover {
-        color: var(--ge-text-color, #d8e2f2);
-        background: var(--ge-hover-bg-color, #222b3a);
+        color: var(--hy-text-color, #d8e2f2);
+        background: var(--hy-hover-bg-color, #222b3a);
       }
       button.active {
-        color: var(--ge-active-text-color, #eef3ff);
-        border-color: var(--ge-border-color, #303746);
-        background: var(--ge-panel-bg-color, #171d28);
+        color: var(--hy-active-text-color, #eef3ff);
+        border-color: var(--hy-border-color, #303746);
+        background: var(--hy-panel-bg-color, #171d28);
       }
       button:disabled {
         opacity: 0.45;
@@ -66,6 +73,7 @@ export class GETabs extends HTMLElement {
       }
     `;
         this._tabs.className = 'tabs';
+        this._tabs.setAttribute('role', 'tablist');
         this._panels.className = 'panels';
         root.append(this._style, this._tabs, this._panels);
     }
@@ -74,11 +82,16 @@ export class GETabs extends HTMLElement {
         this._render();
     }
     attributeChangedCallback(name, _oldValue, newValue) {
+        if (_oldValue === newValue)
+            return;
         if (name === 'options')
             this._readOptionsAttribute();
-        if (name === 'value' && newValue === null && this._options[0]) {
-            this.setAttribute('value', this._options[0].value);
-            return;
+        if (name === 'value' && newValue === null) {
+            const value = this._resolveValue();
+            if (value) {
+                this.setAttribute('value', value);
+                return;
+            }
         }
         this._render();
     }
@@ -87,9 +100,9 @@ export class GETabs extends HTMLElement {
     }
     set options(value) {
         this._options = Array.isArray(value) ? value : [];
-        if (!this._options.some(item => item.value === this.value)) {
-            this.value = this._options[0]?.value ?? '';
-        }
+        const resolved = this._resolveValue();
+        if (resolved !== this.value)
+            this.value = resolved;
         this._render();
     }
     get value() {
@@ -97,12 +110,13 @@ export class GETabs extends HTMLElement {
     }
     set value(value) {
         this.setAttribute('value', value);
-        this._render();
     }
     _syncFromAttributes() {
-        this._readOptionsAttribute();
-        if (!this.value && this._options[0])
-            this.setAttribute('value', this._options[0].value);
+        if (this.hasAttribute('options'))
+            this._readOptionsAttribute();
+        const value = this._resolveValue();
+        if (value !== this.value)
+            this.setAttribute('value', value);
     }
     _readOptionsAttribute() {
         const raw = this.getAttribute('options');
@@ -121,29 +135,79 @@ export class GETabs extends HTMLElement {
                 : [];
         }
         catch (error) {
-            console.warn('Invalid ge-tabs options attribute.', error);
+            console.warn('Invalid hy-tabs options attribute.', error);
         }
     }
     _render() {
+        const focusedValue = this._pendingFocusValue
+            ?? [...this._tabs.querySelectorAll('button')].find(button => button === this.shadowRoot?.activeElement)?.dataset.value
+            ?? null;
+        this._pendingFocusValue = null;
         this._tabs.replaceChildren();
         this._panels.replaceChildren();
-        const value = this.value || this._options[0]?.value || '';
-        for (const option of this._options) {
+        this._tabs.setAttribute('aria-label', this.getAttribute('aria-label') ?? 'Tabs');
+        const enabled = this._options.filter(option => !option.disabled);
+        const value = this._resolveValue(enabled);
+        if (value !== this.value) {
+            this.setAttribute('value', value);
+            return;
+        }
+        const focusValue = enabled.some(option => option.value === value) ? value : enabled[0]?.value;
+        this._options.forEach((option, index) => {
             const button = document.createElement('button');
+            const panel = document.createElement('div');
             button.type = 'button';
+            button.id = `${this._instanceId}-tab-${index}`;
+            button.dataset.value = option.value;
+            button.setAttribute('role', 'tab');
+            button.setAttribute('aria-selected', String(option.value === value));
+            panel.id = `${this._instanceId}-panel-${index}`;
+            panel.hidden = option.value !== value;
+            panel.setAttribute('role', 'tabpanel');
+            panel.setAttribute('aria-labelledby', button.id);
+            button.setAttribute('aria-controls', panel.id);
+            button.tabIndex = option.value === focusValue && !option.disabled ? 0 : -1;
             button.textContent = option.label;
             button.disabled = Boolean(option.disabled);
             button.classList.toggle('active', option.value === value);
             button.addEventListener('click', () => this._select(option.value));
+            button.addEventListener('keydown', event => {
+                if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key) || !enabled.length)
+                    return;
+                event.preventDefault();
+                const position = enabled.findIndex(item => item.value === option.value);
+                const next = event.key === 'Home' ? 0 : event.key === 'End' ? enabled.length - 1
+                    : (position + (event.key === 'ArrowLeft' ? -1 : 1) + enabled.length) % enabled.length;
+                this._pendingFocusValue = enabled[next].value;
+                this._select(enabled[next].value);
+            });
+            const slot = document.createElement('slot');
+            slot.name = option.value;
+            panel.append(slot);
             this._tabs.append(button);
+            this._panels.append(panel);
+        });
+        if (focusedValue) {
+            const restoreValue = enabled.some(option => option.value === focusedValue) ? focusedValue : focusValue;
+            if (restoreValue)
+                this._focusTab(restoreValue);
         }
-        const slot = document.createElement('slot');
-        slot.name = value;
-        this._panels.append(slot);
+    }
+    _focusTab(value) {
+        [...this._tabs.querySelectorAll('button')].find(button => button.dataset.value === value)?.focus();
+    }
+    _resolveValue(enabled = this._options.filter(option => !option.disabled)) {
+        if (enabled.some(option => option.value === this.value))
+            return this.value;
+        if (enabled[0])
+            return enabled[0].value;
+        return '';
     }
     _select(value) {
         if (value === this.value)
             return;
+        if (!this._options.some(option => option.value === value && !option.disabled))
+            return;
         this.setAttribute('value', value);
         const option = this._options.find(item => item.value === value) ?? null;
         this.dispatchEvent(new CustomEvent('tab-change', {
@@ -154,8 +218,8 @@ export class GETabs extends HTMLElement {
     }
 }
 export function defineTabsComponents() {
-    if (!customElements.get('ge-tabs')) {
-        customElements.define('ge-tabs', GETabs);
+    if (!customElements.get('hy-tabs')) {
+        customElements.define('hy-tabs', HYTabs);
     }
 }
 //# sourceMappingURL=tabs.js.map

package/dist/tooltip.d.ts

@@ -1,5 +1,5 @@
-export type GETooltipPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
-export declare class GETooltip extends HTMLElement {
+export type HYTooltipPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
+export declare class HYTooltip extends HTMLElement {
     private readonly _root;
     private readonly _style;
     private readonly _slot;
@@ -15,8 +15,8 @@ export declare class GETooltip extends HTMLElement {
     attributeChangedCallback(name: string): void;
     get label(): string;
     set label(value: string);
-    get placement(): GETooltipPlacement;
-    set placement(value: GETooltipPlacement);
+    get placement(): HYTooltipPlacement;
+    set placement(value: HYTooltipPlacement);
     get delay(): number;
     set delay(value: number);
     get arrow(): boolean;

package/dist/tooltip.js

@@ -17,7 +17,7 @@ const TOOLTIP_PLACEMENTS = new Set([
     'rightTop',
     'rightBottom',
 ]);
-export class GETooltip extends HTMLElement {
+export class HYTooltip extends HTMLElement {
     _root;
     _style = document.createElement('style');
     _slot = document.createElement('slot');
@@ -45,10 +45,10 @@ export class GETooltip extends HTMLElement {
         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));
+        color: var(--hy-tooltip-text-color, #f4f7fb);
+        background: var(--hy-tooltip-bg-color, #0f141c);
+        border: 1px solid var(--hy-tooltip-border-color, rgba(255, 255, 255, 0.08));
+        box-shadow: 0 8px 24px var(--hy-tooltip-shadow-color, rgba(0, 0, 0, 0.35));
         font: 12px system-ui, sans-serif;
         line-height: 1.35;
         width: max-content;
@@ -63,8 +63,8 @@ export class GETooltip extends HTMLElement {
         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));
+        background: var(--hy-tooltip-bg-color, #0f141c);
+        border: solid var(--hy-tooltip-border-color, rgba(255, 255, 255, 0.08));
         border-width: 0 1px 1px 0;
         transform: rotate(45deg);
       }
@@ -279,8 +279,8 @@ function getAlignedLeft(hostRect, tooltipRect, placement) {
     return hostRect.left + (hostRect.width - tooltipRect.width) / 2;
 }
 export function defineTooltipComponents() {
-    if (!customElements.get('ge-tooltip')) {
-        customElements.define('ge-tooltip', GETooltip);
+    if (!customElements.get('hy-tooltip')) {
+        customElements.define('hy-tooltip', HYTooltip);
     }
 }
 //# sourceMappingURL=tooltip.js.map

package/dist/tree-model.d.ts

@@ -1,6 +1,6 @@
-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 declare class GETreeModel {
+import type { FlatTreeNode, HYTreeDropPosition, HYTreeNodeData, IndexedTreeNode } from './tree-types.js';
+/** Mutable hierarchy model owned by hy-tree. It has no DOM dependency and is safe to unit test. */
+export declare class HYTreeModel {
     private _data;
     private readonly _expandedIds;
     private readonly _nodeIndex;
@@ -13,21 +13,29 @@ export declare class GETreeModel {
     get index(): ReadonlyMap<string, IndexedTreeNode>;
     get visibleIndex(): ReadonlyMap<string, number>;
     get isVisibilityDirty(): boolean;
-    setData(data: GETreeNodeData[]): void;
+    setData(data: HYTreeNodeData[]): void;
     invalidateVisibility(): void;
     getVisibleNodes(): readonly FlatTreeNode[];
     getVisibleIds(): readonly string[];
     getIndexedNode(id: string): IndexedTreeNode | null;
     findNode(id: string): {
-        node: GETreeNodeData;
-        parent: GETreeNodeData | null;
+        node: HYTreeNodeData;
+        parent: HYTreeNodeData | null;
     } | null;
     topLevelSelection(ids: Iterable<string>): string[];
     removeNode(id: string): boolean;
-    moveNode(sourceId: string, targetId: string, position: GETreeDropPosition): boolean;
+    moveNode(sourceId: string, targetId: string, position: HYTreeDropPosition): boolean;
+    private _createMovePlan;
+    private _visibleRange;
+    private _resolveMoveDestination;
+    private _refreshMovedSubtree;
     private _refreshSiblingIndexes;
     private _refreshSubtreeIndex;
     private _moveVisibleSubtree;
+    private _removeVisibleRange;
+    private _insertExpandedChildren;
+    private _resolveVisibleInsertAt;
+    private _insertVisibleSubtrees;
     private _collectVisibleSubtree;
     private _visibleSubtreeEnd;
     private _refreshVisibleIndexes;

package/dist/tree-model.js

@@ -1,5 +1,5 @@
-/** Mutable hierarchy model owned by ge-tree. It has no DOM dependency and is safe to unit test. */
-export class GETreeModel {
+/** Mutable hierarchy model owned by hy-tree. It has no DOM dependency and is safe to unit test. */
+export class HYTreeModel {
     _data = [];
     _expandedIds;
     _nodeIndex = new Map();
@@ -87,58 +87,74 @@ export class GETreeModel {
     moveNode(sourceId, targetId, position) {
         this._ensureIndex();
         this.getVisibleNodes();
+        const plan = this._createMovePlan(sourceId, targetId);
+        if (!plan)
+            return false;
+        const destination = this._resolveMoveDestination(plan, position);
+        if (!destination)
+            return false;
+        plan.sourceList.splice(plan.sourceIndex, 1);
+        destination.targetList.splice(destination.insertIndex, 0, plan.source.node);
+        this._refreshSiblingIndexes(plan.sourceList);
+        if (destination.targetList !== plan.sourceList)
+            this._refreshSiblingIndexes(destination.targetList);
+        this._refreshMovedSubtree(plan.source.node, destination.nextParent);
+        this._moveVisibleSubtree(plan.source.node, plan.start, plan.count, destination.nextParent, destination.expandedNextParent);
+        return true;
+    }
+    _createMovePlan(sourceId, targetId) {
         const source = this._nodeIndex.get(sourceId);
         const target = this._nodeIndex.get(targetId);
         if (!source || !target || sourceId === targetId)
-            return false;
+            return null;
         if (target.ancestorIds.includes(sourceId))
-            return false;
+            return null;
         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++;
-            }
+            return null;
+        return { source, target, sourceList, sourceIndex, ...this._visibleRange(source) };
+    }
+    _visibleRange(source) {
+        const start = this._visibleIndex.get(source.node.id) ?? -1;
+        if (start < 0)
+            return { start, count: 0 };
+        let count = 1;
+        while (start + count < this._visibleNodes.length
+            && (this._visibleNodes[start + count]?.depth ?? -1) > source.depth) {
+            count++;
         }
-        sourceList.splice(sourceIndex, 1);
-        let nextParent;
-        let targetList;
-        let insertIndex;
-        let expandedNextParent = false;
+        return { start, count };
+    }
+    _resolveMoveDestination(plan, position) {
         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);
+            plan.target.node.children ??= [];
+            const expandedNextParent = !this._expandedIds.has(plan.target.node.id);
+            this._expandedIds.add(plan.target.node.id);
+            return {
+                nextParent: plan.target.node,
+                targetList: plan.target.node.children,
+                insertIndex: plan.target.node.children.length,
+                expandedNextParent,
+            };
         }
-        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 targetList = plan.target.parent?.children ?? this._data;
+        let targetIndex = plan.target.index;
+        if (plan.sourceList === targetList && plan.sourceIndex < targetIndex)
+            targetIndex--;
+        if (targetIndex < 0)
+            return null;
+        return {
+            nextParent: plan.target.parent,
+            targetList,
+            insertIndex: position === 'before' ? targetIndex : targetIndex + 1,
+            expandedNextParent: false,
+        };
+    }
+    _refreshMovedSubtree(source, nextParent) {
         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;
+        const ancestorIds = parentIndex && nextParent ? [...parentIndex.ancestorIds, nextParent.id] : [];
+        this._refreshSubtreeIndex(source, nextParent, parentIndex ? parentIndex.depth + 1 : 0, ancestorIds);
     }
     _refreshSiblingIndexes(nodes) {
         for (let index = 0; index < nodes.length; index++) {
@@ -167,49 +183,46 @@ export class GETreeModel {
         }
     }
     _moveVisibleSubtree(source, previousStart, previousCount, nextParent, expandedNextParent) {
-        if (previousStart >= 0 && previousCount > 0) {
-            this._visibleNodes.splice(previousStart, previousCount);
-            this._visibleIds.splice(previousStart, previousCount);
-            this._refreshVisibleIndexes(previousStart);
-        }
+        this._removeVisibleRange(previousStart, previousCount);
         if (expandedNextParent && nextParent) {
-            const parentVisible = this._visibleIndex.get(nextParent.id);
-            if (parentVisible === undefined)
-                return;
-            const expandedChildren = [];
-            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);
+            this._insertExpandedChildren(nextParent);
             return;
         }
-        let insertAt = -1;
+        const insertAt = this._resolveVisibleInsertAt(source, nextParent);
+        if (insertAt >= 0)
+            this._insertVisibleSubtrees(insertAt, [source]);
+    }
+    _removeVisibleRange(start, count) {
+        if (start < 0 || count <= 0)
+            return;
+        this._visibleNodes.splice(start, count);
+        this._visibleIds.splice(start, count);
+        this._refreshVisibleIndexes(start);
+    }
+    _insertExpandedChildren(parent) {
+        const parentVisible = this._visibleIndex.get(parent.id);
+        if (parentVisible === undefined)
+            return;
+        this._insertVisibleSubtrees(parentVisible + 1, parent.children ?? []);
+    }
+    _resolveVisibleInsertAt(source, nextParent) {
         const sourceIndex = this._nodeIndex.get(source.id)?.index ?? -1;
+        if (sourceIndex < 0)
+            return -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;
+        if (!nextParent)
+            return sourceIndex === 0 ? 0 : this._visibleSubtreeEnd(siblings[sourceIndex - 1]?.id);
+        const parentVisible = this._visibleIndex.get(nextParent.id);
+        if (parentVisible === undefined || !this._expandedIds.has(nextParent.id))
+            return -1;
+        return sourceIndex === 0
+            ? parentVisible + 1
+            : this._visibleSubtreeEnd(siblings[sourceIndex - 1]?.id);
+    }
+    _insertVisibleSubtrees(insertAt, roots) {
         const moved = [];
-        this._collectVisibleSubtree(source, moved);
+        for (const root of roots)
+            this._collectVisibleSubtree(root, moved);
         if (moved.length === 0)
             return;
         this._visibleNodes.splice(insertAt, 0, ...moved);

package/dist/tree-node.d.ts

@@ -1,11 +1,11 @@
-import type { GETreeNodeData } from './tree-types.js';
-export declare class GETreeNode extends HTMLElement {
+import type { HYTreeNodeData } from './tree-types.js';
+export declare class HYTreeNode extends HTMLElement {
     private readonly _icon;
     private readonly _label;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(): void;
-    set node(value: GETreeNodeData);
+    set node(value: HYTreeNodeData);
     private _sync;
 }

package/dist/tree-node.js

@@ -1,4 +1,4 @@
-export class GETreeNode extends HTMLElement {
+export class HYTreeNode extends HTMLElement {
     _icon = document.createElement('span');
     _label = document.createElement('span');
     static get observedAttributes() {
@@ -22,7 +22,7 @@ export class GETreeNode extends HTMLElement {
         flex: 0 0 16px;
         display: inline-grid;
         place-items: center;
-        color: var(--ge-tree-icon-color, var(--ge-secondary-text-color, #8fa7c8));
+        color: var(--hy-tree-icon-color, var(--hy-secondary-text-color, #8fa7c8));
         font-size: 12px;
       }
       .label {
@@ -32,7 +32,7 @@ export class GETreeNode extends HTMLElement {
         white-space: nowrap;
       }
       :host([selected]) .label {
-        color: var(--ge-selected-text-color, #ffffff);
+        color: var(--hy-selected-text-color, #ffffff);
       }
     `;
         this._icon.className = 'icon';

package/dist/tree-types.d.ts

@@ -1,38 +1,38 @@
-export interface GETreeNodeData {
+export interface HYTreeNodeData {
     id: string;
     label?: string;
     icon?: string;
     expanded?: boolean;
     renderer?: string;
-    children?: GETreeNodeData[];
+    children?: HYTreeNodeData[];
     [key: string]: unknown;
 }
-export type GETreeDropPosition = 'before' | 'after' | 'inside';
-export interface GETreeSelectionChangeDetail {
+export type HYTreeDropPosition = 'before' | 'after' | 'inside';
+export interface HYTreeSelectionChangeDetail {
     selectedId: string | null;
-    node: GETreeNodeData | null;
+    node: HYTreeNodeData | null;
     selectedIds: string[];
-    nodes: GETreeNodeData[];
+    nodes: HYTreeNodeData[];
 }
-export interface GETreeDataChangeDetail {
-    data: GETreeNodeData[];
+export interface HYTreeDataChangeDetail {
+    data: HYTreeNodeData[];
     action?: 'copy' | 'paste' | 'delete' | 'drop';
     sourceId?: string;
     targetId?: string | null;
-    dropPosition?: GETreeDropPosition;
-    pastedNodes?: GETreeNodeData[];
+    dropPosition?: HYTreeDropPosition;
+    pastedNodes?: HYTreeNodeData[];
     deletedIds?: string[];
 }
-export interface GETreeNodeContextMenuDetail {
+export interface HYTreeNodeContextMenuDetail {
     id: string;
-    node: GETreeNodeData;
+    node: HYTreeNodeData;
     selectedIds: string[];
     clientX: number;
     clientY: number;
 }
 export interface FlatTreeNode {
-    node: GETreeNodeData;
-    parent: GETreeNodeData | null;
+    node: HYTreeNodeData;
+    parent: HYTreeNodeData | null;
     depth: number;
 }
 export interface IndexedTreeNode extends FlatTreeNode {