microui-wc 0.1.0

package/src/components/mu-alert.js

@@ -0,0 +1,96 @@
+/**
+ * @fileoverview mu-alert - MD3 Alert Component
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuAlert extends MuElement {
+    static baseClass = 'mu-alert';
+    static observedAttributes = ['severity', 'dismissible'];
+
+    #closeBtn = null;
+    #originalContent = null;
+
+    connectedCallback() {
+        // Accessibility: set role and aria-live for screen readers (always safe)
+        this.setAttribute('role', 'alert');
+        this.setAttribute('aria-live', 'polite');
+
+        // For AJAX-loaded content: defer entire initialization until HTML parser finishes
+        // This is necessary because super.connectedCallback() calls render(),
+        // and render needs the content to be available
+        if (!this.#originalContent && !this.querySelector('.mu-alert__content') && !this.innerHTML.trim()) {
+            // Content not yet available, defer initialization
+            setTimeout(() => {
+                this.#originalContent = this.innerHTML;
+                this.#initializeComponent();
+            }, 0);
+        } else {
+            // Content already available (static HTML or already initialized)
+            if (!this.#originalContent && !this.querySelector('.mu-alert__content')) {
+                this.#originalContent = this.innerHTML;
+            }
+            this.#initializeComponent();
+        }
+    }
+
+    #initializeComponent() {
+        super.connectedCallback();
+
+        // Event delegation for close button
+        this.listen(this, 'click', (e) => {
+            if (e.target.classList.contains('mu-alert__close')) {
+                this.dismiss();
+            }
+        });
+    }
+
+    /**
+     * Programmatically dismiss the alert
+     */
+    dismiss() {
+        this.emit('mu-dismiss');
+        this.remove();
+    }
+
+    render() {
+        // Idempotent: skip if already rendered
+        if (this.querySelector('.mu-alert__content')) {
+            this.#updateClasses();
+            return;
+        }
+
+        const severity = this.attr('severity', 'info');
+        const dismissible = this.has('dismissible');
+
+        // Icon names matching mu-icon
+        const iconNames = {
+            success: 'success',
+            error: 'error',
+            warning: 'warning',
+            info: 'info'
+        };
+
+        const content = this.#originalContent || '';
+        const iconName = iconNames[severity] || iconNames.info;
+
+        this.innerHTML = `
+            <mu-icon name="${iconName}" size="24" class="mu-alert__icon"></mu-icon>
+            <span class="mu-alert__content">${content}</span>
+            ${dismissible ? '<button class="mu-alert__close" aria-label="Dismiss"><mu-icon name="close" size="18"></mu-icon></button>' : ''}
+        `;
+
+        this.#updateClasses();
+    }
+
+    update(attr, newValue, oldValue) {
+        this.#updateClasses();
+    }
+
+    #updateClasses() {
+        const severity = this.attr('severity', 'info');
+        this.className = `mu-alert mu-alert--${severity}`;
+    }
+}
+
+define('mu-alert', MuAlert);

package/src/components/mu-api-table.js

@@ -0,0 +1,167 @@
+/**
+ * @fileoverview mu-api-table - API Documentation Table Component
+ * 
+ * Usage: 
+ * <mu-api-table type="attributes">
+ *   <mu-api-row name="checked" type="boolean" default="false">Whether checkbox is checked</mu-api-row>
+ * </mu-api-table>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { escapeHTML } from '../core/utils.js';
+
+export class MuApiTable extends MuElement {
+    static baseClass = 'mu-api-table';
+    static observedAttributes = ['type'];
+
+    render() {
+        const type = this.attr('type', 'attributes');
+        const rows = Array.from(this.querySelectorAll('mu-api-row'));
+
+        const headers = {
+            attributes: ['Name', 'Type', 'Default', 'Description'],
+            properties: ['Name', 'Type', 'Description'],
+            methods: ['Name', 'Signature', 'Description'],
+            events: ['Name', 'Detail', 'Description'],
+            tokens: ['Token', 'Default', 'Description']
+        };
+
+        const cols = headers[type] || headers.attributes;
+
+        // Store row data before clearing
+        const rowData = rows.map(row => ({
+            name: row.getAttribute('name') || '',
+            type: row.getAttribute('type') || '',
+            default: row.getAttribute('default') || '-',
+            signature: row.getAttribute('signature') || '',
+            detail: row.getAttribute('detail') || '',
+            description: row.textContent.trim()
+        }));
+
+        this.innerHTML = `
+            <table class="mu-api-table__table">
+                <thead>
+                    <tr>
+                        ${cols.map(c => `<th>${c}</th>`).join('')}
+                    </tr>
+                </thead>
+                <tbody>
+                    ${rowData.map(row => this.#renderRow(type, row)).join('')}
+                </tbody>
+            </table>
+        `;
+
+        this.#applyStyles();
+    }
+
+    #renderRow(type, data) {
+        const safeData = {
+            name: escapeHTML(data.name),
+            type: escapeHTML(data.type),
+            default: escapeHTML(data.default),
+            signature: escapeHTML(data.signature),
+            detail: escapeHTML(data.detail),
+            description: escapeHTML(data.description) // Description is often text, if it needs HTML user should use a slot
+        };
+
+        switch (type) {
+            case 'attributes':
+                return `<tr>
+                    <td><code>${safeData.name}</code></td>
+                    <td><code class="type">${safeData.type}</code></td>
+                    <td><code class="default">${safeData.default}</code></td>
+                    <td>${safeData.description}</td>
+                </tr>`;
+            case 'properties':
+                return `<tr>
+                    <td><code>${safeData.name}</code></td>
+                    <td><code class="type">${safeData.type}</code></td>
+                    <td>${safeData.description}</td>
+                </tr>`;
+            case 'methods':
+                return `<tr>
+                    <td><code>${safeData.name}</code></td>
+                    <td><code class="signature">${safeData.signature}</code></td>
+                    <td>${safeData.description}</td>
+                </tr>`;
+            case 'events':
+                return `<tr>
+                    <td><code>${safeData.name}</code></td>
+                    <td><code class="detail">${safeData.detail}</code></td>
+                    <td>${safeData.description}</td>
+                </tr>`;
+            case 'tokens':
+                return `<tr>
+                    <td><code>${safeData.name}</code></td>
+                    <td><code class="default">${safeData.default}</code></td>
+                    <td>${safeData.description}</td>
+                </tr>`;
+            default:
+                return '';
+        }
+    }
+
+    #applyStyles() {
+        this.style.display = 'block';
+        this.style.overflowX = 'auto';
+        this.style.marginBottom = '24px';  /* MD3: 24dp spacing between sections */
+
+        const table = this.querySelector('.mu-api-table__table');
+        if (table) {
+            table.style.width = '100%';
+            table.style.borderCollapse = 'collapse';
+            table.style.fontSize = 'var(--md-sys-typescale-body-medium-size)';
+        }
+
+        const ths = this.querySelectorAll('th');
+        ths.forEach(th => {
+            th.style.textAlign = 'left';
+            th.style.padding = '16px';  /* MD3: 16dp padding */
+            th.style.height = '56px';  /* MD3: header row height */
+            th.style.background = 'var(--md-sys-color-surface-container)';
+            th.style.fontWeight = '500';
+            th.style.color = 'var(--md-sys-color-on-surface)';
+            th.style.borderBottom = '1px solid var(--md-sys-color-outline-variant)';
+        });
+
+        const tds = this.querySelectorAll('td');
+        tds.forEach(td => {
+            td.style.padding = '16px';  /* MD3: 16dp padding */
+            td.style.minHeight = '52px';  /* MD3: minimum row height */
+            td.style.borderBottom = '1px solid var(--md-sys-color-outline-variant)';
+            td.style.verticalAlign = 'middle';  /* Better vertical alignment */
+            td.style.lineHeight = '1.5';  /* Improve readability */
+        });
+
+        const codes = this.querySelectorAll('code');
+        codes.forEach(code => {
+            code.style.fontFamily = "'Fira Code', monospace";
+            code.style.fontSize = '13px';
+            code.style.padding = '2px 6px';
+            code.style.borderRadius = '4px';
+            code.style.background = 'var(--md-sys-color-surface-container-highest)';
+        });
+
+        const types = this.querySelectorAll('code.type, code.detail');
+        types.forEach(t => {
+            t.style.color = 'var(--md-sys-color-primary)';
+        });
+
+        const defaults = this.querySelectorAll('code.default');
+        defaults.forEach(d => {
+            d.style.color = 'var(--md-sys-color-secondary)';
+        });
+    }
+}
+
+export class MuApiRow extends MuElement {
+    static baseClass = 'mu-api-row';
+    static observedAttributes = ['name', 'type', 'default', 'signature', 'detail'];
+
+    render() {
+        // Just a container, actual rendering done by parent
+    }
+}
+
+define('mu-api-table', MuApiTable);
+define('mu-api-row', MuApiRow);

package/src/components/mu-avatar.js

@@ -0,0 +1,94 @@
+/**
+ * @fileoverview mu-avatar - User Avatar Component
+ * 
+ * Usage: 
+ * <mu-avatar src="/path/to/image.jpg" alt="John Doe" size="md"></mu-avatar>
+ * <mu-avatar initials="JD" size="lg"></mu-avatar>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuAvatar extends MuElement {
+    static baseClass = 'mu-avatar';
+    static cssFile = 'avatar';
+    static observedAttributes = ['src', 'alt', 'initials', 'size'];
+
+    render() {
+        const src = this.attr('src', '');
+        const alt = this.attr('alt', '');
+        const initials = this.attr('initials', '');
+        const size = this.attr('size', 'md');
+
+        const sizeMap = { sm: '32px', md: '40px', lg: '56px', xl: '80px' };
+        const fontSize = { sm: '12px', md: '14px', lg: '20px', xl: '28px' };
+
+        this.style.width = sizeMap[size] || size;
+        this.style.height = sizeMap[size] || size;
+        this.style.borderRadius = '50%';
+        this.style.display = 'inline-flex';
+        this.style.alignItems = 'center';
+        this.style.justifyContent = 'center';
+        this.style.overflow = 'hidden';
+        this.style.background = 'var(--md-sys-color-primary-container)';
+        this.style.color = 'var(--md-sys-color-on-primary-container)';
+        this.style.fontSize = fontSize[size] || '14px';
+        this.style.fontWeight = '600';
+
+        this.innerHTML = ''; // Clear existing content
+
+        let generatedInitials = '';
+        if (alt) {
+            const words = alt.split(' ');
+            generatedInitials = words.map(w => w[0]).join('').toUpperCase().slice(0, 2);
+        }
+
+        if (src) {
+            const img = document.createElement('img');
+            img.src = src;
+            img.alt = alt; // Safe: setting property, not attribute string
+            img.style.cssText = 'width:100%;height:100%;object-fit:cover;';
+            img.onerror = () => {
+                // Fallback to initials if image fails
+                this.innerHTML = '';
+                this.#renderInitials(initials, generatedInitials);
+            };
+            this.appendChild(img);
+        } else {
+            this.#renderInitials(initials, generatedInitials);
+        }
+    }
+
+    #renderInitials(initials, generatedInitials) {
+        // Initials are derived from short string manipulation, relatively low risk,
+        // but let's be safe and use textContent for the span.
+
+        if (initials) {
+            const span = document.createElement('span');
+            span.textContent = initials.toUpperCase().slice(0, 2);
+            this.appendChild(span);
+        } else if (generatedInitials) {
+            const span = document.createElement('span');
+            span.textContent = generatedInitials;
+            this.appendChild(span);
+        } else {
+            // Default user icon
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.setAttribute('width', '60%');
+            svg.setAttribute('height', '60%');
+            svg.setAttribute('viewBox', '0 0 16 16');
+            svg.setAttribute('fill', 'currentColor');
+
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('d', 'M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 0 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z');
+
+            svg.appendChild(path);
+            this.appendChild(svg);
+        }
+    }
+
+    update(attr, newValue, oldValue) {
+        this.render();
+    }
+}
+
+define('mu-avatar', MuAvatar);

package/src/components/mu-badge.js

@@ -0,0 +1,32 @@
+/**
+ * @fileoverview mu-badge - MD3 Badge Component
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuBadge extends MuElement {
+    static baseClass = 'mu-badge';
+    static cssFile = 'badge';
+    static observedAttributes = ['variant', 'size'];
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.#updateClasses();
+    }
+
+    render() {
+        this.#updateClasses();
+    }
+
+    update(attr, newValue, oldValue) {
+        this.#updateClasses();
+    }
+
+    #updateClasses() {
+        const variant = this.attr('variant', 'primary');
+        const size = this.attr('size', 'md');
+        this.className = `mu-badge mu-badge--${variant} mu-badge--${size}`;
+    }
+}
+
+define('mu-badge', MuBadge);

package/src/components/mu-bottom-nav.js

@@ -0,0 +1,115 @@
+/**
+ * mu-bottom-nav.js - Material Design 3 Bottom Navigation Bar
+ * 
+ * Fixed bottom navigation for mobile devices.
+ * Follows MD3 Navigation Bar specifications (3-5 destinations).
+ * 
+ * LIGHT DOM: Uses Light DOM for styling consistency.
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { breakpoints } from '../core/breakpoints.js';
+
+export class MuBottomNav extends MuElement {
+    static get observedAttributes() {
+        return ['hide-on-desktop', 'value'];
+    }
+
+    static baseClass = 'mu-bottom-nav';
+    static cssFile = 'bottom-nav';
+
+    constructor() {
+        super();
+        this._unsubscribe = null;
+    }
+
+    get hideOnDesktop() { return this.hasAttribute('hide-on-desktop'); }
+    set hideOnDesktop(v) { this.toggleAttribute('hide-on-desktop', Boolean(v)); }
+
+    get value() { return this.getAttribute('value') || ''; }
+    set value(v) { this.setAttribute('value', v); }
+
+    connectedCallback() {
+        // Preserve children before render
+        if (!this._childrenCaptured) {
+            this._userChildren = Array.from(this.children);
+            this._childrenCaptured = true;
+        }
+        super.connectedCallback();
+        this._setupBreakpointListener();
+        this._setupListeners();
+        this._updateVisibility();
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._unsubscribe) {
+            this._unsubscribe();
+            this._unsubscribe = null;
+        }
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (!this.isConnected) return;
+
+        if (name === 'hide-on-desktop') {
+            this._updateVisibility();
+        }
+    }
+
+    _setupBreakpointListener() {
+        if (this.hideOnDesktop) {
+            // Subscribe to centralized breakpoint changes
+            this._unsubscribe = breakpoints.subscribe(() => {
+                this._updateVisibility();
+            });
+        }
+    }
+
+    _updateVisibility() {
+        // Hide on medium+ screens (tablets and desktop) using centralized breakpoints
+        if (this.hideOnDesktop && breakpoints.isNotCompact) {
+            this.style.display = 'none';
+        } else {
+            this.style.display = '';
+        }
+    }
+
+    _setupListeners() {
+        // Listen for nav item selection
+        this.listen(this, 'mu-nav-select', (e) => {
+            this._updateActiveItem(e.detail.item);
+            this.value = e.detail.href || '';
+
+            this.emit('change', { value: this.value, item: e.detail.item }, { bubbles: true });
+        });
+    }
+
+    _updateActiveItem(selectedItem) {
+        const items = this.querySelectorAll('mu-nav-item, mu-drawer-item');
+        items.forEach(item => {
+            item.active = (item === selectedItem);
+        });
+    }
+
+    render() {
+        // Create nav wrapper and append preserved children
+        const nav = document.createElement('nav');
+        nav.className = 'mu-bottom-nav-nav';
+        nav.setAttribute('role', 'menu'); // ARIA: menuitem children require menu parent
+        nav.setAttribute('aria-label', 'Bottom navigation');
+
+        // Clear and rebuild
+        this.innerHTML = '';
+        this.appendChild(nav);
+
+        // Re-append user children
+        if (this._userChildren) {
+            this._userChildren.forEach(child => nav.appendChild(child));
+        }
+    }
+}
+
+if (!customElements.get('mu-bottom-nav')) {
+    customElements.define('mu-bottom-nav', MuBottomNav);
+}

package/src/components/mu-button.js

@@ -0,0 +1,61 @@
+/**
+ * @fileoverview mu-button - MD3 Button Component
+ * 
+ * Usage: <mu-button variant="primary" size="md">Label</mu-button>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { createRipple } from '../core/ripple.js';
+
+export class MuButton extends MuElement {
+    static baseClass = 'mu-button';
+    static cssFile = 'button';
+    static observedAttributes = ['variant', 'size', 'disabled'];
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'button');
+        this.setupActivation(() => this.click());
+
+        // MD3 Ripple effect on press
+        this.listen(this, 'pointerdown', (e) => {
+            if (!this.isDisabled) {
+                createRipple(this, e);
+            }
+        });
+    }
+
+    render() {
+        // Wrap text content in label span for styling
+        const label = this.textContent.trim();
+        this.innerHTML = `<span class="mu-button__label">${label}</span>`;
+        this.#updateClasses();
+    }
+
+    update(attr, newValue, oldValue) {
+        if (attr === 'disabled') {
+            this.updateTabindex();
+        }
+        this.#updateClasses();
+    }
+
+    #updateClasses() {
+        const variant = this.attr('variant', 'primary');
+        const size = this.attr('size', 'md');
+
+        // AGENT VALIDATION: Check variant
+        const validVariants = ['filled', 'elevated', 'tonal', 'outlined', 'text', 'danger', 'primary', 'secondary', 'ghost'];
+        if (!validVariants.includes(variant)) {
+            this.logError('INVALID_VARIANT', `Invalid button variant '${variant}'. Valid: ${validVariants.join(', ')}`);
+        }
+
+        // Build class list efficiently
+        this.className = `mu-button mu-button--${variant} mu-button--${size}`;
+
+        if (this.has('disabled')) {
+            this.classList.add('is-disabled');
+        }
+    }
+}
+
+define('mu-button', MuButton);

package/src/components/mu-callout.js

@@ -0,0 +1,71 @@
+/**
+ * @fileoverview mu-callout - MD3 Callout/Info Box Component
+ * 
+ * Usage: 
+ * <mu-callout variant="info">Important information here</mu-callout>
+ * <mu-callout variant="warning">Warning message</mu-callout>
+ * <mu-callout variant="success">Success message</mu-callout>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuCallout extends MuElement {
+    static baseClass = 'mu-callout';
+    static observedAttributes = ['variant', 'title'];
+
+    render() {
+        this.#updateStyles();
+    }
+
+    update(attr, newValue, oldValue) {
+        this.#updateStyles();
+    }
+
+    #updateStyles() {
+        const variant = this.attr('variant', 'info');
+
+        // MD3 color mappings
+        const variantColors = {
+            info: {
+                bg: 'var(--md-sys-color-primary-container)',
+                border: 'var(--md-sys-color-primary)',
+                text: 'var(--md-sys-color-on-primary-container)'
+            },
+            warning: {
+                bg: 'var(--md-sys-color-error-container)',
+                border: 'var(--md-sys-color-error)',
+                text: 'var(--md-sys-color-on-error-container)'
+            },
+            success: {
+                bg: 'var(--md-sys-color-tertiary-container)',
+                border: 'var(--md-sys-color-tertiary)',
+                text: 'var(--md-sys-color-on-tertiary-container)'
+            },
+            tip: {
+                bg: 'var(--md-sys-color-secondary-container)',
+                border: 'var(--md-sys-color-secondary)',
+                text: 'var(--md-sys-color-on-secondary-container)'
+            }
+        };
+
+        const colors = variantColors[variant] || variantColors.info;
+
+        // Apply MD3 callout styling
+        this.style.display = 'block';
+        // SOTA 2026: Proper containment - critical for responsive layout
+        this.style.boxSizing = 'border-box';
+        this.style.maxWidth = '100%';
+        this.style.wordWrap = 'break-word';
+        this.style.overflowWrap = 'break-word';
+        this.style.padding = '20px';  /* MD3: 20dp padding */
+        this.style.marginTop = '24px';  /* MD3: 24dp spacing from previous content */
+        this.style.marginBottom = '24px';
+        this.style.background = colors.bg;
+        this.style.borderLeft = `4px solid ${colors.border}`;
+        this.style.borderRadius = 'var(--md-sys-shape-corner-medium)';
+        this.style.color = colors.text;
+        this.style.lineHeight = '1.6';
+    }
+}
+
+define('mu-callout', MuCallout);

package/src/components/mu-card.js

@@ -0,0 +1,36 @@
+/**
+ * @fileoverview mu-card - MD3 Card Container Component
+ * 
+ * Usage: <mu-card variant="elevated">Content here</mu-card>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuCard extends MuElement {
+    static baseClass = 'mu-card';
+    static cssFile = 'card';
+    static observedAttributes = ['variant', 'padding'];
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.#updateClasses();
+    }
+
+    render() {
+        // Card just wraps content, no internal structure needed
+        this.#updateClasses();
+    }
+
+    update(attr, newValue, oldValue) {
+        this.#updateClasses();
+    }
+
+    #updateClasses() {
+        const variant = this.attr('variant', 'flat');
+        const padding = this.attr('padding', 'md');
+
+        this.className = `mu-card mu-card--${variant} mu-card--padding-${padding}`;
+    }
+}
+
+define('mu-card', MuCard);