@govtechsg/sgds-web-component 3.1.2 → 3.2.0

package/react/components/Subnav/sgds-subnav.cjs.js

@@ -17,6 +17,7 @@ var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
 var subnav = require('./subnav.cjs.js');
 var grid = require('../../css/grid.cjs.js');
 
+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.
  *
@@ -33,40 +34,34 @@ var grid = require('../../css/grid.cjs.js');
 class SgdsSubnav extends sgdsElement["default"] {
     constructor() {
         super(...arguments);
-        this.isCollapsed = window.innerWidth < breakpoints.LG_BREAKPOINT;
+        this.isCollapsed = false;
         this.isMenuOpen = false;
-        this._handleResize = () => {
+        this._handleResize = async () => {
             this.isCollapsed = window.innerWidth < breakpoints.LG_BREAKPOINT;
+            await this.updateComplete;
             if (!this.isCollapsed) {
                 this.isMenuOpen = false;
             }
             this._updateMobileLayout();
         };
         this._updateMobileLayout = () => {
-            var _a;
-            if (!this.nav || !this.subnav || !this.mobileActions || !this.mobileNav)
+            if (!this.nav || !this.headerContainer || !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.subnav.clientHeight;
+                const headerHeight = this.headerContainer.clientHeight;
                 const actionsButtonHeight = this.mobileActions.clientHeight;
-                const offset = subnavTop + headerHeight + actionsButtonHeight;
+                const offset = window.innerWidth >= breakpoints.MD_BREAKPOINT && window.innerWidth < breakpoints.LG_BREAKPOINT
+                    ? subnavTop + headerHeight
+                    : subnavTop + headerHeight + actionsButtonHeight;
                 this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;
-                this.style.minHeight = `${subnavHeight}px`;
-                if (actionsSlot) {
-                    const buttons = actionsSlot.assignedElements({ flatten: true });
-                    buttons.forEach(el => el.setAttribute("fullWidth", "true"));
-                }
+                this.style.minHeight = `${this.nav.clientHeight}px`;
+                this.nav.style.position = "absolute";
             }
             else {
                 this.mobileNav.style.maxHeight = "none";
                 this.style.minHeight = "auto";
-                if (actionsSlot) {
-                    const buttons = actionsSlot.assignedElements({ flatten: true });
-                    buttons.forEach(el => el.removeAttribute("isCollapsed"));
-                }
+                this.nav.style.position = "relative";
             }
         };
         this._toggleMenu = () => {
@@ -83,38 +78,29 @@ class SgdsSubnav extends sgdsElement["default"] {
     }
     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() {
-        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");
-            });
-        }
+        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) {
@@ -139,10 +125,11 @@ class SgdsSubnav extends sgdsElement["default"] {
             return;
         }
         await animate.stopAnimations(this.mobileNav);
-        this.mobileNav.classList.remove("hidden");
+        if (this.isCollapsed) {
+            this.mobileNav.style.display = "flex";
+        }
         const { keyframes, options } = animationRegistry.getAnimation(this, "subnav.show");
         await animate.animateTo(this.mobileNav, animate.shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);
-        // this.mobileNav.style.height = "auto";
         this.emit("sgds-after-show");
     }
     async _animateToHide() {
@@ -154,8 +141,9 @@ class SgdsSubnav extends sgdsElement["default"] {
         await animate.stopAnimations(this.mobileNav);
         const { keyframes, options } = animationRegistry.getAnimation(this, "subnav.hide");
         await animate.animateTo(this.mobileNav, animate.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() {
@@ -168,61 +156,41 @@ class SgdsSubnav extends sgdsElement["default"] {
             this._animateToHide();
         }
     }
+    async handleCollapsedChange() {
+        await this.updateComplete;
+        this.mobileNav.style.display = this.isCollapsed ? "none" : "flex";
+    }
     render() {
-        const isHydrated = this.hasUpdated;
         return lit.html `
-      <nav
-        class=${classMap_js.classMap({
-            mobile: this.isCollapsed
-        })}
-        aria-label="Sub navigation"
-      >
+      <nav aria-label="Sub navigation">
         <div
           class=${classMap_js.classMap({
-            "sgds-container": !this.isCollapsed,
+            "sgds-container": true,
             subnav: true,
-            mobile: this.isCollapsed,
             collapsed: !this.isMenuOpen
         })}
         >
-          <slot name="header"></slot>
-          ${this.isCollapsed
-            ? lit.html `
-                <sgds-icon
-                  class="subnav-toggler"
-                  name="chevron-down"
-                  @click=${this._toggleMenu}
-                  aria-label="Toggle sub navigation"
-                ></sgds-icon>
-              `
-            : lit.html `
-                <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
-            ? lit.html `
-              <div class="subnav-dropdown">
-                <div
-                  class=${classMap_js.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>
-            `
-            : lit.nothing}
       </nav>
     `;
     }
@@ -236,19 +204,19 @@ tslib.__decorate([
     decorators_js.query("nav")
 ], SgdsSubnav.prototype, "nav", void 0);
 tslib.__decorate([
-    decorators_js.query(".subnav")
-], SgdsSubnav.prototype, "subnav", void 0);
-tslib.__decorate([
-    decorators_js.query(".subnav-nav-mobile")
+    decorators_js.query(".subnav-nav")
 ], SgdsSubnav.prototype, "mobileNav", void 0);
+tslib.__decorate([
+    decorators_js.query(".header-container")
+], SgdsSubnav.prototype, "headerContainer", void 0);
 tslib.__decorate([
     decorators_js.query(".subnav-toggler")
 ], SgdsSubnav.prototype, "toggler", void 0);
 tslib.__decorate([
-    decorators_js.query(".subnav-dropdown")
-], SgdsSubnav.prototype, "body", void 0);
+    decorators_js.query(".subnav-nav-group")
+], SgdsSubnav.prototype, "navGroup", void 0);
 tslib.__decorate([
-    decorators_js.query(".subnav-actions-mobile")
+    decorators_js.query(".subnav-actions")
 ], SgdsSubnav.prototype, "mobileActions", void 0);
 tslib.__decorate([
     decorators_js.state()
@@ -259,6 +227,9 @@ tslib.__decorate([
 tslib.__decorate([
     watch.watch("isMenuOpen", { waitUntilFirstUpdate: true })
 ], SgdsSubnav.prototype, "handleOpenChange", null);
+tslib.__decorate([
+    watch.watch("isCollapsed", { waitUntilFirstUpdate: true })
+], SgdsSubnav.prototype, "handleCollapsedChange", null);
 animationRegistry.setDefaultAnimation("subnav.show", {
     keyframes: [
         { height: "0", opacity: "0" },

package/react/components/Subnav/sgds-subnav.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-subnav.cjs.js","sources":["../../../../src/components/Subnav/sgds-subnav.ts"],"sourcesContent":["import SgdsElement from \"../../base/sgds-element\";\nimport { html, nothing } from \"lit\";\nimport { query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport subnavStyle from \"./subnav.css\";\nimport gridStyle from \"../../css/grid.css\";\n\n/**\n * @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.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsSubnav. Pass in SgdsSubnavItem elements here.\n * @slot header - Slot for rendering the sub-navigation header or section title.\n * @slot actions - Slot for inserting contextual action elements such as buttons, filters, or other controls aligned with the sub-navigation.\n *\n */\n\nexport class SgdsSubnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, subnavStyle, gridStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\"nav\")\n  private nav: HTMLElement;\n\n  @query(\".subnav\")\n  private subnav: HTMLElement;\n\n  @query(\".subnav-nav-mobile\")\n  private mobileNav: HTMLElement;\n\n  @query(\".subnav-toggler\")\n  private toggler: HTMLElement;\n\n  @query(\".subnav-dropdown\")\n  private body: HTMLElement;\n\n  @query(\".subnav-actions-mobile\")\n  private mobileActions: HTMLElement;\n\n  @state()\n  private isCollapsed = window.innerWidth < LG_BREAKPOINT;\n\n  @state()\n  private isMenuOpen = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._handleResize();\n    window.addEventListener(\"resize\", this._handleResize);\n    window.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener(\"resize\", this._handleResize);\n    window.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  firstUpdated() {\n    requestAnimationFrame(() => {\n      this._updateMobileLayout();\n    });\n  }\n\n  private _handleResize = () => {\n    this.isCollapsed = window.innerWidth < LG_BREAKPOINT;\n\n    if (!this.isCollapsed) {\n      this.isMenuOpen = false;\n    }\n\n    this._updateMobileLayout();\n  };\n\n  private _updateMobileLayout = () => {\n    if (!this.nav || !this.subnav || !this.mobileActions || !this.mobileNav) return;\n\n    const actionsSlot = this.shadowRoot?.querySelector('slot[name=\"actions\"]') as HTMLSlotElement;\n\n    if (this.isCollapsed) {\n      const subnavHeight = this.nav.clientHeight;\n      const { top: subnavTop } = this.nav.getBoundingClientRect();\n      const headerHeight = this.subnav.clientHeight;\n      const actionsButtonHeight = this.mobileActions.clientHeight;\n      const offset = subnavTop + headerHeight + actionsButtonHeight;\n      this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;\n      this.style.minHeight = `${subnavHeight}px`;\n\n      if (actionsSlot) {\n        const buttons = actionsSlot.assignedElements({ flatten: true });\n        buttons.forEach(el => el.setAttribute(\"fullWidth\", \"true\"));\n      }\n    } else {\n      this.mobileNav.style.maxHeight = \"none\";\n      this.style.minHeight = \"auto\";\n\n      if (actionsSlot) {\n        const buttons = actionsSlot.assignedElements({ flatten: true });\n        buttons.forEach(el => el.removeAttribute(\"isCollapsed\"));\n      }\n    }\n  };\n\n  private _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    if (this.isCollapsed) {\n      childElements.forEach(element => {\n        element.setAttribute(\"isCollapsed\", `${this.isCollapsed}`);\n      });\n    } else {\n      childElements.forEach(element => {\n        element.removeAttribute(\"isCollapsed\");\n      });\n    }\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !e.composedPath().includes(this.toggler)) {\n      this.hide();\n    }\n  }\n\n  private _toggleMenu = () => {\n    if (this.isMenuOpen) {\n      this.hide();\n    } else {\n      document.querySelector(\"body\").style.overflow = \"hidden\";\n      this.show();\n    }\n\n    this.toggler?.focus();\n  };\n\n  /** Shows the menu. For when subnav is in the collapsed form */\n  public async show() {\n    if (this.isMenuOpen) {\n      return;\n    }\n\n    this.isMenuOpen = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the menu. For when subnav is in the collapsed form */\n  public async hide() {\n    if (!this.isMenuOpen) {\n      return;\n    }\n\n    this.isMenuOpen = false;\n    document.querySelector(\"body\").style.removeProperty(\"overflow\");\n\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.isMenuOpen = false;\n      return;\n    }\n\n    await stopAnimations(this.mobileNav);\n    this.mobileNav.classList.remove(\"hidden\");\n\n    const { keyframes, options } = getAnimation(this, \"subnav.show\");\n    await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n    // this.mobileNav.style.height = \"auto\";\n\n    this.emit(\"sgds-after-show\");\n  }\n\n  private async _animateToHide() {\n    const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n    if (slHide.defaultPrevented) {\n      this.isMenuOpen = true;\n      return;\n    }\n\n    await stopAnimations(this.mobileNav);\n\n    const { keyframes, options } = getAnimation(this, \"subnav.hide\");\n    await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n    this.mobileNav.classList.add(\"hidden\");\n    // this.mobileNav.style.height = \"auto\";\n\n    this.emit(\"sgds-after-hide\");\n  }\n\n  @watch(\"isMenuOpen\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.isMenuOpen) {\n      // Show\n      this._animateToShow();\n    } else {\n      // Hide\n      this._animateToHide();\n    }\n  }\n\n  render() {\n    const isHydrated = this.hasUpdated;\n\n    return html`\n      <nav\n        class=${classMap({\n          mobile: this.isCollapsed\n        })}\n        aria-label=\"Sub navigation\"\n      >\n        <div\n          class=${classMap({\n            \"sgds-container\": !this.isCollapsed,\n            subnav: true,\n            mobile: this.isCollapsed,\n            collapsed: !this.isMenuOpen\n          })}\n        >\n          <slot name=\"header\"></slot>\n          ${this.isCollapsed\n            ? html`\n                <sgds-icon\n                  class=\"subnav-toggler\"\n                  name=\"chevron-down\"\n                  @click=${this._toggleMenu}\n                  aria-label=\"Toggle sub navigation\"\n                ></sgds-icon>\n              `\n            : html`\n                <div class=\"subnav-nav-group\">\n                  <div class=\"subnav-nav\">\n                    <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n                  </div>\n                  <div class=\"subnav-actions\">\n                    <slot name=\"actions\"></slot>\n                  </div>\n                </div>\n              `}\n        </div>\n        ${this.isCollapsed\n          ? html`\n              <div class=\"subnav-dropdown\">\n                <div\n                  class=${classMap({\n                    \"subnav-nav-mobile\": true,\n                    hidden: !this.isMenuOpen && !isHydrated\n                  })}\n                >\n                  <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n                </div>\n                <div class=\"subnav-actions-mobile\">\n                  <slot name=\"actions\"></slot>\n                </div>\n              </div>\n            `\n          : nothing}\n      </nav>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"subnav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"subnav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsSubnav;\n"],"names":["SgdsElement","LG_BREAKPOINT","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","html","classMap","nothing","subnavStyle","gridStyle","SgdsIcon","__decorate","query","state","watch","setDefaultAnimation"],"mappings":"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"}
+{"version":3,"file":"sgds-subnav.cjs.js","sources":["../../../../src/components/Subnav/sgds-subnav.ts"],"sourcesContent":["import SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport { query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport subnavStyle from \"./subnav.css\";\nimport gridStyle from \"../../css/grid.css\";\n\nconst VALID_KEYS = [\"Enter\", \" \"];\n\n/**\n * @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.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsSubnav. Pass in SgdsSubnavItem elements here.\n * @slot header - Slot for rendering the sub-navigation header or section title.\n * @slot actions - Slot for inserting contextual action elements such as buttons, filters, or other controls aligned with the sub-navigation.\n *\n */\n\nexport class SgdsSubnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, subnavStyle, gridStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\"nav\")\n  private nav: HTMLElement;\n\n  @query(\".subnav-nav\")\n  private mobileNav: HTMLElement;\n\n  @query(\".header-container\")\n  private headerContainer: HTMLElement;\n\n  @query(\".subnav-toggler\")\n  private toggler: HTMLElement;\n\n  @query(\".subnav-nav-group\")\n  private navGroup: HTMLElement;\n\n  @query(\".subnav-actions\")\n  private mobileActions: HTMLElement;\n\n  @state()\n  private isCollapsed = false;\n\n  @state()\n  private isMenuOpen = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // this._handleResize();\n    window.addEventListener(\"resize\", this._handleResize);\n    window.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.navGroup));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    window.removeEventListener(\"resize\", this._handleResize);\n    window.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.navGroup));\n  }\n\n  firstUpdated() {\n    this._handleResize();\n  }\n\n  private _handleResize = async () => {\n    this.isCollapsed = window.innerWidth < LG_BREAKPOINT;\n\n    await this.updateComplete;\n\n    if (!this.isCollapsed) {\n      this.isMenuOpen = false;\n    }\n\n    this._updateMobileLayout();\n  };\n\n  private _updateMobileLayout = () => {\n    if (!this.nav || !this.headerContainer || !this.mobileActions || !this.mobileNav) return;\n\n    if (this.isCollapsed) {\n      const { top: subnavTop } = this.nav.getBoundingClientRect();\n      const headerHeight = this.headerContainer.clientHeight;\n      const actionsButtonHeight = this.mobileActions.clientHeight;\n      const offset =\n        window.innerWidth >= MD_BREAKPOINT && window.innerWidth < LG_BREAKPOINT\n          ? subnavTop + headerHeight\n          : subnavTop + headerHeight + actionsButtonHeight;\n\n      this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;\n      this.style.minHeight = `${this.nav.clientHeight}px`;\n      this.nav.style.position = \"absolute\";\n    } else {\n      this.mobileNav.style.maxHeight = \"none\";\n      this.style.minHeight = \"auto\";\n      this.nav.style.position = \"relative\";\n    }\n  };\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !e.composedPath().includes(this.toggler)) {\n      this.hide();\n    }\n  }\n\n  private _toggleMenu = () => {\n    if (this.isMenuOpen) {\n      this.hide();\n    } else {\n      document.querySelector(\"body\").style.overflow = \"hidden\";\n      this.show();\n    }\n\n    this.toggler?.focus();\n  };\n\n  private async _onKeyboardToggle(event: KeyboardEvent) {\n    if (!VALID_KEYS.includes(event.key)) return;\n\n    event.preventDefault();\n    this._toggleMenu();\n  }\n\n  /** Shows the menu. For when subnav is in the collapsed form */\n  public async show() {\n    if (this.isMenuOpen) {\n      return;\n    }\n\n    this.isMenuOpen = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the menu. For when subnav is in the collapsed form */\n  public async hide() {\n    if (!this.isMenuOpen) {\n      return;\n    }\n\n    this.isMenuOpen = false;\n    document.querySelector(\"body\").style.removeProperty(\"overflow\");\n\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.isMenuOpen = false;\n      return;\n    }\n\n    await stopAnimations(this.mobileNav);\n    if (this.isCollapsed) {\n      this.mobileNav.style.display = \"flex\";\n    }\n\n    const { keyframes, options } = getAnimation(this, \"subnav.show\");\n    await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n\n    this.emit(\"sgds-after-show\");\n  }\n\n  private async _animateToHide() {\n    const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n    if (slHide.defaultPrevented) {\n      this.isMenuOpen = true;\n      return;\n    }\n\n    await stopAnimations(this.mobileNav);\n\n    const { keyframes, options } = getAnimation(this, \"subnav.hide\");\n    await animateTo(this.mobileNav, shimKeyframesHeightAuto(keyframes, this.mobileNav.scrollHeight), options);\n    if (this.isCollapsed) {\n      this.mobileNav.style.display = \"none\";\n    }\n\n    this.emit(\"sgds-after-hide\");\n  }\n\n  @watch(\"isMenuOpen\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.isMenuOpen) {\n      // Show\n      this._animateToShow();\n    } else {\n      // Hide\n      this._animateToHide();\n    }\n  }\n\n  @watch(\"isCollapsed\", { waitUntilFirstUpdate: true })\n  async handleCollapsedChange() {\n    await this.updateComplete;\n    this.mobileNav.style.display = this.isCollapsed ? \"none\" : \"flex\";\n  }\n\n  render() {\n    return html`\n      <nav aria-label=\"Sub navigation\">\n        <div\n          class=${classMap({\n            \"sgds-container\": true,\n            subnav: true,\n            collapsed: !this.isMenuOpen\n          })}\n        >\n          <div class=\"header-container\">\n            <slot name=\"header\"></slot>\n            <sgds-icon\n              class=\"subnav-toggler\"\n              name=\"chevron-down\"\n              tabindex=\"0\"\n              @click=${this._toggleMenu}\n              @keydown=${this._onKeyboardToggle}\n              aria-label=\"Toggle sub navigation\"\n              aria-expanded=${this.isMenuOpen}\n            ></sgds-icon>\n          </div>\n          <div class=\"subnav-nav-group\">\n            <div class=\"subnav-nav\">\n              <slot></slot>\n            </div>\n            <div class=\"subnav-actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"subnav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"subnav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsSubnav;\n"],"names":["SgdsElement","LG_BREAKPOINT","MD_BREAKPOINT","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","html","classMap","subnavStyle","gridStyle","SgdsIcon","__decorate","query","state","watch","setDefaultAnimation"],"mappings":"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"}

package/react/components/Subnav/sgds-subnav.js

@@ -1,18 +1,19 @@
 'use client';
 import { __decorate } from 'tslib';
 import SgdsElement from '../../base/sgds-element.js';
-import { html, nothing } from 'lit';
+import { html } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { watch } from '../../utils/watch.js';
 import { waitForEvent } from '../../utils/event.js';
 import { stopAnimations, animateTo, shimKeyframesHeightAuto } from '../../utils/animate.js';
 import { setDefaultAnimation, getAnimation } from '../../utils/animation-registry.js';
-import { LG_BREAKPOINT } from '../../utils/breakpoints.js';
+import { LG_BREAKPOINT, MD_BREAKPOINT } from '../../utils/breakpoints.js';
 import { SgdsIcon } from '../Icon/sgds-icon.js';
 import css_248z from './subnav.js';
 import css_248z$1 from '../../css/grid.js';
 
+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.
  *
@@ -29,40 +30,34 @@ import css_248z$1 from '../../css/grid.js';
 class SgdsSubnav extends SgdsElement {
     constructor() {
         super(...arguments);
-        this.isCollapsed = window.innerWidth < LG_BREAKPOINT;
+        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._updateMobileLayout();
         };
         this._updateMobileLayout = () => {
-            var _a;
-            if (!this.nav || !this.subnav || !this.mobileActions || !this.mobileNav)
+            if (!this.nav || !this.headerContainer || !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.subnav.clientHeight;
+                const headerHeight = this.headerContainer.clientHeight;
                 const actionsButtonHeight = this.mobileActions.clientHeight;
-                const offset = subnavTop + headerHeight + 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`;
-                if (actionsSlot) {
-                    const buttons = actionsSlot.assignedElements({ flatten: true });
-                    buttons.forEach(el => el.setAttribute("fullWidth", "true"));
-                }
+                this.style.minHeight = `${this.nav.clientHeight}px`;
+                this.nav.style.position = "absolute";
             }
             else {
                 this.mobileNav.style.maxHeight = "none";
                 this.style.minHeight = "auto";
-                if (actionsSlot) {
-                    const buttons = actionsSlot.assignedElements({ flatten: true });
-                    buttons.forEach(el => el.removeAttribute("isCollapsed"));
-                }
+                this.nav.style.position = "relative";
             }
         };
         this._toggleMenu = () => {
@@ -79,38 +74,29 @@ class SgdsSubnav extends SgdsElement {
     }
     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() {
-        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");
-            });
-        }
+        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) {
@@ -135,10 +121,11 @@ class SgdsSubnav extends SgdsElement {
             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() {
@@ -150,8 +137,9 @@ class SgdsSubnav extends SgdsElement {
         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() {
@@ -164,61 +152,41 @@ class SgdsSubnav extends SgdsElement {
             this._animateToHide();
         }
     }
+    async handleCollapsedChange() {
+        await this.updateComplete;
+        this.mobileNav.style.display = this.isCollapsed ? "none" : "flex";
+    }
     render() {
-        const isHydrated = this.hasUpdated;
         return html `
-      <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 `
-                <sgds-icon
-                  class="subnav-toggler"
-                  name="chevron-down"
-                  @click=${this._toggleMenu}
-                  aria-label="Toggle sub navigation"
-                ></sgds-icon>
-              `
-            : html `
-                <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 `
-              <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>
     `;
     }
@@ -232,19 +200,19 @@ __decorate([
     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()
@@ -255,6 +223,9 @@ __decorate([
 __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" },