@govtechsg/sgds-web-component 3.0.0-rc.1 → 3.0.0-rc.2

package/react/components/Alert/alert.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--sgds-alert-bg:var(--sgds-primary-bg);--sgds-alert-color:var(--sgds-default-color-on-dark);--sgds-alert-border-radius:var(--sgds-border-radius-md)}:host([variant=success]){--sgds-alert-bg:var(--sgds-success-bg)}:host([variant=warning]){--sgds-alert-bg:var(--sgds-warning-bg)}:host([variant=danger]){--sgds-alert-bg:var(--sgds-danger-bg)}:host([variant=neutral]){--sgds-alert-bg:var(--sgds-neutral-bg)}:host([outlined]){--sgds-alert-color:var(--sgds-default-color-on-light)}:host([variant=info][outlined]){--sgds-alert-bg:var(--sgds-primary-bg-subtle);--sgds-alert-border-color:var(--sgds-primary-border-color-subtle)}:host([variant=success][outlined]){--sgds-alert-bg:var(--sgds-success-bg-subtle);--sgds-alert-border-color:var(--sgds-success-border-color-subtle)}:host([variant=warning][outlined]){--sgds-alert-bg:var(--sgds-warning-bg-subtle);--sgds-alert-border-color:var(--sgds-warning-border-color-subtle)}:host([variant=danger][outlined]){--sgds-alert-bg:var(--sgds-danger-bg-subtle);--sgds-alert-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=neutral][outlined]){--sgds-alert-bg:var(--sgds-neutral-bg-subtle);--sgds-alert-border-color:var(--sgds-neutral-border-color-subtle)}slot[name=icon]{display:flex}slot[name=icon].d-none{display:none}slot[name=icon]::slotted(*){height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}.alert{background-color:var(--sgds-alert-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-alert-border-radius);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg)}.alert.outlined{border:var(--sgds-border-width-1) solid var(--sgds-alert-border-color)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-2-xs);justify-content:center;padding-right:var(--sgds-padding-2-xl)}.alert-title{font-weight:var(--sgds-font-weight-semibold)}`;
+var css_248z = lit.css`:host{--sgds-alert-bg:var(--sgds-primary-bg);--sgds-alert-color:var(--sgds-default-color-on-dark);--sgds-alert-border-radius:var(--sgds-border-radius-md)}:host([variant=success]){--sgds-alert-bg:var(--sgds-success-bg)}:host([variant=warning]){--sgds-alert-bg:var(--sgds-warning-bg)}:host([variant=danger]){--sgds-alert-bg:var(--sgds-danger-bg)}:host([variant=neutral]){--sgds-alert-bg:var(--sgds-neutral-bg)}:host([outlined]){--sgds-alert-color:var(--sgds-default-color-on-light)}:host([variant=info][outlined]){--sgds-alert-bg:var(--sgds-primary-bg-subtle);--sgds-alert-border-color:var(--sgds-primary-border-color-subtle)}:host([variant=success][outlined]){--sgds-alert-bg:var(--sgds-success-bg-subtle);--sgds-alert-border-color:var(--sgds-success-border-color-subtle)}:host([variant=warning][outlined]){--sgds-alert-bg:var(--sgds-warning-bg-subtle);--sgds-alert-border-color:var(--sgds-warning-border-color-subtle)}:host([variant=danger][outlined]){--sgds-alert-bg:var(--sgds-danger-bg-subtle);--sgds-alert-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=neutral][outlined]){--sgds-alert-bg:var(--sgds-neutral-bg-subtle);--sgds-alert-border-color:var(--sgds-neutral-border-color-subtle)}slot[name=icon]::slotted(*){color:var(--sgds-alert-color)}.alert{background-color:var(--sgds-alert-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-alert-border-radius);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg)}.alert.outlined{border:var(--sgds-border-width-1) solid var(--sgds-alert-border-color)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-2-xs);justify-content:center;padding-right:var(--sgds-padding-2-xl)}.alert-title{font-weight:var(--sgds-font-weight-semibold)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=alert.cjs.js.map

package/react/components/Alert/alert.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{--sgds-alert-bg:var(--sgds-primary-bg);--sgds-alert-color:var(--sgds-default-color-on-dark);--sgds-alert-border-radius:var(--sgds-border-radius-md)}:host([variant=success]){--sgds-alert-bg:var(--sgds-success-bg)}:host([variant=warning]){--sgds-alert-bg:var(--sgds-warning-bg)}:host([variant=danger]){--sgds-alert-bg:var(--sgds-danger-bg)}:host([variant=neutral]){--sgds-alert-bg:var(--sgds-neutral-bg)}:host([outlined]){--sgds-alert-color:var(--sgds-default-color-on-light)}:host([variant=info][outlined]){--sgds-alert-bg:var(--sgds-primary-bg-subtle);--sgds-alert-border-color:var(--sgds-primary-border-color-subtle)}:host([variant=success][outlined]){--sgds-alert-bg:var(--sgds-success-bg-subtle);--sgds-alert-border-color:var(--sgds-success-border-color-subtle)}:host([variant=warning][outlined]){--sgds-alert-bg:var(--sgds-warning-bg-subtle);--sgds-alert-border-color:var(--sgds-warning-border-color-subtle)}:host([variant=danger][outlined]){--sgds-alert-bg:var(--sgds-danger-bg-subtle);--sgds-alert-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=neutral][outlined]){--sgds-alert-bg:var(--sgds-neutral-bg-subtle);--sgds-alert-border-color:var(--sgds-neutral-border-color-subtle)}slot[name=icon]{display:flex}slot[name=icon].d-none{display:none}slot[name=icon]::slotted(*){height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}.alert{background-color:var(--sgds-alert-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-alert-border-radius);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg)}.alert.outlined{border:var(--sgds-border-width-1) solid var(--sgds-alert-border-color)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-2-xs);justify-content:center;padding-right:var(--sgds-padding-2-xl)}.alert-title{font-weight:var(--sgds-font-weight-semibold)}`;
+var css_248z = css`:host{--sgds-alert-bg:var(--sgds-primary-bg);--sgds-alert-color:var(--sgds-default-color-on-dark);--sgds-alert-border-radius:var(--sgds-border-radius-md)}:host([variant=success]){--sgds-alert-bg:var(--sgds-success-bg)}:host([variant=warning]){--sgds-alert-bg:var(--sgds-warning-bg)}:host([variant=danger]){--sgds-alert-bg:var(--sgds-danger-bg)}:host([variant=neutral]){--sgds-alert-bg:var(--sgds-neutral-bg)}:host([outlined]){--sgds-alert-color:var(--sgds-default-color-on-light)}:host([variant=info][outlined]){--sgds-alert-bg:var(--sgds-primary-bg-subtle);--sgds-alert-border-color:var(--sgds-primary-border-color-subtle)}:host([variant=success][outlined]){--sgds-alert-bg:var(--sgds-success-bg-subtle);--sgds-alert-border-color:var(--sgds-success-border-color-subtle)}:host([variant=warning][outlined]){--sgds-alert-bg:var(--sgds-warning-bg-subtle);--sgds-alert-border-color:var(--sgds-warning-border-color-subtle)}:host([variant=danger][outlined]){--sgds-alert-bg:var(--sgds-danger-bg-subtle);--sgds-alert-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=neutral][outlined]){--sgds-alert-bg:var(--sgds-neutral-bg-subtle);--sgds-alert-border-color:var(--sgds-neutral-border-color-subtle)}slot[name=icon]::slotted(*){color:var(--sgds-alert-color)}.alert{background-color:var(--sgds-alert-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-alert-border-radius);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg)}.alert.outlined{border:var(--sgds-border-width-1) solid var(--sgds-alert-border-color)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-2-xs);justify-content:center;padding-right:var(--sgds-padding-2-xl)}.alert-title{font-weight:var(--sgds-font-weight-semibold)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=alert.js.map

package/react/components/Alert/sgds-alert.cjs.js

@@ -4,14 +4,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var scopedElements = require('@open-wc/scoped-elements');
 var lit = require('lit');
+var scopedElements = require('@open-wc/scoped-elements');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
 var staticHtml_js = require('lit/static-html.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
 var watch = require('../../utils/watch.cjs.js');
 var sgdsCloseButton = require('../../internals/CloseButton/sgds-close-button.cjs.js');
+var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
 var alert = require('./alert.cjs.js');
 
 /**
@@ -39,7 +40,8 @@ class SgdsAlert extends scopedElements.ScopedElementsMixin(sgdsElement["default"
     /**@internal */
     static get scopedElements() {
         return {
-            "sgds-close-button": sgdsCloseButton.SgdsCloseButton
+            "sgds-close-button": sgdsCloseButton.SgdsCloseButton,
+            "sgds-icon": sgdsIcon.SgdsIcon
         };
     }
     /** Closes the alert  */
@@ -50,14 +52,8 @@ class SgdsAlert extends scopedElements.ScopedElementsMixin(sgdsElement["default"
     _handleShowChange() {
         this.show ? this.emit("sgds-show") : this.emit("sgds-hide");
     }
-    firstUpdated() {
-        var _a;
-        if (this._iconNodes.length === 0) {
-            return (_a = this.shadowRoot.querySelector("slot[name='icon']")) === null || _a === void 0 ? void 0 : _a.classList.add("d-none");
-        }
-    }
     render() {
-        return this.show
+        return (this.dismissible && this.show) || !this.dismissible
             ? staticHtml_js.html `
           <div
             class="${classMap_js.classMap({
@@ -105,9 +101,6 @@ tslib.__decorate([
 tslib.__decorate([
     watch.watch("show")
 ], SgdsAlert.prototype, "_handleShowChange", null);
-tslib.__decorate([
-    decorators_js.queryAssignedNodes({ slot: "icon", flatten: true })
-], SgdsAlert.prototype, "_iconNodes", void 0);
 
 exports.SgdsAlert = SgdsAlert;
 exports["default"] = SgdsAlert;

package/react/components/Alert/sgds-alert.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-alert.cjs.js","sources":["../../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { nothing } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport alertStyle from \"./alert.css\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in SVG elements.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n */\nexport class SgdsAlert extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton\n    };\n  }\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"info\";\n\n  /** Controls the alert visual between a lighter outline and a solid darker variant. */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** The title of the alert. Only text is allowed */\n  @property({ type: String, reflect: true }) title: string;\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  @queryAssignedNodes({ slot: \"icon\", flatten: true })\n  private _iconNodes!: Array<Node>;\n\n  firstUpdated() {\n    if (this._iconNodes.length === 0) {\n      return this.shadowRoot.querySelector(\"slot[name='icon']\")?.classList.add(\"d-none\");\n    }\n  }\n  render() {\n    return this.show\n      ? html`\n          <div\n            class=\"${classMap({\n              alert: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible,\n              outlined: this.outlined\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <slot name=\"icon\"></slot>\n            <div class=\"alert-content\">\n              ${this.title ? html`<div class=\"alert-title\">${this.title}</div>` : nothing}\n              <slot></slot>\n            </div>\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"names":["ScopedElementsMixin","SgdsElement","SgdsCloseButton","html","classMap","nothing","alertStyle","__decorate","property","watch","queryAssignedNodes"],"mappings":"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"}
+{"version":3,"file":"sgds-alert.cjs.js","sources":["../../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport alertStyle from \"./alert.css\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in SVG elements.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n */\nexport class SgdsAlert extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton,\n      \"sgds-icon\": SgdsIcon\n    };\n  }\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"info\";\n\n  /** Controls the alert visual between a lighter outline and a solid darker variant. */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** The title of the alert. Only text is allowed */\n  @property({ type: String, reflect: true }) title: string;\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"${classMap({\n              alert: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible,\n              outlined: this.outlined\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <slot name=\"icon\"></slot>\n            <div class=\"alert-content\">\n              ${this.title ? html`<div class=\"alert-title\">${this.title}</div>` : nothing}\n              <slot></slot>\n            </div>\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"names":["ScopedElementsMixin","SgdsElement","SgdsCloseButton","SgdsIcon","html","classMap","nothing","alertStyle","__decorate","property","watch"],"mappings":"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"}

package/react/components/Alert/sgds-alert.js

@@ -1,13 +1,14 @@
 'use client';
 import { __decorate } from 'tslib';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { nothing } from 'lit';
-import { property, queryAssignedNodes } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit/static-html.js';
 import SgdsElement from '../../base/sgds-element.js';
 import { watch } from '../../utils/watch.js';
 import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
 import css_248z from './alert.js';
 
 /**
@@ -35,7 +36,8 @@ class SgdsAlert extends ScopedElementsMixin(SgdsElement) {
     /**@internal */
     static get scopedElements() {
         return {
-            "sgds-close-button": SgdsCloseButton
+            "sgds-close-button": SgdsCloseButton,
+            "sgds-icon": SgdsIcon
         };
     }
     /** Closes the alert  */
@@ -46,14 +48,8 @@ class SgdsAlert extends ScopedElementsMixin(SgdsElement) {
     _handleShowChange() {
         this.show ? this.emit("sgds-show") : this.emit("sgds-hide");
     }
-    firstUpdated() {
-        var _a;
-        if (this._iconNodes.length === 0) {
-            return (_a = this.shadowRoot.querySelector("slot[name='icon']")) === null || _a === void 0 ? void 0 : _a.classList.add("d-none");
-        }
-    }
     render() {
-        return this.show
+        return (this.dismissible && this.show) || !this.dismissible
             ? html `
           <div
             class="${classMap({
@@ -101,9 +97,6 @@ __decorate([
 __decorate([
     watch("show")
 ], SgdsAlert.prototype, "_handleShowChange", null);
-__decorate([
-    queryAssignedNodes({ slot: "icon", flatten: true })
-], SgdsAlert.prototype, "_iconNodes", void 0);
 
 export { SgdsAlert, SgdsAlert as default };
 //# sourceMappingURL=sgds-alert.js.map

package/react/components/Alert/sgds-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-alert.js","sources":["../../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { nothing } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport alertStyle from \"./alert.css\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in SVG elements.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n */\nexport class SgdsAlert extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton\n    };\n  }\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"info\";\n\n  /** Controls the alert visual between a lighter outline and a solid darker variant. */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** The title of the alert. Only text is allowed */\n  @property({ type: String, reflect: true }) title: string;\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  @queryAssignedNodes({ slot: \"icon\", flatten: true })\n  private _iconNodes!: Array<Node>;\n\n  firstUpdated() {\n    if (this._iconNodes.length === 0) {\n      return this.shadowRoot.querySelector(\"slot[name='icon']\")?.classList.add(\"d-none\");\n    }\n  }\n  render() {\n    return this.show\n      ? html`\n          <div\n            class=\"${classMap({\n              alert: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible,\n              outlined: this.outlined\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <slot name=\"icon\"></slot>\n            <div class=\"alert-content\">\n              ${this.title ? html`<div class=\"alert-title\">${this.title}</div>` : nothing}\n              <slot></slot>\n            </div>\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"names":["alertStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-alert.js","sources":["../../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport alertStyle from \"./alert.css\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in SVG elements.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n */\nexport class SgdsAlert extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton,\n      \"sgds-icon\": SgdsIcon\n    };\n  }\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"info\";\n\n  /** Controls the alert visual between a lighter outline and a solid darker variant. */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** The title of the alert. Only text is allowed */\n  @property({ type: String, reflect: true }) title: string;\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"${classMap({\n              alert: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible,\n              outlined: this.outlined\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <slot name=\"icon\"></slot>\n            <div class=\"alert-content\">\n              ${this.title ? html`<div class=\"alert-title\">${this.title}</div>` : nothing}\n              <slot></slot>\n            </div>\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"names":["alertStyle"],"mappings":";;;;;;;;;;;;;AAYA;;;;;;;;;AASG;MACU,SAAU,SAAQ,mBAAmB,CAAC,WAAW,CAAC,CAAA;AAA/D,IAAA,WAAA,GAAA;;;QAU8C,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAGb,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAGrB,IAAO,CAAA,OAAA,GAAiB,MAAM,CAAC;;QAG9B,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KA4C9D;;AA5DC,IAAA,WAAW,cAAc,GAAA;QACvB,OAAO;AACL,YAAA,mBAAmB,EAAE,eAAe;AACpC,YAAA,WAAW,EAAE,QAAQ;SACtB,CAAC;KACH;;IAiBM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;;IAGD,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7D;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW;cACvD,IAAI,CAAA,CAAA;;AAES,mBAAA,EAAA,QAAQ,CAAC;AAChB,gBAAA,KAAK,EAAE,IAAI;gBACX,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,gBAAA,CAAC,CAAmB,iBAAA,CAAA,GAAG,IAAI,CAAC,WAAW;gBACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAA;;0BAEY,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;;;;AAItC,cAAA,EAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA,CAA4B,yBAAA,EAAA,IAAI,CAAC,KAAK,CAAA,MAAA,CAAQ,GAAG,OAAO,CAAA;;;AAG3E,YAAA,EAAA,IAAI,CAAC,WAAW;kBACd,IAAI,CAAA,CAAA;;AAEO,yBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;4BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AACtB,qCAAA,CAAA;AACxB,kBAAE,OAAO,CAAA;;AAEd,QAAA,CAAA;cACD,OAAO,CAAC;KACb;;AA7DM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AASR,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGb,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG9B,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQzD,UAAA,CAAA;IADC,KAAK,CAAC,MAAM,CAAC;AAGb,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,IAAA,CAAA;;;;"}

package/react/components/Badge/badge.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--sgds-badge-bg:var(--sgds-primary-bg);--sgds-badge-color:var(--sgds-default-color-on-dark);--sgds-badge-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([variant=success]){--sgds-badge-bg:var(--sgds-success-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=danger]){--sgds-badge-bg:var(--sgds-danger-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=warning]){--sgds-badge-bg:var(--sgds-warning-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=neutral]){--sgds-badge-bg:var(--sgds-neutral-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=info][outlined]){--sgds-badge-bg:var(--sgds-primary-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-primary-border-color-subtle)}:host([variant=success][outlined]){--sgds-badge-bg:var(--sgds-success-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-success-border-color-subtle)}:host([variant=danger][outlined]){--sgds-badge-bg:var(--sgds-danger-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=warning][outlined]){--sgds-badge-bg:var(--sgds-danger-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=neutral][outlined]){--sgds-badge-bg:var(--sgds-neutral-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-neutral-border-color-subtle)}.badge{align-items:center;background-color:var(--sgds-badge-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-badge-border-radius);color:var(--sgds-badge-color);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24);justify-content:center;min-width:var(---sgds-dimension-24);padding:0 var(--sgds-padding-2-xs)}.badge.outlined{border:var(--sgds-border-width-1) solid var(--sgds-badge-border-color)}.badge-label{padding:0 var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-badge-border-radius)}slot[name=leftIcon]::slotted(*){font-size:var(--sgds-icon-size-sm)}slot::slotted(*){font-size:14px;font-weight:400}`;
+var css_248z = lit.css`:host{--sgds-badge-bg:var(--sgds-primary-bg);--sgds-badge-color:var(--sgds-default-color-on-dark);--sgds-badge-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([variant=success]){--sgds-badge-bg:var(--sgds-success-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=danger]){--sgds-badge-bg:var(--sgds-danger-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=warning]){--sgds-badge-bg:var(--sgds-warning-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=neutral]){--sgds-badge-bg:var(--sgds-neutral-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=info][outlined]){--sgds-badge-bg:var(--sgds-primary-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-primary-border-color-subtle)}:host([variant=success][outlined]){--sgds-badge-bg:var(--sgds-success-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-success-border-color-subtle)}:host([variant=danger][outlined]){--sgds-badge-bg:var(--sgds-danger-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=warning][outlined]){--sgds-badge-bg:var(--sgds-danger-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-warning-border-color-subtle)}:host([variant=neutral][outlined]){--sgds-badge-bg:var(--sgds-neutral-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-neutral-border-color-subtle)}.badge{align-items:center;background-color:var(--sgds-badge-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-badge-border-radius);color:var(--sgds-badge-color);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24);justify-content:center;min-width:var(---sgds-dimension-24);padding:0 var(--sgds-padding-2-xs)}.badge.outlined{border:var(--sgds-border-width-1) solid var(--sgds-badge-border-color)}.badge-label{padding:0 var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-badge-border-radius)}slot[name=icon]::slotted(*){color:var(--sgds-badge-color)}slot::slotted(*){font-size:14px;font-weight:400}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=badge.cjs.js.map

package/react/components/Badge/badge.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{--sgds-badge-bg:var(--sgds-primary-bg);--sgds-badge-color:var(--sgds-default-color-on-dark);--sgds-badge-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([variant=success]){--sgds-badge-bg:var(--sgds-success-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=danger]){--sgds-badge-bg:var(--sgds-danger-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=warning]){--sgds-badge-bg:var(--sgds-warning-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=neutral]){--sgds-badge-bg:var(--sgds-neutral-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=info][outlined]){--sgds-badge-bg:var(--sgds-primary-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-primary-border-color-subtle)}:host([variant=success][outlined]){--sgds-badge-bg:var(--sgds-success-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-success-border-color-subtle)}:host([variant=danger][outlined]){--sgds-badge-bg:var(--sgds-danger-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=warning][outlined]){--sgds-badge-bg:var(--sgds-danger-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=neutral][outlined]){--sgds-badge-bg:var(--sgds-neutral-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-neutral-border-color-subtle)}.badge{align-items:center;background-color:var(--sgds-badge-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-badge-border-radius);color:var(--sgds-badge-color);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24);justify-content:center;min-width:var(---sgds-dimension-24);padding:0 var(--sgds-padding-2-xs)}.badge.outlined{border:var(--sgds-border-width-1) solid var(--sgds-badge-border-color)}.badge-label{padding:0 var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-badge-border-radius)}slot[name=leftIcon]::slotted(*){font-size:var(--sgds-icon-size-sm)}slot::slotted(*){font-size:14px;font-weight:400}`;
+var css_248z = css`:host{--sgds-badge-bg:var(--sgds-primary-bg);--sgds-badge-color:var(--sgds-default-color-on-dark);--sgds-badge-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([variant=success]){--sgds-badge-bg:var(--sgds-success-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=danger]){--sgds-badge-bg:var(--sgds-danger-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=warning]){--sgds-badge-bg:var(--sgds-warning-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=neutral]){--sgds-badge-bg:var(--sgds-neutral-bg);--sgds-badge-color:var(--sgds-default-color-on-dark)}:host([variant=info][outlined]){--sgds-badge-bg:var(--sgds-primary-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-primary-border-color-subtle)}:host([variant=success][outlined]){--sgds-badge-bg:var(--sgds-success-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-success-border-color-subtle)}:host([variant=danger][outlined]){--sgds-badge-bg:var(--sgds-danger-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=warning][outlined]){--sgds-badge-bg:var(--sgds-danger-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-warning-border-color-subtle)}:host([variant=neutral][outlined]){--sgds-badge-bg:var(--sgds-neutral-bg-subtle);--sgds-badge-color:var(--sgds-default-color-on-light);--sgds-badge-border-color:var(--sgds-neutral-border-color-subtle)}.badge{align-items:center;background-color:var(--sgds-badge-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-badge-border-radius);color:var(--sgds-badge-color);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24);justify-content:center;min-width:var(---sgds-dimension-24);padding:0 var(--sgds-padding-2-xs)}.badge.outlined{border:var(--sgds-border-width-1) solid var(--sgds-badge-border-color)}.badge-label{padding:0 var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-badge-border-radius)}slot[name=icon]::slotted(*){color:var(--sgds-badge-color)}slot::slotted(*){font-size:14px;font-weight:400}`;
 
 export { css_248z as default };
 //# sourceMappingURL=badge.js.map

package/react/components/Badge/sgds-badge.cjs.js

@@ -17,8 +17,7 @@ var sgdsCloseButton = require('../../internals/CloseButton/sgds-close-button.cjs
  * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
  *
  * @slot default - slot for badge
- * @slot leftIcon - The slot for icon to the left of the badge text
- * @slot rightIcon - The slot for icon to the right of the badge text
+ * @slot icon - The slot for icon to the left of the badge text
  *
  * @event sgds-show - Emitted when the badge appears.
  * @event sgds-hide - Emitted after the badge closes.
@@ -26,13 +25,13 @@ var sgdsCloseButton = require('../../internals/CloseButton/sgds-close-button.cjs
 class SgdsBadge extends scopedElements.ScopedElementsMixin(sgdsElement["default"]) {
     constructor() {
         super(...arguments);
-        /** Controls the appearance of the alert  */
+        /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */
         this.show = false;
-        /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `primary`, `info`, `success`, `danger`, `warning`, 'neutral' */
+        /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */
         this.variant = "info";
         /** Manually set the outlined state to false */
         this.outlined = false;
-        /** Manually set the dismissable state of the button to `false` */
+        /** Manually set the dismissible state of the button to `false` */
         this.dismissible = false;
     }
     /**@internal */
@@ -62,7 +61,7 @@ class SgdsBadge extends scopedElements.ScopedElementsMixin(sgdsElement["default"
             "
             aria-hidden=${this.show ? "false" : "true"}
           >
-            ${!this.dismissible ? lit.html `<slot name="leftIcon"></slot>` : lit.nothing}
+            ${!this.dismissible ? lit.html `<slot name="icon"></slot>` : lit.nothing}
             <span class="badge-label">
               <slot></slot>
             </span>

package/react/components/Badge/sgds-badge.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-badge.cjs.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport badgeStyle from \"./badge.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nexport type BadgeVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n *\n * @slot default - slot for badge\n * @slot leftIcon - The slot for icon to the left of the badge text\n * @slot rightIcon - The slot for icon to the right of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted after the badge closes.\n */\nexport class SgdsBadge extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton\n    };\n  }\n\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `primary`, `info`, `success`, `danger`, `warning`, 'neutral' */\n  @property({ reflect: true }) variant: BadgeVariant = \"info\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissable state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"  \n          ${classMap({\n              [`badge-dismissible`]: this.dismissible,\n              badge: true,\n              outlined: this.outlined\n            })}\n            \"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            ${!this.dismissible ? html`<slot name=\"leftIcon\"></slot>` : nothing}\n            <span class=\"badge-label\">\n              <slot></slot>\n            </span>\n\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  size=\"sm\"\n                  aria-label=\"close the badge\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["ScopedElementsMixin","SgdsElement","SgdsCloseButton","html","classMap","nothing","badgeStyle","__decorate","property","watch"],"mappings":";;;;;;;;;;;;;;;AAUA;;;;;;;;;AASG;MACU,SAAU,SAAQA,kCAAmB,CAACC,sBAAW,CAAC,CAAA;AAA/D,IAAA,WAAA,GAAA;;;QAW8C,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAG5B,IAAO,CAAA,OAAA,GAAiB,MAAM,CAAC;;QAGhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;KA0CjE;;AA1DC,IAAA,WAAW,cAAc,GAAA;QACvB,OAAO;AACL,YAAA,mBAAmB,EAAEC,+BAAe;SACrC,CAAC;KACH;;IAeM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;;IAGD,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7D;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW;cACvDC,QAAI,CAAA,CAAA;;;AAGA,UAAA,EAAAC,oBAAQ,CAAC;AACP,gBAAA,CAAC,CAAmB,iBAAA,CAAA,GAAG,IAAI,CAAC,WAAW;AACvC,gBAAA,KAAK,EAAE,IAAI;gBACX,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAA;;0BAEY,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;;AAExC,YAAA,EAAA,CAAC,IAAI,CAAC,WAAW,GAAGD,QAAI,CAAA,CAA+B,6BAAA,CAAA,GAAGE,WAAO,CAAA;;;;;AAKjE,YAAA,EAAA,IAAI,CAAC,WAAW;kBACdF,QAAI,CAAA,CAAA;;;AAGO,yBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;4BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AACtB,qCAAA,CAAA;AACxB,kBAAEE,WAAO,CAAA;;AAEd,QAAA,CAAA;cACDA,WAAO,CAAC;KACb;;AA5DM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAGJ,sBAAW,CAAC,MAAM,EAAEK,gBAAU,CAArC,CAAuC;AAURC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG5BD,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQhED,gBAAA,CAAA;IADCE,WAAK,CAAC,MAAM,CAAC;AAGb,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,IAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-badge.cjs.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport badgeStyle from \"./badge.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nexport type BadgeVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted after the badge closes.\n */\nexport class SgdsBadge extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton\n    };\n  }\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */\n  @property({ reflect: true }) variant: BadgeVariant = \"info\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"  \n          ${classMap({\n              [`badge-dismissible`]: this.dismissible,\n              badge: true,\n              outlined: this.outlined\n            })}\n            \"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n            <span class=\"badge-label\">\n              <slot></slot>\n            </span>\n\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  size=\"sm\"\n                  aria-label=\"close the badge\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["ScopedElementsMixin","SgdsElement","SgdsCloseButton","html","classMap","nothing","badgeStyle","__decorate","property","watch"],"mappings":";;;;;;;;;;;;;;;AAUA;;;;;;;;AAQG;MACU,SAAU,SAAQA,kCAAmB,CAACC,sBAAW,CAAC,CAAA;AAA/D,IAAA,WAAA,GAAA;;;QAW8C,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAG5B,IAAO,CAAA,OAAA,GAAiB,MAAM,CAAC;;QAGhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;KA0CjE;;AA1DC,IAAA,WAAW,cAAc,GAAA;QACvB,OAAO;AACL,YAAA,mBAAmB,EAAEC,+BAAe;SACrC,CAAC;KACH;;IAeM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;;IAGD,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7D;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW;cACvDC,QAAI,CAAA,CAAA;;;AAGA,UAAA,EAAAC,oBAAQ,CAAC;AACP,gBAAA,CAAC,CAAmB,iBAAA,CAAA,GAAG,IAAI,CAAC,WAAW;AACvC,gBAAA,KAAK,EAAE,IAAI;gBACX,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAA;;0BAEY,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;;AAExC,YAAA,EAAA,CAAC,IAAI,CAAC,WAAW,GAAGD,QAAI,CAAA,CAA2B,yBAAA,CAAA,GAAGE,WAAO,CAAA;;;;;AAK7D,YAAA,EAAA,IAAI,CAAC,WAAW;kBACdF,QAAI,CAAA,CAAA;;;AAGO,yBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;4BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AACtB,qCAAA,CAAA;AACxB,kBAAEE,WAAO,CAAA;;AAEd,QAAA,CAAA;cACDA,WAAO,CAAC;KACb;;AA5DM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAGJ,sBAAW,CAAC,MAAM,EAAEK,gBAAU,CAArC,CAAuC;AAURC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG5BD,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQhED,gBAAA,CAAA;IADCE,WAAK,CAAC,MAAM,CAAC;AAGb,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,IAAA,CAAA;;;;;"}

package/react/components/Badge/sgds-badge.js

@@ -13,8 +13,7 @@ import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.j
  * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
  *
  * @slot default - slot for badge
- * @slot leftIcon - The slot for icon to the left of the badge text
- * @slot rightIcon - The slot for icon to the right of the badge text
+ * @slot icon - The slot for icon to the left of the badge text
  *
  * @event sgds-show - Emitted when the badge appears.
  * @event sgds-hide - Emitted after the badge closes.
@@ -22,13 +21,13 @@ import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.j
 class SgdsBadge extends ScopedElementsMixin(SgdsElement) {
     constructor() {
         super(...arguments);
-        /** Controls the appearance of the alert  */
+        /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */
         this.show = false;
-        /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `primary`, `info`, `success`, `danger`, `warning`, 'neutral' */
+        /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */
         this.variant = "info";
         /** Manually set the outlined state to false */
         this.outlined = false;
-        /** Manually set the dismissable state of the button to `false` */
+        /** Manually set the dismissible state of the button to `false` */
         this.dismissible = false;
     }
     /**@internal */
@@ -58,7 +57,7 @@ class SgdsBadge extends ScopedElementsMixin(SgdsElement) {
             "
             aria-hidden=${this.show ? "false" : "true"}
           >
-            ${!this.dismissible ? html `<slot name="leftIcon"></slot>` : nothing}
+            ${!this.dismissible ? html `<slot name="icon"></slot>` : nothing}
             <span class="badge-label">
               <slot></slot>
             </span>

package/react/components/Badge/sgds-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-badge.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport badgeStyle from \"./badge.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nexport type BadgeVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n *\n * @slot default - slot for badge\n * @slot leftIcon - The slot for icon to the left of the badge text\n * @slot rightIcon - The slot for icon to the right of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted after the badge closes.\n */\nexport class SgdsBadge extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton\n    };\n  }\n\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `primary`, `info`, `success`, `danger`, `warning`, 'neutral' */\n  @property({ reflect: true }) variant: BadgeVariant = \"info\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissable state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"  \n          ${classMap({\n              [`badge-dismissible`]: this.dismissible,\n              badge: true,\n              outlined: this.outlined\n            })}\n            \"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            ${!this.dismissible ? html`<slot name=\"leftIcon\"></slot>` : nothing}\n            <span class=\"badge-label\">\n              <slot></slot>\n            </span>\n\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  size=\"sm\"\n                  aria-label=\"close the badge\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["badgeStyle"],"mappings":";;;;;;;;;;;AAUA;;;;;;;;;AASG;MACU,SAAU,SAAQ,mBAAmB,CAAC,WAAW,CAAC,CAAA;AAA/D,IAAA,WAAA,GAAA;;;QAW8C,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAG5B,IAAO,CAAA,OAAA,GAAiB,MAAM,CAAC;;QAGhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;KA0CjE;;AA1DC,IAAA,WAAW,cAAc,GAAA;QACvB,OAAO;AACL,YAAA,mBAAmB,EAAE,eAAe;SACrC,CAAC;KACH;;IAeM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;;IAGD,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7D;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW;cACvD,IAAI,CAAA,CAAA;;;AAGA,UAAA,EAAA,QAAQ,CAAC;AACP,gBAAA,CAAC,CAAmB,iBAAA,CAAA,GAAG,IAAI,CAAC,WAAW;AACvC,gBAAA,KAAK,EAAE,IAAI;gBACX,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAA;;0BAEY,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;;AAExC,YAAA,EAAA,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA,CAA+B,6BAAA,CAAA,GAAG,OAAO,CAAA;;;;;AAKjE,YAAA,EAAA,IAAI,CAAC,WAAW;kBACd,IAAI,CAAA,CAAA;;;AAGO,yBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;4BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AACtB,qCAAA,CAAA;AACxB,kBAAE,OAAO,CAAA;;AAEd,QAAA,CAAA;cACD,OAAO,CAAC;KACb;;AA5DM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAUR,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG5B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQhE,UAAA,CAAA;IADC,KAAK,CAAC,MAAM,CAAC;AAGb,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,IAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-badge.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport badgeStyle from \"./badge.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nexport type BadgeVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted after the badge closes.\n */\nexport class SgdsBadge extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-close-button\": SgdsCloseButton\n    };\n  }\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */\n  @property({ reflect: true }) variant: BadgeVariant = \"info\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"  \n          ${classMap({\n              [`badge-dismissible`]: this.dismissible,\n              badge: true,\n              outlined: this.outlined\n            })}\n            \"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n            <span class=\"badge-label\">\n              <slot></slot>\n            </span>\n\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  size=\"sm\"\n                  aria-label=\"close the badge\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["badgeStyle"],"mappings":";;;;;;;;;;;AAUA;;;;;;;;AAQG;MACU,SAAU,SAAQ,mBAAmB,CAAC,WAAW,CAAC,CAAA;AAA/D,IAAA,WAAA,GAAA;;;QAW8C,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAG5B,IAAO,CAAA,OAAA,GAAiB,MAAM,CAAC;;QAGhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;KA0CjE;;AA1DC,IAAA,WAAW,cAAc,GAAA;QACvB,OAAO;AACL,YAAA,mBAAmB,EAAE,eAAe;SACrC,CAAC;KACH;;IAeM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;;IAGD,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7D;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW;cACvD,IAAI,CAAA,CAAA;;;AAGA,UAAA,EAAA,QAAQ,CAAC;AACP,gBAAA,CAAC,CAAmB,iBAAA,CAAA,GAAG,IAAI,CAAC,WAAW;AACvC,gBAAA,KAAK,EAAE,IAAI;gBACX,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAA;;0BAEY,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;;AAExC,YAAA,EAAA,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA,CAA2B,yBAAA,CAAA,GAAG,OAAO,CAAA;;;;;AAK7D,YAAA,EAAA,IAAI,CAAC,WAAW;kBACd,IAAI,CAAA,CAAA;;;AAGO,yBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;4BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AACtB,qCAAA,CAAA;AACxB,kBAAE,OAAO,CAAA;;AAEd,QAAA,CAAA;cACD,OAAO,CAAC;KACb;;AA5DM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAUR,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG5B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQhE,UAAA,CAAA;IADC,KAAK,CAAC,MAAM,CAAC;AAGb,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,IAAA,CAAA;;;;"}

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

@@ -10,7 +10,7 @@ var ifDefined_js = require('lit/directives/if-defined.js');
 var staticHtml_js = require('lit/static-html.js');
 var buttonElement = require('../../base/button-element.cjs.js');
 var anchor = require('../../styles/anchor.cjs.js');
-var form = require('../../utils/form.cjs.js');
+var formSubmitController = require('../../utils/formSubmitController.cjs.js');
 var button = require('./button.cjs.js');
 
 /**
@@ -33,7 +33,7 @@ class SgdsButton extends buttonElement["default"] {
         /** @internal */
         this._hasRightIcon = false;
         /** @internal */
-        this.formSubmitController = new form.FormSubmitController(this, {
+        this.formSubmitController = new formSubmitController.FormSubmitController(this, {
             form: (input) => {
                 // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query
                 // the form from the same root using its id

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-button.cjs.js","sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property, state } 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 anchorStyles from \"../../styles/anchor.css\";\nimport { FormSubmitController } from \"../../utils/form\";\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  /** @internal */\n  @state()\n  private _hasLeftIcon = false;\n\n  /** @internal */\n  @state()\n  private _hasRightIcon = false;\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 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  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\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  private _handleLeftIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasLeftIcon = true);\n    }\n  }\n\n  private _handleRightIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasRightIcon = true);\n    }\n  }\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"full-width\": this.fullWidth,\n          \"has-left-icon\": this._hasLeftIcon,\n          \"has-right-icon\": this._hasRightIcon,\n          [`btn-${this.variant}`]: this.variant,\n          [`btn-${this.size}`]: this.size\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        href=${ifDefined(isLink ? 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 ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.ariaLabel)}\n      >\n      <slot name=\"leftIcon\" @slotchange=${this._handleLeftIconSlotchange}></slot>\n      <span><slot></slot></span>\n      <slot name=\"rightIcon\" @slotchange=${this._handleRightIconSlotchange}></slot>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"names":["ButtonElement","FormSubmitController","literal","html","classMap","ifDefined","anchorStyles","buttonStyles","__decorate","state","property"],"mappings":"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"}
+{"version":3,"file":"sgds-button.cjs.js","sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property, state } 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 anchorStyles from \"../../styles/anchor.css\";\nimport { FormSubmitController } from \"../../utils/formSubmitController\";\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  /** @internal */\n  @state()\n  private _hasLeftIcon = false;\n\n  /** @internal */\n  @state()\n  private _hasRightIcon = false;\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 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  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\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  private _handleLeftIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasLeftIcon = true);\n    }\n  }\n\n  private _handleRightIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasRightIcon = true);\n    }\n  }\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"full-width\": this.fullWidth,\n          \"has-left-icon\": this._hasLeftIcon,\n          \"has-right-icon\": this._hasRightIcon,\n          [`btn-${this.variant}`]: this.variant,\n          [`btn-${this.size}`]: this.size\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        href=${ifDefined(isLink ? 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 ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.ariaLabel)}\n      >\n      <slot name=\"leftIcon\" @slotchange=${this._handleLeftIconSlotchange}></slot>\n      <span><slot></slot></span>\n      <slot name=\"rightIcon\" @slotchange=${this._handleRightIconSlotchange}></slot>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"names":["ButtonElement","FormSubmitController","literal","html","classMap","ifDefined","anchorStyles","buttonStyles","__decorate","state","property"],"mappings":";;;;;;;;;;;;;;;AAWA;;;;;;;;;;;AAWG;AACG,MAAO,UAAW,SAAQA,wBAAa,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QAIU,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;;QAIrB,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;;AAGb,QAAA,IAAA,CAAA,oBAAoB,GAAG,IAAIC,yCAAoB,CAAC,IAAI,EAAE;AACrE,YAAA,IAAI,EAAE,CAAC,KAAuB,KAAI;;;AAGhC,gBAAA,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC9B,oBAAA,MAAM,GAAG,GAAG,KAAK,CAAC,WAAW,EAA2B,CAAC;oBACzD,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;AAC1C,oBAAA,OAAO,GAAG,CAAC,cAAc,CAAC,MAAM,CAAoB,CAAC;iBACtD;;AAGD,gBAAA,OAAO,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;aAC9B;AACF,SAAA,CAAC,CAAC;;QAEwC,IAAI,CAAA,IAAA,GAAkC,QAAQ,CAAC;;QA0B9C,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;QAatD,IAAa,CAAA,aAAA,GAAG,MAAK;AAC3B,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;AAC1B,gBAAA,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;aACxC;AACD,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;AACzB,gBAAA,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;aACvC;AACH,SAAC,CAAC;KAkDH;AApEoB,IAAA,YAAY,CAAC,KAAiB,EAAA;AAC/C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;SACR;QAED,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACpD;AAWO,IAAA,yBAAyB,CAAC,CAAQ,EAAA;AACxC,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAiC,CAAC;AAClH,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,EAAE;SACnC;KACF;AAEO,IAAA,0BAA0B,CAAC,CAAQ,EAAA;AACzC,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAiC,CAAC;AAClH,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,QAAQ,IAAI,CAAC,aAAa,GAAG,IAAI,EAAE;SACpC;KACF;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;AACzB,QAAA,MAAM,GAAG,GAAG,MAAM,GAAGC,qBAAO,CAAA,CAAA,CAAA,CAAG,GAAGA,qBAAO,CAAA,QAAQ,CAAC;AAClD,QAAA,OAAOC,kBAAI,CAAA,CAAA;SACN,GAAG,CAAA;AACS,mBAAA,EAAAC,oBAAQ,CAAC;YACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,YAAY,EAAE,IAAI,CAAC,SAAS;YAC5B,eAAe,EAAE,IAAI,CAAC,YAAY;YAClC,gBAAgB,EAAE,IAAI,CAAC,aAAa;YACpC,CAAC,CAAA,IAAA,EAAO,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO;YACrC,CAAC,CAAA,IAAA,EAAO,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI;SAChC,CAAC,CAAA;AACU,kBAAA,EAAAC,sBAAS,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAA;AAClD,aAAA,EAAAA,sBAAS,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAA;AACzC,aAAA,EAAAA,sBAAS,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,CAAA;AACvC,eAAA,EAAAA,sBAAS,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;AACzC,iBAAA,EAAAA,sBAAS,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAA;AAClD,YAAA,EAAAA,sBAAS,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC,CAAA;eAChFA,sBAAS,CAAC,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAA;wBAC/B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;mBACrC,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;AAC5B,eAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AACjB,eAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AAClB,cAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AACX,mBAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;;AAEJ,wCAAA,EAAA,IAAI,CAAC,yBAAyB,CAAA;;AAE7B,yCAAA,EAAA,IAAI,CAAC,0BAA0B,CAAA;UAChE,GAAG,CAAA;KACR,CAAC;KACH;;AAxHM,UAAA,CAAA,MAAM,GAAG,CAAC,GAAGL,wBAAa,CAAC,MAAM,EAAEM,iBAAY,EAAEC,iBAAY,CAAvD,CAAyD;AAG9DC,gBAAA,CAAA;AADP,IAAAC,mBAAK,EAAE;AACqB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIrBD,gBAAA,CAAA;AADP,IAAAC,mBAAK,EAAE;AACsB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAkBaD,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgD,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAK/CF,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGYF,gBAAA,CAAA;AAAnE,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;AAAoB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGnBF,gBAAA,CAAA;AAAnE,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;AAA4B,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI/FF,gBAAA,CAAA;AADC,IAAAE,sBAAQ,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAChD,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG4CF,gBAAA,CAAA;AAAnE,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;AAKxD,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGiCF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

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

@@ -6,7 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { literal, html } from 'lit/static-html.js';
 import ButtonElement from '../../base/button-element.js';
 import css_248z from '../../styles/anchor.js';
-import { FormSubmitController } from '../../utils/form.js';
+import { FormSubmitController } from '../../utils/formSubmitController.js';
 import css_248z$1 from './button.js';
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-button.js","sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property, state } 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 anchorStyles from \"../../styles/anchor.css\";\nimport { FormSubmitController } from \"../../utils/form\";\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  /** @internal */\n  @state()\n  private _hasLeftIcon = false;\n\n  /** @internal */\n  @state()\n  private _hasRightIcon = false;\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 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  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\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  private _handleLeftIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasLeftIcon = true);\n    }\n  }\n\n  private _handleRightIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasRightIcon = true);\n    }\n  }\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"full-width\": this.fullWidth,\n          \"has-left-icon\": this._hasLeftIcon,\n          \"has-right-icon\": this._hasRightIcon,\n          [`btn-${this.variant}`]: this.variant,\n          [`btn-${this.size}`]: this.size\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        href=${ifDefined(isLink ? 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 ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.ariaLabel)}\n      >\n      <slot name=\"leftIcon\" @slotchange=${this._handleLeftIconSlotchange}></slot>\n      <span><slot></slot></span>\n      <slot name=\"rightIcon\" @slotchange=${this._handleRightIconSlotchange}></slot>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"names":["anchorStyles","buttonStyles"],"mappings":"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"}
+{"version":3,"file":"sgds-button.js","sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property, state } 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 anchorStyles from \"../../styles/anchor.css\";\nimport { FormSubmitController } from \"../../utils/formSubmitController\";\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  /** @internal */\n  @state()\n  private _hasLeftIcon = false;\n\n  /** @internal */\n  @state()\n  private _hasRightIcon = false;\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 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  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\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  private _handleLeftIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasLeftIcon = true);\n    }\n  }\n\n  private _handleRightIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasRightIcon = true);\n    }\n  }\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"full-width\": this.fullWidth,\n          \"has-left-icon\": this._hasLeftIcon,\n          \"has-right-icon\": this._hasRightIcon,\n          [`btn-${this.variant}`]: this.variant,\n          [`btn-${this.size}`]: this.size\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        href=${ifDefined(isLink ? 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 ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.ariaLabel)}\n      >\n      <slot name=\"leftIcon\" @slotchange=${this._handleLeftIconSlotchange}></slot>\n      <span><slot></slot></span>\n      <slot name=\"rightIcon\" @slotchange=${this._handleRightIconSlotchange}></slot>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"names":["anchorStyles","buttonStyles"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md)}.form-check-input:focus,.form-check-input:focus-visible{box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-bg)}`;
+var css_248z = lit.css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md)}.form-check-input:focus,.form-check-input:focus-visible{box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-bg)}.form-check-input:indeterminate.is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-bg)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=checkbox.cjs.js.map

package/react/components/Checkbox/checkbox.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md)}.form-check-input:focus,.form-check-input:focus-visible{box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-bg)}`;
+var css_248z = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md)}.form-check-input:focus,.form-check-input:focus-visible{box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-bg)}.form-check-input:indeterminate.is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-bg)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=checkbox.js.map