@ukic/canary-web-components 3.0.0-canary.3 → 3.0.0-canary.5

package/dist/components/ic-select2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { f as checkSlotInChildMutations, G as getLabelFromValue, H as getFilteredMenuOptions, E as getOptionsWithoutGroupTitlesCount, p as removeFormResetListener, b as inheritAttributes, r as removeDisabledFalse, n as addFormResetListener, o as onComponentRequiredPropUndefined, q as renderHiddenInput, t as getInputDescribedByText, u as hasValidationStatus, J as isMobileOrTablet, e as IcThemeForegroundEnum, I as IC_INHERITED_ARIA, x as IcInformationStatus } from './helpers.js';
+import { f as checkSlotInChildMutations, G as getLabelFromValue, H as getFilteredMenuOptions, E as getOptionsWithoutGroupTitlesCount, p as removeFormResetListener, b as inheritAttributes, r as removeDisabledFalse, n as addFormResetListener, o as onComponentRequiredPropUndefined, q as renderHiddenInput, t as getInputDescribedByText, u as hasValidationStatus, J as isMobileOrTablet, I as IC_INHERITED_ARIA, x as IcInformationStatus } 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';
@@ -20,7 +20,7 @@ const Clear = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www
 </svg>
 `;
 
-const icSelectCss = "/*! 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{display:block;position:relative;--ic-input-label-helpertext-padding:var(--ic-space-xxs);--menu-max-height:100px}:host(.ic-select-full-width){width:100%}ic-input-component-container:hover{--border-color:var(--ic-action-dark-hover)}ic-input-component-container:active{--border-color:var(--ic-action-dark-pressed);color:var(--ic-action-dark-pressed)}ic-input-component-container.menu-open{--border-color:var(--ic-architectural-400);color:var(--ic-action-dark)}ic-input-validation .status-icon,ic-input-validation .statustext{visibility:visible}ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{visibility:hidden;transition:visibility 0s}ic-input-label{margin-bottom:var(--ic-space-xs) !important}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);color:var(--ic-color-text-primary);line-height:1.5rem;letter-spacing:0.005rem;width:100%;height:100%;padding-left:0.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 0.375rem center;background-image:url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select option,.select-option-selected{color:var(--ic-color-text-primary)}select:disabled{color:var(--ic-architectural-200);background-image:url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select:focus{border:0;outline:0}select:not([disabled]){cursor:pointer}.select-container{width:100%;display:flex;align-items:center;position:relative}.select-input{width:100%;height:100%;padding:0 0.375rem;display:flex;cursor:pointer;align-items:center;justify-content:space-between;background:none;border:none}.select-input:focus{outline:var(--ic-hc-focus-outline)}:host(:not(.ic-select-disabled)) ic-input-component-container:hover .select-input{background-color:var(--ic-architectural-white)}.select-input[disabled]{pointer-events:none}:host(.ic-select-searchable) .select-input{cursor:auto}.select-input.with-clear-button{padding-right:0}.value-text{max-width:calc(100% - (var(--ic-space-lg) + var(--ic-space-xxs)));box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-bottom:0 !important}.value-text.with-clear-button{padding-right:calc(var(--ic-space-xl) + var(--ic-space-xs))}.searchable-select-container{align-items:center;display:flex;width:100%;position:relative}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xxs);color:var(--ic-action-dark)}.expand-icon>svg{display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.ic-select-disabled) .expand-icon,:host(.ic-select-disabled) .expand-icon>svg>path{color:var(--ic-architectural-200)}:host(.ic-select-searchable) .expand-icon{padding-left:0;height:2.25rem}:host(.ic-select-searchable) .expand-icon>svg{height:2.25rem;padding:0 calc(var(--ic-space-xxxs) + var(--ic-space-xxs)) 0\n    var(--ic-space-xxs)}:host(.ic-select-searchable:not(.ic-select-disabled)) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-action-dark)}.expand-icon-open,:host(.ic-select-searchable) .expand-icon-open{transform:rotateX(180deg)}:host(.ic-select-disabled) .value-text,.placeholder{color:var(--ic-color-text-tertiary)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;align-items:center}.divider{width:var(--ic-space-1px);background-color:var(--ic-architectural-400);margin:var(--ic-space-xxs) 0;border-radius:var(--ic-space-1px);height:var(--ic-space-lg)}:host(.ic-select-small) .divider{height:var(--ic-space-md)}:host(.ic-select-large) .divider{height:var(--ic-space-xl)}.clear-button{position:absolute;right:calc(var(--ic-space-xl) + var(--ic-space-xxs) - var(--ic-space-1px));border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus{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:focus *{fill:white}.clear-button.searchable{position:static}.searchable-select-results-status,.multi-select-selected-count{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}::slotted([slot=\"icon\"]){fill:var(--ic-color-text-tertiary)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-color-text-primary)}.readonly ::slotted([slot=\"icon\"]){padding:0.375rem;margin-bottom:0.75rem}@media (forced-colors: active){.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}";
+const icSelectCss = "/*! 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{display:block;position:relative;--ic-input-label-helpertext-padding:var(--ic-space-xxs);--menu-max-height:100px;--border-color:var(--ic-select-field-border);--border-color-hover:var(--ic-select-field-border-hover);--border-color-pressed:var(--ic-select-field-border-pressed);--border-color-disabled:var(--ic-select-field-border-disabled);--border-color-error:var(--ic-select-field-border-error);--border-color-error-hover:var(--ic-select-field-border-error-hover);--border-color-error-pressed:var(--ic-select-field-border-error-pressed);--border-color-success:var(--ic-select-field-border-success);--border-color-success-hover:var(--ic-select-field-border-success-hover);--border-color-success-pressed:var(--ic-select-field-border-success-pressed);--border-color-warning:var(--ic-select-field-border-warning);--border-color-warning-hover:var(--ic-select-field-border-warning-hover);--border-color-warning-pressed:var(--ic-select-field-border-warning-pressed);--ic-input-label-text-color:var(--ic-select-field-labe);--ic-input-label-helper-text-color:var(\n    --ic-select-input-field-label-subtitle\n  );--ic-input-validation-status-text-color:var(--ic-select-state-text);--ic-input-validation-error:var(--ic-select-state-icon-error);--ic-input-validation-warning-icon-color:var(--ic-select-state-icon-warning);--ic-input-validation-success-icon-color:var(--ic-select-state-icon-success);--menu-item-text-color:var(--ic-select-list-option-text);--menu-bg-color:var(--ic-select-list-option-background);--menu-border-color:var(--ic-select-dropdown-list-border)}:host(.ic-select-disabled){--ic-input-label-text-color:var(--ic-select-field-label-disabled);--ic-input-label-helper-text-color:var(\n    --ic-select-input-field-label-subtitle-disabled\n  )}:host(.ic-select-full-width){width:100%}ic-input-component-container.menu-open{--border-color:var(--ic-select-field-border-pressed)}ic-input-validation .status-icon,ic-input-validation .statustext{visibility:visible}ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{visibility:hidden;transition:visibility 0s}ic-input-label{margin-bottom:var(--ic-space-xs) !important}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-select-field-background);color:var(--ic-select-content-text);line-height:1.5rem;letter-spacing:0.005rem;width:100%;height:100%;padding-left:0.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 0.375rem center;background-image:var(--ic-select-mobile-dropdown-icon);caret-color:var(--ic-select-input-field-text-cursor)}select option,.select-option-selected{color:var(--ic-select-list-option-text)}select:disabled{color:var(--ic-select-content-text-disabled);background-image:var(--ic-select-mobile-dropdown-icon-disabled)}select:focus{border:0;outline:0}select:not([disabled]){cursor:pointer}.select-container{width:100%;display:flex;align-items:center;position:relative}.select-input{width:100%;height:100%;padding:0 0.375rem;display:flex;cursor:pointer;align-items:center;justify-content:space-between;background:none;border:none;background-color:var(--ic-select-field-background);color:var(--ic-select-content-text)}.select-input:focus{outline:var(--ic-hc-focus-outline)}.select-input[disabled]{pointer-events:none}:host(.ic-select-searchable) .select-input{cursor:auto}.select-input.with-clear-button{padding-right:0}.value-text{max-width:calc(100% - (var(--ic-space-lg) + var(--ic-space-xxs)));box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-bottom:0 !important}.value-text.with-clear-button{padding-right:calc(var(--ic-space-xl) + var(--ic-space-xs))}.searchable-select-container{align-items:center;display:flex;width:100%;position:relative}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xxs);color:var(--ic-select-expand-icon-color)}.expand-icon>svg{display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.ic-select-disabled) .expand-icon,:host(.ic-select-disabled) .expand-icon>svg>path{color:var(--ic-select-disabled-expand-icon-color)}:host(.ic-select-searchable) .expand-icon{padding-left:0;height:2.25rem}:host(.ic-select-searchable) .expand-icon>svg{height:2.25rem;padding:0 calc(var(--ic-space-xxxs) + var(--ic-space-xxs)) 0\n    var(--ic-space-xxs)}:host(.ic-select-searchable:not(.ic-select-disabled)) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-select-expand-icon-color)}.expand-icon-open,:host(.ic-select-searchable) .expand-icon-open{transform:rotateX(180deg)}:host(.ic-select-disabled) .value-text,.placeholder{color:var(--ic-select-content-placeholder-text)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;align-items:center}.divider{width:var(--ic-space-1px);background-color:var(--ic-select-content-divider);margin:var(--ic-space-xxs) 0;border-radius:var(--ic-space-1px);height:var(--ic-space-lg)}:host(.ic-select-small) .divider{height:var(--ic-space-md)}:host(.ic-select-large) .divider{height:var(--ic-space-xl)}.clear-button{color:var(--ic-select-clear-button);position:absolute;right:calc(var(--ic-space-xl) + var(--ic-space-xxs) - var(--ic-space-1px));border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus{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.searchable{position:static}.searchable-select-results-status,.multi-select-selected-count{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}::slotted([slot=\"icon\"]){fill:var(--ic-select-content-placeholder-text)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-select-content-text)}.readonly ::slotted([slot=\"icon\"]){padding:0.375rem;margin-bottom:0.75rem}@media (forced-colors: active){.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}";
 
 let inputIds = 0;
 const MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, "tabindex", "title"];
@@ -612,6 +612,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.showClearButton = false;
         this.size = "medium";
         this.timeout = undefined;
+        this.theme = "inherit";
         this.validationStatus = "";
         this.validationText = "";
         this.loading = false;
@@ -752,7 +753,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         }, 800);
     }
     render() {
-        const { size, disabled, fullWidth, helperText, hideLabel, label, menuId, multiple, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
+        const { size, disabled, fullWidth, helperText, hideLabel, label, menuId, multiple, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, theme, } = this;
         // HTML inputs only accept 'string' for their value
         // Does not cause errors when it is a multi-select - sets value correctly, to a comma-separated string
         renderHiddenInput(true, this.el, name, this.searchable ? this.hiddenInputValue : currValue, disabled);
@@ -764,10 +765,11 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         }
         const optionsSelectedCount = `${currValue === null || currValue === void 0 ? void 0 : currValue.length} of ${getOptionsWithoutGroupTitlesCount(this.options)} selected`;
         return (h(Host, { class: {
-                ["ic-select-disabled"]: disabled,
-                ["ic-select-searchable"]: searchable,
+                "ic-select-disabled": disabled,
+                "ic-select-searchable": searchable,
                 [`ic-select-${size}`]: size !== "medium",
-                ["ic-select-full-width"]: fullWidth,
+                "ic-select-full-width": fullWidth,
+                [`ic-theme-${theme}`]: theme !== "inherit",
             }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, showLeftIcon && (h("span", { slot: "left-icon", class: {
                 ["readonly"]: readonly,
                 ["has-value"]: !!this.value,
@@ -786,9 +788,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             }, role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": `${this.open}`, "aria-invalid": invalid, "aria-required": `${required}`, "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form }), this.searchableSelectInputValue &&
             (showClearButton || searchable) && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && currValue === null
                 ? "Clear input"
-                : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", appearance: this.clearButtonFocused
-                ? IcThemeForegroundEnum.Light
-                : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
+                : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
                 "expand-icon": true,
                 "expand-icon-open": this.open,
             }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { "aria-live": "polite", role: "status", class: "searchable-select-results-status" }))) : (h("div", { class: "select-container" }, h("button", { class: "select-input", ref: (el) => (this.customSelectElement = el), id: this.inputId, "aria-label": `${label}, ${(multiple && currValue
@@ -804,9 +804,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             placeholder), h("div", { class: "select-input-end" }, currValue && showClearButton && (h("div", { class: "divider" })), h("span", { class: {
                 "expand-icon": true,
                 "expand-icon-open": this.open,
-            }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", appearance: this.clearButtonFocused
-                ? IcThemeForegroundEnum.Light
-                : IcThemeForegroundEnum.Dark }))))), (!isMobileOrTablet() || multiple) && (h("ic-menu", { class: {
+            }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (h("ic-menu", { class: {
                 "no-results": this.loading ||
                     this.hasTimedOut ||
                     (this.noOptions !== null &&
@@ -852,6 +850,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         "showClearButton": [4, "show-clear-button"],
         "size": [1],
         "timeout": [2],
+        "theme": [1],
         "validationStatus": [1, "validation-status"],
         "validationText": [1, "validation-text"],
         "loading": [1028],