@govtechsg/sgds-web-component 3.28.1-rc.0 → 3.29.1-rc.0

package/react/components/Breadcrumb/sgds-breadcrumb.cjs.js

@@ -63,11 +63,11 @@ var SgdsBreadcrumb = class extends require_sgds_element.default {
 	}
 	render() {
 		return lit_static_html_js.html`
-      <div aria-label=${(0, lit_directives_if_defined_js.ifDefined)(this.ariaLabel)}>
+      <nav aria-label=${(0, lit_directives_if_defined_js.ifDefined)(this.ariaLabel)}>
         <div class="breadcrumb">
           <slot @slotchange=${this._handleSlotChange}></slot>
         </div>
-      </div>
+      </nav>
     `;
 	}
 };

package/react/components/Breadcrumb/sgds-breadcrumb.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-breadcrumb.cjs.js","names":["SgdsElement","breadcrumbStyle","SgdsOverflowMenu","ifDefined","property","query"],"sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsOverflowMenu from \"../OverflowMenu/sgds-overflow-menu\";\nimport breadcrumbStyle from \"./breadcrumb.css\";\nimport type SgdsBreadcrumbItem from \"./sgds-breadcrumb-item\";\n/**\n * @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.\n *\n * @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.\n *\n */\nexport class SgdsBreadcrumb extends SgdsElement {\n  static styles = [...SgdsElement.styles, breadcrumbStyle];\n  static dependencies = {\n    \"sgds-overflow-menu\": SgdsOverflowMenu\n  };\n  /** The aria-label of nav element within breadcrumb component. */\n  @property({ type: String }) ariaLabel = \"breadcrumb\";\n\n  /**@internal */\n  @query(\"slot\") defaultSlot: HTMLSlotElement;\n  /**\n   * creates `<sgds-breadcrumb-item>\n   *            <sgds-overflow-menu>\n   *              <sgds-dropdown-item></sgds-dropdown-item>\n   *               ...\n   *            </sgds-overflow-menu>\n   *          <sgds-breadcrumb-item>`\n   */\n  private _replaceExcessItemsWithDropdown(items: SgdsBreadcrumbItem[]) {\n    const breadcrumbItem = document.createElement(\"sgds-breadcrumb-item\");\n    const overflowMenu = document.createElement(\"sgds-overflow-menu\");\n    overflowMenu.setAttribute(\"aria-haspopup\", \"menu\");\n    overflowMenu.setAttribute(\"size\", \"sm\");\n    const mapItems = items.filter((item, index) => {\n      if (index > 0 && index < items.length - 2) {\n        const clonedAnchor = item.querySelector(\"a\");\n        const clonedAnchorNode = clonedAnchor.cloneNode(true);\n        const dropdownItem = document.createElement(\"sgds-dropdown-item\");\n        dropdownItem.appendChild(clonedAnchorNode);\n        overflowMenu.appendChild(dropdownItem);\n        return;\n      } else {\n        return item;\n      }\n    });\n    breadcrumbItem.classList.add(\"overflow-menu\");\n    breadcrumbItem.appendChild(overflowMenu);\n    mapItems.splice(1, 0, breadcrumbItem);\n\n    this.defaultSlot.replaceWith(...mapItems);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(\n        (item: SgdsBreadcrumbItem) => item.tagName.toLowerCase() === \"sgds-breadcrumb-item\"\n      ) as SgdsBreadcrumbItem[];\n    items.forEach((item, index) => {\n      if (index === items.length - 1) {\n        item.setAttribute(\"aria-current\", \"page\");\n        item.active = true;\n      } else {\n        item.removeAttribute(\"aria-current\");\n      }\n    });\n\n    if (items.length >= 5) {\n      this._replaceExcessItemsWithDropdown(items);\n    }\n  }\n\n  render() {\n    return html`\n      <div aria-label=${ifDefined(this.ariaLabel)}>\n        <div class=\"breadcrumb\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAa,iBAAb,cAAoCA,qBAAAA,QAAY;;;EAMN,KAAA,YAAA;;;EALxB,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,mBAAAA,OAAe;;;EACjC,KAAA,eAAA,EACpB,sBAAsBC,2BAAAA,iBACxB;;;;;;;;;;CAcA,gCAAwC,OAA6B;EACnE,MAAM,iBAAiB,SAAS,cAAc,sBAAsB;EACpE,MAAM,eAAe,SAAS,cAAc,oBAAoB;EAChE,aAAa,aAAa,iBAAiB,MAAM;EACjD,aAAa,aAAa,QAAQ,IAAI;EACtC,MAAM,WAAW,MAAM,QAAQ,MAAM,UAAU;GAC7C,IAAI,QAAQ,KAAK,QAAQ,MAAM,SAAS,GAAG;IAEzC,MAAM,mBADe,KAAK,cAAc,GACJ,CAAC,CAAC,UAAU,IAAI;IACpD,MAAM,eAAe,SAAS,cAAc,oBAAoB;IAChE,aAAa,YAAY,gBAAgB;IACzC,aAAa,YAAY,YAAY;IACrC;GACF,OACE,OAAO;EAEX,CAAC;EACD,eAAe,UAAU,IAAI,eAAe;EAC5C,eAAe,YAAY,YAAY;EACvC,SAAS,OAAO,GAAG,GAAG,cAAc;EAEpC,KAAK,YAAY,YAAY,GAAG,QAAQ;CAC1C;CAEA,kBAA0B,GAAU;EAClC,MAAM,QAAS,EAAE,OACd,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QACE,SAA6B,KAAK,QAAQ,YAAY,MAAM,sBAC/D;EACF,MAAM,SAAS,MAAM,UAAU;GAC7B,IAAI,UAAU,MAAM,SAAS,GAAG;IAC9B,KAAK,aAAa,gBAAgB,MAAM;IACxC,KAAK,SAAS;GAChB,OACE,KAAK,gBAAgB,cAAc;EAEvC,CAAC;EAED,IAAI,MAAM,UAAU,GAClB,KAAK,gCAAgC,KAAK;CAE9C;CAEA,SAAS;EACP,OAAO,mBAAA,IAAI;yBACSC,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,SAAS,EAAE;;8BAEpB,KAAK,kBAAkB;;;;CAInD;AACF;AAjEGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,eAAA,WAAA,aAAA,KAAA,CAAA;AAGzBC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,MAAM,CAAA,GAAA,eAAA,WAAA,eAAA,KAAA,CAAA"}
+{"version":3,"file":"sgds-breadcrumb.cjs.js","names":["SgdsElement","breadcrumbStyle","SgdsOverflowMenu","ifDefined","property","query"],"sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsOverflowMenu from \"../OverflowMenu/sgds-overflow-menu\";\nimport breadcrumbStyle from \"./breadcrumb.css\";\nimport type SgdsBreadcrumbItem from \"./sgds-breadcrumb-item\";\n/**\n * @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.\n *\n * @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.\n *\n */\nexport class SgdsBreadcrumb extends SgdsElement {\n  static styles = [...SgdsElement.styles, breadcrumbStyle];\n  static dependencies = {\n    \"sgds-overflow-menu\": SgdsOverflowMenu\n  };\n  /** The aria-label of nav element within breadcrumb component. */\n  @property({ type: String }) ariaLabel = \"breadcrumb\";\n\n  /**@internal */\n  @query(\"slot\") defaultSlot: HTMLSlotElement;\n  /**\n   * creates `<sgds-breadcrumb-item>\n   *            <sgds-overflow-menu>\n   *              <sgds-dropdown-item></sgds-dropdown-item>\n   *               ...\n   *            </sgds-overflow-menu>\n   *          <sgds-breadcrumb-item>`\n   */\n  private _replaceExcessItemsWithDropdown(items: SgdsBreadcrumbItem[]) {\n    const breadcrumbItem = document.createElement(\"sgds-breadcrumb-item\");\n    const overflowMenu = document.createElement(\"sgds-overflow-menu\");\n    overflowMenu.setAttribute(\"aria-haspopup\", \"menu\");\n    overflowMenu.setAttribute(\"size\", \"sm\");\n    const mapItems = items.filter((item, index) => {\n      if (index > 0 && index < items.length - 2) {\n        const clonedAnchor = item.querySelector(\"a\");\n        const clonedAnchorNode = clonedAnchor.cloneNode(true);\n        const dropdownItem = document.createElement(\"sgds-dropdown-item\");\n        dropdownItem.appendChild(clonedAnchorNode);\n        overflowMenu.appendChild(dropdownItem);\n        return;\n      } else {\n        return item;\n      }\n    });\n    breadcrumbItem.classList.add(\"overflow-menu\");\n    breadcrumbItem.appendChild(overflowMenu);\n    mapItems.splice(1, 0, breadcrumbItem);\n\n    this.defaultSlot.replaceWith(...mapItems);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(\n        (item: SgdsBreadcrumbItem) => item.tagName.toLowerCase() === \"sgds-breadcrumb-item\"\n      ) as SgdsBreadcrumbItem[];\n    items.forEach((item, index) => {\n      if (index === items.length - 1) {\n        item.setAttribute(\"aria-current\", \"page\");\n        item.active = true;\n      } else {\n        item.removeAttribute(\"aria-current\");\n      }\n    });\n\n    if (items.length >= 5) {\n      this._replaceExcessItemsWithDropdown(items);\n    }\n  }\n\n  render() {\n    return html`\n      <nav aria-label=${ifDefined(this.ariaLabel)}>\n        <div class=\"breadcrumb\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAa,iBAAb,cAAoCA,qBAAAA,QAAY;;;EAMN,KAAA,YAAA;;;EALxB,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,mBAAAA,OAAe;;;EACjC,KAAA,eAAA,EACpB,sBAAsBC,2BAAAA,iBACxB;;;;;;;;;;CAcA,gCAAwC,OAA6B;EACnE,MAAM,iBAAiB,SAAS,cAAc,sBAAsB;EACpE,MAAM,eAAe,SAAS,cAAc,oBAAoB;EAChE,aAAa,aAAa,iBAAiB,MAAM;EACjD,aAAa,aAAa,QAAQ,IAAI;EACtC,MAAM,WAAW,MAAM,QAAQ,MAAM,UAAU;GAC7C,IAAI,QAAQ,KAAK,QAAQ,MAAM,SAAS,GAAG;IAEzC,MAAM,mBADe,KAAK,cAAc,GACJ,CAAC,CAAC,UAAU,IAAI;IACpD,MAAM,eAAe,SAAS,cAAc,oBAAoB;IAChE,aAAa,YAAY,gBAAgB;IACzC,aAAa,YAAY,YAAY;IACrC;GACF,OACE,OAAO;EAEX,CAAC;EACD,eAAe,UAAU,IAAI,eAAe;EAC5C,eAAe,YAAY,YAAY;EACvC,SAAS,OAAO,GAAG,GAAG,cAAc;EAEpC,KAAK,YAAY,YAAY,GAAG,QAAQ;CAC1C;CAEA,kBAA0B,GAAU;EAClC,MAAM,QAAS,EAAE,OACd,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QACE,SAA6B,KAAK,QAAQ,YAAY,MAAM,sBAC/D;EACF,MAAM,SAAS,MAAM,UAAU;GAC7B,IAAI,UAAU,MAAM,SAAS,GAAG;IAC9B,KAAK,aAAa,gBAAgB,MAAM;IACxC,KAAK,SAAS;GAChB,OACE,KAAK,gBAAgB,cAAc;EAEvC,CAAC;EAED,IAAI,MAAM,UAAU,GAClB,KAAK,gCAAgC,KAAK;CAE9C;CAEA,SAAS;EACP,OAAO,mBAAA,IAAI;yBACSC,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,SAAS,EAAE;;8BAEpB,KAAK,kBAAkB;;;;CAInD;AACF;AAjEGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,eAAA,WAAA,aAAA,KAAA,CAAA;AAGzBC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,MAAM,CAAA,GAAA,eAAA,WAAA,eAAA,KAAA,CAAA"}

package/react/components/Breadcrumb/sgds-breadcrumb.js

@@ -63,11 +63,11 @@ var SgdsBreadcrumb = class extends SgdsElement {
 	}
 	render() {
 		return html`
-      <div aria-label=${ifDefined(this.ariaLabel)}>
+      <nav aria-label=${ifDefined(this.ariaLabel)}>
         <div class="breadcrumb">
           <slot @slotchange=${this._handleSlotChange}></slot>
         </div>
-      </div>
+      </nav>
     `;
 	}
 };

package/react/components/Breadcrumb/sgds-breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-breadcrumb.js","names":["breadcrumbStyle"],"sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsOverflowMenu from \"../OverflowMenu/sgds-overflow-menu\";\nimport breadcrumbStyle from \"./breadcrumb.css\";\nimport type SgdsBreadcrumbItem from \"./sgds-breadcrumb-item\";\n/**\n * @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.\n *\n * @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.\n *\n */\nexport class SgdsBreadcrumb extends SgdsElement {\n  static styles = [...SgdsElement.styles, breadcrumbStyle];\n  static dependencies = {\n    \"sgds-overflow-menu\": SgdsOverflowMenu\n  };\n  /** The aria-label of nav element within breadcrumb component. */\n  @property({ type: String }) ariaLabel = \"breadcrumb\";\n\n  /**@internal */\n  @query(\"slot\") defaultSlot: HTMLSlotElement;\n  /**\n   * creates `<sgds-breadcrumb-item>\n   *            <sgds-overflow-menu>\n   *              <sgds-dropdown-item></sgds-dropdown-item>\n   *               ...\n   *            </sgds-overflow-menu>\n   *          <sgds-breadcrumb-item>`\n   */\n  private _replaceExcessItemsWithDropdown(items: SgdsBreadcrumbItem[]) {\n    const breadcrumbItem = document.createElement(\"sgds-breadcrumb-item\");\n    const overflowMenu = document.createElement(\"sgds-overflow-menu\");\n    overflowMenu.setAttribute(\"aria-haspopup\", \"menu\");\n    overflowMenu.setAttribute(\"size\", \"sm\");\n    const mapItems = items.filter((item, index) => {\n      if (index > 0 && index < items.length - 2) {\n        const clonedAnchor = item.querySelector(\"a\");\n        const clonedAnchorNode = clonedAnchor.cloneNode(true);\n        const dropdownItem = document.createElement(\"sgds-dropdown-item\");\n        dropdownItem.appendChild(clonedAnchorNode);\n        overflowMenu.appendChild(dropdownItem);\n        return;\n      } else {\n        return item;\n      }\n    });\n    breadcrumbItem.classList.add(\"overflow-menu\");\n    breadcrumbItem.appendChild(overflowMenu);\n    mapItems.splice(1, 0, breadcrumbItem);\n\n    this.defaultSlot.replaceWith(...mapItems);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(\n        (item: SgdsBreadcrumbItem) => item.tagName.toLowerCase() === \"sgds-breadcrumb-item\"\n      ) as SgdsBreadcrumbItem[];\n    items.forEach((item, index) => {\n      if (index === items.length - 1) {\n        item.setAttribute(\"aria-current\", \"page\");\n        item.active = true;\n      } else {\n        item.removeAttribute(\"aria-current\");\n      }\n    });\n\n    if (items.length >= 5) {\n      this._replaceExcessItemsWithDropdown(items);\n    }\n  }\n\n  render() {\n    return html`\n      <div aria-label=${ifDefined(this.ariaLabel)}>\n        <div class=\"breadcrumb\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAa,iBAAb,cAAoC,YAAY;;;EAMN,KAAA,YAAA;;;EALxB,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAe;;;EACjC,KAAA,eAAA,EACpB,sBAAsB,iBACxB;;;;;;;;;;CAcA,gCAAwC,OAA6B;EACnE,MAAM,iBAAiB,SAAS,cAAc,sBAAsB;EACpE,MAAM,eAAe,SAAS,cAAc,oBAAoB;EAChE,aAAa,aAAa,iBAAiB,MAAM;EACjD,aAAa,aAAa,QAAQ,IAAI;EACtC,MAAM,WAAW,MAAM,QAAQ,MAAM,UAAU;GAC7C,IAAI,QAAQ,KAAK,QAAQ,MAAM,SAAS,GAAG;IAEzC,MAAM,mBADe,KAAK,cAAc,GACJ,CAAC,CAAC,UAAU,IAAI;IACpD,MAAM,eAAe,SAAS,cAAc,oBAAoB;IAChE,aAAa,YAAY,gBAAgB;IACzC,aAAa,YAAY,YAAY;IACrC;GACF,OACE,OAAO;EAEX,CAAC;EACD,eAAe,UAAU,IAAI,eAAe;EAC5C,eAAe,YAAY,YAAY;EACvC,SAAS,OAAO,GAAG,GAAG,cAAc;EAEpC,KAAK,YAAY,YAAY,GAAG,QAAQ;CAC1C;CAEA,kBAA0B,GAAU;EAClC,MAAM,QAAS,EAAE,OACd,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QACE,SAA6B,KAAK,QAAQ,YAAY,MAAM,sBAC/D;EACF,MAAM,SAAS,MAAM,UAAU;GAC7B,IAAI,UAAU,MAAM,SAAS,GAAG;IAC9B,KAAK,aAAa,gBAAgB,MAAM;IACxC,KAAK,SAAS;GAChB,OACE,KAAK,gBAAgB,cAAc;EAEvC,CAAC;EAED,IAAI,MAAM,UAAU,GAClB,KAAK,gCAAgC,KAAK;CAE9C;CAEA,SAAS;EACP,OAAO,IAAI;wBACS,UAAU,KAAK,SAAS,EAAE;;8BAEpB,KAAK,kBAAkB;;;;CAInD;AACF;AAjEG,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,eAAA,WAAA,aAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,MAAM,MAAM,CAAA,GAAA,eAAA,WAAA,eAAA,KAAA,CAAA"}
+{"version":3,"file":"sgds-breadcrumb.js","names":["breadcrumbStyle"],"sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsOverflowMenu from \"../OverflowMenu/sgds-overflow-menu\";\nimport breadcrumbStyle from \"./breadcrumb.css\";\nimport type SgdsBreadcrumbItem from \"./sgds-breadcrumb-item\";\n/**\n * @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.\n *\n * @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.\n *\n */\nexport class SgdsBreadcrumb extends SgdsElement {\n  static styles = [...SgdsElement.styles, breadcrumbStyle];\n  static dependencies = {\n    \"sgds-overflow-menu\": SgdsOverflowMenu\n  };\n  /** The aria-label of nav element within breadcrumb component. */\n  @property({ type: String }) ariaLabel = \"breadcrumb\";\n\n  /**@internal */\n  @query(\"slot\") defaultSlot: HTMLSlotElement;\n  /**\n   * creates `<sgds-breadcrumb-item>\n   *            <sgds-overflow-menu>\n   *              <sgds-dropdown-item></sgds-dropdown-item>\n   *               ...\n   *            </sgds-overflow-menu>\n   *          <sgds-breadcrumb-item>`\n   */\n  private _replaceExcessItemsWithDropdown(items: SgdsBreadcrumbItem[]) {\n    const breadcrumbItem = document.createElement(\"sgds-breadcrumb-item\");\n    const overflowMenu = document.createElement(\"sgds-overflow-menu\");\n    overflowMenu.setAttribute(\"aria-haspopup\", \"menu\");\n    overflowMenu.setAttribute(\"size\", \"sm\");\n    const mapItems = items.filter((item, index) => {\n      if (index > 0 && index < items.length - 2) {\n        const clonedAnchor = item.querySelector(\"a\");\n        const clonedAnchorNode = clonedAnchor.cloneNode(true);\n        const dropdownItem = document.createElement(\"sgds-dropdown-item\");\n        dropdownItem.appendChild(clonedAnchorNode);\n        overflowMenu.appendChild(dropdownItem);\n        return;\n      } else {\n        return item;\n      }\n    });\n    breadcrumbItem.classList.add(\"overflow-menu\");\n    breadcrumbItem.appendChild(overflowMenu);\n    mapItems.splice(1, 0, breadcrumbItem);\n\n    this.defaultSlot.replaceWith(...mapItems);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(\n        (item: SgdsBreadcrumbItem) => item.tagName.toLowerCase() === \"sgds-breadcrumb-item\"\n      ) as SgdsBreadcrumbItem[];\n    items.forEach((item, index) => {\n      if (index === items.length - 1) {\n        item.setAttribute(\"aria-current\", \"page\");\n        item.active = true;\n      } else {\n        item.removeAttribute(\"aria-current\");\n      }\n    });\n\n    if (items.length >= 5) {\n      this._replaceExcessItemsWithDropdown(items);\n    }\n  }\n\n  render() {\n    return html`\n      <nav aria-label=${ifDefined(this.ariaLabel)}>\n        <div class=\"breadcrumb\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAa,iBAAb,cAAoC,YAAY;;;EAMN,KAAA,YAAA;;;EALxB,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAe;;;EACjC,KAAA,eAAA,EACpB,sBAAsB,iBACxB;;;;;;;;;;CAcA,gCAAwC,OAA6B;EACnE,MAAM,iBAAiB,SAAS,cAAc,sBAAsB;EACpE,MAAM,eAAe,SAAS,cAAc,oBAAoB;EAChE,aAAa,aAAa,iBAAiB,MAAM;EACjD,aAAa,aAAa,QAAQ,IAAI;EACtC,MAAM,WAAW,MAAM,QAAQ,MAAM,UAAU;GAC7C,IAAI,QAAQ,KAAK,QAAQ,MAAM,SAAS,GAAG;IAEzC,MAAM,mBADe,KAAK,cAAc,GACJ,CAAC,CAAC,UAAU,IAAI;IACpD,MAAM,eAAe,SAAS,cAAc,oBAAoB;IAChE,aAAa,YAAY,gBAAgB;IACzC,aAAa,YAAY,YAAY;IACrC;GACF,OACE,OAAO;EAEX,CAAC;EACD,eAAe,UAAU,IAAI,eAAe;EAC5C,eAAe,YAAY,YAAY;EACvC,SAAS,OAAO,GAAG,GAAG,cAAc;EAEpC,KAAK,YAAY,YAAY,GAAG,QAAQ;CAC1C;CAEA,kBAA0B,GAAU;EAClC,MAAM,QAAS,EAAE,OACd,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QACE,SAA6B,KAAK,QAAQ,YAAY,MAAM,sBAC/D;EACF,MAAM,SAAS,MAAM,UAAU;GAC7B,IAAI,UAAU,MAAM,SAAS,GAAG;IAC9B,KAAK,aAAa,gBAAgB,MAAM;IACxC,KAAK,SAAS;GAChB,OACE,KAAK,gBAAgB,cAAc;EAEvC,CAAC;EAED,IAAI,MAAM,UAAU,GAClB,KAAK,gCAAgC,KAAK;CAE9C;CAEA,SAAS;EACP,OAAO,IAAI;wBACS,UAAU,KAAK,SAAS,EAAE;;8BAEpB,KAAK,kBAAkB;;;;CAInD;AACF;AAjEG,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,eAAA,WAAA,aAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,MAAM,MAAM,CAAA,GAAA,eAAA,WAAA,eAAA,KAAA,CAAA"}

package/react/components/Button/sgds-button.cjs.js

@@ -99,7 +99,7 @@ var SgdsButton = class extends require_button_element.default {
                size=${(0, lit_directives_if_defined_js.ifDefined)(this._assignSpinnerSize(this.size))}
                tone=${(0, lit_directives_if_defined_js.ifDefined)(this._assignSpinnerTone(this.tone, this.variant))}
              ></sgds-spinner>` : lit_static_html_js.html`<slot name="leftIcon"></slot>
-               <span><slot></slot></span>
+               <span role="presentation"><slot></slot></span>
                <slot name="rightIcon"></slot>`}
       
       </${tag}>

package/react/components/Button/sgds-button.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-button.cjs.js","names":["ButtonElement","FormSubmitController","HasSlotController","anchorStyles","buttonStyles","classMap","ifDefined","sanitizeHref","property"],"sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport ButtonElement from \"../../base/button-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { FormSubmitController } from \"../../utils/formSubmitController\";\nimport anchorStyles from \"../../styles/anchor.css\";\nimport buttonStyles from \"./button.css\";\n\nexport type ButtonVariant = \"primary\" | \"outline\" | \"ghost\" | \"danger\";\n\n/**\n * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.\n *\n * @slot default - The button's label.\n * @slot leftIcon - The slot for icon to the left of the button text\n * @slot rightIcon - The slot for icon to the right of the button text\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n *\n *\n */\nexport class SgdsButton extends ButtonElement {\n  static styles = [...ButtonElement.styles, anchorStyles, buttonStyles];\n\n  /** @internal */\n  private readonly formSubmitController = new FormSubmitController(this, {\n    form: (input: HTMLInputElement) => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute(\"form\")) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute(\"form\");\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest(\"form\");\n    }\n  });\n  /** The name of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** The value of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */\n  @property({ type: String, reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property({ type: String, reflect: true }) form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formaction\" }) formAction: string;\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ type: String, reflect: true, attribute: \"formmethod\" }) formMethod: \"post\" | \"get\";\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: \"formnovalidate\", type: Boolean, reflect: true })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formtarget\" }) formTarget:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string;\n\n  /** When set, the button will be in full width. */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  /** Used only for SSR to indicate the presence of the `leftIcon` slot. */\n  @property({ type: Boolean }) hasLeftIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `rightIcon` slot. */\n  @property({ type: Boolean }) hasRightIconSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"leftIcon\", \"rightIcon\");\n\n  updated() {\n    if (!this.hasLeftIconSlot) this.hasLeftIconSlot = this.hasSlotController.test(\"leftIcon\");\n    if (!this.hasRightIconSlot) this.hasRightIconSlot = this.hasSlotController.test(\"rightIcon\");\n  }\n\n  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    if (this.type === \"submit\") {\n      this.formSubmitController.submit(this);\n    }\n    if (this.type === \"reset\") {\n      this.formSubmitController.reset(this);\n    }\n  };\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    const noIcon = !this.hasLeftIconSlot && !this.hasRightIconSlot;\n\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"has-left-icon\": this.hasLeftIconSlot,\n          \"has-right-icon\": this.hasRightIconSlot,\n          \"no-icon\": noIcon,\n          loading: this.loading\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        name=${ifDefined(isLink ? undefined : this.name)}\n        value=${ifDefined(isLink ? undefined : this.value)}\n        href=${ifDefined(isLink ? sanitizeHref(this.href) : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n        role=${ifDefined(isLink ? \"button\" : undefined)}\n        aria-disabled=${this.disabled || this.loading ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeydown}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.loading ? \"Loading\" : this.ariaLabel)}\n      >\n       ${\n         this.loading\n           ? html`<sgds-spinner\n               size=${ifDefined(this._assignSpinnerSize(this.size))}\n               tone=${ifDefined(this._assignSpinnerTone(this.tone, this.variant))}\n             ></sgds-spinner>`\n           : html`<slot name=\"leftIcon\"></slot>\n               <span><slot></slot></span>\n               <slot name=\"rightIcon\"></slot>`\n       }\n      \n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-button.cjs.js","names":["ButtonElement","FormSubmitController","HasSlotController","anchorStyles","buttonStyles","classMap","ifDefined","sanitizeHref","property"],"sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport ButtonElement from \"../../base/button-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { FormSubmitController } from \"../../utils/formSubmitController\";\nimport anchorStyles from \"../../styles/anchor.css\";\nimport buttonStyles from \"./button.css\";\n\nexport type ButtonVariant = \"primary\" | \"outline\" | \"ghost\" | \"danger\";\n\n/**\n * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.\n *\n * @slot default - The button's label.\n * @slot leftIcon - The slot for icon to the left of the button text\n * @slot rightIcon - The slot for icon to the right of the button text\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n *\n *\n */\nexport class SgdsButton extends ButtonElement {\n  static styles = [...ButtonElement.styles, anchorStyles, buttonStyles];\n\n  /** @internal */\n  private readonly formSubmitController = new FormSubmitController(this, {\n    form: (input: HTMLInputElement) => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute(\"form\")) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute(\"form\");\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest(\"form\");\n    }\n  });\n  /** The name of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** The value of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */\n  @property({ type: String, reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property({ type: String, reflect: true }) form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formaction\" }) formAction: string;\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ type: String, reflect: true, attribute: \"formmethod\" }) formMethod: \"post\" | \"get\";\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: \"formnovalidate\", type: Boolean, reflect: true })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formtarget\" }) formTarget:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string;\n\n  /** When set, the button will be in full width. */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  /** Used only for SSR to indicate the presence of the `leftIcon` slot. */\n  @property({ type: Boolean }) hasLeftIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `rightIcon` slot. */\n  @property({ type: Boolean }) hasRightIconSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"leftIcon\", \"rightIcon\");\n\n  updated() {\n    if (!this.hasLeftIconSlot) this.hasLeftIconSlot = this.hasSlotController.test(\"leftIcon\");\n    if (!this.hasRightIconSlot) this.hasRightIconSlot = this.hasSlotController.test(\"rightIcon\");\n  }\n\n  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    if (this.type === \"submit\") {\n      this.formSubmitController.submit(this);\n    }\n    if (this.type === \"reset\") {\n      this.formSubmitController.reset(this);\n    }\n  };\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    const noIcon = !this.hasLeftIconSlot && !this.hasRightIconSlot;\n\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"has-left-icon\": this.hasLeftIconSlot,\n          \"has-right-icon\": this.hasRightIconSlot,\n          \"no-icon\": noIcon,\n          loading: this.loading\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        name=${ifDefined(isLink ? undefined : this.name)}\n        value=${ifDefined(isLink ? undefined : this.value)}\n        href=${ifDefined(isLink ? sanitizeHref(this.href) : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n        role=${ifDefined(isLink ? \"button\" : undefined)}\n        aria-disabled=${this.disabled || this.loading ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeydown}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.loading ? \"Loading\" : this.ariaLabel)}\n      >\n       ${\n         this.loading\n           ? html`<sgds-spinner\n               size=${ifDefined(this._assignSpinnerSize(this.size))}\n               tone=${ifDefined(this._assignSpinnerTone(this.tone, this.variant))}\n             ></sgds-spinner>`\n           : html`<slot name=\"leftIcon\"></slot>\n               <span role=\"presentation\"><slot></slot></span>\n               <slot name=\"rightIcon\"></slot>`\n       }\n      \n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"mappings":"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"}

package/react/components/Button/sgds-button.js

@@ -99,7 +99,7 @@ var SgdsButton = class extends ButtonElement {
                size=${ifDefined(this._assignSpinnerSize(this.size))}
                tone=${ifDefined(this._assignSpinnerTone(this.tone, this.variant))}
              ></sgds-spinner>` : html`<slot name="leftIcon"></slot>
-               <span><slot></slot></span>
+               <span role="presentation"><slot></slot></span>
                <slot name="rightIcon"></slot>`}
       
       </${tag}>

package/react/components/Button/sgds-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-button.js","names":["anchorStyles","buttonStyles"],"sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport ButtonElement from \"../../base/button-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { FormSubmitController } from \"../../utils/formSubmitController\";\nimport anchorStyles from \"../../styles/anchor.css\";\nimport buttonStyles from \"./button.css\";\n\nexport type ButtonVariant = \"primary\" | \"outline\" | \"ghost\" | \"danger\";\n\n/**\n * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.\n *\n * @slot default - The button's label.\n * @slot leftIcon - The slot for icon to the left of the button text\n * @slot rightIcon - The slot for icon to the right of the button text\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n *\n *\n */\nexport class SgdsButton extends ButtonElement {\n  static styles = [...ButtonElement.styles, anchorStyles, buttonStyles];\n\n  /** @internal */\n  private readonly formSubmitController = new FormSubmitController(this, {\n    form: (input: HTMLInputElement) => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute(\"form\")) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute(\"form\");\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest(\"form\");\n    }\n  });\n  /** The name of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** The value of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */\n  @property({ type: String, reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property({ type: String, reflect: true }) form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formaction\" }) formAction: string;\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ type: String, reflect: true, attribute: \"formmethod\" }) formMethod: \"post\" | \"get\";\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: \"formnovalidate\", type: Boolean, reflect: true })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formtarget\" }) formTarget:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string;\n\n  /** When set, the button will be in full width. */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  /** Used only for SSR to indicate the presence of the `leftIcon` slot. */\n  @property({ type: Boolean }) hasLeftIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `rightIcon` slot. */\n  @property({ type: Boolean }) hasRightIconSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"leftIcon\", \"rightIcon\");\n\n  updated() {\n    if (!this.hasLeftIconSlot) this.hasLeftIconSlot = this.hasSlotController.test(\"leftIcon\");\n    if (!this.hasRightIconSlot) this.hasRightIconSlot = this.hasSlotController.test(\"rightIcon\");\n  }\n\n  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    if (this.type === \"submit\") {\n      this.formSubmitController.submit(this);\n    }\n    if (this.type === \"reset\") {\n      this.formSubmitController.reset(this);\n    }\n  };\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    const noIcon = !this.hasLeftIconSlot && !this.hasRightIconSlot;\n\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"has-left-icon\": this.hasLeftIconSlot,\n          \"has-right-icon\": this.hasRightIconSlot,\n          \"no-icon\": noIcon,\n          loading: this.loading\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        name=${ifDefined(isLink ? undefined : this.name)}\n        value=${ifDefined(isLink ? undefined : this.value)}\n        href=${ifDefined(isLink ? sanitizeHref(this.href) : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n        role=${ifDefined(isLink ? \"button\" : undefined)}\n        aria-disabled=${this.disabled || this.loading ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeydown}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.loading ? \"Loading\" : this.ariaLabel)}\n      >\n       ${\n         this.loading\n           ? html`<sgds-spinner\n               size=${ifDefined(this._assignSpinnerSize(this.size))}\n               tone=${ifDefined(this._assignSpinnerTone(this.tone, this.variant))}\n             ></sgds-spinner>`\n           : html`<slot name=\"leftIcon\"></slot>\n               <span><slot></slot></span>\n               <slot name=\"rightIcon\"></slot>`\n       }\n      \n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-button.js","names":["anchorStyles","buttonStyles"],"sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport ButtonElement from \"../../base/button-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { FormSubmitController } from \"../../utils/formSubmitController\";\nimport anchorStyles from \"../../styles/anchor.css\";\nimport buttonStyles from \"./button.css\";\n\nexport type ButtonVariant = \"primary\" | \"outline\" | \"ghost\" | \"danger\";\n\n/**\n * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.\n *\n * @slot default - The button's label.\n * @slot leftIcon - The slot for icon to the left of the button text\n * @slot rightIcon - The slot for icon to the right of the button text\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n *\n *\n */\nexport class SgdsButton extends ButtonElement {\n  static styles = [...ButtonElement.styles, anchorStyles, buttonStyles];\n\n  /** @internal */\n  private readonly formSubmitController = new FormSubmitController(this, {\n    form: (input: HTMLInputElement) => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute(\"form\")) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute(\"form\");\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest(\"form\");\n    }\n  });\n  /** The name of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** The value of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */\n  @property({ type: String, reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property({ type: String, reflect: true }) form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formaction\" }) formAction: string;\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ type: String, reflect: true, attribute: \"formmethod\" }) formMethod: \"post\" | \"get\";\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: \"formnovalidate\", type: Boolean, reflect: true })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formtarget\" }) formTarget:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string;\n\n  /** When set, the button will be in full width. */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  /** Used only for SSR to indicate the presence of the `leftIcon` slot. */\n  @property({ type: Boolean }) hasLeftIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `rightIcon` slot. */\n  @property({ type: Boolean }) hasRightIconSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"leftIcon\", \"rightIcon\");\n\n  updated() {\n    if (!this.hasLeftIconSlot) this.hasLeftIconSlot = this.hasSlotController.test(\"leftIcon\");\n    if (!this.hasRightIconSlot) this.hasRightIconSlot = this.hasSlotController.test(\"rightIcon\");\n  }\n\n  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    if (this.type === \"submit\") {\n      this.formSubmitController.submit(this);\n    }\n    if (this.type === \"reset\") {\n      this.formSubmitController.reset(this);\n    }\n  };\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    const noIcon = !this.hasLeftIconSlot && !this.hasRightIconSlot;\n\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"has-left-icon\": this.hasLeftIconSlot,\n          \"has-right-icon\": this.hasRightIconSlot,\n          \"no-icon\": noIcon,\n          loading: this.loading\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        name=${ifDefined(isLink ? undefined : this.name)}\n        value=${ifDefined(isLink ? undefined : this.value)}\n        href=${ifDefined(isLink ? sanitizeHref(this.href) : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n        role=${ifDefined(isLink ? \"button\" : undefined)}\n        aria-disabled=${this.disabled || this.loading ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeydown}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.loading ? \"Loading\" : this.ariaLabel)}\n      >\n       ${\n         this.loading\n           ? html`<sgds-spinner\n               size=${ifDefined(this._assignSpinnerSize(this.size))}\n               tone=${ifDefined(this._assignSpinnerTone(this.tone, this.variant))}\n             ></sgds-spinner>`\n           : html`<slot name=\"leftIcon\"></slot>\n               <span role=\"presentation\"><slot></slot></span>\n               <slot name=\"rightIcon\"></slot>`\n       }\n      \n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"mappings":"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"}

package/react/components/Checkbox/sgds-checkbox.cjs.js

@@ -36,6 +36,7 @@ var SgdsCheckbox = class extends require_validatorMixin.SgdsFormValidatorMixin(r
 		this.indeterminate = false;
 		this.required = false;
 		this.noValidate = false;
+		this.ariaLabel = "";
 		this.invalidFeedback = "";
 		this._isTouched = false;
 		this._handleHostClick = (e) => {
@@ -157,6 +158,7 @@ var SgdsCheckbox = class extends require_validatorMixin.SgdsFormValidatorMixin(r
           type="checkbox"
           id=${this._controlId}
           aria-invalid=${this.invalid ? "true" : "false"}
+          aria-label=${(0, lit_directives_if_defined_js.ifDefined)(this.ariaLabel || void 0)}
           name=${(0, lit_directives_if_defined_js.ifDefined)(this.name)}
           ?indeterminate=${this.indeterminate}
           ?required=${this.required}
@@ -211,6 +213,7 @@ require_decorate.default([(0, lit_decorators_js.property)({
 	type: Boolean,
 	reflect: true
 })], SgdsCheckbox.prototype, "noValidate", void 0);
+require_decorate.default([(0, lit_decorators_js.property)({ type: String })], SgdsCheckbox.prototype, "ariaLabel", void 0);
 require_decorate.default([(0, lit_decorators_js.property)({
 	type: String,
 	reflect: true

package/react/components/Checkbox/sgds-checkbox.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","HasSlotController","formCheckStyles","checkboxStyle","SgdsIcon","classMap","ifDefined","live","nothing","property","defaultValue","state","watch"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the checkbox. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        ${hasDefaultSlot\n          ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n          : nothing}\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n              </slot>\n              <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","HasSlotController","formCheckStyles","checkboxStyle","SgdsIcon","classMap","ifDefined","live","nothing","property","defaultValue","state","watch"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the checkbox. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. */\n  @property({ type: String }) ariaLabel = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          aria-label=${ifDefined(this.ariaLabel || undefined)}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        ${hasDefaultSlot\n          ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n          : nothing}\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n              </slot>\n              <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}

package/react/components/Checkbox/sgds-checkbox.js

@@ -36,6 +36,7 @@ var SgdsCheckbox = class extends SgdsFormValidatorMixin(FormControlElement) {
 		this.indeterminate = false;
 		this.required = false;
 		this.noValidate = false;
+		this.ariaLabel = "";
 		this.invalidFeedback = "";
 		this._isTouched = false;
 		this._handleHostClick = (e) => {
@@ -157,6 +158,7 @@ var SgdsCheckbox = class extends SgdsFormValidatorMixin(FormControlElement) {
           type="checkbox"
           id=${this._controlId}
           aria-invalid=${this.invalid ? "true" : "false"}
+          aria-label=${ifDefined(this.ariaLabel || void 0)}
           name=${ifDefined(this.name)}
           ?indeterminate=${this.indeterminate}
           ?required=${this.required}
@@ -211,6 +213,7 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], SgdsCheckbox.prototype, "noValidate", void 0);
+__decorate([property({ type: String })], SgdsCheckbox.prototype, "ariaLabel", void 0);
 __decorate([property({
 	type: String,
 	reflect: true

package/react/components/Checkbox/sgds-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox.js","names":["formCheckStyles","checkboxStyle"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the checkbox. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        ${hasDefaultSlot\n          ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n          : nothing}\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n              </slot>\n              <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox.js","names":["formCheckStyles","checkboxStyle"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the checkbox. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. */\n  @property({ type: String }) ariaLabel = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          aria-label=${ifDefined(this.ariaLabel || undefined)}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        ${hasDefaultSlot\n          ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n          : nothing}\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n              </slot>\n              <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/CloseButton/close-button.css
-var css_248z = require("lit").css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.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:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) .btn-close{cursor:not-allowed;opacity:var(--sgds-opacity-40);pointer-events:none}`;
+var css_248z = require("lit").css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.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:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host(:not([disabled])) .btn-close:active:after{background-color:var(--sgds-bg-translucent);border-radius:inherit;content:"";inset:0;position:absolute}:host([disabled]) .btn-close{cursor:not-allowed;opacity:var(--sgds-opacity-40);pointer-events:none}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/CloseButton/close-button.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"close-button.cjs.js","names":[],"sources":["../../../../src/components/CloseButton/close-button.css"],"sourcesContent":[":host {\n  --sgds-close-btn-border-radius: var(--sgds-border-radius-sm);\n  display: inline-flex;\n}\n\n:host([size=\"sm\"]) .btn-close {\n  width: var(--sgds-dimension-24);\n  height: var(--sgds-dimension-24);\n}\n\n:host([tone=\"fixed-light\"]) .btn-close {\n  color: var(--sgds-color-fixed-light);\n}\n\n:host([tone=\"fixed-dark\"]) .btn-close {\n  color: var(--sgds-color-fixed-dark);\n}\n\n.btn-close {\n  position: relative;\n  cursor: pointer;\n  border: 0;\n  padding: 0;\n  width: var(--sgds-dimension-32);\n  height: var(--sgds-dimension-32);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-close-btn-border-radius);\n  background-color: var(--sgds-bg-transparent);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.btn-close:hover,\n.btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent);\n}\n:host([tone=\"fixed-light\"]) .btn-close:hover,\n:host([tone=\"fixed-light\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-light);\n}\n:host([tone=\"fixed-dark\"]) .btn-close:hover,\n:host([tone=\"fixed-dark\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-dark);\n}\n\n.btn-close:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([disabled]) .btn-close {\n  cursor: not-allowed;\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n"],"mappings":""}
+{"version":3,"file":"close-button.cjs.js","names":[],"sources":["../../../../src/components/CloseButton/close-button.css"],"sourcesContent":[":host {\n  --sgds-close-btn-border-radius: var(--sgds-border-radius-sm);\n  display: inline-flex;\n}\n\n:host([size=\"sm\"]) .btn-close {\n  width: var(--sgds-dimension-24);\n  height: var(--sgds-dimension-24);\n}\n\n:host([tone=\"fixed-light\"]) .btn-close {\n  color: var(--sgds-color-fixed-light);\n}\n\n:host([tone=\"fixed-dark\"]) .btn-close {\n  color: var(--sgds-color-fixed-dark);\n}\n\n.btn-close {\n  position: relative;\n  cursor: pointer;\n  border: 0;\n  padding: 0;\n  width: var(--sgds-dimension-32);\n  height: var(--sgds-dimension-32);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-close-btn-border-radius);\n  background-color: var(--sgds-bg-transparent);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.btn-close:hover,\n.btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent);\n}\n:host([tone=\"fixed-light\"]) .btn-close:hover,\n:host([tone=\"fixed-light\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-light);\n}\n:host([tone=\"fixed-dark\"]) .btn-close:hover,\n:host([tone=\"fixed-dark\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-dark);\n}\n\n.btn-close:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host(:not([disabled])) .btn-close:active::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-color: var(--sgds-bg-translucent);\n  border-radius: inherit;\n}\n\n:host([disabled]) .btn-close {\n  cursor: not-allowed;\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n"],"mappings":""}

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

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/CloseButton/close-button.css
-var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.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:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) .btn-close{cursor:not-allowed;opacity:var(--sgds-opacity-40);pointer-events:none}`;
+var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.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:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host(:not([disabled])) .btn-close:active:after{background-color:var(--sgds-bg-translucent);border-radius:inherit;content:"";inset:0;position:absolute}:host([disabled]) .btn-close{cursor:not-allowed;opacity:var(--sgds-opacity-40);pointer-events:none}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/CloseButton/close-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"close-button.js","names":[],"sources":["../../../../src/components/CloseButton/close-button.css"],"sourcesContent":[":host {\n  --sgds-close-btn-border-radius: var(--sgds-border-radius-sm);\n  display: inline-flex;\n}\n\n:host([size=\"sm\"]) .btn-close {\n  width: var(--sgds-dimension-24);\n  height: var(--sgds-dimension-24);\n}\n\n:host([tone=\"fixed-light\"]) .btn-close {\n  color: var(--sgds-color-fixed-light);\n}\n\n:host([tone=\"fixed-dark\"]) .btn-close {\n  color: var(--sgds-color-fixed-dark);\n}\n\n.btn-close {\n  position: relative;\n  cursor: pointer;\n  border: 0;\n  padding: 0;\n  width: var(--sgds-dimension-32);\n  height: var(--sgds-dimension-32);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-close-btn-border-radius);\n  background-color: var(--sgds-bg-transparent);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.btn-close:hover,\n.btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent);\n}\n:host([tone=\"fixed-light\"]) .btn-close:hover,\n:host([tone=\"fixed-light\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-light);\n}\n:host([tone=\"fixed-dark\"]) .btn-close:hover,\n:host([tone=\"fixed-dark\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-dark);\n}\n\n.btn-close:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([disabled]) .btn-close {\n  cursor: not-allowed;\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n"],"mappings":""}
+{"version":3,"file":"close-button.js","names":[],"sources":["../../../../src/components/CloseButton/close-button.css"],"sourcesContent":[":host {\n  --sgds-close-btn-border-radius: var(--sgds-border-radius-sm);\n  display: inline-flex;\n}\n\n:host([size=\"sm\"]) .btn-close {\n  width: var(--sgds-dimension-24);\n  height: var(--sgds-dimension-24);\n}\n\n:host([tone=\"fixed-light\"]) .btn-close {\n  color: var(--sgds-color-fixed-light);\n}\n\n:host([tone=\"fixed-dark\"]) .btn-close {\n  color: var(--sgds-color-fixed-dark);\n}\n\n.btn-close {\n  position: relative;\n  cursor: pointer;\n  border: 0;\n  padding: 0;\n  width: var(--sgds-dimension-32);\n  height: var(--sgds-dimension-32);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-close-btn-border-radius);\n  background-color: var(--sgds-bg-transparent);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.btn-close:hover,\n.btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent);\n}\n:host([tone=\"fixed-light\"]) .btn-close:hover,\n:host([tone=\"fixed-light\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-light);\n}\n:host([tone=\"fixed-dark\"]) .btn-close:hover,\n:host([tone=\"fixed-dark\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-dark);\n}\n\n.btn-close:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host(:not([disabled])) .btn-close:active::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-color: var(--sgds-bg-translucent);\n  border-radius: inherit;\n}\n\n:host([disabled]) .btn-close {\n  cursor: not-allowed;\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n"],"mappings":""}

package/react/components/ComboBox/combo-box.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/ComboBox/combo-box.css
-var css_248z = require("lit").css`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}.combobox-input-container .form-control{flex:1 1 0;min-width:10ch}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
+var css_248z = require("lit").css`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}.combobox-input-container .form-control{flex:1 1 0;min-width:10ch}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}slot[name=create].d-none,slot[name=create].d-none::slotted(*){display:none}.create-option{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);overflow-wrap:anywhere;padding:var(--sgds-padding-sm) var(--sgds-padding-md);white-space:normal}.create-option:not(.slotted){cursor:pointer}.create-option:hover{background:var(--sgds-bg-translucent-subtle)}.create-option:focus-visible{background:var(--sgds-bg-translucent-subtle);outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/ComboBox/combo-box.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box.cjs.js","names":[],"sources":["../../../../src/components/ComboBox/combo-box.css"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n}\n\n.dropdown {\n  display: flex;\n  height: 100%;\n}\n\n.dropdown-menu {\n  max-height: 10rem;\n  overflow-y: auto;\n  overflow-x: hidden;\n  box-sizing: border-box;\n}\n\n.visually-hidden {\n  clip: rect(0, 0, 0, 0) !important;\n  border: 0 !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  white-space: nowrap !important;\n  width: 1px !important;\n}\n\n.combobox .form-control-group {\n  min-height: var(--sgds-dimension-48);\n  height: unset;\n}\n\n.combobox-input-container {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  flex-wrap: wrap;\n  align-items: center;\n  width: calc(100% - var(--sgds-icon-size-md, 1.25rem));\n  /* deduct 1px from top and bottom padding due to border */\n  padding: calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;\n}\n\n.combobox-input-container .form-control {\n  flex: 1 1 0;\n  min-width: 10ch;\n}\n\nslot[id='default'].d-none::slotted(*),\nslot[id='default'].d-none{\n  display: none;\n}\n\n.form-clearable:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}"],"mappings":""}
+{"version":3,"file":"combo-box.cjs.js","names":[],"sources":["../../../../src/components/ComboBox/combo-box.css"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n}\n\n.dropdown {\n  display: flex;\n  height: 100%;\n}\n\n.dropdown-menu {\n  max-height: 10rem;\n  overflow-y: auto;\n  overflow-x: hidden;\n  box-sizing: border-box;\n}\n\n.visually-hidden {\n  clip: rect(0, 0, 0, 0) !important;\n  border: 0 !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  white-space: nowrap !important;\n  width: 1px !important;\n}\n\n.combobox .form-control-group {\n  min-height: var(--sgds-dimension-48);\n  height: unset;\n}\n\n.combobox-input-container {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  flex-wrap: wrap;\n  align-items: center;\n  width: calc(100% - var(--sgds-icon-size-md, 1.25rem));\n  /* deduct 1px from top and bottom padding due to border */\n  padding: calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;\n}\n\n.combobox-input-container .form-control {\n  flex: 1 1 0;\n  min-width: 10ch;\n}\n\nslot[id='default'].d-none::slotted(*),\nslot[id='default'].d-none{\n  display: none;\n}\n\nslot[name='create'].d-none::slotted(*),\nslot[name='create'].d-none {\n  display: none;\n}\n\n.create-option {\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  color: var(--sgds-form-color-default);\n  font-size: var(--sgds-font-size-label-md);\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.create-option:not(.slotted) {\n  cursor: pointer;\n}\n\n.create-option:hover {\n  background: var(--sgds-bg-translucent-subtle);\n}\n\n.create-option:focus-visible {\n  background: var(--sgds-bg-translucent-subtle);\n  outline: var(--sgds-form-outline-focus);\n  outline-offset: var(--sgds-form-outline-offset-focus);\n}\n\n.form-clearable:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}"],"mappings":""}

package/react/components/ComboBox/combo-box.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/ComboBox/combo-box.css
-var css_248z = css`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}.combobox-input-container .form-control{flex:1 1 0;min-width:10ch}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
+var css_248z = css`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}.combobox-input-container .form-control{flex:1 1 0;min-width:10ch}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}slot[name=create].d-none,slot[name=create].d-none::slotted(*){display:none}.create-option{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);overflow-wrap:anywhere;padding:var(--sgds-padding-sm) var(--sgds-padding-md);white-space:normal}.create-option:not(.slotted){cursor:pointer}.create-option:hover{background:var(--sgds-bg-translucent-subtle)}.create-option:focus-visible{background:var(--sgds-bg-translucent-subtle);outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/ComboBox/combo-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box.js","names":[],"sources":["../../../../src/components/ComboBox/combo-box.css"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n}\n\n.dropdown {\n  display: flex;\n  height: 100%;\n}\n\n.dropdown-menu {\n  max-height: 10rem;\n  overflow-y: auto;\n  overflow-x: hidden;\n  box-sizing: border-box;\n}\n\n.visually-hidden {\n  clip: rect(0, 0, 0, 0) !important;\n  border: 0 !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  white-space: nowrap !important;\n  width: 1px !important;\n}\n\n.combobox .form-control-group {\n  min-height: var(--sgds-dimension-48);\n  height: unset;\n}\n\n.combobox-input-container {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  flex-wrap: wrap;\n  align-items: center;\n  width: calc(100% - var(--sgds-icon-size-md, 1.25rem));\n  /* deduct 1px from top and bottom padding due to border */\n  padding: calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;\n}\n\n.combobox-input-container .form-control {\n  flex: 1 1 0;\n  min-width: 10ch;\n}\n\nslot[id='default'].d-none::slotted(*),\nslot[id='default'].d-none{\n  display: none;\n}\n\n.form-clearable:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}"],"mappings":""}
+{"version":3,"file":"combo-box.js","names":[],"sources":["../../../../src/components/ComboBox/combo-box.css"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n}\n\n.dropdown {\n  display: flex;\n  height: 100%;\n}\n\n.dropdown-menu {\n  max-height: 10rem;\n  overflow-y: auto;\n  overflow-x: hidden;\n  box-sizing: border-box;\n}\n\n.visually-hidden {\n  clip: rect(0, 0, 0, 0) !important;\n  border: 0 !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  white-space: nowrap !important;\n  width: 1px !important;\n}\n\n.combobox .form-control-group {\n  min-height: var(--sgds-dimension-48);\n  height: unset;\n}\n\n.combobox-input-container {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  flex-wrap: wrap;\n  align-items: center;\n  width: calc(100% - var(--sgds-icon-size-md, 1.25rem));\n  /* deduct 1px from top and bottom padding due to border */\n  padding: calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;\n}\n\n.combobox-input-container .form-control {\n  flex: 1 1 0;\n  min-width: 10ch;\n}\n\nslot[id='default'].d-none::slotted(*),\nslot[id='default'].d-none{\n  display: none;\n}\n\nslot[name='create'].d-none::slotted(*),\nslot[name='create'].d-none {\n  display: none;\n}\n\n.create-option {\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  color: var(--sgds-form-color-default);\n  font-size: var(--sgds-font-size-label-md);\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.create-option:not(.slotted) {\n  cursor: pointer;\n}\n\n.create-option:hover {\n  background: var(--sgds-bg-translucent-subtle);\n}\n\n.create-option:focus-visible {\n  background: var(--sgds-bg-translucent-subtle);\n  outline: var(--sgds-form-outline-focus);\n  outline-offset: var(--sgds-form-outline-offset-focus);\n}\n\n.form-clearable:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}"],"mappings":""}