mtrl 0.8.0-next.45 → 0.8.0-next.47

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

@@ -42,8 +42,14 @@ const createButtonGroup = (config = {}) => {
                 else
                     toggleState.deselect();
             }
+            else if (typeof button.setSelected === 'function') {
+                button.setSelected(selected);
+            }
             else {
-                button.setSelected?.(selected);
+                if (selected)
+                    button.select?.();
+                else
+                    button.deselect?.();
             }
         };
         const expandedRatio = baseConfig.expandedRatio ?? BUTTON_GROUP_EXPANDED_RATIO;

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