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

package/components/Subnav/index.umd.js

@@ -4557,6 +4557,7 @@
   }
 
   const LG_BREAKPOINT = 1024;
+  const MD_BREAKPOINT = 768;
 
   var Archive = html `
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
@@ -7040,10 +7041,11 @@
       property({ type: String, reflect: true })
   ], SgdsIcon.prototype, "size", void 0);
 
-  var css_248z$2 = 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{align-items:flex-start;display:flex;flex-direction:column;flex-wrap:nowrap}.header-container{display:flex;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: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:1024px){nav{position:inherit}.subnav{flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.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:1;flex-direction:row;gap:var(--sgds-gap-xl);justify-content:space-between}.subnav-nav{align-items:center;display:flex;flex-direction:row;gap:var(--sgds-gap-lg);overflow-y:inherit;transition:none}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{align-items:center;flex:0;flex-direction:row;padding:var(--sgds-padding-none);position:inherit}slot[name=actions]::slotted(*){width:inherit}}`;
+  var css_248z$2 = 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{align-items:flex-start;display:flex;flex-direction:column;flex-wrap:nowrap}.header-container{display:flex;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{align-items:center;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{align-items:flex-start;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:1;flex-direction:row;gap:var(--sgds-gap-xl);justify-content:space-between}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;transition:none}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none)}slot[name=actions]::slotted(*){width:inherit}}`;
 
   var css_248z$1 = 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.
    *
@@ -7067,10 +7069,6 @@
               await this.updateComplete;
               if (!this.isCollapsed) {
                   this.isMenuOpen = false;
-                  this.mobileNav.style.display = "flex";
-              }
-              else {
-                  this.mobileNav.style.display = "none";
               }
               this._updateMobileLayout();
           };
@@ -7081,10 +7079,11 @@
                   const { top: subnavTop } = this.nav.getBoundingClientRect();
                   const headerHeight = this.headerContainer.clientHeight;
                   const actionsButtonHeight = this.mobileActions.clientHeight;
-                  const offset = subnavTop + headerHeight + actionsButtonHeight;
-                  const subnavHeight = this.headerContainer.clientHeight + actionsButtonHeight;
+                  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 = `${subnavHeight}px`;
+                  this.style.minHeight = `${this.nav.clientHeight}px`;
                   this.nav.style.position = "absolute";
               }
               else {
@@ -7124,6 +7123,12 @@
               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) {
@@ -7148,7 +7153,9 @@
               return;
           }
           await stopAnimations(this.mobileNav);
-          this.mobileNav.style.display = "flex";
+          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.emit("sgds-after-show");
@@ -7162,7 +7169,9 @@
           await stopAnimations(this.mobileNav);
           const { keyframes, options } = getAnimation(this, "subnav.hide");
           await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);
-          this.mobileNav.style.display = "none";
+          if (this.isCollapsed) {
+              this.mobileNav.style.display = "none";
+          }
           this.emit("sgds-after-hide");
       }
       async handleOpenChange() {
@@ -7175,12 +7184,16 @@
               this._animateToHide();
           }
       }
+      async handleCollapsedChange() {
+          await this.updateComplete;
+          this.mobileNav.style.display = this.isCollapsed ? "none" : "flex";
+      }
       render() {
           return html `
       <nav aria-label="Sub navigation">
         <div
           class=${classMap({
-            "sgds-container": !this.isCollapsed,
+            "sgds-container": true,
             subnav: true,
             collapsed: !this.isMenuOpen
         })}
@@ -7190,8 +7203,11 @@
             <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">
@@ -7239,6 +7255,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" },