snice 3.10.5 → 4.0.0

package/docs/components/calendar.md

@@ -11,7 +11,7 @@ Display and select dates with event support.
 ```javascript
 const calendar = document.querySelector('snice-calendar');
 
-calendar.addEventListener('@snice/calendar-change', (e) => {
+calendar.addEventListener('calendar-change', (e) => {
   console.log('Selected date:', e.detail.value);
 });
 ```
@@ -120,22 +120,22 @@ console.log(`Today has ${events.length} events`);
 
 ## Events
 
-### `@snice/calendar-change`
+### `calendar-change`
 Dispatched when selected date changes.
 
 ```javascript
-calendar.addEventListener('@snice/calendar-change', (e) => {
+calendar.addEventListener('calendar-change', (e) => {
   console.log('Selected:', e.detail.value);
 });
 ```
 
 **Detail:** `{ value: Date, calendar: SniceCalendarElement }`
 
-### `@snice/calendar-event-click`
+### `calendar-event-click`
 Dispatched when event is clicked.
 
 ```javascript
-calendar.addEventListener('@snice/calendar-event-click', (e) => {
+calendar.addEventListener('calendar-event-click', (e) => {
   console.log('Event clicked:', e.detail.event);
 });
 ```
@@ -226,13 +226,13 @@ calendar.nextMonth();
 
 ```javascript
 // Date selection
-calendar.addEventListener('@snice/calendar-change', (e) => {
+calendar.addEventListener('calendar-change', (e) => {
   console.log('Date selected:', e.detail.value);
   updateBookingForm(e.detail.value);
 });
 
 // Event clicks
-calendar.addEventListener('@snice/calendar-event-click', (e) => {
+calendar.addEventListener('calendar-event-click', (e) => {
   showEventDetails(e.detail.event);
 });
 ```
@@ -256,7 +256,7 @@ const fullyBooked = await getFullyBookedDates();
 calendar.disabledDates = fullyBooked;
 
 // Handle new booking
-calendar.addEventListener('@snice/calendar-change', (e) => {
+calendar.addEventListener('calendar-change', (e) => {
   if (hasAvailability(e.detail.value)) {
     showBookingForm(e.detail.value);
   }
@@ -290,7 +290,7 @@ calendar.events = teamMeetings.map(m => ({
 }));
 
 // Click to see meeting details
-calendar.addEventListener('@snice/calendar-event-click', (e) => {
+calendar.addEventListener('calendar-event-click', (e) => {
   const meeting = e.detail.event;
   showModal({
     title: meeting.title,
@@ -312,7 +312,7 @@ calendar.minDate = today;
 calendar.maxDate = new Date(today.getFullYear(), today.getMonth() + 3, 0);
 
 // Handle selection
-calendar.addEventListener('@snice/calendar-change', (e) => {
+calendar.addEventListener('calendar-change', (e) => {
   checkAvailability(e.detail.value).then(slots => {
     if (slots.length > 0) {
       showTimeSlots(slots);
@@ -355,7 +355,7 @@ calendar.events = vacations.map(v => ({
 calendar.disabledDates = companyHolidays;
 
 // Request new vacation
-calendar.addEventListener('@snice/calendar-change', (e) => {
+calendar.addEventListener('calendar-change', (e) => {
   if (canRequestVacation(e.detail.value)) {
     showVacationRequestForm(e.detail.value);
   }

package/docs/components/camera.md

@@ -30,7 +30,8 @@ Live camera feed with built-in mobile-style controls and flexible positioning.
 | `showControls` | `boolean` | `true` | Show built-in controls |
 | `width` | `number` | `1280` | Video width (resolution) |
 | `height` | `number` | `720` | Video height (resolution) |
-| `aspectRatio` | `string` | `''` | Aspect ratio: `'16:9'`, `'4:3'`, `'1:1'`, `'21:9'` |
+| `aspectRatio` | `string` | `''` | Aspect ratio: `'16:9'`, `'9:16'`, `'4:3'`, `'1:1'`, `'21:9'` |
+| `objectFit` | `'contain' \| 'cover'` | `'contain'` | How video fits container: `contain` (full video) or `cover` (fills frame, may crop) |
 
 ## Control Positions
 
@@ -118,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);
 });
 ```
@@ -222,6 +223,9 @@ Auto-starts camera with controls at bottom-right (portrait) or right (landscape)
 <!-- 16:9 widescreen -->
 <snice-camera aspect-ratio="16:9"></snice-camera>
 
+<!-- 9:16 portrait -->
+<snice-camera aspect-ratio="9:16" width="720" height="1280"></snice-camera>
+
 <!-- 4:3 classic -->
 <snice-camera aspect-ratio="4:3"></snice-camera>
 
@@ -232,6 +236,25 @@ Auto-starts camera with controls at bottom-right (portrait) or right (landscape)
 <snice-camera aspect-ratio="21:9"></snice-camera>
 ```
 
+### Object Fit Modes
+
+```html
+<!-- Contain (default) - Shows full video with possible letterboxing -->
+<snice-camera object-fit="contain"></snice-camera>
+
+<!-- Cover - Fills entire container, may crop video -->
+<snice-camera object-fit="cover"></snice-camera>
+
+<!-- Portrait with cover for full-screen mobile -->
+<snice-camera
+  aspect-ratio="9:16"
+  object-fit="cover"
+  width="720"
+  height="1280"
+  style="height: 100vh;">
+</snice-camera>
+```
+
 ### Fullscreen
 
 ```html
@@ -263,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

@@ -54,8 +54,8 @@ controller.attach?.(document.body);
 | `allowPause` | `boolean` | `true` | Allow pause/resume of uploads |
 | `allowDelete` | `boolean` | `true` | Allow file deletion |
 | `autoUpload` | `boolean` | `true` | Start upload immediately on file add |
-| `showAddButton` | `boolean` | `false` | Show add button tile instead of drop zone |
-| `hideAddButton` | `boolean` | `false` | Hide default add button (only show custom actions) |
+| `showDropzone` | `boolean` | `true` | Show drop zone for drag & drop uploads |
+| `showAddButton` | `boolean` | `false` | Show add button tile in gallery |
 | `files` | `GalleryFile[]` | `[]` | Current files (read-only) |
 
 ## Methods
@@ -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);
 });
 ```
@@ -498,8 +498,9 @@ async function uploadAll() {
 ### Add Button Mode
 
 ```html
-<!-- Instead of drop zone, shows a plus tile in the gallery -->
+<!-- Hide drop zone and show plus tile in gallery instead -->
 <snice-file-gallery
+  show-dropzone="false"
   show-add-button="true"
   max-files="6"
 ></snice-file-gallery>
@@ -513,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>
@@ -573,7 +574,7 @@ function clearAll() {
 Use badges to show user avatars on files in collaborative scenarios:
 
 ```html
-<snice-file-gallery id="collab-gallery" show-add-button="true"></snice-file-gallery>
+<snice-file-gallery id="collab-gallery" show-dropzone="false" show-add-button="true"></snice-file-gallery>
 
 <script>
 const gallery = document.getElementById('collab-gallery');
@@ -585,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) => {
@@ -615,7 +616,7 @@ gallery.addEventListener('@snice/files-change', (e) => {
 ### Custom Action Buttons
 
 ```html
-<snice-file-gallery id="gallery" show-add-button="true"></snice-file-gallery>
+<snice-file-gallery id="gallery" show-dropzone="false" show-add-button="true"></snice-file-gallery>
 
 <script>
 const gallery = document.getElementById('gallery');
@@ -629,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>