@iyulab/components 0.3.0 → 1.0.0

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

@@ -1,23 +1,20 @@
-import { css } from 'lit';
-
-const styles = css`
-  /* ── Host ── */
+import { css } from "lit";
+//#region src/components/carousel/UCarousel.styles.ts
+var styles = css`
   :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;
+    cursor: grab;
   }
   :host([draggable]) .slides-wrapper:active {
     cursor: grabbing;
@@ -38,6 +35,7 @@ const styles = css`
 
   .slides {
     display: flex;
+    flex-direction: row;
     width: 100%;
     height: 100%;
     gap: var(--slide-gap, 0px);
@@ -46,12 +44,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 +56,37 @@ 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;
+    padding: 8px;
+    font-size: 20px;
+    color: var(--u-neutral-900);
+    background-color: var(--u-neutral-100);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   }
   .nav-button:hover {
-    opacity: 1;
-    background-color: var(--u-bg-color-hover, #f3f4f6);
+    background-color: var(--u-neutral-200);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    transform: translateY(-50%) scale(1.1);
+  }
+  .nav-button:active {
+    background-color: var(--u-neutral-300);
+    transform: translateY(-50%) scale(0.95);
   }
 
-  .nav-button.prev { left: 16px; }
-  .nav-button.next { right: 16px; }
+  .nav-button.prev { left: 12px; }
+  .nav-button.next { right: 12px; }
 
-  /* ── 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,18 +95,18 @@ 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);
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/checkbox/UCheckbox.d.ts

@@ -0,0 +1,39 @@
+import { UFormControlElement } from '../UFormControlElement.js';
+export type CheckboxVariant = "filled" | "outline";
+export type CheckboxColor = "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink" | "neutral";
+/**
+ * 선택/해제 상태를 토글하는 체크박스 컴포넌트입니다.
+ * indeterminate 상태도 지원합니다.
+ *
+ * @slot - 체크박스 옆에 표시할 라벨 텍스트
+ *
+ * @csspart wrapper - 체크박스 전체 래퍼
+ * @csspart input - 실제 체크박스 input 요소
+ * @csspart checkbox - 체크박스 시각 요소
+ * @csspart label - 라벨 텍스트 요소
+ * @csspart description - 설명 텍스트 요소
+ *
+ * @cssprop --checkbox-color - 체크 표시 색상 (outline variant)
+ * @cssprop --checkbox-border-color - 체크박스 테두리 색상
+ * @cssprop --checkbox-background-color - 체크박스 배경색 (filled variant)
+ */
+export declare class UCheckbox extends UFormControlElement<string> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 스타일 변형 */
+    variant: CheckboxVariant;
+    /** 체크박스 강조 색상 */
+    color: CheckboxColor;
+    /** 중간 상태 */
+    indeterminate: boolean;
+    /** 체크 여부 */
+    checked: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+    validate(): boolean;
+    reset(): void;
+    private handleInputChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-checkbox': UCheckbox;
+    }
+}

package/dist/components/checkbox/UCheckbox.js

@@ -0,0 +1,88 @@
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UFormControlElement } from "../UFormControlElement.js";
+import "../icon/UIcon.js";
+import { styles } from "./UCheckbox.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+import { live } from "lit/directives/live.js";
+//#region src/components/checkbox/UCheckbox.ts
+var UCheckbox = class UCheckbox extends UFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "filled";
+		this.color = "blue";
+		this.indeterminate = false;
+		this.checked = false;
+		this.handleInputChange = (e) => {
+			e.stopImmediatePropagation();
+			if (this.readonly || this.disabled) return;
+			const input = e.target;
+			this.indeterminate = false;
+			this.checked = input.checked;
+			this.internals?.setFormValue(this.checked ? this.value || String(this.checked) : String(this.checked));
+			this.internals?.setValidity(input.validity, this.validationMessage || input.validationMessage, this.shadowRoot?.querySelector(".checkbox") || void 0);
+			if (!this.novalidate) this.validate();
+			this.relay(e);
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <label class="wrapper" part="wrapper">
+        <input part="input"
+          type="checkbox"
+          ?disabled=${this.disabled || this.readonly}
+          ?required=${this.required}
+          .checked=${live(this.checked)}
+          @change=${this.handleInputChange}
+        />
+        <span class="checkbox" part="checkbox">
+          <u-icon
+            lib="internal"
+            name=${this.indeterminate ? "dash-lg" : "check-lg"}
+          ></u-icon>
+        </span>
+        <span class="label" part="label">
+          <slot></slot>
+          <span class="required" ?hidden=${!this.required}>*</span>
+        </span>
+      </label>
+
+      <div class="description" part="description" ?hidden=${!this.description}>
+        ${this.description}
+      </div>
+    `;
+	}
+	validate() {
+		if (this.internals) this.invalid = !this.internals.reportValidity();
+		else this.invalid = this.required && !this.checked;
+		return !this.invalid;
+	}
+	reset() {
+		this.checked = false;
+		this.indeterminate = false;
+		this.invalid = false;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCheckbox.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCheckbox.prototype, "color", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UCheckbox.prototype, "indeterminate", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UCheckbox.prototype, "checked", void 0);
+UCheckbox = __decorate([customElement("u-checkbox")], UCheckbox);
+//#endregion
+export { UCheckbox };

package/dist/components/checkbox/UCheckbox.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/checkbox/UCheckbox.styles.js

@@ -0,0 +1,211 @@
+import { css } from "lit";
+//#region src/components/checkbox/UCheckbox.styles.ts
+var styles = css`
+  :host {
+    --checkbox-color: inherit;
+    --checkbox-border-color: var(--u-input-border-color);
+    --checkbox-background-color: var(--u-input-bg-color);
+  }
+
+  :host {
+    display: inline-flex;
+    flex-direction: column;
+    color: var(--u-txt-color);
+    font-size: inherit;
+    font-family: var(--u-font-base);
+    user-select: none;
+    cursor: pointer;
+  }
+
+  /* === 상태 스타일 === */
+  :host([disabled]) {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  :host([readonly]) {
+    cursor: default;
+  }
+  :host([invalid]) {
+    --checkbox-border-color: var(--u-red-600);
+  }
+  :host([invalid]) .footer {
+    color: var(--u-red-600);
+  }
+  :host([checked]) .checkbox u-icon,
+  :host([indeterminate]) .checkbox u-icon {
+    transform: scale(1);
+  }
+  :host(:not([disabled]):not([readonly]):hover) {
+    --checkbox-border-color: var(--u-input-border-color-hover);
+  }
+
+  /* === Variant: filled - 배경 채움 === */
+  :host([variant="filled"][checked]),
+  :host([variant="filled"][indeterminate]) {
+    --checkbox-color: var(--u-neutral-100);
+    --checkbox-border-color: var(--u-blue-600);
+    --checkbox-background-color: var(--u-blue-600);
+  }
+
+  /* === Variant: outline - 테두리만 === */
+  :host([variant="outline"][checked]),
+  :host([variant="outline"][indeterminate]) {
+    --checkbox-border-color: var(--u-blue-600);
+    --checkbox-background-color: transparent;
+  }
+
+  /* === Color variants (filled) === */
+  :host([variant="filled"][color="blue"][checked]),
+  :host([variant="filled"][color="blue"][indeterminate]) {
+    --checkbox-border-color: var(--u-blue-600);
+    --checkbox-background-color: var(--u-blue-600);
+  }
+  :host([variant="filled"][color="green"][checked]),
+  :host([variant="filled"][color="green"][indeterminate]) {
+    --checkbox-border-color: var(--u-green-600);
+    --checkbox-background-color: var(--u-green-600);
+  }
+  :host([variant="filled"][color="red"][checked]),
+  :host([variant="filled"][color="red"][indeterminate]) {
+    --checkbox-border-color: var(--u-red-600);
+    --checkbox-background-color: var(--u-red-600);
+  }
+  :host([variant="filled"][color="orange"][checked]),
+  :host([variant="filled"][color="orange"][indeterminate]) {
+    --checkbox-border-color: var(--u-orange-600);
+    --checkbox-background-color: var(--u-orange-600);
+  }
+  :host([variant="filled"][color="teal"][checked]),
+  :host([variant="filled"][color="teal"][indeterminate]) {
+    --checkbox-border-color: var(--u-teal-600);
+    --checkbox-background-color: var(--u-teal-600);
+  }
+  :host([variant="filled"][color="cyan"][checked]),
+  :host([variant="filled"][color="cyan"][indeterminate]) {
+    --checkbox-border-color: var(--u-cyan-600);
+    --checkbox-background-color: var(--u-cyan-600);
+  }
+  :host([variant="filled"][color="purple"][checked]),
+  :host([variant="filled"][color="purple"][indeterminate]) {
+    --checkbox-border-color: var(--u-purple-600);
+    --checkbox-background-color: var(--u-purple-600);
+  }
+  :host([variant="filled"][color="pink"][checked]),
+  :host([variant="filled"][color="pink"][indeterminate]) {
+    --checkbox-border-color: var(--u-pink-600);
+    --checkbox-background-color: var(--u-pink-600);
+  }
+  :host([variant="filled"][color="neutral"][checked]),
+  :host([variant="filled"][color="neutral"][indeterminate]) {
+    --checkbox-border-color: var(--u-neutral-600);
+    --checkbox-background-color: var(--u-neutral-600);
+  }
+
+  /* === Color variants (outline) === */
+  :host([variant="outline"][color="blue"][checked]),
+  :host([variant="outline"][color="blue"][indeterminate]) {
+    --checkbox-color: var(--u-blue-600);
+    --checkbox-border-color: var(--u-blue-600);
+  }
+  :host([variant="outline"][color="green"][checked]),
+  :host([variant="outline"][color="green"][indeterminate]) {
+    --checkbox-color: var(--u-green-600);
+    --checkbox-border-color: var(--u-green-600);
+  }
+  :host([variant="outline"][color="red"][checked]),
+  :host([variant="outline"][color="red"][indeterminate]) {
+    --checkbox-color: var(--u-red-600);
+    --checkbox-border-color: var(--u-red-600);
+  }
+  :host([variant="outline"][color="orange"][checked]),
+  :host([variant="outline"][color="orange"][indeterminate]) {
+    --checkbox-color: var(--u-orange-600);
+    --checkbox-border-color: var(--u-orange-600);
+  }
+  :host([variant="outline"][color="teal"][checked]),
+  :host([variant="outline"][color="teal"][indeterminate]) {
+    --checkbox-color: var(--u-teal-600);
+    --checkbox-border-color: var(--u-teal-600);
+  }
+  :host([variant="outline"][color="cyan"][checked]),
+  :host([variant="outline"][color="cyan"][indeterminate]) {
+    --checkbox-color: var(--u-cyan-600);
+    --checkbox-border-color: var(--u-cyan-600);
+  }
+  :host([variant="outline"][color="purple"][checked]),
+  :host([variant="outline"][color="purple"][indeterminate]) {
+    --checkbox-color: var(--u-purple-600);
+    --checkbox-border-color: var(--u-purple-600);
+  }
+  :host([variant="outline"][color="pink"][checked]),
+  :host([variant="outline"][color="pink"][indeterminate]) {
+    --checkbox-color: var(--u-pink-600);
+    --checkbox-border-color: var(--u-pink-600);
+  }
+  :host([variant="outline"][color="neutral"][checked]),
+  :host([variant="outline"][color="neutral"][indeterminate]) {
+    --checkbox-color: var(--u-neutral-600);
+    --checkbox-border-color: var(--u-neutral-600);
+  }
+
+  .wrapper {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: 0.5em;
+    cursor: inherit;
+  }
+
+  /* 네이티브 체크박스 */
+  input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+  input:focus-visible ~ .checkbox {
+    box-shadow:
+      0 0 0 1px var(--u-input-border-color-focus),
+      0 0 0 3px rgba(59, 130, 246, 0.22);
+  }
+
+  /* 체크박스 외형 */
+  .checkbox {
+    flex-shrink: 0;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.2em;
+    height: 1.2em;
+    color: var(--checkbox-color);
+    border: 2px solid var(--checkbox-border-color);
+    border-radius: 0.2em;
+    background-color: var(--checkbox-background-color);
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+  }
+
+  /* 체크박스 아이콘 */
+  .checkbox u-icon {
+    font-size: 0.85em;
+    transform: scale(0);
+    transition: transform 0.15s ease;
+  }
+
+  .label {
+    font-size: 1em;
+    line-height: 1.2;
+  }
+
+  .required {
+    color: var(--u-red-600);
+    font-weight: 500;
+  }
+
+  .description {
+    margin-top: 0.5em;
+    color: var(--u-txt-color-weak);
+    font-size: 0.75em;
+    line-height: 1.2;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/chip/UChip.d.ts

@@ -0,0 +1,43 @@
+import { UElement } from '../UElement.js';
+import { TagVariant, TagColor } from '../tag/UTag.js';
+/**
+ * 태그 상태 표시 또는 선택 UI와 인터랙션(선택, 삭제)을 지원하는 칩 컴포넌트입니다.
+ *
+ * @slot - 칩의 주요 콘텐츠
+ * @slot prefix - 칩의 앞에 표시할 콘텐츠
+ * @slot suffix - 칩의 뒤에 표시할 콘텐츠
+ * @slot tooltip - 툴팁 표시
+ *
+ * @csspart tag - 내부 UTag 요소
+ * @csspart check - 선택 상태를 나타내는 체크 아이콘
+ * @csspart remove - 삭제 버튼
+ * @csspart tooltip - 툴팁 요소
+ *
+ * @event pick - 선택 시 발생
+ * @event remove - 삭제 버튼 클릭 시 발생
+ */
+export declare class UChip extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 칩의 스타일 변형 */
+    variant: TagVariant;
+    /** 칩의 색상 */
+    color: TagColor;
+    /** 둥근 모서리 여부 */
+    rounded: boolean;
+    /** 삭제 가능 여부 */
+    removable: boolean;
+    /** 선택 가능 여부 */
+    selectable: boolean;
+    /** 선택 상태 */
+    selected: boolean;
+    /** 칩의 고유값 */
+    value: string;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleTagClick;
+    private handleRemoveClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-chip': UChip;
+    }
+}

package/dist/components/chip/UChip.js

@@ -0,0 +1,103 @@
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "../icon/UIcon.js";
+import "../button/UButton.js";
+import "../tooltip/UTooltip.js";
+import "../tag/UTag.js";
+import { styles } from "./UChip.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/chip/UChip.ts
+var UChip = class UChip extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "filled";
+		this.color = "neutral";
+		this.rounded = false;
+		this.removable = false;
+		this.selectable = false;
+		this.selected = false;
+		this.value = "";
+		this.handleTagClick = (e) => {
+			if (!this.selectable) return;
+			this.selected = !this.selected;
+			this.fire("pick", { detail: {
+				value: this.value,
+				selected: this.selected,
+				shiftKey: e.shiftKey,
+				metaKey: e.metaKey,
+				ctrlKey: e.ctrlKey
+			} });
+		};
+		this.handleRemoveClick = (e) => {
+			e.stopImmediatePropagation();
+			if (this.fire("remove")) this.remove();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <u-tag part="tag"
+        .variant=${this.variant}
+        .color=${this.color}
+        .rounded=${this.rounded}
+        @click=${this.handleTagClick}
+      >
+        <u-icon class="check-icon" part="check" slot="prefix"
+          ?hidden=${!this.selectable || !this.selected}  
+          lib="internal" 
+          name="check-lg"
+        ></u-icon>
+
+        <slot name="prefix" slot="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix" slot="suffix"></slot>
+        
+        <u-button class="remove-btn" part="remove" slot="suffix"
+          ?hidden=${!this.removable}
+          rounded
+          variant="ghost"
+          tabindex="-1"
+          aria-label="Remove"
+          @click=${this.handleRemoveClick}>
+          <u-icon lib="internal" name="x-lg"></u-icon>
+        </u-button>
+      </u-tag>
+
+      <u-tooltip part="tooltip">
+        <slot name="tooltip"></slot>
+      </u-tooltip>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UChip.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UChip.prototype, "color", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UChip.prototype, "rounded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UChip.prototype, "removable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UChip.prototype, "selectable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UChip.prototype, "selected", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UChip.prototype, "value", void 0);
+UChip = __decorate([customElement("u-chip")], UChip);
+//#endregion
+export { UChip };

package/dist/components/chip/UChip.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/chip/UChip.styles.js

@@ -0,0 +1,31 @@
+import { css } from "lit";
+//#region src/components/chip/UChip.styles.ts
+var styles = css`
+  :host {
+    display: inline-flex;
+    user-select: none;
+    cursor: default;
+  }
+  :host([selectable]) {
+    cursor: pointer;
+  }
+
+  :host([selectable]:hover) u-tag {
+    filter: brightness(0.95);
+  }
+  :host([selectable][selected]) u-tag {
+    outline: 2px solid currentColor;
+    outline-offset: -1px;
+    font-weight: 600;
+  }
+
+  .check-icon {
+    font-size: 1em;
+  }
+
+  .remove-btn {
+    font-size: 0.7em;
+  }
+`;
+//#endregion
+export { styles };

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

@@ -1,7 +1,34 @@
-import { UDialog } from './UDialog.component.js';
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { UOverlayElement } from '../UOverlayElement.js';
+export type DialogPlacement = 'top-start' | 'top' | 'top-end' | 'start' | 'center' | 'end' | 'bottom-start' | 'bottom' | 'bottom-end';
+/**
+ * 오버레이 위에 모달 창을 제공하는 다이얼로그 컴포넌트입니다.
+ *
+ * @slot - 본문 영역
+ * @slot header - 헤더 콘텐츠 영역
+ * @slot footer - 푸터 영역 (액션 버튼 등)
+ *
+ * @csspart container - 다이얼로그의 컨테이너 요소
+ * @csspart panel - 다이얼로그의 패널 요소
+ * @csspart header - 다이얼로그의 헤더 요소
+ * @csspart body - 다이얼로그의 본문 요소
+ * @csspart close-btn - 닫기 버튼 요소
+ */
+export declare class UDialog extends UOverlayElement {
+    static styles: CSSResultGroup;
+    /** 닫기 버튼 표시 여부 */
+    closable: boolean;
+    /** 다이얼로그 배치 위치 */
+    placement: DialogPlacement;
+    /** 가장자리로부터의 간격 (px) */
+    offset: number;
+    private hasHeader;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleHeaderSlotChange;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-dialog': UDialog;
     }
 }
-export { UDialog };