@govtechsg/sgds-web-component 3.0.0-rc.0 → 3.0.0-rc.2

package/internals/CloseButton/close-button.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{background-color:var(--sgds-default-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;height:var(--sgds-dimension-32);padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:before{background-color:currentColor;border-radius:var(--sgds-border-radius);box-sizing:content-box;color:var(--sgds-default-color);content:"";height:var(--sgds-icon-size-lg);left:50%;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--sgds-icon-size-lg)}.btn-close-light:before{color:var(--sgds-default-color-on-dark)}.btn-close-dark:before{color:var(--sgds-default-color-on-light)}.btn-close:hover{background-color:var(--sgds-default-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm:before{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{background-color:var(--sgds-default-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;height:var(--sgds-dimension-32);padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:before{background-color:currentColor;border-radius:var(--sgds-border-radius);box-sizing:content-box;color:var(--sgds-default-color);content:"";height:var(--sgds-icon-size-md);left:50%;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--sgds-icon-size-md)}.btn-close-light:before{color:var(--sgds-default-color-on-dark)}.btn-close-dark:before{color:var(--sgds-default-color-on-light)}.btn-close:hover{background-color:var(--sgds-default-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-default-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm:before{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=close-button.js.map

package/internals/CloseButton/sgds-close-button.js

@@ -42,7 +42,7 @@ class SgdsCloseButton extends SgdsElement {
     `;
     }
 }
-SgdsCloseButton.styles = [css_248z];
+SgdsCloseButton.styles = [...SgdsElement.styles, css_248z];
 __decorate([
     property({ type: String })
 ], SgdsCloseButton.prototype, "ariaLabel", void 0);

package/internals/CloseButton/sgds-close-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-close-button.js","sources":["../../../src/internals/CloseButton/sgds-close-button.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport closeButtonStyles from \"./close-button.css\";\nimport { classMap } from \"lit/directives/class-map.js\";\n/**\n * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.\n *\n * @cssprop --sgds-close-btn-border-radius - The border radius of close button border\n *\n */\nexport class SgdsCloseButton extends SgdsElement {\n  static styles = [closeButtonStyles];\n\n  @property({ type: String }) ariaLabel = \"Close button\";\n\n  /** Specifies a large or small button */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n  @property({ type: String, reflect: true }) variant: \"default\" | \"dark\" | \"light\" = \"default\";\n\n  private _handleClick() {\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    return;\n  };\n\n  render() {\n    return html`\n      <button\n        class=${classMap({\n          \"btn-close\": true,\n          [`btn-close-${this.size}`]: this.size,\n          \"btn-close-light\": this.variant === \"light\",\n          \"btn-close-dark\": this.variant === \"dark\"\n        })}\n        aria-label=${ifDefined(this.ariaLabel)}\n        @click=${this._handleClick}\n      ></button>\n    `;\n  }\n}\n\nexport default SgdsCloseButton;\n"],"names":["closeButtonStyles"],"mappings":";;;;;;;;AAMA;;;;;AAKG;AACG,MAAO,eAAgB,SAAQ,WAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;QAG8B,IAAS,CAAA,SAAA,GAAG,cAAc,CAAC;;QAGZ,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;QAEzB,IAAO,CAAA,OAAA,GAAiC,SAAS,CAAC;QAOrF,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,OAAO;AACT,SAAC,CAAC;KAgBH;IAvBS,YAAY,GAAA;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACpD;IAMD,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,CAAC,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI;AACrC,YAAA,iBAAiB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;AAC3C,YAAA,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;SAC1C,CAAC,CAAA;AACW,mBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAC7B,eAAA,EAAA,IAAI,CAAC,YAAY,CAAA;;KAE7B,CAAC;KACH;;AA/BM,eAAA,CAAA,MAAM,GAAG,CAACA,QAAiB,CAAC,CAAC;AAER,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAA4B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGZ,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEzB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmD,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-close-button.js","sources":["../../../src/internals/CloseButton/sgds-close-button.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport closeButtonStyles from \"./close-button.css\";\nimport { classMap } from \"lit/directives/class-map.js\";\n/**\n * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.\n *\n * @cssprop --sgds-close-btn-border-radius - The border radius of close button border\n *\n */\nexport class SgdsCloseButton extends SgdsElement {\n  static styles = [...SgdsElement.styles, closeButtonStyles];\n\n  @property({ type: String }) ariaLabel = \"Close button\";\n\n  /** Specifies a large or small button */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n  @property({ type: String, reflect: true }) variant: \"default\" | \"dark\" | \"light\" = \"default\";\n\n  private _handleClick() {\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    return;\n  };\n\n  render() {\n    return html`\n      <button\n        class=${classMap({\n          \"btn-close\": true,\n          [`btn-close-${this.size}`]: this.size,\n          \"btn-close-light\": this.variant === \"light\",\n          \"btn-close-dark\": this.variant === \"dark\"\n        })}\n        aria-label=${ifDefined(this.ariaLabel)}\n        @click=${this._handleClick}\n      ></button>\n    `;\n  }\n}\n\nexport default SgdsCloseButton;\n"],"names":["closeButtonStyles"],"mappings":";;;;;;;;AAMA;;;;;AAKG;AACG,MAAO,eAAgB,SAAQ,WAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;QAG8B,IAAS,CAAA,SAAA,GAAG,cAAc,CAAC;;QAGZ,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;QAEzB,IAAO,CAAA,OAAA,GAAiC,SAAS,CAAC;QAOrF,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,OAAO;AACT,SAAC,CAAC;KAgBH;IAvBS,YAAY,GAAA;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACpD;IAMD,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,CAAC,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI;AACrC,YAAA,iBAAiB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;AAC3C,YAAA,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;SAC1C,CAAC,CAAA;AACW,mBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAC7B,eAAA,EAAA,IAAI,CAAC,YAAY,CAAA;;KAE7B,CAAC;KACH;;AA/BM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAiB,CAA5C,CAA8C;AAE/B,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAA4B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGZ,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEzB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmD,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.0.0-rc.0",
+  "version": "3.0.0-rc.2",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/base/button.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--sgds-btn-font-weight:var(--sgds-font-weight-regular);--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-hover-bg:var(--sgds-primary-bg-emphasis);--sgds-btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-color:var(--sgds-default-color-on-dark)}:host([variant=outline]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color);--sgds-btn-border-width:var(--sgds-border-width-1);--sgds-btn-border-color:var(--sgds-primary-border-color)}:host([variant=ghost]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color)}:host([variant=danger]){--sgds-btn-bg:var(--sgds-danger-bg);--sgds-btn-hover-bg:var(--sgds-danger-bg-emphasis);--sgds-btn-color:var(--sgds-default-color-on-dark)}.btn{align-items:center;background-color:var(--sgds-btn-bg);border:1px solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-btn-border-radius);color:var(--sgds-default-color-on-dark);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}.btn-ghost,.btn-outline,.btn-primary{color:var(--sgds-btn-color)}.btn-outline{border:var(--sgds-btn-border-width) solid var(--sgds-btn-border-color)}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--sgds-btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--sgds-btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--sgds-btn-color);opacity:var(--sgds-opacity-50);pointer-events:none}.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}`;
+var css_248z = lit.css`:host{--sgds-btn-font-weight:var(--sgds-font-weight-regular);--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-hover-bg:var(--sgds-primary-bg-emphasis);--sgds-btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-color:var(--sgds-default-color-on-dark)}:host([variant=outline]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color);--sgds-btn-border-width:var(--sgds-border-width-1);--sgds-btn-border-color:var(--sgds-primary-border-color)}:host([variant=ghost]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color)}:host([variant=danger]){--sgds-btn-bg:var(--sgds-danger-bg);--sgds-btn-hover-bg:var(--sgds-danger-bg-emphasis);--sgds-btn-color:var(--sgds-default-color-on-dark)}.btn{align-items:center;background-color:var(--sgds-btn-bg);border:1px solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-btn-border-radius);color:var(--sgds-default-color-on-dark);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}.btn-ghost,.btn-outline,.btn-primary{color:var(--sgds-btn-color)}.btn-outline{border:var(--sgds-btn-border-width) solid var(--sgds-btn-border-color)}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--sgds-btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--sgds-btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--sgds-btn-color);opacity:var(--sgds-opacity-50);pointer-events:none}.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn slot::slotted(*){color:var(--sgds-btn-color)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=button.cjs.js.map

package/react/base/button.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{--sgds-btn-font-weight:var(--sgds-font-weight-regular);--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-hover-bg:var(--sgds-primary-bg-emphasis);--sgds-btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-color:var(--sgds-default-color-on-dark)}:host([variant=outline]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color);--sgds-btn-border-width:var(--sgds-border-width-1);--sgds-btn-border-color:var(--sgds-primary-border-color)}:host([variant=ghost]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color)}:host([variant=danger]){--sgds-btn-bg:var(--sgds-danger-bg);--sgds-btn-hover-bg:var(--sgds-danger-bg-emphasis);--sgds-btn-color:var(--sgds-default-color-on-dark)}.btn{align-items:center;background-color:var(--sgds-btn-bg);border:1px solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-btn-border-radius);color:var(--sgds-default-color-on-dark);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}.btn-ghost,.btn-outline,.btn-primary{color:var(--sgds-btn-color)}.btn-outline{border:var(--sgds-btn-border-width) solid var(--sgds-btn-border-color)}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--sgds-btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--sgds-btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--sgds-btn-color);opacity:var(--sgds-opacity-50);pointer-events:none}.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}`;
+var css_248z = css`:host{--sgds-btn-font-weight:var(--sgds-font-weight-regular);--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-hover-bg:var(--sgds-primary-bg-emphasis);--sgds-btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-color:var(--sgds-default-color-on-dark)}:host([variant=outline]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color);--sgds-btn-border-width:var(--sgds-border-width-1);--sgds-btn-border-color:var(--sgds-primary-border-color)}:host([variant=ghost]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color)}:host([variant=danger]){--sgds-btn-bg:var(--sgds-danger-bg);--sgds-btn-hover-bg:var(--sgds-danger-bg-emphasis);--sgds-btn-color:var(--sgds-default-color-on-dark)}.btn{align-items:center;background-color:var(--sgds-btn-bg);border:1px solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-btn-border-radius);color:var(--sgds-default-color-on-dark);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}.btn-ghost,.btn-outline,.btn-primary{color:var(--sgds-btn-color)}.btn-outline{border:var(--sgds-btn-border-width) solid var(--sgds-btn-border-color)}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--sgds-btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--sgds-btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--sgds-btn-color);opacity:var(--sgds-opacity-50);pointer-events:none}.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn slot::slotted(*){color:var(--sgds-btn-color)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=button.js.map

package/react/base/form-control-element.cjs.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var decorators_js = require('lit/decorators.js');
-var generateId = require('../utils/generateId.cjs.js');
 var feedback = require('../styles/feedback.cjs.js');
 var formHint = require('../styles/form-hint.cjs.js');
 var formLabel = require('../styles/form-label.cjs.js');
 var formPlaceholder = require('../styles/form-placeholder.cjs.js');
 var sgdsElement = require('./sgds-element.cjs.js');
+var generateId = require('../utils/generateId.cjs.js');
 
 class FormControlElement extends sgdsElement["default"] {
     constructor() {
@@ -21,15 +21,20 @@ class FormControlElement extends sgdsElement["default"] {
         this.hintText = "";
         /** Disables the input. */
         this.disabled = false;
-        /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
-        this.hasFeedback = false;
-        /**Feedback text for error state when validated */
-        this.invalidFeedback = "";
         /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
         this.invalid = false;
-        /** Makes the input a required field. */
-        this.required = false;
-        this.labelId = generateId["default"]("label");
+        this._controlId = generateId["default"]("input");
+        this._labelId = generateId["default"]("label");
+    }
+    /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */
+    setInvalid(bool) {
+        this.invalid = bool;
+        if (bool) {
+            this.emit("sgds-invalid");
+        }
+        else {
+            this.emit("sgds-valid");
+        }
     }
 }
 FormControlElement.styles = [...sgdsElement["default"].styles, feedback["default"], formHint["default"], formLabel["default"], formPlaceholder["default"]];
@@ -45,24 +50,9 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], FormControlElement.prototype, "disabled", void 0);
-tslib.__decorate([
-    decorators_js.property()
-], FormControlElement.prototype, "min", void 0);
-tslib.__decorate([
-    decorators_js.property()
-], FormControlElement.prototype, "max", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], FormControlElement.prototype, "hasFeedback", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: String, reflect: true })
-], FormControlElement.prototype, "invalidFeedback", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], FormControlElement.prototype, "invalid", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], FormControlElement.prototype, "required", void 0);
 
 exports["default"] = FormControlElement;
 //# sourceMappingURL=form-control-element.cjs.js.map

package/react/base/form-control-element.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-control-element.cjs.js","sources":["../../../src/base/form-control-element.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport genId from \"../utils/generateId\";\nimport feedbackStyles from \"../styles/feedback.css\";\nimport formHintStyles from \"../styles/form-hint.css\";\nimport formLabelStyles from \"../styles/form-label.css\";\nimport formPlaceholderStyles from \"../styles/form-placeholder.css\";\nimport SgdsElement from \"./sgds-element\";\n\nexport default class FormControlElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, feedbackStyles, formHintStyles, formLabelStyles, formPlaceholderStyles];\n\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /** The input's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** The input's name attribute */\n  @property({ reflect: true }) name: string;\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  protected labelId: string = genId(\"label\");\n}\n"],"names":["SgdsElement","genId","feedbackStyles","formHintStyles","formLabelStyles","formPlaceholderStyles","__decorate","property"],"mappings":";;;;;;;;;;;;;;AAQA,MAAqB,kBAAmB,SAAQA,sBAAW,CAAA;AAA3D,IAAA,WAAA,GAAA;;;QAI+B,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAGX,IAAQ,CAAA,QAAA,GAAG,EAAE,CAAC;;QAMC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QASjB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAGrB,IAAe,CAAA,eAAA,GAAG,EAAE,CAAC;;QAGpB,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAGhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAEnD,QAAA,IAAA,CAAA,OAAO,GAAWC,qBAAK,CAAC,OAAO,CAAC,CAAC;KAC5C;;AAjCQ,kBAAA,CAAA,MAAM,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,mBAAc,EAAEC,mBAAc,EAAEC,oBAAe,EAAEC,0BAAqB,CAAC,CAAC;AAGnFC,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGXD,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGdD,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGED,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjDD,gBAAA,CAAA;AAAX,IAAAC,sBAAQ,EAAE;AAAa,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGZD,gBAAA,CAAA;AAAX,IAAAC,sBAAQ,EAAE;AAAa,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGoBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAsB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"form-control-element.cjs.js","sources":["../../../src/base/form-control-element.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport feedbackStyles from \"../styles/feedback.css\";\nimport formHintStyles from \"../styles/form-hint.css\";\nimport formLabelStyles from \"../styles/form-label.css\";\nimport formPlaceholderStyles from \"../styles/form-placeholder.css\";\nimport SgdsElement from \"./sgds-element\";\nimport generateId from \"../utils/generateId\";\n\nexport default class FormControlElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, feedbackStyles, formHintStyles, formLabelStyles, formPlaceholderStyles];\n\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /** The input's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** The input's name attribute */\n  @property({ reflect: true }) name: string;\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  protected _controlId = generateId(\"input\");\n  protected _labelId = generateId(\"label\");\n\n  /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */\n  public setInvalid(bool: boolean) {\n    this.invalid = bool;\n    if (bool) {\n      this.emit(\"sgds-invalid\");\n    } else {\n      this.emit(\"sgds-valid\");\n    }\n  }\n}\n"],"names":["SgdsElement","generateId","feedbackStyles","formHintStyles","formLabelStyles","formPlaceholderStyles","__decorate","property"],"mappings":";;;;;;;;;;;;;;AAQA,MAAqB,kBAAmB,SAAQA,sBAAW,CAAA;AAA3D,IAAA,WAAA,GAAA;;;QAI+B,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAGX,IAAQ,CAAA,QAAA,GAAG,EAAE,CAAC;;QAMC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAElD,QAAA,IAAA,CAAA,UAAU,GAAGC,qBAAU,CAAC,OAAO,CAAC,CAAC;AACjC,QAAA,IAAA,CAAA,QAAQ,GAAGA,qBAAU,CAAC,OAAO,CAAC,CAAC;KAW1C;;AARQ,IAAA,UAAU,CAAC,IAAa,EAAA;AAC7B,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,IAAI,EAAE;AACR,YAAA,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAC3B;aAAM;AACL,YAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACzB;KACF;;AA5BM,kBAAA,CAAA,MAAM,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,mBAAc,EAAEC,mBAAc,EAAEC,oBAAe,EAAEC,0BAAqB,CAAC,CAAC;AAGnFC,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGXD,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGdD,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGED,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/base/form-control-element.js

@@ -1,12 +1,12 @@
 'use client';
 import { __decorate } from 'tslib';
 import { property } from 'lit/decorators.js';
-import genId from '../utils/generateId.js';
 import css_248z from '../styles/feedback.js';
 import css_248z$1 from '../styles/form-hint.js';
 import css_248z$2 from '../styles/form-label.js';
 import css_248z$3 from '../styles/form-placeholder.js';
 import SgdsElement from './sgds-element.js';
+import genId from '../utils/generateId.js';
 
 class FormControlElement extends SgdsElement {
     constructor() {
@@ -17,15 +17,20 @@ class FormControlElement extends SgdsElement {
         this.hintText = "";
         /** Disables the input. */
         this.disabled = false;
-        /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
-        this.hasFeedback = false;
-        /**Feedback text for error state when validated */
-        this.invalidFeedback = "";
         /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
         this.invalid = false;
-        /** Makes the input a required field. */
-        this.required = false;
-        this.labelId = genId("label");
+        this._controlId = genId("input");
+        this._labelId = genId("label");
+    }
+    /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */
+    setInvalid(bool) {
+        this.invalid = bool;
+        if (bool) {
+            this.emit("sgds-invalid");
+        }
+        else {
+            this.emit("sgds-valid");
+        }
     }
 }
 FormControlElement.styles = [...SgdsElement.styles, css_248z, css_248z$1, css_248z$2, css_248z$3];
@@ -41,24 +46,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], FormControlElement.prototype, "disabled", void 0);
-__decorate([
-    property()
-], FormControlElement.prototype, "min", void 0);
-__decorate([
-    property()
-], FormControlElement.prototype, "max", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], FormControlElement.prototype, "hasFeedback", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], FormControlElement.prototype, "invalidFeedback", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], FormControlElement.prototype, "invalid", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], FormControlElement.prototype, "required", void 0);
 
 export { FormControlElement as default };
 //# sourceMappingURL=form-control-element.js.map

package/react/base/form-control-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-control-element.js","sources":["../../../src/base/form-control-element.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport genId from \"../utils/generateId\";\nimport feedbackStyles from \"../styles/feedback.css\";\nimport formHintStyles from \"../styles/form-hint.css\";\nimport formLabelStyles from \"../styles/form-label.css\";\nimport formPlaceholderStyles from \"../styles/form-placeholder.css\";\nimport SgdsElement from \"./sgds-element\";\n\nexport default class FormControlElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, feedbackStyles, formHintStyles, formLabelStyles, formPlaceholderStyles];\n\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /** The input's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** The input's name attribute */\n  @property({ reflect: true }) name: string;\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  protected labelId: string = genId(\"label\");\n}\n"],"names":["feedbackStyles","formHintStyles","formLabelStyles","formPlaceholderStyles"],"mappings":";;;;;;;;;;AAQA,MAAqB,kBAAmB,SAAQ,WAAW,CAAA;AAA3D,IAAA,WAAA,GAAA;;;QAI+B,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAGX,IAAQ,CAAA,QAAA,GAAG,EAAE,CAAC;;QAMC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QASjB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAGrB,IAAe,CAAA,eAAA,GAAG,EAAE,CAAC;;QAGpB,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAGhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAEnD,QAAA,IAAA,CAAA,OAAO,GAAW,KAAK,CAAC,OAAO,CAAC,CAAC;KAC5C;;AAjCQ,kBAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAc,EAAEC,UAAc,EAAEC,UAAe,EAAEC,UAAqB,CAAC,CAAC;AAGnF,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGX,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGd,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGE,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjD,UAAA,CAAA;AAAX,IAAA,QAAQ,EAAE;AAAa,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGZ,UAAA,CAAA;AAAX,IAAA,QAAQ,EAAE;AAAa,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGoB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAsB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"form-control-element.js","sources":["../../../src/base/form-control-element.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport feedbackStyles from \"../styles/feedback.css\";\nimport formHintStyles from \"../styles/form-hint.css\";\nimport formLabelStyles from \"../styles/form-label.css\";\nimport formPlaceholderStyles from \"../styles/form-placeholder.css\";\nimport SgdsElement from \"./sgds-element\";\nimport generateId from \"../utils/generateId\";\n\nexport default class FormControlElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, feedbackStyles, formHintStyles, formLabelStyles, formPlaceholderStyles];\n\n  /** The input's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /** The input's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** The input's name attribute */\n  @property({ reflect: true }) name: string;\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  protected _controlId = generateId(\"input\");\n  protected _labelId = generateId(\"label\");\n\n  /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */\n  public setInvalid(bool: boolean) {\n    this.invalid = bool;\n    if (bool) {\n      this.emit(\"sgds-invalid\");\n    } else {\n      this.emit(\"sgds-valid\");\n    }\n  }\n}\n"],"names":["generateId","feedbackStyles","formHintStyles","formLabelStyles","formPlaceholderStyles"],"mappings":";;;;;;;;;;AAQA,MAAqB,kBAAmB,SAAQ,WAAW,CAAA;AAA3D,IAAA,WAAA,GAAA;;;QAI+B,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAGX,IAAQ,CAAA,QAAA,GAAG,EAAE,CAAC;;QAMC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAElD,QAAA,IAAA,CAAA,UAAU,GAAGA,KAAU,CAAC,OAAO,CAAC,CAAC;AACjC,QAAA,IAAA,CAAA,QAAQ,GAAGA,KAAU,CAAC,OAAO,CAAC,CAAC;KAW1C;;AARQ,IAAA,UAAU,CAAC,IAAa,EAAA;AAC7B,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,IAAI,EAAE;AACR,YAAA,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAC3B;aAAM;AACL,YAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACzB;KACF;;AA5BM,kBAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEC,QAAc,EAAEC,UAAc,EAAEC,UAAe,EAAEC,UAAqB,CAAC,CAAC;AAGnF,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGX,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGd,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGE,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/checkbox/index.cjs.js

@@ -34,6 +34,8 @@ var index = react.createComponent({
     elementClass: sgdsCheckbox.SgdsCheckbox,
     events: {
         onSgdsChange: "sgds-change",
+        onSgdsBlur: "sgds-blur",
+        onSgdsFocus: "sgds-focus",
         onSgdsValidityChange: "sgds-validity-change"
     }
 });

package/react/checkbox/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/checkbox/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Checkbox/sgds-checkbox\";\n\ncustomElements.define(\"sgds-checkbox\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-checkbox\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\",\n    onSgdsValidityChange: \"sgds-validity-change\"\n  }\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,eAAe,EAAEA,yBAAS,CAAC,CAAC;AAElD,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,YAAY,EAAEF,yBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,oBAAoB,EAAE,sBAAsB;AAC7C,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/checkbox/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Checkbox/sgds-checkbox\";\n\ncustomElements.define(\"sgds-checkbox\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-checkbox\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsValidityChange: \"sgds-validity-change\"\n  }\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,eAAe,EAAEA,yBAAS,CAAC,CAAC;AAElD,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,YAAY,EAAEF,yBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,oBAAoB,EAAE,sBAAsB;AAC7C,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/checkbox/index.d.ts

@@ -1,6 +1,8 @@
 import Component from "../../components/Checkbox/sgds-checkbox";
 declare const _default: import("@lit-labs/react").ReactWebComponent<Component, {
     onSgdsChange: string;
+    onSgdsBlur: string;
+    onSgdsFocus: string;
     onSgdsValidityChange: string;
 }>;
 export default _default;

package/react/checkbox/index.js

@@ -10,6 +10,8 @@ var index = createComponent({
     elementClass: SgdsCheckbox,
     events: {
         onSgdsChange: "sgds-change",
+        onSgdsBlur: "sgds-blur",
+        onSgdsFocus: "sgds-focus",
         onSgdsValidityChange: "sgds-validity-change"
     }
 });

package/react/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/checkbox/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Checkbox/sgds-checkbox\";\n\ncustomElements.define(\"sgds-checkbox\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-checkbox\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\",\n    onSgdsValidityChange: \"sgds-validity-change\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;AAIA,cAAc,CAAC,MAAM,CAAC,eAAe,EAAEA,YAAS,CAAC,CAAC;AAElD,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,YAAY,EAAEA,YAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,oBAAoB,EAAE,sBAAsB;AAC7C,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/checkbox/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Checkbox/sgds-checkbox\";\n\ncustomElements.define(\"sgds-checkbox\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-checkbox\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsValidityChange: \"sgds-validity-change\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;AAIA,cAAc,CAAC,MAAM,CAAC,eAAe,EAAEA,YAAS,CAAC,CAAC;AAElD,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,YAAY,EAAEA,YAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,oBAAoB,EAAE,sBAAsB;AAC7C,KAAA;AACF,CAAA,CAAC;;;;"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-heading);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .accordion-content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) slot[name=accordion-caret] svg,:host([density=compact]) slot[name=accordion-caret]::slotted(*){height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-default-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-default-bg-transparent);border:0;color:var(--sgds-default-color);display:flex;font-size:var(--sgds-font-size-3);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-body);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:hover{background-color:var(--sgds-default-bg-translucent);z-index:2}.accordion-btn:focus,.accordion-btn:focus-visible{background-color:var(--sgds-default-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0;z-index:3}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=accordion-caret] svg,slot[name=accordion-caret]::slotted(*){color:var(--sgds-default-color-subtle);height:var(--sgds-icon-size-lg);margin-left:auto;transition:transform .2s ease-in-out;width:var(--sgds-icon-size-lg)}.accordion-btn:not(.collapsed) slot[name=accordion-caret] svg,.accordion-btn:not(.collapsed) slot[name=accordion-caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.accordion-content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
+var css_248z = lit.css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-heading);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) slot[name=caret] svg,:host([density=compact]) slot[name=caret]::slotted(*){height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-default-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-default-bg-transparent);border:0;color:var(--sgds-default-color);display:flex;font-size:var(--sgds-font-size-3);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-body);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:hover{background-color:var(--sgds-default-bg-translucent);z-index:2}.accordion-btn:focus,.accordion-btn:focus-visible{background-color:var(--sgds-default-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0;z-index:3}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=caret] svg,slot[name=caret]::slotted(*){color:var(--sgds-default-color-subtle);height:var(--sgds-icon-size-lg);margin-left:auto;transition:transform .2s ease-in-out;width:var(--sgds-icon-size-lg)}.accordion-btn:not(.collapsed) slot[name=caret] svg,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=accordion-item.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-heading);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .accordion-content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) slot[name=accordion-caret] svg,:host([density=compact]) slot[name=accordion-caret]::slotted(*){height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-default-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-default-bg-transparent);border:0;color:var(--sgds-default-color);display:flex;font-size:var(--sgds-font-size-3);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-body);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:hover{background-color:var(--sgds-default-bg-translucent);z-index:2}.accordion-btn:focus,.accordion-btn:focus-visible{background-color:var(--sgds-default-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0;z-index:3}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=accordion-caret] svg,slot[name=accordion-caret]::slotted(*){color:var(--sgds-default-color-subtle);height:var(--sgds-icon-size-lg);margin-left:auto;transition:transform .2s ease-in-out;width:var(--sgds-icon-size-lg)}.accordion-btn:not(.collapsed) slot[name=accordion-caret] svg,.accordion-btn:not(.collapsed) slot[name=accordion-caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.accordion-content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
+var css_248z = css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-heading);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) slot[name=caret] svg,:host([density=compact]) slot[name=caret]::slotted(*){height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-default-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-default-bg-transparent);border:0;color:var(--sgds-default-color);display:flex;font-size:var(--sgds-font-size-3);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-body);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:hover{background-color:var(--sgds-default-bg-translucent);z-index:2}.accordion-btn:focus,.accordion-btn:focus-visible{background-color:var(--sgds-default-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0;z-index:3}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=caret] svg,slot[name=caret]::slotted(*){color:var(--sgds-default-color-subtle);height:var(--sgds-icon-size-lg);margin-left:auto;transition:transform .2s ease-in-out;width:var(--sgds-icon-size-lg)}.accordion-btn:not(.collapsed) slot[name=caret] svg,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
 
 export { css_248z as default };
 //# sourceMappingURL=accordion-item.js.map

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

@@ -21,13 +21,9 @@ var accordionItem = require('./accordion-item.cjs.js');
  * @event sgds-hide - Emitted on hide.
  * @event sgds-after-hide - Emitted on hide after animation has completed.
  *
- * @csspart base - The accordion-item base wrapper.
- * @csspart header - The accordion-item button header.
- * @csspart content - The accordion-item content.
- *
- * @slot accordion-header - The accordion-item button header slot.
- * @slot accordion-content - The accordion-item content slot.
- * @slot accordion-caret - The caret icon of accordion-item.
+ * @slot header - The accordion-item button header slot.
+ * @slot content - The accordion-item content slot.
+ * @slot caret - The caret icon of accordion-item.
  *
  */
 class SgdsAccordionItem extends sgdsElement["default"] {
@@ -122,7 +118,6 @@ class SgdsAccordionItem extends sgdsElement["default"] {
     render() {
         return lit.html `
       <div
-        part="base"
         class=${classMap_js.classMap({
             "accordion-item": true
         })}
@@ -134,7 +129,6 @@ class SgdsAccordionItem extends sgdsElement["default"] {
             collapsed: !this.open
         })}
           ?disabled=${this.disabled}
-          part="header"
           role="button"
           aria-expanded=${this.open ? "true" : "false"}
           aria-disabled=${this.disabled ? "true" : "false"}
@@ -143,8 +137,8 @@ class SgdsAccordionItem extends sgdsElement["default"] {
           @click=${this.handleSummaryClick}
           @keydown=${this.handleSummaryKeyDown}
         >
-          <slot name="accordion-header"></slot>
-          <slot name="accordion-caret">
+          <slot name="header"></slot>
+          <slot name="caret">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
               <path
                 fill-rule="evenodd"
@@ -156,13 +150,7 @@ class SgdsAccordionItem extends sgdsElement["default"] {
           </slot>
         </button>
         <div class="accordion-body">
-          <slot
-            id="content"
-            name="accordion-content"
-            class="accordion-content"
-            role="region"
-            aria-labelledby="header"
-          ></slot>
+          <slot id="content" name="content" class="content" role="region" aria-labelledby="header"></slot>
         </div>
       </div>
     `;

package/react/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 accordionItemStyle from \"./accordion-item.css\";\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 * @slot accordion-caret - The caret icon of accordion-item.\n *\n */\nexport class SgdsAccordionItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, accordionItemStyle];\n  /** @internal */\n  @query(\".accordion-item\") accordion: HTMLElement;\n  /** @internal */\n  @query(\".accordion-btn\") 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  /** Disables the accordion item */\n  @property({ type: Boolean, reflect: true }) disabled = false;\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          \"accordion-item\": true\n        })}\n      >\n        <button\n          class=${classMap({\n            \"accordion-btn\": true,\n            disabled: this.disabled,\n            collapsed: !this.open\n          })}\n          ?disabled=${this.disabled}\n          part=\"header\"\n          role=\"button\"\n          aria-expanded=${this.open ? \"true\" : \"false\"}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-controls=\"content\"\n          tabindex=${this.disabled ? \"-1\" : \"0\"}\n          @click=${this.handleSummaryClick}\n          @keydown=${this.handleSummaryKeyDown}\n        >\n          <slot name=\"accordion-header\"></slot>\n          <slot name=\"accordion-caret\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M3.20337 7.35657C3.26767 7.2921 3.34406 7.24095 3.42816 7.20606C3.51226 7.17116 3.60241 7.1532 3.69346 7.1532C3.78452 7.1532 3.87467 7.17116 3.95877 7.20606C4.04287 7.24095 4.11926 7.2921 4.18356 7.35657L12.0002 15.1746L19.8168 7.35657C19.8812 7.29221 19.9576 7.24115 20.0417 7.20632C20.1258 7.17149 20.2159 7.15356 20.3069 7.15356C20.3979 7.15356 20.488 7.17149 20.5721 7.20632C20.6562 7.24115 20.7326 7.29221 20.797 7.35657C20.8614 7.42093 20.9124 7.49733 20.9472 7.58142C20.9821 7.66551 21 7.75564 21 7.84666C21 7.93768 20.9821 8.02781 20.9472 8.1119C20.9124 8.19599 20.8614 8.2724 20.797 8.33676L12.4903 16.6435C12.426 16.7079 12.3496 16.7591 12.2655 16.794C12.1814 16.8289 12.0912 16.8468 12.0002 16.8468C11.9091 16.8468 11.819 16.8289 11.7349 16.794C11.6508 16.7591 11.5744 16.7079 11.5101 16.6435L3.20337 8.33676C3.1389 8.27246 3.08776 8.19607 3.05286 8.11197C3.01796 8.02787 3 7.93771 3 7.84666C3 7.75561 3.01796 7.66545 3.05286 7.58135C3.08776 7.49726 3.1389 7.42087 3.20337 7.35657Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </slot>\n        </button>\n        <div class=\"accordion-body\">\n          <slot\n            id=\"content\"\n            name=\"accordion-content\"\n            class=\"accordion-content\"\n            role=\"region\"\n            aria-labelledby=\"header\"\n          ></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","accordionItemStyle","__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 accordionItemStyle from \"./accordion-item.css\";\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 * @slot header - The accordion-item button header slot.\n * @slot content - The accordion-item content slot.\n * @slot caret - The caret icon of accordion-item.\n *\n */\nexport class SgdsAccordionItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, accordionItemStyle];\n  /** @internal */\n  @query(\".accordion-item\") accordion: HTMLElement;\n  /** @internal */\n  @query(\".accordion-btn\") 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  /** Disables the accordion item */\n  @property({ type: Boolean, reflect: true }) disabled = false;\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        class=${classMap({\n          \"accordion-item\": true\n        })}\n      >\n        <button\n          class=${classMap({\n            \"accordion-btn\": true,\n            disabled: this.disabled,\n            collapsed: !this.open\n          })}\n          ?disabled=${this.disabled}\n          role=\"button\"\n          aria-expanded=${this.open ? \"true\" : \"false\"}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-controls=\"content\"\n          tabindex=${this.disabled ? \"-1\" : \"0\"}\n          @click=${this.handleSummaryClick}\n          @keydown=${this.handleSummaryKeyDown}\n        >\n          <slot name=\"header\"></slot>\n          <slot name=\"caret\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M3.20337 7.35657C3.26767 7.2921 3.34406 7.24095 3.42816 7.20606C3.51226 7.17116 3.60241 7.1532 3.69346 7.1532C3.78452 7.1532 3.87467 7.17116 3.95877 7.20606C4.04287 7.24095 4.11926 7.2921 4.18356 7.35657L12.0002 15.1746L19.8168 7.35657C19.8812 7.29221 19.9576 7.24115 20.0417 7.20632C20.1258 7.17149 20.2159 7.15356 20.3069 7.15356C20.3979 7.15356 20.488 7.17149 20.5721 7.20632C20.6562 7.24115 20.7326 7.29221 20.797 7.35657C20.8614 7.42093 20.9124 7.49733 20.9472 7.58142C20.9821 7.66551 21 7.75564 21 7.84666C21 7.93768 20.9821 8.02781 20.9472 8.1119C20.9124 8.19599 20.8614 8.2724 20.797 8.33676L12.4903 16.6435C12.426 16.7079 12.3496 16.7591 12.2655 16.794C12.1814 16.8289 12.0912 16.8468 12.0002 16.8468C11.9091 16.8468 11.819 16.8289 11.7349 16.794C11.6508 16.7591 11.5744 16.7079 11.5101 16.6435L3.20337 8.33676C3.1389 8.27246 3.08776 8.19607 3.05286 8.11197C3.01796 8.02787 3 7.93771 3 7.84666C3 7.75561 3.01796 7.66545 3.05286 7.58135C3.08776 7.49726 3.1389 7.42087 3.20337 7.35657Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </slot>\n        </button>\n        <div class=\"accordion-body\">\n          <slot id=\"content\" name=\"content\" class=\"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","accordionItemStyle","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}

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

@@ -17,13 +17,9 @@ import css_248z from './accordion-item.js';
  * @event sgds-hide - Emitted on hide.
  * @event sgds-after-hide - Emitted on hide after animation has completed.
  *
- * @csspart base - The accordion-item base wrapper.
- * @csspart header - The accordion-item button header.
- * @csspart content - The accordion-item content.
- *
- * @slot accordion-header - The accordion-item button header slot.
- * @slot accordion-content - The accordion-item content slot.
- * @slot accordion-caret - The caret icon of accordion-item.
+ * @slot header - The accordion-item button header slot.
+ * @slot content - The accordion-item content slot.
+ * @slot caret - The caret icon of accordion-item.
  *
  */
 class SgdsAccordionItem extends SgdsElement {
@@ -118,7 +114,6 @@ class SgdsAccordionItem extends SgdsElement {
     render() {
         return html `
       <div
-        part="base"
         class=${classMap({
             "accordion-item": true
         })}
@@ -130,7 +125,6 @@ class SgdsAccordionItem extends SgdsElement {
             collapsed: !this.open
         })}
           ?disabled=${this.disabled}
-          part="header"
           role="button"
           aria-expanded=${this.open ? "true" : "false"}
           aria-disabled=${this.disabled ? "true" : "false"}
@@ -139,8 +133,8 @@ class SgdsAccordionItem extends SgdsElement {
           @click=${this.handleSummaryClick}
           @keydown=${this.handleSummaryKeyDown}
         >
-          <slot name="accordion-header"></slot>
-          <slot name="accordion-caret">
+          <slot name="header"></slot>
+          <slot name="caret">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
               <path
                 fill-rule="evenodd"
@@ -152,13 +146,7 @@ class SgdsAccordionItem extends SgdsElement {
           </slot>
         </button>
         <div class="accordion-body">
-          <slot
-            id="content"
-            name="accordion-content"
-            class="accordion-content"
-            role="region"
-            aria-labelledby="header"
-          ></slot>
+          <slot id="content" name="content" class="content" role="region" aria-labelledby="header"></slot>
         </div>
       </div>
     `;

package/react/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 accordionItemStyle from \"./accordion-item.css\";\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 * @slot accordion-caret - The caret icon of accordion-item.\n *\n */\nexport class SgdsAccordionItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, accordionItemStyle];\n  /** @internal */\n  @query(\".accordion-item\") accordion: HTMLElement;\n  /** @internal */\n  @query(\".accordion-btn\") 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  /** Disables the accordion item */\n  @property({ type: Boolean, reflect: true }) disabled = false;\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          \"accordion-item\": true\n        })}\n      >\n        <button\n          class=${classMap({\n            \"accordion-btn\": true,\n            disabled: this.disabled,\n            collapsed: !this.open\n          })}\n          ?disabled=${this.disabled}\n          part=\"header\"\n          role=\"button\"\n          aria-expanded=${this.open ? \"true\" : \"false\"}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-controls=\"content\"\n          tabindex=${this.disabled ? \"-1\" : \"0\"}\n          @click=${this.handleSummaryClick}\n          @keydown=${this.handleSummaryKeyDown}\n        >\n          <slot name=\"accordion-header\"></slot>\n          <slot name=\"accordion-caret\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M3.20337 7.35657C3.26767 7.2921 3.34406 7.24095 3.42816 7.20606C3.51226 7.17116 3.60241 7.1532 3.69346 7.1532C3.78452 7.1532 3.87467 7.17116 3.95877 7.20606C4.04287 7.24095 4.11926 7.2921 4.18356 7.35657L12.0002 15.1746L19.8168 7.35657C19.8812 7.29221 19.9576 7.24115 20.0417 7.20632C20.1258 7.17149 20.2159 7.15356 20.3069 7.15356C20.3979 7.15356 20.488 7.17149 20.5721 7.20632C20.6562 7.24115 20.7326 7.29221 20.797 7.35657C20.8614 7.42093 20.9124 7.49733 20.9472 7.58142C20.9821 7.66551 21 7.75564 21 7.84666C21 7.93768 20.9821 8.02781 20.9472 8.1119C20.9124 8.19599 20.8614 8.2724 20.797 8.33676L12.4903 16.6435C12.426 16.7079 12.3496 16.7591 12.2655 16.794C12.1814 16.8289 12.0912 16.8468 12.0002 16.8468C11.9091 16.8468 11.819 16.8289 11.7349 16.794C11.6508 16.7591 11.5744 16.7079 11.5101 16.6435L3.20337 8.33676C3.1389 8.27246 3.08776 8.19607 3.05286 8.11197C3.01796 8.02787 3 7.93771 3 7.84666C3 7.75561 3.01796 7.66545 3.05286 7.58135C3.08776 7.49726 3.1389 7.42087 3.20337 7.35657Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </slot>\n        </button>\n        <div class=\"accordion-body\">\n          <slot\n            id=\"content\"\n            name=\"accordion-content\"\n            class=\"accordion-content\"\n            role=\"region\"\n            aria-labelledby=\"header\"\n          ></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":["accordionItemStyle"],"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 accordionItemStyle from \"./accordion-item.css\";\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 * @slot header - The accordion-item button header slot.\n * @slot content - The accordion-item content slot.\n * @slot caret - The caret icon of accordion-item.\n *\n */\nexport class SgdsAccordionItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, accordionItemStyle];\n  /** @internal */\n  @query(\".accordion-item\") accordion: HTMLElement;\n  /** @internal */\n  @query(\".accordion-btn\") 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  /** Disables the accordion item */\n  @property({ type: Boolean, reflect: true }) disabled = false;\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        class=${classMap({\n          \"accordion-item\": true\n        })}\n      >\n        <button\n          class=${classMap({\n            \"accordion-btn\": true,\n            disabled: this.disabled,\n            collapsed: !this.open\n          })}\n          ?disabled=${this.disabled}\n          role=\"button\"\n          aria-expanded=${this.open ? \"true\" : \"false\"}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-controls=\"content\"\n          tabindex=${this.disabled ? \"-1\" : \"0\"}\n          @click=${this.handleSummaryClick}\n          @keydown=${this.handleSummaryKeyDown}\n        >\n          <slot name=\"header\"></slot>\n          <slot name=\"caret\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M3.20337 7.35657C3.26767 7.2921 3.34406 7.24095 3.42816 7.20606C3.51226 7.17116 3.60241 7.1532 3.69346 7.1532C3.78452 7.1532 3.87467 7.17116 3.95877 7.20606C4.04287 7.24095 4.11926 7.2921 4.18356 7.35657L12.0002 15.1746L19.8168 7.35657C19.8812 7.29221 19.9576 7.24115 20.0417 7.20632C20.1258 7.17149 20.2159 7.15356 20.3069 7.15356C20.3979 7.15356 20.488 7.17149 20.5721 7.20632C20.6562 7.24115 20.7326 7.29221 20.797 7.35657C20.8614 7.42093 20.9124 7.49733 20.9472 7.58142C20.9821 7.66551 21 7.75564 21 7.84666C21 7.93768 20.9821 8.02781 20.9472 8.1119C20.9124 8.19599 20.8614 8.2724 20.797 8.33676L12.4903 16.6435C12.426 16.7079 12.3496 16.7591 12.2655 16.794C12.1814 16.8289 12.0912 16.8468 12.0002 16.8468C11.9091 16.8468 11.819 16.8289 11.7349 16.794C11.6508 16.7591 11.5744 16.7079 11.5101 16.6435L3.20337 8.33676C3.1389 8.27246 3.08776 8.19607 3.05286 8.11197C3.01796 8.02787 3 7.93771 3 7.84666C3 7.75561 3.01796 7.66545 3.05286 7.58135C3.08776 7.49726 3.1389 7.42087 3.20337 7.35657Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </slot>\n        </button>\n        <div class=\"accordion-body\">\n          <slot id=\"content\" name=\"content\" class=\"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":["accordionItemStyle"],"mappings":"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"}