@govtechsg/sgds-web-component 3.1.2 → 3.2.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-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;;;;;"}

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

@@ -0,0 +1,23 @@
+'use client';
+import { html } from 'lit';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './table-row.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 {
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "row");
+    }
+    render() {
+        return html `<slot class="table-row"></slot>`;
+    }
+}
+SgdsTableRow.styles = [...SgdsElement.styles, css_248z];
+
+export { SgdsTableRow, SgdsTableRow as default };
+//# sourceMappingURL=sgds-table-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-table-row.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":["tableRowStyle"],"mappings":";;;;;AAOA;;;;AAIG;AACG,MAAO,YAAa,SAAQ,WAAW,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,OAAO,IAAI,CAAA,CAAA,+BAAA,CAAiC,CAAC;KAC9C;;AATM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAa,CAAC;;;;"}

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 slot = require('../../utils/slot.cjs.js');
 
 /**
- * @summary The use of a table is to organise a collections of data into readable rows
+ * @summary Table is used for displaying collections of data in organized rows and columns.
+ * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.
+ *
+ * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.
  */
 class SgdsTable extends sgdsElement["default"] {
     constructor() {
@@ -33,18 +37,17 @@ class SgdsTable extends sgdsElement["default"] {
          */
         this.headerPosition = "horizontal";
         /** @internal */
-        this.originalTableData = [];
+        this.hasSlotController = new slot.HasSlotController(this, "[default]");
     }
     connectedCallback() {
         super.connectedCallback();
-        this.originalTableData = [...this.tableData];
     }
     _renderTable() {
         if (this.headerPosition === "horizontal") {
             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 +64,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>
@@ -87,6 +90,7 @@ class SgdsTable extends sgdsElement["default"] {
         }
     }
     render() {
+        const hasDefaultSlot = this.hasSlotController.test("[default]");
         return lit.html `
       <div
         class=${classMap_js.classMap({
@@ -98,9 +102,13 @@ class SgdsTable extends sgdsElement["default"] {
         })}
         tabindex="0"
       >
-        <table class="table">
-          ${this._renderTable()}
-        </table>
+        <slot id="table-slot" class="table"></slot>
+
+        ${!hasDefaultSlot
+            ? lit.html `<table class="table">
+              ${this._renderTable()}
+            </table>`
+            : ""}
       </div>
     `;
     }
@@ -119,11 +127,8 @@ tslib.__decorate([
     decorators_js.property({ type: Array })
 ], SgdsTable.prototype, "tableData", void 0);
 tslib.__decorate([
-    decorators_js.property({ type: String, reflect: true })
+    decorators_js.property({ type: String })
 ], SgdsTable.prototype, "headerPosition", void 0);
-tslib.__decorate([
-    decorators_js.state()
-], SgdsTable.prototype, "originalTableData", void 0);
 
 exports.SgdsTable = SgdsTable;
 exports["default"] = SgdsTable;

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 } 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 { HasSlotController } from \"../../utils/slot\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table is used for displaying collections of data in organized rows and columns.\n * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.\n *\n * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.\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 }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /** @internal */\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  connectedCallback() {\n    super.connectedCallback();\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  render() {\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\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\"></slot>\n\n        ${!hasDefaultSlot\n          ? html`<table class=\"table\">\n              ${this._renderTable()}\n            </table>`\n          : \"\"}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["SgdsElement","HasSlotController","html","classMap","tableStyle","__decorate","property"],"mappings":"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"}

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

@@ -1,13 +1,17 @@
 'use client';
 import { __decorate } from 'tslib';
 import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import SgdsElement from '../../base/sgds-element.js';
 import css_248z from './table.js';
+import { HasSlotController } from '../../utils/slot.js';
 
 /**
- * @summary The use of a table is to organise a collections of data into readable rows
+ * @summary Table is used for displaying collections of data in organized rows and columns.
+ * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.
+ *
+ * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.
  */
 class SgdsTable extends SgdsElement {
     constructor() {
@@ -29,18 +33,17 @@ class SgdsTable extends SgdsElement {
          */
         this.headerPosition = "horizontal";
         /** @internal */
-        this.originalTableData = [];
+        this.hasSlotController = new HasSlotController(this, "[default]");
     }
     connectedCallback() {
         super.connectedCallback();
-        this.originalTableData = [...this.tableData];
     }
     _renderTable() {
         if (this.headerPosition === "horizontal") {
             return html `
         <thead>
           <tr>
-            ${this.rowHeader.map((header, index) => html ` <th>${header}</th> `)}
+            ${this.rowHeader.map((header) => html ` <th>${header}</th> `)}
           </tr>
         </thead>
         <tbody>
@@ -57,7 +60,7 @@ class SgdsTable extends SgdsElement {
         <thead>
           <tr>
             <th></th>
-            ${this.rowHeader.map((header, index) => html ` <th>${header}</th> `)}
+            ${this.rowHeader.map((header) => html ` <th>${header}</th> `)}
           </tr>
         </thead>
         <tbody>
@@ -83,6 +86,7 @@ class SgdsTable extends SgdsElement {
         }
     }
     render() {
+        const hasDefaultSlot = this.hasSlotController.test("[default]");
         return html `
       <div
         class=${classMap({
@@ -94,9 +98,13 @@ class SgdsTable extends SgdsElement {
         })}
         tabindex="0"
       >
-        <table class="table">
-          ${this._renderTable()}
-        </table>
+        <slot id="table-slot" class="table"></slot>
+
+        ${!hasDefaultSlot
+            ? html `<table class="table">
+              ${this._renderTable()}
+            </table>`
+            : ""}
       </div>
     `;
     }
@@ -115,11 +123,8 @@ __decorate([
     property({ type: Array })
 ], SgdsTable.prototype, "tableData", void 0);
 __decorate([
-    property({ type: String, reflect: true })
+    property({ type: String })
 ], SgdsTable.prototype, "headerPosition", void 0);
-__decorate([
-    state()
-], SgdsTable.prototype, "originalTableData", void 0);
 
 export { SgdsTable, SgdsTable as default };
 //# sourceMappingURL=sgds-table.js.map