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

package/Masthead/index.js

@@ -4121,7 +4121,7 @@
   }
   SgdsElement.styles = [css_248z$3];
 
-  var css_248z$2 = css`:host{--masthead-max-width:1440px;--masthead-padding-x:2rem}b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{color:light-dark(#252525,#eaeaea);font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#eaeaea,#252525)}.container{margin-left:auto;margin-right:auto;max-width:var(--masthead-max-width);padding:.25rem var(--masthead-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:.75rem;row-gap:0}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0049dc,#7fb5ff);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0022b9,#5592ff)}.panel{background-color:light-dark(hsla(0,0%,5%,.05),hsla(0,0%,100%,.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#595959,#b2b2b2)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#0e0e0e,#fff)}a.trusted-websites-link{color:light-dark(#0049dc,#7fb5ff);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0022b9,#5592ff)}@media screen and (max-width:768px){.container{--masthead-padding-x:1rem}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
+  var css_248z$2 = css`:host{--masthead-max-width:1440px;--masthead-padding-x:2rem}b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{color:light-dark(#252525,#eaeaea);font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#eaeaea,#252525)}.container{margin-left:auto;margin-right:auto;max-width:var(--masthead-max-width);padding:.25rem var(--masthead-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0049dc,#7fb5ff);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0022b9,#5592ff)}.panel{background-color:light-dark(hsla(0,0%,5%,.05),hsla(0,0%,100%,.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#595959,#b2b2b2)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#0e0e0e,#fff)}a.trusted-websites-link{color:light-dark(#0049dc,#7fb5ff);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0022b9,#5592ff)}@media screen and (max-width:768px){.container{--masthead-padding-x:1rem}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
 
   var css_248z$1 = css`svg{vertical-align:middle}`;
 

package/README.md

@@ -751,13 +751,13 @@ export class MyNavbar extends ScopedElementsMixin(LitElement) {
         <p slot="card-text">Compatible with all frameworks. Each web component also has its own React version for full compatibility with React.</p>
     </sgds-card>
      <sgds-card stretchedLink class="col">
-        <span slot="card-title">Customisable with CSS <i class="bi bi-filetype-css"></i></span>
-        <a slot="card-link" href="/story/getting-started-usage-stylings--page" target="_blank"></a>
-        <p slot="card-text">Components are customisable with cssparts, css custom variables and class-like properties.</p>
+        <span slot="card-title">Theming with CSS variables <i class="bi bi-filetype-css"></i></span>
+        <a slot="card-link" href="/docs/style-theming--docs" target="_blank"></a>
+        <p slot="card-text">Change the theme with CSS Variables </p>
     </sgds-card>
      <sgds-card stretchedLink class="col">
         <span slot="card-title">Works with CDNs <i class="bi bi-truck"></i></span>
-        <a slot="card-link" href="/story/getting-started-installation--page" target="_blank"></a>
+        <a slot="card-link" href="/docs/getting-started-installation--docs#method-2-using-cdn" target="_self"></a>
         <p slot="card-text">Besides whole library CDN, each component also has its own CDN.</p>
     </sgds-card>
 <sgds-card stretchedLink class="col">
@@ -772,6 +772,6 @@ export class MyNavbar extends ScopedElementsMixin(LitElement) {
 <sgds-card stretchedLink class="col">
         <span slot="card-title">Extendable <i class="bi bi-bricks"></i></span>
         <p slot="card-text">Our components are built with LitElement and are extendable. Use them as building blocks to create your complex component. </p>
-        <a slot="card-link" href="/story/getting-started-extending-the-library--page" target="_blank"></a>
+        <a slot="card-link" href="/docs/usage-extending-the-library--docs" target="_blank"></a>
     </sgds-card>
 </div>

package/base/button.js

@@ -1,6 +1,6 @@
 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/base/form-control-element.d.ts

@@ -9,17 +9,10 @@ export default class FormControlElement extends SgdsElement {
     name: string;
     /** Disables the input. */
     disabled: boolean;
-    /** The input's minimum value. Only applies number input types. */
-    min: number;
-    /** The input's maximum value. Only applies number input types. */
-    max: number;
-    /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
-    hasFeedback: boolean;
-    /**Feedback text for error state when validated */
-    invalidFeedback: string;
     /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
     invalid: boolean;
-    /** Makes the input a required field. */
-    required: boolean;
-    protected labelId: string;
+    protected _controlId: string;
+    protected _labelId: string;
+    /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */
+    setInvalid(bool: boolean): void;
 }

package/base/form-control-element.js

@@ -1,11 +1,11 @@
 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() {
@@ -16,15 +16,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];
@@ -40,24 +45,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/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/components/Accordion/accordion-item.js

@@ -1,6 +1,6 @@
 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/components/Accordion/index.umd.js

@@ -4629,7 +4629,7 @@
       };
   }
 
-  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}`;
 
   /**
    *
@@ -4638,13 +4638,9 @@
    * @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 {
@@ -4739,7 +4735,6 @@
       render() {
           return html `
       <div
-        part="base"
         class=${classMap({
             "accordion-item": true
         })}
@@ -4751,7 +4746,6 @@
             collapsed: !this.open
         })}
           ?disabled=${this.disabled}
-          part="header"
           role="button"
           aria-expanded=${this.open ? "true" : "false"}
           aria-disabled=${this.disabled ? "true" : "false"}
@@ -4760,8 +4754,8 @@
           @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"
@@ -4773,13 +4767,7 @@
           </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>
     `;