snice 4.27.0 → 4.29.0

package/docs/ai/components/gantt.md

@@ -5,9 +5,9 @@ Interactive Gantt chart with draggable/resizable task bars, zoom levels, task gr
 ## Properties
 
 ```ts
-tasks: GanttTask[] = []              // Task data array (set via JS)
-zoom: GanttZoom = 'week'             // attr: zoom — 'day' | 'week' | 'month'
-showDependencies: boolean = true     // attr: show-dependencies — Render dependency arrows
+tasks: GanttTask[] = []              // Task data array (set via JS, attribute: false)
+zoom: GanttZoom = 'week'             // 'day' | 'week' | 'month'
+showDependencies: boolean = true     // attr: show-dependencies
 ```
 
 ## Types
@@ -18,26 +18,27 @@ interface GanttTask {
   name: string;
   start: string;          // ISO date (YYYY-MM-DD)
   end: string;            // ISO date (YYYY-MM-DD)
-  progress?: number;      // 0-100 completion percentage
-  dependencies?: string[];// IDs of prerequisite tasks
-  color?: string;         // Bar color override
-  group?: string;         // Group name for task grouping
+  progress?: number;      // 0-100
+  dependencies?: string[];// task IDs
+  color?: string;         // bar color override
+  group?: string;         // group name
 }
 ```
 
-## Events
-
-- `task-click` -> `{ task: GanttTask }` — Task bar or name clicked
-- `task-resize` -> `{ task: GanttTask, start: string, end: string }` — Task resized via drag handles
-- `task-move` -> `{ task: GanttTask, start: string, end: string }` — Task moved via drag
-- `task-link` -> `{ source: string, target: string }` — Dependency link created
-
 ## Methods
 
 - `scrollToDate(date: string): void` — Scroll timeline to center on a date
 - `scrollToTask(id: string): void` — Scroll to a task's start date
 
-**CSS Parts:**
+## Events
+
+- `task-click` → `{ task: GanttTask }` — Task bar or name clicked
+- `task-resize` → `{ task: GanttTask, start: string, end: string }` — Task resized via drag handles
+- `task-move` → `{ task: GanttTask, start: string, end: string }` — Task moved via drag
+- `task-link` → `{ source: string, target: string }` — Dependency link created
+
+## CSS Parts
+
 - `base` - Outer Gantt container div
 - `header` - Top header bar with zoom controls
 - `controls` - Zoom toggle button group
@@ -45,15 +46,11 @@ interface GanttTask {
 - `task-list` - Left sidebar with task names
 - `timeline` - Right scrollable timeline area
 
-## Behavior
+## Basic Usage
 
-- Left sidebar shows task names (grouped if `group` set)
-- Timeline auto-calculates range from task dates with padding
-- Bars are draggable (move) and resizable (left/right handles)
-- Today line shown as red vertical indicator
-- Zoom toggle buttons in header (Day/Week/Month)
-
-## Usage
+```typescript
+import 'snice/components/gantt/snice-gantt';
+```
 
 ```html
 <snice-gantt zoom="week" show-dependencies></snice-gantt>
@@ -68,3 +65,10 @@ gantt.tasks = [
 gantt.addEventListener('task-move', e => console.log(e.detail));
 gantt.scrollToDate('2026-03-01');
 ```
+
+## Accessibility
+
+- Bars draggable (move) and resizable (left/right handles)
+- Today line as red vertical indicator
+- Zoom toggle buttons in header (Day/Week/Month)
+- role/aria not explicitly set on task bars

package/docs/ai/components/gauge.md

@@ -11,11 +11,21 @@ max: number = 100;
 label: string = '';
 variant: 'default'|'primary'|'success'|'warning'|'error'|'info' = 'default';
 size: 'small'|'medium'|'large' = 'medium';
-showValue: boolean = true;     // attribute: show-value
+showValue: boolean = true;
 thickness: number = 8;
 ```
 
-## Usage
+## CSS Parts
+
+- `base` - Outer gauge container div with role="meter"
+- `value` - Numeric value text span
+- `label` - Label text span below the gauge
+
+## Basic Usage
+
+```typescript
+import 'snice/components/gauge/snice-gauge';
+```
 
 ```html
 <!-- Basic -->
@@ -44,19 +54,8 @@ thickness: number = 8;
 <snice-gauge value="50" showValue="false"></snice-gauge>
 ```
 
-**CSS Parts:**
-- `base` - Outer gauge container div with role="meter"
-- `value` - Numeric value text span
-- `label` - Label text span below the gauge
+## Accessibility
 
-## Features
-
-- SVG semicircle arc with animated fill
-- 6 color variants
-- 3 sizes (small 80px, medium 120px, large 160px)
-- Custom min/max range
-- Configurable stroke thickness
-- Optional value display and label
-- Accessible: role="meter" with aria-valuenow/min/max
-- Smooth CSS transitions
-- Works without theme (CSS fallbacks)
+- role="meter" with aria-valuenow/min/max
+- aria-label from `label` prop or fallback "Gauge: {value}"
+- Smooth CSS transitions respect prefers-reduced-motion

package/docs/ai/components/heatmap.md

@@ -5,12 +5,12 @@ GitHub-style calendar heatmap visualization.
 ## Properties
 
 ```typescript
-data: HeatmapDataPoint[] = [];           // Array of { date: string, value: number }
-colorScheme: 'green'|'blue'|'purple'|'orange'|'red' = 'green'; // attribute: color-scheme
-showLabels: boolean = true;              // attribute: show-labels
-cellSize: number = 12;                   // attribute: cell-size, px
-cellGap: number = 3;                     // attribute: cell-gap, px
-showTooltip: boolean = true;             // attribute: show-tooltip
+data: HeatmapDataPoint[] = [];           // Array of { date: string, value: number } (attribute: false)
+colorScheme: 'green'|'blue'|'purple'|'orange'|'red' = 'green'; // attr: color-scheme
+showLabels: boolean = true;              // attr: show-labels
+cellSize: number = 12;                   // attr: cell-size, px
+cellGap: number = 3;                     // attr: cell-gap, px
+showTooltip: boolean = true;             // attr: show-tooltip
 weeks: number = 52;                      // Number of weeks to display
 ```
 
@@ -18,7 +18,18 @@ weeks: number = 52;                      // Number of weeks to display
 
 - `cell-click` → `{ date: string; value: number }` — fired when a cell is clicked
 
-## Usage
+## CSS Parts
+
+- `base` - Outer heatmap container div
+- `grid-area` - Grid area with labels and cells
+- `grid` - Cell grid container
+- `tooltip` - Hover tooltip element
+
+## Basic Usage
+
+```typescript
+import 'snice/components/heatmap/snice-heatmap';
+```
 
 ```html
 <snice-heatmap color-scheme="green"></snice-heatmap>
@@ -35,19 +46,8 @@ heatmap.addEventListener('cell-click', (e) => {
 });
 ```
 
-**CSS Parts:**
-- `base` - Outer heatmap container div
-- `grid-area` - Grid area with labels and cells
-- `grid` - Cell grid container
-- `tooltip` - Hover tooltip element
-
-## Features
+## Accessibility
 
-- 5 color schemes (green, blue, purple, orange, red)
-- 5 intensity levels (empty, low, medium, high, very-high)
-- Day labels (Mon, Wed, Fri) on left
-- Month labels on top
+- aria-labels on all cells with date and value
+- Cells are focusable buttons
 - Tooltip on hover with date and value
-- Cell click events
-- Configurable cell size, gap, and week count
-- Accessible: aria-labels on all cells

package/docs/ai/components/image.md

@@ -25,7 +25,11 @@ height: string = '';
 - `image` - The img element
 - `placeholder` - Placeholder element (shown when loading or no src)
 
-## Usage
+## Basic Usage
+
+```typescript
+import 'snice/components/image/snice-image';
+```
 
 ```html
 <!-- Basic -->
@@ -51,19 +55,9 @@ height: string = '';
 <!-- Custom dimensions -->
 <snice-image src="image.jpg" width="300px" height="200px"></snice-image>
 
-<!-- Lazy loading -->
+<!-- Eager loading -->
 <snice-image src="image.jpg" lazy="false"></snice-image>
 
-<!-- Placeholder -->
+<!-- Placeholder (no src) -->
 <snice-image size="medium" variant="circle"></snice-image>
 ```
-
-## Features
-
-- 3 size presets (small: 48px, medium: 96px, large: 192px)
-- 3 shape variants (rounded, square, circle)
-- 5 object-fit options
-- Lazy loading (default on)
-- Fallback image support
-- Placeholder for missing images
-- Custom width/height

package/docs/ai/components/input.md

@@ -1,6 +1,6 @@
 # snice-input
 
-Text input field with validation and icons.
+Text input field with validation, icons, and form association.
 
 ## Properties
 
@@ -18,10 +18,10 @@ clearable: boolean = false;
 loading: boolean = false;
 password: boolean = false;
 label: string = '';
-helperText: string = '';       // attribute: helper-text
-errorText: string = '';        // attribute: error-text
-prefixIcon: string = '';       // attribute: prefix-icon
-suffixIcon: string = '';       // attribute: suffix-icon
+helperText: string = '';       // attr: helper-text
+errorText: string = '';        // attr: error-text
+prefixIcon: string = '';       // attr: prefix-icon
+suffixIcon: string = '';       // attr: suffix-icon
 min: string = '';
 max: string = '';
 step: string = '';
@@ -31,15 +31,10 @@ pattern: string = '';
 autocomplete: string = '';
 name: string = '';
 align: 'top'|'center'|'bottom'|'' = '';  // vertical alignment when host has explicit height
-labelAlign: 'left'|'center'|'right' = 'left';  // attribute: label-align — label text alignment
+labelAlign: 'left'|'center'|'right' = 'left';  // attr: label-align
 stretch: boolean = false;                 // input fills full host height
 ```
 
-## Slots
-
-- `prefix-icon` - Custom prefix icon (overrides `prefixIcon` property)
-- `suffix-icon` - Custom suffix icon (overrides `suffixIcon` property)
-
 ## Methods
 
 - `focus()` - Focus input
@@ -52,13 +47,26 @@ stretch: boolean = false;                 // input fills full host height
 
 ## Events
 
-- `input-input` - {value, input}
-- `input-change` - {value, input}
-- `input-focus` - {input}
-- `input-blur` - {input}
-- `input-clear` - {input}
+- `input-input` → `{ value, input }` — each keystroke
+- `input-change` → `{ value, input }` — value commit
+- `input-focus` → `{ input }` — focus
+- `input-blur` → `{ input }` — blur
+- `input-clear` → `{ input }` — cleared
+
+## Slots
+
+- `prefix-icon` - Custom prefix icon (overrides `prefixIcon` property)
+- `suffix-icon` - Custom suffix icon (overrides `suffixIcon` property)
+
+## CSS Parts
+
+`wrapper`, `label`, `container`, `input`, `prefix-icon`, `suffix-icon`, `clear`, `spinner`, `password-toggle`, `helper-text`, `error-text`
+
+## Basic Usage
 
-## Usage
+```typescript
+import 'snice/components/input/snice-input';
+```
 
 ```html
 <!-- Basic -->
@@ -69,29 +77,13 @@ stretch: boolean = false;                 // input fills full host height
 <snice-input variant="filled"></snice-input>
 <snice-input variant="underlined"></snice-input>
 
-<!-- Input types -->
-<snice-input type="email" label="Email"></snice-input>
-<snice-input type="password" label="Password"></snice-input>
-<snice-input type="number" label="Age"></snice-input>
-
-<!-- ⚠️ prefix-icon="search" renders as PLAIN TEXT. Use slots for icon fonts. -->
-
 <!-- Icon SLOTS — for Material Symbols, Font Awesome, SVGs -->
 <snice-input placeholder="Search">
   <span slot="prefix-icon" class="material-symbols-outlined">search</span>
 </snice-input>
-<snice-input placeholder="Email">
-  <span slot="suffix-icon" class="material-symbols-outlined">mail</span>
-</snice-input>
-<snice-input placeholder="Search users">
-  <i slot="prefix-icon" class="fa-solid fa-magnifying-glass"></i>
-  <span slot="suffix-icon" class="material-symbols-outlined">person</span>
-</snice-input>
 
 <!-- Icon ATTRIBUTES — for emoji, URLs, image files only -->
 <snice-input prefix-icon="🔍" placeholder="Search"></snice-input>
-<snice-input suffix-icon="✉️" type="email"></snice-input>
-<snice-input prefix-icon="/icons/search.svg" placeholder="Search"></snice-input>
 
 <!-- Password toggle -->
 <snice-input type="password" password label="Password"></snice-input>
@@ -99,25 +91,17 @@ stretch: boolean = false;                 // input fills full host height
 <!-- Clearable -->
 <snice-input value="Text" clearable></snice-input>
 
-<!-- Helper text -->
-<snice-input label="Username" helper-text="Must be unique"></snice-input>
-
 <!-- Error state -->
 <snice-input label="Email" invalid error-text="Invalid email"></snice-input>
 
-<!-- Validation -->
-<snice-input type="email" required minlength="5" maxlength="50"></snice-input>
-
-<!-- Sizes -->
-<snice-input size="small"></snice-input>
-<snice-input size="medium"></snice-input>
-<snice-input size="large"></snice-input>
-
 <!-- Form integration -->
 <snice-input name="username" required></snice-input>
 
-<!-- Events -->
-<snice-input id="inp"></snice-input>
+<!-- Vertical alignment (when host has explicit height) -->
+<snice-input style="height:200px" align="center"></snice-input>
+
+<!-- Stretch input to fill height -->
+<snice-input style="height:200px" stretch></snice-input>
 ```
 
 ```typescript
@@ -125,30 +109,14 @@ inp.addEventListener('input-input', (e) => console.log('Input:', e.detail.value)
 inp.addEventListener('input-change', (e) => console.log('Change:', e.detail.value));
 ```
 
-```html
+## Keyboard Navigation
 
-<!-- Vertical alignment (when host has explicit height) -->
-<snice-input style="height:200px" align="top"></snice-input>
-<snice-input style="height:200px" align="center"></snice-input>
-<snice-input style="height:200px" align="bottom"></snice-input>
+- Tab to focus/unfocus
+- Standard native input keyboard behavior
 
-<!-- Stretch input to fill height -->
-<snice-input style="height:200px" stretch></snice-input>
-```
-
-## CSS Parts
-
-`wrapper`, `label`, `container`, `input`, `prefix-icon`, `suffix-icon`, `clear`, `spinner`, `password-toggle`, `helper-text`, `error-text`
+## Accessibility
 
-## Features
-
-- Form-associated custom element
-- 10 input types
-- 3 visual variants
-- Prefix/suffix icons (URL, image files, emoji). Use slots for icon fonts.
-- Password visibility toggle
-- Clearable with X button
-- Helper and error text
-- Validation (min/max/pattern/length)
-- 3 sizes
-- Keyboard accessible
+- Form-associated custom element (ElementInternals)
+- aria-invalid set when invalid
+- Required indicator shown
+- Clear button and password toggle have aria-label

package/docs/ai/components/invoice.md

@@ -5,21 +5,21 @@ Professional invoice document with 5 variants, deep theming, QR support, and pri
 ## Properties
 
 ```typescript
-invoiceNumber: string = ''              // attribute: invoice-number
-date: string = ''                       // Invoice date
-dueDate: string = ''                    // attribute: due-date
+invoiceNumber: string = ''              // attr: invoice-number
+date: string = ''
+dueDate: string = ''                    // attr: due-date
 status: InvoiceStatus = 'draft'         // 'draft' | 'sent' | 'paid' | 'overdue' | 'cancelled'
 currency: string = 'USD'               // ISO 4217 currency code
-taxRate: number = 0                     // attribute: tax-rate — percentage (e.g., 10 = 10%)
-discount: number = 0                    // Discount percentage
-from: InvoiceParty = { name: '' }      // Sender info
-to: InvoiceParty = { name: '' }        // Recipient info
-items: InvoiceItem[] = []               // Line items
-notes: string = ''                      // Footer notes/terms
+taxRate: number = 0                     // attr: tax-rate — percentage
+discount: number = 0                    // percentage
+from: InvoiceParty = { name: '' }      // attribute: false
+to: InvoiceParty = { name: '' }        // attribute: false
+items: InvoiceItem[] = []               // attribute: false
+notes: string = ''
 variant: InvoiceVariant = 'standard'   // 'standard' | 'modern' | 'classic' | 'minimal' | 'detailed'
-showQr: boolean = false                 // attribute: show-qr — show QR code area
-qrData: string = ''                     // attribute: qr-data — data to encode
-qrPosition: QrPosition = 'bottom-right' // attribute: qr-position — 'top-right' | 'bottom-right' | 'bottom-left' | 'footer'
+showQr: boolean = false                 // attr: show-qr
+qrData: string = ''
+qrPosition: QrPosition = 'bottom-right' // 'top-right' | 'bottom-right' | 'bottom-left' | 'footer'
 ```
 
 ## Types
@@ -33,42 +33,33 @@ interface InvoiceItem {
 }
 ```
 
-## Variants
-
-- `standard` — Clean corporate grid layout
-- `modern` — Bold accent header stripe, card sections, shadow
-- `classic` — Serif typography, ruled lines, formal borders
-- `minimal` — Ultra-clean whitespace, thin type, no borders
-- `detailed` — Dense accounting-style, line numbers, striped rows
-
-## Slots
+## Methods
 
-- `qr` - Custom QR code content (shown when show-qr is set)
-- `(default)` - Footer content
+- `print()` - Triggers window.print() with @media print styles
+- `toJSON()` - Returns full invoice data with computed totals
 
 ## Events
 
-- `invoice-item-change` -> `{ items: InvoiceItem[], subtotal: number, tax: number, total: number }`
-- `invoice-status-change` -> `{ oldStatus: InvoiceStatus, newStatus: InvoiceStatus }`
+- `invoice-item-change` → `{ items: InvoiceItem[], subtotal: number, tax: number, total: number }`
+- `invoice-status-change` → `{ oldStatus: InvoiceStatus, newStatus: InvoiceStatus }`
 
-## Methods
+## Slots
 
-- `print()` - Triggers window.print() with @media print styles
-- `toJSON()` - Returns full invoice data with computed totals
+- `qr` - Custom QR code content (shown when show-qr is set)
+- `(default)` - Footer content
 
 ## CSS Parts
 
 `base`, `header`, `title`, `status`, `logo`, `meta`, `parties`, `party`, `party-label`, `party-name`, `party-detail`, `table`, `table-header`, `table-row`, `table-cell`, `summary`, `summary-row`, `summary-label`, `summary-value`, `discount-row`, `tax-row`, `total`, `notes`, `notes-label`, `notes-content`, `qr`, `qr-container`, `footer`
 
-## Usage
+## CSS Custom Properties
+
+`--invoice-max-width`, `--invoice-padding`, `--invoice-bg`, `--invoice-text`, `--invoice-text-secondary`, `--invoice-accent`, `--invoice-border`, `--invoice-border-radius`, `--invoice-shadow`, `--invoice-table-header-bg`, `--invoice-summary-width`, `--invoice-qr-size`
+
+## Basic Usage
 
 ```typescript
-inv.from = { name: 'Acme Corp', address: '123 Main St', email: 'billing@acme.com' };
-inv.to = { name: 'Client Inc', address: '456 Oak Ave' };
-inv.items = [
-  { description: 'Web Development', quantity: 40, unitPrice: 150 },
-  { description: 'Design Services', quantity: 10, unitPrice: 120 }
-];
+import 'snice/components/invoice/snice-invoice';
 ```
 
 ```html
@@ -82,6 +73,15 @@ inv.items = [
 </snice-invoice>
 ```
 
+```typescript
+inv.from = { name: 'Acme Corp', address: '123 Main St', email: 'billing@acme.com' };
+inv.to = { name: 'Client Inc', address: '456 Oak Ave' };
+inv.items = [
+  { description: 'Web Development', quantity: 40, unitPrice: 150 },
+  { description: 'Design Services', quantity: 10, unitPrice: 120 }
+];
+```
+
 ## Notes
 
 - `amount` on item overrides `quantity * unitPrice` calculation
@@ -89,4 +89,3 @@ inv.items = [
 - Currency formatting via `Intl.NumberFormat`
 - `detailed` variant shows line numbers and per-item tax
 - Print styles: high contrast, no shadows/backgrounds, page break management
-- QR `<slot name="qr">` renders placeholder box when no content slotted

package/docs/ai/components/kanban.md

@@ -5,12 +5,12 @@ Drag-and-drop kanban board.
 ## Properties
 
 ```typescript
-columns: KanbanColumn[] = [];
-allowDragDrop: boolean = true;   // attribute: allow-drag-drop
-showCardCount: boolean = true;   // attribute: show-card-count
+columns: KanbanColumn[] = [];           // attribute: false
+allowDragDrop: boolean = true;          // attr: allow-drag-drop
+showCardCount: boolean = true;          // attr: show-card-count
 ```
 
-## Interfaces
+## Types
 
 ```typescript
 interface KanbanLabel {
@@ -43,87 +43,58 @@ interface KanbanCard {
 
 ## Methods
 
-```typescript
-addColumn(column: KanbanColumn): void
-removeColumn(id: string | number): void
-addCard(columnId: string | number, card: KanbanCard): void
-removeCard(cardId: string | number): void
-moveCard(cardId: string | number, targetColumnId: string | number, targetIndex?: number): void
-getColumn(id: string | number): KanbanColumn | undefined
-getCard(id: string | number): KanbanCard | undefined
-filterByLabels(labels: string[]): void
-search(query: string): void
-clearFilters(): void
-```
+- `addColumn(column: KanbanColumn): void`
+- `removeColumn(id: string | number): void`
+- `addCard(columnId: string | number, card: KanbanCard): void`
+- `removeCard(cardId: string | number): void`
+- `moveCard(cardId: string | number, targetColumnId: string | number, targetIndex?: number): void`
+- `getColumn(id: string | number): KanbanColumn | undefined`
+- `getCard(id: string | number): KanbanCard | undefined`
+- `filterByLabels(labels: string[]): void`
+- `search(query: string): void`
+- `clearFilters(): void`
 
 ## Events
 
-- `kanban-card-move` - Card moved (detail: { card, fromColumn, toColumn, kanban })
-- `kanban-card-click` - Card clicked (detail: { card, kanban })
+- `kanban-card-move` → `{ card, fromColumn, toColumn, kanban }`
+- `kanban-card-click` → `{ card, kanban }`
+
+## CSS Parts
+
+- `base` - Outer kanban board container div
+- `column-header` - Column header with title and card count
+- `column-cards` - Card list area within a column
+
+## Basic Usage
 
-## Usage
+```typescript
+import 'snice/components/kanban/snice-kanban';
+```
 
 ```javascript
 kanban.columns = [
   {
-    id: 'todo',
-    title: 'To Do',
-    color: '#f44336',
+    id: 'todo', title: 'To Do', color: '#f44336',
     cards: [
-      {
-        id: 1,
-        title: 'Task',
-        description: 'Details',
-        assignee: 'Alice',
-        labels: [
-          'bug',
-          { text: 'urgent', color: '#dc2626', background: '#fee2e2', icon: '🔥', iconPosition: 'left' }
-        ],
-        color: '#f44336'
-      }
+      { id: 1, title: 'Task', description: 'Details', assignee: 'Alice',
+        labels: ['bug', { text: 'urgent', color: '#dc2626', background: '#fee2e2', icon: '🔥' }],
+        color: '#f44336' }
     ]
   },
   { id: 'done', title: 'Done', cards: [] }
 ];
 
-// Add/remove/move
 kanban.addCard('todo', { id: 2, title: 'New Task' });
 kanban.moveCard(1, 'done');
-kanban.removeCard(2);
-
-// Filter/search
-kanban.filterByLabels(['bug', 'high-priority']);
+kanban.filterByLabels(['bug']);
 kanban.search('landing page');
 kanban.clearFilters();
 
-// Events
 kanban.addEventListener('kanban-card-move', (e) => {
   console.log(`Moved ${e.detail.card.title}`);
 });
 ```
 
 ```html
-<!-- Disable drag/drop -->
 <snice-kanban allow-drag-drop="false"></snice-kanban>
 ```
-
-**CSS Parts:**
-- `base` - Outer kanban board container div
-- `column-header` - Column header with title and card count
-- `column-cards` - Card list area within a column
-
-## Features
-
-- Drag and drop cards between columns and within same column
-- Custom labels with colors, backgrounds, and icons
-- Label icon positioning (left/right)
-- Filter by labels
-- Search by title/description
-- Card assignees
-- Color-coded cards and columns
-- Card counts
-- Click handling
-- Programmatic card movement with positioning
-- Column management
-- Event dispatching
-- View Transitions API animations