@ukic/web-components 3.20.0 → 3.21.0

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

@@ -41,9 +41,16 @@ export class Accordion {
         };
         // Set accordion animation
         this.setAccordionAnimation = (el, duration, property, delay) => {
-            el.style.transitionDuration = `${duration}ms`;
-            el.style.transitionProperty = property;
-            el.style.transitionDelay = delay;
+            if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+                el.style.transitionDuration = `${duration}ms`;
+                el.style.transitionProperty = property;
+                el.style.transitionDelay = delay;
+            }
+            else {
+                el.style.transitionDuration = "0ms";
+                el.style.transitionProperty = "none";
+                el.style.transitionDelay = "0ms";
+            }
         };
         this.setExpandedContentStyle = (ev, expandedContent) => {
             if (ev.propertyName === "height" && expandedContent.clientHeight > 0) {
@@ -117,19 +124,19 @@ export class Accordion {
     }
     render() {
         const { size, disabled, expanded, theme } = this;
-        return (h(Host, { key: '9fff7c4dc37187f9a2d03ae477c48012ff17c870', id: this.accordionId, class: {
+        return (h(Host, { key: '58ea81b0011f31da3d2d872244720011cb9028c8', id: this.accordionId, class: {
                 ["ic-accordion-disabled"]: !!disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, "aria-disabled": disabled ? "true" : "false" }, h("button", { key: '0f83275fbfc435eb5b640bd76b9a9582fcb3dca0', ref: (el) => (this.accordionBtnHeading = el), id: `${this.accordionId}-button`, disabled: disabled, tabindex: disabled ? -1 : 0, class: {
+            }, "aria-disabled": disabled ? "true" : "false" }, h("button", { key: '1a79e3d09955ed9bb07ddac08690ff157d98313d', ref: (el) => (this.accordionBtnHeading = el), id: `${this.accordionId}-button`, disabled: disabled, tabindex: disabled ? -1 : 0, class: {
                 [`${size}`]: true,
                 ["section-button"]: true,
                 ["section-button-open"]: !!expanded && !disabled,
-            }, "aria-expanded": `${expanded}`, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded }, isSlotUsed(this.el, "icon") && (h("div", { key: '41c88884df97917d026fbecb500c35b393045c7d', class: "icon-container" }, h("slot", { key: 'ddc6894db8ab81e27c971350e261d99b51759756', name: "icon" }))), h("ic-typography", { key: 'e0ca73dbe5a2d46dbe2f893d4405e3d82fd2a862', variant: "subtitle-large", class: "section-header" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (this.heading)), h("span", { key: 'a95fad35c3e3f38415da026a93112079f74de4d7', class: {
+            }, "aria-expanded": `${expanded}`, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded }, isSlotUsed(this.el, "icon") && (h("div", { key: 'fc0e123d20dca395b2210f1ee14c7d89bb8e50ad', class: "icon-container" }, h("slot", { key: 'c2185289998b60967ec0a0097a3aad8b4a88f07c', name: "icon" }))), h("ic-typography", { key: '211d4d69f0468dbec907c6d32ec61adea8e6be61', variant: "subtitle-large", class: "section-header" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (this.heading)), h("span", { key: 'e9f9ef3f67e85d33d0459c55d7307dcf522f0628', class: {
                 ["expand-chevron"]: true,
                 ["content-expanded-chevron"]: !!expanded && !disabled,
-            }, "aria-hidden": "true", innerHTML: chevronIcon })), h("div", { key: '65b6322d5dde677528891631ecd9b95189948771', class: {
+            }, "aria-hidden": "true", innerHTML: chevronIcon })), h("div", { key: '1e74fb0c312fc767a7518cbfcce5f55a90fc22a9', class: {
                 ["expanded-content"]: true,
-            }, "aria-labelledby": `${this.accordionId}-button`, role: "region", "aria-hidden": `${!expanded}`, id: "expanded-content-area", ref: (el) => (this.expandedContentEl = el) }, h("div", { key: 'de9ec00d55757be20c097082817529b652200263', class: "expanded-content-inner" }, this.message ? (h("ic-typography", { variant: "body" }, this.message)) : (h("slot", null))))));
+            }, "aria-labelledby": `${this.accordionId}-button`, role: "region", "aria-hidden": `${!expanded}`, id: "expanded-content-area", ref: (el) => (this.expandedContentEl = el) }, h("div", { key: '04ed5966177cce63233f64e4e2d01bcbecbe10af', class: "expanded-content-inner" }, this.message ? (h("ic-typography", { variant: "body" }, this.message)) : (h("slot", null))))));
     }
     static get is() { return "ic-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-accordion.js","sourceRoot":"","sources":["../../../src/components/ic-accordion/ic-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAGxD,IAAI,YAAY,GAAG,CAAC,CAAC;AACrB,MAAM,6BAA6B,GAAG,yBAAyB,CAAC;AAEhE;;;GAGG;AAOH,MAAM,OAAO,SAAS;IALtB;QAMU,gBAAW,GAAG,gBAAgB,YAAY,EAAE,EAAE,CAAC;QAG/C,gCAA2B,GAAG,kCAAkC,CAAC;QAIzE;;WAEG;QACK,aAAQ,GAAa,KAAK,CAAC;QAMnC;;WAEG;QACsB,aAAQ,GAAa,KAAK,CAAC;QAEpD;;WAEG;QACK,YAAO,GAAY,EAAE,CAAC;QAE9B;;WAEG;QACK,YAAO,GAAY,EAAE,CAAC;QAE9B;;WAEG;QACK,SAAI,GAAa,QAAQ,CAAC;QAElC;;WAEG;QACK,UAAK,GAAiB,SAAS,CAAC;QAqDhC,mBAAc,GAAG,GAAS,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;QACvD,CAAC,CAAC;QAEF,0BAA0B;QAClB,0BAAqB,GAAG,CAC9B,EAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,KAAa,EACb,EAAE;YACF,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,GAAG,QAAQ,IAAI,CAAC;YAC9C,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,QAAQ,CAAC;YACvC,EAAE,CAAC,KAAK,CAAC,eAAe,GAAG,KAAK,CAAC;QACnC,CAAC,CAAC;QAEM,4BAAuB,GAAG,CAChC,EAAmB,EACnB,eAA+B,EAC/B,EAAE;YACF,IAAI,EAAE,CAAC,YAAY,KAAK,QAAQ,IAAI,eAAe,CAAC,YAAY,GAAG,CAAC,EAAE,CAAC;gBACrE,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;gBAC7D,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YACxC,CAAC;QACH,CAAC,CAAC;QAEM,wBAAmB,GAAG,CAC5B,EAAmB,EACnB,eAA+B,EAC/B,EAAE;YACF,IAAI,EAAE,CAAC,YAAY,KAAK,QAAQ,IAAI,eAAe,CAAC,YAAY,KAAK,CAAC,EAAE,CAAC;gBACvE,eAAe,CAAC,KAAK,CAAC,WAAW,CAC/B,IAAI,CAAC,2BAA2B,EAChC,QAAQ,CACT,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QAEM,2BAAsB,GAAG,GAAG,EAAE;YACpC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC3B,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;gBACjD,MAAM,aAAa,GAAG,iBAAiB,CAAC,YAAY,CAAC;gBACrD,IAAI,aAAa,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBACvC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACjC,IAAI,CAAC,2BAA2B,EAChC,SAAS,CACV,CAAC;oBACF,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,aAAa,IAAI,CAAC;oBACtD,IAAI,CAAC,qBAAqB,CACxB,iBAAiB,EACjB,KAAK,EACL,QAAQ,EACR,UAAU,CACX,CAAC;oBAEF,iBAAiB,CAAC,gBAAgB,CAChC,eAAe,EACf,CAAC,CAAkB,EAAE,EAAE;wBACrB,IAAI,CAAC,uBAAuB,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC;oBACrD,CAAC,CACF,CAAC;gBACJ,CAAC;qBAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAC1B,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;oBACjD,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,iBAAiB,CAAC,YAAY,IAAI,CAAC;oBACvE,IAAI,iBAAiB,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;wBACzD,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;wBACrC,IAAI,CAAC,qBAAqB,CACxB,iBAAiB,EACjB,KAAK,EACL,QAAQ,EACR,SAAS,CACV,CAAC;wBACF,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,6BAA6B,CAAC,CAAC;oBACpE,CAAC;oBACD,iBAAiB,CAAC,gBAAgB,CAAC,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;wBACxD,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC;oBACjD,CAAC,CAAC,CAAC;gBACL,CAAC;YACH,CAAC;QACH,CAAC,CAAC;KAqEH;IArOC,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IAgCD,4FAA4F;IAE5F,mBAAmB;QACjB,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAA,IAAI,CAAC,mBAAmB,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC;IAED,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IAED,oBAAoB;QAClB,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;QACjD,IAAI,iBAAiB,EAAE,CAAC;YACtB,iBAAiB,CAAC,mBAAmB,CACnC,eAAe,EACf,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC,EAAE,iBAAiB,CAAC,EACzD,IAAI,CACL,CAAC;YACF,iBAAiB,CAAC,mBAAmB,CACnC,eAAe,EACf,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,iBAAiB,CAAC,EACrD,IAAI,CACL,CAAC;QACJ,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,wDAAwD;QACxD,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC5C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC7C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,IAAI,CAAC,2BAA2B,EAChC,SAAS,CACV,CAAC;YACF,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;QACtE,CAAC;IACH,CAAC;IAoFD,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACjD,OAAO,CACL,EAAC,IAAI,qDACH,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,KAAK,EAAE;gBACL,CAAC,uBAAuB,CAAC,EAAE,CAAC,CAAC,QAAQ;gBACrC,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C,mBACc,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAE1C,+DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC,EAC5C,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,SAAS,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,KAAK,EAAE;oBACL,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;oBACjB,CAAC,gBAAgB,CAAC,EAAE,IAAI;oBACxB,CAAC,qBAAqB,CAAC,EAAE,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ;iBACjD,mBACc,GAAG,QAAQ,EAAE,mBACd,uBAAuB,EACrC,OAAO,EAAE,IAAI,CAAC,cAAc;gBAE3B,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAC9B,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP;gBACD,sEAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,gBAAgB,IAC3D,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAChC,YAAM,IAAI,EAAC,SAAS,GAAG,CACxB,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,OAAO,CACb,CACa;gBAChB,6DACE,KAAK,EAAE;wBACL,CAAC,gBAAgB,CAAC,EAAE,IAAI;wBACxB,CAAC,0BAA0B,CAAC,EAAE,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ;qBACtD,iBACW,MAAM,EAClB,SAAS,EAAE,WAAW,GACtB,CACK;YACT,4DACE,KAAK,EAAE;oBACL,CAAC,kBAAkB,CAAC,EAAE,IAAI;iBAC3B,qBACgB,GAAG,IAAI,CAAC,WAAW,SAAS,EAC7C,IAAI,EAAC,QAAQ,iBACA,GAAG,CAAC,QAAQ,EAAE,EAC3B,EAAE,EAAC,uBAAuB,EAC1B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;gBAE1C,4DAAK,KAAK,EAAC,wBAAwB,IAChC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,qBAAe,OAAO,EAAC,MAAM,IAAE,IAAI,CAAC,OAAO,CAAiB,CAC7D,CAAC,CAAC,CAAC,CACF,eAAQ,CACT,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet accordionIds = 0;\nconst EXPANDED_CONTENT_OPENED_CLASS = \"expanded-content-opened\";\n\n/**\n * @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n */\n\n@Component({\n  tag: \"ic-accordion\",\n  styleUrl: \"ic-accordion.css\",\n  shadow: true,\n})\nexport class Accordion {\n  private accordionId = `ic-accordion-${accordionIds++}`;\n  private expandedContentEl?: HTMLDivElement;\n  private accordionBtnHeading?: HTMLButtonElement;\n  private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n  @Element() el: HTMLIcAccordionElement;\n\n  /**\n   * If `true`, the accordion will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * If `true`, the accordion appears expanded.\n   */\n  @Prop({ mutable: true }) expanded?: boolean = false;\n\n  /**\n   * The section header outlining section content.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the accordion.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"medium\";\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() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * @internal Emitted when accordion is clicked.\n   */\n  @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n  // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n  @Watch(\"expanded\")\n  handleExpandedWatch(): void {\n    this.animateExpandedContent();\n  }\n\n  /**\n   * Sets focus on accordion heading.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.accordionBtnHeading?.focus();\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  disconnectedCallback(): void {\n    const expandedContentEl = this.expandedContentEl;\n    if (expandedContentEl) {\n      expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.setExpandedContentStyle(e, expandedContentEl),\n        true\n      );\n      expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.hideExpandedContent(e, expandedContentEl),\n        true\n      );\n    }\n  }\n\n  componentDidLoad(): void {\n    // So accordion opens by default if expanded set to true\n    if (this.expanded && this.expandedContentEl) {\n      this.expandedContentEl.style.height = \"auto\";\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n      this.expandedContentEl.classList.add(EXPANDED_CONTENT_OPENED_CLASS);\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n    this.accordionClicked.emit({ id: this.accordionId });\n  };\n\n  // Set accordion animation\n  private setAccordionAnimation = (\n    el: HTMLElement,\n    duration: string,\n    property: string,\n    delay: string\n  ) => {\n    el.style.transitionDuration = `${duration}ms`;\n    el.style.transitionProperty = property;\n    el.style.transitionDelay = delay;\n  };\n\n  private setExpandedContentStyle = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n      expandedContent.classList.add(EXPANDED_CONTENT_OPENED_CLASS);\n      expandedContent.style.height = \"auto\";\n    }\n  };\n\n  private hideExpandedContent = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n      expandedContent.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"hidden\"\n      );\n    }\n  };\n\n  private animateExpandedContent = () => {\n    if (this.expandedContentEl) {\n      const expandedContentEl = this.expandedContentEl;\n      const elementHeight = expandedContentEl.scrollHeight;\n      if (elementHeight > 0 && this.expanded) {\n        expandedContentEl.style.setProperty(\n          this.CONTENT_VISIBILITY_PROPERTY,\n          \"visible\"\n        );\n        expandedContentEl.style.height = `${elementHeight}px`;\n        this.setAccordionAnimation(\n          expandedContentEl,\n          \"300\",\n          \"height\",\n          \"ease-out\"\n        );\n\n        expandedContentEl.addEventListener(\n          \"transitionend\",\n          (e: TransitionEvent) => {\n            this.setExpandedContentStyle(e, expandedContentEl);\n          }\n        );\n      } else if (!this.expanded) {\n        const expandedContentEl = this.expandedContentEl;\n        expandedContentEl.style.height = `${expandedContentEl.scrollHeight}px`;\n        if (expandedContentEl.scrollHeight > 0 && !this.expanded) {\n          expandedContentEl.style.height = \"0\";\n          this.setAccordionAnimation(\n            expandedContentEl,\n            \"300\",\n            \"height\",\n            \"ease-in\"\n          );\n          expandedContentEl.classList.remove(EXPANDED_CONTENT_OPENED_CLASS);\n        }\n        expandedContentEl.addEventListener(\"transitionend\", (e) => {\n          this.hideExpandedContent(e, expandedContentEl);\n        });\n      }\n    }\n  };\n\n  render() {\n    const { size, disabled, expanded, theme } = this;\n    return (\n      <Host\n        id={this.accordionId}\n        class={{\n          [\"ic-accordion-disabled\"]: !!disabled,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n      >\n        <button\n          ref={(el) => (this.accordionBtnHeading = el)}\n          id={`${this.accordionId}-button`}\n          disabled={disabled}\n          tabindex={disabled ? -1 : 0}\n          class={{\n            [`${size}`]: true,\n            [\"section-button\"]: true,\n            [\"section-button-open\"]: !!expanded && !disabled,\n          }}\n          aria-expanded={`${expanded}`}\n          aria-controls=\"expanded-content-area\"\n          onClick={this.toggleExpanded}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n            {isSlotUsed(this.el, \"heading\") ? (\n              <slot name=\"heading\" />\n            ) : (\n              this.heading\n            )}\n          </ic-typography>\n          <span\n            class={{\n              [\"expand-chevron\"]: true,\n              [\"content-expanded-chevron\"]: !!expanded && !disabled,\n            }}\n            aria-hidden=\"true\"\n            innerHTML={chevronIcon}\n          />\n        </button>\n        <div\n          class={{\n            [\"expanded-content\"]: true,\n          }}\n          aria-labelledby={`${this.accordionId}-button`}\n          role=\"region\"\n          aria-hidden={`${!expanded}`}\n          id=\"expanded-content-area\"\n          ref={(el) => (this.expandedContentEl = el)}\n        >\n          <div class=\"expanded-content-inner\">\n            {this.message ? (\n              <ic-typography variant=\"body\">{this.message}</ic-typography>\n            ) : (\n              <slot />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-accordion.js","sourceRoot":"","sources":["../../../src/components/ic-accordion/ic-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet accordionIds = 0;\nconst EXPANDED_CONTENT_OPENED_CLASS = \"expanded-content-opened\";\n\n/**\n * @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n */\n\n@Component({\n  tag: \"ic-accordion\",\n  styleUrl: \"ic-accordion.css\",\n  shadow: true,\n})\nexport class Accordion {\n  private accordionId = `ic-accordion-${accordionIds++}`;\n  private expandedContentEl?: HTMLDivElement;\n  private accordionBtnHeading?: HTMLButtonElement;\n  private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n  @Element() el: HTMLIcAccordionElement;\n\n  /**\n   * If `true`, the accordion will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * If `true`, the accordion appears expanded.\n   */\n  @Prop({ mutable: true }) expanded?: boolean = false;\n\n  /**\n   * The section header outlining section content.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the accordion.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"medium\";\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() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * @internal Emitted when accordion is clicked.\n   */\n  @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n  // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n  @Watch(\"expanded\")\n  handleExpandedWatch(): void {\n    this.animateExpandedContent();\n  }\n\n  /**\n   * Sets focus on accordion heading.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.accordionBtnHeading?.focus();\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  disconnectedCallback(): void {\n    const expandedContentEl = this.expandedContentEl;\n    if (expandedContentEl) {\n      expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.setExpandedContentStyle(e, expandedContentEl),\n        true\n      );\n      expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.hideExpandedContent(e, expandedContentEl),\n        true\n      );\n    }\n  }\n\n  componentDidLoad(): void {\n    // So accordion opens by default if expanded set to true\n    if (this.expanded && this.expandedContentEl) {\n      this.expandedContentEl.style.height = \"auto\";\n      this.expandedContentEl.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"visible\"\n      );\n      this.expandedContentEl.classList.add(EXPANDED_CONTENT_OPENED_CLASS);\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n    this.accordionClicked.emit({ id: this.accordionId });\n  };\n\n  // Set accordion animation\n  private setAccordionAnimation = (\n    el: HTMLElement,\n    duration: string,\n    property: string,\n    delay: string\n  ) => {\n    if (!window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n      el.style.transitionDuration = `${duration}ms`;\n      el.style.transitionProperty = property;\n      el.style.transitionDelay = delay;\n    } else {\n      el.style.transitionDuration = \"0ms\";\n      el.style.transitionProperty = \"none\";\n      el.style.transitionDelay = \"0ms\";\n    }\n  };\n\n  private setExpandedContentStyle = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n      expandedContent.classList.add(EXPANDED_CONTENT_OPENED_CLASS);\n      expandedContent.style.height = \"auto\";\n    }\n  };\n\n  private hideExpandedContent = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n      expandedContent.style.setProperty(\n        this.CONTENT_VISIBILITY_PROPERTY,\n        \"hidden\"\n      );\n    }\n  };\n\n  private animateExpandedContent = () => {\n    if (this.expandedContentEl) {\n      const expandedContentEl = this.expandedContentEl;\n      const elementHeight = expandedContentEl.scrollHeight;\n      if (elementHeight > 0 && this.expanded) {\n        expandedContentEl.style.setProperty(\n          this.CONTENT_VISIBILITY_PROPERTY,\n          \"visible\"\n        );\n        expandedContentEl.style.height = `${elementHeight}px`;\n        this.setAccordionAnimation(\n          expandedContentEl,\n          \"300\",\n          \"height\",\n          \"ease-out\"\n        );\n\n        expandedContentEl.addEventListener(\n          \"transitionend\",\n          (e: TransitionEvent) => {\n            this.setExpandedContentStyle(e, expandedContentEl);\n          }\n        );\n      } else if (!this.expanded) {\n        const expandedContentEl = this.expandedContentEl;\n        expandedContentEl.style.height = `${expandedContentEl.scrollHeight}px`;\n        if (expandedContentEl.scrollHeight > 0 && !this.expanded) {\n          expandedContentEl.style.height = \"0\";\n          this.setAccordionAnimation(\n            expandedContentEl,\n            \"300\",\n            \"height\",\n            \"ease-in\"\n          );\n          expandedContentEl.classList.remove(EXPANDED_CONTENT_OPENED_CLASS);\n        }\n        expandedContentEl.addEventListener(\"transitionend\", (e) => {\n          this.hideExpandedContent(e, expandedContentEl);\n        });\n      }\n    }\n  };\n\n  render() {\n    const { size, disabled, expanded, theme } = this;\n    return (\n      <Host\n        id={this.accordionId}\n        class={{\n          [\"ic-accordion-disabled\"]: !!disabled,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n      >\n        <button\n          ref={(el) => (this.accordionBtnHeading = el)}\n          id={`${this.accordionId}-button`}\n          disabled={disabled}\n          tabindex={disabled ? -1 : 0}\n          class={{\n            [`${size}`]: true,\n            [\"section-button\"]: true,\n            [\"section-button-open\"]: !!expanded && !disabled,\n          }}\n          aria-expanded={`${expanded}`}\n          aria-controls=\"expanded-content-area\"\n          onClick={this.toggleExpanded}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n            {isSlotUsed(this.el, \"heading\") ? (\n              <slot name=\"heading\" />\n            ) : (\n              this.heading\n            )}\n          </ic-typography>\n          <span\n            class={{\n              [\"expand-chevron\"]: true,\n              [\"content-expanded-chevron\"]: !!expanded && !disabled,\n            }}\n            aria-hidden=\"true\"\n            innerHTML={chevronIcon}\n          />\n        </button>\n        <div\n          class={{\n            [\"expanded-content\"]: true,\n          }}\n          aria-labelledby={`${this.accordionId}-button`}\n          role=\"region\"\n          aria-hidden={`${!expanded}`}\n          id=\"expanded-content-area\"\n          ref={(el) => (this.expandedContentEl = el)}\n        >\n          <div class=\"expanded-content-inner\">\n            {this.message ? (\n              <ic-typography variant=\"body\">{this.message}</ic-typography>\n            ) : (\n              <slot />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-back-to-top/ic-back-to-top.css

@@ -547,3 +547,10 @@ ic-button.by-footer {
     padding-left: calc(var(--ic-space-xs) - var(--ic-space-xxxs));
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  ic-button,
+  ic-button.show {
+    transition: none;
+  }
+}

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

@@ -214,3 +214,9 @@
     transform: scale(0);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.ic-badge-hide) {
+    transition: none;
+  }
+}

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.css

@@ -36,3 +36,11 @@
 :host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade) {
   opacity: 1;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.ic-breadcrumb-group-collapsed)
+    ol
+    ::slotted(ic-breadcrumb.visuallyhidden) {
+    transition: none;
+  }
+}

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

@@ -1654,6 +1654,13 @@ slot[name="router-item"]::slotted(a) {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .button,
+  ::slotted(a) {
+    transition: none;
+  }
+}
+
 /** Pagination **/
 
 :host(.flip) ::slotted(svg) {