snice 4.28.0 → 4.30.0

package/docs/ai/components/stat-group.md

@@ -6,17 +6,13 @@ Coordinated row of KPI cards with trend indicators and responsive grid layout.
 
 ```typescript
 stats: StatItem[] = [];
-columns: number = 0;  // 0 = auto-fit
+columns: number = 0;             // 0 = auto-fit
 variant: 'card'|'minimal'|'bordered' = 'card';
-```
-
-## Types
 
-```typescript
 interface StatItem {
   label: string;
   value: string | number;
-  trend?: 'up' | 'down' | 'neutral';
+  trend?: 'up'|'down'|'neutral';
   trendValue?: string;
   icon?: string;
   color?: string;
@@ -25,14 +21,14 @@ interface StatItem {
 
 ## Events
 
-- `stat-click` -> `{ stat: StatItem, index: number }`
+- `stat-click` → `{ stat, index }`
 
 ## CSS Parts
 
 - `base` - Grid container
 - `stat` - Individual stat card
 
-## Usage
+## Basic Usage
 
 ```html
 <snice-stat-group></snice-stat-group>
@@ -43,16 +39,12 @@ el.stats = [
   { label: 'Revenue', value: '$45,231', trend: 'up', trendValue: '+12.5%' },
   { label: 'Users', value: '2,338', trend: 'up', trendValue: '+8.2%' },
   { label: 'Orders', value: '1,245', trend: 'down', trendValue: '-3.1%' },
-  { label: 'Bounce', value: '3.24%', trend: 'neutral', trendValue: '0.0%' }
 ];
 ```
 
 ```html
-<!-- Variants -->
 <snice-stat-group variant="minimal"></snice-stat-group>
 <snice-stat-group variant="bordered"></snice-stat-group>
-
-<!-- Fixed columns -->
 <snice-stat-group columns="2"></snice-stat-group>
 ```
 
@@ -61,13 +53,11 @@ el.stats = [
 el.stats = [
   { label: 'Revenue', value: '$45K', icon: '$', color: 'rgb(22 163 74)', trend: 'up', trendValue: '+12%' }
 ];
+
+el.addEventListener('stat-click', (e) => console.log(e.detail.stat.label));
 ```
 
-## Features
+## Accessibility
 
-- 3 visual variants: card, minimal, bordered
-- Auto-fit responsive grid (wraps on narrow viewports)
-- Fixed column count option
-- Trend indicators (up/down/neutral) with color coding
-- Icon and color customization per stat
-- Keyboard accessible (Enter/Space to click)
+- Stat cards have `role="button"`, keyboard accessible (Enter/Space)
+- Trend indicators use semantic color coding

package/docs/ai/components/step-input.md

@@ -15,10 +15,6 @@ size: 'small'|'medium'|'large' = 'medium';
 wrap: boolean = false;              // wrap around at min/max boundaries
 ```
 
-## Events
-
-- `value-change` -> `{ value: number, oldValue: number, component: SniceStepInputElement }`
-
 ## Methods
 
 - `increment()` - Increase value by step
@@ -26,29 +22,35 @@ wrap: boolean = false;              // wrap around at min/max boundaries
 - `focus()` - Focus the input
 - `blur()` - Remove focus
 
+## Events
+
+- `value-change` → `{ value, oldValue, component }`
+
 ## CSS Parts
 
 - `base` - Outer container
 - `decrement-button` - Minus button
 - `increment-button` - Plus button
-- `input` - The number input
+- `input` - Number input field
 
-## Usage
+## Basic Usage
 
 ```html
-<!-- Basic -->
 <snice-step-input value="5"></snice-step-input>
-
-<!-- With min/max -->
 <snice-step-input min="0" max="10" value="5" step="1"></snice-step-input>
-
-<!-- Wrap around -->
 <snice-step-input min="1" max="12" value="1" wrap></snice-step-input>
-
-<!-- Sizes -->
 <snice-step-input size="small"></snice-step-input>
 <snice-step-input size="large"></snice-step-input>
-
-<!-- Disabled -->
 <snice-step-input value="3" disabled></snice-step-input>
 ```
+
+## Keyboard Navigation
+
+- ArrowUp: increment by step
+- ArrowDown: decrement by step
+
+## Accessibility
+
+- Buttons keyboard accessible with focus indicators
+- Direct keyboard entry in input field
+- Buttons disabled at min/max (unless `wrap` is set)

package/docs/ai/components/stepper.md

@@ -10,41 +10,35 @@ currentStep: number = 0;          // attr: current-step
 orientation: 'horizontal'|'vertical' = 'horizontal';
 clickable: boolean = false;
 
-// Step object:
 interface Step {
   label: string;
   description?: string;
-  status?: 'pending'|'active'|'completed'|'error'; // auto-computed if not set
+  status?: 'pending'|'active'|'completed'|'error';  // auto-computed if not set
 }
 ```
 
-## Slots
-
-- `(default)` - `<snice-stepper-panel>` elements (auto show/hide based on currentStep)
-
 ## Events
 
-- `step-change` → `{ previousStep, currentStep, step }` - Cancelable via preventDefault()
+- `step-change` → `{ previousStep, currentStep, step }` - Cancelable via `preventDefault()`
 
-## Methods
+## Slots
 
-- Navigate via `currentStep` property (increment/decrement/set)
+- `(default)` - `<snice-stepper-panel>` elements (auto show/hide based on `currentStep`)
 
 ## CSS Parts
 
 - `container` - Main container
-- `step` - Individual step
-- `step-indicator` - Circular indicator
+- `step` - Individual step wrapper
+- `step-indicator` - Circular indicator (number/checkmark)
 - `step-content` - Label + description wrapper
 - `step-label` - Step label text
 - `step-description` - Description text
 - `step-connector` - Line between steps
 - `panels` - Panels container (wraps slotted content)
 
-## Usage
+## Basic Usage
 
 ```html
-<!-- Basic -->
 <snice-stepper></snice-stepper>
 ```
 
@@ -66,14 +60,19 @@ stepper.currentStep = 1;
 
 <!-- Vertical with descriptions -->
 <snice-stepper orientation="vertical"></snice-stepper>
-
-<!-- Error state -->
 ```
 
 ```typescript
+// Error state
 stepper.steps = [
   { label: 'Upload', status: 'completed' },
   { label: 'Validate', status: 'error' },
   { label: 'Process', status: 'pending' }
 ];
 ```
+
+## Accessibility
+
+- Clickable steps are keyboard accessible (Enter/Space)
+- Completed steps show checkmark; error steps use semantic color
+- Navigate via `currentStep` property

package/docs/ai/components/switch.md

@@ -1,27 +1,23 @@
 # snice-switch
 
-Toggle switch input for boolean selections. Form-associated.
+Toggle switch input for boolean selections.
 
 ## Properties
 
 ```typescript
 checked: 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 = '';
-labelOn: string = '';           // attr: label-on
-labelOff: string = '';          // attr: label-off
-loading: boolean = false;
+labelOn: string = '';              // attr: label-on
+labelOff: string = '';             // attr: label-off
 ```
 
-## Events
-
-- `switch-change` → `{ checked, switch }`
-
 ## Methods
 
 - `toggle()` - Toggle switch state
@@ -29,6 +25,10 @@ loading: boolean = false;
 - `blur()` - Remove focus
 - `click()` - Programmatic click
 
+## Events
+
+- `switch-change` → `{ checked, switch }`
+
 ## CSS Parts
 
 - `input` - Hidden input element
@@ -37,7 +37,7 @@ loading: boolean = false;
 - `spinner` - Loading spinner
 - `label` - Label text
 
-## Usage
+## Basic Usage
 
 ```html
 <snice-switch label="Enable notifications"></snice-switch>
@@ -47,3 +47,9 @@ loading: boolean = false;
 <snice-switch loading label="Saving..."></snice-switch>
 <snice-switch disabled></snice-switch>
 ```
+
+## Accessibility
+
+- `role="switch"` with `aria-checked`
+- Space key to toggle
+- Visible focus ring on keyboard navigation

package/docs/ai/components/table.md

@@ -34,31 +34,12 @@ columns: any[] = [];                 // JS only
 data: any[] = [];                    // JS only
 ```
 
-## Slots
-
-- `columns` - `<snice-column>` elements for declarative column definitions
-- `rows` - `<snice-row>` elements for declarative row data
-- `header` - Superheader content above column headers
-
-## Events
-
-- `row-clicked` → `{ rowData, rowIndex }`
-- `table-row-selection-changed` → `{ selectedRows, rowIndex, selected }`
-- `table-select-all-changed` → `{ selectedRows, allSelected }`
-- `page-change` → `{ page, pageSize, totalPages, totalItems }`
-- `column-resize` → `{ key, width }`
-- `column-resize-end` → `{ key, width }`
-- `filter-change` → filter model
-- `sort-change` → sort model
-
 ## Methods
 
 - `setData(data)` - Set table data array
 - `setColumns(columns)` - Set column definitions
 - `renderHeader()` - Re-render header
 - `renderBody()` - Re-render body
-- `renderControls()` - Re-render search/filter controls
-- `renderPagination()` - Re-render pagination
 - `toggleSort(columnKey, multiSort?)` - Toggle sort on a column
 - `goToPage(page)` - Navigate to a specific page
 - `setPageSize(size)` - Change rows per page
@@ -77,13 +58,25 @@ data: any[] = [];                    // JS only
 - `autoSizeColumn(key)` - Auto-size column to content
 - `autoSizeAllColumns()` - Auto-size all columns
 - `moveColumn(key, toIndex)` - Reorder column
-- `scrollToColumn(key)` - Scroll to column
 
-## Column Types
+## Events
 
-text, number, date, boolean, currency, percent, rating, progress, sparkline, tag, status, email, phone, link, color, image, duration, filesize, location, json, actions, custom
+- `row-clicked` -> `{ rowData, rowIndex }`
+- `table-row-selection-changed` -> `{ selectedRows, rowIndex, selected }`
+- `table-select-all-changed` -> `{ selectedRows, allSelected }`
+- `page-change` -> `{ page, pageSize, totalPages, totalItems }`
+- `column-resize` -> `{ key, width }`
+- `column-resize-end` -> `{ key, width }`
+- `filter-change` -> filter model
+- `sort-change` -> sort model
 
-## ColumnDefinition
+## Slots
+
+- `columns` - `<snice-column>` elements for declarative column definitions
+- `rows` - `<snice-row>` elements for declarative row data
+- `header` - Superheader content above column headers
+
+## Column Definition
 
 ```typescript
 interface ColumnDefinition {
@@ -93,10 +86,10 @@ interface ColumnDefinition {
   align?: 'left'|'center'|'right';
   width?: string;
   sortable?: boolean;
-  resizable?: boolean;      // default: true (when column-resize enabled)
-  reorderable?: boolean;    // default: true
-  hideable?: boolean;       // default: true
-  pinnable?: boolean;       // default: true
+  resizable?: boolean;
+  reorderable?: boolean;
+  hideable?: boolean;
+  pinnable?: boolean;
   formatter?: (value, row) => string;
   numberFormat?: { decimals?, thousandsSeparator?, prefix?, suffix?, negativeStyle? };
   dateFormat?: DateFormat;
@@ -106,64 +99,14 @@ interface ColumnDefinition {
   sparklineFormat?: { type?, color?, width?, height? };
   currencyFormat?: CurrencyFormat;
   percentageFormat?: { decimals?, colorize? };
-  tagFormat?: TagFormat;
-  statusFormat?: StatusFormat;
-  linkFormat?: { target?, external? };
-  colorFormat?: { showSwatch?, displayFormat? };
-  emailFormat?: { showIcon? };
-  phoneFormat?: { showIcon?, format? };
   conditionalFormats?: ConditionalFormat[];
   colSpan?: number | ((value, row) => number);
 }
 ```
 
-## Per-Row Styling
-
-Sparkline and progress cells support per-row color via object values:
-```typescript
-// Sparkline: { values: number[], color: string }
-{ trend: { values: [10, 20, 30], color: '#22c55e' } }
-
-// Progress: { value: number, color: string }
-{ completion: { value: 85, color: '#22c55e' } }
-```
-
-Column-wide `colorize: true` on progressFormat auto-colors: green (≥70%), yellow (≥40%), red (<40%).
-
-## Toolbar
-
-```typescript
-table.setToolbar({
-  showSearch?: boolean;   // Search input
-  showSort?: boolean;     // Sort modal button
-  showFilter?: boolean;   // Filter modal button
-  showExport?: boolean;   // CSV export button
-});
-```
-
-## Filter Model (MUI X Pro compatible)
-
-```typescript
-{ filters: [{ column, operator, value }], logic: 'and'|'or' }
-// Operators: contains, equals, startsWith, endsWith, isEmpty, isNotEmpty (text)
-//            eq, neq, gt, gte, lt, lte (number)
-```
-
-## Tree Data
-
-```typescript
-table.setTreeData({
-  getPath: (row) => row.path,      // Returns path array e.g. ['US', 'CA']
-  groupColumn: 'name',             // Column key for expand/collapse toggle
-  defaultExpansionDepth?: number    // -1=collapsed, Infinity=expanded
-});
-```
-
-## Select-All Behavior
-
-Select-all checkbox only selects filtered/displayed rows. When filters are active, it won't select hidden rows.
+Column types: text, number, date, boolean, currency, percent, rating, progress, sparkline, tag, status, email, phone, link, color, image, duration, filesize, location, json, actions, custom
 
-## Usage
+## Basic Usage
 
 ```typescript
 table.setColumns([
@@ -171,13 +114,10 @@ table.setColumns([
   { key: 'revenue', label: 'Revenue', type: 'currency',
     numberFormat: { prefix: '$', thousandsSeparator: true } },
   { key: 'progress', label: 'Progress', type: 'progress',
-    progressFormat: { colorize: true } },
-  { key: 'trend', label: 'Trend', type: 'sparkline',
-    sparklineFormat: { type: 'line', height: 24, width: 80 } }
+    progressFormat: { colorize: true } }
 ]);
 table.setData([
-  { name: 'A', revenue: 50000, progress: 85,
-    trend: { values: [10,20,30,40], color: '#22c55e' } }
+  { name: 'A', revenue: 50000, progress: 85 }
 ]);
 table.setToolbar({ showSearch: true, showSort: true, showFilter: true, showExport: true });
 ```

package/docs/ai/components/tabs.md

@@ -2,7 +2,15 @@
 
 Tabbed interface with tab buttons and content panels.
 
-## snice-tabs (Container)
+## Components
+
+- `snice-tabs` - Container
+- `snice-tab` - Tab button
+- `snice-tab-panel` - Content panel
+
+## Properties
+
+### snice-tabs
 
 ```typescript
 selected: number = 0;
@@ -11,14 +19,14 @@ noScrollControls: boolean = false;  // attr: no-scroll-controls
 transition: string = 'none';
 ```
 
-## snice-tab (Tab Button)
+### snice-tab
 
 ```typescript
 disabled: boolean = false;
 closable: boolean = false;
 ```
 
-## snice-tab-panel (Content Panel)
+### snice-tab-panel
 
 ```typescript
 name: string = '';
@@ -27,12 +35,6 @@ transitionOut: string = '';       // attr: transition-out
 transitionDuration: number = 300; // attr: transition-duration
 ```
 
-## Events
-
-- `tab-change` → `{ index, oldIndex, tab, panel }` - Tab switched
-- `tab-select` → `{ tab }` - Tab clicked
-- `tab-close` → `{ tab }` - Close button clicked
-
 ## Methods
 
 - `selectTab(index)` - Select tab by index
@@ -40,6 +42,12 @@ transitionDuration: number = 300; // attr: transition-duration
 - `getTab(index)` - Get tab element
 - `getPanel(index)` - Get panel element
 
+## Events
+
+- `tab-change` -> `{ index, oldIndex, tab, panel }` - Tab switched
+- `tab-select` -> `{ tab }` - Tab clicked
+- `tab-close` -> `{ tab }` - Close button clicked
+
 ## Slots
 
 - `nav` - `<snice-tab>` elements for tab navigation
@@ -56,7 +64,7 @@ transitionDuration: number = 300; // attr: transition-duration
 - `scroll-button-end` - End scroll button
 - `panels` - Panel content wrapper
 
-## Usage
+## Basic Usage
 
 ```html
 <snice-tabs>

package/docs/ai/components/tag-input.md

@@ -4,16 +4,16 @@ Tag/chip input with autocomplete suggestions, keyboard navigation, and comma-sep
 
 ## Properties
 
-```ts
-value: string[] = []
-suggestions: string[] = []
-maxTags: number = 0              // 0 = unlimited (attribute: max-tags)
-allowDuplicates: boolean = false // attribute: allow-duplicates
-placeholder: string = 'Add a tag...'
-disabled: boolean = false
-readonly: boolean = false
-label: string = ''
-name: string = ''
+```typescript
+value: string[] = [];
+suggestions: string[] = [];
+maxTags: number = 0;              // 0 = unlimited (attr: max-tags)
+allowDuplicates: boolean = false; // attr: allow-duplicates
+placeholder: string = 'Add a tag...';
+disabled: boolean = false;
+readonly: boolean = false;
+label: string = '';
+name: string = '';
 ```
 
 ## Methods
@@ -29,15 +29,8 @@ name: string = ''
 - `tag-remove` -> `{ tag: string; index: number; value: string[] }`
 - `tag-change` -> `{ value: string[] }`
 
-## Input Behavior
-
-- Enter: Add current input as tag (or select highlighted suggestion)
-- Comma: Split input and add each part as a tag
-- Backspace on empty input: Remove last tag
-- ArrowUp/ArrowDown: Navigate suggestions
-- Escape: Close suggestions dropdown
+## CSS Parts
 
-**CSS Parts:**
 - `base` - Outer wrapper div
 - `label` - Label element
 - `container` - Tags + input container
@@ -46,19 +39,15 @@ name: string = ''
 - `input` - Text input field
 - `suggestions` - Suggestions dropdown
 
-## CSS Custom Properties
+## Keyboard Navigation
 
-- `--snice-color-border` - Container border (default: `rgb(226 226 226)`)
-- `--snice-color-primary` - Focus ring, tag color (default: `rgb(37 99 235)`)
-- `--snice-color-primary-subtle` - Tag background (default: `rgb(239 246 255)`)
-- `--snice-color-background` - Input background (default: `rgb(255 255 255)`)
-- `--snice-color-text` - Text color (default: `rgb(23 23 23)`)
-- `--snice-color-text-tertiary` - Placeholder color
-- `--snice-focus-ring-width` - Focus ring width (default: `2px`)
-- `--snice-focus-ring-color` - Focus ring color
-- `--snice-shadow-lg` - Suggestions dropdown shadow
+- Enter: Add current input as tag (or select highlighted suggestion)
+- Comma: Split input and add each part as a tag
+- Backspace on empty input: Remove last tag
+- ArrowUp/ArrowDown: Navigate suggestions
+- Escape: Close suggestions dropdown
 
-## Usage
+## Basic Usage
 
 ```html
 <snice-tag-input

package/docs/ai/components/tag.md

@@ -12,44 +12,32 @@ outline: boolean = false;    // Outlined style
 pill: boolean = false;       // Fully rounded corners
 ```
 
+## Events
+
+- `tag-remove` -> `{ tag: SniceTagElement }`
+
 ## Slots
 
 - `(default)` - Tag label content
 - `icon` - Leading icon
 
-## Events
+## CSS Parts
 
-- `tag-remove` → `{ tag: SniceTagElement }`
+- `base` - The tag container span
+- `icon` - The icon slot wrapper
+- `label` - The label slot wrapper
 
-## Usage
+## Basic Usage
 
 ```html
-<!-- Basic -->
 <snice-tag>Label</snice-tag>
-
-<!-- Variants -->
 <snice-tag variant="primary">Primary</snice-tag>
 <snice-tag variant="success">Active</snice-tag>
 <snice-tag variant="danger">Critical</snice-tag>
-
-<!-- Outline -->
 <snice-tag variant="primary" outline>Outlined</snice-tag>
-
-<!-- Pill -->
 <snice-tag pill variant="info">Rounded</snice-tag>
-
-<!-- Removable -->
 <snice-tag removable>Removable</snice-tag>
-
-<!-- With icon -->
-<snice-tag variant="success"><span slot="icon">✓</span>Approved</snice-tag>
-
-<!-- Sizes -->
+<snice-tag variant="success"><span slot="icon">&#10003;</span>Approved</snice-tag>
 <snice-tag size="small">Small</snice-tag>
 <snice-tag size="large">Large</snice-tag>
 ```
-
-**CSS Parts:**
-- `base` - The tag container span
-- `icon` - The icon slot wrapper
-- `label` - The label slot wrapper

package/docs/ai/components/terminal.md

@@ -12,12 +12,6 @@ maxLines: number = 1000;       // attr: max-lines
 showTimestamps: boolean = false; // attr: show-timestamps
 ```
 
-## Events
-
-- `terminal-command` → `{ command, args }` - Command entered
-- `terminal-clear` → `{}` - Terminal cleared
-- `terminal-ready` → `{}` - Terminal ready
-
 ## Methods
 
 - `write(content, type?)` - Write without newline
@@ -29,9 +23,11 @@ showTimestamps: boolean = false; // attr: show-timestamps
 - `getHistory()` - Get command history
 - `clearHistory()` - Clear command history
 
-## Line Types
+## Events
 
-`input` | `output` | `error` | `info` | `success` | `warning`
+- `terminal-command` -> `{ command, args }` - Command entered
+- `terminal-clear` -> `{}` - Terminal cleared
+- `terminal-ready` -> `{}` - Terminal ready
 
 ## CSS Custom Properties
 
@@ -67,7 +63,11 @@ showTimestamps: boolean = false; // attr: show-timestamps
 - `timestamp` - Line timestamp
 - `line-content` - Line text content
 
-## Usage
+## Line Types
+
+`input` | `output` | `error` | `info` | `success` | `warning`
+
+## Basic Usage
 
 ```html
 <snice-terminal prompt="$ " cwd="~"></snice-terminal>