snice 2.1.5 → 2.2.0

package/components/chip/snice-chip.css

@@ -1,195 +0,0 @@
-:host {
-  display: inline-block;
-  --chip-height: 2rem; /* 32px */
-  --chip-padding: 0 0.75rem; /* 0 12px */
-  --chip-font-size: 0.875rem; /* 14px */
-  --chip-border-radius: 16px;
-}
-
-.chip {
-  display: inline-flex;
-  align-items: center;
-  height: var(--chip-height);
-  padding: var(--chip-padding);
-  border-radius: var(--chip-border-radius);
-  font-size: var(--chip-font-size);
-  font-weight: 500;
-  cursor: pointer;
-  user-select: none;
-  transition: box-shadow 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
-  position: relative;
-  gap: 0.375rem; /* 6px */
-  white-space: nowrap;
-  outline: none;
-}
-
-.chip:focus-visible {
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
-}
-
-.chip[aria-disabled="true"] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Sizes */
-:host([size="small"]) {
-  --chip-height: 24px;
-  --chip-padding: 0 8px;
-  --chip-font-size: 12px;
-  --chip-border-radius: 12px;
-}
-
-:host([size="large"]) {
-  --chip-height: 40px;
-  --chip-padding: 0 16px;
-  --chip-font-size: 16px;
-  --chip-border-radius: 20px;
-}
-
-/* Variants */
-:host([variant="default"]) .chip,
-:host(:not([variant])) .chip {
-  background: #f3f4f6;
-  color: #374151;
-}
-
-:host([variant="default"]) .chip:hover:not([aria-disabled="true"]):not(.chip--selected),
-:host(:not([variant])) .chip:hover:not([aria-disabled="true"]):not(.chip--selected) {
-  background: #e5e7eb;
-}
-
-:host([variant="default"]) .chip--selected,
-:host(:not([variant])) .chip--selected {
-  background: #374151;
-  color: white;
-  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
-}
-
-:host([variant="primary"]) .chip {
-  background: #dbeafe;
-  color: #1e40af;
-}
-
-:host([variant="primary"]) .chip:hover:not([aria-disabled="true"]):not(.chip--selected) {
-  background: #bfdbfe;
-}
-
-:host([variant="primary"]) .chip--selected {
-  background: #3b82f6;
-  color: white;
-  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
-}
-
-:host([variant="success"]) .chip {
-  background: #d1fae5;
-  color: #065f46;
-}
-
-:host([variant="success"]) .chip:hover:not([aria-disabled="true"]):not(.chip--selected) {
-  background: #a7f3d0;
-}
-
-:host([variant="success"]) .chip--selected {
-  background: #10b981;
-  color: white;
-  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
-}
-
-:host([variant="warning"]) .chip {
-  background: #fed7aa;
-  color: #92400e;
-}
-
-:host([variant="warning"]) .chip:hover:not([aria-disabled="true"]):not(.chip--selected) {
-  background: #fde68a;
-}
-
-:host([variant="warning"]) .chip--selected {
-  background: #f59e0b;
-  color: white;
-  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
-}
-
-:host([variant="error"]) .chip {
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-:host([variant="error"]) .chip:hover:not([aria-disabled="true"]):not(.chip--selected) {
-  background: #fecaca;
-}
-
-:host([variant="error"]) .chip--selected {
-  background: #ef4444;
-  color: white;
-  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
-}
-
-:host([variant="info"]) .chip {
-  background: #e0e7ff;
-  color: #3730a3;
-}
-
-:host([variant="info"]) .chip:hover:not([aria-disabled="true"]):not(.chip--selected) {
-  background: #c7d2fe;
-}
-
-:host([variant="info"]) .chip--selected {
-  background: #6366f1;
-  color: white;
-  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
-}
-
-/* Avatar */
-.chip-avatar {
-  width: calc(var(--chip-height) - 8px);
-  height: calc(var(--chip-height) - 8px);
-  border-radius: 50%;
-  object-fit: cover;
-  margin-left: -6px;
-}
-
-/* Icon */
-.chip-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  margin-left: -4px;
-}
-
-/* Label */
-.chip-label {
-  flex: 1;
-  line-height: 1;
-}
-
-/* Remove button */
-.chip-remove {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  margin-right: -6px;
-  margin-left: 4px;
-  padding: 0;
-  background: none;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  opacity: 0.7;
-  transition: opacity 0.2s ease;
-  color: inherit;
-}
-
-.chip-remove:hover {
-  opacity: 1;
-}
-
-.chip-remove svg {
-  width: 12px;
-  height: 12px;
-}

package/components/chip/snice-chip.ts

@@ -1,139 +0,0 @@
-import { element, property, watch, query, on, dispatch } from 'snice';
-import css from './snice-chip.css?inline';
-import type { ChipVariant, ChipSize, SniceChipElement } from './snice-chip.types';
-
-@element('snice-chip')
-export class SniceChip extends HTMLElement implements SniceChipElement {
-  @property({ reflect: true })
-  label = '';
-
-  @property({ reflect: true })
-  variant: ChipVariant = 'default';
-
-  @property({ reflect: true })
-  size: ChipSize = 'medium';
-
-  @property({ type: Boolean, reflect: true })
-  removable = false;
-
-  @property({ type: Boolean, reflect: true })
-  selected = false;
-
-  @property({ type: Boolean, reflect: true })
-  disabled = false;
-
-  @property({ reflect: true })
-  icon = '';
-
-  @property({ reflect: true })
-  avatar = '';
-
-  @query('.chip')
-  chipElement?: HTMLElement;
-
-  @query('.chip-remove')
-  removeButton?: HTMLButtonElement;
-
-  html() {
-    return /*html*/`
-      <div class="chip ${this.selected ? 'chip--selected' : ''}" 
-           role="${this.removable ? 'button' : 'status'}"
-           tabindex="${this.disabled ? '-1' : '0'}"
-           aria-disabled="${this.disabled}"
-           aria-selected="${this.selected}">
-        ${this.avatar ? /*html*/`
-          <img class="chip-avatar" src="${this.avatar}" alt="">
-        ` : this.icon ? /*html*/`
-          <span class="chip-icon">${this.icon}</span>
-        ` : ''}
-        <span class="chip-label">${this.label}</span>
-        ${this.removable && !this.disabled ? /*html*/`
-          <button class="chip-remove" 
-                  type="button" 
-                  tabindex="-1"
-                  aria-label="Remove ${this.label}">
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
-              <path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"/>
-            </svg>
-          </button>
-        ` : ''}
-      </div>
-    `;
-  }
-
-  css() {
-    return css;
-  }
-
-  @on('click', '.chip')
-  @dispatch('chip-click')
-  handleClick(event: MouseEvent) {
-    if (this.disabled) return;
-    if ((event.target as HTMLElement).closest('.chip-remove')) return;
-    
-    if (!this.removable) {
-      this.selected = !this.selected;
-    }
-    
-    return { 
-      label: this.label,
-      selected: this.selected 
-    };
-  }
-
-  @on('click', '.chip-remove')
-  @dispatch('chip-remove')
-  handleRemove(event: MouseEvent) {
-    event.stopPropagation();
-    if (this.disabled) return;
-    
-    return { label: this.label };
-  }
-
-  @on(['keydown:Enter', 'keydown:Space'], '.chip')
-  handleKeyPress(event: KeyboardEvent) {
-    event.preventDefault();
-    if (this.disabled) return;
-    
-    if (!this.removable) {
-      this.selected = !this.selected;
-      this.dispatchChipClick();
-    }
-  }
-
-  @on(['keydown:Delete', 'keydown:Backspace'], '.chip')
-  handleDelete(event: KeyboardEvent) {
-    if (this.disabled || !this.removable) return;
-    event.preventDefault();
-    this.dispatchChipRemove();
-  }
-
-  @watch('selected')
-  updateSelected() {
-    if (this.chipElement) {
-      this.chipElement.classList.toggle('chip--selected', this.selected);
-      this.chipElement.setAttribute('aria-selected', String(this.selected));
-    }
-  }
-
-  @watch('disabled')
-  updateDisabled() {
-    if (this.chipElement) {
-      this.chipElement.setAttribute('aria-disabled', String(this.disabled));
-      this.chipElement.setAttribute('tabindex', this.disabled ? '-1' : '0');
-    }
-  }
-
-  @dispatch('chip-click')
-  private dispatchChipClick() {
-    return { 
-      label: this.label,
-      selected: this.selected 
-    };
-  }
-
-  @dispatch('chip-remove')
-  private dispatchChipRemove() {
-    return { label: this.label };
-  }
-}

package/components/chip/snice-chip.types.ts

@@ -1,15 +0,0 @@
-export type ChipVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
-export type ChipSize = 'small' | 'medium' | 'large';
-
-export interface SniceChipElement extends HTMLElement {
-  label: string;
-  variant: ChipVariant;
-  size: ChipSize;
-  removable: boolean;
-  selected: boolean;
-  disabled: boolean;
-  icon: string;
-  avatar: string;
-  onClick?: () => void;
-  onRemove?: () => void;
-}

package/components/date-picker/README.md

@@ -1,233 +0,0 @@
-# Snice Date Picker
-
-A comprehensive calendar-based date selection component built with Snice framework.
-
-## Features
-
-- ✅ **Calendar-based date selection** with month navigation
-- ✅ **Multiple date formats** (MM/DD/YYYY, DD/MM/YYYY, YYYY-MM-DD, etc.)
-- ✅ **Keyboard navigation** and accessibility support
-- ✅ **Min/max date constraints** for date range validation
-- ✅ **Multiple sizes** (small, medium, large) and variants (outlined, filled, underlined)
-- ✅ **Input validation** with custom error messages
-- ✅ **Clearable** with optional clear button
-- ✅ **Imperative API** for programmatic control
-- ✅ **Custom events** for integration with forms and controllers
-
-## Basic Usage
-
-```html
-<snice-date-picker 
-  label="Select Date" 
-  placeholder="Choose a date"
-  clearable>
-</snice-date-picker>
-```
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the component |
-| `variant` | `'outlined' \| 'filled' \| 'underlined'` | `'outlined'` | Visual style variant |
-| `value` | `string` | `''` | Current date value (in specified format) |
-| `format` | `'mm/dd/yyyy' \| 'dd/mm/yyyy' \| 'yyyy-mm-dd' \| etc.` | `'mm/dd/yyyy'` | Date display format |
-| `placeholder` | `string` | `''` | Input placeholder text |
-| `label` | `string` | `''` | Input label |
-| `helper-text` | `string` | `''` | Helper text below input |
-| `error-text` | `string` | `''` | Error message (shows when invalid=true) |
-| `disabled` | `boolean` | `false` | Disable the component |
-| `readonly` | `boolean` | `false` | Make input read-only |
-| `required` | `boolean` | `false` | Mark as required field |
-| `invalid` | `boolean` | `false` | Show error state |
-| `clearable` | `boolean` | `false` | Show clear button |
-| `min` | `string` | `''` | Minimum allowed date (YYYY-MM-DD) |
-| `max` | `string` | `''` | Maximum allowed date (YYYY-MM-DD) |
-| `name` | `string` | `''` | Form field name |
-| `first-day-of-week` | `number` | `0` | First day of week (0=Sunday, 1=Monday, etc.) |
-
-## Methods
-
-| Method | Parameters | Description |
-|--------|------------|-------------|
-| `focus()` | - | Focus the input field |
-| `blur()` | - | Blur the input field |
-| `clear()` | - | Clear the selected date |
-| `open()` | - | Open the calendar popup |
-| `close()` | - | Close the calendar popup |
-| `selectDate(date)` | `Date` | Select a specific date |
-| `goToMonth(year, month)` | `number, number` | Navigate to specific month |
-| `goToToday()` | - | Select today's date |
-| `checkValidity()` | - | Check if current value is valid |
-| `reportValidity()` | - | Report validity state |
-| `setCustomValidity(message)` | `string` | Set custom validation message |
-
-## Events
-
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `@snice/datepicker-change` | `{ value, date, formatted, iso, datePicker }` | Fired when date value changes |
-| `@snice/datepicker-input` | `{ value, datePicker }` | Fired on input changes |
-| `@snice/datepicker-select` | `{ date, formatted, iso, datePicker }` | Fired when date is selected from calendar |
-| `@snice/datepicker-focus` | `{ datePicker }` | Fired when input gains focus |
-| `@snice/datepicker-blur` | `{ datePicker }` | Fired when input loses focus |
-| `@snice/datepicker-open` | `{ datePicker }` | Fired when calendar opens |
-| `@snice/datepicker-close` | `{ datePicker }` | Fired when calendar closes |
-| `@snice/datepicker-clear` | `{ datePicker }` | Fired when date is cleared |
-
-## Examples
-
-### Different Formats
-
-```html
-<!-- US Format -->
-<snice-date-picker 
-  label="US Date" 
-  format="mm/dd/yyyy">
-</snice-date-picker>
-
-<!-- European Format -->
-<snice-date-picker 
-  label="European Date" 
-  format="dd/mm/yyyy">
-</snice-date-picker>
-
-<!-- ISO Format -->
-<snice-date-picker 
-  label="ISO Date" 
-  format="yyyy-mm-dd">
-</snice-date-picker>
-```
-
-### With Constraints
-
-```html
-<snice-date-picker 
-  label="Date Range" 
-  min="2024-01-01" 
-  max="2024-12-31"
-  helper-text="Select a date in 2024">
-</snice-date-picker>
-```
-
-### Different Sizes and Variants
-
-```html
-<!-- Small filled -->
-<snice-date-picker 
-  size="small" 
-  variant="filled" 
-  label="Small Date">
-</snice-date-picker>
-
-<!-- Large underlined -->
-<snice-date-picker 
-  size="large" 
-  variant="underlined" 
-  label="Large Date">
-</snice-date-picker>
-```
-
-### Form Integration
-
-```html
-<form>
-  <snice-date-picker 
-    name="startDate"
-    label="Start Date" 
-    required
-    min="2024-01-01">
-  </snice-date-picker>
-  
-  <snice-date-picker 
-    name="endDate"
-    label="End Date" 
-    required>
-  </snice-date-picker>
-</form>
-```
-
-### Event Handling
-
-```javascript
-// Listen for date changes
-document.addEventListener('@snice/datepicker-change', (e) => {
-  console.log('New date:', e.detail.date);
-  console.log('Formatted:', e.detail.formatted);
-  console.log('ISO:', e.detail.iso);
-});
-
-// Programmatic control
-const datePicker = document.querySelector('snice-date-picker');
-datePicker.selectDate(new Date(2024, 11, 25)); // Select Christmas
-datePicker.goToToday(); // Jump to today
-```
-
-### With Controllers
-
-```typescript
-import { controller, on } from 'snice';
-
-@controller('date-form')
-class DateFormController {
-  element!: HTMLElement;
-  
-  @on('@snice/datepicker-change')
-  handleDateChange(e: CustomEvent) {
-    const { date, formatted } = e.detail;
-    console.log(`Date changed to: ${formatted}`);
-    
-    // Validate date range, update other fields, etc.
-    this.validateDateRange();
-  }
-  
-  private validateDateRange() {
-    const startPicker = this.element.querySelector('[name="startDate"]');
-    const endPicker = this.element.querySelector('[name="endDate"]');
-    // Add validation logic
-  }
-}
-```
-
-## Accessibility
-
-The date picker includes comprehensive accessibility support:
-
-- **ARIA labels** for all interactive elements
-- **Keyboard navigation** (Tab, Enter, Escape, Arrow keys)
-- **Screen reader** announcements
-- **Focus management** within calendar
-- **Semantic HTML** structure
-
-## Keyboard Navigation
-
-| Key | Action |
-|-----|--------|
-| `Tab` | Navigate between elements |
-| `Enter` / `Space` | Open calendar or select date |
-| `Escape` | Close calendar |
-| `Arrow Keys` | Navigate calendar days |
-| `Page Up/Down` | Navigate months |
-| `Home/End` | Go to start/end of week |
-
-## Customization
-
-The component uses CSS custom properties for easy theming:
-
-```css
-snice-date-picker {
-  --border-color: #e5e7eb;
-  --focus-color: #2563eb;
-  --background: white;
-  --text-color: #374151;
-  --error-color: #ef4444;
-}
-```
-
-## Browser Support
-
-- ✅ Chrome/Edge 88+
-- ✅ Firefox 87+
-- ✅ Safari 14+
-- ✅ iOS Safari 14+
-- ✅ Chrome Android 88+