@govtechsg/sgds-web-component 3.2.0-rc.0 → 3.2.0

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 = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
+  const VALID_KEYS$1 = ["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.includes(event.key))
+          if (!VALID_KEYS$1.includes(event.key))
               return;
           return this._onToggle(event);
       }
@@ -7762,7 +7762,9 @@
    * @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.
+   * @event sgds-hide - Emitted when the badge is starting to close but has not closed.
+   * @event sgds-after-show - Emitted after the badge has appeared
+   * @event sgds-after-hide - Emitted after the badge has closed
    */
   class SgdsBadge extends SgdsElement {
       constructor() {
@@ -7782,7 +7784,24 @@
       }
       /**@internal */
       _handleShowChange() {
-          this.show ? this.emit("sgds-show") : this.emit("sgds-hide");
+          if (this.show) {
+              const sgdsShow = this.emit("sgds-show", { cancelable: true });
+              if (sgdsShow.defaultPrevented) {
+                  this.show = false;
+                  return;
+              }
+              // animations if any go here
+              this.emit("sgds-after-show");
+          }
+          else {
+              const sgdsHide = this.emit("sgds-hide", { cancelable: true });
+              if (sgdsHide.defaultPrevented) {
+                  this.show = true;
+                  return;
+              }
+              // animations if any go here
+              this.emit("sgds-after-hide");
+          }
       }
       render() {
           return (this.dismissible && this.show) || !this.dismissible
@@ -12160,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);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)}`;
+  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)}`;
 
   class ButtonElement extends SgdsElement {
       constructor() {
@@ -12418,7 +12437,7 @@
       property({ type: Boolean, reflect: true })
   ], SgdsButton.prototype, "fullWidth", void 0);
 
-  var css_248z$W = css`:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([tinted]) .card{background-color:var(--sgds-bg-translucent-subtle);border:none}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{padding:var(--sgds-padding-xl) var(--sgds-padding-xl) 0}:host([orientation=vertical][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:auto;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-image{flex:1}.card-body{display:flex;flex:1;flex-direction:column;gap:var(--sgds-gap-lg);padding:var(--sgds-padding-xl)}.card-body,.card-title{color:var(--sgds-body-color-default)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}slot[name=link]::slotted(*){font-weight:700;margin-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);display:inline-flex;gap:var(--sgds-gap-2-xs);text-decoration:none!important}slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
+  var css_248z$W = css`:host([orientation=horizontal]) .card{flex-direction:row}:host([orientation=horizontal]) .card-body{flex:1}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([tinted]) .card{background-color:var(--sgds-bg-translucent-subtle);border:none}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{padding:var(--sgds-padding-xl) var(--sgds-padding-xl) 0}:host([orientation=vertical][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-image{flex:1}.card-body{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-lg);padding:var(--sgds-padding-xl)}.card-body,.card-title{color:var(--sgds-body-color-default)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}slot[name=link]::slotted(*){font-weight:700;margin-top:auto;padding-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);display:inline-flex;gap:var(--sgds-gap-2-xs);height:auto!important;text-decoration:none!important}slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
 
   var css_248z$V = 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}`;
 
@@ -12500,13 +12519,14 @@
           if (childNodes.length > 1) {
               return console.error("Multiple elements passed into SgdsCard's link slot");
           }
-          if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
-              const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
+          if (!this.stretchedLink)
+              return;
+          if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {
+              const hyperlink = (childNodes[0].querySelector("a") || childNodes[0]);
               this.card.setAttribute("href", hyperlink.href);
               const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
               linkSlot.style.display = "none";
           }
-          return;
       }
       handleImgSlotChange(e) {
           const childNodes = e.target.assignedNodes({ flatten: true });
@@ -13777,7 +13797,8 @@
           this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);
           this.value = this.selectedItems.map(i => i.value).join(";");
       }
-      async _handleBadgeDismissed(item) {
+      async _handleBadgeDismissed(e, item) {
+          e.preventDefault();
           this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);
           this.value = this.selectedItems.map(i => i.value).join(";");
       }
@@ -13876,7 +13897,7 @@
                       variant="neutral"
                       show
                       dismissible
-                      @sgds-hide=${() => this._handleBadgeDismissed(item)}
+                      @sgds-hide=${e => this._handleBadgeDismissed(e, item)}
                       >${item.label}</sgds-badge
                     >`)}
               `
@@ -25102,7 +25123,7 @@
    */
   function lockBodyScrolling(lockingEl) {
       locks.add(lockingEl);
-      document.body.classList.add("sl-scroll-lock");
+      document.body.style.overflow = "hidden";
   }
   /**
    * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
@@ -25110,7 +25131,7 @@
   function unlockBodyScrolling(lockingEl) {
       locks.delete(lockingEl);
       if (locks.size === 0) {
-          document.body.classList.remove("sl-scroll-lock");
+          document.body.style.overflow = "";
       }
   }
 
@@ -26864,7 +26885,7 @@
   class SgdsMainnavItem extends SgdsElement {
       constructor() {
           super(...arguments);
-          /** when true, sets the active stylings of .nav-link */
+          /** when true, sets the active stylings of the navigation item */
           this.active = false;
           /** Disables the SgdsMainnavItem */
           this.disabled = false;
@@ -26907,7 +26928,7 @@
   }
   SgdsMainnavItem.styles = [...SgdsElement.styles, css_248z$r];
   __decorate([
-      property({ type: Boolean })
+      property({ type: Boolean, reflect: true })
   ], SgdsMainnavItem.prototype, "active", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
@@ -27218,7 +27239,7 @@
       }
   }
 
-  var css_248z$o = css`:host([size=sm]) .modal-panel{max-width:480px}:host([size=lg]) .modal-panel{max-width:800px}:host([size=fullscreen]) .modal-panel{max-width:1128px}:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default)}: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;margin:var(--sgds-spacer-9) var(--sgds-spacer-6);max-height:calc(100% - var(--sgds-spacer-9) - var(--sgds-spacer-9));max-width:640px;position:relative;width:100%}.modal-panel:focus{outline:none}@media screen and (max-width:420px){.modal-panel{margin:var(--sgds-spacer-8) var(--sgds-spacer-6);max-height:calc(100% - var(--sgds-spacer-8) - var(--sgds-spacer-8))}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;padding:var(--sgds-padding-xl)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}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;overflow:auto;padding:0 var(--sgds-padding-xl) var(--sgds-padding-xl)}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding:var(--sgds-padding-xl)}.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.
@@ -27283,7 +27304,7 @@
               return;
           if (buttonElements.length <= 1)
               return;
-          if (panelWidth <= 360) {
+          if (panelWidth < SM_BREAKPOINT || (this.size === "fullscreen" && panelWidth < MD_BREAKPOINT)) {
               buttonElements.forEach(buttonElement => {
                   const button = buttonElement;
                   button.fullWidth = true;
@@ -27427,20 +27448,22 @@
           aria-labelledby="title"
           tabindex="-1"
         >
-          <div class="modal-header">
-            <div class="modal-header__title-description">
-              <slot class="modal-title" id="title" name="title"></slot>
-              <slot name="description"></slot>
+          <div class="modal-content">
+            <div class="modal-header">
+              <div class="modal-header__title-description">
+                <slot class="modal-title" id="title" name="title"></slot>
+                <slot name="description"></slot>
+              </div>
+              <sgds-close-button
+                class="modal-header__close"
+                @click="${() => this.requestClose("close-button")}"
+                ariaLabel="close modal"
+              ></sgds-close-button>
             </div>
-            <sgds-close-button
-              class="modal-header__close"
-              @click="${() => this.requestClose("close-button")}"
-              ariaLabel="close modal"
-            ></sgds-close-button>
-          </div>
-          <div class="modal-body">
-            <slot></slot>
-          </div>
+            <div class="modal-body">
+              <slot></slot>
+            </div>
+          </div class="modal-content">
           <div class="modal-footer">
             <slot name="footer"></slot>
           </div>
@@ -29378,10 +29401,11 @@
       watch("activeStep", { waitUntilFirstUpdate: true })
   ], SgdsStepper.prototype, "_handleActiveStepChange", null);
 
-  var css_248z$b = css`:host{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}.subnav{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.mobile{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$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$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.
    *
@@ -29400,21 +29424,33 @@
           super(...arguments);
           this.isCollapsed = false;
           this.isMenuOpen = false;
-          this._handleResize = () => {
+          this._handleResize = async () => {
               this.isCollapsed = window.innerWidth < LG_BREAKPOINT;
+              await this.updateComplete;
               if (!this.isCollapsed) {
                   this.isMenuOpen = false;
               }
-              this._updateMobileNavMaxHeight();
+              this._updateMobileLayout();
           };
-          this._updateMobileNavMaxHeight = () => {
-              if (!this.nav || !this.subnav || !this.mobileActions || !this.mobileNav)
+          this._updateMobileLayout = () => {
+              if (!this.nav || !this.headerContainer || !this.mobileActions || !this.mobileNav)
                   return;
-              const { top: subnavTop } = this.nav.getBoundingClientRect();
-              const headerHeight = this.subnav.clientHeight;
-              const actionsButtonHeight = this.mobileActions.clientHeight;
-              const offset = subnavTop + headerHeight + actionsButtonHeight;
-              this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;
+              if (this.isCollapsed) {
+                  const { top: subnavTop } = this.nav.getBoundingClientRect();
+                  const headerHeight = this.headerContainer.clientHeight;
+                  const actionsButtonHeight = this.mobileActions.clientHeight;
+                  const offset = window.innerWidth >= MD_BREAKPOINT && window.innerWidth < LG_BREAKPOINT
+                      ? subnavTop + headerHeight
+                      : subnavTop + headerHeight + actionsButtonHeight;
+                  this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;
+                  this.style.minHeight = `${this.nav.clientHeight}px`;
+                  this.nav.style.position = "absolute";
+              }
+              else {
+                  this.mobileNav.style.maxHeight = "none";
+                  this.style.minHeight = "auto";
+                  this.nav.style.position = "relative";
+              }
           };
           this._toggleMenu = () => {
               var _a;
@@ -29430,36 +29466,29 @@
       }
       connectedCallback() {
           super.connectedCallback();
-          this._handleResize();
+          // this._handleResize();
           window.addEventListener("resize", this._handleResize);
-          window.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
+          window.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.navGroup));
       }
       disconnectedCallback() {
           super.disconnectedCallback();
           window.removeEventListener("resize", this._handleResize);
-          window.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
+          window.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.navGroup));
       }
       firstUpdated() {
-          this._updateMobileNavMaxHeight();
-      }
-      _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");
-              });
-          }
+          this._handleResize();
       }
       _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) {
@@ -29484,10 +29513,11 @@
               return;
           }
           await stopAnimations(this.mobileNav);
-          this.mobileNav.classList.remove("hidden");
+          if (this.isCollapsed) {
+              this.mobileNav.style.display = "flex";
+          }
           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() {
@@ -29499,8 +29529,9 @@
           await stopAnimations(this.mobileNav);
           const { keyframes, options } = getAnimation(this, "subnav.hide");
           await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);
-          this.mobileNav.classList.add("hidden");
-          // this.mobileNav.style.height = "auto";
+          if (this.isCollapsed) {
+              this.mobileNav.style.display = "none";
+          }
           this.emit("sgds-after-hide");
       }
       async handleOpenChange() {
@@ -29513,61 +29544,41 @@
               this._animateToHide();
           }
       }
+      async handleCollapsedChange() {
+          await this.updateComplete;
+          this.mobileNav.style.display = this.isCollapsed ? "none" : "flex";
+      }
       render() {
-          const isHydrated = this.hasUpdated;
           return html$1 `
-      <nav
-        class=${classMap({
-            mobile: this.isCollapsed
-        })}
-        aria-label="Sub navigation"
-      >
+      <nav aria-label="Sub navigation">
         <div
           class=${classMap({
-            "sgds-container": !this.isCollapsed,
+            "sgds-container": true,
             subnav: true,
-            mobile: this.isCollapsed,
             collapsed: !this.isMenuOpen
         })}
         >
-          <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 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>
         </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>
     `;
       }
@@ -29581,19 +29592,19 @@
       query("nav")
   ], SgdsSubnav.prototype, "nav", void 0);
   __decorate([
-      query(".subnav")
-  ], SgdsSubnav.prototype, "subnav", void 0);
-  __decorate([
-      query(".subnav-nav-mobile")
+      query(".subnav-nav")
   ], SgdsSubnav.prototype, "mobileNav", void 0);
+  __decorate([
+      query(".header-container")
+  ], SgdsSubnav.prototype, "headerContainer", void 0);
   __decorate([
       query(".subnav-toggler")
   ], SgdsSubnav.prototype, "toggler", void 0);
   __decorate([
-      query(".subnav-dropdown")
-  ], SgdsSubnav.prototype, "body", void 0);
+      query(".subnav-nav-group")
+  ], SgdsSubnav.prototype, "navGroup", void 0);
   __decorate([
-      query(".subnav-actions-mobile")
+      query(".subnav-actions")
   ], SgdsSubnav.prototype, "mobileActions", void 0);
   __decorate([
       state()
@@ -29604,6 +29615,9 @@
   __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" },
@@ -30104,10 +30118,13 @@
       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}@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);display:table;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
+   * @summary Table is used for displaying collections of data in organized rows and columns.
+   * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.
+   *
+   * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.
    */
   class SgdsTable extends SgdsElement {
       constructor() {
@@ -30129,18 +30146,17 @@
            */
           this.headerPosition = "horizontal";
           /** @internal */
-          this.originalTableData = [];
+          this.hasSlotController = new HasSlotController(this, "[default]");
       }
       connectedCallback() {
           super.connectedCallback();
-          this.originalTableData = [...this.tableData];
       }
       _renderTable() {
           if (this.headerPosition === "horizontal") {
               return html$1 `
         <thead>
           <tr>
-            ${this.rowHeader.map((header, index) => html$1 ` <th>${header}</th> `)}
+            ${this.rowHeader.map((header) => html$1 ` <th>${header}</th> `)}
           </tr>
         </thead>
         <tbody>
@@ -30157,7 +30173,7 @@
         <thead>
           <tr>
             <th></th>
-            ${this.rowHeader.map((header, index) => html$1 ` <th>${header}</th> `)}
+            ${this.rowHeader.map((header) => html$1 ` <th>${header}</th> `)}
           </tr>
         </thead>
         <tbody>
@@ -30183,6 +30199,7 @@
           }
       }
       render() {
+          const hasDefaultSlot = this.hasSlotController.test("[default]");
           return html$1 `
       <div
         class=${classMap({
@@ -30194,9 +30211,13 @@
         })}
         tabindex="0"
       >
-        <table class="table">
-          ${this._renderTable()}
-        </table>
+        <slot id="table-slot" class="table"></slot>
+
+        ${!hasDefaultSlot
+            ? html$1 `<table class="table">
+              ${this._renderTable()}
+            </table>`
+            : ""}
       </div>
     `;
       }
@@ -30215,11 +30236,8 @@
       property({ type: Array })
   ], SgdsTable.prototype, "tableData", void 0);
   __decorate([
-      property({ type: String, reflect: true })
+      property({ type: String })
   ], SgdsTable.prototype, "headerPosition", void 0);
-  __decorate([
-      state()
-  ], SgdsTable.prototype, "originalTableData", void 0);
 
   var css_248z$4 = css`.container{display:flex;flex-direction:column;gap:var(--sgds-gap-xl)}slot:not([name])::slotted(*){--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-bold,var(--sgds-font-weight-semibold));margin-bottom:var(--sgds-margin-2-xs,var(--sgds-margin-none))}.contents{display:flex;flex-direction:column;gap:var(--sgds-gap-md);list-style:none;margin:var(--sgds-margin-none);padding:var(--sgds-padding-none)}slot[name=contents]::slotted(li){--sgds-margin-3-xs:var(--sgds-margin-none);margin-top:var(--sgds-margin-3-xs,var(--sgds-margin-none))}`;
 
@@ -30509,7 +30527,7 @@
       watch("value", { waitUntilFirstUpdate: true })
   ], SgdsTextarea.prototype, "_handleValueChange", null);
 
-  var css_248z$2 = css`:host([variant=info]) slot[name=icon]::slotted(*){color:var(--sgds-primary-color-default)}:host([variant=success]) slot[name=icon]::slotted(*){color:var(--sgds-success-color-default)}:host([variant=danger]) slot[name=icon]::slotted(*){color:var(--sgds-danger-color-default)}:host([variant=warning]) slot[name=icon]::slotted(*){color:var(--sgds-warning-color-fixed-light)}.toast{align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-surface-default);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-color-subtle)}.toast-action{word-wrap:break-word;color:var(--sgds-link-color-default)}.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([variant=info]) slot[name=icon]::slotted(*){color:var(--sgds-primary-color-default)}:host([variant=success]) slot[name=icon]::slotted(*){color:var(--sgds-success-color-default)}:host([variant=danger]) slot[name=icon]::slotted(*){color:var(--sgds-danger-color-default)}:host([variant=warning]) slot[name=icon]::slotted(*){color:var(--sgds-warning-color-fixed-light)}.toast{align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-surface-default);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{gap:var(--sgds-gap-2-xs)}.toast-body strong{line-height:var(--sgds-line-height-min)}.toast-body span{color:var(--sgds-color-subtle)}.toast-action{word-wrap:break-word;color:var(--sgds-link-color-default)}.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.