@ukic/web-components 3.14.0 → 3.15.0

package/dist/collection/components/ic-radio-option/ic-radio-option.js

@@ -139,15 +139,15 @@ export class RadioOption {
     render() {
         const { additionalFieldDisplay, disabled, dynamicText, form, groupLabel, handleClick, handleKeyDown, hasAdditionalField, label, name, selected, value, theme, } = this;
         const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;
-        return (h(Host, { key: 'd4254c0a08bd7fe373f7beeb849d732d437c6f5b', onClick: handleClick, onKeyDown: handleKeyDown, class: {
+        return (h(Host, { key: '3d233946c372788a34128912099c47d6858d7ea9', onClick: handleClick, onKeyDown: handleKeyDown, class: {
                 ["ic-radio-option-disabled"]: !!disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '1b3c7c383278c1d8714f5a7a3a00c8fb780a2931', class: { container: true, disabled: !!disabled } }, h("div", { key: 'ba90a2ce5912981a50d43ebd33086eb227947e5f' }, h("input", { key: '8eb145667ce5b7777ced51480ceebab3f43a7910', tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled, checked: selected, ref: (el) => (this.radioElement = el), form: form }), h("span", { key: '3683fd5eda19dd39f4647a5763705eef4becacb3', class: "checkmark" })), h("ic-typography", { key: 'd662a4e7a5b0ac173a7ea2881d2dac84e94eedc7', class: "radio-label", variant: "body" }, h("label", { key: 'a76e5907c98f2ff18d734167ff69bbe0a1c7ddc4', htmlFor: id }, label))), hasAdditionalField && (h("div", { key: '36b6226b2cc21d25037eb9a39c2f1d7f4f2dbcbf', class: {
+            } }, h("div", { key: 'e932a0827c6b0620522f9f3df3f5a06316098949', class: { container: true, disabled: !!disabled } }, h("div", { key: '64eeea95469af9831655f56701e2332255bf6669' }, h("input", { key: '32f7a8840d8a14a89f1a79b9c61890e0e2fe23a0', tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled, checked: selected, ref: (el) => (this.radioElement = el), form: form }), h("span", { key: '6cbea9714c51eb75b7be07a509049f0c330ffca5', class: "checkmark" })), h("ic-typography", { key: '55164cf8d231d449267b74389f9d7cd8193ab6db', class: "radio-label", variant: "body" }, h("label", { key: '54014827aa5c16641bc3fa864974382bf0715335', htmlFor: id }, label))), hasAdditionalField && (h("div", { key: '5f3e1054494365c3fafdfd421bed64523307406b', class: {
                 "dynamic-container": true,
                 hidden: additionalFieldDisplay === "dynamic" && !selected,
-            } }, additionalFieldDisplay === "dynamic" && (h("div", { key: 'c7182dd5dfa6e378cb009e98d0408e40f06ae2e5', class: "branch-corner" })), h("div", { key: '59286b0ca3110c6ba745a8149b0a9c4707e9a7a8' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: '16491146b394af8f08ebde6a8452ca159c9ad665', variant: "caption", role: "alert" }, h("p", { key: 'bcc87f891dc1598a7f2756d740fa2271730d1429', class: "dynamic-text" }, dynamicText))), h("div", { key: 'ceda461f6d7dd511f7e72245fb331e551126e823', class: {
+            } }, additionalFieldDisplay === "dynamic" && (h("div", { key: 'd9c292dd502569650dcf327a3e48716cde723593', class: "branch-corner" })), h("div", { key: '3994230df8af7e9c5215646a1c5c3d5687961637' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: '0b92403d743c4517ca099586a2845e71d528c329', variant: "caption", role: "alert" }, h("p", { key: '0b689ea686ff2cb08b27858920a2f0548c197aa7', class: "dynamic-text" }, dynamicText))), h("div", { key: '7e023eb75b14dd0a75acbe5321ecd676de0a67d4', class: {
                 "additional-field-wrapper": additionalFieldDisplay === "static",
-            } }, h("slot", { key: '3458dd8cf7904abb86e65cff449774459e389f09', name: ADDITIONAL_FIELD })))))));
+            } }, h("slot", { key: 'b3f82b1650ef67a732b35a32c5088745f31d1f31', name: ADDITIONAL_FIELD })))))));
     }
     static get is() { return "ic-radio-option"; }
     static get originalStyleUrls() {

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

@@ -528,39 +528,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: '29effef90a1b301f50dd5e16cb00ed70eccab512', class: {
+        return (h(Host, { key: '71d9a6e7a555373e98a3ee7ea114fc1f69f06570', 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: 'e896aa115879948ea3f8c2431e93791ff1d833db', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: 'fd412bd32638354ff10f6653800921f2c15e8561', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly }, h("slot", { key: 'cb13c54cb67e19ca0a275d3af1b0a5199e4ce89c', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '75b330a02def1ea7e43d353ffb1041bfe2d61b53', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '1b4dc1a0b79fdaad28b52238557e930c9ec02c30', 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: '23dfe2a04d5c039174366f85fa42df074fd30c98', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '1c222b2269cbab7436dc225b75e09568d323a1f0', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly }, h("slot", { key: 'e38a00e300ddc76daaf3c52332adab4ac16038c4', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '17dff32cab5a5b34673c1255f0a1d696b9df84b4', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: 'e5d666c8a1609a1683b735940afd707e67b7eaa6', 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: 'ac9075acbae4855280df3a7927a325ee20ac5d82', 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: '98887c2626a05e3ddc15c7ddad3a756262c197e8', class: {
                 "clear-button-container": true,
                 "clear-button-visible": !!value && !disabledMode && showClearButton,
-            } }, h("ic-button", { key: 'd3b1a71ede9651edce18ef3c2e31d044518ea79a', id: "clear-button", class: {
+            } }, h("ic-button", { key: '119b7ae17e8c7cbd8a56e6bd8136340c269958e3', 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: '4514b92f5f6ff11d6c4d296109eb768591490fce', class: "divider" })), h("div", { key: 'c1507f41ba857730f14a74f4fb0c24480fed6ba2', 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: 'bf3e848c1e275217c686f3aab3b10a09396d6b4e', class: "divider" })), h("div", { key: '4075cd96e0274043b8da4e25d32a5cee5d4bb0e5', class: {
                 "search-submit-button-container": true,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            } }, h("ic-button", { key: 'f48d2f2c3cec19bb4fb66be6024ec1d8b8f21e8d', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
+            } }, h("ic-button", { key: '77e1e8bfef4ce5304dbf877b5ecfc440d37d864c', 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: '408c068afb680a643752be6c04df27bf4ec010f0', 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: '20e98815de9ec0c35fa247026de3d9e273161ea6', class: {
                 "menu-container": true,
                 fullwidth: fullWidth,
-            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: 'e9a150bc0ead1db84cc63723acc7bf21bb5ba5fc', class: {
+            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: 'b2f7d74335c27d93e9f5dc5b63bab80daeb3eeae', 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: '41368646242aceb6f0e7bd8ba9ba6ff029cf8d7a', "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: 'f76306ff99a2c103fdea197759f6036d479dc51f', "aria-live": "polite", role: "status", class: "search-results-status" })));
     }
     static get is() { return "ic-search-bar"; }
     static get encapsulation() { return "shadow"; }

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: '343b4d46f49af4458ad961d31de6118927b5e3ec', class: {
+        return (h(Host, { key: '67c1b4b2afe62fc53812421ee49c01bf689e05b4', class: {
                 ["aligned-left"]: aligned === "left" || aligned === null,
                 ["aligned-center"]: aligned === "center",
                 ["aligned-full-width"]: aligned === "full-width",
                 ["no-vertical-padding"]: !!fullHeight,
-            } }, h("slot", { key: '96932a21be0e230d9d15e05f09b8da67f772dd2b' })));
+            } }, h("slot", { key: 'cb21cb372b6131cfb990ac0a016f6c64641749f9' })));
     }
     static get is() { return "ic-section-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -466,7 +466,7 @@ video {
   --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-text-color: var(--ic-select-field-label);
   --ic-input-label-helper-text-color: var(
     --ic-select-input-field-label-subtitle
   );

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

@@ -794,18 +794,18 @@ export class Select {
             (searchable
                 ? !!searchableSelectInputValue
                 : !!currValue && !loading && showClearButton);
-        return (h(Host, { key: 'f4a2c999048b3813c72f19cb9d12b179a1aa2829', class: {
+        return (h(Host, { key: 'beb04e2fdc2db5765b24622f4d31bfdf36c61ba6', class: {
                 "ic-select-disabled": disabled,
                 "ic-select-searchable": searchable,
                 [`ic-select-${size}`]: size !== "medium",
                 "ic-select-full-width": fullWidth,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onBlur: this.onBlur }, h("ic-input-container", { key: '26ca71ed868b6154ae6d85b12176cbd2c245a2a1', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: 'fbc267c35b7408673080578c7223713bbbc63487', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly }, h("slot", { key: '6614423a784d3c8afb82685721ac76044a541b2c', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '22f3497287a6dffa909d12ab7cf56dcc350580ff', ref: (el) => (this.anchorEl = el), class: { "menu-open": open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, isSlotUsed(this.el, "icon") &&
+            }, onBlur: this.onBlur }, h("ic-input-container", { key: 'e85323a8778251dca9d78ccc76906c7523a8f02a', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: '9bd3a6662c29157c323beee7355ec0983a0a83e9', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly }, h("slot", { key: 'ba0fc93028a2ff25112730a950381a25bee23b54', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: 'c7d54f4d61bcb41cfbb3c4af1600a783e696121f', 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: '2103e465e79ce43a400ab208cd3fa41f8d9a4897', slot: "left-icon", class: {
+            (!readonly || !!value) && (h("span", { key: '891b11b3008d52ac3db2197c372b21a12a9f431e', slot: "left-icon", class: {
                 readonly,
                 "has-value": !!value,
-            } }, h("slot", { key: '626f074a90189f115c112e179ffd5c1e28ac17c6', name: "icon" }))), readonly ? (h("ic-typography", null, h("p", null, valueLabelString))) : isMobileOrTablet() && !multiple ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: form }, inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => option.children ? (h("optgroup", { label: option.label }, option.children.map((child) => this.renderNativeOption(child)))) : (this.renderNativeOption(option))))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: {
+            } }, h("slot", { key: '9fc291a9f0b756bf31331260ea3c313cdecf8fa2', name: "icon" }))), readonly ? (h("ic-typography", null, h("p", null, valueLabelString))) : isMobileOrTablet() && !multiple ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: form }, inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => option.children ? (h("optgroup", { label: option.label }, option.children.map((child) => this.renderNativeOption(child)))) : (this.renderNativeOption(option))))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: {
                 "value-text": true,
                 "select-input": true,
                 "with-clear-button": !!searchableSelectInputValue,
@@ -826,7 +826,7 @@ export class Select {
             } }, valueLabelString || placeholder), h("div", { class: "select-input-end" }, isClearable && h("div", { class: "divider" }), h("span", { class: {
                 "expand-icon": true,
                 "expand-icon-open": open,
-            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && (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-tertiary", theme: clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (h("ic-menu", { key: 'e309813f2a75cf0eb862f6c1b06cf34a81ded8f1', class: {
+            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && (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-tertiary", theme: clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (h("ic-menu", { key: 'b56cf5adc26838ad0f873aa16df8da7fd7b83d22', class: {
                 "no-results": loading ||
                     hasTimedOut ||
                     (searchable &&
@@ -835,7 +835,7 @@ export class Select {
                         ((_d = (_c = this.uniqueOptions) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.label) === emptyOptionListText),
             }, ref: (el) => (this.menu = el), inputEl: searchable
                 ? this.searchableSelectElement
-                : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: open, options: searchable ? filteredOptions : uniqueOptions, value: multiple ? currValue : currValue, fullWidth: fullWidth, selectOnEnter: selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onMenuKeyPress: this.handleMenuKeyPress, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: searchable || multiple || selectOnEnter ? "manual" : "automatic", closeOnSelect: !multiple, multiSelect: multiple ? true : false, searchableSelect: searchable ? true : false })), multiple && (h("div", { key: '4d029c5c9543fe25438a856df7a6dcde941ed648', "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), h("ic-input-validation", { key: 'f709f7940485a6fa673a1fe7cb14a636e53fa151', class: {
+                : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: open, options: searchable ? filteredOptions : uniqueOptions, value: multiple ? currValue : currValue, fullWidth: fullWidth, selectOnEnter: selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onMenuKeyPress: this.handleMenuKeyPress, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: searchable || multiple || selectOnEnter ? "manual" : "automatic", closeOnSelect: !multiple, multiSelect: multiple ? true : false, searchableSelect: searchable ? true : false })), multiple && (h("div", { key: 'c4e7606e119c8658e590716ff02dcaf45f30ae89', "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), h("ic-input-validation", { key: 'b74ff136f8b758c400d9c0262a227f2286b301d5', class: {
                 "menu-open": open,
             }, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "", for: inputId }))));
     }

package/dist/collection/components/ic-select/ic-select_(single).stories.js

@@ -821,9 +821,18 @@ export const EmittingIcOptionSelectOnEnter = {
   name: "Emitting icOptionSelect on enter",
 };
 
-export const CustomPropsOnLiElements = {
+export const Internationalisation = {
   render: () =>
-    html`<ic-select
+    html` <p>
+        The first select is wrapped in a <code>&lt;span lang="fr"&gt;</code> to
+        change the language. All options will read in french, which can be
+        tested using a screen reader.
+      </p>
+      <span lang="fr">
+        <ic-select id="select-lang" label="Boisson Préférée"></ic-select>
+      </span>
+      <hr />
+      <ic-select
         id="select-custom-li-props"
         label="What is your favourite coffee?"
       ></ic-select>
@@ -834,8 +843,15 @@ export const CustomPropsOnLiElements = {
         reader.
       </p>
       <script>
-        var select = document.querySelector("#select-custom-li-props");
-        select.options = [
+        var select1 = document.querySelector("#select-lang");
+        select1.options = [
+          { label: "Chocolat Chaud", value: "choc" },
+          { label: "Jus", value: "jus" },
+          { label: "Limonade", value: "lim" },
+        ];
+        var select2 = document.querySelector("#select-custom-li-props");
+        select2.options = [
+          { label: "Flat White", value: "Fla", htmlProps: { lang: "en-GB" } },
           { label: "Cappuccino", value: "Cap", htmlProps: { lang: "it" } },
           { label: "Latte", value: "Lat", htmlProps: { lang: "it" } },
           { label: "Americano", value: "Ame", htmlProps: { lang: "it" } },
@@ -845,7 +861,7 @@ export const CustomPropsOnLiElements = {
         });
       </script>`,
 
-  name: "Custom props on <li>s",
+  name: "Internationalisation (+ options with htmlProps)",
 };
 
 const inlineRadioSelector = "inline-radio";

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

@@ -451,7 +451,7 @@ export class SideNavigation {
             isAppNameSubtitleVariant,
             appTitle: appTitle || "",
         };
-        return (h(Host, { key: 'dee98e8859e6935f7ce2775e95d32be82041ca0c', class: {
+        return (h(Host, { key: '2742b166ab7c1b3dadd63ca46597082f57b4a93c', class: {
                 "xs-menu-open": menuOpen && isSDevice,
                 "xs-menu-close": !menuOpen && isSDevice,
                 "sm-collapsed": !isSDevice && !menuExpanded,
@@ -460,12 +460,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: '7de065dd79a3633a0e2a0f2a5935c579e7d8cbd7', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: 'a950c396e16fc7ccd6a47ce355f3c518beb4772d', class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { key: '2fe8cffb5411676a3a2aae321fc6f50c6f0db1a0', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { key: '497dc28ccd564c1e98ca06ab0799ee5672356473', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { key: '3f264d80dbbf56c1e7be38b7b3759b6b71daa246', class: "navigation-list" }, h("slot", { key: 'a9d3c59225617b1505b8f176fe2013cb612ea8d1', name: "primary-navigation" }))))), h("div", { key: 'd86b2683593cb26ba2f5486c467dca05d92f32ec', class: {
+            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: '9c893c2c7dea96389a45a16f527070d6e3de5368', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: 'dbd2108ad31efee6d38a03c3dc6eb09648d19f11', class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { key: 'ecd7bb4e1e16ddc4eb7602cdf307e6a28f16e853', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { key: '4dcc53007366eddf432ab265e5a246fd94ca5911', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { key: '88796e6410e8359878b43c1f517fbd4cb4513e3f', class: "navigation-list" }, h("slot", { key: '8e83a35ead924765f96919d274b65ed09d5e929f', name: "primary-navigation" }))))), h("div", { key: '5574dd7d0b1f5269fd9db2be0e82eab01189f484', class: {
                 ["bottom-wrapper"]: true,
                 ["classification-spacing"]: hasClassificationBanner(),
-            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { key: '58e5fb4f988382c818d213d096bbdaca62d8401b', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { key: '6458a76842e7c228cf73f0ca6bfaf6e50970417a', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { key: '76e6c8ac16f803de44efb7dfe6f628dd665bce85', class: "navigation-list" }, h("slot", { key: '1f54dbc9d285e8b1fd40933551bf37af146ecf97', name: "secondary-navigation" })))), h("div", { key: 'd4eef9cdbe35d022243461147a9d5b3b80802a0a', class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", { key: '423f2e4f54c49d6daa45fd85c0d55f9467d08c74' }), displayExpandBtn && (h("button", { key: '1460adecbbcf46743f3e3ef1ac984a5968f6f0f9', class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { key: 'b221957ba1badf6560239643624cbbc64a48c6c9', class: "app-status-wrapper" }, status && (h("div", { key: '5be443d54b038e32832b8cbb95ad23046e4c3d04', class: {
+            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { key: '2f53e21f14b1b2bac7984a39a372004eae05532d', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { key: '892d0c1292c15c558ade91896d610ed75714d3f4', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { key: '795f0ba505bb550fe9b61a39e2f7020d03d9dbba', class: "navigation-list" }, h("slot", { key: 'ebdd3da64163638ddf46509f56627de51ac17825', name: "secondary-navigation" })))), h("div", { key: '50ea370bfce079ca1073f8ef676879141a4dc00c', class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", { key: '3897e3e6deac28eb1656a753b438def9e3d6ee75' }), displayExpandBtn && (h("button", { key: '8ccbcb422d4c753b5490d6ef83798540626936da', class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { key: '200fc21381180858eab9e3d7ead4b426c9ae4b6d', class: "app-status-wrapper" }, status && (h("div", { key: '2642ffbf3a021736cacfb9653a265e003a6cc7f9', class: {
                 ["app-status"]: true,
-            } }, h("ic-typography", { key: '281b500e7b660a3cd8108748cbeaa9bcf0b856c7', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version && (h("ic-typography", { key: '506f7e34b3027bd1ea340b725a1857b42f797d03', variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
+            } }, h("ic-typography", { key: 'aaa321854c75f56d1d606d4d43f320fa6f9569a4', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version && (h("ic-typography", { key: '1b53325edb44a3d0466f6fe74d76720b47af6ad6', 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

@@ -23,11 +23,11 @@ export class Skeleton {
                 width: el.style.width || (variant === "circle" ? "25px" : "260px"),
             }
             : undefined;
-        return (h(Host, { key: '336b5b88f72d7f44e7c3c748bfe5866e4259ca23', class: {
+        return (h(Host, { key: '2f2a4aaef02912dae3994346722c17a7bb7862c4', class: {
                 skeleton: true,
                 "ic-skeleton-circle": variant === "circle",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'd5a6030564b28381be77e38ca7d9d4d5d63822df' })));
+            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'f483005261989c75b36bd880d09f855aa4152ca3' })));
     }
     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: '4924f9affadd29e8a5f58791d59fdee0a4b1a110', class: {
+        return (h(Host, { key: '354579354254bfa9b0a1c314dd57226f2e1e4208', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-link", { key: '9619dc1c10b2fbdeac0088f85eba6de095abceb4', class: {
+            } }, h("ic-link", { key: '22276d114cc1d15a68eb675f6680b7388a76974a', 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: '323e76e08750e7459a431c762e74c5490276d5fe', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: 'e71a302621590a1e5f5eb94a4e823f614e72d604', class: {
+        return (h(Host, { key: '2bbbf4341010538d3ce41795e2fdd7db95c6f403', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: 'd603275aeec1bbe93bf1273b460ee655f45263d0', class: {
                 ["tag"]: true,
                 [`${variant}-${status}`]: true,
                 ["outlined"]: variant === "outlined",
                 [`${size}`]: true,
-            } }, h("ic-typography", { key: '842f8be2e88546b594f8af03d4cbab5bbeaaae03', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: 'ae96c68b504376e9366cd7f712b3136b68677d07' }, label)))));
+            } }, h("ic-typography", { key: 'b7e19ed18a1cced7c36e380df711599a17048736', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: '5dd5bf12423220d8c453fa32413e5910b578d4c9' }, label)))));
     }
     static get is() { return "ic-status-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -72,27 +72,27 @@ export class Step {
         // STATUS ICON FOR COMPACT STEP
         let statusIcon;
         if (type === "completed" || compactStepStyling === "completed") {
-            statusIcon = (h("span", { key: '222eacfd55f96f1b0b16489053d1d30c708e8a3a', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+            statusIcon = (h("span", { key: '864d4561a571389ff3128b00ffb529010930b4b5', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
         }
         else if (type === "disabled" || compactStepStyling === "disabled") {
-            statusIcon = (h("span", { key: 'd7ba36dc7010d59e685be24e23060c4cb1e08296', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+            statusIcon = (h("span", { key: '7bf14abf049e8e5d3fc870c574393adb49e68b8c', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
         // COMPACT STEP COMPONENT
-        const compactStep = (h("div", { key: '728b44adcf0270a12986d41c9c2b5a5a6e358f82', class: {
+        const compactStep = (h("div", { key: '4f3ac82fbcc83d16b72393415b08bb383b3844e1', class: {
                 ["step"]: true,
                 ["current"]: !!current,
                 [`compact-step-${compactStepStyling}`]: !!compactStepStyling,
                 ["disabled"]: type === "disabled" || compactStepStyling === "disabled",
-            } }, h("ic-loading-indicator", { key: '5f50ae72c26112de4cc25125c943ae9c2239dbe6', class: {
+            } }, h("ic-loading-indicator", { key: '53ebcdba2a35459adeb1ac198e7a48620eb5ed8f', 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: '5dc83af93afd975e296bbad9cf8580712e9778cd', class: "heading-area" }, h("ic-typography", { key: 'f71e06760d066b05c22fc59e70eb93af9f9ecf34', variant: "h4", class: "heading" }, heading), h("div", { key: '5bef8bf6f22cca7e187f2368a98d16d9ddbf9e2b', class: "info-line" }, h("ic-typography", { key: '371f9a99e5c4eea4fb59f0be6ba2f2e652a4098b', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, h("span", { key: 'e75d6c59d67dab64c2f5df149bf11d8ae11c2c7d', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
+            }, "aria-hidden": "true", size: "small", "inner-label": stepNum, progress: progress }), h("div", { key: '1206ec1c72eafac85fa94f936db215fd6d66a9da', class: "heading-area" }, h("ic-typography", { key: 'ecd033d92e805fc2538f92253f43a667594d30da', variant: "h4", class: "heading" }, heading), h("div", { key: '98f5a4369ed8e41271c9e5121d6ef4e68191e766', class: "info-line" }, h("ic-typography", { key: '5b58bcbe7124d039d41e6cddd1c737a82e689f46', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, h("span", { key: '86b332b0596baaa8f14e6232ca4742fca349b401', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
             type === "completed" ||
             type === "disabled" ||
             (this.variant === "compact" &&
                 !!compactStepStyling &&
                 compactStepStyling !== "active") ||
-            !!status) && (h("div", { key: 'fff0111fbf58f20621fe55e7846a78d7349f0de1', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (h("ic-typography", { key: '5f0c220996adc59b0924bc605c326627a727cd2f', variant: "caption" }, subheading !== null && isPropDefined(subheading)
+            !!status) && (h("div", { key: 'e7348cf5cb486de2bd35047429b8baedb64e7945', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (h("ic-typography", { key: '1e636d26071c9274b29b3e9fbd5edcff666bf650', variant: "caption" }, subheading !== null && isPropDefined(subheading)
             ? subheading
             : type === "disabled" ||
                 (variant === "compact" &&
@@ -105,26 +105,26 @@ export class Step {
         // ICON FOR DEFAULT STEP
         let icon;
         if (type !== "completed") {
-            icon = (h("ic-typography", { key: '99b0a46abc777b387ee3e18a5e8cf8a4fb8e4c1d', variant: "subtitle-small" }, h("span", { key: '0e5931807004fffc12634403bad44b9eb59a25b9', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+            icon = (h("ic-typography", { key: '11944edb6340175b2619cd7bf1a92a077c2581e7', variant: "subtitle-small" }, h("span", { key: '5636bdbab2cbae08c7122adae7376b380d2c0e6b', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
-            icon = (h("div", { key: '137a63e7242ac35d7505b238702aaa519e6454e8', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '271195e86a09aef98a461a692539fc1bbd039ec9', class: "check-icon", innerHTML: checkIcon })));
+            icon = (h("div", { key: 'b479680a69976f4a1fecff4944fe49d6ad7a1803', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: 'f147fc626a8a1ee01f7a00e642353f0393f2a9bf', class: "check-icon", innerHTML: checkIcon })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = type === "current" && (h("div", { key: 'ed33bd98cfa6dbcf2cf37c7c671611bbd650ddb9', class: "step-connect-inner" }));
-        const finalStep = !lastStep && (h("div", { key: '6a195b2af0aac0626606abb31fa131d4dd3d197c', class: {
+        const partialBar = type === "current" && (h("div", { key: '38562e1d3953a8e3fad8a666be017c6eb8b023d8', class: "step-connect-inner" }));
+        const finalStep = !lastStep && (h("div", { key: '92355de2de8a20e3efd244e90181ed4728908396', 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: 'f8c0e227d534e9e3c9e2d8a4cd1f2953b0a081b4', class: {
+        const defaultStep = (h("div", { key: '26938dd799f54d8440d45c9d9615a4831f7cab98', class: {
                 ["step"]: true,
                 [`${type}`]: true,
-            } }, h("div", { key: 'f0e15350f238ac183327eaf9fa7736fe67f02198', class: "step-top" }, h("div", { key: '64f647b3b3b6b1b424b2c86ce2fe0d2c353b1c39', class: "step-icon" }, icon), finalStep), (heading || subheading || status) && (h("div", { key: '1c05738a5278aa5b859fda2b0e2256f1ba0aec47', class: "heading-area" }, heading && (h("ic-typography", { key: '015483372b8052465cc9175150b246d148420e24', variant: "subtitle-large", class: "heading" }, heading)), heading && (subheading || status) && (h("ic-typography", { key: '29f9f702a07a3cbb8669974f00a0886636e2f3b4', variant: "caption", class: "subheading" }, subheading !== null && isPropDefined(subheading)
+            } }, h("div", { key: '34aca5fbe4025940b5226476d1da17725831a7db', class: "step-top" }, h("div", { key: 'e59c7c95a9b32b9e897a6dc6d37000cd45294caf', class: "step-icon" }, icon), finalStep), (heading || subheading || status) && (h("div", { key: '568405e10345dfe382fd78d096391cc870914f6a', class: "heading-area" }, heading && (h("ic-typography", { key: '6dcac8ec5550fe94c80e75c65ecec33dee7b4157', variant: "subtitle-large", class: "heading" }, heading)), heading && (subheading || status) && (h("ic-typography", { key: 'efe9c1f647e25a84eded6c390ff1b487e0ea5a0d', variant: "caption", class: "subheading" }, subheading !== null && isPropDefined(subheading)
             ? subheading
             : stepStatus))))));
-        return (h(Host, { key: 'd5d73bdea5409e8d53c9b56a036aafc796f293b1', role: "listitem", "aria-label": `${icI18n.step} ${stepNum}${ariaLabel}`, "aria-current": (current || type === "current") && "step", class: {
+        return (h(Host, { key: '359b602ab02607c5ec02673283f99172c3b4a924', 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

@@ -259,11 +259,11 @@ export class Stepper {
         checkResizeObserver(this.runResizeObserver);
     }
     render() {
-        return (h(Host, { key: '5fe97c7bd124831c6fb863a2122780bb7a0e67f5', class: {
+        return (h(Host, { key: '8905befe9177785369ef0d277f7f21d823cd727b', 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: 'cb8920a38ceb04f807e71ebf680517764b707be3', class: "step-item-list" }, h("slot", { key: '0d56c6a5b26c0cc30705be1f13187956b7025e26' }))));
+            } }, h("ul", { key: '19d67dcea521d17802c2d98946ce24254ef4969a', class: "step-item-list" }, h("slot", { key: 'fe75a601beeed1e3dbfc9df495909af26ad11523' }))));
     }
     static get is() { return "ic-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -254,12 +254,22 @@ export const CustomCompactStepper = {
 
 export const Internationalisation = {
   render: () =>
-    html`<ic-stepper variant="compact" id="standard-compact-stepper">
-        <ic-step heading="Aktualisierung"></ic-step>
-        <ic-step id="read-step" heading="Lesen" type="current"></ic-step>
-        <ic-step heading="Aktualisierung" status="optional"></ic-step>
-        <ic-step heading="Löschen" status="required"></ic-step>
-      </ic-stepper>
+    html`<span lang="de">
+        <ic-stepper variant="compact" id="standard-compact-stepper">
+          <ic-step heading="Aktualisierung"></ic-step>
+          <ic-step id="read-step" heading="Lesen" type="current"></ic-step>
+          <ic-step heading="Aktualisierung" status="optional"></ic-step>
+          <ic-step heading="Löschen" status="required"></ic-step>
+        </ic-stepper>
+      </span>
+      <p>
+        This stepper uses the icI18n prop to customise text elements within the
+        stepper.
+      </p>
+      <p>
+        It is also wrapped in a <code>&lt;span lang="de"&gt;</code> to change
+        the language for assistive technology
+      </p>
       <ic-button
         class="back-btn-compact-stepper"
         style="margin-right: var(--ic-space-lg)"

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

@@ -91,16 +91,16 @@ export class Switch {
         const { label, checkedState, size, disabled, name, value, hideLabel, helperText, inputId, theme, } = this;
         const isSmall = size === "small";
         renderHiddenInput(this.el, checkedState ? value : "", name, disabled);
-        return (h(Host, { key: '1e956030826e52752e8c7653b8da25af46f52426', class: {
+        return (h(Host, { key: '83cfaa808706cfbd930349b19264611eeb9eb7a1', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("label", { key: '91501b821fe6124254ee768b372e064cd081fb16', class: {
+            } }, h("label", { key: '3952a6e8d7bd6778f6e72bd714f3413fb32ce43c', class: {
                 "ic-switch-container": true,
                 "ic-switch-disabled": !!disabled,
                 "ic-switch-small": isSmall,
-            }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { key: 'f9f89f3e0a580fd136efb7b7f896c74020a22b08', for: inputId, label: label, helperText: helperText, readonly: false, disabled: disabled, class: {
+            }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { key: 'da48a174f9dd1a8ec052f102424cecfe39b629f1', for: inputId, label: label, helperText: helperText, readonly: false, disabled: disabled, class: {
                 "ic-switch-label": true,
                 "ic-switch-label-small": isSmall,
-            } }, h("slot", { key: 'ba6d621b604fb414e32b3610730faece841d30e6', name: "helper-text", slot: "helper-text" }))), !hideLabel && h("span", { key: 'd2a675ea63e51c6f3a2c9e22494a4d04ea7d6376', class: "ic-switch-line-break" }), h("input", { key: 'd0ebcc9c3119699b54ed088a511e050229e57b05', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": getInputDescribedByText(this.el, inputId, helperText !== "", false), role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { key: '7f5c08f419bda58267c3664dc6d63ed5218310b6', class: "ic-switch-toggle" }, h("svg", { key: '72c0c627015a5d4928b5b1301498b3b35bc07a9e', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { key: '82aa70d102ff0444cf751b2d180a9407cfa6f3fb', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), h("svg", { key: '2234f9200dd364dcb995e6f12d380ae141e6320a', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '60c2fbd7fc71a7e310d42b8b20c5c4483aa743a7', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), h("slot", { key: 'eb81e7b8b1c6037e23074d407174060811af077e', name: "right-adornment" }))));
+            } }, h("slot", { key: 'f80f2d947f1ef1c448152a54878e00ca8ad93733', name: "helper-text", slot: "helper-text" }))), !hideLabel && h("span", { key: '3c56f4c0fb5e15be23d11931b95d9abfe6dc56f0', class: "ic-switch-line-break" }), h("input", { key: '2f23a8d5ef4aed9348bae49cf1d65d27d6af7f50', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": getInputDescribedByText(this.el, inputId, helperText !== "", false), role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { key: '1799cf9b15ba7f41ecdd5846c874313270b005d7', class: "ic-switch-toggle" }, h("svg", { key: 'dfdd27f600056edb4f0c21dc52c9c5b316a58749', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { key: 'e1fc26ba3d5ffe9901f5ded149c6783e5e897951', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), h("svg", { key: 'dbe0ba812d70c2ced199a5fbdfd2637a67477f3c', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '41fab06f91865db47d4c82b44eb913cb566a965c', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), h("slot", { key: '26b7e9ad4067d5571b676872dd506371c03766b2', name: "right-adornment" }))));
     }
     static get is() { return "ic-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-tab-context/ic-tab-context.js

@@ -228,7 +228,7 @@ export class TabContext {
         }
     }
     render() {
-        return h("slot", { key: 'ddf3e45c3bd98315d6d49e35e3b309acfefc0782' });
+        return h("slot", { key: '10bbbe55408243a3a5665b6f079a2b88912abb61' });
     }
     static get is() { return "ic-tab-context"; }
     static get properties() {

package/dist/collection/components/ic-tab-group/ic-tab-group.js

@@ -16,11 +16,11 @@ export class TabGroup {
     }
     render() {
         const { inline, theme, label, monochrome } = this;
-        return (h(Host, { key: 'e6eda4f0fddf03fa0e666070e9fe4a01ed6c244c', role: "tablist", "aria-label": label, class: {
+        return (h(Host, { key: '6d47bc467418bb3448bc201c2903c1729d0b218c', role: "tablist", "aria-label": label, class: {
                 ["ic-tab-group-inline"]: !!inline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-tab-group-monochrome"]: !!monochrome,
-            } }, h("ic-horizontal-scroll", { key: 'b2387259eee6357ea9d90560aef246a035158e01', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: 'a8351a7ab0e0a9ac824f5a4be46af8a97c6cb8dd', class: "tabs-container" }, h("slot", { key: '5008e5e509035d59bbf397a986af8d390ecacf1e' })))));
+            } }, h("ic-horizontal-scroll", { key: '4cd7ad023ed041945dd0ea53ea30ef471c4dc87a', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: '7b755ee071f940a648289a38cf792a86b19ee0f5', class: "tabs-container" }, h("slot", { key: 'c28ac4504330b33bc6809e8cc4bb8646eb0545e9' })))));
     }
     static get is() { return "ic-tab-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-tab-panel/ic-tab-panel.js

@@ -17,10 +17,10 @@ export class TabPanel {
     }
     render() {
         const { active, theme } = this;
-        return (h(Host, { key: '33c2600681317fb27e801153496452582e5862a8', class: {
+        return (h(Host, { key: 'aa17ab5e82e7692328cfa063e5666edfd65b1c9c', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tab-panel-hidden": !active,
-            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '722ead8cc9ed26d0815781211bb5e657aa65f8ba' }, h("slot", { key: '78dad6e7c3d0ba3c684d586c0a16d2d1e7de32f7' }))));
+            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '719d420b5a75b8fcc722c7e510f86411e18afade' }, h("slot", { key: 'bec1ba48c3e0ced13c339f31f9af1663c068144d' }))));
     }
     static get is() { return "ic-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-text-field/ic-text-field.js

@@ -379,21 +379,21 @@ export class TextField {
         const charsRemaining = maxNumChars - numChars;
         const remainingCharCountDescId = maxCharacters > 0 ? `${inputId}-remaining-char-count-desc` : "";
         const remainingCharCountDesc = `${charsRemaining} character${charsRemaining === 1 ? "" : "s"} remaining.`;
-        const describedBy = `${hiddenCharCountDescId} ${numChars > 0 ? remainingCharCountDescId : ""} ${getInputDescribedByText(this.el, inputId, helperText !== "", showStatusText)}`.trim();
+        const describedBy = `${getInputDescribedByText(this.el, inputId, helperText !== "", showStatusText)} ${hiddenCharCountDescId} ${numChars > 0 ? remainingCharCountDescId : ""}`.trim();
         const disabledText = disabledMode && !readonly;
         const showLeftIcon = !!this.el.querySelector(`[slot="icon"]`) && !disabledText;
         const invalid = `${currentStatus === IcInformationStatus.Error}`;
         hiddenInput
             ? renderHiddenInput(this.el, value, name, disabledMode)
             : removeHiddenInput(this.el);
-        return (h(Host, { key: '1b376250d6e147cac7b9dbb15ae5eb7a2ba6aefe', class: {
+        return (h(Host, { key: '4a38a5d8bd42f37b2ab1e9f3af485695b6185a8a', class: {
                 "ic-text-field-full-width": fullWidth,
                 "ic-text-field-disabled": disabledMode,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-input-container", { key: 'ef66c6d29dd16f57af7d10d177210c63979ad106', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '2c4e3c9f6580a1d68983758214be4be7d5c9c762', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: 'c0a2199348d4157e67deca641480e2c2d3d16550', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '5bcfba3d42c94cf7abc8f7ad2ba29b5b80ffe511', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: 'd98d07fb64f7cdfed8d66860b4df4a1b64174a24', class: {
+            } }, h("ic-input-container", { key: 'a7da6f94bac334322b00b223cfb3462d026fbba1', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '97a5cc41a79cfc56c3e8e309154cbcc015bbadad', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: 'd9994cb1bb7218712bbed976057a3ca8d9ad3c2b', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '0d3a988b563b2f9f2033b52a75f4fd5e27056ba8', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: '319fa22903ab0b2c2315377abb9f9e7bad15f221', class: {
                 readonly,
                 "has-value": this.getNumberOfCharacters(value) > 0,
-            }, slot: "left-icon" }, h("slot", { key: '8508568fb8dada7941c0ac9f938f6a71892e06ff', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: type, min: min, max: max, value: value, class: {
+            }, slot: "left-icon" }, h("slot", { key: '1224a807133d300df0a6070c998260ece29e8c80', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: type, min: min, max: max, value: value, class: {
                 "no-left-pad": !showLeftIcon && readonly,
                 readonly,
                 "truncate-value": truncateValue,
@@ -401,12 +401,12 @@ export class TextField {
                 "no-resize": resize === false || !!readonly,
                 "no-left-pad": !showLeftIcon && !!readonly,
                 readonly: !!readonly,
-            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '91761fa97b0bb02a095968b7e204ebb93c3cdebf', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: '656d028a1add45972896a170347b0733f1794eec', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'f305e73e1035983c26fd6f738a46446c43a81245', name: "menu" }), h("ic-input-validation", { key: '85a6ff5809be1edcc921c46a6a415e5739c14baa', class: { "show-validation": this.showValidationMargin() }, status: this.hasStatus(currentStatus) === false ||
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: 'e50c8194546e08898e7ef0ed4dd940a881ffd5c4', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: 'e2ba7a0f555593f767ff1c93c4c58b71967da1a7', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: '7b22fe423951f0f38c5419ff3c35e9f32a72735d', name: "menu" }), h("ic-input-validation", { key: '85aec8ebd4633fa36585e3253e1cc8107c374495', class: { "show-validation": this.showValidationMargin() }, status: this.hasStatus(currentStatus) === false ||
                 (currentStatus === IcInformationStatus.Success &&
                     validationInline) ||
                 validationInlineInternal
                 ? ""
-                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { key: '13e0c01a4525d51b9515cbc04667c21fa918736d', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '9038017ea03a0c6b8ea32fd102b012a28af8503f', variant: "caption", class: "char-count-text" }, h("span", { key: '5b13ff51491f886e705726616c439ecb8d8d00bc', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: '8c4e2f4f749838d382fc06d5cec08dec0ba88d43', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: 'd66957769eb0962af90f9933339aeecf961fc690', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
+                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { key: 'f857927758c96f735592e7af679dba91c333fbf1', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: 'eed01e87433155c8311c5ef958145d484c65264a', variant: "caption", class: "char-count-text" }, h("span", { key: '1752a0a453ed7dd28b909029f847330ffbff406c', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: 'cd708a611a6133a7cf3b892d8f83cbf592791907', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: 'ebe5600dece8662d9966667308e79872793b098c', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
     }
     static get is() { return "ic-text-field"; }
     static get encapsulation() { return "shadow"; }