mtrl 0.10.4 → 0.10.6

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

@@ -101,7 +101,10 @@ export interface RadioItem {
 }
 /** Selection or unknown-value clearing reported by the radio group. */
 export interface RadiosChangePayload {
-    /** Selected value, or an empty string when an unknown value clears selection. */
+    /**
+     * Selected value, or an empty string when an unknown value clears selection.
+     * In 1.0 that is `null`, as the select and `<m-radios>` report it.
+     */
     value: string;
     /** Native input change event; undefined for programmatic clearing. */
     originalEvent: Event | undefined;
@@ -133,12 +136,14 @@ export interface RadiosComponent {
      */
     getClass: (name: string) => string;
     /**
-     * Gets the radios component name
+     * Gets the radios component name.
+     * In 1.0 it returns `null`, not an empty string, when nothing is selected.
      * @returns Selected radio value or empty string if none selected
      */
     getValue: () => string;
     /**
-     * Sets the radios component value (selects a radio)
+     * Sets the radios component value (selects a radio).
+     * In 1.0 it also accepts `null`, which clears the selection.
      * @param value - Value to select
      * @returns The radios component for chaining
      */
@@ -170,6 +175,8 @@ export interface RadiosComponent {
      * @returns The radios component for chaining
      */
     disable: () => RadiosComponent;
+    /** Whether the whole group is disabled (FLO-384) */
+    isDisabled: () => boolean;
     /**
      * Enables a specific radio option
      * @param value - Value of the radio to enable

package/dist/components/search/features/states.d.ts

@@ -1,5 +1,6 @@
 import type { SearchComponent } from "../types.js";
 import { SearchConfig, SearchState, SearchStructure, SearchViewMode, SearchVariant } from "../types.js";
+import { type CleanupScope } from "../../../core/compose/cleanup.js";
 /**
  * Adds state management features to the search component
  * Handles bar ↔ view transitions per MD3 specifications
@@ -11,6 +12,7 @@ import { SearchConfig, SearchState, SearchStructure, SearchViewMode, SearchVaria
 interface StatesHost {
     element: HTMLElement;
     getClass: (name: string) => string;
+    resources?: CleanupScope;
     structure?: SearchStructure;
     emit?: (event: string, data: unknown) => unknown;
 }

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

@@ -3,11 +3,20 @@ import { setHTML } from "../../../core/dom/html.js";
 import { PREFIX } from "../../../core/config.js";
 import { hideFromTopLayer, showInTopLayer } from "../../../core/dom/layer.js";
 import { activeElementOf } from "../../../core/dom/focus.js";
+import { getCleanup } from "../../../core/compose/cleanup.js";
 export const withStates = (config, getComponent) => (component) => {
     let currentState = config.initialState || SEARCH_STATES.BAR;
     let currentViewMode = config.viewMode || SEARCH_VIEW_MODES.DOCKED;
     let currentVariant = config.variant === "divided" ? "divided" : "contained";
     let isDisabled = config.disabled === true;
+    const resources = getCleanup(component);
+    let focusFrame = null;
+    const cancelPendingFocus = () => {
+        if (focusFrame !== null)
+            cancelAnimationFrame(focusFrame);
+        focusFrame = null;
+    };
+    resources.add(cancelPendingFocus);
     const getClass = (className) => {
         return component.getClass ? component.getClass(className) : className;
     };
@@ -94,7 +103,8 @@ export const withStates = (config, getComponent) => (component) => {
         openSurface();
         structure?.input.setAttribute("aria-expanded", "true");
         if (structure?.input) {
-            requestAnimationFrame(() => {
+            focusFrame = requestAnimationFrame(() => {
+                focusFrame = null;
                 structure.input.focus();
             });
         }
@@ -114,6 +124,7 @@ export const withStates = (config, getComponent) => (component) => {
         const element = component.element;
         const structure = component.structure;
         currentState = SEARCH_STATES.BAR;
+        cancelPendingFocus();
         element.classList.remove(getClass(SEARCH_CLASSES.STATE_VIEW));
         element.classList.add(getClass(SEARCH_CLASSES.STATE_BAR));
         if (structure?.leadingIcon) {

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

@@ -2,6 +2,7 @@ import { SEARCH_CLASSES, SEARCH_ICONS, SEARCH_STATES } from "../constants.js";
 import { createElement } from "../../../core/dom/create.js";
 import { setHTML } from "../../../core/dom/html.js";
 import { PREFIX } from "../../../core/config.js";
+import { processClassNames } from "../../../core/config/component.js";
 let searches = 0;
 export const withStructure = (config) => (component) => {
     const isDisabled = config.disabled === true;
@@ -23,6 +24,7 @@ export const withStructure = (config) => (component) => {
         getClass(config.variant === "divided"
             ? SEARCH_CLASSES.VARIANT_DIVIDED
             : SEARCH_CLASSES.VARIANT_CONTAINED),
+        processClassNames(config.className || ""),
     ];
     if (config.fullWidth) {
         rootClasses.push(getClass(SEARCH_CLASSES.FULL_WIDTH));

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

@@ -116,17 +116,17 @@ export interface SearchConfig {
     class?: string;
     /** Component prefix for class names */
     prefix?: string;
-    /** Called when search is submitted */
+    /** Called when search is submitted. In 1.0 it receives the `SearchEvent` a `submit` listener receives: read `event.value`. */
     onSubmit?: (value: string) => void;
-    /** Called when input value changes */
+    /** Called when input value changes. In 1.0 it receives the `SearchEvent` an `input` listener receives: read `event.value`. */
     onInput?: (value: string) => void;
-    /** Called when search is cleared */
+    /** Called when search is cleared. In 1.0 it receives the `SearchEvent` a `clear` listener receives. */
     onClear?: () => void;
-    /** Called when view expands */
+    /** Called when view expands. In 1.0 it receives the object an `expand` listener receives. */
     onExpand?: () => void;
-    /** Called when view collapses */
+    /** Called when view collapses. In 1.0 it receives the object a `collapse` listener receives. */
     onCollapse?: () => void;
-    /** Called when a suggestion is selected */
+    /** Called when a suggestion is selected. In 1.0 it receives the `SearchEvent`: the suggestion is `event.suggestion`. */
     onSuggestionSelect?: (suggestion: SearchSuggestion) => void;
     /** Event handlers map */
     on?: Partial<Record<SearchEventType, (event: SearchEvent) => void>>;

package/dist/components/segmented-button/config.js

@@ -1,4 +1,4 @@
-import { createComponentConfig } from "../../core/config/component.js";
+import { createComponentConfig, processClassNames } from "../../core/config/component.js";
 import { SelectionMode, Density } from "./types.js";
 import { SEGMENTED_BUTTON_DEFAULTS } from "./constants.js";
 export const DEFAULT_CONFIG = {
@@ -19,7 +19,7 @@ export const getContainerConfig = (config) => {
             "data-density": density,
         },
         className: [
-            config.class,
+            processClassNames(config.className || ""),
             config.disabled ? `${config.prefix}-segmented-button--disabled` : null,
             density !== Density.DEFAULT
                 ? `${config.prefix}-segmented-button--${density}`

package/dist/components/select/api.js

@@ -73,6 +73,9 @@ export const withAPI = (options) => (component) => ({
         options.disabled.disable();
         return this;
     },
+    isDisabled() {
+        return component.textfield?.input?.disabled === true;
+    },
     setError(error, message) {
         if (component.textfield?.setError) {
             component.textfield.setError(error, message);

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

@@ -80,7 +80,7 @@ export declare const SELECT_DEFAULTS: {
 export declare const SELECT_CLASSES: {
     /** Container element */
     readonly CONTAINER: "select";
-    /** Textfield element */
+    /** @deprecated Renamed `TEXT_FIELD` in 1.0 (FLO-383); the class stays `select__textfield`. */
     readonly TEXTFIELD: "select__textfield";
     /** Dropdown icon */
     readonly DROPDOWN_ICON: "select__dropdown-icon";

package/dist/components/select/features.js

@@ -1,3 +1,4 @@
+import { processClassNames } from "../../core/config/component.js";
 import createTextfield from "../textfield/index.js";
 import createMenu from "../menu/index.js";
 import { warnUnknownValue } from "../../core/utils/warn.js";
@@ -12,6 +13,7 @@ export const withTextfield = (config) => (component) => {
     }
     const dropdownIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>';
     const textfield = createTextfield({
+        class: processClassNames(config.className || ""),
         label: config.label,
         variant: config.variant || "filled",
         density: config.density || "default",

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,10 +160,14 @@ export interface SelectComponent {
     element: HTMLElement;
     /**
      * The textfield component
+     * @deprecated Renamed `textField` in 1.0 (FLO-383), where `select.textfield` is `undefined`.
+     * 0.10.x has no `textField`, so rename it when you upgrade.
      */
     textfield: TextfieldComponent;
     /**
      * The menu component
+     * @deprecated Removed in 1.0. Use the select's own methods and events: `open()`,
+     * `close()`, `isOpen()`, `getOptions()`, `setOptions()`, and `open`, `close` and `change`.
      */
     menu: MenuComponent;
     /**
@@ -249,6 +253,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/split-button/types.d.ts

@@ -84,7 +84,11 @@ export interface SplitButtonComponent {
     leadingElement: HTMLButtonElement;
     /** The trailing button's element */
     trailingElement: HTMLButtonElement;
-    /** The menu, when the component was given items */
+    /**
+     * The menu, when the component was given items
+     * @deprecated Removed in 1.0. Use the split button's own methods and events: `expand()`,
+     * `collapse()`, `isExpanded()`, and `expand`, `collapse` and `select`.
+     */
     menu?: MenuComponent;
     /** Sets the leading button's label */
     setText: (text: string) => SplitButtonComponent;

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 */
@@ -405,7 +407,7 @@ export interface TabsComponent {
      */
     off(event: string, handler: Function): this;
     /**
-     * Emit an event
+     * Emit an event. In 1.0, `emit` accepts only the tabs' own events.
      * @param event - Event name
      * @param data - Event data
      * @returns Tabs component for chaining

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