mtrl 0.10.4 → 0.10.6

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

@@ -1,6 +1,7 @@
 import type { ForwardedEventPayload } from "../../core/dom/index.js";
 /** Current item reported by programmatic navigation or native scrolling. */
 export interface CarouselChangePayload {
+    /** The current item's index. In 1.0 the payload carries it as `value`, and `index` is gone. */
     index: number;
 }
 /** Events emitted by the scroll feature and forwarded from the root. */
@@ -43,6 +44,14 @@ export interface CarouselConfig {
     cornerRadius?: number;
     /** Snap to items after scrolling; on by default except for uncontained layouts */
     snap?: boolean;
+    /**
+     * Scroll horizontal carousels with a vertical mouse wheel; false by default.
+     * Normalized deltas accumulate per gesture and glide to directional snap points.
+     * One notch advances at least one item; momentum can pass several whole items.
+     * At either edge the page scrolls.
+     * Horizontal trackpad gestures, zoom and vertical layouts stay native.
+     */
+    wheel?: boolean;
     initialSlide?: number;
     minSmallItemWidth?: number;
     maxSmallItemWidth?: number;
@@ -64,6 +73,8 @@ export interface CarouselComponent {
     goTo: (index: number) => CarouselComponent;
     getCurrentSlide: () => number;
     getVariant: () => CarouselVariant;
+    /** Enable or disable vertical mouse wheel scrolling in place. */
+    setWheel: (on: boolean) => CarouselComponent;
     addSlide: (slide: CarouselSlide, index?: number) => CarouselComponent;
     removeSlide: (index: number) => CarouselComponent;
     destroy: () => void;

package/dist/components/checkbox/api.js

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

package/dist/components/checkbox/config.js

@@ -43,6 +43,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/checkbox/types.d.ts

@@ -6,6 +6,8 @@ import type { EventCallback } from "../../core/state/emitter.js";
  * @remarks
  * - filled: Checkbox with filled background when checked (default)
  * - outlined: Checkbox with outline only, for less visual emphasis
+ * @deprecated The type of the deprecated `variant` option, which has no effect: M3 has one
+ * checkbox style (FLO-94, FLO-265). Removed in 1.0.
  */
 export type CheckboxVariant = "filled" | "outlined";
 /**
@@ -104,13 +106,13 @@ export interface CheckboxConfig {
      */
     componentName?: string;
 }
-/** 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 CheckboxChangePayload {
     /** 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;
 }
 /** Events emitted by the checkbox API. DOM clicks/focus are not forwarded. */
@@ -231,6 +233,8 @@ export interface CheckboxComponent {
      * @returns Checkbox component for method chaining
      */
     disable: () => CheckboxComponent;
+    /** Whether the checkbox is disabled (FLO-384) */
+    isDisabled: () => boolean;
     /**
      * Destroys the checkbox component and cleans up resources
      * Removes event listeners and DOM references
@@ -246,6 +250,7 @@ export interface ApiOptions {
     disabled: {
         enable: () => void;
         disable: () => void;
+        isDisabled: () => boolean;
     };
     lifecycle: {
         destroy: () => void;
@@ -278,6 +283,7 @@ export interface BaseComponent {
     disabled?: {
         enable: () => void;
         disable: () => void;
+        isDisabled: () => boolean;
     };
     lifecycle?: {
         destroy: () => void;

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

@@ -36,18 +36,24 @@ export interface ChipConfig {
     trailingLabel?: string;
     /** The trailing button opens a menu: aria-haspopup="menu", and a drop-down arrow unless trailingIcon is set. */
     trailingMenu?: boolean;
+    /** In 1.0 a chip's `onClick` receives the `click` payload, `{ event, originalEvent, element }`, not the chip. */
     onClick?: (chip: ChipComponent) => void;
+    /** In 1.0 a chip's `onChange` receives one object, `{ selected, chip, value }`, the `change` payload. */
     onChange?: (selected: boolean, chip: ChipComponent) => void;
     onSelect?: (chip: ChipComponent) => void;
     class?: string;
     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;
 }
@@ -148,7 +154,9 @@ export interface ChipsConfig {
      */
     selectionRequired?: boolean;
     /**
-     * Callback function when chip selection changes
+     * Callback function when chip selection changes.
+     * In 1.0 it receives one object, `{ value, selected, changed }` (no array, no
+     * second argument), and also hears `selectByValue(values, true)`.
      */
     onChange?: (event: ChipsChangeEvent, changedValue: string | null) => void;
     /**

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

@@ -74,6 +74,9 @@ export interface IconButtonConfig extends BaseComponentConfig {
      * Whether the IconButton supports toggle (selection) behavior
      * When true, the button can be selected/unselected
      *
+     * A click emits `change`. The DOM `toggle` event the button also dispatches
+     * is deprecated and removed in 1.0: listen to `change`.
+     *
      * @default false
      */
     toggle?: boolean;
@@ -310,6 +313,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/navigation-rail/types.d.ts

@@ -50,7 +50,9 @@ export interface NavigationRailConfig extends BaseComponentConfig {
     header?: HTMLElement;
     ripple?: boolean;
     onSelect?: (event: NavigationRailSelectEvent) => void;
+    /** In 1.0 it receives `{ expanded: true }`, the object an `expand` listener receives. */
     onExpand?: () => void;
+    /** In 1.0 it receives `{ expanded: false }`, the object a `collapse` listener receives. */
     onCollapse?: () => void;
 }
 export interface NavigationRailComponent {

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 */
@@ -69,13 +69,13 @@ export declare const RADIO_EVENTS: {
  * Default configuration values
  */
 export declare const RADIO_DEFAULTS: {
-    /** Default radio variant */
+    /** @deprecated The radios have no variant option; nothing reads this. Removed in 1.0. */
     readonly VARIANT: "standard";
     /** Default radio direction */
     readonly DIRECTION: "vertical";
-    /** Default label position */
+    /** @deprecated The radios have no label position option; nothing reads this. Removed in 1.0. */
     readonly LABEL_POSITION: "right";
-    /** Default radio size */
+    /** @deprecated The radios have no size option; nothing reads this. Removed in 1.0. */
     readonly SIZE: "medium";
 };
 /**

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