@mhmo91/schmancy 0.2.194 → 0.2.196

package/dist/ai/circular-progress.md

@@ -0,0 +1,91 @@
+# Schmancy Circular Progress - AI Reference
+
+```js
+// Circular Progress Component
+<schmancy-circular-progress
+  size="xs|sm|md|lg|xl|{custom}"
+  indeterminate?>
+</schmancy-circular-progress>
+
+// Properties
+size: string          // "xs", "sm", "md", "lg", "xl", or custom size (default: "md")
+indeterminate: boolean // Whether the progress is indeterminate (default: false)
+
+// Size values
+"xs" = 16px
+"sm" = 24px
+"md" = 32px
+"lg" = 48px
+"xl" = 64px
+
+// Examples
+// 1. Basic medium progress
+<schmancy-circular-progress></schmancy-circular-progress>
+
+// 2. Large indeterminate progress
+<schmancy-circular-progress 
+  size="lg"
+  indeterminate>
+</schmancy-circular-progress>
+
+// 3. Custom size
+<schmancy-circular-progress size="100">
+</schmancy-circular-progress>
+
+// 4. Small progress indicator
+<schmancy-circular-progress size="xs">
+</schmancy-circular-progress>
+```
+
+## Related Components
+- **[Busy](./busy.md)**: Parent component providing spinner functionality
+- **[Button](./button.md)**: Often used with buttons to show loading state
+
+## Technical Details
+
+### Implementation
+- Internally uses `<schmancy-spinner>` component
+- Size can be predefined string or custom CSS value
+- Numeric values are converted to pixels
+- Reflects indeterminate attribute to host element
+
+### CSS Custom Properties
+The component inherits spinner styling from the busy component.
+
+## Common Use Cases
+
+1. **Loading Buttons**: Show progress inside buttons
+   ```html
+   <schmancy-button disabled>
+     <schmancy-circular-progress size="sm"></schmancy-circular-progress>
+     Processing...
+   </schmancy-button>
+   ```
+
+2. **Page Loading**: Full-page loading indicator
+   ```html
+   <div class="loading-overlay">
+     <schmancy-circular-progress 
+       size="xl" 
+       indeterminate>
+     </schmancy-circular-progress>
+   </div>
+   ```
+
+3. **Inline Loading**: Small indicators in lists or tables
+   ```html
+   <td>
+     <schmancy-circular-progress size="xs"></schmancy-circular-progress>
+     Loading data...
+   </td>
+   ```
+
+4. **Card Loading State**: Centered in content areas
+   ```html
+   <schmancy-card>
+     <div class="centered">
+       <schmancy-circular-progress size="lg"></schmancy-circular-progress>
+       <p>Fetching results...</p>
+     </div>
+   </schmancy-card>
+   ```

package/dist/ai/content-drawer.md

@@ -0,0 +1,190 @@
+# Content Drawer
+
+Sliding panel system for navigation, overlays, and responsive layouts.
+
+## Components
+
+```js
+// Main container that manages drawer behavior
+<schmancy-content-drawer
+  ?open="${boolean}"           // Controls drawer visibility
+  position="left|right|top|bottom"  // Drawer position (default: left)
+  variant="standard|modal|persistent"  // Behavior type
+  breakpoint="1024px"          // Responsive breakpoint
+  ?backdrop="${boolean}"       // Show backdrop when open
+>
+  <schmancy-content-drawer-main>
+    // Main content that shifts when drawer opens
+  </schmancy-content-drawer-main>
+  
+  <schmancy-content-drawer-sheet
+    width="256px"              // Width for left/right drawers
+    height="auto"              // Height for top/bottom drawers
+    offset="0"                 // Offset for nested drawers
+  >
+    // Drawer content
+  </schmancy-content-drawer-sheet>
+</schmancy-content-drawer>
+```
+
+## Context API
+
+```js
+import { contentDrawerContext } from '@schmancy/content-drawer'
+
+// Create drawer controller
+const drawer = contentDrawerContext.create('drawer-id')
+
+// Control methods
+drawer.open()
+drawer.close() 
+drawer.toggle()
+drawer.lock()      // Prevent closing
+drawer.unlock()
+drawer.setPersistent(boolean)
+
+// State access
+drawer.isOpen -> boolean
+drawer.state$ -> Observable<DrawerState>
+
+// Events
+@drawer-opened
+@drawer-closed
+@drawer-toggled -> { open: boolean }
+@before-open
+@before-close
+```
+
+## Examples
+
+### 1. Basic Navigation Drawer
+```html
+<schmancy-content-drawer ?open="${drawerOpen}">
+  <schmancy-content-drawer-main>
+    <button @click="${() => drawerOpen = !drawerOpen}">Menu</button>
+    <main>App content</main>
+  </schmancy-content-drawer-main>
+  
+  <schmancy-content-drawer-sheet width="280px">
+    <nav>
+      <a href="/home">Home</a>
+      <a href="/about">About</a>
+    </nav>
+  </schmancy-content-drawer-sheet>
+</schmancy-content-drawer>
+```
+
+### 2. Bottom Sheet
+```html
+<schmancy-content-drawer 
+  ?open="${sheetOpen}"
+  position="bottom"
+  @drawer-closed="${() => sheetOpen = false}"
+>
+  <schmancy-content-drawer-main>
+    <button @click="${() => sheetOpen = true}">Show Options</button>
+  </schmancy-content-drawer-main>
+  
+  <schmancy-content-drawer-sheet height="auto" max-height="50vh">
+    <div class="sheet-handle"></div>
+    <h3>Select Option</h3>
+    <schmancy-list>
+      <schmancy-list-item>Option 1</schmancy-list-item>
+      <schmancy-list-item>Option 2</schmancy-list-item>
+    </schmancy-list>
+  </schmancy-content-drawer-sheet>
+</schmancy-content-drawer>
+```
+
+### 3. Persistent Sidebar
+```js
+// Responsive persistent drawer
+const drawer = contentDrawerContext.create('sidebar')
+
+// Auto-persist on large screens
+const mediaQuery = window.matchMedia('(min-width: 1024px)')
+drawer.setPersistent(mediaQuery.matches)
+mediaQuery.addEventListener('change', e => drawer.setPersistent(e.matches))
+```
+
+```html
+<schmancy-content-drawer
+  .context="${drawer}"
+  variant="persistent"
+  breakpoint="1024px"
+>
+  <schmancy-content-drawer-main>
+    <schmancy-app-bar>
+      <schmancy-icon-button 
+        icon="menu"
+        @click="${() => drawer.toggle()}"
+      ></schmancy-icon-button>
+    </schmancy-app-bar>
+    <main>Dashboard content</main>
+  </schmancy-content-drawer-main>
+  
+  <schmancy-content-drawer-sheet width="240px">
+    <aside>Sidebar content</aside>
+  </schmancy-content-drawer-sheet>
+</schmancy-content-drawer>
+```
+
+### 4. Nested Drawers
+```js
+const mainDrawer = contentDrawerContext.create('main')
+const subDrawer = contentDrawerContext.create('sub')
+```
+
+```html
+<schmancy-content-drawer .context="${mainDrawer}">
+  <schmancy-content-drawer-main>
+    <!-- Nested drawer container -->
+    <schmancy-content-drawer .context="${subDrawer}">
+      <schmancy-content-drawer-main>
+        <button @click="${() => mainDrawer.open()}">Menu</button>
+      </schmancy-content-drawer-main>
+      
+      <!-- Sub drawer -->
+      <schmancy-content-drawer-sheet width="280px" offset="240px">
+        <button @click="${() => subDrawer.close()}">Back</button>
+        <div>Sub menu content</div>
+      </schmancy-content-drawer-sheet>
+    </schmancy-content-drawer>
+  </schmancy-content-drawer-main>
+  
+  <!-- Main drawer -->
+  <schmancy-content-drawer-sheet width="240px">
+    <button @click="${() => subDrawer.open()}">Open Submenu</button>
+    <div>Main menu content</div>
+  </schmancy-content-drawer-sheet>
+</schmancy-content-drawer>
+```
+
+## CSS Variables
+
+```css
+schmancy-content-drawer {
+  --drawer-width: 256px;
+  --drawer-background: var(--md-sys-color-surface);
+  --drawer-shadow: 0 8px 10px -5px rgba(0,0,0,0.2);
+  --drawer-transition-duration: 250ms;
+  --drawer-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+  --backdrop-color: rgba(0, 0, 0, 0.5);
+  --drawer-z-index: 200;
+}
+```
+
+## Related Components
+
+- [Sheet](./sheet.md) - Simpler sheet component for modals
+- [Navigation Drawer](./nav-drawer.md) - Specialized navigation component
+- [Dialog](./dialog.md) - Modal dialogs
+- [Layout](./layout.md) - Layout utilities
+
+## Common Patterns
+
+**Command Palette**: Top drawer with search input
+**Help Panel**: Right drawer with contextual help
+**Mobile Menu**: Left drawer for navigation
+**Action Sheet**: Bottom drawer for mobile actions
+**Settings Panel**: Persistent right drawer

package/dist/ai/date-range.md

@@ -0,0 +1,142 @@
+# Date Range Component
+
+A sophisticated date range selector that supports both date and datetime selection with presets, manual input, and intelligent range navigation.
+
+## Quick Start
+
+```html
+<!-- Basic date range selector -->
+<schmancy-date-range 
+  .dateFrom="${{ label: 'Start', value: '2024-01-01' }}"
+  .dateTo="${{ label: 'End', value: '2024-12-31' }}"
+></schmancy-date-range>
+
+<!-- DateTime selector with custom presets -->
+<schmancy-date-range 
+  type="datetime-local"
+  .customPresets="${[
+    { label: 'Last Sprint', dateFrom: '2024-01-01', dateTo: '2024-01-14' }
+  ]}"
+></schmancy-date-range>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `type` | `'date' \| 'datetime-local'` | `'date'` | Date input type |
+| `dateFrom` | `{ label: string, value: string }` | `{ label: 'From', value: '' }` | Start date configuration |
+| `dateTo` | `{ label: string, value: string }` | `{ label: 'To', value: '' }` | End date configuration |
+| `minDate` | `string` | - | Minimum selectable date |
+| `maxDate` | `string` | - | Maximum selectable date |
+| `customPresets` | `Array<{ label, dateFrom, dateTo }>` | `[]` | Custom preset ranges |
+| `format` | `string` | - | Date format (defaults based on type) |
+| `disabled` | `boolean` | `false` | Disable the component |
+| `required` | `boolean` | `false` | Mark as required field |
+| `placeholder` | `string` | `'Select date range'` | Placeholder text |
+| `clearable` | `boolean` | `true` | Show clear button |
+
+## Events
+
+### change
+Fired when date range changes.
+
+```typescript
+interface DateRangeChangeEvent {
+  detail: {
+    dateFrom: string;
+    dateTo: string;
+  }
+}
+```
+
+## Examples
+
+### With Form Integration
+```html
+<schmancy-form>
+  <schmancy-date-range
+    name="project-timeline"
+    required
+    .dateFrom="${{ label: 'Project Start', value: '' }}"
+    .dateTo="${{ label: 'Project End', value: '' }}"
+    @change="${(e) => console.log('Timeline:', e.detail)}"
+  ></schmancy-date-range>
+</schmancy-form>
+```
+
+### Analytics Dashboard
+```html
+<!-- Date range for analytics with custom presets -->
+<schmancy-date-range
+  .customPresets="${[
+    { label: 'Holiday Season', dateFrom: '2023-11-24', dateTo: '2024-01-02' },
+    { label: 'Q4 2023', dateFrom: '2023-10-01', dateTo: '2023-12-31' }
+  ]}"
+  @change="${updateAnalytics}"
+></schmancy-date-range>
+```
+
+### DateTime Range for Events
+```html
+<schmancy-date-range
+  type="datetime-local"
+  .dateFrom="${{ label: 'Event Start', value: '2024-03-15T09:00' }}"
+  .dateTo="${{ label: 'Event End', value: '2024-03-15T17:00' }}"
+  minDate="2024-01-01T00:00"
+></schmancy-date-range>
+```
+
+## Features
+
+### Built-in Presets
+The component includes intelligent preset categories:
+- **Days**: Today, Yesterday, Last 7/30/90 Days
+- **Weeks**: This Week, Last Week
+- **Months**: This Month, Last Month
+- **Quarters**: This Quarter, Last Quarter
+- **Years**: This Year, Last Year, Year to Date
+- **Hours** (datetime-local): Last 12/24 Hours
+
+### Smart Navigation
+- Arrow buttons shift ranges intelligently based on duration
+- Maintains full period boundaries (weeks, months, quarters)
+- Automatically detects and preserves preset selections
+
+### Responsive Dropdown
+- Floating UI positioning with automatic adjustments
+- Categorized preset display
+- Manual date inputs with validation
+
+## Styling
+
+The component uses semantic color tokens and supports theming:
+
+```css
+schmancy-date-range {
+  --animation-duration: 200ms;
+  --dropdown-min-width: 16rem;
+  --dropdown-max-width: 24rem;
+}
+```
+
+## Accessibility
+
+- Full keyboard navigation support
+- ARIA labels and roles
+- Focus management
+- Screen reader announcements
+
+## Related Components
+
+- [Input](./input.md) - For single date inputs
+- [Form](./form.md) - Form integration
+- [Button](./button.md) - Used for triggers and actions
+- [Surface](./surface.md) - Dropdown container
+
+## Best Practices
+
+1. **Validation**: Always validate date ranges on the backend
+2. **Timezones**: Consider timezone handling for datetime-local inputs
+3. **Presets**: Add domain-specific presets for better UX
+4. **Loading States**: Show loading indicators when fetching data based on range changes

package/dist/ai/delay.md

@@ -0,0 +1,158 @@
+# Delay Component
+
+A utility component that delays the rendering of its content with sophisticated animation support and session-based memory.
+
+## Quick Start
+
+```html
+<!-- Basic delay -->
+<schmancy-delay delay="300">
+  <schmancy-card>Welcome!</schmancy-card>
+</schmancy-delay>
+
+<!-- Staggered delays for list items -->
+<div>
+  <schmancy-delay delay="100">
+    <div>First item</div>
+  </schmancy-delay>
+  <schmancy-delay delay="100">
+    <div>Second item (200ms total)</div>
+  </schmancy-delay>
+  <schmancy-delay delay="100">
+    <div>Third item (300ms total)</div>
+  </schmancy-delay>
+</div>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `delay` | `number` | `0` | Delay in milliseconds |
+| `motion` | `string` | `'flyBelow'` | Animation type: 'flyBelow', 'flyAbove', or 'fadeIn' |
+| `once` | `boolean` | `true` | Only animate once per session |
+
+## Context Integration
+
+The component participates in a delay context system, allowing nested delays to accumulate:
+
+```html
+<!-- Parent provides 500ms base delay -->
+<schmancy-delay delay="500">
+  <div>
+    <!-- Child adds 200ms (700ms total) -->
+    <schmancy-delay delay="200">
+      <schmancy-card>Nested content</schmancy-card>
+    </schmancy-delay>
+  </div>
+</schmancy-delay>
+```
+
+## Examples
+
+### Hero Section Animation
+```html
+<schmancy-delay delay="0" motion="fadeIn">
+  <h1>Welcome to Our App</h1>
+</schmancy-delay>
+<schmancy-delay delay="300" motion="flyBelow">
+  <p>Discover amazing features</p>
+</schmancy-delay>
+<schmancy-delay delay="600" motion="flyBelow">
+  <schmancy-button variant="filled">Get Started</schmancy-button>
+</schmancy-delay>
+```
+
+### Staggered List Animation
+```html
+<schmancy-list>
+  ${items.map((item, index) => html`
+    <schmancy-delay delay="${index * 100}" motion="flyBelow">
+      <schmancy-list-item>
+        ${item.title}
+      </schmancy-list-item>
+    </schmancy-delay>
+  `)}
+</schmancy-list>
+```
+
+### Dashboard Cards
+```html
+<div class="grid grid-cols-3 gap-4">
+  <schmancy-delay delay="0">
+    <schmancy-card>
+      <h3>Total Sales</h3>
+      <p>$45,231</p>
+    </schmancy-card>
+  </schmancy-delay>
+  
+  <schmancy-delay delay="150">
+    <schmancy-card>
+      <h3>New Users</h3>
+      <p>1,234</p>
+    </schmancy-card>
+  </schmancy-delay>
+  
+  <schmancy-delay delay="300">
+    <schmancy-card>
+      <h3>Active Sessions</h3>
+      <p>892</p>
+    </schmancy-card>
+  </schmancy-delay>
+</div>
+```
+
+## Features
+
+### Session Memory
+When `once` is true, the component remembers if content has been shown and skips the delay on subsequent visits within the same session.
+
+### Intelligent Staggering
+Sibling delay components automatically accumulate delays, creating smooth staggered animations without manual calculation.
+
+### Motion Types
+- `flyBelow`: Content slides up from below with fade
+- `flyAbove`: Content slides down from above with fade
+- `fadeIn`: Simple opacity fade
+
+### Performance Optimized
+- Uses native Web Animations API
+- Cleans up observers on disconnect
+- Efficient session storage usage
+
+## Animation Customization
+
+The component uses Lit's `@lit-labs/motion` for animations:
+
+```typescript
+// Animation duration and easing are configurable
+${animate({
+  in: this.motionLit,
+  keyframeOptions: { 
+    duration: 300, 
+    easing: 'ease-out' 
+  }
+})}
+```
+
+## Best Practices
+
+1. **Performance**: Use reasonable delays (typically under 1000ms)
+2. **Accessibility**: Respect `prefers-reduced-motion`
+3. **UX**: Don't delay critical content
+4. **Staggering**: Keep increments small (50-150ms) for smooth effects
+
+## Related Components
+
+- [Animated Text](./animated-text.md) - For text-specific animations
+- [Typewriter](./typewriter.md) - For typing animations
+- [Card](./card.md) - Common content to delay
+- [List](./list.md) - For staggered list animations
+
+## Use Cases
+
+1. **Landing Pages**: Create engaging hero sections
+2. **Dashboards**: Stagger widget appearances
+3. **Onboarding**: Guide user attention
+4. **Data Loading**: Smooth transitions for async content
+5. **Navigation**: Animate route transitions

package/dist/ai/dialog.md

@@ -27,6 +27,7 @@ $dialog.confirm({
   confirmText?,
   cancelText?,
   variant?: "default"|"danger",
+  confirmColor?: "primary"|"error"|"warning"|"success",  // Button color for confirm action
   position?: {x,y}|MouseEvent|TouchEvent,
   width?: string,
   content?: TemplateResult|HTMLElement|Function,
@@ -85,6 +86,15 @@ const confirmed = await $dialog.confirm({
   position: event
 });
 
+// Confirmation with colored button
+const confirmed = await $dialog.confirm({
+  title: "Delete Transaction",
+  message: `Are you sure you want to delete this transaction of ${amount} units?`,
+  confirmText: "Delete",
+  cancelText: "Cancel",
+  confirmColor: "error",  // Makes confirm button red
+});
+
 // Dialog with custom content
 const result = await $dialog.component(html`
   <div>