@iyulab/components 0.3.0 → 1.0.0

package/dist/assets/icons/pencil-square.svg.js

@@ -1,3 +0,0 @@
-const pencilSquare = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z\"/>\n  <path fill-rule=\"evenodd\" d=\"M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z\"/>\n</svg>";
-
-export { pencilSquare as default };

package/dist/assets/icons/plus-lg.svg.js

@@ -1,3 +0,0 @@
-const plusLg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path fill-rule=\"evenodd\" d=\"M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2\"/>\n</svg>";
-
-export { plusLg as default };

package/dist/assets/icons/search.svg.js

@@ -1,3 +0,0 @@
-const search = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0\"/>\n</svg>";
-
-export { search as default };

package/dist/assets/icons/share.svg.js

@@ -1,3 +0,0 @@
-const share = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5m-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3\"/>\n</svg>";
-
-export { share as default };

package/dist/assets/icons/stop-circle.svg.js

@@ -1,3 +0,0 @@
-const stopCircle = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16\"/>\n  <path d=\"M5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5z\"/>\n</svg>";
-
-export { stopCircle as default };

package/dist/assets/icons/tools.svg.js

@@ -1,3 +0,0 @@
-const tools = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708M3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z\"/>\n</svg>";
-
-export { tools as default };

package/dist/assets/icons/x-lg.svg.js

@@ -1,3 +0,0 @@
-const xLg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z\"/>\n</svg>";
-
-export { xLg as default };

package/dist/assets/styles/dark.css.js

@@ -1,3 +0,0 @@
-const dark = ":root[theme=\"dark\"] {\n  color-scheme: dark;\n\n  /* Neutral Colors */\n  --u-neutral-0:     #000000;\n  --u-neutral-50:    #0A0A0A;\n  --u-neutral-100:   #121212;\n  --u-neutral-200:   #1E1E1E;\n  --u-neutral-300:   #2A2A2A;\n  --u-neutral-400:   #3D3D3D;\n  --u-neutral-500:   #525252;\n  --u-neutral-600:   #6E6E6E;\n  --u-neutral-700:   #8A8A8A;\n  --u-neutral-800:   #B0B0B0;\n  --u-neutral-900:   #D4D4D4;\n  --u-neutral-1000:  #FFFFFF;\n\n  /* Blue Colors */\n  --u-blue-0:        #0A1E3D;\n  --u-blue-100:      #1E3A5F;\n  --u-blue-200:      #2B4F7E;\n  --u-blue-300:      #3D6B9E;\n  --u-blue-400:      #5284BE;\n  --u-blue-500:      #6BA3E3;\n  --u-blue-600:      #87B8F5;\n  --u-blue-700:      #A5CDFF;\n  --u-blue-800:      #C2DEFF;\n  --u-blue-900:      #DDEEFF;\n  --u-blue-1000:     #F0F7FF;\n\n  /* Green Colors */\n  --u-green-0:       #0D2818;\n  --u-green-100:     #1A3F2A;\n  --u-green-200:     #285639;\n  --u-green-300:     #3A7450;\n  --u-green-400:     #4E9268;\n  --u-green-500:     #66B584;\n  --u-green-600:     #81D19D;\n  --u-green-700:     #9FE5B5;\n  --u-green-800:     #BEF2CD;\n  --u-green-900:     #DDF9E5;\n  --u-green-1000:    #F0FDF5;\n\n  /* Yellow Colors */\n  --u-yellow-0:      #2E2200;\n  --u-yellow-100:    #4D3A00;\n  --u-yellow-200:    #6B5200;\n  --u-yellow-300:    #8A6B00;\n  --u-yellow-400:    #B08900;\n  --u-yellow-500:    #D4A712;\n  --u-yellow-600:    #F5C842;\n  --u-yellow-700:    #FFE066;\n  --u-yellow-800:    #FFED99;\n  --u-yellow-900:    #FFF5CC;\n  --u-yellow-1000:   #FFFBE6;\n\n  /* Red Colors */\n  --u-red-0:         #2E0A0A;\n  --u-red-100:       #4D1717;\n  --u-red-200:       #6B2424;\n  --u-red-300:       #8F3535;\n  --u-red-400:       #B24848;\n  --u-red-500:       #D66060;\n  --u-red-600:       #F57878;\n  --u-red-700:       #FF9494;\n  --u-red-800:       #FFB3B3;\n  --u-red-900:       #FFD2D2;\n  --u-red-1000:      #FFF0F0;\n\n  /* text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-100);\n  --u-txt-color-hover:       var(--u-blue-600);\n  --u-txt-color-active:      var(--u-blue-600);\n  --u-txt-color-disabled:    var(--u-neutral-500);\n  --u-txt-color-weak:        var(--u-neutral-700);\n  --u-txt-color-strong:      var(--u-neutral-1000);\n\n  --u-link-txt-color:        var(--u-blue-700);\n  --u-tooltip-txt-color:     var(--u-neutral-100);\n\n  /* Icon Colors */\n  --u-icon-color:            var(--u-neutral-800);\n  --u-icon-color-inverse:    var(--u-neutral-100);\n  --u-icon-color-hover:      var(--u-blue-600);\n  --u-icon-color-active:     var(--u-blue-600);\n  --u-icon-color-disabled:   var(--u-neutral-500);\n\n  /* border Colors */\n  --u-border-color:          var(--u-neutral-400);\n  --u-border-color-weak:     var(--u-neutral-300);\n  --u-border-color-strong:   var(--u-neutral-500);\n\n  --u-input-border-color:         var(--u-neutral-400);\n  --u-input-border-color-hover:   var(--u-neutral-500);\n  --u-input-border-color-focus:   var(--u-blue-600);\n  --u-input-border-color-invalid: var(--u-red-600);\n\n  /* background Colors */\n  --u-bg-color:              var(--u-neutral-100);\n  --u-bg-color-inverse:      var(--u-neutral-0);\n  --u-bg-color-hover:        var(--u-neutral-300);\n  --u-bg-color-active:       var(--u-neutral-400);\n  --u-bg-color-disabled:     var(--u-neutral-100);\n  \n  --u-input-bg-color:        var(--u-neutral-200);\n  --u-panel-bg-color:        var(--u-neutral-200);\n  --u-overlay-bg-color:      rgba(0, 0, 0, 0.7);\n  --u-tooltip-bg-color:      rgba(255, 255, 255, 0.85);\n\n  /* Shadow Colors */\n  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.15);\n  --u-shadow-color-weak:     rgba(0, 0, 0, 0.25);\n  --u-shadow-color-normal:   rgba(0, 0, 0, 0.35);\n  --u-shadow-color-strong:   rgba(0, 0, 0, 0.45);\n  --u-shadow-color-stronger: rgba(0, 0, 0, 0.60);\n\n  /* Scrollbar Colors */\n  --u-scrollbar-color:       var(--u-neutral-500);\n  --u-scrollbar-color-hover: var(--u-neutral-600);\n  --u-scrollbar-track-color: transparent;\n\n  /* Font Styles */\n  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n  --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n  --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;\n  --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n  --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
-
-export { dark as default };

package/dist/assets/styles/light.css.js

@@ -1,3 +0,0 @@
-const light = ":root {\n  color-scheme: light;\n\n  /* Neutral Colors */\n  --u-neutral-0:     #FFFFFF;\n  --u-neutral-50:    #FAFAFA;\n  --u-neutral-100:   #F5F5F5;\n  --u-neutral-200:   #EEEEEE;\n  --u-neutral-300:   #E0E0E0;\n  --u-neutral-400:   #BDBDBD;\n  --u-neutral-500:   #9E9E9E;\n  --u-neutral-600:   #757575;\n  --u-neutral-700:   #616161;\n  --u-neutral-800:   #424242;\n  --u-neutral-900:   #212121;\n  --u-neutral-1000:  #000000;\n\n  /* Blue Colors */\n  --u-blue-0:        #E3F2FD;\n  --u-blue-100:      #BBDEFB;\n  --u-blue-200:      #90CAF9;\n  --u-blue-300:      #64B5F6;\n  --u-blue-400:      #42A5F5;\n  --u-blue-500:      #2196F3;\n  --u-blue-600:      #1E88E5;\n  --u-blue-700:      #1976D2;\n  --u-blue-800:      #1565C0;\n  --u-blue-900:      #0D47A1;\n  --u-blue-1000:     #062A5E;\n\n  /* Green Colors */\n  --u-green-0:       #E8F5E9;\n  --u-green-100:     #C8E6C9;\n  --u-green-200:     #A5D6A7;\n  --u-green-300:     #81C784;\n  --u-green-400:     #66BB6A;\n  --u-green-500:     #4CAF50;\n  --u-green-600:     #43A047;\n  --u-green-700:     #388E3C;\n  --u-green-800:     #2E7D32;\n  --u-green-900:     #1B5E20;\n  --u-green-1000:    #0F3A12;\n\n  /* Yellow Colors */\n  --u-yellow-0:      #FFFDE7;\n  --u-yellow-100:    #FFF9C4;\n  --u-yellow-200:    #FFF59D;\n  --u-yellow-300:    #FFF176;\n  --u-yellow-400:    #FFEE58;\n  --u-yellow-500:    #FFEB3B;\n  --u-yellow-600:    #FDD835;\n  --u-yellow-700:    #FBC02D;\n  --u-yellow-800:    #F9A825;\n  --u-yellow-900:    #F57F17;\n  --u-yellow-1000:   #8A4A00;\n\n  /* Red Colors */\n  --u-red-0:         #FFEBEE;\n  --u-red-100:       #FFCDD2;\n  --u-red-200:       #EF9A9A;\n  --u-red-300:       #E57373;\n  --u-red-400:       #EF5350;\n  --u-red-500:       #F44336;\n  --u-red-600:       #E53935;\n  --u-red-700:       #D32F2F;\n  --u-red-800:       #C62828;\n  --u-red-900:       #B71C1C;\n  --u-red-1000:      #6B0F0F;\n\n  /* text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-0);\n  --u-txt-color-hover:       var(--u-blue-600);\n  --u-txt-color-active:      var(--u-blue-600);\n  --u-txt-color-disabled:    var(--u-neutral-400);\n  --u-txt-color-weak:        var(--u-neutral-700);\n  --u-txt-color-strong:      var(--u-neutral-1000);\n\n  --u-link-txt-color:        var(--u-blue-700);\n  --u-tooltip-txt-color:     var(--u-neutral-0);\n\n  /* Icon Colors */\n  --u-icon-color:            var(--u-neutral-700);\n  --u-icon-color-inverse:    var(--u-neutral-0);\n  --u-icon-color-hover:      var(--u-blue-600);\n  --u-icon-color-active:     var(--u-blue-600);\n  --u-icon-color-disabled:   var(--u-neutral-400);\n\n  /* border Colors */\n  --u-border-color:          var(--u-neutral-300);\n  --u-border-color-weak:     var(--u-neutral-200);\n  --u-border-color-strong:   var(--u-neutral-400);\n\n  --u-input-border-color:         var(--u-neutral-300);\n  --u-input-border-color-hover:   var(--u-neutral-400);\n  --u-input-border-color-focus:   var(--u-blue-600);\n  --u-input-border-color-invalid: var(--u-red-600);\n\n  /* background Colors */\n  --u-bg-color:              var(--u-neutral-0);\n  --u-bg-color-inverse:      var(--u-neutral-900);\n  --u-bg-color-hover:        var(--u-neutral-100);\n  --u-bg-color-active:       var(--u-neutral-200);\n  --u-bg-color-disabled:     var(--u-neutral-50);\n \n  --u-input-bg-color:        var(--u-neutral-0);\n  --u-panel-bg-color:        var(--u-neutral-0);\n  --u-overlay-bg-color:      rgba(0, 0, 0, 0.5);\n  --u-tooltip-bg-color:      rgba(0, 0, 0, 0.75);\n\n  /* Shadow Colors */\n  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.04);\n  --u-shadow-color-weak:     rgba(0, 0, 0, 0.08);\n  --u-shadow-color-normal:   rgba(0, 0, 0, 0.12);\n  --u-shadow-color-strong:   rgba(0, 0, 0, 0.16);\n  --u-shadow-color-stronger: rgba(0, 0, 0, 0.24);\n\n  /* Scrollbar Colors */\n  --u-scrollbar-color:       var(--u-neutral-400);\n  --u-scrollbar-color-hover: var(--u-neutral-500);\n  --u-scrollbar-track-color: transparent;\n\n  /* Font Styles */\n  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n  --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n  --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;\n  --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n  --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
-
-export { light as default };

package/dist/components/BaseElement.d.ts

@@ -1,33 +0,0 @@
-import { CSSResultGroup, LitElement } from 'lit';
-/**
- * BaseElement는 LitElement를 확장한 기본 Web Component 클래스입니다.
- * 이 클래스는 자동으로 종속된 컴포넌트를 정의하며, 유용한 헬퍼 메서드들을 제공합니다.
- */
-export declare class BaseElement extends LitElement {
-    /**
-     * 기본 스타일을 정의합니다.
-     */
-    static styles: CSSResultGroup;
-    /**
-     * 현재 컴포넌트에 종속된 컴포넌트들을 정의하는 정적 속성입니다.
-     * 이 속성은 컴포넌트가 정의될 때 자동으로 호출되어
-     * 종속된 컴포넌트를 등록합니다.
-     */
-    static dependencies: Record<string, typeof BaseElement>;
-    constructor();
-    /**
-     * 커스텀 엘리먼트를 정의합니다.
-     * 이미 정의된 엘리먼트는 다시 정의하지 않습니다.
-     * @param name - 커스텀 엘리먼트의 이름
-     * @param options - 엘리먼트 정의 옵션
-     */
-    static define(name: string, options?: ElementDefinitionOptions): void;
-    /**
-     * 커스텀 이벤트를 디스패치합니다.
-     * @param name - 이벤트 이름
-     * @param value - 이벤트의 detail에 포함될 데이터
-     * @param options - 추가 이벤트 옵션 (예: bubbles, composed 등)
-     * @returns 이벤트가 성공적으로 디스패치되었는지 여부
-     */
-    protected emit(name: string, value?: any, options?: CustomEventInit): boolean;
-}

package/dist/components/BaseElement.js

@@ -1,59 +0,0 @@
-import { LitElement } from 'lit';
-import { styles } from './BaseElement.styles.js';
-
-class BaseElement 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);
-  }
-}
-
-export { BaseElement };

package/dist/components/BaseElement.styles.js

@@ -1,28 +0,0 @@
-import { css } from 'lit';
-
-const styles = css`
-  :host {
-    color: var(--u-txt-color, inherit);
-    font-family: var(--u-font-base, inherit);
-    box-sizing: border-box;
-    overflow-wrap: anywhere;
-  }
-
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit;
-    overflow-wrap: inherit;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-
-  [scrollable] {
-    scrollbar-width: thin;
-    scrollbar-color: var(--u-scrollbar-color) var(--u-scrollbar-track-color);
-  }
-`;
-
-export { styles };

package/dist/components/FloatingElement.d.ts

@@ -1,104 +0,0 @@
-import { CSSResultGroup, PropertyValues } from 'lit';
-import { Placement, VirtualElement } from '@floating-ui/dom';
-import { BaseElement } from './BaseElement.js';
-/**
- * FloatingElement는 팝오버, 툴팁 등 화면에 떠 있는 엘리먼트를 구현하기 위한 기본 클래스입니다.
- * 이 클래스를 상속하여 커스텀 팝오버 컴포넌트를 만들 수 있습니다.
- *
- * 1. for, anchor 속성을 통해 연결될 대상 엘리먼트를 지정할 수 있습니다.
- * 2. visible 속성을 통해 엘리먼트의 표시 여부를 제어할 수 있습니다.
- * 3. show() 및 hide() 메서드를 통해 프로그래밍적으로 표시하거나 숨길 수 있습니다.
- * 4. strategy, placement, distance, shift 속성을 통해 표시 위치 결정 방식을 설정할 수 있습니다.
- */
-export declare class FloatingElement extends BaseElement {
-    /** 기본 스타일을 정의합니다. */
-    static styles: CSSResultGroup;
-    /** 종속된 컴포넌트를 정의합니다. */
-    static dependencies: Record<string, typeof BaseElement>;
-    private rafId;
-    private cleanup;
-    /**
-     * 엘리먼트가 떠 있는 동안의 대상 엘리먼트 입니다.
-     */
-    target?: HTMLElement | VirtualElement;
-    /**
-     * 연결될 대상 엘리먼트 입니다. 지정하지 않으면 부모 엘리먼트가 포함됩니다.
-     */
-    anchors?: HTMLElement[];
-    /**
-     * 앵커 엘리먼트를 찾기 위한 CSS 선택자입니다. querySelector를 사용하여 DOM에서 대상을 검색합니다.
-     *
-     * @example
-     * - `id`로 찾기: for="#target-id"
-     * - `class`로 찾기: for=".target-class"
-     * - `태그명`으로 찾기: for="target-tag-name"
-     * - `속성`으로 찾기: for="[data-role='target']"
-     */
-    for?: string;
-    /**
-     * 현재 엘리먼트가 보여지는지 여부입니다.
-     *
-     * @default false
-     */
-    visible: boolean;
-    /**
-     * 현재 엘리먼트의 위치 결정 전략입니다.
-     *
-     * @remarks
-     * - `absolute`: 엘리먼트가 문서 흐름에 따라 배치됩니다.
-     * - `fixed`: 엘리먼트가 뷰포트에 고정되어 스크롤과 무관하게 위치합니다.
-     */
-    strategy: 'absolute' | 'fixed';
-    /**
-     * 대상 엘리먼트로부터의 배치 위치입니다.
-     * 지정하지 않으면 `floating-ui`의 `autoPlacement`가 적용됩니다.
-     */
-    placement?: Placement;
-    /**
-     * 대상 엘리먼트로부터의 거리 (px) 입니다.
-     *
-     * @default 0
-     */
-    distance: number;
-    /**
-     * 대상 엘리먼트로의 기준축에서의 오프셋 (px) 입니다.
-     *
-     * @default 0
-     */
-    offset: number;
-    /**
-     * 엘리먼트가 화면 안에 머물도록 자동으로 조정할지 여부입니다.
-     *
-     * @default false
-     */
-    shift: boolean;
-    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 입니다.
-     */
-    show(target: Element | VirtualElement, auto?: boolean): Promise<void>;
-    /**
-     * 현재 엘리먼트를 숨깁니다.
-     */
-    hide(): Promise<void>;
-    /**
-     * `floating-ui` 를 이용하여 위치를 계산하고 style 을 적용합니다.
-     *
-     * @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
-     */
-    protected reposition(target: Element | VirtualElement): Promise<void>;
-    /** 표시 상태 변경 이벤트를 발생시킵니다. */
-    private updateVisibleState;
-    /** 애니메이션 프레임을 사용하여 표시 상태를 스케줄링합니다. */
-    private scheduleVisible;
-}

package/dist/components/FloatingElement.js

@@ -1,195 +0,0 @@
-import { state, property } from 'lit/decorators.js';
-import { autoUpdate, computePosition, offset, shift, flip, autoPlacement } from '@floating-ui/dom';
-import { getParentElement, querySelectorAllWithin } from '../utilities/elements.js';
-import { BaseElement } from './BaseElement.js';
-import { styles } from './FloatingElement.styles.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class FloatingElement extends BaseElement {
-  constructor() {
-    super(...arguments);
-    // 애니메이션 프레임 아이디
-    this.rafId = null;
-    // 자동 위치 업데이트 정리 함수
-    this.cleanup = null;
-    this.visible = false;
-    this.strategy = "absolute";
-    this.distance = 0;
-    this.offset = 0;
-    this.shift = false;
-  }
-  static {
-    /** 기본 스타일을 정의합니다. */
-    this.styles = [super.styles, styles];
-  }
-  static {
-    /** 종속된 컴포넌트를 정의합니다. */
-    this.dependencies = {};
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.anchors || this.anchors.length === 0) {
-      const parent = getParentElement(this);
-      this.anchors = parent ? [parent] : [];
-    }
-  }
-  disconnectedCallback() {
-    if (this.rafId !== null) cancelAnimationFrame(this.rafId);
-    if (this.cleanup !== null) this.cleanup();
-    this.rafId = null;
-    this.cleanup = null;
-    super.disconnectedCallback();
-  }
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    if (changedProperties.has("for")) {
-      this.scan(this);
-    }
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("visible")) {
-      this.toggleAttribute("aria-hidden", !this.visible);
-      this.toggleAttribute("inert", !this.visible);
-      this.updateVisibleState(this.visible);
-    }
-  }
-  /**
-   * for 속성에 따라 element를 기준으로 앵커 엘리먼트를 탐색하여 anchors로 설정합니다.
-   */
-  scan(element) {
-    if (this.for) {
-      const anchors = querySelectorAllWithin(element, this.for);
-      this.anchors = Array.from(anchors);
-    } else {
-      const parent = getParentElement(this);
-      this.anchors = parent ? [parent] : [];
-    }
-  }
-  /** 
-   * 현재 엘리먼트를 표시합니다.
-   * 
-   * @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
-   * @param auto - 표시 후 자동 위치 업데이트 활성화 여부입니다. 기본값은 true 입니다.
-   */
-  async show(target, auto = true) {
-    await this.updateComplete;
-    await this.reposition(target);
-    if (auto === true) {
-      this.cleanup = autoUpdate(target, this, () => {
-        this.reposition(target);
-      });
-    }
-    this.scheduleVisible(true);
-    this.target = target;
-  }
-  /** 
-   * 현재 엘리먼트를 숨깁니다.
-   */
-  async hide() {
-    await this.updateComplete;
-    if (this.cleanup !== null) this.cleanup();
-    this.cleanup = null;
-    this.scheduleVisible(false);
-    this.target = void 0;
-  }
-  /** 
-   * `floating-ui` 를 이용하여 위치를 계산하고 style 을 적용합니다. 
-   * 
-   * @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
-   */
-  async reposition(target) {
-    const position = await computePosition(target, this, {
-      strategy: this.strategy,
-      placement: this.placement,
-      middleware: [
-        offset({ mainAxis: this.distance, crossAxis: this.offset }),
-        shift({ mainAxis: this.shift }),
-        this.placement ? flip() : autoPlacement()
-      ]
-    });
-    Object.assign(this.style, {
-      left: `${position.x}px`,
-      top: `${position.y}px`,
-      // placement 에 따라 transform-origin 값을 결정합니다.(애니메이션용)
-      transformOrigin: (() => {
-        switch (position.placement) {
-          case "top":
-          case "top-start":
-          case "top-end":
-            return "center bottom";
-          case "bottom":
-          case "bottom-start":
-          case "bottom-end":
-            return "center top";
-          case "left":
-          case "left-start":
-          case "left-end":
-            return "right center";
-          case "right":
-          case "right-start":
-          case "right-end":
-            return "left center";
-          default:
-            return "center";
-        }
-      })()
-    });
-  }
-  /** 표시 상태 변경 이벤트를 발생시킵니다. */
-  updateVisibleState(visible) {
-    if (visible) {
-      this.emit("u-show");
-    } else {
-      this.emit("u-hide");
-    }
-  }
-  /** 애니메이션 프레임을 사용하여 표시 상태를 스케줄링합니다. */
-  scheduleVisible(visible) {
-    if (this.rafId !== null) {
-      cancelAnimationFrame(this.rafId);
-      this.rafId = null;
-    }
-    this.rafId = requestAnimationFrame(() => {
-      this.visible = visible;
-      this.rafId = null;
-    });
-  }
-}
-__decorateClass([
-  state()
-], FloatingElement.prototype, "target");
-__decorateClass([
-  state()
-], FloatingElement.prototype, "anchors");
-__decorateClass([
-  property({ type: String, reflect: true })
-], FloatingElement.prototype, "for");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], FloatingElement.prototype, "visible");
-__decorateClass([
-  property({ type: String, reflect: true })
-], FloatingElement.prototype, "strategy");
-__decorateClass([
-  property({ type: String })
-], FloatingElement.prototype, "placement");
-__decorateClass([
-  property({ type: Number })
-], FloatingElement.prototype, "distance");
-__decorateClass([
-  property({ type: Number })
-], FloatingElement.prototype, "offset");
-__decorateClass([
-  property({ type: Boolean })
-], FloatingElement.prototype, "shift");
-
-export { FloatingElement };

package/dist/components/FloatingElement.styles.js

@@ -1,23 +0,0 @@
-import { css } from 'lit';
-
-const styles = css`
-  :host {
-    position: absolute;
-    z-index: 1000;
-    top: 0;
-    left: 0;
-    width: max-content;
-    opacity: 0;
-  }
-  :host([visible]) {
-    opacity: 1;
-  }
-  :host([strategy="absolute"]) {
-    position: absolute;
-  }
-  :host([strategy="fixed"]) {
-    position: fixed;
-  }
-`;
-
-export { styles };

package/dist/components/ModalElement.d.ts

@@ -1,70 +0,0 @@
-import { CSSResultGroup, PropertyValues } from 'lit';
-import { BaseElement } from './BaseElement.js';
-/**
- * ModalElement는 다이얼로그, 드로어 등 화면에 오버레이로 표시되는 엘리먼트를 구현하기 위한 기본 클래스입니다.
- * 이 클래스를 상속하여 커스텀 모달 컴포넌트를 만들 수 있습니다.
- *
- * 1. open 속성을 통해 엘리먼트의 표시 여부를 제어할 수 있습니다.
- * 2. modal 속성을 통해 배경 차단 및 포커스 트랩을 활성화할 수 있습니다.
- * 3. closable 속성을 통해 이벤트에 의한 닫기 허용 여부를 설정할 수 있습니다.
- * 4. show() 및 hide() 메서드를 통해 프로그래밍적으로 표시하거나 숨길 수 있습니다.
- */
-export declare abstract class ModalElement extends BaseElement {
-    /** 기본 스타일을 정의합니다. */
-    static styles: CSSResultGroup;
-    /** 종속된 컴포넌트를 정의합니다. */
-    static dependencies: Record<string, typeof BaseElement>;
-    /**
-     * 현재 엘리먼트의 열림/닫힘 상태입니다.
-     *
-     * @default false
-     */
-    open: boolean;
-    /**
-     * 엘리먼트의 위치 결정 전략입니다.
-     * - `absolute`: 엘리먼트가 문서 흐름에 따라 배치됩니다.
-     * - `fixed`: 엘리먼트가 뷰포트에 고정되어 스크롤과 무관하게 위치합니다.
-     *
-     * @default 'fixed'
-     */
-    strategy: 'absolute' | 'fixed';
-    /**
-     * 모달 모드 여부, true인 경우 배경이 차단되고 포커스 트랩이 활성화됩니다.
-     * false인 경우 배경이 차단되지 않고 포커스 트랩도 비활성화됩니다.
-     *
-     * @default true
-     */
-    modal: boolean;
-    /**
-     * 이벤트에 의한 모달 닫기 허용 여부, 예: 오버레이 클릭, ESC 키 등
-     * 닫기를 시도해야할 경우, hide() 메서드를 호출합니다.
-     *
-     * @default true
-     */
-    closable: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changedProperties: PropertyValues): void;
-    /**
-     * 모달을 표시합니다
-     */
-    show(): Promise<void>;
-    /**
-     * 모달을 숨깁니다
-     */
-    hide(): Promise<void>;
-    /**
-     * 모달이 차단 상태일 때 호출 됩니다
-     */
-    protected block(): Promise<void>;
-    /** 엘리먼트의 열림/닫힘 상태를 업데이트합니다 */
-    private updateOpenState;
-    /** 모달 모드 상태를 업데이트합니다 */
-    private updateModalState;
-    /** 백드롭 클릭 핸들러 */
-    private handlePointerdown;
-    /** 키보드 이벤트 핸들러 */
-    private handleWindowKeydown;
-    /** 포커스 트랩 핸들러 */
-    private handleWindowFocusin;
-}