mtrl 0.8.0 → 0.9.1

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

@@ -29,7 +29,7 @@ export declare const createBaseConfig: (config?: BadgeConfig) => BadgeConfig;
 export declare const getElementConfig: (config: BadgeConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -45,7 +45,7 @@ export declare const getElementConfig: (config: BadgeConfig) => {
     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/bottom-sheet/bottom-sheet.js

@@ -6,7 +6,7 @@ import { withAPI, applyEventHandlers } from "./api.js";
 import { createBaseConfig, getElementConfig } from "./config.js";
 const createBottomSheet = (config = {}) => {
     const baseConfig = createBaseConfig(config);
-    const component = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withStructure(baseConfig), withState(baseConfig), withDrag(baseConfig), withLifecycle())(baseConfig);
+    const component = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withStructure(baseConfig), withState(baseConfig), withDrag(), withLifecycle())(baseConfig);
     applyEventHandlers(component, baseConfig.on);
     return withAPI({
         state: component.state,

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

@@ -13,7 +13,7 @@ export declare const createBaseConfig: (config?: BottomSheetConfig) => BottomShe
 export declare const getElementConfig: (config: BottomSheetConfig) => {
     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: BottomSheetConfig) => {
     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/bottom-sheet/features/drag.d.ts

@@ -1,4 +1,4 @@
-import { BottomSheetConfig, BottomSheetState } from "../types.js";
+import { BottomSheetState } from "../types.js";
 interface DragComponent {
     getClass: (name: string) => string;
     emit: (event: string, data?: unknown) => unknown;
@@ -20,7 +20,7 @@ interface DragComponent {
  * does the same however short it was, so a quick flick works without having to
  * cover the distance.
  */
-export declare const withDrag: (config: BottomSheetConfig) => <C extends DragComponent>(component: C) => (C & {
+export declare const withDrag: () => <C extends DragComponent>(component: C) => (C & {
     drag: {
         release: () => void;
     };

package/dist/components/bottom-sheet/features/drag.js

@@ -1,5 +1,5 @@
 import { BOTTOM_SHEET_DEFAULTS, BOTTOM_SHEET_EVENTS, BOTTOM_SHEET_STATES, } from "../constants.js";
-export const withDrag = (config) => (component) => {
+export const withDrag = () => (component) => {
     const { structure, state } = component;
     const handle = structure.handle;
     if (!handle)

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

@@ -34,9 +34,9 @@ interface ComponentWithElements {
     };
     getClass: (name: string) => string;
     componentName?: 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;
     toggle?: {
         setSelected: (selected: boolean) => void;
         isSelected: () => boolean;

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

@@ -61,5 +61,5 @@ import { ButtonConfig } from "./types.js";
  *
  * @category Components
  */
-declare const createButton: (config?: ButtonConfig) => any;
+declare const createButton: (config?: ButtonConfig) => import("./types.js").ButtonComponent;
 export default createButton;

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

@@ -30,7 +30,7 @@ export declare const createBaseConfig: (config?: ButtonConfig) => ButtonConfig;
 export declare const getElementConfig: (config: ButtonConfig) => {
     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: ButtonConfig) => {
     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/button/features/progress.d.ts

@@ -1,20 +1,32 @@
 import type { ProgressComponent } from "../../progress/types.js";
-import { ButtonConfig } from "../types.js";
+import { ButtonConfig, IconAPI } from "../types.js";
 /**
  * Component with progress capabilities
  */
 interface ProgressEnhancedComponent {
     element: HTMLElement;
-    icon?: any;
+    icon?: IconAPI;
     getClass: (name: string) => string;
     progress?: ProgressComponent;
     disabled?: {
         enable: () => void;
         disable: () => void;
     };
-    setText?: (text: string) => any;
+    lifecycle?: {
+        destroy: () => void;
+    };
+    setText?: (text: string) => unknown;
     getText?: () => string;
-    [key: string]: any;
+    showProgress?: () => Promise<ProgressEnhancedComponent>;
+    showProgressSync?: () => ProgressEnhancedComponent;
+    hideProgress?: () => Promise<ProgressEnhancedComponent>;
+    hideProgressSync?: () => ProgressEnhancedComponent;
+    setProgress?: (value: number) => Promise<ProgressEnhancedComponent>;
+    setProgressSync?: (value: number) => ProgressEnhancedComponent;
+    setIndeterminate?: (indeterminate: boolean) => Promise<ProgressEnhancedComponent>;
+    setIndeterminateSync?: (indeterminate: boolean) => ProgressEnhancedComponent;
+    setLoading?: (loading: boolean, text?: string) => Promise<ProgressEnhancedComponent>;
+    setLoadingSync?: (loading: boolean, text?: string) => ProgressEnhancedComponent;
 }
 /**
  * Adds progress functionality to a button component
@@ -22,5 +34,5 @@ interface ProgressEnhancedComponent {
  * @param config - Button configuration with progress options
  * @returns Component enhancer function
  */
-export declare const withProgress: (config: ButtonConfig) => (component: ProgressEnhancedComponent) => ProgressEnhancedComponent;
+export declare const withProgress: (config: ButtonConfig) => <C extends ProgressEnhancedComponent>(component: C) => C;
 export {};

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

@@ -69,6 +69,26 @@ export declare const getButtonConfig: (buttonConfig: ButtonGroupConfig["buttons"
     value?: string;
     selectedIcon?: string;
     selected?: boolean;
+    name?: string;
+    title?: string;
+    tabIndex?: number;
+    style?: string | Partial<CSSStyleDeclaration>;
+    data?: Record<string, string>;
+    role?: string;
+    ariaDescribedBy?: string;
+    ariaLabelledBy?: string;
+    ariaHidden?: boolean;
+    className?: string | string[];
+    rawClass?: string | string[];
+    progress?: import("../index.js").ProgressConfig | boolean;
+    toggle?: boolean;
+    componentName?: string;
+    type?: "button" | "submit" | "reset";
+    iconSize?: string;
+    prefix?: string;
+    showProgress?: boolean;
+    toggleOnClick?: boolean;
+    parent?: HTMLElement | string | null;
 };
 /**
  * Maps variant name to button variant

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

@@ -8,4 +8,13 @@ import { BaseComponent, CardComponent, ApiOptions } from "./types.js";
  * @returns {Function} Higher-order function that adds API methods to component
  * @category Components
  */
-export declare const withAPI: ({ lifecycle }: ApiOptions) => (component: BaseComponent) => CardComponent;
+/**
+ * The card as the pipe hands it over: the API sets `config` from the options,
+ * and addClass returns the card itself once the API wraps it
+ * @internal
+ */
+type ComponentWithElements = Omit<BaseComponent, 'config' | 'addClass'> & {
+    addClass: (...classes: string[]) => unknown;
+};
+export declare const withAPI: ({ lifecycle, config }: ApiOptions) => (component: ComponentWithElements) => CardComponent;
+export {};

package/dist/components/card/api.js

@@ -1,6 +1,7 @@
-export const withAPI = ({ lifecycle }) => (component) => ({
+export const withAPI = ({ lifecycle, config }) => (component) => ({
     ...component,
     element: component.element,
+    config,
     addContent(contentElement) {
         if (contentElement && contentElement.classList.contains(`${component.getClass('card')}-content`)) {
             component.element.appendChild(contentElement);
@@ -68,6 +69,10 @@ export const withAPI = ({ lifecycle }) => (component) => ({
         component.element.focus();
         return this;
     },
+    addClass(...classes) {
+        component.addClass(...classes);
+        return this;
+    },
     destroy() {
         lifecycle.destroy();
     }

package/dist/components/card/card.js

@@ -8,7 +8,7 @@ const createCard = (config = {}) => {
     const processedConfig = processInlineConfig(config);
     const baseConfig = createBaseConfig(processedConfig);
     try {
-        const card = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withVariant(baseConfig), baseConfig.clickable ? withRipple(baseConfig) : (c) => c, withLifecycle(), withInteractiveBehavior, withElevation, comp => withAPI(getApiConfig(comp))(comp))(baseConfig);
+        const card = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withVariant(baseConfig), baseConfig.clickable ? withRipple(baseConfig) : (c) => c, withLifecycle(), withInteractiveBehavior, withElevation, comp => withAPI({ ...getApiConfig(comp), config: baseConfig })(comp))(baseConfig);
         applyInlineConfiguration(card, processedConfig);
         return card;
     }

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

@@ -1,4 +1,6 @@
-import { CardComponent, CardSchema, BaseComponent } from "./types.js";
+import type { ElementComponent } from "../../core/compose/component.js";
+import type { EventComponent } from "../../core/compose/features/index.js";
+import { CardComponent, CardComponentConfig, CardSchema } from "./types.js";
 /**
  * Default configuration for the Card component.
  * These values are used when no configuration is provided.
@@ -42,7 +44,7 @@ export declare const applyInlineConfiguration: (card: CardComponent, config: Car
  * @category Components
  *
  */
-export declare const createBaseConfig: (config?: CardSchema) => CardSchema;
+export declare const createBaseConfig: (config?: CardSchema) => CardComponentConfig;
 /**
  * Generates element configuration for the Card component.
  * Sets up DOM attributes, accessibility features, and event forwarding
@@ -56,7 +58,7 @@ export declare const createBaseConfig: (config?: CardSchema) => CardSchema;
 export declare const getElementConfig: (config: CardSchema) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -72,7 +74,7 @@ export declare const getElementConfig: (config: CardSchema) => {
     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;
 };
 /**
@@ -84,9 +86,13 @@ export declare const getElementConfig: (config: CardSchema) => {
  * @category Components
  *
  */
-export declare const getApiConfig: (comp: any) => {
+export declare const getApiConfig: (comp: {
+    lifecycle?: {
+        destroy?: () => void;
+    };
+}) => {
     lifecycle: {
-        destroy: () => any;
+        destroy: () => void;
     };
 };
 /**
@@ -107,10 +113,10 @@ export declare const CARD_ELEVATION_LEVELS: {
  * guidelines. Implements mouse, keyboard, and touch interactions with appropriate
  * visual feedback and accessibility support.
  *
- * @param {BaseComponent} comp - Card component
- * @returns {BaseComponent} Enhanced card component
+ * @param {ElementComponent} comp - Card component
+ * @returns {ElementComponent} Enhanced card component
  * @category Components
  *
  */
-export declare const withInteractiveBehavior: (comp: BaseComponent) => BaseComponent;
+export declare const withInteractiveBehavior: <C extends ElementComponent & EventComponent>(comp: C) => C;
 export default defaultConfig;

package/dist/components/card/content.js

@@ -2,6 +2,7 @@ import { PREFIX } from "../../core/config.js";
 import { pipe } from "../../core/compose/index.js";
 import { createBase, withElement } from "../../core/compose/component.js";
 import { createElement } from "../../core/dom/create.js";
+import { safeUrl } from "../../core/utils/url.js";
 export const CARD_CONTENT_PADDING = true;
 export const createCardContent = (config = {}) => {
     const baseConfig = {
@@ -26,7 +27,9 @@ export const createCardContent = (config = {}) => {
             content.element.innerHTML = config.html;
         }
         else if (config.text) {
-            content.element.innerHTML = `<p>${config.text}</p>`;
+            const paragraph = document.createElement("p");
+            paragraph.textContent = config.text;
+            content.element.appendChild(paragraph);
         }
         if (Array.isArray(config.children)) {
             config.children.forEach(child => {
@@ -178,7 +181,7 @@ export const createCardMedia = (config = {}) => {
         }
         else if (config.src) {
             const img = document.createElement('img');
-            img.src = config.src;
+            img.src = safeUrl(config.src);
             img.className = `${PREFIX}-card-media-img`;
             img.alt = config.alt || '';
             if (!config.alt) {

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

@@ -1,3 +1,4 @@
+import type { ElementComponent } from "../../core/compose/component.js";
 import { BaseComponent, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature } from "./types.js";
 interface LoadingConfig {
     initialState?: boolean;
@@ -73,7 +74,7 @@ export declare const withLoading: (config?: LoadingConfig) => (component: BaseCo
  * )(baseConfig);
  * ```
  */
-export declare const withElevation: (component: BaseComponent) => BaseComponent;
+export declare const withElevation: <C extends ElementComponent>(component: C) => C;
 /**
  * Higher-order function to add expandable behavior to a card.
  * Creates a collapsible section with proper accessibility attributes and

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

@@ -1,3 +1,4 @@
+import type { ButtonConfig as BaseButtonConfig } from "../button/types.js";
 /**
  * Card variant types following Material Design 3 guidelines.
  * - elevated: Card with shadow elevation (default)
@@ -22,15 +23,13 @@ export type CardElevationLevel = 0 | 1 | 2 | 4;
  * @interface ButtonConfig
  * @category Components
  */
-export interface ButtonConfig {
+export interface ButtonConfig extends Omit<BaseButtonConfig, "variant"> {
     /** Button text content */
     text?: string;
     /** Button variant (text, outlined, filled, etc.) */
     variant?: string;
     /** Button icon HTML content */
     icon?: string;
-    /** Additional button properties passed to button component */
-    [key: string]: any;
 }
 /**
  * Card configuration interface defining all possible card options.
@@ -218,7 +217,7 @@ export interface BaseComponent {
     /** Add CSS class(es) */
     addClass: (...classes: string[]) => BaseComponent;
     /** Emit an event */
-    emit?: (event: string, data?: any) => void;
+    emit?: (event: string, data?: unknown) => void;
     /** Component configuration */
     config: CardComponentConfig;
     /** Touch state for touch interactions */
@@ -468,4 +467,6 @@ export interface ApiOptions {
         /** Destroy callback */
         destroy: () => void;
     };
+    /** The resolved configuration the card was created from */
+    config: CardComponentConfig;
 }

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

@@ -6,7 +6,7 @@ export declare const createBaseConfig: (config?: CarouselConfig) => CarouselConf
 export declare const getElementConfig: (config: CarouselConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -22,6 +22,6 @@ export declare const getElementConfig: (config: CarouselConfig) => {
     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/carousel/features/slides.js

@@ -1,3 +1,4 @@
+import { safeUrl } from "../../../core/utils/url.js";
 export const withSlides = (config) => (component) => {
     const prefix = component.getClass("carousel");
     const scroller = document.createElement("div");
@@ -29,7 +30,7 @@ export const withSlides = (config) => (component) => {
         if (slide.image) {
             const img = document.createElement("img");
             img.className = `${prefix}__image`;
-            img.src = slide.image;
+            img.src = safeUrl(slide.image);
             img.alt = slide.alt ?? slide.title ?? "";
             img.draggable = false;
             el.appendChild(img);
@@ -54,7 +55,7 @@ export const withSlides = (config) => (component) => {
                 button.className = `${prefix}__button`;
                 button.textContent = slide.buttonText;
                 if (slide.buttonUrl)
-                    button.href = slide.buttonUrl;
+                    button.href = safeUrl(slide.buttonUrl);
                 content.appendChild(button);
             }
             el.appendChild(content);

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

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

@@ -206,16 +206,16 @@ export interface CheckboxComponent {
  */
 export interface ApiOptions {
     disabled: {
-        enable: () => any;
-        disable: () => any;
+        enable: () => void;
+        disable: () => void;
     };
     lifecycle: {
         destroy: () => void;
     };
     checkable: {
-        check: () => any;
-        uncheck: () => any;
-        toggle: () => any;
+        check: () => void;
+        uncheck: () => void;
+        toggle: () => void;
         isChecked: () => boolean;
     };
 }
@@ -228,26 +228,25 @@ export interface BaseComponent {
     element: HTMLElement;
     input?: HTMLInputElement;
     getValue?: () => string;
-    setValue?: (value: string) => any;
-    setIndeterminate?: (state: boolean) => any;
+    setValue?: (value: string) => void;
+    setIndeterminate?: (state: boolean) => void;
     text?: {
-        setText: (content: string) => any;
+        setText: (content: string) => void;
         getText: () => string;
     };
-    on?: (event: string, handler: Function) => any;
-    off?: (event: string, handler: Function) => any;
+    on?: (event: string, handler: Function) => this;
+    off?: (event: string, handler: Function) => this;
     disabled?: {
-        enable: () => any;
-        disable: () => any;
+        enable: () => void;
+        disable: () => void;
     };
     lifecycle?: {
         destroy: () => void;
     };
     checkable?: {
-        check: () => any;
-        uncheck: () => any;
-        toggle: () => any;
+        check: () => void;
+        uncheck: () => void;
+        toggle: () => void;
         isChecked: () => boolean;
     };
-    [key: string]: any;
 }

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

@@ -1,4 +1,4 @@
-import { ChipsComponent, ChipComponent } from "./types.js";
+import { ChipsComponent, ChipComponent, ChipConfig } from "./types.js";
 /**
  * API options interface - structured by feature area
  */
@@ -7,7 +7,7 @@ interface ApiOptions {
         multiSelect: boolean;
     };
     chips: {
-        addChip: (chipConfig: any) => ChipComponent;
+        addChip: (chipConfig: ChipConfig) => ChipComponent;
         removeChip: (chipOrIndex: ChipComponent | number) => void;
         getChips: () => ChipComponent[];
         getSelectedChips: () => ChipComponent[];
@@ -17,15 +17,15 @@ interface ApiOptions {
         scrollToChip: (chipOrIndex: ChipComponent | number) => void;
     };
     layout: {
-        setScrollable: (isScrollable: boolean) => any;
+        setScrollable: (isScrollable: boolean) => void;
         isScrollable: () => boolean;
-        setVertical: (isVertical: boolean) => any;
+        setVertical: (isVertical: boolean) => void;
         isVertical: () => boolean;
     };
     label: {
-        setText: (text: string) => any;
+        setText: (text: string) => void;
         getText: () => string;
-        setPosition: (position: "start" | "end") => any;
+        setPosition: (position: "start" | "end") => void;
         getPosition: () => string;
     };
     keyboard: {

package/dist/components/chips/chip/api.d.ts

@@ -2,12 +2,12 @@ import { ApiOptions, ChipComponent } from "./types.js";
 interface ComponentWithElements {
     element: HTMLElement;
     text?: {
-        setText: (content: string) => any;
+        setText: (content: string) => void;
         getText: () => string;
         getElement: () => HTMLElement | null;
     };
     icon?: {
-        setIcon: (html: string) => any;
+        setIcon: (html: string) => void;
         getIcon: () => string;
         getElement: () => HTMLElement | null;
     };

package/dist/components/chips/chip/config.d.ts

@@ -6,13 +6,12 @@ import { ChipConfig } from "../types.js";
 interface BaseComponent {
     element: HTMLElement;
     disabled?: {
-        enable: () => any;
-        disable: () => any;
+        enable: () => void;
+        disable: () => void;
     };
     lifecycle?: {
         destroy: () => void;
     };
-    [key: string]: any;
 }
 /**
  * Default configuration for the Chip component
@@ -32,7 +31,7 @@ export declare const createBaseConfig: (config?: ChipConfig) => ChipConfig;
 export declare const getElementConfig: (config: ChipConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -48,7 +47,7 @@ export declare const getElementConfig: (config: ChipConfig) => {
     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;
 };
 /**
@@ -58,8 +57,8 @@ export declare const getElementConfig: (config: ChipConfig) => {
  */
 export declare const getApiConfig: (comp: BaseComponent) => {
     disabled: {
-        enable: () => any;
-        disable: () => any;
+        enable: () => void;
+        disable: () => void;
     };
     lifecycle: {
         destroy: () => void;

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

@@ -17,7 +17,7 @@ export declare const createBaseConfig: (config?: ChipsConfig) => ChipsConfig;
 export declare const getElementConfig: (config: ChipsConfig) => {
     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: ChipsConfig) => {
     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/chips/features/dom.js

@@ -2,7 +2,6 @@ import { createElement } from "../../../core/dom/create.js";
 export const withDom = (config) => (component) => {
     const getClass = (className) => component.getClass(className);
     const hasLabel = config.label && config.label.trim().length > 0;
-    const labelPosition = config.labelPosition || "start";
     let label;
     if (hasLabel) {
         label = createElement({

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

@@ -176,7 +176,7 @@ export interface ChipsConfig {
      * Schema definition for the component structure
      * @internal
      */
-    schema?: any;
+    schema?: unknown;
     /**
      * Event handlers for component events
      */
@@ -338,6 +338,17 @@ export interface ChipsComponent {
      * @returns Array of selected chip values
      */
     getSelectedValues: () => (string | null)[];
+    /**
+     * Gets the current value - form field compatibility
+     * @returns The first selected value (or null) in single-select mode, the selected values in multi-select mode
+     */
+    getValue: () => string | string[] | null;
+    /**
+     * Sets the value by selecting chips by value, without a change event - form field compatibility
+     * @param values - Value or array of values to select; null, undefined or empty clears the selection
+     * @returns The chips instance for chaining
+     */
+    setValue: (values: string | string[] | null | undefined) => ChipsComponent;
     /**
      * Selects chips by their values
      * @param values - Value or array of values to select