@ukic/web-components 3.20.0 → 3.21.0

package/dist/collection/components/ic-pagination-item/ic-pagination-item.js

@@ -38,7 +38,7 @@ export class PaginationItem {
     }
     render() {
         const { page, selected, type, disabled, label, capitalizedLabel, monochrome, } = this;
-        return (h("a", { key: '684b55732fcbfd4922afc8b158ae509d7d487af7', class: { ["monochrome"]: !!monochrome } }, type === "ellipsis" ? (h("div", { class: {
+        return (h("a", { key: '01951a63b9e9877df42a85550402ca5b95db2433', class: { ["monochrome"]: !!monochrome } }, type === "ellipsis" ? (h("div", { class: {
                 ["item-container"]: true,
                 ["ellipsis"]: true,
                 ["disabled"]: !!disabled,

package/dist/collection/components/ic-popover-menu/ic-popover-menu.js

@@ -273,17 +273,17 @@ export class PopoverMenu {
         this.popperProps = props;
     }
     render() {
-        return (h(Host, { key: '4ef24b6cdb06b7310453f5b7815a90dad11dbe3d', class: {
+        return (h(Host, { key: '8ab9e16a2208bdd2ce36933b62354a4cf36a1655', class: {
                 ["ic-popover-menu-open"]: !!this.open,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("div", { key: '702b1c1f8c9f549c9816a41590ba86057a0f4ad4', id: this.parentPopover === undefined
+            } }, h("div", { key: '2d234fdb7f0632ac7fe8080d32fd076b174bc43b', id: this.parentPopover === undefined
                 ? `ic-popover-submenu-${this.submenuId}`
                 : "", class: {
                 menu: true,
-            } }, h("span", { key: '6777fd3c177c8a67887815ef597b22837dfdc917', class: {
+            } }, h("span", { key: '4d92490bac8e470c989ebc736c7cb88beab07283', class: {
                 "opening-from-parent": this.openingFromParent,
                 "opening-from-child": this.openingFromChild,
-            } }, isPropDefined(this.submenuId) && (h("span", { key: '0808a5e51b16b599eb4feec009bfeb39cf9c2f7f' }, h("span", { key: '76e569a67762a01542e0271270e27e2bf122388b', role: "menu" }, h("ic-menu-item", { key: '00a64914d6ec8f0726b08aec4862ae575988d6ec', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, h("svg", { key: '874b65f60655314ea03b1315b5ad5dd0d6bf496d', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, h("path", { key: '0d74dd3aa63952a3daf4986b1dccf05132b142f7', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), h("ic-typography", { key: '7d591c914310ab15a98463320d325ae6ea08ecec', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), h("div", { key: 'b689e0b8e8a94e7add88ececc9a2e12ccaca9cb0', class: "menu-body", "aria-label": this.getMenuAriaLabel(), role: "menu" }, h("slot", { key: 'b4cd62991ab1173788e96b4e95736560de0fb912' }))))));
+            } }, isPropDefined(this.submenuId) && (h("span", { key: 'a86c2b55ce825077cafc58514d2fd9a67c00df49' }, h("span", { key: 'd05b38782f21d1667252fcb5dbfad6f2cbf266cb', role: "menu" }, h("ic-menu-item", { key: '7b607af7cb58bcc560d1d4b35a0b471515293be6', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, h("svg", { key: 'ee6dd9b9e61fde3599aaf04b1061558d5a147b33', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, h("path", { key: '03149b62b07f36182f7d70711b7f752041a6ad2d', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), h("ic-typography", { key: 'd30272951d72997bcc4fc4092f5428ba74c22c9b', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), h("div", { key: '85b7b75bd2ae9b2c57f6e790e09e3f0c364d6c9e', class: "menu-body", "aria-label": this.getMenuAriaLabel(), role: "menu" }, h("slot", { key: 'cce0bf0426bc4dfe89754e240c81f3d5ee50f96e' }))))));
     }
     static get is() { return "ic-popover-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -230,16 +230,16 @@ export class RadioGroup {
     render() {
         const { currentOrientation, disabled, handleKeyDown, helperText, hideLabel, label, required, size, validationAriaLive, validationStatus, validationText, theme, } = this;
         const showValidation = hasValidationStatus(validationStatus, disabled);
-        return (h(Host, { key: '25d850a9a73e2265885ff67613cd37cc53977035', onKeyDown: handleKeyDown, class: {
+        return (h(Host, { key: '0a0b04bb7266c3400e22dd26cdbde025b1bf8a72', onKeyDown: handleKeyDown, class: {
                 "ic-radio-group-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("fieldset", { key: '960443c48d0cb2effadd20aa779be9bbef59fc48', role: "radiogroup", id: this.name, "aria-required": `${required}` }, !hideLabel && (h("legend", { key: '592a145f2f9fbbcc167a441934a1f766f2c333be' }, h("ic-input-label", { key: '1179db21f6db7f58b33bb96155ab275e26ecf5e9', class: {
+            } }, h("fieldset", { key: '8d6fb8bcce4573ce461d09cf9a07783b95e47ab9', role: "radiogroup", id: this.name, "aria-required": `${required}` }, !hideLabel && (h("legend", { key: 'b9a0ff7e81c30100b137e35bdd6c24c71b00b385' }, h("ic-input-label", { key: '078b3ecfe62746c6e91a9f61435c56825b746a5e', class: {
                 [`${validationStatus}`]: true,
                 ["disabled"]: !!disabled,
-            }, label: label, helperText: helperText, required: required, disabled: disabled }, h("slot", { key: '52e567ae7f3ab59c7411ce2c0a5dcbdfdc551c29', name: "helper-text", slot: "helper-text" })))), h("div", { key: 'bf72aff8d51ae2a0f223f020ec9c69877a95b1fe', class: {
+            }, label: label, helperText: helperText, required: required, disabled: disabled }, h("slot", { key: '2b071159427e09d3e69945a2460283c32bcf7e97', name: "helper-text", slot: "helper-text" })))), h("div", { key: '7dac840c03547d56606dbc82031cc2b237b0600d', class: {
                 "radio-buttons-container": true,
                 horizontal: currentOrientation === this.RADIO_HORIZONTAL,
-            }, ref: (el) => (this.radioContainer = el) }, h("slot", { key: 'd849d16ff6abc505a8d282ff860784751c04c7ff' }))), h("ic-input-validation", { key: '9708482107b5d8614c01177f9d5ed60a03791d9e', class: {
+            }, ref: (el) => (this.radioContainer = el) }, h("slot", { key: '324a042d9a015f25d4e831617575830f02f5df08' }))), h("ic-input-validation", { key: '6cab446cc36cb7af4dc48e7ee4e13e72568bb571', class: {
                 "show-validation": showValidation,
             }, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "" })));
     }

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

@@ -726,3 +726,9 @@ video {
 :host .dynamic-container:dir(rtl) {
   margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :host .checkmark {
+    transition: none;
+  }
+}

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

@@ -140,17 +140,17 @@ export class RadioOption {
         var _a, _b;
         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: '710f043bfbdbe28be83f61aa6f9aac54e43374f9', onClick: handleClick, onKeyDown: handleKeyDown, class: {
+        return (h(Host, { key: 'f331d1a40695e8a416793d16068423212af00e66', onClick: handleClick, onKeyDown: handleKeyDown, class: {
                 ["ic-radio-option-disabled"]: !!disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-radio-option-small"]: ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === "IC-RADIO-GROUP" &&
                     ((_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.className.includes("ic-radio-group-small")),
-            } }, h("div", { key: 'b81b1c3a0f0641c6cb324d1b97db208632a67fec', class: { "radio-option-container": true, disabled: !!disabled } }, h("div", { key: '9ea346537957226517b6a0a622185713ef5dd20a' }, h("input", { key: '3d75ad5b8265bbe03a82a1ea3299b9f6add36b48', 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: '5316e60c34c562122cf731039675891edc0a72f5', class: "checkmark" })), h("ic-typography", { key: '628db8b91b4c550eae7c76297e791bea3e539e3b', class: "radio-label", variant: "body" }, h("label", { key: 'd25e1cf55e7d07eb23ad41063307c998618af27b', htmlFor: id }, label))), hasAdditionalField && (h("div", { key: 'ec7300a9bf852d3bb252e68e6a1f794cbc56db29', class: {
+            } }, h("div", { key: '86592506d3b6c19db7de4d91c690b61d7302844b', class: { "radio-option-container": true, disabled: !!disabled } }, h("div", { key: 'c624f2eff5ba26c324d1c2a279acf15d7bebccec' }, h("input", { key: 'cb1e2b8c500e88e53bc50b8cdedeef118d982520', 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: 'e14cd39536e4ed6ef67ac81b01cd71550dc385ff', class: "checkmark" })), h("ic-typography", { key: '7960eb86755a9a1b6b8994ff8f44c21d1a91b749', class: "radio-label", variant: "body" }, h("label", { key: 'f0e2000797a2b126934946142e4aaf6af56043dd', htmlFor: id }, label))), hasAdditionalField && (h("div", { key: '7ddd66ccc66f3c71810f117a29c5ef58440448a6', class: {
                 "dynamic-container": true,
                 hidden: additionalFieldDisplay === "dynamic" && !selected,
-            } }, additionalFieldDisplay === "dynamic" && (h("div", { key: '72f29c68c31fe5b4f611ed8bea901c382cf06f32', class: "branch-corner" })), h("div", { key: 'a33027e2baba3e454e542151a503cdd863ee522d' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: 'cbb4aca43b192d749f79d29347eb27608698dea1', variant: "caption", role: "alert" }, h("p", { key: '89b76f38cfb17f52a89659b134273a4cb3581933', class: "dynamic-text" }, dynamicText))), h("div", { key: '57cce7d23ba1e63985bf74c304f303e1ff5e019f', class: {
+            } }, additionalFieldDisplay === "dynamic" && (h("div", { key: 'fa5dfc1518bc4329026b05b1444a5d1582918427', class: "branch-corner" })), h("div", { key: 'e973cbf83b2cbf53291f7bed19e5f3894400ef09' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: 'cd7d4a7f00846e2d455b4c7be41e412a3598ba5a', variant: "caption", role: "alert" }, h("p", { key: 'ffa848e0f258a97a2bf642b21fbfc1d4b963ea38', class: "dynamic-text" }, dynamicText))), h("div", { key: 'c277092836c255bf5b7b47c2f06b2be4a2420ff3', class: {
                 [`additional-field-wrapper-${additionalFieldDisplay}`]: true,
-            } }, h("slot", { key: '7d1069e0817992789b58fe73b210000a80700ef5', name: ADDITIONAL_FIELD })))))));
+            } }, h("slot", { key: '00ccd0a8653c1000766c112372d88861eea26686', name: ADDITIONAL_FIELD })))))));
     }
     static get is() { return "ic-radio-option"; }
     static get encapsulation() { return "scoped"; }

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

@@ -659,3 +659,9 @@ input[type="search"].truncate-value {
     width: 100%;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .clear-button {
+    transition: none;
+  }
+}

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: '97932f66827d3d1aa3e41ca8aa15e8bdb1ad5518', class: {
+        return (h(Host, { key: 'a157a6642fdbf3b08a6e3715ed4b3caf2a4a2cc3', 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: '3fc6cebca3191c6e19e523e4273f4ad7cfd39ea4', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '453ef1b4a73227f5525e386100ba4d09fc75a1a0', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly }, h("slot", { key: 'd72a6705f4e98030a9af02c832478ecb3cd11570', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: 'e0ae23eaa33e7194eec066a1e72050b91be3cdd5', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: 'ed239f98bcc086b05bbb14c43154aee3f7c2c76e', 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: '2505f6cacc6484e069a4550443c316c1c0969835', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: 'aa4f12f89adfba413e723ef51d39d1c9d455d462', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly }, h("slot", { key: '166a66746961e4dd48d17f7896f63322c0398391', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '9c64fed1a8540b98441ede3bcb50e7004e576206', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '9d2de773bf2bf546dbc521766886f72910054d15', 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: 'ed272c63c361866a3c096a4ed63e94582d4fcdf8', 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: 'fce57d94b8c5d5f5cd10dbca9d77f83775ef2e14', class: {
                 "clear-button-container": true,
                 "clear-button-visible": !!value && !disabledMode && showClearButton,
-            } }, h("ic-button", { key: '5e9c4058a68f853a552bfa0f2113858a275a365a', id: "clear-button", class: {
+            } }, h("ic-button", { key: '9f4c9508a7809f8803683b98cba337949ed7b075', 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: '262820b10ac5df18f2b73fcb4aa0f1b3602c2c0f', class: "divider" })), h("div", { key: 'e0ff6496a2b2a703a3d87980893926dd4fdf543d', 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: 'c8d3f7329e2c85efb0b15c69d25ef33066a078d7', class: "divider" })), h("div", { key: '9c2e7064fc15b9f95b79f42ebbbcfe0a86efa33a', class: {
                 "search-submit-button-container": true,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            } }, h("ic-button", { key: '4eefcd8121169df7b713df93cade880d0fcf5d60', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
+            } }, h("ic-button", { key: '6581d4240e0c61a2d351469ce42f4e5b073d5359', 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: '1194a402978db78f8abbaa5e1127e6e1ce8d77d3', 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: '6c5e68dfdd233ffba7640a960e59b68a6e59f3ad', class: {
                 "menu-container": true,
                 fullwidth: fullWidth,
-            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: '1bf2856fb888425fd0b7f690e9f3389f9bb1ec9f', class: {
+            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: '15acc1549f899dc228da307d4dd2a1550a8482d4', 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: 'f3333622e515486aeb77de5e8c7061b02f8f19b6', "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: '15460d9ef215264449cecc99c1d4f01d1dbc8598', "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: '54b72df0db0ae4794b74be875011b76868370b73', class: {
+        return (h(Host, { key: '24dccdddcc53a53ea167ac1d563dcf58cf4c011f', class: {
                 ["aligned-left"]: aligned === "left" || aligned === null,
                 ["aligned-center"]: aligned === "center",
                 ["aligned-full-width"]: aligned === "full-width",
                 ["no-vertical-padding"]: !!fullHeight,
-            } }, h("slot", { key: 'c0f0631b39da318c0ce15c6f6200c1f03268bd7a' })));
+            } }, h("slot", { key: 'f1fff1aa3ea5c3e5917e73db0c7ee01bb1352d24' })));
     }
     static get is() { return "ic-section-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -741,3 +741,11 @@ select:not([disabled]) {
     fill: currentcolor;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .clear-button,
+  ic-input-validation.menu-open .status-icon,
+  ic-input-validation.menu-open .statustext {
+    transition: none;
+  }
+}

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: '7fe228e078a155a73e2fc94cc2b118c93b4145fe', class: {
+        return (h(Host, { key: '9c3955b4ba942dd962018252d50aad7bbb1f1744', 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: '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") &&
+            }, onBlur: this.onBlur }, h("ic-input-container", { key: 'c67e465c4a39b81ef2f9f861a02a9d9d89e5c3de', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: '9554f5a63ea338139b1cf1be426ef97d829694a5', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly }, h("slot", { key: '3749b881b972bf1143f67587e2d70bce773eb597', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '61c1d6fc5c5bd6535e502e9e15ca013612ab009b', 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: '6976af6d54de212225c8187634faceac225d769e', slot: "left-icon", class: {
+            (!readonly || !!value) && (h("span", { key: 'f81e4bd0e7548bfe8206928808475083b2b641ee', slot: "left-icon", class: {
                 readonly,
                 "has-value": !!value,
-            } }, 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: {
+            } }, h("slot", { key: '792566ca482c7ebca0804ac0a18a5beeb3e6f15a', 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: '34f6484de01345c4ea6d9fcaa1cdc09c394e6904', 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: 'bb2e95961d8685349e46edf1c93a2dce9792657b', 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: 'edbcf92bebb2999f1b9dbff3da4299fd3fa21c00', "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), h("ic-input-validation", { key: '37d687c64608a1bd70763c2c09351be2d736c624', 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: '5d6db7b55942499db04a942c7980ad09e5db65f8', "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), h("ic-input-validation", { key: '5133bf75be8a86fe3134491d659b934dac271e57', class: {
                 "menu-open": open,
             }, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "", for: inputId }))));
     }

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

@@ -208,27 +208,6 @@ slot[name="app-title"]::slotted(a) {
   font: var(--ic-font-subtitle-small);
 }
 
-@media screen and (min-width: 577px) {
-  :host(.sm-collapsed) slot[name="app-title"]::slotted(ic-typography),
-  :host(.sm-collapsed) slot[name="app-title"]::slotted(a) {
-    position: absolute;
-    left: -9999px;
-    opacity: 0;
-    transition: opacity var(--ic-easing-transition-slow);
-  }
-
-  :host(.sm-collapsed) slot[name="app-title"]:dir(rtl)::slotted(ic-typography),
-  :host(.sm-collapsed) slot[name="app-title"]:dir(rtl)::slotted(a) {
-    right: -9999px;
-  }
-
-  :host(.sm-expanded) slot[name="app-title"]::slotted(a) {
-    font: var(--ic-font-h3) !important;
-    font-weight: var(--ic-font-weight-semibold) !important;
-    margin-left: var(--ic-space-xs) !important;
-  }
-}
-
 :host .title-link:hover {
   border-radius: var(--ic-border-radius);
   background-color: var(--ic-side-navigation-hover);
@@ -681,6 +660,34 @@ slot[name="app-title"]::slotted(a) {
   }
 }
 
+@media screen and (min-width: 577px) {
+  :host(.sm-collapsed) slot[name="app-title"]::slotted(ic-typography),
+  :host(.sm-collapsed) slot[name="app-title"]::slotted(a) {
+    position: absolute;
+    left: -9999px;
+    opacity: 0;
+    transition: opacity var(--ic-easing-transition-slow);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host(.sm-collapsed) slot[name="app-title"]::slotted(ic-typography),
+    :host(.sm-collapsed) slot[name="app-title"]::slotted(a) {
+      transition: none;
+    }
+  }
+
+  :host(.sm-collapsed) slot[name="app-title"]:dir(rtl)::slotted(ic-typography),
+  :host(.sm-collapsed) slot[name="app-title"]:dir(rtl)::slotted(a) {
+    right: -9999px;
+  }
+
+  :host(.sm-expanded) slot[name="app-title"]::slotted(a) {
+    font: var(--ic-font-h3) !important;
+    font-weight: var(--ic-font-weight-semibold) !important;
+    margin-left: var(--ic-space-xs) !important;
+  }
+}
+
 @media screen and (min-width: 993px) {
   :host(.side-display) {
     position: sticky;
@@ -708,3 +715,21 @@ slot[name="app-title"]::slotted(a) {
     fill: currentcolor;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.xs-menu-open) .side-navigation,
+  :host(.xs-menu-close) .side-navigation,
+  :host(.anchor-right.xs-menu-close) .side-navigation,
+  :host .title-link,
+  :host(.sm-collapsed.side-display),
+  :host(.sm-expanded.side-display),
+  :host(.sm-collapsed.side-display) .app-title-wrapper ic-typography,
+  :host(.sm-collapsed.side-display) :is(.side-navigation, .top-bar),
+  :host(.sm-expanded.side-display) :is(.side-navigation, .top-bar),
+  :host(.side-display) .bottom-side-nav .menu-expand-button,
+  :host(.sm-collapsed.side-display) .bottom-side-nav .menu-expand-button svg,
+  :host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button svg,
+  :host(.side-display) .collapsed-icon-labels-end {
+    transition: none;
+  }
+}

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

@@ -12,7 +12,9 @@ import { IcBrandForegroundEnum, } from "../../utils/types";
  */
 export class SideNavigation {
     constructor() {
-        this.ANIMATION_DURATION = parseInt(getCssProperty("--ic-transition-duration-slow")) || 0;
+        this.ANIMATION_DURATION = window.matchMedia("(prefers-reduced-motion: reduce)").matches
+            ? 0
+            : parseInt(getCssProperty("--ic-transition-duration-slow")) || 0;
         this.IC_NAVIGATION_ITEM = "ic-navigation-item";
         this.resizeObserver = null;
         this.COLLAPSED_ICON_LABELS_END = "collapsed-icon-labels-end";
@@ -203,14 +205,18 @@ export class SideNavigation {
             if (menuExpanded) {
                 icTypography.style.opacity = "1";
                 icTypography.style.visibility = "visible";
-                icTypography.style.transition =
-                    "visibility 0s, opacity var(--ic-easing-transition-slow)";
+                if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+                    icTypography.style.transition =
+                        "visibility 0s, opacity var(--ic-easing-transition-slow)";
+                }
             }
             else {
                 icTypography.style.opacity = "0";
                 icTypography.style.visibility = "hidden";
-                icTypography.style.transition =
-                    "visibility 0s, opacity var(--ic-easing-transition-slow)";
+                if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+                    icTypography.style.transition =
+                        "visibility 0s, opacity var(--ic-easing-transition-slow)";
+                }
             }
         };
         this.transitionHandler = (type) => {
@@ -451,7 +457,7 @@ export class SideNavigation {
             isAppNameSubtitleVariant,
             appTitle: appTitle || "",
         };
-        return (h(Host, { key: '2ca241755bb10821d8557f559592d4dd0760b887', class: {
+        return (h(Host, { key: '048b8b8cc51848714f6f0367995c271b39b1a9a2', class: {
                 "xs-menu-open": menuOpen && isSDevice,
                 "xs-menu-close": !menuOpen && isSDevice,
                 "sm-collapsed": !isSDevice && !menuExpanded,
@@ -460,12 +466,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: '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: {
+            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: '2a83fe000c46bc9ce54ca9de5cead38dddb5f88f', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: '464c9687f196364f27ab261377b523a6a7d19b5a', class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { key: '6eeedc489baacc84591354bf7be4537ff1d9fc56', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { key: '8b49aaab6a419cae1198c1cc4295ea15aa10523f', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { key: '90e051cd18572f31bb02e8dc1832aa2105328f6c', class: "navigation-list" }, h("slot", { key: 'b06759220c19e6a243bf84d17a6bcb0c321fee73', name: "primary-navigation" }))))), h("div", { key: 'db63c182321cbe7d77bebd732a3a5f2ddedbff7d', class: {
                 ["bottom-wrapper"]: true,
                 ["classification-spacing"]: hasClassificationBanner(),
-            } }, 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: {
+            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { key: '953cd6095e452078d068efc58cf689d558bdd4a1', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { key: '8d5b3dcfce47bc1594e5541ed41731a0fd795589', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { key: '57b6d08a7a6f0f15341a4b0289bf4a876fc5b30e', class: "navigation-list" }, h("slot", { key: '36c42a128bbc9f0144496d6af042656bfe26d713', name: "secondary-navigation" })))), h("div", { key: 'e34d40920163c830039d772d997549ebf0ff2162', class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", { key: '2984e8ca896aef5c7e6374e5c996c8a3fe4dc4a7' }), displayExpandBtn && (h("button", { key: 'cbf4ae4787ae4b5c2beaf9629db0c22df6e3910e', class: "menu-expand-button", innerHTML: chevronIcon, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { key: 'a330285250b908cb7ac14e9ae9f39612d4bcfce2', class: "app-status-wrapper" }, status && (h("div", { key: 'd90a9dd03f2ba41f1305afb96d78d46c85611aef', class: {
                 ["app-status"]: true,
-            } }, 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))))))));
+            } }, h("ic-typography", { key: '070e2696a97002c88022049ceb4af7e204ce509e', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version && (h("ic-typography", { key: 'acb4321ec1814ab47772570c0098b1998f9ea68e', variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
     }
     static get is() { return "ic-side-navigation"; }
     static get encapsulation() { return "shadow"; }