@iyulab/components 0.4.0 → 1.0.0

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

@@ -0,0 +1,62 @@
+# u-popover
+
+```ts
+import '@iyulab/components/dist/components/popover/UPopover.js';
+```
+
+**Tag:** `u-popover`
+
+Anchored floating panel attached to a `for` target element. Trigger and dismiss behavior are fully configurable.
+
+```html
+<u-button id="btn">Open Popover</u-button>
+
+<u-popover for="#btn" placement="bottom" trigger="click">
+  <div style="padding: 1rem;">Popover content</div>
+</u-popover>
+
+<!-- Hover tooltip-like -->
+<u-popover for="#btn" trigger="hover" placement="top" shift arrow>
+  Quick info
+</u-popover>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Popover content |
+
+## Properties
+
+Inherits all `UFloatingElement` properties (see [floating.md](../extensions/floating.md)), plus:
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `for` | `string` | — | ✓ | CSS selector of the anchor element |
+| `open` | `boolean` | `false` | ✓ | Visibility state |
+| `disabled` | `boolean` | `false` | ✓ | Disable opening |
+| `placement` | `Placement` | — | — | Preferred placement (`top`, `bottom`, `left`, `right`, `*-start`, `*-end`) |
+| `offset` | `OffsetOptions` | `0` | — | Distance from anchor |
+| `shift` | `boolean` | `false` | — | Auto-shift to stay in viewport |
+| `arrow` | `boolean` | `false` | — | Show arrow pointing to anchor |
+| `showDelay` | `number` | `0` | — | Open delay in ms |
+| `hideDelay` | `number` | `0` | — | Close delay in ms |
+| `trigger` | `'click'\|'contextmenu'\|'hover'\|'focus'\|'manual'` | `'click'` | ✓ | Open trigger |
+| `dismiss` | `string[]` | `['click','escape','scroll','resize']` | ✓ | Close triggers |
+| `autofocus` | `boolean` | `false` | ✓ | Focus first focusable element on open |
+
+## Events
+
+| Event | Cancelable | Description |
+|-------|------------|-------------|
+| `show` | ✓ | Before popover opens |
+| `hide` | ✓ | Before popover closes |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `focusTo(index)` | Move focus to nth focusable element inside popover |

package/skills/iyulab-components/references/components/progress-bar.md

@@ -0,0 +1,61 @@
+# u-progress-bar
+
+```ts
+import '@iyulab/components/dist/components/progress-bar/UProgressBar.js';
+```
+
+**Tag:** `u-progress-bar`
+
+Linear progress indicator. Supports buffer, segments, striped effect, and indeterminate state.
+
+```html
+<u-progress-bar value="60"></u-progress-bar>
+
+<u-progress-bar value="40" buffer="70" status="info"></u-progress-bar>
+
+<u-progress-bar value="30" striped rounded indeterminate></u-progress-bar>
+
+<!-- Segmented -->
+<u-progress-bar value="75" segments="5" status="success"></u-progress-bar>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Content overlaid on top of the bar |
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `number` | `0` | Current progress value |
+| `min` | `number` | `0` | Minimum value |
+| `max` | `number` | `100` | Maximum value |
+| `buffer` | `number` | — | Buffer level (secondary fill) |
+| `indeterminate` | `boolean` | `false` | Animated indeterminate state |
+| `striped` | `boolean` | `false` | Striped fill pattern |
+| `rounded` | `boolean` | `false` | Rounded bar ends |
+| `status` | `'default'\|'success'\|'warning'\|'error'\|'info'` | `'default'` | Color preset |
+| `segments` | `number` | `0` | Split into N segments |
+| `segmentGap` | `number` | `3` | Gap between segments in px |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `buffer` | Buffer fill track |
+| `indicator` | Progress fill |
+| `segments` | Segment dividers overlay |
+| `content` | Default slot wrapper |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--progress-bar-height` | Bar height |
+| `--progress-bar-color` | Fill color |
+| `--progress-bar-track-color` | Track (background) color |
+| `--progress-bar-buffer-color` | Buffer fill color |

package/skills/iyulab-components/references/components/progress-ring.md

@@ -0,0 +1,58 @@
+# u-progress-ring
+
+```ts
+import '@iyulab/components/dist/components/progress-ring/UProgressRing.js';
+```
+
+**Tag:** `u-progress-ring`
+
+Circular progress indicator. Supports buffer, segments, and indeterminate state.
+
+```html
+<u-progress-ring value="75"></u-progress-ring>
+
+<u-progress-ring value="50" status="success" rounded>
+  50%
+</u-progress-ring>
+
+<u-progress-ring indeterminate></u-progress-ring>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Content rendered in the center of the ring |
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `number` | `0` | Current progress value |
+| `min` | `number` | `0` | Minimum value |
+| `max` | `number` | `100` | Maximum value |
+| `buffer` | `number` | — | Buffer level |
+| `indeterminate` | `boolean` | `false` | Animated indeterminate state |
+| `rounded` | `boolean` | `false` | Round stroke line caps |
+| `status` | `'default'\|'success'\|'warning'\|'error'\|'info'` | `'default'` | Color preset |
+| `segments` | `number` | `0` | Split into N arc segments |
+| `segmentGap` | `number` | `2` | Gap between segments (path length units) |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `svg` | Root SVG element |
+| `content` | Center slot wrapper |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--progress-ring-size` | Outer diameter |
+| `--progress-ring-color` | Arc fill color |
+| `--progress-ring-track-width` | Stroke width |
+| `--progress-ring-track-color` | Track (background arc) color |
+| `--progress-ring-buffer-color` | Buffer arc color |

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

@@ -0,0 +1,67 @@
+# u-radio
+
+```ts
+import '@iyulab/components/dist/components/radio/URadio.js';
+import '@iyulab/components/dist/components/option/UOption.js';
+```
+
+**Tag:** `u-radio`
+
+Radio group built from `u-option` children. Form-associated.
+
+```html
+<u-radio name="size" value="md">
+  <u-option value="sm">Small</u-option>
+  <u-option value="md">Medium</u-option>
+  <u-option value="lg">Large</u-option>
+</u-radio>
+
+<!-- Button style, horizontal -->
+<u-radio name="plan" type="button" orientation="horizontal" variant="outlined">
+  <u-option value="free">Free</u-option>
+  <u-option value="pro">Pro</u-option>
+  <u-option value="enterprise">Enterprise</u-option>
+</u-radio>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | `u-option` elements |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `value` | `string` | — | — | Currently selected value |
+| `type` | `'default'\|'button'` | `'default'` | ✓ | `button` renders options as toggle buttons |
+| `variant` | `'filled'\|'outlined'` | `'filled'` | ✓ | Visual style |
+| `orientation` | `'vertical'\|'horizontal'` | `'vertical'` | ✓ | Layout direction |
+| `disabled` | `boolean` | `false` | ✓ | Disable all options |
+| `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 selection changes |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `validate()` | Validate; sets `invalid` |
+| `reset()` | Reset selection |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `field` | Outer field wrapper |
+| `container` | Options container |

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

@@ -0,0 +1,74 @@
+# u-rating
+
+```ts
+import '@iyulab/components/dist/components/rating/URating.js';
+```
+
+**Tag:** `u-rating`
+
+Star/custom-symbol rating input. Supports fractional precision and custom symbols via slots. Form-associated.
+
+```html
+<u-rating name="score" value="3"></u-rating>
+
+<!-- Half-star precision -->
+<u-rating name="score" value="3.5" precision="0.5" max="5"></u-rating>
+
+<!-- Custom symbols -->
+<u-rating name="priority" max="3">
+  <u-icon slot="symbol" lib="tabler" name="heart:filled"></u-icon>
+  <u-icon slot="symbol-off" lib="tabler" name="heart"></u-icon>
+</u-rating>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `symbol` | Active (filled) symbol |
+| `symbol-off` | Inactive (empty) symbol |
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `number` | — | Current rating value |
+| `min` | `number` | `0` | Minimum value |
+| `max` | `number` | `5` | Maximum value (= number of symbols) |
+| `precision` | `number` | `1` | Step size (e.g. `0.5` for half stars) |
+| `disabled` | `boolean` | `false` | Disable interaction |
+| `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` | Symbols container |
+| `symbol` | Individual symbol wrapper |
+| `symbol-fg` | Filled portion overlay |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--rating-symbol-color` | Active symbol color |
+| `--rating-symbol-off-color` | Inactive symbol color |

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 |