mtrl 0.8.0 → 0.9.1

package/dist/components/search/features/suggestions.js

@@ -1,8 +1,8 @@
 import { SEARCH_CLASSES, SEARCH_KEYS, SEARCH_ICONS } from "../constants.js";
 import { createElement } from "../../../core/dom/create.js";
-export const withSuggestions = (config) => (component) => {
+export const withSuggestions = () => (component) => {
     let highlightedIndex = -1;
-    let currentSuggestions = [];
+    const currentSuggestions = [];
     const getClass = (className) => {
         return component.getClass ? component.getClass(className) : className;
     };
@@ -14,16 +14,17 @@ export const withSuggestions = (config) => (component) => {
     };
     const highlightMatch = (text, query) => {
         if (!query)
-            return text;
-        const lowerText = text.toLowerCase();
-        const lowerQuery = query.toLowerCase();
-        const matchIndex = lowerText.indexOf(lowerQuery);
+            return [document.createTextNode(text)];
+        const matchIndex = text.toLowerCase().indexOf(query.toLowerCase());
         if (matchIndex === -1)
-            return text;
-        const beforeMatch = text.slice(0, matchIndex);
-        const match = text.slice(matchIndex, matchIndex + query.length);
-        const afterMatch = text.slice(matchIndex + query.length);
-        return `${beforeMatch}<strong>${match}</strong>${afterMatch}`;
+            return [document.createTextNode(text)];
+        const strong = document.createElement("strong");
+        strong.textContent = text.slice(matchIndex, matchIndex + query.length);
+        return [
+            document.createTextNode(text.slice(0, matchIndex)),
+            strong,
+            document.createTextNode(text.slice(matchIndex + query.length)),
+        ];
     };
     const createSuggestionItem = (suggestion, index, query) => {
         const isHighlighted = index === highlightedIndex;
@@ -43,7 +44,7 @@ export const withSuggestions = (config) => (component) => {
             },
         });
         if (suggestion.icon) {
-            const iconElement = createElement({
+            createElement({
                 tag: "span",
                 className: getClass(SEARCH_CLASSES.SUGGESTION_ICON),
                 container: item,
@@ -51,19 +52,19 @@ export const withSuggestions = (config) => (component) => {
             });
         }
         else {
-            const iconElement = createElement({
+            createElement({
                 tag: "span",
                 className: getClass(SEARCH_CLASSES.SUGGESTION_ICON),
                 container: item,
                 html: SEARCH_ICONS.HISTORY,
             });
         }
-        const textElement = createElement({
+        const label = createElement({
             tag: "span",
             className: getClass(SEARCH_CLASSES.SUGGESTION_TEXT),
             container: item,
-            html: highlightMatch(suggestion.text, query),
         });
+        label.append(...highlightMatch(suggestion.text, query));
         return item;
     };
     const createDivider = () => {

package/dist/components/search/search.js

@@ -7,7 +7,7 @@ import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
 const createSearch = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     try {
-        const component = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withStructure(baseConfig), withStates(baseConfig), withInput(baseConfig), withSuggestions(baseConfig), withLifecycle())(baseConfig);
+        const component = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withStructure(baseConfig), withStates(baseConfig), withInput(baseConfig), withSuggestions(), withLifecycle())(baseConfig);
         const apiOptions = getApiConfig(component);
         const search = withAPI(apiOptions)(component);
         if (baseConfig.on && typeof search.on === "function") {

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

@@ -3,11 +3,7 @@ import { SegmentedButtonConfig, SelectionMode } from "./types.js";
  * Default configuration values for segmented buttons
  * @internal
  */
-export declare const DEFAULT_CONFIG: {
-    mode: "single";
-    ripple: true;
-    density: "default";
-};
+export declare const DEFAULT_CONFIG: SegmentedButtonConfig;
 /**
  * Creates the base configuration for Segmented Button component
  * @param {SegmentedButtonConfig} config - User provided configuration

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

@@ -2,7 +2,7 @@ import { createComponentConfig } from "../../core/config/component.js";
 import { SelectionMode, Density } from "./types.js";
 import { SEGMENTED_BUTTON_DEFAULTS } from "./constants.js";
 export const DEFAULT_CONFIG = {
-    mode: SEGMENTED_BUTTON_DEFAULTS.MODE,
+    mode: SelectionMode.SINGLE,
     ripple: SEGMENTED_BUTTON_DEFAULTS.RIPPLE,
     density: SEGMENTED_BUTTON_DEFAULTS.DENSITY,
 };

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

@@ -1,8 +1,8 @@
-import { SelectComponent, ApiOptions } from "./types.js";
+import { SelectComponent, ApiOptions, BaseComponent } from "./types.js";
 /**
  * Enhances a select component with API methods
  * @param options - API configuration options
  * @returns Higher-order function that adds API methods to component
  * @internal
  */
-export declare const withAPI: (options: ApiOptions) => (component: any) => SelectComponent;
+export declare const withAPI: (options: ApiOptions) => (component: BaseComponent) => SelectComponent;

package/dist/components/select/features.d.ts

@@ -4,10 +4,10 @@ import { SelectConfig, BaseComponent } from "./types.js";
  * @param config - Select configuration
  * @returns Function that enhances a component with textfield functionality
  */
-export declare const withTextfield: (config: SelectConfig) => (component: BaseComponent) => BaseComponent;
+export declare const withTextfield: (config: SelectConfig) => <C extends object>(component: C) => C & Required<Pick<BaseComponent, "element" | "textfield">>;
 /**
  * Creates a menu for the select component
  * @param config - Select configuration
  * @returns Function that enhances a component with menu functionality
  */
-export declare const withMenu: (config: SelectConfig) => (component: BaseComponent) => BaseComponent;
+export declare const withMenu: (config: SelectConfig) => <C extends BaseComponent>(component: C) => C & Pick<BaseComponent, "menu" | "select">;

package/dist/components/select/features.js

@@ -54,6 +54,7 @@ export const withTextfield = (config) => (component) => {
         textfield,
     };
 };
+const isSelectOption = (value) => typeof value === "object" && value !== null && "id" in value && "text" in value;
 const processMenuItems = (options) => {
     return options.map((option) => {
         if ("type" in option && option.type === "divider") {
@@ -106,7 +107,7 @@ export const withMenu = (config) => (component) => {
             return;
         }
         const option = event.item.data;
-        if (!option || !("id" in option) || !("text" in option)) {
+        if (!isSelectOption(option)) {
             console.warn("Invalid menu selection: missing required data properties");
             return;
         }

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

@@ -1,4 +1,5 @@
-import type { MenuColor, MenuVariant } from "../menu/types.js";
+import type { MenuColor, MenuComponent, MenuVariant } from "../menu/types.js";
+import type { TextfieldComponent } from "../textfield/types.js";
 /**
  * Available Select variants
  */
@@ -42,7 +43,7 @@ export interface SelectOption {
     /**
      * Additional data associated with the option
      */
-    data?: any;
+    data?: unknown;
 }
 /**
  * Configuration interface for the Select component
@@ -153,11 +154,11 @@ export interface SelectComponent {
     /**
      * The textfield component
      */
-    textfield: any;
+    textfield: TextfieldComponent;
     /**
      * The menu component
      */
-    menu: any;
+    menu: MenuComponent;
     /**
      * Gets the select's current value (selected option id)
      */
@@ -312,45 +313,61 @@ export interface SelectEvents {
 export interface ApiOptions {
     select: {
         getValue: () => string | null;
-        setValue: (value: string | null | undefined) => any;
-        clear: () => any;
+        setValue: (value: string | null | undefined) => void;
+        clear: () => void;
         getText: () => string;
         getSelectedOption: () => SelectOption | null;
         getOptions: () => SelectOption[];
-        setOptions: (options: SelectOption[]) => any;
-        open: () => any;
-        close: () => any;
+        setOptions: (options: SelectOption[]) => void;
+        open: () => void;
+        close: () => void;
         isOpen: () => boolean;
     };
     events?: {
-        on: <T extends string>(event: T, handler: (event: any) => void) => any;
-        off: <T extends string>(event: T, handler: (event: any) => void) => any;
+        on: <T extends keyof SelectEvents>(event: T, handler: SelectEvents[T]) => void;
+        off: <T extends keyof SelectEvents>(event: T, handler: SelectEvents[T]) => void;
     };
     disabled: {
-        enable: () => any;
-        disable: () => any;
+        enable: () => void;
+        disable: () => void;
     };
     lifecycle: {
         destroy: () => void;
     };
 }
+/**
+ * Select controller added by the menu feature
+ * @internal
+ */
+export interface SelectController {
+    getValue: () => string | null;
+    setValue: (value: string | null | undefined) => BaseComponent;
+    clear: () => BaseComponent;
+    getText: () => string;
+    getSelectedOption: () => SelectOption | null;
+    getOptions: () => SelectOption[];
+    setOptions: (options: SelectOption[]) => BaseComponent;
+    open: (event?: Event, interactionType?: "mouse" | "keyboard") => BaseComponent;
+    close: (event?: Event) => BaseComponent;
+    isOpen: () => boolean;
+}
 /**
  * Base component interface
  * @internal
  */
 export interface BaseComponent {
     element: HTMLElement;
-    textfield?: any;
-    menu?: any;
-    on?: (event: string, handler: Function) => any;
-    off?: (event: string, handler: Function) => any;
-    emit?: (event: string, data: any) => void;
+    textfield?: TextfieldComponent;
+    menu?: MenuComponent;
+    select?: SelectController;
+    on?: (event: string, handler: Function) => void;
+    off?: (event: string, handler: Function) => void;
+    emit?: (event: string, data?: unknown) => void;
     disabled?: {
-        enable: () => any;
-        disable: () => any;
+        enable: () => void;
+        disable: () => void;
     };
     lifecycle?: {
         destroy: () => void;
     };
-    [key: string]: any;
 }

package/dist/components/side-sheet/config.d.ts

@@ -13,7 +13,7 @@ export declare const createBaseConfig: (config?: SideSheetConfig) => SideSheetCo
 export declare const getElementConfig: (config: SideSheetConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -29,6 +29,6 @@ export declare const getElementConfig: (config: SideSheetConfig) => {
     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/slider/api.d.ts

@@ -5,17 +5,17 @@ import { SliderSize } from "./constants.js";
  */
 interface ApiOptions {
     slider: {
-        setValue: (value: number, triggerEvent?: boolean) => any;
+        setValue: (value: number, triggerEvent?: boolean) => unknown;
         getValue: () => number;
-        setSecondValue: (value: number, triggerEvent?: boolean) => any;
+        setSecondValue: (value: number, triggerEvent?: boolean) => unknown;
         getSecondValue: () => number | null;
-        setMin: (min: number) => any;
+        setMin: (min: number) => unknown;
         getMin: () => number;
-        setMax: (max: number) => any;
+        setMax: (max: number) => unknown;
         getMax: () => number;
-        setStep: (step: number) => any;
+        setStep: (step: number) => unknown;
         getStep: () => number;
-        regenerateTicks: () => any;
+        regenerateTicks: () => unknown;
     };
     disabled: {
         enable: () => void;

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

@@ -17,7 +17,7 @@ export declare const createBaseConfig: (config?: SliderConfig) => SliderConfig;
 export declare const getElementConfig: (config: SliderConfig) => {
     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: SliderConfig) => {
     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/slider/types.d.ts

@@ -65,7 +65,7 @@ export interface SliderConfig extends BaseComponentConfig {
     /** CSS class prefix */
     prefix?: string;
     /** Component schema */
-    schema?: any;
+    schema?: object;
 }
 /**
  * Slider event data
@@ -73,7 +73,7 @@ export interface SliderConfig extends BaseComponentConfig {
  */
 export interface SliderEvent {
     /** The slider component that triggered the event */
-    slider: any;
+    slider: SliderComponent;
     /** Current slider value */
     value: number;
     /** Secondary value (for range sliders) */

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

@@ -30,7 +30,7 @@ export declare const durationToMs: (duration: SnackbarDuration | undefined, hasA
 export declare const getElementConfig: (config: SnackbarConfig) => {
     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: SnackbarConfig) => {
     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/snackbar/features.d.ts

@@ -6,7 +6,7 @@ import { BaseComponent, SnackbarConfig } from "./types.js";
  * @param {SnackbarConfig} config - Component configuration
  * @returns {Function} Higher-order function that adds the action button
  */
-export declare const withActionButton: (config: SnackbarConfig) => (component: BaseComponent) => BaseComponent;
+export declare const withActionButton: (config: SnackbarConfig) => <C extends BaseComponent>(component: C) => C & Pick<BaseComponent, "action" | "actionButton">;
 /**
  * Adds the optional close affordance: a standard icon button (40dp, 24dp
  * icon; `SnackbarTokens.IconSize`), coloured inverse-on-surface by the
@@ -14,7 +14,7 @@ export declare const withActionButton: (config: SnackbarConfig) => (component: B
  * @param {SnackbarConfig} config - Component configuration
  * @returns {Function} Higher-order function that adds the close button
  */
-export declare const withCloseButton: (config: SnackbarConfig) => (component: BaseComponent) => BaseComponent;
+export declare const withCloseButton: (config: SnackbarConfig) => <C extends BaseComponent>(component: C) => C & Pick<BaseComponent, "close" | "closeButton">;
 /**
  * Adds the auto-dismiss timer. It emits `timeout` when the duration runs out
  * and holds while the pointer is over the snackbar or focus is inside it:
@@ -23,4 +23,4 @@ export declare const withCloseButton: (config: SnackbarConfig) => (component: Ba
  * @param {SnackbarConfig} config - Component configuration
  * @returns {Function} Higher-order function that adds timer features
  */
-export declare const withDismissTimer: (config: SnackbarConfig) => (component: BaseComponent) => BaseComponent;
+export declare const withDismissTimer: (config: SnackbarConfig) => <C extends BaseComponent>(component: C) => C & Required<Pick<BaseComponent, "timer">>;

package/dist/components/snackbar/position.d.ts

@@ -12,5 +12,5 @@ interface PositionConfig {
  * @param {PositionConfig} config - Position configuration
  * @returns {Function} Higher-order function that adds position features
  */
-export declare const withPosition: (config: PositionConfig) => (component: BaseComponent) => BaseComponent;
+export declare const withPosition: (config: PositionConfig) => <C extends BaseComponent>(component: C) => C & Required<Pick<BaseComponent, "position">>;
 export {};

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

@@ -134,27 +134,26 @@ export interface SnackbarComponent {
  */
 export interface BaseComponent {
     element: HTMLElement;
-    emit?: (event: string, data?: any) => void;
-    on?: (event: string, handler: (...args: any[]) => void) => any;
-    off?: (event: string, handler: (...args: any[]) => void) => any;
+    emit?: (event: string, data?: unknown) => void;
+    on?: (event: string, handler: Function) => unknown;
+    off?: (event: string, handler: Function) => unknown;
     getClass?: (name: string) => string;
     lifecycle?: {
         destroy?: () => void;
     };
     text?: {
-        setText: (text: string) => any;
+        setText: (text: string) => unknown;
         getText: () => string;
     };
     position?: {
         getPosition: () => SnackbarPosition;
-        setPosition: (position: SnackbarPosition) => any;
+        setPosition: (position: SnackbarPosition) => unknown;
     };
     action?: ButtonComponent;
     actionButton?: HTMLElement;
     close?: IconButtonComponent;
     closeButton?: HTMLElement;
     timer?: SnackbarTimer;
-    [key: string]: any;
 }
 /**
  * Timer interface for snackbar auto-dismissal

package/dist/components/split-button/api.js

@@ -2,9 +2,7 @@ import { SPLIT_BUTTON_CLASSES, SPLIT_BUTTON_EVENTS } from "./constants.js";
 export const withAPI = ({ config, lifecycle }) => (component) => {
     const element = component.element;
     const prefix = config.prefix || "mtrl";
-    const leading = component.leading;
-    const trailing = component.trailing;
-    const menu = component.menu;
+    const { leading, trailing, menu } = component;
     const expandedClass = `${prefix}-${SPLIT_BUTTON_CLASSES.EXPANDED}`;
     let expanded = false;
     if (menu)

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

@@ -18,7 +18,7 @@ export declare const createBaseConfig: (config?: SplitButtonConfig) => SplitButt
 export declare const getElementConfig: (config: SplitButtonConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -34,7 +34,7 @@ export declare const getElementConfig: (config: SplitButtonConfig) => {
     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;
 };
 export default defaultConfig;

package/dist/components/split-button/features/buttons.d.ts

@@ -1,7 +1,8 @@
-import { BaseComponent, SplitButtonConfig } from "../types.js";
+import type { ElementComponent } from "../../../core/compose/component.js";
+import { ButtonsFeature, SplitButtonConfig } from "../types.js";
 /**
  * Adds the leading and trailing buttons
  * @param {SplitButtonConfig} config - Component configuration
  * @returns {Function} Higher-order function that adds both buttons
  */
-export declare const withButtons: (config: SplitButtonConfig) => (component: BaseComponent) => BaseComponent;
+export declare const withButtons: (config: SplitButtonConfig) => <C extends ElementComponent>(component: C) => C & ButtonsFeature;

package/dist/components/split-button/features/menu.d.ts

@@ -1,7 +1,8 @@
-import { BaseComponent, SplitButtonConfig } from "../types.js";
+import type { ElementComponent } from "../../../core/compose/component.js";
+import { ButtonsFeature, MenuFeature, SplitButtonConfig } from "../types.js";
 /**
  * Adds a menu anchored to the trailing button
  * @param {SplitButtonConfig} config - Component configuration
  * @returns {Function} Higher-order function that adds the menu
  */
-export declare const withMenu: (config: SplitButtonConfig) => (component: BaseComponent) => BaseComponent;
+export declare const withMenu: (config: SplitButtonConfig) => <C extends ElementComponent & ButtonsFeature>(component: C) => C & MenuFeature;

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

@@ -1,4 +1,5 @@
 import type { MenuContent, MenuComponent } from "../menu/types.js";
+import type { ButtonComponent } from "../button/types.js";
 /** Visual style, the same set the button offers */
 export type SplitButtonVariant = "filled" | "tonal" | "outlined" | "elevated";
 /** Size, matching the button and icon button scale */
@@ -102,8 +103,19 @@ export interface SplitButtonComponent {
     /** Takes the component off the page and releases what it holds */
     destroy: () => void;
 }
+/** What withButtons adds */
+export interface ButtonsFeature {
+    leading: ButtonComponent;
+    trailing: ButtonComponent;
+    leadingElement: HTMLElement;
+    trailingElement: HTMLElement;
+}
+/** What withMenu adds: the menu, when the component was given items */
+export interface MenuFeature {
+    menu?: MenuComponent;
+}
 /** The component as it passes through the enhancers */
-export interface BaseComponent {
+export interface BaseComponent extends ButtonsFeature, MenuFeature {
     element: HTMLElement;
     emit?: (event: string, data?: unknown) => void;
     on?: (event: string, handler: (...args: unknown[]) => void) => unknown;
@@ -112,5 +124,4 @@ export interface BaseComponent {
     lifecycle?: {
         destroy?: () => void;
     };
-    [key: string]: unknown;
 }

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

@@ -17,7 +17,7 @@ export declare const createBaseConfig: (config?: SwitchConfig) => SwitchConfig;
 export declare const getElementConfig: (config: SwitchConfig) => {
     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: SwitchConfig) => {
     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/switch/types.d.ts

@@ -136,5 +136,4 @@ export interface BaseComponent {
     supportingTextElement?: HTMLElement | null;
     setSupportingText?: (text: string, isError?: boolean) => void;
     removeSupportingText?: () => void;
-    [key: string]: unknown;
 }

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

@@ -25,13 +25,16 @@ interface ComponentWithElements {
     /** Class name helper */
     getClass: (name: string) => string;
     /** Event subscription (optional) */
-    on?: (event: string, handler: Function) => any;
+    on?: (event: string, handler: Function) => unknown;
     /** Event unsubscription (optional) */
-    off?: (event: string, handler: Function) => any;
-    /** Event emission (optional) */
-    emit?: (event: string, data: any) => any;
+    off?: (event: string, handler: Function) => unknown;
+    /** Event emission (optional); returns `this`, the tabs component once spread */
+    emit?: TabsComponent['emit'];
     /** Component configuration */
-    config: Record<string, any>;
+    config: {
+        prefix?: string;
+        variant?: string;
+    };
 }
 /**
  * Enhances a tabs component with API methods

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

@@ -12,7 +12,15 @@ export declare const defaultTabsConfig: {
     showDivider: true;
     componentName: string;
 };
-export declare const createTabsConfig: (config?: {}) => import("../../core/config/component.js").BaseComponentConfig;
+export declare const createTabsConfig: (config?: {}) => {
+    variant: "primary";
+    scrollable: true;
+    showDivider: true;
+    componentName: string;
+} & {
+    componentName: string;
+    prefix: string;
+};
 /**
  * Creates the base configuration for a Tab
  * @param {TabConfig} config - User provided configuration

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

@@ -4,10 +4,10 @@ interface ComponentBase {
     element: HTMLElement;
     getClass: (name: string) => string;
     scrollContainer?: HTMLElement;
-    emit?: (event: string, data: any) => any;
+    emit?: (event: string, data?: unknown) => unknown;
     destroy?: () => void;
     tabs?: TabComponent[];
-    handleTabClick?: (event: any, tab: TabComponent) => void;
+    handleTabClick?: (event: unknown, tab: TabComponent) => void;
     variant?: string;
 }
 /**
@@ -20,8 +20,6 @@ export interface TabsManagementConfig {
     variant?: string;
     /** Component prefix */
     prefix?: string;
-    /** Other configuration properties */
-    [key: string]: any;
 }
 /**
  * Component with tabs management capabilities
@@ -43,15 +41,13 @@ export interface TabsManagementComponent {
  * @param {TabsManagementConfig} config - Tabs configuration
  * @returns {Function} Component enhancer with tabs management
  */
-export declare const withTabsManagement: <T extends TabsManagementConfig>(config: T) => <C extends ComponentBase>(component: C) => C & TabsManagementComponent;
+export declare const withTabsManagement: <T extends TabsManagementConfig & object>(config: T) => <C extends ComponentBase>(component: C) => C & TabsManagementComponent;
 /**
  * Configuration for scrollable feature
  */
 export interface ScrollableConfig {
     /** Whether tabs are scrollable horizontally */
     scrollable?: boolean;
-    /** Other configuration properties */
-    [key: string]: any;
 }
 /**
  * Component with scrollable capabilities
@@ -65,28 +61,28 @@ export interface ScrollableComponent {
  * @param {ScrollableConfig} config - Scrollable configuration
  * @returns {Function} Component enhancer with scrollable container
  */
-export declare const withScrollable: <T extends ScrollableConfig>(config: T) => <C extends ComponentBase>(component: C) => C & ScrollableComponent;
+export declare const withScrollable: <T extends ScrollableConfig & object>(config: T) => <C extends ComponentBase>(component: C) => C & ScrollableComponent;
 /**
  * Configuration for divider feature
  */
 export interface DividerConfig {
     /** Whether to show a divider below the tabs */
     showDivider?: boolean;
-    /** Other configuration properties */
-    [key: string]: any;
 }
 /**
  * Adds a divider to a component
  * @param {DividerConfig} config - Divider configuration
  * @returns {Function} Component enhancer with divider
  */
-export declare const withDivider: <T extends DividerConfig>(config: T) => <C extends ComponentBase>(component: C) => C;
+export declare const withDivider: <T extends DividerConfig & object>(config: T) => <C extends ComponentBase>(component: C) => C;
 /**
  * Configuration for indicator feature
  */
 export interface IndicatorFeatureConfig {
     /** Component prefix */
     prefix?: string;
+    /** Tabs variant passed to the indicator */
+    variant?: string;
     /** Width strategy for the indicator */
     widthStrategy?: "fixed" | "dynamic" | "content";
     /** Height of the indicator in pixels */