@govtechsg/sgds-web-component 3.3.1 → 3.3.2

package/react/components/Pagination/sgds-pagination.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-pagination.cjs.js","sources":["../../../../src/components/Pagination/sgds-pagination.ts"],"sourcesContent":["import { TemplateResult, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport paginationStyle from \"./pagination.css\";\n\nexport type Navigation = \"button\" | \"icon-button\";\n\n/**\n * @summary The Pagination component enables the user to select a specific page from a range of pages\n *\n * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.\n *\n **/\nexport class SgdsPagination extends SgdsElement {\n  static styles = [...SgdsElement.styles, paginationStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Inserts the length value from a given sets of data objects*/\n  @property({ type: Number }) dataLength = 0;\n\n  /** Sets the starting active page upon render*/\n  @property({ type: Number }) currentPage = 1;\n\n  /** Sets the amount of data objects to be displayed per page */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Sets the variant of the pagination. */\n  @property({ type: String }) variant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /** Sets the page direction button to contain text and/or icon */\n  @property({ type: String }) navigation: Navigation = \"icon-button\";\n\n  /** Sets the size of all page items. */\n  @property({ type: String }) size: \"sm\" | \"md\" = \"md\";\n\n  /**\n   * The number of pages to show besides first and last page. First and last page always appears\n   */\n  @state() private _limit: 3 | 4 | 5 = 4;\n\n  /**@internal */\n  @watch(\"currentPage\", { waitUntilFirstUpdate: false })\n  _handleValueChange() {\n    this.emit(\"sgds-page-change\", { detail: { currentPage: this.currentPage } });\n    /**\n     * Always showing 7 li at a time.\n     * The case when both ellipsis is not needed\n     */\n    if (this.pages.length <= 7) {\n      return (this._limit = 5);\n    }\n    /**\n     * The case when currentPage is reaching the endPage\n     */\n    if (this.pages.length - this.currentPage <= 3) {\n      return (this._limit = 4);\n    }\n    /**\n     * The case when currentPage is after 4\n     */\n    if (this.currentPage > 4) {\n      return (this._limit = 3);\n    } else {\n      return (this._limit = 4);\n    }\n  }\n\n  private _handlePageClick(event: MouseEvent) {\n    const liTarget = event.target as HTMLElement;\n    const clickedLi = liTarget.closest(\"li\");\n\n    if (clickedLi) {\n      const clickedPage = Number(clickedLi.getAttribute(\"key\"));\n      if (clickedPage !== this.currentPage) {\n        this.currentPage = clickedPage;\n      }\n    }\n  }\n\n  private _handleNextButton() {\n    this.currentPage = this.currentPage + 1;\n  }\n\n  private _handlePrevButton() {\n    this.currentPage = this.currentPage - 1;\n  }\n\n  private get pages() {\n    const pages = [];\n    for (let i = 1; i <= Math.ceil(this.dataLength / this.itemsPerPage); i++) {\n      pages.push(i);\n    }\n    return pages;\n  }\n\n  private _handleKeyDown(event: KeyboardEvent, action: string, number?: number, isPrevButton?: boolean) {\n    if (event.key === \"Enter\") {\n      switch (action) {\n        case \"pageNumber\":\n          this.currentPage = number;\n          break;\n        case \"directionButton\":\n          if (isPrevButton) {\n            this._handlePrevButton();\n          } else {\n            this._handleNextButton();\n          }\n          break;\n      }\n    }\n  }\n\n  private _renderFirstPage() {\n    return html`\n      <li key=${1} class=\"page-item ${this.currentPage === 1 ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === 1 ? `Current Page, Page 1` : \"Go to Page 1\"}\n          aria-current=\"${this.currentPage === 1}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", 1)}\n          >1</span\n        >\n      </li>\n    `;\n  }\n\n  private _getAllPageNumbers(): number[] {\n    const pagesToShow = [];\n\n    for (let i = 1; i <= this.pages.length; i++) {\n      pagesToShow.push(i);\n    }\n\n    return pagesToShow;\n  }\n\n  private _getPageNumbers(): number[] {\n    const pagesToShow = [];\n    let sanitizeStartPage = 2;\n    let endPage: number;\n\n    if (this._limit === 3) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n    }\n\n    if (this._limit === 4) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n      if (this.currentPage + this._limit > this.pages.length) {\n        sanitizeStartPage = this.pages.length - this._limit;\n      }\n    }\n\n    if (sanitizeStartPage <= 1) {\n      sanitizeStartPage = 2;\n    }\n\n    endPage = sanitizeStartPage + this._limit - 1;\n\n    if (endPage >= this.pages.length) {\n      endPage = this.pages.length - 1;\n    }\n\n    for (let i = sanitizeStartPage; i <= endPage; i++) {\n      pagesToShow.push(i);\n    }\n    return pagesToShow;\n  }\n\n  private _renderPgNumbers(pagesToShow: number[]) {\n    return pagesToShow.map(\n      number => html`\n        <li key=${number} class=\"page-item ${this.currentPage === number ? \"active\" : \"\"}\">\n          <span\n            role=\"button\"\n            class=\"page-link\"\n            tabindex=\"0\"\n            aria-label=${this.currentPage === number ? `Current Page, Page ${number}` : `Go to Page ${number}`}\n            aria-current=\"${this.currentPage === number}\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", number)}\n            >${number}</span\n          >\n        </li>\n      `\n    );\n  }\n\n  private ellipsisContent = html`\n    <span aria-hidden=\"true\">…</span>\n    <span class=\"sr-only\" role=\"text\">Ellipsis</span>\n  `;\n\n  private _renderFirstEllipsis = () => {\n    const pagesLengthWithinTotalLimit = this.pages.length <= 7;\n\n    const isHidden = pagesLengthWithinTotalLimit || !(this.pages.length !== this._limit && this.currentPage > 4);\n    if (isHidden) {\n      return null;\n    }\n\n    return html`\n      <li class=\"page-item \">\n        <span class=\"page-link ellipsis\">${this.ellipsisContent}</span>\n      </li>\n    `;\n  };\n\n  private _renderLastEllipsis() {\n    const shouldRenderEllipsis = this.pages.length !== this._limit;\n    if (this.pages.length <= 7) {\n      return null;\n    }\n    if (\n      !shouldRenderEllipsis ||\n      this._limit >= this.pages.length ||\n      this.pages.length - this.currentPage < this._limit\n    ) {\n      return null;\n    }\n    return html`\n      <li class=\"page-item\">\n        <span class=\"page-link ellipsis \">${this.ellipsisContent}</span>\n      </li>\n    `;\n  }\n\n  private _renderLastPage() {\n    return html`\n      <li key=${this.pages.length} class=\"page-item ${this.currentPage === this.pages.length ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === this.pages.length\n            ? `Current Page, Page ${this.pages.length}`\n            : `Go to Page ${this.pages.length}`}\n          aria-current=\"${this.currentPage === this.pages.length}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", this.pages.length)}\n          >${this.pages.length}</span\n        >\n      </li>\n    `;\n  }\n\n  private _renderDirectionButton(\n    directionLabel: \"Prev\" | \"Next\",\n    clickHandler: (event: MouseEvent) => void\n  ): TemplateResult {\n    const isDisabled = directionLabel === \"Prev\" ? this.currentPage === 1 : this.currentPage === this.pages.length;\n\n    if (this.navigation === \"button\") {\n      return html`${this._getNavButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n    if (this.navigation === \"icon-button\") {\n      return html`${this._getIconButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  private _getNavButton = (direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) => {\n    const icon = html`<sgds-icon\n      size=${this.size}\n      name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      slot=${direction === \"Prev\" ? \"leftIcon\" : \"rightIcon\"}\n    ></sgds-icon>`;\n    return html`\n      <sgds-button\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        >${icon}${direction}</sgds-button\n      >\n    `;\n  };\n\n  private _getIconButton(direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) {\n    return html`\n      <sgds-icon-button\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      ></sgds-icon-button>\n    `;\n  }\n  private _renderDescriptionPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      <div class=\"pagination-description\">Page ${this.currentPage} of ${this.pages.length}</div>\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderDefaultPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)} ${this._renderFirstPage()}\n      ${this._renderFirstEllipsis()} ${this._renderPgNumbers(this._getPageNumbers())} ${this._renderLastEllipsis()}\n      ${this.pages.length <= 1 ? nothing : this._renderLastPage()}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderNumberPagination() {\n    return html` ${this._renderPgNumbers(this._getAllPageNumbers())} `;\n  }\n\n  private _renderButtonPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n  render() {\n    return html`\n      <nav aria-label=\"pagination\" role=\"navigation\">\n        <ul class=\"pagination pagination-${this.size}\">\n          ${this.variant === \"description\" ? this._renderDescriptionPagination() : nothing}\n          ${this.variant === \"default\" ? this._renderDefaultPagination() : nothing}\n          ${this.variant === \"number\" ? this._renderNumberPagination() : nothing}\n          ${this.variant === \"button\" ? this._renderButtonPagination() : nothing}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsPagination;\n"],"names":["SgdsElement","html","nothing","paginationStyle","SgdsIconButton","SgdsButton","SgdsIcon","__decorate","property","state","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-pagination.cjs.js","sources":["../../../../src/components/Pagination/sgds-pagination.ts"],"sourcesContent":["import { TemplateResult, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport paginationStyle from \"./pagination.css\";\n\nexport type Navigation = \"button\" | \"icon-button\";\n\n/**\n * @summary The Pagination component enables the user to select a specific page from a range of pages\n *\n * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.\n *\n **/\nexport class SgdsPagination extends SgdsElement {\n  static styles = [...SgdsElement.styles, paginationStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Inserts the length value from a given sets of data objects*/\n  @property({ type: Number }) dataLength = 0;\n\n  /** Sets the starting active page upon render*/\n  @property({ type: Number }) currentPage = 1;\n\n  /** Sets the amount of data objects to be displayed per page */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Sets the variant of the pagination. */\n  @property({ type: String }) variant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /** Sets the page direction button to contain text and/or icon */\n  @property({ type: String }) navigation: Navigation = \"icon-button\";\n\n  /** Sets the size of all page items. */\n  @property({ type: String }) size: \"sm\" | \"md\" = \"md\";\n\n  /**\n   * The number of pages to show besides first and last page. First and last page always appears\n   */\n  @state() private _limit: 3 | 4 | 5 = 4;\n\n  /**@internal */\n  @watch(\"currentPage\", { waitUntilFirstUpdate: false })\n  _handleValueChange() {\n    this.emit(\"sgds-page-change\", { detail: { currentPage: this.currentPage } });\n    /**\n     * Always showing 7 li at a time.\n     * The case when both ellipsis is not needed\n     */\n    if (this.pages.length <= 7) {\n      return (this._limit = 5);\n    }\n    /**\n     * The case when currentPage is reaching the endPage\n     */\n    if (this.pages.length - this.currentPage <= 3) {\n      return (this._limit = 4);\n    }\n    /**\n     * The case when currentPage is after 4\n     */\n    if (this.currentPage > 4) {\n      return (this._limit = 3);\n    } else {\n      return (this._limit = 4);\n    }\n  }\n\n  private _handlePageClick(event: MouseEvent) {\n    const liTarget = event.target as HTMLElement;\n    const clickedLi = liTarget.closest(\"li\");\n\n    if (clickedLi) {\n      const clickedPage = Number(clickedLi.getAttribute(\"key\"));\n      if (clickedPage !== this.currentPage) {\n        this.currentPage = clickedPage;\n      }\n    }\n  }\n\n  private _handleNextButton() {\n    this.currentPage = this.currentPage + 1;\n  }\n\n  private _handlePrevButton() {\n    this.currentPage = this.currentPage - 1;\n  }\n\n  private get pages() {\n    const pages = [];\n    for (let i = 1; i <= Math.ceil(this.dataLength / this.itemsPerPage); i++) {\n      pages.push(i);\n    }\n    return pages;\n  }\n\n  private _handleKeyDown(event: KeyboardEvent, action: string, number?: number, isPrevButton?: boolean) {\n    if (event.key === \"Enter\") {\n      switch (action) {\n        case \"pageNumber\":\n          this.currentPage = number;\n          break;\n        case \"directionButton\":\n          if (isPrevButton) {\n            this._handlePrevButton();\n          } else {\n            this._handleNextButton();\n          }\n          break;\n      }\n    }\n  }\n\n  private _renderFirstPage() {\n    return html`\n      <li key=${1} class=\"page-item ${this.currentPage === 1 ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === 1 ? `Current Page, Page 1` : \"Go to Page 1\"}\n          aria-current=\"${this.currentPage === 1}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", 1)}\n          >1</span\n        >\n      </li>\n    `;\n  }\n\n  private _getAllPageNumbers(): number[] {\n    const pagesToShow = [];\n\n    for (let i = 1; i <= this.pages.length; i++) {\n      pagesToShow.push(i);\n    }\n\n    return pagesToShow;\n  }\n\n  private _getPageNumbers(): number[] {\n    const pagesToShow = [];\n    let sanitizeStartPage = 2;\n    let endPage: number;\n\n    if (this._limit === 3) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n    }\n\n    if (this._limit === 4) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n      if (this.currentPage + this._limit > this.pages.length) {\n        sanitizeStartPage = this.pages.length - this._limit;\n      }\n    }\n\n    if (sanitizeStartPage <= 1) {\n      sanitizeStartPage = 2;\n    }\n\n    endPage = sanitizeStartPage + this._limit - 1;\n\n    if (endPage >= this.pages.length) {\n      endPage = this.pages.length - 1;\n    }\n\n    for (let i = sanitizeStartPage; i <= endPage; i++) {\n      pagesToShow.push(i);\n    }\n    return pagesToShow;\n  }\n\n  private _renderPgNumbers(pagesToShow: number[]) {\n    return pagesToShow.map(\n      number => html`\n        <li key=${number} class=\"page-item ${this.currentPage === number ? \"active\" : \"\"}\">\n          <span\n            role=\"button\"\n            class=\"page-link\"\n            tabindex=\"0\"\n            aria-label=${this.currentPage === number ? `Current Page, Page ${number}` : `Go to Page ${number}`}\n            aria-current=\"${this.currentPage === number}\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", number)}\n            >${number}</span\n          >\n        </li>\n      `\n    );\n  }\n\n  private ellipsisContent = html`\n    <span aria-hidden=\"true\">…</span>\n    <span class=\"sr-only\" role=\"text\">Ellipsis</span>\n  `;\n\n  private _renderFirstEllipsis = () => {\n    const pagesLengthWithinTotalLimit = this.pages.length <= 7;\n\n    const isHidden = pagesLengthWithinTotalLimit || !(this.pages.length !== this._limit && this.currentPage > 4);\n    if (isHidden) {\n      return null;\n    }\n\n    return html`\n      <li class=\"page-item \">\n        <span class=\"page-link ellipsis\">${this.ellipsisContent}</span>\n      </li>\n    `;\n  };\n\n  private _renderLastEllipsis() {\n    const shouldRenderEllipsis = this.pages.length !== this._limit;\n    if (this.pages.length <= 7) {\n      return null;\n    }\n    if (\n      !shouldRenderEllipsis ||\n      this._limit >= this.pages.length ||\n      this.pages.length - this.currentPage < this._limit\n    ) {\n      return null;\n    }\n    return html`\n      <li class=\"page-item\">\n        <span class=\"page-link ellipsis \">${this.ellipsisContent}</span>\n      </li>\n    `;\n  }\n\n  private _renderLastPage() {\n    return html`\n      <li key=${this.pages.length} class=\"page-item ${this.currentPage === this.pages.length ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === this.pages.length\n            ? `Current Page, Page ${this.pages.length}`\n            : `Go to Page ${this.pages.length}`}\n          aria-current=\"${this.currentPage === this.pages.length}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", this.pages.length)}\n          >${this.pages.length}</span\n        >\n      </li>\n    `;\n  }\n\n  private _renderDirectionButton(\n    directionLabel: \"Prev\" | \"Next\",\n    clickHandler: (event: MouseEvent) => void\n  ): TemplateResult {\n    const nextNavDisableCondition = this.currentPage === this.pages.length || this.pages.length <= 1;\n    const prevNavDisableCondition = this.currentPage === 1;\n    const isDisabled = directionLabel === \"Prev\" ? prevNavDisableCondition : nextNavDisableCondition;\n\n    if (this.navigation === \"button\") {\n      return html`${this._getNavButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n    if (this.navigation === \"icon-button\") {\n      return html`${this._getIconButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  private _getNavButton = (direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) => {\n    const icon = html`<sgds-icon\n      size=${this.size}\n      name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      slot=${direction === \"Prev\" ? \"leftIcon\" : \"rightIcon\"}\n    ></sgds-icon>`;\n    return html`\n      <sgds-button\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        >${icon}${direction}</sgds-button\n      >\n    `;\n  };\n\n  private _getIconButton(direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) {\n    return html`\n      <sgds-icon-button\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      ></sgds-icon-button>\n    `;\n  }\n  private _renderDescriptionPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      <div class=\"pagination-description\">Page ${this.currentPage} of ${this.pages.length}</div>\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderDefaultPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)} ${this._renderFirstPage()}\n      ${this._renderFirstEllipsis()} ${this._renderPgNumbers(this._getPageNumbers())} ${this._renderLastEllipsis()}\n      ${this.pages.length <= 1 ? nothing : this._renderLastPage()}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderNumberPagination() {\n    return html` ${this._renderPgNumbers(this._getAllPageNumbers())} `;\n  }\n\n  private _renderButtonPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n  render() {\n    return html`\n      <nav aria-label=\"pagination\" role=\"navigation\">\n        <ul class=\"pagination pagination-${this.size}\">\n          ${this.variant === \"description\" ? this._renderDescriptionPagination() : nothing}\n          ${this.variant === \"default\" ? this._renderDefaultPagination() : nothing}\n          ${this.variant === \"number\" ? this._renderNumberPagination() : nothing}\n          ${this.variant === \"button\" ? this._renderButtonPagination() : nothing}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsPagination;\n"],"names":["SgdsElement","html","nothing","paginationStyle","SgdsIconButton","SgdsButton","SgdsIcon","__decorate","property","state","watch"],"mappings":"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"}

package/react/components/Pagination/sgds-pagination.js

@@ -233,7 +233,9 @@ class SgdsPagination extends SgdsElement {
     `;
     }
     _renderDirectionButton(directionLabel, clickHandler) {
-        const isDisabled = directionLabel === "Prev" ? this.currentPage === 1 : this.currentPage === this.pages.length;
+        const nextNavDisableCondition = this.currentPage === this.pages.length || this.pages.length <= 1;
+        const prevNavDisableCondition = this.currentPage === 1;
+        const isDisabled = directionLabel === "Prev" ? prevNavDisableCondition : nextNavDisableCondition;
         if (this.navigation === "button") {
             return html `${this._getNavButton(directionLabel, clickHandler, isDisabled)}`;
         }

package/react/components/Pagination/sgds-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-pagination.js","sources":["../../../../src/components/Pagination/sgds-pagination.ts"],"sourcesContent":["import { TemplateResult, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport paginationStyle from \"./pagination.css\";\n\nexport type Navigation = \"button\" | \"icon-button\";\n\n/**\n * @summary The Pagination component enables the user to select a specific page from a range of pages\n *\n * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.\n *\n **/\nexport class SgdsPagination extends SgdsElement {\n  static styles = [...SgdsElement.styles, paginationStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Inserts the length value from a given sets of data objects*/\n  @property({ type: Number }) dataLength = 0;\n\n  /** Sets the starting active page upon render*/\n  @property({ type: Number }) currentPage = 1;\n\n  /** Sets the amount of data objects to be displayed per page */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Sets the variant of the pagination. */\n  @property({ type: String }) variant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /** Sets the page direction button to contain text and/or icon */\n  @property({ type: String }) navigation: Navigation = \"icon-button\";\n\n  /** Sets the size of all page items. */\n  @property({ type: String }) size: \"sm\" | \"md\" = \"md\";\n\n  /**\n   * The number of pages to show besides first and last page. First and last page always appears\n   */\n  @state() private _limit: 3 | 4 | 5 = 4;\n\n  /**@internal */\n  @watch(\"currentPage\", { waitUntilFirstUpdate: false })\n  _handleValueChange() {\n    this.emit(\"sgds-page-change\", { detail: { currentPage: this.currentPage } });\n    /**\n     * Always showing 7 li at a time.\n     * The case when both ellipsis is not needed\n     */\n    if (this.pages.length <= 7) {\n      return (this._limit = 5);\n    }\n    /**\n     * The case when currentPage is reaching the endPage\n     */\n    if (this.pages.length - this.currentPage <= 3) {\n      return (this._limit = 4);\n    }\n    /**\n     * The case when currentPage is after 4\n     */\n    if (this.currentPage > 4) {\n      return (this._limit = 3);\n    } else {\n      return (this._limit = 4);\n    }\n  }\n\n  private _handlePageClick(event: MouseEvent) {\n    const liTarget = event.target as HTMLElement;\n    const clickedLi = liTarget.closest(\"li\");\n\n    if (clickedLi) {\n      const clickedPage = Number(clickedLi.getAttribute(\"key\"));\n      if (clickedPage !== this.currentPage) {\n        this.currentPage = clickedPage;\n      }\n    }\n  }\n\n  private _handleNextButton() {\n    this.currentPage = this.currentPage + 1;\n  }\n\n  private _handlePrevButton() {\n    this.currentPage = this.currentPage - 1;\n  }\n\n  private get pages() {\n    const pages = [];\n    for (let i = 1; i <= Math.ceil(this.dataLength / this.itemsPerPage); i++) {\n      pages.push(i);\n    }\n    return pages;\n  }\n\n  private _handleKeyDown(event: KeyboardEvent, action: string, number?: number, isPrevButton?: boolean) {\n    if (event.key === \"Enter\") {\n      switch (action) {\n        case \"pageNumber\":\n          this.currentPage = number;\n          break;\n        case \"directionButton\":\n          if (isPrevButton) {\n            this._handlePrevButton();\n          } else {\n            this._handleNextButton();\n          }\n          break;\n      }\n    }\n  }\n\n  private _renderFirstPage() {\n    return html`\n      <li key=${1} class=\"page-item ${this.currentPage === 1 ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === 1 ? `Current Page, Page 1` : \"Go to Page 1\"}\n          aria-current=\"${this.currentPage === 1}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", 1)}\n          >1</span\n        >\n      </li>\n    `;\n  }\n\n  private _getAllPageNumbers(): number[] {\n    const pagesToShow = [];\n\n    for (let i = 1; i <= this.pages.length; i++) {\n      pagesToShow.push(i);\n    }\n\n    return pagesToShow;\n  }\n\n  private _getPageNumbers(): number[] {\n    const pagesToShow = [];\n    let sanitizeStartPage = 2;\n    let endPage: number;\n\n    if (this._limit === 3) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n    }\n\n    if (this._limit === 4) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n      if (this.currentPage + this._limit > this.pages.length) {\n        sanitizeStartPage = this.pages.length - this._limit;\n      }\n    }\n\n    if (sanitizeStartPage <= 1) {\n      sanitizeStartPage = 2;\n    }\n\n    endPage = sanitizeStartPage + this._limit - 1;\n\n    if (endPage >= this.pages.length) {\n      endPage = this.pages.length - 1;\n    }\n\n    for (let i = sanitizeStartPage; i <= endPage; i++) {\n      pagesToShow.push(i);\n    }\n    return pagesToShow;\n  }\n\n  private _renderPgNumbers(pagesToShow: number[]) {\n    return pagesToShow.map(\n      number => html`\n        <li key=${number} class=\"page-item ${this.currentPage === number ? \"active\" : \"\"}\">\n          <span\n            role=\"button\"\n            class=\"page-link\"\n            tabindex=\"0\"\n            aria-label=${this.currentPage === number ? `Current Page, Page ${number}` : `Go to Page ${number}`}\n            aria-current=\"${this.currentPage === number}\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", number)}\n            >${number}</span\n          >\n        </li>\n      `\n    );\n  }\n\n  private ellipsisContent = html`\n    <span aria-hidden=\"true\">…</span>\n    <span class=\"sr-only\" role=\"text\">Ellipsis</span>\n  `;\n\n  private _renderFirstEllipsis = () => {\n    const pagesLengthWithinTotalLimit = this.pages.length <= 7;\n\n    const isHidden = pagesLengthWithinTotalLimit || !(this.pages.length !== this._limit && this.currentPage > 4);\n    if (isHidden) {\n      return null;\n    }\n\n    return html`\n      <li class=\"page-item \">\n        <span class=\"page-link ellipsis\">${this.ellipsisContent}</span>\n      </li>\n    `;\n  };\n\n  private _renderLastEllipsis() {\n    const shouldRenderEllipsis = this.pages.length !== this._limit;\n    if (this.pages.length <= 7) {\n      return null;\n    }\n    if (\n      !shouldRenderEllipsis ||\n      this._limit >= this.pages.length ||\n      this.pages.length - this.currentPage < this._limit\n    ) {\n      return null;\n    }\n    return html`\n      <li class=\"page-item\">\n        <span class=\"page-link ellipsis \">${this.ellipsisContent}</span>\n      </li>\n    `;\n  }\n\n  private _renderLastPage() {\n    return html`\n      <li key=${this.pages.length} class=\"page-item ${this.currentPage === this.pages.length ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === this.pages.length\n            ? `Current Page, Page ${this.pages.length}`\n            : `Go to Page ${this.pages.length}`}\n          aria-current=\"${this.currentPage === this.pages.length}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", this.pages.length)}\n          >${this.pages.length}</span\n        >\n      </li>\n    `;\n  }\n\n  private _renderDirectionButton(\n    directionLabel: \"Prev\" | \"Next\",\n    clickHandler: (event: MouseEvent) => void\n  ): TemplateResult {\n    const isDisabled = directionLabel === \"Prev\" ? this.currentPage === 1 : this.currentPage === this.pages.length;\n\n    if (this.navigation === \"button\") {\n      return html`${this._getNavButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n    if (this.navigation === \"icon-button\") {\n      return html`${this._getIconButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  private _getNavButton = (direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) => {\n    const icon = html`<sgds-icon\n      size=${this.size}\n      name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      slot=${direction === \"Prev\" ? \"leftIcon\" : \"rightIcon\"}\n    ></sgds-icon>`;\n    return html`\n      <sgds-button\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        >${icon}${direction}</sgds-button\n      >\n    `;\n  };\n\n  private _getIconButton(direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) {\n    return html`\n      <sgds-icon-button\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      ></sgds-icon-button>\n    `;\n  }\n  private _renderDescriptionPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      <div class=\"pagination-description\">Page ${this.currentPage} of ${this.pages.length}</div>\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderDefaultPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)} ${this._renderFirstPage()}\n      ${this._renderFirstEllipsis()} ${this._renderPgNumbers(this._getPageNumbers())} ${this._renderLastEllipsis()}\n      ${this.pages.length <= 1 ? nothing : this._renderLastPage()}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderNumberPagination() {\n    return html` ${this._renderPgNumbers(this._getAllPageNumbers())} `;\n  }\n\n  private _renderButtonPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n  render() {\n    return html`\n      <nav aria-label=\"pagination\" role=\"navigation\">\n        <ul class=\"pagination pagination-${this.size}\">\n          ${this.variant === \"description\" ? this._renderDescriptionPagination() : nothing}\n          ${this.variant === \"default\" ? this._renderDefaultPagination() : nothing}\n          ${this.variant === \"number\" ? this._renderNumberPagination() : nothing}\n          ${this.variant === \"button\" ? this._renderButtonPagination() : nothing}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsPagination;\n"],"names":["paginationStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-pagination.js","sources":["../../../../src/components/Pagination/sgds-pagination.ts"],"sourcesContent":["import { TemplateResult, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport paginationStyle from \"./pagination.css\";\n\nexport type Navigation = \"button\" | \"icon-button\";\n\n/**\n * @summary The Pagination component enables the user to select a specific page from a range of pages\n *\n * @event sgds-page-change - Event is emitted when `handleNextButton`, `handlePrevButton`, `handleNextEllipsisButton` and `handlePrevEllipsisButton` was called.\n *\n **/\nexport class SgdsPagination extends SgdsElement {\n  static styles = [...SgdsElement.styles, paginationStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Inserts the length value from a given sets of data objects*/\n  @property({ type: Number }) dataLength = 0;\n\n  /** Sets the starting active page upon render*/\n  @property({ type: Number }) currentPage = 1;\n\n  /** Sets the amount of data objects to be displayed per page */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Sets the variant of the pagination. */\n  @property({ type: String }) variant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /** Sets the page direction button to contain text and/or icon */\n  @property({ type: String }) navigation: Navigation = \"icon-button\";\n\n  /** Sets the size of all page items. */\n  @property({ type: String }) size: \"sm\" | \"md\" = \"md\";\n\n  /**\n   * The number of pages to show besides first and last page. First and last page always appears\n   */\n  @state() private _limit: 3 | 4 | 5 = 4;\n\n  /**@internal */\n  @watch(\"currentPage\", { waitUntilFirstUpdate: false })\n  _handleValueChange() {\n    this.emit(\"sgds-page-change\", { detail: { currentPage: this.currentPage } });\n    /**\n     * Always showing 7 li at a time.\n     * The case when both ellipsis is not needed\n     */\n    if (this.pages.length <= 7) {\n      return (this._limit = 5);\n    }\n    /**\n     * The case when currentPage is reaching the endPage\n     */\n    if (this.pages.length - this.currentPage <= 3) {\n      return (this._limit = 4);\n    }\n    /**\n     * The case when currentPage is after 4\n     */\n    if (this.currentPage > 4) {\n      return (this._limit = 3);\n    } else {\n      return (this._limit = 4);\n    }\n  }\n\n  private _handlePageClick(event: MouseEvent) {\n    const liTarget = event.target as HTMLElement;\n    const clickedLi = liTarget.closest(\"li\");\n\n    if (clickedLi) {\n      const clickedPage = Number(clickedLi.getAttribute(\"key\"));\n      if (clickedPage !== this.currentPage) {\n        this.currentPage = clickedPage;\n      }\n    }\n  }\n\n  private _handleNextButton() {\n    this.currentPage = this.currentPage + 1;\n  }\n\n  private _handlePrevButton() {\n    this.currentPage = this.currentPage - 1;\n  }\n\n  private get pages() {\n    const pages = [];\n    for (let i = 1; i <= Math.ceil(this.dataLength / this.itemsPerPage); i++) {\n      pages.push(i);\n    }\n    return pages;\n  }\n\n  private _handleKeyDown(event: KeyboardEvent, action: string, number?: number, isPrevButton?: boolean) {\n    if (event.key === \"Enter\") {\n      switch (action) {\n        case \"pageNumber\":\n          this.currentPage = number;\n          break;\n        case \"directionButton\":\n          if (isPrevButton) {\n            this._handlePrevButton();\n          } else {\n            this._handleNextButton();\n          }\n          break;\n      }\n    }\n  }\n\n  private _renderFirstPage() {\n    return html`\n      <li key=${1} class=\"page-item ${this.currentPage === 1 ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === 1 ? `Current Page, Page 1` : \"Go to Page 1\"}\n          aria-current=\"${this.currentPage === 1}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", 1)}\n          >1</span\n        >\n      </li>\n    `;\n  }\n\n  private _getAllPageNumbers(): number[] {\n    const pagesToShow = [];\n\n    for (let i = 1; i <= this.pages.length; i++) {\n      pagesToShow.push(i);\n    }\n\n    return pagesToShow;\n  }\n\n  private _getPageNumbers(): number[] {\n    const pagesToShow = [];\n    let sanitizeStartPage = 2;\n    let endPage: number;\n\n    if (this._limit === 3) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n    }\n\n    if (this._limit === 4) {\n      sanitizeStartPage = this.currentPage - Math.floor(this._limit / 2);\n      if (this.currentPage + this._limit > this.pages.length) {\n        sanitizeStartPage = this.pages.length - this._limit;\n      }\n    }\n\n    if (sanitizeStartPage <= 1) {\n      sanitizeStartPage = 2;\n    }\n\n    endPage = sanitizeStartPage + this._limit - 1;\n\n    if (endPage >= this.pages.length) {\n      endPage = this.pages.length - 1;\n    }\n\n    for (let i = sanitizeStartPage; i <= endPage; i++) {\n      pagesToShow.push(i);\n    }\n    return pagesToShow;\n  }\n\n  private _renderPgNumbers(pagesToShow: number[]) {\n    return pagesToShow.map(\n      number => html`\n        <li key=${number} class=\"page-item ${this.currentPage === number ? \"active\" : \"\"}\">\n          <span\n            role=\"button\"\n            class=\"page-link\"\n            tabindex=\"0\"\n            aria-label=${this.currentPage === number ? `Current Page, Page ${number}` : `Go to Page ${number}`}\n            aria-current=\"${this.currentPage === number}\"\n            @click=${this._handlePageClick}\n            @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", number)}\n            >${number}</span\n          >\n        </li>\n      `\n    );\n  }\n\n  private ellipsisContent = html`\n    <span aria-hidden=\"true\">…</span>\n    <span class=\"sr-only\" role=\"text\">Ellipsis</span>\n  `;\n\n  private _renderFirstEllipsis = () => {\n    const pagesLengthWithinTotalLimit = this.pages.length <= 7;\n\n    const isHidden = pagesLengthWithinTotalLimit || !(this.pages.length !== this._limit && this.currentPage > 4);\n    if (isHidden) {\n      return null;\n    }\n\n    return html`\n      <li class=\"page-item \">\n        <span class=\"page-link ellipsis\">${this.ellipsisContent}</span>\n      </li>\n    `;\n  };\n\n  private _renderLastEllipsis() {\n    const shouldRenderEllipsis = this.pages.length !== this._limit;\n    if (this.pages.length <= 7) {\n      return null;\n    }\n    if (\n      !shouldRenderEllipsis ||\n      this._limit >= this.pages.length ||\n      this.pages.length - this.currentPage < this._limit\n    ) {\n      return null;\n    }\n    return html`\n      <li class=\"page-item\">\n        <span class=\"page-link ellipsis \">${this.ellipsisContent}</span>\n      </li>\n    `;\n  }\n\n  private _renderLastPage() {\n    return html`\n      <li key=${this.pages.length} class=\"page-item ${this.currentPage === this.pages.length ? \"active\" : \"\"}\">\n        <span\n          role=\"button\"\n          class=\"page-link\"\n          aria-label=${this.currentPage === this.pages.length\n            ? `Current Page, Page ${this.pages.length}`\n            : `Go to Page ${this.pages.length}`}\n          aria-current=\"${this.currentPage === this.pages.length}\"\n          tabindex=\"0\"\n          @click=${this._handlePageClick}\n          @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, \"pageNumber\", this.pages.length)}\n          >${this.pages.length}</span\n        >\n      </li>\n    `;\n  }\n\n  private _renderDirectionButton(\n    directionLabel: \"Prev\" | \"Next\",\n    clickHandler: (event: MouseEvent) => void\n  ): TemplateResult {\n    const nextNavDisableCondition = this.currentPage === this.pages.length || this.pages.length <= 1;\n    const prevNavDisableCondition = this.currentPage === 1;\n    const isDisabled = directionLabel === \"Prev\" ? prevNavDisableCondition : nextNavDisableCondition;\n\n    if (this.navigation === \"button\") {\n      return html`${this._getNavButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n    if (this.navigation === \"icon-button\") {\n      return html`${this._getIconButton(directionLabel, clickHandler, isDisabled)}`;\n    }\n\n    return html`${nothing}`;\n  }\n\n  private _getNavButton = (direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) => {\n    const icon = html`<sgds-icon\n      size=${this.size}\n      name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      slot=${direction === \"Prev\" ? \"leftIcon\" : \"rightIcon\"}\n    ></sgds-icon>`;\n    return html`\n      <sgds-button\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        >${icon}${direction}</sgds-button\n      >\n    `;\n  };\n\n  private _getIconButton(direction: \"Prev\" | \"Next\", clickHandler: (e: MouseEvent) => void, isDisabled: boolean) {\n    return html`\n      <sgds-icon-button\n        ariaLabel=${direction === \"Prev\" ? \"Previous\" : \"Next\"}\n        size=${this.size}\n        @click=${isDisabled ? undefined : clickHandler}\n        ?disabled=${isDisabled}\n        variant=\"ghost\"\n        name=${direction === \"Prev\" ? \"arrow-left\" : \"arrow-right\"}\n      ></sgds-icon-button>\n    `;\n  }\n  private _renderDescriptionPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      <div class=\"pagination-description\">Page ${this.currentPage} of ${this.pages.length}</div>\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderDefaultPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)} ${this._renderFirstPage()}\n      ${this._renderFirstEllipsis()} ${this._renderPgNumbers(this._getPageNumbers())} ${this._renderLastEllipsis()}\n      ${this.pages.length <= 1 ? nothing : this._renderLastPage()}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n\n  private _renderNumberPagination() {\n    return html` ${this._renderPgNumbers(this._getAllPageNumbers())} `;\n  }\n\n  private _renderButtonPagination() {\n    return html`\n      ${this._renderDirectionButton(\"Prev\", this._handlePrevButton)}\n      ${this._renderDirectionButton(\"Next\", this._handleNextButton)}\n    `;\n  }\n  render() {\n    return html`\n      <nav aria-label=\"pagination\" role=\"navigation\">\n        <ul class=\"pagination pagination-${this.size}\">\n          ${this.variant === \"description\" ? this._renderDescriptionPagination() : nothing}\n          ${this.variant === \"default\" ? this._renderDefaultPagination() : nothing}\n          ${this.variant === \"number\" ? this._renderNumberPagination() : nothing}\n          ${this.variant === \"button\" ? this._renderButtonPagination() : nothing}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsPagination;\n"],"names":["paginationStyle"],"mappings":"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"}

package/react/components/Sidenav/sidenav-item.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-border-radius-md);display:flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-body);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled),.sidenav-btn:focus:not(.disabled){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}.no-menu-default:focus,.no-menu-default:focus-visible{background-color:var(--sgds-default-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus)}.no-menu-default::slotted(a){background:0;border:0;border-radius:var(--sgds-border-radius-md);color:inherit!important;display:flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-semibold)!important;gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-body)!important;line-height:var(--sgds-line-height-body);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-decoration:none!important}.no-menu-default::slotted(a:focus),.no-menu-default::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0!important}:host([class^=first-level][active]) .no-menu-default::slotted(a){background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)!important}:host([class^=first-level][disabled]) .no-menu-default::slotted(a){opacity:var(--sgds-opacity-50);pointer-events:none}`;
+var css_248z = lit.css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-border-radius-md);display:flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-body);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled),.sidenav-btn:focus:not(.disabled){background-color:var(--sgds-bg-translucent-subtle);outline:0}.sidenav-btn:focus-visible:not(.disabled){box-shadow:var(--sgds-box-shadow-focus)}.no-menu-default:focus,.no-menu-default:focus-visible{background-color:var(--sgds-default-bg-translucent-subtle)}.no-menu-default:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.no-menu-default::slotted(a){background:0;border:0;border-radius:var(--sgds-border-radius-md);color:inherit!important;display:flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-semibold)!important;gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-body)!important;line-height:var(--sgds-line-height-body);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-decoration:none!important}.no-menu-default::slotted(a:focus),.no-menu-default::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle);outline:0!important}.no-menu-default::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}:host([class^=first-level][active]) .no-menu-default::slotted(a){background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)!important}:host([class^=first-level][disabled]) .no-menu-default::slotted(a){opacity:var(--sgds-opacity-50);pointer-events:none}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=sidenav-item.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-border-radius-md);display:flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-body);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled),.sidenav-btn:focus:not(.disabled){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}.no-menu-default:focus,.no-menu-default:focus-visible{background-color:var(--sgds-default-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus)}.no-menu-default::slotted(a){background:0;border:0;border-radius:var(--sgds-border-radius-md);color:inherit!important;display:flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-semibold)!important;gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-body)!important;line-height:var(--sgds-line-height-body);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-decoration:none!important}.no-menu-default::slotted(a:focus),.no-menu-default::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0!important}:host([class^=first-level][active]) .no-menu-default::slotted(a){background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)!important}:host([class^=first-level][disabled]) .no-menu-default::slotted(a){opacity:var(--sgds-opacity-50);pointer-events:none}`;
+var css_248z = css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-border-radius-md);display:flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-body);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled),.sidenav-btn:focus:not(.disabled){background-color:var(--sgds-bg-translucent-subtle);outline:0}.sidenav-btn:focus-visible:not(.disabled){box-shadow:var(--sgds-box-shadow-focus)}.no-menu-default:focus,.no-menu-default:focus-visible{background-color:var(--sgds-default-bg-translucent-subtle)}.no-menu-default:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.no-menu-default::slotted(a){background:0;border:0;border-radius:var(--sgds-border-radius-md);color:inherit!important;display:flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-semibold)!important;gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-body)!important;line-height:var(--sgds-line-height-body);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-decoration:none!important}.no-menu-default::slotted(a:focus),.no-menu-default::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle);outline:0!important}.no-menu-default::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}:host([class^=first-level][active]) .no-menu-default::slotted(a){background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)!important}:host([class^=first-level][disabled]) .no-menu-default::slotted(a){opacity:var(--sgds-opacity-50);pointer-events:none}`;
 
 export { css_248z as default };
 //# sourceMappingURL=sidenav-item.js.map

package/react/components/Sidenav/sidenav-link.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([class^=third-level]) ::slotted(a){padding-left:calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl))}::slotted(a){--sgds-link-color-default:var(--sgds-color-default);border-radius:var(--sgds-border-radius-md);color:var(--sgds-color-default,var(--sgds-link-color-default));display:block;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-3-xl);text-decoration:none!important}:host([active]) ::slotted(a){--sgds-link-color-default:var(--sgds-primary-color-emphasis);background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-default))}:host(:not([disabled]):not([active])) ::slotted(a:hover){background-color:var(--sgds-bg-translucent-subtle)}::slotted(a:focus),::slotted(a:focus-visible),::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-emphasis))}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible),:host([active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-emphasis))}:host([disabled]) ::slotted(a){opacity:var(--sgds-opacity-50);pointer-events:none}:host([disabled]) ::slotted(a:focus),:host([disabled]) ::slotted(a:focus-visible){box-shadow:none;outline:0}::slotted(a:focus),::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible){background-color:var(--sgds-primary-bg-translucent)}`;
+var css_248z = lit.css`:host([class^=third-level]) ::slotted(a){padding-left:calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl))}::slotted(a){--sgds-link-color-default:var(--sgds-color-default);border-radius:var(--sgds-border-radius-md);color:var(--sgds-color-default,var(--sgds-link-color-default));display:block;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-3-xl);text-decoration:none!important}:host([active]) ::slotted(a){--sgds-link-color-default:var(--sgds-primary-color-emphasis);background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-default))}:host(:not([disabled]):not([active])) ::slotted(a:hover){background-color:var(--sgds-bg-translucent-subtle)}::slotted(a:focus),::slotted(a:focus-visible),::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-emphasis))}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible),:host([active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-emphasis))}:host([disabled]) ::slotted(a){opacity:var(--sgds-opacity-50);pointer-events:none}:host([disabled]) ::slotted(a:focus),:host([disabled]) ::slotted(a:focus-visible){box-shadow:none;outline:0}::slotted(a:focus),::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle);outline:0}::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible){background-color:var(--sgds-primary-bg-translucent)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=sidenav-link.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([class^=third-level]) ::slotted(a){padding-left:calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl))}::slotted(a){--sgds-link-color-default:var(--sgds-color-default);border-radius:var(--sgds-border-radius-md);color:var(--sgds-color-default,var(--sgds-link-color-default));display:block;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-3-xl);text-decoration:none!important}:host([active]) ::slotted(a){--sgds-link-color-default:var(--sgds-primary-color-emphasis);background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-default))}:host(:not([disabled]):not([active])) ::slotted(a:hover){background-color:var(--sgds-bg-translucent-subtle)}::slotted(a:focus),::slotted(a:focus-visible),::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-emphasis))}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible),:host([active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-emphasis))}:host([disabled]) ::slotted(a){opacity:var(--sgds-opacity-50);pointer-events:none}:host([disabled]) ::slotted(a:focus),:host([disabled]) ::slotted(a:focus-visible){box-shadow:none;outline:0}::slotted(a:focus),::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible){background-color:var(--sgds-primary-bg-translucent)}`;
+var css_248z = css`:host([class^=third-level]) ::slotted(a){padding-left:calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl))}::slotted(a){--sgds-link-color-default:var(--sgds-color-default);border-radius:var(--sgds-border-radius-md);color:var(--sgds-color-default,var(--sgds-link-color-default));display:block;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-3-xl);text-decoration:none!important}:host([active]) ::slotted(a){--sgds-link-color-default:var(--sgds-primary-color-emphasis);background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-default))}:host(:not([disabled]):not([active])) ::slotted(a:hover){background-color:var(--sgds-bg-translucent-subtle)}::slotted(a:focus),::slotted(a:focus-visible),::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-emphasis))}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible),:host([active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-emphasis))}:host([disabled]) ::slotted(a){opacity:var(--sgds-opacity-50);pointer-events:none}:host([disabled]) ::slotted(a:focus),:host([disabled]) ::slotted(a:focus-visible){box-shadow:none;outline:0}::slotted(a:focus),::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle);outline:0}::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible){background-color:var(--sgds-primary-bg-translucent)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=sidenav-link.js.map

package/react/components/Stepper/stepper.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item:focus,.stepper .stepper-item:focus-visible{outline:0}.stepper .stepper-item.is-clickable:focus,.stepper .stepper-item.is-clickable:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.stepper.horizontal .stepper-item-container:not(:first-child) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;
+var css_248z = lit.css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item:focus,.stepper .stepper-item:focus-visible{outline:0}.stepper .stepper-item.is-clickable:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.stepper.horizontal .stepper-item-container:not(:first-child) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=stepper.cjs.js.map

package/react/components/Stepper/stepper.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item:focus,.stepper .stepper-item:focus-visible{outline:0}.stepper .stepper-item.is-clickable:focus,.stepper .stepper-item.is-clickable:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.stepper.horizontal .stepper-item-container:not(:first-child) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;
+var css_248z = css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item:focus,.stepper .stepper-item:focus-visible{outline:0}.stepper .stepper-item.is-clickable:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.stepper.horizontal .stepper-item-container:not(:first-child) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=stepper.js.map

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus,.subnav-toggler:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
+var css_248z = lit.css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus,.subnav-toggler:focus-visible{outline:0}.subnav-toggler:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=subnav.cjs.js.map

package/react/components/Subnav/subnav.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus,.subnav-toggler:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
+var css_248z = css`:host{display:block;position:sticky;top:0;z-index:1000}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-3-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-3-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus,.subnav-toggler:focus-visible{outline:0}.subnav-toggler:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=subnav.js.map

package/react/components/Tab/tab.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([density=compact]) .tab{font-size:var(--sgds-font-size-1);padding:var(--sgds-spacer-3) var(--sgds-spacer-5)}:host(:not([active])) .tab{cursor:pointer}:host([variant=solid]) .tab{background-color:var(--sgds-bg-translucent-subtle);border-radius:var(--sgds-border-radius-md)}:host([variant=solid][active]) .tab{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus,:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}:host([variant=solid]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent)}:host([disabled]) .tab{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=underlined][active]) .tab{color:var(--sgds-primary-color-default)}:host([variant=underlined][orientation=vertical]) .tab{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=vertical][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:0;content:"";height:100%;position:absolute;right:-1px;width:var(--sgds-border-width-4)}:host([variant=underlined][orientation=horizontal]) .tab{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=horizontal][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:-1px;content:"";height:var(--sgds-border-width-4);left:0;position:absolute;width:100%}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus,:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}:host([variant=underlined]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent-subtle)}.tab{align-items:center;color:var(--sgds-color-default);display:flex;gap:var(--sgds-spacer-3);padding:var(--sgds-spacer-4) var(--sgds-spacer-5);position:relative}.tab:focus,.tab:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
+var css_248z = lit.css`:host([density=compact]) .tab{font-size:var(--sgds-font-size-1);padding:var(--sgds-spacer-3) var(--sgds-spacer-5)}:host(:not([active])) .tab{cursor:pointer}:host([variant=solid]) .tab{background-color:var(--sgds-bg-translucent-subtle);border-radius:var(--sgds-border-radius-md)}:host([variant=solid][active]) .tab{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus,:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent);outline:0}:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}:host([variant=solid]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent)}:host([disabled]) .tab{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=underlined][active]) .tab{color:var(--sgds-primary-color-default)}:host([variant=underlined][orientation=vertical]) .tab{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=vertical][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:0;content:"";height:100%;position:absolute;right:-1px;width:var(--sgds-border-width-4)}:host([variant=underlined][orientation=horizontal]) .tab{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=horizontal][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:-1px;content:"";height:var(--sgds-border-width-4);left:0;position:absolute;width:100%}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus,:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent-subtle);outline:0}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}:host([variant=underlined]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent-subtle)}.tab{align-items:center;color:var(--sgds-color-default);display:flex;gap:var(--sgds-spacer-3);padding:var(--sgds-spacer-4) var(--sgds-spacer-5);position:relative}.tab:focus,.tab:focus-visible{outline:0}.tab:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=tab.cjs.js.map

package/react/components/Tab/tab.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([density=compact]) .tab{font-size:var(--sgds-font-size-1);padding:var(--sgds-spacer-3) var(--sgds-spacer-5)}:host(:not([active])) .tab{cursor:pointer}:host([variant=solid]) .tab{background-color:var(--sgds-bg-translucent-subtle);border-radius:var(--sgds-border-radius-md)}:host([variant=solid][active]) .tab{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus,:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}:host([variant=solid]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent)}:host([disabled]) .tab{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=underlined][active]) .tab{color:var(--sgds-primary-color-default)}:host([variant=underlined][orientation=vertical]) .tab{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=vertical][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:0;content:"";height:100%;position:absolute;right:-1px;width:var(--sgds-border-width-4)}:host([variant=underlined][orientation=horizontal]) .tab{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=horizontal][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:-1px;content:"";height:var(--sgds-border-width-4);left:0;position:absolute;width:100%}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus,:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:var(--sgds-box-shadow-focus);outline:0}:host([variant=underlined]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent-subtle)}.tab{align-items:center;color:var(--sgds-color-default);display:flex;gap:var(--sgds-spacer-3);padding:var(--sgds-spacer-4) var(--sgds-spacer-5);position:relative}.tab:focus,.tab:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
+var css_248z = css`:host([density=compact]) .tab{font-size:var(--sgds-font-size-1);padding:var(--sgds-spacer-3) var(--sgds-spacer-5)}:host(:not([active])) .tab{cursor:pointer}:host([variant=solid]) .tab{background-color:var(--sgds-bg-translucent-subtle);border-radius:var(--sgds-border-radius-md)}:host([variant=solid][active]) .tab{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus,:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent);outline:0}:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}:host([variant=solid]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent)}:host([disabled]) .tab{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=underlined][active]) .tab{color:var(--sgds-primary-color-default)}:host([variant=underlined][orientation=vertical]) .tab{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=vertical][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:0;content:"";height:100%;position:absolute;right:-1px;width:var(--sgds-border-width-4)}:host([variant=underlined][orientation=horizontal]) .tab{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=horizontal][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:-1px;content:"";height:var(--sgds-border-width-4);left:0;position:absolute;width:100%}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus,:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent-subtle);outline:0}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}:host([variant=underlined]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent-subtle)}.tab{align-items:center;color:var(--sgds-color-default);display:flex;gap:var(--sgds-spacer-3);padding:var(--sgds-spacer-4) var(--sgds-spacer-5);position:relative}.tab:focus,.tab:focus-visible{outline:0}.tab:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
 
 export { css_248z as default };
 //# sourceMappingURL=tab.js.map

package/react/internals/CloseButton/close-button.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+var css_248z = lit.css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);outline:0}.btn-close:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=close-button.cjs.js.map

package/react/internals/CloseButton/close-button.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);outline:0}.btn-close:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=close-button.js.map

package/react/utils/validatorMixin.cjs.js

@@ -19,8 +19,10 @@ const SgdsFormValidatorMixin = (superClass) => {
             this._isTouched = false;
         }
         connectedCallback() {
+            var _a;
             super.connectedCallback();
-            this.inputValidationController = new inputValidationController.InputValidationController(this);
+            /** Idempotency guarantee */
+            (_a = this.inputValidationController) !== null && _a !== void 0 ? _a : (this.inputValidationController = new inputValidationController.InputValidationController(this));
         }
         async firstUpdated(changedProperties) {
             super.firstUpdated(changedProperties);

package/react/utils/validatorMixin.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.cjs.js","sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      this.inputValidationController = new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset\n     * 2. invalid reactive prop is updated after the reset\n     * 3. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check\n     * 4. Reset touched state to false for a pristine form\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this.inputValidationController.validateInput(input);\n      this._isTouched ? (this._isTouched = false) : null;\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      this.inputValidationController.setFormValue();\n    }\n    _mixinCheckValidity(): boolean {\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this.inputValidationController.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this.inputValidationController.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n}\n"],"names":["InputValidationController","__decorate","queryAsync"],"mappings":"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"}
+{"version":3,"file":"validatorMixin.cjs.js","sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      /** Idempotency guarantee */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset\n     * 2. invalid reactive prop is updated after the reset\n     * 3. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check\n     * 4. Reset touched state to false for a pristine form\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this.inputValidationController.validateInput(input);\n      this._isTouched ? (this._isTouched = false) : null;\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      this.inputValidationController.setFormValue();\n    }\n    _mixinCheckValidity(): boolean {\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this.inputValidationController.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this.inputValidationController.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n}\n"],"names":["InputValidationController","__decorate","queryAsync"],"mappings":"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"}

package/react/utils/validatorMixin.js

@@ -15,8 +15,10 @@ const SgdsFormValidatorMixin = (superClass) => {
             this._isTouched = false;
         }
         connectedCallback() {
+            var _a;
             super.connectedCallback();
-            this.inputValidationController = new InputValidationController(this);
+            /** Idempotency guarantee */
+            (_a = this.inputValidationController) !== null && _a !== void 0 ? _a : (this.inputValidationController = new InputValidationController(this));
         }
         async firstUpdated(changedProperties) {
             super.firstUpdated(changedProperties);

package/react/utils/validatorMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.js","sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      this.inputValidationController = new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset\n     * 2. invalid reactive prop is updated after the reset\n     * 3. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check\n     * 4. Reset touched state to false for a pristine form\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this.inputValidationController.validateInput(input);\n      this._isTouched ? (this._isTouched = false) : null;\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      this.inputValidationController.setFormValue();\n    }\n    _mixinCheckValidity(): boolean {\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this.inputValidationController.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this.inputValidationController.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"validatorMixin.js","sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      /** Idempotency guarantee */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset\n     * 2. invalid reactive prop is updated after the reset\n     * 3. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check\n     * 4. Reset touched state to false for a pristine form\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this.inputValidationController.validateInput(input);\n      this._isTouched ? (this._isTouched = false) : null;\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      this.inputValidationController.setFormValue();\n    }\n    _mixinCheckValidity(): boolean {\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this.inputValidationController.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this.inputValidationController.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n}\n"],"names":[],"mappings":";;;;;AAQA;;;;AAIG;AACU,MAAA,sBAAsB,GAAG,CAAoC,UAAa,KAAI;IACzF,MAAM,oBAAqB,SAAQ,UAAU,CAAA;AAA7C,QAAA,WAAA,GAAA;;YAIU,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;SAsG5B;QAlGC,iBAAiB,GAAA;;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;;AAE1B,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,yBAAyB,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,IAA9B,IAAI,CAAC,yBAAyB,GAAK,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAC,CAAA;SACxE;QACD,MAAM,YAAY,CAAC,iBAAiB,EAAA;AAClC,YAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;;AAGtC,YAAA,IAAI,CAAC,KAAK;AACR,gBAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC;AACtC,qBAAC,MAAM,IAAI,CAAC,SAAS,CAAC;AACtB,oBAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC;AACzC,qBAAC,MAAM,IAAI,CAAC,mBAAmB,CAAC,CAAC;AACnC,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjC;AAED;;AAEG;QACH,iBAAiB,GAAA;AACf,YAAA,IAAI,IAAI,CAAC,sBAAsB,EAAE;gBAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;aAC/B;iBAAM;AACL,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACtC;YACD,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;AACD;;;AAGG;AAEH;;;;AAIG;AACH,QAAA,kBAAkB,CAAC,CAAQ,EAAA;YACzB,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC1B,YAAA,IAAI,CAAC,yBAAyB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;SAChD;AACD;;;;AAIG;AACH,QAAA,uBAAuB,CAAC,CAAQ,EAAA;YAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC1B,YAAA,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SAC/C;AACD;;;;;;;AAOG;AACH,QAAA,mBAAmB,CAAC,KAAyD,EAAA;AAC3E,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,EAAE,CAAC;AAC/C,YAAA,IAAI,CAAC,yBAAyB,CAAC,kBAAkB,EAAE,CAAC;AACpD,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AACpD,YAAA,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,GAAG,KAAK,IAAI,IAAI,CAAC;SACpD;AAED,QAAA,cAAc,CAAC,KAAyD,EAAA;AACtE,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SACrD;QACD,kBAAkB,GAAA;AAChB,YAAA,IAAI,CAAC,yBAAyB,CAAC,YAAY,EAAE,CAAC;SAC/C;QACD,mBAAmB,GAAA;AACjB,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,aAAa,EAAE,CAAC;SACvD;QACD,oBAAoB,GAAA;AAClB,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,cAAc,EAAE,CAAC;SACxD;QACD,iBAAiB,GAAA;AACf,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC;SAChD;QACD,0BAA0B,GAAA;AACxB,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,iBAAiB,CAAC;SACzD;AACD,QAAA,iBAAiB,CAAC,KAA0B,EAAE,OAAgB,EAAE,MAAoB,EAAA;AAClF,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;SAC3E;;IA9FM,oBAAc,CAAA,cAAA,GAAG,IAAH,CAAQ;AAIH,IAAA,UAAA,CAAA;QAAzB,UAAU,CAAC,YAAY,CAAC;AAA+B,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AACnB,IAAA,UAAA,CAAA;QAApC,UAAU,CAAC,uBAAuB,CAAC;AAAyC,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAsG/E,IAAA,OAAO,oBAAsE,CAAC;AAChF;;;;"}

package/utils/validatorMixin.js

@@ -14,8 +14,10 @@ const SgdsFormValidatorMixin = (superClass) => {
             this._isTouched = false;
         }
         connectedCallback() {
+            var _a;
             super.connectedCallback();
-            this.inputValidationController = new InputValidationController(this);
+            /** Idempotency guarantee */
+            (_a = this.inputValidationController) !== null && _a !== void 0 ? _a : (this.inputValidationController = new InputValidationController(this));
         }
         async firstUpdated(changedProperties) {
             super.firstUpdated(changedProperties);