snice 3.10.5 → 4.0.0

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);
 });
 ```

package/docs/components/pagination.md

@@ -20,7 +20,7 @@ The `<snice-pagination>` component provides a flexible pagination interface for
 import 'snice/components/pagination/snice-pagination';
 
 const pagination = document.querySelector('snice-pagination');
-pagination.addEventListener('@snice/pagination-change', (e) => {
+pagination.addEventListener('pagination-change', (e) => {
   console.log('Page changed to:', e.detail.page);
 });
 ```
@@ -78,7 +78,7 @@ pagination.lastPage();
 
 ## Events
 
-### `@snice/pagination-change`
+### `pagination-change`
 Fired when the page changes.
 
 **Event Detail:**
@@ -91,7 +91,7 @@ Fired when the page changes.
 
 **Usage:**
 ```typescript
-pagination.addEventListener('@snice/pagination-change', (e) => {
+pagination.addEventListener('pagination-change', (e) => {
   const { page, previousPage } = e.detail;
   console.log(`Changed from page ${previousPage} to ${page}`);
 });
@@ -194,7 +194,7 @@ pagination.lastPage();
 ```typescript
 const pagination = document.querySelector('snice-pagination');
 
-pagination.addEventListener('@snice/pagination-change', (e) => {
+pagination.addEventListener('pagination-change', (e) => {
   const { page } = e.detail;
 
   // Fetch data for the new page
@@ -258,7 +258,7 @@ async function fetchPageData(page: number) {
     }
 
     // Listen for page changes
-    pagination.addEventListener('@snice/pagination-change', (e) => {
+    pagination.addEventListener('pagination-change', (e) => {
       renderPage(e.detail.page);
     });
 

package/docs/components/qr-reader.md

@@ -19,7 +19,7 @@
 <script>
   const reader = document.querySelector('snice-qr-reader');
 
-  reader.addEventListener('@snice/qr-scan', (event) => {
+  reader.addEventListener('qr-scan', (event) => {
     console.log('QR Code:', event.detail.data);
   });
 </script>
@@ -117,7 +117,7 @@ const result = await reader.snap(); // Returns QR data or null
 
 ## Events
 
-### `@snice/qr-scan`
+### `qr-scan`
 Fired when a QR code is successfully detected.
 
 **Detail Properties:**
@@ -126,13 +126,13 @@ Fired when a QR code is successfully detected.
 - `reader` (SniceQRReader): Reference to the component
 
 ```javascript
-reader.addEventListener('@snice/qr-scan', (event) => {
+reader.addEventListener('qr-scan', (event) => {
   console.log('Data:', event.detail.data);
   console.log('Time:', new Date(event.detail.timestamp));
 });
 ```
 
-### `@snice/qr-error`
+### `qr-error`
 Fired when an error occurs during scanning.
 
 **Detail Properties:**
@@ -140,7 +140,7 @@ Fired when an error occurs during scanning.
 - `reader` (SniceQRReader): Reference to the component
 
 ```javascript
-reader.addEventListener('@snice/qr-error', (event) => {
+reader.addEventListener('qr-error', (event) => {
   console.error('Error:', event.detail.error);
 });
 ```
@@ -157,7 +157,7 @@ reader.addEventListener('@snice/camera-ready', (event) => {
 });
 ```
 
-### `@snice/camera-error`
+### `camera-error`
 Fired when camera initialization fails.
 
 **Detail Properties:**
@@ -165,7 +165,7 @@ Fired when camera initialization fails.
 - `reader` (SniceQRReader): Reference to the component
 
 ```javascript
-reader.addEventListener('@snice/camera-error', (event) => {
+reader.addEventListener('camera-error', (event) => {
   console.error('Camera error:', event.detail.error);
 });
 ```
@@ -192,7 +192,7 @@ reader.addEventListener('@snice/camera-error', (event) => {
     reader.stop();
   }
 
-  reader.addEventListener('@snice/qr-scan', (e) => {
+  reader.addEventListener('qr-scan', (e) => {
     result.textContent = `Scanned: ${e.detail.data}`;
   });
 </script>
@@ -206,7 +206,7 @@ reader.addEventListener('@snice/camera-error', (event) => {
 <script>
   const scanner = document.getElementById('scanner');
 
-  scanner.addEventListener('@snice/qr-scan', (e) => {
+  scanner.addEventListener('qr-scan', (e) => {
     // Process the scan
     processQRCode(e.detail.data);
 
@@ -251,7 +251,7 @@ reader.addEventListener('@snice/camera-error', (event) => {
 <script>
   // Useful for self-scanning scenarios
   document.querySelector('snice-qr-reader')
-    .addEventListener('@snice/qr-scan', (e) => {
+    .addEventListener('qr-scan', (e) => {
       validateTicket(e.detail.data);
     });
 </script>
@@ -267,12 +267,12 @@ reader.addEventListener('@snice/camera-error', (event) => {
   const reader = document.getElementById('reader');
   const status = document.getElementById('status');
 
-  reader.addEventListener('@snice/qr-scan', (e) => {
+  reader.addEventListener('qr-scan', (e) => {
     status.textContent = `✓ Scanned: ${e.detail.data}`;
     status.style.color = 'green';
   });
 
-  reader.addEventListener('@snice/qr-error', (e) => {
+  reader.addEventListener('qr-error', (e) => {
     status.textContent = `✗ Error: ${e.detail.error}`;
     status.style.color = 'red';
 

package/docs/components/select.md

@@ -28,7 +28,7 @@ import 'snice/components/select/snice-select';
 import 'snice/components/select/snice-option';
 
 const select = document.querySelector('snice-select');
-select.addEventListener('@snice/select-change', (e) => {
+select.addEventListener('select-change', (e) => {
   console.log('Selected:', e.detail.value);
 });
 ```
@@ -111,7 +111,7 @@ select.blur();
 
 #### Events
 
-##### `@snice/select-change`
+##### `select-change`
 Fired when the selection changes.
 
 **Event Detail:**
@@ -125,13 +125,13 @@ Fired when the selection changes.
 
 **Usage:**
 ```typescript
-select.addEventListener('@snice/select-change', (e) => {
+select.addEventListener('select-change', (e) => {
   const { value, option } = e.detail;
   console.log(`Selected ${option?.label} with value ${value}`);
 });
 ```
 
-##### `@snice/select-open`
+##### `select-open`
 Fired when the dropdown opens.
 
 **Event Detail:**
@@ -141,7 +141,7 @@ Fired when the dropdown opens.
 }
 ```
 
-##### `@snice/select-close`
+##### `select-close`
 Fired when the dropdown closes.
 
 **Event Detail:**
@@ -348,7 +348,7 @@ select.value = 'banana';
 ```typescript
 const select = document.querySelector('snice-select');
 
-select.addEventListener('@snice/select-change', (e) => {
+select.addEventListener('select-change', (e) => {
   const { value, option } = e.detail;
 
   if (option) {
@@ -359,11 +359,11 @@ select.addEventListener('@snice/select-change', (e) => {
   updateDependentFields(value);
 });
 
-select.addEventListener('@snice/select-open', () => {
+select.addEventListener('select-open', () => {
   console.log('Dropdown opened');
 });
 
-select.addEventListener('@snice/select-close', () => {
+select.addEventListener('select-close', () => {
   console.log('Dropdown closed');
 });
 ```
@@ -501,7 +501,7 @@ Selected options will display as removable tags. Click the × on a tag to remove
     import 'snice/components/select/snice-option';
 
     // Handle select changes
-    document.addEventListener('@snice/select-change', (e) => {
+    document.addEventListener('select-change', (e) => {
       console.log('Selection changed:', e.detail);
     });
   </script>

package/docs/components/slider.md

@@ -27,7 +27,7 @@ The `<snice-slider>` component provides an interactive range slider for selectin
 import 'snice/components/slider/snice-slider';
 
 const slider = document.querySelector('snice-slider');
-slider.addEventListener('@snice/slider-change', (e) => {
+slider.addEventListener('slider-change', (e) => {
   console.log('Value:', e.detail.value);
 });
 ```
@@ -93,24 +93,24 @@ slider.setCustomValidity('Value must be between 10 and 90');
 
 ## Events
 
-### `@snice/slider-input`
+### `slider-input`
 Fired continuously while dragging the slider.
 
 **Detail**: `{ value: number, slider: SniceSliderElement }`
 
 ```typescript
-slider.addEventListener('@snice/slider-input', (e) => {
+slider.addEventListener('slider-input', (e) => {
   console.log('Current value:', e.detail.value);
 });
 ```
 
-### `@snice/slider-change`
+### `slider-change`
 Fired when the slider value is committed (after drag ends or keyboard input).
 
 **Detail**: `{ value: number, slider: SniceSliderElement }`
 
 ```typescript
-slider.addEventListener('@snice/slider-change', (e) => {
+slider.addEventListener('slider-change', (e) => {
   console.log('Final value:', e.detail.value);
 });
 ```
@@ -290,7 +290,7 @@ document.getElementById('settings-form').addEventListener('submit', (e) => {
 const slider = document.getElementById('volume-slider');
 const display = document.getElementById('volume-display');
 
-slider.addEventListener('@snice/slider-input', (e) => {
+slider.addEventListener('slider-input', (e) => {
   display.textContent = `Volume: ${e.detail.value}`;
 });
 </script>

package/docs/components/split-pane.md

@@ -54,11 +54,11 @@ splitPane.reset();
 
 ## Events
 
-### `@snice/resize`
+### `pane-resize`
 Dispatched when pane is resized.
 
 ```javascript
-splitPane.addEventListener('@snice/resize', (e) => {
+splitPane.addEventListener('pane-resize', (e) => {
   console.log('Primary:', e.detail.primarySize);
   console.log('Secondary:', e.detail.secondarySize);
 });

package/docs/components/switch.md

@@ -20,7 +20,7 @@ The `<snice-switch>` component provides a toggle switch input for boolean select
 import 'snice/components/switch/snice-switch';
 
 const switchEl = document.querySelector('snice-switch');
-switchEl.addEventListener('@snice/switch-change', (e) => {
+switchEl.addEventListener('switch-change', (e) => {
   console.log('Switch is now:', e.detail.checked);
 });
 ```
@@ -72,7 +72,7 @@ switchEl.click();
 
 ## Events
 
-### `@snice/switch-change`
+### `switch-change`
 Fired when the switch state changes.
 
 **Event Detail:**
@@ -85,7 +85,7 @@ Fired when the switch state changes.
 
 **Usage:**
 ```typescript
-switchEl.addEventListener('@snice/switch-change', (e) => {
+switchEl.addEventListener('switch-change', (e) => {
   const { checked } = e.detail;
   console.log(`Switch is ${checked ? 'on' : 'off'}`);
 });
@@ -199,7 +199,7 @@ switchEl.disabled = true;
 ```typescript
 const switchEl = document.querySelector('snice-switch');
 
-switchEl.addEventListener('@snice/switch-change', (e) => {
+switchEl.addEventListener('switch-change', (e) => {
   const { checked, switch: sw } = e.detail;
 
   if (checked) {

package/docs/components/tabs.md

@@ -34,7 +34,7 @@ import 'snice/components/tabs/snice-tab';
 import 'snice/components/tabs/snice-tab-panel';
 
 const tabs = document.querySelector('snice-tabs');
-tabs.addEventListener('@snice/tab-change', (e) => {
+tabs.addEventListener('tab-change', (e) => {
   console.log('Tab changed to:', e.detail.index);
 });
 ```
@@ -86,7 +86,7 @@ const panel = tabs.getPanel(0);
 
 #### Events
 
-##### `@snice/tab-change`
+##### `tab-change`
 Fired when the active tab changes.
 
 **Event Detail:**
@@ -101,7 +101,7 @@ Fired when the active tab changes.
 
 **Usage:**
 ```typescript
-tabs.addEventListener('@snice/tab-change', (e) => {
+tabs.addEventListener('tab-change', (e) => {
   const { index, oldIndex, tab, panel } = e.detail;
   console.log(`Changed from tab ${oldIndex} to ${index}`);
 });
@@ -136,7 +136,7 @@ tab.blur();
 
 #### Events
 
-##### `@snice/tab-select`
+##### `tab-select`
 Fired when the tab is clicked (bubbles to parent tabs container).
 
 **Event Detail:**
@@ -146,7 +146,7 @@ Fired when the tab is clicked (bubbles to parent tabs container).
 }
 ```
 
-##### `@snice/close`
+##### `tab-close`
 Fired when the close button is clicked (only if `closable` is true).
 
 **Event Detail:**
@@ -216,7 +216,7 @@ Control where the tab navigation appears relative to the content.
 
   const tabs = document.querySelectorAll('snice-tab');
   tabs.forEach(tab => {
-    tab.addEventListener('@snice/close', (e) => {
+    tab.addEventListener('tab-close', (e) => {
       console.log('Tab closed:', e.detail.tab);
       // Handle tab removal
     });
@@ -302,7 +302,7 @@ const panel = tabs.getPanel(0);
 ```typescript
 const tabs = document.querySelector('snice-tabs');
 
-tabs.addEventListener('@snice/tab-change', (e) => {
+tabs.addEventListener('tab-change', (e) => {
   const { index, oldIndex, tab, panel } = e.detail;
 
   // Load content dynamically
@@ -349,7 +349,7 @@ async function loadPanelContent(index: number, panel: HTMLElement) {
     tabs.appendChild(panel);
 
     // Handle close
-    tab.addEventListener('@snice/close', () => {
+    tab.addEventListener('tab-close', () => {
       const index = Array.from(tabs.querySelectorAll('snice-tab')).indexOf(tab);
       const panelToRemove = tabs.querySelectorAll('snice-tab-panel')[index];
 
@@ -461,13 +461,13 @@ async function loadPanelContent(index: number, panel: HTMLElement) {
     const tabs = document.querySelector('snice-tabs');
 
     // Handle tab changes
-    tabs.addEventListener('@snice/tab-change', (e) => {
+    tabs.addEventListener('tab-change', (e) => {
       console.log('Active tab:', e.detail.index);
     });
 
     // Handle tab close
     document.querySelectorAll('snice-tab[closable]').forEach(tab => {
-      tab.addEventListener('@snice/close', (e) => {
+      tab.addEventListener('tab-close', (e) => {
         if (confirm('Close this tab?')) {
           const index = Array.from(tabs.querySelectorAll('snice-tab')).indexOf(e.detail.tab);
           const panel = tabs.querySelectorAll('snice-tab-panel')[index];

package/docs/components/terminal.md

@@ -115,12 +115,12 @@ terminal.clearHistory();
 
 ## Events
 
-### `@snice/terminal-command`
+### `terminal-command`
 
 Emitted when a command is entered.
 
 ```javascript
-terminal.addEventListener('@snice/terminal-command', (e) => {
+terminal.addEventListener('terminal-command', (e) => {
   console.log('Command:', e.detail.command);
   console.log('Args:', e.detail.args);
 });
@@ -130,22 +130,22 @@ terminal.addEventListener('@snice/terminal-command', (e) => {
 - `command: string` - The command name
 - `args: string[]` - Command arguments
 
-### `@snice/terminal-clear`
+### `terminal-clear`
 
 Emitted when the terminal is cleared.
 
 ```javascript
-terminal.addEventListener('@snice/terminal-clear', () => {
+terminal.addEventListener('terminal-clear', () => {
   console.log('Terminal was cleared');
 });
 ```
 
-### `@snice/terminal-ready`
+### `terminal-ready`
 
 Emitted when the terminal is ready.
 
 ```javascript
-terminal.addEventListener('@snice/terminal-ready', () => {
+terminal.addEventListener('terminal-ready', () => {
   console.log('Terminal is ready');
 });
 ```

package/docs/components/textarea.md

@@ -24,7 +24,7 @@ The `<snice-textarea>` component provides a multi-line text input with validatio
 import 'snice/components/textarea/snice-textarea';
 
 const textarea = document.querySelector('snice-textarea');
-textarea.addEventListener('@snice/textarea-change', (e) => {
+textarea.addEventListener('textarea-change', (e) => {
   console.log('Value:', e.detail.value);
 });
 ```
@@ -99,34 +99,34 @@ textarea.setCustomValidity('This field is required');
 
 ## Events
 
-### `@snice/textarea-input`
+### `textarea-input`
 Fired when the textarea value changes during input.
 
 **Detail**: `{ value: string, textarea: SniceTextareaElement }`
 
 ```typescript
-textarea.addEventListener('@snice/textarea-input', (e) => {
+textarea.addEventListener('textarea-input', (e) => {
   console.log('Input value:', e.detail.value);
 });
 ```
 
-### `@snice/textarea-change`
+### `textarea-change`
 Fired when the textarea value is committed (blur or enter).
 
 **Detail**: `{ value: string, textarea: SniceTextareaElement }`
 
 ```typescript
-textarea.addEventListener('@snice/textarea-change', (e) => {
+textarea.addEventListener('textarea-change', (e) => {
   console.log('Changed to:', e.detail.value);
 });
 ```
 
-### `@snice/textarea-focus`
+### `textarea-focus`
 Fired when the textarea receives focus.
 
 **Detail**: `{ textarea: SniceTextareaElement }`
 
-### `@snice/textarea-blur`
+### `textarea-blur`
 Fired when the textarea loses focus.
 
 **Detail**: `{ textarea: SniceTextareaElement }`

package/docs/components/timer.md

@@ -33,10 +33,10 @@ The `<snice-timer>` component provides a stopwatch and countdown timer.
 
 | Event | Detail | Description |
 |-------|--------|-------------|
-| `@snice/timer-start` | `{ timer, time }` | Timer started |
-| `@snice/timer-stop` | `{ timer, time }` | Timer stopped |
-| `@snice/timer-reset` | `{ timer, time }` | Timer reset |
-| `@snice/timer-complete` | `{ timer }` | Countdown completed (timer mode only) |
+| `timer-start` | `{ timer, time }` | Timer started |
+| `timer-stop` | `{ timer, time }` | Timer stopped |
+| `timer-reset` | `{ timer, time }` | Timer reset |
+| `timer-complete` | `{ timer }` | Countdown completed (timer mode only) |
 
 ## Examples
 
@@ -63,7 +63,7 @@ The `<snice-timer>` component provides a stopwatch and countdown timer.
 <script>
   const timer = document.getElementById('timer');
 
-  timer.addEventListener('@snice/timer-complete', () => {
+  timer.addEventListener('timer-complete', () => {
     console.log('Time is up!');
   });
 
@@ -83,11 +83,11 @@ The `<snice-timer>` component provides a stopwatch and countdown timer.
 <script>
   const timer = document.getElementById('my-timer');
 
-  timer.addEventListener('@snice/timer-start', (e) => {
+  timer.addEventListener('timer-start', (e) => {
     console.log('Timer started at', e.detail.time);
   });
 
-  timer.addEventListener('@snice/timer-stop', (e) => {
+  timer.addEventListener('timer-stop', (e) => {
     console.log('Timer stopped at', e.detail.time);
   });
 </script>
@@ -101,7 +101,7 @@ The `<snice-timer>` component provides a stopwatch and countdown timer.
 <script>
   const workout = document.getElementById('workout');
 
-  workout.addEventListener('@snice/timer-complete', () => {
+  workout.addEventListener('timer-complete', () => {
     alert('Rest time!');
     // Start rest period
     workout.initialTime = 15;