mtrl 0.8.0-next.47 → 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/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) {