@iyulab/components 1.3.4 → 1.4.0

package/dist/components/select/USelect.d.ts

@@ -7,14 +7,18 @@ export type SelectVariant = 'outlined' | 'filled' | 'underlined' | 'borderless';
  * 단일 선택 및 다중 선택, 검색 기능을 지원합니다.
  *
  * @slot - u-option 아이템
+ * @slot display - 트리거에 표시할 콘텐츠를 직접 지정. 비워두면 선택값 텍스트를 자동 생성해 보여준다.
+ *   (u-option을 그대로 옮겨 꽂을 수는 없다 — 하나의 노드는 slot에 동시에 두 곳 렌더링될 수 없어서
+ *   팝오버 목록에서 사라지기 때문. 리치 콘텐츠가 필요하면 이 slot에 별도 마크업을 할당하고
+ *   `change` 이벤트에서 직접 갱신한다.)
  *
  * @csspart field - u-field 요소
  * @csspart container - 트리거 영역을 감싸는 요소
  * @csspart popover - 옵션 목록이 표시되는 팝오버 요소
  * @csspart search-input - 검색 입력 영역
  *
- * @cssprop --select-popover-min-width - 팝오버의 최소 너비 (기본값: 100%)
- * @cssprop --select-popover-max-width - 팝오버의 최대 너비 (기본값: 80vw)
+ * @cssprop --select-popover-width - 팝오버의 너비 (기본값: 앵커(트리거) 너비, strategy와 무관하게 동일).
+ *   옵션 텍스트가 길어도 이 값을 넘겨 넓어지지 않으며, 넘치는 텍스트는 UOption에서 ellipsis 처리된다.
  * @cssprop --select-popover-min-height - 팝오버의 최소 높이 (기본값: 0px)
  * @cssprop --select-popover-max-height - 팝오버의 최대 높이 (기본값: 50vh)
  *
@@ -41,6 +45,7 @@ export declare class USelect extends UFormControlElement<string | string[]> {
     containerEl?: HTMLElement;
     popoverEl?: UPopover;
     private options;
+    protected shouldValidate(changed: PropertyValues): boolean;
     private get valueAsString();
     private get valueAsArray();
     private get hasValue();
@@ -48,12 +53,11 @@ export declare class USelect extends UFormControlElement<string | string[]> {
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
     private renderContent;
-    validate(): boolean;
+    protected setValidity(): void;
     reset(): void;
     private setup;
     private cleanup;
     private onChangeValue;
-    private getValidity;
     private handleSlotChange;
     private handleOptionClick;
     private handleOptionKeydown;
@@ -61,7 +65,6 @@ export declare class USelect extends UFormControlElement<string | string[]> {
     private handleSearchKeydown;
     private handleClearClick;
     private handleChipRemove;
-    private handlePopoverEvent;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/select/USelect.js

@@ -1,15 +1,15 @@
-import { formatTemplate, getLocaleStrings, resolveLocale } from "../../core/locale.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 { UFormControlElement } from "../UFormControlElement.js";
-import "../icon/UIcon.js";
 import "../spinner/USpinner.js";
+import "../icon/UIcon.js";
+import { Locale } from "../../utilities/Locale.js";
 import "../field/UField.js";
 import { UOption } from "../option/UOption.js";
 import { UPopover } from "../popover/UPopover.js";
 import { styles } from "./USelect.styles.js";
-import { customElement, property, query, state } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
 //#region src/components/select/USelect.ts
 var USelect = class USelect extends UFormControlElement {
 	constructor(..._args) {
@@ -107,18 +107,21 @@ var USelect = class USelect extends UFormControlElement {
 			this.containerEl?.click();
 		};
 		this.handleChipRemove = (e) => {
-			e.stopImmediatePropagation();
 			const value = e.currentTarget.dataset.value;
 			if (!value) return;
 			this.value = this.valueAsArray.filter((v) => v !== value);
 		};
-		this.handlePopoverEvent = (e) => {
-			e.stopPropagation();
-		};
 	}
 	static {
 		this.styles = [super.styles, styles];
 	}
+	shouldValidate(changed) {
+		return super.shouldValidate(changed) || [
+			"minCount",
+			"maxCount",
+			"multiple"
+		].some((k) => changed.has(k));
+	}
 	get valueAsString() {
 		return Array.isArray(this.value) ? this.value.join(",") : this.value ?? "";
 	}
@@ -152,7 +155,7 @@ var USelect = class USelect extends UFormControlElement {
 
         <div class="container" part="container" tabindex=${this.disabled ? "-1" : "0"}>
           <slot name="prefix"></slot>
-          ${this.renderContent()}
+          <slot name="display">${this.renderContent()}</slot>
           <slot name="suffix"></slot>
 
           <u-icon class="suffix-item"
@@ -178,11 +181,9 @@ var USelect = class USelect extends UFormControlElement {
         autofocus
         for=".container"
         trigger="click"
+        strategy="fixed"
         placement="bottom-start"
         offset="1"
-        strategy="fixed"
-        @show=${this.handlePopoverEvent}
-        @hide=${this.handlePopoverEvent}
       >
         <div class="search-input" part="search-input" 
           ?hidden=${!this.searchable}>
@@ -214,19 +215,27 @@ var USelect = class USelect extends UFormControlElement {
         </div>
       `;
 		} else {
-			const text = this.options.find((o) => o.value === this.value)?.getText();
-			if (!text) return html`
+			const option = this.options.find((o) => o.value === this.value);
+			if (!option) return html`
           <span class="text-content placeholder">${this.placeholder ?? ""}</span>`;
-			return html`<span class="text-content">${text}</span>`;
+			return html`<span class="text-content">${option.getContent()}</span>`;
 		}
 	}
-	validate() {
-		if (this.internals) this.invalid = !this.internals.checkValidity();
-		else {
-			const { flags } = this.getValidity(this.valueAsArray);
-			this.invalid = Object.keys(flags).length > 0;
+	setValidity() {
+		const values = this.valueAsArray;
+		let flags = {};
+		let message = "";
+		if (this.required && !values.length) {
+			flags = { valueMissing: true };
+			message = Locale.getValue("valueMissing");
+		} else if (this.multiple && this.minCount != null && values.length > 0 && values.length < this.minCount) {
+			flags = { tooShort: true };
+			message = Locale.getValue("tooShort", { min: this.minCount });
+		} else if (this.multiple && this.maxCount != null && values.length > this.maxCount) {
+			flags = { tooLong: true };
+			message = Locale.getValue("tooLong", { max: this.maxCount });
 		}
-		return !this.invalid;
+		this.commit(flags, message, this.containerEl ?? void 0);
 	}
 	reset() {
 		this.value = this.multiple ? [] : "";
@@ -254,33 +263,12 @@ var USelect = class USelect extends UFormControlElement {
 		for (const option of this.options) if (this.multiple) option.selected = values.includes(option.value);
 		else option.selected = option.value === this.value;
 		this.internals?.setFormValue(this.valueAsString);
-		const { flags, message } = this.getValidity(values);
-		this.internals?.setValidity(flags, this.validationMessage || message, this.containerEl || void 0);
 		if (!this.novalidate) this.validate();
 		this.dispatchEvent(new Event("change", {
 			bubbles: true,
 			composed: true
 		}));
 	}
-	getValidity(values) {
-		const s = getLocaleStrings(resolveLocale(this.locale));
-		if (this.required && !values.length) return {
-			flags: { valueMissing: true },
-			message: s.required
-		};
-		if (this.multiple && this.minCount != null && values.length > 0 && values.length < this.minCount) return {
-			flags: { rangeUnderflow: true },
-			message: formatTemplate(s.minCount, { min: this.minCount })
-		};
-		if (this.multiple && this.maxCount != null && values.length > this.maxCount) return {
-			flags: { rangeOverflow: true },
-			message: formatTemplate(s.maxCount, { max: this.maxCount })
-		};
-		return {
-			flags: {},
-			message: ""
-		};
-	}
 };
 __decorate([property({
 	type: String,

package/dist/components/select/USelect.styles.js

@@ -2,8 +2,8 @@ import { css } from "lit";
 //#region src/components/select/USelect.styles.ts
 var styles = css`
   :host {
-    --select-popover-min-width: 100%;
-    --select-popover-max-width: 80vw;
+    /* --anchor-width는 u-popover(자식) 자신에게 JS로 설정되므로 여기서는 참조할 수 없다
+       (커스텀 프로퍼티는 조상→자손으로만 상속). 실제 폴백은 아래 u-popover 규칙에서 처리. */
     --select-popover-min-height: 0px;
     --select-popover-max-height: 50vh;
   }
@@ -163,10 +163,10 @@ var styles = css`
     color: var(--u-icon-color-active);
   }
 
-  /* 드롭다운 패널 */
+  /* 드롭다운 패널 — 옵션 텍스트가 길어도 팝오버가 앵커보다 넓어지지 않도록 고정 너비로
+     맞춘다(긴 텍스트는 UOption 자체의 ellipsis로 처리). */
   u-popover {
-    min-width: var(--select-popover-min-width);
-    max-width: var(--select-popover-max-width);
+    width: var(--select-popover-width, var(--anchor-width, 100%));
     min-height: var(--select-popover-min-height);
     max-height: var(--select-popover-max-height);
     padding: 4px;

package/dist/components/skeleton/USkeleton.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 "./USkeleton.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/skeleton/USkeleton.ts
 var USkeleton = class USkeleton extends UElement {
 	constructor(..._args) {

package/dist/components/slider/USlider.d.ts

@@ -56,6 +56,8 @@ export declare class USlider extends UFormControlElement<number | number[]> {
     step: number;
     private dragging;
     private trackEl;
+    private containerEl?;
+    protected shouldValidate(changed: PropertyValues): boolean;
     get valueAsNumber(): number;
     get valueAsArray(): number[];
     private get minVal();
@@ -67,10 +69,9 @@ export declare class USlider extends UFormControlElement<number | number[]> {
     private get hasMarks();
     protected willUpdate(changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
-    validate(): boolean;
+    protected setValidity(): void;
     reset(): void;
     private onChangeValue;
-    private getValidity;
     private renderThumb;
     private formatDisplay;
     private formatValue;

package/dist/components/slider/USlider.js

@@ -1,12 +1,12 @@
-import { formatTemplate, getLocaleStrings, resolveLocale } from "../../core/locale.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 { UFormControlElement } from "../UFormControlElement.js";
 import "../tooltip/UTooltip.js";
+import { Locale } from "../../utilities/Locale.js";
 import "../field/UField.js";
 import { styles } from "./USlider.styles.js";
-import { customElement, property, query, state } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
 //#region src/components/slider/USlider.ts
 var USlider = class USlider extends UFormControlElement {
 	constructor(..._args) {
@@ -90,6 +90,9 @@ var USlider = class USlider extends UFormControlElement {
 	static {
 		this.styles = [super.styles, styles];
 	}
+	shouldValidate(changed) {
+		return super.shouldValidate(changed) || changed.has("min") || changed.has("max");
+	}
 	get valueAsNumber() {
 		return Array.isArray(this.value) ? this.value[0] : this.value || 0;
 	}
@@ -169,13 +172,21 @@ var USlider = class USlider extends UFormControlElement {
       </u-field>
     `;
 	}
-	validate() {
-		if (this.internals) this.invalid = !this.internals.checkValidity();
-		else {
-			const { flags } = this.getValidity();
-			this.invalid = Object.values(flags).some(Boolean);
+	setValidity() {
+		const v = this.valueAsNumber;
+		let flags = {};
+		let message = "";
+		if (this.required && !v) {
+			flags = { valueMissing: true };
+			message = Locale.getValue("valueMissing");
+		} else if (v < this.min) {
+			flags = { rangeUnderflow: true };
+			message = Locale.getValue("rangeUnderflow", { min: this.min });
+		} else if (v > this.max) {
+			flags = { rangeOverflow: true };
+			message = Locale.getValue("rangeOverflow", { max: this.max });
 		}
-		return !this.invalid;
+		this.commit(flags, message, this.containerEl ?? void 0);
 	}
 	reset() {
 		if (this.range) this.value = [this.min, this.max];
@@ -186,33 +197,11 @@ var USlider = class USlider extends UFormControlElement {
 		if (Array.isArray(this.value)) this.value = [this.snap(this.value[0]), this.snap(this.value[1])];
 		else if (typeof this.value === "number") this.value = this.snap(this.value);
 		this.internals?.setFormValue(this.valueAsNumber.toString());
-		const { flags, message } = this.getValidity();
-		this.internals?.setValidity(flags, this.validationMessage || message, this.renderRoot.querySelector(".container") || void 0);
 		this.dispatchEvent(new Event("change", {
 			bubbles: true,
 			composed: true
 		}));
 	}
-	getValidity() {
-		const v = this.valueAsNumber;
-		const s = getLocaleStrings(resolveLocale(this.locale));
-		if (this.required && !v) return {
-			flags: { valueMissing: true },
-			message: s.required
-		};
-		if (v < this.min) return {
-			flags: { rangeUnderflow: true },
-			message: formatTemplate(s.minValue, { min: this.min })
-		};
-		if (v > this.max) return {
-			flags: { rangeOverflow: true },
-			message: formatTemplate(s.maxValue, { max: this.max })
-		};
-		return {
-			flags: {},
-			message: ""
-		};
-	}
 	renderThumb(thumb) {
 		const isEnd = thumb === "max";
 		const val = this.getThumbValue(thumb);
@@ -282,6 +271,7 @@ __decorate([property({ type: Number }), __decorateMetadata("design:type", Number
 __decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], USlider.prototype, "step", void 0);
 __decorate([state(), __decorateMetadata("design:type", Object)], USlider.prototype, "dragging", void 0);
 __decorate([query(".track"), __decorateMetadata("design:type", typeof HTMLElement === "undefined" ? Object : HTMLElement)], USlider.prototype, "trackEl", void 0);
+__decorate([query(".container"), __decorateMetadata("design:type", typeof HTMLElement === "undefined" ? Object : HTMLElement)], USlider.prototype, "containerEl", void 0);
 USlider = __decorate([customElement("u-slider")], USlider);
 //#endregion
 export { USlider };

package/dist/components/slider/USlider.styles.js

@@ -2,11 +2,11 @@ import { css } from "lit";
 //#region src/components/slider/USlider.styles.ts
 var styles = css`
   :host {
-    --slider-fill-color: var(--u-blue-600);
+    --slider-fill-color: var(--u-primary-color, var(--u-blue-600));
     --slider-track-color: var(--u-neutral-300);
     --slider-track-height: 6px;
     --slider-thumb-size: 18px;
-    --slider-thumb-color: var(--u-blue-600);
+    --slider-thumb-color: var(--slider-fill-color);
     --slider-thumb-border-color: var(--u-neutral-0);
     --slider-mark-size: 12px;
     --slider-mark-color: var(--u-neutral-0);

package/dist/components/spinner/USpinner.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 "./USpinner.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/spinner/USpinner.ts
 var USpinner = class USpinner extends UElement {
 	constructor(..._args) {

package/dist/components/spinner/USpinner.styles.js

@@ -4,7 +4,7 @@ var styles = css`
   :host {
     --spinner-track-width: 0.125em;
     --spinner-track-color: var(--u-neutral-200);
-    --spinner-indicator-color: var(--u-neutral-800);
+    --spinner-indicator-color: var(--u-primary-color, var(--u-blue-600));
     --spinner-indicator-speed: 2s;
   }
 

package/dist/components/split-panel/USplitPanel.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 { arrayAttrConverter } from "../../utilities/converters.js";
 import { styles } from "./USplitPanel.styles.js";
-import { customElement, property, query } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
 //#region src/components/split-panel/USplitPanel.ts
 var USplitPanel = class USplitPanel extends UElement {
 	constructor(..._args) {
@@ -67,10 +67,14 @@ var USplitPanel = class USplitPanel extends UElement {
 			}
 			document.body.style.userSelect = "none";
 			document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
-			this.fire("shift-start", { detail: {
-				index: this.dragState.index,
-				ratio: [...this.percentages]
-			} });
+			this.fire("shift-start", {
+				bubbles: false,
+				composed: false,
+				detail: {
+					index: this.dragState.index,
+					ratio: [...this.percentages]
+				}
+			});
 		};
 		this.handlePointerMove = (e) => {
 			e.preventDefault();
@@ -95,10 +99,14 @@ var USplitPanel = class USplitPanel extends UElement {
 				newRatio[bIdx] = bPercent;
 				this.ratio = newRatio;
 			}
-			this.fire("shift", { detail: {
-				index: this.dragState.index,
-				ratio: this.lazy ? this.percentages : [...this.ratio]
-			} });
+			this.fire("shift", {
+				bubbles: false,
+				composed: false,
+				detail: {
+					index: this.dragState.index,
+					ratio: this.lazy ? this.percentages : [...this.ratio]
+				}
+			});
 		};
 		this.handlePointerUp = (e) => {
 			const target = e.currentTarget;
@@ -121,10 +129,14 @@ var USplitPanel = class USplitPanel extends UElement {
 			}
 			document.body.style.userSelect = "";
 			document.body.style.cursor = "";
-			this.fire("shift-end", { detail: {
-				index: this.dragState.index,
-				ratio: [...this.percentages]
-			} });
+			this.fire("shift-end", {
+				bubbles: false,
+				composed: false,
+				detail: {
+					index: this.dragState.index,
+					ratio: [...this.percentages]
+				}
+			});
 		};
 	}
 	static {

package/dist/components/switch/USwitch.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { UFormControlElement } from '../UFormControlElement.js';
 /**
  * 온/오프 상태를 전환하는 스위치 컴포넌트입니다.
@@ -31,8 +32,10 @@ export declare class USwitch extends UFormControlElement<string> {
     static styles: import('lit').CSSResultGroup[];
     /** 체크 여부 */
     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/switch/USwitch.js

@@ -1,9 +1,10 @@
 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 { UFormControlElement } from "../UFormControlElement.js";
+import { Locale } from "../../utilities/Locale.js";
 import { styles } from "./USwitch.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/switch/USwitch.ts
 var USwitch = class USwitch extends UFormControlElement {
@@ -16,7 +17,6 @@ var USwitch = class USwitch extends UFormControlElement {
 			const input = e.target;
 			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(".track") || void 0);
 			if (!this.novalidate) this.validate();
 			this.relay(e);
 		};
@@ -24,6 +24,9 @@ var USwitch = class USwitch 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">
@@ -56,15 +59,14 @@ var USwitch = class USwitch extends UFormControlElement {
         </span>
       </label>
 
-      <div class="description" ?hidden=${!this.description}>
-        ${this.description}
+      <div class="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(".track") ?? void 0);
 	}
 	reset() {
 		this.checked = false;
@@ -75,6 +77,7 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 }), __decorateMetadata("design:type", Boolean)], USwitch.prototype, "checked", void 0);
+__decorate([query("input", true), __decorateMetadata("design:type", typeof HTMLInputElement === "undefined" ? Object : HTMLInputElement)], USwitch.prototype, "inputEl", void 0);
 USwitch = __decorate([customElement("u-switch")], USwitch);
 //#endregion
 export { USwitch };

package/dist/components/switch/USwitch.styles.js

@@ -5,7 +5,7 @@ var styles = css`
     --switch-track-width: 2.4em;
     --switch-track-height: 1.4em;
     --switch-track-color: var(--u-neutral-300);
-    --switch-track-color-checked: var(--u-blue-600);
+    --switch-track-color-checked: var(--u-primary-color, var(--u-blue-600));
     --switch-thumb-size: 1.1em;
     --switch-thumb-offset: 0.15em;
     --switch-thumb-color: #fff;
@@ -186,6 +186,10 @@ var styles = css`
     font-size: 0.75em;
     line-height: 1.3;
   }
+
+  :host([invalid]) .description {
+    color: var(--u-red-600);
+  }
 `;
 //#endregion
 export { styles };

package/dist/components/tab/UTab.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 "./UTab.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/tab/UTab.ts
 var UTab = class UTab extends UElement {
 	constructor(..._args) {
@@ -17,7 +17,10 @@ var UTab = class UTab extends UElement {
 		this.handleRemoveClick = (e) => {
 			e.stopPropagation();
 			if (this.disabled) return;
-			if (this.fire("remove")) this.remove();
+			if (this.fire("remove", {
+				bubbles: false,
+				composed: false
+			})) this.remove();
 		};
 	}
 	static {

package/dist/components/tab-panel/UTabPanel.d.ts

@@ -12,6 +12,10 @@ export type TabPanelPlacement = 'top' | 'bottom' | 'left' | 'right';
  * @csspart nav - 탭 버튼들이 실제로 배치되는 네비게이션 영역
  * @csspart toolbar - 탭 헤더 내 툴바 영역
  * @csspart content - 탭 패널이 있는 콘텐츠 영역
+ *
+ * @event change - 탭을 클릭하거나 키보드로 선택했을 때만 발생한다. 최초 마운트 시 첫 탭이
+ *   자동 선택되는 경우나 `value` 프로퍼티를 직접 대입하는 경우는 사용자 조작이 아니므로
+ *   발생시키지 않는다(네이티브 select가 프로그래밍적 대입에는 change를 내지 않는 것과 동일한 관례).
  */
 export declare class UTabPanel extends UElement {
     static styles: import('lit').CSSResultGroup[];
@@ -31,6 +35,7 @@ export declare class UTabPanel extends UElement {
     private get isVertical();
     protected willUpdate(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
+    private change;
     private updateTabPanel;
     private handleSlotChange;
     private handleTabSlotChange;

package/dist/components/tab-panel/UTabPanel.js

@@ -4,8 +4,8 @@ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm
 import { UPanel } from "../panel/UPanel.js";
 import { UTab } from "../tab/UTab.js";
 import { styles } from "./UTabPanel.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/tab-panel/UTabPanel.ts
 var UTabPanel = class UTabPanel extends UElement {
 	constructor(..._args) {
@@ -40,7 +40,7 @@ var UTabPanel = class UTabPanel extends UElement {
 		this.handleTabClick = (e) => {
 			const tab = e.currentTarget || e.target;
 			if (tab.disabled || this.disabled) return;
-			this.value = tab.value;
+			this.change(tab.value);
 		};
 		this.handleTabKeydown = (e) => {
 			const enabledTabs = this.tabs.filter((t) => !t.disabled);
@@ -62,14 +62,14 @@ var UTabPanel = class UTabPanel extends UElement {
 					break;
 				case "Enter":
 				case " ":
-					this.value = enabledTabs[currentIndex].value;
+					this.change(enabledTabs[currentIndex].value);
 					return;
 				default: return;
 			}
 			if (targetIndex >= 0) {
 				e.preventDefault();
 				enabledTabs[targetIndex].focus();
-				this.value = enabledTabs[targetIndex].value;
+				this.change(enabledTabs[targetIndex].value);
 			}
 		};
 		this.handleNavWheel = (e) => {
@@ -111,6 +111,14 @@ var UTabPanel = class UTabPanel extends UElement {
       </div>
     `;
 	}
+	change(value) {
+		if (this.value === value) return;
+		this.value = value;
+		this.fire("change", {
+			bubbles: false,
+			composed: false
+		});
+	}
 	updateTabPanel() {
 		this.tabs.forEach((tab) => {
 			tab.toggleAttribute("active", tab.value === this.value);