@iyulab/components 1.22.0 → 1.24.0

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.24.0",
   "keywords": [
     "iyulab",
     "components",
@@ -42,13 +42,15 @@
     "test:browser": "vitest run --project=browser",
     "lint": "eslint src/",
     "lint:fix": "eslint src/ --fix",
-    "build": "eslint && npm run typecheck:plugins && vite build && npm run build:plugins && npm run test:react-types",
+    "build": "npm run typecheck && eslint && npm run typecheck:plugins && vite build && npm run build:plugins && npm run test:react-types",
     "test:react-types": "tsc -p tsconfig.react-smoke.json",
     "typecheck:plugins": "tsc -p plugins/tsconfig.json",
     "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",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",

package/skills/iyulab-components/SKILL.md

@@ -59,6 +59,7 @@ import { UButton, UInput } from '@iyulab/components/react';
 
 - [`u-button`](./references/components/button.md) — Versatile button with multiple variants; renders as `<a>` when `href` is set
 - [`u-icon-button`](./references/components/icon-button.md) — Square icon-only button with built-in tooltip
+- [`u-copy-button`](./references/components/copy-button.md) — Copies text to the clipboard with a transient confirmation
 - [`u-button-group`](./references/components/button-group.md) — Groups buttons with shared variant and disabled state
 
 ### Form Controls
@@ -98,7 +99,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
@@ -108,6 +110,7 @@ import { UButton, UInput } from '@iyulab/components/react';
 - [`u-chip`](./references/components/chip.md) — Selectable/removable chip tag
 - [`u-tag`](./references/components/tag.md) — Non-interactive label tag
 - [`u-icon`](./references/components/icon.md) — SVG icon from built-in or external icon library
+- [`u-text`](./references/components/text.md) — Semantic typography step; optional heading level
 
 ---
 

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/copy-button.md

@@ -0,0 +1,80 @@
+# u-copy-button
+
+```ts
+import '@iyulab/components/dist/components/copy-button/UCopyButton.js';
+```
+
+**Tag:** `u-copy-button`
+
+Copies text to the clipboard and shows a transient confirmation by swapping its icon.
+
+Two shapes:
+
+- **Icon only** (default) — the default slot becomes the tooltip.
+- **Icon + label** — set `label` to render visible text beside the icon.
+
+The clipboard logic is identical in both.
+
+```html
+<!-- Icon only; slot content is the tooltip -->
+<u-copy-button value="npm i @iyulab/components">Copy install command</u-copy-button>
+
+<!-- Icon + label -->
+<u-copy-button value="RESULT-1024" label="Copy result"></u-copy-button>
+
+<!-- Stays in the copied state until reset explicitly -->
+<u-copy-button value="token" .delay=${0}></u-copy-button>
+```
+
+## Changing or cancelling what gets copied
+
+The `copy` event fires **before** the write, so a handler can rewrite the payload or cancel:
+
+```ts
+button.addEventListener('copy', (e: ClipboardEvent) => {
+  e.clipboardData?.setData('text/plain', transform(button.value));
+  e.preventDefault(); // cancel the built-in write
+});
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Tooltip content, icon-only shape. Unused when `label` is set |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `variant` | `'solid'\|'outline'\|'ghost'\|'link'` | `'ghost'` | ✓ | Button style |
+| `rounded` | `boolean` | `false` | ✓ | Circular shape |
+| `disabled` | `boolean` | `false` | ✓ | Disabled state |
+| `copied` | `boolean` | `false` | ✓ | Currently showing the copied state |
+| `tooltipPlacement` | `Placement` | `"top"` | | Tooltip placement (`tooltip-placement`) |
+| `tooltipOffset` | `OffsetOptions` | `4` | | Tooltip distance (`tooltip-offset`) |
+| `delay` | `number` | `1_000` | | Milliseconds before leaving the copied state; `0` or less keeps it |
+| `value` | `string` | — | | Text to copy |
+| `label` | `string` | — | | Inline label; switches to the icon + label shape |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `copy` | native `ClipboardEvent` | Fires before the write. `preventDefault()` cancels it; `clipboardData.setData` replaces the payload |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `button` | Inner button element |
+| `icon` | Icon element |
+| `tooltip` | Tooltip element (icon-only shape) |
+
+## Sizing
+
+This component keeps a **fixed** font size (18px) rather than inheriting the surrounding
+typography — it reads as an affordance next to text of any size. See
+[design-tokens.md](../../../../docs/design-tokens.md) for the four components that do this.

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/icon.md

@@ -30,8 +30,19 @@ Renders an SVG icon by name from a registered icon library. Inline `src` also ac
 <u-icon src='<svg ...>...</svg>'></u-icon>
 ```
 
+```html
+<!-- Fallback: drawn when the name does not resolve -->
+<u-icon name="might-not-exist" fallback='<svg viewBox="0 0 16 16">...</svg>'></u-icon>
+```
+
 For registering custom libraries, see [icons.md](../utilities/icons.md).
 
+> **When you need `fallback`.** An icon that fails to resolve renders nothing. That is usually
+> harmless — but not where the icon is the only hit target. A collapsed sidebar hides labels, so
+> a nav item with no visible icon becomes an **empty row the user cannot click**: the screen
+> becomes unreachable. `fallback` covers all three failure modes (no `name`, 404, unparseable SVG).
+> Keep the fallback **inline**; a fallback that fetches reproduces the very failure it covers.
+
 ---
 
 ## Properties
@@ -41,6 +52,7 @@ For registering custom libraries, see [icons.md](../utilities/icons.md).
 | `lib` | `'internal'\|'tabler'\|'heroicons'\|'lucide'\|'bootstrap'\|string` | — | Icon library identifier |
 | `name` | `string` | — | Icon name (library-specific; append `:filled` / `:solid` for filled variants) |
 | `src` | `string` | — | Raw SVG string (overrides `lib`/`name`) |
+| `fallback` | `string` | — | Raw SVG drawn when `name`/`src` cannot be resolved (missing, 404, or unparseable) |
 
 ## CSS Parts
 

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/text.md

@@ -0,0 +1,79 @@
+# u-text
+
+```ts
+import '@iyulab/components/dist/components/text/UText.js';
+```
+
+**Tag:** `u-text`
+
+Semantic typography. Applies one of the seven design-token type steps
+(`display` → `overline`) so markup can use the scale without any consumer CSS.
+The component reads the token sheet — it never defines its own type values.
+
+```html
+<u-text level="1" variant="display">Document title</u-text>
+<u-text variant="subtitle" tone="weak">One-line description</u-text>
+
+<u-text>Body copy is the default step.</u-text>
+<u-text variant="caption" tone="weak">Helper text</u-text>
+
+<u-text variant="overline">Section</u-text>
+```
+
+## Visual step and heading level are independent
+
+`variant` chooses how the text *looks*; `level` chooses what it *is*. When
+`level` is set the component renders a real `<h1>`–`<h6>` in its shadow root, so
+assistive technology reads it as a heading whose accessible name is the slotted
+text. Without `level` it renders a `<p>`.
+
+```html
+<!-- Second-level heading that is visually the largest thing on the page -->
+<u-text level="2" variant="display">Overview</u-text>
+```
+
+This keeps the document outline honest while leaving the visual hierarchy free.
+
+> **Do not nest a heading inside the slot** — `<u-text><h2>…</h2></u-text>` makes
+> the UA rule `h2 { font-size: 1.5em }` multiply the step's font size. Use
+> `level` instead. Wrapping the other way (`<h2><u-text>…</u-text></h2>`) is safe
+> because the steps are absolute sizes, but the outer heading keeps its UA
+> margin, so `level` is still the simpler choice.
+
+## Colour
+
+`tone` is a **neutral emphasis axis**, not a role-colour axis. Semantic status
+colour belongs to the component that owns the status (`u-alert`, `u-tag`,
+`u-badge`), and link colour belongs to the link.
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Text content |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `variant` | `'display'\|'title'\|'subtitle'\|'body'\|'label'\|'caption'\|'overline'` | `'body'` | ✓ | Semantic type step |
+| `tone` | `'default'\|'weak'\|'strong'\|'inverse'` | `'default'` | ✓ | Neutral emphasis axis |
+| `level` | `1\|2\|3\|4\|5\|6` | — | ✓ | Heading level; renders `<h1>`–`<h6>` |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `base` | The rendered `<p>` or `<h1>`–`<h6>` element |
+
+## Design tokens read
+
+| Step | Tokens |
+|------|--------|
+| `display` · `title` · `subtitle` · `body` · `label` · `caption` · `overline` | `--u-text-{step}-size`, `--u-text-{step}-weight`, `--u-text-{step}-leading`, `--u-text-{step}-tracking` |
+| `tone` | `--u-txt-color`, `--u-txt-color-weak`, `--u-txt-color-strong`, `--u-txt-color-inverse` |
+
+Spacing between blocks is **not** this component's concern — it has no margin.
+The surrounding layout decides rhythm (`u-group-box`, `u-card`, a flex column).

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