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

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.
  *
@@ -31,21 +32,33 @@ class SgdsSubnav extends SgdsElement {
         super(...arguments);
         this.isCollapsed = false;
         this.isMenuOpen = false;
-        this._handleResize = () => {
+        this._handleResize = async () => {
             this.isCollapsed = window.innerWidth < LG_BREAKPOINT;
+            await this.updateComplete;
             if (!this.isCollapsed) {
                 this.isMenuOpen = false;
             }
-            this._updateMobileNavMaxHeight();
+            this._updateMobileLayout();
         };
-        this._updateMobileNavMaxHeight = () => {
-            if (!this.nav || !this.subnav || !this.mobileActions || !this.mobileNav)
+        this._updateMobileLayout = () => {
+            if (!this.nav || !this.headerContainer || !this.mobileActions || !this.mobileNav)
                 return;
-            const { top: subnavTop } = this.nav.getBoundingClientRect();
-            const headerHeight = this.subnav.clientHeight;
-            const actionsButtonHeight = this.mobileActions.clientHeight;
-            const offset = subnavTop + headerHeight + actionsButtonHeight;
-            this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;
+            if (this.isCollapsed) {
+                const { top: subnavTop } = this.nav.getBoundingClientRect();
+                const headerHeight = this.headerContainer.clientHeight;
+                const actionsButtonHeight = this.mobileActions.clientHeight;
+                const offset = window.innerWidth >= MD_BREAKPOINT && window.innerWidth < LG_BREAKPOINT
+                    ? subnavTop + headerHeight
+                    : subnavTop + headerHeight + actionsButtonHeight;
+                this.mobileNav.style.maxHeight = `calc(100dvh - ${offset}px)`;
+                this.style.minHeight = `${this.nav.clientHeight}px`;
+                this.nav.style.position = "absolute";
+            }
+            else {
+                this.mobileNav.style.maxHeight = "none";
+                this.style.minHeight = "auto";
+                this.nav.style.position = "relative";
+            }
         };
         this._toggleMenu = () => {
             var _a;
@@ -61,36 +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() {
-        this._updateMobileNavMaxHeight();
-    }
-    _handleSlotChange(e) {
-        const childElements = e.target.assignedElements({ flatten: true });
-        if (this.isCollapsed) {
-            childElements.forEach(element => {
-                element.setAttribute("isCollapsed", `${this.isCollapsed}`);
-            });
-        }
-        else {
-            childElements.forEach(element => {
-                element.removeAttribute("isCollapsed");
-            });
-        }
+        this._handleResize();
     }
     _handleClickOutOfElement(e, self) {
         if (!e.composedPath().includes(self) && !e.composedPath().includes(this.toggler)) {
             this.hide();
         }
     }
+    async _onKeyboardToggle(event) {
+        if (!VALID_KEYS.includes(event.key))
+            return;
+        event.preventDefault();
+        this._toggleMenu();
+    }
     /** Shows the menu. For when subnav is in the collapsed form */
     async show() {
         if (this.isMenuOpen) {
@@ -115,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() {
@@ -130,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() {
@@ -144,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>
     `;
     }
@@ -212,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()
@@ -235,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 = false;\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    this._updateMobileNavMaxHeight();\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._updateMobileNavMaxHeight();\n  };\n\n  private _updateMobileNavMaxHeight = () => {\n    if (!this.nav || !this.subnav || !this.mobileActions || !this.mobileNav) return;\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  };\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]) ::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]) ::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));padding:var(--sgds-padding-lg) var(--sgds-padding-none);text-decoration:none!important;white-space:nowrap}:host(:not([disabled])[active]) ::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]) ::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]) ::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));padding:var(--sgds-padding-lg) var(--sgds-padding-none);text-decoration:none!important;white-space:nowrap}:host(:not([disabled])[active]) ::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{position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}nav.mobile{border-bottom:none}.subnav{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.mobile{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg)}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-lg)}.subnav.mobile slot[name=header]::slotted(*){padding-top:var(--sgds-padding-none)}.subnav-nav-group{flex:1 1 0;gap:var(--sgds-gap-xl);justify-content:space-between}.subnav-nav,.subnav-nav-group{align-items:center;display:flex}.subnav-nav{gap:var(--sgds-gap-lg)}.subnav-nav-mobile{display:flex;flex-direction:column;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-actions{align-items:center;display:flex;gap:var(--sgds-gap-md)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-dropdown{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav-actions-mobile{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky}.hidden{display:none}`;
+var css_248z = lit.css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-raised);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-raised);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{position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}nav.mobile{border-bottom:none}.subnav{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.mobile{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg)}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-lg)}.subnav.mobile slot[name=header]::slotted(*){padding-top:var(--sgds-padding-none)}.subnav-nav-group{flex:1 1 0;gap:var(--sgds-gap-xl);justify-content:space-between}.subnav-nav,.subnav-nav-group{align-items:center;display:flex}.subnav-nav{gap:var(--sgds-gap-lg)}.subnav-nav-mobile{display:flex;flex-direction:column;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-actions{align-items:center;display:flex;gap:var(--sgds-gap-md)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-dropdown{background-color:var(--sgds-surface-default);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav-actions-mobile{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky}.hidden{display:none}`;
+var css_248z = css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-raised);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-raised);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-cell.cjs.js

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lit = require('lit');
+var sgdsElement = require('../../base/sgds-element.cjs.js');
+var tableCell = require('./table-cell.cjs.js');
+
+/**
+ * @summary Table cell is used for presenting individual data values, interactive elements, or custom content within a table row.
+ *
+ *  @slot - Insert any elements to be rendered as the cell’s content.
+ */
+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"]];
+
+exports.SgdsTableCell = SgdsTableCell;
+exports["default"] = SgdsTableCell;
+//# sourceMappingURL=sgds-table-cell.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-table-cell.cjs.js","sources":["../../../../src/components/Table/sgds-table-cell.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableCellStyle from \"./table-cell.css\";\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table cell is used for presenting individual data values, interactive elements, or custom content within a table row.\n *\n *  @slot - Insert any elements to be rendered as the cell’s content.\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 default SgdsTableCell;\n"],"names":["SgdsElement","html","tableCellStyle"],"mappings":";;;;;;;;;AAMA;;;;AAIG;AACG,MAAO,aAAc,SAAQA,sBAAW,CAAA;IAG5C,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KACnC;IAED,MAAM,GAAA;QACJ,OAAOC,QAAI,CAAA,CAAA,kCAAA,CAAoC,CAAC;KACjD;;AATM,aAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,oBAAc,CAAC;;;;;"}

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

@@ -0,0 +1,23 @@
+'use client';
+import { html } from 'lit';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './table-cell.js';
+
+/**
+ * @summary Table cell is used for presenting individual data values, interactive elements, or custom content within a table row.
+ *
+ *  @slot - Insert any elements to be rendered as the cell’s content.
+ */
+class SgdsTableCell extends SgdsElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "cell");
+    }
+    render() {
+        return html ` <slot class="table-cell"></slot> `;
+    }
+}
+SgdsTableCell.styles = [...SgdsElement.styles, css_248z];
+
+export { SgdsTableCell, SgdsTableCell as default };
+//# sourceMappingURL=sgds-table-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-table-cell.js","sources":["../../../../src/components/Table/sgds-table-cell.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableCellStyle from \"./table-cell.css\";\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table cell is used for presenting individual data values, interactive elements, or custom content within a table row.\n *\n *  @slot - Insert any elements to be rendered as the cell’s content.\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 default SgdsTableCell;\n"],"names":["tableCellStyle"],"mappings":";;;;;AAMA;;;;AAIG;AACG,MAAO,aAAc,SAAQ,WAAW,CAAA;IAG5C,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KACnC;IAED,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,kCAAA,CAAoC,CAAC;KACjD;;AATM,aAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAc,CAAC;;;;"}

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

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var lit = require('lit');
+var decorators_js = require('lit/decorators.js');
+var sgdsElement = require('../../base/sgds-element.cjs.js');
+var tableHead = require('./table-head.cjs.js');
+var watch = require('../../utils/watch.cjs.js');
+
+/**
+ * @summary Table head represents a table header cell that identifies a group of information within the table.
+ *
+ * @slot - Place any elements inside to display as the header content.
+ */
+class SgdsTableHead extends sgdsElement["default"] {
+    constructor() {
+        super(...arguments);
+        /**
+         * To indicate if the header will have a darker bottom border style
+         */
+        this.border = false;
+    }
+    _handleBorderChange() {
+        var _a, _b;
+        this.border = ((_b = (_a = this.nextElementSibling) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== "sgds-table-cell";
+        this.border ? this.setAttribute("border", "true") : this.removeAttribute("border");
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "columnheader");
+    }
+    render() {
+        return lit.html `<slot></slot>`;
+    }
+}
+SgdsTableHead.styles = [...sgdsElement["default"].styles, tableHead["default"]];
+tslib.__decorate([
+    decorators_js.state()
+], SgdsTableHead.prototype, "border", void 0);
+tslib.__decorate([
+    watch.watch("border")
+], SgdsTableHead.prototype, "_handleBorderChange", null);
+
+exports.SgdsTableHead = SgdsTableHead;
+exports["default"] = SgdsTableHead;
+//# sourceMappingURL=sgds-table-head.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-table-head.cjs.js","sources":["../../../../src/components/Table/sgds-table-head.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableHeadStyle from \"./table-head.css\";\nimport { watch } from \"../../utils/watch\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table head represents a table header cell that identifies a group of information within the table.\n *\n * @slot - Place any elements inside to display as the header content.\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  @state() private border = false;\n\n  @watch(\"border\")\n  _handleBorderChange() {\n    this.border = this.nextElementSibling?.tagName?.toLowerCase() !== \"sgds-table-cell\";\n    this.border ? this.setAttribute(\"border\", \"true\") : this.removeAttribute(\"border\");\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"columnheader\");\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\nexport default SgdsTableHead;\n"],"names":["SgdsElement","html","tableHeadStyle","__decorate","state","watch"],"mappings":";;;;;;;;;;;;AASA;;;;AAIG;AACG,MAAO,aAAc,SAAQA,sBAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;AAEE;;AAEG;QACc,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAgBjC;IAbC,mBAAmB,GAAA;;AACjB,QAAA,IAAI,CAAC,MAAM,GAAG,CAAA,CAAA,EAAA,GAAA,MAAA,IAAI,CAAC,kBAAkB,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAW,EAAE,MAAK,iBAAiB,CAAC;QACpF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;KACpF;IAED,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;KAC3C;IAED,MAAM,GAAA;QACJ,OAAOC,QAAI,CAAA,CAAA,aAAA,CAAe,CAAC;KAC5B;;AAnBM,aAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,oBAAc,CAAzC,CAA2C;AAIvCC,gBAAA,CAAA;AAAhB,IAAAC,mBAAK,EAAE;AAAwB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhCD,gBAAA,CAAA;IADCE,WAAK,CAAC,QAAQ,CAAC;AAIf,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,IAAA,CAAA;;;;;"}

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

@@ -0,0 +1,44 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { state } from 'lit/decorators.js';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './table-head.js';
+import { watch } from '../../utils/watch.js';
+
+/**
+ * @summary Table head represents a table header cell that identifies a group of information within the table.
+ *
+ * @slot - Place any elements inside to display as the header content.
+ */
+class SgdsTableHead extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * To indicate if the header will have a darker bottom border style
+         */
+        this.border = false;
+    }
+    _handleBorderChange() {
+        var _a, _b;
+        this.border = ((_b = (_a = this.nextElementSibling) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== "sgds-table-cell";
+        this.border ? this.setAttribute("border", "true") : this.removeAttribute("border");
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "columnheader");
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+SgdsTableHead.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    state()
+], SgdsTableHead.prototype, "border", void 0);
+__decorate([
+    watch("border")
+], SgdsTableHead.prototype, "_handleBorderChange", null);
+
+export { SgdsTableHead, SgdsTableHead as default };
+//# sourceMappingURL=sgds-table-head.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-table-head.js","sources":["../../../../src/components/Table/sgds-table-head.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableHeadStyle from \"./table-head.css\";\nimport { watch } from \"../../utils/watch\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table head represents a table header cell that identifies a group of information within the table.\n *\n * @slot - Place any elements inside to display as the header content.\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  @state() private border = false;\n\n  @watch(\"border\")\n  _handleBorderChange() {\n    this.border = this.nextElementSibling?.tagName?.toLowerCase() !== \"sgds-table-cell\";\n    this.border ? this.setAttribute(\"border\", \"true\") : this.removeAttribute(\"border\");\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"columnheader\");\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\nexport default SgdsTableHead;\n"],"names":["tableHeadStyle"],"mappings":";;;;;;;;AASA;;;;AAIG;AACG,MAAO,aAAc,SAAQ,WAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;AAEE;;AAEG;QACc,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAgBjC;IAbC,mBAAmB,GAAA;;AACjB,QAAA,IAAI,CAAC,MAAM,GAAG,CAAA,CAAA,EAAA,GAAA,MAAA,IAAI,CAAC,kBAAkB,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAW,EAAE,MAAK,iBAAiB,CAAC;QACpF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;KACpF;IAED,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;KAC3C;IAED,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,aAAA,CAAe,CAAC;KAC5B;;AAnBM,aAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAc,CAAzC,CAA2C;AAIvC,UAAA,CAAA;AAAhB,IAAA,KAAK,EAAE;AAAwB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhC,UAAA,CAAA;IADC,KAAK,CAAC,QAAQ,CAAC;AAIf,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,IAAA,CAAA;;;;"}

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

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lit = require('lit');
+var sgdsElement = require('../../base/sgds-element.cjs.js');
+var tableRow = require('./table-row.cjs.js');
+
+/**
+ * @summary Table row organizes and groups table cells or header cells into a single horizontal line within the table.
+ *
+ * @slot - Insert any table cell or header elements to be displayed as part of this row.
+ */
+class SgdsTableRow extends sgdsElement["default"] {
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "row");
+    }
+    render() {
+        return lit.html `<slot class="table-row"></slot>`;
+    }
+}
+SgdsTableRow.styles = [...sgdsElement["default"].styles, tableRow["default"]];
+
+exports.SgdsTableRow = SgdsTableRow;
+exports["default"] = SgdsTableRow;
+//# sourceMappingURL=sgds-table-row.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-table-row.cjs.js","sources":["../../../../src/components/Table/sgds-table-row.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableRowStyle from \"./table-row.css\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table row organizes and groups table cells or header cells into a single horizontal line within the table.\n *\n * @slot - Insert any table cell or header elements to be displayed as part of this row.\n */\nexport class SgdsTableRow extends SgdsElement {\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 SgdsTableRow;\n"],"names":["SgdsElement","html","tableRowStyle"],"mappings":";;;;;;;;;AAOA;;;;AAIG;AACG,MAAO,YAAa,SAAQA,sBAAW,CAAA;IAG3C,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;KAClC;IAED,MAAM,GAAA;QACJ,OAAOC,QAAI,CAAA,CAAA,+BAAA,CAAiC,CAAC;KAC9C;;AATM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,mBAAa,CAAC;;;;;"}