@iyulab/components 0.3.0 → 1.0.0

package/dist/components/input/UInput.d.ts

@@ -1,7 +1,99 @@
-import { UInput } from './UInput.component.js';
+import { UFormControlElement } from '../UFormControlElement.js';
+import { UPopover } from '../popover/UPopover.js';
+export type InputType = 'text' | 'password' | 'email' | 'tel' | 'url' | 'search' | 'number' | 'date' | 'time' | 'datetime-local' | 'month' | 'week';
+export type InputModeOption = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+export type EnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+export type AutoCapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+export type InputVariant = 'outlined' | 'filled' | 'underlined' | 'borderless';
+/**
+ * 사용자 입력을 받는 텍스트 입력 필드 컴포넌트입니다.
+ * prefix, suffix 슬롯과 라벨, 설명, 유효성 검사 기능을 지원합니다.
+ * 기본 슬롯에 u-option을 넣으면 combobox 모드로 동작합니다.
+ *
+ * @slot - u-option 아이템 (combobox 모드)
+ * @slot prefix - 입력 필드 앞에 표시하는 아이콘 등
+ * @slot suffix - 입력 필드 뒤에 표시하는 추가 콘텐츠
+ *
+ * @csspart field - u-field 요소
+ * @csspart container - input과 prefix/suffix를 감싸는 컨테이너
+ * @csspart input - 네이티브 input 요소
+ * @csspart popover - 드롭다운 팝오버 요소
+ *
+ * @cssprop --input-popover-min-width - 드롭다운 팝오버의 최소 너비 (기본값: 100%)
+ * @cssprop --input-popover-max-width - 드롭다운 팝오버의 최대 너비 (기본값: 80vw)
+ * @cssprop --input-popover-min-height - 드롭다운 팝오버의 최소 높이 (기본값: 0px)
+ * @cssprop --input-popover-max-height - 드롭다운 팝오버의 최대 높이 (기본값: 50vh)
+ *
+ * @event input - 입력값이 변경될 때 발생
+ * @event change - 값이 확정됐을 때 발생
+ */
+export declare class UInput extends UFormControlElement<string> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 입력 필드 표시 열수 (문자 수 기준) */
+    variant: InputVariant;
+    /** 전체 지우기 버튼 표시 여부 */
+    clearable: boolean;
+    /** input 요소의 type 속성 */
+    type: InputType;
+    /** 최소 글자 수 */
+    minlength?: number;
+    /** 최대 글자 수 */
+    maxlength?: number;
+    /** 최솟값 (number, date, time 등) */
+    min?: string;
+    /** 최댓값 (number, date, time 등) */
+    max?: string;
+    /** 증감 단위 (number, date, time 등) */
+    step?: number;
+    /** 입력 방향 정보 (dir 속성) */
+    dirname?: string;
+    /** 모바일 키보드 타입 제한 */
+    inputmode?: InputModeOption;
+    /** 모바일 엔터 키 라벨 */
+    enterkeyhint?: EnterKeyHint;
+    /** 맞춤법 검사 여부 */
+    spellcheck: boolean;
+    /** 자동 포커스 여부 */
+    autofocus: boolean;
+    /** 자동 수정 기능 설정 (iOS) */
+    autocorrect: boolean;
+    /** 문자 자동 대문자 변환 */
+    autocapitalize: AutoCapitalize;
+    /** 자동 완성 기능 설정 */
+    autocomplete?: AutoFill;
+    /** 입력 필드 표시 열수 (문자 수 기준) */
+    size?: number;
+    /** placeholder 텍스트 */
+    placeholder?: string;
+    /** 유효성 검사 패턴 (정규식) */
+    pattern?: string;
+    containerEl?: HTMLDivElement;
+    inputEl?: HTMLInputElement;
+    popoverEl?: UPopover;
+    showPassword: boolean;
+    private options;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    validate(): boolean;
+    reset(): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    private setup;
+    private cleanup;
+    private handleSlotChange;
+    private handleInputInput;
+    private handleInputChange;
+    private handleInputBlur;
+    private handleInputKeydown;
+    private handlePasswordTogglerClick;
+    private handleClearButtonClick;
+    private handleOptionClick;
+    private handleOptionKeydown;
+    private handlePopoverShow;
+    private handlePopoverHide;
+}
 declare global {
     interface HTMLElementTagNameMap {
-        "u-input": UInput;
+        'u-input': UInput;
     }
 }
-export { UInput };

package/dist/components/input/UInput.js

@@ -1,5 +1,261 @@
-import { UInput } from './UInput.component.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 { UFormControlElement } from "../UFormControlElement.js";
+import "../icon/UIcon.js";
+import "../spinner/USpinner.js";
+import "../field/UField.js";
+import { UOption } from "../option/UOption.js";
+import { UPopover } from "../popover/UPopover.js";
+import { styles } from "./UInput.styles.js";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+//#region src/components/input/UInput.ts
+var _ref, _ref2, _ref3, _ref4;
+var UInput = class UInput extends UFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "outlined";
+		this.clearable = false;
+		this.type = "text";
+		this.spellcheck = false;
+		this.autofocus = false;
+		this.autocorrect = false;
+		this.autocapitalize = "off";
+		this.showPassword = false;
+		this.options = [];
+		this.handleSlotChange = (e) => {
+			this.cleanup(this.options);
+			this.options = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof UOption);
+			this.setup(this.options);
+			if (this.options.length > 0) this.popoverEl?.show(this.containerEl);
+			else this.popoverEl?.hide();
+		};
+		this.handleInputInput = (e) => {
+			this.value = this.inputEl?.value;
+			this.relay(e);
+		};
+		this.handleInputChange = (e) => {
+			e.stopPropagation();
+		};
+		this.handleInputBlur = (_) => {
+			this.value = this.inputEl?.value || "";
+			this.internals?.setFormValue(this.value);
+			this.internals?.setValidity(this.inputEl?.validity, this.validationMessage || this.inputEl?.validationMessage, this.containerEl);
+			if (!this.novalidate) this.validate();
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.handleInputKeydown = (e) => {
+			if (this.options.length === 0) return;
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault();
+					this.popoverEl?.show(this.containerEl);
+					this.options.find((o) => !o.hidden && !o.disabled)?.focus();
+					break;
+				case "Escape":
+					e.preventDefault();
+					this.popoverEl?.hide();
+					break;
+			}
+		};
+		this.handlePasswordTogglerClick = (e) => {
+			e.stopImmediatePropagation();
+			this.showPassword = !this.showPassword;
+			this.focus();
+		};
+		this.handleClearButtonClick = (e) => {
+			e.stopImmediatePropagation();
+			this.reset();
+			this.focus();
+		};
+		this.handleOptionClick = (e) => {
+			const option = e.currentTarget;
+			if (option.disabled) return;
+			this.value = option.value || option.getText();
+			this.popoverEl?.hide();
+			this.focus();
+		};
+		this.handleOptionKeydown = (e) => {
+			const options = this.options.filter((o) => !o.hidden && !o.disabled);
+			if (options.length === 0) return;
+			const currentOption = e.currentTarget;
+			const currentIndex = options.indexOf(currentOption);
+			if (currentIndex === -1) return;
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault();
+					options[currentIndex < options.length - 1 ? currentIndex + 1 : 0].focus();
+					break;
+				case "ArrowUp":
+					e.preventDefault();
+					options[currentIndex > 0 ? currentIndex - 1 : options.length - 1].focus();
+					break;
+				case "Enter":
+				case " ":
+					e.preventDefault();
+					currentOption.click();
+					break;
+				case "Escape":
+					e.preventDefault();
+					this.popoverEl?.hide();
+					this.focus();
+					break;
+			}
+		};
+		this.handlePopoverShow = (e) => {
+			e.stopPropagation();
+			if (this.options.length === 0) e.preventDefault();
+		};
+		this.handlePopoverHide = (e) => {
+			e.stopPropagation();
+			if (this.options.length === 0) e.preventDefault();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	disconnectedCallback() {
+		this.cleanup(this.options);
+		super.disconnectedCallback();
+	}
+	render() {
+		return html`
+      <u-field part="field"
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?invalid=${this.invalid}
+        .label=${this.label}
+        .description=${this.description}
+        .validationMessage=${this.validationMessage}
+      >
+        <div class="container" part="container">
 
-UInput.define("u-input");
+          <slot name="prefix"></slot>
 
+          <input part="input"
+            type=${this.type === "password" && this.showPassword ? "text" : this.type}
+            name=${ifDefined(this.name)}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            minlength=${ifDefined(this.minlength)}
+            maxlength=${ifDefined(this.maxlength)}
+            min=${ifDefined(this.min)}
+            max=${ifDefined(this.max)}
+            step=${ifDefined(this.step)}
+            dirname=${ifDefined(this.dirname)}
+            spellcheck=${this.spellcheck}
+            ?autofocus=${this.autofocus}
+            ?autocorrect=${this.autocorrect}
+            autocapitalize=${ifDefined(this.autocapitalize)}
+            autocomplete=${ifDefined(this.autocomplete)}
+            inputmode=${ifDefined(this.inputmode)}
+            enterkeyhint=${ifDefined(this.enterkeyhint)}
+            size=${ifDefined(this.size)}
+            pattern=${ifDefined(this.pattern)}
+            placeholder=${ifDefined(this.placeholder)}
+            .value=${live(this.value || "")}
+            @input=${this.handleInputInput}
+            @change=${this.handleInputChange}
+            @blur=${this.handleInputBlur}
+            @keydown=${this.handleInputKeydown}
+          />
+
+          <slot name="suffix"></slot>
+
+          <u-icon class="suffix-item"
+            ?hidden=${this.type !== "password" || this.disabled || this.readonly}
+            lib="internal"
+            name=${this.showPassword ? "eye-slash" : "eye"}
+            @click=${this.handlePasswordTogglerClick}
+          ></u-icon>
+          <u-icon class="suffix-item"
+            ?hidden=${!this.clearable || this.disabled || this.readonly || !this.value}
+            lib="internal"
+            name="x-lg"
+            @click=${this.handleClearButtonClick}
+          ></u-icon>
+        </div>
+      </u-field>
+
+      <u-popover part="popover"
+        role="listbox"
+        scrollable
+        for=".container"
+        trigger="focus"
+        placement="bottom-start"
+        offset="1"
+        @show=${this.handlePopoverShow}
+        @hide=${this.handlePopoverHide}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </u-popover>
+    `;
+	}
+	validate() {
+		if (this.internals) this.invalid = !this.internals.checkValidity();
+		else this.invalid = !this.inputEl?.checkValidity();
+		return !this.invalid;
+	}
+	reset() {
+		this.value = "";
+		this.invalid = false;
+	}
+	focus(options) {
+		this.inputEl?.focus(options);
+	}
+	blur() {
+		this.inputEl?.blur();
+	}
+	setup(options) {
+		for (const option of options) {
+			option.removeEventListener("click", this.handleOptionClick);
+			option.removeEventListener("keydown", this.handleOptionKeydown);
+			option.addEventListener("click", this.handleOptionClick);
+			option.addEventListener("keydown", this.handleOptionKeydown);
+		}
+	}
+	cleanup(options) {
+		for (const option of options) {
+			option.removeEventListener("click", this.handleOptionClick);
+			option.removeEventListener("keydown", this.handleOptionKeydown);
+		}
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UInput.prototype, "variant", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UInput.prototype, "clearable", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UInput.prototype, "type", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UInput.prototype, "minlength", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UInput.prototype, "maxlength", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UInput.prototype, "min", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UInput.prototype, "max", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UInput.prototype, "step", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UInput.prototype, "dirname", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UInput.prototype, "inputmode", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UInput.prototype, "enterkeyhint", void 0);
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UInput.prototype, "spellcheck", void 0);
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UInput.prototype, "autofocus", void 0);
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UInput.prototype, "autocorrect", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UInput.prototype, "autocapitalize", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", typeof (_ref = typeof AutoFill !== "undefined" && AutoFill) === "function" ? _ref : Object)], UInput.prototype, "autocomplete", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UInput.prototype, "size", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UInput.prototype, "placeholder", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UInput.prototype, "pattern", void 0);
+__decorate([query(".container", true), __decorateMetadata("design:type", typeof (_ref2 = typeof HTMLDivElement !== "undefined" && HTMLDivElement) === "function" ? _ref2 : Object)], UInput.prototype, "containerEl", void 0);
+__decorate([query("input", true), __decorateMetadata("design:type", typeof (_ref3 = typeof HTMLInputElement !== "undefined" && HTMLInputElement) === "function" ? _ref3 : Object)], UInput.prototype, "inputEl", void 0);
+__decorate([query("u-popover", true), __decorateMetadata("design:type", typeof (_ref4 = typeof UPopover !== "undefined" && UPopover) === "function" ? _ref4 : Object)], UInput.prototype, "popoverEl", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UInput.prototype, "showPassword", void 0);
+UInput = __decorate([customElement("u-input")], UInput);
+//#endregion
 export { UInput };

package/dist/components/input/UInput.styles.js

@@ -1,43 +1,20 @@
-import { css } from 'lit';
+import { css } from "lit";
+//#region src/components/input/UInput.styles.ts
+var styles = css`
+  :host {
+    --input-popover-min-width: 100%;
+    --input-popover-max-width: 80vw;
+    --input-popover-min-height: 0px;
+    --input-popover-max-height: 50vh;
+  }
 
-const styles = css`
   :host {
+    position: relative;
     display: inline-block;
     color: var(--u-txt-color);
     font-size: inherit;
     font-family: var(--u-font-base);
   }
-  :host([disabled]) {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  /* 헤더 영역 */
-  .header {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin-bottom: 0.5em;
-    font-size: 0.8em;
-    user-select: none;
-  }
-  .header .required {
-    color: var(--u-red-600);
-    margin-right: 0.25em;
-  }
-  .header .label {
-    font-weight: 500;
-    line-height: 1.25;
-    cursor: pointer;
-  }
-  .header .helper u-icon {
-    margin-left: 0.5em;
-    cursor: help;
-  }
-  .header .helper u-tooltip {
-    font-size: 0.6em;
-  }
 
   /* 입력 래퍼 */
   .container {
@@ -51,28 +28,89 @@ const styles = css`
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
     overflow: hidden;
   }
-  .container[readonly],
-  .container[disabled] {
+  :host([readonly]) .container,
+  :host([disabled]) .container {
     border-color: var(--u-border-color-weak);
     background-color: var(--u-bg-color-disabled);
   }
-  .container:not([readonly]):not([disabled]):hover {
-    box-shadow: 
-      0 0 0 1px var(--u-input-border-color-hover),
-      0 0 0 3px rgba(59, 130, 246, 0.12);
+  :host(:not([readonly]):not([disabled])) .container:hover {
+    box-shadow: 0 0 0 1px var(--u-input-border-color-hover);
+  }
+  :host(:not([readonly]):not([disabled])) .container:focus-within {
+    box-shadow: 0 0 0 1px var(--u-input-border-color-focus);
+  }
+  :host([invalid]:not([readonly]):not([disabled])) .container {
+    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid);
+  }
+
+  /* ===== Variant: filled ===== */
+  :host([variant="filled"]) .container {
+    border: none;
+    border-radius: 0.25em 0.25em 0 0;
+    border-bottom: 2px solid var(--u-input-border-color);
+    background-color: var(--u-neutral-200);
+  }
+  :host([variant="filled"][readonly]) .container,
+  :host([variant="filled"][disabled]) .container {
+    background-color: var(--u-bg-color-disabled);
+    border-bottom-color: var(--u-border-color-weak);
+  }
+  :host([variant="filled"]:not([readonly]):not([disabled])) .container:hover {
+    box-shadow: none;
+    background-color: var(--u-neutral-300);
+    border-bottom-color: var(--u-input-border-color-hover);
   }
-  .container:not([readonly]):not([disabled]):focus-within {
-    box-shadow:
-      0 0 0 1px var(--u-input-border-color-focus),
-      0 0 0 3px rgba(59, 130, 246, 0.22);
+  :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-focus);
   }
-  .container:not([readonly]):not([disabled])[invalid] {
-    box-shadow:
-      0 0 0 1px var(--u-input-border-color-invalid),
-      0 0 0 3px rgba(220, 38, 38, 0.12);
+  :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-invalid);
   }
 
-  /* 입력 필드 */
+  /* ===== Variant: underlined ===== */
+  :host([variant="underlined"]) .container {
+    padding-left: 0;
+    padding-right: 0;
+    border: none;
+    border-radius: 0;
+    border-bottom: 1px solid var(--u-input-border-color);
+    background-color: transparent;
+  }
+  :host([variant="underlined"][readonly]) .container,
+  :host([variant="underlined"][disabled]) .container {
+    background-color: transparent;
+    border-bottom-color: var(--u-border-color-weak);
+  }
+  :host([variant="underlined"]:not([readonly]):not([disabled])) .container:hover {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-hover);
+  }
+  :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-focus);
+    border-bottom-width: 2px;
+  }
+  :host([variant="underlined"][invalid]:not([readonly]):not([disabled])) .container {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-invalid);
+  }
+
+  /* ===== Variant: borderless ===== */
+  :host([variant="borderless"]) .container {
+    border: none;
+    border-radius: 0;
+    background-color: transparent;
+    padding: 0;
+    box-shadow: none;
+  }
+  :host([variant="borderless"]:not([readonly]):not([disabled])) .container:hover,
+  :host([variant="borderless"]:not([readonly]):not([disabled])) .container:focus-within {
+    box-shadow: none;
+  }
+
+  /* 네이티브 input */
   input {
     all: unset;
     flex: 1 0 auto;
@@ -89,62 +127,58 @@ const styles = css`
   input:read-only {
     cursor: default;
   }
+  input:focus-visible {
+    outline: none;
+  }
+  input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 
   /* 슬롯에 내용이 있을 때 gap 적용 */
   ::slotted([slot="prefix"]) {
-    margin-right: 0.5em;
+    margin-right: 0.25em;
   }
   ::slotted([slot="suffix"]) {
-    margin-left: 0.5em;
+    margin-left: 0.25em;
   }
 
   /* 아이콘 영역 (clear, password toggle 등) */
-  .icon {
+  .suffix-item {
+    margin-left: 0.25em;
     color: var(--u-icon-color);
     font-size: 1em;
     transition: color 0.2s ease;
     cursor: pointer;
   }
-  .icon:hover {
+  .suffix-item:hover {
     color: var(--u-icon-color-hover);
   }
-  .icon:active {
+  .suffix-item:active {
     color: var(--u-icon-color-active);
   }
 
-  /* 접두/접미 아이콘 간격 */
-  .icon.prefix {
-    margin-right: 0.5em;
-  }
-  .icon.suffix {
-    margin-left: 0.5em;
-  }
-
-  /* 유효성 검사 에러 메시지 */
-  .validation-message {
-    margin-top: 0.5em;
-    color: var(--u-red-600);
-    font-size: 0.75em;
-    line-height: 1.2;
-  }
-
-  /* 설명 텍스트 */
-  .description {
-    margin-top: 0.5em;
-    color: var(--u-txt-color-weak);
-    font-size: 0.75em;
-    line-height: 1.2;
-  }
-
-  /* input 기본 제공 스타일 초기화 */
-  input[type="number"] {
-    -moz-appearance: textfield;
-  }
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  u-popover {
+    min-width: var(--input-popover-min-width);
+    max-width: var(--input-popover-max-width);
+    min-height: var(--input-popover-min-height);
+    max-height: var(--input-popover-max-height);
+    padding: 4px;
+    border: 1px solid var(--u-border-color);
+    border-radius: 6px;
+    background-color: var(--u-panel-bg-color);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    overflow-x: auto;
+    overflow-y: auto;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/menu/UMenu.d.ts

@@ -1,8 +1,46 @@
-import { UMenu } from './UMenu.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+import { UMenuItem, MenuItemIndicator, MenuItemAlign } from '../menu-item/UMenuItem.js';
+export type MenuSelection = 'none' | 'single' | 'multiple';
+/**
+ * 메뉴 아이템의 선택, 키보드 탐색, 속성 전파를 관리하는 메뉴 컴포넌트입니다.
+ *
+ * @slot - 메뉴 아이템 (u-menu-item, u-divider)
+ *
+ * @cssprop --menu-indent-size - 하위 메뉴 아이템의 들여쓰기 크기 (기본값: 20px)
+ *
+ * @event change - 선택된 아이템이 변경될 때 발생
+ */
+export declare class UMenu extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 테두리 없는 여부 */
+    borderless: boolean;
+    /** 선택 모드 */
+    selection: MenuSelection;
+    /** 키보드 탐색 시 순환 여부 */
+    loop: boolean;
+    /** 아이템의 인라인(가로) 모드 여부 */
+    inline: boolean;
+    /** 선택된 아이템 표시 방식 */
+    indicator: MenuItemIndicator;
+    /** 아이템 텍스트 정렬 방식 */
+    align: MenuItemAlign;
+    private _items;
+    get items(): readonly UMenuItem[];
+    get selectedItems(): UMenuItem[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    getItems(fn: (item: UMenuItem) => boolean): UMenuItem[];
+    mapItems(fn: (item: UMenuItem) => void): void;
+    private propagate;
+    private handleSlotChange;
+    private handlePick;
+    private handleKeydown;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-menu': UMenu;
     }
 }
-export { UMenu };
-export type { MenuType, MenuMode } from './UMenu.component.js';