@iyulab/components 0.1.7 → 0.1.9

package/dist/components/FloatingElement.d.ts

@@ -7,8 +7,8 @@ import { BaseElement } from './BaseElement.js';
  *
  * 1. for, anchor 속성을 통해 연결될 대상 엘리먼트를 지정할 수 있습니다.
  * 2. visible 속성을 통해 엘리먼트의 표시 여부를 제어할 수 있습니다.
- * 3. strategy, placement, distance 속성을 통해 표시 위치 결정 방식을 설정할 수 있습니다.
- * 4. show() 및 hide() 메서드를 통해 프로그래밍적으로 표시하거나 숨길 수 있습니다.
+ * 3. show() 및 hide() 메서드를 통해 프로그래밍적으로 표시하거나 숨길 수 있습니다.
+ * 4. strategy, placement, distance, shift 속성을 통해 표시 위치 결정 방식을 설정할 수 있습니다.
  */
 export declare class FloatingElement extends BaseElement {
     /** 기본 스타일을 정의합니다. */
@@ -21,8 +21,20 @@ export declare class FloatingElement extends BaseElement {
      * 연결될 대상 엘리먼트 입니다. 지정하지 않으면 부모 엘리먼트를 사용합니다.
      */
     anchor?: 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;
     /**
@@ -33,16 +45,6 @@ export declare class FloatingElement extends BaseElement {
      * - `fixed`: 엘리먼트가 뷰포트에 고정되어 스크롤과 무관하게 위치합니다.
      */
     strategy: 'absolute' | 'fixed';
-    /**
-     * 앵커 엘리먼트를 찾기 위한 CSS 선택자입니다. querySelector를 사용하여 DOM에서 대상을 검색합니다.
-     *
-     * @example
-     * - `id`로 찾기: for="#target-id"
-     * - `class`로 찾기: for=".target-class"
-     * - `태그명`으로 찾기: for="target-tag-name"
-     * - `속성`으로 찾기: for="[data-role='target']"
-     */
-    for?: string;
     /**
      * 대상 엘리먼트로부터의 배치 위치입니다.
      * 지정하지 않으면 `floating-ui`의 `autoPlacement`가 적용됩니다.
@@ -54,15 +56,29 @@ export declare class FloatingElement extends BaseElement {
      * @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;
     /**
      * 현재 엘리먼트를 표시합니다.
      *
      * @param anchor - 위치 계산에 사용할 앵커 엘리먼트입니다. 지정하지 않으면 this.anchor 가 사용됩니다.
+     * @param auto - 표시 후 자동 위치 업데이트 활성화 여부입니다. 기본값은 true 입니다.
      */
-    show(anchor?: Element | VirtualElement): Promise<void>;
+    show(anchor?: Element | VirtualElement, auto?: boolean): Promise<void>;
     /**
      * 현재 엘리먼트를 숨깁니다.
      */
@@ -73,12 +89,8 @@ export declare class FloatingElement extends BaseElement {
      * @param target - 위치 계산에 사용할 앵커 엘리먼트입니다.
      */
     protected reposition(target: Element | VirtualElement): Promise<void>;
-    /**
-     * 자동 위치 업데이트를 설정하거나 해제합니다.
-     *
-     * @param enable - 자동 위치 업데이트 활성화 여부
-     */
-    protected autoPosition(enable: boolean): void;
+    /** 표시 상태 변경 이벤트를 발생시킵니다. */
+    private updateVisibleState;
     /** 애니메이션 프레임을 사용하여 표시 상태를 스케줄링합니다. */
     private scheduleVisible;
 }

package/dist/components/FloatingElement.js

@@ -1,6 +1,6 @@
 import { state, property } from 'lit/decorators.js';
-import { offset, shift, flip, autoPlacement, computePosition, autoUpdate } from '@floating-ui/dom';
-import { getParentElement, querySelectorFrom } from '../internals/node-helpers.js';
+import { autoUpdate, computePosition, offset, shift, flip, autoPlacement } from '@floating-ui/dom';
+import { getParentElement, querySelectorWithin } from '../internals/node-helpers.js';
 import { BaseElement } from './BaseElement.js';
 import { styles } from './FloatingElement.styles.js';
 
@@ -23,6 +23,8 @@ class FloatingElement extends BaseElement {
     this.visible = false;
     this.strategy = "absolute";
     this.distance = 0;
+    this.offset = 0;
+    this.shift = false;
   }
   static {
     /** 기본 스타일을 정의합니다. */
@@ -38,27 +40,42 @@ class FloatingElement extends BaseElement {
   }
   disconnectedCallback() {
     if (this.rafId !== null) cancelAnimationFrame(this.rafId);
-    this.autoPosition(false);
+    if (this.cleanup !== null) this.cleanup();
+    this.rafId = null;
+    this.cleanup = null;
     super.disconnectedCallback();
   }
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
     if (changedProperties.has("for")) {
-      const founded = this.for ? querySelectorFrom(this, this.for) : void 0;
+      const founded = this.for ? querySelectorWithin(this, this.for) : void 0;
       this.anchor = founded || void 0;
     }
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("visible")) {
+      this.toggleAttribute("inert", !this.visible);
+      this.toggleAttribute("aria-hidden", !this.visible);
+      this.updateVisibleState(this.visible);
+    }
+  }
   /** 
    * 현재 엘리먼트를 표시합니다.
    * 
    * @param anchor - 위치 계산에 사용할 앵커 엘리먼트입니다. 지정하지 않으면 this.anchor 가 사용됩니다.
+   * @param auto - 표시 후 자동 위치 업데이트 활성화 여부입니다. 기본값은 true 입니다.
    */
-  async show(anchor) {
+  async show(anchor, auto = true) {
     anchor ||= this.anchor;
     if (!anchor) return;
     await this.updateComplete;
     await this.reposition(anchor);
-    this.autoPosition(true);
+    if (auto === true) {
+      this.cleanup = autoUpdate(anchor, this, () => {
+        this.reposition(anchor);
+      });
+    }
     this.scheduleVisible(true);
   }
   /** 
@@ -66,7 +83,8 @@ class FloatingElement extends BaseElement {
    */
   async hide() {
     await this.updateComplete;
-    this.autoPosition(false);
+    if (this.cleanup !== null) this.cleanup();
+    this.cleanup = null;
     this.scheduleVisible(false);
   }
   /** 
@@ -75,23 +93,19 @@ class FloatingElement extends BaseElement {
    * @param target - 위치 계산에 사용할 앵커 엘리먼트입니다.
    */
   async reposition(target) {
-    const middleware = [
-      offset({ mainAxis: this.distance }),
-      shift(),
-      flip()
-    ];
-    if (!this.placement) {
-      middleware.push(autoPlacement());
-    }
     const position = await computePosition(target, this, {
       strategy: this.strategy,
       placement: this.placement,
-      middleware
+      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 값을 결정합니다.
+      // placement 에 따라 transform-origin 값을 결정합니다.(애니메이션용)
       transformOrigin: (() => {
         switch (position.placement) {
           case "top":
@@ -116,20 +130,12 @@ class FloatingElement extends BaseElement {
       })()
     });
   }
-  /**
-   * 자동 위치 업데이트를 설정하거나 해제합니다.
-   * 
-   * @param enable - 자동 위치 업데이트 활성화 여부
-   */
-  autoPosition(enable) {
-    if (this.cleanup) {
-      this.cleanup();
-      this.cleanup = null;
-    }
-    if (enable && this.anchor) {
-      this.cleanup = autoUpdate(this.anchor, this, () => {
-        this.reposition(this.anchor);
-      });
+  /** 표시 상태 변경 이벤트를 발생시킵니다. */
+  updateVisibleState(visible) {
+    if (visible) {
+      this.emit("u-show");
+    } else {
+      this.emit("u-hide");
     }
   }
   /** 애니메이션 프레임을 사용하여 표시 상태를 스케줄링합니다. */
@@ -147,20 +153,26 @@ class FloatingElement extends BaseElement {
 __decorateClass([
   state()
 ], FloatingElement.prototype, "anchor");
+__decorateClass([
+  property({ type: String })
+], 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, "for");
 __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

@@ -11,16 +11,17 @@ const styles = css`
     opacity: 0;
     pointer-events: none;
   }
+  :host([visible]) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
   :host([strategy="absolute"]) {
     position: absolute;
   }
   :host([strategy="fixed"]) {
     position: fixed;
   }
-  :host([visible]) {
-    opacity: 0.8;
-    pointer-events: auto;
-  }
 `;
 
 export { styles };

package/dist/components/ModalElement.d.ts

@@ -0,0 +1,70 @@
+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;
+}

package/dist/components/ModalElement.js

@@ -0,0 +1,144 @@
+import { property } from 'lit/decorators.js';
+import { BaseElement } from './BaseElement.js';
+import { styles } from './ModalElement.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 ModalElement extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.strategy = "fixed";
+    this.modal = true;
+    this.closable = true;
+    /** 백드롭 클릭 핸들러 */
+    this.handlePointerdown = (e) => {
+      if (!this.modal || !this.open) return;
+      const origin = e.composedPath()[0];
+      if (origin === this) {
+        if (this.closable) {
+          this.hide();
+        } else {
+          this.block();
+        }
+      }
+    };
+    /** 키보드 이벤트 핸들러 */
+    this.handleWindowKeydown = (e) => {
+      if (!this.modal || !this.open) return;
+      if (e.key === "Escape" && this.open) {
+        e.preventDefault();
+        if (this.closable) {
+          this.hide();
+        } else {
+          this.block();
+        }
+      }
+    };
+    /** 포커스 트랩 핸들러 */
+    this.handleWindowFocusin = (e) => {
+      if (!this.modal || !this.open) return;
+      const target = e.target;
+      if (!this.contains(target)) {
+        e.preventDefault();
+        this.focus();
+      }
+    };
+  }
+  static {
+    /** 기본 스타일을 정의합니다. */
+    this.styles = [super.styles, styles];
+  }
+  static {
+    /** 종속된 컴포넌트를 정의합니다. */
+    this.dependencies = {};
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("tabindex", "-1");
+    this.addEventListener("pointerdown", this.handlePointerdown);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("keydown", this.handleWindowKeydown);
+    window.removeEventListener("focusin", this.handleWindowFocusin);
+    super.disconnectedCallback();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("open")) {
+      this.toggleAttribute("aria-hidden", !this.open);
+      this.toggleAttribute("inert", !this.open);
+      this.updateOpenState(this.open);
+    }
+    if (changedProperties.has("modal")) {
+      this.updateModalState(this.modal);
+    }
+  }
+  /** 
+   * 모달을 표시합니다 
+   */
+  async show() {
+    await this.updateComplete;
+    requestAnimationFrame(() => {
+      this.open = true;
+    });
+  }
+  /** 
+   * 모달을 숨깁니다 
+   */
+  async hide() {
+    await this.updateComplete;
+    requestAnimationFrame(() => {
+      this.open = false;
+    });
+  }
+  /** 
+   * 모달이 차단 상태일 때 호출 됩니다 
+   */
+  async block() {
+    await this.updateComplete;
+  }
+  /** 엘리먼트의 열림/닫힘 상태를 업데이트합니다 */
+  updateOpenState(open) {
+    if (open) {
+      this.emit("u-show");
+      document.body.style.overflow = this.modal ? "hidden" : "";
+    } else {
+      this.emit("u-hide");
+      document.body.style.overflow = "";
+    }
+  }
+  /** 모달 모드 상태를 업데이트합니다 */
+  updateModalState(modal) {
+    if (modal) {
+      window.addEventListener("keydown", this.handleWindowKeydown);
+      window.addEventListener("focusin", this.handleWindowFocusin);
+      document.body.style.overflow = this.open ? "hidden" : "";
+    } else {
+      window.removeEventListener("keydown", this.handleWindowKeydown);
+      window.removeEventListener("focusin", this.handleWindowFocusin);
+      document.body.style.overflow = "";
+    }
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ModalElement.prototype, "open");
+__decorateClass([
+  property({ type: String, reflect: true })
+], ModalElement.prototype, "strategy");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ModalElement.prototype, "modal");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ModalElement.prototype, "closable");
+
+export { ModalElement };

package/dist/components/ModalElement.styles.js

@@ -0,0 +1,29 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0;
+    background: transparent;
+    transition: opacity 0.3s, background 0.3s ease;
+  }
+  :host([open]) {
+    opacity: 1;
+  }
+  :host([modal]) {
+    background: var(--u-overlay-bg-color);
+  }
+  :host([strategy="fixed"]) {
+    position: fixed;
+  }
+  :host([strategy="absolute"]) {
+    position: absolute;
+  }
+`;
+
+export { styles };

package/dist/components/alert/{Alert.d.ts → UAlert.component.d.ts}

@@ -5,7 +5,7 @@ export type AlertType = "error" | "warning" | "info" | "success" | "notice";
  * 사용자에게 메시지를 표시하는 Alert 컴포넌트입니다.
  * 자동 닫힘 타이머, 접기/펼치기 기능 등을 제공합니다.
  */
-export declare class Alert extends BaseElement {
+export declare class UAlert extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     private timeoutId?;

package/dist/components/alert/{Alert.js → UAlert.component.js}

@@ -1,8 +1,8 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
-import { Icon } from '../icon/Icon.js';
-import { styles } from './Alert.styles.js';
+import { UIcon } from '../icon/UIcon.component.js';
+import { styles } from './UAlert.styles.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 var __defProp = Object.defineProperty;
@@ -14,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Alert extends BaseElement {
+class UAlert extends BaseElement {
   constructor() {
     super(...arguments);
     this.open = false;
@@ -28,39 +28,41 @@ class Alert extends BaseElement {
   }
   static {
     this.dependencies = {
-      "u-icon": Icon
+      "u-icon": UIcon
     };
   }
   updated(changedProperties) {
     super.updated(changedProperties);
+    if (changedProperties.has("open")) {
+      this.toggleAttribute("aria-hidden", !this.open);
+      this.toggleAttribute("inert", !this.open);
+      this.updateOpenState(this.open);
+    }
     if (changedProperties.has("minRows") && this.minRows < this.maxRows && this.minRows > 0) {
       this.style.setProperty("--min-content-rows", `${this.minRows}`);
     }
     if (changedProperties.has("maxRows") && this.maxRows > this.minRows && this.maxRows > 0) {
       this.style.setProperty("--max-content-rows", `${this.maxRows}`);
     }
-    if (changedProperties.has("open")) {
-      this.updateOpenState(this.open);
-    }
   }
   render() {
     return html`
       <div class="container" part="base">
         <div class="header" part="header">
           <u-icon class="icon" part="icon"
-            .library=${"internal"}
+            .lib=${"internal"}
             .name=${this.getIconName(this.type)}
           ></u-icon>
           <div class="title" part="title">
             ${this.heading || this.type.toUpperCase()}
           </div>
           <u-icon class="close-btn" part="close-btn"
-            .library=${"internal"}
+            .lib=${"internal"}
             .name=${"x-lg"}
             @click=${this.hide}
           ></u-icon>
         </div>
-        <div class="content scrollable" part="content">
+        <div class="content" part="content" scrollable>
           ${this.content ? unsafeHTML(this.content) : html`<slot></slot>`}
         </div>
         <div class="footer" part="footer">
@@ -121,24 +123,24 @@ class Alert extends BaseElement {
 }
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], Alert.prototype, "open");
+], UAlert.prototype, "open");
 __decorateClass([
   property({ type: String, reflect: true })
-], Alert.prototype, "type");
+], UAlert.prototype, "type");
 __decorateClass([
   property({ type: String })
-], Alert.prototype, "heading");
+], UAlert.prototype, "heading");
 __decorateClass([
   property({ type: String })
-], Alert.prototype, "content");
+], UAlert.prototype, "content");
 __decorateClass([
   property({ type: Number })
-], Alert.prototype, "minRows");
+], UAlert.prototype, "minRows");
 __decorateClass([
   property({ type: Number })
-], Alert.prototype, "maxRows");
+], UAlert.prototype, "maxRows");
 __decorateClass([
   property({ type: Number })
-], Alert.prototype, "duration");
+], UAlert.prototype, "duration");
 
-export { Alert };
+export { UAlert };

package/dist/components/alert/UAlert.d.ts

@@ -0,0 +1,8 @@
+import { UAlert } from './UAlert.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-alert': UAlert;
+    }
+}
+export { UAlert };
+export type { AlertType } from './UAlert.component.js';

package/dist/components/alert/UAlert.js

@@ -0,0 +1,5 @@
+import { UAlert } from './UAlert.component.js';
+
+UAlert.define("u-alert");
+
+export { UAlert };

package/dist/components/alert/{Alert.styles.js → UAlert.styles.js}

@@ -17,13 +17,11 @@ const styles = css`
     
     opacity: 0;
     transform: scale(0.8);
-    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
-    pointer-events: none;
+    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);    
   }
   :host([open]) {
     opacity: 1;
     transform: scale(1);
-    pointer-events: auto;
   }
   :host([type="error"]) {
     --icon-primary-color: var(--u-red-700);

package/dist/components/button/{Button.d.ts → UButton.component.d.ts}

@@ -5,7 +5,7 @@ import { BaseElement } from '../BaseElement.js';
  * @slot prefix - 버튼의 접두사로 표시할 콘텐츠를 삽입합니다.
  * @slot suffix - 버튼의 접미사로 표시할 콘텐츠를 삽입합니다.
  */
-export declare class Button extends BaseElement {
+export declare class UButton extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     /** 버튼이 비활성화 상태인지 여부를 설정합니다. 비활성화된 버튼은 클릭할 수 없습니다. */