@iyulab/components 0.3.0 → 1.0.0

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

@@ -0,0 +1,86 @@
+# u-select
+
+```ts
+import '@iyulab/components/dist/components/select/USelect.js';
+import '@iyulab/components/dist/components/option/UOption.js';
+```
+
+**Tag:** `u-select`
+
+Dropdown select with single or multiple selection, search, and clear support. Form-associated.
+
+```html
+<u-select name="country" placeholder="Select country">
+  <u-option value="us">United States</u-option>
+  <u-option value="kr">South Korea</u-option>
+  <u-option value="jp">Japan</u-option>
+</u-select>
+
+<!-- Multiple + searchable -->
+<u-select name="tags" multiple searchable clearable max-count="3">
+  <u-option value="js">JavaScript</u-option>
+  <u-option value="ts">TypeScript</u-option>
+  <u-option value="py">Python</u-option>
+</u-select>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | `u-option` elements |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `value` | `string \| string[]` | — | — | Selected value(s) |
+| `variant` | `'outlined'\|'filled'\|'underlined'\|'borderless'` | `'outlined'` | ✓ | Visual style |
+| `multiple` | `boolean` | `false` | ✓ | Allow multiple selections |
+| `searchable` | `boolean` | `false` | ✓ | Filter options by text |
+| `clearable` | `boolean` | `false` | ✓ | Show clear button |
+| `loading` | `boolean` | `false` | ✓ | Loading state |
+| `placeholder` | `string` | — | — | Placeholder text |
+| `minCount` | `number` | — | — | Minimum required selections |
+| `maxCount` | `number` | — | — | Maximum allowed selections |
+| `disabled` | `boolean` | `false` | ✓ | Disable |
+| `readonly` | `boolean` | `false` | ✓ | Read-only |
+| `required` | `boolean` | `false` | ✓ | Required |
+| `invalid` | `boolean` | `false` | ✓ | Validation failed |
+| `name` | `string` | — | — | Form field name |
+| `label` | `string` | — | — | Field label |
+| `description` | `string` | — | — | Helper text |
+| `validationMessage` | `string` | — | — | Custom validation message |
+
+## Events
+
+| Event | Description |
+|-------|-------------|
+| `change` | Fires when selection changes |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `validate()` | Validate; sets `invalid` |
+| `reset()` | Reset value |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `field` | Outer field wrapper |
+| `container` | Trigger area |
+| `popover` | Dropdown list container |
+| `search-input` | Search input inside dropdown |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--select-popover-min-width` | Dropdown min-width |
+| `--select-popover-max-width` | Dropdown max-width |
+| `--select-popover-min-height` | Dropdown min-height |
+| `--select-popover-max-height` | Dropdown max-height |

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

@@ -0,0 +1,46 @@
+# u-skeleton
+
+```ts
+import '@iyulab/components/dist/components/skeleton/USkeleton.js';
+```
+
+**Tag:** `u-skeleton`
+
+Placeholder shape displayed while content is loading.
+
+```html
+<!-- Text line -->
+<u-skeleton width="200px" height="1rem"></u-skeleton>
+
+<!-- Circle avatar placeholder -->
+<u-skeleton shape="circle" width="48px" height="48px"></u-skeleton>
+
+<!-- Card placeholder -->
+<u-skeleton shape="rounded" width="100%" height="120px" effect="shimmer"></u-skeleton>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Content (hidden while skeleton is visible) |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `shape` | `'rectangle'\|'circle'\|'rounded'` | `'rectangle'` | ✓ | Shape of the placeholder |
+| `effect` | `'none'\|'pulse'\|'shimmer'` | `'shimmer'` | ✓ | Animation style |
+| `width` | `string` | — | — | CSS width value |
+| `height` | `string` | — | — | CSS height value |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--skeleton-width` | Override width |
+| `--skeleton-height` | Override height |
+| `--skeleton-color` | Base placeholder color |
+| `--skeleton-shimmer-color` | Shimmer highlight color |

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

@@ -0,0 +1,89 @@
+# u-slider
+
+```ts
+import '@iyulab/components/dist/components/slider/USlider.js';
+```
+
+**Tag:** `u-slider`
+
+Range slider. Single-thumb or dual-thumb (range) mode. Supports marks, value display, and tooltip on drag. Form-associated.
+
+```html
+<u-slider name="volume" value="50"></u-slider>
+
+<!-- Range mode -->
+<u-slider name="priceRange" range value="[20,80]"></u-slider>
+
+<!-- With marks and tooltip -->
+<u-slider name="steps" min="0" max="100" step="25" show-tooltip>
+</u-slider>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `thumb` | Custom thumb handle (single or start thumb in range mode) |
+| `thumb-end` | Custom end thumb handle (range mode only) |
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `number \| number[]` | — | Current value (array for range mode) |
+| `min` | `number` | `0` | Minimum value |
+| `max` | `number` | `100` | Maximum value |
+| `step` | `number` | `1` | Step size |
+| `range` | `boolean` | `false` | Enable dual-thumb range mode |
+| `showValue` | `boolean` | `false` | Display current value next to slider |
+| `showTooltip` | `boolean` | `false` | Show value tooltip while dragging |
+| `formatter` | `(v: number) => string` | — | Custom value formatter |
+| `marks` | `SliderMark[]` | — | Tick marks (`{ value, label? }`) |
+| `offset` | `number` | — | Start value offset (single mode) |
+| `disabled` | `boolean` | `false` | Disable |
+| `readonly` | `boolean` | `false` | Read-only |
+| `required` | `boolean` | `false` | Required |
+| `invalid` | `boolean` | `false` | Validation failed |
+| `name` | `string` | — | Form field name |
+
+## Events
+
+| Event | Description |
+|-------|-------------|
+| `change` | Fires when value changes |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `validate()` | Validate; sets `invalid` |
+| `reset()` | Reset value |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `field` | Outer wrapper |
+| `container` | Track and thumbs container |
+| `track` | Slider track |
+| `fill` | Filled portion of track |
+| `thumb` | Start/single thumb |
+| `thumb-end` | End thumb (range mode) |
+| `thumb-tooltip` | Drag tooltip |
+| `mark` | Tick mark dot |
+| `mark-label` | Tick mark label |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--slider-fill-color` | Track fill color |
+| `--slider-track-height` | Track height |
+| `--slider-track-color` | Track background color |
+| `--slider-thumb-size` | Thumb diameter |
+| `--slider-thumb-color` | Thumb fill color |
+| `--slider-thumb-border-color` | Thumb border color |
+| `--slider-mark-size` | Mark dot size |
+| `--slider-mark-color` | Mark dot color |

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

@@ -0,0 +1,47 @@
+# u-spinner
+
+```ts
+import '@iyulab/components/dist/components/spinner/USpinner.js';
+```
+
+**Tag:** `u-spinner`
+
+Animated circular spinner for loading states. Optional label below the spinner via default slot.
+
+```html
+<u-spinner></u-spinner>
+
+<u-spinner color="blue">Loading...</u-spinner>
+
+<u-spinner color="green"></u-spinner>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Label text shown below the spinner |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `color` | `'neutral'\|'blue'\|'green'\|'yellow'\|'red'\|'orange'\|'teal'\|'cyan'\|'purple'\|'pink'` | — | ✓ | Spinner color preset |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `svg` | Spinner SVG element |
+| `label` | Label wrapper |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--spinner-track-width` | Track stroke width |
+| `--spinner-track-color` | Track (background arc) color |
+| `--spinner-indicator-color` | Animated arc color |
+| `--spinner-indicator-speed` | Rotation animation duration |

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

@@ -0,0 +1,65 @@
+# u-split-panel
+
+```ts
+import '@iyulab/components/dist/components/split-panel/USplitPanel.js';
+```
+
+**Tag:** `u-split-panel`
+
+Resizable two-panel layout. Drag the splitter to adjust panel sizes.
+
+```html
+<u-split-panel style="height: 400px;">
+  <div>Left panel content</div>
+  <div>Right panel content</div>
+</u-split-panel>
+
+<!-- Vertical split -->
+<u-split-panel orientation="vertical" default-ratio="[30,70]">
+  <div>Top panel</div>
+  <div>Bottom panel</div>
+</u-split-panel>
+
+<!-- Custom splitter handle -->
+<u-split-panel>
+  <div>Panel A</div>
+  <div>Panel B</div>
+  <div slot="splitter" style="background:blue; width:4px;"></div>
+</u-split-panel>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Exactly two panel elements |
+| `splitter` | Custom splitter/handle UI |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `orientation` | `'horizontal'\|'vertical'` | `'horizontal'` | ✓ | Split direction |
+| `defaultRatio` | `number[]` | `[]` | ✓ | Initial size ratios (e.g. `[30, 70]`) |
+| `ratio` | `number[]` | `[]` | ✓ | Current size ratios |
+| `disabled` | `boolean` | `false` | ✓ | Prevent resizing |
+| `lazy` | `boolean` | `false` | ✓ | Show preview while dragging, commit on release |
+
+## Events
+
+| Event | Description |
+|-------|-------------|
+| `shift-start` | Drag starts |
+| `shift` | Dragging in progress |
+| `shift-end` | Drag ends |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--splitter-size` | Splitter handle thickness |
+| `--splitter-color` | Splitter default color |
+| `--splitter-color-hover` | Splitter color on hover |
+| `--splitter-color-active` | Splitter color while dragging |

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

@@ -0,0 +1,81 @@
+# u-switch
+
+```ts
+import '@iyulab/components/dist/components/switch/USwitch.js';
+```
+
+**Tag:** `u-switch`
+
+Toggle switch (on/off). Supports custom track and thumb content via slots. Form-associated.
+
+```html
+<u-switch name="notifications" checked>Enable notifications</u-switch>
+
+<!-- Custom track labels -->
+<u-switch name="mode">
+  <span slot="track-checked">ON</span>
+  <span slot="track-unchecked">OFF</span>
+  Dark mode
+</u-switch>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Label text |
+| `track-checked` | Content inside the track when checked |
+| `track-unchecked` | Content inside the track when unchecked |
+| `thumb-checked` | Thumb content when checked |
+| `thumb-unchecked` | Thumb content when unchecked |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `checked` | `boolean` | `false` | ✓ | On/off state |
+| `disabled` | `boolean` | `false` | ✓ | Disable |
+| `readonly` | `boolean` | `false` | ✓ | Read-only |
+| `required` | `boolean` | `false` | ✓ | Required |
+| `invalid` | `boolean` | `false` | ✓ | Validation failed |
+| `name` | `string` | — | — | Form field name |
+| `value` | `string` | — | — | Submitted value |
+
+## Events
+
+| Event | Description |
+|-------|-------------|
+| `change` | Fires when checked state changes |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `validate()` | Validate; sets `invalid` |
+| `reset()` | Reset state |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `wrapper` | Outer layout wrapper |
+| `track` | Track element |
+| `thumb` | Thumb element |
+| `label` | Label text wrapper |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--switch-track-width` | Track width |
+| `--switch-track-height` | Track height |
+| `--switch-track-color` | Track color (unchecked) |
+| `--switch-track-color-checked` | Track color (checked) |
+| `--switch-thumb-size` | Thumb diameter |
+| `--switch-thumb-offset` | Thumb padding from track edge |
+| `--switch-thumb-color` | Thumb color (unchecked) |
+| `--switch-thumb-color-checked` | Thumb color (checked) |
+| `--switch-radius` | Track border radius |
+| `--switch-duration` | Transition animation duration |

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

@@ -0,0 +1,93 @@
+# u-tab-panel / u-tab
+
+```ts
+import '@iyulab/components/dist/components/tab-panel/UTabPanel.js';
+import '@iyulab/components/dist/components/tab/UTab.js';
+import '@iyulab/components/dist/components/panel/UPanel.js';
+```
+
+**Tags:** `u-tab-panel`, `u-tab`
+
+Tab-based content switcher. Pair each `u-tab` with a `u-panel` of the same `value`.
+
+```html
+<u-tab-panel value="home">
+  <u-tab value="home">Home</u-tab>
+  <u-tab value="profile">Profile</u-tab>
+  <u-tab value="settings">Settings</u-tab>
+
+  <u-panel value="home">Home content</u-panel>
+  <u-panel value="profile">Profile content</u-panel>
+  <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>
+  <u-tab value="a" removable>Tab A</u-tab>
+  <u-panel value="a">Panel A</u-panel>
+</u-tab-panel>
+```
+
+---
+
+## u-tab-panel
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | `u-tab` and `u-panel` elements |
+| `toolbar` | Toolbar area at the end of the tab bar |
+
+### Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `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 |
+| `disabled` | `boolean` | `false` | ✓ | Disable all tabs |
+
+### CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `header` | Tab bar row |
+| `nav` | Tab navigation container |
+| `toolbar` | Toolbar slot area |
+| `content` | Panel content area |
+
+---
+
+## u-tab
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| `prefix` | Leading content |
+| *(default)* | Tab label |
+| `suffix` | Trailing content |
+
+### Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `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 |
+
+### Events
+
+| Event | Cancelable | Description |
+|-------|------------|-------------|
+| `remove` | ✓ | Fires when the remove button is clicked |
+
+### CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `remove-btn` | Remove button |

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

@@ -0,0 +1,55 @@
+# u-tag
+
+```ts
+import '@iyulab/components/dist/components/tag/UTag.js';
+```
+
+**Tag:** `u-tag`
+
+Non-interactive label tag for categories, status, or metadata display.
+
+```html
+<u-tag>Default</u-tag>
+<u-tag color="blue" variant="outlined">TypeScript</u-tag>
+<u-tag color="green" rounded>Active</u-tag>
+
+<!-- With icon prefix -->
+<u-tag color="red">
+  <u-icon slot="prefix" lib="tabler" name="alert-circle"></u-icon>
+  Error
+</u-tag>
+```
+
+For interactive chips (selectable/removable), use [`u-chip`](./chip.md) instead.
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `prefix` | Leading content |
+| *(default)* | Tag label |
+| `suffix` | Trailing content |
+
+## Properties
+
+| 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 |
+| `rounded` | `boolean` | `false` | ✓ | Pill shape |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `content` | Inner content wrapper |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--tag-color` | Text color |
+| `--tag-bg-color` | Background color |
+| `--tag-border-color` | Border color |

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

@@ -0,0 +1,67 @@
+# u-textarea
+
+```ts
+import '@iyulab/components/dist/components/textarea/UTextarea.js';
+```
+
+**Tag:** `u-textarea`
+
+Multi-line text input with auto-resize and optional character counter. Form-associated.
+
+```html
+<u-textarea name="bio" placeholder="Tell us about yourself" auto-resize></u-textarea>
+
+<!-- With counter and max length -->
+<u-textarea name="comment" maxlength="500" counter min-rows="3" max-rows="8">
+</u-textarea>
+```
+
+---
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `value` | `string` | — | — | Current text value |
+| `variant` | `'outlined'\|'filled'\|'underlined'\|'borderless'` | `'outlined'` | ✓ | Visual style |
+| `resize` | `'none'\|'vertical'\|'horizontal'\|'both'\|'auto'` | `'auto'` | ✓ | Resize behavior |
+| `minRows` | `number` | — | — | Minimum visible rows |
+| `maxRows` | `number` | — | — | Maximum rows (auto-resize cap) |
+| `counter` | `boolean` | `false` | ✓ | Show character counter |
+| `minlength` | `number` | — | — | Minimum character count |
+| `maxlength` | `number` | — | — | Maximum character count |
+| `placeholder` | `string` | — | — | Placeholder text |
+| `autofocus` | `boolean` | `false` | — | Auto-focus on render |
+| `autocomplete` | `AutoFill` | — | — | Browser autocomplete |
+| `spellcheck` | `boolean` | `false` | — | Spellcheck |
+| `disabled` | `boolean` | `false` | ✓ | Disable |
+| `readonly` | `boolean` | `false` | ✓ | Read-only |
+| `required` | `boolean` | `false` | ✓ | Required |
+| `invalid` | `boolean` | `false` | ✓ | Validation failed |
+| `name` | `string` | — | — | Form field name |
+| `label` | `string` | — | — | Field label |
+| `description` | `string` | — | — | Helper text |
+| `validationMessage` | `string` | — | — | Custom validation message |
+
+## Events
+
+| Event | Description |
+|-------|-------------|
+| `input` | Fires on every keystroke |
+| `change` | Fires when value is committed |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `validate()` | Validate; sets `invalid` |
+| `reset()` | Reset value |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `field` | Outer wrapper |
+| `container` | Textarea area wrapper |
+| `textarea` | Native `<textarea>` element |
+| `counter` | Character counter display |

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

@@ -0,0 +1,58 @@
+# u-tooltip
+
+```ts
+import '@iyulab/components/dist/components/tooltip/UTooltip.js';
+```
+
+**Tag:** `u-tooltip`
+
+Hover/focus tooltip anchored to a `for` target. Opens and closes automatically.
+
+```html
+<u-button id="save-btn">Save</u-button>
+<u-tooltip for="#save-btn" placement="top">
+  Save your changes (Ctrl+S)
+</u-tooltip>
+
+<!-- Interactive tooltip (stays open when hovered) -->
+<u-tooltip for="#info" interactive placement="bottom" offset="8">
+  <a href="/docs">Learn more</a>
+</u-tooltip>
+
+<!-- Tracking cursor position -->
+<u-tooltip for="#chart" tracking>
+  Data point detail
+</u-tooltip>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Tooltip content |
+
+## Properties
+
+Inherits all `UFloatingElement` properties (see [floating.md](../extensions/floating.md)), plus:
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `for` | `string` | — | ✓ | CSS selector of the target element |
+| `open` | `boolean` | `false` | ✓ | Visibility state |
+| `placement` | `Placement` | — | — | Preferred placement |
+| `offset` | `OffsetOptions` | `0` | — | Gap from target |
+| `shift` | `boolean` | `false` | — | Auto-shift to stay in viewport |
+| `arrow` | `boolean` | `false` | — | Show pointing arrow |
+| `showDelay` | `number` | `0` | — | Open delay in ms |
+| `hideDelay` | `number` | `0` | — | Close delay in ms |
+| `interactive` | `boolean` | `false` | ✓ | Keep open when mouse is over tooltip |
+| `tracking` | `boolean` | `false` | ✓ | Follow mouse cursor position |
+
+## Events
+
+| Event | Cancelable | Description |
+|-------|------------|-------------|
+| `show` | ✓ | Before tooltip opens |
+| `hide` | ✓ | Before tooltip closes |