@ukic/canary-web-components 3.0.0-canary.1 → 3.0.0-canary.10

package/dist/components/ic-search-bar.js

@@ -1,13 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { F as getFilteredMenuOptions, R as handleHiddenFormButtonClick, E as getLabelFromValue, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, t as getInputDescribedByText, q as renderHiddenInput, e as IcThemeForegroundEnum } from './helpers.js';
-import { d as defineCustomElement$b } from './ic-button2.js';
-import { d as defineCustomElement$a } from './ic-input-component-container2.js';
-import { d as defineCustomElement$9 } from './ic-input-container2.js';
-import { d as defineCustomElement$8 } from './ic-input-label2.js';
-import { d as defineCustomElement$7 } from './ic-input-validation2.js';
-import { d as defineCustomElement$6 } from './ic-loading-indicator2.js';
-import { d as defineCustomElement$5 } from './ic-menu2.js';
-import { d as defineCustomElement$4 } from './ic-text-field2.js';
+import { K as getFilteredMenuOptions, W as handleHiddenFormButtonClick, r as removeDisabledFalse, M as debounceEvent, J as getLabelFromValue, o as onComponentRequiredPropUndefined, u as getInputDescribedByText, s as renderHiddenInput } from './helpers.js';
+import { d as defineCustomElement$9 } from './ic-button2.js';
+import { d as defineCustomElement$8 } from './ic-input-component-container2.js';
+import { d as defineCustomElement$7 } from './ic-input-container2.js';
+import { d as defineCustomElement$6 } from './ic-input-label2.js';
+import { d as defineCustomElement$5 } from './ic-loading-indicator2.js';
+import { d as defineCustomElement$4 } from './ic-menu2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
@@ -20,7 +18,7 @@ const searchIcon = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
     <path d="M13.1292 11.8792H12.4708L12.2375 11.6542C13.0542 10.7042 13.5458 9.47083 13.5458 8.12916C13.5458 5.13749 11.1208 2.71249 8.12916 2.71249C5.13749 2.71249 2.71249 5.13749 2.71249 8.12916C2.71249 11.1208 5.13749 13.5458 8.12916 13.5458C9.47083 13.5458 10.7042 13.0542 11.6542 12.2375L11.8792 12.4708V13.1292L16.0458 17.2875L17.2875 16.0458L13.1292 11.8792ZM8.12916 11.8792C6.05416 11.8792 4.37916 10.2042 4.37916 8.12916C4.37916 6.05416 6.05416 4.37916 8.12916 4.37916C10.2042 4.37916 11.8792 6.05416 11.8792 8.12916C11.8792 10.2042 10.2042 11.8792 8.12916 11.8792Z" fill="currentColor"/>
 </svg>`;
 
-const icSearchBarCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-search-bar-search){--divider-height:1.5rem}:host(.ic-search-bar-search.ic-search-bar-small){--divider-height:1rem}:host(.ic-search-bar-full-width){width:100%}:host(.ic-search-bar-search) .ic-button-disabled:hover{border-color:var(--ic-architectural-200)}:host(.ic-search-bar-search.ic-search-bar-disabled) .ic-button-disabled svg{color:var(--ic-architectural-200)}:host(.ic-search-bar-search) .ic-button-disabled svg{color:var(--ic-architectural-400)}.clear-button-container{align-items:center;margin-right:var(--ic-space-1px);display:none;visibility:hidden}.clear-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus,.clear-button:active *{fill:white}.clear-button-visible{visibility:visible;display:flex}.search-submit-button-container{display:flex;align-items:center}.search-submit-button-disabled .ic-tooltip-container{display:none !important}.search-submit-button:focus,.search-submit-button:active{background-color:var(--ic-focus-blue) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow) !important;border-radius:var(--ic-space-xxs)}.search-submit-button:focus,.search-submit-button:active *{fill:white}.divider{width:var(--ic-border-width);background-color:var(--ic-action-dark-active);height:var(--divider-height)}:host(.dark) .divider{background-color:var(--ic-architectural-200)}.menu-container{width:var(--input-width, 20rem);position:relative;top:var(--ic-space-xxxs)}.menu-container.fullwidth{width:100%}.no-results{cursor:not-allowed}.search-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);margin-bottom:calc(-1 * var(--ic-space-1px));margin-right:calc(-1 * var(--ic-space-1px));overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}";
+const icSearchBarCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-search-bar-search){display:block;--divider-height:1.5rem;--ic-input-label-helpertext-padding:var(--ic-space-xxs);--border-color:var(--ic-search-bar-outline);--input-bg-color:var(--ic-search-bar-background);--border-color-disabled:var(--ic-search-bar-outline-disabled);--menu-item-text-color:var(--ic-search-bar-dropdown-option-text);--menu-item-desc-text-color:var(--ic-search-bar-dropdown-option-description);--menu-bg-color:var(--ic-search-bar-dropdown-background);--menu-border-color:var(--ic-search-bar-dropdown-outline)}:host(.ic-search-bar-disabled){--ic-input-label-text-color:var(--ic-search-bar-label-disabled);--ic-input-label-helper-text-color:var(--ic-search-bar-subtitle-disabled)}:host(.ic-search-bar-search:hover){--border-color:var(--ic-search-bar-outline-hover)}:host(.ic-search-bar-search:active){--border-color:var(--ic-search-bar-outline-pressed)}:host(.ic-search-bar-search.ic-search-bar-small){--divider-height:1rem}:host(.ic-search-bar-full-width){width:100%}:host(.ic-search-bar-search) .ic-button-disabled:hover{border-color:var(--ic-architectural-200)}:host(.ic-search-bar-search.ic-search-bar-disabled) .ic-button-disabled svg{color:var(--ic-architectural-200)}:host(.ic-search-bar-search) .ic-button-disabled svg{color:var(--ic-architectural-400)}::-moz-placeholder{color:var(--ic-search-bar-placeholder-text);opacity:1}::placeholder{color:var(--ic-search-bar-placeholder-text);opacity:1}input{border:0;border-radius:var(--ic-border-radius);color:var(--ic-search-bar-filled-text);background-color:var(--input-bg-color);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs);caret-color:var(--ic-search-bar-filled-text-cursor)}input:focus{border:0;outline:0}input:disabled{color:var(--ic-search-bar-disabled-text)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.no-left-pad{padding-left:0}input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-decoration,input[type=\"search\"]::-webkit-search-results-button,input[type=\"search\"]::-webkit-search-results-decoration{display:none}input[type=\"search\"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.clear-button-container{align-items:center;margin-right:var(--ic-space-1px);display:none;visibility:hidden}.clear-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-color-focus-inner);box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer);border-radius:0.25rem}.clear-button-unfocused *{fill:var(--ic-search-bar-clear-button)}.clear-button:focus,.clear-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button-visible{visibility:visible;display:flex}.search-submit-button-container{display:flex;align-items:center}.search-submit-button-unfocused *{fill:var(--ic-search-bar-filled-icon)}.search-submit-button-disabled *{fill:var(--ic-search-bar-icon-disabled)}.search-submit-button-disabled .ic-tooltip-container{display:none !important}.search-submit-button:focus,.search-submit-button:active{background-color:var(--ic-color-focus-inner) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;border-radius:var(--ic-space-xxs)}.search-submit-button:focus,.search-submit-button:active *{fill:white}.divider{width:var(--ic-border-width);background-color:var(--ic-search-bar-dropdown-divider);height:var(--divider-height)}.menu-container{width:var(--input-width, 20rem);position:relative;top:var(--ic-space-xxxs)}.menu-container.fullwidth{width:100%}.no-results{cursor:not-allowed}.search-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);margin-bottom:calc(-1 * var(--ic-space-1px));margin-right:calc(-1 * var(--ic-space-1px));overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}@media (forced-colors: active){.search-submit-button-unfocused *{fill:canvastext}.search-submit-button-disabled *{fill:GrayText}}";
 
 let inputIds = 0;
 const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLElement {
@@ -39,6 +37,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         this.icSubmitSearchBlur = createEvent(this, "icSubmitSearchBlur", 7);
         this.icSearchBarBlur = createEvent(this, "icSearchBarBlur", 7);
         this.icSearchBarFocus = createEvent(this, "icSearchBarFocus", 7);
+        this.icKeydown = createEvent(this, "icKeydown", 7);
         this.assistiveHintEl = null;
         this.hasTimedOut = false;
         this.inputId = `ic-search-bar-input-${inputIds++}`;
@@ -68,6 +67,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         };
         this.onInput = (ev) => {
             this.value = ev.target.value;
+            this.icInput.emit({ value: this.value });
             const noOptions = [
                 { [this.labelField]: this.emptyOptionListText, [this.valueField]: "" },
             ];
@@ -176,10 +176,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         this.handleMenuChange = (ev) => {
             this.setMenuChange(ev.detail.open);
             if (!ev.detail.open) {
-                this.handleMenuCloseFromMenuChange(true);
-                if (ev.detail.focusInput === undefined || ev.detail.focusInput) {
-                    this.el.setFocus();
-                }
+                this.menuCloseFromMenuChangeEvent = true;
             }
         };
         this.setMenuChange = (open) => {
@@ -196,6 +193,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             this.icSearchBarFocus.emit();
         };
         this.handleHostBlur = (ev) => {
+            var _a;
             const nextFocus = ev.relatedTarget;
             if (this.open &&
                 this.options &&
@@ -205,10 +203,10 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
                 this.setMenuChange(false);
             }
             if (this.retryButtonClick || this.retryViaKeyPress) {
-                this.inputEl.setFocus();
+                (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
             }
             this.handleShowClearButton(false);
-            this.handleMenuCloseFromMenuChange(false);
+            this.menuCloseFromMenuChangeEvent = false;
             this.handleTruncateValue(true);
             this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });
             this.retryViaKeyPress = false;
@@ -220,16 +218,12 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         this.handleFocusClearButton = () => {
             this.clearButtonFocused = true;
         };
-        this.handleMenuCloseFromMenuChange = (fromEvent) => {
-            this.menuCloseFromMenuChangeEvent = fromEvent;
-        };
         this.handleTruncateValue = (truncate) => {
             this.truncateValue = truncate;
         };
         this.renderAssistiveHintEl = () => {
-            var _a, _b;
-            const input = (_b = (_a = this.el.shadowRoot
-                .querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`#${this.inputId}`);
+            var _a;
+            const input = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`#${this.inputId}`);
             if (input &&
                 Object.keys(input).length > 0 &&
                 this.hasOptionsOrFilterDisabled()) {
@@ -321,12 +315,19 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         this.searchMode = "navigation";
         this.size = "medium";
         this.spellcheck = false;
+        this.theme = "inherit";
         this.timeout = undefined;
         this.valueField = "value";
         this.filteredOptions = [];
         this.options = [];
         this.value = "";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    debounceChanged() {
+        this.icChange = debounceEvent(this.icChange, this.debounce);
+    }
     loadingHandler(newValue) {
         if (newValue && !this.hasTimedOut) {
             this.preLoad = false;
@@ -369,6 +370,10 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         else if (this.inputEl && this.inputEl.value !== newValue) {
             this.inputEl.value = newValue;
         }
+        this.icChange.emit({ value: newValue });
+    }
+    connectedCallback() {
+        this.debounceChanged();
     }
     disconnectedCallback() {
         if (this.assistiveHintEl) {
@@ -390,17 +395,14 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             }
         }
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Search Bar");
-        if (this.inputEl !== undefined) {
-            this.anchorEl = this.inputEl.shadowRoot.querySelector("ic-input-component-container");
-        }
     }
     componentWillRender() {
         this.highlightFirstOptionAfterNoResults();
     }
-    handleKeyDown(ev) {
-        const keyEv = ev.detail.event;
+    handleKeyDown(event) {
+        this.icKeydown.emit({ event });
         if (this.menu && this.open) {
-            this.menu.handleKeyboardOpen(keyEv);
+            this.menu.handleKeyboardOpen(event);
         }
     }
     handleKeyUp(ev) {
@@ -422,11 +424,10 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
      * Sets focus on the native `input`.
      */
     async setFocus() {
+        var _a;
         this.retryViaKeyPress = false;
         this.retryButtonClick = false;
-        if (this.inputEl) {
-            this.inputEl.setFocus();
-        }
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     debounceAriaLiveUpdate() {
         clearTimeout(this.debounceAriaLive);
@@ -435,8 +436,8 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         }, 500);
     }
     render() {
-        const { inputId, name, label, required, size, placeholder, helperText, disabled, value, readonly, spellcheck, fullWidth, options, open, hideLabel, menuId, ariaActiveDescendant, truncateValue, autofocus, autocapitalize, autocomplete, filteredOptions, } = this;
-        const disabledMode = readonly || disabled ? true : false;
+        const { inputId, name, label, required, size, placeholder, helperText, disabled, value, readonly, spellcheck, fullWidth, options, open, hideLabel, menuId, ariaActiveDescendant, truncateValue, autofocus, autocapitalize, autocomplete, filteredOptions, theme, } = this;
+        const disabledMode = readonly || disabled;
         const describedBy = getInputDescribedByText(inputId, helperText !== "", false).trim();
         let describedById;
         if (describedBy !== "" && this.hasOptionsOrFilterDisabled()) {
@@ -451,57 +452,52 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         else {
             describedById = undefined;
         }
-        const disabledText = disabledMode && !readonly;
-        const hasSuggestedSearch = value && this.hasOptionsOrFilterDisabled();
+        const hasSuggestedSearch = !!value && this.hasOptionsOrFilterDisabled();
         const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;
         const menuRendered = menuOpen && value.length >= this.charactersUntilSuggestion;
-        const isOrHasLoaded = this.filteredOptions.length === 1 &&
-            (this.filteredOptions[0][this.labelField] === this.loadingLabel ||
-                filteredOptions[0][this.labelField] === this.loadingErrorLabel);
-        let expanded;
-        if (options.length > 0) {
-            if (menuOpen) {
-                expanded = "true";
-            }
-            else {
-                expanded = "false";
-            }
-        }
-        else {
-            expanded = undefined;
-        }
+        const labelValue = getLabelFromValue(value, options, this.valueField, this.labelField);
         renderHiddenInput(true, this.el, name, value, disabledMode);
         return (h(Host, { class: {
                 ["ic-search-bar-search"]: true,
                 ["ic-search-bar-full-width"]: fullWidth,
                 ["ic-search-bar-disabled"]: disabled,
                 ["ic-search-bar-small"]: size === "small",
-            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-text-field", { ref: (el) => (this.inputEl = el), inputId: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly, size: size, hideLabel: hideLabel, fullWidth: fullWidth, name: name, truncateValue: truncateValue, value: options &&
-                !!getLabelFromValue(value, options, this.valueField, this.labelField)
-                ? getLabelFromValue(value, options, this.valueField, this.labelField)
-                : value, placeholder: placeholder, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : "", "aria-describedby": describedById, "aria-owns": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, ariaExpanded: expanded, ariaActiveDescendant: ariaActiveDescendant, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: hasSuggestedSearch ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search", debounce: this.debounce }, h("div", { class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
+                "no-left-pad": readonly,
+                readonly,
+                "truncate-value": truncateValue,
+            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": label, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": options.length > 0 && menuRendered ? `${menuOpen}` : undefined, "aria-owns": menuRendered ? menuId : undefined, "aria-describedby": describedById, "aria-controls": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: options.length > 0 && menuRendered ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }), h("div", { class: {
                 "clear-button-container": true,
                 "clear-button-visible": value && !disabledMode && this.showClearButton,
-            }, slot: "clear-button" }, h("ic-button", { id: "clear-button", class: "clear-button", "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", appearance: this.clearButtonFocused
-                ? IcThemeForegroundEnum.Light
-                : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" })), h("div", { class: {
+            } }, h("ic-button", { id: "clear-button", class: {
+                "clear-button": true,
+                "clear-button-unfocused": !this.clearButtonFocused,
+            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }), h("div", { class: "divider" })), h("div", { class: {
                 "search-submit-button-container": true,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            }, slot: "search-submit-button" }, h("ic-button", { id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
+            } }, h("ic-button", { id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
                 ["search-submit-button"]: true,
                 ["search-submit-button-small"]: size === "small",
-            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: "submit", variant: "icon", appearance: this.searchSubmitFocused
-                ? IcThemeForegroundEnum.Light
-                : IcThemeForegroundEnum.Default })), h("div", { class: {
+                ["search-submit-button-unfocused"]: !this.searchSubmitFocused,
+                ["search-submit-button-disabled"]: this.isSubmitDisabled(),
+            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: "submit", variant: "icon", theme: this.searchSubmitFocused ? "light" : "dark" }))), h("div", { class: {
                 "menu-container": true,
                 fullwidth: fullWidth,
-            }, slot: "menu" }, menuRendered && (h("ic-menu", { class: {
-                "no-results": this.hadNoOptions() || isOrHasLoaded,
-            }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, searchMode: this.searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: !!menuRendered, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: this.labelField, valueField: this.valueField })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
+            } }, menuRendered && (h("ic-menu", { class: {
+                "no-results": this.hadNoOptions() ||
+                    (filteredOptions.length === 1 &&
+                        (filteredOptions[0][this.labelField] ===
+                            this.loadingLabel ||
+                            filteredOptions[0][this.labelField] ===
+                                this.loadingErrorLabel)),
+            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: this.searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: !!menuRendered, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: this.labelField, valueField: this.valueField })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
+        "debounce": ["debounceChanged"],
         "loading": ["loadingHandler"],
         "filteredOptions": ["filteredOptionsHandler"],
         "options": ["watchOptionsHandler"],
@@ -535,6 +531,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         "searchMode": [1, "search-mode"],
         "size": [1],
         "spellcheck": [4],
+        "theme": [1],
         "timeout": [2],
         "valueField": [1, "value-field"],
         "options": [16],
@@ -547,7 +544,9 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         "showClearButton": [32],
         "filteredOptions": [32],
         "setFocus": [64]
-    }, [[0, "icKeydown", "handleKeyDown"], [0, "keyup", "handleKeyUp"]], {
+    }, [[0, "keydown", "handleKeyDown"], [0, "keyup", "handleKeyUp"]], {
+        "disabled": ["watchDisabledHandler"],
+        "debounce": ["debounceChanged"],
         "loading": ["loadingHandler"],
         "filteredOptions": ["filteredOptionsHandler"],
         "options": ["watchOptionsHandler"],
@@ -557,7 +556,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ic-search-bar", "ic-button", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-loading-indicator", "ic-menu", "ic-text-field", "ic-tooltip", "ic-typography"];
+    const components = ["ic-search-bar", "ic-button", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-loading-indicator", "ic-menu", "ic-tooltip", "ic-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "ic-search-bar":
             if (!customElements.get(tagName)) {
@@ -565,41 +564,31 @@ function defineCustomElement$1() {
             }
             break;
         case "ic-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "ic-input-component-container":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ic-input-container":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "ic-input-label":
+        case "ic-input-component-container":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "ic-input-validation":
+        case "ic-input-container":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "ic-loading-indicator":
+        case "ic-input-label":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "ic-menu":
+        case "ic-loading-indicator":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "ic-text-field":
+        case "ic-menu":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }