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

package/components/index.umd.js

@@ -4515,7 +4515,7 @@
    */
   const classMap = directive(ClassMapDirective);
 
-  var css_248z$12 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-heading);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}::slotted(a:hover){color:var(--sgds-link-hover-color)}::slotted(svg){vertical-align:middle}}`;
+  var css_248z$13 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-heading);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}::slotted(a:hover){color:var(--sgds-link-hover-color)}::slotted(svg){vertical-align:middle}}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -4533,9 +4533,9 @@
           return event;
       }
   }
-  SgdsElement.styles = [css_248z$12];
+  SgdsElement.styles = [css_248z$13];
 
-  var css_248z$11 = css`:host([variant=border]) .accordion{border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-muted);border-radius:var(--sgds-border-radius-md)}`;
+  var css_248z$12 = css`:host([variant=border]) .accordion{border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-muted);border-radius:var(--sgds-border-radius-md)}`;
 
   const VALID_KEYS = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
   /**
@@ -4611,7 +4611,7 @@
     `;
       }
   }
-  SgdsAccordion.styles = [...SgdsElement.styles, css_248z$11];
+  SgdsAccordion.styles = [...SgdsElement.styles, css_248z$12];
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsAccordion.prototype, "allowMultiple", void 0);
@@ -4754,7 +4754,7 @@
       };
   }
 
-  var css_248z$10 = 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$11 = 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}`;
 
   /**
    *
@@ -4763,13 +4763,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 {
@@ -4864,7 +4860,6 @@
       render() {
           return html$1 `
       <div
-        part="base"
         class=${classMap({
             "accordion-item": true
         })}
@@ -4876,7 +4871,6 @@
             collapsed: !this.open
         })}
           ?disabled=${this.disabled}
-          part="header"
           role="button"
           aria-expanded=${this.open ? "true" : "false"}
           aria-disabled=${this.disabled ? "true" : "false"}
@@ -4885,8 +4879,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"
@@ -4898,19 +4892,13 @@
           </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>
     `;
       }
   }
-  SgdsAccordionItem.styles = [...SgdsElement.styles, css_248z$10];
+  SgdsAccordionItem.styles = [...SgdsElement.styles, css_248z$11];
   __decorate([
       query(".accordion-item")
   ], SgdsAccordionItem.prototype, "accordion", void 0);
@@ -5791,21 +5779,21 @@
    */
   const html = withStatic(html$1);
 
-  var css_248z$$ = css`.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-body-bg);border:var(--sgds-border-width) solid var(--sgds-border-color-translucent);border-radius:var(--sgds-border-radius);box-shadow:none;display:flex;flex-direction:column;height:auto;min-width:0;position:relative}.card,.card-body{color:var(--sgds-body-color)}.card-body{flex:1 1 auto;padding:var(--sgds-spacer-4)}.card-title{color:var(--sgds-body-color);margin-bottom:var(--sgds-spacer-2)}.card-subtitle,.card-text:last-child{margin-bottom:0}slot[name=card-image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius) - var(--sgds-border-width));border-top-right-radius:calc(var(--sgds-border-radius) - var(--sgds-border-width))}slot[name=card-link]::slotted(*){font-weight:700}`;
+  var css_248z$10 = css`.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-body-bg);border:var(--sgds-border-width) solid var(--sgds-border-color-translucent);border-radius:var(--sgds-border-radius);box-shadow:none;display:flex;flex-direction:column;height:auto;min-width:0;position:relative}.card,.card-body{color:var(--sgds-body-color)}.card-body{flex:1 1 auto;padding:var(--sgds-spacer-4)}.card-title{color:var(--sgds-body-color);margin-bottom:var(--sgds-spacer-2)}.card-subtitle,.card-text:last-child{margin-bottom:0}slot[name=card-image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius) - var(--sgds-border-width));border-top-right-radius:calc(var(--sgds-border-radius) - var(--sgds-border-width))}slot[name=card-link]::slotted(*){font-weight:700}`;
 
-  var css_248z$_ = css`.text-primary{color:var(--sgds-primary-rgb)!important}.text-secondary{color:var(--sgds-secondary-rgb)!important}.text-success{color:var(--sgds-success-rgb)!important}.text-info{color:var(--sgds-info-rgb)!important}.text-warning{color:var(--sgds-warning-rgb)!important}.text-danger{color:var(--sgds-danger-rgb)!important}.text-light{color:var(--sgds-light-rgb)!important}.text-dark{color:var(--sgds-dark-rgb)!important}.text-muted{color:var(--sgds-secondary-color)!important}`;
+  var css_248z$$ = css`.text-primary{color:var(--sgds-primary-rgb)!important}.text-secondary{color:var(--sgds-secondary-rgb)!important}.text-success{color:var(--sgds-success-rgb)!important}.text-info{color:var(--sgds-info-rgb)!important}.text-warning{color:var(--sgds-warning-rgb)!important}.text-danger{color:var(--sgds-danger-rgb)!important}.text-light{color:var(--sgds-light-rgb)!important}.text-dark{color:var(--sgds-dark-rgb)!important}.text-muted{color:var(--sgds-secondary-color)!important}`;
 
-  var css_248z$Z = css`.bg-primary{background-color:var(--sgds-primary)!important}.bg-secondary{background-color:var(--sgds-secondary)!important}.bg-success{background-color:var(--sgds-success)!important}.bg-info{background-color:var(--sgds-info)!important}.bg-warning{background-color:var(--sgds-warning)!important}.bg-danger{background-color:var(--sgds-danger)!important}.bg-light{background-color:var(--sgds-light)!important}.bg-dark{background-color:var(--sgds-dark)!important}`;
+  var css_248z$_ = css`.bg-primary{background-color:var(--sgds-primary)!important}.bg-secondary{background-color:var(--sgds-secondary)!important}.bg-success{background-color:var(--sgds-success)!important}.bg-info{background-color:var(--sgds-info)!important}.bg-warning{background-color:var(--sgds-warning)!important}.bg-danger{background-color:var(--sgds-danger)!important}.bg-light{background-color:var(--sgds-light)!important}.bg-dark{background-color:var(--sgds-dark)!important}`;
 
-  var css_248z$Y = css`.border-primary{border-color:var(--sgds-primary)!important}.border-secondary{border-color:var(--sgds-secondary)!important}.border-success{border-color:var(--sgds-success)!important}.border-info{border-color:var(--sgds-info)!important}.border-warning{border-color:var(--sgds-warning)!important}.border-danger{border-color:var(--sgds-danger)!important}.border-light{border-color:var(--sgds-light)!important}.border-dark{border-color:var(--sgds-dark)!important}`;
+  var css_248z$Z = css`.border-primary{border-color:var(--sgds-primary)!important}.border-secondary{border-color:var(--sgds-secondary)!important}.border-success{border-color:var(--sgds-success)!important}.border-info{border-color:var(--sgds-info)!important}.border-warning{border-color:var(--sgds-warning)!important}.border-danger{border-color:var(--sgds-danger)!important}.border-light{border-color:var(--sgds-light)!important}.border-dark{border-color:var(--sgds-dark)!important}`;
 
-  var css_248z$X = css`.h1,.h2,.h3,.h4,.h5,.h6 ::slotted(h6),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),h1,h2,h3,h4,h5,h6{color:var(--sgds-heading-color);font-weight:700;line-height:1.2;margin-bottom:.5rem;margin-top:0}.h1,::slotted(h1),h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,::slotted(h1),h1{font-size:2.5rem}}.h2,::slotted(h2),h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,::slotted(h2),h2{font-size:2rem}}.h3,::slotted(h3),h3{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h3,::slotted(h3),h3{font-size:1.5rem}}.h4,::slotted(h4),h4{font-size:1.125rem}.h5,.h6 ::slotted(h6),::slotted(h5),h5,h6{font-size:1rem}.h1,::slotted(h1),h1{line-height:1.2}.h2,::slotted(h2),h2{line-height:1.25}.h3,::slotted(h3),h3{line-height:1.33}.h4,::slotted(h4),h4{line-height:1.78}.h5,.h6 ::slotted(h6),::slotted(h5),h5,h6{line-height:1.2}`;
+  var css_248z$Y = css`.h1,.h2,.h3,.h4,.h5,.h6 ::slotted(h6),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),h1,h2,h3,h4,h5,h6{color:var(--sgds-heading-color);font-weight:700;line-height:1.2;margin-bottom:.5rem;margin-top:0}.h1,::slotted(h1),h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,::slotted(h1),h1{font-size:2.5rem}}.h2,::slotted(h2),h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,::slotted(h2),h2{font-size:2rem}}.h3,::slotted(h3),h3{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h3,::slotted(h3),h3{font-size:1.5rem}}.h4,::slotted(h4),h4{font-size:1.125rem}.h5,.h6 ::slotted(h6),::slotted(h5),h5,h6{font-size:1rem}.h1,::slotted(h1),h1{line-height:1.2}.h2,::slotted(h2),h2{line-height:1.25}.h3,::slotted(h3),h3{line-height:1.33}.h4,::slotted(h4),h4{line-height:1.78}.h5,.h6 ::slotted(h6),::slotted(h5),h5,h6{line-height:1.2}`;
 
-  var css_248z$W = css`p{margin-bottom:1.5rem;margin-top:0}`;
+  var css_248z$X = css`p{margin-bottom:1.5rem;margin-top:0}`;
 
   class CardElement extends SgdsElement {
   }
-  CardElement.styles = [...SgdsElement.styles, css_248z$_, css_248z$Z, css_248z$Y, css_248z$X, css_248z$W, css_248z$$];
+  CardElement.styles = [...SgdsElement.styles, css_248z$$, css_248z$_, css_248z$Z, css_248z$Y, css_248z$X, css_248z$10];
   __decorate([
       property()
   ], CardElement.prototype, "borderColor", void 0);
@@ -5833,6 +5821,56 @@
    */
   const ifDefined = (value) => value ?? nothing;
 
+  var css_248z$W = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback{color:var(--sgds-form-danger-color);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}`;
+
+  var css_248z$V = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`;
+
+  var css_248z$U = css`.form-label{color:var(--sgds-form-color);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
+
+  var css_248z$T = css`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-heading)}`;
+
+  class FormControlElement extends SgdsElement {
+      constructor() {
+          super(...arguments);
+          /** The input's label  */
+          this.label = "";
+          /** The input's hint text */
+          this.hintText = "";
+          /** Disables the input. */
+          this.disabled = false;
+          /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+          this.invalid = false;
+          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$W, css_248z$V, css_248z$U, css_248z$T];
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "label", void 0);
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "hintText", void 0);
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "name", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], FormControlElement.prototype, "disabled", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], FormControlElement.prototype, "invalid", void 0);
+
   // @defaultValue decorator
   const defaultValue = (propertyName = "value") => (proto, key) => {
       const ctor = proto.constructor;
@@ -5853,294 +5891,227 @@
       };
   };
 
-  const reportValidityOverloads = new WeakMap();
-  class FormSubmitController {
+  /**
+   * SGDS custom form validation methods and behaviours
+   */
+  class InputValidationController {
       constructor(host, options) {
           (this.host = host).addController(this);
-          this.options = Object.assign({ form: (input) => {
-                  return input.closest("form");
-              }, name: (input) => input.name, value: (input) => input.value, defaultValue: (input) => input.defaultValue, disabled: (input) => input.disabled, reportValidity: (input) => {
-                  return typeof input.reportValidity === "function" ? input.reportValidity() : true;
-              }, setValue: (input, value) => {
-                  input.value = value;
-              } }, options);
-          this.handleFormData = this.handleFormData.bind(this);
-          this.handleFormSubmit = this.handleFormSubmit.bind(this);
-          this.handleFormReset = this.handleFormReset.bind(this);
-          this.reportFormValidity = this.reportFormValidity.bind(this);
+          this._internals = this.host.attachInternals();
+          this.options = Object.assign({ setInvalid: (host, value) => {
+                  host.invalid = value;
+              }, value: (host) => {
+                  return host.value;
+              }, input: (host) => host.input }, options);
       }
       hostConnected() {
-          this.form = this.options.form(this.host);
-          if (this.form) {
-              this.form.addEventListener("formdata", this.handleFormData);
-              this.form.addEventListener("submit", this.handleFormSubmit);
-              this.form.addEventListener("reset", this.handleFormReset);
-              // Overload the form's reportValidity() method so it looks at Shoelace form controls
-              if (!reportValidityOverloads.has(this.form)) {
-                  reportValidityOverloads.set(this.form, this.form.reportValidity);
-                  this.form.reportValidity = () => this.reportFormValidity();
-              }
-          }
+          this.host.addEventListener("invalid", e => this.handleInvalid(e));
       }
       hostDisconnected() {
-          if (this.form) {
-              this.form.removeEventListener("formdata", this.handleFormData);
-              this.form.removeEventListener("submit", this.handleFormSubmit);
-              this.form.removeEventListener("reset", this.handleFormReset);
-              // Remove the overload and restore the original method
-              if (reportValidityOverloads.has(this.form)) {
-                  this.form.reportValidity = reportValidityOverloads.get(this.form);
-                  reportValidityOverloads.delete(this.form);
-              }
-              this.form = undefined;
-          }
+          this.host.removeEventListener("invalid", e => this.handleInvalid(e));
       }
-      handleFormData(event) {
-          const disabled = this.options.disabled(this.host);
-          const name = this.options.name(this.host);
-          const value = this.options.value(this.host);
-          if (!disabled && typeof name === "string" && typeof value !== "undefined") {
-              if (Array.isArray(value)) {
-                  value.forEach(val => {
-                      event.formData.append(name, val.toString());
-                  });
-              }
-              else {
-                  event.formData.append(name, value.toString());
-              }
-          }
+      /**
+       * Prevents the native browser error message pop up when reportValidity() called by
+       * associated form or the component's reportValidity during constraint validation
+       * Sets invalid reactive prop to true
+       */
+      handleInvalid(e) {
+          e.preventDefault();
+          this.options.setInvalid(this.host, true);
       }
-      handleFormSubmit(event) {
-          const disabled = this.options.disabled(this.host);
-          const reportValidity = this.options.reportValidity;
-          if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
-              event.preventDefault();
-              event.stopImmediatePropagation();
-          }
-      }
-      handleFormReset() {
-          this.options.setValue(this.host, this.options.defaultValue(this.host));
-      }
-      reportFormValidity() {
-          //
-          // Shoelace form controls work hard to act like regular form controls. They support the Constraint Validation API
-          // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also
-          // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using
-          // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.
-          //
-          // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger
-          // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't
-          // be necessary once we can use ElementInternals.
-          //
-          // Note that we're also honoring the form's novalidate attribute.
-          //
-          if (this.form && !this.form.noValidate) {
-              // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom
-              // elements that support the constraint validation API.
-              const elements = this.form.querySelectorAll("*");
-              for (const element of elements) {
-                  if (typeof element.reportValidity === "function") {
-                      if (!element.reportValidity()) {
-                          return false;
-                      }
-                  }
-              }
-          }
-          return true;
+      /**
+       * Sets invalid to false when invoked and
+       * Updates the ValidityState based on new value, but
+       * does not update invalid reactive prop
+       * @param e
+       */
+      handleInput(e) {
+          const input = e.target;
+          this.options.setInvalid(this.host, false);
+          this.validateInput(input);
       }
-      doAction(type, invoker) {
-          if (this.form) {
-              const button = document.createElement("button");
-              button.type = type;
-              button.style.position = "absolute";
-              button.style.width = "0";
-              button.style.height = "0";
-              button.style.clipPath = "inset(50%)";
-              button.style.overflow = "hidden";
-              button.style.whiteSpace = "nowrap";
-              // Pass form attributes through to the temporary button
-              if (invoker) {
-                  ["formaction", "formmethod", "formnovalidate", "formtarget"].forEach(attr => {
-                      if (invoker.hasAttribute(attr)) {
-                          button.setAttribute(attr, invoker.getAttribute(attr));
-                      }
-                  });
-              }
-              this.form.append(button);
-              button.click();
-              button.remove();
-          }
+      /**
+       * Validate the input's new value after onChange and
+       * update invalid reactive prop
+       * @param e
+       */
+      handleChange(e) {
+          const input = e.target;
+          this.validateInput(input);
+          this.options.setInvalid(this.host, !this.checkValidity());
       }
-      /** Resets the form, restoring all the control to their default value */
-      reset(invoker) {
-          this.doAction("reset", invoker);
+      get form() {
+          return this._internals.form;
       }
-      /** Submits the form, triggering validation and form data injection. */
-      submit(invoker) {
-          // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a
-          // native submit button into the form, "click" it, then remove it to simulate a standard form submission.
-          this.doAction("submit", invoker);
+      get validity() {
+          return this._internals.validity;
       }
-  }
-
-  class FormCheckElement extends SgdsElement {
-      constructor() {
-          super(...arguments);
-          /**@internal */
-          this.formSubmitController = new FormSubmitController(this, {
-              value: (control) => (control.checked ? control.value : undefined),
-              defaultValue: (control) => control.defaultChecked,
-              setValue: (control, checked) => (control.checked = checked)
-          });
-          /** For aria-label when there is no appropriate text label visible */
-          this.ariaLabel = "checkbox";
-          /** Makes the checkbox a required field. */
-          this.required = false;
-          /** Draws the checkbox in a checked state. */
-          this.checked = false;
-          /** Disables the checkbox (so the user can't check / uncheck it). */
-          this.disabled = false;
-          /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
-          this.hasFeedback = false;
-          /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
-          this.defaultChecked = false;
-          /** Marks the checkbox input as invalid. Replace the pseudo :invalid selector for absent in custom elements */
-          this.invalid = false;
-          /** Marks the checkbox input as indeterminate , with indeterminate logo  */
-          this.indeterminate = false;
+      get validationMessage() {
+          return this._internals.validationMessage;
       }
-      _handleInvalidChange() {
-          this.emit("sgds-validity-change", { detail: { invalid: this.invalid } });
+      get willValidate() {
+          return this._internals.willValidate;
       }
-      /** Simulates a click on the checkbox. */
-      click() {
-          this.input.click();
+      /**
+       * Checks the validity and updates the invalid reactive prop of form components
+       */
+      updateInvalidState() {
+          this.options.setInvalid(this.host, !this.checkValidity());
       }
-      /** Sets focus on the checkbox. */
-      focus(options) {
-          this.input.focus(options);
+      /**
+       * Resets the ValidityState of the control
+       */
+      resetValidity() {
+          return this._internals.setValidity({});
       }
-      /** Removes focus from the checkbox. */
-      blur() {
-          this.input.blur();
+      /**
+       * Reports the validity
+       */
+      checkValidity() {
+          return this._internals.checkValidity();
       }
-      /** Checks for validity and shows the browser's validation message if the control is invalid. */
+      /**
+       * Reports the validity with a error popup message
+       */
       reportValidity() {
-          if (!this.input.reportValidity()) {
-              this.invalid = !this.input.checkValidity();
-          }
-          return this.input.reportValidity();
+          return this._internals.reportValidity();
       }
-      _handleChange() {
-          if (this.indeterminate) {
-              this.indeterminate = !this.indeterminate;
-          }
-          this.checked = !this.checked;
-          this.value = this.input.value;
-          this.emit("sgds-change", { detail: { checked: this.checked, value: this.value } });
+      /**
+       * Sets the form control value into FormData,
+       * making the value of control accessible via FormData
+       */
+      setFormValue() {
+          const value = this.options.value(this.host);
+          this._internals.setFormValue(value);
       }
-      _handleKeyDown(event) {
-          const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-          if (event.key === "Enter" && !hasModifier) {
-              this.click();
+      /**
+       * Updates the ValidityState of the input in form component at current state
+       */
+      validateInput(input) {
+          /** When the form control is disabled, its always valid */
+          if (this.options.input(this.host).disabled) {
+              return this._internals.setValidity({});
+          }
+          // get the validity of the internal <input>
+          const validState = input.validity;
+          // if the input is invalid, show the correct error
+          if (!validState.valid) {
+              // loop through the error reasons
+              for (const state in validState) {
+                  // if there is an error and corresponding attribute holding
+                  // the message
+                  if (validState[state]) {
+                      this.validationError = state.toString();
+                      // set the validity error reason and the corresponding
+                      // message
+                      this._internals.setValidity({ [this.validationError]: true }, input.validationMessage, input);
+                  }
+              }
+          }
+          else {
+              this._internals.setValidity({});
           }
-      }
-      _handleInvalid(e) {
-          e.preventDefault();
-          this.invalid = true;
-      }
-      /** @internal */
-      handleDisabledChange() {
-          // Disabled form controls are always valid, so we need to recheck validity when the state changes
-          this.input.disabled = this.disabled;
-          this.invalid = !this.input.checkValidity();
-      }
-      /** @internal */
-      handleStateChange() {
-          this.invalid = !this.input.checkValidity();
-      }
-      render() {
-          return html$1 `
-      <div
-        class=${classMap({
-            "form-check": true
-        })}
-      >
-        <input
-          class=${classMap({
-            "form-check-input": true,
-            "is-invalid": this.hasFeedback && this.invalid,
-            md: this._size === "md"
-        })}
-          type="checkbox"
-          id=${this._inputId}
-          aria-invalid=${this.invalid ? "true" : "false"}
-          name=${ifDefined(this.name)}
-          value=${ifDefined(this.value)}
-          ?checked=${this.checked}
-          ?indeterminate=${this.indeterminate}
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-          aria-disabled=${this.disabled ? "true" : "false"}
-          aria-checked=${this.checked ? "true" : "false"}
-          @change=${this._handleChange}
-          @keydown=${this._handleKeyDown}
-          @invalid=${(e) => this._handleInvalid(e)}
-        />
-        <label for="${this._inputId}" aria-label=${ifDefined(this.ariaLabel)} class="form-check-label"
-          ><slot></slot
-        ></label>
-      </div>
-    `;
       }
   }
-  __decorate([
-      query('input[type="checkbox"]')
-  ], FormCheckElement.prototype, "input", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], FormCheckElement.prototype, "name", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], FormCheckElement.prototype, "ariaLabel", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], FormCheckElement.prototype, "value", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormCheckElement.prototype, "required", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormCheckElement.prototype, "checked", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormCheckElement.prototype, "disabled", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormCheckElement.prototype, "hasFeedback", void 0);
-  __decorate([
-      defaultValue("checked")
-  ], FormCheckElement.prototype, "defaultChecked", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormCheckElement.prototype, "invalid", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormCheckElement.prototype, "indeterminate", void 0);
-  __decorate([
-      watch("invalid", { waitUntilFirstUpdate: true })
-  ], FormCheckElement.prototype, "_handleInvalidChange", null);
-  __decorate([
-      property({ type: String })
-  ], FormCheckElement.prototype, "_size", void 0);
-  __decorate([
-      watch("disabled", { waitUntilFirstUpdate: true })
-  ], FormCheckElement.prototype, "handleDisabledChange", null);
-  __decorate([
-      watch("checked", { waitUntilFirstUpdate: true })
-  ], FormCheckElement.prototype, "handleStateChange", null);
 
-  var css_248z$V = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md)}.form-check-input:focus,.form-check-input:focus-visible{box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-bg)}`;
+  /**
+   * @summary The FormValidationMixin used by the form components
+   * @param superClass
+   * @returns
+   */
+  const SgdsFormValidatorMixin = (superClass) => {
+      class ToBeValidatedElement extends superClass {
+          constructor() {
+              super(...arguments);
+              this._isTouched = false;
+          }
+          connectedCallback() {
+              super.connectedCallback();
+              this.inputValidationController = new InputValidationController(this);
+          }
+          async firstUpdated(changedProperties) {
+              super.firstUpdated(changedProperties);
+              /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */
+              this.input =
+                  this.shadowRoot.querySelector("input") || (await this.sgdsInput) || this.shadowRoot.querySelector("textarea");
+              this._mixinValidate(this.input);
+          }
+          /**
+           * Native lifecycle of Form-Associated Custom Element Callbacks
+           */
+          formResetCallback() {
+              if (this._mixinResetFormControl) {
+                  this._mixinResetFormControl();
+              }
+              else {
+                  this.value = this.defaultValue;
+                  this._mixinResetValidity(this.input);
+              }
+              this._mixinSetFormValue();
+          }
+          /**
+           *
+           * Methods use by classes using this mixin
+           */
+          /**
+           * OnChange of form component
+           * 1. Make value of control accessible via FormData
+           * 2. Run change handler
+           */
+          _mixinHandleChange(e) {
+              this._mixinSetFormValue();
+              this.inputValidationController.handleChange(e);
+          }
+          /**
+           * OnChange of form component
+           * 1. Make value of control accessible via FormData
+           * 2. Run input handler
+           */
+          _mixinHandleInputChange(e) {
+              this._mixinSetFormValue();
+              this.inputValidationController.handleInput(e);
+          }
+          /**
+           * During form resetting,
+           * 1. ValidityState is reset
+           * 2. invalid reactive prop is updated after the reset
+           * 3. Revalidates the ValidityState (but do not update invalid prop)
+           * to prepare for the next validity check
+           * 4. Reset touched state to false for a pristine form
+           */
+          _mixinResetValidity(input) {
+              this.inputValidationController.resetValidity();
+              this.inputValidationController.updateInvalidState();
+              this.inputValidationController.validateInput(input);
+              this._isTouched ? (this._isTouched = false) : null;
+          }
+          _mixinValidate(input) {
+              this.inputValidationController.validateInput(input);
+          }
+          _mixinSetFormValue() {
+              this.inputValidationController.setFormValue();
+          }
+          _mixinCheckValidity() {
+              return this.inputValidationController.checkValidity();
+          }
+          _mixinReportValidity() {
+              return this.inputValidationController.reportValidity();
+          }
+          _mixinGetValidity() {
+              return this.inputValidationController.validity;
+          }
+          _mixinGetValidationMessage() {
+              return this.inputValidationController.validationMessage;
+          }
+      }
+      ToBeValidatedElement.formAssociated = true;
+      __decorate([
+          queryAsync("sgds-input")
+      ], ToBeValidatedElement.prototype, "sgdsInput", void 0);
+      return ToBeValidatedElement;
+  };
+
+  var css_248z$S = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md)}.form-check-input:focus,.form-check-input:focus-visible{box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-bg)}.form-check-input:indeterminate.is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-bg)}`;
 
   /**
    * @summary Checkbox component is used when you require users to select multiple items from a list.
@@ -6148,36 +6119,29 @@
    * @slot default - The label of checkbox.
    *
    * @event sgds-change - Emitted when the checked state changes.
+   * @event sgds-blur - Emitted when input is not in focus.
+   * @event sgds-focus - Emitted when input is in focus.
    * @event sgds-validity-change - Emitted when the invalid state changes. This event is used by sgds-checkbox-group to check the invalid state change of its children
    */
-  class SgdsCheckbox extends SgdsElement {
+  class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) {
       constructor() {
           super(...arguments);
-          /**@internal */
-          this.formSubmitController = new FormSubmitController(this, {
-              value: (control) => (control.checked ? control.value : undefined),
-              defaultValue: (control) => control.defaultChecked,
-              setValue: (control, checked) => (control.checked = checked)
-          });
-          /** Makes the checkbox a required field. */
-          this.required = false;
           /** Draws the checkbox in a checked state. */
           this.checked = false;
-          /** Disables the checkbox (so the user can't check / uncheck it). */
-          this.disabled = false;
           /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
           this.hasFeedback = false;
           /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
           this.defaultChecked = false;
-          /** Marks the checkbox input as invalid. Replace the pseudo :invalid selector for absent in custom elements */
-          this.invalid = false;
           /** Marks the checkbox input as indeterminate , with indeterminate logo  */
           this.indeterminate = false;
-          /** @internal For Id/For pair of the HTML form control and label. */
-          this._inputId = genId("checkbox");
+          /** Makes the checkbox a required field. */
+          this.required = false;
+          this._isTouched = false;
       }
       _handleInvalidChange() {
-          this.emit("sgds-validity-change", { detail: { invalid: this.invalid } });
+          this.emit("sgds-validity-change", {
+              detail: { invalid: this.invalid, validationMessage: this.input.validationMessage }
+          });
       }
       /** Simulates a click on the checkbox. */
       click() {
@@ -6191,19 +6155,13 @@
       blur() {
           this.input.blur();
       }
-      /** Checks for validity and shows the browser's validation message if the control is invalid. */
-      reportValidity() {
-          if (!this.input.reportValidity()) {
-              this.invalid = !this.input.checkValidity();
-          }
-          return this.input.reportValidity();
-      }
-      _handleChange() {
+      _handleChange(e) {
           if (this.indeterminate) {
               this.indeterminate = !this.indeterminate;
           }
           this.checked = !this.checked;
           this.value = this.input.value;
+          super._mixinHandleChange(e);
           this.emit("sgds-change", { detail: { checked: this.checked, value: this.value } });
       }
       _handleKeyDown(event) {
@@ -6212,6 +6170,13 @@
               this.click();
           }
       }
+      _handleBlur() {
+          this._isTouched = true;
+          this.emit("sgds-blur");
+      }
+      _handleFocus() {
+          this.emit("sgds-focus");
+      }
       _handleInvalid(e) {
           e.preventDefault();
           this.invalid = true;
@@ -6219,12 +6184,43 @@
       /** @internal */
       _handleDisabledChange() {
           // Disabled form controls are always valid, so we need to recheck validity when the state changes
-          this.input.disabled = this.disabled;
-          this.invalid = !this.input.checkValidity();
+          this.setInvalid(false);
       }
-      /** @internal */
-      _handleStateChange() {
-          this.invalid = !this.input.checkValidity();
+      _handleIsTouched() {
+          if (this._isTouched) {
+              this.invalid = !this.input.checkValidity();
+          }
+      }
+      _mixinResetFormControl() {
+          this._isTouched = false;
+          this.checked = this.input.checked = this.defaultChecked;
+          this.input.dispatchEvent(new InputEvent("reset"));
+          this._mixinResetValidity(this.input);
+      }
+      /**
+       * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+       * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
+       */
+      reportValidity() {
+          return this._mixinReportValidity();
+      }
+      /**
+       * Checks for validity without any native error popup message
+       */
+      checkValidity() {
+          return this._mixinCheckValidity();
+      }
+      /**
+       * Returns the ValidityState object
+       */
+      get validity() {
+          return this._mixinGetValidity();
+      }
+      /**
+       * Returns the validation message based on the ValidityState
+       */
+      get validationMessage() {
+          return this._mixinGetValidationMessage();
       }
       render() {
           return html$1 `
@@ -6236,45 +6232,35 @@
             "is-invalid": this.hasFeedback && this.invalid
         })}
             type="checkbox"
-            id=${this._inputId}
+            id=${this._controlId}
             aria-invalid=${this.invalid ? "true" : "false"}
             name=${ifDefined(this.name)}
-            value=${ifDefined(this.value)}
-            ?checked=${this.checked}
             ?indeterminate=${this.indeterminate}
-            ?disabled=${this.disabled}
             ?required=${this.required}
             aria-disabled=${this.disabled ? "true" : "false"}
             aria-checked=${this.checked ? "true" : "false"}
-            @change=${this._handleChange}
+            @change=${(e) => this._handleChange(e)}
             @keydown=${this._handleKeyDown}
             @invalid=${(e) => this._handleInvalid(e)}
+            .checked=${live(this.checked)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            @blur=${this._handleBlur}
+            @focus=${this._handleFocus}
           />
         </div>
-        <label for="${this._inputId}" class="form-check-label"><slot></slot></label>
+        <label for="${this._controlId}" class="form-check-label" id="${this._labelId}"><slot></slot></label>
       </div>
     `;
       }
   }
-  SgdsCheckbox.styles = [...FormCheckElement.styles, css_248z$V];
-  __decorate([
-      query('input[type="checkbox"]')
-  ], SgdsCheckbox.prototype, "input", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], SgdsCheckbox.prototype, "name", void 0);
+  SgdsCheckbox.styles = [...FormControlElement.styles, css_248z$S];
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsCheckbox.prototype, "value", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsCheckbox.prototype, "required", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsCheckbox.prototype, "checked", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsCheckbox.prototype, "disabled", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsCheckbox.prototype, "hasFeedback", void 0);
@@ -6283,10 +6269,13 @@
   ], SgdsCheckbox.prototype, "defaultChecked", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
-  ], SgdsCheckbox.prototype, "invalid", void 0);
+  ], SgdsCheckbox.prototype, "indeterminate", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
-  ], SgdsCheckbox.prototype, "indeterminate", void 0);
+  ], SgdsCheckbox.prototype, "required", void 0);
+  __decorate([
+      state()
+  ], SgdsCheckbox.prototype, "_isTouched", void 0);
   __decorate([
       watch("invalid", { waitUntilFirstUpdate: true })
   ], SgdsCheckbox.prototype, "_handleInvalidChange", null);
@@ -6294,12 +6283,10 @@
       watch("disabled", { waitUntilFirstUpdate: true })
   ], SgdsCheckbox.prototype, "_handleDisabledChange", null);
   __decorate([
-      watch("checked", { waitUntilFirstUpdate: true })
-  ], SgdsCheckbox.prototype, "_handleStateChange", null);
-
-  var css_248z$U = css`:host{outline:0}input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:50%;height:var(--sgds-form-height-sm);width:var(--sgds-form-height-sm)}.form-check-input:not([disabled]):not(.is-invalid):not([aria-checked=true]):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg);border:var(--sgds-form-border-width-default) solid var(--sgds-default-border-color-transparent)}.form-check-input:not([disabled]):not(.is-invalid):checked:focus-visible,.form-check-input:not([disabled]):not(.is-invalid):checked:hover,.form-check-input:not([disabled]):not(.is-invalid)[checked]:focus-visible,.form-check-input:not([disabled]):not(.is-invalid)[checked]:hover{background-color:var(--sgds-form-primary-bg-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input:not([disabled]).is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-bg)}`;
+      watch("_isTouched", { waitUntilFirstUpdate: true })
+  ], SgdsCheckbox.prototype, "_handleIsTouched", null);
 
-  var css_248z$T = css`.form-label{margin-bottom:0}.form-check-label,.form-label{color:var(--sgds-form-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
+  var css_248z$R = css`:host{outline:0}input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:50%;height:var(--sgds-form-height-sm);width:var(--sgds-form-height-sm)}.form-check-input:not([disabled]):not(.is-invalid):not([aria-checked=true]):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg);border:var(--sgds-form-border-width-default) solid var(--sgds-default-border-color-transparent)}.form-check-input:not([disabled]):not(.is-invalid):checked:focus-visible,.form-check-input:not([disabled]):not(.is-invalid):checked:hover,.form-check-input:not([disabled]):not(.is-invalid)[checked]:focus-visible,.form-check-input:not([disabled]):not(.is-invalid)[checked]:hover{background-color:var(--sgds-form-primary-bg-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input:not([disabled]).is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-bg)}`;
 
   /**
    * @summary Radio allows the user to select one option from a set while seeing all available options.
@@ -6385,7 +6372,7 @@
     `;
       }
   }
-  SgdsRadio.styles = [...SgdsElement.styles, css_248z$T, css_248z$U];
+  SgdsRadio.styles = [...SgdsElement.styles, css_248z$U, css_248z$R];
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsRadio.prototype, "checked", void 0);
@@ -6408,7 +6395,7 @@
       watch("disabled", { waitUntilFirstUpdate: true })
   ], SgdsRadio.prototype, "handleDisabledChange", null);
 
-  var css_248z$S = css`.sgds.card[variant*=card-action]{transition-duration:.3s;transition-property:box-shadow,border-color;transition-timing-function:ease-in-out}.card-body{display:flex;flex-direction:column;gap:var(--sgds-spacer-3)}slot[name=icon]::slotted(*){margin-right:1rem}.sgds.card[variant*=card-action].is-active,.sgds.card[variant*=card-action]:hover{border-color:transparent;box-shadow:var(--sgds-box-shadow),inset 0 0 0 2.1px var(--sgds-link)}.sgds.card[variant*=card-action] .card-subtitle{align-items:center;display:flex;justify-content:space-between}.sgds.card[variant*=card-action] .card-title{color:var(--sgds-body-color);margin-bottom:0}`;
+  var css_248z$Q = css`.sgds.card[variant*=card-action]{transition-duration:.3s;transition-property:box-shadow,border-color;transition-timing-function:ease-in-out}.card-body{display:flex;flex-direction:column;gap:var(--sgds-spacer-3)}slot[name=icon]::slotted(*){margin-right:1rem}.sgds.card[variant*=card-action].is-active,.sgds.card[variant*=card-action]:hover{border-color:transparent;box-shadow:var(--sgds-box-shadow),inset 0 0 0 2.1px var(--sgds-link)}.sgds.card[variant*=card-action] .card-subtitle{align-items:center;display:flex;justify-content:space-between}.sgds.card[variant*=card-action] .card-title{color:var(--sgds-body-color);margin-bottom:0}`;
 
   /**
    * @summary Action Card are cards with built in checkbox or radio components. The ref of input is extended to the Card's body.
@@ -6522,7 +6509,7 @@
     `;
       }
   }
-  SgdsActionCard.styles = [...CardElement.styles, css_248z$S];
+  SgdsActionCard.styles = [...CardElement.styles, css_248z$Q];
   __decorate([
       property({ reflect: true })
   ], SgdsActionCard.prototype, "name", void 0);
@@ -6548,7 +6535,7 @@
       watch("disabled")
   ], SgdsActionCard.prototype, "handleDisabledChange", null);
 
-  var css_248z$R = 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$P = 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)}`;
 
   /**
    * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.
@@ -6567,37 +6554,164 @@
               return;
           };
       }
-      _handleClick() {
-          this.removeEventListener("click", this._clickHandler);
-          this.addEventListener("click", this._clickHandler);
+      _handleClick() {
+          this.removeEventListener("click", this._clickHandler);
+          this.addEventListener("click", this._clickHandler);
+      }
+      render() {
+          return html$1 `
+      <button
+        class=${classMap({
+            "btn-close": true,
+            [`btn-close-${this.size}`]: this.size,
+            "btn-close-light": this.variant === "light",
+            "btn-close-dark": this.variant === "dark"
+        })}
+        aria-label=${ifDefined(this.ariaLabel)}
+        @click=${this._handleClick}
+      ></button>
+    `;
+      }
+  }
+  SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$P];
+  __decorate([
+      property({ type: String })
+  ], SgdsCloseButton.prototype, "ariaLabel", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsCloseButton.prototype, "size", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsCloseButton.prototype, "variant", void 0);
+
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const HTML_RESULT = 1;
+  class UnsafeHTMLDirective extends Directive {
+      constructor(partInfo) {
+          super(partInfo);
+          this._value = nothing;
+          if (partInfo.type !== PartType.CHILD) {
+              throw new Error(`${this.constructor.directiveName}() can only be used in child bindings`);
+          }
+      }
+      render(value) {
+          if (value === nothing || value == null) {
+              this._templateResult = undefined;
+              return (this._value = value);
+          }
+          if (value === noChange) {
+              return value;
+          }
+          if (typeof value != 'string') {
+              throw new Error(`${this.constructor.directiveName}() called with a non-string value`);
+          }
+          if (value === this._value) {
+              return this._templateResult;
+          }
+          this._value = value;
+          const strings = [value];
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          strings.raw = strings;
+          // WARNING: impersonating a TemplateResult like this is extremely
+          // dangerous. Third-party directives should not do this.
+          return (this._templateResult = {
+              // Cast to a known set of integers that satisfy ResultType so that we
+              // don't have to export ResultType and possibly encourage this pattern.
+              // This property needs to remain unminified.
+              ['_$litType$']: this.constructor
+                  .resultType,
+              strings,
+              values: [],
+          });
+      }
+  }
+  UnsafeHTMLDirective.directiveName = 'unsafeHTML';
+  UnsafeHTMLDirective.resultType = HTML_RESULT;
+
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const SVG_RESULT = 2;
+  class UnsafeSVGDirective extends UnsafeHTMLDirective {
+  }
+  UnsafeSVGDirective.directiveName = 'unsafeSVG';
+  UnsafeSVGDirective.resultType = SVG_RESULT;
+  /**
+   * Renders the result as SVG, rather than text.
+   *
+   * The values `undefined`, `null`, and `nothing`, will all result in no content
+   * (empty string) being rendered.
+   *
+   * Note, this is unsafe to use with any user-provided input that hasn't been
+   * sanitized or escaped, as it may lead to cross-site-scripting
+   * vulnerabilities.
+   */
+  const unsafeSVG = directive(UnsafeSVGDirective);
+
+  var css_248z$O = css`:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
+
+  /**
+   * @summary Icons offer a form of visual shorthand that we are all familiar with. They can label, inform and aid navigation quickly and effectively in minimal space. Icons must first and foremost communicate meaning. By default, the icon component renders icons form SgdsIcon library set
+   *
+   * @event sgds-blur - Emitted when the button is blurred.
+   * @event sgds-focus - Emitted when the button is focused.
+   */
+  class SgdsIcon extends SgdsElement {
+      constructor() {
+          super(...arguments);
+          /** Specifies a small, medium or large icon, the size is medium by default. */
+          this.size = "lg";
+          /** @internal */
+          this._svgContent = null;
+      }
+      async firstUpdated() {
+          if (this.name) {
+              this.loadSvg(this.name);
+          }
+      }
+      updated() {
+          this.style.display = this._svgContent ? "flex" : "none";
+      }
+      async loadSvg(name) {
+          if (name) {
+              // Dynamically import the SVG if not cached
+              try {
+                  //TODO: This path is too specific to our repo, it won't work for users
+                  const response = await fetch(`/src/icons/${name}.svg`);
+                  if (response.ok) {
+                      const svgContent = await response.text();
+                      // Render the SVG
+                      // this.renderSvg(svgContent);
+                      this._svgContent = svgContent;
+                  }
+              }
+              catch (error) {
+                  console.error(`Error loading SVG: ${name}`, error);
+              }
+          }
       }
       render() {
-          return html$1 `
-      <button
-        class=${classMap({
-            "btn-close": true,
-            [`btn-close-${this.size}`]: this.size,
-            "btn-close-light": this.variant === "light",
-            "btn-close-dark": this.variant === "dark"
-        })}
-        aria-label=${ifDefined(this.ariaLabel)}
-        @click=${this._handleClick}
-      ></button>
-    `;
+          return html `${unsafeSVG(this._svgContent)}`;
       }
   }
-  SgdsCloseButton.styles = [css_248z$R];
-  __decorate([
-      property({ type: String })
-  ], SgdsCloseButton.prototype, "ariaLabel", void 0);
+  SgdsIcon.styles = [...SgdsElement.styles, css_248z$O];
   __decorate([
       property({ type: String, reflect: true })
-  ], SgdsCloseButton.prototype, "size", void 0);
+  ], SgdsIcon.prototype, "name", void 0);
   __decorate([
       property({ type: String, reflect: true })
-  ], SgdsCloseButton.prototype, "variant", void 0);
+  ], SgdsIcon.prototype, "size", void 0);
+  __decorate([
+      state()
+  ], SgdsIcon.prototype, "_svgContent", void 0);
 
-  var css_248z$Q = css`:host{--sgds-alert-bg:var(--sgds-primary-bg);--sgds-alert-color:var(--sgds-default-color-on-dark);--sgds-alert-border-radius:var(--sgds-border-radius-md)}:host([variant=success]){--sgds-alert-bg:var(--sgds-success-bg)}:host([variant=warning]){--sgds-alert-bg:var(--sgds-warning-bg)}:host([variant=danger]){--sgds-alert-bg:var(--sgds-danger-bg)}:host([variant=neutral]){--sgds-alert-bg:var(--sgds-neutral-bg)}:host([outlined]){--sgds-alert-color:var(--sgds-default-color-on-light)}:host([variant=info][outlined]){--sgds-alert-bg:var(--sgds-primary-bg-subtle);--sgds-alert-border-color:var(--sgds-primary-border-color-subtle)}:host([variant=success][outlined]){--sgds-alert-bg:var(--sgds-success-bg-subtle);--sgds-alert-border-color:var(--sgds-success-border-color-subtle)}:host([variant=warning][outlined]){--sgds-alert-bg:var(--sgds-warning-bg-subtle);--sgds-alert-border-color:var(--sgds-warning-border-color-subtle)}:host([variant=danger][outlined]){--sgds-alert-bg:var(--sgds-danger-bg-subtle);--sgds-alert-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=neutral][outlined]){--sgds-alert-bg:var(--sgds-neutral-bg-subtle);--sgds-alert-border-color:var(--sgds-neutral-border-color-subtle)}slot[name=icon]{display:flex}slot[name=icon].d-none{display:none}slot[name=icon]::slotted(*){height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}.alert{background-color:var(--sgds-alert-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-alert-border-radius);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg)}.alert.outlined{border:var(--sgds-border-width-1) solid var(--sgds-alert-border-color)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-2-xs);justify-content:center;padding-right:var(--sgds-padding-2-xl)}.alert-title{font-weight:var(--sgds-font-weight-semibold)}`;
+  var css_248z$N = css`:host{--sgds-alert-bg:var(--sgds-primary-bg);--sgds-alert-color:var(--sgds-default-color-on-dark);--sgds-alert-border-radius:var(--sgds-border-radius-md)}:host([variant=success]){--sgds-alert-bg:var(--sgds-success-bg)}:host([variant=warning]){--sgds-alert-bg:var(--sgds-warning-bg)}:host([variant=danger]){--sgds-alert-bg:var(--sgds-danger-bg)}:host([variant=neutral]){--sgds-alert-bg:var(--sgds-neutral-bg)}:host([outlined]){--sgds-alert-color:var(--sgds-default-color-on-light)}:host([variant=info][outlined]){--sgds-alert-bg:var(--sgds-primary-bg-subtle);--sgds-alert-border-color:var(--sgds-primary-border-color-subtle)}:host([variant=success][outlined]){--sgds-alert-bg:var(--sgds-success-bg-subtle);--sgds-alert-border-color:var(--sgds-success-border-color-subtle)}:host([variant=warning][outlined]){--sgds-alert-bg:var(--sgds-warning-bg-subtle);--sgds-alert-border-color:var(--sgds-warning-border-color-subtle)}:host([variant=danger][outlined]){--sgds-alert-bg:var(--sgds-danger-bg-subtle);--sgds-alert-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=neutral][outlined]){--sgds-alert-bg:var(--sgds-neutral-bg-subtle);--sgds-alert-border-color:var(--sgds-neutral-border-color-subtle)}slot[name=icon]::slotted(*){color:var(--sgds-alert-color)}.alert{background-color:var(--sgds-alert-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-alert-border-radius);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg)}.alert.outlined{border:var(--sgds-border-width-1) solid var(--sgds-alert-border-color)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-2-xs);justify-content:center;padding-right:var(--sgds-padding-2-xl)}.alert-title{font-weight:var(--sgds-font-weight-semibold)}`;
 
   /**
    * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.
@@ -6624,7 +6738,8 @@
       /**@internal */
       static get scopedElements() {
           return {
-              "sgds-close-button": SgdsCloseButton
+              "sgds-close-button": SgdsCloseButton,
+              "sgds-icon": SgdsIcon
           };
       }
       /** Closes the alert  */
@@ -6635,14 +6750,8 @@
       _handleShowChange() {
           this.show ? this.emit("sgds-show") : this.emit("sgds-hide");
       }
-      firstUpdated() {
-          var _a;
-          if (this._iconNodes.length === 0) {
-              return (_a = this.shadowRoot.querySelector("slot[name='icon']")) === null || _a === void 0 ? void 0 : _a.classList.add("d-none");
-          }
-      }
       render() {
-          return this.show
+          return (this.dismissible && this.show) || !this.dismissible
               ? html `
           <div
             class="${classMap({
@@ -6671,7 +6780,7 @@
               : nothing;
       }
   }
-  SgdsAlert.styles = [...SgdsElement.styles, css_248z$Q];
+  SgdsAlert.styles = [...SgdsElement.styles, css_248z$N];
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsAlert.prototype, "show", void 0);
@@ -6690,13 +6799,10 @@
   __decorate([
       watch("show")
   ], SgdsAlert.prototype, "_handleShowChange", null);
-  __decorate([
-      queryAssignedNodes({ slot: "icon", flatten: true })
-  ], SgdsAlert.prototype, "_iconNodes", void 0);
 
-  var css_248z$P = css`:host{cursor:pointer;display:inline-block}.alert-link,.alert-link:hover{color:var(--sgds-alert-color);text-decoration-line:underline}.alert-link:focus,.alert-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
+  var css_248z$M = css`:host{cursor:pointer;display:inline-block}.alert-link,.alert-link:hover{color:var(--sgds-alert-color);text-decoration-line:underline}.alert-link:focus,.alert-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
 
-  var css_248z$O = css`a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}`;
+  var css_248z$L = css`a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}`;
 
   /**
    * @summary Alert link are used within the alert's message that is passed into the default slot of `<sgds-alert>`
@@ -6710,7 +6816,7 @@
     `;
       }
   }
-  SgdsAlertLink.styles = [...SgdsElement.styles, css_248z$O, css_248z$P];
+  SgdsAlertLink.styles = [...SgdsElement.styles, css_248z$L, css_248z$M];
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsAlertLink.prototype, "href", void 0);
@@ -6718,14 +6824,13 @@
       property()
   ], SgdsAlertLink.prototype, "target", void 0);
 
-  var css_248z$N = css`:host{--sgds-badge-bg:var(--sgds-primary-bg);--sgds-badge-color:var(--sgds-default-color-on-dark);--sgds-badge-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([variant=success]){--sgds-badge-bg:var(--sgds-success-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=danger]){--sgds-badge-bg:var(--sgds-danger-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=warning]){--sgds-badge-bg:var(--sgds-warning-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=neutral]){--sgds-badge-bg:var(--sgds-neutral-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=info][outlined]){--sgds-badge-bg:var(--sgds-primary-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-primary-border-color-subtle)}:host([variant=success][outlined]){--sgds-badge-bg:var(--sgds-success-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-success-border-color-subtle)}:host([variant=danger][outlined]){--sgds-badge-bg:var(--sgds-danger-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=warning][outlined]){--sgds-badge-bg:var(--sgds-danger-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=neutral][outlined]){--sgds-badge-bg:var(--sgds-neutral-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-neutral-border-color-subtle)}.badge{align-items:center;background-color:var(--sgds-badge-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-badge-border-radius);color:var(--sgds-badge-color);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24);justify-content:center;min-width:var(---sgds-dimension-24);padding:0 var(--sgds-padding-2-xs)}.badge.outlined{border:var(--sgds-border-width-1) solid var(--sgds-badge-border-color)}.badge-label{padding:0 var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-badge-border-radius)}slot[name=leftIcon]::slotted(*){font-size:var(--sgds-icon-size-sm)}slot::slotted(*){font-size:14px;font-weight:400}`;
+  var css_248z$K = css`:host{--sgds-badge-bg:var(--sgds-primary-bg);--sgds-badge-color:var(--sgds-default-color-on-dark);--sgds-badge-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([variant=success]){--sgds-badge-bg:var(--sgds-success-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=danger]){--sgds-badge-bg:var(--sgds-danger-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=warning]){--sgds-badge-bg:var(--sgds-warning-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=neutral]){--sgds-badge-bg:var(--sgds-neutral-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=info][outlined]){--sgds-badge-bg:var(--sgds-primary-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-primary-border-color-subtle)}:host([variant=success][outlined]){--sgds-badge-bg:var(--sgds-success-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-success-border-color-subtle)}:host([variant=danger][outlined]){--sgds-badge-bg:var(--sgds-danger-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=warning][outlined]){--sgds-badge-bg:var(--sgds-danger-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-warning-border-color-subtle)}:host([variant=neutral][outlined]){--sgds-badge-bg:var(--sgds-neutral-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-neutral-border-color-subtle)}.badge{align-items:center;background-color:var(--sgds-badge-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-badge-border-radius);color:var(--sgds-badge-color);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24);justify-content:center;min-width:var(---sgds-dimension-24);padding:0 var(--sgds-padding-2-xs)}.badge.outlined{border:var(--sgds-border-width-1) solid var(--sgds-badge-border-color)}.badge-label{padding:0 var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-badge-border-radius)}slot[name=icon]::slotted(*){color:var(--sgds-badge-color)}slot::slotted(*){font-size:14px;font-weight:400}`;
 
   /**
    * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
    *
    * @slot default - slot for badge
-   * @slot leftIcon - The slot for icon to the left of the badge text
-   * @slot rightIcon - The slot for icon to the right of the badge text
+   * @slot icon - The slot for icon to the left of the badge text
    *
    * @event sgds-show - Emitted when the badge appears.
    * @event sgds-hide - Emitted after the badge closes.
@@ -6733,13 +6838,13 @@
   class SgdsBadge extends ScopedElementsMixin(SgdsElement) {
       constructor() {
           super(...arguments);
-          /** Controls the appearance of the alert  */
+          /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */
           this.show = false;
-          /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `primary`, `info`, `success`, `danger`, `warning`, 'neutral' */
+          /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */
           this.variant = "info";
           /** Manually set the outlined state to false */
           this.outlined = false;
-          /** Manually set the dismissable state of the button to `false` */
+          /** Manually set the dismissible state of the button to `false` */
           this.dismissible = false;
       }
       /**@internal */
@@ -6769,7 +6874,7 @@
             "
             aria-hidden=${this.show ? "false" : "true"}
           >
-            ${!this.dismissible ? html$1 `<slot name="leftIcon"></slot>` : nothing}
+            ${!this.dismissible ? html$1 `<slot name="icon"></slot>` : nothing}
             <span class="badge-label">
               <slot></slot>
             </span>
@@ -6787,7 +6892,7 @@
               : nothing;
       }
   }
-  SgdsBadge.styles = [...SgdsElement.styles, css_248z$N];
+  SgdsBadge.styles = [...SgdsElement.styles, css_248z$K];
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsBadge.prototype, "show", void 0);
@@ -6804,7 +6909,7 @@
       watch("show")
   ], SgdsBadge.prototype, "_handleShowChange", null);
 
-  var css_248z$M = css`.breadcrumb{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:var(--sgds-spacer-0) var(--sgds-spacer-0)}`;
+  var css_248z$J = css`.breadcrumb{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:var(--sgds-spacer-0) var(--sgds-spacer-0)}`;
 
   /**
    * @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.
@@ -6867,7 +6972,7 @@
     `;
       }
   }
-  SgdsBreadcrumb.styles = [...SgdsElement.styles, css_248z$M];
+  SgdsBreadcrumb.styles = [...SgdsElement.styles, css_248z$J];
   __decorate([
       property({ type: String })
   ], SgdsBreadcrumb.prototype, "ariaLabel", void 0);
@@ -6878,7 +6983,7 @@
       query('slot[name="separator"]')
   ], SgdsBreadcrumb.prototype, "separatorSlot", void 0);
 
-  var css_248z$L = css`:host{font-size:var(--sgds-body-font-size)}slot[name=separator]::slotted(*){color:var(--sgds-body-color);padding-left:var(--sgds-spacer-3);padding-right:var(--sgds-spacer-3)}:host(:last-of-type) .breadcrumb-item__separator{display:none}.breadcrumb-item.active{color:var(--sgds-body-color)}`;
+  var css_248z$I = css`:host{font-size:var(--sgds-body-font-size)}slot[name=separator]::slotted(*){color:var(--sgds-body-color);padding-left:var(--sgds-spacer-3);padding-right:var(--sgds-spacer-3)}:host(:last-of-type) .breadcrumb-item__separator{display:none}.breadcrumb-item.active{color:var(--sgds-body-color)}`;
 
   /**
    * @summary Breadcrumb Item are navigational links used in Breadcrumb component
@@ -6922,7 +7027,7 @@
     `;
       }
   }
-  SgdsBreadcrumbItem.styles = [...SgdsElement.styles, css_248z$O, css_248z$L];
+  SgdsBreadcrumbItem.styles = [...SgdsElement.styles, css_248z$L, css_248z$I];
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsBreadcrumbItem.prototype, "href", void 0);
@@ -6933,7 +7038,7 @@
       property()
   ], SgdsBreadcrumbItem.prototype, "rel", void 0);
 
-  var css_248z$K = 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$H = 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)}`;
 
   class ButtonElement extends SgdsElement {
       constructor() {
@@ -6975,7 +7080,7 @@
           }
       }
   }
-  ButtonElement.styles = [...SgdsElement.styles, css_248z$K];
+  ButtonElement.styles = [...SgdsElement.styles, css_248z$H];
   __decorate([
       query(".btn")
   ], ButtonElement.prototype, "button", void 0);
@@ -7004,7 +7109,64 @@
       property({ type: String })
   ], ButtonElement.prototype, "ariaLabel", void 0);
 
-  var css_248z$J = css`:host{display:inline-flex}.btn.full-width,:host([fullWidth]){max-width:var(--sgds-dimension-320);width:100%}.btn.full-width.has-left-icon{justify-content:flex-start}.btn.full-width.has-right-icon{justify-content:space-between}.btn.full-width.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}`;
+  /**
+   * A controller to help with form submission
+   */
+  class FormSubmitController {
+      constructor(host, options) {
+          (this.host = host).addController(this);
+          this.options = Object.assign({ form: (input) => {
+                  return input.closest("form");
+              } }, options);
+      }
+      hostConnected() {
+          this.form = this.options.form(this.host);
+      }
+      hostDisconnected() {
+          if (this.form) {
+              this.form = undefined;
+          }
+      }
+      /**
+       * Creates a temporary native HTML button that can participate in form and invoke form submits and reset
+       * Button is removed once action is performed
+       */
+      doAction(type, invoker) {
+          if (this.form) {
+              const button = document.createElement("button");
+              button.type = type;
+              button.style.position = "absolute";
+              button.style.width = "0";
+              button.style.height = "0";
+              button.style.clipPath = "inset(50%)";
+              button.style.overflow = "hidden";
+              button.style.whiteSpace = "nowrap";
+              // Pass form attributes through to the temporary button
+              if (invoker) {
+                  ["formaction", "formmethod", "formnovalidate", "formtarget"].forEach(attr => {
+                      if (invoker.hasAttribute(attr)) {
+                          button.setAttribute(attr, invoker.getAttribute(attr));
+                      }
+                  });
+              }
+              this.form.append(button);
+              button.click();
+              button.remove();
+          }
+      }
+      /** Resets the form, restoring all the control to their default value */
+      reset(invoker) {
+          this.doAction("reset", invoker);
+      }
+      /** Submits the form, triggering validation and form data injection. */
+      submit(invoker) {
+          // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a
+          // native submit button into the form, "click" it, then remove it to simulate a standard form submission.
+          this.doAction("submit", invoker);
+      }
+  }
+
+  var css_248z$G = css`:host{display:inline-flex}.btn.full-width,:host([fullWidth]){max-width:var(--sgds-dimension-320);width:100%}.btn.full-width.has-left-icon{justify-content:flex-start}.btn.full-width.has-right-icon{justify-content:space-between}.btn.full-width.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}`;
 
   /**
    * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
@@ -7108,7 +7270,7 @@
     `;
       }
   }
-  SgdsButton.styles = [...ButtonElement.styles, css_248z$O, css_248z$J];
+  SgdsButton.styles = [...ButtonElement.styles, css_248z$L, css_248z$G];
   __decorate([
       state()
   ], SgdsButton.prototype, "_hasLeftIcon", void 0);
@@ -7137,7 +7299,7 @@
       property({ type: Boolean, reflect: true })
   ], SgdsButton.prototype, "fullWidth", void 0);
 
-  var css_248z$I = css`::slotted(.stretched-link):before{bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}`;
+  var css_248z$F = css`::slotted(.stretched-link):before{bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}`;
 
   /**
    * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
@@ -7200,21 +7362,22 @@
     `;
       }
   }
-  SgdsCard.styles = [...CardElement.styles, css_248z$I];
+  SgdsCard.styles = [...CardElement.styles, css_248z$F];
   __decorate([
       property({ type: Boolean })
   ], SgdsCard.prototype, "stretchedLink", void 0);
 
-  var css_248z$H = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback{color:var(--sgds-form-danger-color);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}`;
-
-  var css_248z$G = css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}`;
-
-  var css_248z$F = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}`;
+  var css_248z$E = css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}`;
 
+  /**
+   * @summary CheckboxGroup is the container that group multiple checkboxes under a single question field.
+   * It handles the display of validation feedback of its checkboxes children.
+   *
+   * @slot default - Pass in `sgds-checkbox` into the default slot
+   */
   class SgdsCheckboxGroup extends SgdsElement {
       constructor() {
           super();
-          /**@internal */
           this.hasInvalidCheckbox = false;
           /** The checkbox group's label  */
           this.label = "";
@@ -7226,6 +7389,7 @@
           this.hintText = "";
           this.addEventListener("sgds-validity-change", (e) => {
               this.hasInvalidCheckbox = e.detail.invalid;
+              this.validationMessage = e.detail.validationMessage;
           });
       }
       _checkInvalidState() {
@@ -7253,7 +7417,7 @@
           ${this._renderHintText()}
         </div>
         <div class="checkbox-container">
-          <slot name="checkbox"></slot>
+          <slot></slot>
         </div>
         ${this.hasInvalidCheckbox && this.hasFeedback
             ? html$1 `
@@ -7264,7 +7428,9 @@
                     fill="#B90000"
                   />
                 </svg>
-                <div id="checkbox-feedback" tabindex="0" class="invalid-feedback">${this.invalidFeedback}</div>
+                <div id="checkbox-feedback" tabindex="0" class="invalid-feedback">
+                  ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}
+                </div>
               </div>
             `
             : nothing}
@@ -7272,13 +7438,16 @@
     `;
       }
   }
-  SgdsCheckboxGroup.styles = [...SgdsElement.styles, css_248z$H, css_248z$T, css_248z$G, css_248z$F];
+  SgdsCheckboxGroup.styles = [...SgdsElement.styles, css_248z$W, css_248z$U, css_248z$E, css_248z$V];
   __decorate([
-      queryAssignedElements({ slot: "checkbox", flatten: true })
+      queryAssignedElements({ flatten: true })
   ], SgdsCheckboxGroup.prototype, "checkboxes", void 0);
   __decorate([
       state()
   ], SgdsCheckboxGroup.prototype, "hasInvalidCheckbox", void 0);
+  __decorate([
+      state()
+  ], SgdsCheckboxGroup.prototype, "validationMessage", void 0);
   __decorate([
       property({ reflect: true })
   ], SgdsCheckboxGroup.prototype, "label", void 0);
@@ -10903,200 +11072,76 @@
         ?disabled=${this.disabled}
         aria-disabled=${this.disabled ? "true" : "false"}
         target=${this.target}
-      >
-        <slot></slot>
-      </a>
-    `;
-      }
-  }
-  __decorate([
-      property({ type: Boolean })
-  ], LinkElement.prototype, "active", void 0);
-  __decorate([
-      property({ type: String })
-  ], LinkElement.prototype, "href", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], LinkElement.prototype, "disabled", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], LinkElement.prototype, "target", void 0);
-
-  var css_248z$E = css`.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-bottom-right-radius:0;border-top-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.dropdown,.dropdown-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle:after{border-bottom:0;border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid;content:"";display:inline-block;margin-left:.255em;vertical-align:.255em}.dropdown-toggle:empty:after{margin-left:0}.dropdown-divider{--sgds-dropdown-divider-bg:var(--sgds-border-color-translucent);--sgds-dropdown-divider-margin-y:0.5rem;border-top:1px solid var(--sgds-dropdown-divider-bg);height:0;margin:var(--sgds-dropdown-divider-margin-y) 0;opacity:1;overflow:hidden}.dropdown-item{--sgds-dropdown-item-active-color:#fff;--sgds-dropdown-item-active-bg:var(--sgds-info);--sgds-dropdown-item-disabled-color:var(--sgds-gray-500);background-color:var(--sgds-default-bg-transparent);clear:both;color:var(--sgds-default-color);display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg);text-align:inherit;text-decoration:none;white-space:nowrap}.dropdown-item:hover{background-color:var(--sgds-default-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-default-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item.active,.dropdown-item:active{background-color:var(--sgds-primary-bg-translucent);color:var(--sgds-primary-color);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.dropdown-item-label{align-items:center;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.active-icon{margin-left:auto}.dropdown-header{--sgds-dropdown-header-color:#5d5d5d;--sgds-dropdown-header-padding-x:1rem;--sgds-dropdown-header-padding-y:0.5rem;color:var(--sgds-dropdown-header-color);display:block;font-size:.875rem;margin-bottom:0;padding:var(--sgds-dropdown-header-padding-y) var(--sgds-dropdown-header-padding-x);white-space:nowrap}.sgds.dropdown .dropdown-toggle{align-items:center;gap:.5rem;justify-content:space-between}.sgds.dropdown .dropdown-toggle:after{content:none}.sgds.dropdown-menu li a.dropdown-item{padding:1rem}.sgds.dropdown-menu li a.dropdown-item.active,.sgds.dropdown-menu li a.dropdown-item:hover{background-color:#0950df;color:#fff}.btn-group>.btn.dropdown-toggle-split:first-child,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0}.dropdown-toggle-split{padding-left:.75rem;padding-right:.75rem}.dropdown-toggle-split:after{margin-left:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-left:.375rem;padding-right:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-left:.75rem;padding-right:.75rem}.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-left-radius:0;border-bottom-right-radius:0}.sgds.navbar .nav-item a.nav-link.dropdown-toggle{gap:.75rem}.sgds.navbar .nav-item a.nav-link.dropdown-toggle.show{border-bottom:.125rem solid #9182e8;color:#9182e8}`;
-
-  /**
-   * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`
-   */
-  class SgdsDropdownItem extends LinkElement {
-      connectedCallback() {
-          super.connectedCallback();
-          this.addEventListener("keydown", (e) => {
-              if (e.key === "Enter") {
-                  this.anchor.click();
-              }
-          });
-      }
-      render() {
-          return html$1 `
-      <div>
-        <a
-          href="${this.href}"
-          class="dropdown-item ${classMap({
-            disabled: this.disabled,
-            active: this.active
-        })}"
-          ?disabled=${this.disabled}
-          aria-disabled=${this.disabled ? "true" : "false"}
-          role="menuitem"
-          tabindex=${this.disabled ? "-1" : "0"}
-          target=${this.target}
-        >
-          <div class="dropdown-item-label">
-            <slot></slot>
-            ${this.active
-            ? html$1 `<div class="active-icon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none">
-                    <path
-                      d="M17.7701 0.968446C17.843 1.04113 17.9008 1.12748 17.9402 1.22255C17.9797 1.31762 18 1.41953 18 1.52246C18 1.62539 17.9797 1.7273 17.9402 1.82237C17.9008 1.91744 17.843 2.00379 17.7701 2.07647L6.81504 13.0315C6.74235 13.1044 6.656 13.1622 6.56094 13.2017C6.46587 13.2411 6.36395 13.2614 6.26103 13.2614C6.1581 13.2614 6.05619 13.2411 5.96112 13.2017C5.86605 13.1622 5.7797 13.1044 5.70701 13.0315L0.22948 7.55401C0.0825462 7.40707 0 7.20779 0 6.99999C0 6.7922 0.0825462 6.59291 0.22948 6.44598C0.376413 6.29905 0.575698 6.2165 0.783493 6.2165C0.991289 6.2165 1.19057 6.29905 1.33751 6.44598L6.26103 11.3711L16.6621 0.968446C16.7348 0.895574 16.8211 0.837758 16.9162 0.79831C17.0113 0.758862 17.1132 0.738556 17.2161 0.738556C17.319 0.738556 17.4209 0.758862 17.516 0.79831C17.6111 0.837758 17.6974 0.895574 17.7701 0.968446Z"
-                      fill="#5A42C0"
-                    />
-                  </svg>
-                </div>`
-            : nothing}
-          </div>
-        </a>
-      </div>
-    `;
-      }
-  }
-  SgdsDropdownItem.styles = [css_248z$E];
-  __decorate([
-      query("a")
-  ], SgdsDropdownItem.prototype, "anchor", void 0);
-
-  /**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  const HTML_RESULT = 1;
-  class UnsafeHTMLDirective extends Directive {
-      constructor(partInfo) {
-          super(partInfo);
-          this._value = nothing;
-          if (partInfo.type !== PartType.CHILD) {
-              throw new Error(`${this.constructor.directiveName}() can only be used in child bindings`);
-          }
-      }
-      render(value) {
-          if (value === nothing || value == null) {
-              this._templateResult = undefined;
-              return (this._value = value);
-          }
-          if (value === noChange) {
-              return value;
-          }
-          if (typeof value != 'string') {
-              throw new Error(`${this.constructor.directiveName}() called with a non-string value`);
-          }
-          if (value === this._value) {
-              return this._templateResult;
-          }
-          this._value = value;
-          const strings = [value];
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          strings.raw = strings;
-          // WARNING: impersonating a TemplateResult like this is extremely
-          // dangerous. Third-party directives should not do this.
-          return (this._templateResult = {
-              // Cast to a known set of integers that satisfy ResultType so that we
-              // don't have to export ResultType and possibly encourage this pattern.
-              // This property needs to remain unminified.
-              ['_$litType$']: this.constructor
-                  .resultType,
-              strings,
-              values: [],
-          });
-      }
-  }
-  UnsafeHTMLDirective.directiveName = 'unsafeHTML';
-  UnsafeHTMLDirective.resultType = HTML_RESULT;
-
-  /**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  const SVG_RESULT = 2;
-  class UnsafeSVGDirective extends UnsafeHTMLDirective {
-  }
-  UnsafeSVGDirective.directiveName = 'unsafeSVG';
-  UnsafeSVGDirective.resultType = SVG_RESULT;
-  /**
-   * Renders the result as SVG, rather than text.
-   *
-   * The values `undefined`, `null`, and `nothing`, will all result in no content
-   * (empty string) being rendered.
-   *
-   * Note, this is unsafe to use with any user-provided input that hasn't been
-   * sanitized or escaped, as it may lead to cross-site-scripting
-   * vulnerabilities.
-   */
-  const unsafeSVG = directive(UnsafeSVGDirective);
-
-  var css_248z$D = css`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-heading)}`;
-
-  class FormControlElement extends SgdsElement {
-      constructor() {
-          super(...arguments);
-          /** The input's label  */
-          this.label = "";
-          /** The input's hint text */
-          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");
+      >
+        <slot></slot>
+      </a>
+    `;
       }
   }
-  FormControlElement.styles = [...SgdsElement.styles, css_248z$H, css_248z$F, css_248z$T, css_248z$D];
-  __decorate([
-      property({ reflect: true })
-  ], FormControlElement.prototype, "label", void 0);
-  __decorate([
-      property({ reflect: true })
-  ], FormControlElement.prototype, "hintText", void 0);
-  __decorate([
-      property({ reflect: true })
-  ], FormControlElement.prototype, "name", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormControlElement.prototype, "disabled", void 0);
   __decorate([
-      property()
-  ], FormControlElement.prototype, "min", void 0);
+      property({ type: Boolean })
+  ], LinkElement.prototype, "active", void 0);
   __decorate([
-      property()
-  ], FormControlElement.prototype, "max", void 0);
+      property({ type: String })
+  ], LinkElement.prototype, "href", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
-  ], FormControlElement.prototype, "hasFeedback", void 0);
+  ], LinkElement.prototype, "disabled", void 0);
   __decorate([
       property({ type: String, reflect: true })
-  ], FormControlElement.prototype, "invalidFeedback", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormControlElement.prototype, "invalid", void 0);
+  ], LinkElement.prototype, "target", void 0);
+
+  var css_248z$D = css`.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-bottom-right-radius:0;border-top-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.dropdown,.dropdown-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle:after{border-bottom:0;border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid;content:"";display:inline-block;margin-left:.255em;vertical-align:.255em}.dropdown-toggle:empty:after{margin-left:0}.dropdown-divider{--sgds-dropdown-divider-bg:var(--sgds-border-color-translucent);--sgds-dropdown-divider-margin-y:0.5rem;border-top:1px solid var(--sgds-dropdown-divider-bg);height:0;margin:var(--sgds-dropdown-divider-margin-y) 0;opacity:1;overflow:hidden}.dropdown-item{--sgds-dropdown-item-active-color:#fff;--sgds-dropdown-item-active-bg:var(--sgds-info);--sgds-dropdown-item-disabled-color:var(--sgds-gray-500);background-color:var(--sgds-default-bg-transparent);clear:both;color:var(--sgds-default-color);display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg);text-align:inherit;text-decoration:none;white-space:nowrap}.dropdown-item:hover{background-color:var(--sgds-default-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-default-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item.active,.dropdown-item:active{background-color:var(--sgds-primary-bg-translucent);color:var(--sgds-primary-color);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.dropdown-item-label{align-items:center;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.active-icon{margin-left:auto}.dropdown-header{--sgds-dropdown-header-color:#5d5d5d;--sgds-dropdown-header-padding-x:1rem;--sgds-dropdown-header-padding-y:0.5rem;color:var(--sgds-dropdown-header-color);display:block;font-size:.875rem;margin-bottom:0;padding:var(--sgds-dropdown-header-padding-y) var(--sgds-dropdown-header-padding-x);white-space:nowrap}.sgds.dropdown .dropdown-toggle{align-items:center;gap:.5rem;justify-content:space-between}.sgds.dropdown .dropdown-toggle:after{content:none}.sgds.dropdown-menu li a.dropdown-item{padding:1rem}.sgds.dropdown-menu li a.dropdown-item.active,.sgds.dropdown-menu li a.dropdown-item:hover{background-color:#0950df;color:#fff}.btn-group>.btn.dropdown-toggle-split:first-child,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0}.dropdown-toggle-split{padding-left:.75rem;padding-right:.75rem}.dropdown-toggle-split:after{margin-left:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-left:.375rem;padding-right:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-left:.75rem;padding-right:.75rem}.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-left-radius:0;border-bottom-right-radius:0}.sgds.navbar .nav-item a.nav-link.dropdown-toggle{gap:.75rem}.sgds.navbar .nav-item a.nav-link.dropdown-toggle.show{border-bottom:.125rem solid #9182e8;color:#9182e8}`;
+
+  /**
+   * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`
+   */
+  class SgdsDropdownItem extends LinkElement {
+      connectedCallback() {
+          super.connectedCallback();
+          this.addEventListener("keydown", (e) => {
+              if (e.key === "Enter") {
+                  this.anchor.click();
+              }
+          });
+      }
+      render() {
+          return html$1 `
+      <div>
+        <a
+          href="${this.href}"
+          class="dropdown-item ${classMap({
+            disabled: this.disabled,
+            active: this.active
+        })}"
+          ?disabled=${this.disabled}
+          aria-disabled=${this.disabled ? "true" : "false"}
+          role="menuitem"
+          tabindex=${this.disabled ? "-1" : "0"}
+          target=${this.target}
+        >
+          <div class="dropdown-item-label">
+            <slot></slot>
+            ${this.active
+            ? html$1 `<div class="active-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none">
+                    <path
+                      d="M17.7701 0.968446C17.843 1.04113 17.9008 1.12748 17.9402 1.22255C17.9797 1.31762 18 1.41953 18 1.52246C18 1.62539 17.9797 1.7273 17.9402 1.82237C17.9008 1.91744 17.843 2.00379 17.7701 2.07647L6.81504 13.0315C6.74235 13.1044 6.656 13.1622 6.56094 13.2017C6.46587 13.2411 6.36395 13.2614 6.26103 13.2614C6.1581 13.2614 6.05619 13.2411 5.96112 13.2017C5.86605 13.1622 5.7797 13.1044 5.70701 13.0315L0.22948 7.55401C0.0825462 7.40707 0 7.20779 0 6.99999C0 6.7922 0.0825462 6.59291 0.22948 6.44598C0.376413 6.29905 0.575698 6.2165 0.783493 6.2165C0.991289 6.2165 1.19057 6.29905 1.33751 6.44598L6.26103 11.3711L16.6621 0.968446C16.7348 0.895574 16.8211 0.837758 16.9162 0.79831C17.0113 0.758862 17.1132 0.738556 17.2161 0.738556C17.319 0.738556 17.4209 0.758862 17.516 0.79831C17.6111 0.837758 17.6974 0.895574 17.7701 0.968446Z"
+                      fill="#5A42C0"
+                    />
+                  </svg>
+                </div>`
+            : nothing}
+          </div>
+        </a>
+      </div>
+    `;
+      }
+  }
+  SgdsDropdownItem.styles = [css_248z$D];
   __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormControlElement.prototype, "required", void 0);
+      query("a")
+  ], SgdsDropdownItem.prototype, "anchor", void 0);
 
   var css_248z$C = css`:host{--sgds-spinner-bg:var(--sgds-primary-bg);display:inline-flex}:host([variant=neutral]){--sgds-spinner-bg:var(--sgds-neutral-color-emphasis)}.spinner-wrapper{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.spinner{animation:spinner .75s linear infinite;border-radius:50%;border-right:.25em solid var(--sgds-alternate-bg);border:.25em solid var(--sgds-alternate-bg);border-right-color:var(--sgds-spinner-bg);color:var(--sgds-spinner-color);display:inline-flex;height:var(--sgds-dimension-32);width:var(--sgds-dimension-32)}.spinner-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.spinner-lg{height:var(--sgds-dimension-48);width:var(--sgds-dimension-48)}.spinner-label{font-size:var(--sgds-font-size-1)}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:1.5s}}
 
@@ -11130,7 +11175,7 @@
     `;
       }
   }
-  SgdsSpinner.styles = [...SgdsElement.styles, css_248z$_, css_248z$C];
+  SgdsSpinner.styles = [...SgdsElement.styles, css_248z$$, css_248z$C];
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsSpinner.prototype, "variant", void 0);
@@ -11150,14 +11195,13 @@
    * @event sgds-input - Emitted when the control receives input and its value changes.
    * @event sgds-focus - Emitted when input is in focus.
    * @event sgds-blur - Emitted when input is not in focus.
+   * @event sgds-invalid - Emitted when input is invalid
+   * @event sgds-valid - Emitted when input is valid
    *
    */
-  class SgdsInput extends FormControlElement {
+  class SgdsInput extends SgdsFormValidatorMixin(ScopedElementsMixin(FormControlElement)) {
       constructor() {
           super(...arguments);
-          /**@internal */
-          this.formSubmitController = new FormSubmitController(this);
-          /** The type of input which works the same as HTMLInputElement */
           this.type = "text";
           /** The input's placeholder text. */
           this.placeholder = "placeholder";
@@ -11165,16 +11209,17 @@
           this.autofocus = false;
           /** Makes the input readonly. */
           this.readonly = false;
-          /**The input's value attribute. */
-          this.value = "";
           /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
           this.defaultValue = "";
           /** Marks the component as valid. */
           this.valid = false;
           /** Marks the component as loading. */
           this.loading = false;
-          /**@internal */
-          this.inputId = genId("input", this.type);
+          /** Makes the input a required field. */
+          this.required = false;
+          /**The input's value attribute. */
+          this.value = "";
+          this._isTouched = false;
       }
       /**@internal */
       static get scopedElements() {
@@ -11190,60 +11235,79 @@
       blur() {
           this.input.blur();
       }
-      /** Checks for validity and shows the browser's validation message if the control is invalid. */
-      reportValidity() {
-          return this.input.reportValidity();
-      }
-      /** Sets a custom validation message. Pass an empty string to restore validity */
-      setCustomValidity(err) {
-          return this.input.setCustomValidity(err);
-      }
       /** 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");
+          }
       }
-      _handleClick() {
-          this.focus();
+      /**
+       * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+       * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
+       */
+      reportValidity() {
+          return this._mixinReportValidity();
       }
-      _handleChange(event) {
-          this.value = this.input.value;
-          this.emit(event);
+      /**
+       * Checks for validity without any native error popup message
+       */
+      checkValidity() {
+          return this._mixinCheckValidity();
+      }
+      /**
+       * Returns the ValidityState object
+       */
+      get validity() {
+          return this._mixinGetValidity();
+      }
+      /**
+       * Returns the validation message based on the ValidityState
+       */
+      get validationMessage() {
+          return this._mixinGetValidationMessage();
       }
       _handleFocus() {
           this.emit("sgds-focus");
       }
       _handleBlur() {
+          this._isTouched = true;
           this.emit("sgds-blur");
       }
-      _handleKeyDown(event) {
-          const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-          // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before
-          // submitting to allow users to cancel the keydown event if they need to
-          if (event.key === "Enter" && !hasModifier) {
-              setTimeout(() => {
-                  // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing
-                  if (!event.defaultPrevented && !event.isComposing) {
-                      this.formSubmitController.submit();
-                  }
-              });
+      _handleClick() {
+          this.focus();
+      }
+      _handleChange(e) {
+          this.value = this.input.value;
+          this.emit("sgds-change");
+          super._mixinHandleChange(e);
+      }
+      _handleInputChange(e) {
+          this.value = this.input.value;
+          this.emit("sgds-input");
+          super._mixinHandleInputChange(e);
+      }
+      /** @internal */
+      _handleIsTouched() {
+          if (this._isTouched) {
+              this.setInvalid(!this._mixinCheckValidity());
           }
       }
       _handleDisabledChange() {
           // Disabled form controls are always valid, so we need to recheck validity when the state changes
-          this.input.disabled = this.disabled;
-          this.invalid = !this.input.checkValidity();
-      }
-      _handleValueChange() {
-          this.invalid = !this.input.checkValidity();
+          this.setInvalid(false);
       }
       _renderInput() {
+          const wantFeedbackStyle = this.hasFeedback === "both" || this.hasFeedback === "style";
           return html `
       <div
         class="form-control-group ${classMap({
             disabled: this.disabled,
             readonly: this.readonly,
-            "is-invalid": this.invalid && this.hasFeedback,
-            "quantity-toggle": this.classList.contains("quantity-toggle")
+            "is-invalid": this.invalid && wantFeedbackStyle
         })}"
         @click=${this._handleClick}
       >
@@ -11252,7 +11316,7 @@
         <input
           class="form-control"
           type=${this.type}
-          id=${this.inputId}
+          id=${this._controlId}
           name=${ifDefined(this.name)}
           placeholder=${ifDefined(this.placeholder)}
           aria-invalid=${this.invalid ? "true" : "false"}
@@ -11267,15 +11331,14 @@
           min=${ifDefined(this.min)}
           max=${ifDefined(this.max)}
           step=${ifDefined(this.step)}
-          @input=${() => this._handleChange("sgds-input")}
-          @change=${() => this._handleChange("sgds-change")}
-          @keydown=${this._handleKeyDown}
+          @input=${(e) => this._handleInputChange(e)}
+          @change=${(e) => this._handleChange(e)}
           @invalid=${() => this.setInvalid(true)}
           @focus=${this._handleFocus}
           @blur=${this._handleBlur}
-          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this.inputId}-invalid` : undefined)}
-          aria-labelledby="${this.labelId} ${this.inputId}Help ${this.invalid && this.hasFeedback
-            ? `${this.inputId}-invalid`
+          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}
+          aria-labelledby="${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback
+            ? `${this._controlId}-invalid`
             : ""}"
         />
         ${this.loading ? html `<sgds-spinner size="sm"></sgds-spinner>` : nothing}
@@ -11292,7 +11355,8 @@
     `;
       }
       _renderFeedback() {
-          return this.invalid && this.hasFeedback
+          const wantFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";
+          return this.invalid && wantFeedbackText
               ? html ` <div class="invalid-feedback-container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
             <path
@@ -11300,15 +11364,17 @@
               fill="#B90000"
             />
           </svg>
-          <div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>
+          <div id="${this._controlId}-invalid" class="invalid-feedback">
+            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
+          </div>
         </div>`
               : html `${this._renderHintText()}`;
       }
       _renderLabel() {
           const labelTemplate = html `
       <label
-        for=${this.inputId}
-        id=${this.labelId}
+        for=${this._controlId}
+        id=${this._labelId}
         class=${classMap({
             "form-label": true,
             required: this.required
@@ -11319,7 +11385,7 @@
           return this.label && labelTemplate;
       }
       _renderHintText() {
-          const hintTextTemplate = html ` <div id="${this.inputId}Help" class="form-text">${this.hintText}</div> `;
+          const hintTextTemplate = html ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
           return this.hintText && hintTextTemplate;
       }
       render() {
@@ -11334,10 +11400,7 @@
     `;
       }
   }
-  SgdsInput.styles = [...FormControlElement.styles, css_248z$B];
-  __decorate([
-      query("input.form-control")
-  ], SgdsInput.prototype, "input", void 0);
+  SgdsInput.styles = [...FormControlElement.styles, css_248z$T, css_248z$B];
   __decorate([
       property({ reflect: true })
   ], SgdsInput.prototype, "type", void 0);
@@ -11356,6 +11419,12 @@
   __decorate([
       property({ type: Number, reflect: true })
   ], SgdsInput.prototype, "maxlength", void 0);
+  __decorate([
+      property()
+  ], SgdsInput.prototype, "min", void 0);
+  __decorate([
+      property()
+  ], SgdsInput.prototype, "max", void 0);
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsInput.prototype, "placeholder", void 0);
@@ -11372,8 +11441,11 @@
       property()
   ], SgdsInput.prototype, "step", void 0);
   __decorate([
-      property({ reflect: true })
-  ], SgdsInput.prototype, "value", void 0);
+      property({ type: String, reflect: true })
+  ], SgdsInput.prototype, "hasFeedback", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsInput.prototype, "invalidFeedback", void 0);
   __decorate([
       defaultValue()
   ], SgdsInput.prototype, "defaultValue", void 0);
@@ -11383,12 +11455,21 @@
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsInput.prototype, "loading", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], SgdsInput.prototype, "required", void 0);
+  __decorate([
+      property({ reflect: true })
+  ], SgdsInput.prototype, "value", void 0);
+  __decorate([
+      state()
+  ], SgdsInput.prototype, "_isTouched", void 0);
+  __decorate([
+      watch("_isTouched", { waitUntilFirstUpdate: true })
+  ], SgdsInput.prototype, "_handleIsTouched", null);
   __decorate([
       watch("disabled", { waitUntilFirstUpdate: true })
   ], SgdsInput.prototype, "_handleDisabledChange", null);
-  __decorate([
-      watch("value", { waitUntilFirstUpdate: true })
-  ], SgdsInput.prototype, "_handleValueChange", null);
 
   var css_248z$A = css`.sgds.combobox .form-control-icon{align-items:center;display:flex;font-size:1rem;height:3rem;justify-content:center;position:absolute;width:3rem;z-index:4}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.sgds.combobox .dropdown-toggle{width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}.form-control-icon{bottom:0}`;
 
@@ -11516,7 +11597,7 @@
     `;
       }
   }
-  SgdsComboBox.styles = [...DropdownListElement.styles, css_248z$A, css_248z$E, css_248z$z];
+  SgdsComboBox.styles = [...DropdownListElement.styles, css_248z$A, css_248z$D, css_248z$z];
   __decorate([
       property({ reflect: true })
   ], SgdsComboBox.prototype, "label", void 0);
@@ -21561,15 +21642,28 @@
               }
           };
           this.type = "text";
-          this.hasFeedback = true;
-          this._handleValueChange = () => null;
+          this.hasFeedback = "both";
+          // this._handleChange = () => null;
+          // this._handleInputChange = () => null
+      }
+      // connectedCallback(): void {
+      //   super.connectedCallback();
+      //   this.addEventListener("sgds-change", this._validateInput);
+      // }
+      async _handleChange(e) {
+          this.value = this.input.value;
+          this.emit("sgds-change");
+          super._mixinHandleChange(e);
+          await this._validateInput();
       }
-      connectedCallback() {
-          super.connectedCallback();
-          this.addEventListener("sgds-change", this._validateInput);
+      /** @internal */
+      _handleIsTouched() {
+          if (this._isTouched && this.required) {
+              this.invalid = true;
+          }
       }
-      async firstUpdated(changes) {
-          super.firstUpdated(changes);
+      async firstUpdated(changedProperties) {
+          super.firstUpdated(changedProperties);
           this._applyInputMask(this.dateFormat);
       }
       async _applyInputMask(dateFormat) {
@@ -21666,6 +21760,9 @@
   __decorate([
       queryAsync("input")
   ], DatepickerInput.prototype, "shadowInput", void 0);
+  __decorate([
+      watch("_isTouched", { waitUntilFirstUpdate: true })
+  ], DatepickerInput.prototype, "_handleIsTouched", null);
 
   var css_248z$v = css`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff}.datepicker{background-color:var(--datepicker-bg);border-color:var(--sgds-border-color);font-size:1rem;max-width:24rem;width:24rem}div{display:flex}button{align-self:self-start}sgds-datepicker-input{--input-border-radius:var(--sgds-border-radius,0.3125rem) 0 0 var(--sgds-border-radius,0.3125rem);flex:1;margin-right:0}sgds-button[variant=outlined]{--btn-color:var(--sgds-dark);--btn-bg:var(--sgds-white);--btn-border-color:var(--sgds-dark);--btn-hover-bg:var(--sgds-dark);--btn-hover-color:var(--sgds-white)}.calendar-btn{--btn-border-color:var(--sgds-border-color);--btn-border-radius:0}.reset-btn{--btn-bg:var(--datepicker-close-btn-bg);--btn-color:var(--datepicker-close-btn-color);--btn-border-radius:0}.reset-btn:hover{--btn-hover-bg:var(--datepicker-close-btn-hover-bg)}`;
 
@@ -22057,7 +22154,7 @@
     `;
       }
   }
-  SgdsDatepicker.styles = [...DropdownElement.styles, css_248z$E, css_248z$z, css_248z$v];
+  SgdsDatepicker.styles = [...DropdownElement.styles, css_248z$D, css_248z$z, css_248z$v];
   /**@internal */
   SgdsDatepicker.formAssociated = true;
   __decorate([
@@ -22717,7 +22814,7 @@
     `;
       }
   }
-  SgdsDropdown.styles = [...DropdownListElement.styles, css_248z$E, css_248z$z];
+  SgdsDropdown.styles = [...DropdownListElement.styles, css_248z$D, css_248z$z];
   __decorate([
       property({ type: String })
   ], SgdsDropdown.prototype, "togglerId", void 0);
@@ -22740,58 +22837,72 @@
       queryAsync("sgds-button")
   ], SgdsDropdown.prototype, "dropdownRef", void 0);
 
-  var css_248z$s = css`:host{--file-upload-left-icon-color:var(--sgds-success);--file-upload-remove-icon-color:var(--sgds-body-color);--file-upload-remove-icon-hover-color: }.fileupload-list-item{display:flex;gap:var(--sgds-spacer-2)}.fileupload-list-item span:not(:first-of-type){cursor:pointer}.fileupload-list-item span:first-of-type svg{color:var(--file-upload-left-icon-color)}.fileupload-list-item span:last-of-type svg{color:var(--file-upload-remove-icon-color)}.fileupload-list-item span:last-of-type svg:hover{color:var(--file-upload-remove-icon-hover-color)}.file-upload-label{align-items:center;display:flex;gap:var(--sgds-spacer-2)}ul{margin:0;padding:0}.sgds.fileupload-list{display:flex;flex-direction:column;gap:var(--sgds-spacer-3);list-style-type:none}.sgds.fileupload-list .fileupload-list-item .filename{color:var(--sgds-link);text-decoration:underline;text-underline-offset:.25rem}input{display:none}label,sgds-button{cursor:pointer}.fileupload-container{display:flex;flex-direction:column;gap:var(--sgds-spacer-3)}`;
-
-  var css_248z$r = css`svg{vertical-align:middle}`;
+  var css_248z$s = css`:host{--file-upload-left-icon-color:var(--sgds-success);--file-upload-remove-icon-color:var(--sgds-body-color);--file-upload-remove-icon-hover-color: }.file-upload{display:flex;flex-direction:column;gap:var(--sgds-form-gap-2-xl)}.file-upload-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.file-upload-list{display:flex;flex-direction:column;gap:var(--sgds-form-gap-xl);list-style-type:none}.file-upload-list-item{align-items:center;background-color:var(--sgds-form-bg);border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color-muted);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-lg);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x)}.file-upload-list-item span:not(:first-of-type){cursor:pointer}.file-upload-list-item span:first-of-type svg{color:var(--file-upload-left-icon-color)}.file-upload-list-item span:last-of-type svg{color:var(--file-upload-remove-icon-color)}.file-upload-list-item span:last-of-type svg:hover{color:var(--file-upload-remove-icon-hover-color)}ul{margin:0;padding:0}input{display:none}label,sgds-button{cursor:pointer}sgds-close-button{margin-left:auto}`;
 
   /**
    * @summary Allows users to upload files of various sizes and formats
    * @slot default - Label for file upload button
    *
-   * @event sgds-files-selected - Emitted when files are selected for uploading
-   *
-   * @cssproperty --file-upload-file-icon-color - Left icon color
-   * @cssproperty --file-upload-remove-icon-color - Remove icon color
-   * @cssproperty --file-upload-remove-icon-hover-color - Remove icon hover color
+   * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail
    */
-  class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {
+  class SgdsFileUpload extends SgdsFormValidatorMixin(ScopedElementsMixin(FormControlElement)) {
       constructor() {
           super(...arguments);
-          /** The button's variant. */
-          this.variant = "primary";
-          //** Disable the fileuploader button */
-          this.disabled = false;
           /** Allows multiple files to be listed for uploading */
           this.multiple = false;
           /** Specify the acceptable file type  */
           this.accept = "";
-          /** Customize the check icon with SVG */
-          this.checkedIcon = "";
-          /** Customize the cancel icon with SVG */
-          this.cancelIcon = "";
-          /** The input's hint text below the label */
-          this.hintText = "";
-          /** @internal */
+          // /** Customize the check icon with SVG */
+          // @property({ type: String }) checkedIcon = "";
+          /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+          this.hasFeedback = false;
+          /** Makes the input as a required field. */
+          this.required = false;
           this.selectedFiles = [];
-          // Create a ref to the input element
-          /** @internal */
           this.inputRef = createRef();
-          /**@internal */
-          this.inputId = genId("input", "file");
       }
       /**@internal */
       static get scopedElements() {
           return {
-              "sgds-button": SgdsButton
+              "sgds-button": SgdsButton,
+              "sgds-close-button": SgdsCloseButton
           };
       }
+      /**
+       * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+       * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
+       */
+      reportValidity() {
+          return this._mixinReportValidity();
+      }
+      /**
+       * Checks for validity without any native error popup message
+       */
+      checkValidity() {
+          return this._mixinCheckValidity();
+      }
+      /**
+       * Returns the ValidityState object
+       */
+      get validity() {
+          return this._mixinGetValidity();
+      }
+      /**
+       * Returns the validation message based on the ValidityState
+       */
+      get validationMessage() {
+          return this._mixinGetValidationMessage();
+      }
+      /**
+       * Returns files selected for upload
+       */
+      get files() {
+          return this.selectedFiles;
+      }
       _setFileList(files) {
-          this.files = files;
-          this.emit("sgds-files-selected");
-          //Possible to pass in the files
+          this.emit("sgds-files-selected", { detail: files });
       }
-      /** @internal */
-      handleClick(event) {
+      _handleClick(event) {
           event.preventDefault();
           if (!this.disabled) {
               // Get a reference to the input element using the inputRef
@@ -22800,8 +22911,7 @@
               inputElement.click();
           }
       }
-      /** @internal */
-      handleInputChange(event) {
+      _handleChange(event) {
           const inputElement = event.target;
           const files = inputElement.files;
           if (files.length > 0) {
@@ -22810,6 +22920,7 @@
           // Trigger a re-render of the component to update the list of selected files
           this._setFileList(files);
           this.requestUpdate();
+          super._mixinHandleChange(event);
       }
       _removeFileHandler(index) {
           const inputElement = this.inputRef.value;
@@ -22826,19 +22937,56 @@
           this.selectedFiles = Array.from(fileBuffer.files);
           // Trigger a re-render of the component to update the list of selected files
           this.requestUpdate();
+          this._mixinValidate(this.input);
+      }
+      _clearAllFiles() {
+          const inputElement = this.inputRef.value;
+          const fileBuffer = new DataTransfer();
+          inputElement.files = fileBuffer.files;
+          this._setFileList(fileBuffer.files);
+          this.selectedFiles = Array.from(fileBuffer.files);
+      }
+      /**
+       * fileupload requries a custom _mixinResetFormControl for clearing files
+       */
+      _mixinResetFormControl() {
+          this._clearAllFiles();
+          this._mixinResetValidity(this.input);
+      }
+      _handleDisabledChange() {
+          // Disabled form controls are always valid, so we need to recheck validity when the state changes
+          this.setInvalid(false);
+      }
+      _renderLabel() {
+          const labelTemplate = html$1 `
+      <label for=${this._controlId} id=${this._labelId} class="form-label"> ${this.label} </label>
+    `;
+          return this.label && labelTemplate;
       }
       _renderHintText() {
-          const hintTextTemplate = html$1 ` <small id="${this.inputId}Help" class="form-text">${this.hintText}</small> `;
+          const hintTextTemplate = html$1 ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
           return this.hintText && hintTextTemplate;
       }
-      _sanitizeVariant(variant) {
-          return variant.replace("outline-", "");
+      _renderFeedback() {
+          return html$1 `
+      <div class="invalid-feedback-container">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <path
+            d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z"
+            fill="#B90000"
+          />
+        </svg>
+        <div id="${this._controlId}-invalid" class="invalid-feedback">
+          ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
+        </div>
+      </div>
+    `;
       }
       render() {
-          const getCheckedIcon = (checkedIcon) => {
-              if (checkedIcon) {
-                  return html$1 `${unsafeSVG(checkedIcon)}`;
-              }
+          const getCheckedIcon = () => {
+              // if (checkedIcon) {
+              //   return html`${unsafeSVG(checkedIcon)}`;
+              // }
               return html$1 ` <svg
         xmlns="http://www.w3.org/2000/svg"
         width="16"
@@ -22850,67 +22998,62 @@
         <path
           d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"
         />
-      </svg>`;
-          };
-          const getCancelIcon = (cancelIcon) => {
-              if (cancelIcon) {
-                  return html$1 `${unsafeSVG(cancelIcon)}`;
-              }
-              return html$1 `<svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        class="bi bi-x-circle"
-        viewBox="0 0 16 16"
-      >
-        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
-        <path
-          d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
-        />
       </svg>`;
           };
           const listItems = this.selectedFiles.map((file, index) => html$1 `
-        <li key=${index} class="fileupload-list-item">
-          <span>${getCheckedIcon(this.checkedIcon)}</span>
+        <li key=${index} class="file-upload-list-item">
+          <span>${getCheckedIcon()}</span>
           <span class="filename">${file.name}</span>
-          <span @click=${() => this._removeFileHandler(index)}>${getCancelIcon(this.cancelIcon)}</span>
+          <sgds-close-button
+            aria-label="remove the file"
+            @click=${() => this._removeFileHandler(index)}
+          ></sgds-close-button>
         </li>
       `);
           return html$1 `
-      <input
-        ${ref(this.inputRef)}
-        type="file"
-        @change=${this.handleInputChange}
-        ?multiple=${this.multiple}
-        accept=${this.accept}
-        id=${this.inputId}
-      />
-      <div class="fileupload-container">
-        <sgds-button
-          size=${this.size}
-          variant=${this._sanitizeVariant(this.variant)}
-          ?outlined=${this.variant.includes("outline")}
+      <div class="file-upload">
+        <input
+          ${ref(this.inputRef)}
+          type="file"
+          @change=${this._handleChange}
+          ?multiple=${this.multiple}
+          accept=${this.accept}
+          id=${this._controlId}
+          ?required=${this.required}
           ?disabled=${this.disabled}
-          @click=${this.handleClick}
-        >
-          <label for=${this.inputId} class="file-upload-label"><slot></slot></label>
-        </sgds-button>
-        ${this._renderHintText()}
-        <ul class="sgds fileupload-list">
+        />
+        <div class="file-upload-container">
+          ${this._renderLabel()}
+          <sgds-button variant="outline" ?disabled=${this.disabled} @click=${this._handleClick}>
+            <label for=${this._controlId}><slot></slot></label>
+            <svg
+              slot="rightIcon"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <path
+                d="M3.5625 14.1943C3.71168 14.1943 3.85476 14.2535 3.96025 14.359C4.06574 14.4645 4.125 14.6076 4.125 14.7568V17.5693C4.125 17.8677 4.24353 18.1538 4.4545 18.3648C4.66548 18.5758 4.95163 18.6943 5.25 18.6943H18.75C19.0484 18.6943 19.3345 18.5758 19.5455 18.3648C19.7565 18.1538 19.875 17.8677 19.875 17.5693V14.7568C19.875 14.6076 19.9343 14.4645 20.0398 14.359C20.1452 14.2535 20.2883 14.1943 20.4375 14.1943C20.5867 14.1943 20.7298 14.2535 20.8352 14.359C20.9407 14.4645 21 14.6076 21 14.7568V17.5693C21 18.166 20.7629 18.7383 20.341 19.1603C19.919 19.5822 19.3467 19.8193 18.75 19.8193H5.25C4.65326 19.8193 4.08097 19.5822 3.65901 19.1603C3.23705 18.7383 3 18.166 3 17.5693V14.7568C3 14.6076 3.05926 14.4645 3.16475 14.359C3.27024 14.2535 3.41332 14.1943 3.5625 14.1943Z"
+                fill="currentColor"
+              />
+              <path
+                d="M11.6018 4.34604C11.654 4.29366 11.7161 4.2521 11.7844 4.22374C11.8528 4.19538 11.926 4.18079 12 4.18079C12.074 4.18079 12.1473 4.19538 12.2156 4.22374C12.2839 4.2521 12.346 4.29366 12.3983 4.34604L15.7733 7.72104C15.8789 7.82666 15.9382 7.96992 15.9382 8.11929C15.9382 8.26866 15.8789 8.41192 15.7733 8.51754C15.6676 8.62316 15.5244 8.6825 15.375 8.6825C15.2256 8.6825 15.0824 8.62316 14.9768 8.51754L12.5625 6.10217V15.9943C12.5625 16.1435 12.5032 16.2866 12.3978 16.392C12.2923 16.4975 12.1492 16.5568 12 16.5568C11.8508 16.5568 11.7077 16.4975 11.6023 16.392C11.4968 16.2866 11.4375 16.1435 11.4375 15.9943V6.10217L9.02326 8.51754C8.97096 8.56984 8.90887 8.61133 8.84054 8.63963C8.77221 8.66793 8.69897 8.6825 8.62501 8.6825C8.55105 8.6825 8.47781 8.66793 8.40948 8.63963C8.34114 8.61133 8.27906 8.56984 8.22676 8.51754C8.17446 8.46524 8.13297 8.40316 8.10467 8.33482C8.07636 8.26649 8.0618 8.19325 8.0618 8.11929C8.0618 8.04533 8.07636 7.97209 8.10467 7.90376C8.13297 7.83543 8.17446 7.77334 8.22676 7.72104L11.6018 4.34604Z"
+                fill="currentColor"
+              />
+            </svg>
+          </sgds-button>
+          ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}
+        </div>
+        <ul class="file-upload-list">
           ${listItems}
         </ul>
       </div>
     `;
       }
   }
-  SgdsFileUpload.styles = [...SgdsElement.styles, css_248z$r, css_248z$F, css_248z$s];
-  __decorate([
-      property({ reflect: true })
-  ], SgdsFileUpload.prototype, "variant", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsFileUpload.prototype, "disabled", void 0);
+  SgdsFileUpload.styles = [...FormControlElement.styles, css_248z$s];
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsFileUpload.prototype, "multiple", void 0);
@@ -22918,60 +23061,39 @@
       property({ type: String, reflect: true })
   ], SgdsFileUpload.prototype, "accept", void 0);
   __decorate([
-      property({ reflect: true })
-  ], SgdsFileUpload.prototype, "size", void 0);
-  __decorate([
-      property({ type: String })
-  ], SgdsFileUpload.prototype, "checkedIcon", void 0);
-  __decorate([
-      property({ type: String })
-  ], SgdsFileUpload.prototype, "cancelIcon", void 0);
+      property({ type: Boolean, reflect: true })
+  ], SgdsFileUpload.prototype, "hasFeedback", void 0);
   __decorate([
-      property({ reflect: true })
-  ], SgdsFileUpload.prototype, "hintText", void 0);
+      property({ type: String, reflect: true })
+  ], SgdsFileUpload.prototype, "invalidFeedback", void 0);
   __decorate([
-      property({ type: Object, state: true })
-  ], SgdsFileUpload.prototype, "files", void 0);
+      property({ type: Boolean, reflect: true })
+  ], SgdsFileUpload.prototype, "required", void 0);
   __decorate([
-      property({ type: Array })
+      state()
   ], SgdsFileUpload.prototype, "selectedFiles", void 0);
+  __decorate([
+      watch("disabled", { waitUntilFirstUpdate: true })
+  ], SgdsFileUpload.prototype, "_handleDisabledChange", null);
 
-  var css_248z$q = css`*,:after,:before{box-sizing:border-box}.sgds.footer .footer-header .title{color:var(--sgds-heading-color);font-size:calc(1.275rem + .3vw);font-weight:700;line-height:1.2;margin-bottom:.5rem;margin-top:0}@media (min-width:1200px){.sgds.footer .footer-header .title{font-size:1.5rem}}.sgds.footer .footer-header .title{line-height:1.33}.container-fluid{margin-left:auto;margin-right:auto;padding-left:var(--sgds-gutter-x,1.5rem);padding-right:var(--sgds-gutter-x,1.5rem);width:100%}.row{--sgds-gutter-x:1.5rem;--sgds-gutter-y:0;display:flex;flex-wrap:wrap;margin-left:calc(var(--sgds-gutter-x)*-.5);margin-right:calc(var(--sgds-gutter-x)*-.5);margin-top:calc(var(--sgds-gutter-y)*-1)}.row>*{flex-shrink:0;margin-top:var(--sgds-gutter-y);max-width:100%;padding-left:calc(var(--sgds-gutter-x)*.5);padding-right:calc(var(--sgds-gutter-x)*.5);width:100%}.col{flex:1 0 0%}@media (min-width:768px){.col-md-4{flex:0 0 auto;width:33.33333333%}}@media (min-width:1400px){.col-xxl-2{flex:0 0 auto;width:16.66666667%}}.sgds.footer .footer-contact-links ul,.sgds.footer .footer-items ul,.sgds.footer .footer-mandatory-links ul{margin:0;padding:0}.sgds.footer .footer-contact-links ul li,.sgds.footer .footer-items ul li,.sgds.footer .footer-mandatory-links ul li{font-size:1rem;line-height:1.5;list-style-type:none}.sgds.footer .footer-contact-links ul li+li,.sgds.footer .footer-items ul li+li,.sgds.footer .footer-mandatory-links ul li+li{margin-top:1rem}.sgds.footer .footer-contact-links ul li a,.sgds.footer .footer-items ul li a,.sgds.footer .footer-mandatory-links ul li a{color:#d0d5dd;text-decoration:none}.sgds.footer,.sgds.footer .footer-contact-links ul li a:hover,.sgds.footer .footer-items ul li a:hover,.sgds.footer .footer-mandatory-links ul li a:hover{color:#f7f7f7}.sgds.footer{height:auto}.sgds.footer .footer-top{background-color:#111;padding:3rem 0 1.5rem}.sgds.footer .footer-header{margin-bottom:1.5rem}.sgds.footer .footer-header .title{margin-bottom:1rem}.sgds.footer .footer-header .description{color:#d0d5dd}@media (max-width:575.98px){.sgds.footer .footer-items>div[class*=col]+div[class*=col]{margin-top:2rem}}.sgds.footer .footer-items .title{font-weight:700}.sgds.footer .footer-items .links{margin-top:1rem}.sgds.footer .footer-contact-links{margin-top:2rem}@media (min-width:992px){.sgds.footer .footer-contact-links ul li{display:inline-block}.sgds.footer .footer-contact-links ul li+li{margin-left:1rem}}.sgds.footer .footer-bottom{background-color:#111;padding:1.5rem 0}@media (min-width:992px){.sgds.footer .footer-mandatory-links ul li{display:inline-block}.sgds.footer .footer-mandatory-links ul li+li{margin-left:1rem}}@media (max-width:991.98px){.sgds.footer .footer-copyrights{margin-top:1rem}}.d-flex{display:flex!important}.text-end{text-align:right!important}@media (min-width:992px){.justify-content-lg-end{justify-content:flex-end!important}}`;
+  var css_248z$r = css`.footer{container:footer/inline-size;height:auto}.footer-top{background-color:var(--sgds-default-bg-emphasis);border-bottom:var(--sgds-border-width-1) solid var(--sgds-default-border-color);gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.footer-header,.footer-top{display:flex;flex-direction:column}.footer-header{gap:var(--sgds-gap-xs);margin:var(--sgds-margin-3-xs) 0}slot[name=title]::slotted(*){--sgds-header-color:var(--sgds-default-color-inverse);--sgds-font-size-6:var(--sgds-font-size-5);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-line-height-heading:var(--sgds-line-height-body);color:var(--sgds-header-color,--sgds-default-color-inverse);font-size:var(--sgds-font-size-6,--sgds-font-size-5);font-weight:var(--sgds-font-weight-bold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading,--sgds-line-height-body);margin-bottom:var(--sgds-margin-2-xs,--sgds-margin-none);margin-top:var(--sgds-margin-none)}slot[name=description]::slotted(*){--sgds-font-size-2:var(--sgds-font-size-3);--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-default-color-muted);font-size:var(--sgds-font-size-2,--sgds-font-size-3);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none);margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-mandatory-links ul li a{color:var(--sgds-default-color-muted);text-decoration:none}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-default-color-inverse)}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.footer-bottom{background-color:var(--sgds-default-bg-emphasis);display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.social-media{display:flex;gap:var(--sgds-gap-sm)}slot[name=social-media]::slotted(a){--sgds-link-color:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));--sgds-body-color:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));color:var(--sgds-body-color,--sgds-link-color);display:inline-flex}slot[name=social-media]::slotted(a:hover){--sgds-link-color-emphasis:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));color:var(--sgds-link-color-emphasis)}slot[name=social-media]::slotted(a:focus),slot[name=social-media]::slotted(a:focus-visible){--sgds-link-color-emphasis:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));box-shadow:var(--sgds-box-shadow-focus);color:var(--sgds-link-color-emphasis);outline:0}.footer-mandatory-links{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl) var(--sgds-gap-lg);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs) var(--sgds-gap-xl)}.footer-copyrights{color:var(--sgds-default-color-muted)}@container footer (max-width: 711px){.footer-bottom,.footer-top{padding:var(--sgds-padding-lg)}.footer-top{gap:var(--sgds-gap-lg)}.footer-mandatory-links,.footer-mandatory-links ul{flex-direction:column}}`;
 
   /**
    * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.
    *
-   * @csspart footer-top - The component's footer-top section container.
-   * @csspart footer-bottom - The component's footer-bottom section container.
+   * @slot title - The slot for title
+   * @slot description - The slot for description
+   * @slot items - The slot for the list of footer items
+   * @slot social-media - The slot for the list of social media with icons
    *
-   * @cssproperty footer-top - The component's footer-top section container.
-   * @cssproperty footer-bottom - The component's footer-bottom section container.
    */
   class SgdsFooter extends SgdsElement {
       constructor() {
           super(...arguments);
-          /**
-           * 	Sets title of SgdsFooter
-           */
-          this.title = "";
-          /**
-           * 	Sets description of SgdsFooter
-           */
-          this.description = "";
           /**
            * 	Sets copyrightLiner of SgdsFooter
            */
           this.copyrightLiner = "Government of Singapore";
-          /**
-           * Array of type
-           *
-           * `interface ColumnLinks { title: string; links : Links[] } interface Links { href: string; label: string; }`
-           */
-          this.links = [];
-          /**
-           * String date for last updated date
-           */
-          this.lastUpdatedDate = "";
           /**
            * 	href link for contacts
            */
@@ -22980,6 +23102,10 @@
            * 	href link for feedback
            */
           this.feedbackHref = "#";
+          /**
+           * 	href link for faq
+           */
+          this.faqHref = "#";
           /**
            * 	href link for privacy statement
            */
@@ -22989,94 +23115,83 @@
            */
           this.termsOfUseHref = "#";
       }
+      firstUpdated() {
+          const socialMediaSlot = this.shadowRoot.querySelector("slot[name='social-media']");
+          const footerTitleSlot = this.shadowRoot.querySelector("slot[name='title']");
+          const footerDescriptionSlot = this.shadowRoot.querySelector("slot[name='description']");
+          const footerItemsSlot = this.shadowRoot.querySelector("slot[name='items']");
+          const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });
+          const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });
+          const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });
+          const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });
+          if (socialMediaChildNodes.length === 0) {
+              const socialMediaContainer = this.shadowRoot.querySelector(".social-media");
+              socialMediaContainer.style.display = "none";
+          }
+          if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {
+              const footerHeaderContainer = this.shadowRoot.querySelector(".footer-header");
+              footerHeaderContainer.style.display = "none";
+          }
+          if (footerItemsChildNodes.length === 0) {
+              const footerItemsContainer = this.shadowRoot.querySelector(".footer-items");
+              footerItemsContainer.style.display = "none";
+          }
+          if (footerTitleChildNodes.length === 0 &&
+              footerDescriptionChildNodes.length === 0 &&
+              footerItemsChildNodes.length === 0) {
+              const footerTopContainer = this.shadowRoot.querySelector(".footer-top");
+              footerTopContainer.style.display = "none";
+          }
+      }
       render() {
-          // if description is defined
-          const hasDescription = html$1 ` <div class="description">${this.description}</div>`;
           return html$1 `
-      <footer class="sgds footer">
-        <section class="footer-top" part="footer-top">
-          <div class="container-fluid">
-            <div class="row footer-header">
-              <div class="col col-lg-6 col-md-12">
-                <div class="title">${this.title ? this.title : "Footer title"}</div>
-                ${this.description ? hasDescription : undefined}
-              </div>
-            </div>
-            <div class="row footer-items">
-              ${this.links.map((item) => html$1 `
-                    <div class="col-xxl-2 col-md-4 mb-3">
-                      <div class="title">${item.title}</div>
-                      <ul class="links">
-                        ${item.links.map((link) => html$1 ` <li><a href=${link.href}>${link.label}</a></li> `)}
-                      </ul>
-                    </div>
-                  `)}
-            </div>
-            <div class="row footer-contact-links">
-              <div class="col">
-                <div class="d-flex justify-content-lg-end">
-                  <ul>
-                    <li><a href=${this.contactHref}>Contact</a></li>
-                    <li><a href=${this.feedbackHref}>Feedback</a></li>
-                  </ul>
-                </div>
-              </div>
-            </div>
+      <footer class="footer">
+        <section class="footer-top">
+          <div class="footer-header">
+            <slot name="title"></slot>
+            <slot name="description"></slot>
+          </div>
+          <div class="footer-items">
+            <slot name="items"></slot>
           </div>
         </section>
-        <section class="footer-bottom" part="footer-bottom">
-          <div class="container-fluid">
-            <div class="row footer-mandatory-links">
-              <div class="col">
-                <ul>
-                  <li>
-                    <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer"
-                      >Report Vulnerability</a
-                    >
-                  </li>
-                  <li><a href=${this.privacyHref}>Privacy Statement</a></li>
-                  <li><a href=${this.termsOfUseHref}>Terms of use</a></li>
-                </ul>
-              </div>
-            </div>
-            <div class="row footer-copyrights">
-              <div class="col">
-                <div class="d-flex justify-content-lg-end text-end">
-                  © ${new Date().getFullYear()} ${this.copyrightLiner}<br />
-                  Last Updated ${this.lastUpdatedDate}
-                </div>
-              </div>
-            </div>
+        <section class="footer-bottom">
+          <div class="social-media">
+            <slot name="social-media"></slot>
+          </div>
+          <div class="footer-mandatory-links">
+            <ul>
+              <li><a href=${this.contactHref}>Contact</a></li>
+              <li><a href=${this.feedbackHref}>Feedback</a></li>
+              <li><a href=${this.faqHref}>FAQ</a></li>
+              <li>
+                <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer">
+                  Report Vulnerability
+                </a>
+              </li>
+              <li><a href=${this.privacyHref}>Privacy Statement</a></li>
+              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>
+            </ul>
+            <div class="footer-copyrights">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>
           </div>
         </section>
       </footer>
     `;
       }
   }
-  SgdsFooter.styles = [...SgdsElement.styles, css_248z$q];
-  __decorate([
-      property({ type: String })
-  ], SgdsFooter.prototype, "title", void 0);
-  __decorate([
-      property({ type: String })
-  ], SgdsFooter.prototype, "description", void 0);
+  SgdsFooter.styles = [...SgdsElement.styles, css_248z$r];
   __decorate([
       property({ type: String })
   ], SgdsFooter.prototype, "copyrightLiner", void 0);
-  __decorate([
-      property({
-          type: Array
-      })
-  ], SgdsFooter.prototype, "links", void 0);
-  __decorate([
-      property({ type: String })
-  ], SgdsFooter.prototype, "lastUpdatedDate", void 0);
   __decorate([
       property({ type: String })
   ], SgdsFooter.prototype, "contactHref", void 0);
   __decorate([
       property({ type: String })
   ], SgdsFooter.prototype, "feedbackHref", void 0);
+  __decorate([
+      property({ type: String })
+  ], SgdsFooter.prototype, "faqHref", void 0);
   __decorate([
       property({ type: String })
   ], SgdsFooter.prototype, "privacyHref", void 0);
@@ -23084,11 +23199,13 @@
       property({ type: String })
   ], SgdsFooter.prototype, "termsOfUseHref", void 0);
 
-  var css_248z$p = css`.btn.btn-icon{display:flex;height:var(--sgds-dimension-48,56px);min-width:unset;padding:0;width:var(--sgds-dimension-48,56px)}.btn.btn-icon.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:unset;padding:0;width:var(--sgds-dimension-56)}.btn.btn-icon.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:unset;padding:0;width:var(--sgds-dimension-40)}.btn>svg{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-lg>svg{height:var(--sgds-dimension-32);width:var(--sgds-dimension-32)}.btn-sm>svg{height:var(--sgds-dimension-20);width:var(--sgds-dimension-20)}`;
+  var css_248z$q = css`.btn.btn-icon{display:flex;height:var(--sgds-dimension-48,56px);min-width:unset;padding:0;width:var(--sgds-dimension-48,56px)}.btn.btn-icon.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:unset;padding:0;width:var(--sgds-dimension-56)}.btn.btn-icon.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:unset;padding:0;width:var(--sgds-dimension-40)}`;
 
   /**
    * @summary An icon button is a user interface element that combines an icon and a button, serving as a clickable or tabbable component.
    *
+   * @slot default - The slot for sgds-icon
+   *
    * @event sgds-blur - Emitted when the button is blurred.
    * @event sgds-focus - Emitted when the button is focused.
    */
@@ -23105,7 +23222,7 @@
             [`btn-${this.size}`]: this.size
         })}"
             ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
-            type="button"
+            type=${ifDefined(isLink ? undefined : "button")}
             href=${ifDefined(isLink ? this.href : undefined)}
             target=${ifDefined(isLink ? this.target : undefined)}
             download=${ifDefined(isLink ? this.download : undefined)}
@@ -23118,19 +23235,14 @@
             @blur=${this._handleBlur}
             aria-label=${ifDefined(this.ariaLabel)}
           >
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M3 12C3 11.8295 3.06773 11.666 3.18828 11.5455C3.30883 11.4249 3.47233 11.3572 3.64282 11.3572H18.8043L14.7584 7.31258C14.6377 7.19187 14.5699 7.02817 14.5699 6.85746C14.5699 6.68676 14.6377 6.52305 14.7584 6.40235C14.8791 6.28165 15.0428 6.21384 15.2135 6.21384C15.3842 6.21384 15.5479 6.28165 15.6686 6.40235L20.8111 11.5449C20.871 11.6046 20.9185 11.6755 20.9509 11.7536C20.9833 11.8317 21 11.9154 21 12C21 12.0845 20.9833 12.1683 20.9509 12.2464C20.9185 12.3245 20.871 12.3954 20.8111 12.4551L15.6686 17.5976C15.5479 17.7183 15.3842 17.7861 15.2135 17.7861C15.0428 17.7861 14.8791 17.7183 14.7584 17.5976C14.6377 17.4769 14.5699 17.3132 14.5699 17.1425C14.5699 16.9718 14.6377 16.8081 14.7584 16.6874L18.8043 12.6428H3.64282C3.47233 12.6428 3.30883 12.5751 3.18828 12.4545C3.06773 12.334 3 12.1705 3 12Z" fill="currentColor"/>
-          </svg>
+            <slot></slot>
           </${tag}>
         `;
       }
   }
-  SgdsIconButton.styles = [...ButtonElement.styles, css_248z$p];
-  __decorate([
-      property({ type: String, reflect: true })
-  ], SgdsIconButton.prototype, "name", void 0);
+  SgdsIconButton.styles = [...ButtonElement.styles, css_248z$q];
 
-  var css_248z$o = css`slot{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot::slotted(*){align-items:center;display:flex;gap:var(--sgds-gap-xs)}.sm{font-size:var(--sgds-font-size-1)}.lg{font-size:var(--sgds-font-size-3)}`;
+  var css_248z$p = css`slot{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot::slotted(*){align-items:center;display:flex;gap:var(--sgds-gap-xs)}.sm{font-size:var(--sgds-font-size-1)}.lg{font-size:var(--sgds-font-size-3)}`;
 
   /**
    * @summary A IconList can be used to display content related to the same topic. Each list item begins an icon.
@@ -23153,7 +23265,7 @@
     `;
       }
   }
-  SgdsIconList.styles = [...SgdsElement.styles, css_248z$o];
+  SgdsIconList.styles = [...SgdsElement.styles, css_248z$p];
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsIconList.prototype, "role", void 0);
@@ -23161,7 +23273,7 @@
       property({ type: String, reflect: true })
   ], SgdsIconList.prototype, "size", void 0);
 
-  var css_248z$n = css`a.nav-link{align-items:center;color:var(--sgds-primary-color);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--sgds-gap-xs);height:var(--sgds-dimension-24);justify-content:center;text-decoration:none}a.nav-link:hover{color:var(--sgds-primary-color-emphasis)}a.nav-link:focus,a.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus);color:var(--sgds-primary-color-emphasis);outline:0}a.nav-link.disabled,a.nav-link[disabled]{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) a.nav-link{color:var(--sgds-danger-color)}:host([variant=danger]) a.nav-link:focus,:host([variant=danger]) a.nav-link:focus-visible,:host([variant=danger]) a.nav-link:hover{color:var(--sgds-danger-color-emphasis)}:host([size=lg]) a.nav-link{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-32)}:host([size=sm]) a.nav-link{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-20)}`;
+  var css_248z$o = css`a.nav-link{align-items:center;color:var(--sgds-primary-color);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--sgds-gap-xs);height:var(--sgds-dimension-24);justify-content:center;text-decoration:none}a.nav-link:hover{color:var(--sgds-primary-color-emphasis)}a.nav-link:focus,a.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus);color:var(--sgds-primary-color-emphasis);outline:0}a.nav-link.disabled,a.nav-link[disabled]{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) a.nav-link{color:var(--sgds-danger-color)}:host([variant=danger]) a.nav-link:focus,:host([variant=danger]) a.nav-link:focus-visible,:host([variant=danger]) a.nav-link:hover{color:var(--sgds-danger-color-emphasis)}:host([size=lg]) a.nav-link{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-32)}:host([size=sm]) a.nav-link{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-20)}`;
 
   /**
    * @summary Link allows users to click and navigate their way from page to page
@@ -23225,7 +23337,7 @@
     `;
       }
   }
-  SgdsLink.styles = [...LinkElement.styles, css_248z$n];
+  SgdsLink.styles = [...LinkElement.styles, css_248z$o];
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsLink.prototype, "size", void 0);
@@ -23239,7 +23351,7 @@
   const XL_BREAKPOINT = 1200;
   const XXL_BREAKPOINT = 1400;
 
-  var css_248z$m = css`:host{--mainnav-bg:transparent;--mainnav-padding-x:var(--sgds-spacer-5);--mainnav-padding-y:var(--sgds-spacer-0);--mainnav-mobile-padding-x:var(--sgds-spacer-2);--mainnav-mobile-padding-y:var(--sgds-spacer-0);--mainnav-border-bottom-width:1px;--mainnav-border-bottom-color:var(--sgds-gray-400);--mainnav-theme-color:var(--sgds-primary)}.navbar{align-items:stretch;background-color:var(--mainnav-bg);border-bottom:var(--mainnav-border-bottom-width) solid var(--mainnav-border-bottom-color);display:flex;flex-wrap:wrap;justify-content:space-between;min-height:80px;padding:var(--mainnav-padding-y) var(--mainnav-padding-x);position:relative;@media (max-width:768px){padding:var(--mainnav-mobile-padding-y) var(--mainnav-mobile-padding-x)}}.navbar-brand{align-items:center;display:flex;font-size:1.25rem;margin-right:var(--sgds-spacer-4);padding-bottom:.125rem;padding-top:.125rem;text-decoration:none;white-space:nowrap}.navbar-brand,.navbar-brand:focus,.navbar-brand:hover{color:rgba(var(--sgds-emphasis-color-rgb),.9)}.navbar-nav{display:flex;flex-direction:column;gap:var(--sgds-spacer-4);height:100%;list-style:none;margin-bottom:0;margin-top:0;padding-left:0;padding-right:var(--sgds-spacer-4);width:100%}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{background-color:transparent;border:none;cursor:pointer;font-size:1.25rem;line-height:1;padding:var(--sgds-spacer-1) .75rem}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{box-shadow:none;outline:0;text-decoration:none}.navbar-toggler-icon{background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>');background-position:50%;background-repeat:no-repeat;background-size:100%;display:inline-block;height:1.5em;vertical-align:middle;width:1.5em}.navbar-nav-scroll{max-height:75vh;overflow-y:auto;padding-right:.5rem}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1200px){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1400px){.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.order-first{order:-1!important}.order-1{order:1!important}.order-2{order:2!important}.order-last{order:6!important}slot[name=non-collapsible]{align-items:center}.slot-end,slot[name=non-collapsible]{display:flex;gap:var(--sgds-spacer-4);margin-left:auto}.slot-end{align-items:stretch}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
+  var css_248z$n = css`:host{--mainnav-bg:transparent;--mainnav-padding-x:var(--sgds-spacer-5);--mainnav-padding-y:var(--sgds-spacer-0);--mainnav-mobile-padding-x:var(--sgds-spacer-2);--mainnav-mobile-padding-y:var(--sgds-spacer-0);--mainnav-border-bottom-width:1px;--mainnav-border-bottom-color:var(--sgds-gray-400);--mainnav-theme-color:var(--sgds-primary)}.navbar{align-items:stretch;background-color:var(--mainnav-bg);border-bottom:var(--mainnav-border-bottom-width) solid var(--mainnav-border-bottom-color);display:flex;flex-wrap:wrap;justify-content:space-between;min-height:80px;padding:var(--mainnav-padding-y) var(--mainnav-padding-x);position:relative;@media (max-width:768px){padding:var(--mainnav-mobile-padding-y) var(--mainnav-mobile-padding-x)}}.navbar-brand{align-items:center;display:flex;font-size:1.25rem;margin-right:var(--sgds-spacer-4);padding-bottom:.125rem;padding-top:.125rem;text-decoration:none;white-space:nowrap}.navbar-brand,.navbar-brand:focus,.navbar-brand:hover{color:rgba(var(--sgds-emphasis-color-rgb),.9)}.navbar-nav{display:flex;flex-direction:column;gap:var(--sgds-spacer-4);height:100%;list-style:none;margin-bottom:0;margin-top:0;padding-left:0;padding-right:var(--sgds-spacer-4);width:100%}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{background-color:transparent;border:none;cursor:pointer;font-size:1.25rem;line-height:1;padding:var(--sgds-spacer-1) .75rem}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{box-shadow:none;outline:0;text-decoration:none}.navbar-toggler-icon{background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>');background-position:50%;background-repeat:no-repeat;background-size:100%;display:inline-block;height:1.5em;vertical-align:middle;width:1.5em}.navbar-nav-scroll{max-height:75vh;overflow-y:auto;padding-right:.5rem}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1200px){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1400px){.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.order-first{order:-1!important}.order-1{order:1!important}.order-2{order:2!important}.order-last{order:6!important}slot[name=non-collapsible]{align-items:center}.slot-end,slot[name=non-collapsible]{display:flex;gap:var(--sgds-spacer-4);margin-left:auto}.slot-end{align-items:stretch}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
 
   const SIZES = {
       sm: SM_BREAKPOINT,
@@ -23415,7 +23527,7 @@
           }
       }
   }
-  SgdsMainnav.styles = [...SgdsElement.styles, css_248z$m];
+  SgdsMainnav.styles = [...SgdsElement.styles, css_248z$n];
   __decorate([
       query(".navbar-toggler")
   ], SgdsMainnav.prototype, "header", void 0);
@@ -23452,7 +23564,7 @@
       options: { duration: 200, easing: "ease-in-out" }
   });
 
-  var css_248z$l = css`.dropdown-menu{background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:0 0 5px 5px;box-shadow:0 .5rem 1rem rgba(0,0,0,.15);margin-top:0}.nav-link.show{border-color:var(--mainnav-theme-color);color:var(--mainnav-theme-color)}.sgds.dropdown.nav-item{height:100%}a.nav-link{align-items:center;border-bottom:.125rem solid transparent;color:var(--sgds-body-color);cursor:pointer;display:flex;min-height:100%;padding:0;text-decoration:none;&.active,&:hover{border-color:var(--mainnav-theme-color);color:var(--mainnav-theme-color)}&:focus-visible{box-shadow:0 0 0 .25rem rgba(89,66,219,.25);outline:0}}.nav-link.disabled{cursor:default;opacity:var(--mainnav-disabled-opacity);pointer-events:none}`;
+  var css_248z$m = css`.dropdown-menu{background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:0 0 5px 5px;box-shadow:0 .5rem 1rem rgba(0,0,0,.15);margin-top:0}.nav-link.show{border-color:var(--mainnav-theme-color);color:var(--mainnav-theme-color)}.sgds.dropdown.nav-item{height:100%}a.nav-link{align-items:center;border-bottom:.125rem solid transparent;color:var(--sgds-body-color);cursor:pointer;display:flex;min-height:100%;padding:0;text-decoration:none;&.active,&:hover{border-color:var(--mainnav-theme-color);color:var(--mainnav-theme-color)}&:focus-visible{box-shadow:0 0 0 .25rem rgba(89,66,219,.25);outline:0}}.nav-link.disabled{cursor:default;opacity:var(--mainnav-disabled-opacity);pointer-events:none}`;
 
   /**
    * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items
@@ -23515,7 +23627,7 @@
     `;
       }
   }
-  SgdsMainnavDropdown.styles = [...DropdownListElement.styles, css_248z$E, css_248z$z, css_248z$l];
+  SgdsMainnavDropdown.styles = [...DropdownListElement.styles, css_248z$D, css_248z$z, css_248z$m];
   __decorate([
       queryAsync("a")
   ], SgdsMainnavDropdown.prototype, "dropdownRef", void 0);
@@ -23526,7 +23638,7 @@
       property({ type: Boolean })
   ], SgdsMainnavDropdown.prototype, "active", void 0);
 
-  var css_248z$k = css`:host{--mainnav-item-border-bottom-width:0.125rem}li{height:100%}a.nav-link{align-items:center;border-bottom:var(--mainnav-item-border-bottom-width) solid transparent;color:var(--sgds-body-color);cursor:pointer;display:flex;min-height:100%;padding:0;text-decoration:none;&.active,&:hover{border-color:var(--mainnav-theme-color);color:var(--mainnav-theme-color)}&:focus-visible{box-shadow:0 0 0 .25rem rgba(89,66,219,.25);outline:0}}.nav-link.disabled{cursor:default;opacity:var(--sgds-disabled-opacity);pointer-events:none}`;
+  var css_248z$l = css`:host{--mainnav-item-border-bottom-width:0.125rem}li{height:100%}a.nav-link{align-items:center;border-bottom:var(--mainnav-item-border-bottom-width) solid transparent;color:var(--sgds-body-color);cursor:pointer;display:flex;min-height:100%;padding:0;text-decoration:none;&.active,&:hover{border-color:var(--mainnav-theme-color);color:var(--mainnav-theme-color)}&:focus-visible{box-shadow:0 0 0 .25rem rgba(89,66,219,.25);outline:0}}.nav-link.disabled{cursor:default;opacity:var(--sgds-disabled-opacity);pointer-events:none}`;
 
   /**
    * @slot default - slot for SgdsMainnavItem element.
@@ -23534,9 +23646,11 @@
    *  */
   class SgdsMainnavItem extends LinkElement {
   }
-  SgdsMainnavItem.styles = [...LinkElement.styles, css_248z$k];
+  SgdsMainnavItem.styles = [...LinkElement.styles, css_248z$l];
 
-  var css_248z$j = 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$k = 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$j = css`svg{vertical-align:middle}`;
 
   /**
    * @summary All .gov.sg digital services shall adopt The Official Government Banner for every page in the digital service and be placed at the top of the page.
@@ -23709,7 +23823,7 @@
     `;
       }
   }
-  SgdsMasthead.styles = [...SgdsElement.styles, css_248z$r, css_248z$O, css_248z$j];
+  SgdsMasthead.styles = [...SgdsElement.styles, css_248z$j, css_248z$L, css_248z$k];
   __decorate([
       state()
   ], SgdsMasthead.prototype, "toggleVisibility", void 0);
@@ -24083,7 +24197,7 @@
     `;
       }
   }
-  SgdsModal.styles = [...SgdsElement.styles, css_248z$X, css_248z$r, css_248z$i];
+  SgdsModal.styles = [...SgdsElement.styles, css_248z$Y, css_248z$j, css_248z$i];
   __decorate([
       query(".modal")
   ], SgdsModal.prototype, "dialog", void 0);
@@ -24669,45 +24783,82 @@
   /**
    * @summary The quantity toggle component is used to increase or decrease an incremental venue,  best used when the user needs to enter or adjust the quantity of a selected item.
    *
-   * @csspart base - The base wrapper of the quantity toggle component.
-   * @csspart button - The plus and minus button of quantity toggle
-   *
    * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.
    * @event sgds-input - Emitted when the control receives input and its value changes.
    *
    */
-  class SgdsQuantityToggle extends FormControlElement {
+  class SgdsQuantityToggle extends SgdsFormValidatorMixin(ScopedElementsMixin(FormControlElement)) {
       constructor() {
           super(...arguments);
-          /** @internal */
-          this.formSubmitController = new FormSubmitController(this);
           /** Controls the size of the quantity toggle */
           this.size = "md";
           /** The input's value. Set to 0 by default */
           this.value = 0;
-          /** Disables the entire quantity toggle  */
-          this.disabled = false;
-          /** The quantity toggle's button variants */
-          this.iconButtonVariant = "ghost";
+          // /** The quantity toggle's button variants */
+          // @property({ type: String }) iconButtonVariant = "ghost";
           /**  Controls the incremental / decremental value of the input */
           this.step = 1;
           /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
           this.defaultValue = 0;
-          /** @internal The id forwarded to input element */
-          this.inputId = genId("quantity-toggle", "input");
       }
       /** @internal */
       static get scopedElements() {
           return {
               "sgds-input": SgdsInput,
-              "sgds-icon-button": SgdsIconButton
+              "sgds-icon-button": SgdsIconButton,
+              "sgds-icon": SgdsIcon
           };
       }
-      _handleChange() {
-          if (parseInt(this.input.value) < this.step || this.input.value === "") {
-              this.input.value = "0";
+      /**
+       * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+       * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
+       */
+      reportValidity() {
+          return this._mixinReportValidity();
+      }
+      /**
+       * Checks for validity without any native error popup message
+       */
+      checkValidity() {
+          return this._mixinCheckValidity();
+      }
+      /**
+       * Returns the ValidityState object
+       */
+      get validity() {
+          return this._mixinGetValidity();
+      }
+      /**
+       * Returns the validation message based on the ValidityState
+       */
+      get validationMessage() {
+          return this._mixinGetValidationMessage();
+      }
+      async _handleChange() {
+          const sgdsInput = await this._sgdsInput;
+          if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === "") {
+              sgdsInput.value = "0";
+          }
+          this.value = parseInt(sgdsInput.value);
+          this._mixinSetFormValue();
+          this._mixinValidate(sgdsInput.input);
+          this.invalid = !this._mixinReportValidity();
+      }
+      async _handleInputChange() {
+          const sgdsInput = await this._sgdsInput;
+          this.invalid = false;
+          if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === "") {
+              sgdsInput.value = "0";
           }
-          this.value = parseInt(this.input.value);
+          this.value = parseInt(sgdsInput.value);
+          this._mixinSetFormValue();
+          this._mixinValidate(sgdsInput.input);
+      }
+      async _mixinResetFormControl() {
+          const sgdsInput = await this._sgdsInput;
+          this.value = this.defaultValue;
+          sgdsInput.input.value = this.value.toString();
+          this._mixinResetValidity(sgdsInput.input);
       }
       _handleKeyDown(event) {
           const allowedKeys = [
@@ -24724,6 +24875,12 @@
               event.preventDefault();
           }
       }
+      _handleInvalid() {
+          this.invalid = true;
+      }
+      _handleValid() {
+          this.invalid = false;
+      }
       /** Simulates a click on the plus button */
       plus() {
           this.plusBtn.click();
@@ -24732,23 +24889,41 @@
       minus() {
           this.minusBtn.click();
       }
-      _onPlus(event) {
+      async _onPlus(event) {
+          const sgdsInput = await this._sgdsInput;
           event.preventDefault();
           event.stopPropagation();
-          this.value = parseInt(this.input.value) + parseInt(this.input.step);
+          this.value = parseInt(sgdsInput.value) + parseInt(sgdsInput.step.toString());
+          this._validateOnClick(sgdsInput.input);
       }
-      _onMinus(event) {
+      async _onMinus(event) {
+          const sgdsInput = await this._sgdsInput;
           event.preventDefault();
           event.stopPropagation();
           if (this.value < this.step) {
               this.value = 0;
           }
           else {
-              this.value = parseInt(this.input.value) - parseInt(this.input.step);
+              this.value = parseInt(sgdsInput.value) - parseInt(sgdsInput.step.toString());
           }
+          this._validateOnClick(sgdsInput.input);
+      }
+      /**
+       * Validates the input on button clicks of the toggle.
+       * Input is validated every time the button is click to update the invalid state
+       * to indiciate the validity of quantity toggle
+       * @param input native HTMLInputElement
+       */
+      async _validateOnClick(input) {
+          const sgdsInput = await this._sgdsInput;
+          await sgdsInput.updateComplete;
+          this._mixinSetFormValue();
+          this._mixinValidate(input);
+          this.invalid = !this._mixinReportValidity();
       }
       _renderFeedback() {
-          return this.invalid && this.hasFeedback
+          const wantFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";
+          return this.invalid && wantFeedbackText
               ? html ` <div class="invalid-feedback-container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
             <path
@@ -24756,17 +24931,20 @@
               fill="#B90000"
             />
           </svg>
-          <div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>
+          <div id="${this._controlId}-invalid" class="invalid-feedback">
+            ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}
+          </div>
         </div>`
               : html `${this._renderHintText()}`;
       }
       _renderLabel() {
           const labelTemplate = html `
       <label
-        for=${this.inputId}
-        id=${this.labelId}
+        for=${this._controlId}
+        id=${this._labelId}
         class=${classMap({
-            "form-label": true
+            "form-label": true,
+            disabled: this.disabled
         })}
         >${this.label}</label
       >
@@ -24774,30 +24952,22 @@
           return this.label && labelTemplate;
       }
       _renderHintText() {
-          const hintTextTemplate = html ` <div id="${this.inputId}Help" class="form-text">${this.hintText}</div> `;
+          const hintTextTemplate = html ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
           return this.hintText && hintTextTemplate;
       }
       render() {
           return html `
       <div class="form-control-container">
         ${this._renderLabel()}
-        <div
-          part="base"
-          class="${classMap({
-            disabled: this.disabled,
-            "input-group": true,
-            [`input-group-${this.size}`]: this.size
-        })}"
-          variant="quantity-toggle"
-          size=${this.size}
-        >
+        <div class="input-group">
           <sgds-icon-button
-            variant=${this.iconButtonVariant}
+            variant="ghost"
             ariaLabel=${`decrease by ${this.step}`}
-            part="button"
             ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}
             @click=${this._onMinus}
-          ></sgds-icon-button>
+          >
+            <sgds-icon name="dash"></sgds-icon>
+          </sgds-icon-button>
           <sgds-input
             type="number"
             class="quantity-toggle"
@@ -24805,21 +24975,24 @@
             step=${ifDefined(this.step)}
             min=${ifDefined(this.min)}
             max=${ifDefined(this.max)}
-            .value=${live(this.value.toString())}
-            @sgds-change=${() => this._handleChange()}
-            @sgds-input=${() => this._handleChange()}
+            .value=${live(this.value)}
+            @sgds-change=${this._handleChange}
+            @sgds-input=${this._handleInputChange}
+            @sgds-invalid=${this._handleInvalid}
+            @sgds-valid=${this._handleValid}
             @keydown=${this._handleKeyDown}
             ?disabled=${this.disabled}
+            id=${this._controlId}
             ?invalid=${this.invalid}
-            id=${this.inputId}
+            hasFeedback=${ifDefined(this.hasFeedback !== "text" ? "style" : undefined)}
           ></sgds-input>
           <sgds-icon-button
-            variant=${this.iconButtonVariant}
+            variant="ghost"
             ariaLabel=${`increase by ${this.step}`}
-            part="button"
             @click=${this._onPlus}
             ?disabled=${this.disabled || (this.max !== undefined && this.max && this.value >= this.max)}
-          ></sgds-icon-button>
+            ><sgds-icon name="plus"></sgds-icon>
+          </sgds-icon-button>
         </div>
         <div id="announcer" role="region" aria-live="assertive" class="visually-hidden">${this.value}</div>
         ${this._renderFeedback()}
@@ -24827,10 +25000,7 @@
     `;
       }
   }
-  SgdsQuantityToggle.styles = [...FormControlElement.styles, css_248z$r, css_248z$f];
-  __decorate([
-      query("sgds-input")
-  ], SgdsQuantityToggle.prototype, "input", void 0);
+  SgdsQuantityToggle.styles = [...FormControlElement.styles, css_248z$T, css_248z$j, css_248z$f];
   __decorate([
       query("sgds-icon-button[ariaLabel^='increase by']")
   ], SgdsQuantityToggle.prototype, "plusBtn", void 0);
@@ -24843,18 +25013,27 @@
   __decorate([
       property({ type: Number, reflect: true })
   ], SgdsQuantityToggle.prototype, "value", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsQuantityToggle.prototype, "disabled", void 0);
-  __decorate([
-      property({ type: String })
-  ], SgdsQuantityToggle.prototype, "iconButtonVariant", void 0);
   __decorate([
       property({ type: Number })
   ], SgdsQuantityToggle.prototype, "step", void 0);
+  __decorate([
+      property()
+  ], SgdsQuantityToggle.prototype, "min", void 0);
+  __decorate([
+      property()
+  ], SgdsQuantityToggle.prototype, "max", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsQuantityToggle.prototype, "hasFeedback", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsQuantityToggle.prototype, "invalidFeedback", void 0);
   __decorate([
       defaultValue()
   ], SgdsQuantityToggle.prototype, "defaultValue", void 0);
+  __decorate([
+      queryAsync("sgds-input")
+  ], SgdsQuantityToggle.prototype, "_sgdsInput", void 0);
 
   var css_248z$e = css`fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}`;
 
@@ -24867,43 +25046,46 @@
    *
    *
    */
-  class SgdsRadioGroup extends SgdsElement {
+  class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {
       constructor() {
           super(...arguments);
           /**@internal */
-          this.formSubmitController = new FormSubmitController(this, {
-              defaultValue: (control) => control.defaultValue
-          });
-          /**@internal */
           this.defaultValue = "";
-          /**@internal */
-          this.customErrorMessage = "";
-          /** The radio group's label  */
-          this.label = "";
-          /**  This will be true when the control is in an invalid state. */
-          this.invalid = false;
           /** The selected value of the control. */
           this.value = "";
-          /** The name assigned to the radio controls. */
-          this.name = "option";
-          /** Ensures a child radio is checked before allowing the containing form to submit. */
-          this.required = false;
           /**Feedback text for error state when validated */
           this.invalidFeedback = "";
           /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
           this.hasFeedback = false;
-          /** The radio group's hint text */
-          this.hintText = "";
+          /** Makes the input as a required field. */
+          this.required = false;
+          this._isTouched = false;
       }
       _handleValueChange() {
           this.emit("sgds-change", { detail: { value: this.value } });
           this._updateCheckedRadio();
       }
+      _handleInvalidChange() {
+          this._radios.forEach(r => (r.invalid = this.invalid));
+      }
+      /**
+       * radio requries a custom _mixinResetFormControl as the update of input value
+       * requires to fire a reset event manually
+       * */
+      _mixinResetFormControl() {
+          this.value = this.input.value = this.defaultValue;
+          this._updateInputValue("reset");
+          this._mixinResetValidity(this.input);
+      }
       connectedCallback() {
           super.connectedCallback();
           this.defaultValue = this.value;
+          this.addEventListener("sgds-blur", () => {
+              this._isTouched = true;
+          });
       }
-      firstUpdated() {
+      firstUpdated(changedProperties) {
+          super.firstUpdated(changedProperties);
           const radios = this._radios;
           radios.forEach((item, index) => {
               if (radios.length > 1) {
@@ -24919,33 +25101,9 @@
                   }
               }
           });
-      }
-      /** Gets and return the ValidityState object.  */
-      get validity() {
-          const hasMissingData = !((this.value && this.required) || !this.required);
-          const hasCustomError = this.customErrorMessage !== "";
-          return {
-              badInput: false,
-              customError: hasCustomError,
-              patternMismatch: false,
-              rangeOverflow: false,
-              rangeUnderflow: false,
-              stepMismatch: false,
-              tooLong: false,
-              tooShort: false,
-              typeMismatch: false,
-              valid: hasMissingData ? false : true,
-              valueMissing: !hasMissingData
-          };
-      }
-      /** Checks for validity and shows the browser's validation message if the control is invalid. */
-      reportValidity() {
-          const validity = this.validity;
-          this.invalid = !validity.valid;
-          if (!validity.valid) {
-              this._showNativeErrorMessage();
+          if (this.value) {
+              this._updateInputValue("change");
           }
-          return !this.invalid;
       }
       _handleRadioClick(event) {
           event.preventDefault();
@@ -24954,11 +25112,20 @@
               return;
           }
           this.value = target.value;
+          this._updateInputValue();
           const radios = this._radios;
           radios.forEach(radio => {
               return (radio.checked = radio === target);
           });
       }
+      /**
+       * when input value is set programatically, need to manually dispatch a change event
+       * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input
+       */
+      _updateInputValue(eventName = "change") {
+          this.input.value = this.value;
+          this.input.dispatchEvent(new InputEvent(eventName));
+      }
       _handleKeyDown(event) {
           var _a;
           if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) {
@@ -24980,6 +25147,7 @@
               radio.tabIndex = -1;
           });
           this.value = radios[index].value;
+          this._updateInputValue();
           radios[index].checked = true;
           radios[index].tabIndex = 0;
           // preventDefault at the end to allow Tab
@@ -24988,29 +25156,61 @@
       _handleSlotChange() {
           const radios = this._radios;
           radios.forEach(radio => (radio.checked = radio.value === this.value));
+          this._disabledChildRadios();
           if (!radios.some(radio => radio.checked)) {
               if (radios[0])
                   radios[0].tabIndex = 0;
           }
       }
-      _handleInvalid(e) {
-          e.preventDefault();
-          this.invalid = true;
-          this._radios.forEach(radio => (radio.invalid = true));
-      }
-      _showNativeErrorMessage() {
-          this.input.reportValidity();
-      }
       _updateCheckedRadio() {
           const radios = this._radios;
           radios.forEach(radio => (radio.checked = radio.value === this.value));
-          this.invalid = !this.validity.valid;
-          this._radios.forEach(radio => (radio.invalid = this.invalid));
       }
       _renderHintText() {
-          const hintTextTemplate = html$1 ` <div class="form-text">${this.hintText}</div> `;
+          const hintTextTemplate = html$1 ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
           return this.hintText && hintTextTemplate;
       }
+      /**
+       * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+       * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
+       */
+      reportValidity() {
+          return this._mixinReportValidity();
+      }
+      /**
+       * Checks for validity without any native error popup message
+       */
+      checkValidity() {
+          return this._mixinCheckValidity();
+      }
+      /**
+       * Returns the ValidityState object
+       */
+      get validity() {
+          return this._mixinGetValidity();
+      }
+      /**
+       * Returns the validation message based on the ValidityState
+       */
+      get validationMessage() {
+          return this._mixinGetValidationMessage();
+      }
+      _handleIsTouched() {
+          if (this._isTouched) {
+              this.invalid = !this.input.checkValidity();
+          }
+      }
+      _handleDisabledChange() {
+          // Disabled form controls are always valid, so we need to recheck validity when the state changes
+          this.setInvalid(false);
+          this._disabledChildRadios();
+      }
+      _disabledChildRadios() {
+          if (this.disabled) {
+              const radios = this._radios;
+              radios.forEach(radio => (radio.disabled = this.disabled));
+          }
+      }
       render() {
           const defaultSlot = html$1 `
       <slot
@@ -25042,7 +25242,8 @@
         })}"
           ?required=${this.required}
           tabindex="-1"
-          @invalid=${(e) => this._handleInvalid(e)}
+          @change=${(e) => super._mixinHandleChange(e)}
+          .value=${live(this.value)}
         />
         ${this.invalid && this.hasFeedback
             ? html$1 `
@@ -25053,7 +25254,9 @@
                     fill="#B90000"
                   />
                 </svg>
-                <div id="radio-group-feedback" tabindex="0" class="invalid-feedback">${this.invalidFeedback}</div>
+                <div id="radio-group-feedback" tabindex="0" class="invalid-feedback">
+                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
+                </div>
               </div>
             `
             : nothing}
@@ -25061,34 +25264,16 @@
     `;
       }
   }
-  SgdsRadioGroup.styles = [...SgdsElement.styles, css_248z$H, css_248z$T, css_248z$e, css_248z$F];
+  SgdsRadioGroup.styles = [...FormControlElement.styles, css_248z$e];
   __decorate([
       query("slot:not([name])")
   ], SgdsRadioGroup.prototype, "defaultSlot", void 0);
-  __decorate([
-      query(".radio-group-validation-input")
-  ], SgdsRadioGroup.prototype, "input", void 0);
   __decorate([
       state()
   ], SgdsRadioGroup.prototype, "defaultValue", void 0);
-  __decorate([
-      state()
-  ], SgdsRadioGroup.prototype, "customErrorMessage", void 0);
-  __decorate([
-      property({ reflect: true })
-  ], SgdsRadioGroup.prototype, "label", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsRadioGroup.prototype, "invalid", void 0);
   __decorate([
       property({ reflect: true })
   ], SgdsRadioGroup.prototype, "value", void 0);
-  __decorate([
-      property({ reflect: true })
-  ], SgdsRadioGroup.prototype, "name", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsRadioGroup.prototype, "required", void 0);
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsRadioGroup.prototype, "invalidFeedback", void 0);
@@ -25096,14 +25281,26 @@
       property({ type: Boolean, reflect: true })
   ], SgdsRadioGroup.prototype, "hasFeedback", void 0);
   __decorate([
-      property({ reflect: true })
-  ], SgdsRadioGroup.prototype, "hintText", void 0);
+      property({ type: Boolean, reflect: true })
+  ], SgdsRadioGroup.prototype, "required", void 0);
   __decorate([
       watch("value", { waitUntilFirstUpdate: true })
   ], SgdsRadioGroup.prototype, "_handleValueChange", null);
+  __decorate([
+      watch("invalid", { waitUntilFirstUpdate: true })
+  ], SgdsRadioGroup.prototype, "_handleInvalidChange", null);
+  __decorate([
+      state()
+  ], SgdsRadioGroup.prototype, "_isTouched", void 0);
   __decorate([
       queryAssignedElements()
   ], SgdsRadioGroup.prototype, "_radios", void 0);
+  __decorate([
+      watch("_isTouched", { waitUntilFirstUpdate: true })
+  ], SgdsRadioGroup.prototype, "_handleIsTouched", null);
+  __decorate([
+      watch("disabled", { waitUntilFirstUpdate: true })
+  ], SgdsRadioGroup.prototype, "_handleDisabledChange", null);
 
   var css_248z$d = css`:host{--sidenav-theme-color:var(--sgds-primary);--sidenav-sticky-top:0rem}div{display:flex;flex-direction:column;gap:1rem;list-style:none;margin:0;padding-left:0}.sticky{height:calc(100vh - var(--sidenav-sticky-top));overflow-y:auto;position:sticky;top:var(--sidenav-sticky-top)}`;
 
@@ -25517,6 +25714,7 @@
       constructor() {
           super(...arguments);
           /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.
+           * It is required to populate this array to properly render the stepper.
            */
           this.steps = [];
           /** The current state of active step. Defaults to 0 */
@@ -25717,7 +25915,7 @@
     `;
       }
   }
-  SgdsSwitch.styles = [...FormCheckElement.styles, css_248z$T, css_248z$8];
+  SgdsSwitch.styles = [...SgdsElement.styles, css_248z$U, css_248z$8];
   __decorate([
       property({ reflect: true, type: String })
   ], SgdsSwitch.prototype, "size", void 0);
@@ -26382,7 +26580,7 @@
       state()
   ], SgdsTable.prototype, "originalTableData", void 0);
 
-  var css_248z$3 = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}.form-control{appearance:none;background-clip:padding-box;background-color:var(--sgds-form-bg);border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md);color:var(--sgds-form-color);min-height:var(--sgds-dimension-136);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}.form-control[readonly]{border-color:var(--sgds-form-border-color-muted)}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:not([disabled]):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis)}.form-control:not([disabled]):not(.is-invalid):focus,.form-control:not([disabled]):not(.is-invalid):focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-control:disabled{background-color:var(--sgds-form-bg-muted)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`;
+  var css_248z$3 = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}.form-control{appearance:none;background-clip:padding-box;background-color:var(--sgds-form-bg);border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md);color:var(--sgds-form-color);min-height:var(--sgds-dimension-136);outline:0;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}.form-control[readonly]{border-color:var(--sgds-form-border-color-muted)}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:not([disabled]):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis)}.form-control:not([disabled]):not(.is-invalid):focus,.form-control:not([disabled]):not(.is-invalid):focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus)}.form-control.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-control:disabled{background-color:var(--sgds-form-bg-muted)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`;
 
   /**
    * @summary Text areas allow for the collection of input longer than a single line.
@@ -26392,13 +26590,9 @@
    * @event sgds-focus - Emitted when textarea is in focus.
    * @event sgds-blur - Emitted when textarea loses focus.
    */
-  class SgdsTextarea extends SgdsElement {
+  class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) {
       constructor() {
           super(...arguments);
-          /**@internal */
-          this.formSubmitController = new FormSubmitController(this);
-          /**The textarea's label */
-          this.label = "label";
           /**The textarea's value attribute. */
           this.value = "";
           /**Enables spell checking on the textarea */
@@ -26407,14 +26601,10 @@
           this.rows = 4;
           /**The textarea's placeholder text. */
           this.placeholder = "Placeholder";
-          /**Feedback text for error state when validated */
+          /** Custom feedback text for error state when validated */
           this.invalidFeedback = "";
           /**Autofocus the textarea */
           this.autofocus = false;
-          /**Disables the textarea. */
-          this.disabled = false;
-          /**Makes the textarea a required field. */
-          this.required = false;
           /** Makes the textarea readonly. */
           this.readonly = false;
           /** Controls how the textarea can be resized. */
@@ -26423,32 +26613,44 @@
           this.defaultValue = "";
           /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
           this.hasFeedback = false;
-          /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
-          this.invalid = false;
+          /** Makes the textarea as a required field. */
+          this.required = false;
           /** The textarea's hint text */
           this.hintText = "";
-          /** @internal The textarea's unique id */
-          this.textareaId = genId("textarea", "input");
-      }
-      connectedCallback() {
-          super.connectedCallback();
-          this.resizeObserver = new ResizeObserver(() => this._setTextareaHeight());
-          this.updateComplete.then(() => {
-              this._setTextareaHeight();
-              this.resizeObserver.observe(this.textarea);
-          });
-      }
-      disconnectedCallback() {
-          super.disconnectedCallback();
-          this.resizeObserver.unobserve(this.textarea);
+          this._isTouched = false;
       }
       /** Sets focus on the textarea. */
       focus(options) {
           this.textarea.focus(options);
       }
-      /** Checks for validity and shows the browser's validation message if the control is invalid. */
+      /** Sets blur on the textarea. */
+      blur() {
+          this.textarea.blur();
+      }
+      /**
+       * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+       * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
+       */
       reportValidity() {
-          return this.textarea.reportValidity();
+          return this._mixinReportValidity();
+      }
+      /**
+       * Checks for validity without any native error popup message
+       */
+      checkValidity() {
+          return this._mixinCheckValidity();
+      }
+      /**
+       * Returns the ValidityState object
+       */
+      get validity() {
+          return this._mixinGetValidity();
+      }
+      /**
+       * Returns the validation message based on the ValidityState
+       */
+      get validationMessage() {
+          return this._mixinGetValidationMessage();
       }
       /** Selects all the text in the textarea. */
       select() {
@@ -26458,14 +26660,21 @@
           e.preventDefault();
           this.invalid = true;
       }
-      _handleChange(event) {
-          this.value = this.textarea.value;
-          this.emit(event);
+      _handleChange(e) {
+          this.value = this.input.value;
+          this.emit("sgds-change");
+          super._mixinHandleChange(e);
+      }
+      _handleInputChange(e) {
+          this.value = this.input.value;
+          this.emit("sgds-input");
+          super._mixinHandleInputChange(e);
       }
       _handleFocus() {
           this.emit("sgds-focus");
       }
-      handleBlur() {
+      _handleBlur() {
+          this._isTouched = true;
           this.emit("sgds-blur");
       }
       /** @internal */
@@ -26482,23 +26691,26 @@
           }
       }
       /** @internal */
+      _handleIsTouched() {
+          if (this._isTouched) {
+              this.invalid = !this.textarea.checkValidity();
+          }
+      }
+      /** @internal */
       _handleDisabledChange() {
           // Disabled form controls are always valid, so we need to recheck validity when the state changes
-          this.textarea.disabled = this.disabled;
-          this.invalid = !this.textarea.checkValidity();
+          this.setInvalid(false);
       }
       /** @internal */
       _handleValueChange() {
-          this.invalid = !this.textarea.checkValidity();
           this.updateComplete.then(() => this._setTextareaHeight());
       }
       _renderHintText() {
-          const hintTextTemplate = html ` <div id="${this.textareaId}Help" class="form-text">${this.hintText}</div> `;
+          const hintTextTemplate = html ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
           return this.hintText && hintTextTemplate;
       }
-      render() {
-          // if maxlength is defined
-          const wordCount = html `
+      _wordCount() {
+          return html `
       <div
         class="form-text word-count ${classMap({
             "invalid-feedback": this.invalid && this.hasFeedback
@@ -26507,13 +26719,15 @@
         ${this.value.length}/${this.maxlength}
       </div>
     `;
+      }
+      render() {
           return html `
       <div
         class="form-control-container ${classMap({
             disabled: this.disabled
         })}"
       >
-        <label for=${this.textareaId} class="form-label">${this.label}</label>
+        <label for=${this._controlId} class="form-label">${this.label}</label>
         <textarea
           class=${classMap({
             "form-control": true,
@@ -26522,7 +26736,7 @@
             "textarea-resize-vertical": this.resize === "vertical",
             "textarea-resize-auto": this.resize === "auto"
         })}
-          id=${this.textareaId}
+          id=${this._controlId}
           name=${ifDefined(this.name)}
           rows=${ifDefined(this.rows)}
           placeholder=${ifDefined(this.placeholder)}
@@ -26537,13 +26751,12 @@
           ?autofocus=${this.autofocus}
           autocorrect=${ifDefined(this.autocorrect)}
           inputmode=${ifDefined(this.inputmode)}
-          @input=${() => this._handleChange("sgds-input")}
-          @change=${() => this._handleChange("sgds-change")}
+          @input=${(e) => this._handleInputChange(e)}
+          @change=${(e) => this._handleChange(e)}
           @invalid=${(e) => this._handleInvalid(e)}
           @focus=${this._handleFocus}
-          @blur=${this.handleBlur}
-        >
-        </textarea>
+          @blur=${this._handleBlur}
+        ></textarea>
         <div class="textarea-info-container">
           ${this.invalid && this.hasFeedback
             ? html `
@@ -26554,30 +26767,22 @@
                       fill="#B90000"
                     />
                   </svg>
-                  <div id="${this.textareaId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>
+                  <div id="${this._controlId}-invalid" class="invalid-feedback">
+                    ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
+                  </div>
                 </div>
               `
             : html `${this._renderHintText()}`}
-          ${this.maxlength > 0 ? wordCount : undefined}
+          ${this.maxlength > 0 ? this._wordCount() : nothing}
         </div>
       </div>
     `;
       }
   }
-  SgdsTextarea.styles = [
-      ...SgdsElement.styles,
-      css_248z$F,
-      css_248z$T,
-      css_248z$H,
-      css_248z$D,
-      css_248z$3
-  ];
+  SgdsTextarea.styles = [...FormControlElement.styles, css_248z$3];
   __decorate([
       query("textarea.form-control")
   ], SgdsTextarea.prototype, "textarea", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], SgdsTextarea.prototype, "label", void 0);
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsTextarea.prototype, "name", void 0);
@@ -26605,12 +26810,6 @@
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsTextarea.prototype, "autofocus", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsTextarea.prototype, "disabled", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsTextarea.prototype, "required", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsTextarea.prototype, "readonly", void 0);
@@ -26631,13 +26830,19 @@
   ], SgdsTextarea.prototype, "hasFeedback", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
-  ], SgdsTextarea.prototype, "invalid", void 0);
+  ], SgdsTextarea.prototype, "required", void 0);
   __decorate([
       property({ reflect: true })
   ], SgdsTextarea.prototype, "hintText", void 0);
+  __decorate([
+      state()
+  ], SgdsTextarea.prototype, "_isTouched", void 0);
   __decorate([
       watch("rows", { waitUntilFirstUpdate: true })
   ], SgdsTextarea.prototype, "_handleRowsChange", null);
+  __decorate([
+      watch("_isTouched", { waitUntilFirstUpdate: true })
+  ], SgdsTextarea.prototype, "_handleIsTouched", null);
   __decorate([
       watch("disabled", { waitUntilFirstUpdate: true })
   ], SgdsTextarea.prototype, "_handleDisabledChange", null);
@@ -26645,13 +26850,14 @@
       watch("value", { waitUntilFirstUpdate: true })
   ], SgdsTextarea.prototype, "_handleValueChange", null);
 
-  var css_248z$2 = css`:host{--sgds-toast-border-radius:var(--sgds-border-radius-md)}.toast{--toast-border-color:var(--sgds-gray-800);--toast-header-color:light-dark(var(--sgds-gray-800),var(--sgds-gray-200));--toast-header-icon-color:var(--sgds-body-color);align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-neutral-bg-inverse);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-subtitle-color);display:flex;flex-direction:row;gap:var(--sgds-gap-xs);max-width:var(--sgds-dimension-480);min-width:var(--sgds-dimension-320);padding:var(--sgds-padding-md) var(--sgds-padding-md);pointer-events:auto;width:320px}.toast-content{word-wrap:break-word;color:var(--sgds-gray-600);gap:var(--sgds-gap-sm)}.toast-body,.toast-content{display:flex;flex-direction:column}.toast-action{word-wrap:break-word;color:var(--sgds-primary-color)}.toast-header strong{margin-right:auto;word-break:break-all}.close-btn{margin-left:auto}.d-none{display:none}`;
+  var css_248z$2 = css`:host{--sgds-toast-border-radius:var(--sgds-border-radius-md)}:host([variant=info]) slot[name=icon]::slotted(*){color:var(--sgds-primary-color)}:host([variant=success]) slot[name=icon]::slotted(*){color:var(--sgds-success-color)}:host([variant=danger]) slot[name=icon]::slotted(*){color:var(--sgds-danger-color)}:host([variant=warning]) slot[name=icon]::slotted(*){color:var(--sgds-warning-color)}.toast{align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-neutral-bg-inverse);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);display:flex;flex-direction:row;gap:var(--sgds-gap-xs);max-width:var(--sgds-dimension-480);min-width:var(--sgds-dimension-320);padding:var(--sgds-padding-md);pointer-events:auto;width:320px}.toast-content{word-wrap:break-word;gap:var(--sgds-gap-sm)}.toast-body,.toast-content{display:flex;flex-direction:column}.toast-body strong{line-height:var(--sgds-line-height-min)}.toast-body span{color:var(--sgds-default-color-subtle)}.toast-action{word-wrap:break-word;color:var(--sgds-primary-color)}.toast-header strong{margin-right:auto;word-break:break-all}.close-btn{margin-left:auto}.d-none{display:none}`;
 
   /**
    * @summary Toast allows you to convey quick messaging notifications to the user.
    *
    * @slot default - The content to pass into toast's body
    * @slot action - The content to pass into toast's action
+   * @slot icon - The icon in toast
    *
    *
    * @event sgds-show - Emitted on show.
@@ -26677,7 +26883,7 @@
           /**The variant styles of toast */
           this.variant = "info";
           /** Controls whether or not the Toast is dismissible */
-          this.dismissable = false;
+          this.dismissible = false;
       }
       /**@internal */
       static get scopedElements() {
@@ -26750,28 +26956,15 @@
         aria-live="assertive"
         aria-atomic="true"
       >
-        <i>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            class="bi bi-airplane"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Zm.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1c-.213 0-.458.158-.678.599Z"
-            ></path>
-          </svg>
-        </i>
+        <slot name="icon"></slot>
         <div class="toast-content">
           <div class="toast-body">
             <strong>${this.title}</strong>
-            <slot></slot>
+            <span><slot></slot></span>
           </div>
           <slot class="toast-action" name="action"></slot>
         </div>
-        ${this.dismissable
+        ${this.dismissible
             ? html$1 `<sgds-close-button
               class="close-btn"
               ariaLabel="close toast"
@@ -26806,7 +26999,7 @@
   ], SgdsToast.prototype, "variant", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
-  ], SgdsToast.prototype, "dismissable", void 0);
+  ], SgdsToast.prototype, "dismissible", void 0);
   __decorate([
       watch("show", { waitUntilFirstUpdate: true })
   ], SgdsToast.prototype, "handleShowChange", null);
@@ -27754,8 +27947,8 @@
   class SgdsTooltip extends SgdsElement {
       constructor() {
           super(...arguments);
-          this.myTooltip = createRef();
-          this.bsTooltip = null;
+          this._myTooltip = createRef();
+          this._bsTooltip = null;
           /** The tooltip's content. Content has to be textual */
           this.content = "";
           /** The placement of tooltip relative to its target */
@@ -27765,7 +27958,7 @@
       }
       _handleSlotChange() {
           // For a11y purpose
-          this.tooltipTargetElements.forEach(el => el.setAttribute("data-sgds-tooltip", this.content));
+          this._tooltipTargetElements.forEach(el => el.setAttribute("data-sgds-tooltip", this.content));
       }
       _handleClickOutOfElement(e, self) {
           if (!e.composedPath().includes(self)) {
@@ -27784,7 +27977,7 @@
           document.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this));
           document.removeEventListener("touchstart", (event) => this._handleClickOutOfElement(event, this));
       }
-      initializeTooltip() {
+      _initializeTooltip() {
           this.tooltipConfig = {
               popperConfig: (defaultConfig) => {
                   this.popperConfig = defaultConfig;
@@ -27804,34 +27997,34 @@
               html: true,
               container: this.shadowRoot.querySelector("div") // tooltip to appear inside the shadow root of sgds-tooltip instead of anywhere in the DOM, so that scoped styles can apply
           };
-          this.bsTooltip = new Tooltip(this.myTooltip.value, this.tooltipConfig);
+          this._bsTooltip = new Tooltip(this._myTooltip.value, this.tooltipConfig);
       }
       firstUpdated() {
-          this.initializeTooltip();
-          this.myTooltip.value.addEventListener("show.bs.tooltip", () => {
+          this._initializeTooltip();
+          this._myTooltip.value.addEventListener("show.bs.tooltip", () => {
               this.emit("sgds-show");
           });
-          this.myTooltip.value.addEventListener("shown.bs.tooltip", () => {
+          this._myTooltip.value.addEventListener("shown.bs.tooltip", () => {
               this.emit("sgds-after-show");
           });
-          this.myTooltip.value.addEventListener("hide.bs.tooltip", () => {
+          this._myTooltip.value.addEventListener("hide.bs.tooltip", () => {
               this.emit("sgds-hide");
           });
-          this.myTooltip.value.addEventListener("hidden.bs.tooltip", () => {
+          this._myTooltip.value.addEventListener("hidden.bs.tooltip", () => {
               this.emit("sgds-after-hide");
           });
       }
       /** Hides the Tooltip */
       hide() {
-          this.bsTooltip.hide();
+          this._bsTooltip.hide();
       }
       /** Shows the Tooltip */
       show() {
-          this.bsTooltip.show();
+          this._bsTooltip.show();
       }
       render() {
           return html$1 `
-      <div ${ref(this.myTooltip)}>
+      <div ${ref(this._myTooltip)}>
         <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
     `;
@@ -27852,7 +28045,7 @@
   ], SgdsTooltip.prototype, "popperConfig", void 0);
   __decorate([
       queryAssignedElements()
-  ], SgdsTooltip.prototype, "tooltipTargetElements", void 0);
+  ], SgdsTooltip.prototype, "_tooltipTargetElements", void 0);
 
   exports.SgdsAccordion = SgdsAccordion;
   exports.SgdsAccordionItem = SgdsAccordionItem;
@@ -27874,6 +28067,7 @@
   exports.SgdsDropdownItem = SgdsDropdownItem;
   exports.SgdsFileUpload = SgdsFileUpload;
   exports.SgdsFooter = SgdsFooter;
+  exports.SgdsIcon = SgdsIcon;
   exports.SgdsIconButton = SgdsIconButton;
   exports.SgdsIconList = SgdsIconList;
   exports.SgdsInput = SgdsInput;