mtrl 0.7.1 → 0.8.0-next.4

package/dist/components/button/api.d.ts

@@ -37,6 +37,10 @@ interface ComponentWithElements {
     on?: (event: string, handler: Function) => ComponentWithElements;
     off?: (event: string, handler: Function) => ComponentWithElements;
     addClass?: (...classes: string[]) => ComponentWithElements;
+    toggle?: {
+        setSelected: (selected: boolean) => void;
+        isSelected: () => boolean;
+    };
     progress?: ProgressComponent;
     showProgress?: () => Promise<ComponentWithElements>;
     showProgressSync?: () => ComponentWithElements;

package/dist/components/button/features/toggle.d.ts

@@ -0,0 +1,42 @@
+import { ButtonConfig } from "../types";
+/**
+ * Toggle state manager
+ * @category Components
+ */
+export interface ToggleManager {
+    /** Sets the selected state */
+    setSelected: (selected: boolean) => void;
+    /** Whether the button is selected */
+    isSelected: () => boolean;
+}
+/**
+ * Component with the elements the toggle feature needs
+ * @internal
+ */
+interface ToggleableComponent {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    emit?: (event: string, data?: unknown) => unknown;
+}
+/**
+ * Component enhanced with toggle capabilities
+ * @category Components
+ */
+export interface ToggleComponent {
+    toggle: ToggleManager;
+}
+/**
+ * Turns a button into an M3 toggle button: a click flips the selected
+ * state, the element carries `aria-pressed`, and the `--toggle` and
+ * `--selected` classes drive the selected colours and the shape swap.
+ *
+ * Emits a `change` event with `{ selected }` when the user toggles it.
+ * With `toggleOnClick: false` the click does nothing and a container
+ * (button group) drives the state through `setSelected`.
+ *
+ * @param config - Button configuration (`toggle`, `selected`, `toggleOnClick`)
+ * @returns Component enhancer
+ * @category Components
+ */
+export declare const withToggle: (config: ButtonConfig) => <C extends ToggleableComponent>(component: C) => C & Partial<ToggleComponent>;
+export {};

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

@@ -106,6 +106,25 @@ export interface ButtonConfig extends BaseComponentConfig {
      * @default false
      */
     showProgress?: boolean;
+    /**
+     * Makes the button a toggle button: a click flips its selected state,
+     * the element carries aria-pressed, and the selected state uses the M3
+     * toggle colours and swaps the resting shape (round to square, square
+     * to round). Text buttons have no toggle style.
+     * @default false
+     */
+    toggle?: boolean;
+    /**
+     * Initial selected state of a toggle button
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether a click flips the selected state of a toggle button. Set to
+     * false when a container (button group) owns the selection.
+     * @default true
+     */
+    toggleOnClick?: boolean;
 }
 /**
  * Icon API interface for managing button icons
@@ -276,6 +295,17 @@ export interface ButtonComponent {
      * @returns The button component for chaining
      */
     setActive: (active: boolean) => ButtonComponent;
+    /**
+     * Sets the selected state of a toggle button (no-op unless `toggle` is set)
+     * @param selected - Whether the button is selected
+     * @returns The button component for chaining
+     */
+    setSelected: (selected: boolean) => ButtonComponent;
+    /**
+     * Whether a toggle button is selected
+     * @returns true when selected, false otherwise or when not a toggle button
+     */
+    isSelected: () => boolean;
     /**
      * Adds an event listener to the button
      * @param event - Event name ('click', 'focus', etc.)

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

@@ -7,11 +7,13 @@ import { ButtonGroupConfig, ButtonGroupComponent } from './types';
  * related actions where each button triggers an independent action.
  *
  * Per Material Design 3 specifications:
- * - Buttons are visually connected with shared borders
- * - Only outer corners are rounded
- * - All buttons share the same variant for visual consistency
+ * - Standard groups space their buttons (18/12/8/8/8dp by size) and a
+ *   pressed button briefly widens while its neighbours narrow
+ * - Connected groups space their buttons 2dp apart with square inner
+ *   corners and round outer corners; a selected button becomes a pill
+ * - All buttons share the same variant, size and shape
  * - Supports horizontal and vertical orientations
- * - Supports density scaling
+ * - Supports density scaling (4dp per step)
  *
  * @param {ButtonGroupConfig} config - Button Group configuration
  * @returns {ButtonGroupComponent} Button Group component instance

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

@@ -1,4 +1,4 @@
-import { ButtonGroupConfig, ButtonGroupVariant, ButtonGroupOrientation, ButtonGroupDensity } from './types';
+import { ButtonGroupConfig, ButtonGroupVariant, ButtonGroupDensity } from './types';
 /**
  * Default configuration values for button groups
  * @internal
@@ -24,19 +24,23 @@ export declare const getContainerConfig: (config: ButtonGroupConfig) => {
         role: string;
         'aria-label': string;
         'data-variant': ButtonGroupVariant;
-        'data-orientation': ButtonGroupOrientation;
+        'data-orientation': import("./types").ButtonGroupOrientation;
         'data-density': ButtonGroupDensity;
+        'data-kind': import("./types").ButtonGroupKind;
+        'data-selection': import("./types").ButtonGroupSelection;
+        'data-shape': import("./types").ButtonGroupShape;
+        'data-size': import("./types").ButtonGroupSize;
+        'data-labels': import("./types").ButtonGroupLabels;
     };
     className: string[];
     interactive: boolean;
 };
 /**
- * Gets density-specific sizing values per MD3 specifications
- * @param {ButtonGroupDensity} density - The density level
- * @returns {Object} CSS variables with sizing values
- * @internal
+ * Size, kind and density tokens as custom properties on the container
+ * (Material 3 button group specs). Density lowers the container height by
+ * 4dp per step; the buttons follow the container height.
  */
-export declare const getDensityStyles: (density: ButtonGroupDensity) => Record<string, string>;
+export declare const getSizeStyles: (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
@@ -48,6 +52,8 @@ export declare const getDensityStyles: (density: ButtonGroupDensity) => Record<s
  */
 export declare const getButtonConfig: (buttonConfig: ButtonGroupConfig["buttons"][number], index: number, total: number, groupConfig: ButtonGroupConfig) => {
     variant: ButtonGroupVariant;
+    size: import("./types").ButtonGroupSize;
+    shape: import("./types").ButtonGroupShape;
     disabled: boolean;
     ripple: boolean;
     rippleConfig: {
@@ -61,6 +67,8 @@ export declare const getButtonConfig: (buttonConfig: ButtonGroupConfig["buttons"
     icon?: string;
     ariaLabel?: string;
     value?: string;
+    selectedIcon?: string;
+    selected?: boolean;
 };
 /**
  * Maps variant name to button variant

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

@@ -45,11 +45,96 @@ export declare const BUTTON_GROUP_EVENTS: {
     readonly FOCUS: "focus";
     /** Fired when a button loses focus */
     readonly BLUR: "blur";
+    /** Fired when the selection changes (selection groups) */
+    readonly CHANGE: "change";
 };
+/** Material 3 button group kinds */
+export declare const BUTTON_GROUP_KINDS: {
+    readonly STANDARD: "standard";
+    readonly CONNECTED: "connected";
+};
+/** Selection behaviour of the group */
+export declare const BUTTON_GROUP_SELECTION: {
+    readonly NONE: "none";
+    readonly SINGLE: "single";
+    readonly MULTI: "multi";
+};
+export declare const BUTTON_GROUP_SHAPES: {
+    readonly ROUND: "round";
+    readonly SQUARE: "square";
+};
+export declare const BUTTON_GROUP_SIZES: {
+    readonly XS: "xs";
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+    readonly XL: "xl";
+};
+/**
+ * Material 3 button group tokens per size (dp): container height, button
+ * icon size, standard between-space, connected inner corner
+ * (m3.material.io button group specs; ButtonGroupSmallTokens.kt and
+ * ConnectedButtonGroupSmallTokens.kt for the s size)
+ */
+export declare const BUTTON_GROUP_SIZE_TOKENS: {
+    readonly xs: {
+        readonly height: 32;
+        readonly icon: 20;
+        readonly standardGap: 18;
+        readonly connectedCorner: 4;
+    };
+    readonly s: {
+        readonly height: 40;
+        readonly icon: 20;
+        readonly standardGap: 12;
+        readonly connectedCorner: 8;
+    };
+    readonly m: {
+        readonly height: 56;
+        readonly icon: 24;
+        readonly standardGap: 8;
+        readonly connectedCorner: 8;
+    };
+    readonly l: {
+        readonly height: 96;
+        readonly icon: 32;
+        readonly standardGap: 8;
+        readonly connectedCorner: 16;
+    };
+    readonly xl: {
+        readonly height: 136;
+        readonly icon: 40;
+        readonly standardGap: 8;
+        readonly connectedCorner: 20;
+    };
+};
+/** Connected groups use 2dp between buttons at every size */
+export declare const BUTTON_GROUP_CONNECTED_GAP = 2;
+/** Connected pressed inner corner: extra-small (ConnectedButtonGroupSmallTokens.PressedInnerCornerCornerSize) */
+export declare const BUTTON_GROUP_CONNECTED_PRESSED_CORNER = 4;
+/** Connected xs and s groups keep a 48dp minimum width per button */
+export declare const BUTTON_GROUP_CONNECTED_MIN_WIDTH = 48;
+/**
+ * Standard groups: a pressed button widens by this share of its width and
+ * its neighbours give up the difference (ButtonGroupDefaults.ExpandedRatio)
+ */
+export declare const BUTTON_GROUP_EXPANDED_RATIO = 0.15;
+/** Density reduces the container height by 4dp per step */
+export declare const BUTTON_GROUP_DENSITY_STEP = 4;
 /**
  * Default configuration values
  */
+/** Label display in selection groups */
+export declare const BUTTON_GROUP_LABELS: {
+    readonly ALWAYS: "always";
+    readonly SELECTED: "selected";
+};
 export declare const BUTTON_GROUP_DEFAULTS: {
+    readonly KIND: "standard";
+    readonly SELECTION: "none";
+    readonly SHAPE: "round";
+    readonly SIZE: "s";
+    readonly LABELS: "always";
     /** Default variant (outlined per MD3 button group specs) */
     readonly VARIANT: "outlined";
     /** Default orientation */
@@ -109,20 +194,3 @@ export declare const BUTTON_GROUP_CLASSES: {
     /** Compact density */
     readonly DENSITY_COMPACT: "button-group--density-compact";
 };
-/**
- * Density-specific height values per MD3 specifications
- */
-export declare const BUTTON_GROUP_HEIGHTS: {
-    readonly default: 40;
-    readonly comfortable: 36;
-    readonly compact: 32;
-};
-/**
- * Border radius values per MD3 specifications
- * Button groups use full-rounded corners on outer edges
- */
-export declare const BUTTON_GROUP_RADII: {
-    readonly default: 20;
-    readonly comfortable: 18;
-    readonly compact: 16;
-};

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

@@ -10,4 +10,4 @@
 export { default as createButtonGroup } from './button-group';
 export { default } from './button-group';
 export type { ButtonGroupConfig, ButtonGroupComponent, ButtonGroupItemConfig, ButtonGroupEvent, ButtonGroupEventType, ButtonGroupVariant, ButtonGroupOrientation, ButtonGroupDensity } from './types';
-export { BUTTON_GROUP_VARIANTS, BUTTON_GROUP_ORIENTATIONS, BUTTON_GROUP_DENSITY, BUTTON_GROUP_EVENTS, BUTTON_GROUP_DEFAULTS, BUTTON_GROUP_CLASSES, BUTTON_GROUP_HEIGHTS, BUTTON_GROUP_RADII } from './constants';
+export { BUTTON_GROUP_VARIANTS, BUTTON_GROUP_ORIENTATIONS, BUTTON_GROUP_DENSITY, BUTTON_GROUP_EVENTS, BUTTON_GROUP_DEFAULTS, BUTTON_GROUP_CLASSES } from './constants';

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

@@ -18,7 +18,31 @@ export type ButtonGroupDensity = "default" | "comfortable" | "compact";
 /**
  * Event types for button group
  */
-export type ButtonGroupEventType = "click" | "focus" | "blur";
+export type ButtonGroupEventType = "click" | "focus" | "blur" | "change";
+/**
+ * Material 3 button group kinds.
+ * - "standard": padding between buttons; a selected button morphs from round
+ *   to square and its neighbours adjust.
+ * - "connected": 2dp between buttons, round outer corners, square inner
+ *   corners; selection changes only the selected button. Replaces the
+ *   segmented button for single- and multi-select.
+ */
+export type ButtonGroupKind = "standard" | "connected";
+export type ButtonGroupSelection = "none" | "single" | "multi";
+export type ButtonGroupShape = "round" | "square";
+export type ButtonGroupSize = "xs" | "s" | "m" | "l" | "xl";
+/** Label display: always, or only on the selected button (icon-only otherwise) */
+export type ButtonGroupLabels = "always" | "selected";
+/** Payload of the "change" event: the selection after the change. */
+export interface ButtonGroupChangeEvent {
+    buttonGroup: ButtonGroupComponent;
+    /** Values of the selected buttons, in button order */
+    values: string[];
+    selected: ButtonComponent[];
+    /** The button whose click caused the change, if any */
+    button?: ButtonComponent;
+    originalEvent?: Event;
+}
 /**
  * Event data for button group events
  */
@@ -67,6 +91,10 @@ export interface ButtonGroupItemConfig extends Omit<ButtonConfig, "variant"> {
      * Value associated with this button
      */
     value?: string;
+    /** Icon shown while selected (toggle buttons) */
+    selectedIcon?: string;
+    /** Initially selected (selection groups only) */
+    selected?: boolean;
     /**
      * Additional CSS class for this button
      */
@@ -81,6 +109,28 @@ export interface ButtonGroupConfig {
      * Array of button configurations
      */
     buttons?: ButtonGroupItemConfig[];
+    /** "standard" (default) or "connected" */
+    kind?: ButtonGroupKind;
+    /** "none" (default): plain actions. "single" or "multi": toggle buttons. */
+    selection?: ButtonGroupSelection;
+    /** With single or multi selection: the last selected button cannot be deselected */
+    required?: boolean;
+    /** Corner style: round (default) or square */
+    shape?: ButtonGroupShape;
+    /**
+     * Standard groups: share of its width a pressed button gains while its
+     * neighbours give up the difference (M3: 0.15). 0 disables the motion.
+     * @default 0.15
+     */
+    expandedRatio?: number;
+    /** Material size token: xs, s (default), m, l, xl */
+    size?: ButtonGroupSize;
+    /**
+     * "always" (default): buttons show icon and text. "selected": buttons with
+     * an icon and a text show the text only while selected; the selected button
+     * widens to reveal it (M3 Expressive connected groups).
+     */
+    labels?: ButtonGroupLabels;
     /**
      * Visual variant applied to all buttons in the group
      * @default 'outlined'
@@ -144,7 +194,10 @@ export interface ButtonGroupConfig {
      * Event handlers for button group events
      */
     on?: {
-        [key in ButtonGroupEventType]?: (event: ButtonGroupEvent) => void;
+        click?: (event: ButtonGroupEvent) => void;
+        focus?: (event: ButtonGroupEvent) => void;
+        blur?: (event: ButtonGroupEvent) => void;
+        change?: (event: ButtonGroupChangeEvent) => void;
     };
 }
 /**
@@ -223,20 +276,31 @@ export interface ButtonGroupComponent {
      * @returns The ButtonGroupComponent for chaining
      */
     disableButton: (index: number) => ButtonGroupComponent;
+    /** Selection (groups with selection "single" or "multi") */
+    getSelected: () => string[];
+    isSelected: (value: string) => boolean;
+    select: (value: string) => ButtonGroupComponent;
+    deselect: (value: string) => ButtonGroupComponent;
+    toggle: (value: string) => ButtonGroupComponent;
+    getKind: () => ButtonGroupKind;
+    getSelection: () => ButtonGroupSelection;
     /**
      * Adds an event listener to the button group
      * @param event - Event name
      * @param handler - Event handler function
      * @returns The ButtonGroupComponent for chaining
      */
-    on: (event: ButtonGroupEventType, handler: (event: ButtonGroupEvent) => void) => ButtonGroupComponent;
+    on: {
+        (event: "change", handler: (event: ButtonGroupChangeEvent) => void): ButtonGroupComponent;
+        (event: "click" | "focus" | "blur", handler: (event: ButtonGroupEvent) => void): ButtonGroupComponent;
+    };
     /**
      * Removes an event listener from the button group
      * @param event - Event name
      * @param handler - Event handler function
      * @returns The ButtonGroupComponent for chaining
      */
-    off: (event: ButtonGroupEventType, handler: (event: ButtonGroupEvent) => void) => ButtonGroupComponent;
+    off: (event: ButtonGroupEventType, handler: (event: ButtonGroupEvent | ButtonGroupChangeEvent) => void) => ButtonGroupComponent;
     /**
      * Destroys the component and cleans up resources
      */

package/dist/components/carousel/api.d.ts

@@ -1,37 +1,18 @@
-import { CarouselComponent, CarouselSlide } from "./types";
-interface ApiOptions {
-    slides: {
-        addSlide: (slide: CarouselSlide, index?: number) => void;
-        removeSlide: (index: number) => void;
-        updateSlide: (index: number, slide: CarouselSlide) => void;
-        getCount: () => number;
-        getElements: () => HTMLElement[];
-    };
-    lifecycle: {
-        destroy: () => void;
-    };
-}
-interface ComponentWithElements {
+import { CarouselComponent, CarouselVariant, SlidesAPI } from "./types";
+interface ApiComponent {
     element: HTMLElement;
+    slides: SlidesAPI;
     getClass: (name: string) => string;
     getCurrentSlide: () => number;
-    goTo: (index: number) => void;
+    getVariant: () => CarouselVariant;
     next: () => void;
     prev: () => void;
-    enableLoop: () => void;
-    disableLoop: () => void;
-    setBorderRadius?: (radius: number) => void;
-    setGap?: (gap: number) => void;
-    on?: (event: string, handler: Function) => void;
-    off?: (event: string, handler: Function) => void;
-    addClass?: (...classes: string[]) => void;
-    slideData?: CarouselSlide[];
+    goTo: (index: number) => void;
+    lifecycle?: {
+        destroy: () => void;
+    };
+    on?: (event: string, handler: Function) => unknown;
+    off?: (event: string, handler: Function) => unknown;
 }
-/**
- * Enhances a carousel component with API methods
- * @param {ApiOptions} options - API configuration options
- * @returns {Function} Higher-order function that adds API methods to component
- * @internal This is an internal utility for the Carousel component
- */
-export declare const withAPI: (options: ApiOptions) => (component: ComponentWithElements) => CarouselComponent;
+export declare const withAPI: () => (component: ApiComponent) => CarouselComponent;
 export {};

package/dist/components/carousel/arrangement.d.ts

@@ -0,0 +1,23 @@
+export interface Arrangement {
+    priority: number;
+    smallSize: number;
+    smallCount: number;
+    mediumSize: number;
+    mediumCount: number;
+    largeSize: number;
+    largeCount: number;
+}
+export declare const itemCount: (a: Arrangement) => number;
+export interface ArrangementOptions {
+    availableSpace: number;
+    gap: number;
+    targetSmallSize: number;
+    minSmallSize: number;
+    maxSmallSize: number;
+    smallCounts: number[];
+    targetMediumSize: number;
+    mediumCounts: number[];
+    targetLargeSize: number;
+    largeCounts: number[];
+}
+export declare const findLowestCostArrangement: (o: ArrangementOptions) => Arrangement | null;

package/dist/components/carousel/carousel.d.ts

@@ -1,75 +1,25 @@
-/**
- * Creates carousels with different layouts based on Material Design 3 guidelines.
- *
- * This module implements a carousel component that supports four layout types:
- * - Multi-browse: For browsing many visual items at once (photos, feeds)
- * - Uncontained: For customized or text-heavy carousels (traditional)
- * - Hero: For spotlighting large visual items (featured content)
- * - Full-screen: For immersive vertical-scrolling experiences
- *
- * Each layout is optimized for different content types and presentation needs,
- * following the Material Design 3 component guidelines.
- *
- * @module components/carousel
- * @category Components
- */
 import { CarouselConfig, CarouselComponent } from "./types";
 /**
- * Creates a new carousel component with the specified configuration.
- *
- * The carousel supports different layout types for various content
- * presentation needs, from image galleries to full-screen experiences.
- * It handles gesture interactions, keyboard navigation, and responsive
- * behavior following Material Design 3 guidelines.
+ * Creates a Material 3 carousel.
  *
- * @param {CarouselConfig} config - Configuration options for the carousel
- * @returns {CarouselComponent} A fully configured carousel component instance
- * @throws {Error} Throws an error if carousel creation fails
- *
- * @category Components
+ * Items are laid out by a keyline strategy per layout (multi-browse,
+ * uncontained, hero, centred hero, full-screen) and scrolled natively;
+ * they change size as they move through the layout and snap into place.
  *
  * @example
- * // Create a multi-browse carousel for a photo gallery
- * const photoGallery = createCarousel({
- *   layout: 'multi-browse',
- *   scrollBehavior: 'snap',
+ * ```ts
+ * const carousel = createCarousel({
+ *   variant: 'hero',
+ *   itemWidth: 360,
  *   slides: [
- *     { image: 'image1.jpg', title: 'Recent highlights', accent: '#3C4043' },
- *     { image: 'image2.jpg', title: 'La Familia', accent: '#7E5260' }
+ *     { image: 'a.jpg', title: 'Alpha' },
+ *     { image: 'b.jpg', title: 'Beta' },
  *   ],
- *   showAllLink: true
- * });
- *
- * document.getElementById('gallery-container').appendChild(photoGallery.element);
- *
- * @example
- * // Create a hero carousel for featured content
- * const featuredContent = createCarousel({
- *   layout: 'hero',
- *   centered: true,
- *   gap: 16,
- *   slides: [
- *     { image: 'hero1.jpg', title: 'Featured Story', buttonText: 'Read More' },
- *     { image: 'hero2.jpg', title: 'Special Offer', buttonText: 'Shop Now' }
- *   ]
- * });
- *
- * // Listen for slide changes
- * featuredContent.on('slide-changed', (index) => {
- *   console.log(`Now showing featured item ${index}`);
  * });
+ * carousel.on('change', ({ index }) => console.log(index));
+ * ```
  *
- * @example
- * // Create a full-screen immersive carousel
- * const storyViewer = createCarousel({
- *   layout: 'full-screen',
- *   loop: false,
- *   transition: 'fade',
- *   slides: [
- *     { image: 'story1.jpg', description: 'Chapter 1' },
- *     { image: 'story2.jpg', description: 'Chapter 2' }
- *   ]
- * });
+ * @category Components
  */
 export declare const createCarousel: (config?: CarouselConfig) => CarouselComponent;
 export default createCarousel;

package/dist/components/carousel/config.d.ts

@@ -1,19 +1,8 @@
 import { CarouselConfig } from "./types";
-/**
- * Default configuration for the Carousel component
- */
 export declare const defaultConfig: CarouselConfig;
-/**
- * Creates the base configuration for Carousel component
- * @param {CarouselConfig} config - User provided configuration
- * @returns {CarouselConfig} Complete configuration with defaults applied
- */
+/** Layout-dependent defaults: full-screen has no padding and 16dp between items; uncontained scrolls freely */
+export declare const resolveLayoutDefaults: (config: CarouselConfig) => Required<Pick<CarouselConfig, "variant" | "gap" | "padding" | "snap">>;
 export declare const createBaseConfig: (config?: CarouselConfig) => CarouselConfig;
-/**
- * Generates element configuration for the Carousel component
- * @param {CarouselConfig} config - Carousel configuration
- * @returns {Object} Element configuration object for withElement
- */
 export declare const getElementConfig: (config: CarouselConfig) => {
     tag: string;
     componentName: string;
@@ -36,21 +25,3 @@ export declare const getElementConfig: (config: CarouselConfig) => {
     forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
     interactive: boolean;
 };
-/**
- * Creates API configuration for the Carousel component
- * @param {Object} comp - Component with slides and lifecycle features
- * @returns {Object} API configuration object
- */
-export declare const getApiConfig: (comp: any) => {
-    slides: {
-        addSlide: any;
-        removeSlide: any;
-        updateSlide: any;
-        getCount: any;
-        getElements: any;
-    };
-    lifecycle: {
-        destroy: any;
-    };
-};
-export default defaultConfig;