@mhmo91/schmancy 0.8.6 → 0.9.2

package/ai/divider.md

@@ -1,153 +1,31 @@
-# Divider Component
+# schmancy-divider
 
-A sleek animated divider component that provides visual separation between content sections with customizable orientation and animation effects.
-
-## Quick Start
+> Horizontal or vertical divider line with grow animation.
 
+## Usage
 ```html
-<!-- Basic horizontal divider -->
 <schmancy-divider></schmancy-divider>
-
-<!-- Vertical divider -->
-<schmancy-divider orientation="vertical"></schmancy-divider>
-
-<!-- Animated from center -->
-<schmancy-divider grow="both"></schmancy-divider>
 ```
 
 ## Properties
-
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
-| `outline` | `'default' \| 'variant'` | `'variant'` | Color style of the divider |
-| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Divider direction |
-| `grow` | `'start' \| 'end' \| 'both'` | `'start'` | Animation growth direction |
+| vertical | boolean | `false` | Vertical orientation (use inside flex/grid) |
+| outline | `'default'\|'variant'` | `'variant'` | Line color intensity |
+| grow | `'start'\|'end'\|'both'` | `'start'` | Animation origin direction |
 
 ## Examples
-
-### Section Separators
 ```html
-<schmancy-surface>
-  <h2>Section One</h2>
-  <p>Content for the first section...</p>
-  
-  <schmancy-divider class="my-6"></schmancy-divider>
-  
-  <h2>Section Two</h2>
-  <p>Content for the second section...</p>
-</schmancy-surface>
-```
+<!-- Horizontal divider -->
+<schmancy-divider></schmancy-divider>
 
-### Sidebar Layout
-```html
-<div class="flex">
-  <nav class="w-64 p-4">
-    <!-- Navigation items -->
-  </nav>
-  
-  <schmancy-divider orientation="vertical" class="h-screen"></schmancy-divider>
-  
-  <main class="flex-1 p-4">
-    <!-- Main content -->
-  </main>
+<!-- Vertical divider in a flex container -->
+<div class="flex items-stretch h-16">
+  <span>Left</span>
+  <schmancy-divider vertical></schmancy-divider>
+  <span>Right</span>
 </div>
-```
-
-### Animated List Separators
-```html
-<schmancy-list>
-  ${items.map((item, index) => html`
-    <schmancy-list-item>${item.name}</schmancy-list-item>
-    ${index < items.length - 1 ? html`
-      <schmancy-divider 
-        grow="both" 
-        style="--animation-duration: 0.3s"
-      ></schmancy-divider>
-    ` : ''}
-  `)}
-</schmancy-list>
-```
-
-### Card with Sections
-```html
-<schmancy-card>
-  <div slot="header">
-    <h3>User Profile</h3>
-  </div>
-  
-  <div>
-    <p>Name: John Doe</p>
-    <p>Email: john@example.com</p>
-  </div>
-  
-  <schmancy-divider outline="default" class="my-4"></schmancy-divider>
-  
-  <div>
-    <h4>Recent Activity</h4>
-    <ul>
-      <li>Logged in - 2 hours ago</li>
-      <li>Updated profile - Yesterday</li>
-    </ul>
-  </div>
-</schmancy-card>
-```
 
-## Features
-
-### Animation Options
-
-**Growth Direction**:
-- `start`: Animates from start (left/top)
-- `end`: Animates from end (right/bottom)
-- `both`: Animates from center outward
-
-### RTL Support
-The component automatically adjusts animation direction for right-to-left layouts.
-
-### Color Variants
-- `variant`: Uses `outlineVariant` color (subtle)
-- `default`: Uses `outline` color (more prominent)
-
-## Styling
-
-### CSS Custom Properties
-```css
-schmancy-divider {
-  --divider-color: var(--schmancy-sys-color-outlineVariant);
-  --animation-duration: 1s;
-  --transform-origin: left; /* or right, center */
-}
+<!-- Grow from center -->
+<schmancy-divider grow="both"></schmancy-divider>
 ```
-
-### Animation Keyframes
-The component uses CSS animations for smooth drawing effects:
-- Horizontal dividers use `scaleX` transformation
-- Vertical dividers use `scaleY` transformation
-
-## Accessibility
-
-- Uses `aria-hidden="true"` on decorative connector lines
-- Semantic HTML structure
-- No interactive elements
-
-## Related Components
-
-- [Surface](./surface.md) - Container for divided content
-- [Card](./card.md) - Cards with divided sections
-- [List](./list.md) - Lists with dividers
-- [Layout](./layout.md) - Page layout divisions
-
-## Best Practices
-
-1. **Spacing**: Use consistent margin/padding around dividers
-2. **Animation**: Keep animations subtle (300-500ms)
-3. **Contrast**: Ensure sufficient contrast in both light/dark themes
-4. **Semantic HTML**: Use dividers for visual separation, not structural
-
-## Use Cases
-
-1. **Form Sections**: Separate form groups
-2. **Navigation**: Divide menu sections
-3. **Content**: Break up long text content
-4. **Lists**: Separate list items
-5. **Layouts**: Create visual boundaries in layouts

package/ai/dropdown.md

@@ -1,238 +1,47 @@
-# Schmancy Dropdown - AI Reference
+# schmancy-dropdown
 
-```js
-// Basic Dropdown
-<schmancy-dropdown>
-  <schmancy-button slot="trigger">
-    Open Dropdown
-  </schmancy-button>
-  
-  <div slot="content">
-    <div>Dropdown content goes here</div>
-  </div>
-</schmancy-dropdown>
-
-// Dropdown with position
-<schmancy-dropdown
-  position="bottom-start|bottom-end|top-start|top-end|left-start|left-end|right-start|right-end">
-  <schmancy-button slot="trigger">
-    Open Dropdown
-  </schmancy-button>
-  
-  <div slot="content">
-    <div>Positioned dropdown content</div>
-  </div>
-</schmancy-dropdown>
-
-// Dropdown with menu items
-<schmancy-dropdown>
-  <schmancy-button slot="trigger">
-    Options
-  </schmancy-button>
-  
-  <schmancy-menu slot="content">
-    <schmancy-menu-item @click=${handleEdit}>Edit</schmancy-menu-item>
-    <schmancy-menu-item @click=${handleDuplicate}>Duplicate</schmancy-menu-item>
-    <schmancy-menu-item @click=${handleArchive}>Archive</schmancy-menu-item>
-    <schmancy-menu-item disabled>Share</schmancy-menu-item>
-    <schmancy-divider></schmancy-divider>
-    <schmancy-menu-item variant="danger" @click=${handleDelete}>Delete</schmancy-menu-item>
-  </schmancy-menu>
-</schmancy-dropdown>
-
-// Dropdown with custom width and offset
-<schmancy-dropdown
-  width="300px"
-  offset="5">
-  <schmancy-button slot="trigger">
-    Wide Dropdown
-  </schmancy-button>
-  
-  <div slot="content" style="padding: 16px;">
-    <h3>Custom Content</h3>
-    <p>This dropdown has custom width and offset.</p>
-  </div>
-</schmancy-dropdown>
-
-// Dropdown Properties
-position: string        // Position relative to trigger: "bottom-start" (default), "top-end", etc.
-width: string           // Width of the dropdown content
-offset: number          // Distance between trigger and content (pixels)
-open: boolean           // Whether the dropdown is open
-disabled: boolean       // Disable the dropdown
-closeOnSelect: boolean  // Close dropdown when an item inside is selected
-closeOnClickOutside: boolean // Close dropdown when clicking outside
-matchTriggerWidth: boolean   // Make content width match trigger width
-
-// Dropdown Events
-@open    // Fires when dropdown opens
-@close   // Fires when dropdown closes
-@select  // Fires when an item is selected (if using menu items)
-
-// Dropdown Methods
-dropdown.open() -> void    // Programmatically open the dropdown
-dropdown.close() -> void   // Programmatically close the dropdown
-dropdown.toggle() -> void  // Toggle the dropdown state
+> Floating dropdown with trigger slot and auto-positioned content portal.
 
-// Examples
-// Basic dropdown menu
+## Usage
+```html
 <schmancy-dropdown>
-  <schmancy-button slot="trigger">
-    <span>Actions</span>
-    <schmancy-icon slot="suffix" icon="chevron-down"></schmancy-icon>
-  </schmancy-button>
-  
-  <schmancy-menu slot="content">
-    <schmancy-menu-item @click=${viewItem}>
-      <schmancy-icon slot="prefix" icon="eye"></schmancy-icon>
-      View
-    </schmancy-menu-item>
-    
-    <schmancy-menu-item @click=${editItem}>
-      <schmancy-icon slot="prefix" icon="edit"></schmancy-icon>
-      Edit
-    </schmancy-menu-item>
-    
-    <schmancy-divider></schmancy-divider>
-    
-    <schmancy-menu-item variant="danger" @click=${deleteItem}>
-      <schmancy-icon slot="prefix" icon="trash"></schmancy-icon>
-      Delete
-    </schmancy-menu-item>
-  </schmancy-menu>
-</schmancy-dropdown>
-
-// Profile dropdown
-<schmancy-dropdown position="bottom-end">
-  <div slot="trigger" style="cursor: pointer;">
-    <schmancy-avatar
-      src="path/to/avatar.jpg"
-      size="medium">
-    </schmancy-avatar>
-  </div>
-  
-  <div slot="content">
-    <div style="padding: 16px; text-align: center;">
-      <schmancy-avatar
-        src="path/to/avatar.jpg"
-        size="large">
-      </schmancy-avatar>
-      <h3>John Doe</h3>
-      <p>john@example.com</p>
-    </div>
-    
-    <schmancy-divider></schmancy-divider>
-    
-    <schmancy-menu>
-      <schmancy-menu-item @click=${viewProfile}>
-        <schmancy-icon slot="prefix" icon="user"></schmancy-icon>
-        Profile
-      </schmancy-menu-item>
-      
-      <schmancy-menu-item @click=${openSettings}>
-        <schmancy-icon slot="prefix" icon="settings"></schmancy-icon>
-        Settings
-      </schmancy-menu-item>
-      
-      <schmancy-divider></schmancy-divider>
-      
-      <schmancy-menu-item @click=${signOut}>
-        <schmancy-icon slot="prefix" icon="logout"></schmancy-icon>
-        Sign Out
-      </schmancy-menu-item>
-    </schmancy-menu>
-  </div>
-</schmancy-dropdown>
-
-// Dropdown with form
-<schmancy-dropdown>
-  <schmancy-button slot="trigger">
-    Add User
-  </schmancy-button>
-  
-  <div slot="content" style="padding: 16px; width: 300px;">
-    <h3>Add User</h3>
-    <schmancy-form @submit=${(e) => {
-      addUser(e.detail.values);
-      dropdown.close();
-    }}>
-      <schmancy-input
-        name="name"
-        label="Name"
-        required>
-      </schmancy-input>
-      
-      <schmancy-input
-        name="email"
-        label="Email"
-        type="email"
-        required>
-      </schmancy-input>
-      
-      <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;">
-        <schmancy-button
-          type="button"
-          variant="tertiary"
-          @click=${() => dropdown.close()}>
-          Cancel
-        </schmancy-button>
-        
-        <schmancy-button
-          type="submit"
-          variant="primary">
-          Add
-        </schmancy-button>
-      </div>
-    </schmancy-form>
-  </div>
-</schmancy-dropdown>
-
-// Icon button dropdown
-<schmancy-dropdown>
-  <schmancy-icon-button
-    slot="trigger"
-    icon="more-vertical">
-  </schmancy-icon-button>
-  
-  <schmancy-menu slot="content">
-    <schmancy-menu-item>Option 1</schmancy-menu-item>
-    <schmancy-menu-item>Option 2</schmancy-menu-item>
-    <schmancy-menu-item>Option 3</schmancy-menu-item>
-  </schmancy-menu>
-</schmancy-dropdown>
-
-// Filter dropdown
-<schmancy-dropdown>
-  <schmancy-button slot="trigger" variant="tertiary">
-    <schmancy-icon slot="prefix" icon="filter"></schmancy-icon>
-    Filter
-  </schmancy-button>
-  
-  <div slot="content" style="padding: 16px; width: 250px;">
-    <h3>Filters</h3>
-    
-    <div style="margin-bottom: 16px;">
-      <label>Status</label>
-      <schmancy-radio-group>
-        <schmancy-radio-button value="all" label="All"></schmancy-radio-button>
-        <schmancy-radio-button value="active" label="Active"></schmancy-radio-button>
-        <schmancy-radio-button value="inactive" label="Inactive"></schmancy-radio-button>
-      </schmancy-radio-group>
-    </div>
-    
-    <div style="margin-bottom: 16px;">
-      <label>Categories</label>
-      <schmancy-checkbox label="Products"></schmancy-checkbox>
-      <schmancy-checkbox label="Services"></schmancy-checkbox>
-      <schmancy-checkbox label="Resources"></schmancy-checkbox>
-    </div>
-    
-    <schmancy-button 
-      variant="primary" 
-      style="width: 100%;"
-      @click=${applyFilters}>
-      Apply Filters
-    </schmancy-button>
-  </div>
-</schmancy-dropdown>
-```
+  <schmancy-button slot="trigger">Open</schmancy-button>
+  <schmancy-dropdown-content>
+    <p>Dropdown content here</p>
+  </schmancy-dropdown-content>
+</schmancy-dropdown>
+```
+
+## Properties
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| open | boolean | `false` | Whether the dropdown is open |
+| placement | string | `'bottom-start'` | Floating UI placement |
+| distance | number | `8` | Offset distance in pixels |
+
+## Placement Values
+`top`, `top-start`, `top-end`, `right`, `right-start`, `right-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`
+
+## Methods
+| Method | Description |
+|--------|-------------|
+| toggle() | Toggle open/close state |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| trigger | Element that opens the dropdown on click |
+| default | Dropdown content |
+
+## Examples
+```html
+<!-- Right-aligned dropdown -->
+<schmancy-dropdown placement="bottom-end">
+  <schmancy-icon-button slot="trigger">more_vert</schmancy-icon-button>
+  <schmancy-dropdown-content>
+    <div class="p-4">Custom content</div>
+  </schmancy-dropdown-content>
+</schmancy-dropdown>
+```
+
+Content is teleported to a portal for proper z-index stacking. Closes on outside click or Escape key.

package/ai/form.md

@@ -1,145 +1,49 @@
-# Schmancy Form - AI Reference
+# schmancy-form
 
-```js
-// Form Container
-<schmancy-form
-  novalidate?                              // Skip form validation on submit
-  @submit=${handleSubmit}                  // Form submission event
-  @reset=${handleReset}>                   // Form reset event
-  <!-- Form fields go here -->
-</schmancy-form>
-
-// Form Methods
-form.submit() -> boolean                   // Submit the form programmatically
-form.reset() -> void                       // Reset all form fields to default values
-form.getFormData() -> FormData            // Get form data as FormData object
-form.reportValidity() -> boolean          // Check validity and show validation messages
-form.checkValidity() -> boolean           // Check validity without showing messages
-
-// Events
-@submit // CustomEvent<FormData>          // Fired when form is submitted
-@reset  // CustomEvent                    // Fired when form is reset
+> Form container that collects data from child controls, validates, and emits submit/reset events.
 
-// Examples
-// 1. Basic form with validation
-<schmancy-form @submit=${(e) => {
-  const formData = e.detail;
-  console.log('Form submitted:', formData);
-  // Convert FormData to object if needed
-  const values = Object.fromEntries(formData);
-  console.log('Values:', values);
-}}>
-  <schmancy-input 
-    name="email"
-    label="Email Address"
-    type="email"
-    required>
-  </schmancy-input>
-  
+## Usage
+```html
+<schmancy-form @submit=${(e) => handleSubmit(e.detail)}>
+  <schmancy-input name="email" label="Email" required></schmancy-input>
   <schmancy-button type="submit">Submit</schmancy-button>
 </schmancy-form>
-
-// 2. Form with multiple fields and validation
-<schmancy-form 
-  @submit=${async (e) => {
-    const formData = e.detail;
-    // Send to server
-    await fetch('/api/submit', {
-      method: 'POST',
-      body: formData
-    });
-  }}>
-  
-  <schmancy-input name="username" label="Username" required></schmancy-input>
-  <schmancy-input name="password" label="Password" type="password" required></schmancy-input>
-  <schmancy-checkbox name="remember" label="Remember me"></schmancy-checkbox>
-  
-  <schmancy-button type="submit">Login</schmancy-button>
-</schmancy-form>
 ```
 
-## Related Components
-- **[Input](./input.md)**: Form input fields for text entry
-- **[Textarea](./textarea.md)**: Multi-line text input fields
-- **[Select](./select.md)**: Dropdown selection fields
-- **[Checkbox](./checkbox.md)**: Boolean selection controls
-- **[Radio-Group](./radio-group.md)**: Exclusive option selection controls
-- **[Button](./button.md)**: Action triggers for form submission
-
-## Technical Details
-
-### Form Field Common Attributes
-All form fields (input, textarea, select, checkbox, radio) support these attributes:
-```js
-name="field-name"       // Field identifier
-label="Field Label"     // Display label
-required?               // Makes field required
-disabled?               // Disables the field
-readonly?               // Makes field read-only
-value="initial value"   // Sets initial value
-error="Error message"   // Shows validation error
-success?                // Shows success state
-placeholder="Text"      // Placeholder text (where applicable)
+## Properties
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| novalidate | boolean | `false` | Skip validation on submit |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| submit | FormData | Form data from all child controls |
+| reset | - | When the form is reset |
+
+## Methods
+| Method | Returns | Description |
+|--------|---------|-------------|
+| submit() | boolean | Validates and dispatches submit event. Returns false if invalid. |
+| reset() | void | Resets all child controls to default values |
+| getFormData() | FormData | Collects current form data without submitting |
+| reportValidity() | boolean | Checks and shows validation on all controls |
+
+## Examples
+```html
+<!-- Form with validation -->
+<schmancy-form @submit=${(e) => save(e.detail)} @reset=${() => clearForm()}>
+  <schmancy-input name="name" label="Name" required></schmancy-input>
+  <schmancy-select name="role" label="Role" required>
+    <schmancy-option value="admin" label="Admin"></schmancy-option>
+    <schmancy-option value="user" label="User"></schmancy-option>
+  </schmancy-select>
+  <schmancy-checkbox name="active" label="Active"></schmancy-checkbox>
+  <div class="flex gap-2">
+    <schmancy-button type="submit">Save</schmancy-button>
+    <schmancy-button type="reset">Reset</schmancy-button>
+  </div>
+</schmancy-form>
 ```
 
-### Form Behavior
-- Submits when Enter key is pressed in input fields
-- Submits when submit button is clicked
-- Automatically collects data from all form controls
-- Supports native HTML5 validation
-- Works with custom Schmancy form components
-
-### Common Use Cases
-
-1. **Multi-step forms**: Create wizard-like experiences
-   ```html
-   <schmancy-form id="step1" @submit=${nextStep}>
-     <!-- Step 1 fields -->
-   </schmancy-form>
-   
-   <schmancy-form id="step2" @submit=${submitAll} style="display: none;">
-     <!-- Step 2 fields -->
-   </schmancy-form>
-   ```
-
-2. **Programmatic form submission**
-   ```js
-   const form = document.querySelector('schmancy-form');
-   
-   // Check validity before submitting
-   if (form.checkValidity()) {
-     form.submit();
-   } else {
-     // Show validation messages
-     form.reportValidity();
-   }
-   ```
-
-3. **Form with server validation**: Handle backend validation errors
-   ```js
-   async function submitForm(e) {
-     const formData = e.detail;
-     
-     try {
-       const response = await fetch('/api/submit', {
-         method: 'POST',
-         body: formData
-       });
-       
-       if (!response.ok) {
-         // Handle server errors
-         const errors = await response.json();
-         // Update form fields with errors
-         Object.entries(errors).forEach(([field, message]) => {
-           const input = form.querySelector(`[name="${field}"]`);
-           if (input) {
-             input.error = true;
-             input.hint = message;
-           }
-         });
-       }
-     } catch (error) {
-       console.error('Submission failed:', error);
-     }
-   }
-   ```
+Submit triggers on Enter key in inputs or clicking a submit-type button.