@govtechsg/sgds-web-component 3.2.0-rc.1 → 3.2.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.2.0-rc.1",
+  "version": "3.2.0-rc.3",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

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{display:inline-flex}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);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:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default);color:var(--sgds-color-fixed-dark)}.badge-label{line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){font-size:14px;font-weight:400}`;
+var css_248z = lit.css`:host{cursor:default;display:inline-flex;max-width:100%}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}sgds-tooltip{display:block;max-width:100%}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24,24px);justify-content:center;max-width:192px;min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default);color:var(--sgds-color-fixed-dark)}.badge.full-width{max-width:100%}.badge-label{line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}.badge.truncated .badge-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}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{display:inline-flex}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);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:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default);color:var(--sgds-color-fixed-dark)}.badge-label{line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){font-size:14px;font-weight:400}`;
+var css_248z = css`:host{cursor:default;display:inline-flex;max-width:100%}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}sgds-tooltip{display:block;max-width:100%}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24,24px);justify-content:center;max-width:192px;min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default);color:var(--sgds-color-fixed-dark)}.badge.full-width{max-width:100%}.badge-label{line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}.badge.truncated .badge-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}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

@@ -7,13 +7,16 @@ var tslib = require('tslib');
 var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
-var sgdsElement = require('../../base/sgds-element.cjs.js');
-var sgdsCloseButton = require('../../internals/CloseButton/sgds-close-button.cjs.js');
 var watch = require('../../utils/watch.cjs.js');
 var badge = require('./badge.cjs.js');
+var sgdsElement = require('../../base/sgds-element.cjs.js');
+var sgdsTooltip = require('../Tooltip/sgds-tooltip.cjs.js');
+var sgdsCloseButton = require('../../internals/CloseButton/sgds-close-button.cjs.js');
+var slot = require('../../utils/slot.cjs.js');
 
 /**
  * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
+ * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.
  *
  * @slot default - slot for badge
  * @slot icon - The slot for icon to the left of the badge text
@@ -34,6 +37,10 @@ class SgdsBadge extends sgdsElement["default"] {
         this.outlined = false;
         /** Manually set the dismissible state of the button to `false` */
         this.dismissible = false;
+        /** Manually enable full width */
+        this.fullWidth = false;
+        this.truncated = false;
+        this.text = "";
     }
     /** Closes the badge  */
     close() {
@@ -60,41 +67,62 @@ class SgdsBadge extends sgdsElement["default"] {
             this.emit("sgds-after-hide");
         }
     }
-    render() {
-        return (this.dismissible && this.show) || !this.dismissible
-            ? lit.html `
-          <div
-            class="  
+    /**@internal */
+    _handleTruncation() {
+        // checking of text height if its exceeding parent, it needs to be truncated
+        const badge = this.shadowRoot.querySelector(".badge");
+        const badgeLabel = this.shadowRoot.querySelector(".badge-label");
+        if (badge && badgeLabel) {
+            const labelHeight = badgeLabel.getBoundingClientRect().height;
+            const badgeHeight = badge.getBoundingClientRect().height;
+            this.truncated = labelHeight > badgeHeight;
+        }
+    }
+    _handleLabelSlotChange(e) {
+        this.text = slot.getTextContent(e.target);
+        return;
+    }
+    _renderBadge() {
+        return lit.html `<div
+      class="  
           ${classMap_js.classMap({
-                [`badge-dismissible`]: this.dismissible,
-                badge: true,
-                outlined: this.outlined
-            })}
-            "
-            aria-hidden=${this.show ? "false" : "true"}
-          >
-            ${!this.dismissible ? lit.html `<slot name="icon"></slot>` : lit.nothing}
-            <span class="badge-label">
-              <slot></slot>
-            </span>
+            [`badge-dismissible`]: this.dismissible,
+            badge: true,
+            outlined: this.outlined,
+            truncated: this.truncated,
+            "full-width": this.fullWidth
+        })}"
+      aria-hidden=${this.show ? "false" : "true"}
+    >
+      ${!this.dismissible ? lit.html `<slot name="icon"></slot>` : lit.nothing}
 
-            ${this.dismissible
-                ? lit.html `<sgds-close-button
-                  size="sm"
-                  aria-label="close the badge"
-                  @click=${this.close}
-                  variant=${this.outlined ? "dark" : "light"}
-                ></sgds-close-button>`
-                : lit.nothing}
-          </div>
-        `
+      <span class="badge-label">
+        <slot @slotchange=${this._handleLabelSlotChange}></slot>
+      </span>
+
+      ${this.dismissible
+            ? lit.html `<sgds-close-button
+            size="sm"
+            aria-label="close the badge"
+            @click=${this.close}
+            variant=${this.outlined ? "dark" : "light"}
+          ></sgds-close-button>`
+            : lit.nothing}
+    </div>`;
+    }
+    render() {
+        return (this.dismissible && this.show) || !this.dismissible
+            ? this.truncated
+                ? lit.html `<sgds-tooltip content=${this.text}>${this._renderBadge()}</sgds-tooltip>`
+                : this._renderBadge()
             : lit.nothing;
     }
 }
 SgdsBadge.styles = [...sgdsElement["default"].styles, badge["default"]];
 /**@internal */
 SgdsBadge.dependencies = {
-    "sgds-close-button": sgdsCloseButton.SgdsCloseButton
+    "sgds-close-button": sgdsCloseButton.SgdsCloseButton,
+    "sgds-tooltip": sgdsTooltip.SgdsTooltip
 };
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
@@ -108,9 +136,21 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsBadge.prototype, "dismissible", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsBadge.prototype, "fullWidth", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsBadge.prototype, "truncated", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsBadge.prototype, "text", void 0);
 tslib.__decorate([
     watch.watch("show")
 ], SgdsBadge.prototype, "_handleShowChange", null);
+tslib.__decorate([
+    watch.watch("text")
+], SgdsBadge.prototype, "_handleTruncation", null);
 
 exports.SgdsBadge = SgdsBadge;
 exports["default"] = SgdsBadge;

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 { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\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 when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\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    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\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":["SgdsElement","html","classMap","nothing","badgeStyle","SgdsCloseButton","__decorate","property","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-badge.cjs.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\n\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsTooltip from \"../Tooltip/sgds-tooltip\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\n\nimport { getTextContent } from \"../../utils/slot\";\n\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 * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.\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 when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-tooltip\": SgdsTooltip\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  /** Manually enable full width */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @state() private truncated = false;\n  @state() private text = \"\";\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /**@internal */\n  @watch(\"text\")\n  _handleTruncation() {\n    // checking of text height if its exceeding parent, it needs to be truncated\n    const badge = this.shadowRoot.querySelector(\".badge\");\n    const badgeLabel = this.shadowRoot.querySelector(\".badge-label\");\n\n    if (badge && badgeLabel) {\n      const labelHeight = badgeLabel.getBoundingClientRect().height;\n      const badgeHeight = badge.getBoundingClientRect().height;\n\n      this.truncated = labelHeight > badgeHeight;\n    }\n  }\n\n  private _handleLabelSlotChange(e: Event) {\n    this.text = getTextContent(e.target as HTMLSlotElement);\n    return;\n  }\n\n  private _renderBadge() {\n    return html`<div\n      class=\"  \n          ${classMap({\n        [`badge-dismissible`]: this.dismissible,\n        badge: true,\n        outlined: this.outlined,\n        truncated: this.truncated,\n        \"full-width\": this.fullWidth\n      })}\"\n      aria-hidden=${this.show ? \"false\" : \"true\"}\n    >\n      ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n\n      <span class=\"badge-label\">\n        <slot @slotchange=${this._handleLabelSlotChange}></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\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? this.truncated\n        ? html`<sgds-tooltip content=${this.text}>${this._renderBadge()}</sgds-tooltip>`\n        : this._renderBadge()\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["SgdsElement","getTextContent","html","classMap","nothing","badgeStyle","SgdsCloseButton","SgdsTooltip","__decorate","property","state","watch"],"mappings":"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"}

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

@@ -1,15 +1,18 @@
 'use client';
 import { __decorate } from 'tslib';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import SgdsElement from '../../base/sgds-element.js';
-import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.js';
 import { watch } from '../../utils/watch.js';
 import css_248z from './badge.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { SgdsTooltip } from '../Tooltip/sgds-tooltip.js';
+import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.js';
+import { getTextContent } from '../../utils/slot.js';
 
 /**
  * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
+ * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.
  *
  * @slot default - slot for badge
  * @slot icon - The slot for icon to the left of the badge text
@@ -30,6 +33,10 @@ class SgdsBadge extends SgdsElement {
         this.outlined = false;
         /** Manually set the dismissible state of the button to `false` */
         this.dismissible = false;
+        /** Manually enable full width */
+        this.fullWidth = false;
+        this.truncated = false;
+        this.text = "";
     }
     /** Closes the badge  */
     close() {
@@ -56,41 +63,62 @@ class SgdsBadge extends SgdsElement {
             this.emit("sgds-after-hide");
         }
     }
-    render() {
-        return (this.dismissible && this.show) || !this.dismissible
-            ? html `
-          <div
-            class="  
+    /**@internal */
+    _handleTruncation() {
+        // checking of text height if its exceeding parent, it needs to be truncated
+        const badge = this.shadowRoot.querySelector(".badge");
+        const badgeLabel = this.shadowRoot.querySelector(".badge-label");
+        if (badge && badgeLabel) {
+            const labelHeight = badgeLabel.getBoundingClientRect().height;
+            const badgeHeight = badge.getBoundingClientRect().height;
+            this.truncated = labelHeight > badgeHeight;
+        }
+    }
+    _handleLabelSlotChange(e) {
+        this.text = getTextContent(e.target);
+        return;
+    }
+    _renderBadge() {
+        return html `<div
+      class="  
           ${classMap({
-                [`badge-dismissible`]: this.dismissible,
-                badge: true,
-                outlined: this.outlined
-            })}
-            "
-            aria-hidden=${this.show ? "false" : "true"}
-          >
-            ${!this.dismissible ? html `<slot name="icon"></slot>` : nothing}
-            <span class="badge-label">
-              <slot></slot>
-            </span>
+            [`badge-dismissible`]: this.dismissible,
+            badge: true,
+            outlined: this.outlined,
+            truncated: this.truncated,
+            "full-width": this.fullWidth
+        })}"
+      aria-hidden=${this.show ? "false" : "true"}
+    >
+      ${!this.dismissible ? html `<slot name="icon"></slot>` : nothing}
 
-            ${this.dismissible
-                ? html `<sgds-close-button
-                  size="sm"
-                  aria-label="close the badge"
-                  @click=${this.close}
-                  variant=${this.outlined ? "dark" : "light"}
-                ></sgds-close-button>`
-                : nothing}
-          </div>
-        `
+      <span class="badge-label">
+        <slot @slotchange=${this._handleLabelSlotChange}></slot>
+      </span>
+
+      ${this.dismissible
+            ? html `<sgds-close-button
+            size="sm"
+            aria-label="close the badge"
+            @click=${this.close}
+            variant=${this.outlined ? "dark" : "light"}
+          ></sgds-close-button>`
+            : nothing}
+    </div>`;
+    }
+    render() {
+        return (this.dismissible && this.show) || !this.dismissible
+            ? this.truncated
+                ? html `<sgds-tooltip content=${this.text}>${this._renderBadge()}</sgds-tooltip>`
+                : this._renderBadge()
             : nothing;
     }
 }
 SgdsBadge.styles = [...SgdsElement.styles, css_248z];
 /**@internal */
 SgdsBadge.dependencies = {
-    "sgds-close-button": SgdsCloseButton
+    "sgds-close-button": SgdsCloseButton,
+    "sgds-tooltip": SgdsTooltip
 };
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -104,9 +132,21 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsBadge.prototype, "dismissible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsBadge.prototype, "fullWidth", void 0);
+__decorate([
+    state()
+], SgdsBadge.prototype, "truncated", void 0);
+__decorate([
+    state()
+], SgdsBadge.prototype, "text", void 0);
 __decorate([
     watch("show")
 ], SgdsBadge.prototype, "_handleShowChange", null);
+__decorate([
+    watch("text")
+], SgdsBadge.prototype, "_handleTruncation", null);
 
 export { SgdsBadge, SgdsBadge as default };
 //# sourceMappingURL=sgds-badge.js.map

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 { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\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 when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\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    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\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":"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"}
+{"version":3,"file":"sgds-badge.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\n\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsTooltip from \"../Tooltip/sgds-tooltip\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\n\nimport { getTextContent } from \"../../utils/slot\";\n\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 * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.\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 when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-tooltip\": SgdsTooltip\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  /** Manually enable full width */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @state() private truncated = false;\n  @state() private text = \"\";\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /**@internal */\n  @watch(\"text\")\n  _handleTruncation() {\n    // checking of text height if its exceeding parent, it needs to be truncated\n    const badge = this.shadowRoot.querySelector(\".badge\");\n    const badgeLabel = this.shadowRoot.querySelector(\".badge-label\");\n\n    if (badge && badgeLabel) {\n      const labelHeight = badgeLabel.getBoundingClientRect().height;\n      const badgeHeight = badge.getBoundingClientRect().height;\n\n      this.truncated = labelHeight > badgeHeight;\n    }\n  }\n\n  private _handleLabelSlotChange(e: Event) {\n    this.text = getTextContent(e.target as HTMLSlotElement);\n    return;\n  }\n\n  private _renderBadge() {\n    return html`<div\n      class=\"  \n          ${classMap({\n        [`badge-dismissible`]: this.dismissible,\n        badge: true,\n        outlined: this.outlined,\n        truncated: this.truncated,\n        \"full-width\": this.fullWidth\n      })}\"\n      aria-hidden=${this.show ? \"false\" : \"true\"}\n    >\n      ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n\n      <span class=\"badge-label\">\n        <slot @slotchange=${this._handleLabelSlotChange}></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\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? this.truncated\n        ? html`<sgds-tooltip content=${this.text}>${this._renderBadge()}</sgds-tooltip>`\n        : this._renderBadge()\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["badgeStyle"],"mappings":"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"}

package/react/components/Input/input.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--input-border-radius:var(--sgds-form-border-radius-md)}.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius);display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.form-control-group>.form-control:focus{z-index:3}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}`;
+var css_248z = lit.css`:host{--input-border-radius:var(--sgds-form-border-radius-md)}.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius);display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.form-control-group>.form-control:focus{z-index:3}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:none}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=input.cjs.js.map

package/react/components/Input/input.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{--input-border-radius:var(--sgds-form-border-radius-md)}.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius);display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.form-control-group>.form-control:focus{z-index:3}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}`;
+var css_248z = css`:host{--input-border-radius:var(--sgds-form-border-radius-md)}.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius);display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.form-control-group>.form-control:focus{z-index:3}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:none}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=input.js.map

package/react/components/Input/sgds-input.cjs.js

@@ -23,7 +23,8 @@ var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
  * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
  *
  * @slot icon - The slot for leading icon of text input
- *
+ * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true
+ * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot
  * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.
  * @event sgds-input - Emitted when the control receives input and its value changes.
  * @event sgds-focus - Emitted when input is in focus.
@@ -53,6 +54,7 @@ class SgdsInput extends validatorMixin.SgdsFormValidatorMixin(formControlElement
         /**The input's value attribute. */
         this.value = "";
         this._isTouched = false;
+        this._showPassword = false;
     }
     /** Sets focus on the input. */
     focus(options) {
@@ -145,7 +147,7 @@ class SgdsInput extends validatorMixin.SgdsFormValidatorMixin(formControlElement
         ${this.prefix ? staticHtml_js.html `<span class="form-control-prefix">${this.prefix}</span>` : lit.nothing}
         <input
           class="form-control"
-          type=${this.type}
+          type=${this._inputType()}
           id=${this._controlId}
           name=${ifDefined_js.ifDefined(this.name)}
           placeholder=${ifDefined_js.ifDefined(this.placeholder)}
@@ -171,12 +173,29 @@ class SgdsInput extends validatorMixin.SgdsFormValidatorMixin(formControlElement
             ? `${this._controlId}-invalid`
             : ""}"
         />
-        ${this.loading ? staticHtml_js.html `<sgds-spinner size="sm"></sgds-spinner>` : lit.nothing}
-        ${this.valid ? staticHtml_js.html `<sgds-icon name="check-circle-fill" class="valid-icon"></sgds-icon>` : lit.nothing}
+        ${this.type === "password" ? this._renderPasswordToggle() : lit.nothing}
         ${this.suffix ? staticHtml_js.html `<span class="form-control-suffix">${this.suffix}</span>` : lit.nothing}
+        <slot name="trailing-icon">
+          ${this.loading ? staticHtml_js.html `<sgds-spinner size="sm"></sgds-spinner>` : lit.nothing}
+          ${this.valid ? staticHtml_js.html `<sgds-icon name="check-circle-fill" class="valid-icon"></sgds-icon>` : lit.nothing}
+        </slot>
       </div>
     `;
     }
+    _renderPasswordToggle() {
+        return staticHtml_js.html `<sgds-icon
+      tabIndex="0"
+      role="button"
+      name=${this._showPassword ? "eye-slash-fill" : "eye-fill"}
+      @click=${() => (this._showPassword = !this._showPassword)}
+    ></sgds-icon>`;
+    }
+    _inputType() {
+        if (this.type === "password" && this._showPassword) {
+            return "text";
+        }
+        return this.type;
+    }
     _renderFeedback() {
         const wantFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";
         return this.invalid && wantFeedbackText
@@ -213,7 +232,12 @@ class SgdsInput extends validatorMixin.SgdsFormValidatorMixin(formControlElement
             disabled: this.disabled
         })}"
       >
-        ${this._renderLabel()} ${this._renderInput()} ${this._renderFeedback()}
+        ${this._renderLabel()}
+        <div class="form-control-row">
+          ${this._renderInput()}
+          <slot name="action"></slot>
+        </div>
+        ${this._renderFeedback()}
       </div>
     `;
     }
@@ -284,6 +308,9 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.state()
 ], SgdsInput.prototype, "_isTouched", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsInput.prototype, "_showPassword", void 0);
 tslib.__decorate([
     watch.watch("_isTouched", { waitUntilFirstUpdate: true })
 ], SgdsInput.prototype, "_handleIsTouched", null);