snice 2.5.4 → 3.2.0

package/docs/ai/components/badge.md

@@ -0,0 +1,69 @@
+# snice-badge
+
+Notification indicators and status markers.
+
+## Properties
+
+```typescript
+content: string = '';
+count: number = 0;
+max: number = 99;
+dot: boolean = false;
+variant: 'default'|'primary'|'success'|'warning'|'error'|'info' = 'default';
+position: 'top-right'|'top-left'|'bottom-right'|'bottom-left' = 'top-right';
+inline: boolean = false;
+size: 'small'|'medium'|'large' = 'medium';
+pulse: boolean = false;
+offset: number = 0;
+```
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-badge content="New"></snice-badge>
+
+<!-- Count badge -->
+<snice-badge count="5"></snice-badge>
+
+<!-- Max count (99+) -->
+<snice-badge count="150" max="99"></snice-badge>
+
+<!-- Dot indicator -->
+<snice-badge dot></snice-badge>
+
+<!-- On element -->
+<div style="position: relative; display: inline-block;">
+  <button>Messages</button>
+  <snice-badge count="3" variant="error"></snice-badge>
+</div>
+
+<!-- Variants -->
+<snice-badge content="New" variant="primary"></snice-badge>
+<snice-badge content="✓" variant="success"></snice-badge>
+<snice-badge content="!" variant="warning"></snice-badge>
+<snice-badge content="×" variant="error"></snice-badge>
+<snice-badge content="i" variant="info"></snice-badge>
+
+<!-- Positions -->
+<snice-badge count="5" position="top-right"></snice-badge>
+<snice-badge count="5" position="top-left"></snice-badge>
+<snice-badge count="5" position="bottom-right"></snice-badge>
+<snice-badge count="5" position="bottom-left"></snice-badge>
+
+<!-- Inline -->
+<p>Status <snice-badge inline content="Active"></snice-badge></p>
+
+<!-- Pulse animation -->
+<snice-badge dot pulse variant="error"></snice-badge>
+```
+
+## Features
+
+- 6 color variants
+- Count with max limit (shows 99+ style)
+- Dot mode for indicators
+- 4 positioning options
+- Inline or positioned
+- Pulse animation
+- Custom offset

package/docs/ai/components/banner.md

@@ -0,0 +1,84 @@
+# snice-banner
+
+Fixed position notification banner.
+
+## Properties
+
+```typescript
+variant: 'info'|'success'|'warning'|'error' = 'info';
+position: 'top'|'bottom' = 'top';
+message: string = '';
+dismissible: boolean = true;
+icon: string = '';
+actionText: string = '';
+open: boolean = false;
+```
+
+## Methods
+
+- `show()` - Show banner
+- `hide()` - Hide banner
+- `toggle()` - Toggle banner
+
+## Events
+
+- `open` - {banner}
+- `close` - {banner}
+- `action` - {banner}
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-banner message="This is an info message" open></snice-banner>
+
+<!-- Variants -->
+<snice-banner variant="info" message="Info"></snice-banner>
+<snice-banner variant="success" message="Success"></snice-banner>
+<snice-banner variant="warning" message="Warning"></snice-banner>
+<snice-banner variant="error" message="Error"></snice-banner>
+
+<!-- Position -->
+<snice-banner position="top" message="Top banner" open></snice-banner>
+<snice-banner position="bottom" message="Bottom banner" open></snice-banner>
+
+<!-- With action -->
+<snice-banner
+  message="Update available"
+  action-text="Update Now"
+  open
+></snice-banner>
+
+<!-- Not dismissible -->
+<snice-banner
+  message="Important notice"
+  dismissible="false"
+  open
+></snice-banner>
+
+<!-- Custom icon -->
+<snice-banner
+  icon="🎉"
+  message="Celebration!"
+  open
+></snice-banner>
+
+<!-- API -->
+<snice-banner id="banner" message="Hello"></snice-banner>
+<script>
+const banner = document.querySelector('#banner');
+banner.show();
+banner.hide();
+banner.toggle();
+</script>
+```
+
+## Features
+
+- 4 variants (info, success, warning, error)
+- Top or bottom positioning
+- Dismissible with close button
+- Optional action button
+- Smooth slide animation
+- Fixed positioning
+- Accessible (role=alert)

package/docs/ai/components/breadcrumbs.md

@@ -0,0 +1,74 @@
+# snice-breadcrumbs & snice-crumb
+
+Navigation breadcrumb trail.
+
+## snice-breadcrumbs
+
+```typescript
+items: BreadcrumbItem[] = [];
+separator: '/'|'>'|'»'|'•'|'|' = '/';
+size: 'small'|'medium'|'large' = 'medium';
+maxItems: number = 0;  // 0 = show all
+```
+
+**Methods:**
+- `setItems(items)` - Update breadcrumb items
+
+**BreadcrumbItem:**
+```typescript
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  icon?: string;
+  iconImage?: string;
+  active?: boolean;
+}
+```
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-breadcrumbs></snice-breadcrumbs>
+
+<script>
+const breadcrumbs = document.querySelector('snice-breadcrumbs');
+breadcrumbs.items = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products' },
+  { label: 'Laptop', active: true }
+];
+</script>
+
+<!-- Or use crumb elements -->
+<snice-breadcrumbs>
+  <snice-crumb href="/" label="Home"></snice-crumb>
+  <snice-crumb href="/products" label="Products"></snice-crumb>
+  <snice-crumb label="Laptop" active></snice-crumb>
+</snice-breadcrumbs>
+
+<!-- Custom separator -->
+<snice-breadcrumbs separator=">"></snice-breadcrumbs>
+
+<!-- With icons -->
+<snice-breadcrumbs></snice-breadcrumbs>
+<script>
+breadcrumbs.items = [
+  { label: 'Home', href: '/', icon: '🏠' },
+  { label: 'Products', href: '/products', icon: '📦' }
+];
+</script>
+
+<!-- Max items (collapse middle) -->
+<snice-breadcrumbs max-items="3"></snice-breadcrumbs>
+```
+
+## Features
+
+- Item array or crumb elements
+- 5 separator options
+- 3 sizes
+- Max items with collapse
+- Icons support
+- Active state
+- Accessible: nav role, aria-label

package/docs/ai/components/button.md

@@ -0,0 +1,75 @@
+# snice-button
+
+Interactive button with variants and states.
+
+## Properties
+
+```typescript
+variant: 'default'|'primary'|'success'|'warning'|'danger'|'text' = 'default';
+size: 'small'|'medium'|'large' = 'medium';
+disabled: boolean = false;
+loading: boolean = false;
+outline: boolean = false;
+pill: boolean = false;
+circle: boolean = false;
+href: string = '';
+target: string = '';
+download: string = '';
+icon: string = '';
+iconPlacement: 'start'|'end' = 'start';
+```
+
+## Methods
+
+- `focus(options?)` - Focus button
+- `blur()` - Blur button
+- `click()` - Programmatic click
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-button>Click me</snice-button>
+
+<!-- Variants -->
+<snice-button variant="primary">Primary</snice-button>
+<snice-button variant="success">Success</snice-button>
+<snice-button variant="warning">Warning</snice-button>
+<snice-button variant="danger">Danger</snice-button>
+<snice-button variant="text">Text</snice-button>
+
+<!-- Sizes -->
+<snice-button size="small">Small</snice-button>
+<snice-button size="medium">Medium</snice-button>
+<snice-button size="large">Large</snice-button>
+
+<!-- States -->
+<snice-button disabled>Disabled</snice-button>
+<snice-button loading>Loading...</snice-button>
+
+<!-- Styles -->
+<snice-button outline>Outline</snice-button>
+<snice-button pill>Pill</snice-button>
+<snice-button circle icon="×"></snice-button>
+
+<!-- With icon -->
+<snice-button icon="→">Next</snice-button>
+<snice-button icon="←" icon-placement="start">Back</snice-button>
+
+<!-- As link -->
+<snice-button href="/page">Link</snice-button>
+<snice-button href="/file.pdf" download>Download</snice-button>
+```
+
+## Features
+
+- 6 color variants
+- 3 sizes
+- Outline style
+- Pill (rounded) shape
+- Circle (icon only) shape
+- Loading state with spinner
+- Disabled state
+- Link mode (href)
+- Icon support with placement
+- Download attribute support

package/docs/ai/components/card.md

@@ -0,0 +1,61 @@
+# snice-card
+
+Container for grouped content.
+
+## Properties
+
+```typescript
+variant: 'elevated'|'bordered'|'flat' = 'elevated';
+size: 'small'|'medium'|'large' = 'medium';
+clickable: boolean = false;
+selected: boolean = false;
+disabled: boolean = false;
+```
+
+## Slots
+
+- `header` - Card header
+- `footer` - Card footer
+- default - Card body content
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-card>
+  <p>Card content</p>
+</snice-card>
+
+<!-- With header and footer -->
+<snice-card>
+  <div slot="header">Card Title</div>
+  <p>Card body content</p>
+  <div slot="footer">
+    <button>Action</button>
+  </div>
+</snice-card>
+
+<!-- Variants -->
+<snice-card variant="elevated">Elevated (shadow)</snice-card>
+<snice-card variant="bordered">Bordered</snice-card>
+<snice-card variant="flat">Flat</snice-card>
+
+<!-- Sizes -->
+<snice-card size="small">Small padding</snice-card>
+<snice-card size="medium">Medium padding</snice-card>
+<snice-card size="large">Large padding</snice-card>
+
+<!-- Interactive -->
+<snice-card clickable>Click me</snice-card>
+<snice-card clickable selected>Selected</snice-card>
+<snice-card clickable disabled>Disabled</snice-card>
+```
+
+## Features
+
+- 3 style variants (elevated/bordered/flat)
+- 3 size options for padding
+- Clickable with hover/focus states
+- Selected state
+- Disabled state
+- Header/footer slots

package/docs/ai/components/checkbox.md

@@ -0,0 +1,74 @@
+# snice-checkbox
+
+Form checkbox input with indeterminate state.
+
+## Properties
+
+```typescript
+checked: boolean = false;
+indeterminate: boolean = false;
+disabled: boolean = false;
+required: boolean = false;
+invalid: boolean = false;
+size: 'small'|'medium'|'large' = 'medium';
+name: string = '';
+value: string = 'on';
+label: string = '';
+```
+
+## Methods
+
+- `focus()` - Focus checkbox
+- `blur()` - Blur checkbox
+- `click()` - Programmatic click
+
+## Events
+
+- `change` - {checked, indeterminate, checkbox}
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-checkbox label="Accept terms"></snice-checkbox>
+
+<!-- Checked -->
+<snice-checkbox label="Enabled" checked></snice-checkbox>
+
+<!-- Indeterminate (partial selection) -->
+<snice-checkbox label="Select all" indeterminate></snice-checkbox>
+
+<!-- Disabled -->
+<snice-checkbox label="Disabled" disabled></snice-checkbox>
+
+<!-- Required -->
+<snice-checkbox label="Required" required></snice-checkbox>
+
+<!-- Invalid -->
+<snice-checkbox label="Invalid" invalid></snice-checkbox>
+
+<!-- Sizes -->
+<snice-checkbox label="Small" size="small"></snice-checkbox>
+<snice-checkbox label="Medium" size="medium"></snice-checkbox>
+<snice-checkbox label="Large" size="large"></snice-checkbox>
+
+<!-- Form integration -->
+<snice-checkbox name="newsletter" value="yes" label="Subscribe"></snice-checkbox>
+
+<!-- Event handling -->
+<snice-checkbox id="cb"></snice-checkbox>
+<script>
+document.querySelector('#cb').addEventListener('change', (e) => {
+  console.log('Checked:', e.detail.checked);
+});
+</script>
+```
+
+## Features
+
+- Form-associated custom element
+- Indeterminate state
+- 3 sizes
+- Keyboard accessible
+- Change events
+- Invalid state styling

package/docs/ai/components/chip.md

@@ -0,0 +1,73 @@
+# snice-chip
+
+Compact element for tags, filters, or selections.
+
+## Properties
+
+```typescript
+label: string = '';
+variant: 'default'|'primary'|'success'|'warning'|'error'|'info' = 'default';
+size: 'small'|'medium'|'large' = 'medium';
+removable: boolean = false;
+selected: boolean = false;
+disabled: boolean = false;
+icon: string = '';
+avatar: string = '';
+```
+
+## Events
+
+- `click` - Chip clicked
+- `remove` - Remove button clicked
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-chip label="Tag"></snice-chip>
+
+<!-- Variants -->
+<snice-chip label="Default" variant="default"></snice-chip>
+<snice-chip label="Primary" variant="primary"></snice-chip>
+<snice-chip label="Success" variant="success"></snice-chip>
+<snice-chip label="Warning" variant="warning"></snice-chip>
+<snice-chip label="Error" variant="error"></snice-chip>
+<snice-chip label="Info" variant="info"></snice-chip>
+
+<!-- Removable -->
+<snice-chip label="Removable" removable></snice-chip>
+
+<!-- Selected state -->
+<snice-chip label="Selected" selected></snice-chip>
+
+<!-- Disabled -->
+<snice-chip label="Disabled" disabled></snice-chip>
+
+<!-- With icon -->
+<snice-chip label="Favorite" icon="★"></snice-chip>
+
+<!-- With avatar -->
+<snice-chip label="John Doe" avatar="/user.jpg"></snice-chip>
+
+<!-- Sizes -->
+<snice-chip label="Small" size="small"></snice-chip>
+<snice-chip label="Medium" size="medium"></snice-chip>
+<snice-chip label="Large" size="large"></snice-chip>
+
+<!-- Events -->
+<snice-chip id="chip" label="Click me" removable></snice-chip>
+<script>
+const chip = document.querySelector('#chip');
+chip.addEventListener('click', () => console.log('Clicked'));
+chip.addEventListener('remove', () => chip.remove());
+</script>
+```
+
+## Features
+
+- 6 color variants
+- 3 sizes
+- Removable with X button
+- Selected state
+- Icon or avatar
+- Click and remove events

package/docs/ai/components/color-display.md

@@ -0,0 +1,48 @@
+# snice-color-display
+
+Displays colors with swatch and label.
+
+## Properties
+
+```typescript
+value: string = '';
+format: 'hex'|'rgb'|'hsl' = 'hex';
+showSwatch: boolean = true;
+showLabel: boolean = true;
+swatchSize: 'small'|'medium'|'large' = 'medium';
+label: string = '';
+```
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-color-display value="#3b82f6"></snice-color-display>
+
+<!-- Formats -->
+<snice-color-display value="#ff0000" format="hex"></snice-color-display>
+<snice-color-display value="#ff0000" format="rgb"></snice-color-display>
+<snice-color-display value="#ff0000" format="hsl"></snice-color-display>
+
+<!-- Sizes -->
+<snice-color-display value="#10b981" swatch-size="small"></snice-color-display>
+<snice-color-display value="#10b981" swatch-size="medium"></snice-color-display>
+<snice-color-display value="#10b981" swatch-size="large"></snice-color-display>
+
+<!-- Custom label -->
+<snice-color-display value="#ef4444" label="Error Red"></snice-color-display>
+
+<!-- Swatch only -->
+<snice-color-display value="#3b82f6" show-label="false"></snice-color-display>
+
+<!-- Label only -->
+<snice-color-display value="#3b82f6" show-swatch="false"></snice-color-display>
+```
+
+## Features
+
+- Auto-converts hex to RGB/HSL
+- 3 swatch sizes (16px, 24px, 32px)
+- Custom labels supported
+- Swatch and label toggle
+- Monospace font for color values

package/docs/ai/components/color-picker.md

@@ -0,0 +1,75 @@
+# snice-color-picker
+
+Color picker with format conversion and presets.
+
+## Properties
+
+```typescript
+value: string = '#000000';
+format: 'hex'|'rgb'|'hsl' = 'hex';
+size: 'small'|'medium'|'large' = 'medium';
+label: string = '';
+helperText: string = '';
+errorText: string = '';
+disabled: boolean = false;
+required: boolean = false;
+invalid: boolean = false;
+name: string = '';
+showInput: boolean = true;
+showPresets: boolean = false;
+presets: string[] = [...];
+```
+
+## Methods
+
+- `focus()` - Focus picker
+- `blur()` - Blur picker
+
+## Events
+
+- `input` - {value, colorPicker}
+- `change` - {value, colorPicker}
+- `focus` - {colorPicker}
+- `blur` - {colorPicker}
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-color-picker label="Color" value="#ff0000"></snice-color-picker>
+
+<!-- Formats -->
+<snice-color-picker format="hex"></snice-color-picker>
+<snice-color-picker format="rgb"></snice-color-picker>
+<snice-color-picker format="hsl"></snice-color-picker>
+
+<!-- With presets -->
+<snice-color-picker show-presets></snice-color-picker>
+
+<!-- No input -->
+<snice-color-picker show-input="false"></snice-color-picker>
+
+<!-- Sizes -->
+<snice-color-picker size="small"></snice-color-picker>
+<snice-color-picker size="medium"></snice-color-picker>
+<snice-color-picker size="large"></snice-color-picker>
+
+<!-- Events -->
+<snice-color-picker id="picker"></snice-color-picker>
+<script>
+const picker = document.querySelector('#picker');
+picker.addEventListener('@snice/color-picker-change', (e) => {
+  console.log('Color:', e.detail.value);
+});
+</script>
+```
+
+## Features
+
+- Form-associated custom element
+- Native color picker integration
+- 3 color formats (hex, rgb, hsl)
+- Format conversion
+- Color presets
+- 3 sizes
+- Accessible