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

package/components/Input/sgds-input.d.ts

@@ -1,7 +1,7 @@
 import FormControlElement from "../../base/form-control-element";
+import type { SgdsFormControl } from "../../utils/formSubmitController";
 import { SgdsSpinner } from "../Spinner/sgds-spinner";
-import type { SgdsFormControl } from "../../utils/form";
-import { FormSubmitController } from "../../utils/form";
+declare const SgdsInput_base: (new (...args: any[]) => import("../../utils/validatorMixin").ToBeValidatedElementInterface) & typeof FormControlElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
 /**
  * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
  *
@@ -9,19 +9,16 @@ import { FormSubmitController } from "../../utils/form";
  * @event sgds-input - Emitted when the control receives input and its value changes.
  * @event sgds-focus - Emitted when input is in focus.
  * @event sgds-blur - Emitted when input is not in focus.
+ * @event sgds-invalid - Emitted when input is invalid
+ * @event sgds-valid - Emitted when input is valid
  *
  */
-export declare class SgdsInput extends FormControlElement implements SgdsFormControl {
+export declare class SgdsInput extends SgdsInput_base implements SgdsFormControl {
     static styles: import("lit").CSSResult[];
     /**@internal */
     static get scopedElements(): {
         "sgds-spinner": typeof SgdsSpinner;
     };
-    /**@internal */
-    input: HTMLInputElement;
-    /**@internal */
-    protected readonly formSubmitController: FormSubmitController;
-    /** The type of input which works the same as HTMLInputElement */
     type: "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url";
     /** The prefix of the input */
     prefix: string;
@@ -33,6 +30,10 @@ export declare class SgdsInput extends FormControlElement implements SgdsFormCon
     minlength: number;
     /** Sets the maximum length of the input */
     maxlength: number;
+    /** The input's minimum value. Only applies number input types. */
+    min: number;
+    /** The input's maximum value. Only applies number input types. */
+    max: number;
     /** The input's placeholder text. */
     placeholder: string;
     /** A pattern to validate input against. */
@@ -46,33 +47,52 @@ export declare class SgdsInput extends FormControlElement implements SgdsFormCon
      * implied, allowing any numeric value. Only applies to number input types.
      */
     step: number | "any";
-    /**The input's value attribute. */
-    value: string;
+    /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+    hasFeedback: "style" | "text" | "both";
+    /**Feedback text for error state when validated */
+    invalidFeedback: string;
     /**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. */
     defaultValue: string;
     /** Marks the component as valid. */
     valid: boolean;
     /** Marks the component as loading. */
     loading: boolean;
-    /**@internal */
-    protected inputId: string;
+    /** Makes the input a required field. */
+    required: boolean;
+    /**The input's value attribute. */
+    value: string;
+    protected _isTouched: boolean;
     /** Sets focus on the input. */
     focus(options?: FocusOptions): void;
     /** Sets blur on the input. */
     blur(): void;
-    /** Checks for validity and shows the browser's validation message if the control is invalid. */
-    reportValidity(): boolean;
-    /** Sets a custom validation message. Pass an empty string to restore validity */
-    setCustomValidity(err: string): void;
     /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */
     setInvalid(bool: boolean): void;
-    protected _handleClick(): void;
-    protected _handleChange(event: string): 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;
     protected _handleFocus(): void;
-    protected _handleBlur(): void;
-    protected _handleKeyDown(event: KeyboardEvent): void;
+    private _handleBlur;
+    private _handleClick;
+    protected _handleChange(e: Event): void;
+    protected _handleInputChange(e: Event): void;
+    /** @internal */
+    _handleIsTouched(): void;
     _handleDisabledChange(): void;
-    _handleValueChange(): void;
     protected _renderInput(): import("lit-html").TemplateResult;
     protected _renderFeedback(): import("lit-html").TemplateResult;
     protected _renderLabel(): import("lit-html").TemplateResult;

package/components/Input/sgds-input.js

@@ -1,18 +1,19 @@
 import { __decorate } from 'tslib';
-import { query, property } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { nothing } from 'lit';
+import { 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 { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import FormControlElement from '../../base/form-control-element.js';
-import { SgdsSpinner } from '../Spinner/sgds-spinner.js';
+import css_248z from '../../styles/form-placeholder.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 from './input.js';
-import { nothing } from 'lit';
+import { SgdsSpinner } from '../Spinner/sgds-spinner.js';
+import css_248z$1 from './input.js';
 
 /**
  * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
@@ -21,14 +22,13 @@ import { nothing } from 'lit';
  * @event sgds-input - Emitted when the control receives input and its value changes.
  * @event sgds-focus - Emitted when input is in focus.
  * @event sgds-blur - Emitted when input is not in focus.
+ * @event sgds-invalid - Emitted when input is invalid
+ * @event sgds-valid - Emitted when input is valid
  *
  */
-class SgdsInput extends FormControlElement {
+class SgdsInput extends SgdsFormValidatorMixin(ScopedElementsMixin(FormControlElement)) {
     constructor() {
         super(...arguments);
-        /**@internal */
-        this.formSubmitController = new FormSubmitController(this);
-        /** The type of input which works the same as HTMLInputElement */
         this.type = "text";
         /** The input's placeholder text. */
         this.placeholder = "placeholder";
@@ -36,16 +36,17 @@ class SgdsInput extends FormControlElement {
         this.autofocus = false;
         /** Makes the input readonly. */
         this.readonly = false;
-        /**The input's value attribute. */
-        this.value = "";
         /**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. */
         this.defaultValue = "";
         /** Marks the component as valid. */
         this.valid = false;
         /** Marks the component as loading. */
         this.loading = false;
-        /**@internal */
-        this.inputId = genId("input", this.type);
+        /** Makes the input a required field. */
+        this.required = false;
+        /**The input's value attribute. */
+        this.value = "";
+        this._isTouched = false;
     }
     /**@internal */
     static get scopedElements() {
@@ -61,60 +62,79 @@ class SgdsInput extends FormControlElement {
     blur() {
         this.input.blur();
     }
-    /** Checks for validity and shows the browser's validation message if the control is invalid. */
-    reportValidity() {
-        return this.input.reportValidity();
-    }
-    /** Sets a custom validation message. Pass an empty string to restore validity */
-    setCustomValidity(err) {
-        return this.input.setCustomValidity(err);
-    }
     /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */
     setInvalid(bool) {
         this.invalid = bool;
+        if (bool) {
+            this.emit("sgds-invalid");
+        }
+        else {
+            this.emit("sgds-valid");
+        }
     }
-    _handleClick() {
-        this.focus();
+    /**
+     * 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._mixinReportValidity();
     }
-    _handleChange(event) {
-        this.value = this.input.value;
-        this.emit(event);
+    /**
+     * 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();
     }
     _handleFocus() {
         this.emit("sgds-focus");
     }
     _handleBlur() {
+        this._isTouched = true;
         this.emit("sgds-blur");
     }
-    _handleKeyDown(event) {
-        const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-        // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before
-        // submitting to allow users to cancel the keydown event if they need to
-        if (event.key === "Enter" && !hasModifier) {
-            setTimeout(() => {
-                // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing
-                if (!event.defaultPrevented && !event.isComposing) {
-                    this.formSubmitController.submit();
-                }
-            });
+    _handleClick() {
+        this.focus();
+    }
+    _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);
+    }
+    /** @internal */
+    _handleIsTouched() {
+        if (this._isTouched) {
+            this.setInvalid(!this._mixinCheckValidity());
         }
     }
     _handleDisabledChange() {
         // Disabled form controls are always valid, so we need to recheck validity when the state changes
-        this.input.disabled = this.disabled;
-        this.invalid = !this.input.checkValidity();
-    }
-    _handleValueChange() {
-        this.invalid = !this.input.checkValidity();
+        this.setInvalid(false);
     }
     _renderInput() {
+        const wantFeedbackStyle = this.hasFeedback === "both" || this.hasFeedback === "style";
         return html `
       <div
         class="form-control-group ${classMap({
             disabled: this.disabled,
             readonly: this.readonly,
-            "is-invalid": this.invalid && this.hasFeedback,
-            "quantity-toggle": this.classList.contains("quantity-toggle")
+            "is-invalid": this.invalid && wantFeedbackStyle
         })}"
         @click=${this._handleClick}
       >
@@ -123,7 +143,7 @@ class SgdsInput extends FormControlElement {
         <input
           class="form-control"
           type=${this.type}
-          id=${this.inputId}
+          id=${this._controlId}
           name=${ifDefined(this.name)}
           placeholder=${ifDefined(this.placeholder)}
           aria-invalid=${this.invalid ? "true" : "false"}
@@ -138,15 +158,14 @@ class SgdsInput extends FormControlElement {
           min=${ifDefined(this.min)}
           max=${ifDefined(this.max)}
           step=${ifDefined(this.step)}
-          @input=${() => this._handleChange("sgds-input")}
-          @change=${() => this._handleChange("sgds-change")}
-          @keydown=${this._handleKeyDown}
+          @input=${(e) => this._handleInputChange(e)}
+          @change=${(e) => this._handleChange(e)}
           @invalid=${() => this.setInvalid(true)}
           @focus=${this._handleFocus}
           @blur=${this._handleBlur}
-          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this.inputId}-invalid` : undefined)}
-          aria-labelledby="${this.labelId} ${this.inputId}Help ${this.invalid && this.hasFeedback
-            ? `${this.inputId}-invalid`
+          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}
+          aria-labelledby="${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback
+            ? `${this._controlId}-invalid`
             : ""}"
         />
         ${this.loading ? html `<sgds-spinner size="sm"></sgds-spinner>` : nothing}
@@ -163,7 +182,8 @@ class SgdsInput extends FormControlElement {
     `;
     }
     _renderFeedback() {
-        return this.invalid && this.hasFeedback
+        const wantFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";
+        return this.invalid && wantFeedbackText
             ? html ` <div class="invalid-feedback-container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
             <path
@@ -171,15 +191,17 @@ class SgdsInput extends FormControlElement {
               fill="#B90000"
             />
           </svg>
-          <div id="${this.inputId}-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()}`;
     }
     _renderLabel() {
         const labelTemplate = html `
       <label
-        for=${this.inputId}
-        id=${this.labelId}
+        for=${this._controlId}
+        id=${this._labelId}
         class=${classMap({
             "form-label": true,
             required: this.required
@@ -190,7 +212,7 @@ class SgdsInput extends FormControlElement {
         return this.label && labelTemplate;
     }
     _renderHintText() {
-        const hintTextTemplate = html ` <div id="${this.inputId}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() {
@@ -205,10 +227,7 @@ class SgdsInput extends FormControlElement {
     `;
     }
 }
-SgdsInput.styles = [...FormControlElement.styles, css_248z];
-__decorate([
-    query("input.form-control")
-], SgdsInput.prototype, "input", void 0);
+SgdsInput.styles = [...FormControlElement.styles, css_248z, css_248z$1];
 __decorate([
     property({ reflect: true })
 ], SgdsInput.prototype, "type", void 0);
@@ -227,6 +246,12 @@ __decorate([
 __decorate([
     property({ type: Number, reflect: true })
 ], SgdsInput.prototype, "maxlength", void 0);
+__decorate([
+    property()
+], SgdsInput.prototype, "min", void 0);
+__decorate([
+    property()
+], SgdsInput.prototype, "max", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsInput.prototype, "placeholder", void 0);
@@ -243,8 +268,11 @@ __decorate([
     property()
 ], SgdsInput.prototype, "step", void 0);
 __decorate([
-    property({ reflect: true })
-], SgdsInput.prototype, "value", void 0);
+    property({ type: String, reflect: true })
+], SgdsInput.prototype, "hasFeedback", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsInput.prototype, "invalidFeedback", void 0);
 __decorate([
     defaultValue()
 ], SgdsInput.prototype, "defaultValue", void 0);
@@ -254,12 +282,21 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsInput.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsInput.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsInput.prototype, "value", void 0);
+__decorate([
+    state()
+], SgdsInput.prototype, "_isTouched", void 0);
+__decorate([
+    watch("_isTouched", { waitUntilFirstUpdate: true })
+], SgdsInput.prototype, "_handleIsTouched", null);
 __decorate([
     watch("disabled", { waitUntilFirstUpdate: true })
 ], SgdsInput.prototype, "_handleDisabledChange", null);
-__decorate([
-    watch("value", { waitUntilFirstUpdate: true })
-], SgdsInput.prototype, "_handleValueChange", null);
 
 export { SgdsInput, SgdsInput as default };
 //# sourceMappingURL=sgds-input.js.map

package/components/Input/sgds-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-input.js","sources":["../../../src/components/Input/sgds-input.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 { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/form\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport inputStyle from \"./input.css\";\nimport { nothing } from \"lit\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on 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 input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n *\n */\nexport class SgdsInput extends FormControlElement implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, inputStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-spinner\": SgdsSpinner\n    };\n  }\n  /**@internal */\n  @query(\"input.form-control\") input: HTMLInputElement;\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this);\n  /** The type of input which works the same as HTMLInputElement */\n  @property({ reflect: true }) type: \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" =\n    \"text\";\n\n  /** The prefix of the input */\n  @property({ type: String }) prefix: string;\n\n  /** The suffix of the input */\n  @property({ type: String }) suffix: string;\n\n  /** Optional. Pass svg html of icons in string form*/\n  @property({ type: String }) icon: string;\n\n  /** Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n\n  /** Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n  /** A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\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\n  /** Marks the component as valid. */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /** Marks the component as loading. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /**@internal */\n  protected inputId: string = genId(\"input\", this.type);\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    return this.input.reportValidity();\n  }\n  /** Sets a custom validation message. Pass an empty string to restore validity */\n  public setCustomValidity(err: string) {\n    return this.input.setCustomValidity(err);\n  }\n  /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */\n  public setInvalid(bool: boolean) {\n    this.invalid = bool;\n  }\n\n  protected _handleClick() {\n    this.focus();\n  }\n\n  protected _handleChange(event: string) {\n    this.value = this.input.value;\n    this.emit(event);\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  protected _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === \"Enter\" && !hasModifier) {\n      setTimeout(() => {\n        // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.formSubmitController.submit();\n        }\n      });\n    }\n  }\n\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.input.disabled = this.disabled;\n    this.invalid = !this.input.checkValidity();\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.invalid = !this.input.checkValidity();\n  }\n  protected _renderInput() {\n    return html`\n      <div\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && this.hasFeedback,\n          \"quantity-toggle\": this.classList.contains(\"quantity-toggle\")\n        })}\"\n        @click=${this._handleClick}\n      >\n        ${this.icon ? html`<span class=\"form-control-icon\">${unsafeSVG(this.icon)}</span>` : nothing}\n        ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n        <input\n          class=\"form-control\"\n          type=${this.type}\n          id=${this.inputId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          pattern=${ifDefined(this.pattern)}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${live(this.value)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step as number)}\n          @input=${() => this._handleChange(\"sgds-input\")}\n          @change=${() => this._handleChange(\"sgds-change\")}\n          @keydown=${this._handleKeyDown}\n          @invalid=${() => this.setInvalid(true)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this.inputId}-invalid` : undefined)}\n          aria-labelledby=\"${this.labelId} ${this.inputId}Help ${this.invalid && this.hasFeedback\n            ? `${this.inputId}-invalid`\n            : \"\"}\"\n        />\n        ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n        ${this.valid\n          ? html`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n              <path\n                d=\"M21 12.5C21 17.4706 16.9706 21.5 12 21.5C7.02944 21.5 3 17.4706 3 12.5C3 7.52944 7.02944 3.5 12 3.5C16.9706 3.5 21 7.52944 21 12.5ZM16.5341 9.09088C16.2046 8.76137 15.6704 8.76137 15.3409 9.09088C15.3329 9.09884 15.3254 9.10726 15.3185 9.11612L11.4121 14.0938L9.05686 11.7386C8.72736 11.4091 8.19312 11.4091 7.86362 11.7386C7.53411 12.0681 7.53411 12.6024 7.86362 12.9319L10.8409 15.9091C11.1704 16.2386 11.7046 16.2386 12.0341 15.9091C12.0415 15.9018 12.0484 15.894 12.0549 15.8859L16.5461 10.2719C16.8636 9.94154 16.8596 9.41634 16.5341 9.09088Z\"\n                fill=\"#006B00\"\n              />\n            </svg>`\n          : nothing}\n        ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n      </div>\n    `;\n  }\n  protected _renderFeedback() {\n    return this.invalid && this.hasFeedback\n      ? html` <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.inputId}-invalid\" class=\"invalid-feedback\">${this.invalidFeedback}</div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this.inputId}\n        id=${this.labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this.inputId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        ${this._renderLabel()} ${this._renderInput()} ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"names":["inputStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-input.js","sources":["../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on 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 input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput\n  extends SgdsFormValidatorMixin(ScopedElementsMixin(FormControlElement))\n  implements SgdsFormControl\n{\n  static styles = [...FormControlElement.styles, formPlaceholderStyles, inputStyle];\n\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-spinner\": SgdsSpinner\n    };\n  }\n  @property({ reflect: true }) type: \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" =\n    \"text\";\n\n  /** The prefix of the input */\n  @property({ type: String }) prefix: string;\n\n  /** The suffix of the input */\n  @property({ type: String }) suffix: string;\n\n  /** Optional. Pass svg html of icons in string form*/\n  @property({ type: String }) icon: string;\n\n  /** Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n\n  /** Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n  /** A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\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\n  /** Marks the component as valid. */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /** Marks the component as loading. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n\n  @state() protected _isTouched = false;\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */\n  public setInvalid(bool: boolean) {\n    this.invalid = bool;\n    if (bool) {\n      this.emit(\"sgds-invalid\");\n    } else {\n      this.emit(\"sgds-valid\");\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  /**\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  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n  private _handleClick() {\n    this.focus();\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-change\");\n    super._mixinHandleChange(e);\n  }\n  protected _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-input\");\n    super._mixinHandleInputChange(e);\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\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  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    return html`\n      <div\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        ${this.icon ? html`<span class=\"form-control-icon\">${unsafeSVG(this.icon)}</span>` : nothing}\n        ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n        <input\n          class=\"form-control\"\n          type=${this.type}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          pattern=${ifDefined(this.pattern)}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${live(this.value)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step as number)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${() => this.setInvalid(true)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n        />\n        ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n        ${this.valid\n          ? html`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n              <path\n                d=\"M21 12.5C21 17.4706 16.9706 21.5 12 21.5C7.02944 21.5 3 17.4706 3 12.5C3 7.52944 7.02944 3.5 12 3.5C16.9706 3.5 21 7.52944 21 12.5ZM16.5341 9.09088C16.2046 8.76137 15.6704 8.76137 15.3409 9.09088C15.3329 9.09884 15.3254 9.10726 15.3185 9.11612L11.4121 14.0938L9.05686 11.7386C8.72736 11.4091 8.19312 11.4091 7.86362 11.7386C7.53411 12.0681 7.53411 12.6024 7.86362 12.9319L10.8409 15.9091C11.1704 16.2386 11.7046 16.2386 12.0341 15.9091C12.0415 15.9018 12.0484 15.894 12.0549 15.8859L16.5461 10.2719C16.8636 9.94154 16.8596 9.41634 16.5341 9.09088Z\"\n                fill=\"#006B00\"\n              />\n            </svg>`\n          : nothing}\n        ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n      </div>\n    `;\n  }\n  protected _renderFeedback() {\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    return this.invalid && wantFeedbackText\n      ? html` <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      : html`${this._renderHintText()}`;\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\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  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        ${this._renderLabel()} ${this._renderInput()} ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"names":["formPlaceholderStyles","inputStyle"],"mappings":"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"}

package/components/Masthead/index.umd.js

@@ -4121,7 +4121,7 @@
   }
   SgdsElement.styles = [css_248z$3];
 
-  var css_248z$2 = css`:host{--masthead-max-width:1440px;--masthead-padding-x:2rem}b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{color:light-dark(#252525,#eaeaea);font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#eaeaea,#252525)}.container{margin-left:auto;margin-right:auto;max-width:var(--masthead-max-width);padding:.25rem var(--masthead-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:.75rem;row-gap:0}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0049dc,#7fb5ff);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0022b9,#5592ff)}.panel{background-color:light-dark(hsla(0,0%,5%,.05),hsla(0,0%,100%,.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#595959,#b2b2b2)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#0e0e0e,#fff)}a.trusted-websites-link{color:light-dark(#0049dc,#7fb5ff);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0022b9,#5592ff)}@media screen and (max-width:768px){.container{--masthead-padding-x:1rem}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
+  var css_248z$2 = css`:host{--masthead-max-width:1440px;--masthead-padding-x:2rem}b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{color:light-dark(#252525,#eaeaea);font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#eaeaea,#252525)}.container{margin-left:auto;margin-right:auto;max-width:var(--masthead-max-width);padding:.25rem var(--masthead-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0049dc,#7fb5ff);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0022b9,#5592ff)}.panel{background-color:light-dark(hsla(0,0%,5%,.05),hsla(0,0%,100%,.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#595959,#b2b2b2)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#0e0e0e,#fff)}a.trusted-websites-link{color:light-dark(#0049dc,#7fb5ff);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0022b9,#5592ff)}@media screen and (max-width:768px){.container{--masthead-padding-x:1rem}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
 
   var css_248z$1 = css`svg{vertical-align:middle}`;
 

package/components/Masthead/masthead.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host{--masthead-max-width:1440px;--masthead-padding-x:2rem}b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{color:light-dark(#252525,#eaeaea);font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#eaeaea,#252525)}.container{margin-left:auto;margin-right:auto;max-width:var(--masthead-max-width);padding:.25rem var(--masthead-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:.75rem;row-gap:0}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0049dc,#7fb5ff);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0022b9,#5592ff)}.panel{background-color:light-dark(hsla(0,0%,5%,.05),hsla(0,0%,100%,.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#595959,#b2b2b2)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#0e0e0e,#fff)}a.trusted-websites-link{color:light-dark(#0049dc,#7fb5ff);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0022b9,#5592ff)}@media screen and (max-width:768px){.container{--masthead-padding-x:1rem}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
+var css_248z = css`:host{--masthead-max-width:1440px;--masthead-padding-x:2rem}b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{color:light-dark(#252525,#eaeaea);font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#eaeaea,#252525)}.container{margin-left:auto;margin-right:auto;max-width:var(--masthead-max-width);padding:.25rem var(--masthead-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0049dc,#7fb5ff);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0022b9,#5592ff)}.panel{background-color:light-dark(hsla(0,0%,5%,.05),hsla(0,0%,100%,.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#595959,#b2b2b2)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#0e0e0e,#fff)}a.trusted-websites-link{color:light-dark(#0049dc,#7fb5ff);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0022b9,#5592ff)}@media screen and (max-width:768px){.container{--masthead-padding-x:1rem}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=masthead.js.map

package/components/Modal/index.umd.js

@@ -5019,7 +5019,7 @@
 
   const ScopedElementsMixin = dedupeMixin(ScopedElementsMixinImplementation);
 
-  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)}`;
 
   /**
    * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.
@@ -5057,7 +5057,7 @@
     `;
       }
   }
-  SgdsCloseButton.styles = [css_248z$2];
+  SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$2];
   __decorate([
       property({ type: String })
   ], SgdsCloseButton.prototype, "ariaLabel", void 0);