@mhmo91/schmancy 0.8.6 → 0.9.3

package/dist/ai/input.md

@@ -1,216 +1,56 @@
-# Schmancy Input - AI Reference
+# schmancy-input
 
-```js
-// Text Input
-<schmancy-input
-  id?="custom-id"                                      // Auto-generated if not provided
-  name="field-name"                                   // Form field name
-  label="Field Label"                                 // Label text
-  value="initial value"                               // Input value
-  type="text|password|email|number|tel|url|search|date|time|datetime-local" // Input type
-  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 (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
-  minlength?="number"                                 // Min character length
-  maxlength?="number"                                 // Max character length
-  min?="number|date"                                  // Min value (number/date)
-  max?="number|date"                                  // Max value (number/date)
-  step?="number|any"                                  // Step increment
-  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
-  @autofill=${handleAutofill}>                         // Autofill detected
-</schmancy-input>
+> Text input with form association, validation strategies, and size variants.
 
-// Input Methods
-input.focus(options?: FocusOptions) -> void
-input.blur() -> void
-input.click() -> void
-input.select() -> void
-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 }>
-@autofill // CustomEvent<{ value: string }>
-@reset    // CustomEvent<void>
-@focus    // Standard FocusEvent
-@blur     // Standard FocusEvent
-@click    // Standard MouseEvent
-
-// Examples
-// 1. Basic input with validation
-<schmancy-input 
-  name="email"
-  label="Email Address"
-  type="email"
-  required
-  placeholder="Enter your email"
-  @change=${(e) => console.log(e.target.value)}>
-</schmancy-input>
-
-// 2. Input with currency formatting
-<schmancy-input
-  name="amount"
-  label="Amount"
-  type="number"
-  .format=${(value) => `$${value.toFixed(2)}`}
-  .parse=${(value) => parseFloat(value.replace('$', ''))}
-  .validate=${(value) => value < 0 ? 'Amount must be positive' : ''}>
-</schmancy-input>
-
-// 3. Password input with visibility toggle
-<schmancy-input 
-  type="password"
-  label="Password"
-  name="password"
-  required
-  minlength="8"
-  @enter=${handleSubmit}>
-</schmancy-input>
-
-// 4. Number input with constraints
-<schmancy-input
-  type="number"
-  label="Quantity"
-  name="quantity"
-  min="1"
-  max="100"
-  step="1"
-  value="1">
-</schmancy-input>
-
-// 5. Input with error state and hint
-<schmancy-input
-  label="Username"
-  name="username"
-  ?error=${hasError}
-  hint=${hasError ? "Username already taken" : "Choose a unique username"}
-  pattern="^[a-zA-Z0-9_]+$">
-</schmancy-input>
-
-// 6. Centered readonly input that's clickable
-<schmancy-input
-  label="Invitation Code"
-  value="ABC123XYZ"
-  readonly
-  clickable
-  align="center"
-  @click=${copyToClipboard}>
-</schmancy-input>
-```
-
-## Related Components
-- **[Form](./form.md)**: Container for input and other form components
-- **[Textarea](./textarea.md)**: Multi-line text input fields
-- **[Icons](./icons.md)**: Can be used within input slots
-- **[Autocomplete](./autocomplete.md)**: Extended input with suggestions
-
-## Technical Details
-
-### Form Association
-The component is form-associated using ElementInternals API, which means:
-- It participates in form submission
-- Works with form validation
-- Integrates with FormData
-- Supports constraint validation API
-
-### Accessibility Features
-- Auto-generated IDs for label association
-- ARIA attributes (aria-label, aria-required, aria-invalid, etc.)
-- Proper form association
-- Keyboard navigation support
-
-### Validation
-```typescript
-// Built-in HTML5 validation
-input.checkValidity()     // Returns true/false
-input.reportValidity()    // Shows validation message
-input.setCustomValidity('Custom error')  // Set custom message
-input.getValidity()       // Get ValidityState object
+## Usage
+```html
+<schmancy-input label="Email" type="email" required></schmancy-input>
 ```
 
-### 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
-interface InputValidator {
-  (value: any): string | null;
-}
-
-interface InputFormatter {
-  (value: any): string;
-}
-
-interface InputParser {
-  (displayValue: string): any;
-}
+## Properties
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| value | string | `''` | Current input value |
+| type | string | `'text'` | HTML input type (text, password, email, number, date, etc.) |
+| label | string | `''` | Label text above the input |
+| placeholder | string | `''` | Placeholder text |
+| name | string | auto | Form submission name |
+| required | boolean | `false` | Whether the field is required |
+| disabled | boolean | `false` | Whether the field is disabled |
+| readonly | boolean | `false` | Whether the field is read-only |
+| error | boolean | `false` | Whether the field shows an error state |
+| validationMessage | string | `''` | Custom validation message |
+| hint | string | `undefined` | Hint text below the field |
+| size | `'xxs'\|'xs'\|'sm'\|'md'\|'lg'` | `'md'` | Input height (24-56px) |
+| validateOn | `'always'\|'touched'\|'dirty'\|'submitted'` | `'touched'` | When to show validation |
+| align | `'left'\|'center'\|'right'` | `'left'` | Text alignment |
+| pattern | string | `undefined` | Regex validation pattern |
+| inputmode | string | `undefined` | Virtual keyboard hint |
+| min/max | string | `undefined` | Range constraints |
+| minlength/maxlength | number | `undefined` | Length constraints |
+| clickable | boolean | `false` | Show pointer cursor when readonly |
+| autofocus | boolean | `false` | Auto-focus on mount |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| input | `{ value: string }` | Every keystroke |
+| change | `{ value: string }` | On blur/native change |
+| enter | `{ value: string }` | When Enter key is pressed |
+
+## Examples
+```html
+<!-- Password with validation -->
+<schmancy-input label="Password" type="password" required minlength="8"
+  hint="At least 8 characters"></schmancy-input>
+
+<!-- Compact number input -->
+<schmancy-input type="number" size="xs" min="0" max="100"
+  placeholder="Qty"></schmancy-input>
+
+<!-- With enter handler -->
+<schmancy-input label="Search" placeholder="Type and press Enter"
+  @enter=${(e) => search(e.detail.value)}></schmancy-input>
 ```
 
-### Common Use Cases
-
-1. **Password input with show/hide functionality**
-   ```html
-   <schmancy-input
-     type="password"
-     label="Password"
-     name="password"
-     @enter=${handleSubmit}>
-   </schmancy-input>
-   ```
-
-2. **Validating email format**
-   ```html
-   <schmancy-input
-     type="email"
-     label="Email"
-     name="email"
-     .validate=${value => {
-       const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-       return emailRegex.test(value) ? '' : 'Please enter a valid email';
-     }}>
-   </schmancy-input>
-   ```
-
-3. **Input with character count**
-   ```html
-   <schmancy-input
-     label="Message"
-     name="message"
-     maxlength="100"
-     hint="0/100 characters"
-     @input=${e => {
-       const count = e.target.value.length;
-       e.target.hint = `${count}/100 characters`;
-     }}>
-   </schmancy-input>
-   ```
+**Tag aliases:** `<sch-input>` (backward compatible)

package/dist/ai/json.md

@@ -0,0 +1,33 @@
+# schmancy-json
+
+> Pretty-printed JSON viewer with key highlighting and click-to-copy.
+
+## Usage
+```html
+<schmancy-json .data=${{ user: 'alice', score: 42 }}></schmancy-json>
+```
+
+## Properties
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `data` | object | `{}` | JSON-serialisable data to display |
+| `highlightKeys` | string[] | `[]` | Keys whose values are highlighted (warning color, bold) |
+| `compact` | boolean | `false` | Disable pretty-printing (single line) |
+
+## Behavior
+- Click anywhere on the viewer to copy the full JSON to clipboard (fires `$notify.success`).
+- Container uses `surface-container` glass background with hover state.
+- Monospace font, 10px size — optimized for dense debug output.
+- Values for `highlightKeys` render inside `<span class="text-warning-default font-bold">`.
+
+## Examples
+```html
+<!-- Debug view with key highlights -->
+<schmancy-json
+  .data=${this.state}
+  .highlightKeys=${['error', 'pending']}
+></schmancy-json>
+
+<!-- Compact inline -->
+<schmancy-json compact .data=${{ id: 42, status: 'ok' }}></schmancy-json>
+```

package/dist/ai/layout.md

@@ -1,187 +1,63 @@
-# Schmancy Layout - AI Reference
+# Schmancy Layout
 
-## ⚠️ DEPRECATION NOTICE
+> Layout primitives: `schmancy-grid`, `schmancy-flex`, `schmancy-scroll`, plus `sch-grid` / `sch-flex` v2 variants.
 
-The following layout components are **deprecated** and will be removed in a future version:
-- `<schmancy-grid>` - Use Tailwind CSS grid classes instead
-- `<schmancy-flex>` - Use Tailwind CSS flex classes instead  
-- `<sch-flex>` - Use Tailwind CSS flex classes instead
-- Layout base class - Use Tailwind utilities directly
-
-### Migration Guide
+> **Prefer Tailwind classes directly** for layout in new code. These components exist for quick composition and design-token consistency (`gap="sm|md|lg"` maps to theme spacing).
 
+## schmancy-grid
 ```html
-<!-- OLD (deprecated) -->
-<schmancy-grid columns="3" gap="16px">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
+<schmancy-grid cols="1fr 2fr 1fr" gap="md" align="center">
+  <div>Left</div><div>Center</div><div>Right</div>
 </schmancy-grid>
-
-<!-- NEW (recommended) -->
-<div class="grid grid-cols-3 gap-4">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</div>
-
-<!-- OLD (deprecated) -->
-<schmancy-flex direction="row" gap="16px" justify-content="space-between">
-  <div>Left</div>
-  <div>Right</div>
-</schmancy-flex>
-
-<!-- NEW (recommended) -->
-<div class="flex flex-row gap-4 justify-between">
-  <div>Left</div>
-  <div>Right</div>
-</div>
 ```
 
-## Modern Layout Approach with Tailwind CSS
-
-Instead of using deprecated layout components, use Tailwind CSS utilities directly:
-
-### Grid Layouts
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `flow` | `'row' \| 'col' \| 'dense' \| 'row-dense' \| 'col-dense'` | `'row'` | Grid auto-flow |
+| `align` | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'` | `'stretch'` | Item alignment |
+| `justify` | `'start' \| 'center' \| 'end' \| 'stretch'` | `'stretch'` | Item justification |
+| `content` | `'start' \| 'center' \| 'end' \| 'stretch' \| 'around' \| 'evenly' \| 'between'` | — | Align-content |
+| `gap` | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg'` | `'none'` | Grid gap |
+| `cols` | string | — | grid-template-columns (e.g. `"1fr 2fr"`) |
+| `rows` | string | — | grid-template-rows |
+| `rcols` | object | — | Responsive cols: `{ sm: '1fr', md: '1fr 1fr', lg: '1fr 2fr 1fr' }` |
+| `wrap` | boolean | `false` | Grid auto-wrap |
+
+## schmancy-flex
 ```html
-<!-- Basic grid -->
-<div class="grid grid-cols-3 gap-4">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</div>
-
-<!-- Responsive grid -->
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-  <div>Card 1</div>
-  <div>Card 2</div>
-  <div>Card 3</div>
-  <div>Card 4</div>
-</div>
-
-<!-- Grid with template areas -->
-<div class="grid grid-rows-[auto_1fr_auto] grid-cols-[250px_1fr] h-screen">
-  <header class="col-span-2">Header</header>
-  <aside>Sidebar</aside>
-  <main>Content</main>
-  <footer class="col-span-2">Footer</footer>
-</div>
-```
-
-### Flex Layouts
-```html
-<!-- Basic flex -->
-<div class="flex gap-4">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div class="flex-1">Flexible Item</div>
-</div>
-
-<!-- Column direction with alignment -->
-<div class="flex flex-col items-center gap-4">
-  <h2>Title</h2>
-  <p>Content</p>
-  <button>Action</button>
-</div>
-
-<!-- Responsive flex -->
-<div class="flex flex-col md:flex-row items-center md:justify-between gap-4">
-  <div>Logo</div>
-  <nav class="flex gap-2">
-    <a href="#">Link 1</a>
-    <a href="#">Link 2</a>
-  </nav>
-</div>
+<schmancy-flex flow="row" justify="between" align="center" gap="md">
+  <div>Logo</div><div>Nav</div>
+</schmancy-flex>
 ```
 
-### Common Layout Patterns
+| Property | Type | Default |
+|----------|------|---------|
+| `flow` | `'row' \| 'row-reverse' \| 'col' \| 'col-reverse'` | `'col'` |
+| `wrap` | `'wrap' \| 'nowrap' \| 'wrap-reverse'` | `'wrap'` |
+| `align` | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'` | `'start'` |
+| `justify` | `'start' \| 'center' \| 'end' \| 'stretch' \| 'between'` | `'start'` |
+| `gap` | `'none' \| 'sm' \| 'md' \| 'lg'` | `'none'` |
 
+## schmancy-scroll
 ```html
-<!-- Form layout -->
-<form class="flex flex-col gap-4 max-w-md mx-auto">
-  <h2 class="text-2xl font-bold">Contact Form</h2>
-  <schmancy-input label="Name"></schmancy-input>
-  <schmancy-input label="Email"></schmancy-input>
-  <schmancy-textarea label="Message"></schmancy-textarea>
-  
-  <div class="flex gap-2 justify-end">
-    <schmancy-button variant="outlined">Cancel</schmancy-button>
-    <schmancy-button variant="filled">Submit</schmancy-button>
-  </div>
-</form>
-
-<!-- App layout -->
-<div class="grid grid-rows-[auto_1fr] h-screen">
-  <header class="border-b">
-    <!-- Navigation -->
-  </header>
-  <div class="grid grid-cols-[250px_1fr]">
-    <aside class="border-r">
-      <!-- Sidebar -->
-    </aside>
-    <main class="overflow-auto p-4">
-      <!-- Content -->
-    </main>
-  </div>
-</div>
-
-<!-- Card grid -->
-<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
-  <schmancy-card>Card 1</schmancy-card>
-  <schmancy-card>Card 2</schmancy-card>
-  <schmancy-card>Card 3</schmancy-card>
-</div>
+<schmancy-scroll hide direction="vertical" name="main">
+  <!-- long content -->
+</schmancy-scroll>
 ```
 
-### Useful Tailwind Classes
-
-#### Grid
-- `grid` - Display grid
-- `grid-cols-{n}` - Number of columns
-- `grid-rows-{n}` - Number of rows
-- `gap-{size}` - Gap between items
-- `col-span-{n}` - Column span
-- `row-span-{n}` - Row span
-- `place-items-{align}` - Align items
-- `place-content-{align}` - Align content
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `hide` | boolean | `false` | Hide scrollbar in supported browsers |
+| `direction` | `'vertical' \| 'horizontal' \| 'both'` | `'both'` | Scroll axes |
+| `name` | string | — | Identifier for global scroll events |
+| `debounce` | number | — | Debounce time in ms for scroll events |
 
-#### Flex
-- `flex` - Display flex
-- `flex-row` / `flex-col` - Direction
-- `flex-wrap` / `flex-nowrap` - Wrapping
-- `items-{align}` - Align items
-- `justify-{align}` - Justify content
-- `gap-{size}` - Gap between items
-- `flex-1` / `flex-none` - Flex grow/shrink
+Smooth scroll-behavior, overscroll containment, and support for flex-shrink sizing.
 
-#### Spacing
-- `p-{size}` - Padding
-- `m-{size}` - Margin
-- `space-x-{size}` - Horizontal spacing
-- `space-y-{size}` - Vertical spacing
+## sch-grid / sch-flex (v2)
 
-#### Sizing
-- `w-{size}` - Width
-- `h-{size}` - Height
-- `min-w-{size}` - Min width
-- `max-w-{size}` - Max width
-- `min-h-{size}` - Min height
-- `max-h-{size}` - Max height
+Reflected-attribute variants optimized for styling via CSS selectors. Same prop model as the classic components with a `sch-` prefix. Use when you need to target the layout from parent CSS without Tailwind.
 
-## Non-Deprecated Components
-
-### Scroll Container (if available)
-```html
-<schmancy-scroll
-  direction="vertical|horizontal|both"
-  scrollbar="auto|always|hover|none">
-  <!-- Scrollable content -->
-</schmancy-scroll>
-```
-
-For most cases, use Tailwind's overflow utilities instead:
-```html
-<div class="overflow-auto h-64">
-  <!-- Scrollable content -->
-</div>
-```
+## Notes
+- All layout components extend the base `Layout` class which exposes pass-through CSS properties (padding, margin, width, position, border, etc.).
+- Prefer Tailwind (`class="flex items-center gap-2"`) for new code — these components remain for consistent theme-driven gaps and rapid prototyping.