snice 4.9.0 → 4.10.0

package/docs/ai/components/stepper.md

@@ -1,216 +1,70 @@
 # snice-stepper
 
-Step indicator for multi-step processes, wizards, workflows. Shows progress with pending/active/completed/error states.
+Step indicator for multi-step processes with pending/active/completed/error states.
 
 ## Properties
 
 ```typescript
-steps: Step[] = []                          // Array of step objects
-currentStep: number = 0                     // Current active step index
-orientation: StepperOrientation = 'horizontal' // 'horizontal' | 'vertical'
-clickable: boolean = false                  // Enable click navigation
+steps: Step[] = [];
+currentStep: number = 0;          // attr: current-step
+orientation: 'horizontal'|'vertical' = 'horizontal';
+clickable: boolean = false;
 
 // Step object:
-{
-  label: string;           // Step label (required)
-  description?: string;    // Optional description
-  status?: StepStatus;     // Override auto status: 'pending' | 'active' | 'completed' | 'error'
+interface Step {
+  label: string;
+  description?: string;
+  status?: 'pending'|'active'|'completed'|'error'; // auto-computed if not set
 }
 ```
 
+## Events
+
+- `step-change` → `{ previousStep, currentStep, step }` - Cancelable via preventDefault()
+
+## Methods
+
+- Navigate via `currentStep` property (increment/decrement/set)
+
+## CSS Parts
+
+- `container` - Main container
+- `step` - Individual step
+- `step-indicator` - Circular indicator
+- `step-content` - Label + description wrapper
+- `step-label` - Step label text
+- `step-description` - Description text
+- `step-connector` - Line between steps
+
 ## Usage
 
 ```html
-<!-- Basic horizontal -->
-<snice-stepper id="basic"></snice-stepper>
+<!-- Basic -->
+<snice-stepper id="stepper"></snice-stepper>
 <script>
-  document.getElementById('basic').steps = [
-    { label: 'Step 1' },
-    { label: 'Step 2' },
-    { label: 'Step 3' }
+  document.getElementById('stepper').steps = [
+    { label: 'Account' },
+    { label: 'Profile' },
+    { label: 'Complete' }
   ];
-  document.getElementById('basic').currentStep = 1;
+  document.getElementById('stepper').currentStep = 1;
 </script>
 
-<!-- With panels (auto show/hide) -->
+<!-- With panels (auto show/hide based on currentStep) -->
 <snice-stepper id="wizard" clickable></snice-stepper>
 <snice-stepper-panel>Step 1 content</snice-stepper-panel>
 <snice-stepper-panel>Step 2 content</snice-stepper-panel>
 <snice-stepper-panel>Step 3 content</snice-stepper-panel>
-<script>
-  document.getElementById('wizard').steps = [
-    { label: 'Account' },
-    { label: 'Profile' },
-    { label: 'Complete' }
-  ];
-</script>
 
 <!-- Vertical with descriptions -->
-<snice-stepper id="vertical" orientation="vertical"></snice-stepper>
-<script>
-  document.getElementById('vertical').steps = [
-    { label: 'Account', description: 'Create your account' },
-    { label: 'Profile', description: 'Personal info' },
-    { label: 'Complete', description: 'Finish setup' }
-  ];
-</script>
-
-<!-- Clickable navigation -->
-<snice-stepper id="wizard" clickable></snice-stepper>
-<script>
-  const wizard = document.getElementById('wizard');
-  wizard.steps = [
-    { label: 'Cart' },
-    { label: 'Delivery' },
-    { label: 'Payment' },
-    { label: 'Confirm' }
-  ];
-
-  wizard.addEventListener('step-change', (e) => {
-    console.log(e.detail.previousStep); // Previous step index
-    console.log(e.detail.currentStep);  // New step index
-    console.log(e.detail.step);         // Step object
-    // e.preventDefault(); to cancel navigation
-  });
-</script>
+<snice-stepper orientation="vertical"></snice-stepper>
 
 <!-- Error state -->
-<snice-stepper id="validation"></snice-stepper>
 <script>
-  document.getElementById('validation').steps = [
+  stepper.steps = [
     { label: 'Upload', status: 'completed' },
     { label: 'Validate', status: 'error' },
     { label: 'Process', status: 'pending' }
   ];
 </script>
-
-<!-- Programmatic navigation -->
-<script>
-  const stepper = document.getElementById('my-stepper');
-  stepper.currentStep++; // Next
-  stepper.currentStep--; // Previous
-  stepper.currentStep = 2; // Go to step 3
-</script>
-```
-
-## Events
-
-```javascript
-// step-change (only in clickable mode)
-stepper.addEventListener('step-change', (e) => {
-  const { previousStep, currentStep, step } = e.detail;
-  e.preventDefault(); // Cancel navigation if needed
-});
 ```
-
-## CSS Parts
-
-```css
-::part(container)       /* Main container */
-::part(step)            /* Individual step */
-::part(step-indicator)  /* Circular indicator */
-::part(step-content)    /* Label + description wrapper */
-::part(step-label)      /* Step label text */
-::part(step-description) /* Description text */
-::part(step-connector)  /* Line between steps */
-```
-
-## Styling
-
-```css
---snice-color-primary       /* Active state */
---snice-color-success       /* Completed state */
---snice-color-danger        /* Error state */
---snice-color-text
---snice-color-text-secondary /* Pending state */
---snice-color-text-inverse  /* Indicator text */
---snice-color-background
---snice-color-border
---snice-spacing-xs
---snice-spacing-sm
---snice-spacing-md
---snice-spacing-lg
---snice-font-size-xs
---snice-font-size-sm
---snice-font-weight-medium
---snice-font-weight-semibold
---snice-transition-fast
-```
-
-## Common Patterns
-
-```html
-<!-- Checkout flow -->
-<snice-stepper id="checkout" clickable></snice-stepper>
-<button onclick="document.getElementById('checkout').currentStep--">Back</button>
-<button onclick="document.getElementById('checkout').currentStep++">Next</button>
-<script>
-  document.getElementById('checkout').steps = [
-    { label: 'Cart', description: 'Review items' },
-    { label: 'Delivery', description: 'Shipping address' },
-    { label: 'Payment', description: 'Billing info' },
-    { label: 'Confirm', description: 'Place order' }
-  ];
-</script>
-
-<!-- Onboarding wizard (vertical) -->
-<snice-stepper id="onboarding" orientation="vertical" clickable></snice-stepper>
-<script>
-  document.getElementById('onboarding').steps = [
-    { label: 'Welcome' },
-    { label: 'Profile Setup' },
-    { label: 'Preferences' },
-    { label: 'Get Started' }
-  ];
-</script>
-
-<!-- Form validation -->
-<snice-stepper id="form"></snice-stepper>
-<script>
-  document.getElementById('form').steps = [
-    { label: 'Personal Info', status: 'completed' },
-    { label: 'Address', status: 'error' },  // Has validation error
-    { label: 'Review', status: 'pending' }
-  ];
-</script>
-
-<!-- Progress tracker -->
-<snice-stepper id="upload"></snice-stepper>
-<script>
-  const upload = document.getElementById('upload');
-  upload.steps = [
-    { label: 'Upload', status: 'completed' },
-    { label: 'Process', status: 'active' },
-    { label: 'Complete', status: 'pending' }
-  ];
-  upload.currentStep = 1;
-</script>
-```
-
-## Stepper Panels
-
-```html
-<!-- Panels auto show/hide based on currentStep -->
-<snice-stepper id="wizard"></snice-stepper>
-<snice-stepper-panel>Content for step 0</snice-stepper-panel>
-<snice-stepper-panel>Content for step 1</snice-stepper-panel>
-<snice-stepper-panel>Content for step 2</snice-stepper-panel>
-```
-
-- Panels must be direct children of stepper
-- Panel index matches order (first panel = step 0, etc.)
-- Automatically activated when stepper.currentStep changes
-- Only active panel is visible (display: block), others hidden
-
-## Notes
-
-- Status auto-computed from currentStep if not explicitly set:
-  - Steps before currentStep: 'completed' (shows ✓)
-  - Step at currentStep: 'active'
-  - Steps after currentStep: 'pending'
-- Completed steps show checkmark (✓) instead of number
-- Connector lines auto-hidden on last step
-- Click events only work when clickable=true
-- step-change event is cancelable via preventDefault()
-- Orientation affects layout but not behavior
-- Panels sync automatically via @watch decorator on currentStep

package/docs/ai/components/switch.md

@@ -1,54 +1,47 @@
 # snice-switch
 
-Toggle switch input for boolean selections.
+Toggle switch input for boolean selections. Form-associated.
 
 ## Properties
 
 ```typescript
-checked: boolean = false;        // Switch state
-disabled: boolean = false;       // Disabled state
-required: boolean = false;       // Form required
-invalid: boolean = false;        // Invalid state styling
+checked: boolean = false;
+disabled: boolean = false;
+required: boolean = false;
+invalid: boolean = false;
 size: 'small'|'medium'|'large' = 'medium';
-name: string = '';              // Form field name
-value: string = 'on';           // Form field value when checked
-label: string = '';             // Label text
-labelOn: string = '';           // Label shown when on
-labelOff: string = '';          // Label shown when off
-loading: boolean = false;        // Loading state (shows spinner)
+name: string = '';
+value: string = 'on';
+label: string = '';
+labelOn: string = '';           // attr: label-on
+labelOff: string = '';          // attr: label-off
+loading: boolean = false;
 ```
 
+## Events
+
+- `switch-change` → `{ checked, switch }`
+
 ## Methods
 
-```typescript
-toggle()      // Toggle switch state
-focus()       // Focus the switch
-blur()        // Remove focus
-click()       // Programmatic click
-```
+- `toggle()` - Toggle switch state
+- `focus()` - Focus the switch
+- `blur()` - Remove focus
+- `click()` - Programmatic click
 
-## Events
+## CSS Parts
 
-```typescript
-'switch-change' // { checked, switch }
-```
+- `track` - Switch track
+- `thumb` - Switch thumb
+- `label` - Label text
 
 ## Usage
 
 ```html
 <snice-switch label="Enable notifications"></snice-switch>
-```
-
-```typescript
-switchEl.addEventListener('switch-change', (e) => {
-  console.log(e.detail.checked);
-});
-```
-
-## CSS Parts
-
-```css
-::part(track)   // Switch track
-::part(thumb)   // Switch thumb
-::part(label)   // Label text
+<snice-switch checked label="Dark mode"></snice-switch>
+<snice-switch size="small" label="Compact"></snice-switch>
+<snice-switch label-on="On" label-off="Off"></snice-switch>
+<snice-switch loading label="Saving..."></snice-switch>
+<snice-switch disabled></snice-switch>
 ```

package/docs/ai/components/table.md

@@ -1,8 +1,8 @@
-# snice-table, snice-row, snice-column, snice-cell, snice-header
+# snice-table
 
-Data table with Excel-like formatting, sorting, pagination, and 15 column types.
+Data table with sorting, search, selection, and 15 column types.
 
-## snice-table
+## Properties
 
 ```typescript
 size: 'small'|'medium'|'large' = 'medium';
@@ -10,53 +10,37 @@ variant: 'default'|'striped'|'bordered' = 'default';
 striped: boolean = false;
 hoverable: boolean = true;
 bordered: boolean = false;
-stickyHeader: boolean = false;
+stickyHeader: boolean = false;    // attr: sticky-header
 sortable: boolean = false;
 selectable: boolean = false;
 clickable: boolean = false;
 loading: boolean = false;
-data: any[] = [];
-columns: ColumnDefinition[] = [];
 searchable: boolean = false;
-showPagination: boolean = false;
-pageSize: number = 10;
-currentPage: number = 1;
-totalItems: number = 0;
+searchDebounce: number = 300;     // attr: search-debounce
+list: boolean = false;
+selector: string = '';
+selectorOptions: string = '';     // attr: selector-options
 ```
 
-**Methods:**
-- `setData(data)` - Set table data
-- `sort(column)` - Sort by column
-- `getSelectedRows()` - Get selected rows
-- `search(query)` - Filter data
-- `goToPage(page)` - Navigate pagination
+## Events
 
-**Events:**
-- `row-clicked` - {rowData, rowIndex}
-- `table-row-selection-changed` - {selectedRows, rowIndex, selected}
-- `table-select-all-changed` - {selectedRows, allSelected}
+- `row-clicked` → `{ rowData, rowIndex }`
+- `table-row-selection-changed` → `{ selectedRows, rowIndex, selected }`
+- `table-select-all-changed` → `{ selectedRows, allSelected }`
 
-## Column Types
+## Methods
+
+- `setData(data)` - Set table data array
+- `setColumns(columns)` - Set column definitions
+- `renderHeader()` - Re-render header
+- `renderBody()` - Re-render body
+- `toggleSort(column)` - Sort by column
 
-15 specialized column types with formatting options:
+## Column Types
 
-1. **text** - Plain text
-2. **number** - Formatted numbers (decimals, thousands separators, prefix/suffix)
-3. **date** - Date formatting (short/medium/long/full/custom)
-4. **boolean** - True/false with symbols or text
-5. **currency** - Currency formatting with locale and display options
-6. **percent** - Percentages with trends and colorization
-7. **rating** - Star ratings with custom symbols
-8. **progress** - Progress bars with percentage
-9. **sparkline** - Inline charts (line/bar/area)
-10. **accounting** - Accounting number format
-11. **scientific** - Scientific notation
-12. **fraction** - Fraction display
-13. **duration** - Time durations
-14. **filesize** - File size formatting
-15. **custom** - Custom formatter function
+text, number, date, boolean, currency, percent, rating, progress, sparkline, accounting, scientific, fraction, duration, filesize, custom
 
-## Column Definition
+## ColumnDefinition
 
 ```typescript
 interface ColumnDefinition {
@@ -66,157 +50,44 @@ interface ColumnDefinition {
   align?: 'left'|'center'|'right';
   width?: string;
   sortable?: boolean;
-  filterable?: boolean;
   formatter?: (value, row) => string;
-
-  // Excel-like formatting
   numberFormat?: NumberFormat;
   dateFormat?: DateFormat;
   booleanFormat?: BooleanFormat;
   ratingFormat?: RatingFormat;
   progressFormat?: ProgressFormat;
   sparklineFormat?: SparklineFormat;
-  percentageFormat?: PercentageFormat;
   currencyFormat?: CurrencyFormat;
-
-  // Additional formats
-  phoneFormat?: PhoneFormat;
-  statusFormat?: StatusFormat;
-  tagFormat?: TagFormat;
-  actionsFormat?: ActionsFormat;
-  linkFormat?: LinkFormat;
-  colorFormat?: ColorFormat;
-  emailFormat?: EmailFormat;
-  imageFormat?: ImageFormat;
-  jsonFormat?: JsonFormat;
-  locationFormat?: LocationFormat;
-
-  // Cell styling
-  style?: CellStyle;
   conditionalFormats?: ConditionalFormat[];
-
-  // Display options
-  wrap?: boolean;
-  ellipsis?: boolean;
-  tooltip?: boolean | ((value, row) => string);
 }
 ```
 
 ## Usage
 
 ```html
-<!-- Basic table -->
-<snice-table id="table"></snice-table>
-
-<script>
-const table = document.querySelector('#table');
-
-table.columns = [
-  { key: 'name', label: 'Name', sortable: true },
-  { key: 'age', label: 'Age', type: 'number', align: 'right' },
-  { key: 'email', label: 'Email' }
-];
-
-table.data = [
-  { name: 'John', age: 30, email: 'john@example.com' },
-  { name: 'Jane', age: 25, email: 'jane@example.com' }
-];
-</script>
-
-<!-- Striped and hoverable -->
-<snice-table striped hoverable></snice-table>
-
-<!-- With sorting and selection -->
-<snice-table sortable selectable></snice-table>
-
-<!-- With search -->
-<snice-table searchable></snice-table>
-
-<!-- Sticky header -->
-<snice-table sticky-header></snice-table>
-
-<!-- Advanced formatting -->
-<script>
-table.columns = [
-  {
-    key: 'price',
-    label: 'Price',
-    type: 'currency',
-    currencyFormat: { currency: 'USD', decimals: 2 }
-  },
-  {
-    key: 'progress',
-    label: 'Progress',
-    type: 'progress',
-    progressFormat: { max: 100, showPercentage: true }
-  },
-  {
-    key: 'rating',
-    label: 'Rating',
-    type: 'rating',
-    ratingFormat: { max: 5, symbol: '★' }
-  },
-  {
-    key: 'trend',
-    label: 'Trend',
-    type: 'sparkline',
-    sparklineFormat: { type: 'line', color: '#3b82f6' }
-  },
-  {
-    key: 'status',
-    label: 'Status',
-    type: 'boolean',
-    booleanFormat: { trueValue: 'Active', falseValue: 'Inactive', useSymbols: true }
-  }
-];
-</script>
-
-<!-- Conditional formatting -->
+<snice-table id="table" striped hoverable sortable></snice-table>
 <script>
-table.columns = [
-  {
-    key: 'score',
-    label: 'Score',
-    type: 'number',
-    conditionalFormats: [
-      {
-        condition: (val) => val >= 90,
-        style: { backgroundColor: '#dcfce7', color: '#166534' }
-      },
-      {
-        condition: (val) => val < 60,
-        style: { backgroundColor: '#fee2e2', color: '#991b1b' }
-      }
-    ]
-  }
-];
+  const table = document.querySelector('#table');
+  table.setColumns([
+    { key: 'name', label: 'Name', sortable: true },
+    { key: 'age', label: 'Age', type: 'number', align: 'right' },
+    { key: 'price', label: 'Price', type: 'currency', currencyFormat: { currency: 'USD' } },
+    { key: 'rating', label: 'Rating', type: 'rating', ratingFormat: { max: 5 } }
+  ]);
+  table.setData([
+    { name: 'John', age: 30, price: 99.99, rating: 4 },
+    { name: 'Jane', age: 25, price: 149.99, rating: 5 }
+  ]);
 </script>
 
-<!-- Event handling -->
-<script>
-table.addEventListener('row-clicked', (e) => {
-  console.log('Clicked row:', e.detail.rowData);
-});
+<!-- Declarative columns -->
+<snice-table>
+  <snice-column key="name" label="Name"></snice-column>
+  <snice-column key="age" label="Age" type="number"></snice-column>
+  <snice-row name="Alice" age="30"></snice-row>
+  <snice-row name="Bob" age="25"></snice-row>
+</snice-table>
 
-table.addEventListener('table-row-selection-changed', (e) => {
-  console.log('Selected rows:', e.detail.selectedRows);
-});
-</script>
+<snice-table selectable clickable searchable></snice-table>
+<snice-table list></snice-table>
 ```
-
-## Features
-
-- 15 specialized column types
-- Excel-like formatting for numbers, dates, currencies
-- Visual formatters (progress bars, ratings, sparklines)
-- Conditional formatting with styles
-- Sorting and filtering
-- Row selection
-- Pagination and search
-- Sticky header
-- Custom cell formatters
-- Tooltips and ellipsis
-- Action buttons in cells
-- 3 sizes and variants
-- Loading state
-- Responsive and accessible