@ukic/web-components 3.19.0 → 3.20.0

package/dist/components/ic-section-container2.js

@@ -19,12 +19,12 @@ const SectionContainer = /*@__PURE__*/ proxyCustomElement(class SectionContainer
     }
     render() {
         const { aligned, fullHeight } = this;
-        return (h(Host, { key: '343b4d46f49af4458ad961d31de6118927b5e3ec', class: {
+        return (h(Host, { key: '54b72df0db0ae4794b74be875011b76868370b73', 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: 'c0f0631b39da318c0ce15c6f6200c1f03268bd7a' })));
     }
     static get style() { return IcSectionContainerStyle0; }
 }, [1, "ic-section-container", {

package/dist/components/ic-select.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { S as checkSlotInChildMutations, Q as getLabelFromValue, P as getFilteredMenuOptions, G as isMacDevice, H as getOptionsWithoutGroupTitlesCount, r as removeDisabledFalse, t as removeFormResetListener, b as inheritAttributes, s as addFormResetListener, o as onComponentRequiredPropUndefined, u as renderHiddenInput, w as getInputDescribedByText, i as isSlotUsed, T as isMobileOrTablet, A as IcInformationStatus, x as hasValidationStatus } from './helpers.js';
+import { W as checkSlotInChildMutations, U as getLabelFromValue, T as getFilteredMenuOptions, L as isMacDevice, M as getOptionsWithoutGroupTitlesCount, r as removeDisabledFalse, t as removeFormResetListener, b as inheritAttributes, s as addFormResetListener, o as onComponentRequiredPropUndefined, u as renderHiddenInput, w as getInputDescribedByText, i as isSlotUsed, X as isMobileOrTablet, A as IcInformationStatus, x as hasValidationStatus } from './helpers.js';
 import { I as IC_INHERITED_ARIA } from './constants.js';
 import { d as defineCustomElement$a } from './ic-button2.js';
 import { d as defineCustomElement$9 } from './ic-input-component-container2.js';
@@ -823,18 +823,18 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             (searchable
                 ? !!searchableSelectInputValue
                 : !!currValue && !loading && showClearButton);
-        return (h(Host, { key: 'f4a2c999048b3813c72f19cb9d12b179a1aa2829', class: {
+        return (h(Host, { key: '7fe228e078a155a73e2fc94cc2b118c93b4145fe', 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: 'f354e43e2138805bfb8e7f47dad8460c54bc4150', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: '5e0a35593115e83abab6de7f4c4c13d0865e4cd0', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly }, h("slot", { key: 'a1bb94c8b02a3b859245e384443395b92a24cc87', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '0ce9a0afd7163ad10add85df056d8ed5b1e5e856', 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: '6976af6d54de212225c8187634faceac225d769e', 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: 'f198b118f799e71cc850ff9b4e8f72b2e6bb531c', 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,
@@ -855,7 +855,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             } }, 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: '34f6484de01345c4ea6d9fcaa1cdc09c394e6904', class: {
                 "no-results": loading ||
                     hasTimedOut ||
                     (searchable &&
@@ -864,7 +864,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                         ((_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: 'edbcf92bebb2999f1b9dbff3da4299fd3fa21c00', "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), h("ic-input-validation", { key: '37d687c64608a1bd70763c2c09351be2d736c624', class: {
                 "menu-open": open,
             }, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "", for: inputId }))));
     }

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as closeIcon } from './close-icon.js';
 import { c as chevronIcon } from './chevron-icon.js';
-import { L as getCssProperty, q as getCurrentDeviceSize, D as DEVICE_SIZES, l as getBrandForegroundAppearance, i as isSlotUsed, C as isEmptyString, c as checkResizeObserver, o as onComponentRequiredPropUndefined, I as IcBrandForegroundEnum, E as hasClassificationBanner, m as isPropDefined } from './helpers.js';
+import { P as getCssProperty, q as getCurrentDeviceSize, D as DEVICE_SIZES, l as getBrandForegroundAppearance, i as isSlotUsed, H as isEmptyString, c as checkResizeObserver, o as onComponentRequiredPropUndefined, I as IcBrandForegroundEnum, J as hasClassificationBanner, m as isPropDefined } from './helpers.js';
 import { d as defineCustomElement$6 } from './ic-button2.js';
 import { d as defineCustomElement$5 } from './ic-divider2.js';
 import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
@@ -463,7 +463,7 @@ const SideNavigation = /*@__PURE__*/ proxyCustomElement(class SideNavigation ext
             isAppNameSubtitleVariant,
             appTitle: appTitle || "",
         };
-        return (h(Host, { key: 'dee98e8859e6935f7ce2775e95d32be82041ca0c', class: {
+        return (h(Host, { key: '2ca241755bb10821d8557f559592d4dd0760b887', class: {
                 "xs-menu-open": menuOpen && isSDevice,
                 "xs-menu-close": !menuOpen && isSDevice,
                 "sm-collapsed": !isSDevice && !menuExpanded,
@@ -472,12 +472,12 @@ const SideNavigation = /*@__PURE__*/ proxyCustomElement(class SideNavigation ext
                 [`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: 'aa5762da7c66f9017e74d98b9d036cb14c69ec19', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: 'df39cd75e1e5386c9b199966244b420e0ef0d448', class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { key: '8f5a9af9ec882ed1e313ce9273db4d6ab477a990', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { key: 'a91c060ed0c0294e6fdc99c995430058b753e4cd', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { key: '060f365653046b8088c9161231c4001d39643e29', class: "navigation-list" }, h("slot", { key: 'b761659a332a7734c798ba61dee24ca7754cf96b', name: "primary-navigation" }))))), h("div", { key: 'a5be3e27f68f9314e107babba3e1b61e3dba27b4', 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: 'eb981c93add2bce4f244cef2072ddbe9004920da', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { key: '14093650feb9f7836d21e5e9c23025f161aa0a03', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { key: '2fc5d7119e42ad1a699c19f401542441f3c38101', class: "navigation-list" }, h("slot", { key: 'de673e94462c14ea82eef271b1094d53b60fb3c0', name: "secondary-navigation" })))), h("div", { key: '8c187281a890650aa75aba49154e1bd64e37df00', class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", { key: 'ec8d437485b0554ceaeaee4fd6eb7f8215c1f2c4' }), displayExpandBtn && (h("button", { key: '44733bc053b72179fe49c1a3156ed1a6d389ea35', class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { key: '0c46f90bab1c162677caf7f3a1e2e97b83f4b21f', class: "app-status-wrapper" }, status && (h("div", { key: '0ff477aa184a44aacf5c04d4a6a635ec133722be', 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: '5fe36c925f766f7db841f70ed9bcefeea1b7346e', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version && (h("ic-typography", { key: '01e44f6858a26def4f6ae9996990e5d8f4d584b6', variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-skeleton.js

@@ -45,11 +45,11 @@ const Skeleton = /*@__PURE__*/ proxyCustomElement(class Skeleton extends HTMLEle
                 width: el.style.width || width || DEFAULT_WIDTHS[variant],
             }
             : undefined;
-        return (h(Host, { key: '5224a4ba18bd361796ad59ece92368e59cbc9921', class: {
+        return (h(Host, { key: 'b4a3ebe92aabc313aeb97e95ba87c6c12c59d2c6', class: {
                 skeleton: true,
                 "ic-skeleton-circle": variant === "circle",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'c8dea3ead035bc25aa9e888a05ab14e8ed746e7b' })));
+            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'be6ae12693bcfe04b70bf3dfee0e1096d194b9c9' })));
     }
     get el() { return this; }
     static get style() { return IcSkeletonStyle0; }

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

@@ -43,9 +43,9 @@ const SkipLink = /*@__PURE__*/ proxyCustomElement(class SkipLink extends HTMLEle
     }
     render() {
         const { fullWidth, inline, label, monochrome, target, theme, transparentBackground, } = this;
-        return (h(Host, { key: '4924f9affadd29e8a5f58791d59fdee0a4b1a110', class: {
+        return (h(Host, { key: '4db32bbfdf500c9f7f39329124081e7e0d297678', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-link", { key: '9619dc1c10b2fbdeac0088f85eba6de095abceb4', class: {
+            } }, h("ic-link", { key: '4311c903f118bab9fedbdc7bfbb8ab912a25a22a', class: {
                 "display-top": !inline,
                 "full-width": !!fullWidth,
                 "show-background": !transparentBackground,

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

@@ -41,12 +41,12 @@ const StatusTag = /*@__PURE__*/ proxyCustomElement(class StatusTag extends HTMLE
     }
     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: 'd0d10c46cc967c5448afb1c10ad1211916602678', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: 'df86eb3a1d27444b991f2bbca96c80c1ee8213a5', 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: '466f53b65c33bb62a60b50507b08fee5bd13d108', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: 'a0082731e24b6d9bae6ef5c6f4641c325fbcc5fb' }, label)))));
     }
     static get style() { return IcStatusTagStyle0; }
 }, [1, "ic-status-tag", {

package/dist/components/ic-step.js

@@ -86,27 +86,27 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends HTMLElement {
         // STATUS ICON FOR COMPACT STEP
         let statusIcon;
         if (type === "completed" || compactStepStyling === "completed") {
-            statusIcon = (h("span", { key: 'f00988dead6559d428d05f7cad2dc3874c083b81', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+            statusIcon = (h("span", { key: '74b23c6076ab6aac072fc21e24ef5b13479699fc', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
         }
         else if (type === "disabled" || compactStepStyling === "disabled") {
-            statusIcon = (h("span", { key: '3bdca1321df04ccd4cdc164b75d73d317df4bbd9', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+            statusIcon = (h("span", { key: '0494daaaee14c3f2d3bd424fc5fd194c7ff2b62b', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
         // COMPACT STEP COMPONENT
-        const compactStep = (h("div", { key: '3f25b7b66363726dd2b5135f3429a344709866e9', class: {
+        const compactStep = (h("div", { key: 'c3098f790836c299becd073793de042c70687b00', class: {
                 ["step"]: true,
                 ["current"]: !!current,
                 [`compact-step-${compactStepStyling}`]: !!compactStepStyling,
                 ["disabled"]: type === "disabled" || compactStepStyling === "disabled",
-            } }, h("ic-loading-indicator", { key: '75766eec3f516860b6b8be028bb6a0e4854300d8', class: {
+            } }, h("ic-loading-indicator", { key: 'a192685be47c4df0b5420d03099e046d2c86d92f', 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: '4140264d827f0120fcd7525dc4f1942370c70e30', class: "heading-area" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (h("ic-typography", { variant: "h4", class: "heading" }, heading)), h("div", { key: '6c5b55bb5800586076bc7111905f2caf0e6236d3', class: "info-line" }, h("ic-typography", { key: 'aeb427b1db840cab7acb4558e3037e886b6ed148', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, h("span", { key: '7ea25ca9263310b55e827f1f481c907a80143333', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
+            }, "aria-hidden": "true", size: "small", "inner-label": stepNum, progress: progress }), h("div", { key: '031a4827300fe997173f0a92e7f184cdd2481a54', class: "heading-area" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (h("ic-typography", { variant: "h4", class: "heading" }, heading)), h("div", { key: '1f7909a0de56a3cc2fc8e498c9d027bb5faeedb1', class: "info-line" }, h("ic-typography", { key: '8afdaa87473127f7e154c353fe13671ee6295e64', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, h("span", { key: '9ce1f2f33a521ad17e6c16ff13c57b7418c50863', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
             type === "completed" ||
             type === "disabled" ||
             (this.variant === "compact" &&
                 !!compactStepStyling &&
                 compactStepStyling !== "active") ||
-            !!status) && (h("div", { key: 'fa72ca837d1540891cffe3d8f8b36e7a1dac9fd7', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (h("ic-typography", { key: '9b3ca7eb5950f1133f28dcd0b7ef003765c90493', variant: "caption" }, subheading !== null && isPropDefined(subheading)
+            !!status) && (h("div", { key: 'f759a3ea746749a2e32a1f7fe242f81d415936ea', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (h("ic-typography", { key: '2218c08fae3e99a77276ac5be770d83227d9436b', variant: "caption" }, subheading !== null && isPropDefined(subheading)
             ? subheading
             : type === "disabled" ||
                 (variant === "compact" &&
@@ -119,26 +119,26 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends HTMLElement {
         // ICON FOR DEFAULT STEP
         let icon;
         if (type !== "completed") {
-            icon = (h("ic-typography", { key: '6fb92b96a4ba63a95148e64e1f2800d10b19c08a', variant: "subtitle-small" }, h("span", { key: '3a249db8c6dc0fb5d2f8f02c820845894888da46', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+            icon = (h("ic-typography", { key: 'bf9290b58e81fbd33b6fec33c1f8c2daf772e3d0', variant: "subtitle-small" }, h("span", { key: 'a7892500ccecb39d9ef030b1c265df95497dce73', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
-            icon = (h("div", { key: 'f50a3bcd503d21345a156c7cede8385b38744325', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '505fc3d70507b3d7156c7d646308af137de76eac', class: "check-icon", innerHTML: checkIcon })));
+            icon = (h("div", { key: 'cb195656bb75703ea8cdefdd2595984d7f134b68', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: 'd83ddc1fe07d6f7e904b757e172541a6a614aa30', class: "check-icon", innerHTML: checkIcon })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = type === "current" && (h("div", { key: 'fc7efb490b654258f332bfa8baefff01e23a16b1', class: "step-connect-inner" }));
-        const finalStep = !lastStep && (h("div", { key: '948d526e77439d94ead70c9aeef4bd65f54ffe0e', class: {
+        const partialBar = type === "current" && (h("div", { key: 'bbff974e95f002d093040010add1700c99e07613', class: "step-connect-inner" }));
+        const finalStep = !lastStep && (h("div", { key: 'c53c5a27a5601021a3474920ff4724c93d3ea1af', 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: '13d1b412c26e150291a7695556856edffff72c0b', class: {
+        const defaultStep = (h("div", { key: '42b8f42430b8a455d1954141279c967b641fedf1', class: {
                 ["step"]: true,
                 [`${type}`]: true,
-            } }, h("div", { key: '6b3605667f7ddfd1ebc7e3f36851c1fa81a543c4', class: "step-top" }, h("div", { key: '206915065c8674a4fb8b9a33854ea75a05270421', class: "step-icon" }, icon), finalStep), (hasHeading || subheading || status) && (h("div", { key: 'd05f3e280508507b3a5fbe05c53d63e867cc3500', 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: 'c8b0adb02467cf89be3577b44a0e70ca12136da9', variant: "caption", class: "subheading" }, subheading !== null && isPropDefined(subheading)
+            } }, h("div", { key: 'f82f5598ba7bd24ee738263d1f7ff9230f2527ce', class: "step-top" }, h("div", { key: '86b4cfae9c5c411803556f6028776aef731e9701', class: "step-icon" }, icon), finalStep), (hasHeading || subheading || status) && (h("div", { key: '3cd81c453558c3ea8a42360bb02fc66e7354fcc1', 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: 'ff802a77f070a2eef0ee69c537f8b92d2d614488', variant: "caption", class: "subheading" }, subheading !== null && isPropDefined(subheading)
             ? subheading
             : stepStatus))))));
-        return (h(Host, { key: '41bf288a82e0167529d35661adda1ec1ad1dcb71', role: "listitem", "aria-label": `${icI18n.step} ${stepNum}${ariaLabel}`, "aria-current": (current || type === "current") && "step", class: {
+        return (h(Host, { key: '05f6c45fb88ca8576133885301077d9a5432580a', 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/components/ic-stepper.js

@@ -286,11 +286,11 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         checkResizeObserver(this.runResizeObserver);
     }
     render() {
-        return (h(Host, { key: 'e2ac3f9e87779cfd5582ab705cf7a4d1424f20b7', class: {
+        return (h(Host, { key: 'b7f2dcc641420517df19d3dd811bfeab6c924793', 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: '86ee53977017f83030114eaf2e78621d7f4c7f80', class: "step-item-list" }, h("slot", { key: 'a296d57cb512552f97d35cd7a65ab3db644a6c62' }))));
+            } }, h("ul", { key: '9eadbde4ea2027d4c2f9f6ae3bcb67c0d8d91cc7', class: "step-item-list" }, h("slot", { key: '6567b75279bb52414e60d97eab675b2269851a93' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-switch.js

@@ -99,16 +99,16 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends HTMLElement
         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: '4d5830cca94b2dd699ad0f906dc1095f267675d4', class: {
+        return (h(Host, { key: '1e956030826e52752e8c7653b8da25af46f52426', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("label", { key: '61c6e73d0435b8911566ac628313f6a44c67d297', class: {
+            } }, h("label", { key: '91501b821fe6124254ee768b372e064cd081fb16', class: {
                 "ic-switch-container": true,
                 "ic-switch-disabled": !!disabled,
                 "ic-switch-small": isSmall,
-            }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { key: 'e8be8d74b3183a3b4a8ab53e7f38e0eda8d8b4e0', for: inputId, label: label, helperText: helperText, readonly: false, disabled: disabled, class: {
+            }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { key: 'f9f89f3e0a580fd136efb7b7f896c74020a22b08', for: inputId, label: label, helperText: helperText, readonly: false, disabled: disabled, class: {
                 "ic-switch-label": true,
                 "ic-switch-label-small": isSmall,
-            } }, h("slot", { key: 'c26f98190a6dac0fcbcac0e76d512de045ed728e', name: "helper-text", slot: "helper-text" }))), !hideLabel && h("span", { key: '138bab016cba136f3f5bf5f8ed04fef823dfa7c1', class: "ic-switch-line-break" }), h("input", { key: 'e1ee536f3683fbf23a874fa3b33099107df38636', 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: '1148ac346b57bac965f562511a4d05e480bddd6c', class: "ic-switch-toggle" }, h("svg", { key: '78508c5b97bf67b0e9e3b23911bb53aaeeb7271c', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { key: 'c32e2f0c7d95be778ba673085d95b03275e17d42', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), h("svg", { key: 'ba5c613c591a7d1b7d9c11682b3db371449bf9e6', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'c15318f31f8b84ac4d38488ab90808ba8fd6886c', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), h("slot", { key: '9ea7ffdc5e061674be43b1f5a06e262acc7ebd3a', name: "right-adornment" }))));
+            } }, 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" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

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

@@ -232,7 +232,7 @@ const TabContext = /*@__PURE__*/ proxyCustomElement(class TabContext extends HTM
         }
     }
     render() {
-        return h("slot", { key: 'a64045ed32f186e6117f25642dafab8efe17dd13' });
+        return h("slot", { key: 'ddf3e45c3bd98315d6d49e35e3b309acfefc0782' });
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -28,11 +28,11 @@ const TabGroup = /*@__PURE__*/ proxyCustomElement(class TabGroup extends HTMLEle
     }
     render() {
         const { inline, theme, label, monochrome } = this;
-        return (h(Host, { key: '907693650fa274e54826ca116016e8bea75aa29c', role: "tablist", "aria-label": label, class: {
+        return (h(Host, { key: 'e6eda4f0fddf03fa0e666070e9fe4a01ed6c244c', 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: '94a5fd18b222a07d6119c6bc291522b12aaf91f3', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: 'a81bf05bd2e9d2d079a9b05899da06c6a27cb231', class: "tabs-container" }, h("slot", { key: '434bc2798a1f471d7365a9854254f82bafa3c2d5' })))));
+            } }, h("ic-horizontal-scroll", { key: 'b2387259eee6357ea9d90560aef246a035158e01', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: 'a8351a7ab0e0a9ac824f5a4be46af8a97c6cb8dd', class: "tabs-container" }, h("slot", { key: '5008e5e509035d59bbf397a986af8d390ecacf1e' })))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return IcTabGroupStyle0; }

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

@@ -26,10 +26,10 @@ const TabPanel = /*@__PURE__*/ proxyCustomElement(class TabPanel extends HTMLEle
     }
     render() {
         const { active, theme } = this;
-        return (h(Host, { key: '51756c01996190f5a90e7018a2146f6e27e6185a', class: {
+        return (h(Host, { key: '33c2600681317fb27e801153496452582e5862a8', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tab-panel-hidden": !active,
-            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: 'fbe0b579017645beeb19d419f1ccf2fcde4c51e1' }, h("slot", { key: '482a66418dc7c89364da609e03f544f5b71d9849' }))));
+            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '722ead8cc9ed26d0815781211bb5e657aa65f8ba' }, h("slot", { key: '78dad6e7c3d0ba3c684d586c0a16d2d1e7de32f7' }))));
     }
     get el() { return this; }
     static get style() { return IcTabPanelStyle0; }

package/dist/components/ic-tab.js

@@ -91,13 +91,13 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
     }
     render() {
         const { disabled, selected, theme, monochrome, handleClick, handleFocus, handleMouseDown, } = this;
-        return (h(Host, { key: '954c5dd86688230d4ebb36c8a98b9c30c1524fc9', class: {
+        return (h(Host, { key: '3bf21c3c40b3d05205e9f78ab27886fc6eaa57e7', class: {
                 ["with-transition"]: !this.isInitialRender,
                 ["ic-tab-selected"]: !!selected,
                 ["ic-tab-disabled"]: !!disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-tab-monochrome"]: !!monochrome,
-            }, role: "tab", "aria-selected": `${selected}`, onClick: handleClick, onFocus: handleFocus, onMouseDown: handleMouseDown, "aria-disabled": `${disabled}`, tabindex: selected ? 0 : -1 }, isSlotUsed(this.el, "icon") && h("slot", { key: '11506c4354b5dc44310df86479b02ed0638bbe32', name: "icon" }), h("ic-typography", { key: 'd466ad914e607cabb9ff47dc31b6428a081b08a7', class: "ic-tab-label", variant: "label" }, h("span", { key: '8cc33760084b7735ed7db8b222a2b0374c936f3f' }, h("slot", { key: '04bdfe11cd1eef76fad7f6e0afa7e059251ba3cc' }))), isSlotUsed(this.el, "badge") && h("slot", { key: 'a29692b7826b09874aba3ec5579dbca979cd791a', name: "badge" })));
+            }, role: "tab", "aria-selected": `${selected}`, onClick: handleClick, onFocus: handleFocus, onMouseDown: handleMouseDown, "aria-disabled": `${disabled}`, tabindex: selected ? 0 : -1 }, isSlotUsed(this.el, "icon") && h("slot", { key: 'd3638e97b02e0938fc25ef9fe8fd74eca1ff235b', name: "icon" }), h("ic-typography", { key: '35c6f3a78c18b43716e3ceb26736b8e2f3e64d3f', class: "ic-tab-label", variant: "label" }, h("span", { key: '2d64798a00f945d9fcf830c4e5c6b4abf1fcf45c' }, h("slot", { key: 'd2c099b23e226d66c754fdd16bcc7b62ffea2ad0' }))), isSlotUsed(this.el, "badge") && h("slot", { key: '9072229033bfc5e11c3e9ee048d5a578ebfd8a78', name: "badge" })));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { C as isEmptyString, S as checkSlotInChildMutations, r as removeDisabledFalse, R as debounceEvent, t as removeFormResetListener, b as inheritAttributes, s as addFormResetListener, o as onComponentRequiredPropUndefined, A as IcInformationStatus, w as getInputDescribedByText, u as renderHiddenInput, v as removeHiddenInput, i as isSlotUsed } from './helpers.js';
+import { H as isEmptyString, W as checkSlotInChildMutations, r as removeDisabledFalse, V as debounceEvent, t as removeFormResetListener, b as inheritAttributes, s as addFormResetListener, o as onComponentRequiredPropUndefined, A as IcInformationStatus, w as getInputDescribedByText, u as renderHiddenInput, v as removeHiddenInput, i as isSlotUsed } from './helpers.js';
 import { e as IGNORED_KEYBOARD_CHARACTERS, I as IC_INHERITED_ARIA } from './constants.js';
 import { d as defineCustomElement$6 } from './ic-input-component-container2.js';
 import { d as defineCustomElement$5 } from './ic-input-container2.js';
@@ -400,14 +400,14 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLE
         hiddenInput
             ? renderHiddenInput(this.el, value, name, disabledMode)
             : removeHiddenInput(this.el);
-        return (h(Host, { key: 'a098007f75d3bf05058679006000a305447a3f97', class: {
+        return (h(Host, { key: 'c94560bea90464d881f323a308aa17926a2ff1e6', class: {
                 "ic-text-field-full-width": fullWidth,
                 "ic-text-field-disabled": disabledMode,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-input-container", { key: 'a75383406081d9f9dd9bf83b794713c8a8c33eff', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '5e145b4a2b71e47d8a9600571666e8b18a1973bd', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: 'fbde0ccff51839c9e8604b49ef2e5a0e42513f09', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '217ca703c97abad8551a4598ed33dee4af0a1ee3', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: 'c76c20299561c6112ec484b8197bcf681584115d', class: {
+            } }, h("ic-input-container", { key: 'cf76ec0c26f5003f66707b697df8c6e065872a66', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '0e8b2170e02cafadcda1cd7c73b1fe0d17695247', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: 'fb77e901d7b762bcdbe4b5aa1c448602617d1951', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '51aff4fba6d8c8e474ebfc27f77c560cce1125f8', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: '85df3728d49c37c33e1fe792973c527137431a78', class: {
                 readonly,
                 "has-value": this.getNumberOfCharacters(value) > 0,
-            }, slot: "left-icon" }, h("slot", { key: '171169b5eb33513fda471e8de18a20c0ae040936', 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: 'dc4cbe888dbe0e864102f60496be589951c4e610', 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,
@@ -415,12 +415,12 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLE
                 "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: '79c4833270e9e5d2ba5b235267f1f0e50195163d', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: 'a3db17f9b067f54fcc4ddc4a47a7d794a7b627cb', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'f9750f4141ff93b1a58401afc7bef74ded33b11f', name: "menu" }), h("ic-input-validation", { key: 'd582922b6f50b5bf776f1a7b31fa743fbf2e97ca', 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: '6faa3c12856f4f6c10158af49f14b51d5dac92e8', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: 'c18e08b7ae93e3f65e0410af0b6d64eb418e3940', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'e1a46ef6a4d97c4910df75941d6608a7765d127a', name: "menu" }), h("ic-input-validation", { key: 'e963d95a1e5bfc767c35b798c61bcf958dbcdfa6', 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 }, isSlotUsed(el, "validation-text") && (h("slot", { key: '80fa88be4c45ce4355da0d1d62adae0dd56b021d', name: "validation-text", slot: "validation-message" })), !readonly && maxNumChars > 0 && (h("div", { key: '575559f310a0cf1b953f9423efdaaa4a00ea1b94', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: 'b98ae8945e4528c5df4f100cd10359781b19f4b4', variant: "caption", class: "char-count-text" }, h("span", { key: '9e70d0c79c6a69fcb08182487a612b55c493b37e', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: 'a598443cda020214b8d60285c1843ff47f40fda8', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: 'a1d6085adef0f94c8fbb8f85f0e5cff4d1f0eae9', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
+                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, isSlotUsed(el, "validation-text") && (h("slot", { key: '4b5817e1c52b9af6511e07c202e5eb0e8457689d', name: "validation-text", slot: "validation-message" })), !readonly && maxNumChars > 0 && (h("div", { key: '059e8dc7ffbb0225d0c901821ff53d5b90ddf9f1', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: 'afe9cb357584f91fd2762d2c9f87d68eb7e25e68', variant: "caption", class: "char-count-text" }, h("span", { key: '583f62c58407615b2ce37edb17eed4928952e6ee', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: '953722d8ddd1d3c4e187308944fdd0723e8e8e70', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: '973adba9f9c7dca2409423f36af8dc4a9a3a7192', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-theme.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { U as getBrandColorBrightness, k as convertToRGBA, l as getBrandForegroundAppearance } from './helpers.js';
+import { Y as getBrandColorBrightness, k as convertToRGBA, l as getBrandForegroundAppearance } from './helpers.js';
 import { B as BLACK_MIN_COLOR_BRIGHTNESS, W as WHITE_MAX_COLOR_BRIGHTNESS } from './constants.js';
 
 const Theme = /*@__PURE__*/ proxyCustomElement(class Theme extends HTMLElement {
@@ -69,7 +69,7 @@ const Theme = /*@__PURE__*/ proxyCustomElement(class Theme extends HTMLElement {
     }
     render() {
         const { themeClass } = this;
-        return (h(Host, { key: 'ee89cdd36cb4cb7e0589dfea2dd5a60b5de40041', class: themeClass }, h("slot", { key: 'e7803bf5fc0974bfcf9a2a52cb5870254453a1bd' })));
+        return (h(Host, { key: '53aa5cb32bce3ebd1b66c22df8c64f615fad4d00', class: themeClass }, h("slot", { key: '6f2d5fa4d0d7a42995dd9d4b31081b421e6fe5a9' })));
     }
     static get watchers() { return {
         "brandColor": ["watchBrandColorPropHandler"],

package/dist/components/ic-toast-region.js

@@ -43,7 +43,7 @@ const ToastRegion = /*@__PURE__*/ proxyCustomElement(class ToastRegion extends H
         }
     }
     render() {
-        return h("slot", { key: '5f8c46d718f868942c5b46b431b2cee136e215b4' });
+        return h("slot", { key: '7c0c88d4aeb9e5141603885ce134e43674e341a9' });
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-toast.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as closeIcon } from './close-icon.js';
 import { V as VARIANT_ICONS } from './constants.js';
-import { i as isSlotUsed, o as onComponentRequiredPropUndefined, M as getSlot, m as isPropDefined } from './helpers.js';
+import { i as isSlotUsed, o as onComponentRequiredPropUndefined, Q as getSlot, m as isPropDefined } from './helpers.js';
 import { d as defineCustomElement$5 } from './ic-button2.js';
 import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
@@ -214,20 +214,20 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
     }
     render() {
         const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, theme, } = this;
-        return (h(Host, { key: '81a4c0dc1f855356533c93cdbf55445eacf0a91b', class: {
+        return (h(Host, { key: 'e7a7544e4b374165ecfece2ecacd0a8e5286fe2c', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-toast-hidden"]: !visible,
                 [`ic-toast-variant-${variant}`]: variant !== undefined,
-            }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, h("div", { key: '02f41e1e898f25542ea68b91997bdcb241e901f0', class: {
+            }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, h("div", { key: 'dd87e639960574b163d4647c039bd26aafe046f6', class: {
                 ["container"]: true,
                 [`container-${variant}`]: variant !== undefined,
-            } }, variant && visible && (h("div", { key: 'd7ebb7c524c6b81c1360afe78efa0e040459367b', class: "toast-icon-container" }, h("div", { key: '7ce48b10412174ca212ed6454b6f29025b7b042a', class: {
+            } }, variant && visible && (h("div", { key: 'baa9567a490a4400b1f27816fd82e14dd672b03c', class: "toast-icon-container" }, h("div", { key: '6a8f504184564a9ffdcfb1bb4aef68b571be1cd9', class: {
                 ["divider"]: true,
                 [`divider-${variant}`]: true,
-            } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { key: '870be416a0620206a69fe4c9c3e461596e30bde0', class: {
+            } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { key: 'f6fe1acced40005f09a18cec2119b7fa518d65c3', class: {
                 ["toast-content"]: true,
                 ["no-icon"]: variant === "neutral" && !isSlotUsed(this.el, "neutral-icon"),
-            } }, h("div", { key: 'e00a6fbb9eaec0bcae79308771b809726f54aba9', class: "toast-text" }, h("ic-typography", { key: '72e0b0f6c05e32535c37185cdae6d1e7090bd934', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? h("h5", null, heading) : h("p", null, heading))), message && (h("ic-typography", { key: 'f689173f4c0c50cf48cd29c416c317d572d50a41', variant: "body", class: "toast-message" }, visible && h("p", { key: '761d3060c3b22eade0ed0143f3567185f135f578' }, message)))), isSlotUsed(this.el, "action") && (h("div", { key: '182b0e6febcaefe93c4e0d0de4862068b46cc402', class: "toast-action-container" }, h("slot", { key: 'e3cc30f20960eaf5d6280149defb41753661f4ff', name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", theme: "dark", monochrome: true, size: "icon", progress: this.timerProgress, description: "Dismiss timer" })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon-tertiary", "aria-label": dismissButtonAriaLabel })))));
+            } }, h("div", { key: 'd594caa7e1e7935f992b5106432eee7304518fbe', class: "toast-text" }, h("ic-typography", { key: '83cd3393341aff5d8a7660e0fefd2c61a8039777', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? h("h5", null, heading) : h("p", null, heading))), message && (h("ic-typography", { key: 'f628cf5d15c0dc000549698803420dd6a983b032', variant: "body", class: "toast-message" }, visible && h("p", { key: 'e6cb92a64c6d2d759eafec7f0adafa332dbbbc31' }, message)))), isSlotUsed(this.el, "action") && (h("div", { key: '805d7b37f322f0dcc8fbf4750ec5982adf7f5754', class: "toast-action-container" }, h("slot", { key: '943670c862d60185c157ebda02aeb1cb4f8b4650', name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", theme: "dark", monochrome: true, size: "icon", progress: this.timerProgress, description: "Dismiss timer" })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon-tertiary", "aria-label": dismissButtonAriaLabel })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-toggle-button-group.js

@@ -251,14 +251,14 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
     }
     render() {
         const { accessibleLabel, disabled, fullWidth, loading, monochrome, outline, theme, } = this;
-        return (h(Host, { key: 'd166c6c17f134bde60a09a1a2bf80cb1681e4c19', role: "group", "aria-label": accessibleLabel, tabindex: disabled ? -1 : 0, class: {
+        return (h(Host, { key: '5c8877eaeec66fb0cc9fbcd5ba593fc86bd2b5f2', role: "group", "aria-label": accessibleLabel, tabindex: disabled ? -1 : 0, class: {
                 "ic-toggle-button-group-disabled": disabled,
                 "ic-toggle-button-group-full-width": fullWidth,
                 "ic-toggle-button-group-loading": loading,
                 "ic-toggle-button-group-monochrome": monochrome,
                 "ic-toggle-button-group-hide-outline": !outline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleHostFocus }, h("slot", { key: '1f20b0c477f837e482fc15bf6632e56c82e5c825' })));
+            }, onFocus: this.handleHostFocus }, h("slot", { key: 'f701ba436d48cd8d33abe55a252b4dd40455b67a' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-toggle-button.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { o as onComponentRequiredPropUndefined, V as isSlottedInGroup, r as removeDisabledFalse, i as isSlotUsed } from './helpers.js';
+import { o as onComponentRequiredPropUndefined, Z as isSlottedInGroup, r as removeDisabledFalse, i as isSlotUsed } from './helpers.js';
 import { d as defineCustomElement$5 } from './ic-button2.js';
 import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
@@ -158,7 +158,7 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
     render() {
         const { accessibleLabel, checked, disabled, fullWidth, iconPlacement, monochrome, label, loading, outline, size, theme, tooltipPlacement, variant, } = this;
         const iconVariant = variant === "icon";
-        return (h(Host, { key: 'ac4b415968c1efd66e8955a8c8af1aaa7fb674eb', class: {
+        return (h(Host, { key: 'd61a2411c44e043dbc0d3adfdd4ef4c041c752b4', class: {
                 "ic-toggle-button-checked": checked,
                 "ic-toggle-button-disabled": disabled,
                 "ic-toggle-button-icon": iconVariant,
@@ -168,7 +168,7 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
                 "ic-toggle-button-hide-outline": !outline,
                 [`ic-toggle-button-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleFocus }, h("ic-button", { key: 'b7b11f11ca70640ab0845f38a28d82783aa77bad', "aria-pressed": `${checked}`, variant: iconVariant ? "icon-tertiary" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: 'cd66bf39a1ec558c0752f45b80d7121b84d064f2' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '7507e37283041039dab8b3d40045b9ce6fe0a7b4', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: '34c6384a8cbc82f26af11b2ba61ab83a8e18ae03', name: "badge", slot: "badge" })))));
+            }, onFocus: this.handleFocus }, h("ic-button", { key: 'a19e19a0cfbf6abe36aed52470e753c4410360dd', "aria-pressed": `${checked}`, variant: iconVariant ? "icon-tertiary" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: 'be68b5556f38f43be5b8e5dee4533550be5271e9' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '1adacf752187c44bb6b16ee3464e57b626893048', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: '2507afeda1b98c00a3801c8deddfb3f8c8c01a65', name: "badge", slot: "badge" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }