microui-wc 0.1.0

package/src/components/mu-switch.js

@@ -0,0 +1,150 @@
+/**
+ * @fileoverview mu-switch - Toggle Switch Component
+ * 
+ * Usage: <mu-switch checked></mu-switch>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { escapeHTML } from '../core/utils.js';
+import { createRipple } from '../core/ripple.js';
+
+export class MuSwitch extends MuElement {
+    static baseClass = 'mu-switch';
+    static cssFile = 'switch';
+    static observedAttributes = ['checked', 'disabled', 'label'];
+
+    connectedCallback() {
+        super.connectedCallback();
+        // Accessibility: set role and keyboard navigation
+        this.setAttribute('role', 'switch');
+        this.setupActivation(() => this.toggle());
+
+        this.listen(this, 'pointerdown', (e) => {
+            if (!this.isDisabled) {
+                createRipple(this, e);
+            }
+        });
+        this.listen(this, 'click', () => {
+            if (!this.isDisabled) {
+                this.toggle();
+            }
+        });
+    }
+
+    render() {
+        // Idempotent: skip if already rendered  
+        if (this.querySelector('.mu-switch__track')) {
+            this.#updateState();
+            return;
+        }
+
+        const label = escapeHTML(this.attr('label', '') || this.textContent);
+        this.innerHTML = `
+            <span class="mu-switch__track">
+                <span class="mu-switch__thumb"></span>
+            </span>
+            ${label ? `<span class="mu-switch__label">${label}</span>` : ''}
+        `;
+
+        this.style.display = 'inline-flex';
+        this.style.alignItems = 'center';
+        this.style.gap = '12px';
+        this.style.cursor = this.has('disabled') ? 'not-allowed' : 'pointer';
+
+        this.#updateState();
+    }
+
+    update(attr, newValue, oldValue) {
+        this.#updateState();
+    }
+
+    #updateState() {
+        const track = this.querySelector('.mu-switch__track');
+        const thumb = this.querySelector('.mu-switch__thumb');
+        const isChecked = this.has('checked');
+        const isDisabled = this.has('disabled');
+
+        // Update cursor
+        this.style.cursor = isDisabled ? 'not-allowed' : 'pointer';
+
+        if (track) {
+            track.style.width = '52px';
+            track.style.height = '32px';
+            track.style.borderRadius = '16px';
+            track.style.position = 'relative';
+            track.style.transition = 'background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)';
+
+            // MD3 disabled state
+            if (isDisabled) {
+                track.style.background = 'color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)';
+            } else {
+                track.style.background = isChecked
+                    ? 'var(--md-sys-color-primary)'
+                    : 'var(--md-sys-color-surface-container-highest)';
+            }
+        }
+
+        if (thumb) {
+            // MD3: Thumb is 16dp when off, 24dp when on
+            const thumbSize = isChecked ? 24 : 16;
+            const thumbTop = isChecked ? 4 : 8;  // Center vertically in track
+            const thumbLeft = isChecked ? 24 : 6;  // Position within track
+
+            thumb.style.width = `${thumbSize}px`;
+            thumb.style.height = `${thumbSize}px`;
+            thumb.style.borderRadius = `${thumbSize / 2}px`;
+            thumb.style.position = 'absolute';
+            thumb.style.top = `${thumbTop}px`;
+            thumb.style.left = `${thumbLeft}px`;
+            thumb.style.transition = 'all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized)';
+
+            // MD3 disabled state
+            if (isDisabled) {
+                thumb.style.background = 'color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)';
+                thumb.style.boxShadow = 'none';
+            } else {
+                thumb.style.background = isChecked
+                    ? 'var(--md-sys-color-on-primary)'
+                    : 'var(--md-sys-color-outline)';
+                thumb.style.boxShadow = 'var(--md-sys-elevation-level1)';
+            }
+        }
+
+        // Style label if present
+        const label = this.querySelector('.mu-switch__label');
+        if (label) {
+            label.style.color = isDisabled ? 'color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)' : 'var(--md-sys-color-on-surface)';
+        }
+
+        // Accessibility: update ARIA states
+        this.setAttribute('aria-checked', String(isChecked));
+        this.setAttribute('aria-disabled', String(isDisabled));
+        this.setAttribute('tabindex', isDisabled ? '-1' : '0');
+        // Set aria-label from label text or attribute
+        const labelText = label?.textContent || this.attr('label', '');
+        if (labelText) this.setAttribute('aria-label', labelText);
+    }
+
+    toggle() {
+        if (this.has('checked')) {
+            this.removeAttribute('checked');
+        } else {
+            this.setAttribute('checked', '');
+        }
+        this.emit('mu-change', { checked: this.has('checked') });
+    }
+
+    get checked() {
+        return this.has('checked');
+    }
+
+    set checked(v) {
+        if (v) {
+            this.setAttribute('checked', '');
+        } else {
+            this.removeAttribute('checked');
+        }
+    }
+}
+
+define('mu-switch', MuSwitch);

package/src/components/mu-table.js

@@ -0,0 +1,80 @@
+/**
+ * @fileoverview mu-table - Data Table Component
+ * 
+ * Usage:
+ * <mu-table>
+ *   <mu-thead>
+ *     <mu-tr><mu-th>Name</mu-th><mu-th>Email</mu-th></mu-tr>
+ *   </mu-thead>
+ *   <mu-tbody>
+ *     <mu-tr><mu-td>John</mu-td><mu-td>john@example.com</mu-td></mu-tr>
+ *   </mu-tbody>
+ * </mu-table>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuTable extends MuElement {
+    static baseClass = 'mu-table';
+    static observedAttributes = ['striped', 'hover'];
+
+    render() {
+        this.style.display = 'table';
+        this.style.width = '100%';
+        this.style.borderCollapse = 'collapse';
+        this.style.fontSize = 'var(--md-sys-typescale-body-medium-size, 14px)';
+    }
+}
+
+export class MuThead extends MuElement {
+    static baseClass = 'mu-table__head';
+
+    render() {
+        this.style.display = 'table-header-group';
+        this.style.background = 'var(--md-sys-color-surface-container)';
+    }
+}
+
+export class MuTbody extends MuElement {
+    static baseClass = 'mu-table__body';
+
+    render() {
+        this.style.display = 'table-row-group';
+    }
+}
+
+export class MuTr extends MuElement {
+    static baseClass = 'mu-table__row';
+
+    render() {
+        this.style.display = 'table-row';
+        this.style.borderBottom = '1px solid var(--md-sys-color-outline-variant)';
+    }
+}
+
+export class MuTh extends MuElement {
+    static baseClass = 'mu-table__header';
+
+    render() {
+        this.style.display = 'table-cell';
+        this.style.padding = '12px 16px';
+        this.style.fontWeight = '600';
+        this.style.textAlign = 'left';
+    }
+}
+
+export class MuTd extends MuElement {
+    static baseClass = 'mu-table__cell';
+
+    render() {
+        this.style.display = 'table-cell';
+        this.style.padding = '12px 16px';
+    }
+}
+
+define('mu-table', MuTable);
+define('mu-thead', MuThead);
+define('mu-tbody', MuTbody);
+define('mu-tr', MuTr);
+define('mu-th', MuTh);
+define('mu-td', MuTd);

package/src/components/mu-tabs.js

@@ -0,0 +1,112 @@
+/**
+ * @fileoverview mu-tabs - MD3 Tabs Component
+ * 
+ * Usage: 
+ * <mu-tabs active="0">
+ *   <mu-tab>Tab 1</mu-tab>
+ *   <mu-tab>Tab 2</mu-tab>
+ * </mu-tabs>
+ * 
+ * Features:
+ * - Sliding indicator animation (CSS transitions)
+ * - DOM-preserving updates (no recreation)
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuTabs extends MuElement {
+    static baseClass = 'mu-tabs';
+    static cssFile = 'tabs';
+    static observedAttributes = ['active'];
+
+    #tabs = [];
+    #list = null;
+
+    connectedCallback() {
+        super.connectedCallback();
+        // Listen for tab clicks via event delegation
+        this.listen(this, 'click', (e) => {
+            const tab = e.target.closest('mu-tab');
+            if (tab) {
+                // Recalculate tabs array each time to handle dynamic changes
+                // and cases where tabs were hidden during initial render
+                const list = this.querySelector('.mu-tabs__list');
+                const currentTabs = list
+                    ? Array.from(list.querySelectorAll('mu-tab'))
+                    : Array.from(this.querySelectorAll('mu-tab'));
+                const index = currentTabs.indexOf(tab);
+                if (index !== -1) {
+                    this.setAttribute('active', index.toString());
+                }
+            }
+        });
+    }
+
+    render() {
+        // Idempotent: skip if already rendered
+        if (this.querySelector('.mu-tabs__list')) {
+            this.#tabs = Array.from(this.querySelectorAll('mu-tab'));
+            this.#list = this.querySelector('.mu-tabs__list');
+            this.#updateActive();
+            return;
+        }
+
+        // Create list wrapper for tabs (indicator is ::after pseudo-element, no DOM needed)
+        this.#list = document.createElement('div');
+        this.#list.className = 'mu-tabs__list';
+        this.#list.setAttribute('role', 'tablist');
+
+        // Move existing mu-tab children into list
+        this.#tabs = Array.from(this.querySelectorAll('mu-tab'));
+        this.#tabs.forEach((tab) => {
+            tab.setAttribute('role', 'tab');
+            this.#list.appendChild(tab);
+        });
+
+        // NO DOM indicator element - using ::after pseudo-element via CSS
+        this.appendChild(this.#list);
+
+        this.#updateActive();
+    }
+
+    update(attr, newValue, oldValue) {
+        if (attr === 'active') {
+            this.#updateActive();
+            this.emit('mu-tab-change', { index: parseInt(newValue) || 0 });
+        }
+    }
+
+    #updateActive() {
+        const activeIndex = parseInt(this.attr('active', '0'));
+        const tabCount = this.#tabs.length;
+
+        // Update tab active states
+        this.#tabs.forEach((tab, i) => {
+            tab.classList.toggle('is-active', i === activeIndex);
+            tab.setAttribute('aria-selected', i === activeIndex ? 'true' : 'false');
+        });
+
+        // Update indicator position via CSS custom properties (::after uses these)
+        if (this.#list && tabCount > 0) {
+            const width = 100 / tabCount;
+            this.#list.style.setProperty('--indicator-width', `${width}%`);
+            this.#list.style.setProperty('--indicator-left', `${activeIndex * width}%`);
+        }
+    }
+}
+
+export class MuTab extends MuElement {
+    static baseClass = 'mu-tabs__tab';
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('tabindex', '0');
+    }
+
+    render() {
+        // Tab just wraps content, no transformation needed
+    }
+}
+
+define('mu-tabs', MuTabs);
+define('mu-tab', MuTab);

package/src/components/mu-textarea.js

@@ -0,0 +1,96 @@
+/**
+ * @fileoverview mu-textarea - Multi-line Text Input Component
+ * 
+ * Usage: <mu-textarea placeholder="Enter description" rows="4"></mu-textarea>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { escapeHTML } from '../core/utils.js';
+
+export class MuTextarea extends MuElement {
+    static baseClass = 'mu-textarea';
+    static cssFile = 'input';
+    static observedAttributes = ['placeholder', 'rows', 'disabled', 'readonly', 'name'];
+
+    #textarea = null;
+
+    render() {
+        // Idempotent HTML structure creation
+        if (!this.querySelector('.mu-textarea__field')) {
+            const placeholder = escapeHTML(this.attr('placeholder', ''));
+            const rows = this.attr('rows', '4');
+            const disabled = this.has('disabled') ? 'disabled' : '';
+            const readonly = this.has('readonly') ? 'readonly' : '';
+            const name = escapeHTML(this.attr('name', ''));
+
+            this.innerHTML = `
+                <textarea 
+                    class="mu-textarea__field"
+                    placeholder="${placeholder}"
+                    aria-label="${placeholder || 'Text area'}"
+                    rows="${rows}"
+                    name="${name}"
+                    ${disabled}
+                    ${readonly}
+                ></textarea>
+            `;
+
+            // Styles (only apply once when creating)
+            this.style.display = 'block';
+            this.style.position = 'relative';
+        }
+
+        // Always get reference (for both new and pre-rendered cases)
+        this.#textarea = this.querySelector('textarea');
+
+        // Apply styles to native textarea
+        this.#textarea.style.width = '100%';
+        this.#textarea.style.padding = '12px 16px';
+        this.#textarea.style.fontSize = 'var(--md-sys-typescale-body-large-size, 16px)';
+        this.#textarea.style.fontFamily = 'inherit';
+        this.#textarea.style.border = '1px solid var(--md-sys-color-outline)';
+        this.#textarea.style.borderRadius = 'var(--md-sys-shape-corner-small, 4px)';
+        this.#textarea.style.background = 'var(--md-sys-color-surface)';
+        this.#textarea.style.color = 'var(--md-sys-color-on-surface)';
+        this.#textarea.style.resize = 'vertical';
+        this.#textarea.style.transition = 'border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)';
+        this.#textarea.style.outline = 'none';
+        this.#textarea.style.boxSizing = 'border-box';
+
+        // Focus styles - use box-shadow to avoid layout shift (no border-width change)
+        this.listen(this.#textarea, 'focus', () => {
+            this.#textarea.style.borderColor = 'var(--md-sys-color-primary)';
+            this.#textarea.style.boxShadow = 'inset 0 0 0 1px var(--md-sys-color-primary)';
+        });
+
+        this.listen(this.#textarea, 'blur', () => {
+            this.#textarea.style.borderColor = 'var(--md-sys-color-outline)';
+            this.#textarea.style.boxShadow = 'none';
+        });
+
+        // Forward events (always attach - AbortController prevents duplicates)
+        this.listen(this.#textarea, 'input', (e) => {
+            this.emit('mu-input', { value: e.target.value });
+        });
+
+        this.listen(this.#textarea, 'change', (e) => {
+            this.emit('mu-change', { value: e.target.value });
+        });
+    }
+
+    get value() {
+        return this.#textarea?.value || '';
+    }
+
+    set value(v) {
+        if (this.#textarea) {
+            this.#textarea.value = v;
+        }
+    }
+
+    focus() {
+        this.#textarea?.focus();
+    }
+}
+
+define('mu-textarea', MuTextarea);

package/src/components/mu-theme-toggle.js

@@ -0,0 +1,52 @@
+/**
+ * @fileoverview mu-theme-toggle - Theme Switch Component
+ * 
+ * Usage: <mu-theme-toggle></mu-theme-toggle>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { Theme } from '../core/theme.js';
+import { bus, UIEvents, registerComponent } from '../core/bus.js';
+
+export class MuThemeToggle extends MuElement {
+    static baseClass = 'mu-theme-toggle';
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        // Use framework's listen() - automatically prevents duplicates via AbortController reuse
+        this.listen(this, 'click', () => Theme.toggle());
+
+        // Update icon when theme changes
+        bus.on(UIEvents.THEME_CHANGE, () => this.#updateIcon());
+    }
+
+    render() {
+        this.innerHTML = `
+            <button class="mu-theme-toggle__button" aria-label="Toggle theme">
+                <span class="mu-theme-toggle__icon"></span>
+            </button>
+        `;
+        this.#updateIcon();
+    }
+
+    #updateIcon() {
+        const isDark = Theme.get() === 'dark';
+        const icon = this.querySelector('.mu-theme-toggle__icon');
+        if (icon) {
+            icon.textContent = isDark ? '☀️' : '🌙';
+        }
+    }
+}
+
+define('mu-theme-toggle', MuThemeToggle);
+
+// Register component capabilities for AI agent discovery
+registerComponent('mu-theme-toggle', {
+    signals: [UIEvents.THEME_CHANGE],
+    options: {
+        themes: ['light', 'dark'],
+        emits: ['click']
+    },
+    description: 'Theme toggle button that switches between light/dark modes'
+});

package/src/components/mu-toast.js

@@ -0,0 +1,151 @@
+/**
+ * @fileoverview mu-toast - MD3 Snackbar/Toast Notification
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuToast extends MuElement {
+    static baseClass = 'mu-toast';
+    static cssFile = 'snackbar';
+    static observedAttributes = ['severity', 'duration', 'position'];
+
+    #timeout = null;
+    #originalContent = null;
+
+    connectedCallback() {
+        // Store content before render (must be before super because super calls render)
+        if (!this.#originalContent && !this.querySelector('.mu-toast__content')) {
+            this.#originalContent = this.innerHTML;
+        }
+
+        super.connectedCallback();
+
+        // Event delegation for close button
+        this.listen(this, 'click', (e) => {
+            if (e.target.classList.contains('mu-toast__close')) {
+                this.dismiss();
+            }
+        });
+
+        // Auto-dismiss
+        const duration = parseInt(this.attr('duration', '3000'));
+        if (duration > 0) {
+            this.#timeout = this.setTimeout(() => this.dismiss(), duration);
+        }
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Timer cleanup handled by MuElement
+    }
+
+    render() {
+        // Idempotent: skip if already rendered
+        if (this.querySelector('.mu-toast__content')) {
+            this.#updateClasses();
+            return;
+        }
+
+        const content = this.#originalContent || '';
+
+        this.innerHTML = `
+            <span class="mu-toast__content">${content}</span>
+            <button class="mu-toast__close" aria-label="Dismiss">✕</button>
+        `;
+
+        this.#updateClasses();
+    }
+
+    update(attr, newValue, oldValue) {
+        this.#updateClasses();
+    }
+
+    #updateClasses() {
+        const severity = this.attr('severity', 'info');
+        const position = this.attr('position', 'bottom-center');
+        this.className = `mu-toast mu-toast--${severity} mu-toast--${position}`;
+    }
+
+    dismiss() {
+        this.emit('mu-dismiss');
+        this.classList.add('is-exiting');
+
+        // SOTA: Use animationend instead of setTimeout
+        let removed = false;
+        const cleanup = () => {
+            if (!removed) {
+                removed = true;
+                this.remove();
+            }
+        };
+
+        this.addEventListener('animationend', cleanup, { once: true });
+        // Fallback in case animation doesn't fire (test env, reduced motion)
+        this.setTimeout(cleanup, 200);
+    }
+}
+
+define('mu-toast', MuToast);
+
+export class MuToastContainer extends MuElement {
+    static baseClass = 'mu-toast-container';
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'status');
+        this.setAttribute('aria-live', 'polite');
+    }
+}
+
+define('mu-toast-container', MuToastContainer);
+
+// Toast Manager for programmatic usage
+export const Toast = {
+    show(message, options = {}) {
+        const position = options.position || 'bottom-center';
+        let container = document.querySelector(`mu-toast-container[position="${position}"]`);
+
+        if (!container) {
+            container = document.createElement('mu-toast-container');
+            container.setAttribute('position', position);
+            document.body.appendChild(container);
+        }
+
+        const toast = document.createElement('mu-toast');
+        toast.textContent = message;
+
+        if (options.severity) {
+            toast.setAttribute('severity', options.severity);
+        }
+        if (options.duration) {
+            toast.setAttribute('duration', options.duration.toString());
+        }
+
+        container.appendChild(toast);
+        return toast;
+    }
+};
+
+// ============================================
+// CROSSBUS LISTENER AUTO-REGISTRATION
+// Self-registers when this module is loaded (works with lazy loading)
+// Uses hasListeners to prevent duplicate registration
+// ============================================
+import { bus, UIEvents, registerComponent } from '../core/bus.js';
+
+if (typeof window !== 'undefined' && bus && !bus.hasListeners(UIEvents.TOAST_SHOW)) {
+    bus.on(UIEvents.TOAST_SHOW, (data) => {
+        Toast.show(data.message, data);
+    });
+}
+
+// Register component capabilities for AI agent discovery
+registerComponent('mu-toast', {
+    signals: [UIEvents.TOAST_SHOW, UIEvents.TOAST_DISMISS],
+    options: {
+        severities: ['info', 'success', 'warning', 'error'],
+        positions: ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'],
+        defaultDuration: 3000
+    },
+    description: 'MD3 Snackbar/Toast Notification component'
+});