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

package/components/Textarea/sgds-textarea.d.ts

@@ -1,5 +1,6 @@
-import SgdsElement from "../../base/sgds-element";
-import { SgdsFormControl } from "../../utils/form";
+import FormControlElement from "../../base/form-control-element";
+import { SgdsFormControl } from "../../utils/formSubmitController";
+declare const SgdsTextarea_base: (new (...args: any[]) => import("../../utils/validatorMixin").ToBeValidatedElementInterface) & typeof FormControlElement;
 /**
  * @summary Text areas allow for the collection of input longer than a single line.
  *
@@ -8,23 +9,19 @@ import { SgdsFormControl } from "../../utils/form";
  * @event sgds-focus - Emitted when textarea is in focus.
  * @event sgds-blur - Emitted when textarea loses focus.
  */
-export declare class SgdsTextarea extends SgdsElement implements SgdsFormControl {
+export declare class SgdsTextarea extends SgdsTextarea_base implements SgdsFormControl {
     static styles: import("lit").CSSResult[];
     /**@internal */
     textarea: HTMLTextAreaElement;
     /**@internal */
-    private readonly formSubmitController;
-    /**@internal */
     private resizeObserver;
-    /**The textarea's label */
-    label: string;
     /**The textarea's name attribute */
     name: string;
     /**The textarea's value attribute. */
     value: string;
     /**Sets the minimum length of the textarea */
     minlength: number;
-    /**Sets the maximum length of the textarea */
+    /**Sets the maximum length of the textarea. When maxlength is defined, a word count appears on bottom right of the input*/
     maxlength: number;
     /**Enables spell checking on the textarea */
     spellcheck: boolean;
@@ -32,14 +29,10 @@ export declare class SgdsTextarea extends SgdsElement implements SgdsFormControl
     rows: number;
     /**The textarea's placeholder text. */
     placeholder: string;
-    /**Feedback text for error state when validated */
+    /** Custom feedback text for error state when validated */
     invalidFeedback: string;
     /**Autofocus the textarea */
     autofocus: boolean;
-    /**Disables the textarea. */
-    disabled: boolean;
-    /**Makes the textarea a required field. */
-    required: boolean;
     /** Makes the textarea readonly. */
     readonly: boolean;
     /** Controls how the textarea can be resized. */
@@ -52,32 +45,50 @@ export declare class SgdsTextarea extends SgdsElement implements SgdsFormControl
     defaultValue: string;
     /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
     hasFeedback: boolean;
-    /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
-    invalid: boolean;
+    /** Makes the textarea as a required field. */
+    required: boolean;
     /** The textarea's hint text */
     hintText: string;
-    /** @internal The textarea's unique id */
-    private textareaId;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    private _isTouched;
     /** Sets focus on the textarea. */
     focus(options?: FocusOptions): void;
-    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    /** Sets blur on the textarea. */
+    blur(): void;
+    /**
+     * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+     * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
+     */
     reportValidity(): boolean;
+    /**
+     * Checks for validity without any native error popup message
+     */
+    checkValidity(): boolean;
+    /**
+     * Returns the ValidityState object
+     */
+    get validity(): ValidityState;
+    /**
+     * Returns the validation message based on the ValidityState
+     */
+    get validationMessage(): string;
     /** Selects all the text in the textarea. */
     select(): void;
     private _handleInvalid;
-    private _handleChange;
+    protected _handleChange(e: Event): void;
+    private _handleInputChange;
     private _handleFocus;
-    private handleBlur;
+    private _handleBlur;
     /** @internal */
     _handleRowsChange(): void;
     private _setTextareaHeight;
     /** @internal */
+    _handleIsTouched(): void;
+    /** @internal */
     _handleDisabledChange(): void;
     /** @internal */
     _handleValueChange(): void;
     protected _renderHintText(): import("lit-html").TemplateResult;
+    private _wordCount;
     render(): import("lit-html").TemplateResult;
 }
 export default SgdsTextarea;

package/components/Textarea/sgds-textarea.js

@@ -1,19 +1,15 @@
 import { __decorate } from 'tslib';
-import { query, property } from 'lit/decorators.js';
+import { nothing } from 'lit';
+import { query, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { html } from 'lit/static-html.js';
-import SgdsElement from '../../base/sgds-element.js';
+import FormControlElement from '../../base/form-control-element.js';
 import { defaultValue } from '../../utils/defaultvalue.js';
-import { FormSubmitController } from '../../utils/form.js';
-import genId from '../../utils/generateId.js';
+import { SgdsFormValidatorMixin } from '../../utils/validatorMixin.js';
 import { watch } from '../../utils/watch.js';
-import css_248z$4 from './textarea.js';
-import css_248z$2 from '../../styles/feedback.js';
-import css_248z$1 from '../../styles/form-label.js';
-import css_248z from '../../styles/form-hint.js';
-import css_248z$3 from '../../styles/form-placeholder.js';
+import css_248z from './textarea.js';
 
 /**
  * @summary Text areas allow for the collection of input longer than a single line.
@@ -23,13 +19,9 @@ import css_248z$3 from '../../styles/form-placeholder.js';
  * @event sgds-focus - Emitted when textarea is in focus.
  * @event sgds-blur - Emitted when textarea loses focus.
  */
-class SgdsTextarea extends SgdsElement {
+class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) {
     constructor() {
         super(...arguments);
-        /**@internal */
-        this.formSubmitController = new FormSubmitController(this);
-        /**The textarea's label */
-        this.label = "label";
         /**The textarea's value attribute. */
         this.value = "";
         /**Enables spell checking on the textarea */
@@ -38,14 +30,10 @@ class SgdsTextarea extends SgdsElement {
         this.rows = 4;
         /**The textarea's placeholder text. */
         this.placeholder = "Placeholder";
-        /**Feedback text for error state when validated */
+        /** Custom feedback text for error state when validated */
         this.invalidFeedback = "";
         /**Autofocus the textarea */
         this.autofocus = false;
-        /**Disables the textarea. */
-        this.disabled = false;
-        /**Makes the textarea a required field. */
-        this.required = false;
         /** Makes the textarea readonly. */
         this.readonly = false;
         /** Controls how the textarea can be resized. */
@@ -54,32 +42,44 @@ class SgdsTextarea extends SgdsElement {
         this.defaultValue = "";
         /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
         this.hasFeedback = false;
-        /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
-        this.invalid = false;
+        /** Makes the textarea as a required field. */
+        this.required = false;
         /** The textarea's hint text */
         this.hintText = "";
-        /** @internal The textarea's unique id */
-        this.textareaId = genId("textarea", "input");
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.resizeObserver = new ResizeObserver(() => this._setTextareaHeight());
-        this.updateComplete.then(() => {
-            this._setTextareaHeight();
-            this.resizeObserver.observe(this.textarea);
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.resizeObserver.unobserve(this.textarea);
+        this._isTouched = false;
     }
     /** Sets focus on the textarea. */
     focus(options) {
         this.textarea.focus(options);
     }
-    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    /** Sets blur on the textarea. */
+    blur() {
+        this.textarea.blur();
+    }
+    /**
+     * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+     * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
+     */
     reportValidity() {
-        return this.textarea.reportValidity();
+        return this._mixinReportValidity();
+    }
+    /**
+     * Checks for validity without any native error popup message
+     */
+    checkValidity() {
+        return this._mixinCheckValidity();
+    }
+    /**
+     * Returns the ValidityState object
+     */
+    get validity() {
+        return this._mixinGetValidity();
+    }
+    /**
+     * Returns the validation message based on the ValidityState
+     */
+    get validationMessage() {
+        return this._mixinGetValidationMessage();
     }
     /** Selects all the text in the textarea. */
     select() {
@@ -89,14 +89,21 @@ class SgdsTextarea extends SgdsElement {
         e.preventDefault();
         this.invalid = true;
     }
-    _handleChange(event) {
-        this.value = this.textarea.value;
-        this.emit(event);
+    _handleChange(e) {
+        this.value = this.input.value;
+        this.emit("sgds-change");
+        super._mixinHandleChange(e);
+    }
+    _handleInputChange(e) {
+        this.value = this.input.value;
+        this.emit("sgds-input");
+        super._mixinHandleInputChange(e);
     }
     _handleFocus() {
         this.emit("sgds-focus");
     }
-    handleBlur() {
+    _handleBlur() {
+        this._isTouched = true;
         this.emit("sgds-blur");
     }
     /** @internal */
@@ -113,23 +120,26 @@ class SgdsTextarea extends SgdsElement {
         }
     }
     /** @internal */
+    _handleIsTouched() {
+        if (this._isTouched) {
+            this.invalid = !this.textarea.checkValidity();
+        }
+    }
+    /** @internal */
     _handleDisabledChange() {
         // Disabled form controls are always valid, so we need to recheck validity when the state changes
-        this.textarea.disabled = this.disabled;
-        this.invalid = !this.textarea.checkValidity();
+        this.setInvalid(false);
     }
     /** @internal */
     _handleValueChange() {
-        this.invalid = !this.textarea.checkValidity();
         this.updateComplete.then(() => this._setTextareaHeight());
     }
     _renderHintText() {
-        const hintTextTemplate = html ` <div id="${this.textareaId}Help" class="form-text">${this.hintText}</div> `;
+        const hintTextTemplate = html ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
         return this.hintText && hintTextTemplate;
     }
-    render() {
-        // if maxlength is defined
-        const wordCount = html `
+    _wordCount() {
+        return html `
       <div
         class="form-text word-count ${classMap({
             "invalid-feedback": this.invalid && this.hasFeedback
@@ -138,13 +148,15 @@ class SgdsTextarea extends SgdsElement {
         ${this.value.length}/${this.maxlength}
       </div>
     `;
+    }
+    render() {
         return html `
       <div
         class="form-control-container ${classMap({
             disabled: this.disabled
         })}"
       >
-        <label for=${this.textareaId} class="form-label">${this.label}</label>
+        <label for=${this._controlId} class="form-label">${this.label}</label>
         <textarea
           class=${classMap({
             "form-control": true,
@@ -153,7 +165,7 @@ class SgdsTextarea extends SgdsElement {
             "textarea-resize-vertical": this.resize === "vertical",
             "textarea-resize-auto": this.resize === "auto"
         })}
-          id=${this.textareaId}
+          id=${this._controlId}
           name=${ifDefined(this.name)}
           rows=${ifDefined(this.rows)}
           placeholder=${ifDefined(this.placeholder)}
@@ -168,13 +180,12 @@ class SgdsTextarea extends SgdsElement {
           ?autofocus=${this.autofocus}
           autocorrect=${ifDefined(this.autocorrect)}
           inputmode=${ifDefined(this.inputmode)}
-          @input=${() => this._handleChange("sgds-input")}
-          @change=${() => this._handleChange("sgds-change")}
+          @input=${(e) => this._handleInputChange(e)}
+          @change=${(e) => this._handleChange(e)}
           @invalid=${(e) => this._handleInvalid(e)}
           @focus=${this._handleFocus}
-          @blur=${this.handleBlur}
-        >
-        </textarea>
+          @blur=${this._handleBlur}
+        ></textarea>
         <div class="textarea-info-container">
           ${this.invalid && this.hasFeedback
             ? html `
@@ -185,30 +196,22 @@ class SgdsTextarea extends SgdsElement {
                       fill="#B90000"
                     />
                   </svg>
-                  <div id="${this.textareaId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>
+                  <div id="${this._controlId}-invalid" class="invalid-feedback">
+                    ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
+                  </div>
                 </div>
               `
             : html `${this._renderHintText()}`}
-          ${this.maxlength > 0 ? wordCount : undefined}
+          ${this.maxlength > 0 ? this._wordCount() : nothing}
         </div>
       </div>
     `;
     }
 }
-SgdsTextarea.styles = [
-    ...SgdsElement.styles,
-    css_248z,
-    css_248z$1,
-    css_248z$2,
-    css_248z$3,
-    css_248z$4
-];
+SgdsTextarea.styles = [...FormControlElement.styles, css_248z];
 __decorate([
     query("textarea.form-control")
 ], SgdsTextarea.prototype, "textarea", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SgdsTextarea.prototype, "label", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsTextarea.prototype, "name", void 0);
@@ -236,12 +239,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsTextarea.prototype, "autofocus", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SgdsTextarea.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SgdsTextarea.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsTextarea.prototype, "readonly", void 0);
@@ -262,13 +259,19 @@ __decorate([
 ], SgdsTextarea.prototype, "hasFeedback", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], SgdsTextarea.prototype, "invalid", void 0);
+], SgdsTextarea.prototype, "required", void 0);
 __decorate([
     property({ reflect: true })
 ], SgdsTextarea.prototype, "hintText", void 0);
+__decorate([
+    state()
+], SgdsTextarea.prototype, "_isTouched", void 0);
 __decorate([
     watch("rows", { waitUntilFirstUpdate: true })
 ], SgdsTextarea.prototype, "_handleRowsChange", null);
+__decorate([
+    watch("_isTouched", { waitUntilFirstUpdate: true })
+], SgdsTextarea.prototype, "_handleIsTouched", null);
 __decorate([
     watch("disabled", { waitUntilFirstUpdate: true })
 ], SgdsTextarea.prototype, "_handleDisabledChange", null);

package/components/Textarea/sgds-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-textarea.js","sources":["../../../src/components/Textarea/sgds-textarea.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { FormSubmitController, SgdsFormControl } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nimport fromPlaceholderStyles from \"../../styles/form-placeholder.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than a single line.\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n */\nexport class SgdsTextarea extends SgdsElement implements SgdsFormControl {\n  static styles = [\n    ...SgdsElement.styles,\n    formHintStyles,\n    formLabelStyles,\n    feedbackStyles,\n    fromPlaceholderStyles,\n    textareaStyle\n  ];\n  /**@internal */\n  @query(\"textarea.form-control\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private readonly formSubmitController = new FormSubmitController(this);\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's label */\n  @property({ type: String, reflect: true }) label = \"label\";\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea */\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /**Disables the textarea. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  /**Makes the textarea a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: String, reflect: true }) autocorrect: string;\n  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /** The textarea's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** @internal The textarea's unique id */\n  private textareaId = genId(\"textarea\", \"input\");\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => this._setTextareaHeight());\n\n    this.updateComplete.then(() => {\n      this._setTextareaHeight();\n      this.resizeObserver.observe(this.textarea);\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver.unobserve(this.textarea);\n  }\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    return this.textarea.reportValidity();\n  }\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  private _handleChange(event: string) {\n    this.value = this.textarea.value;\n    this.emit(event);\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  /** @internal */\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  _handleRowsChange() {\n    this._setTextareaHeight();\n  }\n\n  private _setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.textarea.disabled = this.disabled;\n    this.invalid = !this.textarea.checkValidity();\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.invalid = !this.textarea.checkValidity();\n    this.updateComplete.then(() => this._setTextareaHeight());\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this.textareaId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  render() {\n    // if maxlength is defined\n    const wordCount = html`\n      <div\n        class=\"form-text word-count ${classMap({\n          \"invalid-feedback\": this.invalid && this.hasFeedback\n        })}\"\n      >\n        ${this.value.length}/${this.maxlength}\n      </div>\n    `;\n\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        <label for=${this.textareaId} class=\"form-label\">${this.label}</label>\n        <textarea\n          class=${classMap({\n            \"form-control\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            \"textarea-resize-none\": this.resize === \"none\",\n            \"textarea-resize-vertical\": this.resize === \"vertical\",\n            \"textarea-resize-auto\": this.resize === \"auto\"\n          })}\n          id=${this.textareaId}\n          name=${ifDefined(this.name)}\n          rows=${ifDefined(this.rows)}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          .value=${live(this.value)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          spellcheck=${ifDefined(this.spellcheck)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          ?autofocus=${this.autofocus}\n          autocorrect=${ifDefined(this.autocorrect)}\n          inputmode=${ifDefined(this.inputmode)}\n          @input=${() => this._handleChange(\"sgds-input\")}\n          @change=${() => this._handleChange(\"sgds-change\")}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          @focus=${this._handleFocus}\n          @blur=${this.handleBlur}\n        >\n        </textarea>\n        <div class=\"textarea-info-container\">\n          ${this.invalid && this.hasFeedback\n            ? html`\n                <div class=\"invalid-feedback-container\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path\n                      d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                      fill=\"#B90000\"\n                    />\n                  </svg>\n                  <div id=\"${this.textareaId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>\n                </div>\n              `\n            : html`${this._renderHintText()}`}\n          ${this.maxlength > 0 ? wordCount : undefined}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"names":["formHintStyles","formLabelStyles","feedbackStyles","fromPlaceholderStyles","textareaStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-textarea.js","sources":["../../../src/components/Textarea/sgds-textarea.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than a single line.\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n */\nexport class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, textareaStyle];\n  /**@internal */\n  @query(\"textarea.form-control\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea. When maxlength is defined, a word count appears on bottom right of the input*/\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /** Custom feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: String, reflect: true }) autocorrect: string;\n  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the textarea as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** The textarea's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n  /** Sets blur on the textarea. */\n  public blur() {\n    this.textarea.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-change\");\n    super._mixinHandleChange(e);\n  }\n  private _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-input\");\n    super._mixinHandleInputChange(e);\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  /** @internal */\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  _handleRowsChange() {\n    this._setTextareaHeight();\n  }\n\n  private _setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.textarea.checkValidity();\n    }\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.updateComplete.then(() => this._setTextareaHeight());\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  private _wordCount() {\n    return html`\n      <div\n        class=\"form-text word-count ${classMap({\n          \"invalid-feedback\": this.invalid && this.hasFeedback\n        })}\"\n      >\n        ${this.value.length}/${this.maxlength}\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        <label for=${this._controlId} class=\"form-label\">${this.label}</label>\n        <textarea\n          class=${classMap({\n            \"form-control\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            \"textarea-resize-none\": this.resize === \"none\",\n            \"textarea-resize-vertical\": this.resize === \"vertical\",\n            \"textarea-resize-auto\": this.resize === \"auto\"\n          })}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          rows=${ifDefined(this.rows)}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          .value=${live(this.value)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          spellcheck=${ifDefined(this.spellcheck)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          ?autofocus=${this.autofocus}\n          autocorrect=${ifDefined(this.autocorrect)}\n          inputmode=${ifDefined(this.inputmode)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n        ></textarea>\n        <div class=\"textarea-info-container\">\n          ${this.invalid && this.hasFeedback\n            ? html`\n                <div class=\"invalid-feedback-container\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path\n                      d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                      fill=\"#B90000\"\n                    />\n                  </svg>\n                  <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n                    ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                  </div>\n                </div>\n              `\n            : html`${this._renderHintText()}`}\n          ${this.maxlength > 0 ? this._wordCount() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"names":["textareaStyle"],"mappings":"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"}

package/components/Textarea/textarea.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}.form-control{appearance:none;background-clip:padding-box;background-color:var(--sgds-form-bg);border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md);color:var(--sgds-form-color);min-height:var(--sgds-dimension-136);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}.form-control[readonly]{border-color:var(--sgds-form-border-color-muted)}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:not([disabled]):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis)}.form-control:not([disabled]):not(.is-invalid):focus,.form-control:not([disabled]):not(.is-invalid):focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-control:disabled{background-color:var(--sgds-form-bg-muted)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`;
+var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}.form-control{appearance:none;background-clip:padding-box;background-color:var(--sgds-form-bg);border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md);color:var(--sgds-form-color);min-height:var(--sgds-dimension-136);outline:0;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}.form-control[readonly]{border-color:var(--sgds-form-border-color-muted)}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:not([disabled]):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis)}.form-control:not([disabled]):not(.is-invalid):focus,.form-control:not([disabled]):not(.is-invalid):focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus)}.form-control.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-control:disabled{background-color:var(--sgds-form-bg-muted)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`;
 
 export { css_248z as default };
 //# sourceMappingURL=textarea.js.map

package/components/Toast/index.umd.js

@@ -4550,7 +4550,7 @@
    */
   const ifDefined = (value) => value ?? nothing;
 
-  var css_248z$2 = 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$2 = 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)}`;
 
   /**
    * @license
@@ -4720,7 +4720,7 @@
     `;
       }
   }
-  SgdsCloseButton.styles = [css_248z$2];
+  SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$2];
   __decorate([
       property({ type: String })
   ], SgdsCloseButton.prototype, "ariaLabel", void 0);
@@ -4842,13 +4842,14 @@
       };
   }
 
-  var css_248z$1 = css`:host{--sgds-toast-border-radius:var(--sgds-border-radius-md)}.toast{--toast-border-color:var(--sgds-gray-800);--toast-header-color:light-dark(var(--sgds-gray-800),var(--sgds-gray-200));--toast-header-icon-color:var(--sgds-body-color);align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-neutral-bg-inverse);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-subtitle-color);display:flex;flex-direction:row;gap:var(--sgds-gap-xs);max-width:var(--sgds-dimension-480);min-width:var(--sgds-dimension-320);padding:var(--sgds-padding-md) var(--sgds-padding-md);pointer-events:auto;width:320px}.toast-content{word-wrap:break-word;color:var(--sgds-gray-600);gap:var(--sgds-gap-sm)}.toast-body,.toast-content{display:flex;flex-direction:column}.toast-action{word-wrap:break-word;color:var(--sgds-primary-color)}.toast-header strong{margin-right:auto;word-break:break-all}.close-btn{margin-left:auto}.d-none{display:none}`;
+  var css_248z$1 = css`:host{--sgds-toast-border-radius:var(--sgds-border-radius-md)}:host([variant=info]) slot[name=icon]::slotted(*){color:var(--sgds-primary-color)}:host([variant=success]) slot[name=icon]::slotted(*){color:var(--sgds-success-color)}:host([variant=danger]) slot[name=icon]::slotted(*){color:var(--sgds-danger-color)}:host([variant=warning]) slot[name=icon]::slotted(*){color:var(--sgds-warning-color)}.toast{align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-neutral-bg-inverse);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);display:flex;flex-direction:row;gap:var(--sgds-gap-xs);max-width:var(--sgds-dimension-480);min-width:var(--sgds-dimension-320);padding:var(--sgds-padding-md);pointer-events:auto;width:320px}.toast-content{word-wrap:break-word;gap:var(--sgds-gap-sm)}.toast-body,.toast-content{display:flex;flex-direction:column}.toast-body strong{line-height:var(--sgds-line-height-min)}.toast-body span{color:var(--sgds-default-color-subtle)}.toast-action{word-wrap:break-word;color:var(--sgds-primary-color)}.toast-header strong{margin-right:auto;word-break:break-all}.close-btn{margin-left:auto}.d-none{display:none}`;
 
   /**
    * @summary Toast allows you to convey quick messaging notifications to the user.
    *
    * @slot default - The content to pass into toast's body
    * @slot action - The content to pass into toast's action
+   * @slot icon - The icon in toast
    *
    *
    * @event sgds-show - Emitted on show.
@@ -4874,7 +4875,7 @@
           /**The variant styles of toast */
           this.variant = "info";
           /** Controls whether or not the Toast is dismissible */
-          this.dismissable = false;
+          this.dismissible = false;
       }
       /**@internal */
       static get scopedElements() {
@@ -4947,28 +4948,15 @@
         aria-live="assertive"
         aria-atomic="true"
       >
-        <i>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            class="bi bi-airplane"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Zm.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1c-.213 0-.458.158-.678.599Z"
-            ></path>
-          </svg>
-        </i>
+        <slot name="icon"></slot>
         <div class="toast-content">
           <div class="toast-body">
             <strong>${this.title}</strong>
-            <slot></slot>
+            <span><slot></slot></span>
           </div>
           <slot class="toast-action" name="action"></slot>
         </div>
-        ${this.dismissable
+        ${this.dismissible
             ? html$1 `<sgds-close-button
               class="close-btn"
               ariaLabel="close toast"
@@ -5003,7 +4991,7 @@
   ], SgdsToast.prototype, "variant", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
-  ], SgdsToast.prototype, "dismissable", void 0);
+  ], SgdsToast.prototype, "dismissible", void 0);
   __decorate([
       watch("show", { waitUntilFirstUpdate: true })
   ], SgdsToast.prototype, "handleShowChange", null);