@iyulab/components 1.22.0 → 1.24.0

package/dist/components/expander/UExpander.styles.js

@@ -0,0 +1,95 @@
+import { css } from "lit";
+//#region src/components/expander/UExpander.styles.ts
+var styles = css`
+  :host {
+    display: block;
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+
+  /* ⚠테두리·면은 :host 가 아니라 내부 래퍼가 그린다 — :host 에 두면 소비 앱의 CSS
+     리셋(* { border: 0 })이 «에러 없이» 지운다(Tailwind preflight 가 가장 흔한 경우다).
+     이 리포는 그 결함을 9개 컴포넌트에서 이미 걷어냈고 회귀 테스트가 목록을 0 으로 잠근다
+     — tests/build/host-layout-reset.test.ts */
+  .frame {
+    border: 1px solid var(--u-border-color, #E0E0E0);
+    border-radius: var(--u-radius-md, 4px);
+    background-color: var(--u-bg-color, #FFFFFF);
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
+    border: none;
+    border-radius: inherit;
+    background: none;
+    color: var(--u-txt-color, #212121);
+    font: inherit;
+    font-size: var(--u-text-body-size, 14px);
+    font-weight: var(--u-text-subtitle-weight, 600);
+    text-align: start;
+    cursor: pointer;
+  }
+  .header:disabled {
+    cursor: default;
+  }
+  .header:focus-visible {
+    outline: 2px solid var(--u-primary-color-strong, #1565C0);
+    outline-offset: -2px;
+  }
+
+  .icon {
+    flex: none;
+    color: var(--u-txt-color-weak, #757575);
+    transition: transform var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+  :host([open]) .icon {
+    transform: rotate(90deg);
+  }
+
+  .label {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /* 높이 애니메이션은 grid 트랙(0fr ↔ 1fr)으로 한다 — 콘텐츠 높이를 JS 로 재지 않는다.
+     ⚠전환을 지원하지 않는 엔진에서는 «즉시» 열리고 닫힐 뿐 접힘 자체는 성립한다
+     (0fr 은 그 엔진에서도 유효한 트랙 크기다).
+     ★visibility 를 함께 옮기는 것이 요점이다 — overflow: hidden 만으로는 접힌 콘텐츠가
+     여전히 접근성 트리와 탭 순서에 남는다. */
+  .content {
+    display: grid;
+    grid-template-rows: 0fr;
+    visibility: hidden;
+    transition:
+      grid-template-rows var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)),
+      visibility var(--u-duration-normal, 220ms);
+  }
+  :host([open]) .content {
+    grid-template-rows: 1fr;
+    visibility: visible;
+  }
+  .inner {
+    overflow: hidden;
+  }
+  .body {
+    padding: 0 var(--u-space-md, 12px) var(--u-space-md, 12px);
+  }
+
+  /* 이 전환은 «장식»이다 — 접힘/펼침의 결과는 정지 상태에서도 그대로 읽힌다.
+     ⚠시트의 reduce 규칙(지속시간 축 0)에 기대지 않고 여기서도 누른다: 소비자가 토큰
+     시트를 로드하지 않으면 use-site 폴백 리터럴이 살아남아 그 규칙이 닿지 못한다. */
+  @media (prefers-reduced-motion: reduce) {
+    .icon,
+    .content {
+      transition-duration: 0s;
+    }
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/field/UField.styles.js

@@ -15,6 +15,21 @@ var styles = css`
     color: var(--u-danger-color-strong, #C62828);
   }
 
+  /* 🔴**라벨을 단 컨트롤은 필드 폭을 채운다.**
+     컨트롤 자신의 기본값은 inline-block(자기 내용만큼)이 옳다 — 문장 안에 놓이는 경우가
+     있기 때문이다. 그러나 u-field 로 감싼 순간 그것은 **폼의 한 칸**이고, 칸마다 컨트롤이
+     제각각의 폭을 가지면 격자가 너덜너덜해진다. 실측: 같은 231px 칸 안에서 input 202 ·
+     select 71/92/108 · textarea 168 — **오른쪽 끝이 다섯 군데에서 다 달랐다.**
+     ⇒ 라벨·설명·검증 문구의 배치를 책임지는 이 컴포넌트가 폭도 함께 정한다.
+
+     ⚠소비자가 인라인 style 로 폭을 주면 그쪽이 이긴다(인라인 > ::slotted).
+     ⚠이 주석에 백틱을 쓰지 말 것 — css 태그드 템플릿을 그 자리에서 끝낸다(이 파일이 실제로
+     그렇게 깨졌고, cycle-217 이 만든 타입 게이트가 잡았다). */
+  ::slotted(*) {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
   .header {
     display: flex;
     flex-direction: row;

package/dist/components/icon/UIcon.d.ts

@@ -1,4 +1,3 @@
-import { nothing } from 'lit';
 import { UElement } from '../UElement.js';
 export type IconLibrary = (string & {}) | "internal" | "tabler" | "heroicons" | "lucide" | "bootstrap";
 /**
@@ -14,9 +13,23 @@ export declare class UIcon extends UElement {
     lib?: IconLibrary;
     /** 사용할 아이콘 이름을 지정합니다. */
     name?: string;
-    render(): import('lit-html/directive.js').DirectiveResult<{
-        new (_partInfo: import('lit-html/directive.js').PartInfo): import('lit-html/directives/until.js').UntilDirective<typeof nothing | Promise<import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/unsafe-html.js').UnsafeHTMLDirective>>>;
-    }>;
+    /**
+     * 이름·URL 이 **해석되지 않을 때** 대신 그릴 SVG 원문.
+     *
+     * ★**«아이콘이 안 보인다»가 «자리 자체가 사라진다»가 되는 곳이 있다.** 사이드바가 접히면
+     * 라벨이 숨고 아이콘만 남는데, 그 아이콘이 해석에 실패하면 그 메뉴는 **누를 것이 없는
+     * 빈 줄**이 된다 — 이름이 잘못됐는지, 파일이 없는지, 아이콘을 안 준 것인지 화면에서
+     * 구분되지 않고 **탐색 수단이 통째로 사라진다.**
+     *
+     * ⇒ 그런 자리는 «없으면 안 그린다»가 아니라 **«없으면 대신 그린다»** 여야 한다.
+     * 해석 실패는 `name` 미지정 · 파일 없음(404) · SVG 파싱 실패를 **모두** 포함한다.
+     *
+     * ⚠소비자가 주는 값은 `sanitize()` 를 거친다(`name` 경로와 같은 처리).
+     */
+    fallback?: string;
+    render(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/unsafe-html.js').UnsafeHTMLDirective>;
+    /** 해석 결과가 없으면 `fallback` 으로 대신한다. 둘 다 없을 때만 아무것도 그리지 않는다. */
+    private paint;
     private resolve;
     private sanitize;
 }

package/dist/components/icon/UIcon.js

@@ -14,13 +14,15 @@ var UIcon = class UIcon extends UElement {
 	}
 	render() {
 		if (this.src) return until(IconRegistry.resolveUrl(this.src).then((html) => {
-			const sanitized = this.sanitize(html);
-			return sanitized ? unsafeHTML(sanitized) : nothing;
+			return this.paint(this.sanitize(html));
 		}), nothing);
-		if (this.name) return until(this.resolve(this.name).then((html) => {
-			return html ? unsafeHTML(html) : nothing;
-		}), nothing);
-		return nothing;
+		if (this.name) return until(this.resolve(this.name).then((html) => this.paint(html)), nothing);
+		return this.paint(void 0);
+	}
+	/** 해석 결과가 없으면 `fallback` 으로 대신한다. 둘 다 없을 때만 아무것도 그리지 않는다. */
+	paint(html) {
+		const resolved = html ?? this.sanitize(this.fallback);
+		return resolved ? unsafeHTML(resolved) : nothing;
 	}
 	async resolve(name) {
 		let html = void 0;
@@ -50,6 +52,7 @@ var UIcon = class UIcon extends UElement {
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UIcon.prototype, "src", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UIcon.prototype, "lib", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UIcon.prototype, "name", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UIcon.prototype, "fallback", void 0);
 UIcon = __decorate([customElement("u-icon")], UIcon);
 //#endregion
 export { UIcon };

package/dist/components/panel/UPanel.d.ts

@@ -9,8 +9,6 @@ export declare class UPanel extends UElement {
     static styles: import('lit').CSSResultGroup[];
     /** 패널 비활성화 여부 */
     disabled: boolean;
-    /** 패널 접기 가능 여부 */
-    collapsible: boolean;
     /** 패널 고유값 (매칭 시 사용) */
     value: string;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/panel/UPanel.js

@@ -9,7 +9,6 @@ var UPanel = class UPanel extends UElement {
 	constructor(..._args) {
 		super(..._args);
 		this.disabled = false;
-		this.collapsible = false;
 		this.value = "";
 	}
 	static {
@@ -23,10 +22,6 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 }), __decorateMetadata("design:type", Object)], UPanel.prototype, "disabled", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-}), __decorateMetadata("design:type", Object)], UPanel.prototype, "collapsible", void 0);
 __decorate([property({
 	type: String,
 	reflect: true

package/dist/components/skeleton/USkeleton.d.ts

@@ -22,6 +22,13 @@ export declare class USkeleton extends UElement {
     width?: string;
     /** 높이 (CSS 값) */
     height?: string;
+    /**
+     * 여러 줄 자리표시자로 그릴 줄 수. **2 이상일 때만** 호스트가 «막대들의 통»이 되고,
+     * 마지막 줄은 짧게(`--skeleton-last-line-width`, 기본 60%) 그린다 — 문단의 끝을 그렇게 읽는다.
+     *
+     * ⚠**단일 막대(기본)의 모양은 바꾸지 않는다** — 이 속성이 없으면 종전과 완전히 같다.
+     */
+    lines?: number;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
 }

package/dist/components/skeleton/USkeleton.js

@@ -20,7 +20,9 @@ var USkeleton = class USkeleton extends UElement {
 		if (changedProperties.has("height") && this.height) this.style.setProperty("--skeleton-height", this.height);
 	}
 	render() {
-		return html`<slot></slot>`;
+		const n = this.lines ?? 0;
+		if (n < 2) return html`<slot></slot>`;
+		return html`${Array.from({ length: n }, () => html`<span class="line" part="line"></span>`)}`;
 	}
 };
 __decorate([property({
@@ -33,6 +35,10 @@ __decorate([property({
 }), __decorateMetadata("design:type", Object)], USkeleton.prototype, "effect", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], USkeleton.prototype, "width", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], USkeleton.prototype, "height", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+}), __decorateMetadata("design:type", Number)], USkeleton.prototype, "lines", void 0);
 USkeleton = __decorate([customElement("u-skeleton")], USkeleton);
 //#endregion
 export { USkeleton };

package/dist/components/skeleton/USkeleton.styles.js

@@ -52,6 +52,70 @@ var styles = css`
     transform: translateX(-100%);
   }
 
+  /* === 여러 줄(lines) ===
+     기본(단일 막대)에서는 :host 자신이 막대다 — 그 모양을 바꾸지 않는다. lines 가 붙었을
+     때만 호스트가 «막대들의 통»이 되고, 색·모양·효과는 각 .line 이 받는다.
+     ⚠마지막 줄을 짧게 만드는 것은 장식이 아니라 신호다 — 문단의 끝을 그렇게 읽는다. */
+  :host([lines]) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skeleton-line-gap, 0.5em);
+    height: auto;
+    background-color: transparent;
+    animation: none;
+    overflow: visible;
+  }
+  :host([lines])::after {
+    content: none;
+  }
+  :host([lines]) .line {
+    height: var(--skeleton-height);
+    background-color: var(--skeleton-color);
+    border-radius: inherit;
+  }
+  :host([lines]) .line:last-child {
+    width: var(--skeleton-last-line-width, 60%);
+  }
+  :host([lines][effect="pulse"]) .line {
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+  :host([lines][effect="shimmer"]) .line {
+    position: relative;
+    overflow: hidden;
+  }
+  :host([lines][effect="shimmer"]) .line::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--skeleton-shimmer-color),
+      transparent
+    );
+    animation: shimmer 1.5s infinite;
+    transform: translateX(-100%);
+  }
+
+  /* ★**장식만 멈춘다.**
+     시트의 reduce 규칙은 지속시간 축(--u-duration-*)을 0 으로 누르는 방식이라 animation
+     속성을 직접 쓰는 이 자리에는 닿지 않는다 — 그 규칙이 animation: none 으로 강제하지
+     않는 것은 의도다(로딩 스피너처럼 «회전 자체가 신호»인 움직임까지 죽이면 진행 여부를
+     알 수 없다).
+
+     스켈레톤은 다르다: **기본값이 이미 animation: none** 이고, 정지한 회색 블록이
+     «로딩 중»을 그대로 나른다. 즉 pulse/shimmer 는 **opt-in 장식**이고, WCAG 2.2.2 의
+     «움직임이 본질인 것» 예외에 해당하지 않는다.
+     ⇒ 여기서만 멈춘다. u-spinner 는 건드리지 않는다. */
+  @media (prefers-reduced-motion: reduce) {
+    :host([effect="pulse"]),
+    :host([effect="shimmer"])::after,
+    :host([lines][effect="pulse"]) .line,
+    :host([lines][effect="shimmer"]) .line::after {
+      animation: none;
+    }
+  }
+
   @keyframes pulse {
     0%, 100% {
       opacity: 1;

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

@@ -29,8 +29,10 @@ export declare class UTabPanel extends UElement {
     placement: TabPanelPlacement;
     /** 선택된 탭값 */
     value: string;
-    /** 탭 추가/삭제 가능 여부 */
-    editable: boolean;
+    /**
+     * 네이티브 전역 속성. ⚠**이 컴포넌트에 탭 재정렬 기능은 없다** — 브라우저의 드래그를
+     * 켤 뿐이고, 놓았을 때 순서를 바꾸는 코드는 존재한 적이 없다.
+     */
     draggable: boolean;
     private tabs;
     private panels;

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

@@ -14,7 +14,6 @@ var UTabPanel = class UTabPanel extends UElement {
 		this.variant = "line";
 		this.placement = "top";
 		this.value = "";
-		this.editable = false;
 		this.draggable = false;
 		this.tabs = [];
 		this.panels = [];
@@ -144,10 +143,6 @@ __decorate([property({
 	type: String,
 	reflect: true
 }), __decorateMetadata("design:type", Object)], UTabPanel.prototype, "value", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-}), __decorateMetadata("design:type", Object)], UTabPanel.prototype, "editable", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true

package/dist/components/tag/UTag.d.ts

@@ -14,6 +14,7 @@ export type TagColor = "neutral" | "primary" | "info" | "success" | "warning" |
  * @slot suffix - 태그 뒤에 표시할 콘텐츠
  *
  * @csspart content - 콘텐츠 영역
+ * @csspart icon - 상태 아이콘 (`icon` + 역할 색일 때만 렌더된다)
  *
  * @cssprop --tag-color - 텍스트 색상
  * @cssprop --tag-bg-color - 배경 색상
@@ -31,6 +32,12 @@ export declare class UTag extends UElement {
     color: TagColor;
     /** 태그를 둥글게 표시합니다. */
     rounded: boolean;
+    /**
+     * 상태를 **색과 무관하게** 나르는 아이콘을 붙입니다(`info`·`success`·`warning`·`danger`).
+     * 색각 이상·흑백 인쇄에서 상태가 갈리게 하는 축입니다.
+     * 의미가 없는 색(`neutral`·`primary`·장식 축)에서는 아무것도 그리지 않습니다.
+     */
+    icon: boolean;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/components/tag/UTag.js

@@ -1,8 +1,10 @@
 import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
+import "../icon/UIcon.js";
+import { statusIcon } from "../../utilities/statusIcon.js";
 import { styles } from "./UTag.styles.js";
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 //#region src/components/tag/UTag.ts
 var UTag = class UTag extends UElement {
@@ -11,13 +13,16 @@ var UTag = class UTag extends UElement {
 		this.variant = "filled";
 		this.color = "neutral";
 		this.rounded = false;
+		this.icon = false;
 	}
 	static {
 		this.styles = [super.styles, styles];
 	}
 	render() {
+		const iconName = this.icon ? statusIcon(this.color) : void 0;
 		return html`
       <div class="base" part="base">
+        ${iconName ? html`<u-icon class="icon" part="icon" lib="internal" name=${iconName}></u-icon>` : nothing}
         <slot name="prefix"></slot>
         <span class="content" part="content">
           <slot></slot>
@@ -39,6 +44,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 }), __decorateMetadata("design:type", Object)], UTag.prototype, "rounded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTag.prototype, "icon", void 0);
 UTag = __decorate([customElement("u-tag")], UTag);
 //#endregion
 export { UTag };

package/dist/components/tag/UTag.styles.js

@@ -189,6 +189,10 @@ var styles = css`
     border: 1px solid var(--tag-border-color);
     border-radius: inherit;
   }
+  /* 상태 아이콘 — .base 의 gap 이 간격을 정한다. */
+  .icon {
+    flex-shrink: 0;
+  }
   :host([rounded]) {
     border-radius: var(--u-radius-pill, 9999px);
   }

package/dist/components/text/UText.d.ts

@@ -0,0 +1,38 @@
+import { UElement } from '../UElement.js';
+export type TextVariant = "display" | "title" | "subtitle" | "body" | "label" | "caption" | "overline";
+/** 중립 강조 축. **역할색이 아니다** — 역할색이 필요하면 그것은 별도 축이다. */
+export type TextTone = "default" | "weak" | "strong" | "inverse";
+/** 제목 단계. 값이 있으면 heading 으로 읽힌다. */
+export type TextLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * 의미 타이포그래피 스케일(7단)을 마크업에서 쓰는 자리입니다.
+ *
+ * 시트는 단마다 **크기·굵기·행간·자간** 네 값을 갖고 있으나, 그 단을 *적용하는* 것이
+ * 없어 소비자는 자기 CSS 에서 타이포 토큰을 직접 참조해야 했습니다.
+ * 이 컴포넌트는 그 자리를 대신하며, **값을 새로 정의하지 않고 토큰만 읽습니다.**
+ *
+ * `level` 을 주면 섀도 루트에 실제 `<h1>`~`<h6>` 을 렌더하므로 heading 으로 읽힙니다
+ * (슬롯 텍스트가 접근가능 이름이 됩니다). 주지 않으면 `<p>` 입니다.
+ *
+ * ⚠ 시각 축(`variant`)과 의미 축(`level`)은 **독립**입니다 — 페이지의 두 번째 제목이
+ * 시각적으로 가장 클 수 있습니다(`level="2" variant="display"`).
+ *
+ * @slot - 텍스트 내용
+ *
+ * @csspart base - 렌더된 `<p>` 또는 `<h1>`~`<h6>` 요소
+ */
+export declare class UText extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 의미 타이포그래피 단계 */
+    variant: TextVariant;
+    /** 중립 강조 축 (역할색이 아니다) */
+    tone: TextTone;
+    /** 제목 단계. 지정하면 heading 요소로 렌더된다 */
+    level?: TextLevel;
+    protected render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-text': UText;
+    }
+}

package/dist/components/text/UText.js

@@ -0,0 +1,45 @@
+import { UElement } from "../UElement.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.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";
+//#region src/components/text/UText.ts
+var PARAGRAPH = literal`p`;
+var HEADINGS = {
+	1: literal`h1`,
+	2: literal`h2`,
+	3: literal`h3`,
+	4: literal`h4`,
+	5: literal`h5`,
+	6: literal`h6`
+};
+var UText = class UText extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "body";
+		this.tone = "default";
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		const tag = this.level && HEADINGS[this.level] ? HEADINGS[this.level] : PARAGRAPH;
+		return html`<${tag} class="text" part="base"><slot></slot></${tag}>`;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UText.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UText.prototype, "tone", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UText.prototype, "level", void 0);
+UText = __decorate([customElement("u-text")], UText);
+//#endregion
+export { UText };

package/dist/components/text/UText.styles.d.ts

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

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

@@ -0,0 +1,91 @@
+import { css } from "lit";
+//#region src/components/text/UText.styles.ts
+var styles = css`
+  :host {
+    display: block;
+    color: var(--u-txt-color, #212121);
+  }
+
+  /*
+   * 기본은 body 다. :host([variant="body"]) 규칙을 따로 두지 않는 이유는
+   * 값이 같기 때문이며, 부수 효과로 **알 수 없는 variant 가 body 로 흐른다**
+   * (조용히 폰트가 사라지는 것보다 낫다).
+   */
+  .text {
+    margin: 0;
+    font-family: inherit;
+    font-size: var(--u-text-body-size, 14px);
+    font-weight: var(--u-text-body-weight, 400);
+    line-height: var(--u-text-body-leading, 1.6);
+    letter-spacing: var(--u-text-body-tracking, 0);
+  }
+
+  :host([variant="display"]) .text {
+    font-size: var(--u-text-display-size, 26px);
+    font-weight: var(--u-text-display-weight, 700);
+    line-height: var(--u-text-display-leading, 1.4);
+    letter-spacing: var(--u-text-display-tracking, -0.02em);
+  }
+
+  :host([variant="title"]) .text {
+    font-size: var(--u-text-title-size, 20px);
+    font-weight: var(--u-text-title-weight, 700);
+    line-height: var(--u-text-title-leading, 1.45);
+    letter-spacing: var(--u-text-title-tracking, -0.01em);
+  }
+
+  :host([variant="subtitle"]) .text {
+    font-size: var(--u-text-subtitle-size, 16px);
+    font-weight: var(--u-text-subtitle-weight, 600);
+    line-height: var(--u-text-subtitle-leading, 1.5);
+    letter-spacing: var(--u-text-subtitle-tracking, 0);
+  }
+
+  :host([variant="label"]) .text {
+    font-size: var(--u-text-label-size, 13px);
+    font-weight: var(--u-text-label-weight, 600);
+    line-height: var(--u-text-label-leading, 1.5);
+    letter-spacing: var(--u-text-label-tracking, 0);
+  }
+
+  :host([variant="caption"]) .text {
+    font-size: var(--u-text-caption-size, 12px);
+    font-weight: var(--u-text-caption-weight, 400);
+    line-height: var(--u-text-caption-leading, 1.5);
+    letter-spacing: var(--u-text-caption-tracking, 0);
+  }
+
+  /*
+   * ⚠ overline 에 text-transform: uppercase 를 붙이지 않는다.
+   *
+   * 눈썹 텍스트의 관습이긴 하나 ⑴시트가 정의하는 것은 네 속성뿐이라 다섯 번째를 여기서
+   * 정하면 이 컴포넌트가 «두 번째 정의처»가 되고 ⑵소비자가 쓴 글자를 조용히 바꾸며
+   * ⑶CJK 에는 아무 효과가 없어 **같은 단이 언어에 따라 다르게 보인다.**
+   * 대문자가 필요한 자리는 그 자리가 정한다.
+   */
+  :host([variant="overline"]) .text {
+    font-size: var(--u-text-overline-size, 11px);
+    font-weight: var(--u-text-overline-weight, 700);
+    line-height: var(--u-text-overline-leading, 1.45);
+    letter-spacing: var(--u-text-overline-tracking, 0.06em);
+  }
+
+  /*
+   * tone 은 **중립 강조 축**이다 — 역할색(info/success/danger…)이 아니다.
+   * 소비앱 실측에서 나온 색 다섯 중 셋이 이 축이었고, 나머지 둘은 링크와
+   * 콜아웃 박스라 u-text 의 문제가 아니었다.
+   */
+  :host([tone="weak"]) {
+    color: var(--u-txt-color-weak, #757575);
+  }
+
+  :host([tone="strong"]) {
+    color: var(--u-txt-color-strong, #000000);
+  }
+
+  :host([tone="inverse"]) {
+    color: var(--u-txt-color-inverse, #FFFFFF);
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/tree/UTree.d.ts

@@ -34,9 +34,11 @@ export declare class UTree extends UElement {
     checkCascade: boolean;
     /** 트리 펼치기 트리거 방식 */
     trigger: TreeItemTrigger;
-    /** 드래그 앤드 드롭 지원 */
+    /**
+     * 네이티브 전역 속성. ⚠**이 컴포넌트에 드래그 앤드 드롭 구현은 없다** — 브라우저의
+     * 드래그를 켤 뿐이고, 드롭을 받아 트리를 재배치하는 코드는 존재한 적이 없다.
+     */
     draggable: boolean;
-    droppable: boolean;
     private expandIcon?;
     private collapseIcon?;
     private anchor;

package/dist/components/tree/UTree.js

@@ -16,7 +16,6 @@ var UTree = class UTree extends UElement {
 		this.checkCascade = false;
 		this.trigger = "item";
 		this.draggable = false;
-		this.droppable = false;
 		this.anchor = null;
 		this._items = [];
 		this.handleSlotChange = (e) => {
@@ -300,10 +299,6 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 }), __decorateMetadata("design:type", Boolean)], UTree.prototype, "draggable", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-}), __decorateMetadata("design:type", Boolean)], UTree.prototype, "droppable", void 0);
 __decorate([state(), __decorateMetadata("design:type", typeof Node === "undefined" ? Object : Node)], UTree.prototype, "expandIcon", void 0);
 __decorate([state(), __decorateMetadata("design:type", typeof Node === "undefined" ? Object : Node)], UTree.prototype, "collapseIcon", void 0);
 UTree = __decorate([customElement("u-tree")], UTree);

package/dist/components/tree-item/UTreeItem.d.ts

@@ -35,8 +35,11 @@ export declare class UTreeItem extends UElement {
     trigger: TreeItemTrigger;
     /** 아이템의 고유값 */
     value: string;
+    /**
+     * 네이티브 전역 속성. ⚠**드롭을 받아 트리를 재배치하는 구현은 없다** — `UTree` 의 같은
+     * 속성과 같은 상태다.
+     */
     draggable: boolean;
-    droppable: boolean;
     leaf: boolean;
     depth: number;
     selected: boolean;