@iyulab/components 0.4.0 → 1.0.0

package/dist/components/UOverlayElement.d.ts

@@ -0,0 +1,66 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { UElement } from './UElement.js';
+/** closeOn에 지정할 수 있는 닫기 트리거 */
+export type CloseOnPolicy = 'escape' | 'backdrop' | 'button';
+/** 오버레이 모드 */
+export type OverlayMode = 'modal' | 'non-modal';
+/**
+ * UOverlayElement는 다이얼로그, 드로어 등 화면에 오버레이로 표시되는 엘리먼트의 기본 클래스입니다.
+ */
+export declare abstract class UOverlayElement extends UElement {
+    static styles: CSSResultGroup;
+    /**
+     * 열림/닫힘 상태
+     *
+     * @default false
+     */
+    open: boolean;
+    /**
+     * contained 모드 여부
+     * - true이면 position: absolute로 부모 기준 오버레이
+     * - modal이어도 body scroll lock을 적용하지 않음
+     *
+     * @default false
+     */
+    contained: boolean;
+    /**
+     * 오버레이 모드
+     * - `modal` — focus trap, scroll lock, 백드롭 차단 (기본값)
+     * - `non-modal` — 주변 UI와 자유 상호작용, 배경 투명, scroll lock 없음
+     *
+     * @default 'modal'
+     */
+    mode: OverlayMode;
+    /**
+     * 사용자 상호작용에 의한 닫기 트리거 목록, 어트리뷰트는 쉼표로 구분된 배열 형태입니다.
+     *
+     * @default
+     * ['escape', 'backdrop', 'button']
+     */
+    closeOn: CloseOnPolicy[];
+    /** focus trap 인스턴스 (modal일 때만 사용) */
+    private focusTrap?;
+    /** modal이고 contained가 아닌 경우에만 body scroll lock */
+    private get shouldLockBody();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * 오버레이를 표시합니다. u-show 이벤트가 취소되면 열리지 않습니다.
+     */
+    show(): boolean;
+    /**
+     * 오버레이를 숨깁니다. u-hide 이벤트가 취소되면 닫히지 않습니다.
+     */
+    hide(): boolean;
+    /** closeOn 정책에 따라 닫기를 시도합니다. */
+    requestClose(source: string): void;
+    /** 오버레이가 열릴 때 설정을 적용합니다. */
+    private setup;
+    /** 오버레이가 닫힐 때 설정을 해제합니다. */
+    private cleanup;
+    /** host 자체를 클릭한 경우(백드롭)만 닫기 요청 */
+    private handlePointerdown;
+    /** ESC 키 입력 시 닫기 요청 (최상위 오버레이에 대해서만) */
+    private handleWindowKeydown;
+}

package/dist/components/UOverlayElement.js

@@ -0,0 +1,123 @@
+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 { OverlayManager } from "../utilities/OverlayManager.js";
+import { arrayAttrConverter } from "../utilities/converters.js";
+import { styles } from "./UOverlayElement.styles.js";
+import { property } from "lit/decorators.js";
+import { createFocusTrap } from "focus-trap";
+//#region src/components/UOverlayElement.ts
+/**
+* UOverlayElement는 다이얼로그, 드로어 등 화면에 오버레이로 표시되는 엘리먼트의 기본 클래스입니다.
+*/
+var UOverlayElement = class extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.contained = false;
+		this.mode = "modal";
+		this.closeOn = [
+			"escape",
+			"backdrop",
+			"button"
+		];
+		this.handlePointerdown = (e) => {
+			if (e.composedPath()[0] === this) this.requestClose("backdrop");
+		};
+		this.handleWindowKeydown = (e) => {
+			if (!this.open || e.key !== "Escape") return;
+			if (!OverlayManager.isTopmost(this)) return;
+			e.preventDefault();
+			this.requestClose("escape");
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	/** modal이고 contained가 아닌 경우에만 body scroll lock */
+	get shouldLockBody() {
+		return this.mode === "modal" && !this.contained;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("tabindex", "-1");
+	}
+	disconnectedCallback() {
+		this.cleanup();
+		super.disconnectedCallback();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("open")) this.open ? this.setup() : this.cleanup();
+	}
+	/** 
+	* 오버레이를 표시합니다. u-show 이벤트가 취소되면 열리지 않습니다. 
+	*/
+	show() {
+		if (this.open) return true;
+		if (this.fire("show")) {
+			this.open = true;
+			return true;
+		}
+		return false;
+	}
+	/** 
+	* 오버레이를 숨깁니다. u-hide 이벤트가 취소되면 닫히지 않습니다. 
+	*/
+	hide() {
+		if (!this.open) return true;
+		if (this.fire("hide")) {
+			this.open = false;
+			return true;
+		}
+		return false;
+	}
+	/** closeOn 정책에 따라 닫기를 시도합니다. */
+	requestClose(source) {
+		if (this.closeOn.includes(source)) this.hide();
+	}
+	/** 오버레이가 열릴 때 설정을 적용합니다. */
+	setup() {
+		OverlayManager.add(this, this.shouldLockBody);
+		window.addEventListener("keydown", this.handleWindowKeydown);
+		this.addEventListener("pointerdown", this.handlePointerdown);
+		if (this.mode === "modal") {
+			if (!this.focusTrap) this.focusTrap = createFocusTrap(this, {
+				escapeDeactivates: false,
+				clickOutsideDeactivates: false,
+				allowOutsideClick: true,
+				fallbackFocus: this,
+				trapStack: OverlayManager.trapStack,
+				tabbableOptions: { getShadowRoot: true }
+			});
+			this.focusTrap.activate();
+		}
+	}
+	/** 오버레이가 닫힐 때 설정을 해제합니다. */
+	cleanup() {
+		this.focusTrap?.deactivate();
+		window.removeEventListener("keydown", this.handleWindowKeydown);
+		this.removeEventListener("pointerdown", this.handlePointerdown);
+		OverlayManager.remove(this, this.shouldLockBody);
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UOverlayElement.prototype, "open", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UOverlayElement.prototype, "contained", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UOverlayElement.prototype, "mode", void 0);
+__decorate([property({
+	type: Array,
+	reflect: true,
+	attribute: "close-on",
+	converter: arrayAttrConverter()
+}), __decorateMetadata("design:type", Array)], UOverlayElement.prototype, "closeOn", void 0);
+//#endregion
+export { UOverlayElement };

package/dist/components/UOverlayElement.styles.d.ts

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

package/dist/components/UOverlayElement.styles.js

@@ -0,0 +1,35 @@
+import { css } from "lit";
+//#region src/components/UOverlayElement.styles.ts
+var styles = css`
+  :host {
+    position: fixed;
+    z-index: 9999;
+    inset: 0;
+    display: flex;
+    background: var(--u-overlay-bg-color, rgba(0, 0, 0, 0.4));
+
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 0.2s ease, visibility 0s 0.2s;
+    overflow: hidden;
+  }
+  :host([open]) {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transition-delay: 0s;
+  }
+  :host([contained]) {
+    position: absolute;
+  }
+  :host([mode="non-modal"]) {
+    background: transparent;
+    pointer-events: none;
+  }
+  :host([mode="non-modal"][open]) {
+    pointer-events: none;
+  }
+`;
+//#endregion
+export { styles };

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

@@ -1,8 +1,63 @@
-import { UAlert } from './UAlert.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+export type AlertStatus = "error" | "warning" | "success" | "info" | "notice";
+export type AlertVariant = "solid" | "filled" | "outlined" | "glass";
+/**
+ * 사용자에게 메시지를 표시하는 Alert 컴포넌트입니다.
+ * 자동 닫힘 타이머, 닫기 버튼, 다양한 상태(status) 및 형태(variant)를 지원합니다.
+ * open 속성이 토글될 때 opacity/scale 트랜지션으로 표시·숨김 처리됩니다.
+ *
+ * @slot - Alert 본문 콘텐츠
+ * @slot footer - Alert 하단 콘텐츠 (예: 액션 버튼)
+ *
+ * @csspart container - 전체 Alert 컨테이너 (flex column)
+ * @csspart header - 아이콘·타이틀·닫기 버튼을 포함하는 상단 행
+ * @csspart icon - 상태 아이콘 (status 없으면 hidden)
+ * @csspart title - 타이틀 텍스트 (title 미지정 시 status 대문자 또는 'MESSAGE')
+ * @csspart close-btn - 닫기 버튼 (closable=true 일 때만 표시)
+ * @csspart content - 스크롤 가능한 본문 영역
+ * @csspart footer - 하단 슬롯 영역
+ *
+ * @cssprop --alert-background-color - 배경색 (status에 따라 자동 설정, variant="outlined"는 transparent)
+ * @cssprop --alert-border-color - 테두리 색상 (status에 따라 자동 설정, variant="filled"는 transparent)
+ * @cssprop --alert-icon-color - 아이콘 색상 (status에 따라 자동 설정)
+ *
+ * @event show - Alert가 표시되기 직전 발생 (취소 가능)
+ * @event hide - Alert가 닫히기 직전 발생 (취소 가능)
+ */
+export declare class UAlert extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 표시 여부 */
+    open: boolean;
+    /** 닫기 버튼 표시 여부 */
+    closable: boolean;
+    /** 형태 스타일 (solid, filled, outlined, glass) */
+    variant: AlertVariant;
+    /** 상태 (warning, error, info, success, notice) */
+    status?: AlertStatus;
+    /** 타이틀 라벨 */
+    title: string;
+    /** 자동 닫힘 타이머 (밀리초 단위, 0이하면 비활성화) */
+    duration: number;
+    /** 자동 닫힘 타이머 ID */
+    private timeoutId?;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Alert를 표시합니다.
+     */
+    show(): boolean;
+    /**
+     * Alert를 숨깁니다.
+     */
+    hide(): boolean;
+    /** Alert 상태에 따른 아이콘 이름을 반환합니다. */
+    private mapIcon;
+    /** 자동 닫힘 타이머를 설정하거나 해제합니다. */
+    private setTimer;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-alert': UAlert;
     }
 }
-export { UAlert };
-export type { AlertType } from './UAlert.component.js';

package/dist/components/alert/UAlert.js

@@ -1,5 +1,116 @@
-import { UAlert } from './UAlert.component.js';
-
-UAlert.define("u-alert");
-
+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 { styles } from "./UAlert.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/alert/UAlert.ts
+var UAlert = class UAlert extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.closable = false;
+		this.variant = "solid";
+		this.title = "";
+		this.duration = 0;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("open")) this.setTimer(this.open);
+	}
+	render() {
+		return html`
+      <div class="container" part="container">
+        <div class="header" part="header">
+          <u-icon class="icon" part="icon"
+            ?hidden=${!this.status}
+            lib="internal"
+            name=${this.mapIcon(this.status)}
+          ></u-icon>
+          <div class="title" part="title">
+            ${this.title || this.status?.toUpperCase() || "MESSAGE"}
+          </div>
+          <u-button class="close-btn" part="close-btn"
+            variant="ghost"
+            ?hidden=${!this.closable}
+            @click=${this.hide}>
+            <u-icon lib="internal" name="x-lg"></u-icon>
+          </u-button>
+        </div>
+        <div class="content" part="content" scrollable>
+          <slot></slot>
+        </div>
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+	}
+	/**
+	* Alert를 표시합니다. 
+	*/
+	show() {
+		if (this.open) return true;
+		if (this.fire("show")) {
+			this.open = true;
+			return true;
+		}
+		return false;
+	}
+	/** 
+	* Alert를 숨깁니다. 
+	*/
+	hide() {
+		if (!this.open) return true;
+		if (this.fire("hide")) {
+			this.open = false;
+			return true;
+		}
+		return false;
+	}
+	/** Alert 상태에 따른 아이콘 이름을 반환합니다. */
+	mapIcon(status) {
+		switch (status) {
+			case "error": return "exclamation-circle-fill";
+			case "warning": return "exclamation-triangle-fill";
+			case "success": return "check-circle-fill";
+			case "info": return "info-circle-fill";
+			case "notice": return "bell-fill";
+			default: return "bell-fill";
+		}
+	}
+	/** 자동 닫힘 타이머를 설정하거나 해제합니다. */
+	setTimer(open) {
+		if (open) {
+			if (this.duration && this.duration > 0) this.timeoutId = window.setTimeout(() => {
+				this.hide();
+			}, this.duration);
+		} else clearTimeout(this.timeoutId);
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UAlert.prototype, "open", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UAlert.prototype, "closable", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UAlert.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UAlert.prototype, "status", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UAlert.prototype, "title", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UAlert.prototype, "duration", void 0);
+UAlert = __decorate([customElement("u-alert")], UAlert);
+//#endregion
 export { UAlert };

package/dist/components/alert/UAlert.styles.js

@@ -1,58 +1,91 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/alert/UAlert.styles.ts
+var styles = css`
+  /* === Status Colors === */
   :host {
-    --icon-primary-color: var(--u-neutral-700);
-    --min-content-rows: 1;
-    --max-content-rows: 3;
+    --alert-icon-color: var(--u-neutral-700);
+    --alert-border-color: var(--u-neutral-300);
+    --alert-background-color: var(--u-neutral-200);
+  }
+  :host([status="error"]) {
+    --alert-icon-color: var(--u-red-700);
+    --alert-border-color: var(--u-red-300);
+    --alert-background-color: var(--u-red-200);
+  }
+  :host([status="warning"]) {
+    --alert-icon-color: var(--u-yellow-700);
+    --alert-border-color: var(--u-yellow-300);
+    --alert-background-color: var(--u-yellow-200);
+  }
+  :host([status="info"]) {
+    --alert-icon-color: var(--u-blue-700);
+    --alert-border-color: var(--u-blue-300);
+    --alert-background-color: var(--u-blue-200);
+  }
+  :host([status="success"]) {
+    --alert-icon-color: var(--u-green-700);
+    --alert-border-color: var(--u-green-300);
+    --alert-background-color: var(--u-green-200);
+  }
+  :host([status="notice"]) {
+    --alert-icon-color: var(--u-neutral-700);
+    --alert-border-color: var(--u-neutral-300);
+    --alert-background-color: var(--u-neutral-200);
   }
 
   :host {
     display: block;
-    min-width: 300px;
-    max-width: 500px;
-
+    width: fit-content;
+    min-width: 200px;
+    max-width: 100%;
+    max-height: 50vh;
+    padding: 8px 12px;
     border-radius: 8px;
     box-shadow: 0 4px 12px var(--u-shadow-color-normal);
     
     opacity: 0;
     transform: scale(0.8);
-    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);    
+    visibility: hidden;
+    pointer-events: none;
+    transition: 
+      visibility 0s 0.2s,
+      opacity 0.2s ease,
+      transform 0.2s ease-out;
   }
   :host([open]) {
     opacity: 1;
     transform: scale(1);
+    visibility: visible;
+    pointer-events: auto;
+    transition-delay: 0s;
   }
-  :host([type="error"]) {
-    --icon-primary-color: var(--u-red-700);
-    border-color: var(--u-red-300);
-    background-color: var(--u-red-200);
-  }
-  :host([type="warning"]) {
-    --icon-primary-color: var(--u-yellow-700);
-    border-color: var(--u-yellow-300);
-    background-color: var(--u-yellow-200);
-  }
-  :host([type="info"]) {
-    --icon-primary-color: var(--u-blue-700);
-    border-color: var(--u-blue-300);
-    background-color: var(--u-blue-200);
-  }
-  :host([type="success"]) {
-    --icon-primary-color: var(--u-green-700);
-    border-color: var(--u-green-300);
-    background-color: var(--u-green-200);
-  }
-  :host([type="notice"]) {
-    --icon-primary-color: var(--u-neutral-700);
-    border-color: var(--u-neutral-300);
-    background-color: var(--u-neutral-200);
+
+  /* === Variant Styles === */
+  :host([variant="solid"]) {
+    border: 1px solid var(--alert-border-color);
+    background-color: var(--alert-background-color);
+  }
+  :host([variant="filled"]) {
+    border: 1px solid transparent;
+    background-color: var(--alert-background-color);
+  }
+  :host([variant="outlined"]) {
+    border: 1px solid var(--alert-border-color);
+    background-color: transparent;
+  }
+  /* From https://css.glass */
+  :host([variant="glass"]) {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
   }
 
   .container {
     display: flex;
     flex-direction: column;
-    padding: 8px 12px;
     overflow: hidden;
   }
 
@@ -68,7 +101,7 @@ const styles = css`
   }
   .header .icon {
     flex-shrink: 0;
-    color: var(--icon-primary-color);
+    color: var(--alert-icon-color);
   }
   .header .title {
     flex-grow: 1;
@@ -77,23 +110,15 @@ const styles = css`
   }
   .header .close-btn {
     flex-shrink: 0;
-    color: var(--u-icon-color);
-    cursor: pointer;
-  }
-  .header .close-btn:hover {
-    color: var(--u-icon-color-hover);
-  }
-  .header .close-btn:active {
-    color: var(--u-icon-color-active);
-    transform: scale(0.9);
+    padding: 4px;
+    font-size: inherit;
+    border-radius: 4px;
   }
 
   .content {
     font-size: 14px;
     font-weight: 300;
     line-height: 1.5;
-    min-height: calc(1.6em * var(--min-content-rows));
-    max-height: calc(1.6em * var(--max-content-rows));
     overflow-y: auto;
   }
 
@@ -101,5 +126,5 @@ const styles = css`
     display: inline-block;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/avatar/UAvatar.d.ts

@@ -0,0 +1,27 @@
+import { UElement } from '../UElement.js';
+export type AvatarShape = "circle" | "square" | "rounded";
+/**
+ * 이미지, 라벨, 또는 슬롯 콘텐츠를 표시하는 아바타 컴포넌트입니다.
+ *
+ * @slot - 이미지나 라벨이 없을 때 표시할 커스텀 콘텐츠
+ *
+ * @csspart image - 아바타 이미지 요소
+ * @csspart label - 이니셜 라벨 텍스트 요소
+ */
+export declare class UAvatar extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 아바타 형태 */
+    shape: AvatarShape;
+    /** 아웃라인 표시 */
+    outline: boolean;
+    /** 이미지 URL */
+    image?: string;
+    /** 이니셜 라벨 텍스트 (이미지가 없을 때 표시) */
+    label?: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-avatar': UAvatar;
+    }
+}

package/dist/components/avatar/UAvatar.js

@@ -0,0 +1,42 @@
+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 { styles } from "./UAvatar.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/avatar/UAvatar.ts
+var UAvatar = class UAvatar extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.shape = "circle";
+		this.outline = false;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		if (this.image) return html`
+        <img part="image"
+          src=${this.image}
+          alt=${this.label || "Avatar"}
+        />`;
+		if (this.label) return html`
+        <span part="label" class="label">
+          ${this.label.slice(0, 2)}
+        </span>`;
+		return html`<slot></slot>`;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UAvatar.prototype, "shape", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UAvatar.prototype, "outline", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UAvatar.prototype, "image", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UAvatar.prototype, "label", void 0);
+UAvatar = __decorate([customElement("u-avatar")], UAvatar);
+//#endregion
+export { UAvatar };

package/dist/components/avatar/UAvatar.styles.d.ts

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