material 1.0.3 → 3.0.0-next.0

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

@@ -0,0 +1,90 @@
+import { PREFIX } from "../../core/config.js";
+import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
+import { ICON_BUTTON_VARIANTS, ICON_BUTTON_SIZES, ICON_BUTTON_SHAPES, ICON_BUTTON_WIDTHS, ICON_BUTTON_TYPES, DEFAULT_RIPPLE_CONFIG, } from "./constants.js";
+export const defaultConfig = {
+    variant: ICON_BUTTON_VARIANTS.STANDARD,
+    size: ICON_BUTTON_SIZES.S,
+    shape: ICON_BUTTON_SHAPES.ROUND,
+    width: ICON_BUTTON_WIDTHS.DEFAULT,
+    disabled: false,
+    type: ICON_BUTTON_TYPES.BUTTON,
+    toggle: false,
+    selected: false,
+    ripple: true,
+    tooltip: true,
+    rippleConfig: {
+        duration: DEFAULT_RIPPLE_CONFIG.DURATION,
+    },
+};
+export const createBaseConfig = (config) => createComponentConfig(defaultConfig, config, "icon-button");
+export const getElementConfig = (config) => {
+    const attributes = {
+        type: config.type || "button",
+    };
+    if (config.ariaLabel) {
+        attributes["aria-label"] = config.ariaLabel;
+    }
+    if (config.toggle) {
+        attributes["aria-pressed"] = config.selected ? "true" : "false";
+    }
+    if (config.disabled === true) {
+        attributes.disabled = true;
+    }
+    if (config.value !== undefined) {
+        attributes.value = config.value;
+    }
+    const componentClasses = [];
+    if (config.size && config.size !== "s") {
+        componentClasses.push(`${PREFIX}-icon-button--${config.size}`);
+    }
+    if (config.shape) {
+        componentClasses.push(`${PREFIX}-icon-button--${config.shape}`);
+    }
+    if (config.width && config.width !== "default") {
+        componentClasses.push(`${PREFIX}-icon-button--${config.width}`);
+    }
+    if (config.toggle) {
+        componentClasses.push(`${PREFIX}-icon-button--toggle`);
+    }
+    if (config.toggle && config.selected) {
+        componentClasses.push(`${PREFIX}-icon-button--selected`);
+    }
+    if (config.disabled === true) {
+        componentClasses.push(`${PREFIX}-icon-button--disabled`);
+    }
+    const userClasses = config.className || config.class;
+    const mergedClasses = [
+        ...componentClasses,
+        ...(Array.isArray(userClasses)
+            ? userClasses
+            : userClasses
+                ? [userClasses]
+                : []),
+    ];
+    const enhancedConfig = {
+        ...config,
+        className: mergedClasses,
+    };
+    return createElementConfig(enhancedConfig, {
+        tag: "button",
+        attributes,
+        forwardEvents: {
+            click: (component) => !component.element.disabled,
+            focus: true,
+            blur: true,
+        },
+        interactive: true,
+    });
+};
+export const getApiConfig = (comp) => ({
+    disabled: {
+        enable: () => comp.disabled.enable(),
+        disable: () => comp.disabled.disable(),
+        isDisabled: () => comp.disabled.isDisabled(),
+    },
+    lifecycle: {
+        destroy: () => comp.lifecycle.destroy(),
+    },
+    toggleState: comp.toggleState,
+});
+export default defaultConfig;

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

@@ -0,0 +1,194 @@
+/**
+ * IconButton variants following Material Design 3 guidelines
+ *
+ * Four built-in color styles, in order of emphasis:
+ * - filled: Highest emphasis, key actions
+ * - tonal: High emphasis, secondary actions
+ * - outlined: Medium emphasis, not main focus
+ * - standard: Lowest emphasis, on colorful surfaces
+ */
+export declare const ICON_BUTTON_VARIANTS: {
+    /** Primary action button with solid background (highest emphasis) */
+    readonly FILLED: "filled";
+    /** Secondary action button with tonal background (high emphasis) */
+    readonly TONAL: "tonal";
+    /** Button with outline border and transparent background (medium emphasis) */
+    readonly OUTLINED: "outlined";
+    /** Button with no background, just icon (lowest emphasis) */
+    readonly STANDARD: "standard";
+};
+/**
+ * IconButton variant type
+ */
+export type IconButtonVariant = typeof ICON_BUTTON_VARIANTS[keyof typeof ICON_BUTTON_VARIANTS];
+/**
+ * IconButton sizes following Material Design 3 specifications
+ *
+ * | Size | Container | Icon Size |
+ * |------|-----------|-----------|
+ * | XS   | 32dp      | 20dp      |
+ * | S    | 40dp      | 24dp      |
+ * | M    | 56dp      | 24dp      |
+ * | L    | 96dp      | 32dp      |
+ * | XL   | 136dp     | 40dp      |
+ */
+export declare const ICON_BUTTON_SIZES: {
+    /** 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, 32px icon */
+    readonly L: "l";
+    /** Extra large - 136px container, 40px icon */
+    readonly XL: "xl";
+};
+/**
+ * IconButton size type
+ */
+export type IconButtonSize = typeof ICON_BUTTON_SIZES[keyof typeof ICON_BUTTON_SIZES];
+/**
+ * IconButton shapes following Material Design 3 specifications
+ *
+ * - round: Full corner radius (default)
+ * - square: Fixed corner radius per size
+ */
+export declare const ICON_BUTTON_SHAPES: {
+    /** Round shape - full corner radius (default) */
+    readonly ROUND: "round";
+    /** Square shape - fixed corner radius based on size */
+    readonly SQUARE: "square";
+};
+/**
+ * IconButton shape type
+ */
+export type IconButtonShape = typeof ICON_BUTTON_SHAPES[keyof typeof ICON_BUTTON_SHAPES];
+/**
+ * IconButton width variants following Material Design 3 specifications
+ *
+ * | Size | Narrow | Default | Wide   |
+ * |------|--------|---------|--------|
+ * | 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 */
+    readonly NARROW: "narrow";
+    /** Default width */
+    readonly DEFAULT: "default";
+    /** Wide width */
+    readonly WIDE: "wide";
+};
+/**
+ * IconButton width type
+ */
+export type IconButtonWidth = typeof ICON_BUTTON_WIDTHS[keyof typeof ICON_BUTTON_WIDTHS];
+/**
+ * Button types for IconButton
+ */
+export declare const ICON_BUTTON_TYPES: {
+    readonly BUTTON: "button";
+    readonly SUBMIT: "submit";
+    readonly RESET: "reset";
+};
+/**
+ * CSS classes used by the IconButton component
+ */
+export declare const ICON_BUTTON_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "icon-button";
+    /** Class for the icon container */
+    readonly ICON: "icon-button__icon";
+    /** Applied when button is selected (toggle state) */
+    readonly SELECTED: "icon-button--selected";
+    /** Applied when button is disabled */
+    readonly DISABLED: "icon-button--disabled";
+    /** Applied when button is pressed (for shape morph) */
+    readonly PRESSED: "icon-button--pressed";
+};
+/**
+ * Default ripple effect configuration for IconButton
+ */
+export declare const DEFAULT_RIPPLE_CONFIG: {
+    readonly DURATION: 450;
+};
+/**
+ * Corner radius values for square shape per size (in dp)
+ * Round shape uses full corner radius (50%)
+ */
+export declare const ICON_BUTTON_CORNER_RADIUS: {
+    readonly XS: {
+        readonly square: 12;
+        readonly pressed: 8;
+    };
+    readonly S: {
+        readonly square: 12;
+        readonly pressed: 8;
+    };
+    readonly M: {
+        readonly square: 16;
+        readonly pressed: 12;
+    };
+    readonly L: {
+        readonly square: 28;
+        readonly pressed: 16;
+    };
+    readonly XL: {
+        readonly square: 28;
+        readonly pressed: 16;
+    };
+};
+/**
+ * Icon sizes per button size (in dp)
+ */
+export declare const ICON_BUTTON_ICON_SIZES: {
+    readonly XS: 20;
+    readonly S: 24;
+    readonly M: 24;
+    readonly L: 32;
+    readonly XL: 40;
+};
+/**
+ * Container sizes per button size (in dp)
+ */
+export declare const ICON_BUTTON_CONTAINER_SIZES: {
+    readonly XS: 32;
+    readonly S: 40;
+    readonly M: 56;
+    readonly L: 96;
+    readonly XL: 136;
+};
+/**
+ * Width values per size and width variant (in dp)
+ */
+export declare const ICON_BUTTON_WIDTH_VALUES: {
+    readonly XS: {
+        readonly narrow: 28;
+        readonly default: 32;
+        readonly wide: 40;
+    };
+    readonly S: {
+        readonly narrow: 32;
+        readonly default: 40;
+        readonly wide: 52;
+    };
+    readonly M: {
+        readonly narrow: 48;
+        readonly default: 56;
+        readonly wide: 72;
+    };
+    readonly L: {
+        readonly narrow: 64;
+        readonly default: 96;
+        readonly wide: 128;
+    };
+    readonly XL: {
+        readonly narrow: 104;
+        readonly default: 136;
+        readonly wide: 184;
+    };
+};

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

@@ -0,0 +1,65 @@
+export const ICON_BUTTON_VARIANTS = {
+    FILLED: 'filled',
+    TONAL: 'tonal',
+    OUTLINED: 'outlined',
+    STANDARD: 'standard'
+};
+export const ICON_BUTTON_SIZES = {
+    XS: 'xs',
+    S: 's',
+    M: 'm',
+    L: 'l',
+    XL: 'xl'
+};
+export const ICON_BUTTON_SHAPES = {
+    ROUND: 'round',
+    SQUARE: 'square'
+};
+export const ICON_BUTTON_WIDTHS = {
+    NARROW: 'narrow',
+    DEFAULT: 'default',
+    WIDE: 'wide'
+};
+export const ICON_BUTTON_TYPES = {
+    BUTTON: 'button',
+    SUBMIT: 'submit',
+    RESET: 'reset'
+};
+export const ICON_BUTTON_CLASSES = {
+    ROOT: 'icon-button',
+    ICON: 'icon-button__icon',
+    SELECTED: 'icon-button--selected',
+    DISABLED: 'icon-button--disabled',
+    PRESSED: 'icon-button--pressed'
+};
+export const DEFAULT_RIPPLE_CONFIG = {
+    DURATION: 450
+};
+export const ICON_BUTTON_CORNER_RADIUS = {
+    XS: { square: 12, pressed: 8 },
+    S: { square: 12, pressed: 8 },
+    M: { square: 16, pressed: 12 },
+    L: { square: 28, pressed: 16 },
+    XL: { square: 28, pressed: 16 }
+};
+export const ICON_BUTTON_ICON_SIZES = {
+    XS: 20,
+    S: 24,
+    M: 24,
+    L: 32,
+    XL: 40
+};
+export const ICON_BUTTON_CONTAINER_SIZES = {
+    XS: 32,
+    S: 40,
+    M: 56,
+    L: 96,
+    XL: 136
+};
+export const ICON_BUTTON_WIDTH_VALUES = {
+    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.d.ts

@@ -0,0 +1,133 @@
+import { ElementComponent } from "../../../core/compose/component.js";
+/**
+ * Configuration for toggle feature
+ */
+export interface ToggleConfig {
+    /**
+     * Whether toggle mode is enabled
+     */
+    toggle?: boolean;
+    /**
+     * Whether clicking toggles the state automatically
+     * Set to false to control selection programmatically only
+     * @default true
+     */
+    toggleOnClick?: boolean;
+    /**
+     * Initial selected state
+     */
+    selected?: boolean;
+    /**
+     * Icon HTML for unselected state
+     */
+    icon?: string;
+    /**
+     * Icon HTML for selected state
+     */
+    selectedIcon?: string;
+    /**
+     * Component prefix for class names
+     */
+    prefix?: string;
+    /**
+     * Component name for class generation
+     */
+    componentName?: string;
+}
+/**
+ * Toggle state manager interface
+ */
+export interface ToggleManager {
+    /**
+     * Selects the component (toggle on)
+     * @returns ToggleManager instance for chaining
+     */
+    select: () => ToggleManager;
+    /**
+     * Deselects the component (toggle off)
+     * @returns ToggleManager instance for chaining
+     */
+    deselect: () => ToggleManager;
+    /**
+     * Toggles the selection state
+     * @returns ToggleManager instance for chaining
+     */
+    toggle: () => ToggleManager;
+    /**
+     * Checks if the component is currently selected
+     * @returns true if selected
+     */
+    isSelected: () => boolean;
+    /**
+     * Checks if toggle mode is enabled
+     * @returns true if toggle mode is enabled
+     */
+    isToggle: () => boolean;
+    /**
+     * Sets the icon for unselected state
+     * @param html - Icon HTML content
+     * @returns ToggleManager instance for chaining
+     */
+    setIcon: (html: string) => ToggleManager;
+    /**
+     * Sets the icon for selected state
+     * @param html - Icon HTML content
+     * @returns ToggleManager instance for chaining
+     */
+    setSelectedIcon: (html: string) => ToggleManager;
+    /**
+     * Gets the selected state icon
+     * @returns Selected icon HTML or empty string
+     */
+    getSelectedIcon: () => string;
+}
+/**
+ * Component with toggle capabilities
+ */
+export interface ToggleComponent {
+    toggleState: ToggleManager;
+}
+/**
+ * Component with icon capabilities (for updating icon on toggle)
+ */
+interface ComponentWithIcon extends ElementComponent {
+    emit?: (event: string, data?: unknown) => unknown;
+    icon?: {
+        setIcon: (html: string) => unknown;
+        getIcon: () => string;
+        getElement: () => HTMLElement | null;
+    };
+    lifecycle?: {
+        mount: () => void;
+        destroy: () => void;
+    };
+}
+/**
+ * Adds toggle (selection) state management to a component
+ *
+ * This feature enables icon buttons to function as toggle buttons,
+ * switching between selected and unselected states. Following MD3 guidelines:
+ * - Unselected state uses outlined icon style
+ * - Selected state uses filled icon style
+ * - Shape can morph on selection (handled by CSS)
+ *
+ * @param config - Configuration object
+ * @returns Function that enhances a component with toggle capabilities
+ *
+ * @example
+ * ```typescript
+ * const iconButton = pipe(
+ *   createBase,
+ *   withElement(config),
+ *   withIcon(config),
+ *   withToggle({
+ *     toggle: true,
+ *     selected: false,
+ *     icon: '<svg>...</svg>', // outlined heart
+ *     selectedIcon: '<svg>...</svg>' // filled heart
+ *   })
+ * )(config);
+ * ```
+ */
+export declare const withToggle: <T extends ToggleConfig & object>(config: T) => <C extends ComponentWithIcon>(component: C) => C & ToggleComponent;
+export {};

package/dist/components/icon-button/features/toggle.js

@@ -0,0 +1,119 @@
+import { getCleanup } from "../../../core/compose/cleanup.js";
+export const withToggle = (config) => (component) => {
+    if (!config.toggle) {
+        return {
+            ...component,
+            toggleState: {
+                select: function () {
+                    return this;
+                },
+                deselect: function () {
+                    return this;
+                },
+                toggle: function () {
+                    return this;
+                },
+                isSelected: () => false,
+                isToggle: () => false,
+                setIcon: function () {
+                    return this;
+                },
+                setSelectedIcon: function () {
+                    return this;
+                },
+                getSelectedIcon: () => "",
+            },
+        };
+    }
+    const prefix = config.prefix || "mtrl";
+    const componentName = config.componentName || "icon-button";
+    const selectedClass = `${prefix}-${componentName}--selected`;
+    let isSelected = config.selected || false;
+    let unselectedIcon = config.icon || "";
+    let selectedIcon = config.selectedIcon || "";
+    const updateIcon = () => {
+        if (!component.icon)
+            return;
+        const iconToShow = isSelected && selectedIcon ? selectedIcon : unselectedIcon;
+        if (iconToShow) {
+            component.icon.setIcon(iconToShow);
+        }
+    };
+    const updateAriaPressed = () => {
+        component.element.setAttribute("aria-pressed", String(isSelected));
+    };
+    const toggleState = {
+        select() {
+            if (!isSelected) {
+                isSelected = true;
+                component.element.classList.add(selectedClass);
+                updateIcon();
+                updateAriaPressed();
+            }
+            return this;
+        },
+        deselect() {
+            if (isSelected) {
+                isSelected = false;
+                component.element.classList.remove(selectedClass);
+                updateIcon();
+                updateAriaPressed();
+            }
+            return this;
+        },
+        toggle() {
+            if (isSelected) {
+                this.deselect();
+            }
+            else {
+                this.select();
+            }
+            return this;
+        },
+        isSelected() {
+            return isSelected;
+        },
+        isToggle() {
+            return true;
+        },
+        setIcon(html) {
+            unselectedIcon = html;
+            if (!isSelected) {
+                updateIcon();
+            }
+            return this;
+        },
+        setSelectedIcon(html) {
+            selectedIcon = html;
+            if (isSelected) {
+                updateIcon();
+            }
+            return this;
+        },
+        getSelectedIcon() {
+            return selectedIcon;
+        },
+    };
+    if (isSelected) {
+        component.element.classList.add(selectedClass);
+        updateAriaPressed();
+        updateIcon();
+    }
+    else {
+        updateAriaPressed();
+    }
+    const toggleOnClick = config.toggleOnClick !== false;
+    const handleClick = () => {
+        toggleState.toggle();
+        const value = component.element.value;
+        component.emit?.("change", { selected: isSelected, value });
+    };
+    if (toggleOnClick) {
+        component.element.addEventListener("click", handleClick);
+        getCleanup(component).add(() => component.element.removeEventListener("click", handleClick));
+    }
+    return {
+        ...component,
+        toggleState,
+    };
+};

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

@@ -0,0 +1,86 @@
+import { IconButtonConfig, IconButtonComponent } from "./types.js";
+/**
+ * Creates a new IconButton component with the specified configuration.
+ *
+ * IconButtons display actions in a compact form using icons. They must use
+ * a system icon with a clear meaning. IconButtons support both default
+ * (single action) and toggle (binary state) modes.
+ *
+ * The IconButton component is created using a functional composition pattern,
+ * applying various features through the pipe function. This approach allows
+ * for flexible and modular component construction.
+ *
+ * @param config - Configuration options for the icon button
+ *   This can include icon content, variant styling, size, shape, width,
+ *   toggle behavior, and other properties. See {@link IconButtonConfig}
+ *   for available options.
+ *
+ * @returns A fully configured IconButton component instance with
+ *   all requested features applied. The returned component has methods for
+ *   manipulation, event handling, and lifecycle management.
+ *
+ * @throws Error if IconButton creation fails for any reason
+ *
+ * @example
+ * ```ts
+ * // Create a standard icon button
+ * const menuButton = createIconButton({
+ *   icon: '<svg>...</svg>',
+ *   ariaLabel: 'Open menu'
+ * });
+ *
+ * // Create a filled icon button
+ * const addButton = createIconButton({
+ *   icon: '<svg>...</svg>',
+ *   variant: 'filled',
+ *   ariaLabel: 'Add item'
+ * });
+ *
+ * // Create a toggle icon button (favorite)
+ * const favoriteButton = createIconButton({
+ *   icon: '<svg>...</svg>', // outlined heart
+ *   selectedIcon: '<svg>...</svg>', // filled heart
+ *   toggle: true,
+ *   variant: 'standard',
+ *   ariaLabel: 'Add to favorites'
+ * });
+ *
+ * // Listen for toggle events
+ * favoriteButton.on('change', ({ selected }) => {
+ *   console.log('Selected:', selected);
+ * });
+ *
+ * // Create different sizes
+ * const smallButton = createIconButton({
+ *   icon: '<svg>...</svg>',
+ *   size: 'xs',
+ *   ariaLabel: 'Small action'
+ * });
+ *
+ * const largeButton = createIconButton({
+ *   icon: '<svg>...</svg>',
+ *   size: 'xl',
+ *   variant: 'tonal',
+ *   ariaLabel: 'Large action'
+ * });
+ *
+ * // Create square shaped button
+ * const squareButton = createIconButton({
+ *   icon: '<svg>...</svg>',
+ *   shape: 'square',
+ *   variant: 'outlined',
+ *   ariaLabel: 'Square action'
+ * });
+ *
+ * // Create with different widths
+ * const wideButton = createIconButton({
+ *   icon: '<svg>...</svg>',
+ *   width: 'wide',
+ *   ariaLabel: 'Wide action'
+ * });
+ * ```
+ *
+ * @category Components
+ */
+declare const createIconButton: (config: IconButtonConfig) => IconButtonComponent;
+export default createIconButton;