@govtechsg/sgds-web-component 3.1.1-rc.3 → 3.1.2

package/components/index.umd.js

@@ -4446,7 +4446,7 @@
 
   var css_248z$1b = css`:host([variant=border]) .accordion{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-md)}`;
 
-  const VALID_KEYS$1 = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
+  const VALID_KEYS = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
   /**
    * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`
    * @slot default - slot for accordion-item
@@ -4504,7 +4504,7 @@
           });
       }
       async _onKeyboardToggle(event) {
-          if (!VALID_KEYS$1.includes(event.key))
+          if (!VALID_KEYS.includes(event.key))
               return;
           return this._onToggle(event);
       }
@@ -7780,12 +7780,7 @@
       }
       /** Closes the badge  */
       close() {
-          const sgdsHide = this.emit("sgds-hide", { cancelable: true });
-          if (sgdsHide.defaultPrevented) {
-              return;
-          }
           this.show = false;
-          this.emit("sgds-after-hide");
       }
       /**@internal */
       _handleShowChange() {
@@ -12184,7 +12179,7 @@
       property({ type: Boolean, reflect: true })
   ], SgdsBreadcrumbItem.prototype, "active", void 0);
 
-  var css_248z$Y = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-min);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);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;white-space:nowrap;width:inherit}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
+  var css_248z$Y = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-min);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);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}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
 
   class ButtonElement extends SgdsElement {
       constructor() {
@@ -26317,9 +26312,9 @@
       });
   }
 
-  const LG_BREAKPOINT = 1024;
-  const MD_BREAKPOINT = 768;
   const SM_BREAKPOINT = 512;
+  const MD_BREAKPOINT = 768;
+  const LG_BREAKPOINT = 1024;
   const XL_BREAKPOINT = 1280;
   const XXL_BREAKPOINT = 1440;
 
@@ -27243,7 +27238,7 @@
       }
   }
 
-  var css_248z$o = css`:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}:host([size=fullscreen]) .modal-header{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=fullscreen]) .modal-body{padding:var(--sgds-padding-none)}:host([size=fullscreen]) .modal-footer{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:105500}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:var(--sgds-margin-sm) var(--sgds-margin-xs);max-height:calc(100% - var(--sgds-margin-sm) - var(--sgds-margin-sm));position:relative;width:100%}:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-sm)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-md);max-height:calc(100% - var(--sgds-margin-md) - var(--sgds-margin-md))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl) var(--sgds-margin-xs);max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));max-width:var(--sgds-dimension-896)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1176)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1320)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-6,--sgds-font-size-4);gap:1rem;line-height:var(--sgds-line-height-heading);margin:var(--sgds-margin-none,var(--sgds-margin-xs,--sgds-margin-2-xs))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-body);margin:var(--sgds-margin-none,--sgds-paragraph-spacing-xl)}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
+  var css_248z$o = css`:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:105500}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:var(--sgds-margin-sm) var(--sgds-margin-xs);max-height:calc(100% - var(--sgds-margin-sm) - var(--sgds-margin-sm));position:relative;width:100%}:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-sm)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-md);max-height:calc(100% - var(--sgds-margin-md) - var(--sgds-margin-md))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl) var(--sgds-margin-xs);max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));max-width:var(--sgds-dimension-896)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1176)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1320)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-6,--sgds-font-size-4);gap:1rem;line-height:var(--sgds-line-height-heading);margin:var(--sgds-margin-none,var(--sgds-margin-xs,--sgds-margin-2-xs))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-body);margin:var(--sgds-margin-none,--sgds-paragraph-spacing-xl)}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
 
   /**
    * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.
@@ -27308,7 +27303,7 @@
               return;
           if (buttonElements.length <= 1)
               return;
-          if (panelWidth < 512 || (this.size === "fullscreen" && panelWidth < 768)) {
+          if (panelWidth < SM_BREAKPOINT || (this.size === "fullscreen" && panelWidth < MD_BREAKPOINT)) {
               buttonElements.forEach(buttonElement => {
                   const button = buttonElement;
                   button.fullWidth = true;
@@ -29405,11 +29400,10 @@
       watch("activeStep", { waitUntilFirstUpdate: true })
   ], SgdsStepper.prototype, "_handleActiveStepChange", null);
 
-  var css_248z$b = css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus,.subnav-toggler:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
+  var css_248z$b = css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}nav.mobile{border-bottom:none;position:absolute;width:100%}.subnav{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.mobile{flex-wrap:nowrap;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg)}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-lg)}.subnav.mobile slot[name=header]::slotted(*){padding-top:var(--sgds-padding-none)}.subnav-nav-group{flex:1 1 0;gap:var(--sgds-gap-xl);justify-content:space-between}.subnav-nav,.subnav-nav-group{align-items:center;display:flex}.subnav-nav{gap:var(--sgds-gap-lg)}.subnav-nav-mobile{display:flex;flex-direction:column;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-actions{align-items:center;display:flex;gap:var(--sgds-gap-md)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-dropdown{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav-actions-mobile{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky}.hidden{display:none}`;
 
   var css_248z$a = css`.sgds-container{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-grid{display:grid;gap:var(--sgds-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 64px)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container{max-width:896px}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-grid{gap:var(--sgds-gap-xl)}.sgds-container{max-width:1176px}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:1320px}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}`;
 
-  const VALID_KEYS = ["Enter", " "];
   /**
    * @summary This component provides secondary navigation within a specific section or page. It typically appears below the main navigation and offers context-specific links or actions to help users explore related content.
    *
@@ -29426,34 +29420,40 @@
   class SgdsSubnav extends SgdsElement {
       constructor() {
           super(...arguments);
-          this.isCollapsed = false;
+          this.isCollapsed = window.innerWidth < LG_BREAKPOINT;
           this.isMenuOpen = false;
-          this._handleResize = async () => {
+          this._handleResize = () => {
               this.isCollapsed = window.innerWidth < LG_BREAKPOINT;
-              await this.updateComplete;
               if (!this.isCollapsed) {
                   this.isMenuOpen = false;
               }
               this._updateMobileLayout();
           };
           this._updateMobileLayout = () => {
-              if (!this.nav || !this.headerContainer || !this.mobileActions || !this.mobileNav)
+              var _a;
+              if (!this.nav || !this.subnav || !this.mobileActions || !this.mobileNav)
                   return;
+              const actionsSlot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="actions"]');
               if (this.isCollapsed) {
+                  const subnavHeight = this.nav.clientHeight;
                   const { top: subnavTop } = this.nav.getBoundingClientRect();
-                  const headerHeight = this.headerContainer.clientHeight;
+                  const headerHeight = this.subnav.clientHeight;
                   const actionsButtonHeight = this.mobileActions.clientHeight;
-                  const offset = window.innerWidth >= MD_BREAKPOINT && window.innerWidth < LG_BREAKPOINT
-                      ? subnavTop + headerHeight
-                      : subnavTop + headerHeight + actionsButtonHeight;
+                  const offset = subnavTop + headerHeight + actionsButtonHeight;
                   this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;
-                  this.style.minHeight = `${this.nav.clientHeight}px`;
-                  this.nav.style.position = "absolute";
+                  this.style.minHeight = `${subnavHeight}px`;
+                  if (actionsSlot) {
+                      const buttons = actionsSlot.assignedElements({ flatten: true });
+                      buttons.forEach(el => el.setAttribute("fullWidth", "true"));
+                  }
               }
               else {
                   this.mobileNav.style.maxHeight = "none";
                   this.style.minHeight = "auto";
-                  this.nav.style.position = "relative";
+                  if (actionsSlot) {
+                      const buttons = actionsSlot.assignedElements({ flatten: true });
+                      buttons.forEach(el => el.removeAttribute("isCollapsed"));
+                  }
               }
           };
           this._toggleMenu = () => {
@@ -29470,29 +29470,38 @@
       }
       connectedCallback() {
           super.connectedCallback();
-          // this._handleResize();
+          this._handleResize();
           window.addEventListener("resize", this._handleResize);
-          window.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.navGroup));
+          window.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
       }
       disconnectedCallback() {
           super.disconnectedCallback();
           window.removeEventListener("resize", this._handleResize);
-          window.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.navGroup));
+          window.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
       }
       firstUpdated() {
-          this._handleResize();
+          requestAnimationFrame(() => {
+              this._updateMobileLayout();
+          });
+      }
+      _handleSlotChange(e) {
+          const childElements = e.target.assignedElements({ flatten: true });
+          if (this.isCollapsed) {
+              childElements.forEach(element => {
+                  element.setAttribute("isCollapsed", `${this.isCollapsed}`);
+              });
+          }
+          else {
+              childElements.forEach(element => {
+                  element.removeAttribute("isCollapsed");
+              });
+          }
       }
       _handleClickOutOfElement(e, self) {
           if (!e.composedPath().includes(self) && !e.composedPath().includes(this.toggler)) {
               this.hide();
           }
       }
-      async _onKeyboardToggle(event) {
-          if (!VALID_KEYS.includes(event.key))
-              return;
-          event.preventDefault();
-          this._toggleMenu();
-      }
       /** Shows the menu. For when subnav is in the collapsed form */
       async show() {
           if (this.isMenuOpen) {
@@ -29517,11 +29526,10 @@
               return;
           }
           await stopAnimations(this.mobileNav);
-          if (this.isCollapsed) {
-              this.mobileNav.style.display = "flex";
-          }
+          this.mobileNav.classList.remove("hidden");
           const { keyframes, options } = getAnimation(this, "subnav.show");
           await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);
+          // this.mobileNav.style.height = "auto";
           this.emit("sgds-after-show");
       }
       async _animateToHide() {
@@ -29533,9 +29541,8 @@
           await stopAnimations(this.mobileNav);
           const { keyframes, options } = getAnimation(this, "subnav.hide");
           await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);
-          if (this.isCollapsed) {
-              this.mobileNav.style.display = "none";
-          }
+          this.mobileNav.classList.add("hidden");
+          // this.mobileNav.style.height = "auto";
           this.emit("sgds-after-hide");
       }
       async handleOpenChange() {
@@ -29548,41 +29555,61 @@
               this._animateToHide();
           }
       }
-      async handleCollapsedChange() {
-          await this.updateComplete;
-          this.mobileNav.style.display = this.isCollapsed ? "none" : "flex";
-      }
       render() {
+          const isHydrated = this.hasUpdated;
           return html$1 `
-      <nav aria-label="Sub navigation">
+      <nav
+        class=${classMap({
+            mobile: this.isCollapsed
+        })}
+        aria-label="Sub navigation"
+      >
         <div
           class=${classMap({
-            "sgds-container": true,
+            "sgds-container": !this.isCollapsed,
             subnav: true,
+            mobile: this.isCollapsed,
             collapsed: !this.isMenuOpen
         })}
         >
-          <div class="header-container">
-            <slot name="header"></slot>
-            <sgds-icon
-              class="subnav-toggler"
-              name="chevron-down"
-              tabindex="0"
-              @click=${this._toggleMenu}
-              @keydown=${this._onKeyboardToggle}
-              aria-label="Toggle sub navigation"
-              aria-expanded=${this.isMenuOpen}
-            ></sgds-icon>
-          </div>
-          <div class="subnav-nav-group">
-            <div class="subnav-nav">
-              <slot></slot>
-            </div>
-            <div class="subnav-actions">
-              <slot name="actions"></slot>
-            </div>
-          </div>
+          <slot name="header"></slot>
+          ${this.isCollapsed
+            ? html$1 `
+                <sgds-icon
+                  class="subnav-toggler"
+                  name="chevron-down"
+                  @click=${this._toggleMenu}
+                  aria-label="Toggle sub navigation"
+                ></sgds-icon>
+              `
+            : html$1 `
+                <div class="subnav-nav-group">
+                  <div class="subnav-nav">
+                    <slot @slotchange="${this._handleSlotChange}"></slot>
+                  </div>
+                  <div class="subnav-actions">
+                    <slot name="actions"></slot>
+                  </div>
+                </div>
+              `}
         </div>
+        ${this.isCollapsed
+            ? html$1 `
+              <div class="subnav-dropdown">
+                <div
+                  class=${classMap({
+                "subnav-nav-mobile": true,
+                hidden: !this.isMenuOpen && !isHydrated
+            })}
+                >
+                  <slot @slotchange="${this._handleSlotChange}"></slot>
+                </div>
+                <div class="subnav-actions-mobile">
+                  <slot name="actions"></slot>
+                </div>
+              </div>
+            `
+            : nothing}
       </nav>
     `;
       }
@@ -29596,19 +29623,19 @@
       query("nav")
   ], SgdsSubnav.prototype, "nav", void 0);
   __decorate([
-      query(".subnav-nav")
-  ], SgdsSubnav.prototype, "mobileNav", void 0);
+      query(".subnav")
+  ], SgdsSubnav.prototype, "subnav", void 0);
   __decorate([
-      query(".header-container")
-  ], SgdsSubnav.prototype, "headerContainer", void 0);
+      query(".subnav-nav-mobile")
+  ], SgdsSubnav.prototype, "mobileNav", void 0);
   __decorate([
       query(".subnav-toggler")
   ], SgdsSubnav.prototype, "toggler", void 0);
   __decorate([
-      query(".subnav-nav-group")
-  ], SgdsSubnav.prototype, "navGroup", void 0);
+      query(".subnav-dropdown")
+  ], SgdsSubnav.prototype, "body", void 0);
   __decorate([
-      query(".subnav-actions")
+      query(".subnav-actions-mobile")
   ], SgdsSubnav.prototype, "mobileActions", void 0);
   __decorate([
       state()
@@ -29619,9 +29646,6 @@
   __decorate([
       watch("isMenuOpen", { waitUntilFirstUpdate: true })
   ], SgdsSubnav.prototype, "handleOpenChange", null);
-  __decorate([
-      watch("isCollapsed", { waitUntilFirstUpdate: true })
-  ], SgdsSubnav.prototype, "handleCollapsedChange", null);
   setDefaultAnimation("subnav.show", {
       keyframes: [
           { height: "0", opacity: "0" },
@@ -30122,12 +30146,10 @@
       watch("active")
   ], SgdsTabPanel.prototype, "_handleActiveChange", null);
 
-  var css_248z$5 = css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{border-color:var(--sgds-border-color-default);vertical-align:top;width:100%}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-lg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>thead th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-group-divider{border-top:calc(var(--sgds-border-width)*2) solid}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}td>.row{display:flex;gap:var(--sgds-font-size-1)}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
+  var css_248z$5 = css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{border-color:var(--sgds-border-color-default);vertical-align:top;width:100%}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-lg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>thead th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-group-divider{border-top:calc(var(--sgds-border-width)*2) solid}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
 
   /**
    * @summary The use of a table is to organise a collections of data into readable rows
-   *
-   * @event sgds-table-click - Emitted when a button is clicked in the table cell. Passes a CustomeEvent <code>{target: ICellItem, row: IGeneric}</code>
    */
   class SgdsTable extends SgdsElement {
       constructor() {
@@ -30141,7 +30163,7 @@
            */
           this.columnHeader = [];
           /**
-           * Populate data cells using Arrays. For custom rendering of cell use <code>ICellItem</code>.
+           * Populate data cells using Arrays
            */
           this.tableData = [];
           /**
@@ -30155,112 +30177,52 @@
           super.connectedCallback();
           this.originalTableData = [...this.tableData];
       }
-      _handleClick(e, cell, row) {
-          const eventName = `sgds-table-click`;
-          const customClickEvent = this.emit(eventName, {
-              detail: {
-                  target: cell,
-                  row
-              },
-              cancelable: true
-          });
-          if (customClickEvent.defaultPrevented)
-              return;
-          e.preventDefault();
-      }
-      _mapElementType(cell, row) {
-          var _a, _b;
-          const val = cell === null || cell === void 0 ? void 0 : cell.value;
-          switch (cell === null || cell === void 0 ? void 0 : cell.type) {
-              case "link":
-                  return html$1 `
-          <sgds-link slot="link" id="${cell.id}">
-            <a href="${(_a = cell.href) !== null && _a !== void 0 ? _a : "#"}" @click=${(e) => this._handleClick(e, cell, row)}>${val}</a>
-          </sgds-link>
-        `;
-              case "button":
-                  return html$1 `
-          <sgds-button
-            id="${cell.id}"
-            .fullWidth=${cell.fullWidth}
-            variant=${cell.variant}
-            size=${(_b = cell.size) !== null && _b !== void 0 ? _b : "sm"}
-            .active=${cell.active}
-            .disabled=${cell.disabled}
-            href=${cell.href}
-            target=${cell.target}
-            download=${cell.download}
-            ariaLabel=${cell.ariaLabel}
-            @click=${(e) => this._handleClick(e, cell, row)}
-          >
-            ${val}
-          </sgds-button>
-        `;
-              case "icon-button":
-                  return html$1 `
-          <sgds-icon-button
-            id="${cell.id}"
-            name=${cell.value}
-            variant=${cell.variant}
-            outlined=${cell.outlined}
-            @click=${(e) => this._handleClick(e, cell, row)}
-          >
-          </sgds-icon-button>
-        `;
-              case "badge":
-                  return html$1 `
-        <sgds-badge  
-          id="${cell.id}"
-          variant=${cell.variant}
-          outlined=${cell.outlined}
-        >
-          ${val}
-        </sgds-button>
+      _renderTable() {
+          if (this.headerPosition === "horizontal") {
+              return html$1 `
+        <thead>
+          <tr>
+            ${this.rowHeader.map((header, index) => html$1 ` <th>${header}</th> `)}
+          </tr>
+        </thead>
+        <tbody>
+          ${this.tableData.map(row => html$1 `
+              <tr>
+                ${row.map((cell) => html$1 `<td>${cell}</td>`)}
+              </tr>
+            `)}
+        </tbody>
       `;
-              default:
-                  return val;
           }
-      }
-      _renderRowData(row) {
-          return this.rowHeader.map((header) => {
-              const cellValue = row[header.key];
-              let ele = cellValue;
-              if (typeof cellValue !== "string" && typeof cellValue !== "number") {
-                  if (Array.isArray(cellValue)) {
-                      // when there is multiple items
-                      ele = html$1 `<div class='row'>${cellValue.map(item => this._mapElementType(item, row))}</dive>`;
-                  }
-                  else {
-                      // If provided is object
-                      ele = html$1 `${this._mapElementType(cellValue, row)}`;
-                  }
-              }
-              return header.key ? html$1 `<td>${ele === "" || !ele ? "-" : ele}</td>` : "";
-          });
-      }
-      _renderHeader() {
-          return this.rowHeader.map(({ value }) => {
-              return html$1 ` <th>${value}</th> `;
-          });
-      }
-      _renderTable() {
-          return html$1 `
-      ${this.headerPosition != "vertical"
-            ? html$1 `<thead>
-            <tr>
-              ${this._renderHeader()}
-            </tr>
-          </thead> `
-            : ""}
-      <tbody>
-        ${this.tableData.map((row, index) => html$1 `
+          if (this.headerPosition === "both") {
+              return html$1 `
+        <thead>
+          <tr>
+            <th></th>
+            ${this.rowHeader.map((header, index) => html$1 ` <th>${header}</th> `)}
+          </tr>
+        </thead>
+        <tbody>
+          ${this.tableData.map((row, index) => html$1 `
+              <tr>
+                <th>${this.columnHeader[index]}</th>
+                ${row.map((cell) => html$1 `<td>${cell}</td>`)}
+              </tr>
+            `)}
+        </tbody>
+      `;
+          }
+          if (this.headerPosition === "vertical") {
+              const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));
+              return html$1 `
+        ${flippedTableData.map((row, index) => html$1 `
             <tr>
-              ${this.headerPosition !== "horizontal" ? html$1 `<th>${this.columnHeader[index]}</th>` : ""}
-              ${this._renderRowData(row)}
+              <th>${this.columnHeader[index]}</th>
+              ${row.map((cell) => html$1 `<td>${cell}</td>`)}
             </tr>
           `)}
-      </tbody>
-    `;
+      `;
+          }
       }
       render() {
           return html$1 `