material 1.0.4 → 3.0.0-next.1

package/dist/components/search/config.js

@@ -0,0 +1,75 @@
+import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
+import { SEARCH_STATES, SEARCH_VIEW_MODES, SEARCH_VARIANTS, SEARCH_DEFAULTS, SEARCH_MEASUREMENTS, } from "./constants.js";
+export const defaultConfig = {
+    initialState: SEARCH_STATES.BAR,
+    viewMode: SEARCH_VIEW_MODES.DOCKED,
+    variant: SEARCH_VARIANTS.CONTAINED,
+    disabled: SEARCH_DEFAULTS.DISABLED,
+    placeholder: SEARCH_DEFAULTS.PLACEHOLDER,
+    value: SEARCH_DEFAULTS.VALUE,
+    leadingIcon: undefined,
+    trailingItems: undefined,
+    suggestions: undefined,
+    showClearButton: SEARCH_DEFAULTS.SHOW_CLEAR_BUTTON,
+    expandOnFocus: true,
+    collapseOnBlur: true,
+    collapseDelay: 150,
+    minWidth: SEARCH_MEASUREMENTS.BAR_MIN_WIDTH,
+    maxWidth: SEARCH_MEASUREMENTS.BAR_MAX_WIDTH,
+    fullWidth: SEARCH_DEFAULTS.FULL_WIDTH,
+};
+export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "search");
+export const getElementConfig = (config) => createElementConfig(config, {
+    tag: "div",
+    attributes: {
+        role: "search",
+        "aria-disabled": config.disabled === true ? "true" : "false",
+    },
+    className: config.class,
+});
+export const getApiConfig = (comp) => ({
+    value: {
+        setValue: (v, t) => comp.input?.setValue?.(v, t),
+        getValue: () => comp.input?.getValue?.() ?? "",
+        setPlaceholder: (p) => comp.input?.setPlaceholder?.(p),
+        getPlaceholder: () => comp.input?.getPlaceholder?.() ?? "",
+        clear: (t) => comp.input?.clear?.(t),
+        submit: () => comp.input?.submit?.(),
+        focus: () => comp.input?.focus?.(),
+        blur: () => comp.input?.blur?.(),
+    },
+    state: {
+        expand: () => comp.states?.expand?.(),
+        collapse: () => comp.states?.collapse?.(),
+        getState: () => comp.states?.getState?.() ?? "bar",
+        isExpanded: () => comp.states?.isExpanded?.() ?? false,
+        setViewMode: (m) => comp.states?.setViewMode?.(m),
+        getViewMode: () => comp.states?.getViewMode?.() ?? "docked",
+        setVariant: (variant) => comp.states?.setVariant?.(variant),
+        getVariant: () => comp.states?.getVariant?.() ?? "contained",
+    },
+    disabled: {
+        enable: () => comp.disabled?.enable?.(),
+        disable: () => comp.disabled?.disable?.(),
+        isDisabled: () => comp.disabled?.isDisabled?.() ?? false,
+    },
+    content: {
+        setLeadingIcon: (html) => comp.setLeadingIcon?.(html),
+        setTrailingItems: (items) => comp.trailing?.set?.(items),
+        addTrailingItem: (item) => comp.trailing?.add?.(item),
+        removeTrailingItem: (id) => comp.trailing?.remove?.(id),
+    },
+    suggestions: {
+        set: (s) => comp.input?.setSuggestions?.(s),
+        get: () => comp.input?.getSuggestions?.() ?? [],
+        clear: () => comp.input?.clearSuggestions?.(),
+        render: () => comp.suggestions?.render?.(),
+    },
+    events: {
+        on: (e, h) => comp.on?.(e, h),
+        off: (e, h) => comp.off?.(e, h),
+    },
+    lifecycle: {
+        destroy: () => comp.lifecycle?.destroy?.(),
+    },
+});

package/dist/components/search/constants.d.ts

@@ -0,0 +1,152 @@
+/**
+ * Search component states (bar = collapsed, view = expanded)
+ * @category Components
+ */
+export declare const SEARCH_STATES: {
+    /** Collapsed search bar state */
+    readonly BAR: "bar";
+    /** Expanded search view state */
+    readonly VIEW: "view";
+};
+/**
+ * Search view display modes
+ * @category Components
+ */
+export declare const SEARCH_VARIANTS: {
+    /** M3 Expressive: a filled bar, results in their own container */
+    readonly CONTAINED: "contained";
+    /** Baseline: a divider between the bar and its results */
+    readonly DIVIDED: "divided";
+};
+export declare const SEARCH_VIEW_MODES: {
+    /** Inline docked view (360-720dp width, max 2/3 screen height) */
+    readonly DOCKED: "docked";
+    /** Full-screen overlay view */
+    readonly FULLSCREEN: "fullscreen";
+};
+/**
+ * MD3 Search component measurements
+ * @see https://m3.material.io/components/search/specs
+ * @category Components
+ */
+export declare const SEARCH_MEASUREMENTS: {
+    readonly BAR_HEIGHT: 56;
+    readonly BAR_MIN_WIDTH: 360;
+    readonly BAR_MAX_WIDTH: 720;
+    readonly VIEW_DOCKED_HEADER_HEIGHT: 56;
+    readonly VIEW_DOCKED_MIN_WIDTH: 360;
+    readonly VIEW_DOCKED_MAX_WIDTH: 720;
+    readonly VIEW_DOCKED_MIN_HEIGHT: 240;
+    readonly VIEW_FULLSCREEN_HEADER_HEIGHT: 72;
+    readonly PADDING_HORIZONTAL: 16;
+    readonly ICON_SIZE: 24;
+    readonly AVATAR_SIZE: 30;
+    readonly ICON_SPACING: 16;
+};
+/**
+ * Search component event types
+ * @category Components
+ */
+export declare const SEARCH_EVENTS: {
+    /** Fired when search input receives focus */
+    readonly FOCUS: "focus";
+    /** Fired when search input loses focus */
+    readonly BLUR: "blur";
+    /** Fired when input value changes */
+    readonly INPUT: "input";
+    /** Fired when search is submitted (Enter key or submit action) */
+    readonly SUBMIT: "submit";
+    /** Fired when search input is cleared */
+    readonly CLEAR: "clear";
+    /** Fired when search bar expands to view */
+    readonly EXPAND: "expand";
+    /** Fired when search view collapses to bar */
+    readonly COLLAPSE: "collapse";
+    /** Fired when a suggestion is selected */
+    readonly SUGGESTION_SELECT: "suggestionSelect";
+};
+/**
+ * Default search icons (MD3 standard)
+ * @category Components
+ */
+export declare const SEARCH_ICONS: {
+    /** Search/magnifying glass icon */
+    readonly SEARCH: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>";
+    /** Back/arrow left icon (for view state) */
+    readonly BACK: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"/></svg>";
+    /** Clear/close icon */
+    readonly CLEAR: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>";
+    /** Microphone icon (voice search) */
+    readonly MIC: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z\"/></svg>";
+    /** History/clock icon (for recent searches) */
+    readonly HISTORY: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z\"/></svg>";
+};
+/**
+ * Default configuration values
+ * @category Components
+ */
+export declare const SEARCH_DEFAULTS: {
+    /** Default state (collapsed bar) */
+    readonly STATE: "bar";
+    /** Default view mode when expanded */
+    readonly VIEW_MODE: "docked";
+    /** Default placeholder/supporting text */
+    readonly PLACEHOLDER: "Search";
+    /** Default value */
+    readonly VALUE: "";
+    /** Whether to show clear button when input has value */
+    readonly SHOW_CLEAR_BUTTON: true;
+    /** Default disabled state */
+    readonly DISABLED: false;
+    /** Default full-width state */
+    readonly FULL_WIDTH: false;
+};
+/**
+ * CSS class names used by the search component
+ * @category Components
+ */
+export declare const SEARCH_CLASSES: {
+    readonly ROOT: "search";
+    readonly STATE_BAR: "search--bar";
+    readonly STATE_VIEW: "search--view";
+    readonly VIEW_DOCKED: "search--docked";
+    readonly VIEW_FULLSCREEN: "search--fullscreen";
+    readonly VARIANT_CONTAINED: "search--contained";
+    readonly VARIANT_DIVIDED: "search--divided";
+    readonly FOCUSED: "search--focused";
+    readonly DISABLED: "search--disabled";
+    readonly POPULATED: "search--populated";
+    readonly FULL_WIDTH: "search--full-width";
+    readonly SURFACE: "search__surface";
+    readonly CONTAINER: "search__container";
+    readonly HEADER: "search__header";
+    readonly INPUT_WRAPPER: "search__input-wrapper";
+    readonly INPUT: "search__input";
+    readonly DIVIDER: "search__divider";
+    readonly CONTENT: "search__content";
+    readonly LEADING_ICON: "search__leading-icon";
+    readonly TRAILING_ICON: "search__trailing-icon";
+    readonly CLEAR_BUTTON: "search__clear-button";
+    readonly CLEAR_BUTTON_HIDDEN: "search__clear-button--hidden";
+    readonly AVATAR: "search__avatar";
+    readonly SUGGESTIONS: "search__suggestions";
+    readonly SUGGESTION_LIST: "search__suggestion-list";
+    readonly SUGGESTION_ITEM: "search__suggestion-item";
+    readonly SUGGESTION_ITEM_SELECTED: "search__suggestion-item--selected";
+    readonly SUGGESTION_ICON: "search__suggestion-icon";
+    readonly SUGGESTION_TEXT: "search__suggestion-text";
+    readonly SUGGESTION_SUPPORTING: "search__suggestion-supporting";
+    readonly SUGGESTION_DIVIDER: "search__suggestion-divider";
+    readonly STATUS: "search__status";
+};
+/**
+ * Keyboard keys for search interaction
+ * @category Components
+ */
+export declare const SEARCH_KEYS: {
+    readonly ENTER: "Enter";
+    readonly ESCAPE: "Escape";
+    readonly ARROW_DOWN: "ArrowDown";
+    readonly ARROW_UP: "ArrowUp";
+    readonly TAB: "Tab";
+};

package/dist/components/search/constants.js

@@ -0,0 +1,93 @@
+export const SEARCH_STATES = {
+    BAR: "bar",
+    VIEW: "view",
+};
+export const SEARCH_VARIANTS = {
+    CONTAINED: "contained",
+    DIVIDED: "divided",
+};
+export const SEARCH_VIEW_MODES = {
+    DOCKED: "docked",
+    FULLSCREEN: "fullscreen",
+};
+export const SEARCH_MEASUREMENTS = {
+    BAR_HEIGHT: 56,
+    BAR_MIN_WIDTH: 360,
+    BAR_MAX_WIDTH: 720,
+    VIEW_DOCKED_HEADER_HEIGHT: 56,
+    VIEW_DOCKED_MIN_WIDTH: 360,
+    VIEW_DOCKED_MAX_WIDTH: 720,
+    VIEW_DOCKED_MIN_HEIGHT: 240,
+    VIEW_FULLSCREEN_HEADER_HEIGHT: 72,
+    PADDING_HORIZONTAL: 16,
+    ICON_SIZE: 24,
+    AVATAR_SIZE: 30,
+    ICON_SPACING: 16,
+};
+export const SEARCH_EVENTS = {
+    FOCUS: "focus",
+    BLUR: "blur",
+    INPUT: "input",
+    SUBMIT: "submit",
+    CLEAR: "clear",
+    EXPAND: "expand",
+    COLLAPSE: "collapse",
+    SUGGESTION_SELECT: "suggestionSelect",
+};
+export const SEARCH_ICONS = {
+    SEARCH: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>',
+    BACK: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>',
+    CLEAR: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
+    MIC: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/></svg>',
+    HISTORY: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>',
+};
+export const SEARCH_DEFAULTS = {
+    STATE: SEARCH_STATES.BAR,
+    VIEW_MODE: SEARCH_VIEW_MODES.DOCKED,
+    PLACEHOLDER: "Search",
+    VALUE: "",
+    SHOW_CLEAR_BUTTON: true,
+    DISABLED: false,
+    FULL_WIDTH: false,
+};
+export const SEARCH_CLASSES = {
+    ROOT: "search",
+    STATE_BAR: "search--bar",
+    STATE_VIEW: "search--view",
+    VIEW_DOCKED: "search--docked",
+    VIEW_FULLSCREEN: "search--fullscreen",
+    VARIANT_CONTAINED: "search--contained",
+    VARIANT_DIVIDED: "search--divided",
+    FOCUSED: "search--focused",
+    DISABLED: "search--disabled",
+    POPULATED: "search--populated",
+    FULL_WIDTH: "search--full-width",
+    SURFACE: "search__surface",
+    CONTAINER: "search__container",
+    HEADER: "search__header",
+    INPUT_WRAPPER: "search__input-wrapper",
+    INPUT: "search__input",
+    DIVIDER: "search__divider",
+    CONTENT: "search__content",
+    LEADING_ICON: "search__leading-icon",
+    TRAILING_ICON: "search__trailing-icon",
+    CLEAR_BUTTON: "search__clear-button",
+    CLEAR_BUTTON_HIDDEN: "search__clear-button--hidden",
+    AVATAR: "search__avatar",
+    SUGGESTIONS: "search__suggestions",
+    SUGGESTION_LIST: "search__suggestion-list",
+    SUGGESTION_ITEM: "search__suggestion-item",
+    SUGGESTION_ITEM_SELECTED: "search__suggestion-item--selected",
+    SUGGESTION_ICON: "search__suggestion-icon",
+    SUGGESTION_TEXT: "search__suggestion-text",
+    SUGGESTION_SUPPORTING: "search__suggestion-supporting",
+    SUGGESTION_DIVIDER: "search__suggestion-divider",
+    STATUS: "search__status",
+};
+export const SEARCH_KEYS = {
+    ENTER: "Enter",
+    ESCAPE: "Escape",
+    ARROW_DOWN: "ArrowDown",
+    ARROW_UP: "ArrowUp",
+    TAB: "Tab",
+};

package/dist/components/search/features/index.d.ts

@@ -0,0 +1,4 @@
+export { withStructure } from "./structure.js";
+export { withStates } from "./states.js";
+export { withInput } from "./input.js";
+export { withSuggestions } from "./suggestions.js";

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

@@ -0,0 +1,4 @@
+export { withStructure } from "./structure.js";
+export { withStates } from "./states.js";
+export { withInput } from "./input.js";
+export { withSuggestions } from "./suggestions.js";

package/dist/components/search/features/input.d.ts

@@ -0,0 +1,93 @@
+import type { SearchComponent } from "../types.js";
+import { SearchConfig, SearchStructure, SearchSuggestion, SearchViewMode } from "../types.js";
+/**
+ * Adds input handling features to the search component
+ * Manages value, placeholder, and input events
+ *
+ * @param config Search configuration
+ * @returns Component enhancer with input features
+ */
+/** What this feature reads off the component it is handed. */
+interface InputHost {
+    getClass: (name: string) => string;
+    structure?: SearchStructure;
+    states: {
+        expand: () => void;
+        collapse: () => void;
+        getState: () => string;
+        isExpanded: () => boolean;
+        setViewMode: (mode: SearchViewMode) => void;
+        getViewMode: () => SearchViewMode;
+        updatePopulatedState: (hasValue: boolean) => void;
+        updateFocusedState: (isFocused: boolean) => void;
+    };
+    disabled?: {
+        enable: () => void;
+        disable: () => void;
+        isDisabled: () => boolean;
+    };
+    emit?: (event: string, data?: unknown) => unknown;
+}
+export declare const withInput: (config: SearchConfig, getComponent: () => SearchComponent) => <C extends InputHost>(component: C) => C & {
+    input: {
+        /**
+         * Sets the input value
+         */
+        setValue: (value: string, triggerEvent?: boolean) => void;
+        /**
+         * Gets the current value
+         */
+        getValue: () => string;
+        /**
+         * Sets the placeholder text
+         */
+        setPlaceholder: (text: string) => void;
+        /**
+         * Gets the current placeholder
+         */
+        getPlaceholder: () => string;
+        /**
+         * Clears the input
+         */
+        clear: (triggerEvent?: boolean) => void;
+        /**
+         * Submits the search
+         */
+        submit: () => void;
+        /**
+         * Focuses the input
+         */
+        focus: () => void;
+        /**
+         * Blurs the input
+         */
+        blur: () => void;
+        /**
+         * Sets suggestions
+         */
+        setSuggestions: (newSuggestions: SearchSuggestion[] | string[]) => void;
+        /**
+         * Gets suggestions
+         */
+        getSuggestions: () => SearchSuggestion[];
+        /**
+         * Clears suggestions
+         */
+        clearSuggestions: () => void;
+        /**
+         * Selects a suggestion
+         */
+        selectSuggestion: (suggestion: SearchSuggestion) => void;
+        /**
+         * Emits an event (for use by other features)
+         */
+        emitEvent: (eventType: string, originalEvent?: Event | null, extra?: Record<string, unknown>) => {
+            component: SearchComponent;
+            value: string;
+            originalEvent: Event | null;
+            preventDefault: () => void;
+            defaultPrevented: boolean;
+        };
+    };
+};
+export {};

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

@@ -0,0 +1,244 @@
+import { SEARCH_CLASSES, SEARCH_EVENTS } from "../constants.js";
+import { activeElementOf } from "../../../core/dom/focus.js";
+const normalizeSuggestions = (suggestions) => {
+    if (!suggestions) {
+        return [];
+    }
+    return suggestions.map((item) => {
+        if (typeof item === "string") {
+            return { text: item, value: item };
+        }
+        return { ...item, value: item.value ?? item.text };
+    });
+};
+export const withInput = (config, getComponent) => (component) => {
+    let currentValue = config.value || "";
+    let currentPlaceholder = config.placeholder || "Search";
+    let suggestions = normalizeSuggestions(config.suggestions);
+    const getClass = (className) => {
+        return component.getClass ? component.getClass(className) : className;
+    };
+    const createEventData = (eventType, originalEvent = null, extra = {}) => {
+        const eventData = {
+            component: getComponent(),
+            value: currentValue,
+            originalEvent,
+            preventDefault: () => {
+                eventData.defaultPrevented = true;
+            },
+            defaultPrevented: false,
+            ...extra,
+        };
+        return eventData;
+    };
+    const emitEvent = (eventType, originalEvent = null, extra = {}) => {
+        const eventData = createEventData(eventType, originalEvent, extra);
+        if (component.emit) {
+            component.emit(eventType, eventData);
+        }
+        return eventData;
+    };
+    const updateClearButton = (hasValue) => {
+        const clearButton = component.structure?.clearButton;
+        if (!clearButton)
+            return;
+        if (hasValue) {
+            clearButton.classList.remove(getClass(SEARCH_CLASSES.CLEAR_BUTTON_HIDDEN));
+            if (!component.disabled?.isDisabled()) {
+                clearButton.tabIndex = 0;
+            }
+        }
+        else {
+            clearButton.classList.add(getClass(SEARCH_CLASSES.CLEAR_BUTTON_HIDDEN));
+            clearButton.tabIndex = -1;
+        }
+    };
+    const setValue = (value, triggerEvent = true) => {
+        const previousValue = currentValue;
+        currentValue = value;
+        const input = component.structure?.input;
+        if (input && input.value !== value) {
+            input.value = value;
+        }
+        updateClearButton(!!value);
+        if (component.states?.updatePopulatedState) {
+            component.states.updatePopulatedState(!!value);
+        }
+        if (triggerEvent && value !== previousValue) {
+            emitEvent(SEARCH_EVENTS.INPUT);
+        }
+    };
+    const getValue = () => {
+        return currentValue;
+    };
+    const setPlaceholder = (text) => {
+        currentPlaceholder = text;
+        const input = component.structure?.input;
+        if (input) {
+            input.placeholder = text;
+            input.setAttribute("aria-label", text);
+        }
+    };
+    const getPlaceholder = () => {
+        return currentPlaceholder;
+    };
+    const clear = (triggerEvent = true) => {
+        setValue("", triggerEvent);
+        const input = component.structure?.input;
+        if (input && !component.disabled?.isDisabled()) {
+            input.focus();
+        }
+        if (triggerEvent) {
+            emitEvent(SEARCH_EVENTS.CLEAR);
+        }
+    };
+    const submit = () => {
+        if (currentValue) {
+            emitEvent(SEARCH_EVENTS.SUBMIT);
+        }
+    };
+    const focus = () => {
+        const input = component.structure?.input;
+        if (input && !component.disabled?.isDisabled()) {
+            input.focus();
+        }
+    };
+    const blur = () => {
+        const input = component.structure?.input;
+        if (input) {
+            input.blur();
+        }
+    };
+    const setSuggestions = (newSuggestions) => {
+        suggestions = normalizeSuggestions(newSuggestions);
+    };
+    const getSuggestions = () => {
+        return [...suggestions];
+    };
+    const clearSuggestions = () => {
+        suggestions = [];
+    };
+    const selectSuggestion = (suggestion) => {
+        setValue(suggestion.value ?? suggestion.text, false);
+        emitEvent(SEARCH_EVENTS.SUGGESTION_SELECT, null, { suggestion });
+    };
+    const setupEventListeners = () => {
+        const input = component.structure?.input;
+        const clearButton = component.structure?.clearButton;
+        const leadingIcon = component.structure?.leadingIcon;
+        if (!input)
+            return;
+        const reopen = () => {
+            if (config.expandOnFocus !== false && !component.states?.isExpanded() && activeElementOf(input) === input)
+                component.states?.expand();
+        };
+        input.addEventListener("input", (e) => {
+            const target = e.target;
+            setValue(target.value, true);
+            reopen();
+        });
+        input.addEventListener("click", reopen);
+        input.addEventListener("focus", (e) => {
+            if (component.states?.updateFocusedState) {
+                component.states.updateFocusedState(true);
+            }
+            emitEvent(SEARCH_EVENTS.FOCUS, e);
+            if (config.expandOnFocus !== false && component.states?.expand) {
+                component.states.expand();
+            }
+        });
+        input.addEventListener("blur", (e) => {
+            if (component.states?.updateFocusedState) {
+                component.states.updateFocusedState(false);
+            }
+            emitEvent(SEARCH_EVENTS.BLUR, e);
+            if (config.collapseOnBlur !== false && component.states?.collapse) {
+                const delay = config.collapseDelay ?? 150;
+                setTimeout(() => {
+                    const root = component.structure?.surface ?? input;
+                    if (!root.contains(activeElementOf(input))) {
+                        component.states.collapse();
+                    }
+                }, delay);
+            }
+        });
+        input.addEventListener("keydown", (e) => {
+            switch (e.key) {
+                case "Enter":
+                    e.preventDefault();
+                    if (!input.hasAttribute("aria-activedescendant"))
+                        submit();
+                    break;
+                case "Escape":
+                    e.preventDefault();
+                    if (currentValue) {
+                        clear();
+                    }
+                    else if (component.states?.isExpanded?.()) {
+                        component.states.collapse();
+                    }
+                    break;
+                case "ArrowDown":
+                    break;
+                case "ArrowUp":
+                    break;
+            }
+        });
+        if (clearButton) {
+            clearButton.addEventListener("click", (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                clear();
+            });
+            clearButton.addEventListener("keydown", (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    clear();
+                }
+            });
+        }
+        if (leadingIcon) {
+            leadingIcon.addEventListener("click", (e) => {
+                e.preventDefault();
+                if (component.states?.isExpanded?.()) {
+                    component.states.collapse();
+                }
+                else {
+                    component.states?.expand();
+                }
+            });
+            leadingIcon.addEventListener("keydown", (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    if (component.states?.isExpanded?.()) {
+                        component.states.collapse();
+                    }
+                    else {
+                        component.states?.expand();
+                    }
+                }
+            });
+        }
+    };
+    setTimeout(() => {
+        setupEventListeners();
+    }, 0);
+    return {
+        ...component,
+        input: {
+            setValue,
+            getValue,
+            setPlaceholder,
+            getPlaceholder,
+            clear,
+            submit,
+            focus,
+            blur,
+            setSuggestions,
+            getSuggestions,
+            clearSuggestions,
+            selectSuggestion,
+            emitEvent,
+        },
+    };
+};