snice 4.9.0 → 4.10.0

package/docs/ai/components/gantt.md

@@ -0,0 +1,63 @@
+# snice-gantt
+
+Interactive Gantt chart with draggable/resizable task bars, zoom levels, task groups, progress indicators, dependencies, and today line.
+
+## 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
+```
+
+## Types
+
+```ts
+interface GanttTask {
+  id: string;
+  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
+}
+```
+
+## 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
+
+## Behavior
+
+- 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
+
+```html
+<snice-gantt zoom="week" show-dependencies></snice-gantt>
+```
+
+```js
+const gantt = document.querySelector('snice-gantt');
+gantt.tasks = [
+  { id: '1', name: 'Design', start: '2026-03-01', end: '2026-03-07', progress: 80, group: 'Phase 1' },
+  { id: '2', name: 'Develop', start: '2026-03-05', end: '2026-03-15', dependencies: ['1'], group: 'Phase 1' },
+  { id: '3', name: 'Test', start: '2026-03-12', end: '2026-03-20', color: 'rgb(234 88 12)' }
+];
+gantt.addEventListener('task-move', e => console.log(e.detail));
+gantt.scrollToDate('2026-03-01');
+```

package/docs/ai/components/gauge.md

@@ -11,7 +11,7 @@ max: number = 100;
 label: string = '';
 variant: 'default'|'primary'|'success'|'warning'|'error'|'info' = 'default';
 size: 'small'|'medium'|'large' = 'medium';
-showValue: boolean = true;
+showValue: boolean = true;     // attribute: show-value
 thickness: number = 8;
 ```
 

package/docs/ai/components/heatmap.md

@@ -6,11 +6,11 @@ GitHub-style calendar heatmap visualization.
 
 ```typescript
 data: HeatmapDataPoint[] = [];           // Array of { date: string, value: number }
-colorScheme: 'green'|'blue'|'purple'|'orange'|'red' = 'green';
-showLabels: boolean = true;              // Show day/month labels
-cellSize: number = 12;                   // Cell size in px
-cellGap: number = 3;                     // Gap between cells in px
-showTooltip: boolean = true;             // Tooltip on hover
+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
 weeks: number = 52;                      // Number of weeks to display
 ```
 

package/docs/ai/components/input.md

@@ -15,17 +15,18 @@ required: boolean = false;
 invalid: boolean = false;
 readonly: boolean = false;
 clearable: boolean = false;
+loading: boolean = false;
+password: boolean = false;
 label: string = '';
-helperText: string = '';
-errorText: string = '';
-prefix: string = '';
-suffix: string = '';
-prefixIcon: string = '';
-suffixIcon: string = '';
+helperText: string = '';       // attribute: helper-text
+errorText: string = '';        // attribute: error-text
+prefixIcon: string = '';       // attribute: prefix-icon
+suffixIcon: string = '';       // attribute: suffix-icon
 min: string = '';
 max: string = '';
-minlength: number = 0;
-maxlength: number = 0;
+step: string = '';
+minlength: number = -1;
+maxlength: number = -1;
 pattern: string = '';
 autocomplete: string = '';
 name: string = '';
@@ -45,10 +46,11 @@ name: string = '';
 
 ## Events
 
-- `input` - {value, input}
-- `change` - {value, input}
-- `focus` - {input}
-- `blur` - {input}
+- `input-input` - {value, input}
+- `input-change` - {value, input}
+- `input-focus` - {input}
+- `input-blur` - {input}
+- `input-clear` - {input}
 
 ## Usage
 
@@ -72,9 +74,8 @@ name: string = '';
 <snice-input prefix-icon="/icons/search.svg" placeholder="Search"></snice-input>
 <snice-input prefix-icon="search" placeholder="Search"></snice-input> <!-- Material Symbols -->
 
-<!-- With prefix/suffix text -->
-<snice-input prefix="$" type="number"></snice-input>
-<snice-input suffix=".com" type="url"></snice-input>
+<!-- Password toggle -->
+<snice-input type="password" password label="Password"></snice-input>
 
 <!-- Clearable -->
 <snice-input value="Text" clearable></snice-input>
@@ -100,8 +101,8 @@ name: string = '';
 <snice-input id="inp"></snice-input>
 <script>
 const inp = document.querySelector('#inp');
-inp.addEventListener('input', (e) => console.log('Input:', e.detail.value));
-inp.addEventListener('change', (e) => console.log('Change:', e.detail.value));
+inp.addEventListener('input-input', (e) => console.log('Input:', e.detail.value));
+inp.addEventListener('input-change', (e) => console.log('Change:', e.detail.value));
 </script>
 
 <!-- Icon slots (for external CSS icon fonts like Material Symbols) -->
@@ -125,7 +126,8 @@ inp.addEventListener('change', (e) => console.log('Change:', e.detail.value));
 - Form-associated custom element
 - 10 input types
 - 3 visual variants
-- Prefix/suffix icons (URL, image files, emoji, font ligatures) or text
+- Prefix/suffix icons (URL, image files, emoji, font ligatures)
+- Password visibility toggle
 - Clearable with X button
 - Helper and error text
 - Validation (min/max/pattern/length)

package/docs/ai/components/kanban.md

@@ -6,8 +6,8 @@ Drag-and-drop kanban board.
 
 ```typescript
 columns: KanbanColumn[] = [];
-allowDragDrop: boolean = true;
-showCardCount: boolean = true;
+allowDragDrop: boolean = true;   // attribute: allow-drag-drop
+showCardCount: boolean = true;   // attribute: show-card-count
 ```
 
 ## Interfaces

package/docs/ai/components/kpi.md

@@ -9,12 +9,12 @@ Key performance indicator display with value, label, trend, sparkline, and senti
 ```typescript
 label: string = ''                      // Metric label/name
 value: string | number = ''             // Main metric value
-trendValue?: string | number            // Trend value (e.g., "+12.5%")
-trendData?: number[]                    // Sparkline data array
+trendValue?: string | number            // attribute: trend-value
+trendData?: number[]                    // Sparkline data array (JS only)
 sentiment?: KpiSentiment                // 'up' | 'down' | 'neutral'
 size: KpiSize = 'medium'                // 'small' | 'medium' | 'large'
-showSparkline: boolean = true           // Show sparkline when data provided
-colorValue: boolean = false             // Apply sentiment color to value
+showSparkline: boolean = true           // attribute: show-sparkline
+colorValue: boolean = false             // attribute: color-value
 ```
 
 ## Slots
@@ -115,55 +115,6 @@ after   // Content after sparkline (e.g., actions)
 ::part(sparkline)   /* Sparkline container */
 ```
 
-## Styling
-
-```css
---snice-color-background
---snice-color-border
---snice-color-text
---snice-color-text-secondary
---snice-color-success        /* Up sentiment */
---snice-color-danger         /* Down sentiment */
---snice-spacing-xs
---snice-spacing-sm
---snice-spacing-md
---snice-spacing-lg
---snice-font-size-xs
---snice-font-size-sm
---snice-font-size-md
---snice-font-size-2xl
---snice-font-size-3xl
---snice-font-size-4xl
---snice-font-weight-medium
---snice-font-weight-semibold
---snice-font-weight-bold
---snice-border-radius-md
-```
-
-## Common Patterns
-
-```html
-<!-- Financial metrics -->
-<snice-kpi label="Revenue" value="$127K" trend-value="+22%" sentiment="up"></snice-kpi>
-<snice-kpi label="Costs" value="$45K" trend-value="-5%" sentiment="down"></snice-kpi>
-<snice-kpi label="Profit" value="$82K" trend-value="+35%" sentiment="up"></snice-kpi>
-
-<!-- User metrics -->
-<snice-kpi label="Total Users" value="12,345" trend-value="+234" sentiment="up"></snice-kpi>
-<snice-kpi label="Active Users" value="8,901" trend-value="+156" sentiment="up"></snice-kpi>
-<snice-kpi label="Churn Rate" value="2.3%" trend-value="+0.2%" sentiment="down"></snice-kpi>
-
-<!-- Performance metrics -->
-<snice-kpi label="Response Time" value="245ms" trend-value="-23ms" sentiment="down"></snice-kpi>
-<snice-kpi label="Uptime" value="99.9%" trend-value="±0%" sentiment="neutral"></snice-kpi>
-<snice-kpi label="Error Rate" value="0.12%" trend-value="-0.03%" sentiment="down"></snice-kpi>
-
-<!-- Marketing metrics -->
-<snice-kpi label="Conversion Rate" value="3.24%" trend-value="+0.5%" sentiment="up"></snice-kpi>
-<snice-kpi label="CAC" value="$156" trend-value="-$12" sentiment="down"></snice-kpi>
-<snice-kpi label="LTV" value="$1,245" trend-value="+$87" sentiment="up"></snice-kpi>
-```
-
 ## Notes
 
 - Sparkline automatically uses sentiment color (success/danger/muted)

package/docs/ai/components/layout.md

@@ -1,22 +1,18 @@
 # snice-layout
 
-Collection of pre-built page layouts for common application patterns.
+Application layout with header navigation, main content area, and footer.
 
-## snice-layout
-
-Base layout with header navigation, main content area, and footer.
-
-### Slots
+## Slots
 
 - `brand` - Logo/brand in header
 - `page` - Main page content
 - `footer` - Footer content
 
-### Methods
+## Methods
 
-- `update(appContext, placards, currentRoute, routeParams)` - Update layout navigation
+- `update(appContext, placards, currentRoute, routeParams)` - Update layout navigation from router state
 
-### Usage
+## Usage
 
 ```html
 <snice-layout>
@@ -27,235 +23,14 @@ Base layout with header navigation, main content area, and footer.
     <!-- Page content -->
   </div>
   <div slot="footer">
-    <p>© 2025 My Company</p>
+    <p>&copy; 2025 My Company</p>
   </div>
 </snice-layout>
 ```
 
-## snice-layout-centered
-
-Centered single-column layout with configurable width.
-
-### Properties
-
-```typescript
-width: 'sm'|'md'|'lg'|'xl' = 'md';
-```
-
-### Slots
-
-- `page` - Main content (centered)
-
-### Usage
-
-```html
-<snice-layout-centered width="lg">
-  <div slot="page">
-    <!-- Centered content -->
-  </div>
-</snice-layout-centered>
-```
-
-## snice-layout-split
-
-Two-column split layout.
-
-### Slots
-
-- `left` - Left column content
-- `right` - Right column content
-
-### Usage
-
-```html
-<snice-layout-split>
-  <div slot="left">
-    <!-- Left sidebar -->
-  </div>
-  <div slot="right">
-    <!-- Main content -->
-  </div>
-</snice-layout-split>
-```
-
-## snice-layout-sidebar
-
-Layout with collapsible sidebar and main content area.
-
-### Slots
-
-- `brand` - Logo/brand in sidebar header
-- `sidebar` - Sidebar navigation content
-- `page` - Main page content
-- `footer` - Footer content
-
-### Usage
-
-```html
-<snice-layout-sidebar>
-  <div slot="brand">
-    <h1>My App</h1>
-  </div>
-  <nav slot="sidebar">
-    <!-- Sidebar navigation -->
-  </nav>
-  <div slot="page">
-    <!-- Main content -->
-  </div>
-</snice-layout-sidebar>
-```
-
-## snice-layout-dashboard
-
-Dashboard layout with header, sidebar, and content grid.
-
-### Slots
-
-- `brand` - Logo/brand
-- `header` - Top header content
-- `sidebar` - Left sidebar navigation
-- `page` - Main dashboard content
-
-### Usage
-
-```html
-<snice-layout-dashboard>
-  <div slot="brand">
-    <h1>Dashboard</h1>
-  </div>
-  <div slot="header">
-    <!-- User menu, notifications -->
-  </div>
-  <nav slot="sidebar">
-    <!-- Nav items -->
-  </nav>
-  <div slot="page">
-    <!-- Dashboard widgets -->
-  </div>
-</snice-layout-dashboard>
-```
-
-## snice-layout-landing
-
-Landing page layout with hero section.
-
-### Slots
-
-- `header` - Top navigation
-- `hero` - Hero section
-- `page` - Main content
-- `footer` - Footer
-
-### Usage
-
-```html
-<snice-layout-landing>
-  <nav slot="header">
-    <!-- Top nav -->
-  </nav>
-  <div slot="hero">
-    <h1>Welcome</h1>
-  </div>
-  <div slot="page">
-    <!-- Features, content -->
-  </div>
-  <footer slot="footer">
-    <!-- Links, copyright -->
-  </footer>
-</snice-layout-landing>
-```
-
-## snice-layout-blog
-
-Blog-style layout with header, content, and sidebar.
-
-### Slots
-
-- `header` - Header navigation
-- `page` - Main blog content
-- `sidebar` - Blog sidebar (recent posts, categories)
-- `footer` - Footer
-
-### Usage
-
-```html
-<snice-layout-blog>
-  <nav slot="header">
-    <!-- Blog nav -->
-  </nav>
-  <article slot="page">
-    <!-- Blog post -->
-  </article>
-  <aside slot="sidebar">
-    <!-- Recent posts, categories -->
-  </aside>
-</snice-layout-blog>
-```
-
-## snice-layout-fullscreen
-
-Full viewport layout with no margins.
-
-### Slots
-
-- `page` - Fullscreen content
-
-### Usage
-
-```html
-<snice-layout-fullscreen>
-  <div slot="page">
-    <!-- Fullscreen app -->
-  </div>
-</snice-layout-fullscreen>
-```
-
-## snice-layout-minimal
-
-Minimal layout with just header and content.
-
-### Slots
-
-- `header` - Minimal header
-- `page` - Main content
-
-### Usage
-
-```html
-<snice-layout-minimal>
-  <div slot="header">
-    <h1>Simple App</h1>
-  </div>
-  <div slot="page">
-    <!-- Content -->
-  </div>
-</snice-layout-minimal>
-```
-
-## snice-layout-card
-
-Card-based centered layout for login/signup pages.
-
-### Slots
-
-- `page` - Card content
-
-### Usage
-
-```html
-<snice-layout-card>
-  <div slot="page">
-    <h2>Sign In</h2>
-    <!-- Login form -->
-  </div>
-</snice-layout-card>
-```
-
 ## Features
 
-- 10 pre-built layout patterns
-- Responsive design
-- Slotted content areas
-- Navigation integration (where applicable)
-- Router integration support
-- Common UI patterns (dashboard, blog, landing, etc.)
+- Grid layout: header, main, footer
+- Integrated `snice-nav` in header
+- Router integration via `update()` method
+- Slotted brand, page, and footer areas

package/docs/ai/components/link-preview.md

@@ -1,6 +1,6 @@
 # snice-link-preview
 
-Social media-style link preview card. Purely visual -- all data passed via properties.
+Rich URL preview card with image, title, description, and site info.
 
 ## Properties
 
@@ -8,51 +8,42 @@ Social media-style link preview card. Purely visual -- all data passed via prope
 url: string = '';
 title: string = '';
 description: string = '';
-image: string = '';                              // image URL
-siteName: string = '';                           // attribute: site-name
-favicon: string = '';                            // small icon URL
-variant: 'horizontal' | 'vertical' = 'vertical';
-size: 'small' | 'medium' | 'large' = 'medium';
+image: string = '';
+siteName: string = '';  // attr: site-name
+favicon: string = '';
+variant: 'vertical'|'horizontal' = 'vertical';
+size: 'small'|'medium'|'large' = 'medium';
 ```
 
 ## Events
 
-```typescript
-'@snice/link-click': CustomEvent<{ url: string }>  // emitted on click
-```
+- `@snice/link-click` → `{ url: string }`
 
 ## Usage
 
 ```html
 <!-- Vertical (default) -->
 <snice-link-preview
+  url="https://example.com"
   title="Article Title"
-  description="A brief summary of the article content."
-  image="https://example.com/og-image.jpg"
+  description="Brief summary."
+  image="/images/og.jpg"
   site-name="example.com"
-  favicon="https://example.com/favicon.ico"
-  url="https://example.com/article"
-></snice-link-preview>
+  favicon="/icons/favicon.ico">
+</snice-link-preview>
 
 <!-- Horizontal, small -->
-<snice-link-preview
-  variant="horizontal"
-  size="small"
-  title="Quick Link"
-  description="Short description"
-  site-name="example.com"
-  url="https://example.com"
-></snice-link-preview>
+<snice-link-preview variant="horizontal" size="small"
+  url="https://example.com" title="Quick Link" description="Short.">
+</snice-link-preview>
 ```
 
 ## Features
 
 - Vertical (image top) and horizontal (image left) layouts
 - 3 sizes: small, medium, large
-- Image with fallback placeholder
-- Title truncation (2 lines), description truncation (3 lines)
-- Domain extraction from URL
-- Favicon + site name footer
-- Hover shadow effect
-- Click opens URL in new tab
-- Accessible: role="article", keyboard navigable
+- Placeholder icon when no image
+- Title clamped to 2 lines, description to 3
+- Domain extracted from URL
+- Click opens URL in new tab (noopener, noreferrer)
+- Keyboard accessible (Enter/Space)