@iyulab/components 1.3.4 → 1.5.0

package/dist/components/card/UCard.js

@@ -2,8 +2,8 @@ import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { styles } from "./UCard.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/card/UCard.ts
 var UCard = class UCard extends UElement {
 	constructor(..._args) {

package/dist/components/carousel/UCarousel.js

@@ -1,11 +1,11 @@
 import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
-import "../icon/UIcon.js";
 import "../button/UButton.js";
+import "../icon/UIcon.js";
 import { styles } from "./UCarousel.styles.js";
-import { customElement, property, state } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 //#region src/components/carousel/UCarousel.ts
 var UCarousel = class UCarousel extends UElement {
 	constructor(..._args) {

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

@@ -1,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { UFormControlElement } from '../UFormControlElement.js';
 export type CheckboxVariant = "filled" | "outline";
 export type CheckboxColor = "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink" | "neutral";
@@ -29,8 +30,10 @@ export declare class UCheckbox extends UFormControlElement<string> {
     indeterminate: boolean;
     /** 체크 여부 */
     checked: boolean;
+    inputEl?: HTMLInputElement;
+    protected shouldValidate(changed: PropertyValues): boolean;
     render(): import('lit-html').TemplateResult<1>;
-    validate(): boolean;
+    protected setValidity(): void;
     reset(): void;
     private handleInputChange;
 }

package/dist/components/checkbox/UCheckbox.js

@@ -2,9 +2,10 @@ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/hel
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import "../icon/UIcon.js";
+import { Locale } from "../../utilities/Locale.js";
 import { styles } from "./UCheckbox.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
 import { live } from "lit/directives/live.js";
 //#region src/components/checkbox/UCheckbox.ts
 var UCheckbox = class UCheckbox extends UFormControlElement {
@@ -21,7 +22,6 @@ var UCheckbox = class UCheckbox extends UFormControlElement {
 			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);
 		};
@@ -29,6 +29,9 @@ var UCheckbox = class UCheckbox extends UFormControlElement {
 	static {
 		this.styles = [super.styles, styles];
 	}
+	shouldValidate(changed) {
+		return super.shouldValidate(changed) || changed.has("checked");
+	}
 	render() {
 		return html`
       <label class="wrapper" part="wrapper">
@@ -42,7 +45,7 @@ var UCheckbox = class UCheckbox extends UFormControlElement {
         <span class="checkbox" part="checkbox">
           <u-icon
             lib="internal"
-            name=${this.indeterminate ? "dash-lg" : "check-lg"}
+            name=${this.indeterminate ? "minus" : "check"}
           ></u-icon>
         </span>
         <span class="label" part="label">
@@ -51,15 +54,14 @@ var UCheckbox = class UCheckbox extends UFormControlElement {
         </span>
       </label>
 
-      <div class="description" part="description" ?hidden=${!this.description}>
-        ${this.description}
+      <div class="description" part="description" ?hidden=${!(this.invalid && this.validationMessage) && !this.description}>
+        ${this.invalid && this.validationMessage ? this.validationMessage : this.description}
       </div>
     `;
 	}
-	validate() {
-		if (this.internals) this.invalid = !this.internals.reportValidity();
-		else this.invalid = this.required && !this.checked;
-		return !this.invalid;
+	setValidity() {
+		const missing = !!this.inputEl?.validity.valueMissing;
+		this.commit(missing ? { valueMissing: true } : {}, missing ? Locale.getValue("valueMissing") : "", this.shadowRoot?.querySelector(".checkbox") ?? void 0);
 	}
 	reset() {
 		this.checked = false;
@@ -83,6 +85,7 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 }), __decorateMetadata("design:type", Boolean)], UCheckbox.prototype, "checked", void 0);
+__decorate([query("input", true), __decorateMetadata("design:type", typeof HTMLInputElement === "undefined" ? Object : HTMLInputElement)], UCheckbox.prototype, "inputEl", void 0);
 UCheckbox = __decorate([customElement("u-checkbox")], UCheckbox);
 //#endregion
 export { UCheckbox };

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

@@ -2,6 +2,7 @@ import { css } from "lit";
 //#region src/components/checkbox/UCheckbox.styles.ts
 var styles = css`
   :host {
+    --checkbox-fill-color: var(--u-primary-color, var(--u-blue-600));
     --checkbox-color: inherit;
     --checkbox-border-color: var(--u-input-border-color);
     --checkbox-background-color: var(--u-input-bg-color);
@@ -43,22 +44,22 @@ var styles = css`
   :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);
+    --checkbox-border-color: var(--checkbox-fill-color);
+    --checkbox-background-color: var(--checkbox-fill-color);
   }
 
   /* === Variant: outline - 테두리만 === */
   :host([variant="outline"][checked]),
   :host([variant="outline"][indeterminate]) {
-    --checkbox-border-color: var(--u-blue-600);
+    --checkbox-border-color: var(--checkbox-fill-color);
     --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);
+    --checkbox-border-color: var(--checkbox-fill-color);
+    --checkbox-background-color: var(--checkbox-fill-color);
   }
   :host([variant="filled"][color="green"][checked]),
   :host([variant="filled"][color="green"][indeterminate]) {
@@ -104,8 +105,8 @@ var styles = css`
   /* === 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);
+    --checkbox-color: var(--checkbox-fill-color);
+    --checkbox-border-color: var(--checkbox-fill-color);
   }
   :host([variant="outline"][color="green"][checked]),
   :host([variant="outline"][color="green"][indeterminate]) {
@@ -206,6 +207,10 @@ var styles = css`
     font-size: 0.75em;
     line-height: 1.2;
   }
+
+  :host([invalid]) .description {
+    color: var(--u-red-600);
+  }
 `;
 //#endregion
 export { styles };

package/dist/components/chip/UChip.js

@@ -1,13 +1,13 @@
 import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
-import "../icon/UIcon.js";
 import "../button/UButton.js";
+import "../icon/UIcon.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";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/chip/UChip.ts
 var UChip = class UChip extends UElement {
 	constructor(..._args) {
@@ -32,7 +32,10 @@ var UChip = class UChip extends UElement {
 		};
 		this.handleRemoveClick = (e) => {
 			e.stopImmediatePropagation();
-			if (this.fire("remove")) this.remove();
+			if (this.fire("remove", {
+				bubbles: false,
+				composed: false
+			})) this.remove();
 		};
 	}
 	static {
@@ -49,7 +52,7 @@ var UChip = class UChip extends UElement {
         <u-icon class="check-icon" part="check" slot="prefix"
           ?hidden=${!this.selectable || !this.selected}  
           lib="internal" 
-          name="check-lg"
+          name="check"
         ></u-icon>
 
         <slot name="prefix" slot="prefix"></slot>
@@ -63,7 +66,7 @@ var UChip = class UChip extends UElement {
           tabindex="-1"
           aria-label="Remove"
           @click=${this.handleRemoveClick}>
-          <u-icon lib="internal" name="x-lg"></u-icon>
+          <u-icon lib="internal" name="x"></u-icon>
         </u-button>
       </u-tag>
 

package/dist/components/copy-button/UCopyButton.d.ts

@@ -0,0 +1,47 @@
+import { Placement, OffsetOptions } from '@floating-ui/dom';
+import { UElement } from '../UElement.js';
+import { ButtonVariant } from '../button/UButton.js';
+/**
+ * 클릭 시 클립보드에 텍스트를 복사하는 버튼입니다. 복사 상태를 표시하기 위해 아이콘이 변경됩니다.
+ *
+ * @slot - 툴팁에 표시할 콘텐츠
+ *
+ * @event copy - 클립보드에 실제로 쓰기 전에 발생하는 네이티브 ClipboardEvent.
+ * `preventDefault()`로 복사를 취소하거나, `clipboardData.setData('text/plain', ...)`로 복사될 값을 바꿀 수 있음
+ *
+ * @csspart button - 내부 버튼 요소
+ * @csspart icon - 아이콘 요소
+ * @csspart tooltip - 툴팁 요소
+ */
+export declare class UCopyButton extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 버튼 스타일 변형 */
+    variant: ButtonVariant;
+    /** 원형 표시 여부 */
+    rounded: boolean;
+    /** 비활성화 여부 */
+    disabled: boolean;
+    /** 클립보드 복사 상태를 나타냅니다. */
+    copied: boolean;
+    /** 툴팁 위치 */
+    tooltipPlacement: Placement;
+    /** 툴팁 거리 */
+    tooltipOffset: OffsetOptions;
+    /** 클립보드 복사 후 재사용 대기 시간 (ms). 0 이하이면 복사 상태로 되돌아가지 않습니다. */
+    delay: number;
+    /** 복사할 텍스트를 설정합니다. */
+    value?: string;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * 클립보드에 텍스트를 복사하는 메서드입니다.
+     * 실제 쓰기 전에 취소 가능한 네이티브 `copy` 이벤트를 발행하여, 리스너가 복사를 취소하거나
+     * `clipboardData`를 통해 복사될 값을 바꿀 수 있게 합니다.
+     * 복사 후 재사용 대기 시간이 설정되어 있으면, 일정 시간 후에 복사 가능 상태로 되돌립니다.
+     */
+    private handleButtonClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-copy-button": UCopyButton;
+    }
+}

package/dist/components/copy-button/UCopyButton.js

@@ -0,0 +1,94 @@
+import { UElement } from "../UElement.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import "../icon-button/UIconButton.js";
+import { styles } from "./UCopyButton.styles.js";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/components/copy-button/UCopyButton.ts
+var UCopyButton = class UCopyButton extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "ghost";
+		this.rounded = false;
+		this.disabled = false;
+		this.copied = false;
+		this.tooltipPlacement = "top";
+		this.tooltipOffset = 4;
+		this.delay = 1e3;
+		this.handleButtonClick = async () => {
+			if (!this.value) return;
+			if (this.copied) return;
+			const clipboard = new DataTransfer();
+			clipboard.setData("text/plain", this.value);
+			const event = new ClipboardEvent("copy", {
+				bubbles: false,
+				composed: false,
+				cancelable: true,
+				clipboardData: clipboard
+			});
+			if (!this.dispatchEvent(event)) return;
+			try {
+				const text = event.clipboardData?.getData("text/plain") || this.value;
+				await window.navigator.clipboard.writeText(text);
+				if (this.delay <= 0) return;
+				this.copied = true;
+				setTimeout(() => {
+					this.copied = false;
+				}, this.delay);
+			} catch (error) {
+				console.error("Failed to copy text to clipboard:", error);
+				this.copied = false;
+			}
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <u-icon-button part="button"
+        exportparts="icon,tooltip"
+        ?disabled=${this.disabled}
+        .variant=${this.variant}
+        .rounded=${this.rounded}
+        .tooltipPlacement=${this.tooltipPlacement}
+        .tooltipOffset=${this.tooltipOffset}
+        lib="internal"
+        name=${this.copied ? "check" : "copy"}
+        @click=${this.handleButtonClick}
+      >
+        <slot></slot>
+      </u-icon-button>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCopyButton.prototype, "variant", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCopyButton.prototype, "rounded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UCopyButton.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UCopyButton.prototype, "copied", void 0);
+__decorate([property({
+	type: String,
+	attribute: "tooltip-placement"
+}), __decorateMetadata("design:type", Object)], UCopyButton.prototype, "tooltipPlacement", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "tooltip-offset"
+}), __decorateMetadata("design:type", Object)], UCopyButton.prototype, "tooltipOffset", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UCopyButton.prototype, "delay", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UCopyButton.prototype, "value", void 0);
+UCopyButton = __decorate([customElement("u-copy-button")], UCopyButton);
+//#endregion
+export { UCopyButton };

package/dist/components/copy-button/UCopyButton.styles.js

@@ -0,0 +1,21 @@
+import { css } from "lit";
+//#region src/components/copy-button/UCopyButton.styles.ts
+var styles = css`
+  :host {
+    display: inline-flex;
+    font-size: 18px;
+  }
+
+  u-icon-button {
+    font-size: inherit;
+  }
+  u-icon-button::part(button) {
+    padding: 0.2em;
+  }
+
+  :host([copied]) u-icon-button {
+    color: var(--u-green-500);
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/dialog/UDialog.js

@@ -1,11 +1,11 @@
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
-import "../icon/UIcon.js";
 import { UOverlayElement } from "../UOverlayElement.js";
 import "../button/UButton.js";
+import "../icon/UIcon.js";
 import { styles } from "./UDialog.styles.js";
-import { customElement, property, state } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 //#region src/components/dialog/UDialog.ts
 var UDialog = class UDialog extends UOverlayElement {
 	constructor(..._args) {
@@ -34,7 +34,7 @@ var UDialog = class UDialog extends UOverlayElement {
               variant="ghost"
               ?hidden=${!this.closable}
               @click=${() => this.requestClose("button")}>
-              <u-icon lib="internal" name="x-lg"></u-icon>
+              <u-icon lib="internal" name="x"></u-icon>
             </u-button>
           </div>
           <div class="body" part="body">

package/dist/components/divider/UDivider.js

@@ -2,8 +2,8 @@ import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { styles } from "./UDivider.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/divider/UDivider.ts
 var UDivider = class UDivider extends UElement {
 	constructor(..._args) {

package/dist/components/drawer/UDrawer.js

@@ -1,11 +1,11 @@
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
-import "../icon/UIcon.js";
 import { UOverlayElement } from "../UOverlayElement.js";
 import "../button/UButton.js";
+import "../icon/UIcon.js";
 import { styles } from "./UDrawer.styles.js";
-import { customElement, property, state } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 //#region src/components/drawer/UDrawer.ts
 var UDrawer = class UDrawer extends UOverlayElement {
 	constructor(..._args) {
@@ -27,7 +27,7 @@ var UDrawer = class UDrawer extends UOverlayElement {
             variant="ghost"
             ?hidden=${!this.closable}
             @click=${() => this.requestClose("button")}>
-            <u-icon lib="internal" name="x-lg"></u-icon>
+            <u-icon lib="internal" name="x"></u-icon>
           </u-button>
         </div>
         <div class="body" part="body">

package/dist/components/drawer/UDrawer.styles.js

@@ -7,12 +7,6 @@ var styles = css`
   :host([placement="top"])    { flex-direction: column; justify-content: flex-start; }
   :host([placement="bottom"]) { flex-direction: column; justify-content: flex-end; }
 
-  /*
-   * 패널 크기 — 슬라이드 축 방향 크기를 --drawer-size 로 제어한다.
-   *   좌우(left/right): 너비 = --drawer-size (기본 28rem), 높이 100%
-   *   상하(top/bottom): 높이 = --drawer-size (기본 16rem), 너비 100%
-   * 호스트 앱이 style="--drawer-size: 600px" 로 오버라이드한다.
-   */
   /* 좌우: 높이 100%, 너비 = --drawer-size */
   :host([placement="left"]) .panel,
   :host([placement="right"]) .panel {

package/dist/components/field/UField.js

@@ -2,8 +2,8 @@ import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { styles } from "./UField.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { isFocusable } from "tabbable";
 //#region src/components/field/UField.ts
 var UField = class UField extends UElement {

package/dist/components/form/UForm.js

@@ -4,8 +4,8 @@ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm
 import { UFormControlElement } from "../UFormControlElement.js";
 import { arrayAttrConverter } from "../../utilities/converters.js";
 import { styles } from "./UForm.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/form/UForm.ts
 var UForm = class UForm extends UElement {
 	constructor(..._args) {

package/dist/components/icon/UIcon.js

@@ -3,8 +3,8 @@ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/hel
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { IconRegistry, getDefaultBaseUrl } from "../../utilities/icons.js";
 import { styles } from "./UIcon.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { until } from "lit/directives/until.js";
 //#region src/components/icon/UIcon.ts

package/dist/components/icon-button/UIconButton.d.ts

@@ -39,7 +39,6 @@ export declare class UIconButton extends UElement {
     /** 툴팁 거리 */
     tooltipOffset: OffsetOptions;
     render(): import('lit-html').TemplateResult<1>;
-    private handleStopTooltipEvent;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/icon-button/UIconButton.js

@@ -1,12 +1,12 @@
 import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
-import "../icon/UIcon.js";
 import "../button/UButton.js";
+import "../icon/UIcon.js";
 import "../tooltip/UTooltip.js";
 import { styles } from "./UIconButton.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/icon-button/UIconButton.ts
 var UIconButton = class UIconButton extends UElement {
 	constructor(..._args) {
@@ -42,16 +42,11 @@ var UIconButton = class UIconButton extends UElement {
       <u-tooltip part="tooltip"
         .placement=${this.tooltipPlacement}
         .offset=${this.tooltipOffset}
-        @show=${this.handleStopTooltipEvent}
-        @hide=${this.handleStopTooltipEvent}
       >
         <slot></slot>
       </u-tooltip>
     `;
 	}
-	handleStopTooltipEvent(e) {
-		e.stopImmediatePropagation();
-	}
 };
 __decorate([property({
 	type: String,

package/dist/components/icon-button/UIconButton.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/icon-button/UIconButton.styles.ts
 var styles = css`
   :host {
-    display: inline-block;
+    display: inline-flex;
     color: var(--u-icon-color);
     font-size: 20px;
   }
@@ -15,9 +15,9 @@ var styles = css`
   }
 
   u-button {
-    padding: 0.4em;
     color: inherit;
     font-size: inherit;
+    padding: 0.4em;
   }
 `;
 //#endregion

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

@@ -19,8 +19,7 @@ export type InputVariant = 'outlined' | 'filled' | 'underlined' | 'borderless';
  * @csspart input - 네이티브 input 요소
  * @csspart popover - 드롭다운 팝오버 요소
  *
- * @cssprop --input-popover-min-width - 드롭다운 팝오버의 최소 너비 (기본값: 100%)
- * @cssprop --input-popover-max-width - 드롭다운 팝오버의 최대 너비 (기본값: 80vw)
+ * @cssprop --input-popover-width - 드롭다운 팝오버의 너비 (기본값: 앵커(트리거) 너비)
  * @cssprop --input-popover-min-height - 드롭다운 팝오버의 최소 높이 (기본값: 0px)
  * @cssprop --input-popover-max-height - 드롭다운 팝오버의 최대 높이 (기본값: 50vh)
  *
@@ -74,7 +73,7 @@ export declare class UInput extends UFormControlElement<string> {
     private options;
     disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
-    validate(): boolean;
+    protected setValidity(): void;
     reset(): void;
     focus(options?: FocusOptions): void;
     blur(): void;