@mhmo91/schmancy 0.4.8 → 0.4.10

package/ai/button.md

@@ -8,17 +8,20 @@
   type="button|reset|submit"                            // HTML button type (default: "button")
   href?="string"                                        // Makes button a link
   disabled?                                             // Disable state
-  ariaLabel?="string"                                   // Accessibility label
+  aria-label?="string"                                  // Accessibility label
   @click=${handler}>
   <!-- Content with optional prefix/suffix slots -->
 </schmancy-button>
 
 // Icon Button Component
 <schmancy-icon-button
-  variant="filled|filled tonal|outlined|standard"      // Visual style (default: "standard")
+  variant="elevated|filled|filled tonal|outlined|text"  // Visual style (default: "text")
   size="sm|md|lg"                                      // Button size (default: "md")
+  width="full|auto"                                     // Button width (default: "auto")
+  type="button|reset|submit"                            // HTML button type (default: "button")
+  href?="string"                                        // Makes button a link
   disabled?                                             // Disable state
-  ariaLabel="string">                                  // REQUIRED for accessibility
+  aria-label="string">                                  // Accessibility label
   icon_name
 </schmancy-icon-button>
 

package/ai/code-highlight.md

@@ -0,0 +1,239 @@
+# Schmancy Code Highlight - AI Reference
+
+## Quick Start
+
+```typescript
+import '@mhmo91/schmancy/code-highlight'
+```
+
+## Component Overview
+
+Code highlighting and preview components for displaying syntax-highlighted code with optional live preview.
+
+## API
+
+### Code Component
+
+```typescript
+// Code highlighting component
+<schmancy-code
+  language="javascript|typescript|html|xml|markdown|bash"  // Language for syntax highlighting
+  code="string"                                           // Code to highlight
+  copyButton?="boolean"                                   // Show copy button (default: false)
+  wrap?="boolean"                                         // Wrap long lines (default: false)
+>
+</schmancy-code>
+
+// Component properties
+language: string     // Programming language for highlighting
+code: string        // Code content to display
+copyButton: boolean // Show copy to clipboard button
+wrap: boolean       // Enable line wrapping
+```
+
+### Code Preview Component
+
+```typescript
+// Code preview with source and rendered output
+<schmancy-code-preview
+  language="html|javascript|typescript|etc"              // Language for syntax highlighting
+  layout?="vertical|horizontal"                          // Layout direction (default: "vertical")
+  preview?="boolean"                                     // Show preview pane (default: true)
+>
+  <!-- Place code here as content -->
+  <div>This content will be shown as code and rendered</div>
+</schmancy-code-preview>
+
+// Component properties
+language: string    // Programming language for highlighting
+layout: string      // Layout direction for code/preview
+preview: boolean    // Whether to show preview (HTML only)
+```
+
+## Examples
+
+### Basic Usage
+
+```typescript
+// Simple code highlighting
+<schmancy-code language="javascript" code="console.log('Hello World')">
+</schmancy-code>
+
+// With copy button
+<schmancy-code 
+  language="typescript" 
+  code="const greeting: string = 'Hello TypeScript'" 
+  copyButton="true">
+</schmancy-code>
+```
+
+### Code Preview
+
+```typescript
+// HTML with live preview
+<schmancy-code-preview language="html">
+  <schmancy-button variant="filled">
+    Click Me
+  </schmancy-button>
+</schmancy-code-preview>
+
+// Horizontal layout
+<schmancy-code-preview language="html" layout="horizontal">
+  <div class="p-4 bg-primary-container rounded">
+    <schmancy-typography type="headline" token="sm">
+      Preview Example
+    </schmancy-typography>
+  </div>
+</schmancy-code-preview>
+
+// Code only (no preview)
+<schmancy-code-preview language="javascript" preview="false">
+  function calculateSum(a, b) {
+    return a + b;
+  }
+</schmancy-code-preview>
+```
+
+### Multi-line Code
+
+```typescript
+// Long code with wrapping
+<schmancy-code 
+  language="typescript" 
+  wrap="true"
+  copyButton="true"
+  code="${`
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  preferences: {
+    theme: 'light' | 'dark';
+    notifications: boolean;
+  };
+}
+
+class UserService {
+  async getUser(id: string): Promise<User> {
+    const response = await fetch(\`/api/users/\${id}\`);
+    return response.json();
+  }
+}
+  `.trim()}">
+</schmancy-code>
+```
+
+### Real-World Examples
+
+```typescript
+// Documentation example
+<schmancy-surface class="p-6">
+  <schmancy-typography type="title" token="lg" class="mb-4 block">
+    API Example
+  </schmancy-typography>
+  
+  <schmancy-code-preview language="html">
+    <schmancy-form @submit="${handleSubmit}">
+      <schmancy-input 
+        label="Email" 
+        type="email" 
+        required>
+      </schmancy-input>
+      <schmancy-button type="submit" variant="filled">
+        Submit
+      </schmancy-button>
+    </schmancy-form>
+  </schmancy-code-preview>
+</schmancy-surface>
+
+// Component showcase
+<schmancy-tabs>
+  <schmancy-tab slot="tab" active>Preview</schmancy-tab>
+  <schmancy-tab slot="tab">Code</schmancy-tab>
+  
+  <div slot="content">
+    <schmancy-code-preview language="html" preview="true">
+      <schmancy-card>
+        <schmancy-card-content>
+          <div slot="headline">Card Title</div>
+          <div>Card content goes here</div>
+        </schmancy-card-content>
+      </schmancy-card>
+    </schmancy-code-preview>
+  </div>
+  
+  <div slot="content">
+    <schmancy-code language="html" copyButton="true" code="${`
+<schmancy-card>
+  <schmancy-card-content>
+    <div slot="headline">Card Title</div>
+    <div>Card content goes here</div>
+  </schmancy-card-content>
+</schmancy-card>
+    `.trim()}">
+    </schmancy-code>
+  </div>
+</schmancy-tabs>
+```
+
+## Supported Languages
+
+- `javascript` - JavaScript syntax
+- `typescript` - TypeScript syntax
+- `html` / `xml` - HTML/XML markup
+- `markdown` - Markdown syntax
+- `bash` - Shell scripts
+
+## Implementation Details
+
+- Uses **highlight.js** for syntax highlighting
+- Automatic indentation detection and normalization
+- Dark theme optimized for readability
+- Shadow DOM encapsulation
+- Responsive layout support
+- Copy button uses clipboard API
+
+## Accessibility
+
+- Proper ARIA labels for copy button
+- Keyboard navigation support
+- Screen reader friendly code blocks
+- High contrast syntax colors
+
+## Best Practices
+
+1. **Language Selection**: Always specify the correct language for accurate highlighting
+2. **Code Formatting**: Pre-format code with proper indentation
+3. **Preview Usage**: Only use preview for HTML content
+4. **Long Code**: Enable wrapping for long lines to prevent horizontal scrolling
+5. **Copy Button**: Include for code snippets users might want to reuse
+
+## Common Pitfalls
+
+- **Escaping**: HTML entities in code strings need proper escaping
+- **Indentation**: Code preview component auto-detects minimum indentation
+- **Performance**: Very large code blocks may impact rendering
+
+## Related Components
+
+- **[Surface](./surface.md)**: Often used as container for code examples
+- **[Card](./card.md)**: Code blocks in documentation cards
+- **[Typography](./typography.md)**: For code captions and descriptions
+- **[Tabs](./tabs.md)**: Switching between code and preview
+
+## TypeScript Interface
+
+```typescript
+interface SchmancyCodeElement extends HTMLElement {
+  language: string;
+  code: string;
+  copyButton: boolean;
+  wrap: boolean;
+}
+
+interface SchmancyCodePreviewElement extends HTMLElement {
+  language: string;
+  layout: 'vertical' | 'horizontal';
+  preview: boolean;
+}
+```

package/ai/countries.md

@@ -0,0 +1,270 @@
+# Schmancy Countries Select - AI Reference
+
+## Quick Start
+
+```typescript
+import '@mhmo91/schmancy/extra/countries'
+```
+
+## Component Overview
+
+A specialized country selection component with autocomplete, built on top of schmancy-autocomplete with a comprehensive list of countries including flags and dial codes.
+
+## API
+
+```typescript
+// Countries Select Component
+<schmancy-select-countries
+  value?="string"                    // Selected country code
+  label?="string"                    // Label text (default: "Country")
+  hint?="string"                     // Helper text (default: "Please select a country")
+  placeholder?="string"              // Placeholder (default: "Select a country")
+  name?="string"                     // Form field name
+  required?="boolean"                // Required field
+  @change=${handleChange}>           // Selection change event
+</schmancy-select-countries>
+
+// Component Properties
+value: string         // ISO country code (e.g., "US", "GB")
+label: string        // Field label
+hint: string         // Helper text below field
+placeholder: string  // Placeholder text
+name: string         // Form field name
+required: boolean    // Required validation
+
+// Events
+@change  // Fires when country selection changes
+
+// Methods
+checkValidity() -> boolean      // Validate selection
+reportValidity() -> boolean     // Report validation state
+setCustomValidity(message) -> void  // Set custom error
+```
+
+## Examples
+
+### Basic Usage
+
+```typescript
+// Simple country selector
+<schmancy-select-countries 
+  @change=${(e) => console.log('Selected:', e.detail.value)}>
+</schmancy-select-countries>
+
+// With initial value
+<schmancy-select-countries 
+  value="US"
+  @change=${handleCountryChange}>
+</schmancy-select-countries>
+
+// Required field
+<schmancy-select-countries 
+  required
+  name="country"
+  label="Your Country"
+  hint="Required for shipping">
+</schmancy-select-countries>
+```
+
+### Form Integration
+
+```typescript
+// In a registration form
+<schmancy-form @submit=${handleSubmit}>
+  <schmancy-input 
+    label="Full Name" 
+    name="name" 
+    required>
+  </schmancy-input>
+  
+  <schmancy-select-countries 
+    name="country" 
+    required
+    @change=${updatePhoneFormat}>
+  </schmancy-select-countries>
+  
+  <schmancy-input 
+    label="Phone" 
+    name="phone" 
+    type="tel">
+  </schmancy-input>
+  
+  <schmancy-button type="submit" variant="filled">
+    Register
+  </schmancy-button>
+</schmancy-form>
+```
+
+### Real-World Examples
+
+```typescript
+// Address form with country
+class AddressForm extends LitElement {
+  @state() selectedCountry = '';
+  
+  render() {
+    return html`
+      <schmancy-surface class="p-6">
+        <schmancy-typography type="headline" token="sm" class="mb-4 block">
+          Shipping Address
+        </schmancy-typography>
+        
+        <schmancy-form @submit=${this.handleSubmit}>
+          <div class="grid gap-4">
+            <schmancy-input 
+              label="Street Address" 
+              name="street" 
+              required>
+            </schmancy-input>
+            
+            <div class="grid grid-cols-2 gap-4">
+              <schmancy-input 
+                label="City" 
+                name="city" 
+                required>
+              </schmancy-input>
+              
+              <schmancy-input 
+                label="Postal Code" 
+                name="postalCode" 
+                required>
+              </schmancy-input>
+            </div>
+            
+            <schmancy-select-countries 
+              name="country" 
+              required
+              value=${this.selectedCountry}
+              @change=${(e) => this.selectedCountry = e.detail.value}>
+            </schmancy-select-countries>
+            
+            ${this.selectedCountry === 'US' ? html`
+              <schmancy-select 
+                label="State" 
+                name="state" 
+                required>
+                <!-- State options -->
+              </schmancy-select>
+            ` : ''}
+          </div>
+          
+          <schmancy-button type="submit" variant="filled" class="mt-4">
+            Save Address
+          </schmancy-button>
+        </schmancy-form>
+      </schmancy-surface>
+    `
+  }
+}
+
+// Phone number with country code
+class PhoneInput extends LitElement {
+  @state() countryCode = '';
+  @state() dialCode = '';
+  
+  handleCountryChange(e) {
+    const country = countriesData.find(c => c.code === e.detail.value);
+    this.dialCode = country?.dial_code || '';
+  }
+  
+  render() {
+    return html`
+      <div class="space-y-4">
+        <schmancy-select-countries 
+          @change=${this.handleCountryChange}>
+        </schmancy-select-countries>
+        
+        <schmancy-input 
+          label="Phone Number"
+          .value=${this.dialCode}
+          placeholder="${this.dialCode} ">
+        </schmancy-input>
+      </div>
+    `
+  }
+}
+```
+
+## Country Data Structure
+
+Each country in the dataset includes:
+
+```typescript
+interface Country {
+  name: string;       // Full country name
+  code: string;       // ISO 3166-1 alpha-2 code
+  dial_code: string;  // International dialing code
+  flag: string;       // Flag emoji
+}
+
+// Example:
+{
+  name: "United States",
+  code: "US",
+  dial_code: "+1",
+  flag: "🇺🇸"
+}
+```
+
+## Features
+
+- **Comprehensive List**: All countries with ISO codes
+- **Flag Emojis**: Visual country identification
+- **Dial Codes**: International phone codes included
+- **Search**: Type to filter countries by name
+- **Keyboard Navigation**: Full keyboard support
+- **Form Integration**: Works with native forms
+- **Validation**: Built-in required field validation
+
+## Accessibility
+
+- Proper ARIA labels and roles
+- Keyboard navigation (arrow keys, enter, escape)
+- Screen reader announcements
+- High contrast mode support
+- Focus management
+
+## Best Practices
+
+1. **Default Selection**: Consider pre-selecting based on user's location
+2. **Validation**: Use required attribute for mandatory fields
+3. **Phone Integration**: Use dial_code for phone number inputs
+4. **Localization**: Country names are in English by default
+5. **Performance**: Virtual scrolling for large lists
+
+## Common Pitfalls
+
+- **Code vs Name**: Value is country code, not full name
+- **Case Sensitivity**: Country codes are uppercase
+- **Missing Countries**: Some territories may not be included
+- **Flag Display**: Emoji flags may not work on all systems
+
+## Related Components
+
+- **[Autocomplete](./autocomplete.md)**: Base component for country select
+- **[Form](./form.md)**: Form integration
+- **[Input](./input.md)**: Often used with phone inputs
+- **[Timezone](./timezone.md)**: Related location selector
+
+## TypeScript Interface
+
+```typescript
+interface SchmancySelectCountriesElement extends HTMLElement {
+  value: string;
+  label: string;
+  hint: string;
+  placeholder: string;
+  name: string;
+  required: boolean;
+  checkValidity(): boolean;
+  reportValidity(): boolean;
+  setCustomValidity(message: string): void;
+}
+
+// Change event
+interface CountryChangeEvent extends CustomEvent {
+  detail: {
+    value: string;  // Country code
+  };
+}
+```

package/ai/dialog.md

@@ -2,7 +2,8 @@
 
 ```js
 // Basic Dialog Component
-<schmancy-dialog>
+<schmancy-dialog
+  uid?="string">                             // Unique identifier for dialog instance
   <!-- Dialog content goes here -->
   <div>Dialog content</div>
 </schmancy-dialog>
@@ -20,9 +21,25 @@ dialog.hide(result?) -> void                 // Hide dialog with optional result
 // Dialog Events
 @close   // Fires when dialog is closed
 
-// Service API (higher-level abstraction with additional components)
+// CSS Variables
+--dialog-width: 360px                        // Controls dialog width
+
+// Confirm Dialog Component (used internally by service)
+<confirm-dialog
+  title?="string"                            // Dialog title
+  subtitle?="string"                         // Dialog subtitle  
+  message?="string"                          // Dialog message
+  confirm-text?="string"                     // Confirm button text (default: "Confirm")
+  cancel-text?="string"                      // Cancel button text (default: "Cancel")
+  variant?="default|danger"                  // Dialog variant (default: "default")
+  confirm-color?="primary|error|warning|success">  // Confirm button color
+  <div slot="content">Custom content</div>
+</confirm-dialog>
+
+// Service API (higher-level abstraction)
 $dialog.confirm({
   title?,
+  subtitle?,
   message?,
   confirmText?,
   cancelText?,
@@ -32,12 +49,14 @@ $dialog.confirm({
   width?: string,
   content?: TemplateResult|HTMLElement|Function,
   onConfirm?: Function,
-  onCancel?: Function
+  onCancel?: Function,
+  targetContainer?: HTMLElement              // Container to append dialog to (defaults to document.body)
 }) -> Promise<boolean>
 
 $dialog.ask(message, event?) -> Promise<boolean>
 $dialog.danger({...options}) -> Promise<boolean>
 $dialog.component(content, options?) -> Promise<boolean>
+$dialog.dismiss() -> boolean                 // Dismiss most recently opened dialog
 
 // Examples
 // Basic dialog usage