@iyulab/components 0.3.0 → 0.4.0

package/dist/components/button/UButton.component.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { BaseElement } from '../BaseElement.js';
+import { UElement } from '../UElement.js';
 import { USpinner } from '../spinner/USpinner.component.js';
 import { styles } from './UButton.styles.js';
 
@@ -13,7 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UButton extends BaseElement {
+class UButton extends UElement {
   constructor() {
     super(...arguments);
     this.variant = "default";

package/dist/components/card/UCard.component.d.ts

@@ -1,4 +1,4 @@
-import { BaseElement } from '../BaseElement.js';
+import { UElement } from '../UElement.js';
 /**
  * Card 컴포넌트는 콘텐츠를 카드 형태로 표시합니다.
  * @slot - 카드의 메인 콘텐츠를 삽입합니다.
@@ -6,7 +6,7 @@ import { BaseElement } from '../BaseElement.js';
  * @slot footer - 카드 하단의 푸터 영역에 표시할 콘텐츠를 삽입합니다.
  * @slot media - 카드의 미디어 영역에 표시할 이미지, 비디오 등을 삽입합니다.
  */
-export declare class UCard extends BaseElement {
+export declare class UCard extends UElement {
     static styles: import('lit').CSSResultGroup[];
     /** 카드의 그림자 효과를 제거할지 여부를 설정합니다. */
     shadowless: boolean;

package/dist/components/card/UCard.component.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { BaseElement } from '../BaseElement.js';
+import { UElement } from '../UElement.js';
 import { styles } from './UCard.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -12,7 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UCard extends BaseElement {
+class UCard extends UElement {
   constructor() {
     super(...arguments);
     this.shadowless = false;

package/dist/components/carousel/UCarousel.component.d.ts

@@ -1,10 +1,10 @@
 import { PropertyValues } from 'lit';
-import { BaseElement } from '../BaseElement.js';
+import { UElement } from '../UElement.js';
 /**
  * Carousel 컴포넌트는 여러 슬라이드를 회전하며 표시합니다.
  *
  * @slot - 슬라이드로 표시할 콘텐츠. 각 자식 요소가 하나의 슬라이드.
- * @event u-change - 슬라이드 변경 시. detail: { currentIndex: number }
+ * @event u-change - 슬라이드 변경 시. detail: { index: number }
  *
  * @csspart slides - 슬라이드 컨테이너 (aspect-ratio 등 외부 스타일링)
  * @csspart prev-button - 이전 버튼
@@ -12,21 +12,19 @@ import { BaseElement } from '../BaseElement.js';
  * @csspart indicator - 인디케이터 컨테이너
  * @csspart dot - 인디케이터 도트
  */
-export declare class UCarousel extends BaseElement {
+export declare class UCarousel extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    /** 현재 활성 슬라이드 인덱스 */
-    currentIndex: number;
+    static dependencies: Record<string, typeof UElement>;
     /** 자동 재생 활성화 */
     autoplay: boolean;
     /** 자동 재생 간격 (ms) */
     autoplayInterval: number;
+    /** 처음/끝에서 순환 이동 */
+    loop: boolean;
     /** 이전/다음 네비게이션 버튼 표시 */
     navigation: boolean;
     /** 페이지 인디케이터 표시 */
     pagination: boolean;
-    /** 처음/끝에서 순환 이동 */
-    loop: boolean;
     /** 드래그로 슬라이드 전환 */
     draggable: boolean;
     /** 한 화면에 표시할 슬라이드 수 */
@@ -35,33 +33,46 @@ export declare class UCarousel extends BaseElement {
     slidesPerMove: number;
     /** 슬라이드 간 간격 (px) */
     gap: number;
-    private _slideCount;
-    private _isDragging;
-    private _dragOffset;
-    private _autoplayTimer?;
-    private _dragStartX;
-    private _dragStartTime;
-    private get _perView();
-    private get _perMove();
-    private get _maxIndex();
-    private get _pageCount();
-    private get _currentPage();
+    /** 현재 활성 슬라이드 인덱스 */
+    index: number;
+    /** 전체 슬라이드 수 */
+    private slideCount;
+    /** 드래그 중인지 여부 */
+    private isDragging;
+    /** 드래그 중 이동 보정값 (단위: %) */
+    private dragOffset;
+    /** 타이머 및 드래그 상태 추적 필드 */
+    private autoplayTimer?;
+    private dragStartX;
+    private dragStartTime;
+    private pointerDown;
+    /** 한 화면에 표시할 슬라이드 수 (최소 1) */
+    private get perView();
+    /** 한 번에 이동할 슬라이드 수 (최소 1) */
+    private get perMove();
+    /** 슬라이드가 이동할 수 있는 최대 index */
+    private get maxIndex();
+    /** 총 페이지 수 (인디케이터 도트 수) */
+    private get pageCount();
+    /** 현재 페이지 (인디케이터 도트 활성화에 사용) */
+    private get currentPage();
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     /** 이전 슬라이드로 이동 */
-    prev(): void;
+    prev: () => void;
     /** 다음 슬라이드로 이동 */
-    next(): void;
+    next: () => void;
     /** 지정한 인덱스로 이동 */
-    goTo(index: number): void;
-    private handleSlotChange;
+    goTo: (index: number) => void;
     private startAutoplay;
     private stopAutoplay;
+    private handleSlotChange;
     private handleDragStart;
     private handlePointerDown;
     private handlePointerMove;
     private handlePointerUp;
+    private handleClickCancel;
 }

package/dist/components/carousel/UCarousel.component.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { BaseElement } from '../BaseElement.js';
+import { UElement } from '../UElement.js';
 import { UButton } from '../button/UButton.component.js';
 import { UIcon } from '../icon/UIcon.component.js';
 import { styles } from './UCarousel.styles.js';
@@ -14,56 +14,99 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UCarousel extends BaseElement {
+class UCarousel extends UElement {
   constructor() {
     super(...arguments);
-    this.currentIndex = 0;
     this.autoplay = false;
     this.autoplayInterval = 3e3;
-    this.navigation = true;
-    this.pagination = true;
-    this.loop = true;
+    this.loop = false;
+    this.navigation = false;
+    this.pagination = false;
     this.draggable = false;
     this.slidesPerView = 1;
     this.slidesPerMove = 1;
     this.gap = 0;
-    this._slideCount = 0;
-    this._isDragging = false;
-    this._dragOffset = 0;
-    this._dragStartX = 0;
-    this._dragStartTime = 0;
+    this.index = 0;
+    this.slideCount = 0;
+    this.isDragging = false;
+    this.dragOffset = 0;
+    this.dragStartX = 0;
+    this.dragStartTime = 0;
+    this.pointerDown = false;
+    /** 이전 슬라이드로 이동 */
+    this.prev = () => {
+      const target = Math.max(0, this.index - this.perMove);
+      if (target !== this.index) {
+        this.goTo(target);
+      } else if (this.loop) {
+        this.goTo(Math.min((this.pageCount - 1) * this.perMove, this.maxIndex));
+      }
+    };
+    /** 다음 슬라이드로 이동 */
+    this.next = () => {
+      const target = Math.min(this.maxIndex, this.index + this.perMove);
+      if (target !== this.index) {
+        this.goTo(target);
+      } else if (this.loop) {
+        this.goTo(0);
+      }
+    };
+    /** 지정한 인덱스로 이동 */
+    this.goTo = (index) => {
+      if (index < 0 || index > this.maxIndex || index === this.index) return;
+      this.index = index;
+      this.emit("u-change", {
+        index: this.index
+      });
+      if (this.autoplay) this.startAutoplay();
+    };
     this.handleDragStart = (e) => {
       e.preventDefault();
     };
     this.handlePointerDown = (e) => {
       if (e.button !== 0) return;
-      e.preventDefault();
-      this._isDragging = true;
-      this._dragStartX = e.clientX;
-      this._dragOffset = 0;
-      this._dragStartTime = Date.now();
+      this.pointerDown = true;
+      this.dragStartX = e.clientX;
+      this.dragOffset = 0;
+      this.dragStartTime = Date.now();
       if (this.autoplay) this.stopAutoplay();
-      const wrapper = e.currentTarget;
-      wrapper.setPointerCapture(e.pointerId);
     };
     this.handlePointerMove = (e) => {
-      if (!this._isDragging) return;
+      if (!this.pointerDown) return;
       const wrapper = e.currentTarget;
-      this._dragOffset = (e.clientX - this._dragStartX) / wrapper.offsetWidth * 100;
+      const offset = (e.clientX - this.dragStartX) / wrapper.offsetWidth * 100;
+      if (!this.isDragging && Math.abs(e.clientX - this.dragStartX) > 5) {
+        this.isDragging = true;
+        wrapper.setPointerCapture(e.pointerId);
+      }
+      if (this.isDragging) {
+        this.dragOffset = offset;
+      }
     };
     this.handlePointerUp = (e) => {
-      if (!this._isDragging) return;
-      const elapsed = Date.now() - this._dragStartTime;
-      const absDrag = Math.abs(this._dragOffset);
-      if (absDrag > 20 || absDrag > 5 && elapsed < 300) {
-        if (this._dragOffset < 0) this.next();
+      if (!this.pointerDown) return;
+      const elapsed = Date.now() - this.dragStartTime;
+      const absDrag = Math.abs(this.dragOffset);
+      if (this.isDragging && (absDrag > 20 || absDrag > 5 && elapsed < 300)) {
+        if (this.dragOffset < 0) this.next();
         else this.prev();
+        this.addEventListener("click", this.handleClickCancel, {
+          capture: true,
+          once: true
+        });
+      }
+      if (this.isDragging) {
+        const wrapper = e.currentTarget;
+        wrapper.releasePointerCapture(e.pointerId);
       }
-      this._isDragging = false;
-      this._dragOffset = 0;
+      this.pointerDown = false;
+      this.isDragging = false;
+      this.dragOffset = 0;
       if (this.autoplay) this.startAutoplay();
-      const wrapper = e.currentTarget;
-      wrapper.releasePointerCapture(e.pointerId);
+    };
+    this.handleClickCancel = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
     };
   }
   static {
@@ -75,20 +118,25 @@ class UCarousel extends BaseElement {
       "u-icon": UIcon
     };
   }
-  get _perView() {
+  /** 한 화면에 표시할 슬라이드 수 (최소 1) */
+  get perView() {
     return Math.max(1, this.slidesPerView);
   }
-  get _perMove() {
+  /** 한 번에 이동할 슬라이드 수 (최소 1) */
+  get perMove() {
     return Math.max(1, this.slidesPerMove);
   }
-  get _maxIndex() {
-    return Math.max(0, this._slideCount - this._perView);
+  /** 슬라이드가 이동할 수 있는 최대 index */
+  get maxIndex() {
+    return Math.max(0, this.slideCount - this.perView);
   }
-  get _pageCount() {
-    return this._maxIndex <= 0 ? 1 : Math.ceil(this._maxIndex / this._perMove) + 1;
+  /** 총 페이지 수 (인디케이터 도트 수) */
+  get pageCount() {
+    return this.maxIndex <= 0 ? 1 : Math.ceil(this.maxIndex / this.perMove) + 1;
   }
-  get _currentPage() {
-    return this.currentIndex >= this._maxIndex ? this._pageCount - 1 : Math.floor(this.currentIndex / this._perMove);
+  /** 현재 페이지 (인디케이터 도트 활성화에 사용) */
+  get currentPage() {
+    return this.index >= this.maxIndex ? this.pageCount - 1 : Math.floor(this.index / this.perMove);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -101,7 +149,7 @@ class UCarousel extends BaseElement {
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
     if (changedProperties.has("slidesPerView")) {
-      this.style.setProperty("--slides-per-view", String(this._perView));
+      this.style.setProperty("--slides-per-view", String(this.perView));
     }
     if (changedProperties.has("gap")) {
       this.style.setProperty("--slide-gap", `${this.gap}px`);
@@ -115,10 +163,10 @@ class UCarousel extends BaseElement {
     }
   }
   render() {
-    const pct = -(this.currentIndex * (100 / this._perView)) + this._dragOffset;
-    const gapPx = this.gap > 0 ? -(this.currentIndex * this.gap / this._perView) : 0;
+    const pct = -(this.index * (100 / this.perView)) + this.dragOffset;
+    const gapPx = this.gap > 0 ? -(this.index * this.gap / this.perView) : 0;
     const transform = gapPx ? `translateX(calc(${pct}% + ${gapPx}px))` : `translateX(${pct}%)`;
-    const style = `transform: ${transform}${this._isDragging ? "; transition: none" : ""}`;
+    const style = `transform: ${transform}${this.isDragging ? "; transition: none" : ""}`;
     return html`
       <div class="slides-wrapper"
         @dragstart=${this.handleDragStart}
@@ -131,113 +179,86 @@ class UCarousel extends BaseElement {
         </div>
       </div>
 
-      <u-button part="prev-button" class="nav-button prev" variant="borderless"
-        ?hidden=${!this.navigation}
-        ?disabled=${!this.loop && this.currentIndex <= 0}
+      <u-button part="prev-button" class="nav-button prev"
+        ?hidden=${!this.navigation || !this.loop && this.index <= 0}
         @click=${this.prev}>
         <u-icon lib="internal" name="chevron-left"></u-icon>
       </u-button>
-      <u-button part="next-button" class="nav-button next" variant="borderless"
-        ?hidden=${!this.navigation}
-        ?disabled=${!this.loop && this.currentIndex >= this._maxIndex}
+      <u-button part="next-button" class="nav-button next"
+        ?hidden=${!this.navigation || !this.loop && this.index >= this.maxIndex}
         @click=${this.next}>
         <u-icon lib="internal" name="chevron-right"></u-icon>
       </u-button>
 
       <div part="indicator" class="indicator"
-        ?hidden=${!this.pagination || !this._slideCount}>
-        ${Array.from({ length: this._pageCount }, (_, i) => html`
-          <button part="dot"
-            class="dot ${i === this._currentPage ? "active" : ""}"
-            @click=${() => this.goTo(Math.min(i * this._perMove, this._maxIndex))}>
+        ?hidden=${!this.pagination || !this.slideCount}>
+        ${Array.from({ length: this.pageCount }, (_, i) => html`
+          <button part="dot" class="dot"
+            ?active=${i === this.currentPage}
+            @click=${() => this.goTo(Math.min(i * this.perMove, this.maxIndex))}>
           </button>
         `)}
       </div>
     `;
   }
-  /** 이전 슬라이드로 이동 */
-  prev() {
-    const target = Math.max(0, this.currentIndex - this._perMove);
-    if (target !== this.currentIndex) {
-      this.goTo(target);
-    } else if (this.loop) {
-      this.goTo(Math.min((this._pageCount - 1) * this._perMove, this._maxIndex));
-    }
+  startAutoplay() {
+    this.stopAutoplay();
+    this.autoplayTimer = window.setInterval(() => {
+      this.next();
+    }, this.autoplayInterval);
   }
-  /** 다음 슬라이드로 이동 */
-  next() {
-    const target = Math.min(this._maxIndex, this.currentIndex + this._perMove);
-    if (target !== this.currentIndex) {
-      this.goTo(target);
-    } else if (this.loop) {
-      this.goTo(0);
+  stopAutoplay() {
+    if (this.autoplayTimer) {
+      clearInterval(this.autoplayTimer);
+      this.autoplayTimer = void 0;
     }
   }
-  /** 지정한 인덱스로 이동 */
-  goTo(index) {
-    if (index < 0 || index > this._maxIndex || index === this.currentIndex) return;
-    this.currentIndex = index;
-    this.emit("u-change", {
-      currentIndex: this.currentIndex
-    });
-    if (this.autoplay) this.startAutoplay();
-  }
   handleSlotChange(e) {
     const slot = e.target;
-    this._slideCount = slot.assignedElements().length;
-    if (this.currentIndex >= this._slideCount) {
-      this.currentIndex = Math.max(0, this._slideCount - 1);
-    }
-  }
-  startAutoplay() {
-    this.stopAutoplay();
-    this._autoplayTimer = window.setInterval(() => this.next(), this.autoplayInterval);
-  }
-  stopAutoplay() {
-    if (this._autoplayTimer) {
-      clearInterval(this._autoplayTimer);
-      this._autoplayTimer = void 0;
+    this.slideCount = slot.assignedElements().length;
+    if (this.index >= this.slideCount) {
+      this.index = Math.max(0, this.slideCount - 1);
     }
   }
 }
 __decorateClass([
-  property({ type: Number, reflect: true, attribute: "current-index" })
-], UCarousel.prototype, "currentIndex");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
+  property({ type: Boolean })
 ], UCarousel.prototype, "autoplay");
 __decorateClass([
   property({ type: Number, attribute: "autoplay-interval" })
 ], UCarousel.prototype, "autoplayInterval");
 __decorateClass([
-  property({ type: Boolean, reflect: true })
+  property({ type: Boolean })
+], UCarousel.prototype, "loop");
+__decorateClass([
+  property({ type: Boolean })
 ], UCarousel.prototype, "navigation");
 __decorateClass([
-  property({ type: Boolean, reflect: true })
+  property({ type: Boolean })
 ], UCarousel.prototype, "pagination");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UCarousel.prototype, "loop");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UCarousel.prototype, "draggable");
 __decorateClass([
-  property({ type: Number, reflect: true, attribute: "slides-per-view" })
+  property({ type: Number, attribute: "slides-per-view" })
 ], UCarousel.prototype, "slidesPerView");
 __decorateClass([
   property({ type: Number, attribute: "slides-per-move" })
 ], UCarousel.prototype, "slidesPerMove");
 __decorateClass([
-  property({ type: Number, reflect: true })
+  property({ type: Number })
 ], UCarousel.prototype, "gap");
+__decorateClass([
+  property({ type: Number })
+], UCarousel.prototype, "index");
 __decorateClass([
   state()
-], UCarousel.prototype, "_slideCount");
+], UCarousel.prototype, "slideCount");
 __decorateClass([
   state()
-], UCarousel.prototype, "_isDragging");
+], UCarousel.prototype, "isDragging");
 __decorateClass([
   state()
-], UCarousel.prototype, "_dragOffset");
+], UCarousel.prototype, "dragOffset");
 
 export { UCarousel };

package/dist/components/carousel/UCarousel.styles.js

@@ -1,20 +1,16 @@
 import { css } from 'lit';
 
 const styles = css`
-  /* ── Host ── */
   :host {
     --slide-gap: 0px;
     --slides-per-view: 1;
   }
   :host {
-    display: block;
     position: relative;
+    display: block;
     width: 100%;
     overflow: hidden;
-    box-sizing: border-box;
   }
-  
-  /* ── Draggable ── */
   :host([draggable]) .slides-wrapper {
     cursor: grab;
     user-select: none;
@@ -38,6 +34,7 @@ const styles = css`
 
   .slides {
     display: flex;
+    flex-direction: row;
     width: 100%;
     height: 100%;
     gap: var(--slide-gap, 0px);
@@ -46,12 +43,10 @@ const styles = css`
 
   ::slotted(*) {
     flex: 0 0 calc(
-      (100% - (var(--slides-per-view) - 1) * var(--slide-gap, 0px))
-      / var(--slides-per-view)
+      (100% - (var(--slides-per-view) - 1) * var(--slide-gap, 0px)) / var(--slides-per-view)
     );
     min-width: 0;
     height: 100%;
-    box-sizing: border-box;
   }
 
   /* ── Navigation ── */
@@ -60,34 +55,38 @@ const styles = css`
     z-index: 10;
     top: 50%;
     transform: translateY(-50%);
-    width: 40px;
-    height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
-    font-size: 16px;
-    background-color: var(--u-panel-bg-color, #fff);
-    box-shadow: 0 2px 8px var(--u-shadow-color-normal, rgba(0, 0, 0, 0.12));
-    opacity: 0.9;
+    font-size: 24px;
+    color: var(--u-neutral-900);
+    border: none;
+    background-color: transparent;
   }
   .nav-button:hover {
-    opacity: 1;
-    background-color: var(--u-bg-color-hover, #f3f4f6);
+    opacity: 0.5;
+    transform: scale(1.2) translateY(-40%);
+  }
+  .nav-button:active {
+    opacity: 0.8;
+    transform: scale(1.1) translateY(-45%);
   }
 
   .nav-button.prev { left: 16px; }
   .nav-button.next { right: 16px; }
 
-  /* ── Indicator ── */
+  /* ── Pagination ── */
   .indicator {
     position: absolute;
     z-index: 10;
     bottom: 16px;
     left: 50%;
-    transform: translateX(-50%);
     display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
     gap: 8px;
+    transform: translateX(-50%);
   }
 
   .dot {
@@ -96,17 +95,17 @@ const styles = css`
     padding: 0;
     border: none;
     border-radius: 50%;
-    background-color: var(--u-neutral-400, rgba(0, 0, 0, 0.3));
+    background-color: var(--u-neutral-400);
     cursor: pointer;
     transition: all 0.2s ease;
   }
   .dot:hover {
-    background-color: var(--u-neutral-200, rgba(0, 0, 0, 0.5));
+    background-color: var(--u-neutral-200);
   }
-  .dot.active {
-    background-color: var(--u-neutral-100, rgba(0, 0, 0, 0.8));
+  .dot[active] {
     width: 24px;
     border-radius: 5px;
+    background-color: var(--u-neutral-100);
   }
 `;
 

package/dist/components/dialog/UDialog.component.d.ts

@@ -1,12 +1,12 @@
-import { BaseElement } from '../BaseElement.js';
-import { ModalElement } from '../ModalElement.js';
+import { UElement } from '../UElement.js';
+import { UModalElement } from '../UModalElement.js';
 /**
  * Dialog 컴포넌트는 모달 대화상자를 제공합니다.
  * 오버레이와 함께 화면 중앙에 표시되며, 헤더, 본문, 푸터 영역을 슬롯으로 제공합니다.
  */
-export declare class UDialog extends ModalElement {
+export declare class UDialog extends UModalElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** 헤드리스 모드 여부 */
     headless: boolean;
     /** 타이틀 텍스트 */

package/dist/components/dialog/UDialog.component.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { ModalElement } from '../ModalElement.js';
+import { UModalElement } from '../UModalElement.js';
 import { UIcon } from '../icon/UIcon.component.js';
 import { UButton } from '../button/UButton.component.js';
 import { styles } from './UDialog.styles.js';
@@ -14,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UDialog extends ModalElement {
+class UDialog extends UModalElement {
   constructor() {
     super(...arguments);
     this.headless = false;

package/dist/components/divider/UDivider.component.d.ts

@@ -1,10 +1,10 @@
-import { BaseElement } from '../BaseElement.js';
+import { UElement } from '../UElement.js';
 /**
  * Divider 컴포넌트는 엘리먼트 사이에 구분선을 제공합니다.
  */
-export declare class UDivider extends BaseElement {
+export declare class UDivider extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** 수직 방향 여부를 설정합니다. (기본값: 수평) */
     vertical: boolean;
 }

package/dist/components/divider/UDivider.component.js

@@ -1,5 +1,5 @@
 import { property } from 'lit/decorators.js';
-import { BaseElement } from '../BaseElement.js';
+import { UElement } from '../UElement.js';
 import { styles } from './UDivider.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -11,7 +11,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UDivider extends BaseElement {
+class UDivider extends UElement {
   constructor() {
     super(...arguments);
     this.vertical = false;