mtrl 0.8.0-next.49 → 0.8.0-next.50

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

@@ -5,7 +5,7 @@ import { createEmitter } from "../../core/state/emitter.js";
 import createIconButton from "../icon-button/icon-button.js";
 import createButton from "../button/index.js";
 import { createBaseConfig, getContainerConfig, getSizeStyles, getButtonConfig } from "./config.js";
-import { BUTTON_GROUP_DEFAULTS, BUTTON_GROUP_DENSITY, BUTTON_GROUP_EXPANDED_RATIO } from "./constants.js";
+import { BUTTON_GROUP_DEFAULTS, BUTTON_GROUP_DENSITY, BUTTON_GROUP_EXPANDED_RATIO, BUTTON_GROUP_COMPRESSION_LIMIT } from "./constants.js";
 const createButtonGroup = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     const emitter = createEmitter();
@@ -19,7 +19,7 @@ const createButtonGroup = (config = {}) => {
     try {
         const component = pipe(createBase, withEvents(), withElement(getContainerConfig(baseConfig)), withLifecycle())(baseConfig);
         const applySizeStyles = (density) => {
-            Object.entries(getSizeStyles(baseConfig.size, kind, density)).forEach(([prop, value]) => {
+            Object.entries(getSizeStyles(baseConfig.prefix, baseConfig.size, kind, density)).forEach(([prop, value]) => {
                 component.element.style.setProperty(prop, value);
             });
         };
@@ -76,11 +76,13 @@ const createButtonGroup = (config = {}) => {
             const share = expandedRatio * widths[index] / (middle ? 2 : 1);
             let growth = 0;
             const compress = (i, side) => {
-                const limit = Math.min(share, padding(i, side), widths[i]);
+                const limit = Math.min(share, BUTTON_GROUP_COMPRESSION_LIMIT, widths[i]);
                 if (limit <= 0)
                     return;
                 buttons[i].element.style.width = `${widths[i] - limit}px`;
-                buttons[i].element.style[side] = `${padding(i, side) - limit}px`;
+                const facing = padding(i, side);
+                if (facing > 0)
+                    buttons[i].element.style[side] = `${Math.max(0, facing - limit)}px`;
                 growth += limit;
             };
             if (previous >= 0)

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

@@ -40,7 +40,7 @@ export declare const getContainerConfig: (config: ButtonGroupConfig) => {
  * (Material 3 button group specs). Density lowers the container height by
  * 4dp per step; the buttons follow the container height.
  */
-export declare const getSizeStyles: (size: ButtonGroupConfig["size"], kind: ButtonGroupConfig["kind"], density?: ButtonGroupDensity) => Record<string, string>;
+export declare const getSizeStyles: (prefix: string, size: ButtonGroupConfig["size"], kind: ButtonGroupConfig["kind"], density?: ButtonGroupDensity) => Record<string, string>;
 /**
  * Generates configuration for a button element within the group
  * @param {Object} buttonConfig - Button configuration

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

@@ -62,17 +62,17 @@ const DENSITY_STEPS = {
     [BUTTON_GROUP_DENSITY.COMFORTABLE]: 1,
     [BUTTON_GROUP_DENSITY.COMPACT]: 2
 };
-export const getSizeStyles = (size, kind, density = BUTTON_GROUP_DENSITY.DEFAULT) => {
+export const getSizeStyles = (prefix, size, kind, density = BUTTON_GROUP_DENSITY.DEFAULT) => {
     const tokens = BUTTON_GROUP_SIZE_TOKENS[size || BUTTON_GROUP_DEFAULTS.SIZE] || BUTTON_GROUP_SIZE_TOKENS.s;
     const gap = kind === 'connected' ? BUTTON_GROUP_CONNECTED_GAP : tokens.standardGap;
     const height = tokens.height - BUTTON_GROUP_DENSITY_STEP * (DENSITY_STEPS[density] ?? 0);
     return {
-        '--button-group-height': `${height}px`,
-        '--button-group-icon': `${tokens.icon}px`,
-        '--button-group-gap': `${gap}px`,
-        '--button-group-inner-corner': `${tokens.connectedCorner}px`,
-        '--button-group-pressed-corner': `${BUTTON_GROUP_CONNECTED_PRESSED_CORNER}px`,
-        '--button-group-radius': `${height / 2}px`
+        [`--${prefix}-button-group-height`]: `${height}px`,
+        [`--${prefix}-button-group-icon`]: `${tokens.icon}px`,
+        [`--${prefix}-button-group-gap`]: `${gap}px`,
+        [`--${prefix}-button-group-inner-corner`]: `${tokens.connectedCorner}px`,
+        [`--${prefix}-button-group-pressed-corner`]: `${BUTTON_GROUP_CONNECTED_PRESSED_CORNER}px`,
+        [`--${prefix}-button-group-radius`]: `${height / 2}px`
     };
 };
 export const getButtonConfig = (buttonConfig, index, total, groupConfig) => {

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

@@ -119,6 +119,14 @@ export declare const BUTTON_GROUP_CONNECTED_MIN_WIDTH = 48;
  * its neighbours give up the difference (ButtonGroupDefaults.ExpandedRatio)
  */
 export declare const BUTTON_GROUP_EXPANDED_RATIO = 0.15;
+/**
+ * The most a neighbour gives up when a button in a standard group is pressed:
+ * the trailing content padding of a button (Compose ButtonGroup compression
+ * limit, ButtonDefaults.ContentPadding end, BaselineButtonTokens.TrailingSpace).
+ * It applies to every neighbour, so an icon button with no padding still makes
+ * room for the pressed button.
+ */
+export declare const BUTTON_GROUP_COMPRESSION_LIMIT = 24;
 /** Density reduces the container height by 4dp per step */
 export declare const BUTTON_GROUP_DENSITY_STEP = 4;
 /**

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

@@ -51,6 +51,7 @@ export const BUTTON_GROUP_CONNECTED_GAP = 2;
 export const BUTTON_GROUP_CONNECTED_PRESSED_CORNER = 4;
 export const BUTTON_GROUP_CONNECTED_MIN_WIDTH = 48;
 export const BUTTON_GROUP_EXPANDED_RATIO = 0.15;
+export const BUTTON_GROUP_COMPRESSION_LIMIT = 24;
 export const BUTTON_GROUP_DENSITY_STEP = 4;
 export const BUTTON_GROUP_LABELS = {
     ALWAYS: 'always',

package/dist/components/card/config.js

@@ -117,12 +117,12 @@ export const withInteractiveBehavior = (comp) => {
     if (isInteractive) {
         comp.element.addEventListener("mouseenter", () => {
             if (config.variant === CARD_VARIANTS.ELEVATED) {
-                comp.element.style.setProperty("--card-elevation", String(CARD_ELEVATION_LEVELS.LEVEL2));
+                comp.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL2));
             }
         });
         comp.element.addEventListener("mouseleave", () => {
             if (config.variant === CARD_VARIANTS.ELEVATED) {
-                comp.element.style.setProperty("--card-elevation", String(CARD_ELEVATION_LEVELS.LEVEL1));
+                comp.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL1));
             }
         });
         comp.element.addEventListener("keydown", (e) => {
@@ -141,7 +141,7 @@ export const withInteractiveBehavior = (comp) => {
     if (config.draggable) {
         comp.element.setAttribute("draggable", "true");
         comp.element.addEventListener("dragstart", (e) => {
-            comp.element.style.setProperty("--card-elevation", String(CARD_ELEVATION_LEVELS.LEVEL4));
+            comp.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL4));
             comp.element.classList.add(`${comp.getClass("card")}--dragging`);
             comp.emit?.("dragstart", { event: e });
             if (e.dataTransfer) {
@@ -151,7 +151,7 @@ export const withInteractiveBehavior = (comp) => {
             }
         });
         comp.element.addEventListener("dragend", (e) => {
-            comp.element.style.setProperty("--card-elevation", String(CARD_ELEVATION_LEVELS.LEVEL1));
+            comp.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL1));
             comp.element.classList.remove(`${comp.getClass("card")}--dragging`);
             comp.emit?.("dragend", { event: e });
         });

package/dist/components/card/features.js

@@ -47,10 +47,10 @@ export const withLoading = (config = {}) => (component) => {
 export const withElevation = (component) => {
     const config = component.config;
     if (config.variant === "elevated") {
-        component.element.style.setProperty("--card-elevation", String(CARD_ELEVATION_LEVELS.LEVEL1));
+        component.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL1));
     }
     else {
-        component.element.style.setProperty("--card-elevation", String(CARD_ELEVATION_LEVELS.LEVEL0));
+        component.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL0));
     }
     return component;
 };

package/dist/components/carousel/features/scroll.js

@@ -121,7 +121,7 @@ export const withScroll = (config) => (component) => {
             el.style[vertical ? "height" : "width"] = `${strategy.itemSize}px`;
             el.style[vertical ? "width" : "height"] = "";
         });
-        element.style.setProperty("--mtrl-carousel-corner", `${cornerRadius}px`);
+        element.style.setProperty(`--${config.prefix}-carousel-corner`, `${cornerRadius}px`);
     };
     const layout = () => {
         if (!strategy)
@@ -154,7 +154,7 @@ export const withScroll = (config) => (component) => {
             el.style.clipPath = vertical
                 ? `inset(${inset}px 0 round ${cornerRadius}px)`
                 : `inset(0 ${inset}px round ${cornerRadius}px)`;
-            el.style.setProperty("--mtrl-carousel-fade", fade.toFixed(3));
+            el.style.setProperty(`--${config.prefix}-carousel-fade`, fade.toFixed(3));
         }
         if (pending !== null) {
             if (Math.abs(scrollPosition() - (snapPositions[pending] ?? 0)) < 1)

package/dist/components/divider/divider.d.ts

@@ -31,7 +31,7 @@ import { DividerComponent } from "./types.js";
  * });
  *
  * // Later, change the divider's appearance
- * divider.setColor('var(--md-sys-color-outline)');
+ * divider.setColor('var(--mtrl-sys-color-outline)');
  * divider.setThickness(1);
  * divider.setVariant('inset');
  * ```

package/dist/components/drawer/drawer.js

@@ -17,7 +17,7 @@ const createDrawer = (config = {}) => {
                     ? `${width}px`
                     : width
                 : `${DRAWER_DEFAULTS.WIDTH}px`;
-            component.element.style.setProperty("--drawer-width", widthValue);
+            component.element.style.setProperty(`--${baseConfig.prefix}-drawer-width`, widthValue);
             if (component.headlineElement) {
                 sheetEl.appendChild(component.headlineElement);
             }

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

@@ -28,7 +28,8 @@ export interface SliderConfig extends BaseComponentConfig {
     disabled?: boolean;
     /** Color variant of the slider *
      * A stylesheet can override the drawn colours per slider with the custom
-     * properties --mtrl-slider-color and --mtrl-slider-on-color.
+     * properties `--<prefix>-slider-color` and `--<prefix>-slider-on-color`,
+     * where `<prefix>` is the configured component prefix (mtrl by default).
      */
     color?: SliderColor;
     /** Size variant of the slider */