snice 4.14.0 → 4.16.0

package/docs/code-block.md

@@ -189,12 +189,12 @@ codeBlock.setGrammar(grammar);
 
 ## Events
 
-### `@snice/code-copy`
+### `code-copy`
 
 Dispatched when code is copied to the clipboard.
 
 ```typescript
-codeBlock.addEventListener('@snice/code-copy', (e) => {
+codeBlock.addEventListener('code-copy', (e) => {
   console.log('Copied:', e.detail.code);
   console.log('From:', e.detail.codeBlock);
 });
@@ -202,13 +202,13 @@ codeBlock.addEventListener('@snice/code-copy', (e) => {
 
 **Detail:** `{ code: string, codeBlock: SniceCodeBlockElement }`
 
-### `@snice/code-before-highlight`
+### `code-before-highlight`
 
 Dispatched before syntax highlighting runs. Can be used to modify code or language before highlighting.
 
 **Detail:** `{ code: string, language: string, codeBlock: SniceCodeBlockElement }`
 
-### `@snice/code-after-highlight`
+### `code-after-highlight`
 
 Dispatched after syntax highlighting completes.
 

package/docs/components/app-tiles.md

@@ -125,7 +125,7 @@ Use the `badge` attribute to display a notification badge on a tile.
 | `tiles` | `AppTile[]` | `[]` | Array of tile data objects (programmatic mode) |
 | `columns` | `number` | `4` | Number of grid columns |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tile size |
-| `variant` | `'grid' \| 'list'` | `'grid'` | Layout variant |
+| `variant` | `'grid' \| 'list' \| 'compact'` | `'grid'` | Layout variant |
 
 ### AppTile Interface
 

package/docs/components/book.md

@@ -34,7 +34,6 @@ import 'snice/components/book/snice-book';
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
 | `currentPage` (attr: `current-page`) | `number` | `0` | Current page number (0-indexed) |
-| `mode` | `'single' \| 'spread'` | `'spread'` | Display mode: single page or two-page spread |
 | `coverImage` (attr: `cover-image`) | `string` | `''` | URL for the cover page image |
 | `title` | `string` | `''` | Book title displayed on the cover |
 | `author` | `string` | `''` | Author name displayed on the cover |
@@ -50,9 +49,9 @@ import 'snice/components/book/snice-book';
 
 | Method | Arguments | Description |
 |--------|-----------|-------------|
-| `goToPage()` | `page: number` | Navigate to a specific page. In spread mode, auto-aligns to the correct spread. |
-| `nextPage()` | -- | Advance forward by 1 page (single mode) or 2 pages (spread mode) |
-| `prevPage()` | -- | Go back by 1 page (single mode) or 2 pages (spread mode) |
+| `goToPage()` | `page: number` | Navigate to a specific page |
+| `nextPage()` | -- | Advance forward by 1 page |
+| `prevPage()` | -- | Go back by 1 page |
 | `firstPage()` | -- | Jump to the first page (page 0) |
 | `lastPage()` | -- | Jump to the last page |
 

package/docs/components/button.md

@@ -2,7 +2,7 @@
 
 # Button Component
 
-The button component provides an interactive element for user actions. It supports multiple variants, sizes, states (loading, disabled), styles (outline, pill, circle), icons, and can function as both a button and link.
+The button component provides an interactive element for user actions. It supports multiple variants, sizes, states (loading, disabled), styles (outline, pill, circle), and icons. When `href` is set, clicking navigates via `window.location` (not rendered as an anchor).
 
 ## Table of Contents
 - [Basic Usage](#basic-usage)
@@ -33,7 +33,7 @@ import 'snice/components/button/snice-button';
 | `outline` | `boolean` | `false` | Use outline style |
 | `pill` | `boolean` | `false` | Use pill (fully rounded) shape |
 | `circle` | `boolean` | `false` | Use circle shape (icon only) |
-| `href` | `string` | `''` | URL to navigate to (renders as link) |
+| `href` | `string` | `''` | URL to navigate to (uses window.location, not an anchor tag) |
 | `target` | `string` | `''` | Link target attribute |
 | `download` | `string` | `''` | Download attribute for file downloads |
 | `icon` | `string` | `''` | Icon (URL, image file, emoji, or font ligature) |

package/docs/components/camera-annotate.md

@@ -46,9 +46,9 @@ import 'snice/components/camera-annotate/snice-camera-annotate';
 
 | Event | Detail | Description |
 |-------|--------|-------------|
-| `@snice/capture` | `{ dataURL, width, height }` | Fired when an image is captured from the camera |
-| `@snice/annotate` | `{ annotation }` | Fired when a new annotation (shape) is drawn |
-| `@snice/annotation-change` | `{ annotations }` | Fired when annotations are modified (add, remove, visibility, label) |
+| `capture` | `{ dataURL, width, height }` | Fired when an image is captured from the camera |
+| `annotate` | `{ annotation }` | Fired when a new annotation (shape) is drawn |
+| `annotation-change` | `{ annotations }` | Fired when annotations are modified (add, remove, visibility, label) |
 
 ## Examples
 
@@ -78,15 +78,15 @@ import 'snice/components/camera-annotate/snice-camera-annotate';
 <script type="module">
   const annotator = document.getElementById('annotator');
 
-  annotator.addEventListener('@snice/capture', (e) => {
+  annotator.addEventListener('capture', (e) => {
     console.log('Captured:', e.detail.width, 'x', e.detail.height);
   });
 
-  annotator.addEventListener('@snice/annotate', (e) => {
+  annotator.addEventListener('annotate', (e) => {
     console.log('New annotation:', e.detail.annotation.id);
   });
 
-  annotator.addEventListener('@snice/annotation-change', (e) => {
+  annotator.addEventListener('annotation-change', (e) => {
     console.log('Total annotations:', e.detail.annotations.length);
   });
 </script>

package/docs/components/candlestick.md

@@ -69,9 +69,9 @@ interface CandleData {
 
 | Event | Detail | Description |
 |-------|--------|-------------|
-| `@snice/candle-click` | `{ candle: CandleData, index: number }` | A candle was clicked |
-| `@snice/candle-hover` | `{ candle: CandleData, index: number }` | Mouse entered a candle |
-| `@snice/crosshair-move` | `{ price: number, date: string, x: number, y: number }` | Crosshair position changed |
+| `candle-click` | `{ candle: CandleData, index: number }` | A candle was clicked |
+| `candle-hover` | `{ candle: CandleData, index: number }` | Mouse entered a candle |
+| `crosshair-move` | `{ price: number, date: string, x: number, y: number }` | Crosshair position changed |
 
 ## Examples
 
@@ -120,12 +120,12 @@ interface CandleData {
 <snice-candlestick id="chart"></snice-candlestick>
 
 <script>
-  chart.addEventListener('@snice/candle-click', (e) => {
+  chart.addEventListener('candle-click', (e) => {
     console.log('Clicked candle:', e.detail.candle);
     console.log('Index:', e.detail.index);
   });
 
-  chart.addEventListener('@snice/crosshair-move', (e) => {
+  chart.addEventListener('crosshair-move', (e) => {
     console.log('Price at cursor:', e.detail.price);
     console.log('Date at cursor:', e.detail.date);
   });
@@ -193,6 +193,6 @@ snice-candlestick {
 3. **Use appropriate time formats**: Match `time-format` to your data granularity (intraday = `'time'`, daily = `'date'`, monthly = `'month'`)
 4. **Give the chart height**: The component needs an explicit height (set via CSS or a container)
 5. **Limit visible candles**: For large datasets, the chart auto-limits visible candles; use `zoomTo()` for specific ranges
-6. **Handle events**: Use `@snice/candle-click` for drill-down, `@snice/crosshair-move` for real-time price readout
+6. **Handle events**: Use `candle-click` for drill-down, `crosshair-move` for real-time price readout
 7. **Custom colors**: Use `bullish-color` / `bearish-color` or CSS custom properties for theme integration
 8. **Responsive**: The chart uses `ResizeObserver` and redraws on container resize

package/docs/components/chart.md

@@ -119,8 +119,8 @@ Toggle dataset visibility.
 chart.toggleDataset(0);
 ```
 
-### `exportImage(format?: 'png' | 'svg'): string`
-Export chart as image.
+### `exportImage(format?: 'svg'): string`
+Export chart as SVG string.
 
 ```javascript
 const svg = chart.exportImage('svg');
@@ -509,10 +509,8 @@ chart.labels = ['Q1', 'Q2', 'Q3', 'Q4', 'Q5'];
 
 ## Accessibility
 
-- Keyboard navigation support
-- ARIA labels for chart elements
-- Screen reader friendly data tables
-- High contrast color support
+- Legend items are clickable to toggle dataset visibility
+- Tooltip shows data values on hover
 
 ## Browser Support
 

package/docs/components/checkbox.md

@@ -2,7 +2,7 @@
 
 # Checkbox Component
 
-The checkbox component provides a form-associated checkbox input with support for checked, indeterminate, and invalid states, multiple sizes, and full keyboard accessibility.
+The checkbox component provides a checkbox input with support for checked, indeterminate, and invalid states, multiple sizes, and full keyboard accessibility.
 
 ## Table of Contents
 - [Basic Usage](#basic-usage)
@@ -60,7 +60,7 @@ checkbox.click();
 
 ## Events
 
-#### `change`
+#### `checkbox-change`
 Fired when the checkbox state changes.
 
 **Event Detail:**
@@ -706,7 +706,7 @@ checkbox.addEventListener('change', (e) => {
 
 ## Form Integration
 
-The checkbox component is a form-associated custom element and works seamlessly with standard HTML forms:
+The checkbox component is not form-associated (no `ElementInternals`). Use a hidden input or listen for `checkbox-change` events to integrate with forms:
 
 ```html
 <form>

package/docs/components/chip.md

@@ -57,22 +57,22 @@ Use the `icon` slot for external CSS-based icon fonts:
 
 ## Events
 
-#### `click`
+#### `chip-click`
 Fired when the chip is clicked (not the remove button).
 
 **Usage:**
 ```typescript
-chip.addEventListener('click', () => {
+chip.addEventListener('chip-click', () => {
   console.log('Chip clicked');
 });
 ```
 
-#### `remove`
+#### `chip-remove`
 Fired when the remove button is clicked.
 
 **Usage:**
 ```typescript
-chip.addEventListener('remove', () => {
+chip.addEventListener('chip-remove', () => {
   chip.remove(); // Remove from DOM
 });
 ```

package/docs/components/code-block.md

@@ -38,9 +38,10 @@ function hello() {
 
 ## Events
 
-- `@snice/code-copy` - Code copied (detail: `{ code, codeBlock }`)
-- `@snice/code-before-highlight` - Before highlighting (detail: `{ code, language, codeBlock }`)
-- `@snice/code-after-highlight` - After highlighting (detail: `{ code, language, codeBlock }`)
+- `code-copy` - Code copied (detail: `{ code, codeBlock }`)
+- `code-before-highlight` - Before highlighting (detail: `{ code, language, codeBlock }`)
+- `code-after-highlight` - After highlighting (detail: `{ code, language, codeBlock }`)
+- `grammar-request` - Grammar fetch requested (detail: `{ url, language, codeBlock }`). Only dispatched when `fetch-mode="event"`.
 
 ## Grammar Files
 

package/docs/components/doc.md

@@ -9,10 +9,12 @@ A simple WYSIWYG document editor component with formatting toolbar and content i
 - **WYSIWYG editing** - Direct HTML content editing
 - **Formatting toolbar** - Bold, italic, underline, strikethrough, headings, lists
 - **Content insertion** - Links, images, tables, dividers
-- **Sidebar controls** - Quick access to insert images, tables, and dividers
+- **Download/Export** - Save as HTML, Markdown, or Plain Text
+- **Icon sets** - Default text labels, Material Icons, or Font Awesome
 - **Paste image support** - Paste images directly from clipboard
 - **Keyboard shortcuts** - Ctrl/Cmd+B for bold, Ctrl/Cmd+I for italic, Ctrl/Cmd+U for underline
 - **Readonly mode** - Display documents without editing capabilities
+- **Dark mode** - Automatic dark mode via prefers-color-scheme
 - **Customizable styling** - CSS custom properties for theming
 
 ## Basic Usage
@@ -36,10 +38,11 @@ A simple WYSIWYG document editor component with formatting toolbar and content i
 
 ## Properties
 
-| Property      | Attribute     | Type      | Default              | Description                      |
-| ------------- | ------------- | --------- | -------------------- | -------------------------------- |
-| `placeholder` | `placeholder` | `string`  | `"Start typing..."` | Placeholder text when empty      |
-| `readonly`    | `readonly`    | `boolean` | `false`              | Whether the editor is readonly   |
+| Property          | Attribute          | Type      | Default              | Description                                      |
+| ----------------- | ------------------ | --------- | -------------------- | ------------------------------------------------ |
+| `placeholder`     | `placeholder`      | `string`  | `"Start typing..."`  | Placeholder text when empty                      |
+| `readonly`        | `readonly`         | `boolean` | `false`              | Whether the editor is readonly                   |
+| `icons`           | `icons`            | `string`  | `"default"`          | Icon set: `"default"`, `"material"`, `"fontawesome"` |
 
 ## Methods
 
@@ -49,7 +52,6 @@ Get the current HTML content of the editor.
 
 ```javascript
 const html = editor.getHTML();
-console.log(html);
 ```
 
 ### `setHTML(html: string): void`
@@ -63,6 +65,32 @@ editor.setHTML(`
 `);
 ```
 
+### `getText(): string`
+
+Get the document content as plain text.
+
+```javascript
+const text = editor.getText();
+```
+
+### `getMarkdown(): string`
+
+Get the document content converted to Markdown. Supports headings, bold, italic, strikethrough, links, images, lists, tables, horizontal rules, and inline code.
+
+```javascript
+const md = editor.getMarkdown();
+```
+
+### `downloadAs(format: 'html' | 'markdown' | 'text', filename?: string): void`
+
+Download the document in the specified format. If no filename is provided, defaults to `document.html`, `document.md`, or `document.txt`.
+
+```javascript
+editor.downloadAs('markdown', 'my-document.md');
+editor.downloadAs('html');
+editor.downloadAs('text', 'notes.txt');
+```
+
 ### `clear(): void`
 
 Clear all content and reset to an empty paragraph.
@@ -83,14 +111,43 @@ The toolbar includes:
 - **• / 1.** - Bulleted and numbered lists
 - **🔗** - Insert link
 - **🖼** - Insert image
+- **📊** - Insert table
+- **―** - Insert divider
+- **⬇** - Download menu (HTML, Markdown, Plain Text)
+
+## Icon Sets
 
-## Sidebar Features
+The `icons` property controls which icon set the toolbar uses:
 
-The collapsible sidebar provides quick access to:
+### Default (text/emoji)
+
+```html
+<snice-doc></snice-doc>
+```
+
+Uses text labels (B, I, U, H1, etc.) and emoji for action buttons.
+
+### Material Symbols
+
+```html
+<!-- Load the font in your document -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">
+
+<snice-doc icons="material"></snice-doc>
+```
+
+Uses [Material Symbols Outlined](https://fonts.google.com/icons). You must load the font stylesheet in your document — the font cascades from light DOM into the shadow DOM automatically.
+
+### Font Awesome
+
+```html
+<!-- Load the font in your document -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
+
+<snice-doc icons="fontawesome"></snice-doc>
+```
 
-- **Image** - Insert image via URL dialog
-- **Table** - Insert table with custom rows/columns
-- **Divider** - Insert horizontal rule
+Uses [Font Awesome 6](https://fontawesome.com/icons) solid icons. You must load the Font Awesome stylesheet in your document.
 
 ## Keyboard Shortcuts
 
@@ -128,44 +185,50 @@ snice-doc {
 }
 ```
 
+Dark mode is supported automatically via `prefers-color-scheme: dark`.
+
 ## Examples
 
-### Readonly Document Viewer
+### Export and Download
 
 ```html
-<snice-doc readonly></snice-doc>
+<snice-doc id="editor"></snice-doc>
+<button id="save-md">Save as Markdown</button>
+<button id="save-html">Save as HTML</button>
 
 <script type="module">
   import 'snice';
 
-  const viewer = document.querySelector('snice-doc');
-  viewer.setHTML(`
-    <h1>Read Only Document</h1>
-    <p>This document cannot be edited.</p>
-  `);
+  const editor = document.getElementById('editor');
+
+  document.getElementById('save-md').addEventListener('click', () => {
+    editor.downloadAs('markdown', 'my-doc.md');
+  });
+
+  document.getElementById('save-html').addEventListener('click', () => {
+    editor.downloadAs('html', 'my-doc.html');
+  });
 </script>
 ```
 
-### Rich Content Document
+### Material Icons
 
 ```html
-<snice-doc id="editor"></snice-doc>
+<snice-doc icons="material"></snice-doc>
+```
+
+### Readonly Document Viewer
+
+```html
+<snice-doc readonly></snice-doc>
 
 <script type="module">
   import 'snice';
 
-  const editor = document.getElementById('editor');
-  editor.setHTML(`
-    <h1>Welcome to the Document Editor!</h1>
-    <p>This is a simple document editor with:</p>
-    <ul>
-      <li><b>Bold</b>, <i>italic</i>, <u>underline</u> formatting</li>
-      <li>Headings (H1, H2, H3)</li>
-      <li>Bullet and numbered lists</li>
-      <li>Images and links</li>
-      <li>Tables</li>
-    </ul>
-    <p>Try typing with <b>bold</b> and hitting Enter - the formatting continues naturally!</p>
+  const viewer = document.querySelector('snice-doc');
+  viewer.setHTML(`
+    <h1>Read Only Document</h1>
+    <p>This document cannot be edited.</p>
   `);
 </script>
 ```
@@ -183,40 +246,16 @@ snice-doc {
   const editor = document.getElementById('editor');
 
   document.getElementById('save').addEventListener('click', () => {
-    const html = editor.getHTML();
-    localStorage.setItem('document', html);
-    console.log('Saved!');
+    localStorage.setItem('document', editor.getHTML());
   });
 
   document.getElementById('load').addEventListener('click', () => {
     const html = localStorage.getItem('document');
-    if (html) {
-      editor.setHTML(html);
-      console.log('Loaded!');
-    }
+    if (html) editor.setHTML(html);
   });
 </script>
 ```
 
-### Custom Styling
-
-```html
-<style>
-  snice-doc.dark {
-    --snice-doc-text-color: #e6edf3;
-    --snice-doc-background: #0d1117;
-    --snice-doc-muted-color: #7d8590;
-    --snice-doc-placeholder-color: #484f58;
-    --snice-doc-toolbar-background: #161b22;
-    --snice-doc-toolbar-border: #30363d;
-    --snice-doc-sidebar-background: #161b22;
-    --snice-doc-sidebar-border: #30363d;
-  }
-</style>
-
-<snice-doc class="dark"></snice-doc>
-```
-
 ## Accessibility
 
 - Supports keyboard navigation
@@ -240,4 +279,6 @@ import type { SniceDoc } from 'snice/doc';
 
 const editor = document.querySelector<SniceDoc>('snice-doc');
 const html = editor?.getHTML();
+const markdown = editor?.getMarkdown();
+editor?.downloadAs('markdown', 'export.md');
 ```

package/docs/components/file-gallery.md

@@ -320,18 +320,40 @@ gallery.addEventListener('upload-progress', (e) => {
 ### `upload-complete`
 Fired when an upload completes successfully.
 
-**Detail**: `{ file: GalleryFile, url?: string }`
+**Detail**: `{ file: GalleryFile, response: UploadResponse, component: SniceFileGalleryElement }`
 
 ```typescript
 gallery.addEventListener('upload-complete', (e) => {
-  console.log('Upload complete:', e.detail.url);
+  console.log('Upload complete:', e.detail.response);
+});
+```
+
+### `upload-pause`
+Fired when an upload is paused.
+
+**Detail**: `{ file: GalleryFile, component: SniceFileGalleryElement }`
+
+```typescript
+gallery.addEventListener('upload-pause', (e) => {
+  console.log('Upload paused:', e.detail.file.file.name);
+});
+```
+
+### `file-remove`
+Fired when a file is removed from the gallery.
+
+**Detail**: `{ file: GalleryFile, component: SniceFileGalleryElement }`
+
+```typescript
+gallery.addEventListener('file-remove', (e) => {
+  console.log('File removed:', e.detail.file.file.name);
 });
 ```
 
 ### `upload-error`
 Fired when an upload fails.
 
-**Detail**: `{ file: GalleryFile, error: string }`
+**Detail**: `{ file: GalleryFile, error: string, component: SniceFileGalleryElement }`
 
 ```typescript
 gallery.addEventListener('upload-error', (e) => {

package/docs/components/input.md

@@ -156,6 +156,24 @@ Use `name` and `required` for native form participation.
 </form>
 ```
 
+### Vertical Alignment
+
+When the input has an explicit height, use `align` to control vertical positioning of the inner input field.
+
+```html
+<snice-input style="height: 200px" align="top" label="Top"></snice-input>
+<snice-input style="height: 200px" align="center" label="Center"></snice-input>
+<snice-input style="height: 200px" align="bottom" label="Bottom"></snice-input>
+```
+
+### Stretch
+
+Use the `stretch` attribute to make the inner input fill the full height of the host.
+
+```html
+<snice-input style="height: 200px" stretch label="Stretched"></snice-input>
+```
+
 ### Event Handling
 
 Listen for input events using `input-input` and `input-change`.
@@ -205,6 +223,8 @@ inp.addEventListener('input-change', (e) => console.log('Change:', e.detail.valu
 | `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) |
+| `align` | `align` | `'top' \| 'center' \| 'bottom' \| ''` | `''` | Vertical alignment when host has explicit height (default centers) |
+| `stretch` | `stretch` | `boolean` | `false` | Input fills the full host height |
 
 ## Events
 

package/docs/components/kpi.md

@@ -267,10 +267,9 @@ The component uses these CSS custom properties:
 
 ## Accessibility
 
-- Labels provide context for screen readers
-- Sentiment indicators have clear visual differentiation
+- Labels provide context for displayed values
+- Sentiment indicators have clear visual differentiation (color + icon)
 - Sufficient color contrast for all text elements
-- Keyboard navigation supported through standard focus
 
 ## Performance
 

package/docs/components/link-preview.md

@@ -109,7 +109,7 @@ When no image is provided, a placeholder link icon is shown.
 </snice-link-preview>
 
 <script type="module">
-  document.getElementById('preview').addEventListener('@snice/link-click', (e) => {
+  document.getElementById('preview').addEventListener('link-click', (e) => {
     console.log('Link clicked:', e.detail.url);
   });
 </script>
@@ -132,4 +132,4 @@ When no image is provided, a placeholder link icon is shown.
 
 | Event | Detail | Description |
 |-------|--------|-------------|
-| `@snice/link-click` | `{ url: string }` | Fired when the card is clicked |
+| `link-click` | `{ url: string }` | Fired when the card is clicked |

package/docs/components/list.md

@@ -65,7 +65,7 @@ Use the `before` and `after` slots on list items for icons and metadata.
 
 ### Searchable List
 
-Set the `searchable` attribute to show a search input. Handle queries with the `@snice/list/search` request.
+Set the `searchable` attribute to show a search input. Handle queries with the `list/search` request.
 
 ```html
 <snice-list searchable dividers>
@@ -157,5 +157,5 @@ Set the `no-results` attribute to show an empty state message.
 
 | Request | Params | Description |
 |---------|--------|-------------|
-| `@snice/list/search` | `{ query: string, list }` | Handle search queries |
-| `@snice/list/load-more` | `{ page: number, list }` | Load next page for infinite scroll |
+| `list/search` | `{ query: string, list }` | Handle search queries |
+| `list/load-more` | `{ page: number, list }` | Load next page for infinite scroll |