@govtechsg/sgds-web-component 2.1.0 → 2.1.1

package/components/Sidenav/sgds-sidenav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-item.js","sources":["../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked.\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @slot default - default slot for SgdsSidenavLink element.\n * @slot title - title slot for the content of SgdsSidenavItem's button / anchor element.\n * @slot icon - icon slot for the content of SgdsSidenavItem's button / anchor element.\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem.\n *\n * @cssproperty --sidenav-item-button-border-left-width - sidenav item left border width\n * @cssproperty --sidenav-item-padding-x - sidenav item padding left and right\n * @cssproperty --sidenav-item-padding-y - sidenav item padding top and bottom\n * @cssproperty --sidenav-item-icon-title-gap - the flex gap between sidenav item icon and title\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean })\n  active = false;\n\n  /**\n   *  When defined, converts SgdsSidenavItem from a button element to an Anchor element. In this case, only one level of navigation is allowed\n   */\n  @property({ type: String })\n  href = \"\";\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private buttonId: string = genId(\"sidenav\", \"button\");\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  private _onClickLink() {\n    this._onToggle();\n    this.active = true;\n  }\n\n  /** Shows the sidenav item. */\n  public async show() {\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item */\n  public async hide() {\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  /**\n   * @deprecated since 1.1. Will be removed in 2.0 and replaced by hide.\n   * When invoked, closes the SgdsSidenavItem\n   */\n  public async closeItem() {\n    return await this.hide();\n  }\n  /**\n   * @deprecated since 1.1. Will be removed in 2.0 and replaced by show.\n   * When invoked, opens the SgdsSidenavItem\n   */\n  public async openItem() {\n    return await this.show();\n  }\n\n  firstUpdated() {\n    if (!this.href) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.href) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  render() {\n    const withMenuTemplate = html` <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })} \"\n        aria-expanded=\"${this.active}\"\n        aria-controls=\"${this.collapseId}\"\n        aria-current=\"${this.active}\"\n        id=\"${this.buttonId}\"\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-chevron-down\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this.collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this.buttonId}\">\n          <slot></slot>\n        </div>\n      </div>`;\n\n    const noMenuTemplate = html`\n      <a\n        href=${this.href}\n        @click=${() => this._onClickLink()}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })} \"\n        aria-current=\"${this.active}\"\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n      </a>\n    `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.href}\">${this.href ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.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(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"names":["sidenavItemStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-sidenav-item.js","sources":["../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked.\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @slot default - default slot for SgdsSidenavLink element.\n * @slot title - title slot for the content of SgdsSidenavItem's button / anchor element.\n * @slot icon - icon slot for the content of SgdsSidenavItem's button / anchor element.\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem.\n *\n * @cssproperty --sidenav-item-button-border-left-width - sidenav item left border width\n * @cssproperty --sidenav-item-padding-x - sidenav item padding left and right\n * @cssproperty --sidenav-item-padding-y - sidenav item padding top and bottom\n * @cssproperty --sidenav-item-icon-title-gap - the flex gap between sidenav item icon and title\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean })\n  active = false;\n\n  /**\n   *  When defined, converts SgdsSidenavItem from a button element to an Anchor element. In this case, only one level of navigation is allowed\n   */\n  @property({ type: String })\n  href = \"\";\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private buttonId: string = genId(\"sidenav\", \"button\");\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  private _onClickLink() {\n    this._onToggle();\n    this.active = true;\n  }\n\n  /** Shows the sidenav item. */\n  public async show() {\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item */\n  public async hide() {\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  /**\n   * @deprecated since 1.1. Will be removed in 2.0 and replaced by hide.\n   * When invoked, closes the SgdsSidenavItem\n   */\n  public async closeItem() {\n    return await this.hide();\n  }\n  /**\n   * @deprecated since 1.1. Will be removed in 2.0 and replaced by show.\n   * When invoked, opens the SgdsSidenavItem\n   */\n  public async openItem() {\n    return await this.show();\n  }\n\n  firstUpdated() {\n    if (!this.href) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.href) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  render() {\n    const withMenuTemplate = html` <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })} \"\n        aria-expanded=\"${this.active}\"\n        aria-controls=\"${this.collapseId}\"\n        aria-current=\"${this.active}\"\n        id=\"${this.buttonId}\"\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-chevron-down\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this.collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this.buttonId}\">\n          <slot></slot>\n        </div>\n      </div>`;\n\n    const noMenuTemplate = html`\n      <a\n        href=${this.href}\n        @click=${() => this._onClickLink()}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })} \"\n        aria-current=\"${this.active}\"\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n      </a>\n    `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.href}\">${this.href ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.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(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"names":["sidenavItemStyle"],"mappings":"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"}

package/components/Sidenav/sgds-sidenav-link.js

@@ -1,4 +1,3 @@
-'use client';
 import LinkElement from '../../base/link-element.js';
 import css_248z from './sidenav-link.js';
 

package/components/Sidenav/sgds-sidenav-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-link.js","sources":["../../../src/components/Sidenav/sgds-sidenav-link.ts"],"sourcesContent":["import LinkElement from \"../../base/link-element\";\nimport sidenavLinkStyle from \"./sidenav-link.css\";\n\n/**\n * @slot default - slot for label of anchor tag.\n *\n * @cssproperty --sidenav-link-font-size - sidenav link font size, default to `--sgds-body-font-size`\n * @cssproperty --sidenav-link-padding-x - sidenav link padding left and right\n * @cssproperty --sidenav-link-padding-y - sidenav link padding top and bottom\n * @cssproperty --sidenav-link-disabled-color - sidenav link disabled color, default to `--sgds-gray-600`\n */\nexport class SgdsSidenavLink extends LinkElement {\n  static styles = [...LinkElement.styles, sidenavLinkStyle];\n}\n\nexport default SgdsSidenavLink;\n"],"names":["sidenavLinkStyle"],"mappings":";;;;AAGA;;;;;;;AAOG;AACG,MAAO,eAAgB,SAAQ,WAAW,CAAA;;AACvC,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAgB,CAAC;;;;"}
+{"version":3,"file":"sgds-sidenav-link.js","sources":["../../../src/components/Sidenav/sgds-sidenav-link.ts"],"sourcesContent":["import LinkElement from \"../../base/link-element\";\nimport sidenavLinkStyle from \"./sidenav-link.css\";\n\n/**\n * @slot default - slot for label of anchor tag.\n *\n * @cssproperty --sidenav-link-font-size - sidenav link font size, default to `--sgds-body-font-size`\n * @cssproperty --sidenav-link-padding-x - sidenav link padding left and right\n * @cssproperty --sidenav-link-padding-y - sidenav link padding top and bottom\n * @cssproperty --sidenav-link-disabled-color - sidenav link disabled color, default to `--sgds-gray-600`\n */\nexport class SgdsSidenavLink extends LinkElement {\n  static styles = [...LinkElement.styles, sidenavLinkStyle];\n}\n\nexport default SgdsSidenavLink;\n"],"names":["sidenavLinkStyle"],"mappings":";;;AAGA;;;;;;;AAOG;AACG,MAAO,eAAgB,SAAQ,WAAW,CAAA;;AACvC,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAgB,CAAC;;;;"}

package/components/Sidenav/sgds-sidenav.js

@@ -1,4 +1,3 @@
-'use client';
 import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';

package/components/Sidenav/sgds-sidenav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav.js","sources":["../../../src/components/Sidenav/sgds-sidenav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsSidenavItem from \"./sgds-sidenav-item\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport sidenavStyle from \"./sidenav.css\";\n\n/**\n * @summary The side navigation is used to display a list of links to move between pages within a related category.\n * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.\n * Maximum two levels of navigations are allowed.\n *\n * @slot default - Default slot for SgdsSidenavItem element.\n *\n * @cssproperty --sidenav-theme-color - overall sidenav theme color\n * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem\n */\nexport class SgdsSidenav extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavStyle];\n\n  /** Allow sidenav items to stay open when another item is opened */\n  @property({ type: Boolean, attribute: true })\n  alwaysOpen = false;\n\n  /** Apply position sticky to the sidenav */\n  @property({ type: Boolean, attribute: true })\n  sticky = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private defaultNodes!: SgdsSidenavItem[];\n\n  /** @internal */\n  get items(): SgdsSidenavItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsSidenavItem[];\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    const target = event.target as SgdsSidenavItem;\n    const isSidenavLink = target.tagName === \"SGDS-SIDENAV-LINK\";\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (this.alwaysOpen || event.defaultPrevented || isSidenavLink) {\n      // No toggling when `alwaysOpen` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsSidenavItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      // Covers all elements within sidenav-item\n      if (!event.composedPath().includes(item)) {\n        // Close all the items that didn't dispatch the event.\n        item.active = false;\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <nav class=${classMap({ sticky: this.sticky })}>\n        <div>\n          <slot @click=${this.onToggle}></slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsSidenav;\n"],"names":["sidenavStyle"],"mappings":";;;;;;;;AAOA;;;;;;;;;AASG;AACG,MAAO,WAAY,SAAQ,WAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAKE,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAInB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KA8ChB;;AAvCC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACtC,CAAC;KACxB;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;AACzB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAyB,CAAC;AAC/C,QAAA,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,KAAK,mBAAmB,CAAC;;;QAG7D,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,gBAAgB,IAAI,aAAa,EAAE;;YAE9D,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAsB,CAAC;AAEnD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACrB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;mBACI,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;;AAE3B,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;KAGjC,CAAC;KACH;;AArDM,WAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAY,CAAvC,CAAyC;AAItD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAInB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC9B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIP,UAAA,CAAA;AADP,IAAA,qBAAqB,EAAE;AACiB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-sidenav.js","sources":["../../../src/components/Sidenav/sgds-sidenav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsSidenavItem from \"./sgds-sidenav-item\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport sidenavStyle from \"./sidenav.css\";\n\n/**\n * @summary The side navigation is used to display a list of links to move between pages within a related category.\n * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.\n * Maximum two levels of navigations are allowed.\n *\n * @slot default - Default slot for SgdsSidenavItem element.\n *\n * @cssproperty --sidenav-theme-color - overall sidenav theme color\n * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem\n */\nexport class SgdsSidenav extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavStyle];\n\n  /** Allow sidenav items to stay open when another item is opened */\n  @property({ type: Boolean, attribute: true })\n  alwaysOpen = false;\n\n  /** Apply position sticky to the sidenav */\n  @property({ type: Boolean, attribute: true })\n  sticky = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private defaultNodes!: SgdsSidenavItem[];\n\n  /** @internal */\n  get items(): SgdsSidenavItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsSidenavItem[];\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    const target = event.target as SgdsSidenavItem;\n    const isSidenavLink = target.tagName === \"SGDS-SIDENAV-LINK\";\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (this.alwaysOpen || event.defaultPrevented || isSidenavLink) {\n      // No toggling when `alwaysOpen` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsSidenavItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      // Covers all elements within sidenav-item\n      if (!event.composedPath().includes(item)) {\n        // Close all the items that didn't dispatch the event.\n        item.active = false;\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <nav class=${classMap({ sticky: this.sticky })}>\n        <div>\n          <slot @click=${this.onToggle}></slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsSidenav;\n"],"names":["sidenavStyle"],"mappings":";;;;;;;AAOA;;;;;;;;;AASG;AACG,MAAO,WAAY,SAAQ,WAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAKE,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAInB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KA8ChB;;AAvCC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACtC,CAAC;KACxB;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;AACzB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAyB,CAAC;AAC/C,QAAA,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,KAAK,mBAAmB,CAAC;;;QAG7D,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,gBAAgB,IAAI,aAAa,EAAE;;YAE9D,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAsB,CAAC;AAEnD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACrB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;mBACI,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;;AAE3B,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;KAGjC,CAAC;KACH;;AArDM,WAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAY,CAAvC,CAAyC;AAItD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAInB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC9B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIP,UAAA,CAAA;AADP,IAAA,qBAAqB,EAAE;AACiB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/Sidenav/sidenav-item.js

@@ -1,4 +1,3 @@
-'use client';
 import { css } from 'lit';
 
 var css_248z = css`:host{--sidenav-item-btn-border-left-width:0.125rem;--sidenav-item-btn-padding-x:1rem;--sidenav-item-btn-padding-y:0.5rem;--sidenav-item-icon-title-gap:1rem}.sidenav-btn{align-items:center;background:0;border:0;border-radius:0;display:flex;font-size:var(--sgds-body-font-size);gap:var(--sidenav-item-icon-title-gap);line-height:1.5rem;padding:var(--sidenav-item-btn-padding-y) var(--sidenav-item-btn-padding-x);text-align:initial;width:100%;slot[name=caret-icon]::slotted(*),svg.bi-chevron-down{margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn.active,.sidenav-btn:hover{border-left:.125rem solid;color:var(--sidenav-theme-color);font-weight:700}.sidenav-btn.disabled{cursor:not-allowed;opacity:var(--sgds-disabled-opacity)}.sidenav-btn:not(.active){slot[name=caret-icon]::slotted(*),svg.bi-chevron-down{transform:rotate(0deg)}}a.sidenav-btn{color:inherit;line-height:var(--sgds-line-height-md);text-decoration:none}div.sidenav-list{display:flex;flex-direction:column;line-height:var(--sgds-line-height-lg);list-style:none;margin:0;padding-left:0}`;

package/components/Sidenav/sidenav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"sidenav-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/Sidenav/sidenav-link.js

@@ -1,4 +1,3 @@
-'use client';
 import { css } from 'lit';
 
 var css_248z = css`:host{--sidenav-link-font-size:var(--sgds-body-font-size);--sidenav-link-padding-x:1rem;--sidenav-link-padding-y:0.5rem;--sidenav-link-disabled-color:var(--sgds-disabled-color)}a.nav-link{color:inherit;display:block;font-size:var(--sidenav-link-font-size);padding-bottom:var(--sidenav-link-padding-y);padding-left:calc(var(--sidenav-link-padding-y)*4 + var(--sidenav-item-btn-border-left-width));padding-right:0;padding-top:var(--sidenav-link-padding-y);text-decoration:none}a.nav-link.active,a.nav-link:hover{color:var(--sidenav-theme-color)}a.nav-link.disabled{color:var(--sidenav-link-disabled-color);cursor:not-allowed;pointer-events:none}`;

package/components/Sidenav/sidenav-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"sidenav-link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/Sidenav/sidenav.js

@@ -1,4 +1,3 @@
-'use client';
 import { css } from 'lit';
 
 var css_248z = css`:host{--sidenav-theme-color:var(--sgds-primary);--sidenav-sticky-top:0rem}div{display:flex;flex-direction:column;gap:1rem;list-style:none;margin:0;padding-left:0}.sticky{height:calc(100vh - var(--sidenav-sticky-top));overflow-y:auto;position:sticky;top:var(--sidenav-sticky-top)}`;

package/components/Sidenav/sidenav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"sidenav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/Spinner/sgds-spinner.js

@@ -1,4 +1,3 @@
-'use client';
 import { __decorate } from 'tslib';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';

package/components/Spinner/sgds-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-spinner.js","sources":["../../../src/components/Spinner/sgds-spinner.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport spinnerStyle from \"./spinner.css\";\nimport textStyles from \"../../styles/text-variants.css\";\n/**\n * @summary Spinners notify the users that their request is being processed.\n *\n */\nexport class SgdsSpinner extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, spinnerStyle];\n  /** The type of spinner */\n  @property({ type: String, reflect: true }) type: SpinnerType = \"border\";\n  /** The color of spinner */\n  @property({ type: String, reflect: true }) color: SpinnerColor = \"primary\";\n\n  render() {\n    return html`\n      <div class=\"spinner-${this.type} spinner\" role=\"status\">\n        <span class=\"sr-only\">Loading...</span>\n      </div>\n    `;\n  }\n}\n\nexport type SpinnerColor = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"light\" | \"dark\";\n\nexport type SpinnerType = \"border\" | \"grow\";\n\nexport default SgdsSpinner;\n"],"names":["textStyles","spinnerStyle"],"mappings":";;;;;;;;AAKA;;;AAGG;AACG,MAAO,WAAY,SAAQ,WAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAG6C,IAAI,CAAA,IAAA,GAAgB,QAAQ,CAAC;;QAE7B,IAAK,CAAA,KAAA,GAAiB,SAAS,CAAC;KAS5E;IAPC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;AACa,0BAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;;KAGhC,CAAC;KACH;;AAZM,WAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,EAAEC,UAAY,CAAnD,CAAqD;AAEvB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA8B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE7B,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiC,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-spinner.js","sources":["../../../src/components/Spinner/sgds-spinner.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport spinnerStyle from \"./spinner.css\";\nimport textStyles from \"../../styles/text-variants.css\";\n/**\n * @summary Spinners notify the users that their request is being processed.\n *\n */\nexport class SgdsSpinner extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, spinnerStyle];\n  /** The type of spinner */\n  @property({ type: String, reflect: true }) type: SpinnerType = \"border\";\n  /** The color of spinner */\n  @property({ type: String, reflect: true }) color: SpinnerColor = \"primary\";\n\n  render() {\n    return html`\n      <div class=\"spinner-${this.type} spinner\" role=\"status\">\n        <span class=\"sr-only\">Loading...</span>\n      </div>\n    `;\n  }\n}\n\nexport type SpinnerColor = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"light\" | \"dark\";\n\nexport type SpinnerType = \"border\" | \"grow\";\n\nexport default SgdsSpinner;\n"],"names":["textStyles","spinnerStyle"],"mappings":";;;;;;;AAKA;;;AAGG;AACG,MAAO,WAAY,SAAQ,WAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAG6C,IAAI,CAAA,IAAA,GAAgB,QAAQ,CAAC;;QAE7B,IAAK,CAAA,KAAA,GAAiB,SAAS,CAAC;KAS5E;IAPC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;AACa,0BAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;;KAGhC,CAAC;KACH;;AAZM,WAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,EAAEC,UAAY,CAAnD,CAAqD;AAEvB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA8B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE7B,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiC,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/Spinner/spinner.js

@@ -1,4 +1,3 @@
-'use client';
 import { css } from 'lit';
 
 var css_248z = css`.spinner{--sgds-spinner-color:var(--sgds-primary-filled);color:var(--sgds-spinner-color)}:host([color=secondary]) .spinner{--sgds-spinner-color:var(--sgds-secondary-filled)}:host([color=warning]) .spinner{--sgds-spinner-color:var(--sgds-warning-filled)}:host([color=danger]) .spinner{--sgds-spinner-color:var(--sgds-danger-filled)}:host([color=success]) .spinner{--sgds-spinner-color:var(--sgds-success-filled)}:host([color=info]) .spinner{--sgds-spinner-color:var(--sgds-info-filled)}:host([color=light]) .spinner{--sgds-spinner-color:var(--sgds-light-filled)}:host([color=dark]) .spinner{--sgds-spinner-color:var(--sgds-dark-filled)}.spinner-border{animation:spinner-border .75s linear infinite;border:.25em solid;border-radius:50%;border-right:.25em solid transparent;color:var(--sgds-spinner-color)}.spinner-border,.spinner-grow{display:inline-block;height:2rem;vertical-align:-.125em;width:2rem}.spinner-grow{animation:spinner-grow .75s linear infinite;background-color:var(--sgds-spinner-color);border-radius:50%;opacity:0}@media (prefers-reduced-motion:reduce){.spinner-border,.spinner-grow{animation-duration:1.5s}}

package/components/Spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"spinner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/components/Stepper/sgds-stepper.js

@@ -1,4 +1,3 @@
-'use client';
 import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';

package/components/Stepper/sgds-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-stepper.js","sources":["../../../src/components/Stepper/sgds-stepper.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\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nexport interface IStepMetaData {\n  component: unknown;\n  stepHeader: string;\n}\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n *\n * @cssproperty --stepper-default-color - Sets the theme color for default stepper marker.\n * @cssproperty --stepper-theme-color - Sets the theme color for active, completed and clickable stepper marker.\n * @cssproperty --stepper-theme-hover-color - Sets the theme hover color for clickable stepper marker.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n\n  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\n   */\n  @property({ type: Array })\n  steps: IStepMetaData[] = [];\n\n  /** The current state of active step. Defaults to 0 */\n  @property({ type: Number, reflect: true })\n  activeStep = 0;\n\n  /**Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"activeStep\")\n  defaultActiveStep = 0;\n\n  /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n  public getComponent(step: number = this.activeStep) {\n    return this.steps[step].component;\n  }\n  /** Moves the active step forward one step */\n  public nextStep() {\n    this.emit(\"sgds-next-step\");\n    if (this.activeStep < this.steps.length - 1) {\n      this.activeStep++;\n    }\n  }\n\n  /** Moves the active step back one step */\n  public previousStep() {\n    this.emit(\"sgds-previous-step\");\n\n    if (this.activeStep > 0) {\n      this.activeStep--;\n    }\n  }\n\n  /** Changes the active step to the last step */\n  public lastStep() {\n    this.emit(\"sgds-last-step\");\n    if (this.activeStep !== this.steps.length - 1) {\n      this.activeStep = this.steps.length - 1;\n    }\n  }\n\n  /** Changes active step to the first step */\n  public firstStep() {\n    this.emit(\"sgds-first-step\");\n    if (this.activeStep > 0) {\n      this.activeStep = 0;\n    }\n  }\n\n  /** Resets the Stepper to its initial active step state */\n  public reset() {\n    this.emit(\"sgds-reset\");\n    this.activeStep = this.defaultActiveStep;\n  }\n\n  /**@internal */\n  _onStepperItemClick(index: number) {\n    //emit an event before moving to next step\n    if (this.activeStep > index) {\n      this.activeStep = index;\n    }\n  }\n\n  /**@internal */\n  @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n  _handleActiveStepChange() {\n    this.emit(\"sgds-arrived\");\n  }\n\n  /**@internal */\n  _handleKeyDown(event: KeyboardEvent, index: number) {\n    if (event.key === \"Enter\") {\n      this._onStepperItemClick(index);\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"sgds stepper\">\n        ${this.steps.map(({ stepHeader: step }, index) => {\n          return html`\n            <div\n              class=\"stepper-item ${classMap({\n                \"is-active\": this.activeStep === index,\n                \"is-completed\": this.activeStep > index,\n                \"is-clickable\": this.activeStep > index\n              })}\"\n              tabindex=\"0\"\n              aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n              aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n              @click=\"${() => this._onStepperItemClick(index)}\"\n              @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, index)}\n            >\n              <div class=\"stepper-marker\">${index + 1}</div>\n              <div class=\"stepper-detail\">${step}</div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-stepper.js","sources":["../../../src/components/Stepper/sgds-stepper.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\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nexport interface IStepMetaData {\n  component: unknown;\n  stepHeader: string;\n}\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n *\n * @cssproperty --stepper-default-color - Sets the theme color for default stepper marker.\n * @cssproperty --stepper-theme-color - Sets the theme color for active, completed and clickable stepper marker.\n * @cssproperty --stepper-theme-hover-color - Sets the theme hover color for clickable stepper marker.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n\n  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\n   */\n  @property({ type: Array })\n  steps: IStepMetaData[] = [];\n\n  /** The current state of active step. Defaults to 0 */\n  @property({ type: Number, reflect: true })\n  activeStep = 0;\n\n  /**Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"activeStep\")\n  defaultActiveStep = 0;\n\n  /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n  public getComponent(step: number = this.activeStep) {\n    return this.steps[step].component;\n  }\n  /** Moves the active step forward one step */\n  public nextStep() {\n    this.emit(\"sgds-next-step\");\n    if (this.activeStep < this.steps.length - 1) {\n      this.activeStep++;\n    }\n  }\n\n  /** Moves the active step back one step */\n  public previousStep() {\n    this.emit(\"sgds-previous-step\");\n\n    if (this.activeStep > 0) {\n      this.activeStep--;\n    }\n  }\n\n  /** Changes the active step to the last step */\n  public lastStep() {\n    this.emit(\"sgds-last-step\");\n    if (this.activeStep !== this.steps.length - 1) {\n      this.activeStep = this.steps.length - 1;\n    }\n  }\n\n  /** Changes active step to the first step */\n  public firstStep() {\n    this.emit(\"sgds-first-step\");\n    if (this.activeStep > 0) {\n      this.activeStep = 0;\n    }\n  }\n\n  /** Resets the Stepper to its initial active step state */\n  public reset() {\n    this.emit(\"sgds-reset\");\n    this.activeStep = this.defaultActiveStep;\n  }\n\n  /**@internal */\n  _onStepperItemClick(index: number) {\n    //emit an event before moving to next step\n    if (this.activeStep > index) {\n      this.activeStep = index;\n    }\n  }\n\n  /**@internal */\n  @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n  _handleActiveStepChange() {\n    this.emit(\"sgds-arrived\");\n  }\n\n  /**@internal */\n  _handleKeyDown(event: KeyboardEvent, index: number) {\n    if (event.key === \"Enter\") {\n      this._onStepperItemClick(index);\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"sgds stepper\">\n        ${this.steps.map(({ stepHeader: step }, index) => {\n          return html`\n            <div\n              class=\"stepper-item ${classMap({\n                \"is-active\": this.activeStep === index,\n                \"is-completed\": this.activeStep > index,\n                \"is-clickable\": this.activeStep > index\n              })}\"\n              tabindex=\"0\"\n              aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n              aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n              @click=\"${() => this._onStepperItemClick(index)}\"\n              @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, index)}\n            >\n              <div class=\"stepper-marker\">${index + 1}</div>\n              <div class=\"stepper-detail\">${step}</div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":";;;;;;;;;AAWA;;;;;;;;;;;;;;AAcG;AACG,MAAO,WAAY,SAAQ,WAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;AAGE;AACG;QAEH,IAAK,CAAA,KAAA,GAAoB,EAAE,CAAC;;QAI5B,IAAU,CAAA,UAAA,GAAG,CAAC,CAAC;;QAIf,IAAiB,CAAA,iBAAA,GAAG,CAAC,CAAC;KA2FvB;;AAxFQ,IAAA,YAAY,CAAC,IAAA,GAAe,IAAI,CAAC,UAAU,EAAA;QAChD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;KACnC;;IAEM,QAAQ,GAAA;AACb,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;AAC5B,QAAA,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3C,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;;IAGM,YAAY,GAAA;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;AAEhC,QAAA,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE;YACvB,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;;IAGM,QAAQ,GAAA;AACb,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;AAC5B,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;SACzC;KACF;;IAGM,SAAS,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;AAC7B,QAAA,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE;AACvB,YAAA,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;SACrB;KACF;;IAGM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;AACxB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC;KAC1C;;AAGD,IAAA,mBAAmB,CAAC,KAAa,EAAA;;AAE/B,QAAA,IAAI,IAAI,CAAC,UAAU,GAAG,KAAK,EAAE;AAC3B,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;SACzB;KACF;;IAID,uBAAuB,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3B;;IAGD,cAAc,CAAC,KAAoB,EAAE,KAAa,EAAA;AAChD,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;AACzB,YAAA,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;SACjC;KACF;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEL,QAAA,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE,KAAK,KAAI;AAC/C,YAAA,OAAO,IAAI,CAAA,CAAA;;AAEe,kCAAA,EAAA,QAAQ,CAAC;AAC7B,gBAAA,WAAW,EAAE,IAAI,CAAC,UAAU,KAAK,KAAK;AACtC,gBAAA,cAAc,EAAE,IAAI,CAAC,UAAU,GAAG,KAAK;AACvC,gBAAA,cAAc,EAAE,IAAI,CAAC,UAAU,GAAG,KAAK;aACxC,CAAC,CAAA;;6BAEa,IAAI,CAAC,UAAU,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,CAAA;8BAC3C,IAAI,CAAC,UAAU,IAAI,KAAK,GAAG,MAAM,GAAG,OAAO,CAAA;AACjD,sBAAA,EAAA,MAAM,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAA;yBACpC,CAAC,CAAgB,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,KAAK,CAAC,CAAA;;AAEhC,0CAAA,EAAA,KAAK,GAAG,CAAC,CAAA;4CACT,IAAI,CAAA;;WAErC,CAAC;AACJ,SAAC,CAAC,CAAA;;KAEL,CAAC;KACH;;AAvGM,WAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAY,CAAvC,CAAyC;AAKtD,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AACE,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI5B,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC3B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIf,UAAA,CAAA;IADC,YAAY,CAAC,YAAY,CAAC;AACL,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuDtB,UAAA,CAAA;IADC,KAAK,CAAC,YAAY,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAGnD,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,yBAAA,EAAA,IAAA,CAAA;;;;"}

package/components/Stepper/stepper.js

@@ -1,4 +1,3 @@
-'use client';
 import { css } from 'lit';
 
 var css_248z = css`:host{--stepper-theme-color:var(--sgds-primary);--stepper-theme-hover-color:var(--sgds-primary-800);--stepper-default-color:var(--sgds-gray-400)}.sgds.stepper{display:flex;flex-wrap:wrap;font-size:var(--sgds-body-font-size)}.sgds.stepper .stepper-item{flex-basis:0;flex-grow:1;margin-top:0;position:relative}.sgds.stepper .stepper-item:not(:first-child){flex-basis:1em;flex-grow:1;flex-shrink:1}.sgds.stepper .stepper-item:not(:first-child):before{content:" ";position:absolute}.sgds.stepper .stepper-item.is-clickable{cursor:pointer}.sgds.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--stepper-theme-hover-color);border-color:var(--stepper-theme-hover-color)}.sgds.stepper .stepper-item.is-clickable:hover .stepper-detail,.sgds.stepper .stepper-item.is-clickable:hover .stepper-detail>*{color:var(--stepper-theme-hover-color);transition:all .5s ease}.sgds.stepper .stepper-item:before{background:linear-gradient(270deg,var(--stepper-default-color) 50%,var(--stepper-theme-color) 0);background-position:100% 100%;background-size:200% 100%}.sgds.stepper .stepper-item.is-active:before{background-position:0 100%}.sgds.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-white);border-color:var(--stepper-theme-color);color:var(--stepper-theme-color);font-weight:700}.sgds.stepper .stepper-item.is-completed:before{background-position:0 100%}.sgds.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--stepper-theme-color);border-color:var(--stepper-theme-color);color:var(--sgds-white);font-weight:700}.sgds.stepper .stepper-item>.stepper-marker{align-items:center;background:var(--stepper-default-color);border:.25rem solid var(--sgds-white);border-radius:50%;color:var(--sgds-white);display:flex;font-weight:400;height:2rem;justify-content:center;left:calc(50% - 1rem);position:absolute;width:2rem;z-index:1}.sgds.stepper .stepper-item:not(:first-child):before{bottom:0;height:.25rem;left:-50%;top:1rem;width:100%}.sgds.stepper .stepper-item .stepper-detail{font-weight:700;margin-left:.5rem;margin-right:.5rem;margin-top:2rem;text-align:center}`;

package/components/Stepper/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"stepper.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/Tab/sgds-tab-group.js

@@ -1,4 +1,3 @@
-'use client';
 import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { query, property } from 'lit/decorators.js';

package/components/Tab/sgds-tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-tab-group.js","sources":["../../../src/components/Tab/sgds-tab-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsTab } from \"./sgds-tab\";\nimport { SgdsTabPanel } from \"./sgds-tab-panel\";\nimport tabGroupStyle from \"./tab-group.css\";\n/**\n * @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.\n * Each tab must be slotted into the nav slot and its `panel` must refer to a tab panel of the same name.\n *\n * @slot default - The slot for `sgds-tab-panel`\n * @slot nav - The slot for `sgds-tab`\n *\n * @event sgds-tab-show  Emitted when a tab and its panels are shown\n * @event sgds-tab-hide  Emitted when a tab and its panels are hidden.\n *\n * @csspart body - The container wrapping the default slot where all `sgds-tab-panel`s are slotted.\n * @csspart nav - The container wrapping the default slot where all `sgds-tab`s are slotted.\n *\n */\nexport class SgdsTabGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabGroupStyle];\n  /**@internal */\n  @query(\".tab-group\") tabGroup: HTMLElement;\n  /**@internal */\n  @query(\".tab-group__body\") body: HTMLSlotElement;\n  /**@internal */\n  @query(\".tab-group__nav\") nav: HTMLElement;\n  /**@internal */\n  private activeTab?: SgdsTab;\n  /**@internal */\n  private mutationObserver: MutationObserver;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**@internal */\n  private tabs: SgdsTab[] = [];\n  /**@internal */\n  private panels: SgdsTabPanel[] = [];\n  /** The variant types of tabs. Controls the visual stylesof all `sgds-tabs` in its slot. It also dynamically changes the slots of `sgds-tab` */\n  @property({ reflect: true, attribute: true }) variant: \"tabs-basic-toggle\" | \"tabs-info-toggle\";\n\n  connectedCallback() {\n    const whenAllDefined = Promise.all([\n      customElements.whenDefined(\"sgds-tab\"),\n      customElements.whenDefined(\"sgds-tab-panel\")\n    ]);\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => {\n      return;\n    });\n\n    this.mutationObserver = new MutationObserver(mutations => {\n      // Update aria labels when the DOM changes\n      if (mutations.some(m => ![\"aria-labelledby\", \"aria-controls\"].includes(m.attributeName))) {\n        setTimeout(() => this.setAriaLabels());\n      }\n\n      // Sync tabs when disabled states change\n      if (mutations.some(m => m.attributeName === \"disabled\")) {\n        this.syncTabsAndPanels();\n      }\n    });\n\n    this.updateComplete.then(() => {\n      this.syncTabsAndPanels();\n      this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n      this.resizeObserver.observe(this.nav);\n      whenAllDefined.then(() => {\n        // Set initial tab state when the tabs first become visible\n        const intersectionObserver = new IntersectionObserver((entries, observer) => {\n          if (entries[0].intersectionRatio > 0) {\n            this.setAriaLabels();\n            // this.setTabVariant();\n            this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });\n            observer.unobserve(entries[0].target);\n          }\n        });\n        intersectionObserver.observe(this.tabGroup);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver.disconnect();\n    this.resizeObserver.unobserve(this.nav);\n  }\n\n  /** Shows the specified tab panel. */\n  public show(panel: string) {\n    const tab = this.tabs.find(el => el.panel === panel);\n\n    if (tab) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n    const slot = this.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"nav\"]');\n\n    return [...(slot.assignedElements() as SgdsTab[])].filter(el => {\n      return options.includeDisabled\n        ? el.tagName.toLowerCase() === \"sgds-tab\"\n        : el.tagName.toLowerCase() === \"sgds-tab\" && !el.disabled;\n    });\n  }\n  /** @internal */\n  private getAllPanels() {\n    return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === \"sgds-tab-panel\") as [\n      SgdsTabPanel\n    ];\n  }\n  /** @internal */\n  private getActiveTab() {\n    return this.tabs.find(el => el.active);\n  }\n  /** @internal */\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    if (tab !== null) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    // Activate a tab\n    if ([\"Enter\", \" \"].includes(event.key)) {\n      if (tab !== null) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if ([\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"].includes(event.key)) {\n      const activeEl = this.tabs.find(t => t.matches(\":focus\"));\n\n      if (activeEl?.tagName.toLowerCase() === \"sgds-tab\") {\n        let index = this.tabs.indexOf(activeEl);\n\n        if (event.key === \"Home\") {\n          index = 0;\n        } else if (event.key === \"End\") {\n          index = this.tabs.length - 1;\n        } else if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n          index--;\n        } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n          index++;\n        }\n\n        if (index < 0) {\n          index = this.tabs.length - 1;\n        }\n\n        if (index > this.tabs.length - 1) {\n          index = 0;\n        }\n\n        this.tabs[index].focus({ preventScroll: true });\n\n        this.setActiveTab(this.tabs[index] /** , { scrollBehavior: \"smooth\" }*/);\n\n        event.preventDefault();\n      }\n    }\n  }\n  /** @internal */\n  private setActiveTab(tab: SgdsTab, options?: { emitEvents?: boolean }) {\n    options = {\n      emitEvents: true,\n      ...options\n    };\n\n    if (tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync active tab and panel\n      this.tabs.map(el => (el.active = el === this.activeTab));\n      this.panels.map(el => (el.active = el.name === this.activeTab?.panel));\n\n      // Emit events\n      if (options.emitEvents) {\n        if (previousTab) {\n          this.emit(\"sgds-tab-hide\", { detail: { name: previousTab.panel } });\n        }\n\n        this.emit(\"sgds-tab-show\", { detail: { name: this.activeTab.panel } });\n      }\n    }\n  }\n  /** @internal */\n  private setAriaLabels() {\n    // Link each tab with its corresponding panel\n    this.tabs.forEach(tab => {\n      const panel = this.panels.find(el => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute(\"aria-controls\", panel.getAttribute(\"id\"));\n        panel.setAttribute(\"aria-labelledby\", tab.getAttribute(\"id\"));\n      }\n    });\n  }\n\n  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n  /** @internal */\n  private syncTabsAndPanels() {\n    this.tabs = this.getAllTabs({ includeDisabled: false });\n    this.panels = this.getAllPanels();\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"tab-group\"\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        variant=${ifDefined(this.variant)}\n      >\n        <div part=\"nav\" class=\"tab-group__nav\" role=\"tablist\">\n          <slot\n            name=\"nav\"\n            class=${classMap({\n              sgds: true,\n              \"nav-tabs\": true,\n              nav: true\n            })}\n            variant=${ifDefined(this.variant)}\n            @slotchange=${this.syncTabsAndPanels}\n          ></slot>\n        </div>\n        <div part=\"body\">\n          <slot class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTabGroup;\n"],"names":["tabGroupStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-tab-group.js","sources":["../../../src/components/Tab/sgds-tab-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsTab } from \"./sgds-tab\";\nimport { SgdsTabPanel } from \"./sgds-tab-panel\";\nimport tabGroupStyle from \"./tab-group.css\";\n/**\n * @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.\n * Each tab must be slotted into the nav slot and its `panel` must refer to a tab panel of the same name.\n *\n * @slot default - The slot for `sgds-tab-panel`\n * @slot nav - The slot for `sgds-tab`\n *\n * @event sgds-tab-show  Emitted when a tab and its panels are shown\n * @event sgds-tab-hide  Emitted when a tab and its panels are hidden.\n *\n * @csspart body - The container wrapping the default slot where all `sgds-tab-panel`s are slotted.\n * @csspart nav - The container wrapping the default slot where all `sgds-tab`s are slotted.\n *\n */\nexport class SgdsTabGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabGroupStyle];\n  /**@internal */\n  @query(\".tab-group\") tabGroup: HTMLElement;\n  /**@internal */\n  @query(\".tab-group__body\") body: HTMLSlotElement;\n  /**@internal */\n  @query(\".tab-group__nav\") nav: HTMLElement;\n  /**@internal */\n  private activeTab?: SgdsTab;\n  /**@internal */\n  private mutationObserver: MutationObserver;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**@internal */\n  private tabs: SgdsTab[] = [];\n  /**@internal */\n  private panels: SgdsTabPanel[] = [];\n  /** The variant types of tabs. Controls the visual stylesof all `sgds-tabs` in its slot. It also dynamically changes the slots of `sgds-tab` */\n  @property({ reflect: true, attribute: true }) variant: \"tabs-basic-toggle\" | \"tabs-info-toggle\";\n\n  connectedCallback() {\n    const whenAllDefined = Promise.all([\n      customElements.whenDefined(\"sgds-tab\"),\n      customElements.whenDefined(\"sgds-tab-panel\")\n    ]);\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => {\n      return;\n    });\n\n    this.mutationObserver = new MutationObserver(mutations => {\n      // Update aria labels when the DOM changes\n      if (mutations.some(m => ![\"aria-labelledby\", \"aria-controls\"].includes(m.attributeName))) {\n        setTimeout(() => this.setAriaLabels());\n      }\n\n      // Sync tabs when disabled states change\n      if (mutations.some(m => m.attributeName === \"disabled\")) {\n        this.syncTabsAndPanels();\n      }\n    });\n\n    this.updateComplete.then(() => {\n      this.syncTabsAndPanels();\n      this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n      this.resizeObserver.observe(this.nav);\n      whenAllDefined.then(() => {\n        // Set initial tab state when the tabs first become visible\n        const intersectionObserver = new IntersectionObserver((entries, observer) => {\n          if (entries[0].intersectionRatio > 0) {\n            this.setAriaLabels();\n            // this.setTabVariant();\n            this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });\n            observer.unobserve(entries[0].target);\n          }\n        });\n        intersectionObserver.observe(this.tabGroup);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver.disconnect();\n    this.resizeObserver.unobserve(this.nav);\n  }\n\n  /** Shows the specified tab panel. */\n  public show(panel: string) {\n    const tab = this.tabs.find(el => el.panel === panel);\n\n    if (tab) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n    const slot = this.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"nav\"]');\n\n    return [...(slot.assignedElements() as SgdsTab[])].filter(el => {\n      return options.includeDisabled\n        ? el.tagName.toLowerCase() === \"sgds-tab\"\n        : el.tagName.toLowerCase() === \"sgds-tab\" && !el.disabled;\n    });\n  }\n  /** @internal */\n  private getAllPanels() {\n    return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === \"sgds-tab-panel\") as [\n      SgdsTabPanel\n    ];\n  }\n  /** @internal */\n  private getActiveTab() {\n    return this.tabs.find(el => el.active);\n  }\n  /** @internal */\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    if (tab !== null) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    // Activate a tab\n    if ([\"Enter\", \" \"].includes(event.key)) {\n      if (tab !== null) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if ([\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"].includes(event.key)) {\n      const activeEl = this.tabs.find(t => t.matches(\":focus\"));\n\n      if (activeEl?.tagName.toLowerCase() === \"sgds-tab\") {\n        let index = this.tabs.indexOf(activeEl);\n\n        if (event.key === \"Home\") {\n          index = 0;\n        } else if (event.key === \"End\") {\n          index = this.tabs.length - 1;\n        } else if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n          index--;\n        } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n          index++;\n        }\n\n        if (index < 0) {\n          index = this.tabs.length - 1;\n        }\n\n        if (index > this.tabs.length - 1) {\n          index = 0;\n        }\n\n        this.tabs[index].focus({ preventScroll: true });\n\n        this.setActiveTab(this.tabs[index] /** , { scrollBehavior: \"smooth\" }*/);\n\n        event.preventDefault();\n      }\n    }\n  }\n  /** @internal */\n  private setActiveTab(tab: SgdsTab, options?: { emitEvents?: boolean }) {\n    options = {\n      emitEvents: true,\n      ...options\n    };\n\n    if (tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync active tab and panel\n      this.tabs.map(el => (el.active = el === this.activeTab));\n      this.panels.map(el => (el.active = el.name === this.activeTab?.panel));\n\n      // Emit events\n      if (options.emitEvents) {\n        if (previousTab) {\n          this.emit(\"sgds-tab-hide\", { detail: { name: previousTab.panel } });\n        }\n\n        this.emit(\"sgds-tab-show\", { detail: { name: this.activeTab.panel } });\n      }\n    }\n  }\n  /** @internal */\n  private setAriaLabels() {\n    // Link each tab with its corresponding panel\n    this.tabs.forEach(tab => {\n      const panel = this.panels.find(el => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute(\"aria-controls\", panel.getAttribute(\"id\"));\n        panel.setAttribute(\"aria-labelledby\", tab.getAttribute(\"id\"));\n      }\n    });\n  }\n\n  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n  /** @internal */\n  private syncTabsAndPanels() {\n    this.tabs = this.getAllTabs({ includeDisabled: false });\n    this.panels = this.getAllPanels();\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"tab-group\"\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        variant=${ifDefined(this.variant)}\n      >\n        <div part=\"nav\" class=\"tab-group__nav\" role=\"tablist\">\n          <slot\n            name=\"nav\"\n            class=${classMap({\n              sgds: true,\n              \"nav-tabs\": true,\n              nav: true\n            })}\n            variant=${ifDefined(this.variant)}\n            @slotchange=${this.syncTabsAndPanels}\n          ></slot>\n        </div>\n        <div part=\"body\">\n          <slot class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTabGroup;\n"],"names":["tabGroupStyle"],"mappings":"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"}

package/components/Tab/sgds-tab-panel.js

@@ -1,4 +1,3 @@
-'use client';
 import { __decorate } from 'tslib';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';

package/components/Tab/sgds-tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-tab-panel.js","sources":["../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { LitElement, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --tab-panel-padding-y - The y-axis padding of tab panel.\n *\n */\nexport class SgdsTabPanel extends LitElement {\n  static styles = tabPanelStyles;\n  /**@internal */\n  private readonly attrId = ++id;\n  /**@internal */\n  private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = \"\";\n\n  /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute(\"role\", \"tabpanel\");\n  }\n\n  @watch(\"active\")\n  handleActiveChange() {\n    this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n  }\n\n  render() {\n    return html`\n      <slot\n        part=\"base\"\n        class=${classMap({\n          \"tab-panel\": true,\n          \"tab-panel--active\": this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default SgdsTabPanel;\n"],"names":["tabPanelStyles"],"mappings":";;;;;;;;AAMA,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;AAQG;AACG,MAAO,YAAa,SAAQ,UAAU,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAGmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;;AAEd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAElC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAGK,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAwB5D;IAtBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACvC;IAGD,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;KAClE;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC,CAAA;;KAEL,CAAC;KACH;;AAhCM,YAAM,CAAA,MAAA,GAAGA,QAAH,CAAkB;AAMF,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGK,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3D,UAAA,CAAA;IADC,KAAK,CAAC,QAAQ,CAAC;AAGf,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-tab-panel.js","sources":["../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { LitElement, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --tab-panel-padding-y - The y-axis padding of tab panel.\n *\n */\nexport class SgdsTabPanel extends LitElement {\n  static styles = tabPanelStyles;\n  /**@internal */\n  private readonly attrId = ++id;\n  /**@internal */\n  private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = \"\";\n\n  /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute(\"role\", \"tabpanel\");\n  }\n\n  @watch(\"active\")\n  handleActiveChange() {\n    this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n  }\n\n  render() {\n    return html`\n      <slot\n        part=\"base\"\n        class=${classMap({\n          \"tab-panel\": true,\n          \"tab-panel--active\": this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default SgdsTabPanel;\n"],"names":["tabPanelStyles"],"mappings":";;;;;;;AAMA,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;AAQG;AACG,MAAO,YAAa,SAAQ,UAAU,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAGmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;;AAEd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAElC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAGK,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAwB5D;IAtBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACvC;IAGD,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;KAClE;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC,CAAA;;KAEL,CAAC;KACH;;AAhCM,YAAM,CAAA,MAAA,GAAGA,QAAH,CAAkB;AAMF,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGK,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3D,UAAA,CAAA;IADC,KAAK,CAAC,QAAQ,CAAC;AAGf,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA;;;;"}

package/components/Tab/sgds-tab.js

@@ -1,4 +1,3 @@
-'use client';
 import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { query, property } from 'lit/decorators.js';

package/components/Tab/sgds-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-tab.js","sources":["../../../src/components/Tab/sgds-tab.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport tabStyle from \"./tab.css\";\n\nlet id = 0;\n/**\n * @summary Tabs are used within tab group to activate the tab panels\n *\n * @slot default - The content of the tab. This is  available when variant attribute of `sgds-tab-group` is not specified or when it is `tabs-basic-toggle`\n *\n * @slot icon - The slot to place svg icons. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n * @slot count - The slot for count. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n * @slot label - The slot for label of tab. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n *\n * @csspart base - The base wrapper of tab\n *\n *\n */\nexport class SgdsTab extends SgdsElement {\n  static styles = [tabStyle];\n  /**@internal */\n  @query(\".nav-item\") tab: HTMLElement;\n  /**@internal */\n  private readonly attrId = ++id;\n  /**@internal */\n  private readonly componentId = `sgds-tab-${this.attrId}`;\n\n  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */\n  @property({ reflect: true }) panel = \"\";\n\n  /** Draws the tab in an active state. When used with tab group, this state is already managed. Use it to set the initial active tab on first load of page */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Disables the tab and prevents selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"tab\");\n  }\n\n  /** Sets focus to the tab. */\n  public focus(options?: FocusOptions) {\n    this.tab.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  public blur() {\n    this.tab.blur();\n  }\n  /**@internal */\n  @watch(\"active\")\n  handleActiveChange() {\n    this.setAttribute(\"aria-selected\", this.active ? \"true\" : \"false\");\n  }\n  /**@internal */\n  @watch(\"disabled\")\n  handleDisabledChange() {\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n    if (this.disabled) this.active = false;\n  }\n\n  render() {\n    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    const parentVariantAttr = this.closest(\"sgds-tab-group\").getAttribute(\"variant\");\n    const tabsInfo = html`\n      <div class=\"tabs-info-label\">\n        <div><slot name=\"icon\"></slot></div>\n        <div><slot name=\"label\"></slot></div>\n      </div>\n      <div class=\"tabs-info-count\"><slot name=\"count\"></slot></div>\n    `;\n    return html`\n      <ul class=\"list-unstyled\">\n        <li part=\"base\" class=\"nav-item\" tabindex=${this.disabled ? \"-1\" : \"0\"}>\n          <div\n            class=\"${classMap({\n              \"nav-link\": true,\n              [`${parentVariantAttr}`]: parentVariantAttr,\n              active: this.active,\n              disabled: this.disabled\n            })}\"\n          >\n            ${parentVariantAttr === \"tabs-info-toggle\" ? tabsInfo : html`<slot></slot>`}\n          </div>\n        </li>\n      </ul>\n    `;\n  }\n}\n\nexport default SgdsTab;\n"],"names":["tabStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-tab.js","sources":["../../../src/components/Tab/sgds-tab.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport tabStyle from \"./tab.css\";\n\nlet id = 0;\n/**\n * @summary Tabs are used within tab group to activate the tab panels\n *\n * @slot default - The content of the tab. This is  available when variant attribute of `sgds-tab-group` is not specified or when it is `tabs-basic-toggle`\n *\n * @slot icon - The slot to place svg icons. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n * @slot count - The slot for count. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n * @slot label - The slot for label of tab. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n *\n * @csspart base - The base wrapper of tab\n *\n *\n */\nexport class SgdsTab extends SgdsElement {\n  static styles = [tabStyle];\n  /**@internal */\n  @query(\".nav-item\") tab: HTMLElement;\n  /**@internal */\n  private readonly attrId = ++id;\n  /**@internal */\n  private readonly componentId = `sgds-tab-${this.attrId}`;\n\n  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */\n  @property({ reflect: true }) panel = \"\";\n\n  /** Draws the tab in an active state. When used with tab group, this state is already managed. Use it to set the initial active tab on first load of page */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Disables the tab and prevents selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"tab\");\n  }\n\n  /** Sets focus to the tab. */\n  public focus(options?: FocusOptions) {\n    this.tab.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  public blur() {\n    this.tab.blur();\n  }\n  /**@internal */\n  @watch(\"active\")\n  handleActiveChange() {\n    this.setAttribute(\"aria-selected\", this.active ? \"true\" : \"false\");\n  }\n  /**@internal */\n  @watch(\"disabled\")\n  handleDisabledChange() {\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n    if (this.disabled) this.active = false;\n  }\n\n  render() {\n    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    const parentVariantAttr = this.closest(\"sgds-tab-group\").getAttribute(\"variant\");\n    const tabsInfo = html`\n      <div class=\"tabs-info-label\">\n        <div><slot name=\"icon\"></slot></div>\n        <div><slot name=\"label\"></slot></div>\n      </div>\n      <div class=\"tabs-info-count\"><slot name=\"count\"></slot></div>\n    `;\n    return html`\n      <ul class=\"list-unstyled\">\n        <li part=\"base\" class=\"nav-item\" tabindex=${this.disabled ? \"-1\" : \"0\"}>\n          <div\n            class=\"${classMap({\n              \"nav-link\": true,\n              [`${parentVariantAttr}`]: parentVariantAttr,\n              active: this.active,\n              disabled: this.disabled\n            })}\"\n          >\n            ${parentVariantAttr === \"tabs-info-toggle\" ? tabsInfo : html`<slot></slot>`}\n          </div>\n        </li>\n      </ul>\n    `;\n  }\n}\n\nexport default SgdsTab;\n"],"names":["tabStyle"],"mappings":"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"}

package/components/Tab/tab-group.js

@@ -1,4 +1,3 @@
-'use client';
 import { css } from 'lit';
 
 var css_248z = css`.nav{display:flex;flex-wrap:wrap;list-style:none;margin-bottom:0;padding-left:0}.nav-tabs{border-bottom:none;gap:2rem}.sgds.nav-tabs[variant=tabs-basic-toggle]{gap:0}slot[name=nav][variant=tabs-basic-toggle]::slotted(sgds-tab){margin-left:-2px}`;

package/components/Tab/tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"tab-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/Tab/tab-panel.js

@@ -1,4 +1,3 @@
-'use client';
 import { css } from 'lit';
 
 var css_248z = css`:host{--tab-panel-padding-y:1rem;display:block}.tab-panel{display:block;padding:var(--tab-panel-padding-y) 0}.tab-panel:not(.tab-panel--active){display:none}`;

package/components/Tab/tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"tab-panel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/Tab/tab.js

@@ -1,4 +1,3 @@
-'use client';
 import { css } from 'lit';
 
 var css_248z = css`:host{display:inline-block}ul{margin-bottom:1rem;margin-top:0;padding-left:0}.list-unstyled{list-style:none}.nav-link{color:var(--sgds-body-color);cursor:pointer;display:block;padding:.5rem 1rem;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link.tabs-info-toggle{background-color:var(--sgds-body-bg);border:1px solid var(--sgds-gray-400);border-radius:.3125rem;min-width:11.875rem;padding:.75rem}.nav-link:not(.disabled).tabs-info-toggle.active,.nav-link:not(.disabled).tabs-info-toggle:hover{border-color:var(--sgds-primary);color:var(--sgds-primary);font-weight:700}.nav-link.tabs-info-toggle .tabs-info-label{display:flex;justify-content:space-between;text-align:right}.nav-link.tabs-info-toggle .tabs-info-count{text-align:right}.nav-link.tabs-basic-toggle{background-color:var(--sgds-body-bg);border:1px solid var(--sgds-gray-400);border-radius:0;padding:.5rem 1.5rem}.nav-link.tabs-basic-toggle slot{align-items:center;display:flex;gap:1rem}.nav-link:not(.disabled).tabs-basic-toggle.active,.nav-link:not(.disabled).tabs-basic-toggle:hover{background-color:var(--sgds-info);color:var(--sgds-white)}.nav-link.disabled{background-color:var(--sgds-gray-200);border-color:var(--sgds-gray-400);color:var(--sgds-gray-400);cursor:not-allowed}.nav-link:not(.tabs-basic-toggle):not(.tabs-info-toggle){background-color:transparent;border:none;padding-left:0;padding-right:0;padding-top:0}.nav-link:not(.disabled):not(.tabs-basic-toggle):not(.tabs-info-toggle).active,.nav-link:not(.disabled):not(.tabs-basic-toggle):not(.tabs-info-toggle):hover{background-color:transparent;border-bottom:.125rem solid var(--sgds-info);font-weight:700}.nav-link:not(.tabs-basic-toggle):not(.tabs-info-toggle).disabled{background-color:var(--sgds-gray-200);background-color:transparent;border-color:var(--sgds-gray-400);color:var(--sgds-gray-400);cursor:not-allowed}`;

package/components/Tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"tab.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/Table/sgds-table.js

@@ -1,4 +1,3 @@
-'use client';
 import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-table.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/**\n * @summary The use of a table is to organise a collections of data into readable rows\n *\n * @cssproperty --table-bg - Table's background color\n * @cssproperty --table-accent-bg - Table's accent background color\n * @cssproperty --table-striped-color - Text color for striped table\n * @cssproperty --table-striped-bg - Background color for striped table\n * @cssproperty --table-active-color - Active text color for hovered row\n * @cssproperty --table-active-bg - Active background color for hovered row\n * @cssproperty --table-hover-color - Hovered text color for hover table\n * @cssproperty --table-hover-bg - Hovered background color for hover table\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Adds zebra-striping using striped to table row within the <tbody>\n   */\n  @property({ type: Boolean, reflect: true }) striped = false;\n\n  /**\n   * Add borders to all sides of table and cells\n   */\n  @property({ type: Boolean, reflect: true }) bordered = false;\n\n  /**\n   * Remove all borders to table and cells\n   */\n  @property({ type: Boolean, reflect: true }) borderless = false;\n\n  /**\n   * Add hoverable state on table rows\n   */\n  @property({ type: Boolean, reflect: true }) hover = false;\n\n  /**\n   * Add <code>.table-sm</code> to make table more compact\n   */\n  @property({ type: String, reflect: true }) size: string;\n\n  /**\n   * Use contextual classes to add colors to table\n   */\n  @property({ type: String, reflect: true }) variant: string;\n\n  /**\n   * Sorting on a column is enabled by adding the sort property. The sorting algorithm is based on javascript array.sort() method. In ascending order from bottom, alphabets come first, followed by numbers, and then symbols. Similarly, in descending order from bottom, symbols come first, followed by numbers, and then alphabets.\n   */\n  @property({ type: Boolean, reflect: true }) sort = false;\n\n  /**\n   * When removableSort is present, the third click removes the sorting from the column.\n   */\n  @property({ type: Boolean, reflect: true }) removableSort = false;\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 header cells using Arrays\n   */\n  @property({ type: Array }) tableHeaders: string[] = [];\n\n  /**\n   * Populate data cells using Arrays\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /** @internal */\n  @state() sortColumn: number | null = null;\n\n  /** @internal */\n  @state() sortAsc = true;\n\n  //TODO aria-sort\n\n  /** @internal */\n  @state() activeColumn: number | null = null;\n\n  /** @internal */\n  @state() sortClickCount = 0;\n\n  /** @internal */\n  @state() clickCount = 0;\n\n  /** @internal */\n  @state() originalTableData: Array<(string | number)[]> = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.originalTableData = [...this.tableData];\n  }\n\n  handleHeaderClick(columnIndex: number) {\n    if (this.sort) {\n      if (this.sortColumn === columnIndex) {\n        this.sortAsc = !this.sortAsc;\n      } else {\n        this.sortColumn = columnIndex;\n        this.sortAsc = true;\n      }\n\n      this.tableData = [...this.tableData].sort((a, b) => {\n        const aValue = a[columnIndex];\n        const bValue = b[columnIndex];\n\n        if (typeof aValue === \"string\" && typeof bValue === \"string\") {\n          return this.sortAsc ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);\n        } else {\n          return this.sortAsc ? (aValue as number) - (bValue as number) : (bValue as number) - (aValue as number);\n        }\n      });\n\n      // update the active column\n      if (this.activeColumn === columnIndex) {\n        this.clickCount++;\n        if (this.clickCount === 3 && this.removableSort) {\n          this.activeColumn = null;\n          this.clickCount = 0;\n          this.tableData = [...this.originalTableData];\n        }\n      } else {\n        this.activeColumn = columnIndex;\n        this.clickCount = 1;\n      }\n\n      // add the .active class to the clicked header cell\n      const thElements = this.shadowRoot?.querySelectorAll(\"th\");\n      thElements.forEach((thElement, index) => {\n        if (index === columnIndex) {\n          thElement.classList.add(\"active\");\n        } else {\n          thElement.classList.remove(\"active\");\n        }\n      });\n    }\n  }\n\n  getIcon(columnIndex: number) {\n    if (this.activeColumn !== columnIndex) {\n      return html`<svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-arrow-down-up ms-2 align-self-center\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z\"\n        />\n      </svg>`;\n    } else {\n      return this.sortAsc\n        ? html`<svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-sort-up-alt ms-2 align-self-center\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z\"\n            />\n          </svg>`\n        : html`<svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-sort-down ms-2 align-self-center\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z\"\n            />\n          </svg>`;\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\n          class=\"table sgds ${classMap({\n            [`table-striped`]: this.striped,\n            [`table-bordered`]: this.bordered,\n            [`table-borderless`]: this.borderless,\n            [`table-hover`]: this.hover,\n            [`table-${this.size}`]: this.size,\n            [`table-${this.variant}`]: this.variant\n          })}\"\n        >\n          <thead>\n            <tr>\n              ${this.tableHeaders.map(\n                (header: string, index: number) => html`\n                  <th\n                    class=\"${classMap({\n                      \"sortable-header\": this.sort,\n                      active: this.activeColumn === index\n                    })}\"\n                    @click=${() => this.handleHeaderClick(index)}\n                    //TODO aria-sort \n                  >\n                    ${header} ${this.sort ? this.getIcon(index) : null}\n                  </th>\n                `\n              )}\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        </table>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["tableStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-table.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/**\n * @summary The use of a table is to organise a collections of data into readable rows\n *\n * @cssproperty --table-bg - Table's background color\n * @cssproperty --table-accent-bg - Table's accent background color\n * @cssproperty --table-striped-color - Text color for striped table\n * @cssproperty --table-striped-bg - Background color for striped table\n * @cssproperty --table-active-color - Active text color for hovered row\n * @cssproperty --table-active-bg - Active background color for hovered row\n * @cssproperty --table-hover-color - Hovered text color for hover table\n * @cssproperty --table-hover-bg - Hovered background color for hover table\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Adds zebra-striping using striped to table row within the <tbody>\n   */\n  @property({ type: Boolean, reflect: true }) striped = false;\n\n  /**\n   * Add borders to all sides of table and cells\n   */\n  @property({ type: Boolean, reflect: true }) bordered = false;\n\n  /**\n   * Remove all borders to table and cells\n   */\n  @property({ type: Boolean, reflect: true }) borderless = false;\n\n  /**\n   * Add hoverable state on table rows\n   */\n  @property({ type: Boolean, reflect: true }) hover = false;\n\n  /**\n   * Add <code>.table-sm</code> to make table more compact\n   */\n  @property({ type: String, reflect: true }) size: string;\n\n  /**\n   * Use contextual classes to add colors to table\n   */\n  @property({ type: String, reflect: true }) variant: string;\n\n  /**\n   * Sorting on a column is enabled by adding the sort property. The sorting algorithm is based on javascript array.sort() method. In ascending order from bottom, alphabets come first, followed by numbers, and then symbols. Similarly, in descending order from bottom, symbols come first, followed by numbers, and then alphabets.\n   */\n  @property({ type: Boolean, reflect: true }) sort = false;\n\n  /**\n   * When removableSort is present, the third click removes the sorting from the column.\n   */\n  @property({ type: Boolean, reflect: true }) removableSort = false;\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 header cells using Arrays\n   */\n  @property({ type: Array }) tableHeaders: string[] = [];\n\n  /**\n   * Populate data cells using Arrays\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /** @internal */\n  @state() sortColumn: number | null = null;\n\n  /** @internal */\n  @state() sortAsc = true;\n\n  //TODO aria-sort\n\n  /** @internal */\n  @state() activeColumn: number | null = null;\n\n  /** @internal */\n  @state() sortClickCount = 0;\n\n  /** @internal */\n  @state() clickCount = 0;\n\n  /** @internal */\n  @state() originalTableData: Array<(string | number)[]> = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.originalTableData = [...this.tableData];\n  }\n\n  handleHeaderClick(columnIndex: number) {\n    if (this.sort) {\n      if (this.sortColumn === columnIndex) {\n        this.sortAsc = !this.sortAsc;\n      } else {\n        this.sortColumn = columnIndex;\n        this.sortAsc = true;\n      }\n\n      this.tableData = [...this.tableData].sort((a, b) => {\n        const aValue = a[columnIndex];\n        const bValue = b[columnIndex];\n\n        if (typeof aValue === \"string\" && typeof bValue === \"string\") {\n          return this.sortAsc ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);\n        } else {\n          return this.sortAsc ? (aValue as number) - (bValue as number) : (bValue as number) - (aValue as number);\n        }\n      });\n\n      // update the active column\n      if (this.activeColumn === columnIndex) {\n        this.clickCount++;\n        if (this.clickCount === 3 && this.removableSort) {\n          this.activeColumn = null;\n          this.clickCount = 0;\n          this.tableData = [...this.originalTableData];\n        }\n      } else {\n        this.activeColumn = columnIndex;\n        this.clickCount = 1;\n      }\n\n      // add the .active class to the clicked header cell\n      const thElements = this.shadowRoot?.querySelectorAll(\"th\");\n      thElements.forEach((thElement, index) => {\n        if (index === columnIndex) {\n          thElement.classList.add(\"active\");\n        } else {\n          thElement.classList.remove(\"active\");\n        }\n      });\n    }\n  }\n\n  getIcon(columnIndex: number) {\n    if (this.activeColumn !== columnIndex) {\n      return html`<svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-arrow-down-up ms-2 align-self-center\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z\"\n        />\n      </svg>`;\n    } else {\n      return this.sortAsc\n        ? html`<svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-sort-up-alt ms-2 align-self-center\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z\"\n            />\n          </svg>`\n        : html`<svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-sort-down ms-2 align-self-center\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              d=\"M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z\"\n            />\n          </svg>`;\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\n          class=\"table sgds ${classMap({\n            [`table-striped`]: this.striped,\n            [`table-bordered`]: this.bordered,\n            [`table-borderless`]: this.borderless,\n            [`table-hover`]: this.hover,\n            [`table-${this.size}`]: this.size,\n            [`table-${this.variant}`]: this.variant\n          })}\"\n        >\n          <thead>\n            <tr>\n              ${this.tableHeaders.map(\n                (header: string, index: number) => html`\n                  <th\n                    class=\"${classMap({\n                      \"sortable-header\": this.sort,\n                      active: this.activeColumn === index\n                    })}\"\n                    @click=${() => this.handleHeaderClick(index)}\n                    //TODO aria-sort \n                  >\n                    ${header} ${this.sort ? this.getIcon(index) : null}\n                  </th>\n                `\n              )}\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        </table>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["tableStyle"],"mappings":"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"}

package/components/Table/table.js

@@ -1,4 +1,3 @@
-'use client';
 import { css } from 'lit';
 
 var css_248z = css`:host{--table-bg:transparent;--table-accent-bg:transparent;--table-striped-color:var(--sgds-gray-600);--table-striped-bg:rgba(0,0,0,.05);--table-active-color:var(--sgds-gray-600);--table-active-bg:rgba(0,0,0,.1);--table-hover-color:var(--sgds-gray-600);--table-hover-bg:rgba(0,0,0,.075)}tbody,td,th,thead,tr{border:0 solid;border-color:inherit}th{text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{--sgds-table-color-type:initial;--sgds-table-bg-type:initial;--sgds-table-color-state:initial;--sgds-table-bg-state:initial;--sgds-table-color:var(--sgds-emphasis-color);--sgds-table-bg:var(--table-bg);--sgds-table-border-color:var(--sgds-border-color);--sgds-table-accent-bg:var(--table-accent-bg);--sgds-table-striped-color:var(--table-striped-color);--sgds-table-striped-bg:var(--table-striped-bg);--sgds-table-active-color:var(--table-striped-color);--sgds-table-active-bg:rgba(0,0,0,.1);--sgds-table-hover-color:var(--table-striped-color);--sgds-table-hover-bg:rgba(0,0,0,.075);border-color:var(--sgds-table-border-color);margin-bottom:1rem;vertical-align:top;width:100%}.table>:not(caption)>*>*{background-color:var(--sgds-table-bg);border-bottom-width:var(--sgds-border-width);box-shadow:inset 0 0 0 9999px var(--sgds-table-bg-state,var(--sgds-table-bg-type,var(--sgds-table-accent-bg)));color:var(--sgds-table-color-state,var(--sgds-table-color-type,var(--sgds-table-color)));padding:1rem}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table-group-divider{border-top:calc(var(--sgds-border-width)*2) solid}.table-sm>:not(caption)>*>*{padding:.5rem}.table-bordered>:not(caption)>*{border-width:var(--sgds-border-width) 0}.table-bordered>:not(caption)>*>*{border-width:0 var(--sgds-border-width)}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table>:not(:first-child){border-top:2px solid}.table-borderless>:not(:first-child){border-top-width:0}.table-striped-columns>:not(caption)>tr>:nth-child(2n),.table-striped>tbody>tr:nth-of-type(odd)>*{--sgds-table-color-type:var(--sgds-table-striped-color);--sgds-table-bg-type:var(--sgds-table-striped-bg)}.table-active{--sgds-table-color-state:var(--sgds-table-active-color);--sgds-table-bg-state:var(--sgds-table-active-bg)}.table-hover>tbody>tr:hover>*{--sgds-table-color-state:var(--sgds-table-hover-color);--sgds-table-bg-state:var(--sgds-table-hover-bg)}.table-light{--sgds-table-color:#000;--sgds-table-bg:#b1b1b1;--sgds-table-border-color:#9f9f9f;--sgds-table-striped-bg:#a8a8a8;--sgds-table-striped-color:#000;--sgds-table-active-bg:#9f9f9f;--sgds-table-active-color:#000;--sgds-table-hover-bg:#a4a4a4;--sgds-table-hover-color:#000}.table-dark,.table-light{border-color:var(--sgds-table-border-color);color:var(--sgds-table-color)}.table-dark{--sgds-table-color:#fff;--sgds-table-bg:#252525;--sgds-table-border-color:#3b3b3b;--sgds-table-striped-bg:#303030;--sgds-table-striped-color:#fff;--sgds-table-active-bg:#3b3b3b;--sgds-table-active-color:#fff;--sgds-table-hover-bg:#353535;--sgds-table-hover-color:#fff}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}.sgds.table{font-size:1rem}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}@media (min-width:576px){.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}}@media (min-width:768px){.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}}@media (min-width:992px){.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}}@media (min-width:1200px){.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}}@media (min-width:1400px){.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}}@media print{.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}}.sortable-header{cursor:pointer}`;

package/components/Table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/Textarea/sgds-textarea.js

@@ -1,4 +1,3 @@
-'use client';
 import { __decorate } from 'tslib';
 import { query, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';