@iyulab/components 1.22.0 → 1.23.0

package/dist/utilities/accent.js

@@ -0,0 +1,127 @@
+//#region src/utilities/accent.ts
+/** 대비 계약의 문턱값 — `tests/build/token-contrast.test.ts` 와 같은 값이다. */
+var AA_TEXT = 4.5;
+/** `-strong` 이 `-color` 와 갈려 보이기 위한 최소 대비(2026-08-04 채택). */
+var MIN_STEP_SEPARATION = 1.2;
+var clamp = (v) => Math.min(255, Math.max(0, v));
+var channelLum = (c) => c <= .03928 ? c / 12.92 : Math.pow((c + .055) / 1.055, 2.4);
+/** `#rgb`·`#rrggbb`·`rgb(r g b)` 를 [r,g,b] 로. 해석할 수 없으면 `null`. */
+function parseColor(value) {
+	const v = value.trim();
+	const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(v);
+	if (hex) {
+		const h = hex[1].length === 3 ? hex[1].replace(/./g, (c) => c + c) : hex[1];
+		const n = parseInt(h, 16);
+		return [
+			n >> 16 & 255,
+			n >> 8 & 255,
+			n & 255
+		];
+	}
+	const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(v);
+	if (rgb) return [
+		Number(rgb[1]),
+		Number(rgb[2]),
+		Number(rgb[3])
+	];
+	return null;
+}
+function toHex([r, g, b]) {
+	return "#" + [
+		r,
+		g,
+		b
+	].map((v) => Math.round(clamp(v)).toString(16).padStart(2, "0")).join("");
+}
+function luminance(color) {
+	const rgb = parseColor(color);
+	if (!rgb) return 0;
+	const [r, g, b] = rgb.map((v) => channelLum(v / 255));
+	return .2126 * r + .7152 * g + .0722 * b;
+}
+/** WCAG 2.1 명암비. */
+function contrast(a, b) {
+	const [x, y] = [luminance(a), luminance(b)];
+	return (Math.max(x, y) + .05) / (Math.min(x, y) + .05);
+}
+/** `color-mix(in srgb, a p%, b)` 와 같은 계산. */
+function mix(a, b, p) {
+	const [x, y] = [parseColor(a), parseColor(b)];
+	if (!x || !y) return a;
+	return toHex([
+		0,
+		1,
+		2
+	].map((i) => x[i] * p + y[i] * (1 - p)));
+}
+/** 면 위의 글자를 고른다 — 검정/흰색 중 대비가 큰 쪽. */
+function pickOnColor(surface) {
+	return contrast(surface, "#000000") >= contrast(surface, "#ffffff") ? "#000000" : "#ffffff";
+}
+/**
+* 시드에서 `--u-primary-*` 램프를 만든다.
+*
+* @param seed 브랜드 색
+* @param bg   그 램프가 놓일 바탕(`--u-bg-color`) — 라이트/다크가 이 값 하나로 갈린다
+*/
+var STEP = .02;
+/**
+* `from` 에서 `target` 쪽으로 조금씩 옮기며 **조건을 만족하는 첫 색**을 돌려준다.
+* 못 찾으면 `null` — 호출부가 반대 방향을 시도한다.
+*/
+function towards(from, target, ok) {
+	for (let p = 1; p >= 0; p -= STEP) {
+		const c = mix(from, target, p);
+		if (ok(c)) return c;
+	}
+	return null;
+}
+function deriveAccentRamp(seed, bg) {
+	const light = luminance(bg) > .5;
+	const away = light ? "#000000" : "#ffffff";
+	const near = light ? "#ffffff" : "#000000";
+	/**
+	* 🔴**방향은 항상 «바탕에서 멀어지는 쪽»이 아니다 — 실측이 이 폴백을 만들게 했다.**
+	*
+	*   `#F5F5F5` 시드 + 다크 바탕 → `-strong` 을 흰색 쪽으로 밀어도 **구분 1.09** 가 한계다
+	*                                 (시드가 이미 거의 흰색이다) ⇒ 반대로 «어둡게» 가야 갈린다
+	*   `#6A1B9A` 시드 + 다크 바탕 → `-weak` 이 바탕 쪽으로는 그래픽 3.0 을 못 낸다
+	*
+	* ⇒ 한 방향을 시도하고 실패하면 **반대 방향**을 본다. 두 방향 다 실패하는 것만 극단값으로
+	*   떨어뜨린다.
+	*/
+	const either = (from, ok, first, second) => towards(from, first, ok) ?? towards(from, second, ok);
+	const color = either(seed, (c) => contrast(c, pickOnColor(c)) >= 4.5, away, near) ?? seed;
+	const strongOk = (c) => contrast(c, bg) >= 4.5 && contrast(c, color) >= 1.2;
+	const strong = either(color, strongOk, away, near) ?? away;
+	let weak;
+	if (contrast(color, bg) >= 3) {
+		weak = color;
+		for (let p = 1; p >= 0; p -= STEP) {
+			const candidate = mix(color, bg, p);
+			if (contrast(candidate, bg) < 3) break;
+			weak = candidate;
+		}
+	} else weak = towards(color, away, (c) => contrast(c, bg) >= 3) ?? away;
+	return {
+		weakest: mix(weak, bg, .25),
+		weaker: mix(weak, bg, .5),
+		weak,
+		color,
+		strong,
+		txt: pickOnColor(color)
+	};
+}
+/** 램프를 커스텀 프로퍼티 이름 → 값 맵으로. */
+function accentCustomProperties(ramp, role = "primary") {
+	return {
+		[`--u-${role}-color-weakest`]: ramp.weakest,
+		[`--u-${role}-color-weaker`]: ramp.weaker,
+		[`--u-${role}-color-weak`]: ramp.weak,
+		[`--u-${role}-color`]: ramp.color,
+		[`--u-${role}-color-strong`]: ramp.strong,
+		[`--u-${role}-txt-color`]: ramp.txt
+	};
+}
+//#endregion
+export { AA_TEXT, MIN_STEP_SEPARATION, accentCustomProperties, contrast, deriveAccentRamp, luminance, mix, parseColor, pickOnColor, toHex };

package/dist/utilities/icons.js

@@ -187,7 +187,7 @@ var IconRegistry = class {
 				IconCache.set(lib, name, svg);
 				return svg;
 			} catch (error) {
-				console.error(`[IconRegistry] '${key}' 아이콘 리졸브 실패 (재시도 가능):`, error);
+				console.error(`[IconRegistry] Failed to resolve icon '${key}' (will retry):`, error);
 				return;
 			}
 		})();

package/dist/utilities/statusIcon.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 역할 축(의미)의 상태 → 내장 아이콘 이름.
+ *
+ * ## 왜 있나
+ *
+ * `u-tag`·`u-badge` 의 상태는 **색으로만** 전달돼 왔다. 색각 이상(남성 약 8%)이나 흑백
+ * 인쇄에서는 *"성공"* 과 *"실패"* 가 같은 회색 알약이 된다. 대비 계약(1.20.0)은
+ * *읽히는가* 를 지키지 *구별되는가* 를 지키지 않는다 — 역할 색 충돌 검사(ΔE)가
+ * **색 공간에서** 세운 그 구분을, 이 표는 **모양 공간에서** 세운다.
+ *
+ * ## 매핑하지 않는 것
+ *
+ * - **장식 축**(`blue`·`purple` …)은 *색 자체*를 뜻하지 의미를 뜻하지 않는다.
+ * - **`neutral`·`primary`** 는 상태가 아니다(`primary` 는 브랜드 강조이지 «좋음»이 아니다).
+ *
+ * ⇒ 그 자리에 `icon` 을 줘도 **아무것도 그리지 않는다.** 없는 의미를 아이콘으로 지어내면
+ *   그 아이콘이 잘못된 정보를 나른다.
+ *
+ * ⚠**`u-alert` 의 `status` 축(`error`·`notice` …)은 다른 어휘다** — 이름이 겹치지 않으므로
+ * 한 표로 합치지 않았다. 합치려면 두 축의 이름을 먼저 통일해야 하고, 그것은 파괴적 변경이다.
+ */
+export declare const STATUS_ICON: {
+    readonly info: "info-circle-fill";
+    readonly success: "circle-check-fill";
+    readonly warning: "alert-triangle-fill";
+    readonly danger: "alert-circle-fill";
+};
+/** 의미를 갖는 역할 값. */
+export type StatusRole = keyof typeof STATUS_ICON;
+/** 역할 값이면 아이콘 이름을, 아니면 `undefined` 를 돌려준다. */
+export declare function statusIcon(color?: string): string | undefined;

package/dist/utilities/statusIcon.js

@@ -0,0 +1,34 @@
+//#region src/utilities/statusIcon.ts
+/**
+* 역할 축(의미)의 상태 → 내장 아이콘 이름.
+*
+* ## 왜 있나
+*
+* `u-tag`·`u-badge` 의 상태는 **색으로만** 전달돼 왔다. 색각 이상(남성 약 8%)이나 흑백
+* 인쇄에서는 *"성공"* 과 *"실패"* 가 같은 회색 알약이 된다. 대비 계약(1.20.0)은
+* *읽히는가* 를 지키지 *구별되는가* 를 지키지 않는다 — 역할 색 충돌 검사(ΔE)가
+* **색 공간에서** 세운 그 구분을, 이 표는 **모양 공간에서** 세운다.
+*
+* ## 매핑하지 않는 것
+*
+* - **장식 축**(`blue`·`purple` …)은 *색 자체*를 뜻하지 의미를 뜻하지 않는다.
+* - **`neutral`·`primary`** 는 상태가 아니다(`primary` 는 브랜드 강조이지 «좋음»이 아니다).
+*
+* ⇒ 그 자리에 `icon` 을 줘도 **아무것도 그리지 않는다.** 없는 의미를 아이콘으로 지어내면
+*   그 아이콘이 잘못된 정보를 나른다.
+*
+* ⚠**`u-alert` 의 `status` 축(`error`·`notice` …)은 다른 어휘다** — 이름이 겹치지 않으므로
+* 한 표로 합치지 않았다. 합치려면 두 축의 이름을 먼저 통일해야 하고, 그것은 파괴적 변경이다.
+*/
+var STATUS_ICON = {
+	info: "info-circle-fill",
+	success: "circle-check-fill",
+	warning: "alert-triangle-fill",
+	danger: "alert-circle-fill"
+};
+/** 역할 값이면 아이콘 이름을, 아니면 `undefined` 를 돌려준다. */
+function statusIcon(color) {
+	return color && color in STATUS_ICON ? STATUS_ICON[color] : void 0;
+}
+//#endregion
+export { STATUS_ICON, statusIcon };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "keywords": [
     "iyulab",
     "components",
@@ -48,7 +48,8 @@
     "docs:cssprops": "node scripts/cssprops-doc.mjs --write",
     "docs:react-events": "node scripts/react-events-doc.mjs --write",
     "docs:tokens": "node scripts/design-tokens-doc.mjs --write",
-    "build:plugins": "tsc -p plugins/tsconfig.build.json"
+    "build:plugins": "tsc -p plugins/tsconfig.build.json",
+    "probe:seed-ramp": "node scripts/seed-ramp.mjs"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",

package/skills/iyulab-components/SKILL.md

@@ -98,7 +98,8 @@ import { UButton, UInput } from '@iyulab/components/react';
 - [`u-card`](./references/components/card.md) — Content card with media, header, and footer slots
 - [`u-carousel`](./references/components/carousel.md) — Slide carousel with autoplay, navigation, and pagination
 - [`u-split-panel`](./references/components/split-panel.md) — Resizable two-panel layout
-- [`u-panel`](./references/components/panel.md) — General-purpose content panel with optional collapsing
+- [`u-panel`](./references/components/panel.md) — General-purpose content panel
+- [`u-expander`](./references/components/expander.md) — Disclosure section; header toggles the body open/closed
 - [`u-divider`](./references/components/divider.md) — Horizontal or vertical separator line
 
 ### Data Display

package/skills/iyulab-components/references/components/badge.md

@@ -34,5 +34,6 @@ Status badge for numbers, labels, or dot indicators. Use `anchor` to position it
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
 | `variant` | `'pill'\|'dot'\|'square'` | `'pill'` | ✓ | Shape variant; `dot` renders no content |
-| `color` | `'neutral'\|'blue'\|'green'\|'yellow'\|'red'\|'orange'\|'teal'\|'cyan'\|'purple'\|'pink'` | `'neutral'` | ✓ | Badge color |
+| `color` | `'neutral'\|'primary'\|'info'\|'success'\|'warning'\|'danger'\|'blue'\|'green'\|'yellow'\|'red'\|'orange'\|'teal'\|'cyan'\|'purple'\|'pink'` | `'blue'` | ✓ | Badge color (role axis = semantics, decorative axis = the color itself) |
 | `anchor` | `'top-right'\|'top-left'\|'bottom-right'\|'bottom-left'` | — | ✓ | Absolute anchor position relative to parent |
+| `icon` | `boolean` | `false` | ✓ | Adds a status icon so the meaning survives without color (`info`/`success`/`warning`/`danger`; not drawn for `variant="dot"`) |

package/skills/iyulab-components/references/components/button.md

@@ -45,12 +45,14 @@ Versatile button with multiple visual variants. Renders as an `<a>` element when
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
 | `variant` | `'solid'\|'surface'\|'filled'\|'outlined'\|'ghost'\|'link'` | `'solid'` | ✓ | Visual style |
-| `color` | `'neutral'\|'blue'\|'green'\|'red'\|'orange'\|'teal'\|'cyan'\|'purple'\|'pink'` | `'neutral'` | ✓ | Semantic color, independent of `variant`. `ghost` is unaffected (see notes below). |
+| `color` | `'neutral'\|'primary'\|'info'\|'success'\|'warning'\|'danger'\|'blue'\|'green'\|'red'\|'orange'\|'teal'\|'cyan'\|'purple'\|'pink'` | `'neutral'` | ✓ | Semantic color, independent of `variant`. `ghost` is unaffected (see notes below). |
 | `size` | `'sm'\|'md'\|'lg'` | `'md'` | ✓ | Button size (12px/14px/16px font-size; padding, spinner, and icon slots scale proportionally). |
 | `rounded` | `boolean` | `false` | ✓ | Pill-shaped border radius |
 | `disabled` | `boolean` | `false` | ✓ | Disable the button |
 | `loading` | `boolean` | `false` | ✓ | Show loading spinner; disables interaction |
 | `type` | `'button'\|'submit'\|'reset'` | `'button'` | — | Button `type` attribute |
+| `name` | `string` | — | ✓ | Form field name — submitted with the form |
+| `value` | `string` | — | ✓ | Form field value — submitted with the form |
 | `href` | `string` | — | — | Link URL (renders as `<a>`) |
 | `target` | `string` | — | — | Link `target` |
 | `rel` | `string` | — | — | Link `rel` |

package/skills/iyulab-components/references/components/drawer.md

@@ -61,3 +61,33 @@ Side panel that slides in from any screen edge. Extends `UOverlayElement` (focus
 | `header` | Header area |
 | `body` | Body area |
 | `close-btn` | Close button |
+
+---
+
+## Edit-panel pattern
+
+A side panel for editing a record needs no extra component — `u-drawer` already provides the
+whole contract. Measured in a real browser
+(`tests/browser/drawer-edit-panel-pattern.browser.test.ts`):
+
+```html
+<u-drawer id="edit" placement="right" closable>
+  <span slot="header">Edit order</span>
+
+  <u-input label="Quantity" autofocus></u-input>
+  <u-textarea label="Note"></u-textarea>
+
+  <div slot="footer">
+    <u-button variant="ghost" @click=${() => edit.hide()}>Cancel</u-button>
+    <u-button color="primary" @click=${save}>Save</u-button>
+  </div>
+</u-drawer>
+```
+
+| Requirement | How it is met |
+|---|---|
+| Focus the first input on open, restore the trigger on close | `[autofocus]` → first input control → first tabbable; focus is returned by the trap |
+| Body scrolls, footer stays visible | `part="body"` is `flex: 1; overflow: auto`; the `footer` slot is `flex-shrink: 0` |
+| Focus cannot leave the panel | `mode="modal"` (default) activates the focus trap |
+| `Esc` closes, background scroll is locked | `closeOn` defaults to `['escape','backdrop','button']` |
+| Nothing pops open by itself | Selects/comboboxes open only on user interaction |

package/skills/iyulab-components/references/components/expander.md

@@ -0,0 +1,70 @@
+# u-expander
+
+```ts
+import '@iyulab/components/dist/components/expander/UExpander.js';
+```
+
+**Tag:** `u-expander`
+
+Disclosure section — the header toggles the body open and closed. The header is a native
+`<button>`, so keyboard operation (Enter / Space) and focus order come for free, and the
+collapsed body is removed from both the accessibility tree and the tab order.
+
+```html
+<u-expander label="Shipping details" open>
+  <p>Body content.</p>
+</u-expander>
+
+<!-- Custom header + trailing slot -->
+<u-expander>
+  <span slot="header">Order 1042</span>
+  <u-tag slot="suffix" color="success">Paid</u-tag>
+  <p>Body content.</p>
+</u-expander>
+```
+
+The open/close transition runs on the motion tokens (`--u-duration-normal` /
+`--u-ease-standard`) and is suppressed under `prefers-reduced-motion: reduce` — the
+transition is decoration here, since the collapsed/expanded result reads the same when static.
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `header` | Replaces the header text (wins over `label`) |
+| *(default)* | Body content, shown while open |
+| `suffix` | Content placed at the end of the header row |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `open` | `boolean` | `false` | ✓ | Expanded state |
+| `disabled` | `boolean` | `false` | ✓ | Disable the header button |
+| `label` | `string` | `''` | | Header text |
+
+## Events
+
+| Event | Cancelable | Description |
+|-------|------------|-------------|
+| `expand` | ✓ | Before the body expands |
+| `collapse` | ✓ | Before the body collapses |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `expand()` | Expand; returns `false` if cancelled or already open |
+| `collapse()` | Collapse; returns `false` if cancelled or already closed |
+| `toggle()` | Switch to the opposite state |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `header` | Header button |
+| `icon` | Disclosure chevron |
+| `label` | Header text area |
+| `content` | Body wrapper |

package/skills/iyulab-components/references/components/input.md

@@ -50,6 +50,12 @@ Text input field with prefix/suffix slots and label. Add `u-option` children for
 | `autofocus` | `boolean` | `false` | — | Auto-focus on render |
 | `autocomplete` | `AutoFill` | — | — | Browser autocomplete |
 | `spellcheck` | `boolean` | `false` | — | Spellcheck |
+| `dirname` | `string` | — | — | Native `dirname` — submits the text direction with the form |
+| `inputmode` | `'none'\|'text'\|'decimal'\|'numeric'\|'tel'\|'search'\|'email'\|'url'` | — | — | Virtual keyboard hint |
+| `enterkeyhint` | `'enter'\|'done'\|'go'\|'next'\|'previous'\|'search'\|'send'` | — | — | Enter-key label hint |
+| `autocorrect` | `boolean` | `false` | — | Native autocorrect (Safari/iOS) |
+| `autocapitalize` | `'off'\|'none'\|'on'\|'sentences'\|'words'\|'characters'` | `'off'` | — | Auto-capitalization behavior |
+| `size` | `number` | — | — | Native `size` — visible width in characters |
 | `disabled` | `boolean` | `false` | ✓ | Disabled |
 | `readonly` | `boolean` | `false` | ✓ | Read-only |
 | `required` | `boolean` | `false` | ✓ | Required |

package/skills/iyulab-components/references/components/panel.md

@@ -6,11 +6,14 @@ import '@iyulab/components/dist/components/panel/UPanel.js';
 
 **Tag:** `u-panel`
 
-General-purpose content panel. Matches a tab or tree node when using `value`. Supports optional collapsing.
+General-purpose content panel. Matches a tab or tree node when using `value`.
+
+> Looking for a collapsible section? Use [`u-expander`](expander.md). `u-panel` previously
+> declared a `collapsible` property that was never implemented — it has been removed.
 
 ```html
-<!-- Standalone collapsible panel -->
-<u-panel collapsible>Content inside panel</u-panel>
+<!-- Standalone panel -->
+<u-panel>Content inside panel</u-panel>
 
 <!-- Inside u-tab-panel (matched by value) -->
 <u-tab-panel>
@@ -35,4 +38,3 @@ General-purpose content panel. Matches a tab or tree node when using `value`. Su
 |----------|------|---------|---------|-------------|
 | `value` | `string` | `''` | ✓ | Identifier used for tab/tree matching |
 | `disabled` | `boolean` | `false` | ✓ | Disable the panel |
-| `collapsible` | `boolean` | `false` | ✓ | Allow the panel to collapse |

package/skills/iyulab-components/references/components/skeleton.md

@@ -17,6 +17,9 @@ Placeholder shape displayed while content is loading.
 
 <!-- Card placeholder -->
 <u-skeleton shape="rounded" width="100%" height="120px" effect="shimmer"></u-skeleton>
+
+<!-- Paragraph / list-row placeholder: 3 stacked bars, last one shortened -->
+<u-skeleton lines="3" height="1em"></u-skeleton>
 ```
 
 ---
@@ -35,6 +38,7 @@ Placeholder shape displayed while content is loading.
 | `effect` | `'none'\|'pulse'\|'shimmer'` | `'shimmer'` | ✓ | Animation style |
 | `width` | `string` | — | — | CSS width value |
 | `height` | `string` | — | — | CSS height value |
+| `lines` | `number` | — | ✓ | Draw N stacked bars instead of one (takes effect at 2+); the last bar is shortened |
 
 ## CSS Custom Properties
 
@@ -44,3 +48,11 @@ Placeholder shape displayed while content is loading.
 | `--skeleton-height` | Override height |
 | `--skeleton-color` | Base placeholder color |
 | `--skeleton-shimmer-color` | Shimmer highlight color |
+| `--skeleton-line-gap` | Gap between bars when `lines` is set (default `0.5em`) |
+| `--skeleton-last-line-width` | Width of the last bar when `lines` is set (default `60%`) |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `line` | One bar of a multi-line placeholder (only rendered when `lines` is set) |

package/skills/iyulab-components/references/components/tab-panel.md

@@ -21,8 +21,8 @@ Tab-based content switcher. Pair each `u-tab` with a `u-panel` of the same `valu
   <u-panel value="settings">Settings content</u-panel>
 </u-tab-panel>
 
-<!-- Card variant, right placement, editable -->
-<u-tab-panel variant="card" placement="left" editable draggable>
+<!-- Card variant, left placement -->
+<u-tab-panel variant="card" placement="left">
   <u-tab value="a" removable>Tab A</u-tab>
   <u-panel value="a">Panel A</u-panel>
 </u-tab-panel>
@@ -46,8 +46,7 @@ Tab-based content switcher. Pair each `u-tab` with a `u-panel` of the same `valu
 | `value` | `string` | `''` | ✓ | Currently active tab value |
 | `variant` | `'line'\|'card'\|'pill'\|'plain'` | `'line'` | ✓ | Tab bar style |
 | `placement` | `'top'\|'bottom'\|'left'\|'right'` | `'top'` | ✓ | Tab bar position |
-| `editable` | `boolean` | `false` | ✓ | Allow adding/removing tabs |
-| `draggable` | `boolean` | `false` | ✓ | Allow reordering tabs by drag |
+| `draggable` | `boolean` | `false` | ✓ | Native drag attribute — **no built-in reordering** |
 | `disabled` | `boolean` | `false` | ✓ | Disable all tabs |
 
 ### Events
@@ -84,7 +83,7 @@ Tab-based content switcher. Pair each `u-tab` with a `u-panel` of the same `valu
 | `value` | `string` | `''` | ✓ | Matches a `u-panel` with the same `value` |
 | `disabled` | `boolean` | `false` | ✓ | Disable the tab |
 | `removable` | `boolean` | `false` | ✓ | Show close/remove button |
-| `draggable` | `boolean` | `false` | ✓ | Allow dragging to reorder |
+| `draggable` | `boolean` | `false` | ✓ | Native drag attribute — **no built-in reordering** |
 
 ### Events
 

package/skills/iyulab-components/references/components/tag.md

@@ -37,14 +37,31 @@ For interactive chips (selectable/removable), use [`u-chip`](./chip.md) instead.
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
 | `variant` | `'solid'\|'surface'\|'filled'\|'outlined'` | `'filled'` | ✓ | Visual style |
-| `color` | `'neutral'\|'blue'\|'green'\|'yellow'\|'red'\|'orange'\|'teal'\|'cyan'\|'purple'\|'pink'` | `'neutral'` | ✓ | Color |
+| `color` | `'neutral'\|'primary'\|'info'\|'success'\|'warning'\|'danger'\|'blue'\|'green'\|'yellow'\|'red'\|'orange'\|'teal'\|'cyan'\|'purple'\|'pink'` | `'neutral'` | ✓ | Color |
 | `rounded` | `boolean` | `false` | ✓ | Pill shape |
+| `icon` | `boolean` | `false` | ✓ | Adds a status icon so the meaning survives without color (`info`/`success`/`warning`/`danger` only) |
 
 ## CSS Parts
 
 | Part | Description |
 |------|-------------|
 | `content` | Inner content wrapper |
+| `icon` | Status icon (rendered only with `icon` + a semantic `color`) |
+
+## Color axes
+
+`color` carries **two** axes. The **role** axis (`primary`·`info`·`success`·`warning`·`danger`)
+means *semantics* — it follows re-branding and inherits the contrast contract. The **decorative**
+axis (`blue`·`purple` …) means *the color itself* and is deliberately immune to re-branding.
+
+`icon` only applies to the four **status** roles — `neutral` and `primary` are not states, and the
+decorative axis carries no meaning, so no icon is drawn there.
+
+```html
+<!-- distinguishable in grayscale / for color-vision deficiency -->
+<u-tag color="danger" icon>Failed</u-tag>
+<u-tag color="success" icon>Done</u-tag>
+```
 
 ## CSS Custom Properties
 

package/skills/iyulab-components/references/components/textarea.md

@@ -34,6 +34,11 @@ Multi-line text input with auto-resize and optional character counter. Form-asso
 | `autofocus` | `boolean` | `false` | — | Auto-focus on render |
 | `autocomplete` | `AutoFill` | — | — | Browser autocomplete |
 | `spellcheck` | `boolean` | `false` | — | Spellcheck |
+| `dirname` | `string` | — | — | Native `dirname` — submits the text direction with the form |
+| `inputmode` | `'none'\|'text'\|'decimal'\|'numeric'\|'tel'\|'search'\|'email'\|'url'` | — | — | Virtual keyboard hint |
+| `enterkeyhint` | `'enter'\|'done'\|'go'\|'next'\|'previous'\|'search'\|'send'` | — | — | Enter-key label hint |
+| `autocorrect` | `boolean` | `false` | — | Native autocorrect (Safari/iOS) |
+| `autocapitalize` | `'off'\|'none'\|'on'\|'sentences'\|'words'\|'characters'` | `'off'` | — | Auto-capitalization behavior |
 | `disabled` | `boolean` | `false` | ✓ | Disable |
 | `readonly` | `boolean` | `false` | ✓ | Read-only |
 | `required` | `boolean` | `false` | ✓ | Required |

package/skills/iyulab-components/references/components/tree.md

@@ -43,8 +43,7 @@ Hierarchical tree with support for selection, checkboxes, cascade check, and dra
 | `selectLeaf` | `boolean` | `false` | ✓ | Only leaf nodes are selectable |
 | `checkable` | `boolean` | `false` | ✓ | Show checkboxes |
 | `checkCascade` | `boolean` | `false` | ✓ | Parent/child checkbox cascade |
-| `draggable` | `boolean` | `false` | ✓ | Enable drag |
-| `droppable` | `boolean` | `false` | ✓ | Enable drop |
+| `draggable` | `boolean` | `false` | ✓ | Native drag attribute — **no built-in drag & drop** |
 | `trigger` | `'item'\|'icon'` | `'item'` | — | Click target to expand/collapse |
 
 ### Events
@@ -98,8 +97,7 @@ Hierarchical tree with support for selection, checkboxes, cascade check, and dra
 | `selectable` | `boolean` | `false` | ✓ | This item can be selected |
 | `checkable` | `boolean` | `false` | ✓ | Show checkbox |
 | `loading` | `boolean` | `false` | ✓ | Loading state (async children) |
-| `draggable` | `boolean` | `false` | ✓ | Draggable |
-| `droppable` | `boolean` | `false` | ✓ | Accepts drops |
+| `draggable` | `boolean` | `false` | ✓ | Native drag attribute — **no built-in drag & drop** |
 | `trigger` | `'item'\|'icon'` | `'item'` | — | Expand trigger target |
 
 ### Events

package/skills/iyulab-components/references/usage.md

@@ -64,13 +64,33 @@ const current = Theme.get(); // 'system' | 'light' | 'dark' | undefined
 
 ### Brand color customization
 
+**Recommended — derive the whole ramp from one seed:**
+
+```ts
+import { Theme } from '@iyulab/components';
+
+Theme.accent('#7c3aed');   // computes --u-primary-color-{weakest,weaker,weak,…,strong} + txt
+Theme.accent(null);        // back to the sheet defaults
+```
+
+The computed ramp satisfies the contrast contract this library tests against — text on the
+accent surface ≥ 4.5:1, accent text on the page background ≥ 4.5:1, `-strong` distinguishable
+from `-color`, and `-weak` usable as a non-text graphic (≥ 3:1). It is **recalculated when the
+theme changes**, because those targets are relative to the page background.
+
+**Manual override** — you must set the steps you use, not just one:
+
 ```css
 :root {
-  --u-primary-color: #7c3aed;
+  --u-primary-color-weak: #a78bfa;    /* graphics on the page background */
+  --u-primary-color: #7c3aed;         /* accent surface */
+  --u-primary-color-strong: #5b21b6;  /* text/icons on the page background */
+  --u-primary-txt-color: #ffffff;     /* text on the accent surface */
 }
 ```
 
-Interactive components derive hover/active/surface/outline styles from this token.
+⚠ Setting `--u-primary-color` alone is **not enough**: hover/focus/link colors resolve from
+`--u-primary-color-strong`, so they stay on the default ramp and your brand looks half-applied.
 
 ---
 

package/skills/iyulab-components/references/utilities/theme.md

@@ -22,17 +22,34 @@ await Theme.init({
 });
 ```
 
-## Primary Color Customization
+## Brand accent
 
-Interactive components derive their accent palette from `--u-primary-color`.
+**Recommended — derive the whole ramp from one seed:**
+
+```ts
+Theme.accent('#7c3aed');   // computes --u-primary-color-{weakest…strong} + --u-primary-txt-color
+Theme.accent(null);        // back to the sheet defaults
+```
+
+The computed ramp satisfies the contrast contract this library tests against — text on the accent
+surface ≥ 4.5:1, accent text on the page background ≥ 4.5:1, `-strong` distinguishable from
+`-color`, and `-weak` usable as a non-text graphic (≥ 3:1). It is **recalculated when the theme
+changes**, because those targets are relative to the page background.
+
+**Manual override** — set the steps you use, not just one:
 
 ```css
 :root {
-  --u-primary-color: #7c3aed; /* global brand/accent color */
+  --u-primary-color-weak: #a78bfa;    /* graphics on the page background */
+  --u-primary-color: #7c3aed;         /* accent surface */
+  --u-primary-color-strong: #5b21b6;  /* text/icons on the page background */
+  --u-primary-txt-color: #ffffff;     /* text on the accent surface */
 }
 ```
 
-With this single token override, components such as buttons, checkbox/radio/switch, tab-panel, badge, and tag recalculate hover/active/surface/outline colors automatically.
+> ⚠ Overriding `--u-primary-color` **alone is not enough**. Hover, focus and link colors resolve
+> from `--u-primary-color-strong`, so they stay on the default ramp and the brand looks
+> half-applied. (The sheet derives no step from `--u-primary-color` — measured: 0 references.)
 
 ## API
 
@@ -41,6 +58,8 @@ With this single token override, components such as buttons, checkbox/radio/swit
 | `Theme.init(options?)` | `Promise<void>` | Initialize and apply theme |
 | `Theme.get()` | `ThemeType \| undefined` | Get current theme |
 | `Theme.set(theme)` | `void` | Set theme (`'light'`, `'dark'`, `'system'`) |
+| `Theme.resolved()` | `'light' | 'dark'` | The theme actually applied — use this, not `get()`, for brightness branches |
+| `Theme.accent(seed)` | `void` | Derive the `--u-primary-*` ramp from a brand color; `null` clears it |
 | `Theme.isInitialized` | `boolean` | Whether `init()` has been called |
 
 ## Types