@mhmo91/schmancy 0.4.13 → 0.4.14

package/ai/busy.md

@@ -13,8 +13,8 @@
 
 // Spinner Component
 <schmancy-spinner
-  size="small|medium|large"
-  color="primary|secondary|tertiary|currentColor">
+  size="24px"      // Any CSS size value (e.g., "16px", "2em", "32px")
+  color="gray">    // Currently not used - spinner uses secondary color
 </schmancy-spinner>
 
 // Busy overlaying content
@@ -50,16 +50,15 @@ delay: number           // Delay in ms before showing (to prevent flashing)
 minDuration: number     // Minimum duration in ms to show
 
 // Spinner Properties
-size: string            // Size: "small" (16px), "medium" (24px), "large" (48px), or custom size
-color: string           // Color: "primary", "secondary", "tertiary", "currentColor" or CSS color
-thickness: number       // Thickness of the spinner stroke
+size: string            // CSS size value (default: "24px"). Examples: "16px", "20px", "32px", "2rem"
+color: string           // Currently not used - spinner always uses secondary color
 
 // Examples
 // Basic usage
 <schmancy-busy active=${loading} label="Loading..."></schmancy-busy>
 
-// Spinner with custom size and color
-<schmancy-spinner size="32px" color="#ff5722"></schmancy-spinner>
+// Spinner with custom size
+<schmancy-spinner size="32px"></schmancy-spinner>
 
 // Busy indicator in a button
 <schmancy-button ?disabled=${loading}>

package/ai/button.md

@@ -21,8 +21,8 @@
   type="button|reset|submit"                            // HTML button type (default: "button")
   href?="string"                                        // Makes button a link
   disabled?                                             // Disable state
-  aria-label="string">                                  // Accessibility label
-  icon_name
+  aria-label="string">                                  // Accessibility label (REQUIRED)
+  <!-- Icon name as content -->
 </schmancy-icon-button>
 
 // Component Methods
@@ -99,9 +99,9 @@ Material Design 3 emphasis levels (highest to lowest):
 4. `text` - Low emphasis, tertiary actions
 
 ### Icon Button Sizes
-- `sm`: 40×40px container, 18px icon
-- `md`: 48×48px container, 24px icon (default)
-- `lg`: 56×56px container, 28px icon
+- `sm`: 18px icon size
+- `md`: 24px icon size (default)
+- `lg`: 32px icon size
 
 ### CSS Custom Properties
 ```css

package/ai/card.md

@@ -59,7 +59,7 @@ elevation: number     // Shadow depth 0-5 (default: 0, overrides type defaults)
 ### CSS Host Styling
 The component uses `:host` selectors for all styling:
 - No wrapper elements - clean component boundary
-- Type and elevation properties reflect to HTML attributes
+- CSS attribute selectors work with the properties
 - Automatic hover states for elevated and outlined types
 
 ### Theme Integration

package/ai/checkbox.md

@@ -5,49 +5,39 @@
 <schmancy-checkbox
   name="checkbox-name"
   label="Checkbox Label"
-  value="checkbox-value"
-  checked?
-  indeterminate?
+  value="true|false"              // Boolean value (default: false)
+  checked?                        // Alias for value
   disabled?
   required?
+  size="sm|md|lg"                 // Size of checkbox (default: "md")
   @change=${handleChange}>
 </schmancy-checkbox>
 
-// Checkbox with helper text
+// Checkbox with label
 <schmancy-checkbox
   label="Subscribe to newsletter"
-  helper-text="You'll receive weekly updates">
+  value="false">
 </schmancy-checkbox>
 
-// Checkbox with error
+// Checkbox with slot content
 <schmancy-checkbox
-  label="Accept terms"
-  error="You must accept the terms to continue"
+  name="terms"
   required>
+  I accept the <a href="/terms">terms and conditions</a>
 </schmancy-checkbox>
 
-// Checkbox Methods
-checkbox.check() -> void       // Programmatically check
-checkbox.uncheck() -> void     // Programmatically uncheck
-checkbox.toggle() -> void      // Toggle current state
-checkbox.focus() -> void       // Focus the checkbox
-checkbox.blur() -> void        // Remove focus
-checkbox.validate() -> boolean // Validate and show error if invalid
-
 // Checkbox Properties
-checked: boolean       // The checked state
-indeterminate: boolean // Indeterminate state (neither checked nor unchecked)
-value: string          // The value attribute of the checkbox
-name: string           // The name attribute
+value: boolean         // The checked state (true/false)
+checked: boolean       // Alias for value
+name: string           // The name attribute (auto-generated if not provided)
+id: string             // The id attribute (auto-generated if not provided)
 disabled: boolean      // Whether the checkbox is disabled
 required: boolean      // Whether the checkbox is required
-error: string          // Error message to display
+label?: string         // Optional label text
+size: 'sm'|'md'|'lg'   // Size of the checkbox (default: 'md')
 
 // Checkbox Events
-@change  // Fires when checked state changes, with { detail: { checked, value } }
-@input   // Fires when value changes during interaction
-@focus   // Fires when checkbox gains focus
-@blur    // Fires when checkbox loses focus
+@change  // Fires when checked state changes, with { detail: { value: boolean } }
 
 // Examples
 // Basic usage

package/ai/form.md

@@ -3,66 +3,59 @@
 ```js
 // Form Container
 <schmancy-form
-  @submit=${handleSubmit}
-  @validate=${handleValidation}
-  @change=${handleChange}>
+  novalidate?                              // Skip form validation on submit
+  @submit=${handleSubmit}                  // Form submission event
+  @reset=${handleReset}>                   // Form reset event
   <!-- Form fields go here -->
 </schmancy-form>
 
-// Form v2 (enhanced version with model binding)
-<schmancy-form-v2
-  .model=${formData}
-  .validators=${validators}
-  @submit=${handleSubmit}
-  @change=${handleChange}>
-  <!-- Form fields go here -->
-</schmancy-form-v2>
-
 // Form Methods
-form.submit() -> Promise<any>
-form.reset() -> void
-form.validate() -> Promise<boolean>
-form.setErrors({fieldName: errorMessage}) -> void
-form.getValues() -> Object
+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 // { detail: { values: Object, isValid: boolean } }
-@validate // { detail: { errors: Object, isValid: boolean } }
-@change // { detail: { name: string, value: any, values: Object } }
+@submit // CustomEvent<FormData>          // Fired when form is submitted
+@reset  // CustomEvent                    // Fired when form is reset
 
 // Examples
 // 1. Basic form with validation
 <schmancy-form @submit=${(e) => {
-  const values = e.detail.values;
-  console.log('Form submitted:', values);
+  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"
-    required
-    error=${emailError}>
+    type="email"
+    required>
   </schmancy-input>
   
   <schmancy-button type="submit">Submit</schmancy-button>
 </schmancy-form>
 
-// 2. Form v2 with model binding and validators
-<schmancy-form-v2
-  .model=${{
-    username: '',
-    password: ''
-  }}
-  .validators=${{
-    username: (value) => value ? '' : 'Username is required',
-    password: (value) => value.length >= 8 ? '' : 'Password must be at least 8 characters'
-  }}
-  @submit=${(e) => console.log('Valid data:', e.detail.values)}>
+// 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"></schmancy-input>
-  <schmancy-input name="password" label="Password" type="password"></schmancy-input>
+  <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-v2>
+</schmancy-form>
 ```
 
 ## Related Components
@@ -89,20 +82,12 @@ success?                // Shows success state
 placeholder="Text"      // Placeholder text (where applicable)
 ```
 
-### Form v2 Interfaces
-```typescript
-interface FormModel {
-  [key: string]: any;
-}
-
-interface FormValidators {
-  [key: string]: (value: any, allValues: FormModel) => string | null;
-}
-
-interface FormErrors {
-  [key: string]: string;
-}
-```
+### 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
 
@@ -117,32 +102,44 @@ interface FormErrors {
    </schmancy-form>
    ```
 
-2. **Dynamic form fields**: Add or remove fields based on user input
+2. **Programmatic form submission**
    ```js
-   <schmancy-form-v2
-     .model=${dynamicModel}
-     .validators=${dynamicValidators}>
-     ${dynamicFields.map(field => html`
-       <schmancy-input name=${field.name} label=${field.label}></schmancy-input>
-     `)}
-     <button type="button" @click=${addField}>Add Field</button>
-   </schmancy-form-v2>
+   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: JSON.stringify(e.detail.values)
+         body: formData
        });
-       const data = await response.json();
-       if (!data.success) {
-         formRef.setErrors(data.errors);
+       
+       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(error);
+       console.error('Submission failed:', error);
      }
    }
    ```

package/ai/input.md

@@ -11,13 +11,14 @@
   placeholder="Placeholder text"                      // Placeholder text
   hint?="Helper text"                                 // Helper text below input
   align?="left|center|right"                          // Text alignment (default: "left")
+  size?="sm|md|lg"                                   // Input size (default: "md")
   required?                                            // Required field
   disabled?                                            // Disabled state
   readonly?                                            // Read-only state
   clickable?                                           // Show pointer cursor when readonly
   error?                                               // Error state (boolean)
   autofocus?                                           // Auto-focus on render
-  spellcheck?                                          // Enable spellcheck
+  spellcheck?                                          // Enable spellcheck (default: false)
   inputmode?="none|text|tel|url|email|numeric|decimal|search" // Virtual keyboard hint
   autocomplete?="off|on|name|email|tel|etc"          // Autofill hints
   pattern?="regex"                                    // Validation pattern
@@ -26,12 +27,14 @@
   min?="number|date"                                  // Min value (number/date)
   max?="number|date"                                  // Max value (number/date)
   step?="number|any"                                  // Step increment
-  tabIndex?="number"                                  // Tab order
+  list?="datalist-id"                                // Associate with datalist
+  validateOn?="always|touched|dirty|submitted"        // Validation strategy (default: "touched")
   @input=${handleInput}                                // Every keystroke
   @change=${handleChange}                              // On blur/change
   @enter=${handleEnter}                                // Enter key pressed
   @focus=${handleFocus}                                // Focus event
-  @blur=${handleBlur}>                                 // Blur event
+  @blur=${handleBlur}                                  // Blur event
+  @autofill=${handleAutofill}>                         // Autofill detected
 </schmancy-input>
 
 // Input Methods
@@ -43,14 +46,23 @@ input.checkValidity() -> boolean
 input.reportValidity() -> boolean
 input.setCustomValidity(message: string) -> void
 input.getValidity() -> ValidityState
+input.setSelectionRange(start: number, end: number, direction?: 'forward'|'backward'|'none') -> void
+input.setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select'|'start'|'end'|'preserve') -> void
+
+// Input Properties
+input.selectionStart -> number | null
+input.selectionEnd -> number | null
+input.selectionDirection -> 'forward' | 'backward' | 'none' | null
 
 // Events (Custom Events with detail)
-@input  // CustomEvent<{ value: string }>
-@change // CustomEvent<{ value: string }>
-@enter  // CustomEvent<{ value: string }>
-@focus  // Standard FocusEvent
-@blur   // Standard FocusEvent
-@click  // Standard MouseEvent
+@input    // CustomEvent<{ value: string }>
+@change   // CustomEvent<{ value: string }>
+@enter    // CustomEvent<{ value: string }>
+@autofill // CustomEvent<{ value: string }>
+@reset    // CustomEvent<void>
+@focus    // Standard FocusEvent
+@blur     // Standard FocusEvent
+@click    // Standard MouseEvent
 
 // Examples
 // 1. Basic input with validation
@@ -142,18 +154,12 @@ input.checkValidity()     // Returns true/false
 input.reportValidity()    // Shows validation message
 input.setCustomValidity('Custom error')  // Set custom message
 input.getValidity()       // Get ValidityState object
-suffix: Content displayed after the input field
 ```
 
-### CSS Custom Properties
-```css
---schmancy-input-height: /* Controls the input height */
---schmancy-input-border-color: /* Controls the border color */
---schmancy-input-focus-color: /* Controls the focus color */
---schmancy-input-error-color: /* Controls the error state color */
---schmancy-input-success-color: /* Controls the success state color */
---schmancy-input-font-size: /* Controls the font size */
-```
+### Input Sizes
+- `sm`: 40px height, 14px font size, compact padding
+- `md`: 50px height, 16px font size, standard padding (default)
+- `lg`: 60px height, 18px font size, spacious padding
 
 ### Input v2 Interfaces
 ```typescript
@@ -172,17 +178,13 @@ interface InputParser {
 
 ### Common Use Cases
 
-1. **Password input with toggle visibility**
+1. **Password input with show/hide functionality**
    ```html
    <schmancy-input
      type="password"
      label="Password"
-     name="password">
-     <schmancy-icon 
-       slot="suffix" 
-       icon="eye" 
-       @click=${togglePasswordVisibility}>
-     </schmancy-icon>
+     name="password"
+     @enter=${handleSubmit}>
    </schmancy-input>
    ```
 
@@ -205,7 +207,10 @@ interface InputParser {
      label="Message"
      name="message"
      maxlength="100"
-     @input=${e => updateCharCount(e.target.value.length)}>
-     <span slot="suffix" id="charCount">0/100</span>
+     hint="0/100 characters"
+     @input=${e => {
+       const count = e.target.value.length;
+       e.target.hint = `${count}/100 characters`;
+     }}>
    </schmancy-input>
    ```

package/ai/notification.md

@@ -2,53 +2,51 @@
 
 ```js
 // Notification Service API
-import { $notification } from 'schmancy';
+import { $notification } from '@mhmo91/schmancy';
 
 // Display notification methods
-$notification.info(message, options?) -> NotificationRef
-$notification.success(message, options?) -> NotificationRef
-$notification.warning(message, options?) -> NotificationRef
-$notification.error(message, options?) -> NotificationRef
+$notification.info(message?, options?) -> string    // Returns notification ID
+$notification.success(message?, options?) -> string
+$notification.warning(message?, options?) -> string
+$notification.error(message?, options?) -> string
 
 // Custom notification
-$notification.show({
+$notification.notify({
   message: string,
-  type: 'info'|'success'|'warning'|'error',
+  type?: 'info'|'success'|'warning'|'error',
   title?: string,
-  duration?: number, // milliseconds, default 5000
-  closable?: boolean, // default true
-  actions?: [{
-    label: string,
-    onClick: Function
-  }],
-  position?: 'top-right'|'top-left'|'bottom-right'|'bottom-left'|'top'|'bottom',
-  onClose?: Function
-}) -> NotificationRef
-
-// NotificationRef object
-{
-  close(): void,  // Programmatically close the notification
-  id: string      // Unique ID of the notification
-}
+  duration?: number,      // milliseconds, default 1000 (1 second)
+  closable?: boolean,     // default true
+  playSound?: boolean,    // default true
+  id?: string            // custom ID
+}) -> string             // Returns notification ID
 
 // Notification Container Component
-<schmancy-notification-container
-  position="top-right|top-left|bottom-right|bottom-left|top|bottom"
-  max-count="5">
-</schmancy-notification-container>
-
-// Notification Outlet (place notifications in specific locations)
-<schmancy-notification-outlet name="custom-location"></schmancy-notification-outlet>
-// Use with:
-$notification.show({ message: "Alert", outlet: "custom-location" });
+<sch-notification-container
+  position="top-right|top-left|bottom-right|bottom-left|top-center|bottom-center"
+  max-visible-notifications="2"     // Max number shown at once (default: 2)
+  play-sound="true|false"          // Enable/disable sounds (default: false)
+  audio-volume="0.1">               // Volume level 0-1 (default: 0.1)
+</sch-notification-container>
 
-// Notification Audio
-$notification.setAudio(type, audioUrl) // Configure audio for notification types
+// Individual Notification Component (used internally)
+<sch-notification
+  title="Title"
+  message="Message text"
+  type="info|success|warning|error"
+  duration="5000"                   // Auto-close after ms (0 = no auto-close)
+  closable="true"
+  play-sound="true"
+  @close>                          // Fired when notification closes
+</sch-notification>
 
 // Examples
 // Basic usage
 $notification.success("Operation completed successfully");
 
+// Without message (just icon)
+$notification.success();
+
 // With options
 $notification.error("Failed to save changes", {
   title: "Error",
@@ -56,38 +54,26 @@ $notification.error("Failed to save changes", {
   closable: true
 });
 
-// With actions
-$notification.info("New update available", {
-  actions: [
-    {
-      label: "Update Now",
-      onClick: () => performUpdate()
-    },
-    {
-      label: "Remind Later",
-      onClick: () => scheduleReminder()
-    }
-  ]
-});
-
 // Custom notification
-$notification.show({
+$notification.notify({
   type: "info",
-  message: "Custom message with HTML content",
+  message: "Custom message",
   title: "Information",
   duration: 0, // won't auto-close
-  position: "bottom",
-  actions: [{
-    label: "Dismiss",
-    onClick: (ref) => ref.close()
-  }]
+  playSound: false
 });
 
-// With HTML content (using lit-html)
-$notification.info(html`
-  <div>
-    <strong>Hello</strong>
-    <p>This is a notification with <em>HTML</em> content</p>
-  </div>
-`);
+// Programmatic control
+const notificationId = $notification.info("Processing...", { duration: 0 });
+// Later, to remove it:
+const container = document.querySelector('sch-notification-container');
+container.removeNotification(notificationId);
+
+// Setup notification container
+// Add this once in your app layout:
+<sch-notification-container 
+  position="top-right"
+  max-visible-notifications="3"
+  play-sound="true">
+</sch-notification-container>
 ```