mtrl 0.10.4 → 0.10.5

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 = () => {

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

@@ -0,0 +1,33 @@
+import type { BaseComponent, ElementComponent } from "../../../core/compose/component.js";
+import type { LabelManager } from "../../../core/compose/features/textlabel.js";
+/**
+ * A required field's asterisk (FLO-301). M3's text field guidelines mark a
+ * required field with an asterisk after its label, and Material's own web
+ * text field appends it to the label text in the label's colour. Here it is a
+ * span after the text, hidden from screen readers: the input's native
+ * `required` already announces the field as required, and "star" would not.
+ */
+export interface RequiredConfig {
+    /** Whether the field is required; the input gets `required` from withTextInput */
+    required?: boolean;
+    /**
+     * No asterisk on a required field. M3 lets a form whose fields are mostly
+     * required mark its optional ones instead (Material Web's `noAsterisk`).
+     */
+    noAsterisk?: boolean;
+    prefix?: string;
+    componentName?: string;
+}
+/** What this feature installs */
+export interface RequiredFeature {
+    /** Makes the field required or optional, its asterisk with it */
+    setRequired: (required: boolean) => RequiredFeature;
+    /** Whether the field is required */
+    isRequired: () => boolean;
+}
+interface LabelledInputComponent extends ElementComponent {
+    input?: HTMLInputElement | HTMLTextAreaElement;
+    label?: LabelManager;
+}
+export declare const withRequired: <T extends RequiredConfig & object>(config: T) => <C extends LabelledInputComponent>(component: C) => C & RequiredFeature & BaseComponent;
+export {};

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

@@ -0,0 +1,50 @@
+export const withRequired = (config) => (component) => {
+    const PREFIX = config.prefix || "mtrl";
+    const NAME = config.componentName || "textfield";
+    const label = component.label;
+    let required = Boolean(config.required);
+    const asterisk = () => label?.getElement().querySelector(`.${PREFIX}-${NAME}__required`) ?? null;
+    const render = () => {
+        if (!label)
+            return;
+        const shown = asterisk();
+        if (required && !config.noAsterisk) {
+            if (shown)
+                return;
+            const span = document.createElement("span");
+            span.className = `${PREFIX}-${NAME}__required`;
+            span.setAttribute("aria-hidden", "true");
+            span.textContent = "*";
+            label.getElement().append(span);
+        }
+        else {
+            shown?.remove();
+        }
+    };
+    if (label) {
+        const setText = label.setText.bind(label);
+        label.setText = (text) => {
+            setText(text);
+            render();
+            return label;
+        };
+        label.getText = () => {
+            const text = label.getElement().textContent ?? "";
+            return asterisk() ? text.slice(0, -1) : text;
+        };
+    }
+    render();
+    return {
+        ...component,
+        setRequired(next) {
+            required = next;
+            if (component.input)
+                component.input.required = next;
+            render();
+            return this;
+        },
+        isRequired() {
+            return required;
+        },
+    };
+};

package/dist/components/textfield/features/supporting-text.js

@@ -14,27 +14,42 @@ export const withSupportingText = (config) => (component) => {
         else
             removeIdRef(component.input, "aria-describedby", supportingId);
     };
-    const createSupportingElement = (text, isError = false) => {
+    let pendingFrame = 0;
+    const cancelFill = () => {
+        if (pendingFrame)
+            cancelAnimationFrame(pendingFrame);
+        pendingFrame = 0;
+    };
+    const createSupportingElement = () => {
         const element = document.createElement("div");
         element.className = `${PREFIX}-${COMPONENT}__helper`;
         element.id = supportingId;
-        element.textContent = text;
-        if (isError)
-            element.classList.add(`${PREFIX}-${COMPONENT}__helper--error`);
+        element.setAttribute("aria-live", "polite");
         return element;
     };
+    const markError = (element, isError) => {
+        element.classList.toggle(`${PREFIX}-${COMPONENT}__helper--error`, isError);
+    };
+    const detach = () => {
+        cancelFill();
+        if (!supportingElement)
+            return;
+        supportingElement.remove();
+        supportingElement = null;
+        row.release();
+        describe(null);
+    };
     if (config.supportingText) {
-        supportingElement = createSupportingElement(config.supportingText, config.error);
+        supportingElement = createSupportingElement();
+        supportingElement.textContent = config.supportingText;
+        markError(supportingElement, Boolean(config.error));
         show(supportingElement);
         describe(supportingElement);
     }
     if ("lifecycle" in component && component.lifecycle?.destroy) {
         const originalDestroy = component.lifecycle.destroy;
         component.lifecycle.destroy = () => {
-            if (supportingElement) {
-                supportingElement.remove();
-                row.release();
-            }
+            detach();
             originalDestroy.call(component.lifecycle);
         };
     }
@@ -44,22 +59,29 @@ export const withSupportingText = (config) => (component) => {
             return supportingElement;
         },
         setSupportingText(text, isError = false) {
-            supportingElement?.remove();
-            supportingElement = text ? createSupportingElement(text, isError) : null;
-            if (supportingElement)
-                show(supportingElement);
-            else
-                row.release();
+            if (!text) {
+                detach();
+                return this;
+            }
+            if (supportingElement) {
+                supportingElement.textContent = text;
+                markError(supportingElement, isError);
+                return this;
+            }
+            supportingElement = createSupportingElement();
+            supportingElement.textContent = text;
+            markError(supportingElement, isError);
+            show(supportingElement);
             describe(supportingElement);
+            const element = supportingElement;
+            pendingFrame = requestAnimationFrame(() => {
+                pendingFrame = 0;
+                element.replaceChildren(document.createTextNode(element.textContent ?? ""));
+            });
             return this;
         },
         removeSupportingText() {
-            if (supportingElement) {
-                supportingElement.remove();
-                supportingElement = null;
-                row.release();
-                describe(null);
-            }
+            detach();
             return this;
         },
     };

package/dist/components/textfield/features/trailing-icon.d.ts

@@ -4,10 +4,18 @@ import { BaseComponent, ElementComponent } from "../../../core/compose/component
  */
 interface InputElementComponent extends ElementComponent {
     input?: HTMLInputElement | HTMLTextAreaElement;
+    emit?: (event: string, data?: unknown) => void;
     lifecycle?: {
         destroy: () => void;
     };
 }
+/** What an interactive trailing icon's `trailing` event carries (FLO-301) */
+export interface TextfieldTrailingPayload {
+    /** The field's value when the icon was activated */
+    value: string;
+    /** The click (Enter and Space reach a button as one) */
+    event: MouseEvent;
+}
 /**
  * Configuration for trailing icon feature
  */
@@ -16,6 +24,18 @@ export interface TrailingIconConfig {
      * Trailing icon HTML content
      */
     trailingIcon?: string;
+    /**
+     * Makes the trailing icon a button with this accessible name: clear, show
+     * password, open a menu (FLO-301). M3 draws an interactive trailing icon as an
+     * icon button, as Compose's trailing slot holds an `IconButton`: a 40dp state
+     * layer and a 48dp target. Activating it emits `trailing`. Without a label the
+     * icon is decorative.
+     */
+    trailingIconLabel?: string;
+    /** Called when the trailing icon button is activated, after `trailing` is emitted */
+    onTrailingClick?: (event: TextfieldTrailingPayload) => void;
+    /** Whether the field starts disabled; the trailing button is disabled with it */
+    disabled?: boolean;
     /**
      * CSS class prefix
      */
@@ -45,9 +65,11 @@ export interface TrailingIconFeature {
     /**
      * Sets trailing icon content
      * @param html - HTML content for the icon
+     * @param label - The button's accessible name, making the icon a button; an empty
+     *   string makes it decorative again; left out, the icon keeps what it is
      * @returns Component instance for chaining
      */
-    setTrailingIcon: (html: string) => TrailingIconComponent;
+    setTrailingIcon: (html: string, label?: string) => TrailingIconComponent;
     /**
      * Removes trailing icon
      * @returns Component instance for chaining

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

@@ -4,12 +4,44 @@ export const withTrailingIcon = (config) => (component) => {
     const PREFIX = config.prefix || 'mtrl';
     const NAME = config.componentName || 'textfield';
     let slot = null;
+    let label = config.trailingIconLabel ?? '';
+    const activate = (event) => {
+        if (component.input?.disabled)
+            return;
+        const detail = { value: component.input?.value ?? '', event };
+        component.emit?.('trailing', detail);
+        config.onTrailingClick?.(detail);
+    };
+    const create = () => {
+        const className = `${PREFIX}-${NAME}__trailing-icon`;
+        if (!label) {
+            const element = document.createElement('span');
+            element.className = className;
+            return element;
+        }
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = `${className} ${className}--button`;
+        button.setAttribute('aria-label', label);
+        button.disabled = Boolean(component.input?.disabled ?? config.disabled);
+        button.addEventListener('click', activate);
+        return button;
+    };
     const ensureSlot = () => {
-        if (slot && slot.parentNode)
+        const wanted = label ? 'BUTTON' : 'SPAN';
+        if (slot && slot.parentNode && slot.tagName === wanted) {
+            if (label)
+                slot.setAttribute('aria-label', label);
             return slot;
-        const element = document.createElement('span');
-        element.className = `${PREFIX}-${NAME}__trailing-icon`;
-        fieldOf(component).appendChild(element);
+        }
+        const element = create();
+        if (slot?.parentNode) {
+            element.append(...Array.from(slot.childNodes));
+            slot.replaceWith(element);
+        }
+        else {
+            fieldOf(component).appendChild(element);
+        }
         component.element.classList.add(`${PREFIX}-${NAME}--with-trailing-icon`);
         if (component.input) {
             component.input.classList.add(`${PREFIX}-${NAME}__input--with-trailing-icon`);
@@ -42,7 +74,9 @@ export const withTrailingIcon = (config) => (component) => {
     return {
         ...component,
         trailingIcon: slot,
-        setTrailingIcon(html) {
+        setTrailingIcon(html, nextLabel) {
+            if (nextLabel !== undefined)
+                label = nextLabel;
             this.trailingIcon = ensureSlot();
             write(this.trailingIcon, html);
             return this;

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

@@ -1,2 +1,17 @@
 export { default } from "./textfield.js";
-export type { TextfieldConfig, TextfieldComponent, TextfieldDensity, TextfieldEvents, TextfieldValuePayload, TextfieldFocusPayload, } from "./types.js";
+export { default as createTextField } from "./textfield.js";
+export type { TextfieldConfig as TextFieldConfig, TextfieldComponent as TextFieldComponent, 
+/** @deprecated Use TextFieldConfig: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TextfieldConfig, 
+/** @deprecated Use TextFieldComponent: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TextfieldComponent, TextfieldDensity as TextFieldDensity, TextfieldEvents as TextFieldEvents, TextfieldValuePayload as TextFieldValuePayload, TextfieldFocusPayload as TextFieldFocusPayload, TextfieldTrailingPayload as TextFieldTrailingPayload, 
+/** @deprecated Use TextFieldDensity: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TextfieldDensity, 
+/** @deprecated Use TextFieldEvents: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TextfieldEvents, 
+/** @deprecated Use TextFieldValuePayload: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TextfieldValuePayload, 
+/** @deprecated Use TextFieldFocusPayload: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TextfieldFocusPayload, 
+/** @deprecated Use TextFieldTrailingPayload: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+TextfieldTrailingPayload, } from "./types.js";

package/dist/components/textfield/index.js

@@ -1 +1,2 @@
 export { default } from "./textfield.js";
+export { default as createTextField } from "./textfield.js";

package/dist/components/textfield/textfield.js

@@ -2,12 +2,12 @@ import { pipe } from "../../core/compose/index.js";
 import { createBase, withElement } from "../../core/compose/component.js";
 import { withEvents, withDisabled, withLifecycle, withVariant, withTextInput, withTextLabel, } from "../../core/compose/features/index.js";
 import { withAPI } from "./api.js";
-import { withLeadingIcon, withTrailingIcon, withSupportingText, withPrefixText, withSuffixText, withPlacement, withDensity, withError, withField, withCounter, } from "./features/index.js";
+import { withLeadingIcon, withTrailingIcon, withSupportingText, withPrefixText, withSuffixText, withPlacement, withDensity, withError, withField, withCounter, withRequired, } from "./features/index.js";
 import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
 const createTextfield = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     try {
-        const textfield = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withLifecycle(), withVariant(baseConfig), withField(baseConfig), withTextInput(baseConfig), withDensity(baseConfig), withTextLabel(baseConfig), withLeadingIcon(baseConfig), withTrailingIcon(baseConfig), withPrefixText(baseConfig), withSuffixText(baseConfig), withSupportingText(baseConfig), withError(baseConfig), withCounter(baseConfig), withDisabled(baseConfig), withPlacement(), (comp) => withAPI(getApiConfig(comp))(comp))(baseConfig);
+        const textfield = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withLifecycle(), withVariant(baseConfig), withField(baseConfig), withTextInput(baseConfig), withDensity(baseConfig), withTextLabel(baseConfig), withRequired(baseConfig), withLeadingIcon(baseConfig), withTrailingIcon(baseConfig), withPrefixText(baseConfig), withSuffixText(baseConfig), withSupportingText(baseConfig), withError(baseConfig), withCounter(baseConfig), withDisabled(baseConfig), withPlacement(), (comp) => withAPI(getApiConfig(comp))(comp))(baseConfig);
         return textfield;
     }
     catch (error) {

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

@@ -1,4 +1,6 @@
 import type { EventCallback } from "../../core/state/emitter.js";
+import type { TextfieldTrailingPayload } from "./features/trailing-icon.js";
+export type { TextfieldTrailingPayload };
 /**
  * Available Textfield variants
  */
@@ -60,8 +62,13 @@ export interface TextfieldConfig {
     value?: string;
     /** Placeholder text */
     placeholder?: string;
-    /** Whether input is required */
+    /** Whether input is required; the label gets an asterisk (FLO-301) */
     required?: boolean;
+    /**
+     * No asterisk on a required field: M3 lets a form whose fields are mostly
+     * required mark its optional ones instead (FLO-301)
+     */
+    noAsterisk?: boolean;
     /** Whether textfield is disabled */
     disabled?: boolean;
     /** Whether textfield is readonly */
@@ -76,6 +83,15 @@ export interface TextfieldConfig {
     leadingIcon?: string;
     /** Trailing icon HTML content */
     trailingIcon?: string;
+    /**
+     * Makes the trailing icon a button with this accessible name (clear, show
+     * password, …), emitting `trailing` when activated. Without it the icon is
+     * decorative. M3 draws an interactive trailing icon as an icon button, as
+     * Compose's trailing slot holds an `IconButton` (FLO-301).
+     */
+    trailingIconLabel?: string;
+    /** Called when the trailing icon button is activated, after `trailing` is emitted */
+    onTrailingClick?: (event: TextfieldTrailingPayload) => void;
     /** Supporting text content */
     supportingText?: string;
     /** Whether supporting text indicates an error */
@@ -103,6 +119,8 @@ export interface TextfieldFocusPayload {
 }
 /** Events emitted by the text input feature. setValue() is silent. */
 export interface TextfieldEvents {
+    /** The trailing icon button was activated (`trailingIconLabel`; FLO-301) */
+    trailing: (payload: TextfieldTrailingPayload) => void;
     input: (payload: TextfieldValuePayload) => void;
     change: (payload: TextfieldValuePayload) => void;
     focus: (payload: TextfieldFocusPayload) => void;
@@ -148,9 +166,17 @@ export interface TextfieldComponent {
     /** Trailing icon element (if present) */
     trailingIcon: HTMLElement | null;
     /** Sets the trailing icon HTML content */
-    setTrailingIcon: (html: string) => TextfieldComponent;
+    /**
+     * Sets the trailing icon. `label` makes it a button with that accessible name,
+     * an empty one makes it decorative; left out, the icon keeps what it is.
+     */
+    setTrailingIcon: (html: string, label?: string) => TextfieldComponent;
     /** Removes the trailing icon */
     removeTrailingIcon: () => TextfieldComponent;
+    /** Makes the field required or optional, the label's asterisk with it (FLO-301) */
+    setRequired: (required: boolean) => TextfieldComponent;
+    /** Whether the field is required */
+    isRequired: () => boolean;
     /** Supporting text element (if present) */
     supportingTextElement: HTMLElement | null;
     /** Sets the supporting text content */
@@ -187,6 +213,8 @@ export interface TextfieldComponent {
     enable: () => TextfieldComponent;
     /** Disables the textfield */
     disable: () => TextfieldComponent;
+    /** Whether the text field is disabled (FLO-384) */
+    isDisabled: () => boolean;
     /** Destroys the textfield component and cleans up resources */
     destroy: () => void;
 }
@@ -197,6 +225,7 @@ export interface ApiOptions {
     disabled: {
         enable: () => void;
         disable: () => void;
+        isDisabled: () => boolean;
     };
     lifecycle: {
         destroy: () => void;
@@ -227,7 +256,7 @@ export interface BaseComponent {
     setLeadingIcon?: (html: string) => void;
     removeLeadingIcon?: () => void;
     trailingIcon?: HTMLElement | null;
-    setTrailingIcon?: (html: string) => void;
+    setTrailingIcon?: (html: string, label?: string) => void;
     removeTrailingIcon?: () => void;
     supportingTextElement?: HTMLElement | null;
     setSupportingText?: (text: string, isError?: boolean) => void;
@@ -244,6 +273,7 @@ export interface BaseComponent {
     disabled?: {
         enable: () => void;
         disable: () => void;
+        isDisabled: () => boolean;
     };
     lifecycle?: {
         destroy: () => void;