microui-wc 0.1.0

package/src/components/mu-schema-form.js

@@ -0,0 +1,441 @@
+/**
+ * mu-schema-form.js - Auto-Generated Forms from JSON Schema
+ * 
+ * AI-First form component that generates microUI form fields automatically
+ * from a JSON Schema definition. Dramatically reduces boilerplate for form creation.
+ * 
+ * @example
+ * <mu-schema-form id="user-form"></mu-schema-form>
+ * 
+ * <script>
+ *     const form = document.getElementById('user-form');
+ *     form.schema = {
+ *         type: 'object',
+ *         properties: {
+ *             name: { type: 'string', title: 'Full Name', minLength: 2 },
+ *             email: { type: 'string', format: 'email', title: 'Email' },
+ *             role: { type: 'string', enum: ['user', 'admin'], title: 'Role' },
+ *             active: { type: 'boolean', title: 'Active', default: true }
+ *         },
+ *         required: ['name', 'email']
+ *     };
+ *     
+ *     form.addEventListener('mu-submit', (e) => {
+ *         console.log('Form data:', e.detail);
+ *     });
+ * </script>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { escapeHTML } from '../core/utils.js';
+
+export class MuSchemaForm extends MuElement {
+    static get observedAttributes() {
+        return ['submit-label', 'reset-label', 'inline', 'readonly', 'disabled'];
+    }
+
+    static baseClass = 'mu-schema-form';
+    static cssFile = 'schema-form';
+
+    constructor() {
+        super();
+
+        this._schema = null;
+        this._values = {};
+        this._errors = {};
+        this._touched = {};
+    }
+
+    // === PROPERTIES ===
+
+    get schema() {
+        return this._schema;
+    }
+
+    set schema(value) {
+        this._schema = value;
+        this._initializeValues();
+        if (this.isConnected) this.render();
+    }
+
+    get submitLabel() {
+        return this.getAttribute('submit-label') || 'Submit';
+    }
+
+    get resetLabel() {
+        return this.getAttribute('reset-label') || 'Reset';
+    }
+
+    get inline() {
+        return this.hasAttribute('inline');
+    }
+
+    get readonly() {
+        return this.hasAttribute('readonly');
+    }
+
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+
+    // === LIFECYCLE ===
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (this.isConnected && oldVal !== newVal) {
+            this.render();
+        }
+    }
+
+    // === PUBLIC API ===
+
+    /**
+     * Get current form values
+     * @returns {Object}
+     */
+    getValues() {
+        return { ...this._values };
+    }
+
+    /**
+     * Set form values
+     * @param {Object} values
+     */
+    setValues(values) {
+        this._values = { ...this._values, ...values };
+        this.render();
+    }
+
+    /**
+     * Validate all fields
+     * @returns {boolean} True if valid
+     */
+    validate() {
+        if (!this._schema || !this._schema.properties) return true;
+
+        this._errors = {};
+        const required = this._schema.required || [];
+
+        for (const [field, def] of Object.entries(this._schema.properties)) {
+            const value = this._values[field];
+            const errors = this._validateField(field, value, def, required.includes(field));
+            if (errors.length > 0) {
+                this._errors[field] = errors;
+            }
+        }
+
+        this.render();
+        return Object.keys(this._errors).length === 0;
+    }
+
+    /**
+     * Get validation errors
+     * @returns {Object}
+     */
+    getErrors() {
+        return { ...this._errors };
+    }
+
+    /**
+     * Reset form to default values
+     */
+    reset() {
+        this._initializeValues();
+        this._errors = {};
+        this._touched = {};
+        this.render();
+
+        this.emit('mu-reset', { values: this.getValues() }, { bubbles: true });
+    }
+
+    /**
+     * Submit the form programmatically
+     */
+    submit() {
+        if (this.validate()) {
+            this.emit('mu-submit', this.getValues(), { bubbles: true });
+        }
+    }
+
+    // === INTERNAL METHODS ===
+
+    _initializeValues() {
+        this._values = {};
+        if (!this._schema || !this._schema.properties) return;
+
+        for (const [field, def] of Object.entries(this._schema.properties)) {
+            if (def.default !== undefined) {
+                this._values[field] = def.default;
+            } else if (def.type === 'boolean') {
+                this._values[field] = false;
+            } else if (def.type === 'number' || def.type === 'integer') {
+                this._values[field] = null;
+            } else {
+                this._values[field] = '';
+            }
+        }
+    }
+
+    _validateField(field, value, def, isRequired) {
+        const errors = [];
+
+        // Required check
+        if (isRequired && (value === '' || value === null || value === undefined)) {
+            errors.push(`${def.title || field} is required`);
+            return errors;
+        }
+
+        if (value === '' || value === null || value === undefined) return errors;
+
+        // Type-specific validation
+        if (def.type === 'string') {
+            if (def.minLength && value.length < def.minLength) {
+                errors.push(`Minimum ${def.minLength} characters`);
+            }
+            if (def.maxLength && value.length > def.maxLength) {
+                errors.push(`Maximum ${def.maxLength} characters`);
+            }
+            if (def.pattern && !new RegExp(def.pattern).test(value)) {
+                errors.push(def.patternError || 'Invalid format');
+            }
+            if (def.format === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                errors.push('Invalid email address');
+            }
+            if (def.format === 'url' && !/^https?:\/\/.+/.test(value)) {
+                errors.push('Invalid URL');
+            }
+        }
+
+        if (def.type === 'number' || def.type === 'integer') {
+            const num = Number(value);
+            if (isNaN(num)) {
+                errors.push('Must be a number');
+            } else {
+                if (def.minimum !== undefined && num < def.minimum) {
+                    errors.push(`Minimum value is ${def.minimum}`);
+                }
+                if (def.maximum !== undefined && num > def.maximum) {
+                    errors.push(`Maximum value is ${def.maximum}`);
+                }
+            }
+        }
+
+        return errors;
+    }
+
+    _getInputType(def) {
+        if (def.format === 'email') return 'email';
+        if (def.format === 'password') return 'password';
+        if (def.format === 'date') return 'date';
+        if (def.format === 'time') return 'time';
+        if (def.format === 'datetime-local') return 'datetime-local';
+        if (def.format === 'url') return 'url';
+        if (def.format === 'tel') return 'tel';
+        if (def.type === 'number' || def.type === 'integer') return 'number';
+        return 'text';
+    }
+
+    _renderField(field, def, isRequired) {
+        const rawValue = this._values[field] ?? '';
+        const errors = this._errors[field] || [];
+        const hasError = errors.length > 0;
+
+        // XSS Protection: escape all schema-derived content
+        const safeField = escapeHTML(field);
+        const safeLabel = escapeHTML(def.title || field);
+        const safePlaceholder = escapeHTML(def.placeholder || '');
+        const safeDescription = escapeHTML(def.description || '');
+        const safeValue = escapeHTML(String(rawValue));
+        const safeError = hasError ? escapeHTML(errors[0]) : '';
+        const disabled = this.disabled || def.readOnly;
+        const readonly = this.readonly;
+
+        // Boolean → Switch
+        if (def.type === 'boolean') {
+            return `
+                <div class="mu-schema-form-field" data-field="${safeField}">
+                    <div class="mu-schema-form-switch-row">
+                        <mu-switch 
+                            ${rawValue ? 'checked' : ''}
+                            ${disabled ? 'disabled' : ''}
+                            data-field="${safeField}"
+                        ></mu-switch>
+                        <label class="mu-schema-form-switch-label">${safeLabel}</label>
+                    </div>
+                    ${safeDescription ? `<div class="mu-schema-form-description">${safeDescription}</div>` : ''}
+                </div>
+            `;
+        }
+
+        // Enum → Dropdown
+        if (def.enum) {
+            const options = def.enum.map((val, i) => {
+                const safeOptValue = escapeHTML(String(val));
+                const safeOptLabel = escapeHTML(def.enumLabels?.[i] || String(val));
+                return `<mu-option value="${safeOptValue}" ${rawValue === val ? 'selected' : ''}>${safeOptLabel}</mu-option>`;
+            }).join('');
+
+            return `
+                <div class="mu-schema-form-field ${hasError ? 'mu-schema-form-field-error' : ''}" data-field="${safeField}">
+                    <mu-dropdown 
+                        label="${safeLabel}${isRequired ? ' *' : ''}"
+                        value="${safeValue}"
+                        ${disabled ? 'disabled' : ''}
+                        ${isRequired ? 'required' : ''}
+                        data-field="${safeField}"
+                    >
+                        ${options}
+                    </mu-dropdown>
+                    ${safeDescription ? `<div class="mu-schema-form-description">${safeDescription}</div>` : ''}
+                    ${hasError ? `<div class="mu-schema-form-error">${safeError}</div>` : ''}
+                </div>
+            `;
+        }
+
+        // Multiline string → Textarea
+        if (def.type === 'string' && def.multiline) {
+            return `
+                <div class="mu-schema-form-field ${hasError ? 'mu-schema-form-field-error' : ''}" data-field="${safeField}">
+                    <mu-textarea
+                        label="${safeLabel}${isRequired ? ' *' : ''}"
+                        placeholder="${safePlaceholder}"
+                        ${disabled ? 'disabled' : ''}
+                        ${readonly ? 'readonly' : ''}
+                        ${isRequired ? 'required' : ''}
+                        data-field="${safeField}"
+                    >${safeValue}</mu-textarea>
+                    ${safeDescription ? `<div class="mu-schema-form-description">${safeDescription}</div>` : ''}
+                    ${hasError ? `<div class="mu-schema-form-error">${safeError}</div>` : ''}
+                </div>
+            `;
+        }
+
+        // Default → Input
+        const inputType = this._getInputType(def);
+        return `
+            <div class="mu-schema-form-field ${hasError ? 'mu-schema-form-field-error' : ''}" data-field="${safeField}">
+                <mu-input
+                    type="${inputType}"
+                    label="${safeLabel}${isRequired ? ' *' : ''}"
+                    placeholder="${safePlaceholder}"
+                    value="${safeValue}"
+                    ${disabled ? 'disabled' : ''}
+                    ${readonly ? 'readonly' : ''}
+                    ${isRequired ? 'required' : ''}
+                    ${def.minimum !== undefined ? `min="${def.minimum}"` : ''}
+                    ${def.maximum !== undefined ? `max="${def.maximum}"` : ''}
+                    ${def.minLength ? `minlength="${def.minLength}"` : ''}
+                    ${def.maxLength ? `maxlength="${def.maxLength}"` : ''}
+                    data-field="${safeField}"
+                ></mu-input>
+                ${safeDescription ? `<div class="mu-schema-form-description">${safeDescription}</div>` : ''}
+                ${hasError ? `<div class="mu-schema-form-error">${safeError}</div>` : ''}
+            </div>
+        `;
+    }
+
+    render() {
+        if (!this._schema || !this._schema.properties) {
+            this.innerHTML = `
+                <div class="mu-schema-form-empty-state">
+                    Set the <code>schema</code> property to generate a form
+                </div>
+            `;
+            return;
+        }
+
+        const required = this._schema.required || [];
+        const fields = Object.entries(this._schema.properties)
+            .map(([field, def]) => this._renderField(field, def, required.includes(field)))
+            .join('');
+
+        this.innerHTML = `
+            <div class="mu-schema-form ${this.inline ? 'mu-schema-form-inline' : ''}">
+                ${fields}
+                
+                <div class="mu-schema-form-actions">
+                    <mu-button variant="filled" data-action="submit" ${this.disabled ? 'disabled' : ''}>
+                        ${this.submitLabel}
+                    </mu-button>
+                    <mu-button variant="text" data-action="reset" ${this.disabled ? 'disabled' : ''}>
+                        ${this.resetLabel}
+                    </mu-button>
+                </div>
+            </div>
+        `;
+
+        this._attachEventListeners();
+    }
+
+    _attachEventListeners() {
+        // Input changes
+        this.querySelectorAll('mu-input').forEach(input => {
+            this.listen(input, 'mu-input', (e) => {
+                const field = input.dataset.field;
+                this._values[field] = e.detail.value;
+                this._touched[field] = true;
+
+                // Clear error on edit
+                if (this._errors[field]) {
+                    delete this._errors[field];
+                    input.closest('.mu-schema-form-field').classList.remove('mu-schema-form-field-error');
+                    input.closest('.mu-schema-form-field').querySelector('.mu-schema-form-error')?.remove();
+                }
+
+                this.emit('mu-change', { field, value: e.detail.value, values: this.getValues() }, { bubbles: true });
+            });
+        });
+
+        // Textarea changes
+        this.querySelectorAll('mu-textarea').forEach(textarea => {
+            this.listen(textarea, 'mu-input', (e) => {
+                const field = textarea.dataset.field;
+                this._values[field] = e.detail.value;
+                this._touched[field] = true;
+
+                this.emit('mu-change', { field, value: e.detail.value, values: this.getValues() }, { bubbles: true });
+            });
+        });
+
+        // Dropdown changes
+        this.querySelectorAll('mu-dropdown').forEach(dropdown => {
+            this.listen(dropdown, 'mu-change', (e) => {
+                const field = dropdown.dataset.field;
+                this._values[field] = e.detail.value;
+                this._touched[field] = true;
+
+                this.emit('mu-change', { field, value: e.detail.value, values: this.getValues() }, { bubbles: true });
+            });
+        });
+
+        // Switch changes
+        this.querySelectorAll('mu-switch').forEach(sw => {
+            this.listen(sw, 'mu-change', (e) => {
+                const field = sw.dataset.field;
+                this._values[field] = e.detail.checked;
+                this._touched[field] = true;
+
+                this.emit('mu-change', { field, value: e.detail.checked, values: this.getValues() }, { bubbles: true });
+            });
+        });
+    }
+
+    /**
+     * Handle actions from MuElement's centralized event delegation
+     */
+    handleAction(action, target, event) {
+        if (action === 'submit') {
+            this.submit();
+        } else if (action === 'reset') {
+            this.reset();
+        }
+    }
+}
+
+if (!customElements.get('mu-schema-form')) {
+    customElements.define('mu-schema-form', MuSchemaForm);
+}

package/src/components/mu-sidebar.js

@@ -0,0 +1,81 @@
+/**
+ * @fileoverview mu-sidebar - Collapsible Sidebar Component
+ * 
+ * Usage:
+ * <mu-sidebar open>
+ *   <mu-sidebar-item icon="home" active>Dashboard</mu-sidebar-item>
+ *   <mu-sidebar-item icon="settings">Settings</mu-sidebar-item>
+ * </mu-sidebar>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { bus, UIEvents } from '../core/bus.js';
+
+export class MuSidebar extends MuElement {
+    static baseClass = 'mu-sidebar';
+    static observedAttributes = ['open', 'width'];
+
+    render() {
+        const width = this.attr('width', '250px');
+
+        this.style.width = this.has('open') ? width : '64px';
+        this.style.height = '100vh';
+        this.style.background = 'var(--md-sys-color-surface-container)';
+        this.style.borderRight = '1px solid var(--md-sys-color-outline-variant)';
+        this.style.transition = 'width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized)';
+        this.style.overflow = 'hidden';
+        this.style.display = 'flex';
+        this.style.flexDirection = 'column';
+    }
+
+    update(attr, newValue, oldValue) {
+        this.render();
+    }
+
+    toggle() {
+        if (this.has('open')) {
+            this.removeAttribute('open');
+        } else {
+            this.setAttribute('open', '');
+        }
+        this.emit('mu-sidebar-toggle', { open: this.has('open') });
+    }
+}
+
+export class MuSidebarItem extends MuElement {
+    static baseClass = 'mu-sidebar__item';
+    static observedAttributes = ['icon', 'active'];
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.listen(this, 'click', () => {
+            this.emit('mu-sidebar-select', { item: this });
+        });
+    }
+
+    render() {
+        const icon = this.attr('icon', '');
+        const text = this.textContent;
+
+        this.style.display = 'flex';
+        this.style.alignItems = 'center';
+        this.style.gap = 'var(--md-sys-spacing-md, 16px)';
+        this.style.padding = '12px 16px';
+        this.style.cursor = 'pointer';
+        this.style.borderRadius = 'var(--md-sys-shape-corner-medium, 8px)';
+        this.style.margin = '4px 8px';
+        this.style.transition = 'background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)';
+
+        if (this.has('active')) {
+            this.style.background = 'var(--md-sys-color-primary-container)';
+            this.style.color = 'var(--md-sys-color-on-primary-container)';
+        }
+    }
+
+    update(attr, newValue, oldValue) {
+        this.render();
+    }
+}
+
+define('mu-sidebar', MuSidebar);
+define('mu-sidebar-item', MuSidebarItem);

package/src/components/mu-skeleton.js

@@ -0,0 +1,69 @@
+/**
+ * @fileoverview mu-skeleton - Skeleton Loader Component
+ * 
+ * Usage: 
+ * <mu-skeleton width="200px" height="20px"></mu-skeleton>
+ * <mu-skeleton variant="circle" size="40px"></mu-skeleton>
+ * <mu-skeleton variant="text" lines="3"></mu-skeleton>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuSkeleton extends MuElement {
+    static baseClass = 'mu-skeleton';
+    static observedAttributes = ['variant', 'width', 'height', 'size', 'lines'];
+
+    render() {
+        // Idempotent: skip if already rendered (has skeleton line or animation)
+        if (this.querySelector('.mu-skeleton__line') || this.style.animation) {
+            return;
+        }
+
+        const variant = this.attr('variant', 'rect');
+        const width = this.attr('width', '100%');
+        const height = this.attr('height', '20px');
+        const size = this.attr('size', '40px');
+        const lines = parseInt(this.attr('lines', '1'));
+
+        this.style.display = 'block';
+
+        if (variant === 'text' && lines > 1) {
+            // Multiple text lines
+            this.innerHTML = Array(lines).fill(0).map((_, i) =>
+                `<div class="mu-skeleton__line" style="
+                    height: 16px;
+                    margin-bottom: 8px;
+                    width: ${i === lines - 1 ? '70%' : '100%'};
+                    background: var(--md-sys-color-surface-container-highest);
+                    border-radius: 4px;
+                    animation: mu-skeleton-pulse 1.5s ease-in-out infinite;
+                "></div>`
+            ).join('');
+        } else {
+            this.style.width = variant === 'circle' ? size : width;
+            this.style.height = variant === 'circle' ? size : height;
+            this.style.borderRadius = variant === 'circle' ? '50%' : '4px';
+            this.style.background = 'var(--md-sys-color-surface-container-highest)';
+            this.style.animation = 'mu-skeleton-pulse 1.5s ease-in-out infinite';
+        }
+
+        // Add keyframes if not exist
+        if (!document.getElementById('mu-skeleton-styles')) {
+            const style = document.createElement('style');
+            style.id = 'mu-skeleton-styles';
+            style.textContent = `
+                @keyframes mu-skeleton-pulse {
+                    0%, 100% { opacity: 1; }
+                    50% { opacity: 0.5; }
+                }
+            `;
+            document.head.appendChild(style);
+        }
+    }
+
+    update(attr, newValue, oldValue) {
+        this.render();
+    }
+}
+
+define('mu-skeleton', MuSkeleton);

package/src/components/mu-spinner.js

@@ -0,0 +1,30 @@
+/**
+ * @fileoverview mu-spinner - MD3 Circular Progress Indicator
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuSpinner extends MuElement {
+    static baseClass = 'mu-spinner';
+    static observedAttributes = ['size', 'color'];
+
+    render() {
+        // Idempotent: skip if already rendered  
+        if (this.querySelector('.mu-spinner__circle')) return;
+
+        this.innerHTML = '<span class="mu-spinner__circle"></span>';
+        this.#updateClasses();
+    }
+
+    update(attr, newValue, oldValue) {
+        this.#updateClasses();
+    }
+
+    #updateClasses() {
+        const size = this.attr('size', 'md');
+        const color = this.attr('color', 'primary');
+        this.className = `mu-spinner mu-spinner--${size} mu-spinner--${color}`;
+    }
+}
+
+define('mu-spinner', MuSpinner);

package/src/components/mu-stack.js

@@ -0,0 +1,59 @@
+/**
+ * @fileoverview mu-stack - Flexbox Stack Layout Component
+ * 
+ * Usage: <mu-stack direction="column" gap="md" align="center">...</mu-stack>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuStack extends MuElement {
+    static baseClass = 'mu-stack';
+    static observedAttributes = ['direction', 'gap', 'align', 'justify', 'wrap', 'nowrap'];
+
+    render() {
+        this.#updateStyles();
+    }
+
+    update(attr, newValue, oldValue) {
+        this.#updateStyles();
+    }
+
+    #updateStyles() {
+        const direction = this.attr('direction', 'column');
+        const gap = this.attr('gap', 'md');
+        const align = this.attr('align', 'stretch');
+        const justify = this.attr('justify', 'flex-start');
+        // SOTA 2026: row direction wraps by default for responsive layouts
+        // Use nowrap attribute to opt-out, or wrap attribute on column for opt-in
+        const hasWrap = this.has('wrap');
+        const hasNowrap = this.has('nowrap');
+        const isRow = direction === 'row' || direction === 'row-reverse';
+        // Row: wrap by default unless nowrap specified
+        // Column: nowrap by default unless wrap specified
+        const shouldWrap = isRow ? !hasNowrap : hasWrap;
+
+        // Gap values map to CSS custom properties
+        const gapMap = {
+            none: '0',
+            xs: 'var(--md-sys-spacing-xs, 4px)',
+            sm: 'var(--md-sys-spacing-sm, 8px)',
+            md: 'var(--md-sys-spacing-md, 16px)',
+            lg: 'var(--md-sys-spacing-lg, 24px)',
+            xl: 'var(--md-sys-spacing-xl, 32px)'
+        };
+
+        this.style.display = 'flex';
+        this.style.flexDirection = direction;
+        this.style.gap = gapMap[gap] || gap;
+        this.style.alignItems = align;
+        this.style.justifyContent = justify;
+        this.style.flexWrap = shouldWrap ? 'wrap' : 'nowrap';
+        // SOTA 2026: Proper containment for nested flex layouts
+        this.style.boxSizing = 'border-box';
+        this.style.maxWidth = '100%';
+        this.style.minWidth = '0';  // Critical: allows shrinking in parent flexbox
+        this.style.flexShrink = '1';  // MUST shrink to contain children properly
+    }
+}
+
+define('mu-stack', MuStack);