mtrl 0.10.4 → 0.10.5

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

@@ -43,11 +43,15 @@ export interface ChipConfig {
     prefix?: string;
     componentName?: string;
     ripple?: boolean;
-    /** @internal Selection belongs to the chips container. */
+    /**
+     * @internal Selection belongs to the chips container.
+     * @deprecated Not for apps: moves out of ChipConfig in 1.0.0 (FLO-381).
+     */
     managedSelection?: boolean;
     /**
      * @internal The chip is a cell of a chip set's grid (FLO-261): the root is a
      * `gridcell`, and a one-action chip's cell is its focus target.
+     * @deprecated Not for apps: moves out of ChipConfig in 1.0.0 (FLO-381).
      */
     cell?: boolean;
 }

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

@@ -1,3 +1,5 @@
 export { default } from "./datepicker.js";
 export type { DatePickerConfig, DatePickerComponent, DatePickerEvents, DatePickerValue, DatePickerValueOf, DatePickerInput, DatePickerChangePayload, DatePickerVisibilityPayload, DatePickerTapPayload, DatePickerSwipePayload, DatePickerVariant, DatePickerView, DatePickerSelectionMode, } from "./types.js";
-export { DEFAULT_DATE_FORMAT } from "./types.js";
+export { 
+/** @deprecated Internal, no replacement: removed from mtrl/components/datepicker in 1.0.0 (FLO-381). */
+DEFAULT_DATE_FORMAT, } from "./types.js";

package/dist/components/datepicker/index.js

@@ -1,2 +1,2 @@
 export { default } from "./datepicker.js";
-export { DEFAULT_DATE_FORMAT } from "./types.js";
+export { DEFAULT_DATE_FORMAT, } from "./types.js";

package/dist/components/extended-fab/api.d.ts

@@ -17,6 +17,8 @@ interface ApiOptions {
         enable: () => void;
         /** Disables the component */
         disable: () => void;
+        /** Whether the component is disabled */
+        isDisabled: () => boolean;
     };
     /**
      * Lifecycle management API

package/dist/components/extended-fab/api.js

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

package/dist/components/extended-fab/config.d.ts

@@ -587,6 +587,7 @@ export declare const getApiConfig: (comp: Pick<ExtendedFabComponent, "disabled"
     disabled: {
         enable: () => void;
         disable: () => void;
+        isDisabled: () => boolean;
     };
     lifecycle: {
         destroy: () => void;

package/dist/components/extended-fab/config.js

@@ -60,6 +60,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/extended-fab/types.d.ts

@@ -526,6 +526,8 @@ export interface ExtendedFabComponent {
      * ```
      */
     disable: () => ExtendedFabComponent;
+    /** Whether the extended FAB is disabled (FLO-384) */
+    isDisabled: () => boolean;
     /**
      * Sets the Extended FAB's icon
      *

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

@@ -16,6 +16,8 @@ interface ApiOptions {
         enable: () => void;
         /** Disables the component */
         disable: () => void;
+        /** Whether the component is disabled */
+        isDisabled: () => boolean;
     };
     /**
      * Lifecycle management API

package/dist/components/fab/api.js

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

package/dist/components/fab/config.d.ts

@@ -587,6 +587,7 @@ export declare const getApiConfig: (comp: Pick<FabComponent, "disabled" | "lifec
     disabled: {
         enable: () => void;
         disable: () => void;
+        isDisabled: () => boolean;
     };
     lifecycle: {
         destroy: () => void;

package/dist/components/fab/config.js

@@ -45,6 +45,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/fab/constants.d.ts

@@ -53,7 +53,7 @@ export declare const FAB_CLASSES: {
     readonly ICON: "fab__icon";
     /** Applied when FAB is lowered (pressed state) */
     readonly LOWERED: "fab--lowered";
-    /** Applied to small FABs */
+    /** @deprecated Applied to small FABs; the small size is deprecated (FAB_SIZES.SMALL). Removed in 1.0. */
     readonly SMALL: "fab--small";
     /** Applied to medium FABs */
     readonly MEDIUM: "fab--medium";
@@ -72,6 +72,7 @@ export declare const FAB_TYPES: {
  * Default icon sizes based on FAB size
  */
 export declare const FAB_ICON_SIZES: {
+    /** @deprecated The small FAB's icon size; the small size is deprecated (FAB_SIZES.SMALL). Removed in 1.0. */
     readonly SMALL: "24px";
     readonly DEFAULT: "24px";
     readonly MEDIUM: "28px";

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

@@ -462,6 +462,8 @@ export interface FabComponent {
      * ```
      */
     disable: () => FabComponent;
+    /** Whether the FAB is disabled (FLO-384) */
+    isDisabled: () => boolean;
     /**
      * Sets the FAB's icon
      *

package/dist/components/fab-menu/fab-menu.js

@@ -1,3 +1,4 @@
+import { processClassNames } from "../../core/config/component.js";
 import { pipe } from "../../core/compose/pipe.js";
 import { createBase, withElement } from "../../core/compose/component.js";
 import { withEvents, withLifecycle } from "../../core/compose/features/index.js";
@@ -27,7 +28,7 @@ const createFabMenu = (config) => {
             `${block}--${color}`,
             `${block}--${size}`,
             placement !== "none" ? `${block}--${placement}` : "",
-            settings.class ?? "",
+            processClassNames(settings.className || ""),
         ].filter(Boolean),
     }), withLifecycle())(settings);
     const resources = getCleanup(component);

package/dist/components/icon-button/api.js

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

package/dist/components/icon-button/constants.d.ts

@@ -115,7 +115,9 @@ export declare const ICON_BUTTON_CLASSES: {
  */
 export declare const DEFAULT_RIPPLE_CONFIG: {
     readonly DURATION: 450;
+    /** @deprecated Has no effect: the option it is the default of is never applied (FLO-268). Removed in 1.0. */
     readonly TIMING: "cubic-bezier(0.4, 0.0, 0.2, 1)";
+    /** @deprecated Has no effect: the option it is the default of is never applied (FLO-268). Removed in 1.0. */
     readonly OPACITY: [string, string];
 };
 /**

package/dist/components/icon-button/types.d.ts

@@ -310,6 +310,8 @@ export interface IconButtonComponent {
      * @returns The IconButton component for chaining
      */
     disable: () => IconButtonComponent;
+    /** Whether the icon button is disabled (FLO-384) */
+    isDisabled: () => boolean;
     /**
      * Sets the IconButton's icon
      * @param icon - Icon HTML content

package/dist/components/index.d.ts

@@ -49,19 +49,26 @@ export { clearSnackbars } from "./snackbar/index.js";
 export { default as createSwitch } from "./switch/index.js";
 export { default as createTabs } from "./tabs/index.js";
 export { createTab } from "./tabs/tab.js";
-export { default as createTextfield } from "./textfield/index.js";
+export { default as createTextField } from "./textfield/index.js";
+export { 
+/** @deprecated Use createTextField: M3 writes "text field" as two words. Removed in 1.0 (FLO-383). */
+default as createTextfield, } from "./textfield/index.js";
 export { default as createTimePicker } from "./timepicker/index.js";
 export { default as createToolbar } from "./toolbar/index.js";
 export { default as createTopAppBar } from "./top-app-bar/index.js";
 export { default as createTooltip } from "./tooltip/index.js";
 export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./card/content.js";
 export type { BadgeConfig, BadgeComponent } from "./badge/types.js";
-export type { BottomAppBarConfig, BottomAppBar } from "./bottom-app-bar/types.js";
+export type { BottomAppBarConfig, BottomAppBar as BottomAppBarComponent, 
+/** @deprecated Use BottomAppBarComponent, the name every component type has. Removed in 1.0 (FLO-383). */
+BottomAppBar, } from "./bottom-app-bar/types.js";
 export type { BottomSheetConfig, BottomSheetComponent, BottomSheetVariant, BottomSheetState, BottomSheetStateEvent, BottomSheetEventHandlers, } from "./bottom-sheet/types.js";
 export type { SideSheetConfig, SideSheetComponent, SideSheetVariant, SideSheetPosition, SideSheetEventHandlers, } from "./side-sheet/types.js";
 export type { ButtonConfig, ButtonComponent, ButtonVariant, } from "./button/types.js";
 export type { ButtonGroupConfig, ButtonGroupComponent, ButtonGroupItemConfig, ButtonGroupEvent, ButtonGroupEventType, ButtonGroupVariant, ButtonGroupOrientation, ButtonGroupDensity, } from "./button-group/types.js";
-export type { CardSchema } from "./card/types.js";
+export type { CardSchema as CardConfig, 
+/** @deprecated Use CardConfig. Removed in 1.0 (FLO-383). */
+CardSchema, } from "./card/types.js";
 export type { CarouselConfig, CarouselComponent } from "./carousel/types.js";
 export type { CheckboxConfig, CheckboxComponent } from "./checkbox/types.js";
 export type { ChipConfig, ChipComponent, ChipType, ChipEvents, ChipChangePayload, AssistChipConfig, FilterChipConfig, InputChipConfig, SuggestionChipConfig, ChipsConfig, ChipsComponent, } from "./chips/types.js";
@@ -86,9 +93,15 @@ export type { SliderConfig, SliderComponent, SliderEvent, } from "./slider/types
 export type { SnackbarConfig, SnackbarComponent } from "./snackbar/types.js";
 export type { SwitchConfig, SwitchComponent } from "./switch/types.js";
 export type { TabsConfig, TabsComponent, TabConfig, TabComponent, } from "./tabs/types.js";
-export type { TextfieldConfig, TextfieldComponent } from "./textfield/types.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, } from "./textfield/types.js";
 export type { TimePickerConfig, TimePickerComponent } from "./timepicker/types.js";
 export type { FabMenuConfig, FabMenuComponent, FabMenuEvents, FabMenuItem } from "./fab-menu/types.js";
 export type { ToolbarConfig, ToolbarComponent, ToolbarEvents, ToolbarItem, } from "./toolbar/types.js";
-export type { TopAppBarConfig, TopAppBar } from "./top-app-bar/types.js";
+export type { TopAppBarConfig, TopAppBar as TopAppBarComponent, 
+/** @deprecated Use TopAppBarComponent, the name every component type has. Removed in 1.0 (FLO-383). */
+TopAppBar, } from "./top-app-bar/types.js";
 export type { TooltipConfig, TooltipComponent } from "./tooltip/types.js";

package/dist/components/index.js

@@ -33,7 +33,8 @@ export { clearSnackbars } from "./snackbar/index.js";
 export { default as createSwitch } from "./switch/index.js";
 export { default as createTabs } from "./tabs/index.js";
 export { createTab } from "./tabs/tab.js";
-export { default as createTextfield } from "./textfield/index.js";
+export { default as createTextField } from "./textfield/index.js";
+export { default as createTextfield, } from "./textfield/index.js";
 export { default as createTimePicker } from "./timepicker/index.js";
 export { default as createToolbar } from "./toolbar/index.js";
 export { default as createTopAppBar } from "./top-app-bar/index.js";

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

@@ -1,3 +1,4 @@
+import type { ForwardedEventPayload } from "../../core/dom/index.js";
 /**
  * Configuration for the List component
  * @interface ListConfig
@@ -375,8 +376,9 @@ export interface ListComponent<T = unknown> {
 export interface ListEvents<T = unknown> {
     select: (event: SelectEvent<T>) => void;
     load: (event: LoadEvent<T>) => void;
-    scroll: (event: {
-        originalEvent: Event;
-        component: ListComponent<T>;
+    scroll: (event: ForwardedEventPayload<Event, HTMLElement> & {
+        /** @deprecated Never sent: the root's scroll is forwarded without it. Removed in 1.0 (FLO-380, FLO-384). */
+        component?: ListComponent<T>;
     }) => void;
+    keydown: (event: ForwardedEventPayload<KeyboardEvent, HTMLElement>) => void;
 }

package/dist/components/menu/features/keyboard.js

@@ -41,11 +41,11 @@ export const createKeyboardNavigation = (component) => {
             return null;
         const level = parseInt(menuElement.getAttribute("data-level") || "1", 10);
         const owner = component.element.id;
-        const ownerFilter = owner ? `[data-owner="${owner}"]` : "";
         const scope = level <= 1
             ? component.element
-            : menuElement.getRootNode().querySelector(`.${component.getClass("menu--submenu")}${ownerFilter}[data-level="${level - 1}"]`);
-        return ((scope ?? component.element).querySelector(`.${component.getClass("menu__item")}[data-id="${parentId}"]`) ?? null);
+            : Array.from(menuElement.getRootNode().querySelectorAll(`.${component.getClass("menu--submenu")}`)).find((candidate) => (!owner || candidate.getAttribute("data-owner") === owner) &&
+                candidate.getAttribute("data-level") === String(level - 1));
+        return Array.from((scope ?? component.element).querySelectorAll(`.${component.getClass("menu__item")}`)).find((candidate) => candidate.getAttribute("data-id") === parentId) ?? null;
     };
     const menuItems = (menuElement) => Array.from(menuElement.querySelectorAll(`.${component.getClass("menu__item")}`));
     const resetTypeahead = () => {
@@ -59,8 +59,11 @@ export const createKeyboardNavigation = (component) => {
         resetTypeahead();
         const items = menuItems(menuElement);
         items.forEach((item) => item.setAttribute("tabindex", "-1"));
-        if (items.length > 0)
-            items[0].setAttribute("tabindex", "0");
+        items[0]?.setAttribute("tabindex", "0");
+        const focused = activeElementOf(menuElement);
+        if (focused !== menuElement && menuElement.contains(focused) ||
+            focused?.closest(`.${component.getClass("menu--submenu")}`)?.getAttribute("data-owner") === menuElement.id)
+            return;
         if (interactionType === "keyboard" && items.length > 0) {
             items[0].focus();
             return;

package/dist/components/menu/features/opener.js

@@ -50,7 +50,7 @@ const withOpener = (config) => (component) => {
     };
     const determineActiveClass = (element) => {
         const classPrefix = component.getClass("").split("-")[0];
-        if (element.tagName === "BUTTON") {
+        if (element.tagName === "BUTTON" && element.classList.contains(`${classPrefix}-button`)) {
             return `${classPrefix}-button--active`;
         }
         else if (element.classList.contains(`${classPrefix}-chip`)) {

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

@@ -8,6 +8,7 @@
  * @category Components
  */
 export { default } from "./menu.js";
+export type { MenuEvents } from "./types.js";
 export type { MenuConfig, MenuComponent, MenuItem, MenuDivider, MenuGap, MenuContent, MenuEvent, MenuSelectEvent, MenuPosition } from "./types.js";
 /**
  * Constants for menu position values - use these instead of string literals

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

@@ -45,7 +45,7 @@ export const withCanvas = (config) => (component) => {
     const strokeWidth = () => getStrokeWidth(currentThickness);
     const max = () => component.state?.max ?? config.max ?? 100;
     const isIndeterminate = () => component.state?.indeterminate ?? config.indeterminate ?? false;
-    const colors = createColors(() => draw(animationTime));
+    const colors = createColors(component.element, () => draw(animationTime));
     const measure = () => {
         if (!context)
             return;

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

@@ -6,10 +6,11 @@ export interface ProgressColors {
 }
 /**
  * Keeps the palette for one indicator, refreshed when the theme changes.
+ * @param element - the indicator's element, where its theme is read
  * @param onChange - called after the colours change, to redraw
  * @returns the palette getter and a cleanup function
  */
-export declare const createColors: (onChange: () => void) => {
+export declare const createColors: (element: Element, onChange: () => void) => {
     get: () => ProgressColors;
     refresh: () => void;
     destroy: () => void;

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

@@ -7,27 +7,34 @@ const FALLBACKS = {
     stop: "#6750A4",
     buffer: "#EADDFF",
 };
-const read = () => ({
-    indicator: getThemeColor(PROGRESS_COLORS.INDICATOR, { fallback: FALLBACKS.indicator }),
-    track: getThemeColor(PROGRESS_COLORS.TRACK, { fallback: FALLBACKS.track }),
-    stop: getThemeColor(PROGRESS_COLORS.STOP, { fallback: FALLBACKS.stop }),
-    buffer: getThemeColor(PROGRESS_COLORS.BUFFER, { fallback: FALLBACKS.buffer }),
+const read = (element) => ({
+    indicator: getThemeColor(PROGRESS_COLORS.INDICATOR, { element, fallback: FALLBACKS.indicator }),
+    track: getThemeColor(PROGRESS_COLORS.TRACK, { element, fallback: FALLBACKS.track }),
+    stop: getThemeColor(PROGRESS_COLORS.STOP, { element, fallback: FALLBACKS.stop }),
+    buffer: getThemeColor(PROGRESS_COLORS.BUFFER, { element, fallback: FALLBACKS.buffer }),
 });
-export const createColors = (onChange) => {
+export const createColors = (element, onChange) => {
     let colors = FALLBACKS;
     let read_ = false;
     const refresh = () => {
+        if (!element.isConnected)
+            return;
         try {
-            colors = read();
+            colors = read(element);
             read_ = true;
         }
         catch {
         }
     };
-    const offThemeChange = onThemeChange(() => {
+    const update = () => {
         refresh();
         onChange();
-    });
+    };
+    const offThemeChange = onThemeChange(update);
+    const observer = typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(update)
+        : null;
+    observer?.observe(element);
     return {
         get: () => {
             if (!read_)
@@ -35,6 +42,9 @@ export const createColors = (onChange) => {
             return colors;
         },
         refresh,
-        destroy: offThemeChange,
+        destroy: () => {
+            observer?.disconnect();
+            offThemeChange();
+        },
     };
 };

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

@@ -19,6 +19,7 @@ interface ComponentWithRadio {
     removeOption: (value: string) => void;
     enable: () => void;
     disable: () => void;
+    isDisabled: () => boolean;
     enableOption: (value: string) => void;
     disableOption: (value: string) => void;
     getClass: (name: string) => string;

package/dist/components/radios/api.js

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

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

@@ -21,8 +21,8 @@ export declare const RADIO_DIRECTIONS: {
     readonly HORIZONTAL: "horizontal";
 };
 /**
- * @deprecated Read by nothing: the component builds its class names itself
- * and has one size and variant (FLO-266).
+ * @deprecated Read only by `RADIO_DEFAULTS`, which the component does not read:
+ * it builds its class names itself and has one size and variant (FLO-266).
  */
 export declare const RADIO_VARIANTS: {
     /** Standard radio button */
@@ -33,8 +33,8 @@ export declare const RADIO_VARIANTS: {
     readonly OUTLINED: "outlined";
 };
 /**
- * @deprecated Read by nothing: the component builds its class names itself
- * and has one size and variant (FLO-266).
+ * @deprecated Read only by `RADIO_DEFAULTS`, which the component does not read:
+ * it builds its class names itself and has one size and variant (FLO-266).
  */
 export declare const RADIO_LABEL_POSITIONS: {
     /** Label to the right of the radio (default) */
@@ -43,8 +43,8 @@ export declare const RADIO_LABEL_POSITIONS: {
     readonly LEFT: "left";
 };
 /**
- * @deprecated Read by nothing: the component builds its class names itself
- * and has one size and variant (FLO-266).
+ * @deprecated Read only by `RADIO_DEFAULTS`, which the component does not read:
+ * it builds its class names itself and has one size and variant (FLO-266).
  */
 export declare const RADIO_SIZES: {
     /** Small radio button */

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

@@ -18,6 +18,7 @@ export declare const withRadio: (config: RadiosConfig) => <C extends RadioHost>(
     addOption: (option: RadioOptionConfig) => C;
     removeOption: (value: string) => C;
     enable: () => C;
+    isDisabled: () => boolean;
     disable: () => C;
     enableOption: (value: string) => C;
     disableOption: (value: string) => C;

package/dist/components/radios/radio.js

@@ -131,6 +131,7 @@ export const withRadio = (config) => (component) => {
             });
             return component;
         },
+        isDisabled: () => component.element.classList.contains(`${radiosClass}--disabled`),
         disable: () => {
             component.element.classList.add(`${radiosClass}--disabled`);
             radios.forEach(radio => {

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

@@ -170,6 +170,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/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