@iyulab/components 1.38.0 → 1.40.0

package/dist/components/split-panel/USplitPanel.d.ts

@@ -6,14 +6,22 @@ import { UElement } from '../UElement.js';
  * @slot - 분할된 패널 요소들
  * @slot splitter - 핸들(스플리터) UI
  *
- * @cssprop --splitter-size - 스플리터 크기 (default: 4px)
+ * @cssprop --splitter-size - 보이는 구분선 두께 (default: 4px)
+ * @cssprop --splitter-hit-size - 포인터를 받는 핸들 영역의 두께 — 레이아웃 공간을 차지하므로 패널을
+ *   가리지 않는다. 실제 핸들 두께는 이 값과 `--splitter-size` 중 큰 쪽 (default: 24px — WCAG 2.5.8)
  * @cssprop --splitter-color - 스플리터 색상
  * @cssprop --splitter-color-hover - 스플리터 호버 색상
  * @cssprop --splitter-color-active - 스플리터 활성 색상
  *
  * @event shift-start - 구분선 이동 시작 시 발생
  * @event shift - 구분선 이동 중 발생
- * @event shift-end - 구분선 이동 완료 시 발생
+ * @event shift-end - 구분선 이동 완료 시 발생 (포인터·키보드 공통)
+ *
+ * 키보드(WAI-ARIA APG «Window Splitter»): 분할 핸들은 `role="separator"` 로 포커스를 받는다.
+ * 방향키(가로 배치는 ←/→, 세로 배치는 ↑/↓)로 앞 패널을 줄이거나 늘리고, Home/End 는 앞 패널을
+ * 최소/최대로, Enter 는 앞 패널을 접거나 접기 전 크기로 되돌린다. 키 입력 한 번은 하나의 완결된
+ * 이동이라 `shift-start`·`shift`·`shift-end` 를 연달아 낸다 — 비율을 저장하는 소비자는 포인터든
+ * 키보드든 `shift-end` 하나만 들으면 된다.
  */
 export declare class USplitPanel extends UElement {
     static styles: import('lit').CSSResultGroup[];
@@ -30,8 +38,15 @@ export declare class USplitPanel extends UElement {
     private ghost?;
     private panels;
     private splitter?;
+    /** Enter 로 접은 핸들별 «접기 전 앞 패널 비율» — 다시 Enter 를 누르면 여기로 돌아간다. */
+    private collapsedFrom;
     private dragState;
     private get percentages();
+    /**
+     * 핸들 하나가 레이아웃에서 차지하는 두께(px). 렌더된 핸들을 재는 것이 정본이다 — CSS 가
+     * `max(--splitter-size, --splitter-hit-size)` 로 정하고 `rem` 등 어떤 단위든 올 수 있다.
+     * 아직 렌더되지 않았거나 숨겨져 0 이면 두 변수를 읽어 같은 규칙을 흉내 낸다.
+     */
     private get splitterSize();
     private get splitterCount();
     protected willUpdate(changedProperties: PropertyValues): void;
@@ -40,11 +55,31 @@ export declare class USplitPanel extends UElement {
     private handleSplitterSlotChange;
     private appendSplitters;
     private createSplitter;
+    /**
+     * 분할 핸들의 접근성 상태 — APG «Window Splitter». 핸들은 명령형으로 만들어 Lit 템플릿 밖에
+     * 있으므로, 비율·방향·비활성이 바뀔 때마다 여기서 다시 쓴다.
+     *
+     * 값은 **앞 패널(primary pane)의 몫**이다. 패널이 셋 이상이면 한 핸들은 이웃한 두 패널 사이만
+     * 옮기므로 최대값은 100 이 아니라 그 두 패널의 몫의 합이다.
+     */
+    private syncSplitterAria;
+    /** 방향키 한 번이 옮기는 앞 패널의 몫(나머지 공간 기준 %). */
+    private static readonly KEY_STEP;
+    private handleKeyDown;
     private updatePanelLayout;
     private handleDblClick;
     private handlePointerDown;
     private handlePointerMove;
     private handlePointerUp;
+    /**
+     * 패널 하나의 크기 — 비율은 «핸들을 뺀 나머지 공간»에 대한 몫이다.
+     *
+     * 🔴각 패널은 핸들 전체 두께 중 **자기 비율만큼**을 뺀다. 종전에는 핸들 몫을 패널 수로 똑같이
+     * 나눠 뺐는데(`p% - 핸들합/n`), 그 식은 비율이 균등할 때만 «나머지 공간의 p%» 와 같다. 드래그는
+     * 이동량을 나머지 공간 기준 비율로 바꾸므로(`availableSize`), 비율이 균등에서 멀어질수록 패널이
+     * 포인터보다 더 움직였다 — 핸들이 굵을수록 크게(24px 핸들이면 이동량의 약 9%).
+     */
+    private panelSize;
     private clampPair;
 }
 declare global {

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

@@ -1,12 +1,17 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { arrayAttrConverter } from "../../utilities/converters.js";
+import { Locale } from "../../utilities/Locale.js";
 import { styles } from "./USplitPanel.styles.js";
 import { html } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 //#region src/components/split-panel/USplitPanel.ts
+var _USplitPanel;
 var USplitPanel = class USplitPanel extends UElement {
+	static {
+		_USplitPanel = this;
+	}
 	constructor(..._args) {
 		super(..._args);
 		this.disabled = false;
@@ -15,6 +20,7 @@ var USplitPanel = class USplitPanel extends UElement {
 		this.defaultRatio = [];
 		this.ratio = [];
 		this.panels = [];
+		this.collapsedFrom = /* @__PURE__ */ new Map();
 		this.dragState = {
 			index: -1,
 			startPoint: 0,
@@ -33,6 +39,52 @@ var USplitPanel = class USplitPanel extends UElement {
 			this.splitter = slot.assignedNodes({ flatten: true }).at(0);
 			this.appendSplitters();
 		};
+		this.handleKeyDown = (e) => {
+			if (this.disabled) return;
+			const i = Number(e.currentTarget.dataset.index);
+			const p = this.percentages;
+			if (p[i] === void 0 || p[i + 1] === void 0) return;
+			const pair = p[i] + p[i + 1];
+			const horizontal = this.orientation === "horizontal";
+			const rtl = horizontal && getComputedStyle(this).direction === "rtl";
+			const shrink = horizontal ? rtl ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
+			const grow = horizontal ? rtl ? "ArrowLeft" : "ArrowRight" : "ArrowDown";
+			let a;
+			if (e.key === shrink) a = p[i] - _USplitPanel.KEY_STEP;
+			else if (e.key === grow) a = p[i] + _USplitPanel.KEY_STEP;
+			else if (e.key === "Home") a = 0;
+			else if (e.key === "End") a = pair;
+			else if (e.key === "Enter") {
+				const restore = this.collapsedFrom.get(i);
+				if (p[i] > 0) {
+					this.collapsedFrom.set(i, p[i]);
+					a = 0;
+				} else {
+					a = restore ?? pair / 2;
+					this.collapsedFrom.delete(i);
+				}
+			} else return;
+			e.preventDefault();
+			a = Math.round(Math.min(pair, Math.max(0, a)) * 1e6) / 1e6;
+			if (Math.abs(a - p[i]) < 1e-6) return;
+			if (e.key !== "Enter") this.collapsedFrom.delete(i);
+			const next = [...p];
+			next[i] = a;
+			next[i + 1] = pair - a;
+			const init = (ratio) => ({
+				bubbles: false,
+				composed: false,
+				detail: {
+					index: i,
+					ratio: [...ratio]
+				}
+			});
+			this.fire("shift-start", init(p));
+			this.ratio = next;
+			this.updatePanelLayout();
+			this.fire("shift", init(next));
+			this.fire("shift-end", init(next));
+		};
 		this.handleDblClick = () => {
 			if (this.disabled) return;
 			this.ratio = this.defaultRatio.length === this.panels.length ? [...this.defaultRatio] : [];
@@ -91,9 +143,8 @@ var USplitPanel = class USplitPanel extends UElement {
 			} 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)`;
+				this.panels[aIdx].style[dim] = this.panelSize(aPercent);
+				this.panels[bIdx].style[dim] = this.panelSize(bPercent);
 				const newRatio = [...this.dragState.percentages];
 				newRatio[aIdx] = aPercent;
 				newRatio[bIdx] = bPercent;
@@ -143,7 +194,8 @@ var USplitPanel = class USplitPanel extends UElement {
 		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 : [];
+		const usable = (r) => r.length === this.panels.length && r.every((v) => Number.isFinite(v) && v >= 0) && r.some((v) => v > 0);
+		const source = usable(this.ratio) ? this.ratio : usable(this.defaultRatio) ? this.defaultRatio : [];
 		if (source.length === this.panels.length) {
 			const total = source.reduce((sum, s) => sum + s, 0);
 			return source.map((s) => s / total * 100);
@@ -151,9 +203,21 @@ var USplitPanel = class USplitPanel extends UElement {
 		const equals = 100 / this.panels.length;
 		return this.panels.map(() => equals);
 	}
+	/**
+	* 핸들 하나가 레이아웃에서 차지하는 두께(px). 렌더된 핸들을 재는 것이 정본이다 — CSS 가
+	* `max(--splitter-size, --splitter-hit-size)` 로 정하고 `rem` 등 어떤 단위든 올 수 있다.
+	* 아직 렌더되지 않았거나 숨겨져 0 이면 두 변수를 읽어 같은 규칙을 흉내 낸다.
+	*/
 	get splitterSize() {
-		const sizeStr = getComputedStyle(this).getPropertyValue("--splitter-size").trim();
-		return parseFloat(sizeStr) || 4;
+		const el = this.renderRoot?.querySelector(".splitter");
+		if (el) {
+			const r = el.getBoundingClientRect();
+			const measured = this.orientation === "horizontal" ? r.width : r.height;
+			if (measured > 0) return measured;
+		}
+		const style = getComputedStyle(this);
+		const read = (name, fallback) => parseFloat(style.getPropertyValue(name).trim()) || fallback;
+		return Math.max(read("--splitter-size", 4), read("--splitter-hit-size", 24));
 	}
 	get splitterCount() {
 		return Math.max(0, this.panels.length - 1);
@@ -165,6 +229,7 @@ var USplitPanel = class USplitPanel extends UElement {
 			"defaultRatio",
 			"ratio"
 		].some((k) => changedProperties.has(k))) this.updatePanelLayout();
+		else if (changedProperties.has("disabled")) this.syncSplitterAria();
 	}
 	render() {
 		return html`
@@ -185,6 +250,7 @@ var USplitPanel = class USplitPanel extends UElement {
 			const splitter = this.createSplitter(i);
 			root.insertBefore(splitter, ref);
 		}
+		this.syncSplitterAria();
 	}
 	createSplitter(index) {
 		const el = document.createElement("div");
@@ -193,24 +259,67 @@ var USplitPanel = class USplitPanel extends UElement {
 		el.style.order = String(index * 2 + 1);
 		el.dataset.index = String(index);
 		if (this.splitter) el.appendChild(this.splitter.cloneNode(true));
+		el.setAttribute("role", "separator");
 		el.addEventListener("pointerdown", this.handlePointerDown);
 		el.addEventListener("dblclick", this.handleDblClick);
+		el.addEventListener("keydown", this.handleKeyDown);
 		return el;
 	}
+	/**
+	* 분할 핸들의 접근성 상태 — APG «Window Splitter». 핸들은 명령형으로 만들어 Lit 템플릿 밖에
+	* 있으므로, 비율·방향·비활성이 바뀔 때마다 여기서 다시 쓴다.
+	*
+	* 값은 **앞 패널(primary pane)의 몫**이다. 패널이 셋 이상이면 한 핸들은 이웃한 두 패널 사이만
+	* 옮기므로 최대값은 100 이 아니라 그 두 패널의 몫의 합이다.
+	*/
+	syncSplitterAria() {
+		const root = this.renderRoot;
+		if (!root) return;
+		const p = this.percentages;
+		const round = (v) => String(Math.round(v * 10) / 10);
+		const label = Locale.getValue("resizePanels");
+		root.querySelectorAll(".splitter").forEach((el) => {
+			const i = Number(el.dataset.index);
+			el.setAttribute("aria-valuenow", round(p[i] ?? 0));
+			el.setAttribute("aria-valuemin", "0");
+			el.setAttribute("aria-valuemax", round((p[i] ?? 0) + (p[i + 1] ?? 0)));
+			el.setAttribute("aria-orientation", this.orientation === "horizontal" ? "vertical" : "horizontal");
+			el.setAttribute("aria-label", label);
+			el.tabIndex = this.disabled ? -1 : 0;
+			if (this.disabled) el.setAttribute("aria-disabled", "true");
+			else el.removeAttribute("aria-disabled");
+			const reflect = el;
+			if ("ariaControlsElements" in reflect && this.panels[i]) reflect.ariaControlsElements = [this.panels[i]];
+		});
+	}
+	static {
+		this.KEY_STEP = 5;
+	}
 	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[dim] = this.panelSize(percentages[index]);
 			panel.style[otherDim] = "";
 			panel.style.order = String(index * 2);
 			panel.style.boxSizing = "border-box";
 			panel.style.flexShrink = "0";
 			panel.style.overflow = "auto";
 		});
+		this.syncSplitterAria();
+	}
+	/**
+	* 패널 하나의 크기 — 비율은 «핸들을 뺀 나머지 공간»에 대한 몫이다.
+	*
+	* 🔴각 패널은 핸들 전체 두께 중 **자기 비율만큼**을 뺀다. 종전에는 핸들 몫을 패널 수로 똑같이
+	* 나눠 뺐는데(`p% - 핸들합/n`), 그 식은 비율이 균등할 때만 «나머지 공간의 p%» 와 같다. 드래그는
+	* 이동량을 나머지 공간 기준 비율로 바꾸므로(`availableSize`), 비율이 균등에서 멀어질수록 패널이
+	* 포인터보다 더 움직였다 — 핸들이 굵을수록 크게(24px 핸들이면 이동량의 약 9%).
+	*/
+	panelSize(percent) {
+		return `calc(${percent}% - ${this.splitterSize * this.splitterCount * percent / 100}px)`;
 	}
 	clampPair(aRaw, bRaw) {
 		const sum = aRaw + bRaw;
@@ -249,6 +358,6 @@ __decorate([property({
 	converter: arrayAttrConverter(parseFloat)
 }), __decorateMetadata("design:type", Array)], USplitPanel.prototype, "ratio", void 0);
 __decorate([query(".splitter-ghost"), __decorateMetadata("design:type", typeof HTMLElement === "undefined" ? Object : HTMLElement)], USplitPanel.prototype, "ghost", void 0);
-USplitPanel = __decorate([customElement("u-split-panel")], USplitPanel);
+USplitPanel = _USplitPanel = __decorate([customElement("u-split-panel")], USplitPanel);
 //#endregion
 export { USplitPanel };

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

@@ -3,9 +3,15 @@ import { css } from "lit";
 var styles = css`
   :host {
     --splitter-size: 4px;
+    --splitter-hit-size: 24px;
     --splitter-color: var(--u-neutral-200, #EEEEEE);
     --splitter-color-hover: var(--u-primary-color-weaker, #64B5F6);
     --splitter-color-active: var(--u-primary-color-strong, #1565C0);
+
+    /* The handle's box: the larger of the visible line and the pointer area. It takes real
+       layout space, so it never overlaps a panel — each panel is a scroll container and its
+       scrollbar sits right against the handle. */
+    --_splitter-box: max(var(--splitter-size), var(--splitter-hit-size));
   }
 
   :host {
@@ -27,7 +33,7 @@ var styles = css`
     opacity: 0.4;
   }
 
-  /* Splitter */
+  /* Splitter — the box receives the pointer; the line inside it is what you see */
   .splitter {
     position: relative;
     z-index: 1;
@@ -35,24 +41,46 @@ var styles = css`
     display: flex;
     align-items: center;
     justify-content: center;
+    touch-action: none;
+  }
+  .splitter::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
     background-color: var(--splitter-color);
     transition: background-color var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
-    touch-action: none;
+    pointer-events: none;
   }
-  .splitter:hover {
+  .splitter:hover::before {
     background-color: var(--splitter-color-hover);
   }
-  .splitter:active {
+  .splitter:active::before,
+  .splitter:focus-visible::before {
     background-color: var(--splitter-color-active);
   }
+  /* The handle spans the host's full cross axis and the host clips overflow, so the base
+     focus ring (drawn 2px outside) would lose two of its sides. Draw it inside the box. */
+  .splitter:focus-visible {
+    outline-offset: -2px;
+  }
   :host([orientation="horizontal"]) .splitter {
-    width: var(--splitter-size);
+    width: var(--_splitter-box);
     cursor: col-resize;
   }
+  :host([orientation="horizontal"]) .splitter::before {
+    inset-block: 0;
+    left: calc(50% - var(--splitter-size) / 2);
+    width: var(--splitter-size);
+  }
   :host([orientation="vertical"]) .splitter {
-    height: var(--splitter-size);
+    height: var(--_splitter-box);
     cursor: row-resize;
   }
+  :host([orientation="vertical"]) .splitter::before {
+    inset-inline: 0;
+    top: calc(50% - var(--splitter-size) / 2);
+    height: var(--splitter-size);
+  }
 
   /* Ghost Splitter (lazy) */
   .splitter-ghost {
@@ -66,15 +94,18 @@ var styles = css`
   .splitter-ghost[active] {
     display: block;
   }
+  /* The ghost is placed at the box's leading edge; the margin centres it on the line. */
   :host([orientation="horizontal"]) .splitter-ghost {
     top: 0;
     width: var(--splitter-size);
     height: 100%;
+    margin-left: calc((var(--_splitter-box) - var(--splitter-size)) / 2);
   }
   :host([orientation="vertical"]) .splitter-ghost {
     left: 0;
     width: 100%;
     height: var(--splitter-size);
+    margin-top: calc((var(--_splitter-box) - var(--splitter-size)) / 2);
   }
 `;
 //#endregion

package/dist/components/switch/USwitch.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import { Locale } from "../../utilities/Locale.js";
 import { styles } from "./USwitch.styles.js";

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

@@ -21,6 +21,11 @@ var styles = css`
   :host {
     display: inline-flex;
     flex-direction: column;
+    /* WCAG 2.2 SC 2.5.8 — 트랙(--switch-track-height)의 시각 치수는 그대로 두고
+       포인터 타깃만 24px 하한을 갖는다. UCheckbox 와 같은 처방이다.
+       ⚠이 주석에 백틱을 쓰면 css 템플릿이 그 자리에서 끝난다(sweep 의 「css 백틱」). */
+    min-block-size: 24px;
+    justify-content: center;
     color: var(--u-txt-color, #212121);
     font-size: inherit;
     font-family: var(--u-font-base);
@@ -108,7 +113,7 @@ var styles = css`
   .track-unchecked {
     opacity: 1;
     right: var(--switch-thumb-offset);
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
   }
   :host([checked]) .track-unchecked {
     opacity: 0;
@@ -166,7 +171,7 @@ var styles = css`
   .thumb-unchecked {
     opacity: 1;
     transform: scale(1) rotate(0deg);
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
   }
   :host([checked]) .thumb-unchecked {
     opacity: 0;
@@ -185,7 +190,7 @@ var styles = css`
 
   .description {
     margin-top: 0.5em;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
     font-size: 0.75em;
     line-height: 1.3;
   }

package/dist/components/tab/UTab.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import "../button/UButton.js";
 import "../icon/UIcon.js";
 import { styles } from "./UTab.styles.js";

package/dist/components/tab/UTab.styles.js

@@ -7,7 +7,7 @@ var styles = css`
     display: inline-flex;
     font-size: 0.9em;
     font-weight: 500;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
     white-space: nowrap;
     user-select: none;
     cursor: pointer;

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

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UPanel } from "../panel/UPanel.js";
 import { UTab } from "../tab/UTab.js";
 import { styles } from "./UTabPanel.styles.js";
@@ -45,7 +45,7 @@ var UTabPanel = class UTabPanel extends UElement {
 			const enabledTabs = this.tabs.filter((t) => !t.disabled);
 			const currentIndex = enabledTabs.indexOf(e.currentTarget);
 			if (currentIndex === -1) return;
-			let targetIndex = -1;
+			let targetIndex;
 			switch (e.key) {
 				case this.isVertical ? "ArrowDown" : "ArrowRight":
 					targetIndex = (currentIndex + 1) % enabledTabs.length;

package/dist/components/tag/UTag.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import "../icon/UIcon.js";
 import { statusIcon } from "../../utilities/statusIcon.js";
 import { styles } from "./UTag.styles.js";

package/dist/components/text/UText.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { styles } from "./UText.styles.js";
 import { customElement, property } from "lit/decorators.js";
 import { html, literal } from "lit/static-html.js";

package/dist/components/text/UText.styles.js

@@ -76,7 +76,7 @@ var styles = css`
    * 콜아웃 박스라 u-text 의 문제가 아니었다.
    */
   :host([tone="weak"]) {
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
   }
 
   :host([tone="strong"]) {

package/dist/components/textarea/UTextarea.d.ts

@@ -11,6 +11,11 @@ type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both' | 'auto';
  * @csspart textarea - 실제 텍스트에어리어 요소
  * @csspart counter - 글자 수 표시 영역
  *
+ * @cssprop --u-textarea-display - 호스트의 display (기본값: inline-block). 폼/그리드 셀에서
+ *   컨테이너 폭을 채우려면 `block`으로 지정한다.
+ * @cssprop --u-textarea-width - 호스트의 width (기본값: auto). flex 컨테이너처럼 block만으로는
+ *   늘어나지 않는 맥락에서 `100%`로 지정한다.
+ *
  * @event input - 입력값이 변경될 때 발생
  * @event change - 값이 확정됐을 때 발생
  */

package/dist/components/textarea/UTextarea.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import { Locale } from "../../utilities/Locale.js";
 import "../field/UField.js";

package/dist/components/textarea/UTextarea.styles.js

@@ -2,7 +2,10 @@ import { css } from "lit";
 //#region src/components/textarea/UTextarea.styles.ts
 var styles = css`
   :host {
-    display: inline-block;
+    /* 폼/그리드 셀에서 컨테이너 폭을 채우려면 소비자가 --u-textarea-display: block 을 준다.
+       flex 컨테이너처럼 block 만으로 늘어나지 않는 맥락을 위해 width 경로도 함께 연다. */
+    display: var(--u-textarea-display, inline-block);
+    width: var(--u-textarea-width, auto);
     color: var(--u-txt-color, #212121);
     font-size: inherit;
     font-family: var(--u-font-base);
@@ -117,7 +120,7 @@ var styles = css`
     word-wrap: break-word;
   }
   textarea::placeholder {
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
   }
   textarea:disabled {
     cursor: not-allowed;
@@ -155,7 +158,7 @@ var styles = css`
   .counter {
     margin-top: 0.25em;
     text-align: right;
-    color: var(--u-txt-color-weak, #757575);
+    color: var(--u-txt-color-weak, #616161);
     font-size: 0.75em;
     line-height: 1.2;
   }

package/dist/components/tooltip/UTooltip.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UFloatingElement } from "../UFloatingElement.js";
 import { styles } from "./UTooltip.styles.js";
 import { html } from "lit";

package/dist/components/tree/UTree.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UTreeItem } from "../tree-item/UTreeItem.js";
 import { styles } from "./UTree.styles.js";
 import { html } from "lit";

package/dist/components/tree-item/UTreeItem.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import "../spinner/USpinner.js";
 import "../icon/UIcon.js";
 import { styles } from "./UTreeItem.styles.js";