@iyulab/components 0.4.0 → 1.0.0

package/dist/components/split-panel/USplitPanel.js

@@ -1,5 +1,241 @@
-import { USplitPanel } from './USplitPanel.component.js';
-
-USplitPanel.define("u-split-panel");
+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 { arrayAttrConverter } from "../../utilities/converters.js";
+import { styles } from "./USplitPanel.styles.js";
+import { customElement, property, query } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/split-panel/USplitPanel.ts
+var _ref;
+var USplitPanel = class USplitPanel extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.orientation = "horizontal";
+		this.lazy = false;
+		this.defaultRatio = [];
+		this.ratio = [];
+		this.panels = [];
+		this.dragState = {
+			index: -1,
+			startPoint: 0,
+			availableSize: 0,
+			percentages: [],
+			ghostDelta: 0
+		};
+		this.handleSlotChange = (e) => {
+			this.panels = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof HTMLElement);
+			this.appendSplitters();
+			this.updatePanelLayout();
+		};
+		this.handleSplitterSlotChange = (e) => {
+			this.splitter = e.target.assignedNodes({ flatten: true }).at(0);
+			this.appendSplitters();
+		};
+		this.handleDblClick = () => {
+			if (this.disabled) return;
+			this.ratio = this.defaultRatio.length === this.panels.length ? [...this.defaultRatio] : [];
+			this.updatePanelLayout();
+		};
+		this.handlePointerDown = (e) => {
+			if (e.button !== 0 || this.disabled) return;
+			e.preventDefault();
+			const target = e.currentTarget;
+			target.setPointerCapture(e.pointerId);
+			target.addEventListener("pointermove", this.handlePointerMove);
+			target.addEventListener("pointerup", this.handlePointerUp);
+			target.addEventListener("pointercancel", this.handlePointerUp);
+			const hostRect = this.getBoundingClientRect();
+			const containerSize = this.orientation === "horizontal" ? hostRect.width : hostRect.height;
+			const splitterRect = target.getBoundingClientRect();
+			const splitterPos = this.orientation === "horizontal" ? splitterRect.left - hostRect.left : splitterRect.top - hostRect.top;
+			this.dragState = {
+				index: parseInt(target.dataset.index || "-1"),
+				startPoint: this.orientation === "horizontal" ? e.clientX : e.clientY,
+				availableSize: containerSize - this.splitterSize * this.splitterCount,
+				percentages: this.percentages,
+				ghostDelta: 0
+			};
+			if (this.lazy && this.ghost) {
+				this.ghost.style.left = "";
+				this.ghost.style.top = "";
+				this.ghost.style.transform = "";
+				const prop = this.orientation === "horizontal" ? "left" : "top";
+				this.ghost.style[prop] = `${splitterPos}px`;
+				this.ghost.setAttribute("active", "");
+			}
+			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.handlePointerMove = (e) => {
+			e.preventDefault();
+			const deltaPixel = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this.dragState.startPoint;
+			const deltaPercent = deltaPixel / this.dragState.availableSize * 100;
+			const aIdx = this.dragState.index;
+			const bIdx = aIdx + 1;
+			if (this.lazy && this.ghost) {
+				const maxDelta = this.dragState.percentages[bIdx] / 100 * this.dragState.availableSize;
+				const minDelta = -(this.dragState.percentages[aIdx] / 100) * this.dragState.availableSize;
+				this.dragState.ghostDelta = Math.max(minDelta, Math.min(maxDelta, deltaPixel));
+				const axis = this.orientation === "horizontal" ? "X" : "Y";
+				this.ghost.style.transform = `translate${axis}(${this.dragState.ghostDelta}px)`;
+			} else {
+				const [aPercent, bPercent] = this.clampPair(this.dragState.percentages[aIdx] + deltaPercent, this.dragState.percentages[bIdx] - deltaPercent);
+				const dim = this.orientation === "horizontal" ? "width" : "height";
+				const offset = this.splitterSize * (this.splitterCount / this.panels.length);
+				this.panels[aIdx].style[dim] = `calc(${aPercent}% - ${offset}px)`;
+				this.panels[bIdx].style[dim] = `calc(${bPercent}% - ${offset}px)`;
+				const newRatio = [...this.dragState.percentages];
+				newRatio[aIdx] = aPercent;
+				newRatio[bIdx] = bPercent;
+				this.ratio = newRatio;
+			}
+			this.fire("shift", { detail: {
+				index: this.dragState.index,
+				ratio: this.lazy ? this.percentages : [...this.ratio]
+			} });
+		};
+		this.handlePointerUp = (e) => {
+			const target = e.currentTarget;
+			target.releasePointerCapture(e.pointerId);
+			target.removeEventListener("pointermove", this.handlePointerMove);
+			target.removeEventListener("pointerup", this.handlePointerUp);
+			target.removeEventListener("pointercancel", this.handlePointerUp);
+			if (this.lazy && this.ghost) {
+				this.ghost.removeAttribute("active");
+				this.ghost.style.transform = "";
+				const deltaPercent = this.dragState.ghostDelta / this.dragState.availableSize * 100;
+				const aIdx = this.dragState.index;
+				const bIdx = aIdx + 1;
+				const newRatio = [...this.dragState.percentages];
+				const [a, b] = this.clampPair(newRatio[aIdx] + deltaPercent, newRatio[bIdx] - deltaPercent);
+				newRatio[aIdx] = a;
+				newRatio[bIdx] = b;
+				this.ratio = newRatio;
+				this.updatePanelLayout();
+			}
+			document.body.style.userSelect = "";
+			document.body.style.cursor = "";
+			this.fire("shift-end", { detail: {
+				index: this.dragState.index,
+				ratio: [...this.percentages]
+			} });
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	get percentages() {
+		const source = this.ratio.length === this.panels.length ? this.ratio : this.defaultRatio.length === this.panels.length ? this.defaultRatio : [];
+		if (source.length === this.panels.length) {
+			const total = source.reduce((sum, s) => sum + s, 0);
+			return source.map((s) => s / total * 100);
+		}
+		const equals = 100 / this.panels.length;
+		return this.panels.map(() => equals);
+	}
+	get splitterSize() {
+		const sizeStr = getComputedStyle(this).getPropertyValue("--splitter-size").trim();
+		return parseFloat(sizeStr) || 4;
+	}
+	get splitterCount() {
+		return Math.max(0, this.panels.length - 1);
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if ([
+			"orientation",
+			"defaultRatio",
+			"ratio"
+		].some((k) => changedProperties.has(k))) this.updatePanelLayout();
+	}
+	render() {
+		return html`
+      <slot @slotchange=${this.handleSlotChange}></slot>
 
+      <div class="splitter-ghost"></div>
+      <div hidden aria-hidden="true">
+        <slot name="splitter" @slotchange=${this.handleSplitterSlotChange}></slot>
+      </div>
+    `;
+	}
+	appendSplitters() {
+		const root = this.renderRoot;
+		if (!root) return;
+		root.querySelectorAll(".splitter").forEach((el) => el.remove());
+		const ref = this.ghost ?? null;
+		for (let i = 0; i < this.splitterCount; i++) {
+			const splitter = this.createSplitter(i);
+			root.insertBefore(splitter, ref);
+		}
+	}
+	createSplitter(index) {
+		const el = document.createElement("div");
+		el.setAttribute("class", "splitter");
+		el.setAttribute("part", "splitter");
+		el.style.order = String(index * 2 + 1);
+		el.dataset.index = String(index);
+		if (this.splitter) el.appendChild(this.splitter.cloneNode(true));
+		el.addEventListener("pointerdown", this.handlePointerDown);
+		el.addEventListener("dblclick", this.handleDblClick);
+		return el;
+	}
+	updatePanelLayout() {
+		if (this.panels.length === 0) return;
+		const dim = this.orientation === "horizontal" ? "width" : "height";
+		const otherDim = this.orientation === "horizontal" ? "height" : "width";
+		const percentages = this.percentages;
+		const splitterOffset = this.splitterSize * (this.splitterCount / this.panels.length);
+		this.panels.forEach((panel, index) => {
+			panel.style[dim] = `calc(${percentages[index]}% - ${splitterOffset}px)`;
+			panel.style[otherDim] = "";
+			panel.style.order = String(index * 2);
+			panel.style.boxSizing = "border-box";
+			panel.style.flexShrink = "0";
+			panel.style.overflow = "auto";
+		});
+	}
+	clampPair(aRaw, bRaw) {
+		const sum = aRaw + bRaw;
+		let a = aRaw, b = bRaw;
+		if (a < 0) {
+			a = 0;
+			b = sum;
+		} else if (b < 0) {
+			b = 0;
+			a = sum;
+		}
+		return [a, b];
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], USplitPanel.prototype, "disabled", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", String)], USplitPanel.prototype, "orientation", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], USplitPanel.prototype, "lazy", void 0);
+__decorate([property({
+	type: Array,
+	reflect: true,
+	attribute: "default-ratio",
+	converter: arrayAttrConverter(parseFloat)
+}), __decorateMetadata("design:type", Array)], USplitPanel.prototype, "defaultRatio", void 0);
+__decorate([property({
+	type: Array,
+	reflect: true,
+	converter: arrayAttrConverter(parseFloat)
+}), __decorateMetadata("design:type", Array)], USplitPanel.prototype, "ratio", void 0);
+__decorate([query(".splitter-ghost"), __decorateMetadata("design:type", typeof (_ref = typeof HTMLElement !== "undefined" && HTMLElement) === "function" ? _ref : Object)], USplitPanel.prototype, "ghost", void 0);
+USplitPanel = __decorate([customElement("u-split-panel")], USplitPanel);
+//#endregion
 export { USplitPanel };

package/dist/components/split-panel/USplitPanel.styles.js

@@ -1,10 +1,11 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/split-panel/USplitPanel.styles.ts
+var styles = css`
   :host {
     --splitter-size: 4px;
-    --splitter-color: var(--u-neutral-200, #e5e7eb);
-    --splitter-active-color: var(--u-blue-500, #3b82f6);
+    --splitter-color: var(--u-neutral-200);
+    --splitter-color-hover: var(--u-blue-300);
+    --splitter-color-active: var(--u-blue-500);
   }
 
   :host {
@@ -21,29 +22,60 @@ const styles = css`
     flex-direction: column;
   }
 
+  :host([disabled]) .splitter {
+    pointer-events: none;
+    opacity: 0.4;
+  }
+
   /* Splitter */
   .splitter {
+    position: relative;
+    z-index: 1;
     flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background-color: var(--splitter-color);
     transition: background-color 0.15s ease;
+    touch-action: none;
+  }
+  .splitter:hover {
+    background-color: var(--splitter-color-hover);
   }
-  .splitter[orientation="horizontal"] {
+  .splitter:active {
+    background-color: var(--splitter-color-active);
+  }
+  :host([orientation="horizontal"]) .splitter {
     width: var(--splitter-size);
     cursor: col-resize;
   }
-  .splitter[orientation="vertical"] {
+  :host([orientation="vertical"]) .splitter {
     height: var(--splitter-size);
     cursor: row-resize;
   }
-  .splitter:hover,
-  .splitter.active {
-    background-color: var(--splitter-active-color);
-  }
 
-  /* Slotted panels */
-  ::slotted(*) {
-    overflow: auto;
+  /* Ghost Splitter (lazy) */
+  .splitter-ghost {
+    display: none;
+    position: absolute;
+    z-index: 10;
+    background-color: var(--splitter-color-active);
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  .splitter-ghost[active] {
+    display: block;
+  }
+  :host([orientation="horizontal"]) .splitter-ghost {
+    top: 0;
+    width: var(--splitter-size);
+    height: 100%;
+  }
+  :host([orientation="vertical"]) .splitter-ghost {
+    left: 0;
+    width: 100%;
+    height: var(--splitter-size);
   }
 `;
-
+//#endregion
 export { styles };

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

@@ -0,0 +1,43 @@
+import { UFormControlElement } from '../UFormControlElement.js';
+/**
+ * 온/오프 상태를 전환하는 스위치 컴포넌트입니다.
+ * font-size로 전체 크기를 지정하고, CSS 변수로 다양한 스타일을 적용할 수 있습니다.
+ *
+ * @slot - 스위치 옆에 표시될 레이블 텍스트
+ * @slot track-checked - 체크 상태에서 트랙에 표시될 콘텐츠
+ * @slot track-unchecked - 체크 해제 상태에서 트랙에 표시될 콘텐츠
+ * @slot thumb-checked - 체크 상태에서 thumb에 표시될 콘텐츠
+ * @slot thumb-unchecked - 체크 해제 상태에서 thumb에 표시될 콘텐츠
+ *
+ * @csspart wrapper - 스위치 전체 래퍼
+ * @csspart track - 트랙 요소
+ * @csspart thumb - thumb 요소
+ * @csspart label - 레이블 영역
+ *
+ * @cssprop --switch-track-width - 트랙 너비 (2.4em)
+ * @cssprop --switch-track-height - 트랙 높이 (1.4em)
+ * @cssprop --switch-track-color - 비활성 트랙 배경색
+ * @cssprop --switch-track-color-checked - 활성 트랙 배경색
+ * @cssprop --switch-thumb-size - thumb 크기 (1.1em)
+ * @cssprop --switch-thumb-offset - thumb 간격 (0.15em)
+ * @cssprop --switch-thumb-color - thumb 색상 (#fff)
+ * @cssprop --switch-thumb-color-checked - 활성 thumb 색상 (#fff)
+ * @cssprop --switch-radius - border-radius (9999px, pill 형태)
+ * @cssprop --switch-duration - 전환 애니메이션 시간 (0.25s)
+ *
+ * @event change - 스위치 상태 변경 시 발생
+ */
+export declare class USwitch extends UFormControlElement<string> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 체크 여부 */
+    checked: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+    validate(): boolean;
+    reset(): void;
+    private handleInputChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-switch': USwitch;
+    }
+}

package/dist/components/switch/USwitch.js

@@ -0,0 +1,80 @@
+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 { styles } from "./USwitch.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+import { live } from "lit/directives/live.js";
+//#region src/components/switch/USwitch.ts
+var USwitch = class USwitch extends UFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.handleInputChange = (e) => {
+			e.stopImmediatePropagation();
+			if (this.readonly || this.disabled) return;
+			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);
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <label class="wrapper" part="wrapper">
+        <input
+          type="checkbox"
+          ?disabled=${this.disabled || this.readonly}
+          ?required=${this.required}
+          .checked=${live(this.checked)}
+          @change=${this.handleInputChange}
+        />
+        <span class="track" part="track">
+          <span class="track-checked">
+            <slot name="track-checked"></slot>
+          </span>
+          <span class="track-unchecked">
+            <slot name="track-unchecked"></slot>
+          </span>
+          <span class="thumb" part="thumb">
+            <span class="thumb-checked">
+              <slot name="thumb-checked"></slot>
+            </span>
+            <span class="thumb-unchecked">
+              <slot name="thumb-unchecked"></slot>
+            </span>
+          </span>
+        </span>
+        <span class="label" part="label">
+          <slot></slot>
+          <span class="required" ?hidden=${!this.required}>*</span>
+        </span>
+      </label>
+
+      <div class="description" ?hidden=${!this.description}>
+        ${this.description}
+      </div>
+    `;
+	}
+	validate() {
+		if (this.internals) this.invalid = !this.internals.reportValidity();
+		else this.invalid = this.required && !this.checked;
+		return !this.invalid;
+	}
+	reset() {
+		this.checked = false;
+		this.invalid = false;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], USwitch.prototype, "checked", void 0);
+USwitch = __decorate([customElement("u-switch")], USwitch);
+//#endregion
+export { USwitch };

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

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

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

@@ -0,0 +1,191 @@
+import { css } from "lit";
+//#region src/components/switch/USwitch.styles.ts
+var styles = css`
+  :host {
+    --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-thumb-size: 1.1em;
+    --switch-thumb-offset: 0.15em;
+    --switch-thumb-color: #fff;
+    --switch-thumb-color-checked: #fff;
+    --switch-radius: 9999px;
+    --switch-duration: 0.25s;
+    --switch-move-width: calc(var(--switch-track-width) - var(--switch-thumb-size) - var(--switch-thumb-offset) * 2);
+  }
+
+  :host {
+    display: inline-flex;
+    flex-direction: column;
+    color: var(--u-txt-color);
+    font-size: inherit;
+    font-family: var(--u-font-base);
+    user-select: none;
+    cursor: pointer;
+  }
+
+  /* === 상태 스타일 === */
+  :host([disabled]) {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  :host([readonly]) {
+    cursor: default;
+  }
+  :host([invalid]) .track {
+    outline: 2px solid var(--u-red-600);
+    outline-offset: 1px;
+  }
+  :host(:not([disabled]):not([readonly]):hover) .track {
+    filter: brightness(0.95);
+  }
+
+  .wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6em;
+    cursor: inherit;
+  }
+
+  /* === 네이티브 input === */
+  input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+  input:focus-visible ~ .track {
+    box-shadow:
+      0 0 0 1px var(--u-input-border-color-focus),
+      0 0 0 3px rgba(59, 130, 246, 0.22);
+  }
+
+  /* === 트랙 === */
+  .track {
+    position: relative;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    width: var(--switch-track-width);
+    height: var(--switch-track-height);
+    border-radius: var(--switch-radius);
+    background: var(--switch-track-color);
+    transition: background var(--switch-duration) ease;
+  }
+  :host([checked]) .track {
+    background: var(--switch-track-color-checked);
+  }
+
+  /* === 트랙 인디케이터(슬롯) === */
+  .track-checked,
+  .track-unchecked {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(50% - var(--switch-thumb-offset));
+    font-size: 0.5em;
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    pointer-events: none;
+    transition: opacity var(--switch-duration) ease;
+  }
+  .track-checked {
+    opacity: 0;
+    left: var(--switch-thumb-offset);
+    color: #fff;
+  }
+  :host([checked]) .track-checked {
+    opacity: 1;
+  }
+  .track-unchecked {
+    opacity: 1;
+    right: var(--switch-thumb-offset);
+    color: var(--u-txt-color-weak);
+  }
+  :host([checked]) .track-unchecked {
+    opacity: 0;
+  }
+
+  /* === 핸들 === */
+  .thumb {
+    position: absolute;
+    z-index: 1;
+    left: var(--switch-thumb-offset);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--switch-thumb-size);
+    height: var(--switch-thumb-size);
+    border-radius: var(--switch-radius);
+    background: var(--switch-thumb-color);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    transition:
+      transform var(--switch-duration) cubic-bezier(0.4, 0, 0.2, 1),
+      background var(--switch-duration) ease;
+  }
+  :host([checked]) .thumb {
+    transform: translateX(var(--switch-move-width));
+    background: var(--switch-thumb-color-checked);
+  }
+
+  /* === 핸들 인디케이터(슬롯) === */
+  .thumb-checked,
+  .thumb-unchecked {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: 0.5em;
+    font-weight: 600;
+    line-height: 1;
+    pointer-events: none;
+    transition:
+      opacity var(--switch-duration) ease,
+      transform var(--switch-duration) ease;
+  }
+  .thumb-checked {
+    opacity: 0;
+    transform: scale(0.5) rotate(-90deg);
+    color: var(--switch-track-color-checked);
+  }
+  :host([checked]) .thumb-checked {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+  .thumb-unchecked {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+    color: var(--u-txt-color-weak);
+  }
+  :host([checked]) .thumb-unchecked {
+    opacity: 0;
+    transform: scale(0.5) rotate(90deg);
+  }
+
+  .label {
+    font-size: 1em;
+    line-height: var(--switch-track-height);
+  }
+
+  .required {
+    color: var(--u-red-600);
+    font-weight: 500;
+  }
+
+  .description {
+    margin-top: 0.5em;
+    color: var(--u-txt-color-weak);
+    font-size: 0.75em;
+    line-height: 1.3;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/tab/UTab.d.ts

@@ -0,0 +1,31 @@
+import { UElement } from '../UElement.js';
+/**
+ * 탭 패널에서 사용하는 탭 아이템(탭 버튼) 컴포넌트입니다.
+ *
+ * @slot - 탭 레이블 콘텐츠
+ * @slot prefix - 탭 레이블 앞에 표시되는 콘텐츠
+ * @slot suffix - 탭 레이블 뒤에 표시되는 콘텐츠
+ *
+ * @csspart remove-btn - 탭 닫기 버튼
+ *
+ * @event remove - 탭이 닫힐 때 발생. 이벤트 리스너에서 preventDefault()를 호출하면 탭이 닫히지 않습니다.
+ */
+export declare class UTab extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 탭 비활성화 여부 */
+    disabled: boolean;
+    /** 탭 닫기 가능 여부 */
+    removable: boolean;
+    /** 탭 고유값 (패널 매칭에 사용) */
+    value: string;
+    /** 탭 드래그 여부 */
+    draggable: boolean;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleRemoveClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-tab': UTab;
+    }
+}