mtrl 0.9.4 → 0.9.5

package/dist/components/badge/api.d.ts

@@ -30,7 +30,6 @@ interface ComponentWithElements {
     };
     getClass: (name: string) => string;
     addClass: (...classes: string[]) => ComponentWithElements;
-    removeClass: (...classes: string[]) => ComponentWithElements;
     on: (event: string, handler: Function) => ComponentWithElements;
     off: (event: string, handler: Function) => ComponentWithElements;
 }

package/dist/components/badge/api.js

@@ -84,9 +84,11 @@ export const withAPI = ({ visibility, lifecycle }) => (component) => {
             component.config.variant = variant;
             if (variant === VARIANT_SMALL) {
                 component.element.textContent = "";
+                component.element.removeAttribute("role");
                 component.element.setAttribute("aria-hidden", "true");
             }
             else {
+                component.element.removeAttribute("aria-hidden");
                 component.element.setAttribute("role", "status");
                 if (component.config.label !== undefined) {
                     badgeComponent.setLabel(component.config.label);
@@ -146,7 +148,7 @@ export const withAPI = ({ visibility, lifecycle }) => (component) => {
             return badgeComponent;
         },
         removeClass: (...classes) => {
-            component.removeClass(...classes);
+            component.element.classList.remove(...classes.filter(Boolean));
             return badgeComponent;
         },
         on: (event, handler) => {

package/dist/components/bottom-app-bar/bottom-app-bar.js

@@ -37,13 +37,11 @@ export const createBottomAppBar = (config = {}) => {
             if (currentScrollY > prevScrollY + 10) {
                 if (isVisible) {
                     bottomBar.hide();
-                    componentConfig.onVisibilityChange?.(false);
                 }
             }
             else if (currentScrollY < prevScrollY - 10) {
                 if (!isVisible) {
                     bottomBar.show();
-                    componentConfig.onVisibilityChange?.(true);
                 }
             }
             prevScrollY = currentScrollY;
@@ -57,6 +55,9 @@ export const createBottomAppBar = (config = {}) => {
     }
     const bottomBar = {
         ...withLifecycleComponent,
+        destroy() {
+            withLifecycleComponent.lifecycle.destroy();
+        },
         addAction(button) {
             actionsContainer.appendChild(button);
             return this;
@@ -69,12 +70,18 @@ export const createBottomAppBar = (config = {}) => {
         },
         show() {
             this.element.classList.remove(`${component.getClass("bottom-app-bar")}--hidden`);
+            const changed = !isVisible;
             isVisible = true;
+            if (changed)
+                componentConfig.onVisibilityChange?.(true);
             return this;
         },
         hide() {
             this.element.classList.add(`${component.getClass("bottom-app-bar")}--hidden`);
+            const changed = isVisible;
             isVisible = false;
+            if (changed)
+                componentConfig.onVisibilityChange?.(false);
             return this;
         },
         isVisible() {

package/dist/components/button/features/progress.d.ts

@@ -17,6 +17,11 @@ interface ProgressEnhancedComponent {
     };
     setText?: (text: string) => unknown;
     getText?: () => string;
+    /** The label manager withText installs; the setText/getText above only exist after withAPI. */
+    text?: {
+        setText: (text: string) => unknown;
+        getText: () => string;
+    };
     showProgress?: () => Promise<ProgressEnhancedComponent>;
     showProgressSync?: () => ProgressEnhancedComponent;
     hideProgress?: () => Promise<ProgressEnhancedComponent>;

package/dist/components/button/features/progress.js

@@ -109,19 +109,23 @@ export const withProgress = (config) => (component) => {
         component.setIndeterminate(indeterminate);
         return component;
     };
+    const readLabel = () => component.text ? component.text.getText() : component.getText?.();
+    const writeLabel = (value) => {
+        if (component.text)
+            component.text.setText(value);
+        else
+            component.setText?.(value);
+    };
     component.setLoading = async function (loading, text) {
         if (loading && !isLoading) {
-            if (component.setText && component.getText) {
-                originalText = component.getText();
-            }
+            originalText = readLabel() ?? "";
             isLoading = true;
             await component.showProgress();
             if (component.disabled?.disable) {
                 component.disabled.disable();
             }
-            if (text && component.setText) {
-                component.setText(text);
-            }
+            if (text)
+                writeLabel(text);
         }
         else if (!loading && isLoading) {
             isLoading = false;
@@ -129,12 +133,10 @@ export const withProgress = (config) => (component) => {
             if (component.disabled?.enable) {
                 component.disabled.enable();
             }
-            if (text && component.setText) {
-                component.setText(text);
-            }
-            else if (originalText && component.setText) {
-                component.setText(originalText);
-            }
+            if (text)
+                writeLabel(text);
+            else if (originalText)
+                writeLabel(originalText);
         }
         return component;
     };

package/dist/components/card/api.js

@@ -9,24 +9,27 @@ export const withAPI = ({ lifecycle, config }) => (component) => ({
         return this;
     },
     setHeader(headerElement) {
-        if (headerElement && headerElement.classList.contains(`${component.getClass('card')}-header`)) {
-            const existingHeader = component.element.querySelector(`.${component.getClass('card')}-header`);
+        const card = component.getClass('card');
+        if (headerElement && headerElement.classList.contains(`${card}-header`)) {
+            const title = (header) => header?.querySelector(`.${card}-header-title`)?.id || null;
+            const existingHeader = component.element.querySelector(`.${card}-header`);
             if (existingHeader) {
+                const previous = title(existingHeader);
+                if (previous && component.element.getAttribute('aria-labelledby') === previous) {
+                    component.element.removeAttribute('aria-labelledby');
+                }
                 existingHeader.remove();
             }
-            const mediaElement = component.element.querySelector(`.${component.getClass('card')}-media`);
-            if (mediaElement) {
-                const mediaElements = component.element.querySelectorAll(`.${component.getClass('card')}-media`);
-                const lastMedia = mediaElements[mediaElements.length - 1];
-                if (lastMedia.nextSibling) {
-                    component.element.insertBefore(headerElement, lastMedia.nextSibling);
-                }
-                else {
-                    component.element.appendChild(headerElement);
-                }
+            let before = component.element.firstElementChild;
+            while (before && before.classList.contains(`${card}-media`)) {
+                before = before.nextElementSibling;
             }
-            else {
-                component.element.insertBefore(headerElement, component.element.firstChild);
+            component.element.insertBefore(headerElement, before);
+            const titleId = title(headerElement);
+            if (titleId &&
+                !component.element.hasAttribute('aria-labelledby') &&
+                !component.element.hasAttribute('aria-label')) {
+                component.element.setAttribute('aria-labelledby', titleId);
             }
         }
         return this;

package/dist/components/card/config.js

@@ -75,7 +75,7 @@ export const getElementConfig = (config) => {
     if (config.aria) {
         Object.entries(config.aria).forEach(([key, value]) => {
             if (value !== undefined) {
-                const attrName = key.startsWith("aria-") ? key : `aria-${key}`;
+                const attrName = key === "role" || key.startsWith("aria-") ? key : `aria-${key}`;
                 ariaAttributes[attrName] = value;
             }
         });

package/dist/components/card/content.js

@@ -4,6 +4,7 @@ import { createBase, withElement } from "../../core/compose/component.js";
 import { createElement } from "../../core/dom/create.js";
 import { safeUrl } from "../../core/utils/url.js";
 export const CARD_CONTENT_PADDING = true;
+let headerCount = 0;
 export const createCardContent = (config = {}) => {
     const baseConfig = {
         ...config,
@@ -73,13 +74,9 @@ export const createCardHeader = (config = {}) => {
                 text: config.title,
                 container: textContainer,
                 attributes: {
-                    id: `${header.element.id || 'card-header'}-title`
+                    id: `${header.element.id || `card-header-${++headerCount}`}-title`
                 }
             });
-            const parentCard = header.element.closest(`.${PREFIX}-card`);
-            if (parentCard && !parentCard.hasAttribute('aria-labelledby')) {
-                parentCard.setAttribute('aria-labelledby', `${header.element.id || 'card-header'}-title`);
-            }
         }
         if (config.subtitle) {
             createElement({

package/dist/components/divider/features.d.ts

@@ -1,50 +1,6 @@
 import { BaseComponent, ElementComponent } from "../../core/compose/index.js";
 import { DividerConfig } from "./config.js";
 import { DividerComponent } from "./types.js";
-/**
- * Adds orientation functionality to divider
- *
- * Higher-order function that enhances a component with the ability to be
- * oriented horizontally (default) or vertically. Controls the appropriate
- * CSS classes and dimensional styling based on orientation.
- *
- * @param config - Divider configuration
- * @returns Function that enhances a component with orientation capabilities
- *
- * @internal
- */
 export declare const withOrientation: (config: DividerConfig) => <C extends ElementComponent & BaseComponent>(component: C) => C & Partial<DividerComponent>;
-/**
- * Adds inset functionality to divider
- *
- * Higher-order function that enhances a component with the ability to have
- * customized inset spacing. Supports three variants (full-width, inset, middle-inset)
- * and allows fine-grained control over start and end insets.
- *
- * Insets are applied as margins in the appropriate direction based on orientation:
- * - For horizontal dividers: left/right margins
- * - For vertical dividers: top/bottom margins
- *
- * @param config - Divider configuration
- * @returns Function that enhances a component with inset capabilities
- *
- * @internal
- */
-export declare const withInset: (config: DividerConfig) => <C extends ElementComponent & Partial<DividerComponent>>(component: C) => C & Partial<DividerComponent>;
-/**
- * Adds style customization to divider
- *
- * Higher-order function that enhances a component with visual customization
- * capabilities, including:
- * - Custom thickness (height for horizontal, width for vertical dividers)
- * - Custom colors (background-color CSS property)
- *
- * These styling options allow dividers to be visually adapted to different
- * design requirements while maintaining Material Design principles.
- *
- * @param config - Divider configuration
- * @returns Function that enhances a component with style capabilities
- *
- * @internal
- */
-export declare const withStyle: (config: DividerConfig) => <C extends ElementComponent & Partial<DividerComponent>>(component: C) => C & Partial<DividerComponent>;
+export declare const withInset: (config: DividerConfig) => <C extends ElementComponent & BaseComponent & Partial<DividerComponent>>(component: C) => C & Partial<DividerComponent>;
+export declare const withStyle: (config: DividerConfig) => <C extends ElementComponent & BaseComponent & Partial<DividerComponent>>(component: C) => C & Partial<DividerComponent>;

package/dist/components/divider/features.js

@@ -1,138 +1,77 @@
-export const withOrientation = (config) => (component) => {
+const ORIENTATIONS = ['horizontal', 'vertical'];
+const VARIANTS = ['full-width', 'inset', 'middle-inset'];
+const DEFAULT_INSET = 16;
+const applyLayout = (component, config) => {
+    const { element } = component;
+    const base = component.getClass('divider');
     const orientation = config.orientation || 'horizontal';
-    component.element.classList.add(`${component.getClass('divider')}--${orientation}`);
+    const variant = config.variant || 'full-width';
     const thickness = config.thickness || 1;
-    if (orientation === 'horizontal') {
-        component.element.style.height = `${thickness}px`;
-        component.element.style.width = '100%';
-    }
-    else {
-        component.element.style.width = `${thickness}px`;
-        component.element.style.height = '100%';
+    const horizontal = orientation === 'horizontal';
+    ORIENTATIONS.forEach(name => element.classList.toggle(`${base}--${name}`, name === orientation));
+    VARIANTS.forEach(name => element.classList.toggle(`${base}--${name}`, name === variant));
+    if (horizontal)
+        element.removeAttribute('aria-orientation');
+    else
+        element.setAttribute('aria-orientation', 'vertical');
+    const style = element.style;
+    style.marginLeft = style.marginRight = style.marginTop = style.marginBottom = '';
+    const cross = horizontal ? 'height' : 'width';
+    const main = horizontal ? 'width' : 'height';
+    style[cross] = `${thickness}px`;
+    style[main] = '100%';
+    if (variant !== 'full-width') {
+        const insetStart = config.insetStart !== undefined ? config.insetStart : DEFAULT_INSET;
+        const insetEnd = config.insetEnd !== undefined
+            ? config.insetEnd
+            : (variant === 'middle-inset' ? DEFAULT_INSET : 0);
+        style[horizontal ? 'marginLeft' : 'marginTop'] = `${insetStart}px`;
+        style[horizontal ? 'marginRight' : 'marginBottom'] = `${insetEnd}px`;
+        style[main] = 'auto';
     }
+};
+export const withOrientation = (config) => (component) => {
+    applyLayout(component, config);
     return {
         ...component,
         getOrientation() {
-            return orientation;
+            return config.orientation || 'horizontal';
         },
         setOrientation(newOrientation) {
-            component.element.classList.remove(`${component.getClass('divider')}--${orientation}`);
-            component.element.classList.add(`${component.getClass('divider')}--${newOrientation}`);
-            if (newOrientation === 'horizontal') {
-                component.element.style.height = `${thickness}px`;
-                component.element.style.width = '100%';
-                component.element.style.marginTop = '';
-                component.element.style.marginBottom = '';
-            }
-            else {
-                component.element.style.width = `${thickness}px`;
-                component.element.style.height = '100%';
-                component.element.style.marginLeft = '';
-                component.element.style.marginRight = '';
-            }
+            config.orientation = newOrientation;
+            applyLayout(component, config);
             return this;
         }
     };
 };
-export const withInset = (config) => (component) => {
-    const variant = config.variant || 'full-width';
-    const orientation = config.orientation || 'horizontal';
-    if (variant === 'inset' || variant === 'middle-inset') {
-        if (orientation === 'horizontal') {
-            const insetStart = config.insetStart !== undefined ? config.insetStart : 16;
-            const insetEnd = config.insetEnd !== undefined ? config.insetEnd : (variant === 'middle-inset' ? 16 : 0);
-            component.element.style.marginLeft = `${insetStart}px`;
-            component.element.style.marginRight = `${insetEnd}px`;
-            component.element.style.width = "auto";
-        }
-        else {
-            const insetStart = config.insetStart !== undefined ? config.insetStart : 16;
-            const insetEnd = config.insetEnd !== undefined ? config.insetEnd : (variant === 'middle-inset' ? 16 : 0);
-            component.element.style.marginTop = `${insetStart}px`;
-            component.element.style.marginBottom = `${insetEnd}px`;
-            component.element.style.height = "auto";
-        }
+export const withInset = (config) => (component) => ({
+    ...component,
+    getVariant() {
+        return config.variant || 'full-width';
+    },
+    setVariant(newVariant) {
+        config.variant = newVariant;
+        applyLayout(component, config);
+        return this;
+    },
+    setInset(insetStart, insetEnd) {
+        if (insetStart !== undefined)
+            config.insetStart = insetStart;
+        if (insetEnd !== undefined)
+            config.insetEnd = insetEnd;
+        applyLayout(component, config);
+        return this;
     }
-    return {
-        ...component,
-        getVariant() {
-            return variant;
-        },
-        setVariant(newVariant) {
-            component.element.classList.remove(`${component.getClass('divider')}--${variant}`);
-            component.element.classList.add(`${component.getClass('divider')}--${newVariant}`);
-            const currentOrientation = component.getOrientation ? component.getOrientation() : orientation;
-            if (newVariant === 'full-width') {
-                if (currentOrientation === 'horizontal') {
-                    component.element.style.marginLeft = '';
-                    component.element.style.marginRight = '';
-                }
-                else {
-                    component.element.style.marginTop = '';
-                    component.element.style.marginBottom = '';
-                }
-            }
-            else {
-                const insetStart = config.insetStart !== undefined ? config.insetStart : 16;
-                const insetEnd = config.insetEnd !== undefined ? config.insetEnd : (newVariant === 'middle-inset' ? 16 : 0);
-                if (currentOrientation === 'horizontal') {
-                    component.element.style.marginLeft = `${insetStart}px`;
-                    component.element.style.marginRight = `${insetEnd}px`;
-                }
-                else {
-                    component.element.style.marginTop = `${insetStart}px`;
-                    component.element.style.marginBottom = `${insetEnd}px`;
-                }
-            }
-            return this;
-        },
-        setInset(insetStart, insetEnd) {
-            const currentOrientation = component.getOrientation ? component.getOrientation() : orientation;
-            const currentVariant = component.getVariant ? component.getVariant() : variant;
-            if (currentVariant !== 'full-width') {
-                if (currentOrientation === 'horizontal') {
-                    if (insetStart !== undefined) {
-                        component.element.style.marginLeft = `${insetStart}px`;
-                    }
-                    if (insetEnd !== undefined) {
-                        component.element.style.marginRight = `${insetEnd}px`;
-                    }
-                }
-                else {
-                    if (insetStart !== undefined) {
-                        component.element.style.marginTop = `${insetStart}px`;
-                    }
-                    if (insetEnd !== undefined) {
-                        component.element.style.marginBottom = `${insetEnd}px`;
-                    }
-                }
-            }
-            return this;
-        }
-    };
-};
+});
 export const withStyle = (config) => (component) => {
     if (config.color) {
         component.element.style.backgroundColor = config.color;
     }
-    const thickness = config.thickness || 1;
-    const orientation = config.orientation || 'horizontal';
-    if (orientation === 'horizontal') {
-        component.element.style.height = `${thickness}px`;
-    }
-    else {
-        component.element.style.width = `${thickness}px`;
-    }
     return {
         ...component,
         setThickness(newThickness) {
-            const currentOrientation = component.getOrientation ? component.getOrientation() : orientation;
-            if (currentOrientation === 'horizontal') {
-                component.element.style.height = `${newThickness}px`;
-            }
-            else {
-                component.element.style.width = `${newThickness}px`;
-            }
+            config.thickness = newThickness;
+            applyLayout(component, config);
             return this;
         },
         setColor(color) {

package/dist/components/radios/api.d.ts

@@ -21,11 +21,9 @@ interface ComponentWithRadio {
     enableOption: (value: string) => void;
     disableOption: (value: string) => void;
     getClass: (name: string) => string;
-    events: {
-        on: (event: string, handler: Function) => void;
-        off: (event: string, handler: Function) => void;
-        emit?: (event: string, data: unknown) => void;
-    };
+    on: (event: string, handler: Function) => void;
+    off: (event: string, handler: Function) => void;
+    emit?: (event: string, data: unknown) => void;
 }
 /**
  * Enhances a radios component with API methods
@@ -33,5 +31,5 @@ interface ComponentWithRadio {
  * @returns {Function} Higher-order function that adds API methods to component
  * @internal This is an internal utility for the Radios component
  */
-export declare const withAPI: ({ disabled, lifecycle }: ApiOptions) => (component: ComponentWithRadio) => RadiosComponent;
+export declare const withAPI: ({ lifecycle }: ApiOptions) => (component: ComponentWithRadio) => RadiosComponent;
 export {};

package/dist/components/radios/api.js

@@ -1,24 +1,4 @@
-export const withAPI = ({ disabled, lifecycle }) => (component) => {
-    if (!component.events) {
-        component.events = {
-            on: (event, handler) => {
-                component.element.addEventListener(event, ((e) => handler(e.detail)));
-            },
-            off: (event, handler) => {
-                component.element.removeEventListener(event, handler);
-            },
-            emit: (event, data) => {
-                const customEvent = new CustomEvent(event, { detail: data });
-                component.element.dispatchEvent(customEvent);
-            },
-        };
-    }
-    else if (!component.events.emit) {
-        component.events.emit = (event, data) => {
-            const customEvent = new CustomEvent(event, { detail: data });
-            component.element.dispatchEvent(customEvent);
-        };
-    }
+export const withAPI = ({ lifecycle }) => (component) => {
     const radiosComponent = {
         element: component.element,
         radios: component.radios,
@@ -41,11 +21,11 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
             return this;
         },
         enable() {
-            disabled.enable();
+            component.enable();
             return this;
         },
         disable() {
-            disabled.disable();
+            component.disable();
             return this;
         },
         enableOption(value) {
@@ -57,11 +37,11 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
             return this;
         },
         on(event, handler) {
-            component.events.on(event, handler);
+            component.on(event, handler);
             return this;
         },
         off(event, handler) {
-            component.events.off(event, handler);
+            component.off(event, handler);
             return this;
         },
         destroy() {

package/dist/components/radios/radio.js

@@ -58,23 +58,11 @@ export const withRadio = (config) => (component) => {
                         radio.input.checked = false;
                     }
                 });
-                if (component.events && typeof component.events.emit === 'function') {
-                    component.events.emit('change', {
-                        value: option.value,
-                        originalEvent: e,
-                        option
-                    });
-                }
-                else if (typeof component.on === 'function') {
-                    const changeEvent = new CustomEvent('change', {
-                        detail: {
-                            value: option.value,
-                            originalEvent: e,
-                            option
-                        }
-                    });
-                    component.element.dispatchEvent(changeEvent);
-                }
+                component.emit?.('change', {
+                    value: option.value,
+                    originalEvent: e,
+                    option
+                });
             }
         };
         input.addEventListener('change', handleChange);
@@ -112,28 +100,15 @@ export const withRadio = (config) => (component) => {
     if (config.options && Array.isArray(config.options)) {
         config.options.forEach(option => addOption(option));
     }
-    if (!component.events) {
-        component.events = {
-            on: (event, handler) => {
-                component.element.addEventListener(event, (e) => handler(e.detail));
-            },
-            off: (event, handler) => {
-                component.element.removeEventListener(event, handler);
-            },
-            emit: (event, data) => {
-                const customEvent = new CustomEvent(event, { detail: data });
-                component.element.dispatchEvent(customEvent);
-            }
-        };
-    }
     return {
         ...component,
         radios,
         getValue: () => selectedValue,
         setValue: (value) => {
-            selectedValue = value;
+            const known = radios.some(radio => radio.config.value === value);
+            selectedValue = known ? value : '';
             radios.forEach(radio => {
-                radio.input.checked = radio.config.value === value;
+                radio.input.checked = known && radio.config.value === value;
             });
             return component;
         },

package/dist/components/search/features/states.js

@@ -38,6 +38,7 @@ export const withStates = (config) => (component) => {
                 viewMode: currentViewMode,
             });
         }
+        config.onExpand?.();
     };
     const collapseToBar = () => {
         if (currentState === SEARCH_STATES.BAR) {
@@ -67,6 +68,7 @@ export const withStates = (config) => (component) => {
                 viewMode: currentViewMode,
             });
         }
+        config.onCollapse?.();
     };
     const setViewMode = (mode) => {
         if (mode === currentViewMode) {

package/dist/components/search/features/suggestions.js

@@ -207,7 +207,10 @@ export const withSuggestions = () => (component) => {
     };
     setTimeout(() => {
         setupKeyboardNavigation();
+        if (getSuggestions().length > 0)
+            renderSuggestions();
     }, 0);
+    component.on?.("expand", () => renderSuggestions());
     return {
         ...component,
         suggestions: {

package/dist/components/select/api.js

@@ -20,6 +20,8 @@ export const withAPI = (options) => (component) => ({
         return this;
     },
     open(interactionType = "mouse") {
+        if (component.textfield?.input?.disabled)
+            return this;
         if (component.menu && typeof component.menu.open === "function") {
             component.menu.open(undefined, interactionType);
         }