snice 4.27.0 → 4.29.0

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>

package/docs/ai/components/testimonial.md

@@ -4,22 +4,16 @@ Testimonial/quote card with author info, avatar, star rating, and variant styles
 
 ## Properties
 
-```ts
-quote: string = ''
-author: string = ''
-avatar: string = ''            // URL for author avatar image
-role: string = ''              // e.g. "CEO"
-company: string = ''           // e.g. "Acme Inc" (renders as "role at company")
-rating: number = 0             // 0-5 star rating (0 = hidden)
-variant: 'card' | 'minimal' | 'featured' = 'card'
+```typescript
+quote: string = '';
+author: string = '';
+avatar: string = '';            // URL for author avatar image
+role: string = '';              // e.g. "CEO"
+company: string = '';           // e.g. "Acme Inc" (renders as "role at company")
+rating: number = 0;             // 0-5 star rating (0 = hidden)
+variant: 'card'|'minimal'|'featured' = 'card';
 ```
 
-## Variants
-
-- `card` - Default. Background, border, and shadow
-- `minimal` - Left border accent, no background
-- `featured` - Primary-colored background with inverse text
-
 ## CSS Custom Properties
 
 - `--snice-color-background-element` - Card background (default: `rgb(252 251 249)`)
@@ -29,9 +23,6 @@ variant: 'card' | 'minimal' | 'featured' = 'card'
 - `--snice-color-text-secondary` - Author role color
 - `--snice-color-text-inverse` - Featured variant text (default: `rgb(250 250 250)`)
 - `--snice-color-warning` - Star rating color (default: `rgb(234 179 8)`)
-- `--snice-shadow-sm` - Card shadow
-- `--snice-spacing-lg` - Card padding (default: `1.5rem`)
-- `--snice-border-radius-lg` - Card border radius (default: `0.5rem`)
 
 ## CSS Parts
 
@@ -40,7 +31,7 @@ variant: 'card' | 'minimal' | 'featured' = 'card'
 - `author` - The author info container (avatar, name, role)
 - `stars` - The star rating element
 
-## Usage
+## Basic Usage
 
 ```html
 <snice-testimonial
@@ -53,7 +44,6 @@ variant: 'card' | 'minimal' | 'featured' = 'card'
   variant="card"
 ></snice-testimonial>
 
-<!-- Featured style -->
 <snice-testimonial
   quote="Outstanding experience from start to finish."
   author="John Smith"

package/docs/ai/components/textarea.md

@@ -27,13 +27,6 @@ autoGrow: boolean = false;    // attr: auto-grow
 loading: boolean = false;
 ```
 
-## Events
-
-- `textarea-input` → `{ value, textarea }` - On input
-- `textarea-change` → `{ value, textarea }` - On change
-- `textarea-focus` → `{ textarea }` - On focus
-- `textarea-blur` → `{ textarea }` - On blur
-
 ## Methods
 
 - `focus()` - Focus textarea
@@ -43,21 +36,27 @@ loading: boolean = false;
 - `reportValidity()` - Report validation to user, returns `boolean`
 - `setCustomValidity(message)` - Set custom validation message
 
-## Usage
+## Events
+
+- `textarea-input` -> `{ value, textarea }` - On input
+- `textarea-change` -> `{ value, textarea }` - On change
+- `textarea-focus` -> `{ textarea }` - On focus
+- `textarea-blur` -> `{ textarea }` - On blur
+
+## CSS Parts
+
+- `textarea` - The native textarea element
+- `spinner` - Loading spinner
+- `error-text` - Error message container
+- `helper-text` - Helper text container
+
+## Basic Usage
 
 ```html
 <snice-textarea label="Comments" placeholder="Enter comments"></snice-textarea>
 <snice-textarea variant="filled"></snice-textarea>
-<snice-textarea variant="underlined"></snice-textarea>
-<snice-textarea rows="5"></snice-textarea>
 <snice-textarea auto-grow></snice-textarea>
 <snice-textarea maxlength="500"></snice-textarea>
 <snice-textarea resize="both"></snice-textarea>
-<snice-textarea size="small"></snice-textarea>
-<snice-textarea helper-text="Max 500 characters"></snice-textarea>
 <snice-textarea invalid error-text="Required field"></snice-textarea>
 ```
-
-## CSS Parts
-
-`textarea`, `spinner`, `error-text`, `helper-text`

package/docs/ai/components/theme.md

@@ -1,8 +1,8 @@
 # theme.css
 
-CSS-only design token system. No component — just import the stylesheet.
+CSS-only design token system. No component -- just import the stylesheet.
 
-## Usage
+## Basic Usage
 
 ```html
 <link rel="stylesheet" href="snice/components/theme/theme.css">
@@ -19,7 +19,7 @@ CSS-only design token system. No component — just import the stylesheet.
 <html data-theme="dark">...</html>
 ```
 
-## Tokens
+## CSS Custom Properties
 
 ### Colors
 

package/docs/ai/components/time-picker.md

@@ -1,25 +1,25 @@
 # snice-time-picker
 
-Single time selection with hour/minute/second selectors and AM/PM toggle.
+Single time selection with hour/minute/second selectors and AM/PM toggle. Form-associated.
 
 ## Properties
 
 ```typescript
-value: string = '';                                   // Time string (HH:MM or HH:MM:SS)
+value: string = '';                    // Time string (HH:MM or HH:MM:SS)
 format: '12h'|'24h' = '24h';
 size: 'small'|'medium'|'large' = 'medium';
-step: 1|5|10|15|30 = 15;                             // Minute step
-minTime: string = '';                                 // attribute: min-time
-maxTime: string = '';                                 // attribute: max-time
-showSeconds: boolean = false;                         // attribute: show-seconds
+step: 1|5|10|15|30 = 15;              // Minute step
+minTime: string = '';                  // attr: min-time
+maxTime: string = '';                  // attr: max-time
+showSeconds: boolean = false;          // attr: show-seconds
 disabled: boolean = false;
 readonly: boolean = false;
 loading: boolean = false;
 clearable: boolean = false;
 placeholder: string = '';
 label: string = '';
-helperText: string = '';                              // attribute: helper-text
-errorText: string = '';                               // attribute: error-text
+helperText: string = '';               // attr: helper-text
+errorText: string = '';                // attr: error-text
 required: boolean = false;
 invalid: boolean = false;
 name: string = '';
@@ -33,7 +33,9 @@ variant: 'dropdown'|'inline' = 'dropdown';
 - `clear()` - Clear value
 - `focus()` - Focus input
 - `blur()` - Blur input
-- `checkValidity()` / `reportValidity()` / `setCustomValidity(msg)`
+- `checkValidity()` - Check validation, returns `boolean`
+- `reportValidity()` - Report validation to user, returns `boolean`
+- `setCustomValidity(message)` - Set custom validation message
 
 ## Events
 
@@ -44,33 +46,30 @@ variant: 'dropdown'|'inline' = 'dropdown';
 - `timepicker-close` -> `{ timePicker }`
 - `timepicker-clear` -> `{ timePicker }`
 
-## Usage
+## CSS Parts
 
-```html
-<!-- Basic 24h -->
-<snice-time-picker label="Time"></snice-time-picker>
+- `base` - Wrapper container
+- `label` - Label element
+- `input` - Text input
+- `toggle` - Clock icon button
+- `dropdown` - Dropdown/inline container
+- `hours` - Hours selector column
+- `minutes` - Minutes selector column
+- `seconds` - Seconds selector column
+- `period` - AM/PM selector column
+- `clear` - Clear button
+- `spinner` - Loading spinner
+- `helper-text` - Helper text element
+- `error-text` - Error text element
+
+## Basic Usage
 
-<!-- 12h format -->
+```html
+<snice-time-picker label="Select time"></snice-time-picker>
 <snice-time-picker format="12h" value="14:30"></snice-time-picker>
-
-<!-- With seconds -->
 <snice-time-picker show-seconds value="09:15:30"></snice-time-picker>
-
-<!-- 5-minute steps -->
-<snice-time-picker step="5"></snice-time-picker>
-
-<!-- Min/max constraints -->
-<snice-time-picker min-time="09:00" max-time="17:00"></snice-time-picker>
-
-<!-- Inline (always visible) -->
+<snice-time-picker step="5" min-time="09:00" max-time="17:00"></snice-time-picker>
 <snice-time-picker variant="inline" value="10:00"></snice-time-picker>
-
-<!-- Disabled/readonly -->
-<snice-time-picker disabled value="12:00"></snice-time-picker>
-<snice-time-picker readonly value="15:30"></snice-time-picker>
-
-<!-- Event handling -->
-<snice-time-picker></snice-time-picker>
 ```
 
 ```typescript
@@ -78,21 +77,3 @@ picker.addEventListener('time-change', (e) => {
   console.log('Time:', e.detail.value, e.detail.formatted);
 });
 ```
-
-## CSS Parts
-
-`base`, `label`, `input`, `toggle`, `dropdown`, `hours`, `minutes`, `seconds`, `period`, `clear`, `spinner`, `helper-text`, `error-text`
-
-## Features
-
-- Form-associated custom element
-- Hour/minute/second scrollable columns
-- AM/PM toggle for 12h format
-- Dropdown or inline variant
-- 3 sizes (small, medium, large)
-- Loading state with spinner
-- Clearable with clear button
-- Min/max time constraints
-- Configurable minute step (1, 5, 10, 15, 30)
-- Constraint Validation API (checkValidity, reportValidity, setCustomValidity)
-- Keyboard accessible