@mhmo91/schmancy 0.4.77 → 0.4.79

package/ai/content-drawer.md

@@ -27,38 +27,71 @@ Sliding panel system for navigation, overlays, and responsive layouts.
 </schmancy-content-drawer>
 ```
 
-## Context API
+## Service API
 
 ```js
-import { contentDrawerContext } from '@schmancy/index'
-// Or specific import: 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
+import { schmancyContentDrawer } from '@schmancy/content-drawer'
+
+// NEW: Push API - Renders component with automatic re-rendering support
+schmancyContentDrawer.push(component)
+// component can be:
+// - string: 'demo-button' (tag name)
+// - HTMLElement: new DemoButton()
+// - Factory: () => new DemoButton()
+// - Async: () => import('./button').then(m => new m.default())
+
+// Legacy render API (backward compatible)
+schmancyContentDrawer.render(ref, component, title?)
+
+// Dismiss drawer
+schmancyContentDrawer.dimiss(ref)
+```
+
+### Push API Features
+
+The `push` API solves the re-rendering issue when the same component instance is pushed with updated properties:
+
+```js
+// Create a component instance
+const myComponent = new MyComponent()
+myComponent.variant = 'filled'
+
+// Push it to drawer
+schmancyContentDrawer.push(myComponent)
+
+// Later, update properties and push again
+myComponent.variant = 'outlined'
+schmancyContentDrawer.push(myComponent) // Automatically detects same instance and forces re-render
 ```
 
 ## Examples
 
-### 1. Basic Navigation Drawer
+### 1. Using Push API for Dynamic Content
+
+```js
+// Simple string component
+schmancyContentDrawer.push('demo-typography')
+
+// Component instance with properties
+const button = new DemoButton()
+button.variant = 'filled'
+schmancyContentDrawer.push(button)
+
+// Factory function for custom setup
+schmancyContentDrawer.push(() => {
+  const comp = new MyComponent()
+  comp.setAttribute('theme', 'dark')
+  return comp
+})
+
+// Async module loading
+schmancyContentDrawer.push(async () => {
+  const module = await import('./lazy-component')
+  return new module.default()
+})
+```
+
+### 2. Basic Navigation Drawer
 ```html
 <schmancy-content-drawer ?open="${drawerOpen}">
   <schmancy-content-drawer-main>

package/ai/icons.md

@@ -1,147 +1,248 @@
 # Schmancy Icons - AI Reference
 
-```js
-// Basic Icon
-<schmancy-icon
-  icon="icon-name"
-  size="small|medium|large|x-large"
-  color="primary|secondary|success|warning|danger|info|currentColor">
-</schmancy-icon>
-
-// Icon with custom size
-<schmancy-icon
-  icon="home"
-  size="24px">
-</schmancy-icon>
+Modern Material Symbols icon component with variable font properties for dynamic icon styling.
 
-// Icon with custom color
+```js
+// Component Tag
 <schmancy-icon
-  icon="star"
-  color="#f5a623">
+  fill="0-1"
+  weight="100-700"
+  grade="-50-200"
+  variant="outlined|rounded|sharp">
+  icon-name
 </schmancy-icon>
 
-// Icon Properties
-icon: string         // Icon name to display
-size: string         // Size: "small" (16px), "medium" (24px), "large" (32px), "x-large" (48px), or custom size
-color: string        // Color: semantic colors, CSS color values, or "currentColor"
-rotate: number       // Rotation in degrees
-flip: string         // Flip transformation: "horizontal", "vertical", "both"
-spin: boolean        // Apply a spinning animation
-clickable: boolean   // Make icon clickable with hover effects
-
-// Icon Events
-@click   // Fires when icon is clicked
-
-// Available Icons
-// The library includes a comprehensive set of icons. Some common ones:
-// - UI Actions: "add", "remove", "edit", "delete", "search", "close", "check", "menu"
-// - Navigation: "home", "back", "forward", "up", "down", "download", "upload"
-// - Communication: "mail", "chat", "phone", "notification", "share"
-// - Media: "play", "pause", "stop", "volume", "camera", "image"
-// - Objects: "file", "folder", "document", "calendar", "clock", "location"
-// - Social: "user", "group", "like", "star", "settings"
-// - Alerts: "info", "warning", "error", "success"
-// - Arrows: "arrow-up", "arrow-right", "arrow-down", "arrow-left"
-// - Chevrons: "chevron-up", "chevron-right", "chevron-down", "chevron-left"
-
 // Examples
-// Basic icon usage
-<schmancy-icon icon="home"></schmancy-icon>
-
-// Icons with different sizes
-<div>
-  <schmancy-icon icon="star" size="small"></schmancy-icon>
-  <schmancy-icon icon="star" size="medium"></schmancy-icon>
-  <schmancy-icon icon="star" size="large"></schmancy-icon>
-  <schmancy-icon icon="star" size="x-large"></schmancy-icon>
-  <schmancy-icon icon="star" size="64px"></schmancy-icon>
-</div>
+// 1. Basic icon (outlined style by default)
+<schmancy-icon>home</schmancy-icon>
+
+// 2. Filled vs Outlined
+<schmancy-icon fill="0">favorite</schmancy-icon>    // Outlined heart
+<schmancy-icon fill="1">favorite</schmancy-icon>    // Filled heart
+
+// 3. Icon weight variations
+<schmancy-icon weight="100">search</schmancy-icon>  // Thin
+<schmancy-icon weight="400">search</schmancy-icon>  // Regular (default)
+<schmancy-icon weight="700">search</schmancy-icon>  // Bold
+
+// 4. Icon variants
+<schmancy-icon variant="outlined">settings</schmancy-icon>  // Default
+<schmancy-icon variant="rounded">settings</schmancy-icon>   // Rounded style
+<schmancy-icon variant="sharp">settings</schmancy-icon>     // Sharp corners
+
+// 5. Grade variations (visual weight)
+<schmancy-icon grade="-25">notifications</schmancy-icon>  // Lighter
+<schmancy-icon grade="0">notifications</schmancy-icon>    // Normal (default)
+<schmancy-icon grade="200">notifications</schmancy-icon>  // Heavier
+
+// 6. Combined properties
+<schmancy-icon fill="1" weight="300" variant="rounded">
+  star
+</schmancy-icon>
 
-// Icons with different colors
-<div>
-  <schmancy-icon icon="info" color="info"></schmancy-icon>
-  <schmancy-icon icon="check" color="success"></schmancy-icon>
-  <schmancy-icon icon="warning" color="warning"></schmancy-icon>
-  <schmancy-icon icon="error" color="danger"></schmancy-icon>
-  <schmancy-icon icon="help" color="primary"></schmancy-icon>
-  <schmancy-icon icon="settings" color="secondary"></schmancy-icon>
-  <schmancy-icon icon="star" color="#f5a623"></schmancy-icon>
-</div>
+// 7. Icon sizing (via CSS)
+<schmancy-icon style="--schmancy-icon-size: 16px;">home</schmancy-icon>
+<schmancy-icon style="--schmancy-icon-size: 32px;">home</schmancy-icon>
+<schmancy-icon style="--schmancy-icon-size: 48px;">home</schmancy-icon>
 
-// Icon in a button
+// 8. Icons in buttons
 <schmancy-button>
-  <schmancy-icon slot="prefix" icon="download"></schmancy-icon>
+  <schmancy-icon slot="icon">download</schmancy-icon>
   Download
 </schmancy-button>
 
-<schmancy-icon-button icon="edit"></schmancy-icon-button>
+<schmancy-button variant="filled">
+  <schmancy-icon slot="icon" fill="1">add</schmancy-icon>
+  Add Item
+</schmancy-button>
+
+// 9. Icons in list items
+<schmancy-list-item>
+  <schmancy-icon slot="start">folder</schmancy-icon>
+  Documents
+</schmancy-list-item>
+
+<schmancy-list-item>
+  <schmancy-icon slot="start" fill="1">star</schmancy-icon>
+  Favorites
+</schmancy-list-item>
+
+// 10. Icon transitions (smooth property changes)
+<schmancy-icon
+  fill=${isLiked ? "1" : "0"}
+  weight=${isLiked ? "700" : "400"}>
+  favorite
+</schmancy-icon>
+
+// 11. Navigation icons
+<schmancy-navigation-rail>
+  <schmancy-icon slot="icon" fill=${activeTab === 'home' ? "1" : "0"}>
+    home
+  </schmancy-icon>
+  <schmancy-icon slot="icon" fill=${activeTab === 'search' ? "1" : "0"}>
+    search
+  </schmancy-icon>
+  <schmancy-icon slot="icon" fill=${activeTab === 'settings' ? "1" : "0"}>
+    settings
+  </schmancy-icon>
+</schmancy-navigation-rail>
 
-// Icon with rotation and flip
-<div>
-  <schmancy-icon icon="arrow-right" rotate="45"></schmancy-icon>
-  <schmancy-icon icon="arrow-right" rotate="90"></schmancy-icon>
-  <schmancy-icon icon="arrow-right" rotate="180"></schmancy-icon>
-  <schmancy-icon icon="arrow-right" rotate="270"></schmancy-icon>
-  <schmancy-icon icon="arrow-right" flip="horizontal"></schmancy-icon>
-  <schmancy-icon icon="arrow-right" flip="vertical"></schmancy-icon>
+// 12. Status indicators
+<div class="flex items-center gap-2">
+  <schmancy-icon fill="1" class="text-success">check_circle</schmancy-icon>
+  <span>Success</span>
 </div>
 
-// Spinning icon
-<schmancy-icon icon="refresh" spin></schmancy-icon>
+<div class="flex items-center gap-2">
+  <schmancy-icon fill="1" class="text-warning">warning</schmancy-icon>
+  <span>Warning</span>
+</div>
 
-// Loading state with icon
-<div>
-  <schmancy-icon icon="refresh" spin></schmancy-icon>
-  <span>Loading...</span>
+<div class="flex items-center gap-2">
+  <schmancy-icon fill="1" class="text-error">error</schmancy-icon>
+  <span>Error</span>
 </div>
 
-// Icon in form fields
+// 13. Form field icons
 <schmancy-input>
-  <schmancy-icon slot="prefix" icon="search"></schmancy-icon>
+  <schmancy-icon slot="prefix">search</schmancy-icon>
 </schmancy-input>
 
 <schmancy-input type="password">
-  <schmancy-icon 
-    slot="suffix" 
-    icon=${passwordVisible ? "eye-off" : "eye"}
-    clickable
-    @click=${togglePasswordVisibility}>
+  <schmancy-icon slot="suffix" fill=${showPassword ? "1" : "0"}>
+    ${showPassword ? 'visibility_off' : 'visibility'}
   </schmancy-icon>
 </schmancy-input>
 
-// Navigation menu with icons
-<schmancy-list interactive>
-  <schmancy-list-item>
-    <schmancy-icon slot="start" icon="home"></schmancy-icon>
-    Home
-  </schmancy-list-item>
-  <schmancy-list-item>
-    <schmancy-icon slot="start" icon="user"></schmancy-icon>
-    Profile
-  </schmancy-list-item>
-  <schmancy-list-item>
-    <schmancy-icon slot="start" icon="settings"></schmancy-icon>
-    Settings
-  </schmancy-list-item>
-  <schmancy-list-item>
-    <schmancy-icon slot="start" icon="help"></schmancy-icon>
-    Help
-  </schmancy-list-item>
-</schmancy-list>
-
-// Status indicators with icons
-<div>
-  <div style="display: flex; align-items: center; gap: 8px;">
-    <schmancy-icon icon="check-circle" color="success"></schmancy-icon>
-    <span>Completed</span>
-  </div>
-  <div style="display: flex; align-items: center; gap: 8px;">
-    <schmancy-icon icon="clock" color="warning"></schmancy-icon>
-    <span>Pending</span>
-  </div>
-  <div style="display: flex; align-items: center; gap: 8px;">
-    <schmancy-icon icon="x-circle" color="danger"></schmancy-icon>
-    <span>Failed</span>
-  </div>
-</div>
-```
+// 14. Animated icon state
+<schmancy-icon
+  @click=${() => this.toggleBookmark()}
+  fill=${this.isBookmarked ? "1" : "0"}
+  weight=${this.isBookmarked ? "700" : "400"}
+  style="cursor: pointer; transition: all 0.2s;">
+  bookmark
+</schmancy-icon>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `fill` | `number` | `0` | Fill value (0 = outlined, 1 = filled) |
+| `weight` | `number` | `400` | Stroke weight (100-700) |
+| `grade` | `number` | `0` | Visual grade/weight (-50 to 200) |
+| `variant` | `string` | `'outlined'` | Icon style variant: 'outlined', 'rounded', or 'sharp' |
+
+## CSS Custom Properties
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--schmancy-icon-size` | `24px` | Icon size |
+| `--schmancy-icon-fill` | `0` | Fill value |
+| `--schmancy-icon-weight` | `400` | Weight value |
+| `--schmancy-icon-grade` | `0` | Grade value |
+| `--schmancy-icon-opsz` | `24` | Optical size |
+
+## Material Symbols
+
+This component uses Google's Material Symbols variable font, which provides:
+- **3 variants**: Outlined, Rounded, Sharp
+- **Variable properties**: Continuously adjustable fill, weight, and grade
+- **2000+ icons**: Comprehensive icon library
+- **Smooth transitions**: Animated property changes
+- **Automatic font loading**: Fonts are loaded automatically when component is used
+
+## Icon Names
+
+Icons use Material Symbols naming convention. Common icons include:
+
+### Navigation
+- `home`, `arrow_back`, `arrow_forward`, `menu`, `close`, `more_vert`, `more_horiz`
+
+### Actions
+- `search`, `add`, `remove`, `edit`, `delete`, `save`, `share`, `download`, `upload`
+
+### Communication
+- `mail`, `chat`, `call`, `notifications`, `send`, `inbox`, `drafts`
+
+### Media
+- `play_arrow`, `pause`, `stop`, `skip_next`, `skip_previous`, `volume_up`, `mic`
+
+### Status
+- `check`, `close`, `error`, `warning`, `info`, `check_circle`, `cancel`
+
+### Objects
+- `folder`, `description`, `article`, `image`, `movie`, `music_note`, `code`
+
+### User
+- `person`, `group`, `face`, `account_circle`, `settings`, `logout`
+
+Full icon list: https://fonts.google.com/icons
+
+## Common Patterns
+
+### Toggle Icons
+```html
+<!-- Like/Unlike -->
+<schmancy-icon
+  fill=${isLiked ? "1" : "0"}
+  weight=${isLiked ? "700" : "400"}
+  @click=${this.toggleLike}>
+  favorite
+</schmancy-icon>
+
+<!-- Bookmark -->
+<schmancy-icon fill=${isBookmarked ? "1" : "0"}>
+  bookmark
+</schmancy-icon>
+
+<!-- Star Rating -->
+<schmancy-icon fill=${rating >= 1 ? "1" : "0"}>star</schmancy-icon>
+<schmancy-icon fill=${rating >= 2 ? "1" : "0"}>star</schmancy-icon>
+<schmancy-icon fill=${rating >= 3 ? "1" : "0"}>star</schmancy-icon>
+```
+
+### Contextual Icons
+```html
+<!-- Success state -->
+<schmancy-icon fill="1" class="text-success">check_circle</schmancy-icon>
+
+<!-- Error state -->
+<schmancy-icon fill="1" class="text-error">error</schmancy-icon>
+
+<!-- Warning state -->
+<schmancy-icon fill="1" class="text-warning">warning</schmancy-icon>
+
+<!-- Info state -->
+<schmancy-icon fill="0" class="text-info">info</schmancy-icon>
+```
+
+### Size Variations
+```html
+<!-- Small (16px) -->
+<schmancy-icon style="--schmancy-icon-size: 16px;">home</schmancy-icon>
+
+<!-- Default (24px) -->
+<schmancy-icon>home</schmancy-icon>
+
+<!-- Large (32px) -->
+<schmancy-icon style="--schmancy-icon-size: 32px;">home</schmancy-icon>
+
+<!-- Extra Large (48px) -->
+<schmancy-icon style="--schmancy-icon-size: 48px;">home</schmancy-icon>
+```
+
+## Accessibility
+
+- Icons are automatically marked with `aria-hidden="true"` for decorative use
+- For interactive icons, provide `aria-label` or `aria-labelledby`
+- For informational icons, include screen reader text:
+  ```html
+  <schmancy-icon aria-label="Warning">warning</schmancy-icon>
+  ```
+
+## Related Components
+- **[Button](./button.md)**: Icons commonly used in buttons
+- **[List](./list.md)**: Icons in list items
+- **[Input](./input.md)**: Icons in form fields
+- **[Chips](./chips.md)**: Icons in chip components

package/ai/spinner.md

@@ -0,0 +1,165 @@
+# Schmancy Spinner - AI Reference
+
+A modern circular loading spinner with contextual color inheritance and optional glass morphism effect.
+
+```js
+// Component Tag
+<schmancy-spinner
+  color="primary|on-primary|secondary|on-secondary|tertiary|on-tertiary|error|on-error|success|on-success|surface|on-surface|surface-variant|on-surface-variant"
+  size="number"
+  glass?>
+</schmancy-spinner>
+
+// Examples
+// 1. Basic spinner (inherits parent color)
+<schmancy-spinner></schmancy-spinner>
+
+// 2. Different sizes (using Tailwind sizing system)
+<schmancy-spinner size="4"></schmancy-spinner>  // 16px (1rem)
+<schmancy-spinner size="6"></schmancy-spinner>  // 24px (1.5rem) - default
+<schmancy-spinner size="8"></schmancy-spinner>  // 32px (2rem)
+<schmancy-spinner size="12"></schmancy-spinner> // 48px (3rem)
+
+// 3. Color variants
+<schmancy-spinner color="primary"></schmancy-spinner>
+<schmancy-spinner color="on-primary"></schmancy-spinner>
+<schmancy-spinner color="error"></schmancy-spinner>
+<schmancy-spinner color="success"></schmancy-spinner>
+
+// 4. Glass morphism effect
+<schmancy-spinner glass></schmancy-spinner>
+<schmancy-spinner glass size="10" color="primary"></schmancy-spinner>
+
+// 5. Inside buttons (inherits button text color)
+<schmancy-button variant="filled">
+  <schmancy-spinner size="5"></schmancy-spinner>
+  Loading...
+</schmancy-button>
+
+// 6. Inside surfaces with contextual colors
+<schmancy-surface type="filled" color="primary">
+  <schmancy-spinner color="on-primary"></schmancy-spinner>
+</schmancy-surface>
+
+// 7. Loading states
+<div class="flex items-center gap-2">
+  <schmancy-spinner size="5"></schmancy-spinner>
+  <schmancy-typography>Loading data...</schmancy-typography>
+</div>
+
+// 8. Overlay loading indicator with glass effect
+<div class="relative">
+  <div class="absolute inset-0 flex items-center justify-center bg-surface/50 backdrop-blur-sm">
+    <schmancy-spinner glass size="10"></schmancy-spinner>
+  </div>
+  <!-- Content being loaded -->
+</div>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `color` | `string` | `inherit` | Theme color variant or 'inherit' for contextual color |
+| `size` | `number` | `6` | Size in Tailwind units (4 = 16px, 6 = 24px, 8 = 32px, etc.) |
+| `glass` | `boolean` | `false` | Apply glass morphism effect with backdrop blur |
+
+## Color System
+
+The spinner intelligently inherits colors from its context by default:
+- Inside buttons: Inherits button text color
+- Inside colored surfaces: Inherits appropriate contrast color
+- Standalone: Uses current text color
+
+Available explicit colors:
+- **Primary colors**: `primary`, `on-primary`
+- **Secondary colors**: `secondary`, `on-secondary`
+- **Tertiary colors**: `tertiary`, `on-tertiary`
+- **Status colors**: `error`, `on-error`, `success`, `on-success`
+- **Surface colors**: `surface`, `on-surface`, `surface-variant`, `on-surface-variant`
+
+## Glass Effect
+
+The `glass` attribute adds a modern glass morphism effect:
+- Semi-transparent background with backdrop blur
+- Subtle border and inner shadow
+- Perfect for overlay loading indicators
+- Works well on image or complex backgrounds
+
+## Size System
+
+Uses Tailwind's sizing convention where each unit = 0.25rem:
+- `size="4"` = 16px (1rem)
+- `size="5"` = 20px (1.25rem)
+- `size="6"` = 24px (1.5rem) - **default**
+- `size="8"` = 32px (2rem)
+- `size="10"` = 40px (2.5rem)
+- `size="12"` = 48px (3rem)
+
+## Common Use Cases
+
+### 1. Button Loading State
+```html
+<schmancy-button variant="filled" disabled>
+  <schmancy-spinner size="5"></schmancy-spinner>
+  <span class="ml-2">Processing...</span>
+</schmancy-button>
+```
+
+### 2. Page Loading Overlay
+```html
+<div class="fixed inset-0 flex items-center justify-center bg-black/30 backdrop-blur-sm z-50">
+  <schmancy-spinner glass size="12"></schmancy-spinner>
+</div>
+```
+
+### 3. Inline Loading Indicator
+```html
+<schmancy-list-item>
+  <span>Fetching user data</span>
+  <schmancy-spinner slot="end" size="5"></schmancy-spinner>
+</schmancy-list-item>
+```
+
+### 4. Card Loading State
+```html
+<schmancy-card>
+  <div class="flex flex-col items-center justify-center py-8">
+    <schmancy-spinner size="8" color="primary"></schmancy-spinner>
+    <schmancy-typography type="body" token="sm" class="mt-2">
+      Loading content...
+    </schmancy-typography>
+  </div>
+</schmancy-card>
+```
+
+### 5. Status Indicators
+```html
+<div class="flex items-center gap-2">
+  <schmancy-spinner size="4" color="success"></schmancy-spinner>
+  <schmancy-typography>Syncing...</schmancy-typography>
+</div>
+```
+
+## Accessibility
+
+- The spinner is automatically marked with `aria-hidden="true"` since it's decorative
+- Always provide textual context for screen readers:
+  ```html
+  <div role="status">
+    <schmancy-spinner></schmancy-spinner>
+    <span class="sr-only">Loading...</span>
+  </div>
+  ```
+
+## Animation
+
+- Continuous rotation at 1 second per revolution
+- Smooth animation with reverse direction for visual appeal
+- No performance impact with CSS animations
+- Respects `prefers-reduced-motion` for accessibility
+
+## Related Components
+- **[Progress](./progress.md)**: For determinate linear progress
+- **[Busy](./busy.md)**: For full-page loading states
+- **[Button](./button.md)**: Often used with spinners for loading states