@iyulab/components 0.3.0 → 1.0.0

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

@@ -0,0 +1,95 @@
+# u-input
+
+```ts
+import '@iyulab/components/dist/components/input/UInput.js';
+```
+
+**Tag:** `u-input`
+
+Text input field with prefix/suffix slots and label. Add `u-option` children for combobox (autocomplete) mode. Form-associated.
+
+```html
+<u-input name="search" type="search" placeholder="Search..." clearable></u-input>
+
+<!-- With icon prefix -->
+<u-input name="email" type="email" label="Email" required>
+  <u-icon slot="prefix" lib="tabler" name="mail"></u-icon>
+</u-input>
+
+<!-- Combobox mode -->
+<u-input name="country" placeholder="Select country">
+  <u-option value="us">United States</u-option>
+  <u-option value="kr">South Korea</u-option>
+</u-input>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `prefix` | Leading content (icon, text) |
+| *(default)* | `u-option` elements for combobox mode |
+| `suffix` | Trailing content |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `variant` | `'outlined'\|'filled'\|'underlined'\|'borderless'` | `'outlined'` | ✓ | Visual style |
+| `type` | `'text'\|'password'\|'email'\|'tel'\|'url'\|'search'\|'number'\|'date'\|'time'`… | `'text'` | — | Input type |
+| `placeholder` | `string` | — | — | Placeholder text |
+| `clearable` | `boolean` | `false` | ✓ | Show clear button |
+| `minlength` | `number` | — | — | Minimum character count |
+| `maxlength` | `number` | — | — | Maximum character count |
+| `min` | `string` | — | — | Minimum value (number/date) |
+| `max` | `string` | — | — | Maximum value |
+| `step` | `number` | — | — | Step increment |
+| `pattern` | `string` | — | — | Regex validation pattern |
+| `autofocus` | `boolean` | `false` | — | Auto-focus on render |
+| `autocomplete` | `AutoFill` | — | — | Browser autocomplete |
+| `spellcheck` | `boolean` | `false` | — | Spellcheck |
+| `disabled` | `boolean` | `false` | ✓ | Disabled |
+| `readonly` | `boolean` | `false` | ✓ | Read-only |
+| `required` | `boolean` | `false` | ✓ | Required |
+| `invalid` | `boolean` | `false` | ✓ | Validation failed |
+| `name` | `string` | — | — | Form field name |
+| `value` | `string` | — | — | Current value |
+| `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()` | Clear value and validation state |
+| `focus(options?)` | Focus the input |
+| `blur()` | Blur the input |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `field` | Outer field wrapper |
+| `container` | Input area wrapper |
+| `input` | Native `<input>` element |
+| `popover` | Combobox dropdown |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--input-popover-min-width` | Combobox popover min-width |
+| `--input-popover-max-width` | Combobox popover max-width |
+| `--input-popover-min-height` | Combobox popover min-height |
+| `--input-popover-max-height` | Combobox popover max-height |

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

@@ -0,0 +1,106 @@
+# u-menu / u-menu-item
+
+```ts
+import '@iyulab/components/dist/components/menu/UMenu.js';
+import '@iyulab/components/dist/components/menu-item/UMenuItem.js';
+```
+
+**Tags:** `u-menu`, `u-menu-item`
+
+Keyboard-navigable menu. Supports single/multiple selection, highlight or checkmark indicator, and nested sub-menus.
+
+```html
+<u-menu selection="single" indicator="check">
+  <u-menu-item value="home">Home</u-menu-item>
+  <u-menu-item value="about">About</u-menu-item>
+  <u-divider></u-divider>
+  <u-menu-item value="settings">
+    <u-icon slot="prefix" lib="tabler" name="settings"></u-icon>
+    Settings
+    <!-- Nested sub-menu -->
+    <u-menu slot="children">
+      <u-menu-item value="profile">Profile</u-menu-item>
+      <u-menu-item value="security">Security</u-menu-item>
+    </u-menu>
+  </u-menu-item>
+</u-menu>
+```
+
+---
+
+## u-menu
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | `u-menu-item` or `u-divider` elements |
+
+### Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `selection` | `'none'\|'single'\|'multiple'` | `'none'` | ✓ | Selection mode |
+| `indicator` | `'highlight'\|'check'` | `'highlight'` | ✓ | Selected item indicator style |
+| `align` | `'left'\|'center'\|'right'` | `'left'` | ✓ | Item text alignment |
+| `loop` | `boolean` | `false` | ✓ | Keyboard navigation wraps around |
+| `inline` | `boolean` | `false` | ✓ | Horizontal layout |
+| `borderless` | `boolean` | `false` | ✓ | Remove border |
+
+### Events
+
+| Event | Description |
+|-------|-------------|
+| `change` | Fires when selection changes |
+
+### Getters
+
+| Getter | Type | Description |
+|--------|------|-------------|
+| `items` | `readonly UMenuItem[]` | All direct menu items |
+| `selectedItems` | `UMenuItem[]` | Currently selected items |
+
+### CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--menu-indent-size` | Indentation per nesting level |
+
+---
+
+## u-menu-item
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| `prefix` | Leading content |
+| *(default)* | Item label |
+| `suffix` | Trailing content |
+| `children` | Nested `u-menu` for sub-menu |
+
+### Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `value` | `string` | `''` | — | Unique identifier |
+| `disabled` | `boolean` | `false` | ✓ | Disable the item |
+| `selected` | `boolean` | `false` | ✓ | Selected state |
+| `expanded` | `boolean` | `false` | ✓ | Sub-menu expanded |
+| `indicator` | `'highlight'\|'check'` | `'highlight'` | ✓ | Selection indicator |
+| `align` | `'left'\|'center'\|'right'` | `'left'` | ✓ | Text alignment |
+
+### Events
+
+| Event | Description |
+|-------|-------------|
+| `pick` | Fires when item (with no children) is selected |
+
+### CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `header` | Item header row |
+| `content` | Label content area |
+| `submenu` | Inline sub-menu wrapper |
+| `popover` | Popover sub-menu wrapper |

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

@@ -0,0 +1,70 @@
+# u-option
+
+```ts
+import '@iyulab/components/dist/components/option/UOption.js';
+```
+
+**Tag:** `u-option`
+
+Selectable option item. Used inside `u-select`, `u-radio`, and `u-input` (combobox mode).
+
+```html
+<!-- Inside u-select -->
+<u-select name="color">
+  <u-option value="red">Red</u-option>
+  <u-option value="blue" selected>Blue</u-option>
+  <u-option value="green" disabled>Green</u-option>
+</u-select>
+
+<!-- With prefix icon -->
+<u-option value="admin">
+  <u-icon slot="prefix" lib="tabler" name="shield"></u-icon>
+  Admin
+</u-option>
+
+<!-- With marker -->
+<u-option value="check" marker="check">With checkmark</u-option>
+<u-option value="radio" marker="radio">Radio style</u-option>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `prefix` | Leading content |
+| *(default)* | Option label |
+| `suffix` | Trailing content |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `value` | `string` | `''` | — | Submitted value |
+| `disabled` | `boolean` | `false` | ✓ | Disable the option |
+| `selected` | `boolean` | `false` | ✓ | Selected state |
+| `marker` | `'radio'\|'check'` | — | ✓ | Show leading marker icon |
+
+## Methods
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `getText()` | `string` | Returns the visible text content of the option |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `content` | Main content wrapper |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--option-color-interactive` | Text color on hover |
+| `--option-background-color-interactive` | Background on hover |
+| `--option-color-active` | Text color when selected |
+| `--option-background-color-active` | Background when selected |
+| `--option-color-active-interactive` | Text color when selected + hovered |
+| `--option-background-color-active-interactive` | Background when selected + hovered |

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

@@ -0,0 +1,38 @@
+# u-panel
+
+```ts
+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.
+
+```html
+<!-- Standalone collapsible panel -->
+<u-panel collapsible>Content inside panel</u-panel>
+
+<!-- Inside u-tab-panel (matched by value) -->
+<u-tab-panel>
+  <u-tab value="tab1">Tab 1</u-tab>
+  <u-tab value="tab2">Tab 2</u-tab>
+  <u-panel value="tab1">Content for Tab 1</u-panel>
+  <u-panel value="tab2">Content for Tab 2</u-panel>
+</u-tab-panel>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Panel content |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `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/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 |