snice 2.5.4 → 3.1.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/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/date-picker.md

@@ -0,0 +1,75 @@
+# snice-date-picker
+
+Calendar-based date input with format options and validation.
+
+## Properties
+
+```typescript
+value: string = '';
+format: 'YYYY-MM-DD'|'DD/MM/YYYY'|'MM/DD/YYYY'|'DD.MM.YYYY'|'YYYY/MM/DD'|'DD-MM-YYYY'|'MM-DD-YYYY' = 'YYYY-MM-DD';
+placeholder: string = '';
+disabled: boolean = false;
+required: boolean = false;
+invalid: boolean = false;
+readonly: boolean = false;
+clearable: boolean = true;
+minDate: string = '';
+maxDate: string = '';
+size: 'small'|'medium'|'large' = 'medium';
+name: string = '';
+label: string = '';
+```
+
+## Methods
+
+- `focus()` - Focus input
+- `blur()` - Blur input
+- `clear()` - Clear value
+- `showCalendar()` - Open calendar
+- `hideCalendar()` - Close calendar
+
+## Events
+
+- `change` - {value, datePicker}
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-date-picker label="Select date"></snice-date-picker>
+
+<!-- With format -->
+<snice-date-picker format="DD/MM/YYYY"></snice-date-picker>
+
+<!-- With min/max -->
+<snice-date-picker min-date="2024-01-01" max-date="2024-12-31"></snice-date-picker>
+
+<!-- Clearable -->
+<snice-date-picker value="2024-03-15" clearable></snice-date-picker>
+
+<!-- Disabled/readonly -->
+<snice-date-picker disabled></snice-date-picker>
+<snice-date-picker readonly></snice-date-picker>
+
+<!-- Form integration -->
+<snice-date-picker name="birthdate" required></snice-date-picker>
+
+<!-- Event handling -->
+<snice-date-picker id="dp"></snice-date-picker>
+<script>
+document.querySelector('#dp').addEventListener('change', (e) => {
+  console.log('Date:', e.detail.value);
+});
+</script>
+```
+
+## Features
+
+- Form-associated custom element
+- Calendar popup with month/year navigation
+- 7 date format options
+- Min/max date validation
+- Clearable with X button
+- 3 sizes
+- Keyboard accessible
+- Invalid state styling

package/docs/ai/components/divider.md

@@ -0,0 +1,66 @@
+# snice-divider
+
+Separator line with optional text.
+
+## Properties
+
+```typescript
+orientation: 'horizontal'|'vertical' = 'horizontal';
+variant: 'solid'|'dashed'|'dotted' = 'solid';
+spacing: 'none'|'small'|'medium'|'large' = 'medium';
+align: 'start'|'center'|'end' = 'center';
+text: string = '';
+textBackground: string = '';
+color: string = '';
+capped: boolean = false;
+```
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-divider></snice-divider>
+
+<!-- With text -->
+<snice-divider text="OR"></snice-divider>
+
+<!-- Text alignment -->
+<snice-divider text="Start" align="start"></snice-divider>
+<snice-divider text="Center" align="center"></snice-divider>
+<snice-divider text="End" align="end"></snice-divider>
+
+<!-- Variants -->
+<snice-divider variant="solid"></snice-divider>
+<snice-divider variant="dashed"></snice-divider>
+<snice-divider variant="dotted"></snice-divider>
+
+<!-- Spacing -->
+<snice-divider spacing="none"></snice-divider>
+<snice-divider spacing="small"></snice-divider>
+<snice-divider spacing="medium"></snice-divider>
+<snice-divider spacing="large"></snice-divider>
+
+<!-- Vertical -->
+<div style="display: flex; height: 50px;">
+  <span>Left</span>
+  <snice-divider orientation="vertical"></snice-divider>
+  <span>Right</span>
+</div>
+
+<!-- Custom color -->
+<snice-divider color="#3b82f6"></snice-divider>
+
+<!-- Capped (rounded ends) -->
+<snice-divider capped></snice-divider>
+```
+
+## Features
+
+- Horizontal or vertical
+- 3 line styles (solid/dashed/dotted)
+- Optional text label
+- Text alignment (start/center/end)
+- 4 spacing options
+- Custom color
+- Capped ends
+- Custom text background

package/docs/ai/components/drawer.md

@@ -0,0 +1,80 @@
+# snice-drawer
+
+Slide-out panel from any viewport side with focus trap and dismissal options.
+
+## Properties
+
+```typescript
+open: boolean = false;                         // Visibility state
+position: 'left'|'right'|'top'|'bottom' = 'left';
+size: 'small'|'medium'|'large'|'xl'|'xxl'|'xxxl'|'full' = 'medium';
+noBackdrop: boolean = false;                   // Hide backdrop overlay
+noBackdropDismiss: boolean = false;            // Prevent backdrop click close
+noEscapeDismiss: boolean = false;              // Prevent Escape key close
+noFocusTrap: boolean = false;                  // Disable focus trapping
+persistent: boolean = false;                   // Hide close button, prevent all dismiss
+pushContent: boolean = false;                  // Push main content instead of overlay
+contained: boolean = false;                    // Position relative to parent
+```
+
+## Methods
+
+```typescript
+show()    // Open drawer
+hide()    // Close drawer
+toggle()  // Toggle drawer
+```
+
+## Events
+
+```typescript
+'@snice/drawer-open'   // { drawer }
+'@snice/drawer-close'  // { drawer }
+```
+
+## Slots
+
+```html
+<snice-drawer>
+  <h2 slot="title">Title</h2>
+  <div>Body content</div>
+  <div slot="footer">Actions</div>
+</snice-drawer>
+```
+
+## Usage
+
+```html
+<snice-drawer id="menu" position="left">
+  <h2 slot="title">Menu</h2>
+  <nav>
+    <a href="/">Home</a>
+    <a href="/about">About</a>
+  </nav>
+</snice-drawer>
+```
+
+```typescript
+const drawer = document.querySelector('snice-drawer');
+drawer.show();
+drawer.hide();
+drawer.toggle();
+```
+
+## Features
+
+- Slides from any edge (left, right, top, bottom)
+- Multiple size options
+- Focus trap with Tab navigation
+- Focus restoration on close
+- Backdrop click to close
+- Escape key to close
+- Push content mode
+- Persistent mode (no close button)
+- ARIA attributes (role, aria-modal, aria-hidden)
+
+## Notes
+
+- Push content targets first `<main>` or `<body>`
+- Contained mode positions relative to parent
+- Default dismissal: close button, backdrop click, Escape key