snice 3.11.0 → 4.0.1

package/docs/components/camera.md

@@ -119,39 +119,39 @@ camera.toggleFullscreen();
 
 ## Events
 
-### `@snice/camera-start`
+### `camera-start`
 Camera started successfully.
 
 ```javascript
-camera.addEventListener('@snice/camera-start', (e) => {
+camera.addEventListener('camera-start', (e) => {
   console.log('Camera on', e.detail.stream);
 });
 ```
 
-### `@snice/camera-stop`
+### `camera-stop`
 Camera stopped.
 
 ```javascript
-camera.addEventListener('@snice/camera-stop', () => {
+camera.addEventListener('camera-stop', () => {
   console.log('Camera off');
 });
 ```
 
-### `@snice/camera-capture`
+### `camera-capture`
 Photo captured.
 
 ```javascript
-camera.addEventListener('@snice/camera-capture', (e) => {
+camera.addEventListener('camera-capture', (e) => {
   const image = e.detail.image;
   console.log(image.dataURL);
 });
 ```
 
-### `@snice/camera-error`
+### `camera-error`
 Camera error occurred.
 
 ```javascript
-camera.addEventListener('@snice/camera-error', (e) => {
+camera.addEventListener('camera-error', (e) => {
   console.error(e.detail.error);
 });
 ```
@@ -286,7 +286,7 @@ await fetch('/upload', { method: 'POST', body: formData });
 ```javascript
 const gallery = [];
 
-camera.addEventListener('@snice/camera-capture', (e) => {
+camera.addEventListener('camera-capture', (e) => {
   gallery.push(e.detail.image);
   displayGallery();
 });

package/docs/components/carousel.md

@@ -36,7 +36,7 @@ Image/content carousel with autoplay, loop, and navigation controls.
 
 ## Events
 
-- `@snice/carousel-slide-change` - Slide changed (detail: { activeIndex, previousIndex, carousel })
+- `carousel-slide-change` - Slide changed (detail: { activeIndex, previousIndex, carousel })
 
 ## Examples
 

package/docs/components/color-picker.md

@@ -40,7 +40,7 @@ Blur the color picker.
 
 ## Events
 
-### `@snice/color-picker-change`
+### `color-picker-change`
 Fired when color changes.
 
 **Detail**: `{ value: string, colorPicker: SniceColorPickerElement }`

package/docs/components/command-palette.md

@@ -77,11 +77,11 @@ interface CommandItem {
 
 ## Events
 
-- `@snice/command-palette-open` - Fired when palette opens
-- `@snice/command-palette-close` - Fired when palette closes
-- `@snice/command-select` - Fired when command is selected (detail: { command, palette })
-- `@snice/command-execute` - Fired when command is executed (detail: { command, palette })
-- `@snice/command-search` - Fired when search changes (detail: { query, results, palette })
+- `command-palette-open` - Fired when palette opens
+- `command-palette-close` - Fired when palette closes
+- `command-select` - Fired when command is selected (detail: { command, palette })
+- `command-execute` - Fired when command is executed (detail: { command, palette })
+- `command-search` - Fired when search changes (detail: { query, results, palette })
 
 ## Keyboard Shortcuts
 
@@ -141,7 +141,7 @@ palette.commands = [
 ### Event Handling
 
 ```javascript
-palette.addEventListener('@snice/command-execute', (e) => {
+palette.addEventListener('command-execute', (e) => {
   console.log('Executed:', e.detail.command.label);
   analytics.track('command_executed', { command: e.detail.command.id });
 });

package/docs/components/draw.md

@@ -80,11 +80,11 @@ Set strokes (for loading saved drawings).
 
 ## Events
 
-- `@snice/draw-start` - Drawing started
-- `@snice/draw-end` - Drawing ended (stroke complete)
-- `@snice/draw-clear` - Canvas cleared
-- `@snice/draw-undo` - Undo performed
-- `@snice/draw-redo` - Redo performed
+- `draw-start` - Drawing started
+- `draw-end` - Drawing ended (stroke complete)
+- `draw-clear` - Canvas cleared
+- `draw-undo` - Undo performed
+- `draw-redo` - Redo performed
 
 ## Examples
 
@@ -190,7 +190,7 @@ await draw.loadImage('background.jpg');
 ### Event Handling
 
 ```javascript
-draw.addEventListener('@snice/draw-end', (e) => {
+draw.addEventListener('draw-end', (e) => {
   const stroke = e.detail.stroke;
   console.log(`Drew ${stroke.points.length} points`);
 

package/docs/components/drawer.md

@@ -79,7 +79,7 @@ drawer.toggle();
 
 ## Events
 
-### `@snice/drawer-open`
+### `drawer-open`
 Fired when the drawer opens.
 
 **Event Detail:**
@@ -91,12 +91,12 @@ Fired when the drawer opens.
 
 **Usage:**
 ```typescript
-drawer.addEventListener('@snice/drawer-open', (e) => {
+drawer.addEventListener('drawer-open', (e) => {
   console.log('Drawer opened:', e.detail.drawer);
 });
 ```
 
-### `@snice/drawer-close`
+### `drawer-close`
 Fired when the drawer closes.
 
 **Event Detail:**
@@ -108,7 +108,7 @@ Fired when the drawer closes.
 
 **Usage:**
 ```typescript
-drawer.addEventListener('@snice/drawer-close', (e) => {
+drawer.addEventListener('drawer-close', (e) => {
   console.log('Drawer closed:', e.detail.drawer);
 });
 ```
@@ -397,12 +397,12 @@ import type { SniceDrawerElement } from 'snice/components/drawer/snice-drawer.ty
 
 const drawer = document.querySelector<SniceDrawerElement>('snice-drawer');
 
-drawer.addEventListener('@snice/drawer-open', () => {
+drawer.addEventListener('drawer-open', () => {
   console.log('Drawer opened');
   // Pause video, load content, etc.
 });
 
-drawer.addEventListener('@snice/drawer-close', () => {
+drawer.addEventListener('drawer-close', () => {
   console.log('Drawer closed');
   // Resume video, save state, etc.
 });

package/docs/components/empty-state.md

@@ -25,7 +25,7 @@ The `<snice-empty-state>` component provides a consistent way to display empty o
 
 ## Events
 
-### `@snice/empty-state-action`
+### `empty-state-action`
 Fired when action button/link is clicked.
 
 ## Examples

package/docs/components/file-gallery.md

@@ -293,68 +293,68 @@ gallery.removeFileBadge('file-id-123');
 
 ## Events
 
-### `@snice/files-change`
+### `files-change`
 Fired when files are added or removed.
 
 **Detail**: `{ files: GalleryFile[] }`
 
 ```typescript
-gallery.addEventListener('@snice/files-change', (e) => {
+gallery.addEventListener('files-change', (e) => {
   console.log('Files:', e.detail.files);
 });
 ```
 
-### `@snice/upload-progress`
+### `upload-progress`
 Fired during upload progress.
 
 **Detail**: `{ file: GalleryFile, progress: number }`
 
 ```typescript
-gallery.addEventListener('@snice/upload-progress', (e) => {
+gallery.addEventListener('upload-progress', (e) => {
   console.log(`${e.detail.file.file.name}: ${e.detail.progress}%`);
 });
 ```
 
-### `@snice/upload-complete`
+### `upload-complete`
 Fired when an upload completes successfully.
 
 **Detail**: `{ file: GalleryFile, url?: string }`
 
 ```typescript
-gallery.addEventListener('@snice/upload-complete', (e) => {
+gallery.addEventListener('upload-complete', (e) => {
   console.log('Upload complete:', e.detail.url);
 });
 ```
 
-### `@snice/upload-error`
+### `upload-error`
 Fired when an upload fails.
 
 **Detail**: `{ file: GalleryFile, error: string }`
 
 ```typescript
-gallery.addEventListener('@snice/upload-error', (e) => {
+gallery.addEventListener('upload-error', (e) => {
   console.error('Upload error:', e.detail.error);
 });
 ```
 
-### `@snice/custom-action-click`
+### `custom-action-click`
 Fired when a custom action button is clicked.
 
 **Detail**: `{ actionId: string }`
 
 ```typescript
-gallery.addEventListener('@snice/custom-action-click', (e) => {
+gallery.addEventListener('custom-action-click', (e) => {
   console.log('Custom action clicked:', e.detail.actionId);
 });
 ```
 
-### `@snice/error`
+### `gallery-error`
 Fired when a validation or general error occurs.
 
 **Detail**: `{ message: string }`
 
 ```typescript
-gallery.addEventListener('@snice/error', (e) => {
+gallery.addEventListener('gallery-error', (e) => {
   console.error('Error:', e.detail.message);
 });
 ```
@@ -514,19 +514,19 @@ async function uploadAll() {
 <script>
 const gallery = document.getElementById('gallery');
 
-gallery.addEventListener('@snice/files-change', (e) => {
+gallery.addEventListener('files-change', (e) => {
   console.log('Files changed:', e.detail.files);
 });
 
-gallery.addEventListener('@snice/upload-progress', (e) => {
+gallery.addEventListener('upload-progress', (e) => {
   console.log(`${e.detail.file.file.name}: ${e.detail.progress}%`);
 });
 
-gallery.addEventListener('@snice/upload-complete', (e) => {
+gallery.addEventListener('upload-complete', (e) => {
   console.log('Upload complete:', e.detail.file.file.name);
 });
 
-gallery.addEventListener('@snice/upload-error', (e) => {
+gallery.addEventListener('upload-error', (e) => {
   console.error('Upload failed:', e.detail.error);
 });
 </script>
@@ -586,7 +586,7 @@ const users = [
   { name: 'Bob Wilson', initials: 'BW', color: '#10b981', position: 'bottom-right' },
 ];
 
-gallery.addEventListener('@snice/files-change', (e) => {
+gallery.addEventListener('files-change', (e) => {
   const newFiles = e.detail.files.filter(f => !f.badge);
 
   newFiles.forEach((file, index) => {
@@ -630,7 +630,7 @@ const cameraIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
 const cameraActionId = gallery.addCustomAction(cameraIcon, 'Camera');
 
 // Handle camera action
-gallery.addEventListener('@snice/custom-action-click', (e) => {
+gallery.addEventListener('custom-action-click', (e) => {
   if (e.detail.actionId === cameraActionId) {
     // Open camera interface
     openCamera().then((imageBlob) => {

package/docs/components/file-upload.md

@@ -24,7 +24,7 @@ The `<snice-file-upload>` component provides a file upload interface with drag-a
 import 'snice/components/file-upload/snice-file-upload';
 
 const upload = document.querySelector('snice-file-upload');
-upload.addEventListener('@snice/file-upload-change', (e) => {
+upload.addEventListener('file-upload-change', (e) => {
   console.log('Files:', e.detail.files);
 });
 ```
@@ -68,13 +68,13 @@ upload.removeFile(0); // Remove first file
 
 ## Events
 
-### `@snice/file-upload-change`
+### `file-upload-change`
 Fired when files are added or removed.
 
 **Detail**: `{ files: File[], fileUpload: SniceFileUploadElement }`
 
 ```typescript
-upload.addEventListener('@snice/file-upload-change', (e) => {
+upload.addEventListener('file-upload-change', (e) => {
   console.log('Selected files:', e.detail.files);
   e.detail.files.forEach(file => {
     console.log(`- ${file.name} (${file.size} bytes)`);
@@ -82,13 +82,13 @@ upload.addEventListener('@snice/file-upload-change', (e) => {
 });
 ```
 
-### `@snice/file-upload-error`
+### `file-upload-error`
 Fired when file validation fails.
 
 **Detail**: `{ message: string, fileUpload: SniceFileUploadElement }`
 
 ```typescript
-upload.addEventListener('@snice/file-upload-error', (e) => {
+upload.addEventListener('file-upload-error', (e) => {
   console.error('Upload error:', e.detail.message);
 });
 ```
@@ -197,7 +197,7 @@ upload.addEventListener('@snice/file-upload-error', (e) => {
 
 <script>
 const upload = document.querySelector('snice-file-upload');
-upload.addEventListener('@snice/file-upload-error', (e) => {
+upload.addEventListener('file-upload-error', (e) => {
   alert(e.detail.message);
 });
 </script>
@@ -256,7 +256,7 @@ function removeFirst() {
   upload.removeFile(0);
 }
 
-upload.addEventListener('@snice/file-upload-change', (e) => {
+upload.addEventListener('file-upload-change', (e) => {
   console.log(`${e.detail.files.length} file(s) selected`);
 });
 </script>

package/docs/components/kanban.md

@@ -158,11 +158,11 @@ console.log(card.title);
 
 ## Events
 
-### `@snice/kanban-card-move`
+### `kanban-card-move`
 Dispatched when card is moved between columns.
 
 ```javascript
-kanban.addEventListener('@snice/kanban-card-move', (e) => {
+kanban.addEventListener('kanban-card-move', (e) => {
   console.log('Card:', e.detail.card);
   console.log('From:', e.detail.fromColumn);
   console.log('To:', e.detail.toColumn);
@@ -171,11 +171,11 @@ kanban.addEventListener('@snice/kanban-card-move', (e) => {
 
 **Detail:** `{ card: KanbanCard, fromColumn: string | number, toColumn: string | number, kanban: SniceKanbanElement }`
 
-### `@snice/kanban-card-click`
+### `kanban-card-click`
 Dispatched when card is clicked.
 
 ```javascript
-kanban.addEventListener('@snice/kanban-card-click', (e) => {
+kanban.addEventListener('kanban-card-click', (e) => {
   showCardDetails(e.detail.card);
 });
 ```
@@ -314,7 +314,7 @@ kanban.columns = [
 ### Event Handling
 
 ```javascript
-kanban.addEventListener('@snice/kanban-card-move', (e) => {
+kanban.addEventListener('kanban-card-move', (e) => {
   // Update backend
   updateCardStatus(e.detail.card.id, e.detail.toColumn);
 
@@ -322,7 +322,7 @@ kanban.addEventListener('@snice/kanban-card-move', (e) => {
   showNotification(`Moved "${e.detail.card.title}" to ${e.detail.toColumn}`);
 });
 
-kanban.addEventListener('@snice/kanban-card-click', (e) => {
+kanban.addEventListener('kanban-card-click', (e) => {
   // Show modal with card details
   showCardModal(e.detail.card);
 });
@@ -492,7 +492,7 @@ kanban.addCard('lead', {
 ### Persist to Backend
 
 ```javascript
-kanban.addEventListener('@snice/kanban-card-move', async (e) => {
+kanban.addEventListener('kanban-card-move', async (e) => {
   try {
     await fetch('/api/cards/' + e.detail.card.id, {
       method: 'PATCH',

package/docs/components/menu.md

@@ -89,7 +89,7 @@ menu.toggleMenu();
 
 ### Container Events
 
-#### `@snice/menu-open`
+#### `menu-open`
 Fired when the menu is opened.
 
 **Event Detail:**
@@ -101,12 +101,12 @@ Fired when the menu is opened.
 
 **Usage:**
 ```typescript
-menu.addEventListener('@snice/menu-open', (e) => {
+menu.addEventListener('menu-open', (e) => {
   console.log('Menu opened');
 });
 ```
 
-#### `@snice/menu-close`
+#### `menu-close`
 Fired when the menu is closed.
 
 **Event Detail:**
@@ -118,7 +118,7 @@ Fired when the menu is closed.
 
 ### Item Events
 
-#### `@snice/menu-item-select`
+#### `menu-item-select`
 Fired when a menu item is selected.
 
 **Event Detail:**
@@ -131,7 +131,7 @@ Fired when a menu item is selected.
 
 **Usage:**
 ```typescript
-menu.addEventListener('@snice/menu-item-select', (e) => {
+menu.addEventListener('menu-item-select', (e) => {
   console.log('Selected item:', e.detail.value);
 });
 ```
@@ -337,7 +337,7 @@ Keyboard shortcut hint displayed after the label.
 
 <script type="module">
   const menu = document.getElementById('multi-menu');
-  menu.addEventListener('@snice/menu-item-select', (e) => {
+  menu.addEventListener('menu-item-select', (e) => {
     if (e.detail.value === 'done') {
       menu.closeMenu();
     }
@@ -417,7 +417,7 @@ Keyboard shortcut hint displayed after the label.
     menu.openMenu();
   });
 
-  menu.addEventListener('@snice/menu-item-select', (e) => {
+  menu.addEventListener('menu-item-select', (e) => {
     console.log('Context action:', e.detail.value);
   });
 </script>
@@ -430,16 +430,16 @@ import type { SniceMenuElement } from 'snice/components/menu/snice-menu.types';
 
 const menu = document.querySelector<SniceMenuElement>('snice-menu');
 
-menu.addEventListener('@snice/menu-open', () => {
+menu.addEventListener('menu-open', () => {
   console.log('Menu opened');
   // Load dynamic content, track analytics, etc.
 });
 
-menu.addEventListener('@snice/menu-close', () => {
+menu.addEventListener('menu-close', () => {
   console.log('Menu closed');
 });
 
-menu.addEventListener('@snice/menu-item-select', (e) => {
+menu.addEventListener('menu-item-select', (e) => {
   console.log('Selected:', e.detail.value);
 
   switch (e.detail.value) {
@@ -486,7 +486,7 @@ menu.addEventListener('@snice/menu-item-select', (e) => {
     menu.appendChild(item);
   });
 
-  menu.addEventListener('@snice/menu-item-select', (e) => {
+  menu.addEventListener('menu-item-select', (e) => {
     openFile(e.detail.value);
   });
 </script>

package/docs/components/modal.md

@@ -36,7 +36,7 @@ const modal = document.querySelector('snice-modal');
 modal.show();
 
 // Listen for events
-modal.addEventListener('@snice/modal-close', () => {
+modal.addEventListener('modal-close', () => {
   console.log('Modal closed');
 });
 ```
@@ -71,7 +71,7 @@ modal.close();
 
 ## Events
 
-### `@snice/modal-open`
+### `modal-open`
 Fired when the modal opens.
 
 **Event Detail:**
@@ -83,12 +83,12 @@ Fired when the modal opens.
 
 **Usage:**
 ```typescript
-modal.addEventListener('@snice/modal-open', (e) => {
+modal.addEventListener('modal-open', (e) => {
   console.log('Modal opened:', e.detail.modal);
 });
 ```
 
-### `@snice/modal-close`
+### `modal-close`
 Fired when the modal closes.
 
 **Event Detail:**
@@ -100,7 +100,7 @@ Fired when the modal closes.
 
 **Usage:**
 ```typescript
-modal.addEventListener('@snice/modal-close', (e) => {
+modal.addEventListener('modal-close', (e) => {
   console.log('Modal closed:', e.detail.modal);
 });
 ```
@@ -343,12 +343,12 @@ import type { SniceModalElement } from 'snice/components/modal/snice-modal.types
 
 const modal = document.querySelector<SniceModalElement>('snice-modal');
 
-modal.addEventListener('@snice/modal-open', () => {
+modal.addEventListener('modal-open', () => {
   console.log('Modal opened');
   // Pause video, etc.
 });
 
-modal.addEventListener('@snice/modal-close', () => {
+modal.addEventListener('modal-close', () => {
   console.log('Modal closed');
   // Resume video, etc.
 });

package/docs/components/music-player.md

@@ -24,7 +24,7 @@ A full-featured audio player with playlist support, shuffle, repeat modes, and v
   ];
 
   // Listen for events
-  player.addEventListener('@snice/player-play', (e) => {
+  player.addEventListener('player-play', (e) => {
     console.log('Playing:', e.detail.track.title);
   });
 </script>
@@ -117,16 +117,16 @@ Get current track.
 
 ## Events
 
-- `@snice/player-play` - Playback started
-- `@snice/player-pause` - Playback paused
-- `@snice/player-stop` - Playback stopped
-- `@snice/player-track-change` - Track changed
-- `@snice/player-track-ended` - Track ended
-- `@snice/player-shuffle-change` - Shuffle changed
-- `@snice/player-repeat-change` - Repeat mode changed
-- `@snice/player-volume-change` - Volume changed
+- `player-play` - Playback started
+- `player-pause` - Playback paused
+- `player-stop` - Playback stopped
+- `player-track-change` - Track changed
+- `player-track-ended` - Track ended
+- `player-shuffle-change` - Shuffle changed
+- `player-repeat-change` - Repeat mode changed
+- `player-volume-change` - Volume changed
 - `@snice/player-time-update` - Playback time updated
-- `@snice/player-error` - Error occurred
+- `player-error` - Error occurred
 
 ## Examples
 
@@ -228,19 +228,19 @@ player.seek(30); // Jump to 30 seconds
 ```javascript
 const player = document.querySelector('snice-music-player');
 
-player.addEventListener('@snice/player-play', (e) => {
+player.addEventListener('player-play', (e) => {
   console.log('Playing:', e.detail.track);
 });
 
-player.addEventListener('@snice/player-pause', (e) => {
+player.addEventListener('player-pause', (e) => {
   console.log('Paused:', e.detail.track);
 });
 
-player.addEventListener('@snice/player-track-change', (e) => {
+player.addEventListener('player-track-change', (e) => {
   console.log('Track changed:', e.detail.track);
 });
 
-player.addEventListener('@snice/player-track-ended', (e) => {
+player.addEventListener('player-track-ended', (e) => {
   console.log('Track ended:', e.detail.track);
 });
 
@@ -248,7 +248,7 @@ player.addEventListener('@snice/player-time-update', (e) => {
   console.log('Time:', e.detail.currentTime, '/', e.detail.duration);
 });
 
-player.addEventListener('@snice/player-error', (e) => {
+player.addEventListener('player-error', (e) => {
   console.error('Error:', e.detail.error);
 });
 ```
@@ -280,7 +280,7 @@ await player.play();
 ```javascript
 // Tracks in playlist are clickable by default
 // Listen for track changes
-player.addEventListener('@snice/player-track-change', (e) => {
+player.addEventListener('player-track-change', (e) => {
   console.log('User selected:', e.detail.track.title);
 });
 ```