microui-wc 0.1.0

package/src/components/mu-input.js

@@ -0,0 +1,142 @@
+/**
+ * @fileoverview mu-input - MD3 Text Field Component
+ * 
+ * Usage: <mu-input type="text" placeholder="Enter text" variant="filled"></mu-input>
+ * 
+ * Features:
+ * - Native focus handling via CSS :focus-within
+ * - Animated underline indicator
+ * - Supports all input types
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { escapeHTML } from '../core/utils.js';
+
+export class MuInput extends MuElement {
+    static baseClass = 'mu-input';
+    static cssFile = 'input';
+    static observedAttributes = ['type', 'placeholder', 'value', 'disabled', 'variant', 'size', 'label'];
+
+    /** @type {HTMLInputElement|null} */
+    #input = null;
+
+    render() {
+        // Idempotent: skip if already rendered
+        if (this.querySelector('.mu-input__field')) {
+            this.#input = this.querySelector('input');
+            this.#updateClasses();
+            return;
+        }
+
+        const type = this.attr('type', 'text');
+        const placeholder = this.attr('placeholder', '');
+        const label = this.attr('label', '');
+        const value = this.attr('value', '');
+
+        // Use label for floating label, fallback to placeholder
+        const labelText = label || placeholder;
+
+        // Never show native placeholder when using floating label
+        // Only show if explicitly no label is provided AND no placeholder
+        const showNativePlaceholder = !labelText;
+
+        // AGENT VALIDATION: Input must have a label
+        if (!labelText && !this.getAttribute('aria-label')) {
+            this.logError('A11Y_MISSING_LABEL', 'Input must have a label or aria-label attribute.');
+        }
+
+        // Generate unique ID for label-input association (accessibility)
+        const inputId = this.id || `mu-input-${Math.random().toString(36).substring(2, 9)}`;
+
+        // Escape user-provided attributes to prevent XSS
+        const safeLabelText = escapeHTML(labelText);
+        const safePlaceholder = escapeHTML(placeholder);
+        const safeValue = escapeHTML(value);
+
+        this.innerHTML = `
+            ${safeLabelText ? `<label class="mu-input__label" for="${inputId}">${safeLabelText}</label>` : ''}
+            <input 
+                class="mu-input__field"
+                id="${inputId}"
+                type="${type}"
+                ${showNativePlaceholder ? `placeholder="${safePlaceholder}"` : ''}
+                ${!safeLabelText ? `aria-label="${safePlaceholder || 'Text input'}"` : ''}
+                value="${safeValue}"
+                ${this.has('disabled') ? 'disabled' : ''}
+            />
+        `;
+
+        this.#input = this.querySelector('input');
+        this.#updateClasses();
+        this.#updateValueState();
+
+        // Forward events
+        this.listen(this.#input, 'input', (e) => {
+            this.#updateValueState();
+            this.emit('mu-input', { value: e.target.value });
+        });
+
+        this.listen(this.#input, 'focus', () => {
+            this.emit('mu-focus');
+        });
+
+        this.listen(this.#input, 'blur', () => {
+            this.emit('mu-blur');
+        });
+    }
+
+    #updateValueState() {
+        if (this.#input?.value) {
+            this.classList.add('has-value');
+        } else {
+            this.classList.remove('has-value');
+        }
+    }
+
+    update(attr, newValue, oldValue) {
+        if (!this.#input) return;
+
+        switch (attr) {
+            case 'value':
+                this.#input.value = newValue ?? '';
+                break;
+            case 'placeholder':
+                this.#input.placeholder = newValue ?? '';
+                break;
+            case 'type':
+                this.#input.type = newValue ?? 'text';
+                break;
+            case 'disabled':
+                this.#input.disabled = this.has('disabled');
+                break;
+        }
+
+        this.#updateClasses();
+    }
+
+    #updateClasses() {
+        const variant = this.attr('variant', 'outlined');
+        const size = this.attr('size', 'md');
+
+        this.className = `mu-input mu-input--${variant} mu-input--${size}`;
+
+        if (this.has('disabled')) {
+            this.classList.add('is-disabled');
+        }
+    }
+
+    // Expose input value
+    get value() {
+        return this.#input?.value ?? '';
+    }
+
+    set value(v) {
+        if (this.#input) this.#input.value = v;
+    }
+
+    focus() {
+        this.#input?.focus();
+    }
+}
+
+define('mu-input', MuInput);

package/src/components/mu-layout.js

@@ -0,0 +1,129 @@
+/**
+ * mu-layout.js - Material Design 3 Responsive Layout Container
+ * 
+ * Main layout container that orchestrates drawer, content, and bottom nav.
+ * Provides responsive layout structure with proper spacing.
+ * 
+ * LIGHT DOM: Uses Light DOM for styling consistency.
+ * Uses slot="..." attributes on children to distribute content.
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuLayout extends MuElement {
+    static get observedAttributes() {
+        return ['has-drawer', 'has-bottom-nav'];
+    }
+
+    static baseClass = 'mu-layout';
+    static cssFile = 'layout';
+
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        // Capture slotted children before render
+        if (!this._slotsCaptured) {
+            this._slots = {
+                header: this.querySelector('[slot="header"]'),
+                drawer: this.querySelector('[slot="drawer"]'),
+                footer: this.querySelector('[slot="footer"]'),
+                bottom: this.querySelector('[slot="bottom"]'),
+                default: Array.from(this.children).filter(c => !c.hasAttribute('slot'))
+            };
+            this._slotsCaptured = true;
+        }
+        super.connectedCallback();
+        this._setupScrollReset();
+        this._updateLayout();
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Listener cleanup handled by MuElement AbortController
+    }
+
+    _setupScrollReset() {
+        // Reset content scroll when navigating to a new section
+        this.listen(window, 'hashchange', () => {
+            const mainContainer = this.querySelector('.mu-layout-main');
+            if (mainContainer) {
+                mainContainer.scrollTop = 0;
+            }
+        });
+    }
+
+    _updateLayout() {
+        const hasDrawer = this._slots.drawer !== null;
+        const hasBottomNav = this._slots.bottom !== null;
+
+        this.toggleAttribute('has-drawer', hasDrawer);
+        this.toggleAttribute('has-bottom-nav', hasBottomNav);
+    }
+
+    render() {
+        // Build layout structure with DOM manipulation
+        this.innerHTML = '';
+
+        // Layout wrapper
+        const wrapper = document.createElement('div');
+        wrapper.className = 'mu-layout-wrapper';
+
+        // Header
+        const headerContainer = document.createElement('header');
+        headerContainer.className = 'mu-layout-header';
+        if (this._slots.header) {
+            headerContainer.appendChild(this._slots.header);
+        }
+        wrapper.appendChild(headerContainer);
+
+        // Layout body (drawer + main)
+        const body = document.createElement('div');
+        body.className = 'mu-layout-body';
+
+        // Drawer container
+        const drawerContainer = document.createElement('aside');
+        drawerContainer.className = 'mu-layout-drawer';
+        if (this._slots.drawer) {
+            drawerContainer.appendChild(this._slots.drawer);
+        }
+        body.appendChild(drawerContainer);
+
+        // Main container
+        const mainContainer = document.createElement('div');
+        mainContainer.className = 'mu-layout-main';
+
+        const content = document.createElement('main');
+        content.className = 'mu-layout-content';
+        if (this._slots.default) {
+            this._slots.default.forEach(child => content.appendChild(child));
+        }
+        mainContainer.appendChild(content);
+        body.appendChild(mainContainer);
+
+        wrapper.appendChild(body);
+
+        // Footer
+        const footerContainer = document.createElement('footer');
+        footerContainer.className = 'mu-layout-footer';
+        if (this._slots.footer) {
+            footerContainer.appendChild(this._slots.footer);
+        }
+        wrapper.appendChild(footerContainer);
+
+        this.appendChild(wrapper);
+
+        // Bottom nav container (outside wrapper, fixed)
+        const bottomContainer = document.createElement('div');
+        bottomContainer.className = 'mu-layout-bottom';
+        if (this._slots.bottom) {
+            bottomContainer.appendChild(this._slots.bottom);
+        }
+        this.appendChild(bottomContainer);
+    }
+}
+
+if (!customElements.get('mu-layout')) {
+    customElements.define('mu-layout', MuLayout);
+}

package/src/components/mu-lazy.js

@@ -0,0 +1,94 @@
+/**
+ * @fileoverview mu-lazy - Lazy Loading Component
+ * 
+ * Defers rendering until element is visible in viewport.
+ * Uses IntersectionObserver for efficient detection.
+ * 
+ * Usage:
+ * <mu-lazy>
+ *     <template>
+ *         <heavy-component></heavy-component>
+ *     </template>
+ *     <div slot="placeholder">Loading...</div>
+ * </mu-lazy>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuLazy extends MuElement {
+    static baseClass = 'mu-lazy';
+    static observedAttributes = ['root-margin', 'threshold'];
+
+    #observer = null;
+    #loaded = false;
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        const rootMargin = this.attr('root-margin', '200px');
+        const threshold = parseFloat(this.attr('threshold', '0'));
+
+        this.#observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting && !this.#loaded) {
+                this.#load();
+            }
+        }, {
+            rootMargin,
+            threshold
+        });
+
+        this.#observer.observe(this);
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#observer?.disconnect();
+    }
+
+    render() {
+        // Show placeholder initially
+        const placeholder = this.querySelector('[slot="placeholder"]');
+        if (placeholder) {
+            placeholder.style.display = 'block';
+        }
+
+        // Hide template
+        const template = this.querySelector('template');
+        if (template) {
+            template.style.display = 'none';
+        }
+    }
+
+    #load() {
+        this.#loaded = true;
+        this.#observer?.disconnect();
+
+        const template = this.querySelector('template');
+        const placeholder = this.querySelector('[slot="placeholder"]');
+
+        if (template) {
+            // Clone and append template content
+            const content = template.content.cloneNode(true);
+            this.appendChild(content);
+            template.remove();
+        }
+
+        if (placeholder) {
+            placeholder.remove();
+        }
+
+        this.emit('mu-loaded');
+        this.classList.add('is-loaded');
+    }
+
+    /**
+     * Force load immediately
+     */
+    load() {
+        if (!this.#loaded) {
+            this.#load();
+        }
+    }
+}
+
+define('mu-lazy', MuLazy);

package/src/components/mu-modal.js

@@ -0,0 +1,160 @@
+/**
+ * @fileoverview mu-modal - MD3 Dialog Component (SOTA Native Dialog)
+ * Uses native <dialog> element with showModal() for proper top-layer,
+ * focus trapping, ESC handling, and backdrop - all built-in.
+ * 
+ * MD3 Reference: https://m3.material.io/components/dialogs
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { afterPaint } from '../core/scheduler.js';
+
+export class MuModal extends MuElement {
+    static baseClass = 'mu-modal';
+    static cssFile = 'dialog';
+    static observedAttributes = ['open', 'size'];
+
+    /** @type {HTMLDialogElement|null} */
+    #dialog = null;
+
+    connectedCallback() {
+        // Store user content only once, before first render
+        if (!this.hasAttribute('data-rendered')) {
+            this._userContent = this.innerHTML;
+            this.setAttribute('data-rendered', 'true');
+        }
+
+        super.connectedCallback();
+
+        // CRITICAL: Always setup listeners after super.connectedCallback()
+        // because it resets the AbortController. The render() creates DOM,
+        // but listeners must be attached here to survive disconnect/reconnect.
+        this.#setupListeners();
+    }
+
+    render() {
+        // Idempotent: check if already rendered via DOM structure
+        if (this.querySelector('dialog')) return;
+
+        const size = this.attr('size', 'md');
+        const content = this._userContent || '';
+
+        this.innerHTML = `
+            <dialog class="mu-modal__dialog mu-modal--${size}">
+                <button class="mu-modal__close" aria-label="Close">✕</button>
+                <div class="mu-modal__body">${content}</div>
+            </dialog>
+        `;
+
+        this.#dialog = this.querySelector('dialog');
+    }
+
+    /**
+     * Setup all event listeners. Called after every connectedCallback
+     * to ensure listeners survive DOM disconnect/reconnect cycles.
+     */
+    #setupListeners() {
+        this.#dialog = this.querySelector('dialog');
+        if (!this.#dialog) return;
+
+        // Native dialog 'close' event (fires on ESC, form[method=dialog], or .close())
+        this.listen(this.#dialog, 'close', () => {
+            this.removeAttribute('open');
+            this.classList.remove('is-open', 'is-visible');
+            document.body.style.overflow = '';
+            this.emit('mu-close');
+        });
+
+        // ESC key triggers 'cancel' event on dialog
+        this.listen(this.#dialog, 'cancel', (e) => {
+            e.preventDefault(); // Prevent default close to control animation
+            this.close();
+        });
+
+        // Click on backdrop (::backdrop pseudo-element triggers click on dialog)
+        this.listen(this.#dialog, 'click', (e) => {
+            // Only close if clicking the dialog element itself (backdrop area)
+            // not its children
+            if (e.target === this.#dialog) {
+                this.close();
+            }
+        });
+
+        // Close button - MD3 standard X button in top-right
+        const closeBtn = this.querySelector('.mu-modal__close');
+        if (closeBtn) {
+            this.listen(closeBtn, 'click', () => {
+                this.close();
+            });
+        }
+    }
+
+    update(attr, newValue, oldValue) {
+        if (attr === 'open') {
+            if (newValue !== null) {
+                this.#showDialog();
+            }
+        }
+    }
+
+    #showDialog() {
+        if (!this.#dialog || this.#dialog.open) return;
+
+        this.classList.add('is-open');
+        this.#dialog.showModal(); // Native top-layer, focus trap, backdrop!
+        document.body.style.overflow = 'hidden';
+
+        // Trigger animation - MD3 requires emphasized-decelerate for enter
+        afterPaint().then(() => this.classList.add('is-visible'));
+    }
+
+    /**
+     * Open the modal dialog (public API)
+     */
+    open() {
+        this.setAttribute('open', '');
+    }
+
+    /**
+     * Close the modal dialog with animation (public API)
+     */
+    close() {
+        if (!this.#dialog) return;
+
+        // MD3: emphasized-accelerate for exit
+        this.classList.remove('is-visible');
+
+        // SOTA 2026: Use transitionend instead of setTimeout
+        // In test environments (JSDOM/linkedom), transitionend won't fire, so use a flag
+        let cleaned = false;
+        const cleanup = () => {
+            if (cleaned) return;
+            cleaned = true;
+            if (this.#dialog && this.#dialog.open) {
+                this.#dialog.close();
+            }
+            this.removeAttribute('open');
+            this.classList.remove('is-open');
+            document.body.style.overflow = '';
+            this.emit('mu-close');
+        };
+
+        // Listen for transition end
+        const dialog = this.#dialog;
+        const onTransitionEnd = (e) => {
+            if (e.target === dialog) {
+                dialog.removeEventListener('transitionend', onTransitionEnd);
+                cleanup();
+            }
+        };
+        dialog.addEventListener('transitionend', onTransitionEnd);
+
+        // Fallback: cleanup after expected transition time (200ms matches CSS)
+        this.setTimeout(() => {
+            dialog.removeEventListener('transitionend', onTransitionEnd);
+            cleanup();
+        }, 200);
+    }
+}
+
+define('mu-modal', MuModal);

package/src/components/mu-navbar.js

@@ -0,0 +1,71 @@
+/**
+ * @fileoverview mu-navbar - Navigation Bar Component
+ * 
+ * Usage: 
+ * <mu-navbar>
+ *   <mu-navbar-brand>Logo</mu-navbar-brand>
+ *   <mu-navbar-links>
+ *     <a href="/">Home</a>
+ *     <a href="/about">About</a>
+ *   </mu-navbar-links>
+ *   <mu-navbar-actions>
+ *     <mu-theme-toggle></mu-theme-toggle>
+ *   </mu-navbar-actions>
+ * </mu-navbar>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuNavbar extends MuElement {
+    static baseClass = 'mu-navbar';
+    static cssFile = 'navbar';
+    static observedAttributes = ['sticky', 'variant'];
+
+    render() {
+        this.style.display = 'flex';
+        this.style.alignItems = 'center';
+        this.style.justifyContent = 'space-between';
+        this.style.padding = '0 var(--md-sys-spacing-md, 16px)';
+        this.style.height = '64px';
+        this.style.background = 'var(--md-sys-color-surface-container)';
+        this.style.borderBottom = '1px solid var(--md-sys-color-outline-variant)';
+
+        if (this.has('sticky')) {
+            this.style.position = 'sticky';
+            this.style.top = '0';
+            this.style.zIndex = '100';
+        }
+    }
+}
+
+export class MuNavbarBrand extends MuElement {
+    static baseClass = 'mu-navbar__brand';
+
+    render() {
+        this.style.fontWeight = '600';
+        this.style.fontSize = '1.25rem';
+    }
+}
+
+export class MuNavbarLinks extends MuElement {
+    static baseClass = 'mu-navbar__links';
+
+    render() {
+        // All styles handled by CSS in components.css
+    }
+}
+
+export class MuNavbarActions extends MuElement {
+    static baseClass = 'mu-navbar__actions';
+
+    render() {
+        this.style.display = 'flex';
+        this.style.gap = 'var(--md-sys-spacing-sm, 8px)';
+        this.style.alignItems = 'center';
+    }
+}
+
+define('mu-navbar', MuNavbar);
+define('mu-navbar-brand', MuNavbarBrand);
+define('mu-navbar-links', MuNavbarLinks);
+define('mu-navbar-actions', MuNavbarActions);

package/src/components/mu-page.js

@@ -0,0 +1,77 @@
+/**
+ * mu-page - Self-contained page component
+ * 
+ * Features:
+ * - Declares route and title
+ * - Declares dependencies (for auto-bundling)
+ * - Contains template HTML
+ * 
+ * Usage in pages/*.html:
+ * 
+ *   <mu-page route="buttons" title="Buttons">
+ *     <script type="x-dependencies">
+ *       mu-button
+ *       mu-tabs
+ *     </script>
+ *     
+ *     <template>
+ *       <h1>Buttons</h1>
+ *       ...
+ *     </template>
+ *   </mu-page>
+ * 
+ * @agent-pattern
+ * When creating a new page, create a single file in app/pages/
+ * with this structure. The build system will auto-generate route bundles.
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+class MuPage extends MuElement {
+    static baseClass = 'mu-page';
+    static observedAttributes = ['route', 'title'];
+
+    get route() {
+        return this.attr('route', '');
+    }
+
+    get pageTitle() {
+        return this.attr('title', '');
+    }
+
+    get dependencies() {
+        const script = this.querySelector('script[type="x-dependencies"]');
+        if (!script) return [];
+
+        return script.textContent
+            .split(/[\n,]/)
+            .map(d => d.trim())
+            .filter(d => d && d.startsWith('mu-'));
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        // If rendered directly (not via router), render template
+        if (this.querySelector('template')) {
+            this.render();
+        }
+    }
+
+    render() {
+        const template = this.querySelector('template');
+        if (template) {
+            // Clone template content
+            const content = template.content.cloneNode(true);
+
+            // Clear and append
+            const script = this.querySelector('script[type="x-dependencies"]');
+            this.innerHTML = '';
+            if (script) this.appendChild(script); // Keep deps for debugging
+            this.appendChild(content);
+        }
+    }
+}
+
+define('mu-page', MuPage);
+export { MuPage };