mtrl 0.8.0-next.47 → 0.8.0-next.49

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/index.d.ts

@@ -36,7 +36,13 @@ export { default as createSplitButton } from "./split-button/index.js";
 export { default as createRadios } from "./radios/index.js";
 export { default as createSearch } from "./search/index.js";
 export { default as createSelect } from "./select/index.js";
+/**
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
+ */
 export { default as createSegmentedButton } from "./segmented-button/index.js";
+/**
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
+ */
 export { createSegment } from "./segmented-button/segment.js";
 /** @deprecated Since 0.8.0. Use createBottomSheet or createSideSheet. */
 export { default as createSheet } from "./sheet/index.js";

package/dist/components/segmented-button/config.d.ts

@@ -33,13 +33,6 @@ export declare const getContainerConfig: (config: SegmentedButtonConfig) => {
     className: string[];
     interactive: boolean;
 };
-/**
- * Gets density-specific sizing and spacing values
- * @param {string} density - The density level
- * @returns {Object} CSS variables with sizing values
- * @internal
- */
-export declare const getDensityStyles: (density: string) => Record<string, string>;
 /**
  * Generates configuration for a segment element
  * @param {Object} segment - Segment configuration

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

@@ -28,29 +28,6 @@ export const getContainerConfig = (config) => {
         interactive: true,
     };
 };
-export const getDensityStyles = (density) => {
-    switch (density) {
-        case Density.COMPACT:
-            return {
-                "--segment-padding": "4px 8px",
-                "--segment-height": "28px",
-                "--segment-font-size": "0.8125rem",
-            };
-        case Density.COMFORTABLE:
-            return {
-                "--segment-padding": "6px 12px",
-                "--segment-height": "32px",
-                "--segment-font-size": "0.875rem",
-            };
-        case Density.DEFAULT:
-        default:
-            return {
-                "--segment-padding": "8px 16px",
-                "--segment-height": "36px",
-                "--segment-font-size": "0.875rem",
-            };
-    }
-};
 export const getSegmentConfig = (segment, prefix, groupDisabled = false) => {
     const isDisabled = groupDisabled || segment.disabled;
     return {

package/dist/components/segmented-button/segment.d.ts

@@ -7,6 +7,7 @@ import { SegmentConfig, Segment } from "./types.js";
  * - Icon + text segments: Replace icon with checkmark when selected
  * - Icon-only segments: Do NOT show checkmark (icon remains unchanged)
  *
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
  * @param {SegmentConfig} config - Segment configuration
  * @param {HTMLElement} container - Container element
  * @param {string} prefix - Component prefix

package/dist/components/segmented-button/segmented-button.d.ts

@@ -6,6 +6,17 @@ import { SegmentedButtonConfig, SegmentedButtonComponent } from "./types.js";
  * be used for selection and filtering. It supports single or multiple selection modes,
  * configurable density, disabled states, and event handling.
  *
+ * Migration to {@link createButtonGroup}:
+ * - Use `kind: "connected"`, rename `segments` to `buttons` and `mode` to `selection`.
+ * - For `selection: "single"`, set `required: true` and explicitly mark the first
+ *   enabled button `selected: true` to preserve the old initial selection.
+ * - Replace `getValue()` with `getSelected()` and read change events from `values`.
+ * - Checkmarks and their animation are not automatic; supply `selectedIcon` as needed.
+ * - Density changes height only. Connected groups have 2dp gaps and separate
+ *   selected pills instead of one outlined container.
+ *
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
+ *
  * @param {SegmentedButtonConfig} config - Segmented Button configuration
  * @returns {SegmentedButtonComponent} Segmented Button component instance
  *

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

@@ -3,19 +3,14 @@ import { createBase, withElement } from "../../core/compose/component.js";
 import { withEvents, withLifecycle } from "../../core/compose/features/index.js";
 import { createEmitter } from "../../core/state/emitter.js";
 import { SelectionMode, Density } from "./types.js";
-import { createBaseConfig, getContainerConfig, getDensityStyles } from "./config.js";
+import { createBaseConfig, getContainerConfig } from "./config.js";
 import { createSegment } from "./segment.js";
 const createSegmentedButton = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     const mode = baseConfig.mode || SelectionMode.SINGLE;
-    const density = baseConfig.density || Density.DEFAULT;
     const emitter = createEmitter();
     try {
         const component = pipe(createBase, withEvents(), withElement(getContainerConfig(baseConfig)), withLifecycle())(baseConfig);
-        const densityStyles = getDensityStyles(density);
-        Object.entries(densityStyles).forEach(([prop, value]) => {
-            component.element.style.setProperty(prop, value);
-        });
         const segments = [];
         if (baseConfig.segments && baseConfig.segments.length) {
             baseConfig.segments.forEach(segmentConfig => {
@@ -74,10 +69,6 @@ const createSegmentedButton = (config = {}) => {
                 component.element.classList.add(`${baseConfig.prefix}-segmented-button--${newDensity}`);
             }
             component.element.setAttribute('data-density', newDensity);
-            const densityStyles = getDensityStyles(newDensity);
-            Object.entries(densityStyles).forEach(([prop, value]) => {
-                component.element.style.setProperty(prop, value);
-            });
         };
         const segmentedButton = {
             element: component.element,

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

@@ -1,6 +1,7 @@
 /**
  * Segmented button selection mode
  * @category Components
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
  */
 export declare enum SelectionMode {
     /** Only one segment can be selected at a time */
@@ -12,6 +13,7 @@ export declare enum SelectionMode {
  * Density options for segmented button
  * Controls the overall sizing and spacing of the component.
  * @category Components
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
  */
 export declare enum Density {
     /** Default size with standard spacing */
@@ -29,22 +31,17 @@ export type SegmentedButtonEventType = 'change';
  * Event data for segmented button events
  */
 export interface SegmentedButtonEvent {
-    /** The segmented button component that triggered the event */
-    segmentedButton: SegmentedButtonComponent;
-    /** The selected segments */
+    /** The selected segments after the change */
     selected: Segment[];
-    /** Values of the selected segments */
-    values: string[];
-    /** Original DOM event if available */
-    originalEvent: Event | null;
-    /** Function to prevent default behavior */
-    preventDefault: () => void;
-    /** Whether default behavior was prevented */
-    defaultPrevented: boolean;
+    /** Values of the selected segments after the change */
+    value: string[];
+    /** Values of the selected segments before the change */
+    oldValue: string[];
 }
 /**
  * Configuration for a single segment within a segmented button
  * @category Components
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
  */
 export interface SegmentConfig {
     /**
@@ -83,6 +80,7 @@ export interface SegmentConfig {
 /**
  * Configuration interface for the Segmented Button component
  * @category Components
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
  */
 export interface SegmentedButtonConfig {
     /**
@@ -143,6 +141,7 @@ export interface SegmentedButtonConfig {
 /**
  * Interface for a segment within a segmented button
  * @category Components
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
  */
 export interface Segment {
     /** The segment's DOM element */
@@ -175,6 +174,7 @@ export interface Segment {
 /**
  * Segmented Button component interface
  * @category Components
+ * @deprecated Since 0.8.0, M3 Expressive replaces segmented buttons with connected button groups. Use {@link createButtonGroup} with `kind: "connected"`.
  */
 export interface SegmentedButtonComponent {
     /** The component's container DOM element */

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