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

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" },

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-subnav.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":["subnavStyle","gridStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-subnav.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":["subnavStyle","gridStyle"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host(:not([disabled])[active]:not([active=false])) ::slotted(*){border-bottom:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default)}:host([isCollapsed]) ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}:host(:not([disabled])[isCollapsed][active]:not([active=false])) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle);border-bottom:none}::slotted(*){--sgds-font-size-2:var(--sgds-font-size-1);--sgds-link-color-default:var(--sgds-color-default);box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;font-size:var(--sgds-font-size-2,var(--sgds-font-size-1));gap:var(--sgds-gap-2-xs);padding:var(--sgds-padding-lg) var(--sgds-padding-none);text-decoration:none!important;white-space:nowrap}:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus),::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
+var css_248z = lit.css`:host(:not([disabled])[active]:not([active=false])) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle);border-bottom:none}::slotted(*){--sgds-font-size-2:var(--sgds-font-size-1);--sgds-link-color-default:var(--sgds-color-default);box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;font-size:var(--sgds-font-size-2,var(--sgds-font-size-1));gap:var(--sgds-gap-2-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-decoration:none!important;white-space:nowrap}:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus),::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}@media screen and (min-width:1024px){:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);background-color:inherit;border-bottom:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}::slotted(*){padding:var(--sgds-padding-lg) var(--sgds-padding-none)}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=subnav-item.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host(:not([disabled])[active]:not([active=false])) ::slotted(*){border-bottom:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default)}:host([isCollapsed]) ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}:host(:not([disabled])[isCollapsed][active]:not([active=false])) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle);border-bottom:none}::slotted(*){--sgds-font-size-2:var(--sgds-font-size-1);--sgds-link-color-default:var(--sgds-color-default);box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;font-size:var(--sgds-font-size-2,var(--sgds-font-size-1));gap:var(--sgds-gap-2-xs);padding:var(--sgds-padding-lg) var(--sgds-padding-none);text-decoration:none!important;white-space:nowrap}:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus),::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
+var css_248z = css`:host(:not([disabled])[active]:not([active=false])) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle);border-bottom:none}::slotted(*){--sgds-font-size-2:var(--sgds-font-size-1);--sgds-link-color-default:var(--sgds-color-default);box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;font-size:var(--sgds-font-size-2,var(--sgds-font-size-1));gap:var(--sgds-gap-2-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-decoration:none!important;white-space:nowrap}:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus),::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}@media screen and (min-width:1024px){:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);background-color:inherit;border-bottom:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}::slotted(*){padding:var(--sgds-padding-lg) var(--sgds-padding-none)}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=subnav-item.js.map

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}nav.mobile{border-bottom:none;position:absolute;width:100%}.subnav{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.mobile{flex-wrap:nowrap;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg)}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-lg)}.subnav.mobile slot[name=header]::slotted(*){padding-top:var(--sgds-padding-none)}.subnav-nav-group{flex:1 1 0;gap:var(--sgds-gap-xl);justify-content:space-between}.subnav-nav,.subnav-nav-group{align-items:center;display:flex}.subnav-nav{gap:var(--sgds-gap-lg)}.subnav-nav-mobile{display:flex;flex-direction:column;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-actions{align-items:center;display:flex;gap:var(--sgds-gap-md)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-dropdown{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav-actions-mobile{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky}.hidden{display:none}`;
+var css_248z = lit.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}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=subnav.cjs.js.map

package/react/components/Subnav/subnav.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}nav.mobile{border-bottom:none;position:absolute;width:100%}.subnav{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.mobile{flex-wrap:nowrap;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg)}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-lg)}.subnav.mobile slot[name=header]::slotted(*){padding-top:var(--sgds-padding-none)}.subnav-nav-group{flex:1 1 0;gap:var(--sgds-gap-xl);justify-content:space-between}.subnav-nav,.subnav-nav-group{align-items:center;display:flex}.subnav-nav{gap:var(--sgds-gap-lg)}.subnav-nav-mobile{display:flex;flex-direction:column;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-actions{align-items:center;display:flex;gap:var(--sgds-gap-md)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-dropdown{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav-actions-mobile{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky}.hidden{display:none}`;
+var css_248z = 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}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=subnav.js.map

package/react/components/Table/sgds-table.cjs.js

@@ -9,9 +9,13 @@ var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
 var table = require('./table.cjs.js');
+var tableCell = require('./table-cell.cjs.js');
+var tableHead = require('./table-head.cjs.js');
+var tableRow = require('./table-row.cjs.js');
 
 /**
- * @summary The use of a table is to organise a collections of data into readable rows
+ * @summary The use of a table is to organise a collections of data into readable rows.
+ * There are two ways to utilise the table, by structured element via slot or by array of data.
  */
 class SgdsTable extends sgdsElement["default"] {
     constructor() {
@@ -33,6 +37,8 @@ class SgdsTable extends sgdsElement["default"] {
          */
         this.headerPosition = "horizontal";
         /** @internal */
+        this.tableContents = [];
+        /** @internal */
         this.originalTableData = [];
     }
     connectedCallback() {
@@ -44,7 +50,7 @@ class SgdsTable extends sgdsElement["default"] {
             return lit.html `
         <thead>
           <tr>
-            ${this.rowHeader.map((header, index) => lit.html ` <th>${header}</th> `)}
+            ${this.rowHeader.map((header) => lit.html ` <th>${header}</th> `)}
           </tr>
         </thead>
         <tbody>
@@ -61,7 +67,7 @@ class SgdsTable extends sgdsElement["default"] {
         <thead>
           <tr>
             <th></th>
-            ${this.rowHeader.map((header, index) => lit.html ` <th>${header}</th> `)}
+            ${this.rowHeader.map((header) => lit.html ` <th>${header}</th> `)}
           </tr>
         </thead>
         <tbody>
@@ -86,6 +92,14 @@ class SgdsTable extends sgdsElement["default"] {
       `;
         }
     }
+    firstUpdated() {
+        const slot = this.shadowRoot.querySelector("#table-slot");
+        this.tableContents = slot.assignedElements({ flatten: true });
+    }
+    _handleSlotChange(e) {
+        const childNodes = e.target.assignedElements();
+        this.tableContents = childNodes;
+    }
     render() {
         return lit.html `
       <div
@@ -98,9 +112,13 @@ class SgdsTable extends sgdsElement["default"] {
         })}
         tabindex="0"
       >
-        <table class="table">
-          ${this._renderTable()}
-        </table>
+        <slot id="table-slot" class="table" @slotchange=${this._handleSlotChange}> </slot>
+
+        ${this.tableContents.length === 0
+            ? lit.html `<table class="table">
+              ${this._renderTable()}
+            </table>`
+            : ""}
       </div>
     `;
     }
@@ -121,10 +139,63 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: String, reflect: true })
 ], SgdsTable.prototype, "headerPosition", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsTable.prototype, "tableContents", void 0);
 tslib.__decorate([
     decorators_js.state()
 ], SgdsTable.prototype, "originalTableData", void 0);
+class SgdsTableCell extends sgdsElement["default"] {
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "cell");
+    }
+    render() {
+        return lit.html ` <slot class="table-cell"></slot> `;
+    }
+}
+SgdsTableCell.styles = [...sgdsElement["default"].styles, tableCell["default"]];
+class SgdsTableHead extends sgdsElement["default"] {
+    constructor() {
+        super(...arguments);
+        /**
+         * To indicate if the header will have a darker bottom border style
+         */
+        this.border = true;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "columnheader");
+        if (this.border) {
+            this.style.borderColor = "var(--sgds-border-color-emphasis)";
+        }
+    }
+    render() {
+        return lit.html ` <slot></slot> `;
+    }
+}
+SgdsTableHead.styles = [...sgdsElement["default"].styles, tableHead["default"]];
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsTableHead.prototype, "border", void 0);
+class SgdsTableRow extends sgdsElement["default"] {
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "row");
+    }
+    render() {
+        return lit.html `<slot class="table-row"></slot>`;
+    }
+}
+/**
+ * @summary Table row to group table cell or table head together as a single row
+ * @slot - Accepts any elements passed in
+ */
+SgdsTableRow.styles = [...sgdsElement["default"].styles, tableRow["default"]];
 
 exports.SgdsTable = SgdsTable;
+exports.SgdsTableCell = SgdsTableCell;
+exports.SgdsTableHead = SgdsTableHead;
+exports.SgdsTableRow = SgdsTableRow;
 exports["default"] = SgdsTable;
 //# sourceMappingURL=sgds-table.cjs.js.map

package/react/components/Table/sgds-table.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-table.cjs.js","sources":["../../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableStyle from \"./table.css\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary The use of a table is to organise a collections of data into readable rows\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Use responsive=\"sm\", responsive=\"md\" , responsive=\"lg\", or responsive=\"xl\" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Use reponsive=\"always\" to let table be always responsive\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Populate row header cells using Arrays\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Populate column header cells using Arrays only when <code>headerPosition=\"vertical\"</code> or <code>headerPosition=\"both\"</code>\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Populate data cells using Arrays\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table (horizontal, vertical, or both)\n   */\n  @property({ type: String, reflect: true }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /** @internal */\n  @state() originalTableData: Array<(string | number)[]> = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.originalTableData = [...this.tableData];\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string, index: number) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th></th>\n            ${this.rowHeader.map((header: string, index: number) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th>${this.columnHeader[index]}</th>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th>${this.columnHeader[index]}</th>\n              ${row.map((cell: string) => html`<td>${cell}</td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <table class=\"table\">\n          ${this._renderTable()}\n        </table>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["SgdsElement","html","classMap","tableStyle","__decorate","property","state"],"mappings":"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"}
+{"version":3,"file":"sgds-table.cjs.js","sources":["../../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableStyle from \"./table.css\";\nimport tableCellStyle from \"./table-cell.css\";\nimport tableHeadStyle from \"./table-head.css\";\nimport tableRowStyle from \"./table-row.css\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary The use of a table is to organise a collections of data into readable rows.\n * There are two ways to utilise the table, by structured element via slot or by array of data.\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Use responsive=\"sm\", responsive=\"md\" , responsive=\"lg\", or responsive=\"xl\" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Use reponsive=\"always\" to let table be always responsive\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Populate row header cells using Arrays\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Populate column header cells using Arrays only when <code>headerPosition=\"vertical\"</code> or <code>headerPosition=\"both\"</code>\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Populate data cells using Arrays\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table (horizontal, vertical, or both)\n   */\n  @property({ type: String, reflect: true }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /** @internal */\n  @state() tableContents: Array<Node> = [];\n\n  /** @internal */\n  @state() originalTableData: Array<(string | number)[]> = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.originalTableData = [...this.tableData];\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th></th>\n            ${this.rowHeader.map((header: string) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th>${this.columnHeader[index]}</th>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th>${this.columnHeader[index]}</th>\n              ${row.map((cell: string) => html`<td>${cell}</td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  firstUpdated() {\n    const slot = this.shadowRoot.querySelector(\"#table-slot\") as HTMLSlotElement;\n    this.tableContents = slot.assignedElements({ flatten: true });\n  }\n\n  private _handleSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedElements();\n    this.tableContents = childNodes;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <slot id=\"table-slot\" class=\"table\" @slotchange=${this._handleSlotChange}> </slot>\n\n        ${this.tableContents.length === 0\n          ? html`<table class=\"table\">\n              ${this._renderTable()}\n            </table>`\n          : \"\"}\n      </div>\n    `;\n  }\n}\n\nexport class SgdsTableCell extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableCellStyle];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"cell\");\n  }\n\n  render() {\n    return html` <slot class=\"table-cell\"></slot> `;\n  }\n}\n\nexport class SgdsTableHead extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableHeadStyle];\n  /**\n   * To indicate if the header will have a darker bottom border style\n   */\n  @property({ type: Boolean, reflect: true }) border = true;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"columnheader\");\n\n    if (this.border) {\n      this.style.borderColor = \"var(--sgds-border-color-emphasis)\";\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n}\n\nexport class SgdsTableRow extends SgdsElement {\n  /**\n   * @summary Table row to group table cell or table head together as a single row\n   * @slot - Accepts any elements passed in\n   */\n  static styles = [...SgdsElement.styles, tableRowStyle];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"row\");\n  }\n\n  render() {\n    return html`<slot class=\"table-row\"></slot>`;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["SgdsElement","html","classMap","tableStyle","__decorate","property","state","tableCellStyle","tableHeadStyle","tableRowStyle"],"mappings":"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"}