snice 1.14.3 → 2.1.0

package/components/chip/snice-chip.css

@@ -0,0 +1,195 @@
+: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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,233 @@
+# 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+