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

package/components/Alert/sgds-alert.d.ts

@@ -1,6 +1,7 @@
 import { nothing } from "lit";
 import SgdsElement from "../../base/sgds-element";
 import SgdsCloseButton from "../../internals/CloseButton/sgds-close-button";
+import SgdsIcon from "../Icon/sgds-icon";
 export type AlertVariant = "info" | "success" | "danger" | "warning" | "neutral";
 declare const SgdsAlert_base: typeof SgdsElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
 /**
@@ -18,6 +19,7 @@ export declare class SgdsAlert extends SgdsAlert_base {
     /**@internal */
     static get scopedElements(): {
         "sgds-close-button": typeof SgdsCloseButton;
+        "sgds-icon": typeof SgdsIcon;
     };
     /** Controls the appearance of the alert  */
     show: boolean;
@@ -33,8 +35,6 @@ export declare class SgdsAlert extends SgdsAlert_base {
     close(): void;
     /**@internal */
     _handleShowChange(): void;
-    private _iconNodes;
-    firstUpdated(): void;
     render(): import("lit-html").TemplateResult | typeof nothing;
 }
 export default SgdsAlert;

package/components/Alert/sgds-alert.js

@@ -1,12 +1,13 @@
 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';
 
 /**
@@ -34,7 +35,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  */
@@ -45,14 +47,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({
@@ -100,9 +96,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/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":";;;;;;;;;;;AAWA;;;;;;;;;AASG;MACU,SAAU,SAAQ,mBAAmB,CAAC,WAAW,CAAC,CAAA;AAA/D,IAAA,WAAA,GAAA;;;QAS8C,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;KAoD9D;;AAnEC,IAAA,WAAW,cAAc,GAAA;QACvB,OAAO;AACL,YAAA,mBAAmB,EAAE,eAAe;SACrC,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;IAKD,YAAY,GAAA;;QACV,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;AAChC,YAAA,OAAO,MAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;SACpF;KACF;IACD,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI;cACZ,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;;AApEM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAQR,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,CAAA;AAGO,UAAA,CAAA;IADP,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACnB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"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":"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"}

package/components/Badge/badge.js

@@ -1,6 +1,6 @@
 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/components/Badge/index.umd.js

@@ -4491,7 +4491,7 @@
   }
   SgdsElement.styles = [css_248z$2];
 
-  var css_248z$1 = 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$1 = 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}`;
 
   // @watch decorator
   //
@@ -4543,7 +4543,7 @@
    */
   const ifDefined = (value) => value ?? nothing;
 
-  var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{background-color:var(--sgds-default-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;height:var(--sgds-dimension-32);padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:before{background-color:currentColor;border-radius:var(--sgds-border-radius);box-sizing:content-box;color:var(--sgds-default-color);content:"";height:var(--sgds-icon-size-lg);left:50%;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--sgds-icon-size-lg)}.btn-close-light:before{color:var(--sgds-default-color-on-dark)}.btn-close-dark:before{color:var(--sgds-default-color-on-light)}.btn-close:hover{background-color:var(--sgds-default-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm:before{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+  var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{background-color:var(--sgds-default-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;height:var(--sgds-dimension-32);padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:before{background-color:currentColor;border-radius:var(--sgds-border-radius);box-sizing:content-box;color:var(--sgds-default-color);content:"";height:var(--sgds-icon-size-md);left:50%;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--sgds-icon-size-md)}.btn-close-light:before{color:var(--sgds-default-color-on-dark)}.btn-close-dark:before{color:var(--sgds-default-color-on-light)}.btn-close:hover{background-color:var(--sgds-default-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-default-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm:before{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
 
   /**
    * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.
@@ -4581,7 +4581,7 @@
     `;
       }
   }
-  SgdsCloseButton.styles = [css_248z];
+  SgdsCloseButton.styles = [...SgdsElement.styles, css_248z];
   __decorate([
       property({ type: String })
   ], SgdsCloseButton.prototype, "ariaLabel", void 0);
@@ -4596,8 +4596,7 @@
    * @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.
@@ -4605,13 +4604,13 @@
   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 */
@@ -4629,7 +4628,7 @@
           this.show ? this.emit("sgds-show") : this.emit("sgds-hide");
       }
       render() {
-          return this.show
+          return (this.dismissible && this.show) || !this.dismissible
               ? html `
           <div
             class="  
@@ -4641,7 +4640,7 @@
             "
             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>