snice 2.5.4 → 3.2.0

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

package/docs/ai/components/empty-state.md

@@ -0,0 +1,72 @@
+# snice-empty-state
+
+Empty state placeholder for no data scenarios.
+
+## Properties
+
+```typescript
+size: 'small'|'medium'|'large' = 'medium';
+icon: string = '📭';
+title: string = 'No data';
+description: string = '';
+actionText: string = '';
+actionHref: string = '';
+```
+
+## Events
+
+- `action` - {emptyState}
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-empty-state></snice-empty-state>
+
+<!-- Custom -->
+<snice-empty-state
+  icon="🔍"
+  title="No results found"
+  description="Try adjusting your search"
+></snice-empty-state>
+
+<!-- With action -->
+<snice-empty-state
+  title="No items yet"
+  description="Get started by creating your first item"
+  action-text="Create Item"
+></snice-empty-state>
+
+<!-- With link -->
+<snice-empty-state
+  title="Page not found"
+  action-text="Go Home"
+  action-href="/"
+></snice-empty-state>
+
+<!-- Sizes -->
+<snice-empty-state size="small"></snice-empty-state>
+<snice-empty-state size="medium"></snice-empty-state>
+<snice-empty-state size="large"></snice-empty-state>
+
+<!-- Events -->
+<snice-empty-state id="empty" action-text="Click"></snice-empty-state>
+<script>
+document.querySelector('#empty').addEventListener('@snice/empty-state-action', () => {
+  console.log('Action clicked');
+});
+</script>
+
+<!-- Custom content -->
+<snice-empty-state title="No data">
+  <div>Custom HTML content here</div>
+</snice-empty-state>
+```
+
+## Features
+
+- Customizable icon, title, description
+- Optional action button or link
+- 3 sizes
+- Slot for custom content
+- Accessible

package/docs/ai/components/file-upload.md

@@ -0,0 +1,93 @@
+# snice-file-upload
+
+File upload with drag-and-drop and preview.
+
+## Properties
+
+```typescript
+variant: 'outlined'|'filled' = 'outlined';
+size: 'small'|'medium'|'large' = 'medium';
+accept: string = '';
+multiple: boolean = false;
+disabled: boolean = false;
+required: boolean = false;
+invalid: boolean = false;
+label: string = '';
+helperText: string = '';
+errorText: string = '';
+maxSize: number = -1; // bytes
+maxFiles: number = -1;
+name: string = '';
+dragDrop: boolean = true;
+showPreview: boolean = true;
+files: FileList | null;
+```
+
+## Methods
+
+- `clear()` - Clear all files
+- `removeFile(index)` - Remove file by index
+
+## Events
+
+- `change` - {files, fileUpload}
+- `error` - {message, fileUpload}
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-file-upload label="Upload File"></snice-file-upload>
+
+<!-- Multiple files -->
+<snice-file-upload multiple label="Upload Files"></snice-file-upload>
+
+<!-- File type restrictions -->
+<snice-file-upload accept="image/*" label="Images only"></snice-file-upload>
+<snice-file-upload accept=".pdf,.doc,.docx"></snice-file-upload>
+
+<!-- Size limit (5MB) -->
+<snice-file-upload max-size="5242880"></snice-file-upload>
+
+<!-- File count limit -->
+<snice-file-upload multiple max-files="5"></snice-file-upload>
+
+<!-- No drag-drop -->
+<snice-file-upload drag-drop="false"></snice-file-upload>
+
+<!-- No preview -->
+<snice-file-upload show-preview="false"></snice-file-upload>
+
+<!-- Variants -->
+<snice-file-upload variant="outlined"></snice-file-upload>
+<snice-file-upload variant="filled"></snice-file-upload>
+
+<!-- Sizes -->
+<snice-file-upload size="small"></snice-file-upload>
+<snice-file-upload size="medium"></snice-file-upload>
+<snice-file-upload size="large"></snice-file-upload>
+
+<!-- Events -->
+<snice-file-upload id="upload"></snice-file-upload>
+<script>
+const upload = document.querySelector('#upload');
+upload.addEventListener('@snice/file-upload-change', (e) => {
+  console.log('Files:', e.detail.files);
+});
+upload.addEventListener('@snice/file-upload-error', (e) => {
+  console.error('Error:', e.detail.message);
+});
+</script>
+```
+
+## Features
+
+- Form-associated custom element
+- Drag-and-drop support
+- Image preview
+- File type filtering
+- Size validation
+- File count limits
+- Multiple file selection
+- 2 variants, 3 sizes
+- Accessible

package/docs/ai/components/image.md

@@ -0,0 +1,60 @@
+# snice-image
+
+Flexible image component with variants and lazy loading.
+
+## Properties
+
+```typescript
+src: string = '';
+alt: string = '';
+fallback: string = '';
+variant: 'rounded'|'square'|'circle' = 'rounded';
+size: 'small'|'medium'|'large' = 'medium';
+lazy: boolean = true;
+fit: 'cover'|'contain'|'fill'|'none'|'scale-down' = 'cover';
+width: string = '';
+height: string = '';
+```
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-image src="image.jpg" alt="Description"></snice-image>
+
+<!-- Sizes -->
+<snice-image src="image.jpg" size="small"></snice-image>
+<snice-image src="image.jpg" size="medium"></snice-image>
+<snice-image src="image.jpg" size="large"></snice-image>
+
+<!-- Variants -->
+<snice-image src="image.jpg" variant="rounded"></snice-image>
+<snice-image src="image.jpg" variant="square"></snice-image>
+<snice-image src="image.jpg" variant="circle"></snice-image>
+
+<!-- Fit -->
+<snice-image src="image.jpg" fit="cover" width="200px" height="200px"></snice-image>
+<snice-image src="image.jpg" fit="contain" width="200px" height="200px"></snice-image>
+
+<!-- Fallback -->
+<snice-image src="image.jpg" fallback="placeholder.jpg"></snice-image>
+
+<!-- Custom dimensions -->
+<snice-image src="image.jpg" width="300px" height="200px"></snice-image>
+
+<!-- Lazy loading -->
+<snice-image src="image.jpg" lazy="false"></snice-image>
+
+<!-- Placeholder -->
+<snice-image size="medium" variant="circle"></snice-image>
+```
+
+## Features
+
+- 3 size presets (small: 48px, medium: 96px, large: 192px)
+- 3 shape variants (rounded, square, circle)
+- 5 object-fit options
+- Lazy loading (default on)
+- Fallback image support
+- Placeholder for missing images
+- Custom width/height

package/docs/ai/components/input.md

@@ -0,0 +1,111 @@
+# snice-input
+
+Text input field with validation and icons.
+
+## Properties
+
+```typescript
+value: string = '';
+type: 'text'|'password'|'email'|'number'|'tel'|'url'|'search'|'date'|'time'|'datetime-local' = 'text';
+variant: 'outlined'|'filled'|'underlined' = 'outlined';
+size: 'small'|'medium'|'large' = 'medium';
+placeholder: string = '';
+disabled: boolean = false;
+required: boolean = false;
+invalid: boolean = false;
+readonly: boolean = false;
+clearable: boolean = false;
+label: string = '';
+helperText: string = '';
+errorText: string = '';
+prefix: string = '';
+suffix: string = '';
+prefixIcon: string = '';
+suffixIcon: string = '';
+min: string = '';
+max: string = '';
+minlength: number = 0;
+maxlength: number = 0;
+pattern: string = '';
+autocomplete: string = '';
+name: string = '';
+```
+
+## Methods
+
+- `focus()` - Focus input
+- `blur()` - Blur input
+- `select()` - Select text
+- `clear()` - Clear value
+
+## Events
+
+- `input` - {value, input}
+- `change` - {value, input}
+- `focus` - {input}
+- `blur` - {input}
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-input label="Name" placeholder="Enter name"></snice-input>
+
+<!-- Variants -->
+<snice-input variant="outlined"></snice-input>
+<snice-input variant="filled"></snice-input>
+<snice-input variant="underlined"></snice-input>
+
+<!-- Input types -->
+<snice-input type="email" label="Email"></snice-input>
+<snice-input type="password" label="Password"></snice-input>
+<snice-input type="number" label="Age"></snice-input>
+
+<!-- With icons -->
+<snice-input prefix-icon="🔍" placeholder="Search"></snice-input>
+<snice-input suffix-icon="✉️" type="email"></snice-input>
+
+<!-- With prefix/suffix text -->
+<snice-input prefix="$" type="number"></snice-input>
+<snice-input suffix=".com" type="url"></snice-input>
+
+<!-- Clearable -->
+<snice-input value="Text" clearable></snice-input>
+
+<!-- Helper text -->
+<snice-input label="Username" helper-text="Must be unique"></snice-input>
+
+<!-- Error state -->
+<snice-input label="Email" invalid error-text="Invalid email"></snice-input>
+
+<!-- Validation -->
+<snice-input type="email" required minlength="5" maxlength="50"></snice-input>
+
+<!-- Sizes -->
+<snice-input size="small"></snice-input>
+<snice-input size="medium"></snice-input>
+<snice-input size="large"></snice-input>
+
+<!-- Form integration -->
+<snice-input name="username" required></snice-input>
+
+<!-- Events -->
+<snice-input id="inp"></snice-input>
+<script>
+const inp = document.querySelector('#inp');
+inp.addEventListener('input', (e) => console.log('Input:', e.detail.value));
+inp.addEventListener('change', (e) => console.log('Change:', e.detail.value));
+</script>
+```
+
+## Features
+
+- Form-associated custom element
+- 10 input types
+- 3 visual variants
+- Prefix/suffix icons or text
+- Clearable with X button
+- Helper and error text
+- Validation (min/max/pattern/length)
+- 3 sizes
+- Keyboard accessible