snice 4.27.0 → 4.29.0

package/docs/ai/components/carousel.md

@@ -1,64 +1,64 @@
 # snice-carousel
 
-Image/content carousel with autoplay, loop, navigation.
+Content carousel with autoplay, loop, navigation controls, and multi-slide views.
 
 ## Properties
 
 ```typescript
-activeIndex: number = 0;
+activeIndex: number = 0;                                   // attribute: active-index
 autoplay: boolean = false;
-autoplayInterval: number = 3000;
-autoplayDirection: 'forward'|'backward' = 'forward';
+autoplayInterval: number = 3000;                           // attribute: autoplay-interval
+autoplayDirection: 'forward'|'backward' = 'forward';       // attribute: autoplay-direction
 loop: boolean = true;
-showControls: boolean = true;
-showIndicators: boolean = true;
-slidesPerView: number = 1;
-spaceBetween: number = 0;
+showControls: boolean = true;                              // attribute: show-controls
+showIndicators: boolean = true;                            // attribute: show-indicators
+slidesPerView: number = 1;                                 // attribute: slides-per-view
+spaceBetween: number = 0;                                  // attribute: space-between
 ```
 
 ## Methods
 
-- `next()`, `prev()`, `goToSlide(index)`
-- `play()`, `pause()`
+- `next()` / `prev()` - Navigate slides
+- `goToSlide(index: number)` - Go to specific slide
+- `play()` / `pause()` - Control autoplay
 
-## Slots
+## Events
 
-- `(default)` - Slide content (each direct child = one slide)
+- `carousel-slide-change` -> `{ activeIndex, previousIndex, carousel }`
 
-## Events
+## Slots
 
-- `carousel-slide-change` → `{ activeIndex, previousIndex, carousel }`
+- `(default)` - Slide content (each direct child = one slide)
 
 ## CSS Parts
 
-- `container` - Outermost carousel wrapper
+- `container` - Outermost wrapper
 - `viewport` - Visible slide area
-- `slides-container` - Flex container holding all slides
+- `slides-container` - Flex container holding slides
 - `controls` - Prev/next button container
-- `button-prev` - Previous slide button
-- `button-next` - Next slide button
-- `indicators` - Slide indicator dot container
+- `button-prev` / `button-next` - Navigation buttons
+- `indicators` - Indicator dot container
 - `indicator` - Individual indicator dot
 
-## Usage
+## Basic Usage
 
 ```html
-<!-- Basic -->
 <snice-carousel>
   <div>Slide 1</div>
   <div>Slide 2</div>
+  <div>Slide 3</div>
 </snice-carousel>
+```
 
-<!-- Autoplay -->
-<snice-carousel autoplay autoplay-interval="2000">
-  <div>Auto 1</div>
-  <div>Auto 2</div>
-</snice-carousel>
+```typescript
+import 'snice/components/carousel/snice-carousel';
 
-<!-- Multiple slides -->
-<snice-carousel slides-per-view="3" space-between="20">
-  <div>1</div>
-  <div>2</div>
-  <div>3</div>
-</snice-carousel>
+carousel.addEventListener('carousel-slide-change', (e) => {
+  console.log('Active:', e.detail.activeIndex);
+});
 ```
+
+## Accessibility
+
+- Keyboard navigation with arrow keys
+- ARIA roles and labels for controls

package/docs/ai/components/cart.md

@@ -1,35 +1,22 @@
 # snice-cart
 
-Shopping cart summary with line items, quantity controls, coupon field, tax, discount, and checkout CTA.
+Shopping cart with line items, quantity controls, coupon, tax, discount, and checkout.
 
 ## Properties
 
-```ts
-items: CartItem[] = [];                    // Cart items
-currency: string = '$';                    // Currency symbol
-taxRate: number = 0;                       // Tax percentage (attr: tax-rate)
-discount: number = 0;                      // Discount amount
-couponCode: string = '';                   // Applied coupon code (attr: coupon-code)
-```
-
-### Types
-
-```ts
-interface CartItem {
-  id: string;
-  name: string;
-  image?: string;
-  price: number;
-  quantity: number;
-  variant?: string;        // e.g. 'Size: M, Color: Black'
-}
+```typescript
+items: CartItem[] = [];            // Cart items (property only)
+currency: string = '$';
+taxRate: number = 0;               // attribute: tax-rate
+discount: number = 0;
+couponCode: string = '';           // attribute: coupon-code
 ```
 
 ## Methods
 
-- `addItem(item: CartItem)` - Add item (increments quantity if exists)
-- `removeItem(id: string)` - Remove item by ID
-- `updateQuantity(id: string, qty: number)` - Set quantity (removes if 0)
+- `addItem(item: CartItem)` - Add item (increments qty if exists)
+- `removeItem(id: string)` - Remove by ID
+- `updateQuantity(id: string, qty: number)` - Set qty (removes if 0)
 - `applyCoupon(code: string)` - Apply coupon code
 - `clear()` - Remove all items
 
@@ -37,23 +24,25 @@ interface CartItem {
 
 - `item-add` -> `{ item: CartItem }`
 - `item-remove` -> `{ item: CartItem }`
-- `quantity-change` -> `{ item: CartItem; previousQuantity: number; newQuantity: number }`
+- `quantity-change` -> `{ item, previousQuantity, newQuantity }`
 - `coupon-apply` -> `{ code: string }`
-- `checkout` -> `{ items: CartItem[]; subtotal: number; discount: number; tax: number; total: number }`
+- `checkout` -> `{ items, subtotal, discount, tax, total }`
 
 ## CSS Parts
 
-`base`, `header`, `items`, `item`, `coupon`, `summary`, `checkout`, `empty`
+- `base`, `header`, `items`, `item`, `coupon`, `summary`, `checkout`, `empty`
 
-## Usage
+## Basic Usage
 
 ```html
-<snice-cart tax-rate="8.5" currency="$"></snice-cart>
+<snice-cart tax-rate="8.5"></snice-cart>
 ```
 
 ```typescript
+import 'snice/components/cart/snice-cart';
+
 cart.items = [
-  { id: '1', name: 'Running Shoes', image: 'shoe.jpg', price: 89.99, quantity: 1, variant: 'Size: M' },
+  { id: '1', name: 'Shoes', price: 89.99, quantity: 1, variant: 'Size: M' },
   { id: '2', name: 'Watch', price: 249.00, quantity: 1 }
 ];
 
@@ -64,3 +53,9 @@ cart.addEventListener('checkout', (e) => {
   console.log(`Total: ${e.detail.total}`);
 });
 ```
+
+## Accessibility
+
+- Quantity controls have descriptive aria-labels
+- Remove buttons include item name
+- Keyboard operable

package/docs/ai/components/chart.md

@@ -1,139 +1,54 @@
 # snice-chart
 
-General-purpose chart component with multiple types and animations.
+General-purpose chart component with 10 chart types and animations.
 
 ## Properties
 
 ```typescript
 type: 'line'|'bar'|'horizontal-bar'|'area'|'pie'|'donut'|'scatter'|'bubble'|'radar'|'mixed' = 'line';
-datasets: ChartDataset[] = [];
-labels: string[] = [];
-options: ChartOptions = {};
-width: number = 0;
-height: number = 0;
+datasets: ChartDataset[] = [];    // property only
+labels: string[] = [];            // property only
+options: ChartOptions = {};       // property only
+width: number = 0;                // 0 = auto
+height: number = 0;               // 0 = auto
 ```
 
-## ChartDataset
+## Methods
 
-```typescript
-interface ChartDataset {
-  label: string;
-  data: (number | ChartDataPoint)[];
-  type?: ChartType; // for mixed charts
-  backgroundColor?: string | string[];
-  borderColor?: string;
-  borderWidth?: number;
-  fill?: boolean;
-  tension?: number; // 0-1
-  pointRadius?: number;
-  pointHoverRadius?: number;
-  hidden?: boolean;
-}
-```
+- `refresh()` - Re-render chart
+- `update(datasets: ChartDataset[])` - Replace all datasets
+- `addDataset(dataset: ChartDataset)` - Append dataset
+- `removeDataset(index: number)` - Remove by index
+- `toggleDataset(index: number)` - Toggle visibility
+- `exportImage(format?: 'png'|'svg'): string` - Export as data URL (default: `'svg'`)
+- `getData(): { datasets, labels }` - Get current data
 
-## ChartDataPoint
+## CSS Parts
 
-```typescript
-interface ChartDataPoint {
-  x?: number | string | Date;
-  y?: number;
-  r?: number; // bubble radius
-  label?: string;
-}
-```
+- `base` - Outer chart container
+- `canvas` - Chart canvas rendering area
+- `legend` - Legend container
 
-## ChartOptions
+## Basic Usage
 
-```typescript
-interface ChartOptions {
-  responsive?: boolean;
-  maintainAspectRatio?: boolean;
-  aspectRatio?: number;
-  legend?: { position?: 'top'|'bottom'|'left'|'right'|'none'; clickable?: boolean };
-  tooltip?: { trigger?: 'hover'|'click'|'none'; format?: (value, datasetIndex, pointIndex) => string };
-  animation?: { enabled?: boolean; duration?: number; easing?: 'linear'|'ease-in'|'ease-out'|'ease-in-out' };
-  xAxis?: { title?: string; min?: number; max?: number; ticks?: number; grid?: boolean; labels?: string[] };
-  yAxis?: { title?: string; min?: number; max?: number; ticks?: number; grid?: boolean; labels?: string[] };
-}
+```html
+<snice-chart type="line" height="400"></snice-chart>
 ```
 
-## Methods
-
-- `refresh()` — re-render the chart
-- `update(datasets: ChartDataset[])` — replace all datasets
-- `addDataset(dataset: ChartDataset)` — append a dataset
-- `removeDataset(index: number)` — remove dataset by index
-- `toggleDataset(index: number)` — toggle dataset visibility
-- `exportImage(format?: 'png'|'svg')` — returns data URL string (default: `'svg'`)
-- `getData()` — returns `{ datasets: ChartDataset[]; labels: string[] }`
-
-## Usage
+```typescript
+import 'snice/components/chart/snice-chart';
 
-```javascript
-// Line chart
 chart.type = 'line';
-chart.datasets = [{
-  label: 'Sales',
-  data: [12, 19, 15, 25, 22, 30],
-  borderColor: '#2196f3',
-  tension: 0.4
-}];
-chart.labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
-
-// Bar chart
-chart.type = 'bar';
-chart.datasets = [{
-  label: 'Revenue',
-  data: [65, 59, 80, 81, 56],
-  backgroundColor: ['#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff']
-}];
-
-// Pie chart
-chart.type = 'pie';
-chart.datasets = [{
-  label: 'Market Share',
-  data: [30, 25, 20, 15, 10],
-  backgroundColor: ['#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff']
-}];
-chart.labels = ['A', 'B', 'C', 'D', 'E'];
-
-// Scatter plot
-chart.type = 'scatter';
-chart.datasets = [{
-  label: 'Dataset 1',
-  data: [
-    { x: 10, y: 20 },
-    { x: 15, y: 25 },
-    { x: 20, y: 22 }
-  ],
-  backgroundColor: '#2196f3'
-}];
-
-// Options
+chart.datasets = [{ label: 'Sales', data: [12, 19, 15, 25], borderColor: '#2196f3' }];
+chart.labels = ['Jan', 'Feb', 'Mar', 'Apr'];
 chart.options = {
   legend: { position: 'bottom', clickable: true },
   animation: { enabled: true, duration: 1000 },
-  yAxis: { min: 0, max: 100, ticks: 5, grid: true }
+  yAxis: { min: 0, max: 100, grid: true }
 };
 ```
 
-```html
-<snice-chart type="line" height="400"></snice-chart>
-```
-
-**CSS Parts:**
-- `base` - Outer chart container div
-- `canvas` - Chart canvas rendering area
-- `legend` - Legend container
-
-## Features
+## Accessibility
 
-- 10 chart types (line, bar, area, pie, donut, scatter, bubble, radar, horizontal-bar, mixed)
-- Multiple datasets
-- Interactive legend
-- Hover tooltips
-- Animations
-- SVG rendering
-- Custom colors
-- Grid/axes
-- Export capability
+- Legend items clickable to toggle datasets
+- Hover tooltips for data values

package/docs/ai/components/chat.md

@@ -2,105 +2,68 @@
 
 Slack-style chat interface with messages, typing indicators, reactions, and file attachments.
 
-## Usage
-
-```html
-<snice-chat current-user="You"></snice-chat>
-```
-
 ## Properties
 
-- `messages: ChatMessage[]` - Messages array (property only)
-- `currentUser: string` - Current user name (default: `"You"`)
-- `currentAvatar: string` - Current user avatar URL (default: `""`)
-- `placeholder: string` - Input placeholder (default: `"Type a message..."`)
-- `allowFiles: boolean` - Enable file uploads (default: `true`)
-- `showTyping: boolean` - Show typing indicators (default: `true`)
-- `showAvatars: boolean` - Show user avatars (default: `true`)
-- `showTimestamps: boolean` - Show timestamps (default: `true`)
+```typescript
+messages: ChatMessage[] = [];           // property only
+currentUser: string = 'You';           // attribute: current-user
+currentAvatar: string = '';            // attribute: current-avatar
+placeholder: string = 'Type a message...';
+allowFiles: boolean = true;            // attribute: allow-files
+showTyping: boolean = true;            // attribute: show-typing
+showAvatars: boolean = true;           // attribute: show-avatars
+showTimestamps: boolean = true;        // attribute: show-timestamps
+```
 
 ## Methods
 
-- `addMessage(message: Omit<ChatMessage, 'id'>): void` - Add message
-- `updateMessage(messageId: string, updates: Partial<ChatMessage>): void` - Update message
-- `deleteMessage(messageId: string): void` - Delete message
-- `addTypingIndicator(user: string): void` - Add typing indicator
-- `removeTypingIndicator(user: string): void` - Remove typing indicator
-- `clear(): void` - Clear messages
-- `scrollToBottom(): void` - Scroll to bottom
-- `scrollToMessage(messageId: string): void` - Scroll to message
+- `addMessage(message: Omit<ChatMessage, 'id'>)` - Add message
+- `updateMessage(messageId: string, updates: Partial<ChatMessage>)` - Update message
+- `deleteMessage(messageId: string)` - Delete message
+- `addTypingIndicator(user: string)` - Show typing indicator
+- `removeTypingIndicator(user: string)` - Remove typing indicator
+- `clear()` - Clear all messages
+- `scrollToBottom()` - Scroll to bottom
+- `scrollToMessage(messageId: string)` - Scroll to message
 
 ## Events
 
-- `message-send` → `{ message: string; attachments?: File[] }` - Message sent
-- `message-edit` → `{ messageId: string; newContent: string }` - Message edited
-- `message-delete` → `{ messageId: string }` - Message deleted
-- `message-react` → `{ messageId: string; emoji: string }` - Reaction added
-- `message-thread` → `{ messageId: string }` - Thread started
-- `typing-start` → `{}` - User started typing
-- `typing-stop` → `{}` - User stopped typing
+- `message-send` -> `{ message: string, attachments?: File[] }`
+- `message-edit` -> `{ messageId: string, newContent: string }`
+- `message-delete` -> `{ messageId: string }`
+- `message-react` -> `{ messageId: string, emoji: string }`
+- `message-thread` -> `{ messageId: string }`
+- `typing-start` -> `{}`
+- `typing-stop` -> `{}`
+
+## CSS Parts
 
-**CSS Parts:**
 - `base` - Chat container
 - `messages` - Messages scrollable area
 - `input-area` - Input area wrapper
 - `input-container` - Input + buttons container
 - `input` - Textarea input field
 
-## Message Types
-
-- `text` - Text message
-- `image` - Image attachment
-- `file` - File attachment
-- `system` - System notification
+## Basic Usage
 
-## Types
-
-```typescript
-type MessageType = 'text' | 'file' | 'image' | 'system';
-
-interface ChatMessage {
-  id: string;
-  type: MessageType;
-  content: string;
-  author: string;
-  avatar?: string;
-  timestamp: Date;
-  edited?: boolean;
-  reactions?: MessageReaction[];
-  thread?: ChatMessage[];
-  attachment?: MessageAttachment;
-}
-
-interface MessageAttachment {
-  type: 'image' | 'file';
-  url: string;
-  name: string;
-  size?: number;
-  thumbnailUrl?: string;
-}
-
-interface MessageReaction {
-  emoji: string;
-  count: number;
-  users: string[];
-}
+```html
+<snice-chat current-user="You"></snice-chat>
 ```
 
-## Usage
-
 ```typescript
-// Add message
-chat.addMessage({
-  type: 'text', content: 'Hello!', author: 'Alice', timestamp: new Date(),
-});
+import 'snice/components/chat/snice-chat';
+
+chat.addMessage({ type: 'text', content: 'Hello!', author: 'Alice', timestamp: new Date() });
 
-// Handle send
 chat.addEventListener('message-send', (e) => {
   chat.addMessage({ type: 'text', content: e.detail.message, author: 'You', timestamp: new Date() });
 });
 
-// Typing indicators
 chat.addTypingIndicator('Alice');
 chat.removeTypingIndicator('Alice');
 ```
+
+## Accessibility
+
+- Keyboard navigation for messages and controls
+- ARIA roles for chat structure

package/docs/ai/components/checkbox.md

@@ -1,6 +1,6 @@
 # snice-checkbox
 
-Form checkbox input with indeterminate state.
+Form checkbox with indeterminate and loading states.
 
 ## Properties
 
@@ -8,75 +8,56 @@ Form checkbox input with indeterminate state.
 checked: boolean = false;
 indeterminate: boolean = false;
 disabled: boolean = false;
+loading: boolean = false;
 required: boolean = false;
 invalid: boolean = false;
 size: 'small'|'medium'|'large' = 'medium';
 name: string = '';
 value: string = 'on';
 label: string = '';
-loading: boolean = false;
 ```
 
 ## Methods
 
 - `focus()` - Focus checkbox
-- `blur()` - Blur checkbox
+- `blur()` - Remove focus
 - `click()` - Programmatic click
 - `toggle()` - Toggle checked state
 - `setIndeterminate()` - Set indeterminate state
 
 ## Events
 
-- `checkbox-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>
+- `checkbox-change` -> `{ checked: boolean, indeterminate: boolean, checkbox: SniceCheckboxElement }`
 
-<!-- Disabled -->
-<snice-checkbox label="Disabled" disabled></snice-checkbox>
-
-<!-- Required -->
-<snice-checkbox label="Required" required></snice-checkbox>
-
-<!-- Invalid -->
-<snice-checkbox label="Invalid" invalid></snice-checkbox>
+## CSS Parts
 
-<!-- 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>
+- `input` - Hidden checkbox input
+- `checkbox` - Custom checkbox element
+- `spinner` - Loading spinner
+- `label` - Label text
 
-<!-- Form integration -->
-<snice-checkbox name="newsletter" value="yes" label="Subscribe"></snice-checkbox>
+## Basic Usage
 
-<!-- Event handling -->
-<snice-checkbox></snice-checkbox>
+```html
+<snice-checkbox label="Accept terms"></snice-checkbox>
 ```
 
 ```typescript
+import 'snice/components/checkbox/snice-checkbox';
+
 checkbox.addEventListener('checkbox-change', (e) => {
   console.log('Checked:', e.detail.checked);
 });
 ```
 
-## CSS Parts
+## Keyboard Navigation
 
-`input`, `checkbox`, `spinner`, `label`
+- Space: toggle
+- Tab: navigate
 
-## Features
+## Accessibility
 
-- Form-associated custom element
-- Indeterminate state
-- 3 sizes
-- Keyboard accessible
-- Change events
-- Invalid state styling
+- aria-checked (including "mixed" for indeterminate)
+- aria-invalid for validation
+- Screen reader label association
+- Focus indicators