@infineon/infineon-design-system-stencil 37.5.1--canary.1723.34ea69810f554741126370a7b5230b9aef9d65e5.0 → 37.6.0--canary.1954.6c07dfe4ac965c782ba6feeb2957e37be53515a7.0

package/dist/cjs/ifx-alert_2.cjs.entry.js

@@ -186,7 +186,7 @@ const Template = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'a6433871f9175e0616c40389d0a39a94797d67b3' }, this.isTemplatePage
+        return (index.h("div", { key: '1de8086432131979b1290ea28de6027cf52aa043' }, this.isTemplatePage
             ?
                 index.h("div", { class: "template__page-wrapper" }, !this.repoUrl && !this.repoError &&
                     index.h("div", null, index.h("h3", null, "Your repository is getting ready.."), index.h("p", null, "This will only take a minute.")), this.isLoading && !this.repoError && index.h("div", null, index.h("ifx-spinner", { variant: 'default', size: 's' })), this.repoUrl && index.h("ifx-link", { href: this.repoUrl, target: "_parent", size: "m", variant: "underlined" }, "Your repository"), this.repoError && index.h("div", null, this.repoError))

package/dist/cjs/ifx-basic-table.cjs.entry.js

@@ -189,7 +189,7 @@ const Table = class {
         return {};
     }
     render() {
-        return (index.h(index.Host, { key: 'b0be2eaf2bf175887f3f2271cf2965b5a663b42a' }, index.h("div", { key: '400318fcaacf00f1b4cefce90b7763c14e7ab49d', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: 'e4844ee2cf7179dc9566c0c7176250f51ab6cf54', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (index.h(index.Host, { key: '5968712e3cbe5605b5128dc19997941d18d21ffc' }, index.h("div", { key: '8a39d36f4006095de577777bb8c31f2ba3b9a2ee', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: '8dd8dfaa472da2cd56ade80f5105cdbebeb8013b', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/ifx-faq.cjs.entry.js

@@ -12,7 +12,7 @@ const Faq = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'fa2142cca68e60417092d614cb11367974b407f3', class: 'container' }, index.h("ifx-accordion", { key: '3abf4ca4138b9b177c6c21dbcdf5b84452d8de34' }, index.h("ifx-accordion-item", { key: 'fe98e253e30e79d0adb3dc2a1aad25d0aeb64250', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), index.h("ifx-accordion-item", { key: '6397a595ea17aeb437fabec2cc15bb56faade295', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), index.h("ifx-accordion-item", { key: '2429a303ad7938271651286232f8a1489d0df958', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), index.h("ifx-accordion-item", { key: '2fc8ae1d8a7bb66bb99c09f25b7f25a329817a94', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), index.h("ifx-accordion-item", { key: '23c340c8cf0c8356a1dfd180050c1e92c7aadcec', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+        return (index.h("div", { key: 'd65665af11d77f22eba694be830c0d2cbd1c2aed', class: 'container' }, index.h("ifx-accordion", { key: '21a6945e8e2989152d4ae3b525d0b03100289a53' }, index.h("ifx-accordion-item", { key: '6a17004a92a541a569d0a0fcfc99ab3b036e0321', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), index.h("ifx-accordion-item", { key: '173ea57ea7fb62173945b1c8c804e2472f174f34', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), index.h("ifx-accordion-item", { key: '7344d949d820868fee6ab85b8197fdde1b4574c7', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), index.h("ifx-accordion-item", { key: '6f242e7e3a4116bdf122905becd07fc8f8f4cd22', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), index.h("ifx-accordion-item", { key: '1dd2fe2389021540de4d1ded1f66003592644a1d', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
     }
 };
 Faq.style = IfxFaqStyle0;

package/dist/cjs/ifx-filter-accordion.cjs.entry.js

@@ -53,8 +53,8 @@ const FilterAccordion = class {
         this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);
     }
     render() {
-        return (index.h("div", { key: '558e64611cf0084dd56486b67b028978be06e279', class: `accordion ${this.expanded ? 'expanded' : ''}` }, index.h("div", { key: '1a367b0dedd7df65a29b0019768b89ddf60de767', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, index.h("div", { key: 'f920f8151fb45340d509bdcc7c0f7581d09bf0b9', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, index.h("div", { key: '2e116feece138ad8c768c5da4bfd78992d5d3a23', class: "text" }, index.h("span", { key: '509dfead8b2d73932db222dcb20d98131834b6b6' }, this.filterGroupName), index.h("ifx-indicator", { key: '75bbde2dbd115e744db2a5cca0c2b362e67e0fb8', variant: 'number', number: this.count })), index.h("ifx-icon", { key: '0132b2973bc3c12bb296528a86af2adeab7868f8', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), index.h("ifx-icon", { key: 'a10114bfc855eab89923e29702014e894bb23788', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
-            index.h("div", { key: '235c0fdf9082d73a57dbff0ed468cf519a467c44', class: "filter-accordion-container" }, index.h("slot", { key: '129a804487fe1c42b35907a3d5288e65ad7dfa61', name: "list" }))));
+        return (index.h("div", { key: '3d0fd2cc850927fc6cc458867b049a582f47a0f5', class: `accordion ${this.expanded ? 'expanded' : ''}` }, index.h("div", { key: '0bc0dafdcfd874ae01fd7bb8446036ad34c07603', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, index.h("div", { key: '5b8a0a61ca1b4b5c640933b7e81e6c5f3f406ba1', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, index.h("div", { key: '16e29f1f8ca7870e1e62cd5bcd56766a8a6ac512', class: "text" }, index.h("span", { key: '69687b082848bebb93647219eb8c1908b21d2c03' }, this.filterGroupName), index.h("ifx-indicator", { key: 'ede8211d6cee49e3a5af93e377b05863b324ab52', variant: 'number', number: this.count })), index.h("ifx-icon", { key: '27394e246008a8cefc69782b50885973cb548ce6', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), index.h("ifx-icon", { key: 'c517b29a5a66c8747a724af163ca761d3a7e11d9', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
+            index.h("div", { key: '289e7251b83c88a26445be01f22575c85c5689e3', class: "filter-accordion-container" }, index.h("slot", { key: 'd63dbb79d3676b8881afaa318b6d642563935baa', name: "list" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-filter-bar.cjs.entry.js

@@ -97,7 +97,7 @@ const FilterBar = class {
         // Calculate slotsToShow safely
         const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);
         const slots = Array.from({ length: slotsToShow }, (_, i) => (index.h("div", { class: "filter-slot-wrapper" }, index.h("slot", { name: `filter-component-${i + 1}` }))));
-        return (index.h(index.Host, { key: '883d2316936a342059ab9009149ac8ce2ed877b2' }, index.h("div", { key: '24e0f7e2dde9ff7ddccf19e03e075b24807ec9d4', class: "search-container" }, index.h("slot", { key: '10bcfd474cfd9286d3e57e19d110bea6311c4297', name: "filter-search" }), " "), index.h("div", { key: '3aa8a6c4fb666ff47c7868333c2c494d6cb7bd90', class: "components-container" }, slots.length > 0 ? slots : index.h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (index.h("div", { key: '1b87cf569495c351b639bc88d714dd195bd943b0', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, index.h("ifx-button", { key: '9f8073be95597553d1aa4eaccd19fc534ce3f9c6', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, index.h("ifx-icon", { key: '157558f67217a770963b16ca3f6b3a5cc8ed191c', icon: "filter-16" }), "More filters"))))));
+        return (index.h(index.Host, { key: '390d4edb8b2681c33017c1245d3b47c254086065' }, index.h("div", { key: '631db42c0db2e69c53a35a3a4878863215466783', class: "search-container" }, index.h("slot", { key: 'd3b7e942185a37da9af701ede28b22aabca08812', name: "filter-search" }), " "), index.h("div", { key: '599234808c4076a085f19bbe489a5a6746bfcda9', class: "components-container" }, slots.length > 0 ? slots : index.h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (index.h("div", { key: '6ceade00712115f448158081ad7ec082d9c6c416', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, index.h("ifx-button", { key: 'd1dbd53565e30c526e75ceebff18ecaf9355997a', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, index.h("ifx-icon", { key: '43ec4bbcd0ac7b76534aafe26af8b330627d2f32', icon: "filter-16" }), "More filters"))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-filter-search.cjs.entry.js

@@ -33,7 +33,7 @@ const FilterSearch = class {
         this.ifxFilterSearchChange.emit({ filterName: this.filterName, filterValue: this.filterValue, filterKey: this.filterKey }); // Emitting filterKey along with other properties
     }
     render() {
-        return (index.h("div", { key: '0faa67e585464ac86a1163626e3d85340d4781fb', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, index.h("div", { key: '7bdb336d4e79fe38eee59f4e41ac44e62051b515', class: "filter-name" }, this.filterName), index.h("ifx-search-field", { key: '08613ab1e040959373722caffaee5dcf71b62add', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
+        return (index.h("div", { key: '3e287efc07bf8225fe661ae9551c8cc2e980e622', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, index.h("div", { key: '3b9a27b4e94843db8109028fb6a3ba849c4cf206', class: "filter-name" }, this.filterName), index.h("ifx-search-field", { key: '62cd45208bfe565cc2f903c361ced6fa02499942', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-filter-type-group.cjs.entry.js

@@ -129,7 +129,7 @@ const IfxFilterTypeGroup = class {
         window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);
     }
     render() {
-        return (index.h(index.Host, { key: 'c9833666ea9bcb00708bd0dab1cd9680e08ed114' }, index.h("div", { key: '0ee50ec91a5f1c3bd35899082de4d8f53a40b23e', class: "filter-type-group" }, index.h("slot", { key: 'f7f4982f39e972d38fb937b88d02bec40513e78c', name: "filter-search" }), index.h("slot", { key: '25cc8aea032f31c64bd2b164b39af263cf8fb107', name: "filter-accordion" }))));
+        return (index.h(index.Host, { key: '1d0bf0c68fb42e0394e0aa9bb5e66660d3ef5cda' }, index.h("div", { key: '215cd4cb99b4200d6a37c73267658f5dea619fff', class: "filter-type-group" }, index.h("slot", { key: 'e3a96b1a72ae653d2bcd51faf9c3a297bc541de3', name: "filter-search" }), index.h("slot", { key: '828ff0797c6f7ae7b3d6a2b6b0cdbde982b95cb1', name: "filter-accordion" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-list-entry.cjs.entry.js

@@ -25,7 +25,7 @@ const ListEntry = class {
         this.ifxListEntryChange.emit({ label: this.label, value: this.value, type: this.type });
     }
     render() {
-        return (index.h("div", { key: 'a58d668dc36cb7221f28563b1ed00a041618765a', class: "wrapper" }, this.type === 'checkbox' ? (index.h("div", { class: "list-entry" }, index.h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (index.h("div", { class: "list-entry" }, index.h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
+        return (index.h("div", { key: 'a78a3927f090f95f0e4a75a6f2c44200b91370a2', class: "wrapper" }, this.type === 'checkbox' ? (index.h("div", { class: "list-entry" }, index.h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (index.h("div", { class: "list-entry" }, index.h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-multiselect_2.cjs.entry.js

@@ -905,25 +905,25 @@ const MultiselectOption = class {
         const additionalPadding = this.hasChildren ? 0 : 28;
         let totalPadding = basePadding + additionalPadding;
         const optionItemStyle = isFlatMultiselect ? undefined : { paddingLeft: `${totalPadding}px` };
-        return (index.h(index.Host, { key: 'f836f58884e2e57c4c5fb4953f10d5ff4a34c8da' }, index.h("div", { key: '9eca6e87bb3c21512a051596b1e92931b707e88f', class: {
+        return (index.h(index.Host, { key: '53ab714e5bc86c83569b2c1cf6f479405f528880' }, index.h("div", { key: 'b5597349b4d3ef268b5826047f414dd7ce0c7854', class: {
                 'option': true,
                 'option--has-children': this.hasChildren,
                 'option--expanded': this.isExpanded,
                 'option--disabled': this.disabled,
                 'option--selected': this.selected,
-            }, role: "option", "aria-expanded": this.hasChildren ? (this.isExpanded ? 'true' : 'false') : undefined, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "data-level": this.depth, "data-value": this.value }, index.h("div", { key: '41d24ef38470f5f7f8aa36daa33b339b7d8079f3', class: "option-item", style: optionItemStyle }, index.h("div", { key: '27d33336e7d15ccce1703429b70494fe86808214', class: "chevron-wrapper", tabIndex: this.hasChildren ? 0 : -1, role: this.hasChildren ? "button" : undefined, "aria-label": this.hasChildren ? (this.isExpanded ? "Collapse" : "Expand") : undefined, onClick: (e) => { e.stopPropagation(); this.toggleExpansion(); }, onKeyDown: (e) => {
+            }, role: "option", "aria-expanded": this.hasChildren ? (this.isExpanded ? 'true' : 'false') : undefined, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "data-level": this.depth, "data-value": this.value }, index.h("div", { key: '3052a22b111e61ac0e48ecd64460c35aa2b06fea', class: "option-item", style: optionItemStyle }, index.h("div", { key: 'a392db43dbb81f06a4cfd4e5faad7672108bc4bb', class: "chevron-wrapper", tabIndex: this.hasChildren ? 0 : -1, role: this.hasChildren ? "button" : undefined, "aria-label": this.hasChildren ? (this.isExpanded ? "Collapse" : "Expand") : undefined, onClick: (e) => { e.stopPropagation(); this.toggleExpansion(); }, onKeyDown: (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     e.stopPropagation();
                     this.toggleExpansion();
                 }
-            } }, this.hasChildren && (index.h("ifx-icon", { key: '68e975b49b4aa9edf564b80644c5a55809185629', class: `chevron ${this.isExpanded ? 'chevron--expanded' : 'chevron--collapsed'}`, icon: "chevron-right-16" }))), index.h("div", { key: 'f651aefe4cc30db6056331ffaafd8e6ea17039fc', class: "checkbox-wrapper", onClick: (e) => e.stopPropagation() }, index.h("ifx-checkbox", { key: 'e8cb2c7a75921a81e0321ff22718d9373cb6f437', size: 's', checked: (this.isSearchActive && this.isSearchDisabled) ? false : (this.indeterminate ? false : this.selected), indeterminate: (this.isSearchActive && this.isSearchDisabled) ? false : this.indeterminate, onClick: this.handleCheckboxClick, disabled: this.disabled || (this.isSearchActive && this.isSearchDisabled), onKeyDown: (e) => {
+            } }, this.hasChildren && (index.h("ifx-icon", { key: '033471dbc46d73d82f0ab44a07a1dfa5fd9625fb', class: `chevron ${this.isExpanded ? 'chevron--expanded' : 'chevron--collapsed'}`, icon: "chevron-right-16" }))), index.h("div", { key: 'd6fc07097a390e9e29f8c4dcc55c90f755b10fc9', class: "checkbox-wrapper", onClick: (e) => e.stopPropagation() }, index.h("ifx-checkbox", { key: '7d39f30d45c2f917edd924b3b8ce6c22f4146c19', size: 's', checked: (this.isSearchActive && this.isSearchDisabled) ? false : (this.indeterminate ? false : this.selected), indeterminate: (this.isSearchActive && this.isSearchDisabled) ? false : this.indeterminate, onClick: this.handleCheckboxClick, disabled: this.disabled || (this.isSearchActive && this.isSearchDisabled), onKeyDown: (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     e.stopPropagation();
                     this.handleCheckboxClick(e);
                 }
-            } })), index.h("div", { key: '4f626380753927d4bedca0f78643e6647eff6356', class: "option-label", onClick: this.handleHeaderClick, tabIndex: -1 }, index.h("slot", { key: '8207d9f952bff231fda0bf0be43e1c567aa6a6da' }))), this.isExpanded && index.h("div", { key: '930d611f27451ff393d1403386bb6cd6b4a54980', class: "option-children" }, index.h("slot", { key: '269eb6381257f82b74b888188646559e6881a9d9', name: "children" })))));
+            } })), index.h("div", { key: 'e09de6a2559a8334553abb9d45b901c1459a2da7', class: "option-label", onClick: this.handleHeaderClick, tabIndex: -1 }, index.h("slot", { key: '941edb6987ef6add787211833e0e1aad0d5b9066' }))), this.isExpanded && index.h("div", { key: 'b5248d64937e418587f1c807e434874be4952f48', class: "option-children" }, index.h("slot", { key: '8e6e69e5000661632c114279a5afc5c80f361b8e', name: "children" })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-search-field.cjs.entry.js

@@ -7,50 +7,367 @@ const frameworkDetection = require('./framework-detection-39905fc2.js');
 const domUtils = require('./dom-utils-2c4573c2.js');
 const index$1 = require('./index-5b0b9d4c.js');
 
-const searchFieldCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.search-field{box-sizing:border-box;background-color:#FFFFFF;width:100%;font-family:var(--ifx-font-family)}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;padding:8px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none;color:#8D8786}.search-field .search-field__wrapper.focused{border:1px solid #0A8276}.search-field .search-field__wrapper.focused ifx-icon{color:#575352}.search-field .search-field__wrapper.search-field__wrapper-s{height:36px}.search-field .search-field__wrapper:hover:not(.focused,:focus){border:1px solid #3C3A39}.search-field .search-field__wrapper:focus{outline:none;border:1px solid #0A8276}.search-field .search-field__wrapper .delete-icon{right:12px;cursor:pointer}.search-field .search-field__wrapper input[type=text]{font-style:normal;font-weight:400;font-size:16px;color:#8D8786;border:none;width:100%;outline:none;height:16px}.search-field .search-field__wrapper input[type=text]:focus{outline:none;color:#1d1d1d}.search-field .search-field__wrapper input[type=text]:disabled{background-color:#EEEDED}.search-field .search-field__wrapper:has(input[disabled]){background-color:#EEEDED}";
+const searchFieldCss = ":root {\n  --ifx-font-family: \"Source Sans 3\", \"Arial, sans-serif\";\n}\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: #FFFFFF;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n  position: relative;\n}\n.search-field .search-field__wrapper {\n  box-sizing: border-box;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  border: 1px solid #8D8786;\n  border-radius: 1px;\n  padding: 8px 16px;\n  gap: 12px;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  position: relative;\n  width: 100%;\n  outline: none;\n  color: #8D8786;\n}\n.search-field .search-field__wrapper.focused {\n  border: 1px solid #0A8276;\n}\n.search-field .search-field__wrapper.focused ifx-icon {\n  color: #575352;\n}\n.search-field .search-field__wrapper.search-field__wrapper-s {\n  height: 36px;\n}\n.search-field .search-field__wrapper:hover:not(.focused, :focus) {\n  border: 1px solid #3C3A39;\n}\n.search-field .search-field__wrapper:focus {\n  outline: none;\n  border: 1px solid #0A8276;\n}\n.search-field .search-field__wrapper .delete-icon {\n  right: 12px;\n  cursor: pointer;\n}\n.search-field .search-field__wrapper input[type=text] {\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  color: #8D8786;\n  border: none;\n  width: 100%;\n  outline: none;\n  height: 16px;\n}\n.search-field .search-field__wrapper input[type=text]:focus {\n  outline: none;\n  color: #1d1d1d;\n}\n.search-field .search-field__wrapper input[type=text]:disabled {\n  background-color: #EEEDED;\n}\n.search-field .search-field__wrapper:has(input[disabled]) {\n  background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  background: #FFFFFF;\n  margin-top: 4px;\n  border: 1px solid #EEEDED;\n  box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\n  z-index: 1000;\n  max-height: 300px;\n  overflow-y: auto;\n  container-type: inline-size;\n}\n.search-field .suggestions-dropdown .suggestions-header {\n  font-family: Source Sans 3;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  line-height: 1.25rem;\n  letter-spacing: 0.25em;\n  text-transform: uppercase;\n  color: #575352;\n  border-bottom: 1px solid #EEEDED;\n  padding: 12px 16px;\n}\n.search-field .suggestions-dropdown .suggestion-item {\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.search-field .suggestions-dropdown .suggestion-item:last-child {\n  border-bottom: none;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover, .search-field .suggestions-dropdown .suggestion-item--selected {\n  background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon {\n  color: #575352;\n  flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon--history {\n  color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 1;\n  min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n  color: #8D8786;\n  flex-shrink: 0;\n  white-space: nowrap;\n  margin-left: 2px;\n  font-weight: 600;\n  font-size: 0.75rem;\n}\n@container (max-width: 320px) {\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n    width: 100%;\n    max-width: 100%;\n  }\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n    margin-left: 0;\n    margin-top: 0;\n    width: 100%;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex-shrink: 1;\n  }\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-count {\n  color: #8D8786;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon {\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.2s ease, visibility 0.2s ease;\n  cursor: pointer;\n  margin-left: auto;\n  flex-shrink: 0;\n  color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:hover {\n  color: #3C3A39;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover .suggestion-delete-icon {\n  opacity: 1;\n  visibility: visible;\n}\n.search-field .search-field__wrapper.dropdown-open {\n  border-radius: 1px 1px 0 0;\n  border-color: #0A8276;\n}";
 const IfxSearchFieldStyle0 = searchFieldCss;
 
 const SearchField = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ifxInput = index.createEvent(this, "ifxInput", 7);
+        this.ifxSuggestionRequested = index.createEvent(this, "ifxSuggestionRequested", 7);
+        this.ifxSuggestionSelected = index.createEvent(this, "ifxSuggestionSelected", 7);
+        this.ifxFocus = index.createEvent(this, "ifxFocus", 7);
+        this.ifxBlur = index.createEvent(this, "ifxBlur", 7);
         this.value = '';
-        this.insideDropdown = false;
+        this.suggestions = [];
+        this.showSuggestions = false;
+        this.maxSuggestions = 10;
+        this.maxHistoryItems = 5;
+        this.enableHistory = true;
+        this.historyKey = 'ifx-search-history';
+        this.historyHeaderText = 'Recent Searches';
+        // ARIA Labels and Accessibility Props
+        this.ariaLabel = "Search Field";
+        this.deleteIconAriaLabel = 'Clear search';
+        this.historyDeleteAriaLabel = 'Remove from history';
+        this.dropdownAriaLabel = 'Search suggestions and history';
+        this.suggestionAriaLabel = 'Search suggestion';
+        this.historyItemAriaLabel = 'Search history item';
+        this.showDropdown = false;
+        this.filteredSuggestions = [];
+        this.selectedSuggestionIndex = -1;
+        this.searchHistory = [];
         this.showDeleteIcon = false;
         this.showDeleteIconInternalState = false;
         this.disabled = false;
         this.size = 'l';
         this.isFocused = false;
         this.placeholder = "Search...";
-        this.autocomplete = "on";
+        this.autocomplete = "off";
         this.maxlength = null;
+        this.focusEmitted = false;
         this.handleInput = () => {
             const query = this.inputElement.value;
-            this.value = query; // update the value property when input changes
+            this.value = query;
             this.ifxInput.emit(this.value);
+            if (this.showSuggestions) {
+                this.showDropdown = true;
+                this.selectedSuggestionIndex = -1;
+                this.requestSuggestions(query);
+            }
         };
         this.handleDelete = () => {
             this.inputElement.value = '';
             this.value = "";
             this.ifxInput.emit(this.value);
+            this.hideDropdown();
+        };
+        this.handleSearch = () => {
+            if (this.value.trim() && this.enableHistory) {
+                // Only add to history if there are actual results
+                if (this.filteredSuggestions.length > 0) {
+                    this.addToHistory(this.value);
+                }
+            }
+            this.hideDropdown();
+        };
+        // Handle click on history delete button
+        this.handleHistoryDelete = (event, term) => {
+            event.stopPropagation(); // Prevent selection of the entry
+            this.removeFromHistory(term);
         };
     }
     handleOutsideClick(event) {
         const path = event.composedPath();
-        if (!path.includes(this.inputElement)) {
-            this.isFocused = false;
+        if (!path.includes(this.inputElement) && !path.includes(this.dropdownElement)) {
+            this.hideDropdown();
+        }
+    }
+    handleKeyDown(event) {
+        if (!this.showDropdown)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.navigateSuggestions(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.navigateSuggestions(-1);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this.selectedSuggestionIndex >= 0) {
+                    this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex]);
+                }
+                else {
+                    this.handleSearch();
+                }
+                break;
+            case 'Escape':
+                this.hideDropdown();
+                break;
         }
     }
     valueWatcher(newValue) {
-        if (newValue !== this.inputElement.value) {
+        if (this.inputElement && newValue !== this.inputElement.value) {
             this.inputElement.value = newValue;
         }
+        this.updateSuggestions();
+    }
+    suggestionsWatcher() {
+        this.updateSuggestions();
     }
     focusInput() {
-        this.inputElement.focus();
-        this.isFocused = true;
+        // Don't call focus() if the input is already focused to prevent unnecessary operations
+        if (document.activeElement !== this.inputElement) {
+            this.inputElement.focus();
+        }
+        // Only emit focus event if it hasn't been emitted already
+        if (!this.focusEmitted) {
+            this.focusEmitted = true;
+            this.isFocused = true;
+            this.ifxFocus.emit();
+        }
+        if (this.showSuggestions) {
+            // On focus without input: Show only history
+            if (this.value.length === 0) {
+                this.showHistoryDropdown();
+                // Only show dropdown if history is actually present
+                this.showDropdown = this.enableHistory && this.searchHistory.length > 0;
+            }
+            else {
+                // With existing input: Normal suggestion logic
+                this.updateSuggestions();
+                this.showDropdown = this.filteredSuggestions.length > 0;
+            }
+        }
+    }
+    blurInput() {
+        setTimeout(() => {
+            this.isFocused = false;
+            this.focusEmitted = false; // Reset focus flag when blur occurs
+            this.ifxBlur.emit();
+        }, 150);
+    }
+    // Public method to update history from external sources
+    loadSearchHistory() {
+        if (this.enableHistory && typeof localStorage !== 'undefined') {
+            const stored = localStorage.getItem(this.historyKey);
+            this.searchHistory = stored ? JSON.parse(stored) : [];
+            // Update suggestions when history is loaded
+            this.updateSuggestions();
+            // If no input and no history left, close dropdown
+            if (this.value.length === 0 && this.searchHistory.length === 0) {
+                this.showDropdown = false;
+            }
+        }
+    }
+    // Public method to completely clear history
+    clearSearchHistory() {
+        if (this.enableHistory && typeof localStorage !== 'undefined') {
+            // Clear from localStorage
+            localStorage.removeItem(this.historyKey);
+            // Clear internal history
+            this.searchHistory = [];
+            // Reset all dropdown-relevant states
+            this.filteredSuggestions = [];
+            this.selectedSuggestionIndex = -1;
+            this.showDropdown = false;
+            // Update suggestions after reset
+            this.updateSuggestions();
+        }
+    }
+    // Suggestion Management Methods
+    addToHistory(term) {
+        if (!this.enableHistory || !term.trim())
+            return;
+        const history = [...this.searchHistory];
+        const existingIndex = history.indexOf(term);
+        if (existingIndex > -1) {
+            history.splice(existingIndex, 1);
+        }
+        history.unshift(term);
+        // Limit history to maxHistoryItems (default 5)
+        this.searchHistory = history.slice(0, this.maxHistoryItems);
+        if (typeof localStorage !== 'undefined') {
+            localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));
+        }
+    }
+    // Remove individual history entry
+    removeFromHistory(term) {
+        if (!this.enableHistory)
+            return;
+        const history = [...this.searchHistory];
+        const index = history.indexOf(term);
+        if (index > -1) {
+            history.splice(index, 1);
+            this.searchHistory = history;
+            // Update localStorage
+            if (typeof localStorage !== 'undefined') {
+                localStorage.setItem(this.historyKey, JSON.stringify(this.searchHistory));
+            }
+            // Update suggestions after removal
+            this.updateSuggestions();
+            // Close dropdown if no history remains
+            if (this.searchHistory.length === 0 && this.value.length === 0) {
+                this.showDropdown = false;
+            }
+        }
     }
-    async componentDidLoad() {
+    requestSuggestions(query) {
+        this.ifxSuggestionRequested.emit(query);
+        this.updateSuggestions();
+    }
+    updateSuggestions() {
+        const query = this.value.toLowerCase();
+        let suggestions = [];
+        if (query.length > 0) {
+            // For text input: Mix external suggestions and relevant history
+            // 1. Filter external suggestions
+            if (this.suggestions && this.suggestions.length > 0) {
+                const filteredExternal = this.suggestions.filter(s => s.text.toLowerCase().includes(query));
+                suggestions = [...suggestions, ...filteredExternal];
+            }
+            // 2. Filter relevant history entries
+            if (this.enableHistory && this.searchHistory.length > 0) {
+                const filteredHistory = this.searchHistory
+                    .filter(term => term.toLowerCase().includes(query))
+                    .map((term, index) => ({
+                    id: `history-${index}`,
+                    text: term,
+                    type: 'history'
+                }));
+                suggestions = [...suggestions, ...filteredHistory];
+            }
+            // 3. Sort by relevance (exact matches first, then prefix matches)
+            suggestions.sort((a, b) => {
+                const aText = a.text.toLowerCase();
+                const bText = b.text.toLowerCase();
+                // Exact match has highest priority
+                if (aText === query && bText !== query)
+                    return -1;
+                if (bText === query && aText !== query)
+                    return 1;
+                // Prefix match has second highest priority
+                const aStartsWith = aText.startsWith(query);
+                const bStartsWith = bText.startsWith(query);
+                if (aStartsWith && !bStartsWith)
+                    return -1;
+                if (bStartsWith && !aStartsWith)
+                    return 1;
+                // With equal relevance: external suggestions before history
+                if (a.type === 'suggestion' && b.type === 'history')
+                    return -1;
+                if (a.type === 'history' && b.type === 'suggestion')
+                    return 1;
+                // Alphabetical sorting as last criterion
+                return aText.localeCompare(bText);
+            });
+        }
+        else {
+            // For empty query: Show only history (no external suggestions)
+            if (this.enableHistory && this.searchHistory.length > 0) {
+                const historySuggestions = this.searchHistory.map((term, index) => ({
+                    id: `history-${index}`,
+                    text: term,
+                    type: 'history'
+                }));
+                suggestions = historySuggestions;
+            }
+            // For empty query DO NOT show external suggestions
+        }
+        // Remove duplicates based on text and scope combination (history takes precedence over external)
+        const uniqueSuggestions = suggestions.reduce((unique, current) => {
+            const existingIndex = unique.findIndex(item => item.text.toLowerCase() === current.text.toLowerCase() &&
+                item.scope === current.scope);
+            if (existingIndex === -1) {
+                unique.push(current);
+            }
+            else {
+                // If already exists, prefer history over external suggestions
+                if (current.type === 'history' && unique[existingIndex].type !== 'history') {
+                    unique[existingIndex] = current;
+                }
+            }
+            return unique;
+        }, []);
+        this.filteredSuggestions = uniqueSuggestions.slice(0, this.maxSuggestions);
+        this.selectedSuggestionIndex = -1;
+    }
+    navigateSuggestions(direction) {
+        const maxIndex = this.filteredSuggestions.length - 1;
+        if (direction > 0) {
+            this.selectedSuggestionIndex = this.selectedSuggestionIndex < maxIndex
+                ? this.selectedSuggestionIndex + 1
+                : 0;
+        }
+        else {
+            this.selectedSuggestionIndex = this.selectedSuggestionIndex > 0
+                ? this.selectedSuggestionIndex - 1
+                : maxIndex;
+        }
+    }
+    selectSuggestion(suggestion) {
+        this.value = suggestion.text;
+        this.inputElement.value = suggestion.text;
+        this.ifxSuggestionSelected.emit(suggestion);
+        this.ifxInput.emit(this.value);
+        if (this.enableHistory) {
+            // Always add selected suggestions to history since they are valid results
+            this.addToHistory(suggestion.text);
+        }
+        this.hideDropdown();
+    }
+    hideDropdown() {
+        this.showDropdown = false;
+        this.selectedSuggestionIndex = -1;
+        this.isFocused = false;
+    }
+    // Show only history in dropdown (e.g. on focus without input)
+    showHistoryDropdown() {
+        if (this.enableHistory && this.searchHistory.length > 0) {
+            // Show only history entries
+            const historySuggestions = this.searchHistory.map((term, index) => ({
+                id: `history-${index}`,
+                text: term,
+                type: 'history'
+            }));
+            this.filteredSuggestions = historySuggestions.slice(0, this.maxSuggestions);
+            this.selectedSuggestionIndex = -1;
+        }
+        else {
+            this.filteredSuggestions = [];
+        }
+    }
+    // Check if only history entries are displayed (without text input)
+    isShowingOnlyHistory() {
+        return this.value.length === 0 &&
+            this.filteredSuggestions.length > 0 &&
+            this.filteredSuggestions.every(s => s.type === 'history');
+    }
+    // Render text with highlighted matches
+    renderHighlightedText(text, query) {
+        if (!query || query.length === 0) {
+            return text;
+        }
+        const lowerText = text.toLowerCase();
+        const lowerQuery = query.toLowerCase();
+        const index$1 = lowerText.indexOf(lowerQuery);
+        if (index$1 === -1) {
+            return text;
+        }
+        const before = text.substring(0, index$1);
+        const match = text.substring(index$1, index$1 + query.length);
+        const after = text.substring(index$1 + query.length);
+        return [
+            before,
+            index.h("strong", null, match),
+            after
+        ];
+    }
+    async componentWillLoad() {
+        this.loadSearchHistory();
         if (!domUtils.isNestedInIfxComponent(this.el)) {
             const framework = frameworkDetection.detectFramework();
             frameworkDetection.trackComponent('ifx-search-field', await framework);
@@ -64,7 +381,17 @@ const SearchField = class {
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (index.h("div", { key: '3cb0d5615f1b4d1347fb3e0544bf004a714cbdfc', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, index.h("div", { key: '3360230ce82396ffe875aa7d83b560206bb8f1ec', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, index.h("ifx-icon", { key: '52554466624a2a1c6f9a2c5facfd029128fc0fb0', icon: "search-16", class: "search-icon" }), index.h("input", { key: '38ffcd0628e0346455409bed2017c1eb2768ee73', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (index.h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
+        return (index.h("div", { key: '637f2c7144beb35f9915a64fac8df66d65ec5118', "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, index.h("div", { key: 'b5c4d373d93a9225ca08db7340e2732f585c5e80', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, index.h("ifx-icon", { key: '6cc46a75102036d4706d8873e4d0481d0bce263f', icon: "search-16", class: "search-icon" }), index.h("input", { key: 'd770d8a5dc8cf75c8a0f3f3f9d557ccf88bf525d', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox", "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-owns": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-activedescendant": this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined }), this.showDeleteIcon && this.showDeleteIconInternalState ? (index.h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    this.handleDelete();
+                }
+            } })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (index.h("div", { key: 'be15e8157313ad37d0b991ea74b46ba8a7c88880', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (index.h("div", { key: 'd3a1e06a246436ffbc239c502bd76c9250317411', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index$1) => (index.h("div", { key: suggestion.id, id: `suggestion-${index$1}`, class: this.getSuggestionClassNames(index$1), role: "option", "aria-selected": index$1 === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.selectedSuggestionIndex = index$1 }, index.h("div", { class: "suggestion-content" }, suggestion.type === 'history' && (index.h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === 'suggestion' && (index.h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), index.h("span", { class: "suggestion-text" }, index.h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestion.text, this.value)), suggestion.scope && (index.h("span", { class: "suggestion-scope" }, "\u2013 ", suggestion.scope))), suggestion.resultCount !== undefined && suggestion.scope && (index.h("span", { class: "suggestion-count" }, suggestion.resultCount)), suggestion.type === 'history' && (index.h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabindex: "0", "aria-label": `${this.historyDeleteAriaLabel}: ${suggestion.text}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    this.handleHistoryDelete(event, suggestion.text);
+                }
+            } }))))))))));
     }
     getSizeClass() {
         return `${this.size}` === "s"
@@ -72,11 +399,19 @@ const SearchField = class {
             : "";
     }
     getWrapperClassNames() {
-        return index$1.classNames(`search-field__wrapper`, `search-field__wrapper ${this.getSizeClass()}`, `${this.isFocused ? 'focused' : ""}`);
+        return index$1.classNames(`search-field__wrapper`, `search-field__wrapper ${this.getSizeClass()}`, `${this.isFocused ? 'focused' : ""}`, `${this.showDropdown ? 'dropdown-open' : ""}`);
+    }
+    getSuggestionClassNames(index) {
+        var _a;
+        return index$1.classNames('suggestion-item', {
+            'suggestion-item--selected': index === this.selectedSuggestionIndex,
+            'suggestion-item--history': ((_a = this.filteredSuggestions[index]) === null || _a === void 0 ? void 0 : _a.type) === 'history'
+        });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "value": ["valueWatcher"]
+        "value": ["valueWatcher"],
+        "suggestions": ["suggestionsWatcher"]
     }; }
 };
 SearchField.style = IfxSearchFieldStyle0;