mtrl 0.8.0-next.48 → 0.8.0-next.49

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 */