@mhmo91/schmancy 0.4.13 → 0.4.15

package/ai/radio-group.md

@@ -1,57 +1,75 @@
 # Schmancy Radio Group - AI Reference
 
 ```js
-// Basic Radio Group
+// Basic Radio Group with options array
 <schmancy-radio-group
   name="radio-group-name"
   label="Group Label"
   value="selected-value"
+  .options=${[
+    { value: "option1", label: "Option 1" },
+    { value: "option2", label: "Option 2" },
+    { value: "option3", label: "Option 3" }
+  ]}
   required?
-  disabled?
-  error="Error message"
   @change=${handleChange}>
-  
-  <schmancy-radio-button
-    value="option1"
-    label="Option 1">
-  </schmancy-radio-button>
-  
-  <schmancy-radio-button
-    value="option2"
-    label="Option 2">
-  </schmancy-radio-button>
-  
-  <schmancy-radio-button
-    value="option3"
-    label="Option 3"
-    disabled>
-  </schmancy-radio-button>
 </schmancy-radio-group>
 
-// Radio Group with helper text
+// Radio Group with slotted radio buttons
 <schmancy-radio-group
   label="Select payment method"
-  helper-text="Choose your preferred payment option"
-  value="credit">
+  value="credit"
+  @change=${handleChange}>
   
   <schmancy-radio-button
     value="credit"
-    label="Credit Card">
+    name="payment">
+    <span slot="label">Credit Card</span>
   </schmancy-radio-button>
   
   <schmancy-radio-button
     value="paypal"
-    label="PayPal">
+    name="payment">
+    <span slot="label">PayPal</span>
+  </schmancy-radio-button>
+  
+  <schmancy-radio-button
+    value="bank"
+    name="payment"
+    disabled>
+    <span slot="label">Bank Transfer</span>
   </schmancy-radio-button>
 </schmancy-radio-group>
 
-// Radio Button with custom content
-<schmancy-radio-button value="custom" label="Custom Option">
-  <div slot="description">
-    Additional description text that appears below the label
-  </div>
+// Standalone radio button (without group)
+<schmancy-radio-button 
+  value="standalone" 
+  name="standalone-radio"
+  checked
+  @change=${handleChange}>
+  <span slot="label">Standalone Option</span>
 </schmancy-radio-button>
 
+// Radio Group Properties
+name: string           // Form field name
+label: string          // Group label
+value: string          // Currently selected value
+options: Array<{       // Options array (alternative to slotted content)
+  value: string,
+  label: string
+}>
+required: boolean      // Whether selection is required
+
+// Radio Button Properties
+value: string          // The value of this option
+name: string           // Form field name (for standalone use)
+checked: boolean       // Whether this option is selected
+disabled: boolean      // Whether this option is disabled
+
+// Events
+@change  // CustomEvent<{ value: string }> - Fired when selection changes
+@radio-button-click  // Internal event for group communication
+
 // Radio Group Methods
 radioGroup.focus() -> void       // Focus the first/selected radio button
 radioGroup.validate() -> boolean // Validate and show error if invalid

package/ai/select.md

@@ -17,17 +17,17 @@
   <schmancy-option value="option3" disabled>Option 3</schmancy-option>
 </schmancy-select>
 
-// Select with helper text
+// Select with hint text
 <schmancy-select
   label="Country"
-  helper-text="Select your country of residence"
+  hint="Select your country of residence"
   required>
   <!-- Options -->
 </schmancy-select>
 
 // Multiple select
 <schmancy-select
-  multiple
+  multi
   label="Select Skills"
   .value=${['html', 'css']}
   @change=${(e) => console.log('Selected:', e.detail.value)}>

package/ai/typography.md

@@ -20,9 +20,9 @@ import '@mhmo91/schmancy/typography'
 // Typography Scale Reference (size/line-height)
 // Display: xl (72/80), lg (57/64), md (45/52), sm (36/44), xs (28/36)
 // Headline: xl (36/44), lg (32/40), md (28/36), sm (24/32), xs (20/28)
-// Title: xl (28/36), lg (22/28), md (16/24), sm (14/20), xs (12/16)
-// Subtitle: xl (20/28), lg (18/24), md (16/20), sm (14/18), xs (12/16)
-// Label: xl (16/24), lg (14/20), md (12/16), sm (11/16), xs (10/14)
+// Title: xl (24/32), lg (22/28), md (16/24), sm (14/20), xs (12/16)
+// Subtitle: xl (20/28), lg (18/24), md (16/24), sm (14/20), xs (12/16)
+// Label: xl (16/22), lg (14/20), md (12/16), sm (11/16), xs (10/14)
 // Body: xl (18/28), lg (16/24), md (14/20), sm (12/16), xs (10/14)
 
 // Examples
@@ -111,22 +111,22 @@ Material Design 3 typography scale with 6 types, each with 5 sizes:
 - `sm`: 24px/32px line-height
 - `xs`: 20px/28px line-height
 
-**Title** - Smaller titles and subtitles (weight: 400-500)
-- `xl`: 28px/36px line-height (weight: 500)
+**Title** - Smaller titles and subtitles (weight: 400)
+- `xl`: 24px/32px line-height (weight: 400)
 - `lg`: 22px/28px line-height (weight: 400)
 - `md`: 16px/24px line-height (weight: 500)
 - `sm`: 14px/20px line-height (weight: 500)
 - `xs`: 12px/16px line-height (weight: 500)
 
-**Subtitle** - Secondary headings (weight: 400)
+**Subtitle** - Secondary headings (weight: 500)
 - `xl`: 20px/28px line-height
 - `lg`: 18px/24px line-height
-- `md`: 16px/20px line-height
-- `sm`: 14px/18px line-height
+- `md`: 16px/24px line-height
+- `sm`: 14px/20px line-height
 - `xs`: 12px/16px line-height
 
 **Label** - UI labels and buttons (weight: 500)
-- `xl`: 16px/24px line-height
+- `xl`: 16px/22px line-height
 - `lg`: 14px/20px line-height
 - `md`: 12px/16px line-height
 - `sm`: 11px/16px line-height
@@ -172,9 +172,9 @@ Typography automatically inherits colors from the theme:
 ### Implementation Details
 - Uses Shadow DOM with encapsulated styles
 - All typography values are hardcoded in the component
-- Renders as a `<span>` element with `display: inherit`
-- Font family: system-ui, -apple-system, sans-serif
-- Letter spacing is set to 0 for all variants
+- Renders with `display: block` by default
+- Font family inherits from parent
+- All properties reflect to HTML attributes for CSS targeting
 
 ## Common Use Cases
 

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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>
    ```