snice 4.28.0 → 4.30.0

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

package/docs/ai/components/chip.md

@@ -11,75 +11,39 @@ size: 'small'|'medium'|'large' = 'medium';
 removable: boolean = false;
 selected: boolean = false;
 disabled: boolean = false;
-icon: string = '';
-avatar: string = '';
+icon: string = '';      // URL, image file, emoji. Use slot for icon fonts.
+avatar: string = '';    // Avatar image URL (takes precedence over icon slot)
 ```
 
+## Events
+
+- `chip-click` -> `{ label: string, selected: boolean }`
+- `chip-remove` -> `{ label: string }`
+
 ## Slots
 
 - `icon` - Custom icon content (overrides `icon` property; `avatar` takes precedence)
 
-## Events
+## CSS Parts
 
-- `chip-click` - Chip clicked. Detail: `{ label, selected }`
-- `chip-remove` - Remove button clicked. Detail: `{ label }`
+- `icon` - Icon wrapper element
 
-## Usage
+## Basic 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>
-
-<!-- ⚠️ icon="star" renders as PLAIN TEXT. Use the icon slot for icon fonts. -->
-
-<!-- Icon SLOT — for Material Symbols, Font Awesome, SVGs -->
-<snice-chip label="Tag">
-  <span slot="icon" class="material-symbols-outlined">label</span>
-</snice-chip>
-
-<!-- Icon PROPERTY — for emoji, URLs, image files only -->
-<snice-chip label="Favorite" icon="★"></snice-chip>
-<snice-chip label="Home" icon="/icons/home.svg"></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 label="Click me" removable></snice-chip>
 ```
 
 ```typescript
-chip.addEventListener('chip-click', (e) => console.log('Clicked', e.detail));
+import 'snice/components/chip/snice-chip';
+
+// icon="star" renders as PLAIN TEXT. Use the icon slot for icon fonts.
+chip.addEventListener('chip-click', (e) => console.log(e.detail));
 chip.addEventListener('chip-remove', () => chip.remove());
 ```
 
-## Features
+## Accessibility
 
-- 6 color variants
-- 3 sizes
-- Removable with X button
-- Selected state
-- Icon (URL, image files, emoji) or avatar. Use slot for icon fonts.
-- Click and remove events
+- Enter/Space to activate
+- aria-selected, aria-disabled
+- Remove button has aria-label