@iyulab/components 0.4.0 → 1.0.1

package/dist/components/UDataElement.js

@@ -0,0 +1,101 @@
+import { UElement } from "./UElement.js";
+import "./icon/UIcon.js";
+import { buildElementHTML } from "../utilities/elements.js";
+import { styles } from "./UDataElement.styles.js";
+import { html } from "lit";
+//#region src/components/UDataElement.ts
+/**
+* `UDataElement`는 light DOM 내 `<script type="application/json">` 태그에서
+* JSON 데이터를 읽어 컴포넌트 프로퍼티에 자동으로 매핑하는 기반 클래스입니다.
+*
+* 사용 예시:
+* ```html
+* <my-component>
+*   <script type="application/json">{ "items": [1, 2, 3] }<\/script>
+* </my-component>
+* ```
+*
+* JSON 최상위 키가 컴포넌트의 프로퍼티 이름과 일치하면 자동으로 할당됩니다.
+*/
+var UDataElement = class extends UElement {
+	static {
+		this.styles = [super.styles, styles];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		queueMicrotask(() => this.load());
+	}
+	/**
+	* 지정한 태그와 데이터로 커스텀 엘리먼트 HTML 문자열을 생성합니다.
+	* 데이터는 `<script type="application/json">` 태그로 주입됩니다.
+	* 태그이름이 등록되지 않은 경우 빈 문자열을 반환합니다.
+	*
+	* @param json  - JSON 데이터 객체 또는 문자열
+	* @param attrs - 추가 속성 객체 (선택적, `buildElementHTML` 규칙 적용)
+	* @returns 생성된 HTML 문자열
+	*/
+	static buildHTML(json, attrs = {}) {
+		const tag = customElements.getName(this);
+		if (!tag) {
+			console.warn(`Custom element for ${this.name} is not defined.`);
+			return "";
+		}
+		return buildElementHTML(tag, attrs, `<script type="application/json">${(typeof json === "string" ? json : JSON.stringify(json)).replace(/&/g, "\\u0026").replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029").replace(/-->/g, "--\\>")}<\/script>`);
+	}
+	/**
+	* `data` 객체를 컴포넌트 프로퍼티에 할당합니다.
+	* `data`가 제공되지 않은 경우 light DOM 내 `<script type="application/json">` 태그에서 JSON 데이터를 읽어 프로퍼티에 자동으로 할당합니다.
+	* 오류가 발생할 경우 `error()`를 호출하여 에러 UI로 대체합니다.
+	*
+	* @param data - JSON 데이터 객체 (선택적)
+	*/
+	async load(data) {
+		try {
+			if (!data) {
+				const script = this.querySelector("script[type=\"application/json\"]");
+				if (!script) throw new Error("Missing <script type=\"application/json\">");
+				data = JSON.parse(script.textContent ?? "{}");
+				script.remove();
+			}
+			if (typeof data !== "object" || data === null || Array.isArray(data)) throw new Error("Invalid JSON data: expected an object at the top level");
+			Object.assign(this, data);
+		} catch (error) {
+			await this.error(error);
+		}
+	}
+	/**
+	* 오류 발생 시 Lit이 주입한 스타일시트를 보존하고 나머지 렌더링 결과를 에러 UI로 교체합니다.
+	* 일반적으로 JSON 파싱 오류의 경우 `data`가 객체가 아닌 문자열이거나 JSON 형식이 잘못된 경우입니다.
+	* 이 함수는 Lit 렌더링이 완료된 후에 호출됩니다.
+	* 
+	* @param error - 발생한 오류 객체
+	*/
+	async error(error) {
+		await this.updateComplete;
+		if (!this.shadowRoot) return;
+		const tag = this.localName;
+		const type = error instanceof Error ? error.constructor.name : "UnknownError";
+		const message = error instanceof Error ? error.message : String(error);
+		this.replace(html`
+      <div class="error-container">
+        <div class="error-header">
+          <u-icon class="error-icon" lib="internal" name="exclamation-triangle-fill"></u-icon>
+          <span class="error-title">Render Error</span>
+          <code class="error-tag">&lt;${tag}&gt;</code>
+        </div>
+        <div class="error-body">
+          <div class="error-row">
+            <span class="error-label">Type</span>
+            <code class="error-type">${type}</code>
+          </div>
+          <div class="error-row">
+            <span class="error-label">Message</span>
+            <pre class="error-message">${message}</pre>
+          </div>
+        </div>
+      </div>
+    `);
+	}
+};
+//#endregion
+export { UDataElement };

package/dist/components/{UJsonElement.styles.js → UDataElement.styles.js}

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/UDataElement.styles.ts
+var styles = css`
   .error-container {
     display: flex;
     flex-direction: column;
@@ -91,5 +91,5 @@ const styles = css`
     line-height: 1.55;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/UElement.d.ts

@@ -1,35 +1,30 @@
 import { LitElement, CSSResultGroup, RenderOptions } from 'lit';
 /**
- * UElement는 LitElement를 확장한 기본 Web Component 클래스입니다.
- * 이 클래스는 자동으로 종속된 컴포넌트를 정의하며, 유용한 헬퍼 메서드들을 제공합니다.
+ * 모든 UI 컴포넌트의 기반 클래스.
+ * LitElement를 확장하여 이벤트 발행 및 렌더 교체 헬퍼를 제공합니다.
  */
 export declare class UElement extends LitElement {
-    /**
-     * 기본 스타일을 정의합니다.
-     */
     static styles: CSSResultGroup;
     /**
-     * 현재 컴포넌트에 종속된 컴포넌트들을 정의하는 정적 속성입니다.
-     * 이 속성은 컴포넌트가 정의될 때 자동으로 호출되어
-     * 종속된 컴포넌트를 등록합니다.
-     */
-    static dependencies: Record<string, typeof UElement>;
-    constructor();
-    /**
-     * 커스텀 엘리먼트를 정의합니다.
-     * 이미 정의된 엘리먼트는 다시 정의하지 않습니다.
-     * @param name - 커스텀 엘리먼트의 이름
-     * @param options - 엘리먼트 정의 옵션
+     * 커스텀 이벤트를 생성하여 발행합니다.
+     * 기본적으로 bubbles, composed, cancelable이 활성화됩니다.
+     *
+     * @typeParam T - 이벤트 detail의 타입
+     * @param name - 이벤트 이름 (예: 'show')
+     * @param options - CustomEventInit 오버라이드
+     * @returns preventDefault가 호출되지 않았으면 true
      */
-    static define(name: string, options?: ElementDefinitionOptions): void;
+    protected fire<T>(name: string, options?: CustomEventInit): boolean;
     /**
-     * 커스텀 이벤트를 디스패치합니다.
-     * @param name - 이벤트 이름
-     * @param value - 이벤트의 detail에 포함될 데이터
-     * @param options - 추가 이벤트 옵션 (예: bubbles, composed 등)
-     * @returns 이벤트가 성공적으로 디스패치되었는지 여부
+     * 네이티브 이벤트를 호스트 엘리먼트에서 (재)발행합니다.
+     * 기존 이벤트를 전달하면 원본을 중단하고 동일 타입으로 재발행하며,
+     * 새 이벤트를 직접 전달할 수도 있습니다.
+     *
+     * @param event - 재발행할 이벤트 또는 새로 생성한 네이티브 이벤트
+     * @param options - EventInit 오버라이드
+     * @returns preventDefault가 호출되지 않았으면 true
      */
-    protected emit(name: string, value?: any, options?: CustomEventInit): boolean;
+    protected relay(event: Event, options?: EventInit): boolean;
     /**
      * 현재 shadow DOM의 렌더 결과를 지정한 템플릿으로 완전히 교체합니다.
      *

package/dist/components/UElement.js

@@ -1,96 +1,83 @@
-import { LitElement, render } from 'lit';
-import { styles } from './UElement.styles.js';
-
-class UElement extends LitElement {
-  static {
-    /**
-     * 기본 스타일을 정의합니다.
-     */
-    this.styles = styles;
-  }
-  static {
-    /**
-     * 현재 컴포넌트에 종속된 컴포넌트들을 정의하는 정적 속성입니다.
-     * 이 속성은 컴포넌트가 정의될 때 자동으로 호출되어
-     * 종속된 컴포넌트를 등록합니다.
-     */
-    this.dependencies = {};
-  }
-  constructor() {
-    super();
-    Object.entries(this.constructor.dependencies).forEach(([name, component]) => {
-      component.define(name);
-    });
-  }
-  /**
-   * 커스텀 엘리먼트를 정의합니다.
-   * 이미 정의된 엘리먼트는 다시 정의하지 않습니다.
-   * @param name - 커스텀 엘리먼트의 이름
-   * @param options - 엘리먼트 정의 옵션
-   */
-  static define(name, options = {}) {
-    if (!customElements.get(name)) {
-      try {
-        customElements.define(name, this, options);
-      } catch (error) {
-        console.warn(`Failed to register component "${name}":`, error);
-      }
-    }
-  }
-  /**
-   * 커스텀 이벤트를 디스패치합니다.
-   * @param name - 이벤트 이름
-   * @param value - 이벤트의 detail에 포함될 데이터
-   * @param options - 추가 이벤트 옵션 (예: bubbles, composed 등)
-   * @returns 이벤트가 성공적으로 디스패치되었는지 여부
-   */
-  emit(name, value, options) {
-    const event = new CustomEvent(name, {
-      bubbles: true,
-      composed: true,
-      cancelable: false,
-      detail: value,
-      ...options
-    });
-    return this.dispatchEvent(event);
-  }
-  /**
-   * 현재 shadow DOM의 렌더 결과를 지정한 템플릿으로 완전히 교체합니다.
-   *
-   * @param value - Lit 템플릿 결과 또는 기타 렌더링 가능한 값
-   * @param options - Lit의 RenderOptions (예: renderBefore 등)
-   * 
-   * @remarks
-   * Lit은 브라우저 환경에 따라 스타일을 두 가지 방식으로 주입합니다.
-   *
-   * - **모던 브라우저**: `shadowRoot.adoptedStyleSheets`에 `CSSStyleSheet` 객체로 주입.
-   *   이 경우 `<style>` 태그 노드는 존재하지 않으므로 전체 `shadowRoot`를 교체해도 스타일이 유지됩니다.
-   *
-   * - **구형 브라우저 (폴리필 환경)**: `<style>` 태그를 shadow DOM 안에 직접 주입.
-   *  이 경우 `<style>` 태그 노드를 제거하면 스타일이 사라지므로, 에러 UI로 교체할 때는 `<style>` 태그 노드를 보존해야 합니다.
-   *
-   * 따라서 `<style>` 태그 노드는 보존하고 나머지 노드를 제거한 뒤
-   * 에러 div를 append하는 방식으로 양쪽 환경 모두에서 안전하게 동작합니다.
-   *
-   * @example
-   * ```ts
-   * this.replace(html`
-   *   <span class="error">Something went wrong</span>
-   * `);
-   * ```
-   */
-  replace(value, options) {
-    if (!this.shadowRoot) return;
-    Array.from(this.shadowRoot.childNodes).forEach((node) => {
-      if (!(node instanceof HTMLStyleElement)) {
-        node.parentNode?.removeChild(node);
-      }
-    });
-    const container = document.createElement("div");
-    container.style.display = "contents";
-    this.shadowRoot.appendChild(container);
-    render(value, container, options);
-  }
-}
-
+import { styles } from "./UElement.styles.js";
+import { LitElement, render } from "lit";
+//#region src/components/UElement.ts
+/**
+* 모든 UI 컴포넌트의 기반 클래스.
+* LitElement를 확장하여 이벤트 발행 및 렌더 교체 헬퍼를 제공합니다.
+*/
+var UElement = class extends LitElement {
+	static {
+		this.styles = styles;
+	}
+	/**
+	* 커스텀 이벤트를 생성하여 발행합니다.
+	* 기본적으로 bubbles, composed, cancelable이 활성화됩니다.
+	*
+	* @typeParam T - 이벤트 detail의 타입
+	* @param name - 이벤트 이름 (예: 'show')
+	* @param options - CustomEventInit 오버라이드
+	* @returns preventDefault가 호출되지 않았으면 true
+	*/
+	fire(name, options) {
+		return this.dispatchEvent(new CustomEvent(name, {
+			bubbles: true,
+			composed: true,
+			cancelable: true,
+			...options
+		}));
+	}
+	/**
+	* 네이티브 이벤트를 호스트 엘리먼트에서 (재)발행합니다.
+	* 기존 이벤트를 전달하면 원본을 중단하고 동일 타입으로 재발행하며,
+	* 새 이벤트를 직접 전달할 수도 있습니다.
+	*
+	* @param event - 재발행할 이벤트 또는 새로 생성한 네이티브 이벤트
+	* @param options - EventInit 오버라이드
+	* @returns preventDefault가 호출되지 않았으면 true
+	*/
+	relay(event, options) {
+		event.stopImmediatePropagation();
+		const ctor = event.constructor;
+		return this.dispatchEvent(new ctor(event.type, {
+			...event,
+			...options
+		}));
+	}
+	/**
+	* 현재 shadow DOM의 렌더 결과를 지정한 템플릿으로 완전히 교체합니다.
+	*
+	* @param value - Lit 템플릿 결과 또는 기타 렌더링 가능한 값
+	* @param options - Lit의 RenderOptions (예: renderBefore 등)
+	* 
+	* @remarks
+	* Lit은 브라우저 환경에 따라 스타일을 두 가지 방식으로 주입합니다.
+	*
+	* - **모던 브라우저**: `shadowRoot.adoptedStyleSheets`에 `CSSStyleSheet` 객체로 주입.
+	*   이 경우 `<style>` 태그 노드는 존재하지 않으므로 전체 `shadowRoot`를 교체해도 스타일이 유지됩니다.
+	*
+	* - **구형 브라우저 (폴리필 환경)**: `<style>` 태그를 shadow DOM 안에 직접 주입.
+	*  이 경우 `<style>` 태그 노드를 제거하면 스타일이 사라지므로, 에러 UI로 교체할 때는 `<style>` 태그 노드를 보존해야 합니다.
+	*
+	* 따라서 `<style>` 태그 노드는 보존하고 나머지 노드를 제거한 뒤
+	* 에러 div를 append하는 방식으로 양쪽 환경 모두에서 안전하게 동작합니다.
+	*
+	* @example
+	* ```ts
+	* this.replace(html`
+	*   <span class="error">Something went wrong</span>
+	* `);
+	* ```
+	*/
+	replace(value, options) {
+		if (!this.renderRoot) return;
+		Array.from(this.renderRoot.childNodes).forEach((node) => {
+			if (!(node instanceof HTMLStyleElement)) node.parentNode?.removeChild(node);
+		});
+		const container = document.createElement("div");
+		container.style.display = "contents";
+		this.renderRoot.appendChild(container);
+		render(value, container, options);
+	}
+};
+//#endregion
 export { UElement };

package/dist/components/UElement.styles.js

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/UElement.styles.ts
+var styles = css`
   :host {
     color: var(--u-txt-color, inherit);
     font-family: var(--u-font-base, inherit);
@@ -15,14 +15,53 @@ const styles = css`
     overflow-wrap: inherit;
   }
 
+  /* Focus Styles */
+  :host(:focus-visible) {
+    outline: 2px solid var(--u-blue-500);
+    outline-offset: 2px;
+  }
+  :focus-visible {
+    outline: 2px solid var(--u-blue-500);
+    outline-offset: 2px;
+  }
+
+  /* Hidden Attribute */
+  :host([hidden]) {
+    display: none !important;
+  }
   [hidden] {
     display: none !important;
   }
 
+  /* Scrollbar Styles */
+  :host([scrollable]) {
+    scrollbar-width: thin;
+    scrollbar-color: var(--u-scrollbar-color) var(--u-scrollbar-track-color);
+  }
+  :host([scrollable])::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  :host([scrollable])::-webkit-scrollbar-thumb {
+    background: var(--u-scrollbar-color);
+  }
+  :host([scrollable])::-webkit-scrollbar-track {
+    background: var(--u-scrollbar-track-color);
+  }
   [scrollable] {
     scrollbar-width: thin;
     scrollbar-color: var(--u-scrollbar-color) var(--u-scrollbar-track-color);
   }
+  [scrollable]::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  [scrollable]::-webkit-scrollbar-thumb {
+    background: var(--u-scrollbar-color);
+  }
+  [scrollable]::-webkit-scrollbar-track {
+    background: var(--u-scrollbar-track-color);
+  }
 `;
-
+//#endregion
 export { styles };

package/dist/components/UFloatingElement.d.ts

@@ -1,46 +1,39 @@
 import { CSSResultGroup, PropertyValues } from 'lit';
-import { Placement, VirtualElement } from '@floating-ui/dom';
+import { OffsetOptions, Placement, VirtualElement } from '@floating-ui/dom';
 import { UElement } from './UElement.js';
+export type FloatingStrategy = 'absolute' | 'fixed';
 /**
  * UFloatingElement는 팝오버, 툴팁 등 화면에 떠 있는 엘리먼트를 구현하기 위한 기본 클래스입니다.
  * 이 클래스를 상속하여 커스텀 팝오버 컴포넌트를 만들 수 있습니다.
  *
- * 1. for, anchor 속성을 통해 연결될 대상 엘리먼트를 지정할 수 있습니다.
- * 2. visible 속성을 통해 엘리먼트의 표시 여부를 제어할 수 있습니다.
- * 3. show() 및 hide() 메서드를 통해 프로그래밍적으로 표시하거나 숨길 수 있습니다.
- * 4. strategy, placement, distance, shift 속성을 통해 표시 위치 결정 방식을 설정할 수 있습니다.
+ * @event show - 엘리먼트가 표시되기 전에 발생합니다. 이벤트 핸들러에서 false를 반환하면 표시가 취소됩니다.
+ * @event hide - 엘리먼트가 숨겨지기 전에 발생합니다. 이벤트 핸들러에서 false를 반환하면 숨김이 취소됩니다.
  */
 export declare class UFloatingElement extends UElement {
-    /** 기본 스타일을 정의합니다. */
     static styles: CSSResultGroup;
-    /** 종속된 컴포넌트를 정의합니다. */
-    static dependencies: Record<string, typeof UElement>;
-    private rafId;
-    private cleanup;
     /**
-     * 엘리먼트가 떠 있는 동안의 대상 엘리먼트 입니다.
+     * 현재 엘리먼트가 보여지는지 여부입니다.
+     *
+     * @default false
      */
-    target?: HTMLElement | VirtualElement;
+    open: boolean;
     /**
-     * 연결될 대상 엘리먼트 입니다. 지정하지 않으면 부모 엘리먼트가 포함됩니다.
+     * 엘리먼트가 비활성화 상태인지 여부입니다.
+     * true일 경우 엘리먼트가 표시되지 않고, 앵커와의 상호작용도 발생하지 않습니다.
+     *
+     * @default false
      */
-    anchors?: HTMLElement[];
+    disabled: boolean;
     /**
      * 앵커 엘리먼트를 찾기 위한 CSS 선택자입니다. querySelector를 사용하여 DOM에서 대상을 검색합니다.
      *
-     * @example
-     * - `id`로 찾기: for="#target-id"
-     * - `class`로 찾기: for=".target-class"
-     * - `태그명`으로 찾기: for="target-tag-name"
-     * - `속성`으로 찾기: for="[data-role='target']"
+     * @remarks
+     * - `id`로 찾기: "#target-id"
+     * - `class`로 찾기: ".target-class"
+     * - `태그명`으로 찾기: "target-tag-name"
+     * - `속성`으로 찾기: "[data-role='target']"
      */
     for?: string;
-    /**
-     * 현재 엘리먼트가 보여지는지 여부입니다.
-     *
-     * @default false
-     */
-    visible: boolean;
     /**
      * 현재 엘리먼트의 위치 결정 전략입니다.
      *
@@ -48,57 +41,85 @@ export declare class UFloatingElement extends UElement {
      * - `absolute`: 엘리먼트가 문서 흐름에 따라 배치됩니다.
      * - `fixed`: 엘리먼트가 뷰포트에 고정되어 스크롤과 무관하게 위치합니다.
      */
-    strategy: 'absolute' | 'fixed';
+    strategy: FloatingStrategy;
     /**
      * 대상 엘리먼트로부터의 배치 위치입니다.
-     * 지정하지 않으면 `floating-ui`의 `autoPlacement`가 적용됩니다.
+     * 지정하지 않으면 자동으로 가장 적절한 위치가 선택됩니다.
+     *
+     * @default undefined
      */
     placement?: Placement;
     /**
-     * 대상 엘리먼트로부터의 거리 (px) 입니다.
+     * 대상 엘리먼트로부터의 픽셀 단위의 간격입니다.
+     * 상세 간격 조정을 위한 { mainAxis, crossAxis } 형태의 객체도 허용합니다.
      *
      * @default 0
      */
-    distance: number;
+    offset: OffsetOptions;
     /**
-     * 대상 엘리먼트로의 기준축에서의 오프셋 (px) 입니다.
+     * 엘리먼트가 화면 안에 머물도록 자동으로 위치를 조정할지 여부입니다.
      *
-     * @default 0
+     * @default false
      */
-    offset: number;
+    shift: boolean;
     /**
-     * 엘리먼트가 화면 안에 머물도록 자동으로 조정할지 여부입니다.
+     * 화살표를 표시할지 여부입니다. true로 설정하면 화살표 요소가 root 내부에 추가됩니다.
      *
      * @default false
      */
-    shift: boolean;
+    arrow: boolean;
+    /**
+     * 엘리먼트가 표시되기 전 지연 시간(ms)입니다.
+     *
+     * @default 0
+     */
+    showDelay: number;
+    /**
+     * 엘리먼트가 숨겨지기 전 지연 시간(ms)입니다.
+     *
+     * @default 0
+     */
+    hideDelay: number;
+    /** 연결된 엘리먼트 입니다. 기본으로 부모 엘리먼트가 포함됩니다. */
+    anchors?: HTMLElement[];
+    /** 현재 위치에 연결된 타겟 엘리먼트입니다. */
+    protected targetEl?: HTMLElement | VirtualElement;
+    /** arrow를 사용할 때 만들어지는 화살표 엘리먼트입니다. */
+    protected arrowEl?: HTMLElement;
+    private cleanup;
+    private showTimer?;
+    private hideTimer?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
-    protected updated(changedProperties: PropertyValues): void;
-    /**
-     * for 속성에 따라 element를 기준으로 앵커 엘리먼트를 탐색하여 anchors로 설정합니다.
-     */
-    scan(element: Element): void;
     /**
      * 현재 엘리먼트를 표시합니다.
      *
      * @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
-     * @param auto - 표시 후 자동 위치 업데이트 활성화 여부입니다. 기본값은 true 입니다.
+     * @returns 표시 성공 여부를 나타내는 Promise입니다.
      */
-    show(target: Element | VirtualElement, auto?: boolean): Promise<void>;
+    show(target: Element | VirtualElement): Promise<boolean>;
     /**
      * 현재 엘리먼트를 숨깁니다.
+     *
+     * @returns 숨김 성공 여부를 나타내는 Promise입니다.
      */
-    hide(): Promise<void>;
+    hide(): Promise<boolean>;
     /**
-     * `floating-ui` 를 이용하여 위치를 계산하고 style 을 적용합니다.
+     * `@floating-ui/dom` 를 이용하여 위치를 계산하고 style 을 적용합니다.
      *
      * @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
      */
-    protected reposition(target: Element | VirtualElement): Promise<void>;
-    /** 표시 상태 변경 이벤트를 발생시킵니다. */
-    private updateVisibleState;
-    /** 애니메이션 프레임을 사용하여 표시 상태를 스케줄링합니다. */
-    private scheduleVisible;
+    reposition(target: Element | VirtualElement): Promise<void>;
+    /**
+     * 이벤트에서 사용할 가상 타겟 엘리먼트를 생성합니다.
+     *
+     * @param event - 마우스 이벤트 객체입니다.
+     * @returns 가상 타겟 엘리먼트입니다.
+     */
+    protected createVirtualTarget(event: MouseEvent | PointerEvent): VirtualElement;
+    /** arrow 속성의 변경에 따라 화살표 요소를 추가 또는 제거하는 메서드입니다. */
+    private toggleArrowElement;
+    /** 쿼리 선택자를 사용하여 앵커 엘리먼트를 찾습니다. */
+    private getAnchors;
 }