mtrl 0.8.0 → 0.9.1

package/dist/components/tabs/features.js

@@ -1,6 +1,7 @@
 import { createTab } from "./tab.js";
 import { updateTabPanels } from "./utils.js";
 import { createTabIndicator } from "./indicator.js";
+const isCancelable = (event) => !!event && typeof event.preventDefault === "function";
 export const withTabsManagement = (config) => (component) => {
     const tabs = [];
     const tabsContainer = component.scrollContainer || component.element;
@@ -23,7 +24,7 @@ export const withTabsManagement = (config) => (component) => {
         return tabs.find((tab) => tab.isActive()) || null;
     };
     const handleTabClick = (event, tab) => {
-        if (event && typeof event.preventDefault === "function") {
+        if (isCancelable(event)) {
             event.preventDefault();
         }
         if (tab.disabled &&

package/dist/components/tabs/indicator.js

@@ -5,7 +5,8 @@ const DEFAULT_CONFIG = {
     animationTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
     visible: true,
     prefix: 'mtrl',
-    variant: 'primary'
+    variant: 'primary',
+    height: 3
 };
 export const createTabIndicator = (config = {}) => {
     const mergedConfig = { ...DEFAULT_CONFIG, ...config };
@@ -15,6 +16,7 @@ export const createTabIndicator = (config = {}) => {
     element.style.transition = `transform ${mergedConfig.animationDuration}ms ${mergedConfig.animationTiming}, 
                              width ${mergedConfig.animationDuration}ms ${mergedConfig.animationTiming}`;
     element.style.width = `${mergedConfig.fixedWidth}px`;
+    element.style.height = `${mergedConfig.height}px`;
     if (!mergedConfig.visible) {
         element.style.opacity = '0';
     }
@@ -27,7 +29,7 @@ export const createTabIndicator = (config = {}) => {
             const textElement = tab.element.querySelector(`.${prefix}-tab-text`) ||
                 tab.element.querySelector(`.${prefix}-button-text`);
             if (textElement) {
-                return textElement.clientWidth;
+                return Math.max(textElement.clientWidth, 24);
             }
             return Math.max(tab.element.offsetWidth / 2, 30);
         }

package/dist/components/tabs/responsive.js

@@ -61,7 +61,8 @@ export const setupResponsiveBehavior = (tabs, config = {}) => {
     updateLayout();
     const resizeObserver = new ResizeObserver(updateLayout);
     resizeObserver.observe(document.body);
-    tabs._resizeObserver = resizeObserver;
+    const host = tabs;
+    host._resizeObserver = resizeObserver;
     const originalDestroy = tabs.destroy;
     tabs.destroy = function () {
         if (this._resizeObserver) {

package/dist/components/tabs/tab-api.d.ts

@@ -1,4 +1,4 @@
-import { TabComponent } from "./types.js";
+import { TabComponent, TabButton } from "./types.js";
 import type { BadgeComponent } from "../badge/index.js";
 /**
  * API options for a Tab component
@@ -15,7 +15,7 @@ interface ApiOptions {
         destroy: () => void;
     };
     /** The button component (optional) */
-    button?: any;
+    button?: TabButton;
 }
 /**
  * Component with required elements and methods
@@ -24,15 +24,21 @@ interface ComponentWithElements {
     /** The DOM element */
     element: HTMLElement;
     /** The button component (optional) */
-    button?: any;
+    button?: TabButton;
     /** The badge component (optional) */
     badge?: BadgeComponent;
     /** Class name helper */
     getClass: (name: string) => string;
     /** Component configuration */
-    config: Record<string, any>;
+    config: {
+        prefix?: string;
+    };
+    /** Event subscription, kept on the returned tab */
+    on: TabComponent['on'];
+    /** Event unsubscription, kept on the returned tab */
+    off: TabComponent['off'];
     /** Event emitter (optional) */
-    emit?: (event: string, data: any) => any;
+    emit?: (event: string, data?: unknown) => unknown;
 }
 /**
  * Enhances a tab component with API methods

package/dist/components/tabs/tab-api.js

@@ -78,7 +78,7 @@ export const withTabAPI = ({ disabled, lifecycle, button }) => (component) => {
         setBadge(content) {
             if (!component.badge) {
                 const badgeConfig = {
-                    content,
+                    label: content,
                     standalone: false,
                     target: component.element,
                     prefix: component.config.prefix

package/dist/components/tabs/tab.js

@@ -45,6 +45,14 @@ export const createTab = (config = {}) => {
             ...baseComponent,
             button,
             element: button.element,
+            on(event, handler) {
+                baseComponent.on(event, handler);
+                return this;
+            },
+            off(event, handler) {
+                baseComponent.off(event, handler);
+                return this;
+            },
             badge: null,
             getValue() {
                 return button.getValue();
@@ -103,7 +111,7 @@ export const createTab = (config = {}) => {
             setBadge(content) {
                 if (!this.badge) {
                     const badgeConfig = {
-                        content,
+                        label: content,
                         standalone: false,
                         target: this.element,
                         prefix: baseConfig.prefix,

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

@@ -1,4 +1,9 @@
 import type { BadgeComponent } from "../badge/index.js";
+import type { ButtonComponent } from "../button/types.js";
+/**
+ * Button methods the tab delegates to; each one is checked before use
+ */
+export type TabButton = Partial<Pick<ButtonComponent, 'getValue' | 'setValue' | 'getText' | 'setText' | 'getIcon' | 'setIcon'>>;
 import { TabIndicator } from "./indicator.js";
 /**
  * Available tabs variants
@@ -245,6 +250,8 @@ export interface TextAPI {
 export interface TabComponent {
     /** The tab's DOM element */
     element: HTMLElement;
+    /** The button the tab is built on */
+    button?: TabButton;
     /** The tab's badge component (if any) */
     badge?: BadgeComponent;
     /** Gets a class name with the component's prefix */
@@ -374,7 +381,7 @@ export interface TabsComponent {
      * @param data - Event data
      * @returns Tabs component for chaining
      */
-    emit?: (event: string, data: any) => TabsComponent;
+    emit?: (event: string, data: unknown) => TabsComponent;
     /**
      * Destroys the tabs component and all tabs
      */
@@ -382,7 +389,7 @@ export interface TabsComponent {
     /**
      * Tab click event handler
      */
-    handleTabClick: (event: any, tab: TabComponent) => void;
+    handleTabClick: (event: unknown, tab: TabComponent) => void;
     /**
      * Scroll container for scrollable tabs
      */

package/dist/components/tabs/utils.d.ts

@@ -1,17 +1,28 @@
 import { TabComponent } from "./types.js";
+/**
+ * Tabs members read by these helpers; each one is checked before use
+ */
+interface TabsHost {
+    element?: HTMLElement;
+    tabs?: TabComponent[];
+    getTabs?: () => TabComponent[];
+    getActiveTab?: () => TabComponent | null;
+    setActiveTab?: (tabOrValue: TabComponent | string) => unknown;
+}
 /**
  * Gets the active tab from a component
  * @param component - Component with tabs
  * @returns Active tab or null
  */
-export declare function getActiveTab(component: any): TabComponent | null;
+export declare function getActiveTab(component: TabsHost): TabComponent | null;
 /**
  * Updates tab panels based on active tab
  * @param component - Component with tabs
  */
-export declare function updateTabPanels(component: any): void;
+export declare function updateTabPanels(component: TabsHost): void;
 /**
  * Sets up keyboard navigation for tabs
  * @param component - Tabs component
  */
-export declare function setupKeyboardNavigation(component: any): void;
+export declare function setupKeyboardNavigation(component: TabsHost): void;
+export {};

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

@@ -9,7 +9,7 @@ type ComponentWithDensity = BaseComponent & {
     };
     updateElementPositions?: () => void;
     schedulePositionUpdate?: () => void;
-    setError?: (error: boolean, message?: string) => any;
+    setError?: (error: boolean, message?: string) => void;
     isError?: () => boolean;
 };
 /**

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

@@ -17,7 +17,7 @@ export declare const createBaseConfig: (config?: TextfieldConfig) => TextfieldCo
 export declare const getElementConfig: (config: TextfieldConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -33,7 +33,7 @@ export declare const getElementConfig: (config: TextfieldConfig) => {
     ariaHidden: boolean;
     html: string;
     text: string;
-    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    forwardEvents: Record<string, import("../../core/dom/create.js").EventCondition>;
     interactive: boolean;
 };
 /**

package/dist/components/textfield/features/error.d.ts

@@ -15,7 +15,6 @@ export interface ErrorConfig {
      * Component name
      */
     componentName?: string;
-    [key: string]: any;
 }
 /**
  * Component with supporting text capabilities (if available)
@@ -50,5 +49,5 @@ export interface ErrorComponent extends BaseComponent {
  * @param config - Configuration with error settings
  * @returns Function that enhances a component with error state
  */
-export declare const withError: <T extends ErrorConfig>(config: T) => <C extends ComponentWithSupportingText>(component: C) => C & ErrorComponent;
+export declare const withError: <T extends ErrorConfig & object>(config: T) => <C extends ComponentWithSupportingText>(component: C) => C & ErrorComponent;
 export {};

package/dist/components/textfield/features/leading-icon.d.ts

@@ -24,7 +24,6 @@ export interface LeadingIconConfig {
      * Component name
      */
     componentName?: string;
-    [key: string]: any;
 }
 /**
  * Component with leading icon capabilities
@@ -51,5 +50,5 @@ export interface LeadingIconComponent extends BaseComponent {
  * @param config - Configuration with leading icon settings
  * @returns Function that enhances a component with leading icon
  */
-export declare const withLeadingIcon: <T extends LeadingIconConfig>(config: T) => <C extends InputElementComponent>(component: C) => C & LeadingIconComponent;
+export declare const withLeadingIcon: <T extends LeadingIconConfig & object>(config: T) => <C extends InputElementComponent>(component: C) => C & Partial<LeadingIconComponent>;
 export {};

package/dist/components/textfield/features/prefix-text.d.ts

@@ -23,7 +23,6 @@ export interface PrefixTextConfig {
      * Component name
      */
     componentName?: string;
-    [key: string]: any;
 }
 /**
  * Component with prefix text capabilities
@@ -50,5 +49,5 @@ export interface PrefixTextComponent extends BaseComponent {
  * @param config - Configuration with prefix text settings
  * @returns Function that enhances a component with prefix text
  */
-export declare const withPrefixText: <T extends PrefixTextConfig>(config: T) => <C extends LifecycleElementComponent>(component: C) => C & PrefixTextComponent;
+export declare const withPrefixText: <T extends PrefixTextConfig & object>(config: T) => <C extends LifecycleElementComponent>(component: C) => C & Partial<PrefixTextComponent>;
 export {};

package/dist/components/textfield/features/suffix-text.d.ts

@@ -23,7 +23,6 @@ export interface SuffixTextConfig {
      * Component name
      */
     componentName?: string;
-    [key: string]: any;
 }
 /**
  * Component with suffix text capabilities
@@ -50,5 +49,5 @@ export interface SuffixTextComponent extends BaseComponent {
  * @param config - Configuration with suffix text settings
  * @returns Function that enhances a component with suffix text
  */
-export declare const withSuffixText: <T extends SuffixTextConfig>(config: T) => <C extends LifecycleElementComponent>(component: C) => C & SuffixTextComponent;
+export declare const withSuffixText: <T extends SuffixTextConfig & object>(config: T) => <C extends LifecycleElementComponent>(component: C) => C & Partial<SuffixTextComponent>;
 export {};

package/dist/components/textfield/features/supporting-text.d.ts

@@ -27,7 +27,6 @@ export interface SupportingTextConfig {
      * Component name
      */
     componentName?: string;
-    [key: string]: any;
 }
 /**
  * Component with supporting text capabilities
@@ -55,5 +54,5 @@ export interface SupportingTextComponent extends BaseComponent {
  * @param config - Configuration with supporting text settings
  * @returns Function that enhances a component with supporting text
  */
-export declare const withSupportingText: <T extends SupportingTextConfig>(config: T) => <C extends LifecycleElementComponent>(component: C) => C & SupportingTextComponent;
+export declare const withSupportingText: <T extends SupportingTextConfig & object>(config: T) => <C extends LifecycleElementComponent>(component: C) => C & SupportingTextComponent;
 export {};

package/dist/components/textfield/features/trailing-icon.d.ts

@@ -24,7 +24,6 @@ export interface TrailingIconConfig {
      * Component name
      */
     componentName?: string;
-    [key: string]: any;
 }
 /**
  * Component with trailing icon capabilities
@@ -51,5 +50,5 @@ export interface TrailingIconComponent extends BaseComponent {
  * @param config - Configuration with trailing icon settings
  * @returns Function that enhances a component with trailing icon
  */
-export declare const withTrailingIcon: <T extends TrailingIconConfig>(config: T) => <C extends InputElementComponent>(component: C) => C & TrailingIconComponent;
+export declare const withTrailingIcon: <T extends TrailingIconConfig & object>(config: T) => <C extends InputElementComponent>(component: C) => C & Partial<TrailingIconComponent>;
 export {};

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

@@ -188,7 +188,6 @@ export interface BaseComponent {
     config?: {
         prefix?: string;
         componentName?: string;
-        [key: string]: string | number | boolean | undefined;
     };
     getValue?: () => string;
     setValue?: (value: string) => void;
@@ -227,5 +226,4 @@ export interface BaseComponent {
     errorState?: boolean;
     setError?: (error: boolean, message?: string) => void;
     isError?: () => boolean;
-    [key: string]: unknown;
 }

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

@@ -1,9 +1,10 @@
 import { TimePickerComponent, TimePickerConfig, TimeValue } from "./types.js";
+import type { ElementComponent } from "../../core/compose/component.js";
 interface ApiOptions {
     events: {
-        on: (event: string, handler: Function) => any;
-        off: (event: string, handler: Function) => any;
-        emit: (event: string, data?: any) => any;
+        on: (event: string, handler: Function) => void;
+        off: (event: string, handler: Function) => void;
+        emit: (event: string, data?: unknown) => void;
     };
     lifecycle: {
         destroy: () => void;
@@ -20,5 +21,5 @@ interface ApiOptions {
  * @param options - API options with events and lifecycle methods
  * @returns TimePicker component API
  */
-export declare const createTimePickerAPI: (baseComponent: any, modalElement: HTMLElement, dialogElement: HTMLElement, timeValue: TimeValue, config: TimePickerConfig, options: ApiOptions) => TimePickerComponent;
+export declare const createTimePickerAPI: (baseComponent: ElementComponent, modalElement: HTMLElement, dialogElement: HTMLElement, timeValue: TimeValue, config: TimePickerConfig, options: ApiOptions) => TimePickerComponent;
 export {};

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

@@ -1,3 +1,6 @@
+import type { EventCallback } from "../../core/state/emitter.js";
+import type { EventComponent } from "../../core/compose/features/events.js";
+import type { LifecycleComponent } from "../../core/compose/features/lifecycle.js";
 import { TimePickerConfig } from "./types.js";
 /**
  * Default configuration for the TimePicker component
@@ -17,7 +20,7 @@ export declare const createBaseConfig: (config?: TimePickerConfig) => TimePicker
 export declare const getContainerConfig: (config: TimePickerConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -33,7 +36,7 @@ export declare const getContainerConfig: (config: TimePickerConfig) => {
     ariaHidden: boolean;
     html: string;
     text: string;
-    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    forwardEvents: Record<string, import("../../core/dom/create.js").EventCondition>;
     interactive: boolean;
 };
 /**
@@ -44,7 +47,7 @@ export declare const getContainerConfig: (config: TimePickerConfig) => {
 export declare const getModalConfig: (config: TimePickerConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -60,7 +63,7 @@ export declare const getModalConfig: (config: TimePickerConfig) => {
     ariaHidden: boolean;
     html: string;
     text: string;
-    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    forwardEvents: Record<string, import("../../core/dom/create.js").EventCondition>;
     interactive: boolean;
 };
 /**
@@ -71,7 +74,7 @@ export declare const getModalConfig: (config: TimePickerConfig) => {
 export declare const getDialogConfig: (config: TimePickerConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -87,7 +90,7 @@ export declare const getDialogConfig: (config: TimePickerConfig) => {
     ariaHidden: boolean;
     html: string;
     text: string;
-    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    forwardEvents: Record<string, import("../../core/dom/create.js").EventCondition>;
     interactive: boolean;
 };
 /**
@@ -95,14 +98,14 @@ export declare const getDialogConfig: (config: TimePickerConfig) => {
  * @param {Object} comp - Component with events and lifecycle features
  * @returns {Object} API configuration object
  */
-export declare const getApiConfig: (comp: any) => {
+export declare const getApiConfig: (comp: EventComponent & LifecycleComponent) => {
     events: {
-        on: (event: string, handler: Function) => any;
-        off: (event: string, handler: Function) => any;
-        emit: (event: string, data?: any) => any;
+        on: (event: string, handler: EventCallback) => EventComponent;
+        off: (event: string, handler: EventCallback) => EventComponent;
+        emit: (event: string, data?: unknown) => EventComponent;
     };
     lifecycle: {
-        destroy: () => any;
+        destroy: () => void;
     };
 };
 export default defaultConfig;

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

@@ -17,7 +17,7 @@ export declare const createBaseConfig: (config?: TooltipConfig) => TooltipConfig
 export declare const getElementConfig: (config: TooltipConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -33,7 +33,7 @@ export declare const getElementConfig: (config: TooltipConfig) => {
     ariaHidden: boolean;
     html: string;
     text: string;
-    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    forwardEvents: Record<string, import("../../core/dom/create.js").EventCondition>;
     interactive: boolean;
 };
 /**

package/dist/components/tooltip/tooltip.d.ts

@@ -4,5 +4,5 @@ import { TooltipConfig } from "./types.js";
  * @param {TooltipConfig} config - Tooltip configuration object
  * @returns {TooltipComponent} Tooltip component instance
  */
-declare const createTooltip: (config?: TooltipConfig) => any;
+declare const createTooltip: (config?: TooltipConfig) => import("./types.js").TooltipComponent;
 export default createTooltip;

package/dist/core/compose/base.d.ts

@@ -2,7 +2,7 @@
  * Configuration for component creation
  */
 export interface ComponentConfig {
-    [key: string]: any;
+    [key: string]: unknown;
 }
 /**
  * Basic component interface
@@ -28,4 +28,4 @@ export interface Component {
  * @param config - Component configuration
  * @returns Basic component structure
  */
-export declare const createComponent: (config?: ComponentConfig) => Component;
+export declare const createComponent: (config?: object) => Component;

package/dist/core/compose/base.js

@@ -1,6 +1,6 @@
 export const createComponent = (config = {}) => ({
     element: null,
-    config,
+    config: config,
     setup() {
         return this;
     }

package/dist/core/compose/component.d.ts

@@ -3,6 +3,7 @@
  * @description Core utilities for component composition and creation with built-in mobile support
  */
 import { type CleanupScope } from "./cleanup.js";
+import { EventCondition } from "../dom/create.js";
 /**
  * Touch state interface to track touch interactions
  */
@@ -15,12 +16,20 @@ export interface TouchState {
     isTouching: boolean;
     activeTarget: EventTarget | null;
 }
+/**
+ * Config keys the base component and withElement read
+ */
+export interface BaseConfig {
+    componentName?: string;
+    prefix?: string;
+    parent?: HTMLElement | string;
+}
 /**
  * Base component interface with prefix utilities
  */
 export interface BaseComponent {
     resources?: CleanupScope;
-    config: Record<string, any>;
+    config: BaseConfig & Record<string, unknown>;
     componentName?: string;
     getClass: (name: string) => string;
     getModifierClass: (base: string, modifier: string) => string;
@@ -42,7 +51,7 @@ export interface ElementComponent extends BaseComponent {
 export interface WithElementOptions {
     tag?: string;
     componentName?: string;
-    attributes?: Record<string, any>;
+    attributes?: Record<string, unknown>;
     className?: string | string[];
     id?: string;
     name?: string;
@@ -55,7 +64,7 @@ export interface WithElementOptions {
     ariaDescribedBy?: string;
     ariaLabelledBy?: string;
     ariaHidden?: boolean;
-    forwardEvents?: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    forwardEvents?: Record<string, EventCondition>;
     interactive?: boolean;
     parent?: HTMLElement | string;
 }
@@ -66,7 +75,7 @@ export interface WithElementOptions {
  * @param {Object} config - Component configuration
  * @returns {BaseComponent} Base component with prefix utilities
  */
-export declare const createBase: (config?: Record<string, any>) => BaseComponent;
+export declare const createBase: (config?: BaseConfig & object) => BaseComponent;
 /**
  * Higher-order function that adds a DOM element to a component
  * @param {WithElementOptions} options - Element creation options

package/dist/core/compose/component.js

@@ -9,7 +9,7 @@ const withPrefix = (prefix) => ({
     getElementClass,
 });
 export const createBase = (config = {}) => ({
-    config,
+    config: config,
     componentName: config.componentName,
     ...withPrefix(config.prefix || "mtrl"),
     touchState: {

package/dist/core/compose/features/badge.d.ts

@@ -1,4 +1,5 @@
 import { BaseComponent, ElementComponent } from "../component.js";
+import type { BadgeComponent as Badge } from "../../../components/badge/types.js";
 /**
  * Configuration for badge feature
  */
@@ -16,13 +17,11 @@ export interface BadgeConfig {
         size?: string;
         position?: string;
         max?: number;
-        [key: string]: any;
     };
     /**
      * CSS class prefix
      */
     prefix?: string;
-    [key: string]: any;
 }
 /**
  * Component with badge capabilities
@@ -31,7 +30,7 @@ export interface BadgeComponent extends BaseComponent {
     /**
      * Badge component instance
      */
-    badge?: any;
+    badge?: Badge;
 }
 /**
  * Adds badge functionality to a component
@@ -40,4 +39,4 @@ export interface BadgeComponent extends BaseComponent {
  * @param {BadgeConfig} config - Badge configuration
  * @returns {Function} Component enhancer with badge functionality
  */
-export declare const withBadge: <T extends BadgeConfig>(config: T) => <C extends ElementComponent>(component: C) => C & BadgeComponent;
+export declare const withBadge: <T extends BadgeConfig & object>(config: T) => <C extends ElementComponent>(component: C) => C & BadgeComponent;

package/dist/core/compose/features/badge.js

@@ -5,7 +5,7 @@ export const withBadge = (config) => (component) => {
         return component;
     }
     const badgeConfig = {
-        content: config.badge,
+        label: config.badge,
         standalone: false,
         target: component.element,
         ...config.badgeConfig || {},

package/dist/core/compose/features/checkable.d.ts

@@ -4,7 +4,6 @@ import { BaseComponent } from "../component.js";
  */
 export interface CheckableConfig {
     checked?: boolean;
-    [key: string]: any;
 }
 /**
  * Component with input element
@@ -12,8 +11,8 @@ export interface CheckableConfig {
 export interface InputComponent extends BaseComponent {
     element: HTMLElement;
     input: HTMLInputElement;
-    emit?: (event: string, data: unknown) => InputComponent;
-    on?: (event: string, handler: Function) => InputComponent;
+    emit?: (event: string, data: unknown) => unknown;
+    on?: (event: string, handler: Function) => unknown;
 }
 /**
  * Checkable state manager interface
@@ -56,4 +55,4 @@ export interface CheckableComponent extends BaseComponent {
  * @param config - Checkable configuration
  * @returns Function that enhances a component with checkable functionality
  */
-export declare const withCheckable: <T extends CheckableConfig>(config?: T) => <C extends InputComponent>(component: C) => C & CheckableComponent;
+export declare const withCheckable: <T extends CheckableConfig & object>(config?: T) => <C extends InputComponent>(component: C) => C & CheckableComponent;

package/dist/core/compose/features/debounce.d.ts

@@ -9,7 +9,7 @@ import { BaseComponent, ElementComponent } from "../component.js";
 export interface ComponentWithLifecycle extends ElementComponent {
     lifecycle: {
         destroy: () => void;
-        [key: string]: any;
+        [key: string]: unknown;
     };
 }
 /**
@@ -27,7 +27,6 @@ export interface DebounceConfig {
             maxWait?: number;
         };
     }>;
-    [key: string]: any;
 }
 /**
  * Component with debounced event capabilities
@@ -80,5 +79,5 @@ export interface DebounceComponent extends BaseComponent {
  * )(config);
  * ```
  */
-export declare const withDebounce: (config?: DebounceConfig) => <C extends ElementComponent>(component: C) => C & DebounceComponent;
+export declare const withDebounce: <T extends DebounceConfig & object>(config?: T) => <C extends ElementComponent>(component: C) => C & DebounceComponent;
 export default withDebounce;