snice 1.13.1 → 1.13.3

package/bin/templates/base/README.md

@@ -30,4 +30,4 @@ npm run preview
 - `src/router.ts` - Router configuration
 - `src/main.ts` - Application entry point
 
-Built with [Snice](https://github.com/yourusername/snice)
+Built with [Snice](https://gitlab.com/Hedzer/snice)

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+

package/components/layout/README.md

@@ -0,0 +1,260 @@
+# Layout Components
+
+A collection of layout components for structuring web applications.
+
+## Components
+
+### snice-layout
+Basic layout with header, main content, and footer areas.
+
+```html
+<snice-layout>
+  <div slot="brand"><h1>My App</h1></div>
+  <nav slot="nav">
+    <a href="/">Home</a>
+    <a href="/about">About</a>
+  </nav>
+  
+  <!-- Main content -->
+  <div>
+    <h1>Welcome</h1>
+    <p>This is the main content area.</p>
+  </div>
+  
+  <div slot="footer">
+    <p>&copy; 2024 My Company</p>
+  </div>
+</snice-layout>
+```
+
+### snice-layout-sidebar
+Layout with collapsible sidebar navigation.
+
+```html
+<snice-layout-sidebar>
+  <div slot="brand"><h2>Dashboard</h2></div>
+  <nav slot="nav">
+    <a href="/dashboard">Overview</a>
+    <a href="/users">Users</a>
+    <a href="/settings">Settings</a>
+  </nav>
+  <div slot="header">
+    <h1>Page Title</h1>
+  </div>
+  
+  <!-- Main content -->
+  <div>
+    <p>Dashboard content goes here</p>
+  </div>
+</snice-layout-sidebar>
+```
+
+### snice-layout-minimal
+Clean layout with just content area.
+
+```html
+<snice-layout-minimal>
+  <div>
+    <h1>Simple Page</h1>
+    <p>Minimal layout for focused content.</p>
+  </div>
+</snice-layout-minimal>
+```
+
+### snice-layout-centered
+Centered container perfect for forms, authentication pages.
+
+```html
+<snice-layout-centered width="md">
+  <form>
+    <h2>Sign In</h2>
+    <input type="email" placeholder="Email">
+    <input type="password" placeholder="Password">
+    <button type="submit">Sign In</button>
+  </form>
+</snice-layout-centered>
+```
+
+#### Properties
+- `width`: Container width - `"sm"` | `"md"` | `"lg"` | `"xl"` (default: `"md"`)
+
+### snice-layout-landing
+Marketing/landing page layout with hero section.
+
+```html
+<snice-layout-landing>
+  <div slot="brand"><h1>Company</h1></div>
+  <nav slot="nav">
+    <a href="#features">Features</a>
+    <a href="#pricing">Pricing</a>
+  </nav>
+  <button slot="cta">Get Started</button>
+  
+  <div slot="hero">
+    <h1>Amazing Product</h1>
+    <p>Transform your business today</p>
+  </div>
+  
+  <!-- Main content sections -->
+  <section>
+    <h2>Features</h2>
+    <p>Feature content...</p>
+  </section>
+</snice-layout-landing>
+```
+
+### snice-layout-split
+Two-panel layout with configurable split ratios.
+
+```html
+<snice-layout-split direction="horizontal" ratio="60-40">
+  <div slot="left">
+    <h2>Left Panel</h2>
+    <p>Content for left side</p>
+  </div>
+  <div slot="right">
+    <h2>Right Panel</h2>
+    <p>Content for right side</p>
+  </div>
+</snice-layout-split>
+```
+
+#### Properties
+- `direction`: Split direction - `"horizontal"` | `"vertical"` (default: `"horizontal"`)
+- `ratio`: Panel size ratio - `"50-50"` | `"60-40"` | `"70-30"` | `"33-67"` | `"67-33"` (default: `"50-50"`)
+
+### snice-layout-card
+Grid layout optimized for card-based content.
+
+```html
+<snice-layout-card columns="3" gap="lg">
+  <div slot="header">
+    <h1>Product Gallery</h1>
+  </div>
+  
+  <!-- Cards go in main slot -->
+  <div class="card">Product 1</div>
+  <div class="card">Product 2</div>
+  <div class="card">Product 3</div>
+</snice-layout-card>
+```
+
+#### Properties
+- `columns`: Number of columns - `"1"` | `"2"` | `"3"` | `"4"` | `"6"` (default: `"3"`)
+- `gap`: Grid gap size - `"sm"` | `"md"` | `"lg"` | `"xl"` (default: `"md"`)
+
+### snice-layout-blog
+Article layout with sidebar for additional content.
+
+```html
+<snice-layout-blog>
+  <div slot="brand"><h1>My Blog</h1></div>
+  <nav slot="nav">
+    <a href="/">Home</a>
+    <a href="/archive">Archive</a>
+  </nav>
+  
+  <!-- Article content -->
+  <article>
+    <h1>Blog Post Title</h1>
+    <p>Article content goes here...</p>
+  </article>
+  
+  <div slot="sidebar">
+    <h3>Recent Posts</h3>
+    <ul>
+      <li><a href="/post1">Post 1</a></li>
+      <li><a href="/post2">Post 2</a></li>
+    </ul>
+  </div>
+</snice-layout-blog>
+```
+
+### snice-layout-dashboard
+Complex dashboard layout with multiple content areas.
+
+```html
+<snice-layout-dashboard>
+  <div slot="brand"><h1>Analytics</h1></div>
+  <input slot="search" type="search" placeholder="Search...">
+  <div slot="user">Welcome, John!</div>
+  
+  <nav slot="nav">
+    <a href="/dashboard">Overview</a>
+    <a href="/analytics">Analytics</a>
+  </nav>
+  
+  <div slot="sidebar">
+    <h3>Quick Actions</h3>
+    <button>New Report</button>
+  </div>
+  
+  <!-- Main dashboard content -->
+  <div>
+    <h2>Dashboard Overview</h2>
+    <div class="metrics">...</div>
+  </div>
+  
+  <div slot="right-sidebar">
+    <h3>Recent Activity</h3>
+    <ul>...</ul>
+  </div>
+</snice-layout-dashboard>
+```
+
+### snice-layout-fullscreen
+Immersive fullscreen layout for presentations, media viewers.
+
+```html
+<snice-layout-fullscreen overlay>
+  <img slot="background" src="background.jpg" alt="Background">
+  
+  <div slot="overlay">
+    <h1>Overlay Content</h1>
+  </div>
+  
+  <!-- Main fullscreen content -->
+  <div>
+    <h2>Centered Content</h2>
+  </div>
+  
+  <div slot="controls">
+    <button>Play</button>
+    <button>Pause</button>
+    <button>Fullscreen</button>
+  </div>
+</snice-layout-fullscreen>
+```
+
+#### Properties
+- `overlay`: Show overlay background - `boolean` (default: `false`)
+
+## Styling
+
+All layout components use the Snice design system CSS custom properties for consistent theming. You can override these variables to customize the appearance:
+
+```css
+:root {
+  --snice-color-primary: #your-primary-color;
+  --snice-color-background: #your-background-color;
+  --snice-spacing-md: your-spacing-value;
+  /* ... other theme variables */
+}
+```
+
+## Responsive Design
+
+All layouts include responsive breakpoints and will adapt to mobile devices automatically. Most layouts stack vertically on small screens for optimal mobile experience.
+
+## Events
+
+Layout components are structural and don't emit custom events. However, you can listen for standard DOM events on slotted content:
+
+```javascript
+document.querySelector('snice-layout-sidebar')
+  .addEventListener('click', (e) => {
+    if (e.target.matches('.sidebar-toggle')) {
+      // Handle sidebar toggle
+    }
+  });
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snice",
-  "version": "1.13.1",
+  "version": "1.13.3",
   "type": "module",
   "description": "Imperative TypeScript framework for building vanilla web components with decorators, routing, and controllers. No virtual DOM, no build complexity.",
   "main": "src/index.ts",
@@ -14,6 +14,7 @@
     "components",
     "bin",
     "templates",
+    "README.md",
     "!src/**/*.test.ts",
     "!src/**/*.spec.ts",
     "!components/**/*.test.ts",

package/src/element.ts

@@ -805,6 +805,17 @@ export function dispose() {
 export function part(partName: string, options: PartOptions = {}) {
   return function (target: any, methodName: string, descriptor: PropertyDescriptor) {
     const constructor = target.constructor;
+
+    // Handle case where descriptor might be undefined (TypeScript experimental decorators)
+    if (!descriptor) {
+      descriptor = Object.getOwnPropertyDescriptor(target, methodName) || {
+        value: target[methodName],
+        writable: true,
+        enumerable: true,
+        configurable: true
+      };
+    }
+
     const originalMethod = descriptor.value;
     
     if (!constructor[PARTS]) {