@iyulab/components 0.1.3 → 0.1.4

package/dist/components/split-panel/SplitPanel.d.ts

@@ -1,5 +1,4 @@
 import { BaseElement } from '../BaseElement.js';
-import { PanelOrientation } from './SplitPanel.types.js';
 /**
  * SplitPanel 컴포넌트는 화면을 여러 개의 패널로 분할하여 표시합니다.
  */
@@ -7,20 +6,17 @@ export declare class SplitPanel extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     private panels;
-    private splitters;
-    private isDragging;
-    private currentSplitter;
-    private totalSize;
-    private startPosition;
-    private startRatio;
+    private dividers;
+    private panelSizes;
+    private panelAdjustSizes;
     /** 분할 방향을 설정합니다. 'horizontal'은 좌우 분할, 'vertical'은 상하 분할입니다. */
-    orientation: PanelOrientation;
+    orientation: 'horizontal' | 'vertical';
     /** 초기 패널 크기 비율을 설정합니다. (예: [30, 70]은 첫 번째 패널이 30%, 두 번째 패널이 70%를 차지) */
-    ratio: number[];
+    initialRatio: number[];
     disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
+    private getDividerSize;
     private handleSlotChange;
-    private handleMouseDown;
-    private handleMouseMove;
-    private handleMouseUp;
+    /** 디바이더 드래그 이벤트 핸들러 */
+    private handleDividerDrag;
 }

package/dist/components/split-panel/SplitPanel.js

@@ -2,8 +2,8 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { arrayAttributeConverter } from '../../internals/attribute-converters.js';
 import { BaseElement } from '../BaseElement.js';
+import { Divider } from '../divider/Divider.js';
 import { Panel } from '../panel/Panel.js';
-import { Splitter } from './Splitter.js';
 import { styles } from './SplitPanel.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -19,14 +19,11 @@ class SplitPanel extends BaseElement {
   constructor() {
     super(...arguments);
     this.panels = [];
-    this.splitters = [];
-    this.isDragging = false;
-    this.currentSplitter = null;
-    this.totalSize = 0;
-    this.startPosition = 0;
-    this.startRatio = [];
+    this.dividers = [];
+    this.panelSizes = [];
+    this.panelAdjustSizes = [];
     this.orientation = "horizontal";
-    this.ratio = [];
+    this.initialRatio = [];
     this.handleSlotChange = async (e) => {
       const slot = e.target;
       const childrens = slot.assignedElements({ flatten: true });
@@ -34,83 +31,61 @@ class SplitPanel extends BaseElement {
       if (this.panels.length === panels.length && this.panels.every((p, i) => p === panels[i])) {
         return;
       }
-      this.splitters.forEach((splitter) => splitter.remove());
-      this.splitters = [];
       this.panels = panels;
-      panels.forEach((panel, index) => {
-        if (index === panels.length - 1) {
-          return;
-        }
-        const splitter = new Splitter();
-        splitter.orientation = this.orientation;
-        splitter.addEventListener("mousedown", this.handleMouseDown);
-        this.splitters.push(splitter);
-        panel.after(splitter);
-      });
-      if (this.ratio.length === panels.length) {
-        const totalRatio = this.ratio.reduce((sum, r) => sum + r, 0);
-        panels.forEach((panel, i) => {
-          const panelRatio = this.ratio[i] / totalRatio * 100;
-          panel.style.flex = `${panelRatio} 1 0%`;
-        });
-        return;
+      this.dividers.forEach((divider) => divider.remove());
+      this.dividers = [];
+      if (this.initialRatio.length === panels.length) {
+        const totalRatio = this.initialRatio.reduce((sum, r) => sum + r, 0);
+        this.panelSizes = this.initialRatio.map((r) => r / totalRatio * 100);
       } else {
-        panels.forEach((panel) => {
-          panel.style.flex = `${100 / panels.length} 1 0%`;
-        });
+        const equalRatio = 100 / panels.length;
+        this.panelSizes = panels.map(() => equalRatio);
       }
+      this.panelAdjustSizes = panels.map(() => 0);
+      const property2 = this.orientation === "horizontal" ? "width" : "height";
+      const dividerSize = this.getDividerSize();
+      panels.forEach((panel, index) => {
+        const ratio = this.panelSizes[index];
+        panel.style.flex = "none";
+        panel.style[property2] = index === 0 || index === panels.length - 1 ? `calc(${ratio}% - ${dividerSize / 2}px)` : `calc(${ratio}% - ${dividerSize}px)`;
+        if (index === panels.length - 1) return;
+        const divider = new Divider();
+        divider.orientation = this.orientation;
+        divider.draggable = true;
+        divider.addEventListener("u-drag", this.handleDividerDrag);
+        this.dividers.push(divider);
+        panel.after(divider);
+      });
       this.requestUpdate();
       await this.updateComplete;
     };
-    this.handleMouseDown = (e) => {
-      e.preventDefault();
-      const splitter = e.currentTarget;
-      this.currentSplitter = splitter;
-      this.isDragging = true;
-      this.startPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
-      const containerRect = this.getBoundingClientRect();
-      const containerSize = this.orientation === "horizontal" ? containerRect.width : containerRect.height;
-      const splittersSize = this.splitters.reduce((sum, sp) => sum + sp.size, 0);
-      this.totalSize = containerSize - splittersSize;
-      this.startRatio = this.panels.map((panel) => {
-        const rect = panel.getBoundingClientRect();
-        const size = this.orientation === "horizontal" ? rect.width : rect.height;
-        return size / this.totalSize * 100;
-      });
-      splitter.dragging = true;
-      document.addEventListener("mousemove", this.handleMouseMove);
-      document.addEventListener("mouseup", this.handleMouseUp);
-      document.body.style.userSelect = "none";
-      document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
-    };
-    this.handleMouseMove = (e) => {
-      if (!this.isDragging || !this.currentSplitter) return;
-      e.preventDefault();
-      const currentPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
-      const deltaPixels = currentPosition - this.startPosition;
-      const splitterIndex = this.splitters.indexOf(this.currentSplitter);
-      if (splitterIndex === -1) return;
-      const prevPanel = this.panels[splitterIndex];
-      const nextPanel = this.panels[splitterIndex + 1];
-      if (!prevPanel || !nextPanel) return;
-      const deltaRatio = deltaPixels / this.totalSize * 100;
-      const prevRatio = this.startRatio[splitterIndex] + deltaRatio;
-      const nextRatio = this.startRatio[splitterIndex + 1] - deltaRatio;
-      if (prevRatio < 0 || nextRatio < 0) return;
-      prevPanel.style.flex = `${prevRatio} 1 0%`;
-      nextPanel.style.flex = `${nextRatio} 1 0%`;
-    };
-    this.handleMouseUp = (_e) => {
-      if (!this.isDragging) return;
-      this.isDragging = false;
-      if (this.currentSplitter) {
-        this.currentSplitter.dragging = false;
-        this.currentSplitter = null;
+    /** 디바이더 드래그 이벤트 핸들러 */
+    this.handleDividerDrag = (event) => {
+      const divider = event.target;
+      const delta = event.detail.delta;
+      const index = this.dividers.indexOf(divider);
+      if (index === -1) return;
+      const prevPanel = this.panels[index];
+      const nextPanel = this.panels[index + 1];
+      const property2 = this.orientation === "horizontal" ? "width" : "height";
+      const prevPanelSize = this.panelSizes[index];
+      const nextPanelSize = this.panelSizes[index + 1];
+      const prevAdjSize = this.panelAdjustSizes[index] || 0;
+      const nextAdjSize = this.panelAdjustSizes[index + 1] || 0;
+      if (delta === 0) return;
+      if (delta > 0) {
+        const prevNewAdjSize = prevAdjSize + delta;
+        const nextNewAdjSize = nextAdjSize - delta;
+        this.panelAdjustSizes[index] = prevNewAdjSize;
+        this.panelAdjustSizes[index + 1] = nextNewAdjSize;
+      } else {
+        const prevNewAdjSize = prevAdjSize + delta;
+        const nextNewAdjSize = nextAdjSize - delta;
+        this.panelAdjustSizes[index] = prevNewAdjSize;
+        this.panelAdjustSizes[index + 1] = nextNewAdjSize;
       }
-      document.removeEventListener("mousemove", this.handleMouseMove);
-      document.removeEventListener("mouseup", this.handleMouseUp);
-      document.body.style.userSelect = "";
-      document.body.style.cursor = "";
+      prevPanel.style[property2] = `calc(${prevPanelSize}% - ${this.getDividerSize() / 2}px + ${this.panelAdjustSizes[index]}px)`;
+      nextPanel.style[property2] = `calc(${nextPanelSize}% - ${this.getDividerSize() / 2}px + ${this.panelAdjustSizes[index + 1]}px)`;
     };
   }
   static {
@@ -118,17 +93,12 @@ class SplitPanel extends BaseElement {
   }
   static {
     this.dependencies = {
-      "u-panel": Panel,
-      "u-splitter": Splitter
+      "u-divider": Divider,
+      "u-panel": Panel
     };
   }
   disconnectedCallback() {
-    document.removeEventListener("mousemove", this.handleMouseMove);
-    document.removeEventListener("mouseup", this.handleMouseUp);
-    this.splitters.forEach((splitter) => {
-      splitter.removeEventListener("mousedown", this.handleMouseDown);
-      splitter.remove();
-    });
+    this.dividers.forEach((divider) => divider.remove());
     super.disconnectedCallback();
   }
   render() {
@@ -136,12 +106,17 @@ class SplitPanel extends BaseElement {
       <slot @slotchange=${this.handleSlotChange}></slot>
     `;
   }
+  // Get divider size from CSS variable
+  getDividerSize() {
+    const sizeStr = getComputedStyle(this).getPropertyValue("--divider-size").trim();
+    return parseFloat(sizeStr) || 2;
+  }
 }
 __decorateClass([
   property({ type: String, reflect: true })
 ], SplitPanel.prototype, "orientation");
 __decorateClass([
-  property({ type: Array, converter: arrayAttributeConverter(parseFloat) })
-], SplitPanel.prototype, "ratio");
+  property({ type: Array, attribute: "initial-ratio", converter: arrayAttributeConverter(parseFloat) })
+], SplitPanel.prototype, "initialRatio");
 
 export { SplitPanel };

package/dist/components/split-panel/SplitPanel.styles.js

@@ -3,17 +3,32 @@ import { css } from 'lit';
 const styles = css`
   :host {
     position: relative;
-    display: flex;
+    display: block;
     width: 100%;
     height: 100%;
     overflow: hidden;
+
+    --divider-size: 2px;
+    --divider-color: var(--u-neutral-200, #d1d5db);
+    --divider-handle-size: 4px;
+    --divider-handle-color: var(--u-blue-500, #3b82f6);
   }
   :host([orientation="horizontal"]) {
+    display: flex;
     flex-direction: row;
   }
   :host([orientation="vertical"]) {
+    display: flex;
     flex-direction: column;
   }
+
+  ::slotted(u-divider) {
+    background-color: var(--divider-color, var(--u-neutral-200, #d1d5db));
+
+    --divider-size: var(--divider-size, 2px);
+    --handler-size: var(--divider-handle-size, 4px);
+    --handler-color: var(--divider-handle-color, var(--u-blue-500, #3b82f6));
+  }
 `;
 
 export { styles };

package/dist/components/tooltip/Tooltip.d.ts

@@ -7,38 +7,34 @@ import { BaseElement } from '../BaseElement.js';
 export declare class Tooltip extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 슬롯이 비어있는지 여부를 나타냅니다. */
-    private isSlotEmpty;
     /** 툴팁이 연결될 대상 엘리먼트입니다. 지정하지 않으면 부모 엘리먼트가 대상이 됩니다. */
     triggers: HTMLElement[];
     /** 트리거 셀렉터 문자열입니다. 이 속성을 사용하여 트리거 엘리먼트를 지정할 수 있습니다. */
     triggerSelectors?: string;
-    /** 현재 툴팁이 열려있는지 여부를 나타냅니다. */
-    open: boolean;
     /** 'fixed' 위치에서 포지션을 계산할지 여부를 설정합니다. 기본값은 false입니다. */
     hoist: boolean;
     /** 툴팁이 나타날 위치를 설정합니다. */
     placement?: Placement;
     /** 툴팁의 위치에서 대상 엘리먼트까지의 거리를 픽셀단위로 설정합니다. 기본값은 8입니다. */
     distance: number;
+    /** 툴팁의 표시 딜레이 시간을 밀리초 단위로 설정합니다. 기본값은 0입니다. */
+    delay: number;
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     /** 툴팁을 표시합니다. */
-    show: (e?: Event) => Promise<void>;
+    show: (event: Event) => Promise<void>;
     /** 툴팁을 숨깁니다. */
-    hide: (_: Event) => Promise<void>;
+    hide: (event: Event) => Promise<void>;
     /** 대상 엘리먼트에 툴팁 이벤트를 바인딩 합니다. */
     private attachTriggers;
     /** 대상 엘리먼트에 바인딩된 툴팁 이벤트를 제거합니다. */
     private detachTriggers;
     /**
-   * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
-   */
-    private getTransformOrigin;
-    /**
-     * slot에 콘텐츠가 존재하는지 확인합니다.
+     * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
      */
-    private handleSlotChange;
+    private getTransformOrigin;
 }

package/dist/components/tooltip/Tooltip.js

@@ -16,59 +16,55 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 class Tooltip extends BaseElement {
   constructor() {
-    super(...arguments);
-    /** 슬롯이 비어있는지 여부를 나타냅니다. */
-    this.isSlotEmpty = true;
+    super();
     this.triggers = [];
-    this.open = false;
     this.hoist = false;
     this.distance = 8;
+    this.delay = 0;
     /** 툴팁을 표시합니다. */
-    this.show = async (e) => {
+    this.show = async (event) => {
       await this.updateComplete;
-      const trigger = e?.currentTarget || this.triggers[0] || null;
-      if (!trigger || this.isSlotEmpty) return;
+      const trigger = event?.currentTarget;
+      if (trigger instanceof HTMLElement === false) {
+        return;
+      }
       const middleware = [
         offset({ mainAxis: this.distance }),
         shift(),
         flip()
       ];
-      if (!this.placement)
+      if (!this.placement) {
         middleware.push(autoPlacement());
+      }
       const position = await computePosition(trigger, this, {
+        strategy: this.hoist ? "fixed" : "absolute",
         placement: this.placement,
-        middleware,
-        strategy: this.hoist ? "fixed" : "absolute"
+        middleware
       });
       Object.assign(this.style, {
         left: `${position.x}px`,
         top: `${position.y}px`,
         transformOrigin: this.getTransformOrigin(position.placement)
       });
-      await this.updateComplete;
+      if (this.delay > 0) {
+        await new Promise((resolve) => setTimeout(resolve, this.delay));
+      }
       requestAnimationFrame(() => {
-        this.open = true;
+        this.setAttribute("open", "");
       });
     };
     /** 툴팁을 숨깁니다. */
-    this.hide = async (_) => {
+    this.hide = async (event) => {
       await this.updateComplete;
-      requestAnimationFrame(() => {
-        this.open = false;
-      });
-    };
-    /** 
-     * slot에 콘텐츠가 존재하는지 확인합니다. 
-     */
-    this.handleSlotChange = (e) => {
-      const slot = e.target;
-      const nodes = slot.assignedNodes({ flatten: true }) ?? [];
-      this.isSlotEmpty = !nodes.some((node) => {
-        if (node.nodeType === Node.ELEMENT_NODE) return true;
-        if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) return true;
-        return false;
-      });
+      if ("relatedTarget" in event) {
+        const relatedTarget = event["relatedTarget"];
+        if (this.contains(relatedTarget)) {
+          return;
+        }
+      }
+      this.removeAttribute("open");
     };
+    this.setAttribute("tabindex", "0");
   }
   static {
     this.styles = [super.styles, styles];
@@ -82,6 +78,8 @@ class Tooltip extends BaseElement {
       const parent = getParentElement(this);
       if (parent) this.triggers = [parent];
     }
+    this.addEventListener("mouseleave", this.hide);
+    this.addEventListener("focusout", this.hide);
   }
   disconnectedCallback() {
     this.detachTriggers(this.triggers);
@@ -89,18 +87,21 @@ class Tooltip extends BaseElement {
   }
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
-    if (changedProperties.has("triggers") && this.triggers) {
+    if (changedProperties.has("triggerSelectors") && this.triggerSelectors) {
+      this.triggers = findElementsBy(this, this.triggerSelectors);
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("triggers")) {
       const oldTriggers = changedProperties.get("triggers");
       this.detachTriggers(oldTriggers);
       this.attachTriggers(this.triggers);
     }
-    if (changedProperties.has("triggerSelectors") && this.triggerSelectors) {
-      this.triggers = findElementsBy(this, this.triggerSelectors);
-    }
   }
   render() {
     return html`
-      <slot @slotchange=${this.handleSlotChange}></slot>
+      <slot></slot>
     `;
   }
   /** 대상 엘리먼트에 툴팁 이벤트를 바인딩 합니다. */
@@ -124,8 +125,8 @@ class Tooltip extends BaseElement {
     }
   }
   /**
-  * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
-  */
+   * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
+   */
   getTransformOrigin(placement) {
     switch (placement) {
       case "top":
@@ -155,9 +156,6 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "trigger-selectors" })
 ], Tooltip.prototype, "triggerSelectors");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], Tooltip.prototype, "open");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], Tooltip.prototype, "hoist");
@@ -167,5 +165,8 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], Tooltip.prototype, "distance");
+__decorateClass([
+  property({ type: Number })
+], Tooltip.prototype, "delay");
 
 export { Tooltip };

package/dist/components/tooltip/Tooltip.styles.js

@@ -6,9 +6,9 @@ const styles = css`
     z-index: 1000;
     top: 0;
     left: 0;
+
     display: block;
     width: max-content;
-
     padding: 8px;
     color: var(--u-tooltip-text-color);
     font-family: var(--u-font-modern, inherit);
@@ -23,14 +23,14 @@ const styles = css`
     transform: scale(0);
     transition: opacity 0.15s ease, transform 0.15s ease;
   }
+  :host([hoist]) {
+    position: fixed;
+  }
   :host([open]) {
     opacity: 0.8;
     transform: scale(1);
     pointer-events: auto;
   }
-  :host([hoist]) {
-    position: fixed;
-  }
 `;
 
 export { styles };

package/dist/components/tree/Tree.d.ts

@@ -7,33 +7,21 @@ import { TreeItem } from '../tree-item/TreeItem.js';
 export declare class Tree extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    private selectedItems;
+    treeItems: TreeItem[];
     /** 트리가 비활성화 상태인지 여부입니다. */
     disabled: boolean;
     /** 다중 선택을 허용할지 여부입니다. */
     multiple: boolean;
     /** 선택 가능한 트리인지 여부입니다. */
     selectable: boolean;
-    private treeItems;
-    private selectedItems;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 슬롯 변경 이벤트를 처리합니다. */
-    private handleSlotChange;
-    /** 트리 항목의 레벨을 업데이트합니다. */
-    private updateTreeItemsLevel;
     /** 트리 항목 선택 이벤트를 처리합니다. */
     private handleItemSelect;
     /** 트리 항목 확장/축소 이벤트를 처리합니다. */
     private handleItemToggle;
-    /**
-     * 모든 트리 항목을 확장합니다.
-     */
-    expandAll(): void;
-    /**
-     * 모든 트리 항목을 축소합니다.
-     */
-    collapseAll(): void;
     /**
      * 선택된 모든 항목을 반환합니다.
      */

package/dist/components/tree/Tree.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { queryAssignedElements, property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
 import { TreeItem } from '../tree-item/TreeItem.js';
 import { styles } from './Tree.styles.js';
@@ -16,14 +16,10 @@ var __decorateClass = (decorators, target, key, kind) => {
 class Tree extends BaseElement {
   constructor() {
     super(...arguments);
+    this.selectedItems = /* @__PURE__ */ new Set();
     this.disabled = false;
     this.multiple = false;
     this.selectable = true;
-    this.selectedItems = /* @__PURE__ */ new Set();
-    /** 슬롯 변경 이벤트를 처리합니다. */
-    this.handleSlotChange = () => {
-      this.updateTreeItemsLevel();
-    };
     /** 트리 항목 선택 이벤트를 처리합니다. */
     this.handleItemSelect = (e) => {
       if (!this.selectable || this.disabled) {
@@ -84,42 +80,11 @@ class Tree extends BaseElement {
   }
   render() {
     return html`
-      <div class="tree-container">
-        <slot @slotchange=${this.handleSlotChange}></slot>
+      <div class="container">
+        <slot></slot>
       </div>
     `;
   }
-  /** 트리 항목의 레벨을 업데이트합니다. */
-  updateTreeItemsLevel(items = this.treeItems, level = 0) {
-    items.forEach((item) => {
-      if (item instanceof TreeItem) {
-        item.level = level;
-        const childrenSlot = item.shadowRoot?.querySelector('slot[name="children"]');
-        if (childrenSlot) {
-          const children = childrenSlot.assignedElements();
-          if (children.length > 0) {
-            this.updateTreeItemsLevel(children, level + 1);
-          }
-        }
-      }
-    });
-  }
-  /**
-   * 모든 트리 항목을 확장합니다.
-   */
-  expandAll() {
-    this.getAllTreeItems().forEach((item) => {
-      item.expand();
-    });
-  }
-  /**
-   * 모든 트리 항목을 축소합니다.
-   */
-  collapseAll() {
-    this.getAllTreeItems().forEach((item) => {
-      item.collapse();
-    });
-  }
   /**
    * 선택된 모든 항목을 반환합니다.
    */
@@ -143,18 +108,16 @@ class Tree extends BaseElement {
     items.forEach((item) => {
       if (item instanceof TreeItem) {
         allItems.push(item);
-        const childrenSlot = item.shadowRoot?.querySelector('slot[name="children"]');
-        if (childrenSlot) {
-          const children = childrenSlot.assignedElements();
-          if (children.length > 0) {
-            allItems = allItems.concat(this.getAllTreeItems(children));
-          }
-        }
+        const childItems = this.getAllTreeItems(item.childrenItems);
+        allItems = allItems.concat(childItems);
       }
     });
     return allItems;
   }
 }
+__decorateClass([
+  queryAssignedElements({ selector: "u-tree-item" })
+], Tree.prototype, "treeItems");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], Tree.prototype, "disabled");
@@ -164,8 +127,5 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], Tree.prototype, "selectable");
-__decorateClass([
-  queryAssignedElements({ selector: "u-tree-item" })
-], Tree.prototype, "treeItems");
 
 export { Tree };

package/dist/components/tree/Tree.styles.js

@@ -3,8 +3,11 @@ import { css } from 'lit';
 const styles = css`
   :host {
     display: block;
-    width: 100%;
     min-width: 0;
+    width: 100%;
+    padding: 4px;
+    background-color: transparent;
+    border-radius: 4px;
   }
 
   :host([disabled]) {
@@ -13,13 +16,10 @@ const styles = css`
     cursor: not-allowed;
   }
 
-  .tree-container {
+  .container {
     display: flex;
     flex-direction: column;
     gap: 2px;
-    padding: 4px;
-    background-color: transparent;
-    border-radius: 4px;
   }
 `;