mtrl 0.8.0 → 0.9.0

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

@@ -1,3 +1,6 @@
+import type { DisabledComponent } from "../../core/compose/features/disabled.js";
+import type { EventComponent } from "../../core/compose/features/events.js";
+import type { LifecycleComponent } from "../../core/compose/features/lifecycle.js";
 import { DatePickerConfig } from "./types.js";
 /**
  * Default configuration for the DatePicker component
@@ -17,7 +20,7 @@ export declare const createBaseConfig: (config?: DatePickerConfig) => DatePicker
 export declare const getContainerConfig: (config: DatePickerConfig) => {
     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: DatePickerConfig) => {
     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: DatePickerConfig) => {
 export declare const getInputConfig: (config: DatePickerConfig) => {
     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 getInputConfig: (config: DatePickerConfig) => {
     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 getInputConfig: (config: DatePickerConfig) => {
 export declare const getCalendarConfig: (config: DatePickerConfig) => {
     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 getCalendarConfig: (config: DatePickerConfig) => {
     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,18 +98,18 @@ export declare const getCalendarConfig: (config: DatePickerConfig) => {
  * @param {Object} comp - Component with features like disabled and lifecycle
  * @returns {Object} API configuration object
  */
-export declare const getApiConfig: (comp: any) => {
+export declare const getApiConfig: (comp: DisabledComponent & LifecycleComponent & EventComponent) => {
     disabled: {
-        enable: () => any;
-        disable: () => any;
+        enable: () => import("../../core/compose/features/disabled.js").DisabledManager;
+        disable: () => import("../../core/compose/features/disabled.js").DisabledManager;
     };
     lifecycle: {
-        destroy: () => any;
+        destroy: () => void;
     };
     events: {
-        on: any;
-        off: any;
-        emit: any;
+        on: (event: string, handler: import("../../index.js").EventCallback) => EventComponent;
+        off: (event: string, handler: import("../../index.js").EventCallback) => EventComponent;
+        emit: (event: string, data?: unknown) => EventComponent;
     };
 };
 export default defaultConfig;

package/dist/components/datepicker/datepicker.js

@@ -7,6 +7,7 @@ import { createBaseConfig, getContainerConfig, getInputConfig, getCalendarConfig
 import { formatDate, parseDate } from "./utils.js";
 import { renderCalendar } from "./render.js";
 import { createElement } from "../../core/dom/create.js";
+const isInputElement = (el) => el.tagName === "INPUT";
 const createDatePicker = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     try {
@@ -45,7 +46,7 @@ const createDatePicker = (config = {}) => {
                 if (!this.isOpen || !this.calendarElement)
                     return;
                 this.calendarElement.innerHTML = "";
-                const calendar = renderCalendar(this, (event, data) => {
+                const calendar = renderCalendar(this, (...[event, data]) => {
                     switch (event) {
                         case "dateSelected":
                             this.handleDateSelection(data.date);
@@ -195,7 +196,11 @@ const createDatePicker = (config = {}) => {
         }
         const component = pipe(createBase, withEvents(), withElement(getContainerConfig(baseConfig)), withDisabled(baseConfig), withLifecycle())(baseConfig);
         const inputComponent = pipe(createBase, withElement(getInputConfig(baseConfig)))(baseConfig);
-        state.input = inputComponent.element;
+        const input = inputComponent.element;
+        if (!isInputElement(input)) {
+            throw new Error("Datepicker input element is not an input");
+        }
+        state.input = input;
         component.element.appendChild(state.input);
         state.updateInputValue();
         const calendarConfig = getCalendarConfig(baseConfig);
@@ -221,13 +226,14 @@ const createDatePicker = (config = {}) => {
         state.calendarElement.addEventListener("click", (event) => {
             event.stopPropagation();
         });
-        document.addEventListener("click", (event) => {
+        state.outsideClickHandler = (event) => {
             if (state.isOpen && !component.element.contains(event.target)) {
                 state.isOpen = false;
                 state.render();
                 component.emit("close", { value: state.selectedDate });
             }
-        });
+        };
+        document.addEventListener("click", state.outsideClickHandler);
         return withAPI(state, getApiConfig(component))(component);
     }
     catch (error) {

package/dist/components/datepicker/render.d.ts

@@ -1,9 +1,16 @@
+import type { CalendarEmit, DatePickerState } from "./types.js";
+/**
+ * State fields and the event emitter the calendar renderers read
+ */
+type RenderParams = Pick<DatePickerState, "currentView" | "currentMonth" | "currentYear" | "selectedDate" | "rangeEndDate" | "minDate" | "maxDate" | "prefix"> & {
+    emit: CalendarEmit;
+};
 /**
  * Renders the calendar header with navigation controls
  * @param {Object} params - Rendering parameters
  * @returns {HTMLElement} Calendar header element
  */
-export declare const renderHeader: ({ currentMonth, currentYear, currentView, prefix, emit, }: any) => HTMLElement;
+export declare const renderHeader: ({ currentMonth, currentYear, currentView, prefix, emit, }: Pick<RenderParams, "currentMonth" | "currentYear" | "currentView" | "prefix" | "emit">) => HTMLElement;
 /**
  * Renders the days of the week (S, M, T, etc.)
  * @param {string} prefix - CSS class prefix
@@ -15,29 +22,30 @@ export declare const renderWeekdays: (prefix: string) => HTMLElement;
  * @param {Object} params - Rendering parameters
  * @returns {HTMLElement} Calendar days element
  */
-export declare const renderDays: ({ currentYear, currentMonth, selectedDate, rangeEndDate, minDate, maxDate, prefix, emit, }: any) => HTMLElement;
+export declare const renderDays: ({ currentYear, currentMonth, selectedDate, rangeEndDate, minDate, maxDate, prefix, emit, }: Omit<RenderParams, "currentView">) => HTMLElement;
 /**
  * Renders the month selection view
  * @param {Object} params - Rendering parameters
  * @returns {HTMLElement} Month selection element
  */
-export declare const renderMonthSelection: ({ currentMonth, prefix, emit, }: any) => HTMLElement;
+export declare const renderMonthSelection: ({ currentMonth, prefix, emit, }: Pick<RenderParams, "currentMonth" | "prefix" | "emit">) => HTMLElement;
 /**
  * Renders the year selection view
  * @param {Object} params - Rendering parameters
  * @returns {HTMLElement} Year selection element
  */
-export declare const renderYearSelection: ({ currentYear, prefix, emit, }: any) => HTMLElement;
+export declare const renderYearSelection: ({ currentYear, prefix, emit, }: Pick<RenderParams, "currentYear" | "prefix" | "emit">) => HTMLElement;
 /**
  * Renders the footer with action buttons
  * @param {Object} params - Rendering parameters
  * @returns {HTMLElement} Footer element
  */
-export declare const renderFooter: ({ prefix, emit }: any) => HTMLElement;
+export declare const renderFooter: ({ prefix, emit, }: Pick<RenderParams, "prefix" | "emit">) => HTMLElement;
 /**
  * Renders a complete calendar view
  * @param {Object} state - Current datepicker state
  * @param {Function} emit - Event emission function
  * @returns {HTMLElement} Rendered calendar
  */
-export declare const renderCalendar: (state: any, emit: Function) => HTMLElement;
+export declare const renderCalendar: (state: DatePickerState, emit: CalendarEmit) => HTMLElement;
+export {};

package/dist/components/datepicker/render.js

@@ -201,7 +201,7 @@ export const renderYearSelection = ({ currentYear, prefix, emit, }) => {
     });
     return yearsGrid;
 };
-export const renderFooter = ({ prefix, emit }) => {
+export const renderFooter = ({ prefix, emit, }) => {
     const footer = createElement({
         tag: "div",
         className: `${prefix}-datepicker-footer`,

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

@@ -314,8 +314,56 @@ export interface ApiOptions {
         destroy: () => void;
     };
     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;
     };
 }
+/**
+ * Internal state shared by the datepicker, its API and the calendar renderer
+ * @internal
+ */
+export interface DatePickerState {
+    isOpen: boolean;
+    selectedDate: Date | null;
+    rangeEndDate: Date | null;
+    currentView: DatePickerView | string;
+    currentMonth: number;
+    currentYear: number;
+    minDate: Date | null;
+    maxDate: Date | null;
+    dateFormat: string;
+    variant: DatePickerVariant | string;
+    selectionMode: DatePickerSelectionMode | string;
+    closeOnSelect: boolean;
+    prefix: string;
+    calendarElement: HTMLElement | null;
+    input: HTMLInputElement | null;
+    outsideClickHandler?: EventListener;
+    updateInputValue(): void;
+    updateCalendar(): void;
+    handleDateSelection(date: Date): void;
+    prevMonth(): void;
+    nextMonth(): void;
+    prevYear(): void;
+    nextYear(): void;
+    render(): void;
+}
+/**
+ * Events the calendar renderer emits, each with its payload
+ * @internal
+ */
+export type CalendarEventArgs = ["dateSelected", {
+    date: Date;
+}] | ["monthSelected", {
+    month: number;
+}] | ["yearSelected", {
+    year: number;
+}] | ["viewChange", {
+    view: DatePickerView;
+}] | ["prevMonth", undefined?] | ["nextMonth", undefined?] | ["prevYear", undefined?] | ["nextYear", undefined?] | ["prevYearRange", undefined?] | ["nextYearRange", undefined?] | ["cancel", undefined?] | ["confirm", undefined?];
+/**
+ * Emits a calendar event to the datepicker
+ * @internal
+ */
+export type CalendarEmit = (...args: CalendarEventArgs) => void;

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

@@ -37,7 +37,7 @@ interface ApiOptions {
     events: {
         on: (event: string, handler: Function) => void;
         off: (event: string, handler: Function) => void;
-        trigger: (event: string, data: any) => void;
+        trigger: (event: string, data: unknown) => void;
     };
     lifecycle: {
         destroy: () => void;

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

@@ -17,7 +17,7 @@ export declare const createBaseConfig: (config?: DialogConfig) => DialogConfig;
 export declare const getElementConfig: (config: DialogConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -33,15 +33,14 @@ export declare const getElementConfig: (config: DialogConfig) => {
     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;
 };
 /**
  * Generates element configuration for the Dialog overlay
- * @param {DialogConfig} config - Dialog configuration
  * @returns {Object} Element configuration object for overlay
  */
-export declare const getOverlayConfig: (config: DialogConfig) => {
+export declare const getOverlayConfig: () => {
     tag: string;
     attributes: {};
     className: string;

package/dist/components/dialog/config.js

@@ -30,7 +30,7 @@ export const getElementConfig = (config) => {
         className: config.class
     });
 };
-export const getOverlayConfig = (config) => {
+export const getOverlayConfig = () => {
     return {
         tag: 'div',
         attributes: {},

package/dist/components/dialog/features.js

@@ -15,7 +15,7 @@ export const withStructure = (config) => (component) => {
     const uid = `${component.getClass("dialog")}-${++dialogCount}`;
     const titleId = `${uid}-title`;
     const contentId = `${uid}-content`;
-    const overlayConfig = getOverlayConfig(config);
+    const overlayConfig = getOverlayConfig();
     const overlay = document.createElement(overlayConfig.tag || "div");
     overlay.classList.add(component.getClass("dialog-overlay"));
     if (overlayConfig.attributes &&

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

@@ -234,7 +234,7 @@ export interface DialogButton {
      * Additional button attributes to pass to the button element
      * @example { 'data-id': 'save-button', 'form': 'profile-form' }
      */
-    attributes?: Record<string, any>;
+    attributes?: Record<string, unknown>;
 }
 /**
  * Dialog event object

package/dist/components/divider/features.js

@@ -43,12 +43,14 @@ export const withInset = (config) => (component) => {
             const insetEnd = config.insetEnd !== undefined ? config.insetEnd : (variant === 'middle-inset' ? 16 : 0);
             component.element.style.marginLeft = `${insetStart}px`;
             component.element.style.marginRight = `${insetEnd}px`;
+            component.element.style.width = "auto";
         }
         else {
             const insetStart = config.insetStart !== undefined ? config.insetStart : 16;
             const insetEnd = config.insetEnd !== undefined ? config.insetEnd : (variant === 'middle-inset' ? 16 : 0);
             component.element.style.marginTop = `${insetStart}px`;
             component.element.style.marginBottom = `${insetEnd}px`;
+            component.element.style.height = "auto";
         }
     }
     return {

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

@@ -34,9 +34,9 @@ interface ApiOptions {
 interface ComponentWithElements {
     element: HTMLElement;
     getClass: (name: string) => string;
-    on?: (event: string, handler: Function) => ComponentWithElements;
-    off?: (event: string, handler: Function) => ComponentWithElements;
-    addClass?: (...classes: string[]) => ComponentWithElements;
+    on?: (event: string, handler: Function) => unknown;
+    off?: (event: string, handler: Function) => unknown;
+    addClass?: (...classes: string[]) => unknown;
 }
 /**
  * Enhances a drawer component with public API methods.

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

@@ -30,7 +30,7 @@ export declare const createBaseConfig: (config?: DrawerConfig) => DrawerConfig;
 export declare const getElementConfig: (config: DrawerConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -46,7 +46,7 @@ export declare const getElementConfig: (config: DrawerConfig) => {
     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/drawer/drawer.d.ts

@@ -55,5 +55,5 @@ import { DrawerConfig } from "./types.js";
  *
  * @category Components
  */
-declare const createDrawer: (config?: DrawerConfig) => any;
+declare const createDrawer: (config?: DrawerConfig) => import("./types.js").DrawerComponent;
 export default createDrawer;

package/dist/components/drawer/features/headline.d.ts

@@ -5,7 +5,17 @@ import { DrawerConfig } from "../types.js";
 interface HeadlineBaseComponent {
     element: HTMLElement;
     getClass: (name: string) => string;
-    [key: string]: unknown;
+}
+/**
+ * What withHeadline adds
+ */
+export interface HeadlineFeature {
+    headlineElement: HTMLElement | null;
+    drawerHeadline: {
+        setHeadline: (text: string) => void;
+        getHeadline: () => string;
+        getElement: () => HTMLElement | null;
+    };
 }
 /**
  * Adds headline management to the drawer component
@@ -13,5 +23,5 @@ interface HeadlineBaseComponent {
  * @param config - Drawer configuration
  * @returns Component enhancer function
  */
-export declare const withHeadline: (config: DrawerConfig) => (component: HeadlineBaseComponent) => HeadlineBaseComponent;
+export declare const withHeadline: (config: DrawerConfig) => <C extends HeadlineBaseComponent>(component: C) => C & HeadlineFeature;
 export {};

package/dist/components/drawer/features/items.d.ts

@@ -1,4 +1,4 @@
-import { DrawerConfig } from "../types.js";
+import { DrawerConfig, DrawerItemConfig } from "../types.js";
 /**
  * Component shape expected by withItems
  */
@@ -6,7 +6,21 @@ interface ItemsBaseComponent {
     element: HTMLElement;
     getClass: (name: string) => string;
     emit: (event: string, data?: unknown) => void;
-    [key: string]: unknown;
+}
+/**
+ * What withItems adds
+ */
+export interface ItemsFeature {
+    itemsContainer: HTMLElement | null;
+    drawerItems: {
+        setActive: (id: string) => void;
+        getActive: () => string | null;
+        setItems: (items: DrawerItemConfig[]) => void;
+        getItems: () => DrawerItemConfig[];
+        setBadge: (id: string, badge: string) => void;
+        renderItems: () => void;
+        destroy: () => void;
+    };
 }
 /**
  * Adds item management functionality to the drawer component
@@ -14,5 +28,5 @@ interface ItemsBaseComponent {
  * @param config - Drawer configuration
  * @returns Component enhancer function
  */
-export declare const withItems: (config: DrawerConfig) => (component: ItemsBaseComponent) => ItemsBaseComponent;
+export declare const withItems: (config: DrawerConfig) => <C extends ItemsBaseComponent>(component: C) => C & ItemsFeature;
 export {};

package/dist/components/drawer/features/state.d.ts

@@ -3,8 +3,20 @@ interface StateBaseComponent {
     element: HTMLElement;
     getClass: (name: string) => string;
     emit: (event: string, data?: unknown) => void;
-    [key: string]: unknown;
+}
+/**
+ * What withState adds
+ */
+export interface StateFeature {
+    scrimElement: HTMLElement | null;
+    drawerState: {
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
+        isOpen: () => boolean;
+    };
+    _stateCleanup: () => void;
 }
 /** Standard drawers remain in the page; modal drawers own focus and background interaction. */
-export declare const withState: (config: DrawerConfig) => (component: StateBaseComponent) => StateBaseComponent;
+export declare const withState: (config: DrawerConfig) => <C extends StateBaseComponent>(component: C) => C & StateFeature;
 export {};

package/dist/components/extended-fab/api.d.ts

@@ -1,4 +1,6 @@
 import { ExtendedFabComponent } from "./types.js";
+import type { IconManager } from "../../core/compose/features/icon.js";
+import type { TextManager } from "../../core/compose/features/text.js";
 /**
  * API configuration options for the Extended FAB component
  *
@@ -27,7 +29,7 @@ interface ApiOptions {
      */
     text: {
         /** Sets text content */
-        setText: (text: string) => any;
+        setText: (text: string) => unknown;
         /** Gets text content */
         getText: () => string;
     };
@@ -42,13 +44,19 @@ interface ApiOptions {
  * @category Components
  * @internal
  */
-interface ComponentWithElements {
+interface ComponentWithElements extends Pick<ExtendedFabComponent, 'disabled' | 'lifecycle'> {
+    /** Subscribes to an event; the API returns the component itself */
+    on: (event: string, handler: Function) => unknown;
+    /** Unsubscribes from an event; the API returns the component itself */
+    off: (event: string, handler: Function) => unknown;
+    /** Adds CSS classes; the API returns the component itself */
+    addClass: (...classes: string[]) => unknown;
     /** The DOM element */
     element: HTMLElement;
     /** Icon management */
     icon: {
         /** Sets icon HTML content */
-        setIcon: (html: string) => any;
+        setIcon: (html: string) => IconManager;
         /** Gets icon HTML content */
         getIcon: () => string;
         /** Gets icon DOM element */
@@ -57,7 +65,7 @@ interface ComponentWithElements {
     /** Text management */
     text: {
         /** Sets text content */
-        setText: (text: string) => any;
+        setText: (text: string) => TextManager;
         /** Gets text content */
         getText: () => string;
         /** Gets text DOM element */

package/dist/components/extended-fab/api.js

@@ -71,6 +71,18 @@ export const withAPI = ({ disabled, lifecycle, text, className }) => (component)
         component.element.dispatchEvent(event);
         return this;
     },
+    on(event, handler) {
+        component.on(event, handler);
+        return this;
+    },
+    off(event, handler) {
+        component.off(event, handler);
+        return this;
+    },
+    addClass(...classes) {
+        component.addClass(...classes);
+        return this;
+    },
     destroy() {
         lifecycle.destroy();
     }

package/dist/components/extended-fab/config.d.ts

@@ -1,4 +1,4 @@
-import { ExtendedFabConfig } from "./types.js";
+import { ExtendedFabConfig, ExtendedFabComponent } from "./types.js";
 /**
  * Default configuration for the Extended FAB component
  *
@@ -38,7 +38,7 @@ export declare const createBaseConfig: (config?: ExtendedFabConfig) => ExtendedF
 export declare const getElementConfig: (config: ExtendedFabConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -54,7 +54,7 @@ export declare const getElementConfig: (config: ExtendedFabConfig) => {
     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;
 };
 /**
@@ -69,18 +69,18 @@ export declare const getElementConfig: (config: ExtendedFabConfig) => {
  * @category Components
  * @internal
  */
-export declare const getApiConfig: (comp: any) => {
+export declare const getApiConfig: (comp: Pick<ExtendedFabComponent, "disabled" | "lifecycle" | "getClass" | "text">) => {
     disabled: {
-        enable: () => any;
-        disable: () => any;
+        enable: () => void;
+        disable: () => void;
     };
     lifecycle: {
-        destroy: () => any;
+        destroy: () => void;
     };
-    className: any;
+    className: string;
     text: {
-        setText: (text: string) => any;
-        getText: () => any;
+        setText: (text: string) => import("../../core/compose/features/text.js").TextManager;
+        getText: () => string;
     };
 };
 export default defaultConfig;

package/dist/components/extended-fab/types.d.ts

@@ -1,3 +1,5 @@
+import type { IconManager } from "../../core/compose/features/icon.js";
+import type { TextManager } from "../../core/compose/features/text.js";
 /**
  * Extended FAB variants following Material Design 3 guidelines
  *
@@ -398,7 +400,7 @@ export interface ExtendedFabComponent {
      */
     icon: {
         /** Sets the icon HTML content */
-        setIcon: (html: string) => any;
+        setIcon: (html: string) => IconManager;
         /** Gets the current icon HTML content */
         getIcon: () => string;
         /** Gets the icon DOM element */
@@ -411,7 +413,7 @@ export interface ExtendedFabComponent {
      */
     text: {
         /** Sets the text content */
-        setText: (text: string) => any;
+        setText: (text: string) => TextManager;
         /** Gets the current text content */
         getText: () => string;
         /** Gets the text DOM element */

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

@@ -1,4 +1,5 @@
 import { FabComponent } from "./types.js";
+import type { IconManager } from "../../core/compose/features/icon.js";
 /**
  * API configuration options for the FAB component
  *
@@ -33,13 +34,19 @@ interface ApiOptions {
  * @category Components
  * @internal
  */
-interface ComponentWithElements {
+interface ComponentWithElements extends Pick<FabComponent, 'disabled' | 'lifecycle'> {
+    /** Subscribes to an event; the API returns the component itself */
+    on: (event: string, handler: Function) => unknown;
+    /** Unsubscribes from an event; the API returns the component itself */
+    off: (event: string, handler: Function) => unknown;
+    /** Adds CSS classes; the API returns the component itself */
+    addClass: (...classes: string[]) => unknown;
     /** The DOM element */
     element: HTMLElement;
     /** Icon management */
     icon: {
         /** Sets icon HTML content */
-        setIcon: (html: string) => any;
+        setIcon: (html: string) => IconManager;
         /** Gets icon HTML content */
         getIcon: () => string;
         /** Gets icon DOM element */

package/dist/components/fab/api.js

@@ -46,6 +46,18 @@ export const withAPI = ({ disabled, lifecycle, className }) => (component) => ({
         component.element.classList.remove(`${className}--lowered`);
         return this;
     },
+    on(event, handler) {
+        component.on(event, handler);
+        return this;
+    },
+    off(event, handler) {
+        component.off(event, handler);
+        return this;
+    },
+    addClass(...classes) {
+        component.addClass(...classes);
+        return this;
+    },
     destroy() {
         lifecycle.destroy();
     }