snice 3.1.0 → 3.3.0

package/docs/ai/components/menu.md

@@ -0,0 +1,114 @@
+# snice-menu
+
+Dropdown menu with items, dividers, and configurable trigger behavior.
+
+## Properties
+
+```typescript
+open: boolean = false;
+placement: 'bottom-start'|'bottom-end'|'top-start'|'top-end'|'right-start'|'right-end'|'left-start'|'left-end' = 'bottom-start';
+trigger: 'click'|'hover'|'manual' = 'click';
+closeOnSelect: boolean = true;
+distance: number = 4;
+```
+
+## Methods
+
+- `openMenu()` - Open the menu
+- `closeMenu()` - Close the menu
+- `toggleMenu()` - Toggle menu open/closed state
+
+## Slots
+
+- `trigger` - Element that triggers the menu (required)
+- Default slot - Menu items and dividers
+
+## Events
+
+- `@snice/menu-open` - Fired when menu opens (detail: { menu: SniceMenuElement })
+- `@snice/menu-close` - Fired when menu closes (detail: { menu: SniceMenuElement })
+
+## Usage
+
+```html
+<!-- Basic menu -->
+<snice-menu>
+  <button slot="trigger">Open Menu</button>
+  <snice-menu-item value="new">New File</snice-menu-item>
+  <snice-menu-item value="open">Open</snice-menu-item>
+  <snice-menu-divider></snice-menu-divider>
+  <snice-menu-item value="save">Save</snice-menu-item>
+</snice-menu>
+
+<!-- With icons and shortcuts -->
+<snice-menu>
+  <button slot="trigger">Edit</button>
+  <snice-menu-item value="cut">
+    <span slot="icon">✂️</span>
+    Cut
+    <span slot="shortcut">⌘X</span>
+  </snice-menu-item>
+  <snice-menu-item value="copy">
+    <span slot="icon">📋</span>
+    Copy
+    <span slot="shortcut">⌘C</span>
+  </snice-menu-item>
+  <snice-menu-item value="paste">
+    <span slot="icon">📄</span>
+    Paste
+    <span slot="shortcut">⌘V</span>
+  </snice-menu-item>
+</snice-menu>
+
+<!-- Different placements -->
+<snice-menu placement="top-start">...</snice-menu>
+<snice-menu placement="right-start">...</snice-menu>
+
+<!-- Hover trigger -->
+<snice-menu trigger="hover">...</snice-menu>
+
+<!-- Manual control -->
+<snice-menu trigger="manual" id="my-menu">...</snice-menu>
+<script>
+  document.getElementById('my-menu').openMenu();
+</script>
+
+<!-- Keep open on select -->
+<snice-menu close-on-select="false">...</snice-menu>
+```
+
+## snice-menu-item
+
+### Properties
+
+```typescript
+value: string = '';
+disabled: boolean = false;
+selected: boolean = false;
+```
+
+### Slots
+
+- `icon` - Icon before label
+- Default slot - Item label
+- `shortcut` - Keyboard shortcut text
+
+### Events
+
+- `@snice/menu-item-select` - Fired when item is clicked (detail: { item: SniceMenuItemElement, value: string })
+
+## snice-menu-divider
+
+Visual separator between menu items.
+
+## Features
+
+- 8 placement options
+- Click, hover, or manual trigger modes
+- Auto-close on item selection (configurable)
+- Auto-close on outside click
+- Icon and shortcut support
+- Disabled state for items
+- Selected state for items
+- Keyboard accessible (aria roles)
+- Configurable distance from trigger

package/docs/ai/components/popover.md

@@ -0,0 +1,70 @@
+# snice-popover
+
+Floating content positioned relative to target element.
+
+## Properties
+
+```typescript
+open: boolean = false;
+placement: 'top'|'bottom'|'left'|'right'|'top-start'|'top-end'|'bottom-start'|'bottom-end'|'left-start'|'left-end'|'right-start'|'right-end' = 'top';
+trigger: 'click'|'hover'|'focus'|'manual' = 'click';
+distance: number = 8;
+showArrow: boolean = true;
+closeOnClickOutside: boolean = true;
+closeOnEscape: boolean = true;
+hoverDelay: number = 200;
+targetSelector: string = '';
+```
+
+## Methods
+
+```typescript
+show(): void
+hide(): void
+toggle(): void
+updatePosition(): void
+```
+
+## Events
+
+- `@snice/popover-show` - Dispatched when shown
+- `@snice/popover-hide` - Dispatched when hidden
+
+## Usage
+
+```html
+<button id="btn">Click me</button>
+<snice-popover target-selector="#btn">
+  Popover content
+</snice-popover>
+
+<!-- Hover trigger -->
+<snice-popover target-selector="#btn" trigger="hover">
+  Appears on hover
+</snice-popover>
+
+<!-- Manual control -->
+<snice-popover id="pop" trigger="manual">Content</snice-popover>
+<script>
+  document.getElementById('pop').show();
+</script>
+
+<!-- Different placements -->
+<snice-popover placement="bottom">Bottom</snice-popover>
+<snice-popover placement="left-start">Left Start</snice-popover>
+
+<!-- No arrow -->
+<snice-popover show-arrow="false">No arrow</snice-popover>
+```
+
+## Features
+
+- 12 placement options with start/end alignment
+- Multiple triggers (click/hover/focus/manual)
+- Arrow indicator (optional)
+- Auto-positioning with scroll/resize
+- Close on click outside or Escape
+- Hover delay configuration
+- Target via selector or previous sibling
+- Fixed positioning overlay
+- Event dispatching

package/docs/ai/components/qr-code.md

@@ -0,0 +1,106 @@
+# snice-qr-code
+
+QR code generator with customizable styling and export.
+
+## Properties
+
+```typescript
+value: string = '';
+size: number = 200;
+errorCorrectionLevel: 'L'|'M'|'Q'|'H' = 'M';
+renderMode: 'canvas'|'svg' = 'svg';
+margin: number = 4;
+fgColor: string = '#000000';
+bgColor: string = '#ffffff';
+includeImage: boolean = false;
+imageUrl: string = '';
+imageSize: number = 40;
+```
+
+## Methods
+
+```typescript
+toDataURL(type?: 'image/png'|'image/jpeg'|'image/webp', quality?: number): Promise<string>
+toBlob(type?: 'image/png'|'image/jpeg'|'image/webp', quality?: number): Promise<Blob>
+download(filename?: string): void
+```
+
+## Usage
+
+```javascript
+// Basic
+qr.value = 'https://example.com';
+qr.size = 200;
+
+// Custom colors
+qr.fgColor = '#2196f3';
+qr.bgColor = '#e3f2fd';
+
+// Error correction
+qr.errorCorrectionLevel = 'H'; // L|M|Q|H
+
+// Canvas mode
+qr.renderMode = 'canvas';
+
+// With image overlay
+qr.includeImage = true;
+qr.imageUrl = 'logo.png';
+qr.imageSize = 50;
+
+// Export
+const dataURL = await qr.toDataURL('image/png', 0.92);
+const blob = await qr.toBlob('image/png');
+qr.download('qr-code.png');
+```
+
+```html
+<snice-qr-code
+  value="https://example.com"
+  size="250"
+  fg-color="#000000"
+  bg-color="#ffffff"
+  error-correction-level="M"
+  render-mode="svg">
+</snice-qr-code>
+```
+
+## Common Formats
+
+```javascript
+// URL
+qr.value = 'https://example.com';
+
+// Email
+qr.value = 'mailto:name@example.com';
+
+// Phone
+qr.value = 'tel:+1234567890';
+
+// SMS
+qr.value = 'sms:+1234567890?body=Hello';
+
+// WiFi
+qr.value = 'WIFI:T:WPA;S:NetworkName;P:password;;';
+
+// vCard
+qr.value = `BEGIN:VCARD
+VERSION:3.0
+FN:John Doe
+TEL:+1234567890
+EMAIL:john@example.com
+END:VCARD`;
+
+// Location
+qr.value = 'geo:37.7749,-122.4194';
+```
+
+## Features
+
+- SVG/Canvas rendering
+- Custom colors
+- Error correction levels
+- Image overlay
+- Export (PNG/JPEG/WebP)
+- Download
+- Adjustable margin
+- Multiple data formats

package/docs/ai/components/slider.md

@@ -0,0 +1,87 @@
+# snice-slider
+
+Range slider for numeric value selection.
+
+## Properties
+
+```typescript
+value: number = 0;
+min: number = 0;
+max: number = 100;
+step: number = 1;
+variant: 'default'|'primary'|'success'|'warning'|'danger' = 'default';
+size: 'small'|'medium'|'large' = 'medium';
+disabled: boolean = false;
+required: boolean = false;
+invalid: boolean = false;
+readonly: boolean = false;
+label: string = '';
+helperText: string = '';
+errorText: string = '';
+name: string = '';
+showValue: boolean = false;
+showTicks: boolean = false;
+vertical: boolean = false;
+```
+
+## Methods
+
+- `focus()` - Focus slider thumb
+- `blur()` - Blur slider thumb
+
+## Events
+
+- `input` - {value, slider} - During drag
+- `change` - {value, slider} - After drag complete
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-slider label="Volume" min="0" max="100"></snice-slider>
+
+<!-- With value display -->
+<snice-slider show-value value="50"></snice-slider>
+
+<!-- With ticks -->
+<snice-slider show-ticks min="0" max="10" step="1"></snice-slider>
+
+<!-- Variants -->
+<snice-slider variant="primary"></snice-slider>
+<snice-slider variant="success"></snice-slider>
+<snice-slider variant="warning"></snice-slider>
+<snice-slider variant="danger"></snice-slider>
+
+<!-- Sizes -->
+<snice-slider size="small"></snice-slider>
+<snice-slider size="medium"></snice-slider>
+<snice-slider size="large"></snice-slider>
+
+<!-- Vertical -->
+<snice-slider vertical></snice-slider>
+
+<!-- Step increments -->
+<snice-slider min="0" max="100" step="5" value="50"></snice-slider>
+
+<!-- Events -->
+<snice-slider id="slider"></snice-slider>
+<script>
+const slider = document.querySelector('#slider');
+slider.addEventListener('@snice/slider-change', (e) => {
+  console.log('Value:', e.detail.value);
+});
+</script>
+```
+
+## Features
+
+- Form-associated custom element
+- Mouse and touch support
+- Keyboard navigation (arrows, home/end, page up/down)
+- 5 color variants
+- 3 sizes
+- Vertical orientation
+- Optional value display
+- Optional tick marks
+- Step increments
+- Accessible

package/docs/ai/components/sparkline.md

@@ -0,0 +1,168 @@
+# snice-sparkline
+
+Compact inline chart for visualizing trends and patterns. For dashboards, tables, data-dense interfaces.
+
+## Properties
+
+```typescript
+data: number[] = []                     // Values to visualize
+type: SparklineType = 'line'            // 'line' | 'bar' | 'area'
+color: SparklineColor = 'primary'       // 'primary' | 'success' | 'warning' | 'danger' | 'muted'
+customColor?: string                    // Any CSS color (overrides color)
+width: number = 100                     // Chart width in pixels
+height: number = 30                     // Chart height in pixels
+strokeWidth: number = 2                 // Line/dot stroke width
+showDots: boolean = false               // Show dots on data points (line charts)
+showArea: boolean = false               // Show area fill (line charts)
+smooth: boolean = false                 // Use smooth bezier curves
+min?: number                            // Min value for scaling (auto if unset)
+max?: number                            // Max value for scaling (auto if unset)
+```
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-sparkline id="chart"></snice-sparkline>
+<script>
+  document.getElementById('chart').data = [10, 20, 15, 25, 30];
+</script>
+
+<!-- Line chart -->
+<snice-sparkline id="line" type="line"></snice-sparkline>
+
+<!-- Bar chart -->
+<snice-sparkline id="bar" type="bar"></snice-sparkline>
+
+<!-- Area chart -->
+<snice-sparkline id="area" type="area"></snice-sparkline>
+
+<!-- Smooth curves -->
+<snice-sparkline id="smooth" smooth></snice-sparkline>
+
+<!-- With dots -->
+<snice-sparkline id="dots" show-dots></snice-sparkline>
+
+<!-- With area fill -->
+<snice-sparkline id="fill" show-area></snice-sparkline>
+
+<!-- Colors -->
+<snice-sparkline color="primary"></snice-sparkline>
+<snice-sparkline color="success"></snice-sparkline>
+<snice-sparkline color="warning"></snice-sparkline>
+<snice-sparkline color="danger"></snice-sparkline>
+<snice-sparkline color="muted"></snice-sparkline>
+
+<!-- Custom colors -->
+<snice-sparkline custom-color="#9333ea"></snice-sparkline>
+<snice-sparkline custom-color="rgb(147, 51, 234)"></snice-sparkline>
+<snice-sparkline custom-color="hsl(270, 80%, 60%)"></snice-sparkline>
+
+<!-- Sizing -->
+<snice-sparkline width="200" height="50"></snice-sparkline>
+
+<!-- Custom scale -->
+<snice-sparkline min="0" max="100"></snice-sparkline>
+
+<!-- Combined features -->
+<snice-sparkline
+  id="advanced"
+  type="line"
+  color="primary"
+  width="150"
+  height="40"
+  smooth
+  show-area
+  min="0">
+</snice-sparkline>
+```
+
+## CSS Parts
+
+```css
+::part(container)  /* Container div */
+::part(svg)        /* SVG element */
+::part(line)       /* Line/path element */
+::part(area)       /* Area polygon/path */
+::part(bar)        /* Bar rect */
+::part(dot)        /* Dot circle */
+```
+
+## Styling
+
+```css
+--snice-color-primary
+--snice-color-success
+--snice-color-warning
+--snice-color-danger
+--snice-color-text-secondary
+```
+
+## In Tables
+
+```html
+<snice-table id="table"></snice-table>
+<script>
+  document.getElementById('table').data = [
+    {
+      product: 'A',
+      trend: [10, 15, 12, 18, 22, 25]
+    }
+  ];
+
+  document.getElementById('table').columns = [
+    { key: 'product', label: 'Product' },
+    {
+      key: 'trend',
+      label: 'Trend',
+      render: (value) => {
+        const sparkline = document.createElement('snice-sparkline');
+        sparkline.data = value;
+        sparkline.width = 80;
+        sparkline.height = 25;
+        sparkline.color = 'primary';
+        return sparkline;
+      }
+    }
+  ];
+</script>
+```
+
+## Common Patterns
+
+```html
+<!-- Website traffic -->
+<snice-sparkline
+  id="traffic"
+  color="primary"
+  width="150"
+  height="40"
+  smooth
+  show-area>
+</snice-sparkline>
+
+<!-- Sales bars -->
+<snice-sparkline
+  id="sales"
+  type="bar"
+  color="success"
+  width="150"
+  height="40">
+</snice-sparkline>
+
+<!-- Response time with dots -->
+<snice-sparkline
+  id="response"
+  color="warning"
+  smooth
+  show-dots>
+</snice-sparkline>
+
+<!-- Error rate -->
+<snice-sparkline
+  id="errors"
+  type="area"
+  color="danger"
+  min="0">
+</snice-sparkline>
+```

package/docs/ai/components/spinner.md

@@ -0,0 +1,47 @@
+# snice-spinner
+
+Animated loading spinner.
+
+## Properties
+
+```typescript
+size: 'small'|'medium'|'large'|'xl' = 'medium';
+color: 'primary'|'success'|'warning'|'error'|'info' = 'primary';
+label: string = '';
+thickness: number = 4;
+```
+
+## Usage
+
+```html
+<!-- Basic -->
+<snice-spinner></snice-spinner>
+
+<!-- Sizes -->
+<snice-spinner size="small"></snice-spinner>
+<snice-spinner size="medium"></snice-spinner>
+<snice-spinner size="large"></snice-spinner>
+<snice-spinner size="xl"></snice-spinner>
+
+<!-- Colors -->
+<snice-spinner color="primary"></snice-spinner>
+<snice-spinner color="success"></snice-spinner>
+<snice-spinner color="warning"></snice-spinner>
+<snice-spinner color="error"></snice-spinner>
+<snice-spinner color="info"></snice-spinner>
+
+<!-- With label -->
+<snice-spinner label="Loading..."></snice-spinner>
+
+<!-- Custom thickness -->
+<snice-spinner thickness="6"></snice-spinner>
+```
+
+## Features
+
+- Smooth circular animation
+- 4 sizes
+- 5 color variants
+- Optional label
+- Accessible (role=status, aria-label)
+- Lightweight SVG-based

package/docs/ai/components/split-pane.md

@@ -0,0 +1,71 @@
+# snice-split-pane
+
+Resizable split pane layout.
+
+## Properties
+
+```typescript
+direction: 'horizontal'|'vertical' = 'horizontal';
+primarySize: number = 50; // percentage
+minPrimarySize: number = 10; // percentage
+minSecondarySize: number = 10; // percentage
+snapSize: number = 0; // percentage, 0 = no snap
+disabled: boolean = false;
+```
+
+## Methods
+
+```typescript
+getPrimarySize(): number
+getSecondarySize(): number
+setPrimarySize(size: number): void
+reset(): void
+```
+
+## Events
+
+- `@snice/resize` - Dispatched on resize (detail: { primarySize, secondarySize, splitPane })
+
+## Usage
+
+```html
+<snice-split-pane style="height: 400px;">
+  <div slot="primary">Left pane</div>
+  <div slot="secondary">Right pane</div>
+</snice-split-pane>
+
+<!-- Vertical -->
+<snice-split-pane direction="vertical">
+  <div slot="primary">Top</div>
+  <div slot="secondary">Bottom</div>
+</snice-split-pane>
+
+<!-- Custom size -->
+<snice-split-pane primary-size="30">
+  <div slot="primary">30%</div>
+  <div slot="secondary">70%</div>
+</snice-split-pane>
+
+<!-- With snap -->
+<snice-split-pane snap-size="10">
+  <div slot="primary">Snaps to 10%</div>
+  <div slot="secondary">Right</div>
+</snice-split-pane>
+
+<!-- Programmatic -->
+<script>
+  splitPane.setPrimarySize(40);
+  splitPane.reset(); // 50/50
+</script>
+```
+
+## Features
+
+- Horizontal and vertical orientation
+- Drag to resize
+- Minimum sizes for both panes
+- Snap to grid
+- Programmatic control
+- Nested layouts supported
+- Disabled state
+- Event dispatching

package/docs/ai/components/stat.md

@@ -0,0 +1,29 @@
+# snice-stat
+
+Statistics display with trends and icons.
+
+## Properties
+
+```typescript
+label: string = '';
+value: string | number = '';
+change: string | number = '';
+trend: 'up'|'down'|'neutral' = 'neutral';
+size: 'small'|'medium'|'large' = 'medium';
+icon: string = '';
+iconImage: string = '';
+colorValue: boolean = false;
+```
+
+## Usage
+
+```html
+<snice-stat
+  label="Revenue"
+  value="$45,231"
+  change="+12%"
+  trend="up"
+  icon="💰"
+  color-value>
+</snice-stat>
+```