mtrl 0.10.3 → 0.10.5

package/dist/components/select/index.d.ts

@@ -8,6 +8,7 @@
  * @category Components
  */
 export { default } from "./select.js";
+export type { SelectEvents } from "./types.js";
 export type { SelectConfig, SelectComponent, SelectOption, SelectEvent, SelectChangeEvent } from "./types.js";
 /**
  * Constants for select configuration

package/dist/components/select/types.d.ts

@@ -160,6 +160,8 @@ export interface SelectComponent {
     element: HTMLElement;
     /**
      * The textfield component
+     * @deprecated Renamed `textField` in 1.0 (FLO-383); `textfield` remains as an alias through
+     * 1.x.
      */
     textfield: TextfieldComponent;
     /**
@@ -249,6 +251,8 @@ export interface SelectComponent {
      * @returns Select component for chaining
      */
     disable: () => SelectComponent;
+    /** Whether the select is disabled (FLO-384) */
+    isDisabled: () => boolean;
     /**
      * Sets the error state on the select
      * @param error - Whether to show error state

package/dist/components/switch/api.js

@@ -90,6 +90,9 @@ export const withAPI = ({ disabled, lifecycle, checkable }) => (component) => ({
         disabled.enable();
         return this;
     },
+    isDisabled() {
+        return disabled.isDisabled();
+    },
     disable() {
         disabled.disable();
         return this;

package/dist/components/switch/config.js

@@ -15,6 +15,7 @@ export const getApiConfig = (comp) => ({
     disabled: {
         enable: comp.disabled.enable,
         disable: comp.disabled.disable,
+        isDisabled: comp.disabled.isDisabled,
     },
     lifecycle: {
         destroy: comp.lifecycle.destroy,

package/dist/components/switch/index.d.ts

@@ -1,5 +1,9 @@
 export { default } from "./switch.js";
 export { SWITCH_LABEL_POSITIONS, SWITCH_STATES, SWITCH_EVENTS, SWITCH_DEFAULTS, SWITCH_CLASSES } from "./constants.js";
 export type { SwitchConfig, SwitchComponent, SwitchEvents, SwitchChangePayload } from "./types.js";
-export { withSupportingText } from "./features.js";
-export type { SupportingTextComponent } from "./features.js";
+export { 
+/** @deprecated Internal, no replacement: removed from mtrl/components/switch in 1.0.0 (FLO-381). */
+withSupportingText, } from "./features.js";
+export type { 
+/** @deprecated Internal, no replacement: removed from mtrl/components/switch in 1.0.0 (FLO-381). */
+SupportingTextComponent, } from "./features.js";

package/dist/components/switch/index.js

@@ -1,3 +1,3 @@
 export { default } from "./switch.js";
 export { SWITCH_LABEL_POSITIONS, SWITCH_STATES, SWITCH_EVENTS, SWITCH_DEFAULTS, SWITCH_CLASSES } from "./constants.js";
-export { withSupportingText } from "./features.js";
+export { withSupportingText, } from "./features.js";

package/dist/components/switch/types.d.ts

@@ -47,13 +47,13 @@ export interface SwitchConfig {
     /** Index signature for additional properties */
     [key: string]: unknown;
 }
-/** A checked-state change from the native input or a programmatic setter. */
+/** A checked-state change from native input activation. Public setters are silent. */
 export interface SwitchChangePayload {
     /** The new checked state. */
     checked: boolean;
     /** The input's HTML value attribute, not the boolean checked state. */
     value: string;
-    /** Present for input-driven changes; absent for check/uncheck/toggle/setValue. */
+    /** The original native change event, when supplied by the emitter. */
     nativeEvent?: Event;
 }
 /** Emitter events: change, and the input's focus and blur (FLO-267). */
@@ -108,6 +108,8 @@ export interface SwitchComponent {
     enable: () => SwitchComponent;
     /** Disables the switch */
     disable: () => SwitchComponent;
+    /** Whether the switch is disabled (FLO-384) */
+    isDisabled: () => boolean;
     /** Destroys the switch component and cleans up resources */
     destroy: () => void;
 }
@@ -118,6 +120,7 @@ export interface ApiOptions {
     disabled: {
         enable: () => void;
         disable: () => void;
+        isDisabled: () => boolean;
     };
     lifecycle: {
         destroy: () => void;
@@ -146,6 +149,7 @@ export interface BaseComponent {
     disabled?: {
         enable: () => void;
         disable: () => void;
+        isDisabled: () => boolean;
     };
     lifecycle?: {
         destroy: () => void;

package/dist/components/tabs/config.js

@@ -1,4 +1,4 @@
-import { createComponentConfig } from "../../core/config/component.js";
+import { createComponentConfig, processClassNames } from "../../core/config/component.js";
 import { withElement } from "../../core/compose/component.js";
 import { TAB_STATES, TABS_DEFAULTS } from "./constants.js";
 export const defaultTabConfig = {
@@ -24,7 +24,7 @@ export const getTabsElementConfig = (config) => {
         className: [
             `${config.prefix}-tabs`,
             `${config.prefix}-tabs--${config.variant || "primary"}`,
-            config.class,
+            processClassNames(config.className || ""),
         ].filter((name) => Boolean(name)),
     };
     return (component) => withElement(elementConfig)(component);

package/dist/components/tabs/index.d.ts

@@ -6,7 +6,40 @@ import { createTabIndicator } from "./indicator.js";
 import { updateTabPanels, setupKeyboardNavigation } from "./utils.js";
 export { TAB_VARIANTS, TAB_STATES, TAB_INDICATOR_WIDTH_STRATEGIES, TAB_EVENTS, TABS_EVENTS, TABS_DEFAULTS, TABS_CLASSES, TAB_CLASSES, } from "./constants.js";
 export type { TabsConfig, TabsComponent, TabComponent, TabConfig, TabChangeEventData, IndicatorConfig, } from "./types.js";
-export { addScrollIndicators, setupResponsiveBehavior, createTabsState, createTabIndicator, updateTabPanels, setupKeyboardNavigation, };
-export { withTabsManagement, withScrollable, withDivider, withIndicator } from "./features.js";
-export type { TabsManagementConfig, TabsManagementComponent, ScrollableConfig, ScrollableComponent, DividerConfig, IndicatorFeatureConfig, IndicatorComponent } from "./features.js";
+export { 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+addScrollIndicators, setupResponsiveBehavior, 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+createTabsState, 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+createTabIndicator, 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+updateTabPanels, 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+setupKeyboardNavigation, };
+export { 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+withTabsManagement, 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+withScrollable, 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+withDivider, 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+withIndicator, } from "./features.js";
+export type { 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+TabsManagementConfig, 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+TabsManagementComponent, 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+ScrollableConfig, 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+ScrollableComponent, 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+DividerConfig, 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+IndicatorFeatureConfig, 
+/** @deprecated Internal, no replacement: removed from mtrl/components/tabs in 1.0.0 (FLO-381). */
+IndicatorComponent, } from "./features.js";
 export default createTabs;
+export { createTab } from "./tab.js";

package/dist/components/tabs/index.js

@@ -6,5 +6,6 @@ import { createTabIndicator } from "./indicator.js";
 import { updateTabPanels, setupKeyboardNavigation } from "./utils.js";
 export { TAB_VARIANTS, TAB_STATES, TAB_INDICATOR_WIDTH_STRATEGIES, TAB_EVENTS, TABS_EVENTS, TABS_DEFAULTS, TABS_CLASSES, TAB_CLASSES, } from "./constants.js";
 export { addScrollIndicators, setupResponsiveBehavior, createTabsState, createTabIndicator, updateTabPanels, setupKeyboardNavigation, };
-export { withTabsManagement, withScrollable, withDivider, withIndicator } from "./features.js";
+export { withTabsManagement, withScrollable, withDivider, withIndicator, } from "./features.js";
 export default createTabs;
+export { createTab } from "./tab.js";

package/dist/components/tabs/tab.js

@@ -1,3 +1,4 @@
+import { processClassNames } from "../../core/config/component.js";
 import { syncTabControls, tabIdFor } from "./utils.js";
 import { pipe } from "../../core/compose/index.js";
 import { createBase } from "../../core/compose/component.js";
@@ -24,7 +25,10 @@ export const createTab = (config = {}) => {
             value: baseConfig.value,
             prefix: baseConfig.prefix,
             variant: "text",
-            class: `${baseConfig.prefix}-tab`,
+            class: [
+                `${baseConfig.prefix}-tab`,
+                processClassNames(baseConfig.className || ""),
+            ].filter(Boolean).join(" "),
         });
         baseComponent.element = button.element;
         baseComponent.element.setAttribute("role", "tab");
@@ -95,6 +99,9 @@ export const createTab = (config = {}) => {
                 this.element.setAttribute("aria-disabled", "true");
                 return this;
             },
+            isDisabled() {
+                return button.isDisabled();
+            },
             setText(content) {
                 button.setText(content);
                 this.updateLayoutStyle();

package/dist/components/tabs/types.d.ts

@@ -299,6 +299,8 @@ export interface TabComponent {
     enable: () => TabComponent;
     /** Disables the tab (adds disabled attribute) */
     disable: () => TabComponent;
+    /** Whether the tab is disabled (FLO-384) */
+    isDisabled: () => boolean;
     /** Sets the tab's text content */
     setText: (content: string) => TabComponent;
     /** Gets the tab's text content */

package/dist/components/tabs/utils.js

@@ -21,7 +21,8 @@ export function findRegisteredPanel(tab) {
     const tabId = tab.id;
     if (!tabId || typeof document === "undefined")
         return null;
-    const labelled = document.querySelector(`[role="tabpanel"][aria-labelledby="${tabId}"]`);
+    const labelled = Array.from(document.querySelectorAll('[role="tabpanel"]'))
+        .find((panel) => panel.getAttribute("aria-labelledby") === tabId);
     if (labelled)
         return labelled;
     if (tabId.startsWith("tab-")) {

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

@@ -12,6 +12,11 @@ type ComponentWithDensity = BaseComponent & {
     setError?: (error: boolean, message?: string) => void;
     isError?: () => boolean;
     field?: HTMLElement;
+    input?: HTMLInputElement | HTMLTextAreaElement;
+    trailingIcon?: HTMLElement | null;
+    setTrailingIcon?: (html: string, label?: string) => void;
+    setRequired?: (required: boolean) => void;
+    isRequired?: () => boolean;
 };
 /**
  * Enhances textfield component with API methods

package/dist/components/textfield/api.js

@@ -1,201 +1,222 @@
-export const withAPI = ({ disabled, lifecycle }) => (component) => ({
-    element: component.element,
-    field: component.field ?? component.element,
-    input: component.input,
-    getValue: component.getValue || (() => ""),
-    setValue(value) {
-        component.setValue?.(value);
-        return this;
-    },
-    setAttribute(name, value) {
-        component.setAttribute?.(name, value);
-        return this;
-    },
-    getAttribute(name) {
-        return component.getAttribute?.(name) || null;
-    },
-    removeAttribute(name) {
-        component.removeAttribute?.(name);
-        return this;
-    },
-    setVariant(variant) {
-        const PREFIX = component.config?.prefix || "mtrl";
-        const COMPONENT = component.config?.componentName || "textfield";
-        component.element.classList.remove(`${PREFIX}-${COMPONENT}--filled`, `${PREFIX}-${COMPONENT}--outlined`);
-        component.element.classList.add(`${PREFIX}-${COMPONENT}--${variant}`);
-        if (component.updateElementPositions) {
-            component.schedulePositionUpdate?.();
-        }
-        return this;
-    },
-    getVariant() {
-        const PREFIX = component.config?.prefix || "mtrl";
-        const COMPONENT = component.config?.componentName || "textfield";
-        if (component.element.classList.contains(`${PREFIX}-${COMPONENT}--outlined`)) {
-            return "outlined";
-        }
-        return "filled";
-    },
-    setLabel(text) {
-        component.label?.setText(text);
-        if (component.updateElementPositions) {
-            component.schedulePositionUpdate?.();
-        }
-        return this;
-    },
-    getLabel() {
-        return component.label?.getText() || "";
-    },
-    get leadingIcon() {
-        return component.leadingIcon ?? null;
-    },
-    setLeadingIcon(html) {
-        if (component.setLeadingIcon) {
-            component.setLeadingIcon(html);
+export const withAPI = ({ disabled, lifecycle }) => (component) => {
+    const setTrailingDisabled = (off) => {
+        const icon = component.trailingIcon;
+        if (icon?.tagName === "BUTTON")
+            icon.disabled = off;
+    };
+    return {
+        element: component.element,
+        field: component.field ?? component.element,
+        input: component.input,
+        getValue: component.getValue || (() => ""),
+        setValue(value) {
+            component.setValue?.(value);
+            return this;
+        },
+        setAttribute(name, value) {
+            component.setAttribute?.(name, value);
+            return this;
+        },
+        getAttribute(name) {
+            return component.getAttribute?.(name) || null;
+        },
+        removeAttribute(name) {
+            component.removeAttribute?.(name);
+            return this;
+        },
+        setVariant(variant) {
+            const PREFIX = component.config?.prefix || "mtrl";
+            const COMPONENT = component.config?.componentName || "textfield";
+            component.element.classList.remove(`${PREFIX}-${COMPONENT}--filled`, `${PREFIX}-${COMPONENT}--outlined`);
+            component.element.classList.add(`${PREFIX}-${COMPONENT}--${variant}`);
             if (component.updateElementPositions) {
                 component.schedulePositionUpdate?.();
             }
-        }
-        return this;
-    },
-    removeLeadingIcon() {
-        if (component.removeLeadingIcon) {
-            component.removeLeadingIcon();
-            if (component.updateElementPositions) {
-                component.schedulePositionUpdate?.();
+            return this;
+        },
+        getVariant() {
+            const PREFIX = component.config?.prefix || "mtrl";
+            const COMPONENT = component.config?.componentName || "textfield";
+            if (component.element.classList.contains(`${PREFIX}-${COMPONENT}--outlined`)) {
+                return "outlined";
             }
-        }
-        return this;
-    },
-    get trailingIcon() {
-        return component.trailingIcon ?? null;
-    },
-    setTrailingIcon(html) {
-        if (component.setTrailingIcon) {
-            component.setTrailingIcon(html);
+            return "filled";
+        },
+        setLabel(text) {
+            component.label?.setText(text);
             if (component.updateElementPositions) {
                 component.schedulePositionUpdate?.();
             }
-        }
-        return this;
-    },
-    removeTrailingIcon() {
-        if (component.removeTrailingIcon) {
-            component.removeTrailingIcon();
-            if (component.updateElementPositions) {
-                component.schedulePositionUpdate?.();
+            return this;
+        },
+        getLabel() {
+            return component.label?.getText() || "";
+        },
+        get leadingIcon() {
+            return component.leadingIcon ?? null;
+        },
+        setLeadingIcon(html) {
+            if (component.setLeadingIcon) {
+                component.setLeadingIcon(html);
+                if (component.updateElementPositions) {
+                    component.schedulePositionUpdate?.();
+                }
             }
-        }
-        return this;
-    },
-    get supportingTextElement() {
-        return component.element.querySelector(`.${component.getClass("textfield__helper")}`);
-    },
-    setSupportingText(text, isError) {
-        if (component.setSupportingText) {
-            component.setSupportingText(text, isError);
-        }
-        return this;
-    },
-    removeSupportingText() {
-        if (component.removeSupportingText) {
-            component.removeSupportingText();
-        }
-        return this;
-    },
-    get prefixTextElement() {
-        return component.prefixTextElement ?? null;
-    },
-    setPrefixText(text) {
-        if (component.setPrefixText) {
-            component.setPrefixText(text);
-            if (component.updateElementPositions) {
-                component.schedulePositionUpdate?.();
+            return this;
+        },
+        removeLeadingIcon() {
+            if (component.removeLeadingIcon) {
+                component.removeLeadingIcon();
+                if (component.updateElementPositions) {
+                    component.schedulePositionUpdate?.();
+                }
             }
-        }
-        return this;
-    },
-    removePrefixText() {
-        if (component.removePrefixText) {
-            component.removePrefixText();
-            if (component.updateElementPositions) {
-                component.schedulePositionUpdate?.();
+            return this;
+        },
+        get trailingIcon() {
+            return component.trailingIcon ?? null;
+        },
+        setTrailingIcon(html, label) {
+            if (component.setTrailingIcon) {
+                component.setTrailingIcon(html, label);
+                if (component.updateElementPositions) {
+                    component.schedulePositionUpdate?.();
+                }
             }
-        }
-        return this;
-    },
-    get suffixTextElement() {
-        return component.suffixTextElement ?? null;
-    },
-    setSuffixText(text) {
-        if (component.setSuffixText) {
-            component.setSuffixText(text);
-            if (component.updateElementPositions) {
-                component.schedulePositionUpdate?.();
+            return this;
+        },
+        removeTrailingIcon() {
+            if (component.removeTrailingIcon) {
+                component.removeTrailingIcon();
+                if (component.updateElementPositions) {
+                    component.schedulePositionUpdate?.();
+                }
+            }
+            return this;
+        },
+        get supportingTextElement() {
+            return component.element.querySelector(`.${component.getClass("textfield__helper")}`);
+        },
+        setSupportingText(text, isError) {
+            if (component.setSupportingText) {
+                component.setSupportingText(text, isError);
+            }
+            return this;
+        },
+        removeSupportingText() {
+            if (component.removeSupportingText) {
+                component.removeSupportingText();
+            }
+            return this;
+        },
+        get prefixTextElement() {
+            return component.prefixTextElement ?? null;
+        },
+        setPrefixText(text) {
+            if (component.setPrefixText) {
+                component.setPrefixText(text);
+                if (component.updateElementPositions) {
+                    component.schedulePositionUpdate?.();
+                }
+            }
+            return this;
+        },
+        removePrefixText() {
+            if (component.removePrefixText) {
+                component.removePrefixText();
+                if (component.updateElementPositions) {
+                    component.schedulePositionUpdate?.();
+                }
+            }
+            return this;
+        },
+        get suffixTextElement() {
+            return component.suffixTextElement ?? null;
+        },
+        setSuffixText(text) {
+            if (component.setSuffixText) {
+                component.setSuffixText(text);
+                if (component.updateElementPositions) {
+                    component.schedulePositionUpdate?.();
+                }
+            }
+            return this;
+        },
+        removeSuffixText() {
+            if (component.removeSuffixText) {
+                component.removeSuffixText();
+                if (component.updateElementPositions) {
+                    component.schedulePositionUpdate?.();
+                }
+            }
+            return this;
+        },
+        updatePositions() {
+            if (component.input && component.element) {
+                const hasValue = component.input.value && component.input.value.length > 0;
+                const isAutofilled = component.input.matches?.(":-webkit-autofill") || false;
+                if (hasValue || isAutofilled) {
+                    component.element.classList.remove(`${component.config?.prefix || "mtrl"}-textfield--empty`);
+                }
+                else {
+                    component.element.classList.add(`${component.config?.prefix || "mtrl"}-textfield--empty`);
+                }
             }
-        }
-        return this;
-    },
-    removeSuffixText() {
-        if (component.removeSuffixText) {
-            component.removeSuffixText();
             if (component.updateElementPositions) {
-                component.schedulePositionUpdate?.();
+                component.updateElementPositions();
+            }
+            return this;
+        },
+        setError(error, message) {
+            if (component.setError) {
+                component.setError(error, message);
             }
-        }
-        return this;
-    },
-    updatePositions() {
-        if (component.input && component.element) {
-            const hasValue = component.input.value && component.input.value.length > 0;
-            const isAutofilled = component.input.matches?.(":-webkit-autofill") || false;
-            if (hasValue || isAutofilled) {
-                component.element.classList.remove(`${component.config?.prefix || "mtrl"}-textfield--empty`);
-            }
-            else {
-                component.element.classList.add(`${component.config?.prefix || "mtrl"}-textfield--empty`);
-            }
-        }
-        if (component.updateElementPositions) {
-            component.updateElementPositions();
-        }
-        return this;
-    },
-    setError(error, message) {
-        if (component.setError) {
-            component.setError(error, message);
-        }
-        return this;
-    },
-    isError() {
-        return component.isError?.() || false;
-    },
-    setDensity(density) {
-        if (component.density?.set) {
-            component.density.set(density);
-        }
-        return this;
-    },
-    getDensity() {
-        return component.density?.current || "default";
-    },
-    on(event, handler) {
-        component.on?.(event, handler);
-        return this;
-    },
-    off(event, handler) {
-        component.off?.(event, handler);
-        return this;
-    },
-    enable() {
-        disabled.enable();
-        return this;
-    },
-    disable() {
-        disabled.disable();
-        return this;
-    },
-    destroy() {
-        lifecycle.destroy();
-    },
-});
+            return this;
+        },
+        isError() {
+            return component.isError?.() || false;
+        },
+        setDensity(density) {
+            if (component.density?.set) {
+                component.density.set(density);
+            }
+            component.schedulePositionUpdate?.();
+            return this;
+        },
+        getDensity() {
+            return component.density?.current || "default";
+        },
+        on(event, handler) {
+            component.on?.(event, handler);
+            return this;
+        },
+        off(event, handler) {
+            component.off?.(event, handler);
+            return this;
+        },
+        enable() {
+            disabled.enable();
+            setTrailingDisabled(false);
+            return this;
+        },
+        isDisabled() {
+            return disabled.isDisabled();
+        },
+        disable() {
+            disabled.disable();
+            setTrailingDisabled(true);
+            return this;
+        },
+        setRequired(required) {
+            component.setRequired?.(required);
+            component.schedulePositionUpdate?.();
+            return this;
+        },
+        isRequired() {
+            return component.isRequired?.() ?? Boolean(component.input?.required);
+        },
+        destroy() {
+            lifecycle.destroy();
+        },
+    };
+};