snice 4.9.0 → 4.10.0

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

@@ -5,74 +5,42 @@ Vertically stacked time slot picker with click-and-drag range selection.
 ## Properties
 
 ```typescript
-granularity: 5 | 15 | 30 | 60 = 15;       // Slot interval in minutes
-startTime: string = '00:00';               // Day start (attribute: start-time)
-endTime: string = '23:59';                 // Day end (attribute: end-time)
-value: string = '';                        // JSON array of TimeRange[]
-disabledRanges: string = '';               // JSON array of TimeRange[] (attribute: disabled-ranges)
-format: '12h' | '24h' = '24h';            // Time display format
-multiple: boolean = false;                 // Allow multiple non-contiguous ranges
+granularity: 5|15|30|60 = 15;
+startTime: string = '00:00';     // attr: start-time
+endTime: string = '23:59';       // attr: end-time
+value: string = '';              // JSON array of TimeRange[]
+disabledRanges: string = '';     // attr: disabled-ranges, JSON array of TimeRange[]
+format: '12h'|'24h' = '24h';
+multiple: boolean = false;
 readonly: boolean = false;
 disabled: boolean = false;
-```
-
-## Types
 
-```typescript
 interface TimeRange { start: string; end: string; }
 ```
 
-## Methods
+## Events
 
-- `getSelectedRanges(): TimeRange[]` - Get current selections
-- `setSelectedRanges(ranges: TimeRange[]): void` - Set selections programmatically
-- `clearSelection(): void` - Clear all selections
-- `isSlotDisabled(time: string): boolean` - Check if time slot is disabled
+- `time-range-change` → `{ ranges, component }`
+- `time-range-select` → `{ start, component }` - Drag begins
+- `time-range-complete` → `{ range, ranges, component }` - Drag ends
 
-## Events
+## Methods
 
-- `@snice/time-range-change` - `{ranges: TimeRange[], component}`
-- `@snice/time-range-select` - `{start: string, component}` - Drag begins
-- `@snice/time-range-complete` - `{range: TimeRange, ranges: TimeRange[], component}` - Drag ends
+- `getSelectedRanges()` - Returns TimeRange[]
+- `setSelectedRanges(ranges)` - Set selections programmatically
+- `clearSelection()` - Clear all selections
+- `isSlotDisabled(time)` - Check if time slot is disabled
 
 ## Usage
 
 ```html
-<!-- Basic -->
 <snice-time-range-picker start-time="08:00" end-time="18:00"></snice-time-range-picker>
-
-<!-- 12h format, 30min granularity -->
 <snice-time-range-picker granularity="30" format="12h"></snice-time-range-picker>
-
-<!-- With disabled ranges -->
+<snice-time-range-picker multiple></snice-time-range-picker>
 <snice-time-range-picker
   disabled-ranges='[{"start":"12:00","end":"13:00"}]'>
 </snice-time-range-picker>
-
-<!-- Pre-selected value -->
 <snice-time-range-picker
   value='[{"start":"09:00","end":"11:00"}]'>
 </snice-time-range-picker>
-
-<!-- Multiple selection -->
-<snice-time-range-picker multiple></snice-time-range-picker>
-
-<!-- Event handling -->
-<script>
-picker.addEventListener('@snice/time-range-change', (e) => {
-  console.log(e.detail.ranges);
-});
-</script>
 ```
-
-## Features
-
-- Click and drag to select time ranges
-- Single click for individual slot
-- Keyboard navigation (Enter/Space to select, arrows to navigate, Escape to clear)
-- Configurable granularity (5/15/30/60 min)
-- 12h/24h time format
-- Disabled time slots
-- Multiple selection mode
-- Touch support
-- ARIA attributes for accessibility

package/docs/ai/components/timeline.md

@@ -9,11 +9,7 @@ orientation: 'vertical'|'horizontal' = 'vertical';
 position: 'left'|'right'|'alternate' = 'left';
 items: TimelineItem[] = [];
 reverse: boolean = false;
-```
-
-## TimelineItem
 
-```typescript
 interface TimelineItem {
   timestamp?: string;
   title: string;
@@ -26,52 +22,17 @@ interface TimelineItem {
 ## Usage
 
 ```html
-<!-- Basic --><snice-timeline id="timeline"></snice-timeline>
+<snice-timeline id="timeline"></snice-timeline>
 <script>
-timeline.items = [{
-  timestamp: '2024-01-15',
-  title: 'Event',
-  description: 'Details'
-}];
+  document.getElementById('timeline').items = [
+    { timestamp: '2024-01-15', title: 'Created', description: 'Project started', variant: 'success' },
+    { timestamp: '2024-02-01', title: 'Review', description: 'In review', variant: 'warning', icon: '📋' },
+    { timestamp: '2024-03-01', title: 'Launch', description: 'Deployed', variant: 'info', icon: '🚀' }
+  ];
 </script>
 
-<!-- Vertical positions -->
-<snice-timeline position="left"></snice-timeline>
-<snice-timeline position="right"></snice-timeline>
 <snice-timeline position="alternate"></snice-timeline>
-
-<!-- Horizontal -->
+<snice-timeline position="right"></snice-timeline>
 <snice-timeline orientation="horizontal"></snice-timeline>
-
-<!-- Variants -->
-<script>
-timeline.items = [
-  { title: 'Success', variant: 'success' },
-  { title: 'Warning', variant: 'warning' },
-  { title: 'Error', variant: 'error' },
-  { title: 'Info', variant: 'info' }
-];
-</script>
-
-<!-- Custom icons -->
-<script>
-timeline.items = [
-  { title: 'Planning', icon: '📋' },
-  { title: 'Development', icon: '💻' },
-  { title: 'Launch', icon: '🚀' }
-];
-</script>
-
-<!-- Reversed -->
 <snice-timeline reverse></snice-timeline>
 ```
-
-## Features
-
-- Vertical and horizontal orientations
-- Left/right/alternate positioning (vertical)
-- 5 item variants with default icons
-- Custom icons supported
-- Timestamps and descriptions optional
-- Connecting lines between items
-- Reversible order

package/docs/ai/components/timer.md

@@ -1,43 +1,47 @@
-# Timer
+# snice-timer
 
-```html
-<snice-timer mode="stopwatch"></snice-timer>
-<snice-timer mode="timer" initial-time="60"></snice-timer>
-```
+Stopwatch and countdown timer with start/stop/reset controls.
 
 ## Properties
-- `mode`: 'stopwatch' | 'timer' (default: 'stopwatch')
-- `initial-time`: number (default: 0) - Starting time in seconds for timer mode
-- `running`: boolean (read-only)
 
-## Methods
-- `start()`: Start timer
-- `stop()`: Stop/pause timer
-- `reset()`: Reset to initial state
-- `getTime()`: Get current time in seconds
+```typescript
+mode: 'stopwatch'|'timer' = 'stopwatch';
+initialTime: number = 0;   // attr: initial-time, seconds (for timer mode)
+running: boolean;           // read-only
+```
 
 ## Events
-- `timer-start`: { timer, time }
-- `timer-stop`: { timer, time }
-- `timer-reset`: { timer, time }
-- `timer-complete`: { timer } - Countdown reached 0
-
-## Implementation
-- Uses requestAnimationFrame for smooth updates
-- Direct DOM manipulation for display to avoid re-renders
-- Stopwatch: counts up from 0
-- Timer: counts down from initial-time
-- Auto-stops at 0 in timer mode
-
-## Display Format
-- Under 1 hour: `M:SS.D` (e.g., "2:05.3")
-- Over 1 hour: `H:MM:SS` (e.g., "1:05:30")
-
-## Theme Integration
-Uses standard theme tokens:
-- Background: `--snice-color-background-element`
-- Borders: `--snice-color-border`
-- Text: `--snice-color-text`
-- Start button: `--snice-color-success`
-- Pause button: `--snice-color-warning`
-- Reset button: `--snice-color-neutral`
+
+- `timer-start` → `{ timer, time }`
+- `timer-stop` → `{ timer, time }`
+- `timer-reset` → `{ timer, time }`
+- `timer-complete` → `{ timer }` - Countdown reached 0
+
+## Methods
+
+- `start()` - Start timer
+- `stop()` - Stop/pause timer
+- `reset()` - Reset to initial state
+- `getTime()` - Get current time in seconds
+
+## Usage
+
+```html
+<!-- Stopwatch (counts up) -->
+<snice-timer mode="stopwatch"></snice-timer>
+
+<!-- Countdown (counts down from 60s) -->
+<snice-timer mode="timer" initial-time="60"></snice-timer>
+
+<script>
+  const timer = document.querySelector('snice-timer');
+  timer.start();
+  timer.stop();
+  timer.reset();
+  console.log(timer.getTime());
+
+  timer.addEventListener('timer-complete', () => {
+    console.log('Countdown finished');
+  });
+</script>
+```

package/docs/ai/components/toast.md

@@ -2,11 +2,7 @@
 
 Temporary notification system with static API.
 
-## Components
-
-### snice-toast
-
-Individual toast notification element.
+## snice-toast
 
 ```typescript
 type: 'success'|'error'|'warning'|'info' = 'info';
@@ -15,126 +11,59 @@ closable: boolean = true;
 icon: boolean = true;
 ```
 
-**Methods:**
-- `hide()` - Start hide animation
-
-### snice-toast-container
-
-Manages and positions multiple toasts.
+## snice-toast-container
 
 ```typescript
 position: 'top-left'|'top-center'|'top-right'|'bottom-left'|'bottom-center'|'bottom-right' = 'bottom-center';
 ```
 
-**Methods:**
-- `show(message, options?)` - Show toast, returns ID
-- `hide(id)` - Hide specific toast
-- `clear()` - Remove all toasts
-
-## Static API (Recommended)
+## Static API
 
 ```typescript
 import Toast from 'snice/components/toast/snice-toast-container';
 
-// Convenience methods
 Toast.success(message, options?): Promise<string>
 Toast.error(message, options?): Promise<string>
 Toast.warning(message, options?): Promise<string>
 Toast.info(message, options?): Promise<string>
-
-// Generic
 Toast.show(message, options?): Promise<string>
-
-// Control
 Toast.hide(id): void
 Toast.clear(): void
 ```
 
-## Toast Options
+## ToastOptions
 
 ```typescript
 interface ToastOptions {
-  type?: 'success'|'error'|'warning'|'info';  // Default: 'info'
-  duration?: number;      // ms, 0 = no auto-dismiss, default: 4000
-  position?: ToastPosition;  // Only for static API
-  closable?: boolean;     // Default: true
-  icon?: boolean;         // Default: true
-  id?: string;            // Custom ID, auto-generated if omitted
+  type?: 'success'|'error'|'warning'|'info';
+  duration?: number;       // ms, 0 = no auto-dismiss, default: 4000
+  position?: ToastPosition;
+  closable?: boolean;
+  icon?: boolean;
+  id?: string;
 }
 ```
 
+## Container Methods
+
+- `show(message, options?)` - Show toast, returns ID
+- `hide(id)` - Hide specific toast
+- `clear()` - Remove all toasts
+
 ## Usage
 
 ```typescript
-// Basic
 Toast.success('Saved successfully');
 Toast.error('Failed to load');
 Toast.warning('Low disk space');
-Toast.info('5 new messages');
-
-// With options
-Toast.show('Custom', {
-  type: 'success',
-  duration: 5000,
-  position: 'top-right',
-  closable: true,
-  icon: false
-});
-
-// Manual control
+
+Toast.show('Custom', { type: 'success', duration: 5000, position: 'top-right' });
+
 const id = Toast.info('Loading...', { duration: 0 });
 await operation();
 Toast.hide(id);
-Toast.success('Complete');
-
-// Clear all
-Toast.clear();
 ```
 
-## Container Usage
-
 ```html
 <snice-toast-container position="bottom-center"></snice-toast-container>
 ```
-
-```typescript
-const container = document.querySelector('snice-toast-container');
-const id = container.show('Message', { type: 'success' });
-container.hide(id);
-container.clear();
-```
-
-## Features
-
-- Auto-dismiss after duration (default 4s)
-- 4 types with icons and colors
-- 6 position options
-- Slide in/out animations (300ms)
-- Global container auto-creation
-- Top positions prepend, bottom append
-- Accessibility: role="alert", aria-live="polite"
-- Close button keyboard accessible
-
-## Patterns
-
-**Success/Error:**
-```typescript
-try {
-  await action();
-  Toast.success('Done');
-} catch (e) {
-  Toast.error(e.message);
-}
-```
-
-**Loading:**
-```typescript
-const id = Toast.info('Loading...', { duration: 0 });
-await fetch();
-Toast.hide(id);
-```
-
-**Persistent:**
-```typescript
-Toast.show('Manual close only', { duration: 0 });
-```

package/docs/ai/components/tooltip.md

@@ -6,141 +6,54 @@ Contextual information on hover, click, or focus with smart positioning.
 
 ```typescript
 content: string = '';
-position: TooltipPosition = 'top';
+position: 'top'|'top-start'|'top-end'|'bottom'|'bottom-start'|'bottom-end'|'left'|'left-start'|'left-end'|'right'|'right-start'|'right-end' = 'top';
 trigger: 'hover'|'click'|'focus'|'manual' = 'hover';
-delay: number = 0;                    // Show delay (ms)
-hideDelay: number = 0;                // Hide delay (ms)
-offset: number = 12;                  // Distance from trigger (px)
+delay: number = 0;
+hideDelay: number = 0;           // attr: hide-delay
+offset: number = 12;
 arrow: boolean = true;
-open: boolean = false;                // For manual trigger
-maxWidth: number = 250;               // px
-zIndex: number = 10000;
-strictPositioning: boolean = false;   // Disable auto-repositioning
+open: boolean = false;
+maxWidth: number = 250;          // attr: max-width
+zIndex: number = 10000;          // attr: z-index
+strictPositioning: boolean = false; // attr: strict-positioning
 ```
 
-## Positions
+## Slots
 
-**12 positions:**
-- `top`, `bottom`, `left`, `right`
-- `top-start`, `top-end`
-- `bottom-start`, `bottom-end`
-- `left-start`, `left-end`
-- `right-start`, `right-end`
+- `(default)` - Trigger element the tooltip attaches to
 
 ## Methods
 
-```typescript
-show()            // Show tooltip
-hide()            // Hide tooltip
-toggle()          // Toggle visibility
-updatePosition()  // Recalculate position
-```
+- `show()` - Show tooltip
+- `hide()` - Hide tooltip
+- `toggle()` - Toggle visibility
+- `updatePosition()` - Recalculate position
 
 ## Usage
 
 ```html
-<!-- Basic -->
 <snice-tooltip content="Tooltip text">
   <button>Hover me</button>
 </snice-tooltip>
 
-<!-- Position -->
 <snice-tooltip content="Below" position="bottom">
-  <button>Button</button>
+  <button>Bottom</button>
 </snice-tooltip>
 
-<!-- Click trigger -->
 <snice-tooltip content="Click to toggle" trigger="click">
   <button>Click me</button>
 </snice-tooltip>
 
-<!-- Focus trigger -->
-<snice-tooltip content="Focus input" trigger="focus">
+<snice-tooltip content="Focus help" trigger="focus">
   <input type="text">
 </snice-tooltip>
 
-<!-- Manual control -->
 <snice-tooltip id="tip" content="Manual" trigger="manual">
   <span>Element</span>
 </snice-tooltip>
-<button onclick="document.querySelector('#tip').open = true">Show</button>
+<script>document.querySelector('#tip').open = true;</script>
 
-<!-- With delay -->
 <snice-tooltip content="Delayed" delay="500" hide-delay="200">
   <button>Wait</button>
 </snice-tooltip>
-
-<!-- Custom styling -->
-<snice-tooltip
-  content="Custom"
-  max-width="400"
-  offset="20"
-  arrow="false">
-  <button>Custom</button>
-</snice-tooltip>
-```
-
-## Features
-
-- Portal rendering (appends to body)
-- Smart viewport detection & auto-repositioning
-- 12 position options with alignment
-- 4 trigger modes
-- Show/hide delays
-- Arrow indicator
-- Click-outside detection (click trigger)
-- Custom max-width, offset, z-index
-- Accessibility: role="tooltip"
-- Focus restoration
-
-## Patterns
-
-**Help icon:**
-```html
-<snice-tooltip content="Help text">
-  <span>?</span>
-</snice-tooltip>
 ```
-
-**Disabled button:**
-```html
-<snice-tooltip content="Fill form first">
-  <span>
-    <button disabled>Submit</button>
-  </span>
-</snice-tooltip>
-```
-
-**Truncated text:**
-```html
-<snice-tooltip content="Full text here">
-  <div class="truncated">Full text...</div>
-</snice-tooltip>
-```
-
-**Programmatic:**
-```typescript
-const tip = document.querySelector('snice-tooltip');
-tip.show();
-tip.hide();
-tip.toggle();
-tip.updatePosition(); // After layout change
-```
-
-## Smart Positioning
-
-Auto-repositions if tooltip would overflow viewport. Tries alternative positions in order:
-- Top → Bottom → Left → Right
-- Bottom → Top → Left → Right
-- Left → Right → Top → Bottom
-- Right → Left → Top → Bottom
-
-Disable with `strict-positioning` attribute.
-
-## Notes
-
-- Disabled elements need wrapper span (no events)
-- Portal created in document.body
-- Hover doesn't work on touch devices
-- Content should be brief (not interactive)
-- Use `trigger="manual"` with `open` for programmatic control