snice 4.8.0 → 4.10.0

package/docs/components/funnel.md

@@ -0,0 +1,193 @@
+[//]: # (AI: For a low-token version of this doc, use docs/ai/components/funnel.md instead)
+
+# Funnel Component
+
+The funnel component renders an SVG-based funnel/conversion chart, ideal for visualizing pipeline stages, conversion funnels, and drop-off analysis. Each stage is rendered as a trapezoid shape that narrows proportionally to its value.
+
+## Table of Contents
+- [Basic Usage](#basic-usage)
+- [Properties](#properties)
+- [Methods](#methods)
+- [Events](#events)
+- [Examples](#examples)
+- [Accessibility](#accessibility)
+- [Best Practices](#best-practices)
+
+## Basic Usage
+
+```html
+<snice-funnel id="my-funnel"></snice-funnel>
+
+<script type="module">
+  import 'snice/components/funnel/snice-funnel';
+
+  const funnel = document.getElementById('my-funnel');
+  funnel.data = [
+    { label: 'Visitors', value: 10000 },
+    { label: 'Leads', value: 5000 },
+    { label: 'Opportunities', value: 2000 },
+    { label: 'Customers', value: 500 },
+  ];
+</script>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `data` | `FunnelStage[]` | `[]` | Array of stage objects with label, value, and optional color |
+| `variant` | `'default' \| 'gradient'` | `'default'` | Color variant - default uses distinct colors, gradient uses opacity fade |
+| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Funnel layout direction |
+| `show-labels` | `boolean` | `true` | Whether to display stage labels |
+| `show-values` | `boolean` | `true` | Whether to display stage values |
+| `show-percentages` | `boolean` | `true` | Whether to display conversion percentages |
+| `animation` | `boolean` | `false` | Whether to animate stages on initial render |
+
+### FunnelStage Interface
+
+```typescript
+interface FunnelStage {
+  label: string;     // Stage name (e.g., "Visitors")
+  value: number;     // Numeric value for the stage
+  color?: string;    // Optional custom color (CSS color string)
+}
+```
+
+## Methods
+
+| Method | Return Type | Description |
+|--------|-------------|-------------|
+| `setStages(stages)` | `void` | Set funnel data programmatically (alternative to setting `data` property) |
+| `exportImage(format?)` | `string` | Export the funnel as a data URL. Format: `'png'` (default) or `'svg'` |
+
+### Export Example
+
+```javascript
+const funnel = document.getElementById('my-funnel');
+
+// Export as SVG
+const svgDataUrl = funnel.exportImage('svg');
+
+// Export as PNG
+const pngDataUrl = funnel.exportImage('png');
+```
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `funnel-click` | `{ stage: FunnelStage, index: number }` | Fired when a stage is clicked |
+| `funnel-hover` | `{ stage: FunnelStage, index: number }` | Fired when a stage is hovered |
+
+```javascript
+funnel.addEventListener('funnel-click', (e) => {
+  console.log('Clicked stage:', e.detail.stage.label);
+  console.log('Stage index:', e.detail.index);
+});
+```
+
+## Examples
+
+### Conversion Funnel
+
+```html
+<snice-funnel id="conversion"></snice-funnel>
+<script>
+  document.getElementById('conversion').data = [
+    { label: 'Website Visits', value: 50000 },
+    { label: 'Sign Ups', value: 12000 },
+    { label: 'Trial Started', value: 5000 },
+    { label: 'Paid', value: 1500 },
+    { label: 'Retained', value: 800 },
+  ];
+</script>
+```
+
+### Gradient Variant
+
+The gradient variant uses decreasing opacity of the primary color for a smoother visual effect.
+
+```html
+<snice-funnel id="gradient-funnel" variant="gradient"></snice-funnel>
+```
+
+### Custom Colors
+
+```html
+<snice-funnel id="colored-funnel"></snice-funnel>
+<script>
+  document.getElementById('colored-funnel').data = [
+    { label: 'Awareness', value: 10000, color: 'rgb(37 99 235)' },
+    { label: 'Interest', value: 6000, color: 'rgb(22 163 74)' },
+    { label: 'Decision', value: 2500, color: 'rgb(234 179 8)' },
+    { label: 'Action', value: 1000, color: 'rgb(220 38 38)' },
+  ];
+</script>
+```
+
+### Horizontal Layout
+
+```html
+<snice-funnel id="horizontal" orientation="horizontal"></snice-funnel>
+```
+
+### With Animation
+
+```html
+<snice-funnel id="animated" animation></snice-funnel>
+```
+
+### Minimal Display
+
+```html
+<snice-funnel id="minimal" show-labels="false" show-percentages="false"></snice-funnel>
+```
+
+### Event Handling
+
+```html
+<snice-funnel id="interactive"></snice-funnel>
+<div id="output"></div>
+
+<script>
+  const funnel = document.getElementById('interactive');
+  const output = document.getElementById('output');
+
+  funnel.data = [
+    { label: 'Step 1', value: 1000 },
+    { label: 'Step 2', value: 600 },
+    { label: 'Step 3', value: 200 },
+  ];
+
+  funnel.addEventListener('funnel-click', (e) => {
+    output.textContent = `Clicked: ${e.detail.stage.label} (${e.detail.stage.value})`;
+  });
+</script>
+```
+
+## Accessibility
+
+- **ARIA role**: The SVG has `role="img"` with `aria-label="Funnel chart"`
+- **Interactive stages**: Each stage has `role="button"` and `tabindex="0"` for keyboard navigation
+- **ARIA labels**: Each stage has a descriptive `aria-label` including the label, value, and percentage
+- **Keyboard support**: Stages can be activated with Enter or Space keys
+- **Focus styles**: Visible focus ring on keyboard navigation
+- **Color contrast**: Default colors meet WCAG AA standards
+
+## Browser Support
+
+- Modern browsers (Chrome, Firefox, Safari, Edge)
+- Requires Custom Elements v1 and Shadow DOM support
+
+## Best Practices
+
+1. **Order data by value**: Place the largest value first for a natural funnel shape
+2. **Use meaningful labels**: Stage labels should clearly describe each step in the process
+3. **Limit stages**: 3-7 stages works best visually; more than 8 becomes hard to read
+4. **Choose colors wisely**: Use custom colors to match your brand or highlight important stages
+5. **Include percentages**: Conversion percentages help users understand drop-off rates
+6. **Use animation sparingly**: Enable animation for initial page load or dashboard reveals
+7. **Consider orientation**: Vertical works well for sidebar placement; horizontal for wide layouts
+8. **Handle click events**: Use click events to drill down into stage details
+9. **Format values**: Large numbers are automatically formatted (K/M notation)
+10. **Test responsiveness**: The SVG scales with its container width

package/docs/components/gantt.md

@@ -0,0 +1,187 @@
+[//]: # (AI: For a low-token version of this doc, use docs/ai/components/gantt.md instead)
+
+# Gantt Component
+
+The Gantt component displays an interactive Gantt chart for project timeline visualization. It features draggable and resizable task bars, multiple zoom levels, task grouping, progress indicators, dependency arrows, and a today line.
+
+## Table of Contents
+- [Basic Usage](#basic-usage)
+- [Properties](#properties)
+- [Methods](#methods)
+- [Events](#events)
+- [Examples](#examples)
+- [Accessibility](#accessibility)
+
+## Basic Usage
+
+```html
+<snice-gantt></snice-gantt>
+```
+
+```typescript
+import 'snice/components/gantt/snice-gantt';
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `tasks` | `GanttTask[]` | `[]` | Array of task objects (set via JavaScript) |
+| `zoom` | `'day' \| 'week' \| 'month'` | `'week'` | Timeline zoom level |
+| `showDependencies` (attr: `show-dependencies`) | `boolean` | `true` | Render dependency arrows between tasks |
+
+### GanttTask Type
+
+```typescript
+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 visual grouping
+}
+```
+
+## Methods
+
+| Method | Arguments | Description |
+|--------|-----------|-------------|
+| `scrollToDate()` | `date: string` | Scroll the timeline to center on a specific date (ISO format) |
+| `scrollToTask()` | `id: string` | Scroll the timeline to a specific task's start date |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `task-click` | `{ task: GanttTask }` | Fired when a task bar or task name is clicked |
+| `task-resize` | `{ task: GanttTask, start: string, end: string }` | Fired when a task is resized by dragging its left or right handles |
+| `task-move` | `{ task: GanttTask, start: string, end: string }` | Fired when a task bar is dragged to a new position |
+| `task-link` | `{ source: string, target: string }` | Fired when a dependency link is created between tasks |
+
+## Examples
+
+### Basic Project Timeline
+
+Display a simple list of tasks on a weekly timeline.
+
+```html
+<snice-gantt id="project-gantt" zoom="week"></snice-gantt>
+
+<script type="module">
+  import 'snice/components/gantt/snice-gantt';
+
+  const gantt = document.getElementById('project-gantt');
+  gantt.tasks = [
+    { id: '1', name: 'Research', start: '2026-03-01', end: '2026-03-05', progress: 100 },
+    { id: '2', name: 'Design', start: '2026-03-03', end: '2026-03-10', progress: 75 },
+    { id: '3', name: 'Development', start: '2026-03-08', end: '2026-03-21', progress: 30 },
+    { id: '4', name: 'Testing', start: '2026-03-18', end: '2026-03-25', progress: 0 },
+    { id: '5', name: 'Launch', start: '2026-03-25', end: '2026-03-27', progress: 0 }
+  ];
+</script>
+```
+
+### Grouped Tasks with Dependencies
+
+Use the `group` field to visually group related tasks and `dependencies` to draw arrows between them.
+
+```html
+<snice-gantt id="grouped-gantt" zoom="week" show-dependencies></snice-gantt>
+
+<script type="module">
+  const gantt = document.getElementById('grouped-gantt');
+  gantt.tasks = [
+    { id: '1', name: 'Requirements', start: '2026-04-01', end: '2026-04-05', progress: 100, group: 'Planning' },
+    { id: '2', name: 'Architecture', start: '2026-04-03', end: '2026-04-08', progress: 80, group: 'Planning', dependencies: ['1'] },
+    { id: '3', name: 'Frontend', start: '2026-04-08', end: '2026-04-18', progress: 40, group: 'Development', dependencies: ['2'] },
+    { id: '4', name: 'Backend', start: '2026-04-08', end: '2026-04-20', progress: 35, group: 'Development', dependencies: ['2'] },
+    { id: '5', name: 'Integration', start: '2026-04-18', end: '2026-04-25', progress: 0, group: 'QA', dependencies: ['3', '4'] },
+    { id: '6', name: 'Release', start: '2026-04-25', end: '2026-04-28', progress: 0, group: 'QA', dependencies: ['5'] }
+  ];
+</script>
+```
+
+### Custom Task Colors
+
+Use the `color` field on individual tasks to override the default bar color.
+
+```html
+<snice-gantt id="colored-gantt" zoom="week"></snice-gantt>
+
+<script type="module">
+  const gantt = document.getElementById('colored-gantt');
+  gantt.tasks = [
+    { id: '1', name: 'Critical Path', start: '2026-05-01', end: '2026-05-10', color: 'rgb(220 38 38)', progress: 50 },
+    { id: '2', name: 'Normal Task', start: '2026-05-03', end: '2026-05-12', progress: 25 },
+    { id: '3', name: 'Milestone', start: '2026-05-08', end: '2026-05-09', color: 'rgb(234 88 12)', progress: 0 },
+    { id: '4', name: 'Low Priority', start: '2026-05-10', end: '2026-05-20', color: 'rgb(22 163 74)', progress: 10 }
+  ];
+</script>
+```
+
+### Zoom Levels
+
+Toggle between day, week, and month views using the `zoom` property or the built-in header toggle buttons.
+
+```html
+<snice-gantt id="zoom-gantt" zoom="month"></snice-gantt>
+
+<div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
+  <button onclick="document.getElementById('zoom-gantt').zoom = 'day'">Day</button>
+  <button onclick="document.getElementById('zoom-gantt').zoom = 'week'">Week</button>
+  <button onclick="document.getElementById('zoom-gantt').zoom = 'month'">Month</button>
+</div>
+
+<script type="module">
+  const gantt = document.getElementById('zoom-gantt');
+  gantt.tasks = [
+    { id: '1', name: 'Phase 1', start: '2026-01-01', end: '2026-03-31', progress: 100, group: 'H1' },
+    { id: '2', name: 'Phase 2', start: '2026-04-01', end: '2026-06-30', progress: 60, group: 'H1' },
+    { id: '3', name: 'Phase 3', start: '2026-07-01', end: '2026-09-30', progress: 10, group: 'H2' },
+    { id: '4', name: 'Phase 4', start: '2026-10-01', end: '2026-12-31', progress: 0, group: 'H2' }
+  ];
+</script>
+```
+
+### Event Handling
+
+Listen for task interactions to update your application state or sync with a backend.
+
+```html
+<snice-gantt id="event-gantt" zoom="week" show-dependencies></snice-gantt>
+
+<script type="module">
+  const gantt = document.getElementById('event-gantt');
+  gantt.tasks = [
+    { id: '1', name: 'Design', start: '2026-03-01', end: '2026-03-07', progress: 80 },
+    { id: '2', name: 'Develop', start: '2026-03-05', end: '2026-03-15', dependencies: ['1'] }
+  ];
+
+  gantt.addEventListener('task-click', (e) => {
+    console.log('Clicked task:', e.detail.task.name);
+  });
+
+  gantt.addEventListener('task-move', (e) => {
+    console.log('Moved task:', e.detail.task.name, 'to', e.detail.start, '-', e.detail.end);
+  });
+
+  gantt.addEventListener('task-resize', (e) => {
+    console.log('Resized task:', e.detail.task.name, 'new dates:', e.detail.start, '-', e.detail.end);
+  });
+
+  // Scroll to a specific date on load
+  gantt.scrollToDate('2026-03-01');
+</script>
+```
+
+## Accessibility
+
+- **Draggable tasks**: Task bars can be dragged to move their dates and resized via left/right edge handles
+- **Today indicator**: A red vertical line marks the current date on the timeline
+- **Zoom controls**: The header provides Day/Week/Month toggle buttons for quick zoom changes
+- **Task grouping**: Tasks with the same `group` value are visually grouped in the sidebar for organization
+- **Progress indicators**: Each task bar displays a filled portion representing its completion percentage
+- **Dependency arrows**: When `show-dependencies` is enabled, arrows connect tasks to their prerequisites

package/docs/components/gauge.md

@@ -1,3 +1,5 @@
+[//]: # (AI: For a low-token version of this doc, use docs/ai/components/gauge.md instead)
+
 # Gauge Component
 
 The gauge component renders an SVG-based semicircle gauge/meter chart, ideal for dashboards and data visualization. It displays a value within a range using an animated arc fill with optional label text.

package/docs/components/heatmap.md

@@ -1,3 +1,5 @@
+[//]: # (AI: For a low-token version of this doc, use docs/ai/components/heatmap.md instead)
+
 # Heatmap Component
 
 The heatmap component displays a GitHub-style contribution calendar heatmap. It visualizes data as a grid of colored cells organized by week and day, with intensity levels indicating the magnitude of each data point.

package/docs/components/image.md

@@ -1,3 +1,5 @@
+[//]: # (AI: For a low-token version of this doc, use docs/ai/components/image.md instead)
+
 # Image Component
 
 The `<snice-image>` component provides a flexible image display with variants, sizes, lazy loading, and fallback support.

package/docs/components/input.md

@@ -0,0 +1,242 @@
+[//]: # (AI: For a low-token version of this doc, use docs/ai/components/input.md instead)
+
+# Input
+`<snice-input>`
+
+Text input field with validation, icons, and form association.
+
+## Basic Usage
+
+```typescript
+import 'snice/components/input/snice-input';
+```
+
+```html
+<snice-input label="Name" placeholder="Enter your name"></snice-input>
+```
+
+## Importing
+
+**ESM (bundler)**
+```typescript
+import 'snice/components/input/snice-input';
+```
+
+**CDN**
+```html
+<script src="snice-runtime.min.js"></script>
+<script src="snice-input.min.js"></script>
+```
+
+## Examples
+
+### Variants
+
+Use the `variant` attribute to change the input style.
+
+```html
+<snice-input variant="outlined" label="Outlined"></snice-input>
+<snice-input variant="filled" label="Filled"></snice-input>
+<snice-input variant="underlined" label="Underlined"></snice-input>
+```
+
+### Sizes
+
+Use the `size` attribute to change the input size.
+
+```html
+<snice-input size="small" placeholder="Small"></snice-input>
+<snice-input size="medium" placeholder="Medium"></snice-input>
+<snice-input size="large" placeholder="Large"></snice-input>
+```
+
+### Input Types
+
+Use the `type` attribute to set the input type.
+
+```html
+<snice-input type="text" label="Text"></snice-input>
+<snice-input type="email" label="Email"></snice-input>
+<snice-input type="number" label="Age" min="0" max="120"></snice-input>
+<snice-input type="tel" label="Phone"></snice-input>
+<snice-input type="url" label="Website"></snice-input>
+<snice-input type="search" label="Search"></snice-input>
+```
+
+### Password Toggle
+
+Set the `password` attribute along with `type="password"` to show a visibility toggle button.
+
+```html
+<snice-input type="password" password label="Password"></snice-input>
+```
+
+### Icons
+
+Use the `prefix-icon` and `suffix-icon` attributes to add icons. Supports emoji, URLs, image files, and Material Symbols ligatures.
+
+```html
+<snice-input prefix-icon="🔍" placeholder="Search"></snice-input>
+<snice-input suffix-icon="✉️" type="email" label="Email"></snice-input>
+<snice-input prefix-icon="/icons/search.svg" placeholder="Search"></snice-input>
+<snice-input prefix-icon="search" placeholder="Search"></snice-input>
+```
+
+### Icon Slots
+
+Use the `prefix-icon` and `suffix-icon` slots for custom icon content like external icon fonts.
+
+```html
+<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>
+```
+
+### Clearable
+
+Set the `clearable` attribute to show a clear button when the input has a value.
+
+```html
+<snice-input value="Hello" clearable label="Clearable"></snice-input>
+```
+
+### Helper and Error Text
+
+Use `helper-text` and `error-text` to display guidance or validation messages.
+
+```html
+<snice-input label="Username" helper-text="Must be unique"></snice-input>
+<snice-input label="Email" invalid error-text="Invalid email address"></snice-input>
+```
+
+### Loading
+
+Set the `loading` attribute to show a spinner and disable the input.
+
+```html
+<snice-input loading label="Validating" value="user@example.com"></snice-input>
+```
+
+### Disabled and Readonly
+
+```html
+<snice-input disabled value="Cannot edit" label="Disabled"></snice-input>
+<snice-input readonly value="Read only" label="Readonly"></snice-input>
+```
+
+### Validation
+
+Use `required`, `pattern`, `minlength`, and `maxlength` for built-in validation.
+
+```html
+<snice-input type="email" required label="Email"></snice-input>
+<snice-input pattern="[A-Za-z]+" label="Letters only"></snice-input>
+<snice-input minlength="3" maxlength="20" label="Username"></snice-input>
+```
+
+### Number Input
+
+Use `min`, `max`, and `step` for number inputs.
+
+```html
+<snice-input type="number" min="0" max="100" step="5" label="Quantity"></snice-input>
+```
+
+### Form Integration
+
+Use `name` and `required` for native form participation.
+
+```html
+<form>
+  <snice-input name="username" required label="Username"></snice-input>
+  <snice-input name="email" type="email" required label="Email"></snice-input>
+</form>
+```
+
+### Event Handling
+
+Listen for input events using `input-input` and `input-change`.
+
+```html
+<snice-input id="inp" label="Type something"></snice-input>
+<script>
+const inp = document.querySelector('#inp');
+inp.addEventListener('input-input', (e) => console.log('Input:', e.detail.value));
+inp.addEventListener('input-change', (e) => console.log('Change:', e.detail.value));
+</script>
+```
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `prefix-icon` | Custom prefix icon content (overrides `prefixIcon` property) |
+| `suffix-icon` | Custom suffix icon content (overrides `suffixIcon` property) |
+
+## Properties
+
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `type` | `type` | `'text' \| 'email' \| 'password' \| 'number' \| 'tel' \| 'url' \| 'search' \| 'date' \| 'time' \| 'datetime-local'` | `'text'` | Input type |
+| `size` | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Input size |
+| `variant` | `variant` | `'outlined' \| 'filled' \| 'underlined'` | `'outlined'` | Visual style |
+| `value` | `value` | `string` | `''` | Input value |
+| `placeholder` | `placeholder` | `string` | `''` | Placeholder text |
+| `label` | `label` | `string` | `''` | Label text |
+| `helperText` | `helper-text` | `string` | `''` | Helper text below input |
+| `errorText` | `error-text` | `string` | `''` | Error text below input |
+| `disabled` | `disabled` | `boolean` | `false` | Disables the input |
+| `readonly` | `readonly` | `boolean` | `false` | Makes the input read-only |
+| `loading` | `loading` | `boolean` | `false` | Shows loading spinner |
+| `required` | `required` | `boolean` | `false` | Marks as required |
+| `invalid` | `invalid` | `boolean` | `false` | Shows invalid styling |
+| `clearable` | `clearable` | `boolean` | `false` | Shows clear button |
+| `password` | `password` | `boolean` | `false` | Shows password visibility toggle |
+| `min` | `min` | `string` | `''` | Minimum value (number inputs) |
+| `max` | `max` | `string` | `''` | Maximum value (number inputs) |
+| `step` | `step` | `string` | `''` | Step value (number inputs) |
+| `pattern` | `pattern` | `string` | `''` | Validation pattern |
+| `maxlength` | `maxlength` | `number` | `-1` | Maximum character length |
+| `minlength` | `minlength` | `number` | `-1` | Minimum character length |
+| `autocomplete` | `autocomplete` | `string` | `''` | Autocomplete hint |
+| `name` | `name` | `string` | `''` | Form field name |
+| `prefixIcon` | `prefix-icon` | `string` | `''` | Prefix icon (emoji, URL, or ligature) |
+| `suffixIcon` | `suffix-icon` | `string` | `''` | Suffix icon (emoji, URL, or ligature) |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `input-input` | `{ value, input }` | Fired on each keystroke |
+| `input-change` | `{ value, input }` | Fired on value commit |
+| `input-focus` | `{ input }` | Fired on focus |
+| `input-blur` | `{ input }` | Fired on blur |
+| `input-clear` | `{ input }` | Fired when cleared |
+
+## Methods
+
+| Method | Arguments | Description |
+|--------|-----------|-------------|
+| `focus()` | — | Focuses the input |
+| `blur()` | — | Removes focus |
+| `select()` | — | Selects all text |
+| `clear()` | — | Clears the value |
+| `checkValidity()` | — | Returns input validity |
+| `reportValidity()` | — | Reports input validity |
+| `setCustomValidity()` | `message: string` | Sets custom validation message |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `input` | The native input element |
+| `prefix-icon` | The prefix icon container |
+| `suffix-icon` | The suffix icon container |
+| `clear` | The clear button |
+| `spinner` | The loading spinner |
+| `password-toggle` | The password visibility toggle |
+| `helper-text` | The helper text element |
+| `error-text` | The error text element |

package/docs/components/kanban.md

@@ -1,3 +1,5 @@
+[//]: # (AI: For a low-token version of this doc, use docs/ai/components/kanban.md instead)
+
 # Kanban Component
 
 Drag-and-drop kanban board with columns and cards.

package/docs/components/kpi.md

@@ -1,3 +1,5 @@
+[//]: # (AI: For a low-token version of this doc, use docs/ai/components/kpi.md instead)
+
 # KPI Component
 
 A key performance indicator display component for showing metrics with optional trend visualization and sentiment indicators. Perfect for dashboards and analytics interfaces.