mtrl 0.8.0-next.46 → 0.8.0-next.48

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

@@ -1,10 +1,12 @@
 import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
+import { EXTENDED_FAB_CLASSES } from "./constants.js";
 export const defaultConfig = {
-    variant: "primary",
+    variant: "primary-container",
     type: "button",
     ripple: true,
     iconPosition: "start",
     width: "fixed",
+    size: "small",
 };
 export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "extended-fab");
 export const getElementConfig = (config) => {
@@ -12,10 +14,17 @@ export const getElementConfig = (config) => {
         type: config.type || "button",
         "aria-label": config.ariaLabel || config.text || (config.icon ? "action" : undefined),
     };
+    if (config.value !== undefined) {
+        attributes.value = config.value;
+    }
     const classNames = [`${config.prefix}-extended-fab`];
     if (config.variant) {
         classNames.push(`${config.prefix}-extended-fab--${config.variant}`);
     }
+    classNames.push(`${config.prefix}-extended-fab--${config.size || "small"}`);
+    if (config.iconPosition === "end") {
+        classNames.push(`${config.prefix}-${EXTENDED_FAB_CLASSES.ICON_END}`);
+    }
     if (config.width) {
         classNames.push(`${config.prefix}-extended-fab--${config.width}`);
     }

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

@@ -2,15 +2,27 @@
  * Extended FAB variants following Material Design 3 guidelines
  */
 export declare const EXTENDED_FAB_VARIANTS: {
-    /** Uses the primary color, highest emphasis (default) */
+    /** Primary container colour (default) */
+    readonly PRIMARY_CONTAINER: "primary-container";
+    /** Secondary container colour */
+    readonly SECONDARY_CONTAINER: "secondary-container";
+    /** Tertiary container colour */
+    readonly TERTIARY_CONTAINER: "tertiary-container";
+    /** Primary tone colour */
     readonly PRIMARY: "primary";
-    /** Uses the secondary color, medium emphasis */
+    /** Secondary tone colour */
     readonly SECONDARY: "secondary";
-    /** Uses the tertiary color, lower emphasis */
+    /** Tertiary tone colour */
     readonly TERTIARY: "tertiary";
-    /** Uses the surface color with an outline, lowest emphasis */
+    /** @deprecated Use a container or tone style instead. */
     readonly SURFACE: "surface";
 };
+/** Expressive extended FAB sizes. */
+export declare const EXTENDED_FAB_SIZES: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
 /**
  * Extended FAB width behavior
  */

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

@@ -1,9 +1,17 @@
 export const EXTENDED_FAB_VARIANTS = {
+    PRIMARY_CONTAINER: 'primary-container',
+    SECONDARY_CONTAINER: 'secondary-container',
+    TERTIARY_CONTAINER: 'tertiary-container',
     PRIMARY: 'primary',
     SECONDARY: 'secondary',
     TERTIARY: 'tertiary',
     SURFACE: 'surface'
 };
+export const EXTENDED_FAB_SIZES = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large'
+};
 export const EXTENDED_FAB_WIDTH = {
     FIXED: 'fixed',
     FLUID: 'fluid'

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

@@ -42,7 +42,12 @@ const createExtendedFab = (config = {}) => {
         }
     };
     try {
-        const extendedFab = pipe(createBase, withEvents(), withElement(getElementConfig(fabConfig)), withVariant(fabConfig), withIcon(fabConfig), withText(fabConfig), withDisabled(fabConfig), withRipple(fabConfig), withLifecycle(), comp => withAPI(getApiConfig(comp))(comp))(fabConfig);
+        const extendedFab = pipe(createBase, withEvents(), withElement(getElementConfig(fabConfig)), withVariant(fabConfig), withIcon(fabConfig), component => withText({
+            ...fabConfig,
+            beforeElement: fabConfig.iconPosition === 'end'
+                ? component.icon.getElement() ?? undefined
+                : undefined,
+        })(component), withDisabled(fabConfig), withRipple(fabConfig), withLifecycle(), comp => withAPI(getApiConfig(comp))(comp))(fabConfig);
         setupScrollCollapse(extendedFab);
         return extendedFab;
     }

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

@@ -33,4 +33,4 @@
  * @category Components
  */
 export { default, default as createExtendedFab } from "./extended-fab.js";
-export type { ExtendedFabConfig, ExtendedFabComponent, ExtendedFabVariant, ExtendedFabWidth, ExtendedFabPosition } from "./types.js";
+export type { ExtendedFabConfig, ExtendedFabComponent, ExtendedFabVariant, ExtendedFabSize, ExtendedFabWidth, ExtendedFabPosition } from "./types.js";

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

@@ -6,12 +6,17 @@
  *
  * @category Components
  * @remarks
- * - primary: Uses the primary color, highest emphasis (default)
- * - secondary: Uses the secondary color, medium emphasis
- * - tertiary: Uses the tertiary color, lower emphasis
- * - surface: Uses the surface color with an outline, lowest emphasis
+ * - primary-container, secondary-container, tertiary-container: container styles
+ * - primary, secondary, tertiary: tone styles
+ * - surface: deprecated; use a container or tone style instead
+ * Default: primary-container.
  */
-export type ExtendedFabVariant = "primary" | "secondary" | "tertiary" | "surface";
+export type ExtendedFabVariant = "primary-container" | "secondary-container" | "tertiary-container" | "primary" | "secondary" | "tertiary" | "surface";
+/**
+ * Expressive extended FAB size: small 56dp, medium 80dp, large 96dp.
+ * @category Components
+ */
+export type ExtendedFabSize = "small" | "medium" | "large";
 /**
  * Extended FAB width behavior
  *
@@ -48,12 +53,14 @@ export type ExtendedFabPosition = "top-right" | "top-left" | "bottom-right" | "b
  * @see https://m3.material.io/components/extended-fab/overview
  */
 export interface ExtendedFabConfig {
+    /** Expressive container, icon and label size. @default 'small' */
+    size?: ExtendedFabSize;
     /**
      * Extended FAB variant that determines visual styling
      *
      * The color variant affects the Extended FAB's background color, text color, and elevation.
      *
-     * @default 'primary'
+     * @default 'primary-container'
      *
      * @example
      * ```typescript

package/dist/components/fab/config.js

@@ -1,6 +1,6 @@
 import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
 export const defaultConfig = {
-    variant: "primary",
+    variant: "primary-container",
     size: "default",
     type: "button",
     ripple: true,
@@ -11,6 +11,9 @@ export const getElementConfig = (config) => {
         type: config.type || "button",
         "aria-label": config.ariaLabel || (config.icon ? "action" : undefined),
     };
+    if (config.value !== undefined) {
+        attributes.value = config.value;
+    }
     if (config.disabled === true) {
         attributes.disabled = true;
     }
@@ -25,13 +28,10 @@ export const getElementConfig = (config) => {
     if (config.disabled === true) {
         componentClasses.push(`fab--disabled`);
     }
-    const enhancedConfig = {
-        ...config,
-        className: componentClasses,
-    };
-    return createElementConfig(enhancedConfig, {
+    return createElementConfig(config, {
         tag: "button",
         attributes,
+        className: componentClasses,
         forwardEvents: {
             click: (component) => !component.element.disabled,
             focus: true,

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

@@ -2,23 +2,31 @@
  * FAB variants following Material Design 3 guidelines
  */
 export declare const FAB_VARIANTS: {
-    /** Uses the primary color, highest emphasis (default) */
+    /** Primary container colour (default) */
+    readonly PRIMARY_CONTAINER: "primary-container";
+    /** Secondary container colour */
+    readonly SECONDARY_CONTAINER: "secondary-container";
+    /** Tertiary container colour */
+    readonly TERTIARY_CONTAINER: "tertiary-container";
+    /** Primary tone colour */
     readonly PRIMARY: "primary";
-    /** Uses the secondary color, medium emphasis */
+    /** Secondary tone colour */
     readonly SECONDARY: "secondary";
-    /** Uses the tertiary color, lower emphasis */
+    /** Tertiary tone colour */
     readonly TERTIARY: "tertiary";
-    /** Uses the surface color with an outline, lowest emphasis */
+    /** @deprecated Use a container or tone style instead. */
     readonly SURFACE: "surface";
 };
 /**
  * FAB size variants
  */
 export declare const FAB_SIZES: {
-    /** 40px diameter, for compact interfaces or secondary actions */
+    /** @deprecated Small FABs are no longer recommended in M3 Expressive. */
     readonly SMALL: "small";
     /** 56px diameter, for standard primary actions (default) */
     readonly DEFAULT: "default";
+    /** 80px diameter with a 28px icon */
+    readonly MEDIUM: "medium";
     /** 96px diameter, for emphasis or touch-focused interfaces */
     readonly LARGE: "large";
 };
@@ -47,6 +55,8 @@ export declare const FAB_CLASSES: {
     readonly LOWERED: "fab--lowered";
     /** Applied to small FABs */
     readonly SMALL: "fab--small";
+    /** Applied to medium FABs */
+    readonly MEDIUM: "fab--medium";
     /** Applied to large FABs */
     readonly LARGE: "fab--large";
 };
@@ -62,9 +72,10 @@ export declare const FAB_TYPES: {
  * Default icon sizes based on FAB size
  */
 export declare const FAB_ICON_SIZES: {
-    readonly SMALL: "20px";
+    readonly SMALL: "24px";
     readonly DEFAULT: "24px";
-    readonly LARGE: "36px";
+    readonly MEDIUM: "28px";
+    readonly LARGE: "32px";
 };
 /**
  * Default animations for FAB

package/dist/components/fab/constants.js

@@ -1,4 +1,7 @@
 export const FAB_VARIANTS = {
+    PRIMARY_CONTAINER: 'primary-container',
+    SECONDARY_CONTAINER: 'secondary-container',
+    TERTIARY_CONTAINER: 'tertiary-container',
     PRIMARY: 'primary',
     SECONDARY: 'secondary',
     TERTIARY: 'tertiary',
@@ -7,6 +10,7 @@ export const FAB_VARIANTS = {
 export const FAB_SIZES = {
     SMALL: 'small',
     DEFAULT: 'default',
+    MEDIUM: 'medium',
     LARGE: 'large'
 };
 export const FAB_POSITIONS = {
@@ -20,6 +24,7 @@ export const FAB_CLASSES = {
     ICON: 'fab-icon',
     LOWERED: 'fab--lowered',
     SMALL: 'fab--small',
+    MEDIUM: 'fab--medium',
     LARGE: 'fab--large'
 };
 export const FAB_TYPES = {
@@ -28,9 +33,10 @@ export const FAB_TYPES = {
     RESET: 'reset'
 };
 export const FAB_ICON_SIZES = {
-    SMALL: '20px',
+    SMALL: '24px',
     DEFAULT: '24px',
-    LARGE: '36px'
+    MEDIUM: '28px',
+    LARGE: '32px'
 };
 export const FAB_ANIMATIONS = {
     ENTRANCE_DURATION: 250

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

@@ -7,7 +7,7 @@
  *
  * Features:
  * - Multiple variants (primary, secondary, tertiary, surface)
- * - Three size options (small, default, large)
+ * - Four size options (small, default, medium, large; small is deprecated)
  * - Configurable positioning
  * - Icon support with customization
  * - Ripple effect on interaction

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

@@ -6,12 +6,12 @@
  *
  * @category Components
  * @remarks
- * - primary: Uses the primary color, highest emphasis (default)
- * - secondary: Uses the secondary color, medium emphasis
- * - tertiary: Uses the tertiary color, lower emphasis
- * - surface: Uses the surface color with an outline, lowest emphasis
+ * - primary-container, secondary-container, tertiary-container: container styles
+ * - primary, secondary, tertiary: tone styles
+ * - surface: deprecated; use a container or tone style instead
+ * Default: primary-container.
  */
-export type FabVariant = "primary" | "secondary" | "tertiary" | "surface";
+export type FabVariant = "primary-container" | "secondary-container" | "tertiary-container" | "primary" | "secondary" | "tertiary" | "surface";
 /**
  * FAB size variants
  *
@@ -20,11 +20,12 @@ export type FabVariant = "primary" | "secondary" | "tertiary" | "surface";
  *
  * @category Components
  * @remarks
- * - small: 40px diameter, for compact interfaces or secondary actions
+ * - small: 40px container, 24px icon; deprecated in M3 Expressive
  * - default: 56px diameter, for standard primary actions (default)
- * - large: 96px diameter, for emphasis or touch-focused interfaces
+ * - medium: 80px container, 28px icon
+ * - large: 96px container, 32px icon
  */
-export type FabSize = "small" | "default" | "large";
+export type FabSize = "small" | "default" | "medium" | "large";
 /**
  * FAB position options
  *
@@ -55,7 +56,7 @@ export interface FabConfig {
      *
      * The color variant affects the FAB's background color, icon color, and elevation.
      *
-     * @default 'primary'
+     * @default 'primary-container'
      *
      * @example
      * ```typescript

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

@@ -38,7 +38,7 @@ export const getElementConfig = (config) => {
     if (config.size && config.size !== "s") {
         componentClasses.push(`icon-button--${config.size}`);
     }
-    if (config.shape && config.shape !== "round") {
+    if (config.shape) {
         componentClasses.push(`icon-button--${config.shape}`);
     }
     if (config.width && config.width !== "default") {

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

@@ -26,22 +26,22 @@ export type IconButtonVariant = typeof ICON_BUTTON_VARIANTS[keyof typeof ICON_BU
  *
  * | Size | Container | Icon Size |
  * |------|-----------|-----------|
- * | XS   | 32dp      | 18dp      |
+ * | XS   | 32dp      | 20dp      |
  * | S    | 40dp      | 24dp      |
  * | M    | 56dp      | 24dp      |
- * | L    | 96dp      | 36dp      |
- * | XL   | 136dp     | 48dp      |
+ * | L    | 96dp      | 32dp      |
+ * | XL   | 136dp     | 40dp      |
  */
 export declare const ICON_BUTTON_SIZES: {
-    /** Extra small - 32px container, 18px icon */
+    /** Extra small - 32px container, 20px icon */
     readonly XS: "xs";
     /** Small - 40px container, 24px icon (default) */
     readonly S: "s";
     /** Medium - 56px container, 24px icon */
     readonly M: "m";
-    /** Large - 96px container, 36px icon */
+    /** Large - 96px container, 32px icon */
     readonly L: "l";
-    /** Extra large - 136px container, 48px icon */
+    /** Extra large - 136px container, 40px icon */
     readonly XL: "xl";
 };
 /**
@@ -69,11 +69,11 @@ export type IconButtonShape = typeof ICON_BUTTON_SHAPES[keyof typeof ICON_BUTTON
  *
  * | Size | Narrow | Default | Wide   |
  * |------|--------|---------|--------|
- * | XS   | 28dp   | 32dp    | 36dp   |
- * | S    | 32dp   | 40dp    | 48dp   |
- * | M    | 48dp   | 56dp    | 64dp   |
- * | L    | 80dp   | 96dp    | 112dp  |
- * | XL   | 112dp  | 136dp   | 160dp  |
+ * | XS   | 28dp   | 32dp    | 40dp   |
+ * | S    | 32dp   | 40dp    | 52dp   |
+ * | M    | 48dp   | 56dp    | 72dp   |
+ * | L    | 64dp   | 96dp    | 128dp  |
+ * | XL   | 104dp  | 136dp   | 184dp  |
  */
 export declare const ICON_BUTTON_WIDTHS: {
     /** Narrow width */
@@ -148,11 +148,11 @@ export declare const ICON_BUTTON_CORNER_RADIUS: {
  * Icon sizes per button size (in dp)
  */
 export declare const ICON_BUTTON_ICON_SIZES: {
-    readonly XS: 18;
+    readonly XS: 20;
     readonly S: 24;
     readonly M: 24;
-    readonly L: 36;
-    readonly XL: 48;
+    readonly L: 32;
+    readonly XL: 40;
 };
 /**
  * Container sizes per button size (in dp)
@@ -171,26 +171,26 @@ export declare const ICON_BUTTON_WIDTH_VALUES: {
     readonly XS: {
         readonly narrow: 28;
         readonly default: 32;
-        readonly wide: 36;
+        readonly wide: 40;
     };
     readonly S: {
         readonly narrow: 32;
         readonly default: 40;
-        readonly wide: 48;
+        readonly wide: 52;
     };
     readonly M: {
         readonly narrow: 48;
         readonly default: 56;
-        readonly wide: 64;
+        readonly wide: 72;
     };
     readonly L: {
-        readonly narrow: 80;
+        readonly narrow: 64;
         readonly default: 96;
-        readonly wide: 112;
+        readonly wide: 128;
     };
     readonly XL: {
-        readonly narrow: 112;
+        readonly narrow: 104;
         readonly default: 136;
-        readonly wide: 160;
+        readonly wide: 184;
     };
 };

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

@@ -45,11 +45,11 @@ export const ICON_BUTTON_CORNER_RADIUS = {
     XL: { square: 28, pressed: 16 }
 };
 export const ICON_BUTTON_ICON_SIZES = {
-    XS: 18,
+    XS: 20,
     S: 24,
     M: 24,
-    L: 36,
-    XL: 48
+    L: 32,
+    XL: 40
 };
 export const ICON_BUTTON_CONTAINER_SIZES = {
     XS: 32,
@@ -59,9 +59,9 @@ export const ICON_BUTTON_CONTAINER_SIZES = {
     XL: 136
 };
 export const ICON_BUTTON_WIDTH_VALUES = {
-    XS: { narrow: 28, default: 32, wide: 36 },
-    S: { narrow: 32, default: 40, wide: 48 },
-    M: { narrow: 48, default: 56, wide: 64 },
-    L: { narrow: 80, default: 96, wide: 112 },
-    XL: { narrow: 112, default: 136, wide: 160 }
+    XS: { narrow: 28, default: 32, wide: 40 },
+    S: { narrow: 32, default: 40, wide: 52 },
+    M: { narrow: 48, default: 56, wide: 72 },
+    L: { narrow: 64, default: 96, wide: 128 },
+    XL: { narrow: 104, default: 136, wide: 184 }
 };

package/dist/components/icon-button/features/toggle.js

@@ -1,3 +1,4 @@
+import { getCleanup } from "../../../core/compose/cleanup.js";
 export const withToggle = (config) => (component) => {
     if (!config.toggle) {
         return {
@@ -112,17 +113,7 @@ export const withToggle = (config) => (component) => {
     };
     if (toggleOnClick) {
         component.element.addEventListener("click", handleClick);
-    }
-    const originalDestroy = component.lifecycle?.destroy;
-    if (component.lifecycle) {
-        component.lifecycle.destroy = () => {
-            if (toggleOnClick) {
-                component.element.removeEventListener("click", handleClick);
-            }
-            if (originalDestroy) {
-                originalDestroy();
-            }
-        };
+        getCleanup(component).add(() => component.element.removeEventListener("click", handleClick));
     }
     return {
         ...component,

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

@@ -8,12 +8,6 @@ const createIconButton = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     try {
         const iconButton = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withVariant(baseConfig), withSize(baseConfig), withIcon(baseConfig), withDisabled(baseConfig), withToggle(baseConfig), withRipple(baseConfig), withLifecycle(), (component) => {
-            if (baseConfig.shape && baseConfig.shape !== 'round' && component.element) {
-                const className = `${baseConfig.prefix}-${baseConfig.componentName}--${baseConfig.shape}`;
-                component.element.classList.add(className);
-            }
-            return component;
-        }, (component) => {
             if (baseConfig.width && baseConfig.width !== 'default' && component.element) {
                 const className = `${baseConfig.prefix}-${baseConfig.componentName}--${baseConfig.width}`;
                 component.element.classList.add(className);

package/dist/core/compose/features/text.js

@@ -34,6 +34,7 @@ const createText = (element, config = {}) => {
 export const withText = (config) => (component) => {
     const text = createText(component.element, {
         prefix: config.prefix,
+        beforeElement: config.beforeElement,
         componentName: config.componentName || 'component'
     });
     if (config.text) {