mtrl 0.10.4 → 0.10.6

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();
+        },
+    };
+};

package/dist/components/textfield/config.js

@@ -1,8 +1,8 @@
 import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
-import { TEXTFIELD_DEFAULTS } from "./constants.js";
+import { TEXT_FIELD_DEFAULTS } from "./constants.js";
 export const defaultConfig = {
-    type: TEXTFIELD_DEFAULTS.TYPE,
-    variant: TEXTFIELD_DEFAULTS.VARIANT,
+    type: TEXT_FIELD_DEFAULTS.TYPE,
+    variant: TEXT_FIELD_DEFAULTS.VARIANT,
 };
 export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "textfield");
 export const getElementConfig = (config) => createElementConfig(config, {
@@ -13,6 +13,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/textfield/constants.d.ts

@@ -2,7 +2,7 @@
  * Textfield variant constants
  * @category Components
  */
-export declare const TEXTFIELD_VARIANTS: {
+declare const TEXTFIELD_VARIANTS: {
     /** Filled variant with background and animated label */
     readonly FILLED: "filled";
     /** Outlined variant with border and animated label */
@@ -12,7 +12,7 @@ export declare const TEXTFIELD_VARIANTS: {
  * Textfield state constants
  * @category Components
  */
-export declare const TEXTFIELD_STATES: {
+declare const TEXTFIELD_STATES: {
     /** Textfield is active (focused) */
     readonly ACTIVE: "active";
     /** Textfield is inactive (not focused) */
@@ -24,7 +24,7 @@ export declare const TEXTFIELD_STATES: {
  * Textfield type constants
  * @category Components
  */
-export declare const TEXTFIELD_TYPES: {
+declare const TEXTFIELD_TYPES: {
     /** Standard text input */
     readonly TEXT: "text";
     /** Password input with obscured characters */
@@ -46,7 +46,7 @@ export declare const TEXTFIELD_TYPES: {
  * Textfield event constants
  * @category Components
  */
-export declare const TEXTFIELD_EVENTS: {
+declare const TEXTFIELD_EVENTS: {
     /** Emitted on native input change; setValue() is silent */
     readonly CHANGE: "change";
     /** Fired during input */
@@ -55,6 +55,8 @@ export declare const TEXTFIELD_EVENTS: {
     readonly FOCUS: "focus";
     /** Fired when textfield loses focus */
     readonly BLUR: "blur";
+    /** Fired when the trailing icon button is activated (`trailingIconLabel`; FLO-301) */
+    readonly TRAILING: "trailing";
     /** Legacy name, not emitted; listen for keydown on the input and check key === "Enter" */
     readonly ENTER: "enter";
     /** Native input event only; not emitted through on() */
@@ -66,7 +68,7 @@ export declare const TEXTFIELD_EVENTS: {
  * Textfield density constants
  * @category Components
  */
-export declare const TEXTFIELD_DENSITY: {
+declare const TEXTFIELD_DENSITY: {
     /** Default density (56px height) */
     readonly DEFAULT: "default";
     /** Compact density (40px height) */
@@ -76,7 +78,7 @@ export declare const TEXTFIELD_DENSITY: {
  * Default textfield configuration values
  * @category Components
  */
-export declare const TEXTFIELD_DEFAULTS: {
+declare const TEXTFIELD_DEFAULTS: {
     /** Default input type */
     readonly TYPE: "text";
     /** Default visual variant */
@@ -98,7 +100,7 @@ export declare const TEXTFIELD_DEFAULTS: {
  * CSS class names used by the textfield component
  * @category Components
  */
-export declare const TEXTFIELD_CLASSES: {
+declare const TEXTFIELD_CLASSES: {
     /** Root element class */
     readonly ROOT: "textfield";
     /** Input element class */
@@ -152,3 +154,18 @@ export declare const TEXTFIELD_CLASSES: {
     /** Multiline class */
     readonly MULTILINE: "textfield--multiline";
 };
+export { TEXTFIELD_VARIANTS as TEXT_FIELD_VARIANTS, TEXTFIELD_STATES as TEXT_FIELD_STATES, TEXTFIELD_TYPES as TEXT_FIELD_TYPES, TEXTFIELD_EVENTS as TEXT_FIELD_EVENTS, TEXTFIELD_DENSITY as TEXT_FIELD_DENSITY, TEXTFIELD_DEFAULTS as TEXT_FIELD_DEFAULTS, TEXTFIELD_CLASSES as TEXT_FIELD_CLASSES, 
+/** @deprecated Use TEXT_FIELD_VARIANTS: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TEXTFIELD_VARIANTS, 
+/** @deprecated Use TEXT_FIELD_STATES: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TEXTFIELD_STATES, 
+/** @deprecated Use TEXT_FIELD_TYPES: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TEXTFIELD_TYPES, 
+/** @deprecated Use TEXT_FIELD_EVENTS: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TEXTFIELD_EVENTS, 
+/** @deprecated Use TEXT_FIELD_DENSITY: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TEXTFIELD_DENSITY, 
+/** @deprecated Use TEXT_FIELD_DEFAULTS: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TEXTFIELD_DEFAULTS, 
+/** @deprecated Use TEXT_FIELD_CLASSES: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TEXTFIELD_CLASSES, };

package/dist/components/textfield/constants.js

@@ -1,13 +1,13 @@
-export const TEXTFIELD_VARIANTS = {
+const TEXTFIELD_VARIANTS = {
     FILLED: "filled",
     OUTLINED: "outlined",
 };
-export const TEXTFIELD_STATES = {
+const TEXTFIELD_STATES = {
     ACTIVE: "active",
     INACTIVE: "inactive",
     DISABLED: "disabled",
 };
-export const TEXTFIELD_TYPES = {
+const TEXTFIELD_TYPES = {
     TEXT: "text",
     PASSWORD: "password",
     EMAIL: "email",
@@ -17,20 +17,21 @@ export const TEXTFIELD_TYPES = {
     SEARCH: "search",
     MULTILINE: "multiline",
 };
-export const TEXTFIELD_EVENTS = {
+const TEXTFIELD_EVENTS = {
     CHANGE: "change",
     INPUT: "input",
     FOCUS: "focus",
     BLUR: "blur",
+    TRAILING: "trailing",
     ENTER: "enter",
     KEYDOWN: "keydown",
     KEYUP: "keyup",
 };
-export const TEXTFIELD_DENSITY = {
+const TEXTFIELD_DENSITY = {
     DEFAULT: "default",
     COMPACT: "compact",
 };
-export const TEXTFIELD_DEFAULTS = {
+const TEXTFIELD_DEFAULTS = {
     TYPE: TEXTFIELD_TYPES.TEXT,
     VARIANT: TEXTFIELD_VARIANTS.FILLED,
     DENSITY: TEXTFIELD_DENSITY.DEFAULT,
@@ -40,7 +41,7 @@ export const TEXTFIELD_DEFAULTS = {
     FLOAT_LABEL: true,
     ANIMATION_DURATION: 150,
 };
-export const TEXTFIELD_CLASSES = {
+const TEXTFIELD_CLASSES = {
     ROOT: "textfield",
     INPUT: "textfield__input",
     LABEL: "textfield__label",
@@ -66,3 +67,4 @@ export const TEXTFIELD_CLASSES = {
     RTL: "textfield--rtl",
     MULTILINE: "textfield--multiline",
 };
+export { TEXTFIELD_VARIANTS as TEXT_FIELD_VARIANTS, TEXTFIELD_STATES as TEXT_FIELD_STATES, TEXTFIELD_TYPES as TEXT_FIELD_TYPES, TEXTFIELD_EVENTS as TEXT_FIELD_EVENTS, TEXTFIELD_DENSITY as TEXT_FIELD_DENSITY, TEXTFIELD_DEFAULTS as TEXT_FIELD_DEFAULTS, TEXTFIELD_CLASSES as TEXT_FIELD_CLASSES, TEXTFIELD_VARIANTS, TEXTFIELD_STATES, TEXTFIELD_TYPES, TEXTFIELD_EVENTS, TEXTFIELD_DENSITY, TEXTFIELD_DEFAULTS, TEXTFIELD_CLASSES, };

package/dist/components/textfield/features/index.d.ts

@@ -8,8 +8,10 @@ export { withDensity } from "./density.js";
 export { withError } from "./error.js";
 export { withField } from "./field.js";
 export { withCounter } from "./counter.js";
+export { withRequired } from "./required.js";
 export type { LeadingIconComponent, LeadingIconConfig } from "./leading-icon.js";
-export type { TrailingIconComponent, TrailingIconConfig, } from "./trailing-icon.js";
+export type { TrailingIconComponent, TrailingIconConfig, TextfieldTrailingPayload, } from "./trailing-icon.js";
+export type { RequiredConfig, RequiredFeature } from "./required.js";
 export type { PrefixTextComponent, PrefixTextConfig } from "./prefix-text.js";
 export type { SuffixTextComponent, SuffixTextConfig } from "./suffix-text.js";
 export type { SupportingTextComponent, SupportingTextConfig, } from "./supporting-text.js";

package/dist/components/textfield/features/index.js

@@ -8,3 +8,4 @@ export { withDensity } from "./density.js";
 export { withError } from "./error.js";
 export { withField } from "./field.js";
 export { withCounter } from "./counter.js";
+export { withRequired } from "./required.js";

package/dist/components/textfield/features/leading-icon.js

@@ -9,6 +9,7 @@ export const withLeadingIcon = (config) => (component) => {
             return iconElement;
         const element = document.createElement('span');
         element.className = `${PREFIX}-${NAME}__leading-icon`;
+        element.setAttribute('aria-hidden', 'true');
         fieldOf(component).appendChild(element);
         component.element.classList.add(`${PREFIX}-${NAME}--with-leading-icon`);
         if (component.input) {

package/dist/components/textfield/features/placement.js

@@ -18,9 +18,17 @@ export const withPlacement = () => (component) => {
     const PREFIX = component.config.prefix || "mtrl";
     const COMPONENT = component.config.componentName || "textfield";
     let destroyed = false;
+    let listening = false;
+    const ensureListening = () => {
+        if (listening || destroyed)
+            return;
+        listening = true;
+        setupEventListeners();
+    };
     const schedulePositionUpdate = () => {
         if (destroyed)
             return;
+        ensureListening();
         schedule(measure);
     };
     const classObservers = new WeakMap();
@@ -97,6 +105,7 @@ export const withPlacement = () => (component) => {
         };
     };
     const updateElementPositions = () => {
+        ensureListening();
         measure()();
         return component;
     };
@@ -121,8 +130,12 @@ export const withPlacement = () => (component) => {
             labelObserver.observe(labelEl);
         }
     };
-    setupEventListeners();
-    schedulePositionUpdate();
+    const has = (modifier) => component.element.classList.contains(`${PREFIX}-${COMPONENT}--${modifier}`);
+    const needsPlacement = has("outlined") ||
+        has("with-leading-icon") ||
+        component.element.querySelector(`.${PREFIX}-${COMPONENT}__prefix, .${PREFIX}-${COMPONENT}__suffix`) !== null;
+    if (needsPlacement)
+        schedulePositionUpdate();
     if ("lifecycle" in component && component.lifecycle?.destroy) {
         const originalDestroy = component.lifecycle.destroy;
         component.lifecycle.destroy = () => {