microui-wc 0.1.0

package/src/components/mu-drawer-item.js

@@ -0,0 +1,158 @@
+/**
+ * mu-drawer-item.js - Material Design 3 Drawer/Nav Item Component
+ * 
+ * Navigation item for drawer (horizontal layout) and bottom navigation (vertical).
+ * Follows MD3 Navigation Drawer/Rail/Bar item specifications.
+ * 
+ * LIGHT DOM: This component uses Light DOM for styling consistency.
+ * Uses 'label' attribute or text content for the label.
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { escapeHTML } from '../core/utils.js';
+// Import MuIcon to ensure it's registered
+import './mu-icon.js';
+
+export class MuDrawerItem extends MuElement {
+    static get observedAttributes() {
+        return ['icon', 'href', 'active', 'badge', 'disabled', 'layout', 'label'];
+    }
+
+    static baseClass = 'mu-drawer-item';
+    static cssFile = 'drawer-item';
+
+    constructor() {
+        super();
+        // Immediately capture text content from child nodes SYNCHRONOUSLY
+        // This runs before connectedCallback and before any render
+        // Must be synchronous because microtask/setTimeout is too late
+        this._capturedLabel = '';
+
+        // Synchronously capture direct text nodes before any DOM manipulation
+        const textContent = Array.from(this.childNodes)
+            .filter(n => n.nodeType === Node.TEXT_NODE)
+            .map(n => n.textContent.trim())
+            .join('')
+            .trim();
+
+        if (textContent) {
+            this._capturedLabel = textContent;
+        }
+    }
+
+    get icon() { return this.getAttribute('icon') || ''; }
+    set icon(v) { this.setAttribute('icon', v); }
+
+    get href() { return this.getAttribute('href') || ''; }
+    set href(v) { this.setAttribute('href', v); }
+
+    get active() { return this.hasAttribute('active'); }
+    set active(v) { this.toggleAttribute('active', Boolean(v)); }
+
+    get badge() { return this.getAttribute('badge'); }
+    set badge(v) { v ? this.setAttribute('badge', v) : this.removeAttribute('badge'); }
+
+    get disabled() { return this.hasAttribute('disabled'); }
+    set disabled(v) { this.toggleAttribute('disabled', Boolean(v)); }
+
+    // Layout: 'horizontal' (default for drawer) or 'vertical' (for bottom-nav)
+    get layout() { return this.getAttribute('layout') || 'horizontal'; }
+    set layout(v) { this.setAttribute('layout', v); }
+
+    // Label getter - uses attribute or captured text
+    get label() { return this.getAttribute('label') || this._capturedLabel || ''; }
+    set label(v) { this.setAttribute('label', v); }
+
+    connectedCallback() {
+        // If label attribute already exists, capture it
+        if (!this._capturedLabel && this.hasAttribute('label')) {
+            this._capturedLabel = this.getAttribute('label');
+        }
+        // Final attempt to capture text if still empty
+        if (!this._capturedLabel && !this.hasAttribute('label')) {
+            this._capturedLabel = this.textContent.trim();
+            if (this._capturedLabel) {
+                this.setAttribute('label', this._capturedLabel);
+            }
+        }
+        super.connectedCallback();
+        this._setupListeners();
+
+        // Keyboard accessibility
+        this.setAttribute('tabindex', '0');
+        this.setAttribute('role', 'menuitem');
+        this.setupActivation(() => this._handleClick(new MouseEvent('click')));
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this.isConnected) {
+            this.render();
+        }
+    }
+
+    _setupListeners() {
+        this.listen(this, 'click', this._handleClick.bind(this));
+    }
+
+    _handleClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+
+        if (this.href) {
+            // Hash navigation
+            if (this.href.startsWith('#')) {
+                e.preventDefault();
+                window.location.hash = this.href;
+            }
+            // Let regular links work normally
+        }
+
+        // Dispatch selection event for parent drawer/nav to handle
+        this.emit('mu-nav-select', { href: this.href, item: this }, { bubbles: true, composed: true });
+    }
+
+    render() {
+        // Use label prop (getter handles fallback logic)
+        const labelText = escapeHTML(this.label);
+        const hasLabel = labelText.length > 0;
+        const badgeHtml = this.badge ? `<span class="mu-drawer-item-badge">${escapeHTML(this.badge)}</span>` : '';
+        const tag = this.href ? 'a' : 'button';
+        const hrefAttr = this.href ? `href="${escapeHTML(this.href)}"` : '';
+        const disabledAttr = this.disabled ? (this.href ? 'aria-disabled="true"' : 'disabled') : '';
+        // A11Y: Always add aria-label for screen readers - ensures link/button is identifiable
+        // even when label is visually separate or hidden in collapsed drawer
+        const ariaLabel = labelText ? `aria-label="${labelText}"` : '';
+
+        this.innerHTML = `
+            <${tag} class="mu-drawer-item-link" ${hrefAttr} ${disabledAttr} ${ariaLabel}>
+                <span class="mu-drawer-item-icon">
+                    <mu-icon name="${escapeHTML(this.icon)}" size="24"></mu-icon>
+                </span>
+                ${hasLabel ? `<span class="mu-drawer-item-label" aria-hidden="true">${labelText}</span>` : ''}
+                ${badgeHtml}
+            </${tag}>
+        `;
+    }
+}
+
+// Also export as mu-nav-item alias for bottom navigation
+export { MuDrawerItem as MuNavItem };
+
+if (!customElements.get('mu-drawer-item')) {
+    customElements.define('mu-drawer-item', MuDrawerItem);
+}
+
+// Register alias - mu-nav-item defaults to vertical layout
+if (!customElements.get('mu-nav-item')) {
+    customElements.define('mu-nav-item', class extends MuDrawerItem {
+        connectedCallback() {
+            // Set vertical layout by default for bottom-nav items
+            if (!this.hasAttribute('layout')) {
+                this.setAttribute('layout', 'vertical');
+            }
+            super.connectedCallback();
+        }
+    });
+}

package/src/components/mu-drawer.js

@@ -0,0 +1,305 @@
+/**
+ * mu-drawer.js - Material Design 3 Adaptive Navigation Drawer
+ * 
+ * Responsive drawer that adapts to screen size:
+ * - Desktop: Expanded rail or standard drawer
+ * - Tablet: Collapsed rail
+ * - Mobile: Hidden, opens as modal overlay
+ * 
+ * Follows MD3 Navigation Drawer/Rail specifications.
+ * LIGHT DOM: Uses Light DOM for styling consistency.
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { breakpoints } from '../core/breakpoints.js';
+import { keyboard } from '../core/keyboard.js';
+
+export class MuDrawer extends MuElement {
+    static get observedAttributes() {
+        return ['mode', 'open', 'expand-on-hover', 'position'];
+    }
+
+    static baseClass = 'mu-drawer';
+    static cssFile = 'drawer';
+
+    constructor() {
+        super();
+        this._currentMode = 'expanded'; // expanded | rail | hidden
+        this._isHovering = false;
+        this._unsubscribe = null;
+    }
+
+    // Modes: auto | permanent | temporary | rail
+    get mode() { return this.getAttribute('mode') || 'auto'; }
+    set mode(v) { this.setAttribute('mode', v); }
+
+    get open() { return this.hasAttribute('open'); }
+    set open(v) { this.toggleAttribute('open', Boolean(v)); }
+
+    get expandOnHover() { return this.hasAttribute('expand-on-hover'); }
+    set expandOnHover(v) { this.toggleAttribute('expand-on-hover', Boolean(v)); }
+
+    get position() { return this.getAttribute('position') || 'start'; }
+    set position(v) { this.setAttribute('position', v); }
+
+    connectedCallback() {
+        // Capture slotted children before render
+        if (!this._slotsCaptured) {
+            this._slots = {
+                header: this.querySelector('[slot="header"]'),
+                footer: this.querySelector('[slot="footer"]'),
+                default: Array.from(this.children).filter(c => !c.hasAttribute('slot'))
+            };
+            this._slotsCaptured = true;
+        }
+        super.connectedCallback();
+        this._setupBreakpointListener();
+        this._setupListeners();
+        // Force immediate mode application
+        this._forceUpdateMode();
+    }
+
+    /**
+     * Calculate the initial display mode based on current breakpoints
+     */
+    _getInitialMode() {
+        const mode = this.mode;
+        const isCompact = breakpoints.isCompact;
+        const isMedium = breakpoints.isMedium;
+
+        if (mode === 'permanent') {
+            return 'expanded';
+        } else if (mode === 'temporary') {
+            return 'hidden';
+        } else if (mode === 'rail') {
+            return isCompact ? 'hidden' : 'rail';
+        } else {
+            // Auto mode
+            if (isCompact) {
+                return 'hidden';
+            } else if (isMedium) {
+                return 'rail';
+            } else {
+                return 'expanded';
+            }
+        }
+    }
+
+    _forceUpdateMode() {
+        this._currentMode = this._getInitialMode();
+        this._applyMode();
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._unsubscribe) {
+            this._unsubscribe();
+            this._unsubscribe = null;
+        }
+        // Clean up ESC handler
+        this._unsubEsc?.();
+        this._unsubEsc = null;
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (!this.isConnected) return;
+
+        if (name === 'open') {
+            this._updateOpenState();
+        } else if (name === 'mode') {
+            this._updateMode();
+        }
+    }
+
+    _setupBreakpointListener() {
+        // Subscribe to centralized breakpoint changes
+        this._unsubscribe = breakpoints.subscribe(() => {
+            this._updateMode();
+        });
+    }
+
+    _updateMode() {
+        const mode = this.mode;
+        const isCompact = breakpoints.isCompact;
+        const isMedium = breakpoints.isMedium;
+
+        let newMode;
+
+        if (mode === 'permanent') {
+            newMode = 'expanded';
+        } else if (mode === 'temporary') {
+            newMode = 'hidden';
+        } else if (mode === 'rail') {
+            newMode = isCompact ? 'hidden' : 'rail';
+        } else {
+            // Auto mode
+            if (isCompact) {
+                newMode = 'hidden';
+            } else if (isMedium) {
+                newMode = 'rail';
+            } else {
+                newMode = 'expanded';
+            }
+        }
+
+        if (newMode !== this._currentMode) {
+            this._currentMode = newMode;
+            this._applyMode();
+        }
+    }
+
+    _applyMode() {
+        const drawer = this.querySelector('.mu-drawer-nav');
+        if (!drawer) return;
+
+        drawer.classList.remove('mu-drawer-mode-expanded', 'mu-drawer-mode-rail', 'mu-drawer-mode-hidden');
+        drawer.classList.add(`mu-drawer-mode-${this._currentMode}`);
+
+        // Update child items for rail mode
+        const items = this.querySelectorAll('mu-drawer-item');
+        items.forEach(item => {
+            if (this._currentMode === 'rail' && !this._isHovering) {
+                item.setAttribute('hide-label', '');
+            } else {
+                item.removeAttribute('hide-label');
+            }
+        });
+
+        // Auto close on mobile when switching away
+        if (this._currentMode === 'hidden' && !this.open) {
+            this._hideScrim();
+        }
+    }
+
+    _setupListeners() {
+        // Scrim click to close
+        const scrim = this.querySelector('.mu-drawer-scrim');
+        if (scrim) {
+            this.listen(scrim, 'click', () => {
+                this.open = false;
+            });
+        }
+
+        // Expand on hover for rail mode
+        const drawer = this.querySelector('.mu-drawer-nav');
+        if (drawer && this.expandOnHover) {
+            this.listen(drawer, 'mouseenter', () => {
+                if (this._currentMode === 'rail') {
+                    this._isHovering = true;
+                    drawer.classList.add('mu-drawer-expanded-hover');
+                    this._applyMode();
+                }
+            });
+
+            this.listen(drawer, 'mouseleave', () => {
+                if (this._currentMode === 'rail') {
+                    this._isHovering = false;
+                    drawer.classList.remove('mu-drawer-expanded-hover');
+                    this._applyMode();
+                }
+            });
+        }
+
+        // Listen for nav item selection
+        this.listen(this, 'mu-nav-select', (e) => {
+            // On mobile, close drawer after selection
+            if (this._currentMode === 'hidden' && this.open) {
+                this.open = false;
+            }
+            // Update active states
+            this._updateActiveItem(e.detail.item);
+        });
+
+        // Initialize ESC handler tracker
+        this._unsubEsc = null;
+    }
+
+    _updateActiveItem(selectedItem) {
+        const items = this.querySelectorAll('mu-drawer-item');
+        items.forEach(item => {
+            item.active = (item === selectedItem);
+        });
+    }
+
+    _updateOpenState() {
+        const drawer = this.querySelector('.mu-drawer-nav');
+
+        if (this.open) {
+            drawer?.classList.add('mu-drawer-open');
+            if (this._currentMode === 'hidden') {
+                this._showScrim();
+                // Register ESC handler when opening in hidden (modal) mode
+                this._unsubEsc = keyboard.pushEscapeHandler(this, () => {
+                    this.open = false;
+                });
+            }
+        } else {
+            drawer?.classList.remove('mu-drawer-open');
+            this._hideScrim();
+            // Unregister ESC handler when closing
+            this._unsubEsc?.();
+            this._unsubEsc = null;
+        }
+    }
+
+    _showScrim() {
+        const scrim = this.querySelector('.mu-drawer-scrim');
+        if (scrim) {
+            scrim.classList.add('mu-drawer-scrim-visible');
+        }
+    }
+
+    _hideScrim() {
+        const scrim = this.querySelector('.mu-drawer-scrim');
+        if (scrim) {
+            scrim.classList.remove('mu-drawer-scrim-visible');
+        }
+    }
+
+    toggle() {
+        this.open = !this.open;
+    }
+
+    render() {
+        // Build DOM structure
+        this.innerHTML = '';
+
+        // Scrim (for modal mode)
+        const scrim = document.createElement('div');
+        scrim.className = 'mu-drawer-scrim';
+        this.appendChild(scrim);
+
+        // Nav drawer
+        const nav = document.createElement('nav');
+        nav.className = `mu-drawer-nav mu-drawer-mode-${this._getInitialMode()}`;
+        nav.setAttribute('role', 'navigation');
+
+        // Header
+        const header = document.createElement('div');
+        header.className = 'mu-drawer-header';
+        if (this._slots.header) {
+            header.appendChild(this._slots.header);
+        }
+        nav.appendChild(header);
+
+        // Content (default slot)
+        const content = document.createElement('div');
+        content.className = 'mu-drawer-content';
+        content.setAttribute('role', 'menu'); // ARIA: menuitem children require menu parent
+        if (this._slots.default) {
+            this._slots.default.forEach(child => content.appendChild(child));
+        }
+        nav.appendChild(content);
+
+        // Footer
+        if (this._slots.footer) {
+            nav.appendChild(this._slots.footer);
+        }
+
+        this.appendChild(nav);
+    }
+}
+
+if (!customElements.get('mu-drawer')) {
+    customElements.define('mu-drawer', MuDrawer);
+}

package/src/components/mu-dropdown.js

@@ -0,0 +1,239 @@
+/**
+ * @fileoverview mu-dropdown - MD3 Select Menu Component (SOTA Popover API)
+ * Uses native Popover API for top-layer and light-dismiss.
+ * 
+ * MD3 Reference: https://m3.material.io/components/menus
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { escapeHTML } from '../core/utils.js';
+
+export class MuDropdown extends MuElement {
+    static baseClass = 'mu-dropdown';
+    static cssFile = 'input';
+    static observedAttributes = ['placeholder', 'value', 'disabled'];
+
+    #menu = null;
+    #trigger = null;
+    #options = []; // Store options data
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        // Reposition on scroll/resize (Anchor API not yet baseline)
+        this.listen(window, 'scroll', () => this.#updatePosition(), { capture: true, passive: true });
+        this.listen(window, 'resize', () => this.#updatePosition(), { passive: true });
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#menu?.remove();
+    }
+
+    render() {
+        // Only build once - check both trigger AND menu exist
+        if (this.querySelector('.mu-dropdown__trigger') && this.#menu) return;
+
+        // Use requestAnimationFrame to ensure children (mu-option) are parsed
+        requestAnimationFrame(() => this.#buildDropdown());
+    }
+
+    #buildDropdown() {
+        // Trigger already built?
+        if (this.querySelector('.mu-dropdown__trigger') && this.#menu) return;
+
+        const placeholder = this.getAttribute('placeholder') || 'Select';
+
+        // Save options as data BEFORE clearing
+        const optionElements = this.querySelectorAll('mu-option');
+        this.#options = Array.from(optionElements).map(opt => ({
+            value: opt.getAttribute('value') || opt.textContent.trim(),
+            label: opt.textContent.trim()
+        }));
+
+        // Create trigger button
+        this.#trigger = document.createElement('button');
+        this.#trigger.className = 'mu-dropdown__trigger';
+        this.#trigger.type = 'button';
+
+        // Escape user-provided attributes to prevent XSS
+        const safePlaceholder = escapeHTML(placeholder);
+
+        // Generate unique ID for popover targeting
+        const menuId = `mu-dropdown-menu-${Math.random().toString(36).slice(2, 9)}`;
+
+        // Accessibility attributes
+        this.#trigger.setAttribute('aria-haspopup', 'listbox');
+        this.#trigger.setAttribute('aria-expanded', 'false');
+        this.#trigger.setAttribute('aria-label', safePlaceholder);
+        this.#trigger.setAttribute('popovertarget', menuId); // Native popover trigger
+        this.#trigger.innerHTML = `
+            <span class="mu-dropdown__value">${safePlaceholder}</span>
+            <svg class="mu-dropdown__arrow" width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M1 1l4 4 4-4"/>
+            </svg>
+        `;
+
+        // Keyboard navigation on trigger
+        this.listen(this.#trigger, 'keydown', (e) => {
+            if (!this.hasAttribute('disabled')) {
+                if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.open();
+                }
+            }
+        });
+
+        // Clear and add trigger
+        this.innerHTML = '';
+        this.appendChild(this.#trigger);
+
+        // Create menu with native Popover API
+        this.#menu = document.createElement('div');
+        this.#menu.id = menuId;
+        this.#menu.className = 'mu-dropdown__menu';
+        this.#menu.setAttribute('popover', 'auto'); // Auto-dismiss on click outside!
+        this.#menu.setAttribute('role', 'listbox');
+        this.#menu.tabIndex = -1;
+
+        // Listen for popover toggle events (native API)
+        this.listen(this.#menu, 'toggle', (e) => {
+            if (e.newState === 'open') {
+                this.classList.add('is-open');
+                this.#trigger?.setAttribute('aria-expanded', 'true');
+                this.#updatePosition();
+                // Focus first option
+                requestAnimationFrame(() => {
+                    const val = this.getAttribute('value');
+                    const target = val
+                        ? this.#menu.querySelector(`[data-value="${val}"]`)
+                        : this.#menu.firstChild;
+                    target?.focus();
+                });
+            } else {
+                this.classList.remove('is-open');
+                this.#trigger?.setAttribute('aria-expanded', 'false');
+            }
+        });
+
+        // Keyboard navigation in menu
+        this.listen(this.#menu, 'keydown', (e) => this.#handleMenuKey(e));
+
+        // Build options
+        this.#options.forEach(opt => {
+            const el = document.createElement('div');
+            el.className = 'mu-dropdown__option';
+            el.setAttribute('data-value', opt.value);
+            el.textContent = opt.label;
+            el.setAttribute('role', 'option');
+            el.tabIndex = -1;
+            this.listen(el, 'click', () => this.select(opt.value, opt.label));
+            this.#menu.appendChild(el);
+        });
+
+        // Append menu to component (not portal - popover handles top-layer!)
+        this.appendChild(this.#menu);
+    }
+
+    #handleMenuKey(e) {
+        const options = Array.from(this.#menu.querySelectorAll('.mu-dropdown__option'));
+        const current = document.activeElement;
+        const idx = options.indexOf(current);
+
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            const next = options[idx + 1] || options[0];
+            next?.focus();
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prev = options[idx - 1] || options[options.length - 1];
+            prev?.focus();
+        } else if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (idx >= 0) {
+                const opt = this.#options[idx];
+                this.select(opt.value, opt.label);
+            }
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            this.close();
+            this.#trigger?.focus();
+        }
+    }
+
+    /**
+     * Position menu relative to trigger (Anchor Positioning not yet baseline)
+     * Uses manual positioning until CSS Anchor Positioning is widely available.
+     */
+    #updatePosition() {
+        if (!this.#menu || !this.#trigger) return;
+
+        const triggerRect = this.#trigger.getBoundingClientRect();
+        const menuHeight = this.#menu.scrollHeight || 200;
+        const spaceBelow = window.innerHeight - triggerRect.bottom - 8;
+
+        // Decide if opening above or below
+        const openAbove = spaceBelow < menuHeight && triggerRect.top > menuHeight;
+        const top = openAbove
+            ? triggerRect.top - menuHeight - 4
+            : triggerRect.bottom + 4;
+
+        // Apply positioning (popover uses position: fixed by default in top-layer)
+        Object.assign(this.#menu.style, {
+            position: 'fixed',
+            margin: '0', // Reset popover default margin: auto
+            top: `${top}px`,
+            left: `${triggerRect.left}px`,
+            width: `${triggerRect.width}px`,
+            minWidth: '160px',
+            maxHeight: '280px'
+        });
+    }
+
+    toggle() {
+        if (this.#menu?.matches(':popover-open')) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
+
+    open() {
+        if (this.hasAttribute('disabled') || !this.#menu) return;
+        this.#menu.showPopover(); // Native API!
+    }
+
+    close() {
+        if (this.#menu?.matches(':popover-open')) {
+            this.#menu.hidePopover(); // Native API!
+        }
+    }
+
+    select(value, label) {
+        const valueEl = this.querySelector('.mu-dropdown__value');
+        if (valueEl) valueEl.textContent = label;
+
+        this.setAttribute('value', value);
+        this.#menu?.querySelectorAll('.mu-dropdown__option').forEach(o =>
+            o.classList.toggle('is-active', o.getAttribute('data-value') === value)
+        );
+
+        this.emit('mu-select', { value, label });
+        this.close();
+    }
+
+    get value() { return this.getAttribute('value') || ''; }
+    set value(v) { this.setAttribute('value', v); }
+}
+
+export class MuOption extends MuElement {
+    static baseClass = 'mu-dropdown__option';
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'option');
+    }
+    render() { }
+}
+
+define('mu-dropdown', MuDropdown);
+define('mu-option', MuOption);