@ukic/web-components 3.20.0 → 3.22.0

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

@@ -270,7 +270,7 @@ export class Dialog {
     }
     render() {
         const { dialogRendered, disableHeightConstraint, fadeIn, theme, size } = this;
-        return (h(Host, { key: '97f96f655d95bb7192eb44e850f495ed133e7d73', class: {
+        return (h(Host, { key: '015eecd542dfaaaa9a8060961fd4dc2740675b9d', class: {
                 "ic-dialog-hidden": !dialogRendered,
                 "ic-dialog-fade-in": fadeIn,
                 "disable-height-constraint": !!disableHeightConstraint,

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

@@ -2,6 +2,7 @@ import { h, Host, } from "@stencil/core";
 import { getBrandForegroundAppearance, isPropDefined, slotHasContent, isEmptyString, } from "../../utils/helpers";
 export class Divider {
     constructor() {
+        this.isSlottedInSideNav = false;
         this.foregroundColor = getBrandForegroundAppearance();
         /**
          * The line style of the divider.
@@ -25,6 +26,16 @@ export class Divider {
          * The thickness of the divider.
          */
         this.weight = "thin";
+        this.getHostAttributes = (renderLabel) => this.isSlottedInSideNav
+            ? {
+                "aria-hidden": "true", // Prevent divider being included in screen reader count of items in side navigation
+                role: "listitem",
+            }
+            : (this.orientation === "vertical" ||
+                (renderLabel && !!isPropDefined(this.labelPlacement))) && {
+                "aria-orientation": this.orientation,
+                role: "separator",
+            };
     }
     brandChangeHandler(ev) {
         this.foregroundColor = ev.detail.mode;
@@ -35,8 +46,7 @@ export class Divider {
         if (parentEl) {
             const isBottomSideNav = parentEl.classList.contains("bottom-side-nav");
             const isBottomWrapper = (_a = parentEl.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("bottom-wrapper");
-            if (parentEl.tagName === "IC-SIDE-NAVIGATION" ||
-                (isBottomSideNav && isBottomWrapper)) {
+            if (this.isSlottedInSideNav || (isBottomSideNav && isBottomWrapper)) {
                 this.el.classList.add("ic-side-navigation-keyline");
                 if (this.foregroundColor === "light") {
                     this.theme = "dark";
@@ -48,6 +58,9 @@ export class Divider {
         }
     }
     componentWillRender() {
+        var _a;
+        this.isSlottedInSideNav =
+            ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === "IC-SIDE-NAVIGATION";
         this.updateMonochromeState();
     }
     render() {
@@ -88,11 +101,7 @@ export class Divider {
                 [`ic-divider-${weight}`]: true,
                 [`ic-divider-${borderStyle}`]: true,
                 [`ic-divider-label-${labelPlacement}`]: slotHasContent(this.el, "label") || !isEmptyString(label),
-            } }, ((orientation === "vertical" ||
-            (!!renderLabel() && !!isPropDefined(labelPlacement))) && {
-            "aria-orientation": orientation,
-            role: "separator",
-        })), orientation === "horizontal" &&
+            } }, this.getHostAttributes(!!renderLabel())), orientation === "horizontal" &&
             (!renderLabel() || !isPropDefined(labelPlacement)) && h("hr", null), !!isPropDefined(labelPlacement) && !!renderLabel() && renderLabel(), orientation === "vertical" &&
             (!renderLabel() || !isPropDefined(labelPlacement)) && (h("div", { class: "vertical-divider" }))));
     }

package/dist/collection/components/ic-divider/ic-divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-divider.js","sourceRoot":"","sources":["../../../src/components/ic-divider/ic-divider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  h,\n  Component,\n  Host,\n  Listen,\n  State,\n  Prop,\n  Element,\n} from \"@stencil/core\";\n\nimport {\n  getBrandForegroundAppearance,\n  isPropDefined,\n  slotHasContent,\n  isEmptyString,\n} from \"../../utils/helpers\";\n\nimport {\n  IcBrand,\n  IcOrientation,\n  IcBrandForeground,\n  IcThemeMode,\n} from \"../../utils/types\";\n\nimport {\n  IcDividerLabelPlacement,\n  IcDividerStyles,\n  IcDividerWeights,\n} from \"./ic-divider.types\";\n\n@Component({\n  tag: \"ic-divider\",\n  styleUrl: \"ic-divider.css\",\n  scoped: true,\n})\nexport class Divider {\n  @Element() el: HTMLIcDividerElement;\n\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n  /**\n   * The line style of the divider.\n   */\n  @Prop() borderStyle?: IcDividerStyles = \"solid\";\n\n  /**\n   * The label for the divider. The label placement will need to be set for the label to be displayed correctly.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.\n   */\n  @Prop() labelPlacement?: IcDividerLabelPlacement = \"center\";\n\n  /** If `true`, the divider will be displayed in a grey colour. */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The orientation of the divider.\n   */\n  @Prop() orientation?: IcOrientation = \"horizontal\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme?: IcThemeMode | IcBrandForeground = \"inherit\";\n\n  /**\n   * The thickness of the divider.\n   */\n  @Prop() weight?: IcDividerWeights = \"thin\";\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.foregroundColor = ev.detail.mode;\n  }\n\n  private updateMonochromeState(): void {\n    const parentEl = this.el.parentElement;\n    if (parentEl) {\n      const isBottomSideNav = parentEl.classList.contains(\"bottom-side-nav\");\n      const isBottomWrapper =\n        parentEl.parentElement?.classList.contains(\"bottom-wrapper\");\n\n      if (\n        parentEl.tagName === \"IC-SIDE-NAVIGATION\" ||\n        (isBottomSideNav && isBottomWrapper)\n      ) {\n        this.el.classList.add(\"ic-side-navigation-keyline\");\n        if (this.foregroundColor === \"light\") {\n          this.theme = \"dark\";\n        } else {\n          this.theme = \"light\";\n        }\n      }\n    }\n  }\n\n  componentWillRender(): void {\n    this.updateMonochromeState();\n  }\n\n  render() {\n    const {\n      borderStyle,\n      label,\n      labelPlacement,\n      monochrome,\n      orientation,\n      weight,\n    } = this;\n\n    const { theme } = this;\n\n    const invalidPropCombination = (\n      placement: IcDividerLabelPlacement\n    ): void => {\n      console.error(\n        `${\n          placement.charAt(0).toUpperCase() + placement.slice(1)\n        } label placement is not applicable for a ${orientation} ic-divider (web-components) / IcDivider (react)`\n      );\n    };\n\n    if (\n      ((labelPlacement === \"left\" || labelPlacement === \"right\") &&\n        orientation === \"vertical\") ||\n      ((labelPlacement === \"top\" || labelPlacement === \"bottom\") &&\n        orientation === \"horizontal\")\n    ) {\n      invalidPropCombination(labelPlacement);\n    }\n\n    const getTypographyVariant = (weight: string) => {\n      switch (weight) {\n        case \"very-thick\":\n          return \"h4\";\n        case \"thick\":\n          return \"subtitle-large\";\n        default:\n          return \"label\";\n      }\n    };\n\n    const renderLabel = () => {\n      if (slotHasContent(this.el, \"label\")) {\n        return (\n          <div class=\"ic-divider-label-container\">\n            <slot name=\"label\"></slot>\n          </div>\n        );\n      } else if (isPropDefined(label)) {\n        return (\n          <ic-typography\n            class=\"ic-divider-label\"\n            variant={getTypographyVariant(weight!)}\n          >\n            <p>{label}</p>\n          </ic-typography>\n        );\n      }\n      return null;\n    };\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [`ic-divider-monochrome`]: !!monochrome,\n          [`ic-divider-${orientation}`]: true,\n          [`ic-divider-${weight}`]: true,\n          [`ic-divider-${borderStyle}`]: true,\n          [`ic-divider-label-${labelPlacement}`]:\n            slotHasContent(this.el, \"label\") || !isEmptyString(label),\n        }}\n        {...((orientation === \"vertical\" ||\n          (!!renderLabel() && !!isPropDefined(labelPlacement))) && {\n          \"aria-orientation\": orientation,\n          role: \"separator\",\n        })}\n      >\n        {orientation === \"horizontal\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && <hr />}\n        {!!isPropDefined(labelPlacement) && !!renderLabel() && renderLabel()}\n        {orientation === \"vertical\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && (\n            <div class=\"vertical-divider\"></div>\n          )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-divider.js","sourceRoot":"","sources":["../../../src/components/ic-divider/ic-divider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  h,\n  Component,\n  Host,\n  Listen,\n  State,\n  Prop,\n  Element,\n} from \"@stencil/core\";\n\nimport {\n  getBrandForegroundAppearance,\n  isPropDefined,\n  slotHasContent,\n  isEmptyString,\n} from \"../../utils/helpers\";\n\nimport {\n  IcBrand,\n  IcOrientation,\n  IcBrandForeground,\n  IcThemeMode,\n} from \"../../utils/types\";\n\nimport {\n  IcDividerLabelPlacement,\n  IcDividerStyles,\n  IcDividerWeights,\n} from \"./ic-divider.types\";\n\n@Component({\n  tag: \"ic-divider\",\n  styleUrl: \"ic-divider.css\",\n  scoped: true,\n})\nexport class Divider {\n  private isSlottedInSideNav = false;\n\n  @Element() el: HTMLIcDividerElement;\n\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n  /**\n   * The line style of the divider.\n   */\n  @Prop() borderStyle?: IcDividerStyles = \"solid\";\n\n  /**\n   * The label for the divider. The label placement will need to be set for the label to be displayed correctly.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.\n   */\n  @Prop() labelPlacement?: IcDividerLabelPlacement = \"center\";\n\n  /** If `true`, the divider will be displayed in a grey colour. */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The orientation of the divider.\n   */\n  @Prop() orientation?: IcOrientation = \"horizontal\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme?: IcThemeMode | IcBrandForeground = \"inherit\";\n\n  /**\n   * The thickness of the divider.\n   */\n  @Prop() weight?: IcDividerWeights = \"thin\";\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.foregroundColor = ev.detail.mode;\n  }\n\n  private getHostAttributes = (renderLabel: boolean) =>\n    this.isSlottedInSideNav\n      ? {\n          \"aria-hidden\": \"true\", // Prevent divider being included in screen reader count of items in side navigation\n          role: \"listitem\",\n        }\n      : (this.orientation === \"vertical\" ||\n          (renderLabel && !!isPropDefined(this.labelPlacement))) && {\n          \"aria-orientation\": this.orientation,\n          role: \"separator\",\n        };\n\n  private updateMonochromeState(): void {\n    const parentEl = this.el.parentElement;\n    if (parentEl) {\n      const isBottomSideNav = parentEl.classList.contains(\"bottom-side-nav\");\n      const isBottomWrapper =\n        parentEl.parentElement?.classList.contains(\"bottom-wrapper\");\n\n      if (this.isSlottedInSideNav || (isBottomSideNav && isBottomWrapper)) {\n        this.el.classList.add(\"ic-side-navigation-keyline\");\n        if (this.foregroundColor === \"light\") {\n          this.theme = \"dark\";\n        } else {\n          this.theme = \"light\";\n        }\n      }\n    }\n  }\n\n  componentWillRender(): void {\n    this.isSlottedInSideNav =\n      this.el.parentElement?.tagName === \"IC-SIDE-NAVIGATION\";\n    this.updateMonochromeState();\n  }\n\n  render() {\n    const {\n      borderStyle,\n      label,\n      labelPlacement,\n      monochrome,\n      orientation,\n      weight,\n    } = this;\n\n    const { theme } = this;\n\n    const invalidPropCombination = (\n      placement: IcDividerLabelPlacement\n    ): void => {\n      console.error(\n        `${\n          placement.charAt(0).toUpperCase() + placement.slice(1)\n        } label placement is not applicable for a ${orientation} ic-divider (web-components) / IcDivider (react)`\n      );\n    };\n\n    if (\n      ((labelPlacement === \"left\" || labelPlacement === \"right\") &&\n        orientation === \"vertical\") ||\n      ((labelPlacement === \"top\" || labelPlacement === \"bottom\") &&\n        orientation === \"horizontal\")\n    ) {\n      invalidPropCombination(labelPlacement);\n    }\n\n    const getTypographyVariant = (weight: string) => {\n      switch (weight) {\n        case \"very-thick\":\n          return \"h4\";\n        case \"thick\":\n          return \"subtitle-large\";\n        default:\n          return \"label\";\n      }\n    };\n\n    const renderLabel = () => {\n      if (slotHasContent(this.el, \"label\")) {\n        return (\n          <div class=\"ic-divider-label-container\">\n            <slot name=\"label\"></slot>\n          </div>\n        );\n      } else if (isPropDefined(label)) {\n        return (\n          <ic-typography\n            class=\"ic-divider-label\"\n            variant={getTypographyVariant(weight!)}\n          >\n            <p>{label}</p>\n          </ic-typography>\n        );\n      }\n      return null;\n    };\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [`ic-divider-monochrome`]: !!monochrome,\n          [`ic-divider-${orientation}`]: true,\n          [`ic-divider-${weight}`]: true,\n          [`ic-divider-${borderStyle}`]: true,\n          [`ic-divider-label-${labelPlacement}`]:\n            slotHasContent(this.el, \"label\") || !isEmptyString(label),\n        }}\n        {...this.getHostAttributes(!!renderLabel())}\n      >\n        {orientation === \"horizontal\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && <hr />}\n        {!!isPropDefined(labelPlacement) && !!renderLabel() && renderLabel()}\n        {orientation === \"vertical\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && (\n            <div class=\"vertical-divider\"></div>\n          )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-empty-state/ic-empty-state.js

@@ -37,11 +37,11 @@ export class EmptyState {
     }
     render() {
         const { aligned, body, maxLines, heading, imageSize, subheading, theme } = this;
-        return (h(Host, { key: '16659f35d2b14d9a5e32fe6c61619fbafdf58f53', class: {
+        return (h(Host, { key: '60295d4ae9099c9e9adf17a6d1b1cb94a061ce1f', class: {
                 [`ic-empty-state-${aligned}`]: true,
                 [`image-${imageSize}`]: isSlotUsed(this.el, "image"),
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, isSlotUsed(this.el, "image") && h("slot", { key: 'ccc8a2daf0041d9dd5e611d3b60c96820271745b', name: "image" }), h("div", { key: 'ab68dff198b63394d890399ec53b9befbb70f222' }, h("slot", { key: 'fe99ebbfe6b9c899d4b1fb5737df268e0bc38bb4', name: "heading" }, h("ic-typography", { key: 'eea6eb657e09159b27935e16864961b95387a3d6', variant: "h4", class: "empty-state-heading" }, heading)), h("slot", { key: 'ca04ac75d72fc5864ed7821bf9d16c8999eac3aa', name: "subheading" }, h("ic-typography", { key: '257a4f73c4fb3577e4c1653607a492b4f4d18470', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), h("slot", { key: 'f0efda6128d1b5a5f2b280faf23940b0832e3121', name: "body" }, h("ic-typography", { key: '128849e7a458b1ff7b51079eeb9f6967df88cef1', maxLines: maxLines, class: "empty-state-body" }, body))), isSlotUsed(this.el, "actions") && (h("div", { key: '22cf30fd1f3636fb3344689c4435b59d4148bb5f', class: "action-area" }, h("slot", { key: 'c4e187603beb9b2291c9e038202ff651d4decfff', name: "actions" })))));
+            } }, isSlotUsed(this.el, "image") && h("slot", { key: 'a0ccf1c16408f306d5a1abc34a8b5540be75b986', name: "image" }), h("div", { key: 'd1f6a21c75513a3a2f8fdcba4f0a671013709651' }, h("slot", { key: '60cc4c4434d29d12f771e65bba5ff09918c904d3', name: "heading" }, h("ic-typography", { key: '6ef2441bed80f38f27b8005c89eeec7de0691587', variant: "h4", class: "empty-state-heading" }, heading)), h("slot", { key: 'dae616cdcebd5dacee04547d42b2f77203d5c48a', name: "subheading" }, h("ic-typography", { key: '6946d005ecc441b3fee96309fb1c479470c192de', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), h("slot", { key: '0ab7b57d4f33e7aad6fca48c8036846e7360aad8', name: "body" }, h("ic-typography", { key: 'ea367e9f5b6d353714d8d05576abffecc63bea2d', maxLines: maxLines, class: "empty-state-body" }, body))), isSlotUsed(this.el, "actions") && (h("div", { key: '997a125c580c0dfa6e2191df40745145168ce705', class: "action-area" }, h("slot", { key: '34c38c474a502720b659f4b2775869773cfe1f10', name: "actions" })))));
     }
     static get is() { return "ic-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-footer-link/ic-footer-link.css

@@ -558,3 +558,9 @@ video {
     fill: currentcolor;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.footer-logo-link) {
+    transition: none;
+  }
+}

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

@@ -39,12 +39,12 @@ export class FooterLink {
         const { footerConfig, href, hreflang, referrerpolicy, rel, target, download, } = this;
         const { small, grouped } = footerConfig;
         const isLogoLink = !!this.el.closest("div[slot='logo']");
-        return (h(Host, { key: 'b093247260ef7378ef3aa666029e463641eb20c0', class: {
+        return (h(Host, { key: '7488851004e3af24c0b0e1d9f9ccaf0d55ae5990', class: {
                 "footer-link": true,
                 [`footer-link-${grouped ? "grouped" : "ungrouped"}-${small ? "small" : "sparse"}`]: true,
                 [`footer-link-${this.foregroundColor}`]: true,
                 "footer-logo-link": isLogoLink,
-            }, role: "listitem" }, h("ic-link", { key: '79ac221357a96ca920f68609bb390a30f53be256', class: "footer-link", href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : undefined, target: target }, h("slot", { key: '06182bca4f4268ca01466a411a8de43671fbea24' }))));
+            }, role: "listitem" }, h("ic-link", { key: 'e388559e01bc73c013b7493dd2c315f730beb4b8', class: "footer-link", href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : undefined, target: target }, h("slot", { key: '013a86414ccca833cd52a4164c93bdf9ef040a4f' }))));
     }
     static get is() { return "ic-footer-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -78,7 +78,7 @@ export class Hero {
                 "background-position": scrollFactor,
             };
         }
-        return (h(Host, { key: 'fdbc239703d4121db55ebf918378cd363253529f', class: {
+        return (h(Host, { key: 'd7b8be369996272dd365fb416a1134e288dfe6cd', class: {
                 [`ic-hero-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
                 ["has-background-image"]: backgroundImage !== undefined,
                 ["has-right-content"]: this.rightContent,
@@ -86,12 +86,12 @@ export class Hero {
                 ["secondary-heading"]: !!secondaryHeading,
                 [`ic-hero-content-aligned-${contentAligned}`]: contentAligned !== undefined,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, style: style }, h("ic-section-container", { key: '31bb8c8c2a656e502f2d636382e5c52135d4ea0f', aligned: aligned, fullHeight: true, class: "section-container" }, h("div", { key: '890e74b018f5a906a6e07d86beb3ebe2730ea01b', class: {
+            }, style: style }, h("ic-section-container", { key: 'a5a8585b31aba9f1434ffaf6aa1145d7853ea4b6', aligned: aligned, fullHeight: true, class: "section-container" }, h("div", { key: '1830e42eb85d545b947dfe6ebc6b0d462e48397e', class: {
                 ["left-container"]: true,
                 ["left-container-full-width"]: this.leftContentFullWidth,
-            } }, h("div", { key: 'd67d033a9eb735b1f0710e3812f80173bd963c61', class: "heading" }, h("slot", { key: '154e08b9f3193d86dcf3aa9a94d742194f98d979', name: "heading" }, h("ic-typography", { key: '3e0e811d78b19009cc3ec19458e38455d1e93f75', variant: size === "small" ? "h2" : "h1", class: {
+            } }, h("div", { key: '4e2d3d2c1c694f6b330f2555388e9ed4abf4a907', class: "heading" }, h("slot", { key: 'ec340ba480f0fd881279225b160a8e6de2a4184a', name: "heading" }, h("ic-typography", { key: 'fb49e9dd42f753dc4c4e610da1e0fa76df9cf055', variant: size === "small" ? "h2" : "h1", class: {
                 ["heading-bottom-spacing"]: size !== "small",
-            } }, h("h2", { key: 'f0183d996aac2f70dca05b71be894b9529d7ec8b' }, heading)))), h("div", { key: 'dd5f0787458bf168c231906d7a9394df0fc0189b', class: "subheading" }, h("slot", { key: '16ddacec5c6d34aef1d34e998d9ab314ff8ee38c', name: "subheading" }, h("ic-typography", { key: '3d58628932a1c75cff267f60a9330aa85401ee73', variant: "body" }, subheading))), h("div", { key: 'b2bf9a217cbde760f04d90d6976489bc143bd2e5', class: "interaction-container" }, h("slot", { key: '8e42a9799b7c9bf632265d23e4ac3c6a4fd33e6f', name: "interaction" }))), (isPropDefined(secondaryHeading) || this.rightContent) && (h("div", { key: '7ed3fd485177546e131e4a87b7a9458c1d1f6207', class: "right-container" }, h("slot", { key: 'e97a8345e4dc3f25262c3cee033881a005b1a364', name: "secondary" }, secondaryHeading && (h("div", { key: 'd2b2a14a8847284bedbd67ca5bbc8fe822dbc38c', class: "secondary-container" }, h("div", { key: '8ebe7863cc432fb082c083d9904bf14d859c5d44', class: "secondary-heading" }, h("ic-typography", { key: '16b926e7b38f87d945a770196350d2f5877db451', variant: "h4" }, h("h3", { key: 'a196ab6f8ca699e7e8a7e1fa557afd79c859d043' }, secondaryHeading))), h("div", { key: '532c8888092e849194a6d4b31145807b3afbd240', class: "secondary-subheading" }, h("ic-typography", { key: '2852a039483f536e41719ae9f3c35179c4ec0ec2', variant: "subtitle-small" }, secondarySubheading))))))))));
+            } }, h("h2", { key: '822a6963c3c2aab17d3a42ff2257e4635414f5d8' }, heading)))), h("div", { key: '5e3fa3963bd1a2b18c929e897832968810b25b63', class: "subheading" }, h("slot", { key: '04071839319227b3c6e726562f08a2b860c31f4a', name: "subheading" }, h("ic-typography", { key: '096dd77e50768edee7017d79b620773a7260643c', variant: "body" }, subheading))), h("div", { key: '3e4a3f2afe811228a507dd3edd64f0f7f14c9c44', class: "interaction-container" }, h("slot", { key: 'ce0694893cd12d0da5a4db36cca1e8c4ffadd6b2', name: "interaction" }))), (isPropDefined(secondaryHeading) || this.rightContent) && (h("div", { key: '23a775df706d7464e40d86c3f79564b2cf4c8028', class: "right-container" }, h("slot", { key: 'f331ac3773afff23990f257c4999cb23957f0a95', name: "secondary" }, secondaryHeading && (h("div", { key: '12c5630d51d9f16ec5bd0b03f0de821ce8648e26', class: "secondary-container" }, h("div", { key: '0dff38bdf87ccd660f5292b41b29f2b0c681b39d', class: "secondary-heading" }, h("ic-typography", { key: '035a480675ce2779e4c4d5a97cfeace5de1b132a', variant: "h4" }, h("h3", { key: '0bb8cfd2b3c27206ec7e866b02018ec0c2810386' }, secondaryHeading))), h("div", { key: 'c55e6e2669c922a7c5a45d0c5fc225dbcade1e77', class: "secondary-subheading" }, h("ic-typography", { key: '52a346be44dec236bd0dcf815ccb41212684fb49', variant: "subtitle-small" }, secondarySubheading))))))))));
     }
     static get is() { return "ic-hero"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.css

@@ -537,3 +537,9 @@ video {
 :host(.ic-horizontal-scroll-light) .disabled ic-button > svg {
   color: var(--splitter-color) !important;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  ::slotted(*) {
+    scroll-behavior: auto;
+  }
+}

package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js

@@ -155,22 +155,22 @@ export class HorizontalScroll {
     }
     render() {
         const { firstItemVisible, lastItemVisible, itemOverflow } = this;
-        return (h(Host, { key: '329d00bc4e7ebfab434cb41dd32e919820c5adb5', class: {
+        return (h(Host, { key: 'be750f303ae10eced67f4683d262c765a2317bb2', class: {
                 ["ic-horizontal-scroll-visible"]: itemOverflow,
                 ["ic-horizontal-scroll-dark"]: this.appearance === IcBrandForegroundEnum.Dark,
                 ["ic-horizontal-scroll-light"]: this.appearance === IcBrandForegroundEnum.Light,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("div", { key: 'ed231bf1fcd68399e29e790026b377bf8f96a14e', "aria-hidden": "true", class: {
+            } }, h("div", { key: '666121449513dc99dc038c434ab259bb891351da', "aria-hidden": "true", class: {
                 ["scroll-container-left"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: firstItemVisible,
-            }, role: "tab" }, h("ic-button", { key: 'c34f45cb44e242939985f792a21e482a11078fba', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, h("ic-button", { key: '09646f50ff3f0ef162a85b8a5899338c70cf12f0', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
-                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { key: 'c5b52e4cfa655f8dc499e69da531870f4e4fe216', class: "scroll-splitter-left" })), h("slot", { key: '8478dc63668ed2e842182c47e9a3b27b77ac642f' }), h("div", { key: 'b9b0e21e69a40f7afda403db3db8b983257240c0', "aria-hidden": "true", class: {
+                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { key: 'b046b20bca53065b37ed041d5b3e5f318219f4e3', class: "scroll-splitter-left" })), h("slot", { key: '446617c76787df8a0721f99f50f603705ebca615' }), h("div", { key: '495869a8eaaaedd153fdd65f09bdf4f6dba1648d', "aria-hidden": "true", class: {
                 ["scroll-container-right"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: lastItemVisible,
-            }, role: "tab" }, h("span", { key: '909936dddf54502bb1bdc3fdfdf36d59b5582238', class: "scroll-splitter-right" }), h("ic-button", { key: '4e9093a9da1b3e387933dfc2495f1279bb7ad180', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, h("span", { key: '7983e2a0990b8882417e3cfa29852ae0e1c7bf97', class: "scroll-splitter-right" }), h("ic-button", { key: '2c8391e482559ae4de573f73cb0147c9f27e4f2f', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
                 : "light", monochrome: this.monochrome, innerHTML: RightArrow, disabled: lastItemVisible, tabindex: "-1", onClick: this.scrollRight, onMouseDown: this.rightArrowMouseDownHandler }))));
     }

package/dist/collection/components/ic-input-component-container/ic-input-component-container.css

@@ -215,3 +215,10 @@ ic-input-component-container:focus {
     width: 100%;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  ic-input-component-container,
+  .focus-indicator {
+    transition: none;
+  }
+}

package/dist/collection/components/ic-input-component-container/ic-input-component-container.js

@@ -48,15 +48,15 @@ export class InputComponentContainer {
     }
     render() {
         const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;
-        return (h(Host, { key: '86271007106caa930e823cd2a9b9242670a1d2c1', class: {
+        return (h(Host, { key: '0644de5056535a73750461a8169f4ae8a254a205', class: {
                 [`ic-input-component-container-${size}`]: true,
                 [`ic-input-component-container-${validationStatus}`]: validationStatus !== "" && !disabled && !readonly,
                 "ic-input-component-container-disabled": !!disabled,
                 "ic-input-component-container-readonly": !!readonly,
                 "ic-input-component-container-multiline": !!multiLine,
                 "ic-input-component-container-full-width": !!fullWidth,
-            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: '2b8e64e7cc2d78b34b816b080f7e5856b4aef254', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: '738e1d776664a7971bd97f36a68b8193849178ae', class: "icon-container" }, h("slot", { key: 'c6d5fa181367e1988b3e454b06c01345afa393ff', name: "left-icon" }))), h("slot", { key: '970ccdc08abd4dbf84248cc5708ab09ecbcbc0ae' }), validationInline &&
-            validationStatus === IcInformationStatus.Success && (h("span", { key: '6c7cbd9c69c11a8688972039ba519829805d3ab7', class: "inline-success", innerHTML: successIcon })))));
+            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: 'cb6fe4d8708ecdf019cc873ad0f238ce6c373d01', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: '8e0646d277adfe54d314b014e8fc10129208d47b', class: "icon-container" }, h("slot", { key: '25e3fcab918dacb0fc1cadc1e6ac3843041b7bd2', name: "left-icon" }))), h("slot", { key: '79660a2a08fec6aae9f6c4dd7f287b237b4c8708' }), validationInline &&
+            validationStatus === IcInformationStatus.Success && (h("span", { key: 'c49ce88df47d2c99f3b76b7823209d73f30184ed', class: "inline-success", innerHTML: successIcon })))));
     }
     static get is() { return "ic-input-component-container"; }
     static get originalStyleUrls() {

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

@@ -11,11 +11,11 @@ export class InputContainer {
         this.readonly = false;
     }
     render() {
-        return (h(Host, { key: 'ffa7ae6f683f172205085d3ade5af4ed2b665f5e' }, h("div", { key: 'e010e17e975c12a26c9ae66cb604ca561882901b', class: {
+        return (h(Host, { key: '617cc3f8d3eb6f800e053ccc99b9375ba9cf5761' }, h("div", { key: '769954cc34c4582dedc014ef47f59429176ac20d', class: {
                 ["component-container"]: true,
                 ["disabled"]: !!this.disabled,
                 ["readonly"]: !!this.readonly,
-            } }, h("slot", { key: '202931f1bc8d2ab341753c23464e266fd899a15d' }))));
+            } }, h("slot", { key: 'ad3ce925e8d21cb7f660b03923e82c9af1941202' }))));
     }
     static get is() { return "ic-input-container"; }
     static get originalStyleUrls() {

package/dist/collection/components/ic-input-label/ic-input-label.js

@@ -1,5 +1,8 @@
 import { Host, h } from "@stencil/core";
 import { getInputHelperTextID, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+/**
+ * @slot label - Content is placed as the label text.
+ */
 export class InputLabel {
     constructor() {
         /**
@@ -30,14 +33,14 @@ export class InputLabel {
          * @internal If `true`, wraps label text in label tag
          */
         this.useLabelTag = true;
-        this.isHelperTextSlotUsed = (slot) => {
+        this.isSlotUsed = (slot) => {
             const assignedEls = slot === null || slot === void 0 ? void 0 : slot.assignedElements();
             if (assignedEls && assignedEls.length) {
                 for (const el of assignedEls) {
                     if (el.tagName === "SLOT") {
                         // Recursion needed for when slot is forwarded multiple times - through child components
                         // (e.g. in date picker)
-                        if (this.isHelperTextSlotUsed(el)) {
+                        if (this.isSlotUsed(el)) {
                             return true;
                         }
                     }
@@ -63,14 +66,19 @@ export class InputLabel {
             "helpertext-readonly": readonly,
         };
         const helperTextSlot = this.el.querySelector("slot[name='helper-text']");
-        return (h(Host, { key: 'bc32f49e555f33d246a3710c0ccea33ca511728f', class: {
-                "ic-input-label-disabled": !!disabled,
-                "ic-input-label-readonly": readonly,
-                "with-helper": this.isHelperTextSlotUsed(helperTextSlot) || helperText !== "",
-            } }, !hideLabel && (h("ic-typography", { key: 'b5f8b55d18f914ed5ae2b3392661a08d35cbe3d9', variant: "label", class: {
+        const labelSlot = this.el.querySelector('[slot="label"]');
+        const LabelContent = () => this.isSlotUsed(labelSlot) ? (h("slot", { name: "label" })) : readonly || !useLabelTag ? (h("ic-typography", { variant: "label", class: {
+                "readonly-label": readonly,
+                "error-label": status === "error" && !(readonly || disabled),
+            } }, labelText)) : (h("ic-typography", { variant: "label", class: {
                 "readonly-label": readonly,
                 "error-label": status === "error" && !(readonly || disabled),
-            } }, readonly || !useLabelTag ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText)))), this.isHelperTextSlotUsed(helperTextSlot) ? (h("span", { id: helperTextId, class: helperTextClass }, h("slot", { name: "helper-text" }))) : (helperText !== "" && (h("ic-typography", { variant: "caption", class: helperTextClass }, h("span", { id: helperTextId }, helperText))))));
+            } }, h("label", { htmlFor: this.for }, labelText)));
+        return (h(Host, { key: 'f22dfddc6e1c5dc956e3a2288a168b41ad18b35b', class: {
+                "ic-input-label-disabled": !!disabled,
+                "ic-input-label-readonly": readonly,
+                "with-helper": this.isSlotUsed(helperTextSlot) || helperText !== "",
+            } }, !hideLabel && h(LabelContent, { key: 'db3607fc40a7752954f3cd7e40bcf969a6941bdb' }), this.isSlotUsed(helperTextSlot) ? (h("span", { id: helperTextId, class: helperTextClass }, h("slot", { name: "helper-text" }))) : (helperText !== "" && (h("ic-typography", { variant: "caption", class: helperTextClass }, h("span", { id: helperTextId }, helperText))))));
     }
     static get is() { return "ic-input-label"; }
     static get originalStyleUrls() {

package/dist/collection/components/ic-input-label/ic-input-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-input-label.js","sourceRoot":"","sources":["../../../src/components/ic-input-label/ic-input-label.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  @Element() el: HTMLIcInputLabelElement;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for?: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The label will be visually hidden.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The status of the label - e.g. 'error'.\n   */\n  @Prop() status: \"error\" | \"\" = \"\";\n\n  /**\n   * @internal If `true`, wraps label text in label tag\n   */\n  @Prop() useLabelTag: boolean = true;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  private isHelperTextSlotUsed = (slot: Element | null): boolean => {\n    const assignedEls = (slot as HTMLSlotElement)?.assignedElements();\n    if (assignedEls && assignedEls.length) {\n      for (const el of assignedEls) {\n        if (el.tagName === \"SLOT\") {\n          // Recursion needed for when slot is forwarded multiple times - through child components\n          // (e.g. in date picker)\n          if (this.isHelperTextSlotUsed(el as HTMLSlotElement)) {\n            return true;\n          }\n        } else {\n          // Found an assigned element which is not a nested <slot>\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  render() {\n    const {\n      disabled,\n      readonly,\n      label,\n      required,\n      helperText,\n      status,\n      hideLabel,\n      useLabelTag,\n    } = this;\n    const labelText = required ? label + \" *\" : label;\n    const helperTextId = this.for && getInputHelperTextID(this.for);\n    const helperTextClass = {\n      helpertext: true,\n      \"helpertext-normal\": !disabled && !readonly,\n      \"helpertext-readonly\": readonly,\n    };\n\n    const helperTextSlot = this.el.querySelector(\"slot[name='helper-text']\");\n\n    return (\n      <Host\n        class={{\n          \"ic-input-label-disabled\": !!disabled,\n          \"ic-input-label-readonly\": readonly,\n          \"with-helper\":\n            this.isHelperTextSlotUsed(helperTextSlot) || helperText !== \"\",\n        }}\n      >\n        {!hideLabel && (\n          <ic-typography\n            variant=\"label\"\n            class={{\n              \"readonly-label\": readonly,\n              \"error-label\": status === \"error\" && !(readonly || disabled),\n            }}\n          >\n            {readonly || !useLabelTag ? (\n              `${labelText}`\n            ) : (\n              <label htmlFor={this.for}>{labelText}</label>\n            )}\n          </ic-typography>\n        )}\n        {this.isHelperTextSlotUsed(helperTextSlot) ? (\n          <span id={helperTextId} class={helperTextClass}>\n            <slot name=\"helper-text\"></slot>\n          </span>\n        ) : (\n          helperText !== \"\" && (\n            <ic-typography variant=\"caption\" class={helperTextClass}>\n              <span id={helperTextId}>{helperText}</span>\n            </ic-typography>\n          )\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-input-label.js","sourceRoot":"","sources":["../../../src/components/ic-input-label/ic-input-label.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot label - Content is placed as the label text.\n */\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  @Element() el: HTMLIcInputLabelElement;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for?: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The label will be visually hidden.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The status of the label - e.g. 'error'.\n   */\n  @Prop() status: \"error\" | \"\" = \"\";\n\n  /**\n   * @internal If `true`, wraps label text in label tag\n   */\n  @Prop() useLabelTag: boolean = true;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  private isSlotUsed = (slot: Element | null): boolean => {\n    const assignedEls = (slot as HTMLSlotElement)?.assignedElements();\n    if (assignedEls && assignedEls.length) {\n      for (const el of assignedEls) {\n        if (el.tagName === \"SLOT\") {\n          // Recursion needed for when slot is forwarded multiple times - through child components\n          // (e.g. in date picker)\n          if (this.isSlotUsed(el as HTMLSlotElement)) {\n            return true;\n          }\n        } else {\n          // Found an assigned element which is not a nested <slot>\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  render() {\n    const {\n      disabled,\n      readonly,\n      label,\n      required,\n      helperText,\n      status,\n      hideLabel,\n      useLabelTag,\n    } = this;\n    const labelText = required ? label + \" *\" : label;\n    const helperTextId = this.for && getInputHelperTextID(this.for);\n    const helperTextClass = {\n      helpertext: true,\n      \"helpertext-normal\": !disabled && !readonly,\n      \"helpertext-readonly\": readonly,\n    };\n\n    const helperTextSlot = this.el.querySelector(\"slot[name='helper-text']\");\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\n\n    const LabelContent = () =>\n      this.isSlotUsed(labelSlot) ? (\n        <slot name=\"label\"></slot>\n      ) : readonly || !useLabelTag ? (\n        <ic-typography\n          variant=\"label\"\n          class={{\n            \"readonly-label\": readonly,\n            \"error-label\": status === \"error\" && !(readonly || disabled),\n          }}\n        >\n          {labelText}\n        </ic-typography>\n      ) : (\n        <ic-typography\n          variant=\"label\"\n          class={{\n            \"readonly-label\": readonly,\n            \"error-label\": status === \"error\" && !(readonly || disabled),\n          }}\n        >\n          <label htmlFor={this.for}>{labelText}</label>\n        </ic-typography>\n      );\n\n    return (\n      <Host\n        class={{\n          \"ic-input-label-disabled\": !!disabled,\n          \"ic-input-label-readonly\": readonly,\n          \"with-helper\": this.isSlotUsed(helperTextSlot) || helperText !== \"\",\n        }}\n      >\n        {!hideLabel && <LabelContent />}\n        {this.isSlotUsed(helperTextSlot) ? (\n          <span id={helperTextId} class={helperTextClass}>\n            <slot name=\"helper-text\"></slot>\n          </span>\n        ) : (\n          helperText !== \"\" && (\n            <ic-typography variant=\"caption\" class={helperTextClass}>\n              <span id={helperTextId}>{helperText}</span>\n            </ic-typography>\n          )\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-input-validation/ic-input-validation.js

@@ -43,14 +43,14 @@ export class InputValidation {
     render() {
         const { ariaLiveMode, fullWidth, status, message } = this;
         const displayIcon = status !== "" ? ICON[status] : "";
-        return (h(Host, { key: 'c9749e8bb3c64a0ec364063500c6e9d6a2606116', class: {
+        return (h(Host, { key: '3b6f6b3e7ad37b899ee8fb71dbf7868a0eb4bd3f', class: {
                 [`ic-input-validation-${status}`]: status !== "",
                 "ic-input-validation-full-width": !!fullWidth,
                 "ic-input-validation-with-status": status !== "",
-            } }, displayIcon !== "" && (h("span", { key: '37f56d09513abdaf04e3cf0131d89c1e78c77dd1', class: {
+            } }, displayIcon !== "" && (h("span", { key: 'f5d6eab684ec1ce116a2bb09e2a91a2d88d1620f', class: {
                 "status-icon": true,
                 [`icon-${status}`]: true,
-            }, innerHTML: displayIcon })), h("ic-typography", { key: 'c48a3f1ec46a3c9cc5c57c271c90f7fa6f9f7ff4', variant: "caption", class: "statustext" }, h("span", { key: '445497c5225d3bdcf4505d0e27ef8af213a9fc11', id: this.for && getInputValidationTextID(this.for) }, isSlotUsed(this.el, "validation-message") ? (h("slot", { name: "validation-message" })) : (message)), h("span", { key: 'f9126a58e59ac9f05c88e8c4860f49eb3d394fa7', ref: (el) => (this.messageEl = el), class: "sr-only", "aria-live": ariaLiveMode })), h("slot", { key: 'ee1a49b5c1765f153f4ee8e10cd94fa0e1549a54', name: "validation-message-adornment" })));
+            }, innerHTML: displayIcon })), h("ic-typography", { key: '841d8bfbf9dab21d611325dd3d7148c83ea09f40', variant: "caption", class: "statustext" }, h("span", { key: 'b35e925cc1dfd87cf8b4b2e3a8276492d5f4abda', id: this.for && getInputValidationTextID(this.for) }, isSlotUsed(this.el, "validation-message") ? (h("slot", { name: "validation-message" })) : (message)), h("span", { key: '2945b04c5e9dd1376793efc206a3c61fd96d84f2', ref: (el) => (this.messageEl = el), class: "sr-only", "aria-live": ariaLiveMode })), h("slot", { key: 'fd6c89ce76c2abf86813c2d20aadd2e652e649ca', name: "validation-message-adornment" })));
     }
     static get is() { return "ic-input-validation"; }
     static get originalStyleUrls() {

package/dist/collection/components/ic-layout-grid/ic-layout-grid.js

@@ -124,10 +124,10 @@ export class LayoutGrid {
     }
     render() {
         const { aligned, fullHeight } = this;
-        return (h(Host, { key: 'edd252e9b99b8ae5a131062ac6f102b2e76d22ce', class: {
+        return (h(Host, { key: 'fb70bb0fe2085ce0eba37572f3a12e6d56c6c195', class: {
                 [`ic-layout-grid-aligned-${aligned}`]: true,
                 ["ic-layout-grid-no-vertical-padding"]: !!fullHeight,
-            } }, h("slot", { key: '9d4b3b7d4f3379b01751707270f00f988e16b0a8' })));
+            } }, h("slot", { key: '852c50adaf3b8c743353429659198845f363de62' })));
     }
     static get is() { return "ic-layout-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-layout-grid-item/ic-layout-grid-item.js

@@ -42,9 +42,9 @@ export class LayoutGridItem {
     }
     render() {
         const { hideInMobileMode } = this;
-        return (h(Host, { key: '142d6bb3ec03f4e0b362b1d10da70a3ee7f215d5', class: {
+        return (h(Host, { key: '9f576040938030f0d7fc61f5885ca73ab37a508b', class: {
                 "ic-layout-grid-hide-in-mobile": !!hideInMobileMode,
-            } }, h("slot", { key: '4711277515425bc6bff4d1089c14fafc3ab6032b' })));
+            } }, h("slot", { key: 'b8f66ba2ef9651e99a0ce3b3caec2f021a55e723' })));
     }
     static get is() { return "ic-layout-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -601,3 +601,10 @@ video {
     fill: currentcolor !important;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.ic-link) .link,
+  :host(.ic-link) ::slotted(a) {
+    transition: none;
+  }
+}

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

@@ -91,7 +91,7 @@ export class Link {
     }
     render() {
         const { download, href, hreflang, referrerpolicy, rel, target, monochrome, theme, } = this;
-        return (h(Host, { key: '2b5806a3fa48ea9113346d0d9ac8ecd86e0c699a', class: {
+        return (h(Host, { key: 'b965ed6758a2d2d4f618a965bb27b6b0e7e2fbe6', class: {
                 ["ic-link"]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-link-monochrome"]: !!monochrome,

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js

@@ -190,24 +190,24 @@ export class LoadingIndicator {
     }
     render() {
         const { circularDiameter, circularDimensions: { x, y, r, dashArray, dashOffset }, description, fullWidth, indicatorLabel, innerLabel, internalType, label, max, min, monochrome, progress, size, theme, } = this;
-        return (h(Host, { key: '2905a37e973a97b428414010c467764d9e2a9fd1', class: {
+        return (h(Host, { key: '243c07c3e1680457f322a8b6f5885c9d87e76d5d', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-loading-indicator-full-width": fullWidth,
                 "ic-loading-indicator-label": !!label,
                 "ic-loading-indicator-monochrome": monochrome,
                 [`ic-loading-indicator-size-${size}`]: true,
-            } }, h("div", { key: '6fa756abb41297cc5e8610b30c1cb3f03d953c2d', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: 'f1112dc701c88024573e6dc9096725ab4675ee2e', ref: (el) => (this.outerElement = el), class: {
+            } }, h("div", { key: '9babb0d72e18da86831c77b3cafe898a07f862bd', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: 'fc2acfe835840bcb374bf8d5a018b3e9e16d8998', ref: (el) => (this.outerElement = el), class: {
                 [`ic-loading-${internalType}-outer`]: true,
                 [progress === undefined ? "indeterminate" : "determinate"]: true,
-            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: 'd56cfeaee1b3e5f2e2068d9784414df0bbdab913', ref: (el) => (this.innerElement = el), class: {
+            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '953e6e286631e85d75dd2a0fe48fb8b24543d38e', ref: (el) => (this.innerElement = el), class: {
                 [`ic-loading-${internalType}-inner`]: true,
                 "inner-label": !!innerLabel,
-            } }, innerLabel && size === "small" && (h("ic-typography", { key: '6230e2f24f7e4e9872446a4642b4f18e2410b59d', variant: "subtitle-small", class: "inner-text" }, innerLabel)), internalType === "circular" && (h("svg", { key: '19adf2a04d18a77082f44ab13404907cee59fde2', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: '60be621b7acf27bc1bebd35a71f9666038c232f2', cx: x, cy: y, r: r }), h("circle", { key: '7197e37b0245ed0995cd414cb03d9a96c3a2ac8f', style: {
+            } }, innerLabel && size === "small" && (h("ic-typography", { key: 'bd2371f08cba6309c42137ca1a69b76126708414', variant: "subtitle-small", class: "inner-text" }, innerLabel)), internalType === "circular" && (h("svg", { key: 'd8d29654375b72d57906e0875065e04191866685', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: '0f244e5c1d2c0154f927c332ed3e215e89c21aee', cx: x, cy: y, r: r }), h("circle", { key: 'f1a18ea21887f9325ebcaee5a727ecb9824a0aab', style: {
                 "--circular-steps-max": progress ? `${max}` : undefined,
                 "--progress-value": progress !== undefined ? `${progress}` : undefined,
                 "--stroke-dasharray": dashArray,
                 "--stroke-dashoffset": dashOffset,
-            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: 'cc98f0844fdb83d05ee52dee9d6545d263a15181', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: '1631cea623f99ab6573dca4726480ac62207e5fe' }, indicatorLabel))))));
+            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: '2a69d9c65183971baedab9f9dbe85f51be96db5e', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: '9b21465fcb1befe73cc481499cb037733ab6c1f2' }, indicatorLabel))))));
     }
     static get is() { return "ic-loading-indicator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -657,6 +657,11 @@ video {
   fill: currentcolor;
 }
 
+:first-child > .option-group-title {
+  padding: var(--ic-space-xs) calc(var(--ic-space-xs) - var(--ic-space-1px))
+    var(--ic-space-xs);
+}
+
 .option-group-title {
   padding: var(--ic-space-lg) calc(var(--ic-space-xs) - var(--ic-space-1px))
     var(--ic-space-xs);
@@ -729,7 +734,7 @@ video {
 }
 
 @media (forced-colors: active) {
-  .focused-option:focus {
+  .focused-option {
     outline: none;
     border: 0.125rem solid transparent;
   }
@@ -748,3 +753,9 @@ video {
     width: 100%;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.ic-menu-open) {
+    transition: none;
+  }
+}