@ukic/web-components 3.24.0 → 3.26.0

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

@@ -527,39 +527,39 @@ export class SearchBar {
         const menuRendered = menuOpen && value.length >= charactersUntilSuggestion;
         const labelValue = getLabelFromValue(value, options, valueField, labelField);
         renderHiddenInput(this.el, value, name, disabledMode);
-        return (h(Host, { key: '04e5c15ac492b502e560a905f83f3a250412ca06', class: {
+        return (h(Host, { key: 'f9ec3f2c47607e817cf0352546d0f72653b433ae', class: {
                 "ic-search-bar-search": true,
                 "ic-search-bar-full-width": fullWidth,
                 "ic-search-bar-disabled": disabled,
                 "ic-search-bar-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { key: '8fef7c014864aef9293542ab21524aa45d9241ac', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '43f1de8b93e14b829f581e0d394a75cb03c9d946', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly }, h("slot", { key: 'f5f1c33908f9083f84e162e6967e8b40d903f264', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '9fa5ed5c57101c905259eacdf81a1d7f8189f086', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '853c5c33a1760d96d447332df4c3bff6e79f91f8', id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
+            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { key: 'fde0dc358fd80f81d23927eb18b6bd73e9694bcc', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '3c2a138a07c5a637842bf0330a857cd8a4c05be5', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly }, h("slot", { key: '4e5d465c5f4486826f3a634a4dd5ed2ecf01b249', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '62ad9581a1280af102d990de7fcac4055f800bec', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '196cad9c551d68276d99af9a60bd07a141130bd9', 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": hideLabel ? label : undefined, "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", { key: '0d72210be324fa78ae66ce350c163e9633917978', class: {
+            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : undefined, "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", { key: '94889d1ffab13321ea522704aacd7ebf0e0c3d00', class: {
                 "clear-button-container": true,
                 "clear-button-visible": !!value && !disabledMode && showClearButton,
-            } }, h("ic-button", { key: 'be2a08dde69a638dc26f0c479c691e65d80ece9e', id: "clear-button", class: {
+            } }, h("ic-button", { key: 'd0a3c5b6288c249ba8be2a4bcbbd2a33f1a30025', id: "clear-button", class: {
                 "clear-button": true,
                 "clear-button-unfocused": !clearButtonFocused,
-            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "button", variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }), h("div", { key: '5043e6629e6c2c925bc8464a65339bad98e915dc', class: "divider" })), h("div", { key: 'a36f9243178a2dc0da8e45e7dfe649816cf2b978', class: {
+            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "button", variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }), h("div", { key: '3965e828aba0dd8f88051ec717c7fafcb237a271', class: "divider" })), h("div", { key: 'c143dbc227dce558f5f87e1e2f7e3a014b9d250c', class: {
                 "search-submit-button-container": true,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            } }, h("ic-button", { key: '9bdca735d409bd35d38d586b69172a72673fd275', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
+            } }, h("ic-button", { key: '98e79886a69703ab39c8d6f5f97c147fb406870d', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
                 "search-submit-button": true,
                 "search-submit-button-small": size === "small",
                 "search-submit-button-unfocused": !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: searchButtonType, variant: "icon-tertiary", theme: searchSubmitFocused ? "light" : "dark" }))), h("div", { key: '642e60a52c92b6fda82276a827236c4651d0cbf7', class: {
+            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: searchButtonType, variant: "icon-tertiary", theme: searchSubmitFocused ? "light" : "dark" }))), h("div", { key: '4b0377230ac437eda9f5674876e87a7a72a0779c', class: {
                 "menu-container": true,
                 fullwidth: fullWidth,
-            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: '025843659ad91751380c71f373c8e8f9fa118eb1', class: {
+            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: '8be3e2accba616f85a408e8c82304433e98f7715', class: {
                 "no-results": this.hadNoOptions() ||
                     (filteredOptions.length === 1 &&
                         (filteredOptions[0][labelField] === loadingLabel ||
                             filteredOptions[0][labelField] === loadingErrorLabel)),
-            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: labelField, valueField: valueField, searchBar: true })))), h("div", { key: '17f2a14197fa3051a70345fd10e30a5cb98a13de', "aria-live": "polite", role: "status", class: "search-results-status" })));
+            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: labelField, valueField: valueField, searchBar: true })))), h("div", { key: '09953fbff84f3e27a6522da365ef49e96b21fa62', "aria-live": "polite", role: "status", class: "search-results-status" })));
     }
     static get is() { return "ic-search-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -601,7 +601,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "IcAutocompleteTypes",
-                    "resolved": "\"name\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
+                    "resolved": "\"on\" | \"off\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
                     "references": {
                         "IcAutocompleteTypes": {
                             "location": "import",

package/dist/collection/components/ic-section-container/ic-section-container.js

@@ -12,12 +12,12 @@ export class SectionContainer {
     }
     render() {
         const { aligned, fullHeight } = this;
-        return (h(Host, { key: '141dc39bbd1e9fda7617f8bff574f1e25ada9fe8', class: {
+        return (h(Host, { key: 'b72248434ac227221b9854880dd5103733052170', class: {
                 ["aligned-left"]: aligned === "left" || aligned === null,
                 ["aligned-center"]: aligned === "center",
                 ["aligned-full-width"]: aligned === "full-width",
                 ["no-vertical-padding"]: !!fullHeight,
-            } }, h("slot", { key: '8f1f0cdc5a22c0de9e0e3346ba1b7dcc8c3bf295' })));
+            } }, h("slot", { key: '749c9299c6116291ec9555bbd2a9586585e7480d' })));
     }
     static get is() { return "ic-section-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-select/ic-select.js

@@ -607,19 +607,19 @@ export class Select {
                     "loading" in menuOptions[0] ||
                     "timedOut" in menuOptions[0]));
         renderHiddenInput(this.el, value, name || inputId, disabled);
-        const ClearButton = () => (h("ic-button", { key: '8b264f825c15b75c6b4b75659f8fe054425f1d08', ref: (el) => (this.clearButton = el), id: "clear-button", "aria-label": this.searchable ? "Clear input" : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onBlur: this.handleBlur, size: size, variant: "icon-tertiary" }));
-        const NativeSelect = () => (h("select", Object.assign({ key: '75584fed7b1a6ad382ded83c440643657c1e1c7c', ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid ? "true" : "false", onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleNativeSelectKeyDown, form: form }, inheritedAttributes), h("option", { key: '9cecd0abe9eb2f3df10dcc9cf6f6bd0f866f5e9d', value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => "children" in option && option.children ? (h("optgroup", { label: option.label }, option.children.map((child) => this.renderNativeOption(child)))) : (this.renderNativeOption(option)))));
-        const SelectButton = () => (h("div", { key: '236970625078488c8fc0b592ffff98fdce92eb59', class: "select-container" }, h("button", { key: '7c57aae2a5ffc206af492ef69afc81ed45f132e4', class: "select-input", role: "combobox", ref: (el) => (this.selectElement = el), id: inputId, "aria-label": `${label}, ${(multiple && value
+        const ClearButton = () => (h("ic-button", { key: '3892a327f660eb5c8add2dad6b0234e98c1763df', ref: (el) => (this.clearButton = el), id: "clear-button", "aria-label": this.searchable ? "Clear input" : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onBlur: this.handleBlur, size: size, variant: "icon-tertiary" }));
+        const NativeSelect = () => (h("select", Object.assign({ key: '9dbff7cad48e70c9ecb5bdaf5188bf76ebb21bc9', ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid ? "true" : "false", onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleNativeSelectKeyDown, form: form }, inheritedAttributes), h("option", { key: '4899ac51e4735de3a3a6d1674a107d496d136f8d', value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => "children" in option && option.children ? (h("optgroup", { label: option.label }, option.children.map((child) => this.renderNativeOption(child)))) : (this.renderNativeOption(option)))));
+        const SelectButton = () => (h("div", { key: 'a54b55c792c30da50db55cdf579a7b5112733ab2', class: "select-container" }, h("button", { key: '566288c0b7ba2c08f437d0894f1e7e8d050dbec9', class: "select-input", role: "combobox", ref: (el) => (this.selectElement = el), id: inputId, "aria-label": `${label}, ${(multiple && value
                 ? `${value.length} of ${this.flatOptions.length} selected, ${this.getLabelString()}`
-                : this.getLabelString()) || placeholder}`, onClick: this.handleClick, "aria-describedby": describedBy, "aria-invalid": invalid ? "true" : "false", "aria-haspopup": "listbox", "aria-expanded": `${open}`, "aria-controls": menuId, "aria-required": `${required}`, disabled: disabled, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-activedescendant": ariaActiveDescendant }, h("ic-typography", { key: 'e83a141287ad5f72e5760781452a4f191cf04fa8', variant: "body", class: {
+                : this.getLabelString()) || placeholder}`, onClick: this.handleClick, "aria-describedby": describedBy, "aria-invalid": invalid ? "true" : "false", "aria-haspopup": "listbox", "aria-expanded": `${open}`, "aria-controls": menuId, "aria-required": `${required}`, disabled: disabled, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-activedescendant": ariaActiveDescendant }, h("ic-typography", { key: 'f5fb6dcd933444aa16b0e481f3cfcd606d266027', variant: "body", class: {
                 "value-text": true,
                 "with-clear-button": !!isClearable,
                 placeholder: !value,
-            } }, this.getLabelString()), h("div", { key: 'd0144dcf41567138a7920ef03e3487e0ec54adaf', class: "select-input-end" }, isClearable && h("div", { key: '7476a99bca242fb377406f059e23445307f8fd47', class: "divider" }), h("span", { key: '9c7bcbd45dd68efa9342fec61ca30e8129cbe3e3', class: {
+            } }, this.getLabelString()), h("div", { key: '2a0f71ba4314bf48c042c08d6542a7e5d290cfa1', class: "select-input-end" }, isClearable && h("div", { key: 'aab9235d7bed234a7faa3b76f946723a6fd733b5', class: "divider" }), h("span", { key: 'bbcb55feda8598bed785a7d97ffbfda9beace9b6', class: {
                 "expand-icon": true,
                 "expand-icon-open": open,
-            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && h(ClearButton, { key: '96fe7d88db9ae07066b8975594a9394b51adbead' }), h("div", { key: 'f8aa1da24f4f1b7c6caefd93af5626939a4c30da', "aria-live": "polite", "aria-atomic": "true", class: "aria-live-hidden-text" }, selectButtonAriaLiveText)));
-        const SelectInput = () => (h("div", { key: '0359142f04587d68aad6d55f9a7a64bc3f61943e', class: "searchable-select-container" }, h("input", { key: 'e7c6a921b493e0a8b810e5ea823fe2970313b4f9', class: {
+            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && h(ClearButton, { key: '7be9270208022eec818d3d11e787e97b3e9781a4' }), h("div", { key: '66a002a41aaae04ff167acd5bc41df446d1c7185', "aria-live": "polite", "aria-atomic": "true", class: "aria-live-hidden-text" }, selectButtonAriaLiveText)));
+        const SelectInput = () => (h("div", { key: '8c8bc17e0e8d6b2a19c2b6546a7dc1927003ffe6', class: "searchable-select-container" }, h("input", { key: 'b9f94d2533162b38c766f003a9befcbadff6def8', class: {
                 "value-text": true,
                 "select-input": true,
                 "with-clear-button": !!searchableSelectInputValue,
@@ -627,25 +627,25 @@ export class Select {
                 ? ""
                 : value
                     ? this.getLabelString()
-                    : searchableSelectInputValue || undefined, disabled: disabled, placeholder: placeholder, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, form: form }), isClearable && (h("div", { key: '4c6c663b7f3794a0a3748d6cb61c31372bbad84d', class: "clear-button-container" }, h(ClearButton, { key: '03413d6336fa01461037740a9a73c2acbad9d3c1' }), h("div", { key: 'aad75a81b8a62e8302a83f95d3dae62028d82841', class: "divider" }))), h("span", { key: 'cc9aa62781332afed5a4a00ad687820fd6106a8a', onMouseDown: this.handleExpandIconMouseDown, class: {
+                    : searchableSelectInputValue || undefined, disabled: disabled, placeholder: placeholder, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, form: form }), isClearable && (h("div", { key: '2fa369c2f909206cda3e533fdc1b4f61f49e5367', class: "clear-button-container" }, h(ClearButton, { key: '7c6f3009ca83d1f1ad53bbfe9356663a777b01b8' }), h("div", { key: 'f7928645b4eac91f7a65e88fa493032f9036e520', class: "divider" }))), h("span", { key: '01223cbc2bb20344cc6e18d6d7c899ed9eb73565', onMouseDown: this.handleExpandIconMouseDown, class: {
                 "expand-icon": true,
                 "expand-icon-open": open,
-            }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { key: 'f689789683bad109768658de55194fd922f6a586', "aria-live": "polite", role: "status", class: "aria-live-hidden-text" }, selectInputAriaLiveText)));
-        const ReadOnly = () => (h("ic-typography", { key: 'f77135f478f4860a473bda5ce2d5ed82adae0b53' }, h("p", { key: 'b98c424e53047b835231479ba3c8e949207b2e60' }, this.getLabelString() === placeholder ? "" : this.getLabelString())));
-        return (h(Host, { key: '126f830a424039ed189c5c0bdb3a5581f4c9fd34', class: {
+            }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { key: '3ad6ae8f699743bdf8277a4b5c50afa4fa0ddc22', "aria-live": "polite", role: "status", class: "aria-live-hidden-text" }, selectInputAriaLiveText)));
+        const ReadOnly = () => (h("ic-typography", { key: 'dac815c30b87420c94c68e65eaa27ec3b0902a12' }, h("p", { key: '828de16f7df4fa23e8387f2ef9cf84b1994a91a3' }, this.getLabelString() === placeholder ? "" : this.getLabelString())));
+        return (h(Host, { key: '91899d31f22ef6d7417710d110499cc72e97f230', class: {
                 "ic-select-disabled": disabled,
                 "ic-select-searchable": searchable,
                 [`ic-select-${size}`]: size !== "medium",
                 "ic-select-full-width": fullWidth,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-input-container", { key: 'b9dee0df3b7201371974b1384cc773550304574f', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: 'a247b8e90fd62cc805e6e2b921bd598d81023b50', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly }, h("slot", { key: '022b03330ee4995b282ca486b8b8407458b65242', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '012bec0098db190860d46d78d0d0eabfea6f349b', ref: (el) => (this.anchorEl = el), class: { "menu-open": open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, isSlotUsed(this.el, "icon") &&
+            } }, h("ic-input-container", { key: '2c314323d9b410363eefdfb6fbdcb8b4360109d0', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: '28269a9d64624f0c646fa46bf8199716cefdc220', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly }, h("slot", { key: '235bdb195e5feeae8d82360efa17aa576df9cff4', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: 'a936a39d3dbdf43d406d994594b4dd72f1aa59e2', ref: (el) => (this.anchorEl = el), class: { "menu-open": open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, isSlotUsed(this.el, "icon") &&
             !disabled &&
-            (!readonly || !!value) && (h("span", { key: 'e510aaf8f1af290adeda47fb69a2b9fe03ba45df', slot: "left-icon", class: {
+            (!readonly || !!value) && (h("span", { key: '67c88b6a8c00524eff7575fc71150ea5aabeb847', slot: "left-icon", class: {
                 readonly,
                 "has-value": !!value,
-            } }, h("slot", { key: '4618acba252d43f20b92430be62ad522296145c9', name: "icon" }))), isMobileOrTablet() && this.useNativeSelectOnMobile && !multiple ? (h(NativeSelect, null)) : readonly ? (h(ReadOnly, null)) : !searchable ? (h(SelectButton, null)) : (h(SelectInput, null))), !(isMobileOrTablet() &&
+            } }, h("slot", { key: '92f2c3c41210287a28e524afa4511a08204a5544', name: "icon" }))), isMobileOrTablet() && this.useNativeSelectOnMobile && !multiple ? (h(NativeSelect, null)) : readonly ? (h(ReadOnly, null)) : !searchable ? (h(SelectButton, null)) : (h(SelectInput, null))), !(isMobileOrTablet() &&
             this.useNativeSelectOnMobile &&
-            !multiple) && (h("ic-menu", { key: '5e014dba6d6c4598aa9c6644aa556fc4e80022cc', ref: (el) => (this.menu = el), class: { "no-results": noOptions }, inputEl: searchable ? this.searchableSelectElement : this.selectElement, allowMenuFocus: false, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: open, options: this.getOptions(), value: multiple ? value : value, fullWidth: fullWidth, selectOnEnter: selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onTimeoutBlur: this.handleTimeoutBlur, onMenuOptionId: this.updateAriaActiveDescendant, onClick: this.setFocus, parentEl: this.el, activationType: searchable || multiple || selectOnEnter ? "manual" : "automatic", onRetryButtonClicked: this.handleRetry, closeOnSelect: !multiple, multiSelect: multiple, searchableSelect: searchable })), h("ic-input-validation", { key: '08feb8f8e219adb8aba58e078a9dc6d0aa8bc006', class: {
+            !multiple) && (h("ic-menu", { key: '644f853a4caad5efbcab0c9228e0bf18595ecb91', ref: (el) => (this.menu = el), class: { "no-results": noOptions }, inputEl: searchable ? this.searchableSelectElement : this.selectElement, allowMenuFocus: false, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: open, options: this.getOptions(), value: multiple ? value : value, fullWidth: fullWidth, selectOnEnter: selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onTimeoutBlur: this.handleTimeoutBlur, onMenuOptionId: this.updateAriaActiveDescendant, onClick: this.setFocus, parentEl: this.el, activationType: searchable || multiple || selectOnEnter ? "manual" : "automatic", onRetryButtonClicked: this.handleRetry, closeOnSelect: !multiple, multiSelect: multiple, searchableSelect: searchable })), h("ic-input-validation", { key: '00ca9a2788bf404fb096c2497e46aa138c32ea76', class: {
                 "menu-open": open,
             }, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "", for: inputId }))));
     }

package/dist/collection/components/ic-side-navigation/ic-side-navigation.js

@@ -466,7 +466,7 @@ export class SideNavigation {
             isAppNameSubtitleVariant,
             appTitle: appTitle || "",
         };
-        return (h(Host, { key: '886d59eacfc6a79fa8b4caae8a2cdb775dff6067', class: {
+        return (h(Host, { key: '467270372cb15a90984978cb333a6756c7ffcb8d', class: {
                 "xs-menu-open": menuOpen && isSDevice,
                 "xs-menu-close": !menuOpen && isSDevice,
                 "sm-collapsed": !isSDevice && !menuExpanded,
@@ -475,12 +475,12 @@ export class SideNavigation {
                 [`ic-side-navigation-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
                 ["collapsed-labels"]: !isSDevice && !menuExpanded && !!collapsedIconLabels,
                 ["ic-side-navigation-inline"]: !!inline,
-            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: '92d8098c0824f92ff4f639385d9ef1aae6fda26e', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: '5a35143cf052d624a03308c8a727b8714e1896a6', class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { key: '4239354cce9eede321351b68744550e0de08c3ae', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { key: 'f8a95a420530e9114eb4560a8e77b5be51282906', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { key: 'b660e71252c4c16dda5f3850c2769312b26397ff', class: "navigation-list" }, h("slot", { key: 'b3c7b371935ef0f4b5d604c5ebe1dda873419d75', name: "primary-navigation" }))))), h("div", { key: '2fcca3fc56a443b064541f3c595214693fe76b37', class: {
+            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: '51b75422befcc62a8b9a866ab9ab7c58b799db2c', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: 'fbcb14963d2ce5567297bdf794d1dd5f7a6209bb', class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { key: '24da45c7237f1152c1e93db9b928120bcca1ba14', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { key: 'e57f1521e37ecc9b770b35339059564ff23fe945', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { key: '88ffcdc33e0ebb348a3f8851dfb85020625293d7', class: "navigation-list" }, h("slot", { key: '91243f0760b0a67226f4c83a0393f669443ee356', name: "primary-navigation" }))))), h("div", { key: '77eaa1bf6bd8951c5a77902c75b0664aa36f0b44', class: {
                 ["bottom-wrapper"]: true,
                 ["classification-spacing"]: hasClassificationBanner(),
-            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { key: '3b0b5d0d656206768109c4e4065c14d831962cb2', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { key: '637fe5abe5383946e97277b089c7dd1d46e703a3', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { key: '78640f1d84d55e53414094fff6abad155b44f35d', class: "navigation-list" }, h("slot", { key: '35d6d19470f2b2694084b55c08905cfc8e3a0a97', name: "secondary-navigation" })))), h("div", { key: '78cd12a09800d0e83634ad7ca75daa2bd1adcd35', class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", { key: 'b600544aa406b829069b6f7cdefeee16e9b4c40f' }), displayExpandBtn && (h("button", { key: 'a48355b059c6e41f141a41ca1aed6bf363be51cc', class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { key: '6f51db95e92d73c8c59ca5e337e0e6083e0d95b5', class: "app-status-wrapper" }, status && (h("div", { key: 'aea4cbab412fd1a89d65517d355a41538505527c', class: {
+            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { key: 'ad66580f2b2f753f4ce2d1be8128fdcb5fb69c9f', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { key: '3f503502795535166e14d6d52ee1b8f72dfe9551', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { key: 'cfd5af2f79b1ca9e309fc160c5b4b00385f017d2', class: "navigation-list" }, h("slot", { key: 'a975b85e39c977ea241a976df63699337f6507d7', name: "secondary-navigation" })))), h("div", { key: 'b0f3f81a20589100389495ded413bf1bfe09e096', class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", { key: '3ee7716a6a6ed2e8f776b9ba376a54274c84f873' }), displayExpandBtn && (h("button", { key: 'c7f04012bfcb7f727431a9d7e6e53d714cc49e5e', class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { key: 'a3d90469e6d05790dd84a00ea1e4c4c35ecb8955', class: "app-status-wrapper" }, status && (h("div", { key: '6dddec89dbd4e81f2d5b0132c648e53e72092d14', class: {
                 ["app-status"]: true,
-            } }, h("ic-typography", { key: '1a23249530701743408ac1003ce89a0c91f5165c', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version && (h("ic-typography", { key: '430aa919fdf4eaca59e0fa6523f014a1885de38a', variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
+            } }, h("ic-typography", { key: '21635fd5640f74861ede6840073a112753d13a29', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version && (h("ic-typography", { key: '7a95df03f61c13f2a6ed23e43be42959ae98fd88', variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
     }
     static get is() { return "ic-side-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-skeleton/ic-skeleton.js

@@ -38,11 +38,11 @@ export class Skeleton {
                 width: el.style.width || width || DEFAULT_WIDTHS[variant],
             }
             : undefined;
-        return (h(Host, { key: 'a68ad9122c6ad09b2283f2d6168e6286c8c8157f', class: {
+        return (h(Host, { key: '67c1971600feaaaf5849048b4bc5ad3d4903ffb4', class: {
                 skeleton: true,
                 "ic-skeleton-circle": variant === "circle",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'a44bc7abbfb1f33581eec83e06556936ee410636' })));
+            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'caf8562f7997131daa69e85d6766b3edf2531259' })));
     }
     static get is() { return "ic-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-skip-link/ic-skip-link.js

@@ -35,9 +35,9 @@ export class SkipLink {
     }
     render() {
         const { fullWidth, inline, label, monochrome, target, theme, transparentBackground, } = this;
-        return (h(Host, { key: '90a25f2594d0169a8ee6f1d03b30a30fccb17168', class: {
+        return (h(Host, { key: '2f344a07df5cb31b39b5cd4ca8bc257229646b31', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-link", { key: '79c0f5121c3ac8bae5992756f3c628f381ebe576', class: {
+            } }, h("ic-link", { key: '9b844b5a2f207d08eaa8cbb621d54ed56f5cc28d', class: {
                 "display-top": !inline,
                 "full-width": !!fullWidth,
                 "show-background": !transparentBackground,

package/dist/collection/components/ic-status-tag/ic-status-tag.js

@@ -33,12 +33,12 @@ export class StatusTag {
     }
     render() {
         const { label, status, variant, size, announced, theme, uppercase } = this;
-        return (h(Host, { key: 'e6dae50277c14c03b3d42bc12b880fa421ba5e5b', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: 'e92f10182a350fd9ea993bb6376b77463a865c6d', class: {
+        return (h(Host, { key: '06426990cc94da53c570547331c63d161675f620', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: '2c6d0e05018d59bfc7c1acab4b8ffda5ba4cfce3', class: {
                 ["tag"]: true,
                 [`${variant}-${status}`]: true,
                 ["outlined"]: variant === "outlined",
                 [`${size}`]: true,
-            } }, h("ic-typography", { key: 'b3a5f6504550096511aa0b0e577be5ed46b9fd84', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: 'd7cdc4dc4b3e635432d57799cbaea26d5380fea9' }, label)))));
+            } }, h("ic-typography", { key: '3af29b781e35ed4817043d4f2f697f468502189a', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: '4f4759e8dabfff3d686ed3e4cd3975cc0b0c33b4' }, label)))));
     }
     static get is() { return "ic-status-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-step/ic-step.js

@@ -77,27 +77,27 @@ export class Step {
         // STATUS ICON FOR COMPACT STEP
         let statusIcon;
         if (type === "completed" || compactStepStyling === "completed") {
-            statusIcon = (h("span", { key: '3e6a788d03556019e87781e4e58306d0081da72a', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+            statusIcon = (h("span", { key: '4d1011a9a12449bd324aff3f404522fde6912be3', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
         }
         else if (type === "disabled" || compactStepStyling === "disabled") {
-            statusIcon = (h("span", { key: 'd3df77790e474794ac3a74cc99c98ec73a51530a', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+            statusIcon = (h("span", { key: '7825f61e87546bcaa9100c439239022abb0f3eb7', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
         // COMPACT STEP COMPONENT
-        const compactStep = (h("div", { key: '58e72e89eb93fd00ea4a76704c3744050eed25d2', class: {
+        const compactStep = (h("div", { key: '82c7c26c90ce286582f7ef477129d2ce241200c1', class: {
                 ["step"]: true,
                 ["current"]: !!current,
                 [`compact-step-${compactStepStyling}`]: !!compactStepStyling,
                 ["disabled"]: type === "disabled" || compactStepStyling === "disabled",
-            } }, h("ic-loading-indicator", { key: 'c7a6e8e70fe3e3a485a5b0c9353b6a7eaf5888d0', class: {
+            } }, h("ic-loading-indicator", { key: 'd3d1b2aa382bd8b307433f16aa05f644b275902f', class: {
                 "compact-step-progress-indicator": true,
                 "not-required": type === "disabled" || compactStepStyling === "disabled",
-            }, "aria-hidden": "true", size: "small", "inner-label": stepNum, progress: progress }), h("div", { key: '13209e08fa212f80ee2b6b2f04dd65cd3a36f461', class: "heading-area" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (h("ic-typography", { variant: "h4", class: "heading" }, heading)), h("div", { key: '7c71fc4f8ce1b59c792c60f2d18cc464ebfc3b0f', class: "info-line" }, h("ic-typography", { key: '942f6be75ff898fccda479f36003b80dcdcad9ed', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, h("span", { key: 'a3ced0ecff13af724c007fa1ca32f7396f114612', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
+            }, "aria-hidden": "true", size: "small", "inner-label": stepNum, progress: progress }), h("div", { key: 'd0f78f477b4fe29b2ac33798712b70c0c3d2ce41', class: "heading-area" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (h("ic-typography", { variant: "h4", class: "heading" }, heading)), h("div", { key: 'f9a074c126d393ec82cf72621e5941c32dbd72fb', class: "info-line" }, h("ic-typography", { key: '1b6bd91bcb1013fa1e23a9e9af49d3da1f25448e', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, h("span", { key: '753bbc4c12a2b968cde11238f46ff4ffbc4f39fd', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
             type === "completed" ||
             type === "disabled" ||
             (this.variant === "compact" &&
                 !!compactStepStyling &&
                 compactStepStyling !== "active") ||
-            !!status) && (h("div", { key: '04bb305951a0de96241c64e478b26e12afcd838a', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (h("ic-typography", { key: '3487444c46756faf3f1a88ce4cebd129cbd14d87', variant: "caption" }, subheading !== null && isPropDefined(subheading)
+            !!status) && (h("div", { key: '93968f9752cf90df5f67994a3942f38d94323b50', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (h("ic-typography", { key: 'd1879f9dc5a7ea2e9b468fc95593056527e08095', variant: "caption" }, subheading !== null && isPropDefined(subheading)
             ? subheading
             : type === "disabled" ||
                 (variant === "compact" &&
@@ -110,26 +110,26 @@ export class Step {
         // ICON FOR DEFAULT STEP
         let icon;
         if (type !== "completed") {
-            icon = (h("ic-typography", { key: 'e25e3e2da7abbf17fcf8ede4dde3ce26010f68e0', variant: "subtitle-small" }, h("span", { key: 'ae4b4e77475d060dc7ce62796118fd03a0cbdb1f', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+            icon = (h("ic-typography", { key: 'e76d3c6f2fc82ae27e9f19af2ad29374c75271b1', variant: "subtitle-small" }, h("span", { key: '2ada7f696f0e90ecca298a2109d9aaeb70777a1a', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
-            icon = (h("div", { key: '86b31c3ca79c025e185a5461c210be965b42dc2a', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '9854c6981f84ed0984fb98666a123de0c2a32048', class: "check-icon", innerHTML: checkIcon })));
+            icon = (h("div", { key: '195a5f5dd31061a4059020d7fa1d65b15eb29a11', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: 'd11d3bf512968fa286309bcd69faa20cd12d3396', class: "check-icon", innerHTML: checkIcon })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = type === "current" && (h("div", { key: 'af4367f38115d9ee7f0e2112ab62ae7fdfe5b801', class: "step-connect-inner" }));
-        const finalStep = !lastStep && (h("div", { key: '979da51621c8e026ab2b2d59d7ad83764e0330a7', class: {
+        const partialBar = type === "current" && (h("div", { key: '5564ceeb1d40367572f3ae679e7212a2a2a53578', class: "step-connect-inner" }));
+        const finalStep = !lastStep && (h("div", { key: 'fae846f5c7d46ad65c7d21a2785526ed6d841444', class: {
                 ["step-connect"]: true,
                 ["aligned-full-width"]: !!(((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("ic-stepper-default")) &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
             } }, partialBar));
         // DEFAULT STEP COMPONENT
-        const defaultStep = (h("div", { key: 'd91c5752a70b8062c91c7a2563229968ed832a2f', class: {
+        const defaultStep = (h("div", { key: 'f02d7139a59a46207e7bd308cf90ffd42c14a93e', class: {
                 ["step"]: true,
                 [`${type}`]: true,
-            } }, h("div", { key: 'df780502b324c87db8eb701d9b4c43e12e6d6b32', class: "step-top" }, h("div", { key: '7e2b4c244ecfe20c71f53d8f825938af39b62f71', class: "step-icon" }, icon), finalStep), (hasHeading || subheading || status) && (h("div", { key: 'e645cb62ca795ee554a1b580e6fdae6555bc410c', class: "heading-area" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (h("ic-typography", { variant: "subtitle-large", class: "heading" }, heading)), hasHeading && (subheading || status) && (h("ic-typography", { key: '8498b50dd12915ac9e39ad329e35b0a585c77f46', variant: "caption", class: "subheading" }, subheading !== null && isPropDefined(subheading)
+            } }, h("div", { key: 'd3cb91eb9ae01c50255fefe75c9cf15dac9899a2', class: "step-top" }, h("div", { key: '71afc47b70d57c6d98aacd824c304e661d97a97d', class: "step-icon" }, icon), finalStep), (hasHeading || subheading || status) && (h("div", { key: '7b11bdfc83c4071d6aff8f026e7ab32f2033a666', class: "heading-area" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (h("ic-typography", { variant: "subtitle-large", class: "heading" }, heading)), hasHeading && (subheading || status) && (h("ic-typography", { key: '10da1844c1af5252f89bc59254e23c45c5400a2d', variant: "caption", class: "subheading" }, subheading !== null && isPropDefined(subheading)
             ? subheading
             : stepStatus))))));
-        return (h(Host, { key: '356617f292b301db2b92d8c1d111fa32831705c1', role: "listitem", "aria-label": `${icI18n.step} ${stepNum}${ariaLabel}`, "aria-current": (current || type === "current") && "step", class: {
+        return (h(Host, { key: '6605252cf1e05ba81b2adbcf6e41f2c9c23b1f09', role: "listitem", "aria-label": `${icI18n.step} ${stepNum}${ariaLabel}`, "aria-current": (current || type === "current") && "step", class: {
                 ["aligned-full-width"]: !!(((_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains("ic-stepper-default")) &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
                 [`ic-step-${variant}`]: true,

package/dist/collection/components/ic-stepper/ic-stepper.js

@@ -279,11 +279,11 @@ export class Stepper {
         checkResizeObserver(this.runResizeObserver);
     }
     render() {
-        return (h(Host, { key: '457ee30e4513044d1160e73ab9e868c796d996e2', class: {
+        return (h(Host, { key: '4fbff633235fba3d0c146427b74d1c4e69cff419', class: {
                 [`ic-stepper-${this.variant}`]: true,
                 ["ic-stepper-aligned-left"]: this.variant === "default" && this.aligned === "left",
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("ul", { key: '32a6e9ee86bc0a89d9997aa7f74250874f1e466f', class: "step-item-list" }, h("slot", { key: '9571c50056c525a853cd0469d81fa2dead8cec1f' }))));
+            } }, h("ul", { key: '452b6724f1b286aa3ff75fd460cdc4dfa36e8e55', class: "step-item-list" }, h("slot", { key: 'e6e6465ee3c505fab2bbe1c7c502defa7e587571' }))));
     }
     static get is() { return "ic-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-switch/ic-switch.css

@@ -468,15 +468,10 @@ input {
   margin-bottom: var(--ic-space-xs);
 }
 
-.ic-switch-label-small {
-  margin-bottom: var(--ic-space-xs);
-}
-
 .ic-switch-toggle {
   display: flex;
   align-items: center;
-  justify-content: space-around;
-  width: 4rem;
+  width: calc(var(--ic-space-xl) * 2);
   height: var(--ic-space-xl);
   position: relative;
   border-radius: 100vw;
@@ -485,6 +480,19 @@ input {
   box-sizing: border-box;
   transition: var(--ic-transition-duration-fast);
   margin-left: var(--ic-space-xxs);
+  gap: calc(var(--ic-space-md) + var(--ic-space-xxs));
+}
+
+.ic-switch-small .ic-switch-toggle {
+  width: var(--ic-space-xxl);
+  height: var(--ic-space-lg);
+  gap: calc(var(--ic-space-sm) + var(--ic-space-xxxs));
+}
+
+.ic-switch-large .ic-switch-toggle {
+  width: calc(var(--ic-space-xl) + var(--ic-space-xxl));
+  height: calc(var(--ic-space-xl) + var(--ic-space-xs));
+  gap: calc(var(--ic-space-lg) + var(--ic-space-xxs));
 }
 
 .ic-switch-line-break {
@@ -493,42 +501,70 @@ input {
 
 .ic-switch-toggle::before {
   content: "";
-  width: 1.333rem;
-  height: 1.333rem;
+  width: calc(var(--ic-space-sm) * 2);
+  height: calc(var(--ic-space-sm) * 2);
   border-radius: 50%;
   position: absolute;
   z-index: 2;
   top: 50%;
-  left: 0.333rem;
+  left: var(--ic-space-xxs);
   transform: translate(0, -50%);
   background-color: var(--ic-switch-unchecked);
   transition: var(--ic-transition-duration-slow);
 }
 
+.ic-switch-small .ic-switch-toggle::before {
+  width: var(--ic-space-md);
+  height: var(--ic-space-md);
+}
+
+.ic-switch-large .ic-switch-toggle::before {
+  width: var(--ic-space-xl);
+  height: var(--ic-space-xl);
+}
+
 .ic-switch-icon {
   display: inline-block;
   vertical-align: middle;
-  width: 0.625rem;
-  height: 0.625rem;
+  width: var(--ic-space-sm);
+  height: var(--ic-space-sm);
 }
 
-.ic-switch-icon-circle,
-.ic-switch-icon-line {
-  stroke-width: 1;
+.ic-switch-small .ic-switch-icon {
+  width: var(--ic-space-xs);
+  height: var(--ic-space-xs);
+}
+
+.ic-switch-large .ic-switch-icon {
+  width: var(--ic-space-md);
+  height: var(--ic-space-md);
 }
 
 .ic-switch-icon-circle {
   stroke: var(--ic-switch-indicator-off);
+  stroke-width: var(--ic-space-1px);
 }
 
 .ic-switch-icon-line {
-  stroke: var(--ic-switch-indicator-on);
+  height: var(--ic-space-sm);
+  width: var(--ic-space-1px);
+  background-color: var(--ic-switch-indicator-on);
+  border-radius: 99px;
+  margin-left: calc(
+    var(--ic-space-md) + var(--ic-space-xxs) - var(--ic-space-1px)
+  );
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .ic-switch-toggle::before {
-    transition-duration: 0ms;
-  }
+.ic-switch-small .ic-switch-icon-line {
+  margin-left: calc(var(--ic-space-md) - var(--ic-space-1px));
+  height: var(--ic-space-xs);
+}
+
+.ic-switch-large .ic-switch-icon-line {
+  margin-left: calc(
+    var(--ic-space-xs) + var(--ic-space-md) - var(--ic-space-1px)
+  );
+  height: var(--ic-space-md);
 }
 
 .ic-switch-input:checked + .ic-switch-toggle {
@@ -537,24 +573,35 @@ input {
 }
 
 .ic-switch-input:checked + .ic-switch-toggle::before {
-  transform: translate(var(--ic-space-xl), -50%);
+  transform: translate(calc(var(--ic-space-xl) - var(--ic-space-1px)), -50%);
   background-color: var(--ic-switch-checked);
 }
 
+.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {
+  transform: translate(calc(var(--ic-space-lg) - var(--ic-space-1px)), -50%);
+}
+
+.ic-switch-large .ic-switch-input:checked + .ic-switch-toggle::before {
+  transform: translate(
+    calc(var(--ic-space-xxl) - var(--ic-space-xs) - var(--ic-space-1px)),
+    -50%
+  );
+}
+
 .ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {
-  box-shadow: 0 0 0 0.75rem var(--ic-switch-unchecked-bg-hover);
+  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-unchecked-bg-hover);
 }
 
 .ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {
-  box-shadow: 0 0 0 0.75rem var(--ic-switch-unchecked-bg-pressed);
+  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-unchecked-bg-pressed);
 }
 
 .ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {
-  box-shadow: 0 0 0 0.75rem var(--ic-switch-checked-bg-hover);
+  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-checked-bg-hover);
 }
 
 .ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {
-  box-shadow: 0 0 0 0.75rem var(--ic-switch-checked-bg-pressed);
+  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-checked-bg-pressed);
 }
 
 .ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,
@@ -571,7 +618,7 @@ input {
 }
 
 .ic-switch-disabled .ic-switch-icon-line {
-  stroke: var(--ic-switch-indicator-on-disabled);
+  background-color: var(--ic-switch-indicator-on-disabled);
 }
 
 .ic-switch-input:disabled + .ic-switch-toggle {
@@ -593,27 +640,27 @@ input {
   background-color: var(--ic-switch-checked);
 }
 
-.ic-switch-small .ic-switch-toggle {
-  width: var(--ic-space-xxl);
-  height: var(--ic-space-lg);
-}
-
-.ic-switch-small .ic-switch-toggle::before {
-  width: var(--ic-space-md);
-  height: var(--ic-space-md);
-  left: var(--ic-space-xxs);
-}
-
-.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {
-  transform: translate(var(--ic-space-lg), -50%);
-}
-
 ::slotted([slot="right-adornment"]) {
   margin-left: var(--ic-space-sm);
   fill: var(--ic-switch-icon);
 }
 
 @media (forced-colors: active) {
+  .ic-switch-toggle::before {
+    width: calc(var(--ic-space-sm) * 2 - var(--ic-space-xxxs));
+    height: calc(var(--ic-space-sm) * 2 - var(--ic-space-xxxs));
+  }
+
+  .ic-switch-small .ic-switch-toggle::before {
+    width: calc(var(--ic-space-md) - var(--ic-space-xxxs));
+    height: calc(var(--ic-space-md) - var(--ic-space-xxxs));
+  }
+
+  .ic-switch-large .ic-switch-toggle::before {
+    width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
+    height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
+  }
+
   .ic-switch-toggle::before,
   .ic-switch-input:checked + .ic-switch-toggle {
     border: var(--ic-border-hc);
@@ -625,7 +672,18 @@ input {
   }
 
   .ic-switch-input:checked + .ic-switch-toggle::before {
-    transform: translate(calc(var(--ic-space-xl) - 0.125rem), -50%);
+    transform: translate(calc(var(--ic-space-xl) - var(--ic-space-xxxs)), -50%);
+  }
+
+  .ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {
+    transform: translate(calc(var(--ic-space-lg) - var(--ic-space-xxxs)), -50%);
+  }
+
+  .ic-switch-large .ic-switch-input:checked + .ic-switch-toggle::before {
+    transform: translate(
+      calc(var(--ic-space-xxl) - var(--ic-space-xs) - var(--ic-space-xxxs)),
+      -50%
+    );
   }
 
   .ic-switch-input:disabled + .ic-switch-toggle,
@@ -634,10 +692,17 @@ input {
     border-color: GrayText;
   }
 
-  .ic-switch-disabled .ic-switch-icon-circle,
-  .ic-switch-disabled .ic-switch-icon-line {
+  .ic-switch-icon-line {
+    background-color: buttonborder;
+  }
+
+  .ic-switch-disabled .ic-switch-icon-circle {
     stroke: GrayText;
   }
+
+  .ic-switch-disabled .ic-switch-icon-line {
+    background-color: GrayText;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {