@govtechsg/sgds-web-component 1.3.0 → 1.3.1

package/components/Accordion/sgds-accordion-item.cjs.js

@@ -40,8 +40,8 @@ class SgdsAccordionItem extends sgdsElement["default"] {
         this.open = false;
     }
     firstUpdated() {
-        this.body.hidden = !this.open;
-        this.body.style.height = this.open ? "auto" : "0";
+        if (!this.open)
+            this.body.classList.add("hidden");
     }
     handleSummaryClick() {
         if (this.open) {
@@ -80,10 +80,9 @@ class SgdsAccordionItem extends sgdsElement["default"] {
                 return;
             }
             await animate.stopAnimations(this.body);
-            this.body.hidden = false;
+            this.body.classList.remove("hidden");
             const { keyframes, options } = animationRegistry.getAnimation(this, "accordion.show");
             await animate.animateTo(this.body, animate.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-            this.body.style.height = "auto";
             this.emit("sgds-after-show");
         }
         else {
@@ -95,9 +94,13 @@ class SgdsAccordionItem extends sgdsElement["default"] {
             }
             await animate.stopAnimations(this.body);
             const { keyframes, options } = animationRegistry.getAnimation(this, "accordion.hide");
+            const animationDuration = options.duration;
+            // Workaround to fix GSIB delay after animateTo.
+            //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added
+            setTimeout(() => {
+                this.body.classList.add("hidden");
+            }, animationDuration - 20);
             await animate.animateTo(this.body, animate.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-            this.body.hidden = true;
-            this.body.style.height = "auto";
             this.emit("sgds-after-hide");
         }
     }
@@ -123,7 +126,8 @@ class SgdsAccordionItem extends sgdsElement["default"] {
         part="base"
         class=${classMap_js.classMap({
             "sgds accordion-item": true,
-            [`${this.accordionItemClasses}`]: this.accordionItemClasses
+            [`${this.accordionItemClasses}`]: this.accordionItemClasses,
+            show: this.open
         })}
       >
         <button
@@ -140,8 +144,25 @@ class SgdsAccordionItem extends sgdsElement["default"] {
           @keydown=${this.handleSummaryKeyDown}
         >
           <slot name="accordion-header"></slot>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-chevron-down"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+            />
+          </svg>
         </button>
-        <div class="accordion-body">
+        <div
+          class=${classMap_js.classMap({
+            "accordion-body": true
+        })}
+        >
           <slot name="accordion-content" class="accordion-content" role="region" aria-labelledby="header"></slot>
         </div>
       </div>
@@ -172,14 +193,14 @@ animationRegistry.setDefaultAnimation("accordion.show", {
         { height: "0", opacity: "0" },
         { height: "auto", opacity: "1" }
     ],
-    options: { duration: 200, easing: "ease-in-out" }
+    options: { duration: 350, easing: "ease-in-out" }
 });
 animationRegistry.setDefaultAnimation("accordion.hide", {
     keyframes: [
         { height: "auto", opacity: "1" },
         { height: "0", opacity: "0" }
     ],
-    options: { duration: 200, easing: "ease-in-out" }
+    options: { duration: 350, easing: "ease-in-out" }
 });
 
 exports.SgdsAccordionItem = SgdsAccordionItem;

package/components/Accordion/sgds-accordion-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-accordion-item.cjs.js","sources":["../../../src/components/Accordion/sgds-accordion-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport styles from \"./sgds-accordion-item.scss\";\n\n/**\n *\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @csspart base - The accordion-item base wrapper.\n * @csspart header - The accordion-item button header.\n * @csspart content - The accordion-item content.\n *\n * @slot accordion-header - The accordion-item button header slot.\n * @slot accordion-content - The accordion-item content slot.\n *\n * @cssprop --accordion-item-padding-y - The top and bottom padding for the container of accordion item's content\n * @cssprop --accordion-item-padding-x - The right and left padding for the container of accordion item's content\n * @cssprop --accordion-item-border-radius - The border radius of the accordion item\n * @cssprop --accordion-item-font-weight - The font weight of accordion-button when it is not collapsed\n * @cssprop --accordion-item-line-height - The line height of accordion\n */\nexport class SgdsAccordionItem extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\n  /** @internal */\n  @query(\".accordion-item\") accordion: HTMLElement;\n  /** @internal */\n  @query(\".accordion-button\") header: HTMLElement;\n  /** @internal */\n  @query(\".accordion-body\") body: HTMLElement;\n\n  /** Controls whether accordion-item is open or close */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Optional for accordion item. Can be used to insert any utility classes such as `me-auto` */\n  @property({ reflect: true }) accordionItemClasses: string;\n\n  firstUpdated() {\n    this.body.hidden = !this.open;\n    this.body.style.height = this.open ? \"auto\" : \"0\";\n  }\n\n  private handleSummaryClick() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"accordion.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (slHide.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"accordion.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /** Shows the accordion. */\n  public async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the accordion */\n  public async hide() {\n    if (!this.open) {\n      return;\n    }\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          \"sgds accordion-item\": true,\n          [`${this.accordionItemClasses}`]: this.accordionItemClasses\n        })}\n      >\n        <button\n          class=${classMap({\n            \"accordion-button\": true,\n            collapsed: !this.open\n          })}\n          part=\"header\"\n          role=\"button\"\n          aria-expanded=${this.open ? \"true\" : \"false\"}\n          aria-controls=\"content\"\n          tabindex=\"0\"\n          @click=${this.handleSummaryClick}\n          @keydown=${this.handleSummaryKeyDown}\n        >\n          <slot name=\"accordion-header\"></slot>\n        </button>\n        <div class=\"accordion-body\">\n          <slot name=\"accordion-content\" class=\"accordion-content\" role=\"region\" aria-labelledby=\"header\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"accordion.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"accordion.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsAccordionItem;\n"],"names":["SgdsElement","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","html","classMap","styles","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}
+{"version":3,"file":"sgds-accordion-item.cjs.js","sources":["../../../src/components/Accordion/sgds-accordion-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport styles from \"./sgds-accordion-item.scss\";\n\n/**\n *\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @csspart base - The accordion-item base wrapper.\n * @csspart header - The accordion-item button header.\n * @csspart content - The accordion-item content.\n *\n * @slot accordion-header - The accordion-item button header slot.\n * @slot accordion-content - The accordion-item content slot.\n *\n * @cssprop --accordion-item-padding-y - The top and bottom padding for the container of accordion item's content\n * @cssprop --accordion-item-padding-x - The right and left padding for the container of accordion item's content\n * @cssprop --accordion-item-border-radius - The border radius of the accordion item\n * @cssprop --accordion-item-font-weight - The font weight of accordion-button when it is not collapsed\n * @cssprop --accordion-item-line-height - The line height of accordion\n */\nexport class SgdsAccordionItem extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\n  /** @internal */\n  @query(\".accordion-item\") accordion: HTMLElement;\n  /** @internal */\n  @query(\".accordion-button\") header: HTMLElement;\n  /** @internal */\n  @query(\".accordion-body\") body: HTMLElement;\n\n  /** Controls whether accordion-item is open or close */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Optional for accordion item. Can be used to insert any utility classes such as `me-auto` */\n  @property({ reflect: true }) accordionItemClasses: string;\n\n  firstUpdated() {\n    if (!this.open) this.body.classList.add(\"hidden\");\n  }\n\n  private handleSummaryClick() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.classList.remove(\"hidden\");\n\n      const { keyframes, options } = getAnimation(this, \"accordion.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (slHide.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"accordion.hide\");\n      const animationDuration = options.duration as number;\n      // Workaround to fix GSIB delay after animateTo.\n      //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added\n      setTimeout(() => {\n        this.body.classList.add(\"hidden\");\n      }, animationDuration - 20);\n\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /** Shows the accordion. */\n  public async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the accordion */\n  public async hide() {\n    if (!this.open) {\n      return;\n    }\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          \"sgds accordion-item\": true,\n          [`${this.accordionItemClasses}`]: this.accordionItemClasses,\n          show: this.open\n        })}\n      >\n        <button\n          class=${classMap({\n            \"accordion-button\": true,\n            collapsed: !this.open\n          })}\n          part=\"header\"\n          role=\"button\"\n          aria-expanded=${this.open ? \"true\" : \"false\"}\n          aria-controls=\"content\"\n          tabindex=\"0\"\n          @click=${this.handleSummaryClick}\n          @keydown=${this.handleSummaryKeyDown}\n        >\n          <slot name=\"accordion-header\"></slot>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-chevron-down\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </button>\n        <div\n          class=${classMap({\n            \"accordion-body\": true\n          })}\n        >\n          <slot name=\"accordion-content\" class=\"accordion-content\" role=\"region\" aria-labelledby=\"header\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"accordion.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"accordion.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nexport default SgdsAccordionItem;\n"],"names":["SgdsElement","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","html","classMap","styles","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}

package/components/Accordion/sgds-accordion-item.cjs2.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){box-shadow:none;color:var(--accordion-active-color);font-weight:var(--accordion-item-font-weight)}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}`;
+var css_248z = lit.css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){color:var(--accordion-active-color)}.accordion-button svg.bi-chevron-down{height:1.3rem;margin-left:auto;transition:transform .2s ease-in-out;width:1.3rem}.accordion-button:not(.collapsed){box-shadow:none;font-weight:var(--accordion-item-font-weight)}.accordion-button:not(.collapsed) svg.bi-chevron-down{transform:rotate(-180deg)}.accordion-button:after{content:unset}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}.hidden{display:none}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=sgds-accordion-item.cjs2.js.map

package/components/Accordion/sgds-accordion-item.js

@@ -36,8 +36,8 @@ class SgdsAccordionItem extends SgdsElement {
         this.open = false;
     }
     firstUpdated() {
-        this.body.hidden = !this.open;
-        this.body.style.height = this.open ? "auto" : "0";
+        if (!this.open)
+            this.body.classList.add("hidden");
     }
     handleSummaryClick() {
         if (this.open) {
@@ -76,10 +76,9 @@ class SgdsAccordionItem extends SgdsElement {
                 return;
             }
             await stopAnimations(this.body);
-            this.body.hidden = false;
+            this.body.classList.remove("hidden");
             const { keyframes, options } = getAnimation(this, "accordion.show");
             await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-            this.body.style.height = "auto";
             this.emit("sgds-after-show");
         }
         else {
@@ -91,9 +90,13 @@ class SgdsAccordionItem extends SgdsElement {
             }
             await stopAnimations(this.body);
             const { keyframes, options } = getAnimation(this, "accordion.hide");
+            const animationDuration = options.duration;
+            // Workaround to fix GSIB delay after animateTo.
+            //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added
+            setTimeout(() => {
+                this.body.classList.add("hidden");
+            }, animationDuration - 20);
             await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-            this.body.hidden = true;
-            this.body.style.height = "auto";
             this.emit("sgds-after-hide");
         }
     }
@@ -119,7 +122,8 @@ class SgdsAccordionItem extends SgdsElement {
         part="base"
         class=${classMap({
             "sgds accordion-item": true,
-            [`${this.accordionItemClasses}`]: this.accordionItemClasses
+            [`${this.accordionItemClasses}`]: this.accordionItemClasses,
+            show: this.open
         })}
       >
         <button
@@ -136,8 +140,25 @@ class SgdsAccordionItem extends SgdsElement {
           @keydown=${this.handleSummaryKeyDown}
         >
           <slot name="accordion-header"></slot>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-chevron-down"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+            />
+          </svg>
         </button>
-        <div class="accordion-body">
+        <div
+          class=${classMap({
+            "accordion-body": true
+        })}
+        >
           <slot name="accordion-content" class="accordion-content" role="region" aria-labelledby="header"></slot>
         </div>
       </div>
@@ -168,14 +189,14 @@ setDefaultAnimation("accordion.show", {
         { height: "0", opacity: "0" },
         { height: "auto", opacity: "1" }
     ],
-    options: { duration: 200, easing: "ease-in-out" }
+    options: { duration: 350, easing: "ease-in-out" }
 });
 setDefaultAnimation("accordion.hide", {
     keyframes: [
         { height: "auto", opacity: "1" },
         { height: "0", opacity: "0" }
     ],
-    options: { duration: 200, easing: "ease-in-out" }
+    options: { duration: 350, easing: "ease-in-out" }
 });
 
 export { SgdsAccordionItem, SgdsAccordionItem as default };

package/components/Accordion/sgds-accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-accordion-item.js","sources":["../../../src/components/Accordion/sgds-accordion-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport styles from \"./sgds-accordion-item.scss\";\n\n/**\n *\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @csspart base - The accordion-item base wrapper.\n * @csspart header - The accordion-item button header.\n * @csspart content - The accordion-item content.\n *\n * @slot accordion-header - The accordion-item button header slot.\n * @slot accordion-content - The accordion-item content slot.\n *\n * @cssprop --accordion-item-padding-y - The top and bottom padding for the container of accordion item's content\n * @cssprop --accordion-item-padding-x - The right and left padding for the container of accordion item's content\n * @cssprop --accordion-item-border-radius - The border radius of the accordion item\n * @cssprop --accordion-item-font-weight - The font weight of accordion-button when it is not collapsed\n * @cssprop --accordion-item-line-height - The line height of accordion\n */\nexport class SgdsAccordionItem extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\n  /** @internal */\n  @query(\".accordion-item\") accordion: HTMLElement;\n  /** @internal */\n  @query(\".accordion-button\") header: HTMLElement;\n  /** @internal */\n  @query(\".accordion-body\") body: HTMLElement;\n\n  /** Controls whether accordion-item is open or close */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Optional for accordion item. Can be used to insert any utility classes such as `me-auto` */\n  @property({ reflect: true }) accordionItemClasses: string;\n\n  firstUpdated() {\n    this.body.hidden = !this.open;\n    this.body.style.height = this.open ? \"auto\" : \"0\";\n  }\n\n  private handleSummaryClick() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"accordion.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (slHide.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"accordion.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /** Shows the accordion. */\n  public async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the accordion */\n  public async hide() {\n    if (!this.open) {\n      return;\n    }\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          \"sgds accordion-item\": true,\n          [`${this.accordionItemClasses}`]: this.accordionItemClasses\n        })}\n      >\n        <button\n          class=${classMap({\n            \"accordion-button\": true,\n            collapsed: !this.open\n          })}\n          part=\"header\"\n          role=\"button\"\n          aria-expanded=${this.open ? \"true\" : \"false\"}\n          aria-controls=\"content\"\n          tabindex=\"0\"\n          @click=${this.handleSummaryClick}\n          @keydown=${this.handleSummaryKeyDown}\n        >\n          <slot name=\"accordion-header\"></slot>\n        </button>\n        <div class=\"accordion-body\">\n          <slot name=\"accordion-content\" class=\"accordion-content\" role=\"region\" aria-labelledby=\"header\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"accordion.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"accordion.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsAccordionItem;\n"],"names":["styles"],"mappings":"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"}
+{"version":3,"file":"sgds-accordion-item.js","sources":["../../../src/components/Accordion/sgds-accordion-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport styles from \"./sgds-accordion-item.scss\";\n\n/**\n *\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @csspart base - The accordion-item base wrapper.\n * @csspart header - The accordion-item button header.\n * @csspart content - The accordion-item content.\n *\n * @slot accordion-header - The accordion-item button header slot.\n * @slot accordion-content - The accordion-item content slot.\n *\n * @cssprop --accordion-item-padding-y - The top and bottom padding for the container of accordion item's content\n * @cssprop --accordion-item-padding-x - The right and left padding for the container of accordion item's content\n * @cssprop --accordion-item-border-radius - The border radius of the accordion item\n * @cssprop --accordion-item-font-weight - The font weight of accordion-button when it is not collapsed\n * @cssprop --accordion-item-line-height - The line height of accordion\n */\nexport class SgdsAccordionItem extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\n  /** @internal */\n  @query(\".accordion-item\") accordion: HTMLElement;\n  /** @internal */\n  @query(\".accordion-button\") header: HTMLElement;\n  /** @internal */\n  @query(\".accordion-body\") body: HTMLElement;\n\n  /** Controls whether accordion-item is open or close */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Optional for accordion item. Can be used to insert any utility classes such as `me-auto` */\n  @property({ reflect: true }) accordionItemClasses: string;\n\n  firstUpdated() {\n    if (!this.open) this.body.classList.add(\"hidden\");\n  }\n\n  private handleSummaryClick() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.classList.remove(\"hidden\");\n\n      const { keyframes, options } = getAnimation(this, \"accordion.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (slHide.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"accordion.hide\");\n      const animationDuration = options.duration as number;\n      // Workaround to fix GSIB delay after animateTo.\n      //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added\n      setTimeout(() => {\n        this.body.classList.add(\"hidden\");\n      }, animationDuration - 20);\n\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /** Shows the accordion. */\n  public async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the accordion */\n  public async hide() {\n    if (!this.open) {\n      return;\n    }\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          \"sgds accordion-item\": true,\n          [`${this.accordionItemClasses}`]: this.accordionItemClasses,\n          show: this.open\n        })}\n      >\n        <button\n          class=${classMap({\n            \"accordion-button\": true,\n            collapsed: !this.open\n          })}\n          part=\"header\"\n          role=\"button\"\n          aria-expanded=${this.open ? \"true\" : \"false\"}\n          aria-controls=\"content\"\n          tabindex=\"0\"\n          @click=${this.handleSummaryClick}\n          @keydown=${this.handleSummaryKeyDown}\n        >\n          <slot name=\"accordion-header\"></slot>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-chevron-down\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </button>\n        <div\n          class=${classMap({\n            \"accordion-body\": true\n          })}\n        >\n          <slot name=\"accordion-content\" class=\"accordion-content\" role=\"region\" aria-labelledby=\"header\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"accordion.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"accordion.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nexport default SgdsAccordionItem;\n"],"names":["styles"],"mappings":"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"}

package/components/Accordion/sgds-accordion-item2.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){box-shadow:none;color:var(--accordion-active-color);font-weight:var(--accordion-item-font-weight)}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}`;
+var css_248z = css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){color:var(--accordion-active-color)}.accordion-button svg.bi-chevron-down{height:1.3rem;margin-left:auto;transition:transform .2s ease-in-out;width:1.3rem}.accordion-button:not(.collapsed){box-shadow:none;font-weight:var(--accordion-item-font-weight)}.accordion-button:not(.collapsed) svg.bi-chevron-down{transform:rotate(-180deg)}.accordion-button:after{content:unset}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}.hidden{display:none}`;
 
 export { css_248z as default };
 //# sourceMappingURL=sgds-accordion-item2.js.map

package/components/Accordion/sgds-accordion.cjs.js

@@ -9,6 +9,7 @@ var classMap_js = require('lit/directives/class-map.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
 var sgdsAccordion = require('./sgds-accordion.cjs2.js');
 
+const VALID_KEYS = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
 /**
  * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`
  * @slot default - slot for accordion-item
@@ -43,10 +44,8 @@ class SgdsAccordion extends sgdsElement["default"] {
             }
         });
     }
-    async onToggle(event) {
-        // Let the event pass through the DOM so that it can be
-        // prevented from the outside if a user so desires.
-        if (this.allowMultiple || event.defaultPrevented) {
+    async _onToggle(event) {
+        if (this.allowMultiple) {
             // No toggling when `allowMultiple` or the user prevents it.
             return;
         }
@@ -63,6 +62,11 @@ class SgdsAccordion extends sgdsElement["default"] {
             }
         });
     }
+    async _onKeyboardToggle(event) {
+        if (!VALID_KEYS.includes(event.key))
+            return;
+        return this._onToggle(event);
+    }
     render() {
         return lit.html `
       <div
@@ -71,7 +75,7 @@ class SgdsAccordion extends sgdsElement["default"] {
             [`${this.accordionClasses}`]: this.accordionClasses
         })}
       >
-        <slot @click=${this.onToggle}></slot>
+        <slot @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>
       </div>
     `;
     }

package/components/Accordion/sgds-accordion.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-accordion.cjs.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport styles from \"./sgds-accordion.scss\";\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n *\n * @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state\n *\n */\n\nexport class SgdsAccordion extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\n\n  /** Allows multiple accordion items to be opened at the same time */\n  @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n  /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n  @property({ reflect: true }) accordionClasses: string;\n\n  /** @internal */\n  @queryAssignedNodes()\n  private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n  /** @internal */\n  get items(): SgdsAccordionItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsAccordionItem[];\n  }\n\n  firstUpdated() {\n    const items = [...this.items] as SgdsAccordionItem[];\n    items.forEach((item, index) => {\n      if (items.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case items.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (this.allowMultiple || event.defaultPrevented) {\n      // No toggling when `allowMultiple` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsAccordionItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      // Covers all elements within accordion-item\n      if (!event.composedPath().includes(item)) {\n        // Close all the items that didn't dispatch the event.\n        item.open = false;\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sgds accordion\": true,\n          [`${this.accordionClasses}`]: this.accordionClasses\n        })}\n      >\n        <slot @click=${this.onToggle}></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsAccordion;\n"],"names":["SgdsElement","html","classMap","styles","__decorate","property","queryAssignedNodes"],"mappings":";;;;;;;;;;;AAOA;;;;;;AAMG;AAEG,MAAO,aAAc,SAAQA,sBAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;;QAI8C,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KAsEnE;;AA5DC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACpC,CAAC;KAC1B;IAED,YAAY,GAAA;QACV,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;QACrD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC5B,YAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACnB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;;;QAGzB,IAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,gBAAgB,EAAE;;YAEhD,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;AAErD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,gBAAgB,EAAE,IAAI;YACtB,CAAC,CAAA,EAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,gBAAgB;SACpD,CAAC,CAAA;;AAEa,qBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;KAE/B,CAAC;KACH;;AAxEM,aAAM,CAAA,MAAA,GAAG,CAACF,sBAAW,CAAC,MAAM,EAAEG,wBAAM,CAA9B,CAAgC;AAGDC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrCD,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9CD,gBAAA,CAAA;AADP,IAAAE,gCAAkB,EAAE;AACgC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-accordion.cjs.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport styles from \"./sgds-accordion.scss\";\n\nconst VALID_KEYS = [\"Enter\", \"ArrowUp\", \"ArrowLeft\", \"ArrowDown\", \"ArrowRight\"];\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n *\n * @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state\n *\n */\n\nexport class SgdsAccordion extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\n\n  /** Allows multiple accordion items to be opened at the same time */\n  @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n  /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n  @property({ reflect: true }) accordionClasses: string;\n\n  /** @internal */\n  @queryAssignedNodes()\n  private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n  /** @internal */\n  get items(): SgdsAccordionItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsAccordionItem[];\n  }\n\n  firstUpdated() {\n    const items = [...this.items] as SgdsAccordionItem[];\n    items.forEach((item, index) => {\n      if (items.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case items.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  private async _onToggle(event: Event) {\n    if (this.allowMultiple) {\n      // No toggling when `allowMultiple` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsAccordionItem[];\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      // Covers all elements within accordion-item\n      if (!event.composedPath().includes(item)) {\n        // Close all the items that didn't dispatch the event.\n        item.open = false;\n      }\n    });\n  }\n\n  private async _onKeyboardToggle(event: KeyboardEvent) {\n    if (!VALID_KEYS.includes(event.key)) return;\n    return this._onToggle(event);\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sgds accordion\": true,\n          [`${this.accordionClasses}`]: this.accordionClasses\n        })}\n      >\n        <slot @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsAccordion;\n"],"names":["SgdsElement","html","classMap","styles","__decorate","property","queryAssignedNodes"],"mappings":"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"}

package/components/Accordion/sgds-accordion.d.ts

@@ -18,7 +18,8 @@ export declare class SgdsAccordion extends SgdsElement {
     /** @internal */
     get items(): SgdsAccordionItem[];
     firstUpdated(): void;
-    onToggle(event: Event): Promise<void>;
+    private _onToggle;
+    private _onKeyboardToggle;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default SgdsAccordion;

package/components/Accordion/sgds-accordion.js

@@ -5,6 +5,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import SgdsElement from '../../base/sgds-element.js';
 import css_248z from './sgds-accordion2.js';
 
+const VALID_KEYS = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
 /**
  * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`
  * @slot default - slot for accordion-item
@@ -39,10 +40,8 @@ class SgdsAccordion extends SgdsElement {
             }
         });
     }
-    async onToggle(event) {
-        // Let the event pass through the DOM so that it can be
-        // prevented from the outside if a user so desires.
-        if (this.allowMultiple || event.defaultPrevented) {
+    async _onToggle(event) {
+        if (this.allowMultiple) {
             // No toggling when `allowMultiple` or the user prevents it.
             return;
         }
@@ -59,6 +58,11 @@ class SgdsAccordion extends SgdsElement {
             }
         });
     }
+    async _onKeyboardToggle(event) {
+        if (!VALID_KEYS.includes(event.key))
+            return;
+        return this._onToggle(event);
+    }
     render() {
         return html `
       <div
@@ -67,7 +71,7 @@ class SgdsAccordion extends SgdsElement {
             [`${this.accordionClasses}`]: this.accordionClasses
         })}
       >
-        <slot @click=${this.onToggle}></slot>
+        <slot @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>
       </div>
     `;
     }

package/components/Accordion/sgds-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-accordion.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport styles from \"./sgds-accordion.scss\";\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n *\n * @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state\n *\n */\n\nexport class SgdsAccordion extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\n\n  /** Allows multiple accordion items to be opened at the same time */\n  @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n  /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n  @property({ reflect: true }) accordionClasses: string;\n\n  /** @internal */\n  @queryAssignedNodes()\n  private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n  /** @internal */\n  get items(): SgdsAccordionItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsAccordionItem[];\n  }\n\n  firstUpdated() {\n    const items = [...this.items] as SgdsAccordionItem[];\n    items.forEach((item, index) => {\n      if (items.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case items.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (this.allowMultiple || event.defaultPrevented) {\n      // No toggling when `allowMultiple` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsAccordionItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      // Covers all elements within accordion-item\n      if (!event.composedPath().includes(item)) {\n        // Close all the items that didn't dispatch the event.\n        item.open = false;\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sgds accordion\": true,\n          [`${this.accordionClasses}`]: this.accordionClasses\n        })}\n      >\n        <slot @click=${this.onToggle}></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsAccordion;\n"],"names":["styles"],"mappings":";;;;;;;AAOA;;;;;;AAMG;AAEG,MAAO,aAAc,SAAQ,WAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;;QAI8C,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KAsEnE;;AA5DC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACpC,CAAC;KAC1B;IAED,YAAY,GAAA;QACV,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;QACrD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC5B,YAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACnB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;;;QAGzB,IAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,gBAAgB,EAAE;;YAEhD,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;AAErD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,gBAAgB,EAAE,IAAI;YACtB,CAAC,CAAA,EAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,gBAAgB;SACpD,CAAC,CAAA;;AAEa,qBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;KAE/B,CAAC;KACH;;AAxEM,aAAM,CAAA,MAAA,GAAG,CAAC,WAAW,CAAC,MAAM,EAAEA,QAAM,CAA9B,CAAgC;AAGD,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrC,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9C,UAAA,CAAA;AADP,IAAA,kBAAkB,EAAE;AACgC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-accordion.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport styles from \"./sgds-accordion.scss\";\n\nconst VALID_KEYS = [\"Enter\", \"ArrowUp\", \"ArrowLeft\", \"ArrowDown\", \"ArrowRight\"];\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n *\n * @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state\n *\n */\n\nexport class SgdsAccordion extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\n\n  /** Allows multiple accordion items to be opened at the same time */\n  @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n  /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n  @property({ reflect: true }) accordionClasses: string;\n\n  /** @internal */\n  @queryAssignedNodes()\n  private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n  /** @internal */\n  get items(): SgdsAccordionItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsAccordionItem[];\n  }\n\n  firstUpdated() {\n    const items = [...this.items] as SgdsAccordionItem[];\n    items.forEach((item, index) => {\n      if (items.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case items.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  private async _onToggle(event: Event) {\n    if (this.allowMultiple) {\n      // No toggling when `allowMultiple` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsAccordionItem[];\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      // Covers all elements within accordion-item\n      if (!event.composedPath().includes(item)) {\n        // Close all the items that didn't dispatch the event.\n        item.open = false;\n      }\n    });\n  }\n\n  private async _onKeyboardToggle(event: KeyboardEvent) {\n    if (!VALID_KEYS.includes(event.key)) return;\n    return this._onToggle(event);\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sgds accordion\": true,\n          [`${this.accordionClasses}`]: this.accordionClasses\n        })}\n      >\n        <slot @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsAccordion;\n"],"names":["styles"],"mappings":"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"}

package/components/index.umd.js

@@ -3310,6 +3310,7 @@
 
   var css_248z$E = css`:host{--accordion-active-color:var(--sgds-primary)}`;
 
+  const VALID_KEYS = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
   /**
    * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`
    * @slot default - slot for accordion-item
@@ -3344,10 +3345,8 @@
               }
           });
       }
-      async onToggle(event) {
-          // Let the event pass through the DOM so that it can be
-          // prevented from the outside if a user so desires.
-          if (this.allowMultiple || event.defaultPrevented) {
+      async _onToggle(event) {
+          if (this.allowMultiple) {
               // No toggling when `allowMultiple` or the user prevents it.
               return;
           }
@@ -3364,6 +3363,11 @@
               }
           });
       }
+      async _onKeyboardToggle(event) {
+          if (!VALID_KEYS.includes(event.key))
+              return;
+          return this._onToggle(event);
+      }
       render() {
           return html$1 `
       <div
@@ -3372,7 +3376,7 @@
             [`${this.accordionClasses}`]: this.accordionClasses
         })}
       >
-        <slot @click=${this.onToggle}></slot>
+        <slot @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>
       </div>
     `;
       }
@@ -3517,7 +3521,7 @@
       };
   }
 
-  var css_248z$D = css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){box-shadow:none;color:var(--accordion-active-color);font-weight:var(--accordion-item-font-weight)}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}`;
+  var css_248z$D = css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){color:var(--accordion-active-color)}.accordion-button svg.bi-chevron-down{height:1.3rem;margin-left:auto;transition:transform .2s ease-in-out;width:1.3rem}.accordion-button:not(.collapsed){box-shadow:none;font-weight:var(--accordion-item-font-weight)}.accordion-button:not(.collapsed) svg.bi-chevron-down{transform:rotate(-180deg)}.accordion-button:after{content:unset}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}.hidden{display:none}`;
 
   /**
    *
@@ -3546,8 +3550,8 @@
           this.open = false;
       }
       firstUpdated() {
-          this.body.hidden = !this.open;
-          this.body.style.height = this.open ? "auto" : "0";
+          if (!this.open)
+              this.body.classList.add("hidden");
       }
       handleSummaryClick() {
           if (this.open) {
@@ -3586,10 +3590,9 @@
                   return;
               }
               await stopAnimations(this.body);
-              this.body.hidden = false;
+              this.body.classList.remove("hidden");
               const { keyframes, options } = getAnimation(this, "accordion.show");
               await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-              this.body.style.height = "auto";
               this.emit("sgds-after-show");
           }
           else {
@@ -3601,9 +3604,13 @@
               }
               await stopAnimations(this.body);
               const { keyframes, options } = getAnimation(this, "accordion.hide");
+              const animationDuration = options.duration;
+              // Workaround to fix GSIB delay after animateTo.
+              //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added
+              setTimeout(() => {
+                  this.body.classList.add("hidden");
+              }, animationDuration - 20);
               await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-              this.body.hidden = true;
-              this.body.style.height = "auto";
               this.emit("sgds-after-hide");
           }
       }
@@ -3629,7 +3636,8 @@
         part="base"
         class=${classMap({
             "sgds accordion-item": true,
-            [`${this.accordionItemClasses}`]: this.accordionItemClasses
+            [`${this.accordionItemClasses}`]: this.accordionItemClasses,
+            show: this.open
         })}
       >
         <button
@@ -3646,8 +3654,25 @@
           @keydown=${this.handleSummaryKeyDown}
         >
           <slot name="accordion-header"></slot>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-chevron-down"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+            />
+          </svg>
         </button>
-        <div class="accordion-body">
+        <div
+          class=${classMap({
+            "accordion-body": true
+        })}
+        >
           <slot name="accordion-content" class="accordion-content" role="region" aria-labelledby="header"></slot>
         </div>
       </div>
@@ -3678,14 +3703,14 @@
           { height: "0", opacity: "0" },
           { height: "auto", opacity: "1" }
       ],
-      options: { duration: 200, easing: "ease-in-out" }
+      options: { duration: 350, easing: "ease-in-out" }
   });
   setDefaultAnimation("accordion.hide", {
       keyframes: [
           { height: "auto", opacity: "1" },
           { height: "0", opacity: "0" }
       ],
-      options: { duration: 200, easing: "ease-in-out" }
+      options: { duration: 350, easing: "ease-in-out" }
   });
 
   const appliedClassMixins = new WeakMap();