@iyulab/components 0.4.0 → 1.0.0

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

@@ -0,0 +1,56 @@
+# u-divider
+
+```ts
+import '@iyulab/components/dist/components/divider/UDivider.js';
+```
+
+**Tag:** `u-divider`
+
+Horizontal or vertical separator line. Slot content is overlaid as an inline label.
+
+```html
+<u-divider></u-divider>
+
+<u-divider>OR</u-divider>
+
+<u-divider variant="dashed" align="start">Section</u-divider>
+
+<!-- Vertical -->
+<div style="display:flex; height:40px;">
+  <span>Left</span>
+  <u-divider vertical></u-divider>
+  <span>Right</span>
+</div>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Optional label overlaid on the divider line |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `vertical` | `boolean` | `false` | ✓ | Vertical orientation |
+| `variant` | `'solid'\|'dashed'\|'dotted'` | `'solid'` | ✓ | Line style |
+| `align` | `'start'\|'center'\|'end'` | `'center'` | ✓ | Label alignment |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `line-start` | Line segment before the label |
+| `label` | Label wrapper |
+| `line-end` | Line segment after the label |
+
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--divider-size` | Line thickness |
+| `--divider-color` | Line color |
+| `--divider-spacing` | Spacing around the label |

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

@@ -0,0 +1,63 @@
+# u-drawer
+
+```ts
+import '@iyulab/components/dist/components/drawer/UDrawer.js';
+```
+
+**Tag:** `u-drawer`
+
+Side panel that slides in from any screen edge. Extends `UOverlayElement` (focus-trap, scroll-lock, close policy).
+
+```html
+<u-drawer id="drawer" placement="right" closable>
+  <span slot="header">Settings</span>
+  <p>Drawer content here.</p>
+  <u-button slot="footer" @click=${() => drawer.hide()}>Close</u-button>
+</u-drawer>
+
+<u-button @click=${() => drawer.show()}>Open Drawer</u-button>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `header` | Drawer header |
+| *(default)* | Drawer body content |
+| `footer` | Drawer footer |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `open` | `boolean` | `false` | ✓ | Show/hide state |
+| `closable` | `boolean` | `false` | ✓ | Show close button |
+| `placement` | `'left'\|'right'\|'top'\|'bottom'` | `'left'` | ✓ | Slide-in direction |
+| `mode` | `'modal'\|'non-modal'` | `'modal'` | ✓ | Focus-trap mode |
+| `contained` | `boolean` | `false` | ✓ | Contained to parent element |
+| `closeOn` | `string[]` | `['escape','backdrop','button']` | ✓ | Close triggers |
+
+## Events
+
+| Event | Cancelable | Description |
+|-------|------------|-------------|
+| `show` | ✓ | Before drawer opens |
+| `hide` | ✓ | Before drawer closes |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `show()` | Open the drawer |
+| `hide()` | Close the drawer |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `panel` | Drawer panel |
+| `header` | Header area |
+| `body` | Body area |
+| `close-btn` | Close button |

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

@@ -0,0 +1,42 @@
+# u-field
+
+```ts
+import '@iyulab/components/dist/components/field/UField.js';
+```
+
+**Tag:** `u-field`
+
+Layout wrapper for form controls. Renders label, required marker, description text, and validation message around any control.
+
+```html
+<u-field label="Email" required description="We'll never share your email.">
+  <u-input type="email" name="email"></u-input>
+</u-field>
+
+<u-field label="Role" invalid validation-message="Please select a role.">
+  <u-select name="role">
+    <u-option value="admin">Admin</u-option>
+  </u-select>
+  <u-button slot="label-aside" variant="link">Learn more</u-button>
+</u-field>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | The form control to wrap |
+| `label-aside` | Content placed to the right of the label |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `label` | `string` | — | — | Label text |
+| `description` | `string` | — | — | Helper text shown below the control |
+| `validationMessage` | `string` | — | — | Error message shown when `invalid` |
+| `required` | `boolean` | `false` | ✓ | Show required marker |
+| `invalid` | `boolean` | `false` | ✓ | Show validation error state |
+| `disabled` | `boolean` | `false` | ✓ | Disable state forwarding |

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

@@ -0,0 +1,68 @@
+# u-form
+
+```ts
+import '@iyulab/components/dist/components/form/UForm.js';
+```
+
+**Tag:** `u-form`
+
+Form group with two-way model binding. Wraps `UFormControlElement`-based controls and observes value changes.
+
+```html
+<u-form id="form">
+  <u-input name="email" type="email" required></u-input>
+  <u-select name="role">
+    <u-option value="admin">Admin</u-option>
+    <u-option value="viewer">Viewer</u-option>
+  </u-select>
+</u-form>
+```
+
+```ts
+const form = document.querySelector('#form') as UForm;
+
+// Set initial model values
+form.model = { email: 'user@example.com', role: 'viewer' };
+
+// Listen for changes
+form.addEventListener('change', () => {
+  console.log(form.model); // { email: '...', role: '...' }
+});
+
+// Validate all controls
+if (form.validate()) {
+  submitData(form.model);
+}
+
+// Reset all controls
+form.reset();
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Form control elements |
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `model` | `Record<string, unknown>` | — | Two-way bound data model |
+| `includes` | `string[]` | `[]` | Only include these field names (empty = all) |
+| `excludes` | `string[]` | `[]` | Exclude these field names |
+
+## Events
+
+| Event | Description |
+|-------|-------------|
+| `change` | Fires when any control value changes |
+
+## Methods
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `validate()` | `boolean` | Validate all child controls |
+| `reset()` | `void` | Reset all child controls |

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

@@ -0,0 +1,56 @@
+# u-icon-button
+
+```ts
+import '@iyulab/components/dist/components/icon-button/UIconButton.js';
+```
+
+**Tag:** `u-icon-button`
+
+Square icon-only button with a built-in tooltip (shown from the default slot). Renders as `<a>` when `href` is set.
+
+```html
+<u-icon-button lib="tabler" name="trash">
+  Delete
+</u-icon-button>
+
+<u-icon-button variant="outlined" rounded lib="heroicons" name="plus:solid">
+  Add item
+</u-icon-button>
+
+<u-icon-button href="/settings" lib="tabler" name="settings">
+  Settings
+</u-icon-button>
+```
+
+---
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| *(default)* | Tooltip content (shown on hover) |
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `variant` | `'solid'\|'surface'\|'filled'\|'outlined'\|'ghost'\|'link'` | `'ghost'` | ✓ | Button variant |
+| `rounded` | `boolean` | `false` | ✓ | Circular shape |
+| `disabled` | `boolean` | `false` | ✓ | Disable the button |
+| `loading` | `boolean` | `false` | ✓ | Loading state |
+| `href` | `string` | — | — | Link URL (renders as `<a>`) |
+| `target` | `string` | — | — | Link `target` |
+| `rel` | `string` | — | — | Link `rel` |
+| `lib` | `string` | — | — | Icon library |
+| `name` | `string` | — | — | Icon name |
+| `src` | `string` | — | — | Raw SVG source |
+| `tooltipPlacement` | `Placement` | `'top'` | — | Tooltip position |
+| `tooltipOffset` | `OffsetOptions` | `4` | — | Tooltip offset from button |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `button` | Inner `<button>` or `<a>` |
+| `icon` | `u-icon` element |
+| `tooltip` | Built-in `u-tooltip` element |

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

@@ -0,0 +1,49 @@
+# u-icon
+
+```ts
+import '@iyulab/components/dist/components/icon/UIcon.js';
+```
+
+**Tag:** `u-icon`
+
+Renders an SVG icon by name from a registered icon library. Inline `src` also accepted.
+
+```html
+<!-- Built-in -->
+<u-icon lib="internal" name="check-circle-fill"></u-icon>
+
+<!-- Tabler (CDN) -->
+<u-icon lib="tabler" name="home"></u-icon>
+<u-icon lib="tabler" name="home:filled"></u-icon>
+
+<!-- Heroicons -->
+<u-icon lib="heroicons" name="academic-cap:solid"></u-icon>
+
+<!-- Lucide -->
+<u-icon lib="lucide" name="activity"></u-icon>
+
+<!-- Bootstrap Icons -->
+<u-icon lib="bootstrap" name="alarm"></u-icon>
+<u-icon lib="bootstrap" name="alarm:filled"></u-icon>
+
+<!-- Inline SVG -->
+<u-icon src='<svg ...>...</svg>'></u-icon>
+```
+
+For registering custom libraries, see [icons.md](../utilities/icons.md).
+
+---
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `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`) |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `svg` | The rendered `<svg>` element |

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 |