@iyulab/components 0.3.0 → 1.0.0

package/dist/components/UFloatingElement.js

@@ -0,0 +1,238 @@
+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 { getParentElement, querySelectorAllWithin } from "../utilities/elements.js";
+import { styles } from "./UFloatingElement.styles.js";
+import { property, state } from "lit/decorators.js";
+import { arrow, autoPlacement, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+//#region src/components/UFloatingElement.ts
+/**
+* UFloatingElement는 팝오버, 툴팁 등 화면에 떠 있는 엘리먼트를 구현하기 위한 기본 클래스입니다.
+* 이 클래스를 상속하여 커스텀 팝오버 컴포넌트를 만들 수 있습니다.
+* 
+* @event show - 엘리먼트가 표시되기 전에 발생합니다. 이벤트 핸들러에서 false를 반환하면 표시가 취소됩니다.
+* @event hide - 엘리먼트가 숨겨지기 전에 발생합니다. 이벤트 핸들러에서 false를 반환하면 숨김이 취소됩니다.
+*/
+var UFloatingElement = class extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.disabled = false;
+		this.strategy = "absolute";
+		this.offset = 0;
+		this.shift = false;
+		this.arrow = false;
+		this.showDelay = 0;
+		this.hideDelay = 0;
+		this.cleanup = null;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.anchors || this.anchors.length === 0) {
+			const parent = getParentElement(this);
+			this.anchors = parent ? [parent] : [];
+		}
+	}
+	disconnectedCallback() {
+		if (this.cleanup !== null) this.cleanup();
+		this.cleanup = null;
+		clearTimeout(this.showTimer);
+		clearTimeout(this.hideTimer);
+		this.showTimer = void 0;
+		this.hideTimer = void 0;
+		super.disconnectedCallback();
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has("for")) this.anchors = this.getAnchors(this.for);
+		if (changedProperties.has("arrow")) this.toggleArrowElement(this.arrow);
+	}
+	/** 
+	* 현재 엘리먼트를 표시합니다.
+	* 
+	* @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
+	* @returns 표시 성공 여부를 나타내는 Promise입니다.
+	*/
+	async show(target) {
+		if (this.disabled) return false;
+		if (this.hideTimer) {
+			clearTimeout(this.hideTimer);
+			this.hideTimer = void 0;
+		}
+		if (this.showTimer) return true;
+		if (this.cleanup !== null) {
+			this.cleanup();
+			this.cleanup = null;
+		}
+		await this.reposition(target);
+		this.cleanup = autoUpdate(target, this, () => {
+			this.reposition(target);
+		});
+		this.targetEl = target;
+		if (this.open) return true;
+		if (this.fire("show")) {
+			if (this.showDelay > 0) this.showTimer = window.setTimeout(() => {
+				this.showTimer = void 0;
+				this.open = true;
+			}, this.showDelay);
+			else this.open = true;
+			return true;
+		}
+		return false;
+	}
+	/** 
+	* 현재 엘리먼트를 숨깁니다.
+	* 
+	* @returns 숨김 성공 여부를 나타내는 Promise입니다.
+	*/
+	async hide() {
+		if (this.disabled) return false;
+		if (this.showTimer) {
+			clearTimeout(this.showTimer);
+			this.showTimer = void 0;
+		}
+		if (this.hideTimer) return true;
+		if (this.cleanup !== null) {
+			this.cleanup();
+			this.cleanup = null;
+		}
+		await this.updateComplete;
+		this.targetEl = void 0;
+		if (!this.open) return true;
+		if (this.fire("hide")) {
+			if (this.hideDelay > 0) this.hideTimer = window.setTimeout(() => {
+				this.hideTimer = void 0;
+				this.open = false;
+			}, this.hideDelay);
+			else this.open = false;
+			return true;
+		}
+		return false;
+	}
+	/** 
+	* `@floating-ui/dom` 를 이용하여 위치를 계산하고 style 을 적용합니다. 
+	* 
+	* @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
+	*/
+	async reposition(target) {
+		const position = await computePosition(target, this, {
+			strategy: this.strategy,
+			placement: this.placement,
+			middleware: [
+				offset(this.offset),
+				shift({ mainAxis: this.shift }),
+				this.placement ? flip() : autoPlacement(),
+				...this.arrowEl ? [arrow({ element: this.arrowEl })] : []
+			]
+		});
+		const config = {
+			top: {
+				transform: "center bottom",
+				aside: "bottom",
+				clipPath: "polygon(0 0, 100% 0, 50% 70%)"
+			},
+			bottom: {
+				transform: "center top",
+				aside: "top",
+				clipPath: "polygon(50% 30%, 100% 100%, 0 100%)"
+			},
+			left: {
+				transform: "right center",
+				aside: "right",
+				clipPath: "polygon(0 0, 70% 50%, 0 100%)"
+			},
+			right: {
+				transform: "left center",
+				aside: "left",
+				clipPath: "polygon(100% 0, 100% 100%, 30% 50%)"
+			}
+		}[position.placement.split("-")[0]];
+		Object.assign(this.style, {
+			left: `${position.x}px`,
+			top: `${position.y}px`,
+			transformOrigin: config.transform
+		});
+		const arrowData = position.middlewareData.arrow;
+		if (!this.arrowEl || !arrowData) return;
+		Object.assign(this.arrowEl.style, {
+			left: arrowData.x != null ? `${arrowData.x}px` : "",
+			top: arrowData.y != null ? `${arrowData.y}px` : "",
+			right: "",
+			bottom: "",
+			[config.aside]: `-${this.arrowEl.offsetWidth - 1}px`,
+			clipPath: config.clipPath
+		});
+	}
+	/** 
+	* 이벤트에서 사용할 가상 타겟 엘리먼트를 생성합니다. 
+	* 
+	* @param event - 마우스 이벤트 객체입니다.
+	* @returns 가상 타겟 엘리먼트입니다.
+	*/
+	createVirtualTarget(event) {
+		return { getBoundingClientRect: () => ({
+			width: 0,
+			height: 0,
+			x: event.clientX,
+			y: event.clientY,
+			top: event.clientY,
+			left: event.clientX,
+			right: event.clientX,
+			bottom: event.clientY
+		}) };
+	}
+	/** arrow 속성의 변경에 따라 화살표 요소를 추가 또는 제거하는 메서드입니다. */
+	toggleArrowElement(enabled) {
+		if (enabled) {
+			if (this.arrowEl) return;
+			this.arrowEl = document.createElement("div");
+			this.arrowEl.id = "arrow";
+			this.renderRoot.appendChild(this.arrowEl);
+		} else {
+			if (!this.arrowEl) return;
+			this.renderRoot.removeChild(this.arrowEl);
+			this.arrowEl = void 0;
+		}
+	}
+	/** 쿼리 선택자를 사용하여 앵커 엘리먼트를 찾습니다. */
+	getAnchors(selectors) {
+		if (selectors) {
+			const anchors = querySelectorAllWithin(this, selectors);
+			return Array.from(anchors);
+		} else {
+			const parent = getParentElement(this);
+			return parent ? [parent] : [];
+		}
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UFloatingElement.prototype, "open", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UFloatingElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", String)], UFloatingElement.prototype, "for", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UFloatingElement.prototype, "strategy", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UFloatingElement.prototype, "placement", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], UFloatingElement.prototype, "offset", void 0);
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UFloatingElement.prototype, "shift", void 0);
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UFloatingElement.prototype, "arrow", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "show-delay"
+}), __decorateMetadata("design:type", Number)], UFloatingElement.prototype, "showDelay", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "hide-delay"
+}), __decorateMetadata("design:type", Number)], UFloatingElement.prototype, "hideDelay", void 0);
+__decorate([state(), __decorateMetadata("design:type", Array)], UFloatingElement.prototype, "anchors", void 0);
+//#endregion
+export { UFloatingElement };

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

@@ -0,0 +1,9 @@
+/**
+ * **주의**:
+ * 조상 요소에 transform + overflow의 조합일 경우,
+ * floating element가 뷰포트가 아닌 부모 요소를 기준으로 위치하게 됩니다.
+ * 이 경우, floating element가 부모 요소의 경계를 벗어나지 못하게 됩니다.
+ *
+ * **해결 방안**: 상위 레이어로 위치 변경
+ */
+export declare const styles: import('lit').CSSResult;

package/dist/components/UFloatingElement.styles.js

@@ -0,0 +1,46 @@
+import { css } from "lit";
+//#region src/components/UFloatingElement.styles.ts
+/**
+* **주의**: 
+* 조상 요소에 transform + overflow의 조합일 경우, 
+* floating element가 뷰포트가 아닌 부모 요소를 기준으로 위치하게 됩니다.
+* 이 경우, floating element가 부모 요소의 경계를 벗어나지 못하게 됩니다.
+* 
+* **해결 방안**: 상위 레이어로 위치 변경
+*/
+var styles = css`
+  :host {
+    position: absolute;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: max-content;
+
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 0.2s ease, visibility 0s 0.2s;
+  }
+  :host([open]) {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transition-delay: 0s;
+  }
+  :host([strategy="absolute"]) {
+    position: absolute;
+  }
+  :host([strategy="fixed"]) {
+    position: fixed;
+  }
+
+  /* 화살표: clip-path로 삼각형 */
+  #arrow {
+    position: absolute;
+    width: 0.5em;
+    height: 0.5em;
+    background-color: inherit;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/UFormControlElement.d.ts

@@ -0,0 +1,57 @@
+import { CSSResultGroup } from 'lit';
+import { UElement } from './UElement.js';
+/**
+ * 폼 컨트롤 컴포넌트의 공통 기반 클래스입니다.
+ * 사용자 입력을 받는 모든 컴포넌트가 이 클래스를 확장합니다.
+ */
+export declare abstract class UFormControlElement<T> extends UElement {
+    static styles: CSSResultGroup;
+    static formAssociated: boolean;
+    /** 비활성 상태 */
+    disabled: boolean;
+    /** 읽기 전용 상태 */
+    readonly: boolean;
+    /** 필수 입력 여부 */
+    required: boolean;
+    /** 유효성 검증 실패 상태 */
+    invalid: boolean;
+    /** 값 변경시 자동 유효성 검증 여부 */
+    novalidate: boolean;
+    /** 필드 라벨 */
+    label?: string;
+    /** 보조 설명 텍스트 */
+    description?: string;
+    /** 커스텀 유효성 검증 메시지 */
+    validationMessage?: string;
+    /** 폼 제출 시 사용되는 이름 */
+    name?: string;
+    /** 폼 제출 시 사용되는 값 */
+    value?: T;
+    /**
+     * ElementInternals는 폼과의 연동, 유효성 검사 상태 관리 등을 지원하는 네이티브 API입니다.
+     */
+    protected internals?: ElementInternals;
+    /**
+     * 폼과의 연동을 위해 `form` 속성을 제공합니다. ElementInternals를 지원하는 브라우저에서 폼 요소에 접근할 수 있습니다.
+     * 지원하지 않는 브라우저에서는 null을 반환합니다.
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * 각 컴포넌트가 자신의 검증 로직으로 validity 상태를 갱신하면, 이 객체를 통해 유효성 상태를 확인할 수 있습니다.
+     * ElementInternals를 지원하지 않는 브라우저에서는 undefined를 반환합니다.
+     */
+    get validity(): ValidityState | undefined;
+    connectedCallback(): void;
+    /**
+     * 컴포넌트 자체 유효성을 검증하고 `invalid` 상태를 갱신합니다.
+     * 각 컴포넌트가 자신의 검증 로직으로 구현합니다.
+     *
+     * @returns 유효하면 `true`, 아니면 `false`
+     */
+    abstract validate(): boolean;
+    /**
+     * 폼이 리셋될 때 호출되는 메서드입니다.
+     * 각 컴포넌트가 자신의 초기 상태로 리셋하는 로직을 구현합니다.
+     */
+    abstract reset(): void;
+}

package/dist/components/UFormControlElement.js

@@ -0,0 +1,68 @@
+import { UElement } from "./UElement.js";
+import { styles } from "./UFormControlElement.styles.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 { property } from "lit/decorators.js";
+//#region src/components/UFormControlElement.ts
+/**
+* 폼 컨트롤 컴포넌트의 공통 기반 클래스입니다.
+* 사용자 입력을 받는 모든 컴포넌트가 이 클래스를 확장합니다.
+*/
+var UFormControlElement = class extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.readonly = false;
+		this.required = false;
+		this.invalid = false;
+		this.novalidate = false;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	static {
+		this.formAssociated = true;
+	}
+	/** 
+	* 폼과의 연동을 위해 `form` 속성을 제공합니다. ElementInternals를 지원하는 브라우저에서 폼 요소에 접근할 수 있습니다.
+	* 지원하지 않는 브라우저에서는 null을 반환합니다. 
+	*/
+	get form() {
+		return this.internals?.form ?? null;
+	}
+	/** 
+	* 각 컴포넌트가 자신의 검증 로직으로 validity 상태를 갱신하면, 이 객체를 통해 유효성 상태를 확인할 수 있습니다.
+	* ElementInternals를 지원하지 않는 브라우저에서는 undefined를 반환합니다.
+	*/
+	get validity() {
+		return this.internals?.validity;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if ("attachInternals" in this) this.internals = this.attachInternals();
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UFormControlElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UFormControlElement.prototype, "readonly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UFormControlElement.prototype, "required", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UFormControlElement.prototype, "invalid", void 0);
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UFormControlElement.prototype, "novalidate", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFormControlElement.prototype, "label", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFormControlElement.prototype, "description", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFormControlElement.prototype, "validationMessage", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFormControlElement.prototype, "name", void 0);
+__decorate([property({ type: Object }), __decorateMetadata("design:type", Object)], UFormControlElement.prototype, "value", void 0);
+//#endregion
+export { UFormControlElement };

package/dist/components/UFormControlElement.styles.js

@@ -0,0 +1,14 @@
+import { css } from "lit";
+//#region src/components/UFormControlElement.styles.ts
+var styles = css`
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  :host([readonly]) {
+    pointer-events: none;
+  }
+`;
+//#endregion
+export { styles };

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 };