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

package/react/components/Radio/sgds-radio-group.js

@@ -3,13 +3,11 @@ import { __decorate } from 'tslib';
 import { html, nothing } from 'lit';
 import { query, state, property, queryAssignedElements } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import SgdsElement from '../../base/sgds-element.js';
-import { FormSubmitController } from '../../utils/form.js';
+import { live } from 'lit/directives/live.js';
+import FormControlElement from '../../base/form-control-element.js';
+import { SgdsFormValidatorMixin } from '../../utils/validatorMixin.js';
 import { watch } from '../../utils/watch.js';
-import css_248z$2 from './radio-group.js';
-import css_248z from '../../styles/feedback.js';
-import css_248z$1 from '../../styles/form-label.js';
-import css_248z$3 from '../../styles/form-hint.js';
+import css_248z from './radio-group.js';
 
 /**
  * @summary RadioGroup group multiple radios so they function as a single form control.
@@ -20,43 +18,46 @@ import css_248z$3 from '../../styles/form-hint.js';
  *
  *
  */
-class SgdsRadioGroup extends SgdsElement {
+class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {
     constructor() {
         super(...arguments);
         /**@internal */
-        this.formSubmitController = new FormSubmitController(this, {
-            defaultValue: (control) => control.defaultValue
-        });
-        /**@internal */
         this.defaultValue = "";
-        /**@internal */
-        this.customErrorMessage = "";
-        /** The radio group's label  */
-        this.label = "";
-        /**  This will be true when the control is in an invalid state. */
-        this.invalid = false;
         /** The selected value of the control. */
         this.value = "";
-        /** The name assigned to the radio controls. */
-        this.name = "option";
-        /** Ensures a child radio is checked before allowing the containing form to submit. */
-        this.required = false;
         /**Feedback text for error state when validated */
         this.invalidFeedback = "";
         /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
         this.hasFeedback = false;
-        /** The radio group's hint text */
-        this.hintText = "";
+        /** Makes the input as a required field. */
+        this.required = false;
+        this._isTouched = false;
     }
     _handleValueChange() {
         this.emit("sgds-change", { detail: { value: this.value } });
         this._updateCheckedRadio();
     }
+    _handleInvalidChange() {
+        this._radios.forEach(r => (r.invalid = this.invalid));
+    }
+    /**
+     * radio requries a custom _mixinResetFormControl as the update of input value
+     * requires to fire a reset event manually
+     * */
+    _mixinResetFormControl() {
+        this.value = this.input.value = this.defaultValue;
+        this._updateInputValue("reset");
+        this._mixinResetValidity(this.input);
+    }
     connectedCallback() {
         super.connectedCallback();
         this.defaultValue = this.value;
+        this.addEventListener("sgds-blur", () => {
+            this._isTouched = true;
+        });
     }
-    firstUpdated() {
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
         const radios = this._radios;
         radios.forEach((item, index) => {
             if (radios.length > 1) {
@@ -72,33 +73,9 @@ class SgdsRadioGroup extends SgdsElement {
                 }
             }
         });
-    }
-    /** Gets and return the ValidityState object.  */
-    get validity() {
-        const hasMissingData = !((this.value && this.required) || !this.required);
-        const hasCustomError = this.customErrorMessage !== "";
-        return {
-            badInput: false,
-            customError: hasCustomError,
-            patternMismatch: false,
-            rangeOverflow: false,
-            rangeUnderflow: false,
-            stepMismatch: false,
-            tooLong: false,
-            tooShort: false,
-            typeMismatch: false,
-            valid: hasMissingData ? false : true,
-            valueMissing: !hasMissingData
-        };
-    }
-    /** Checks for validity and shows the browser's validation message if the control is invalid. */
-    reportValidity() {
-        const validity = this.validity;
-        this.invalid = !validity.valid;
-        if (!validity.valid) {
-            this._showNativeErrorMessage();
+        if (this.value) {
+            this._updateInputValue("change");
         }
-        return !this.invalid;
     }
     _handleRadioClick(event) {
         event.preventDefault();
@@ -107,11 +84,20 @@ class SgdsRadioGroup extends SgdsElement {
             return;
         }
         this.value = target.value;
+        this._updateInputValue();
         const radios = this._radios;
         radios.forEach(radio => {
             return (radio.checked = radio === target);
         });
     }
+    /**
+     * when input value is set programatically, need to manually dispatch a change event
+     * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input
+     */
+    _updateInputValue(eventName = "change") {
+        this.input.value = this.value;
+        this.input.dispatchEvent(new InputEvent(eventName));
+    }
     _handleKeyDown(event) {
         var _a;
         if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) {
@@ -133,6 +119,7 @@ class SgdsRadioGroup extends SgdsElement {
             radio.tabIndex = -1;
         });
         this.value = radios[index].value;
+        this._updateInputValue();
         radios[index].checked = true;
         radios[index].tabIndex = 0;
         // preventDefault at the end to allow Tab
@@ -141,29 +128,61 @@ class SgdsRadioGroup extends SgdsElement {
     _handleSlotChange() {
         const radios = this._radios;
         radios.forEach(radio => (radio.checked = radio.value === this.value));
+        this._disabledChildRadios();
         if (!radios.some(radio => radio.checked)) {
             if (radios[0])
                 radios[0].tabIndex = 0;
         }
     }
-    _handleInvalid(e) {
-        e.preventDefault();
-        this.invalid = true;
-        this._radios.forEach(radio => (radio.invalid = true));
-    }
-    _showNativeErrorMessage() {
-        this.input.reportValidity();
-    }
     _updateCheckedRadio() {
         const radios = this._radios;
         radios.forEach(radio => (radio.checked = radio.value === this.value));
-        this.invalid = !this.validity.valid;
-        this._radios.forEach(radio => (radio.invalid = this.invalid));
     }
     _renderHintText() {
-        const hintTextTemplate = html ` <div class="form-text">${this.hintText}</div> `;
+        const hintTextTemplate = html ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
         return this.hintText && hintTextTemplate;
     }
+    /**
+     * 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();
+    }
+    /**
+     * 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();
+    }
+    _handleIsTouched() {
+        if (this._isTouched) {
+            this.invalid = !this.input.checkValidity();
+        }
+    }
+    _handleDisabledChange() {
+        // Disabled form controls are always valid, so we need to recheck validity when the state changes
+        this.setInvalid(false);
+        this._disabledChildRadios();
+    }
+    _disabledChildRadios() {
+        if (this.disabled) {
+            const radios = this._radios;
+            radios.forEach(radio => (radio.disabled = this.disabled));
+        }
+    }
     render() {
         const defaultSlot = html `
       <slot
@@ -195,7 +214,8 @@ class SgdsRadioGroup extends SgdsElement {
         })}"
           ?required=${this.required}
           tabindex="-1"
-          @invalid=${(e) => this._handleInvalid(e)}
+          @change=${(e) => super._mixinHandleChange(e)}
+          .value=${live(this.value)}
         />
         ${this.invalid && this.hasFeedback
             ? html `
@@ -206,7 +226,9 @@ class SgdsRadioGroup extends SgdsElement {
                     fill="#B90000"
                   />
                 </svg>
-                <div id="radio-group-feedback" tabindex="0" class="invalid-feedback">${this.invalidFeedback}</div>
+                <div id="radio-group-feedback" tabindex="0" class="invalid-feedback">
+                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
+                </div>
               </div>
             `
             : nothing}
@@ -214,34 +236,16 @@ class SgdsRadioGroup extends SgdsElement {
     `;
     }
 }
-SgdsRadioGroup.styles = [...SgdsElement.styles, css_248z, css_248z$1, css_248z$2, css_248z$3];
+SgdsRadioGroup.styles = [...FormControlElement.styles, css_248z];
 __decorate([
     query("slot:not([name])")
 ], SgdsRadioGroup.prototype, "defaultSlot", void 0);
-__decorate([
-    query(".radio-group-validation-input")
-], SgdsRadioGroup.prototype, "input", void 0);
 __decorate([
     state()
 ], SgdsRadioGroup.prototype, "defaultValue", void 0);
-__decorate([
-    state()
-], SgdsRadioGroup.prototype, "customErrorMessage", void 0);
-__decorate([
-    property({ reflect: true })
-], SgdsRadioGroup.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SgdsRadioGroup.prototype, "invalid", void 0);
 __decorate([
     property({ reflect: true })
 ], SgdsRadioGroup.prototype, "value", void 0);
-__decorate([
-    property({ reflect: true })
-], SgdsRadioGroup.prototype, "name", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SgdsRadioGroup.prototype, "required", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsRadioGroup.prototype, "invalidFeedback", void 0);
@@ -249,14 +253,26 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsRadioGroup.prototype, "hasFeedback", void 0);
 __decorate([
-    property({ reflect: true })
-], SgdsRadioGroup.prototype, "hintText", void 0);
+    property({ type: Boolean, reflect: true })
+], SgdsRadioGroup.prototype, "required", void 0);
 __decorate([
     watch("value", { waitUntilFirstUpdate: true })
 ], SgdsRadioGroup.prototype, "_handleValueChange", null);
+__decorate([
+    watch("invalid", { waitUntilFirstUpdate: true })
+], SgdsRadioGroup.prototype, "_handleInvalidChange", null);
+__decorate([
+    state()
+], SgdsRadioGroup.prototype, "_isTouched", void 0);
 __decorate([
     queryAssignedElements()
 ], SgdsRadioGroup.prototype, "_radios", void 0);
+__decorate([
+    watch("_isTouched", { waitUntilFirstUpdate: true })
+], SgdsRadioGroup.prototype, "_handleIsTouched", null);
+__decorate([
+    watch("disabled", { waitUntilFirstUpdate: true })
+], SgdsRadioGroup.prototype, "_handleDisabledChange", null);
 
 export { SgdsRadioGroup, SgdsRadioGroup as default };
 //# sourceMappingURL=sgds-radio-group.js.map

package/react/components/Radio/sgds-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-radio-group.js","sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { FormSubmitController } from \"../../utils/form\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n *\n *\n */\nexport class SgdsRadioGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, feedbackStyles, formLabelStyles, radioGroupStyles, formHintStyles];\n  /**@internal */\n  protected readonly formSubmitController = new FormSubmitController(this, {\n    defaultValue: (control: SgdsRadioGroup) => control.defaultValue\n  });\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n  /**@internal */\n  @query(\".radio-group-validation-input\") input: HTMLInputElement;\n  /**@internal */\n  @state() defaultValue = \"\";\n  /**@internal */\n  @state() private customErrorMessage = \"\";\n\n  /** The radio group's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /**  This will be true when the control is in an invalid state. */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /** The name assigned to the radio controls. */\n  @property({ reflect: true }) name = \"option\";\n\n  /** Ensures a child radio is checked before allowing the containing form to submit. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** The radio group's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.emit(\"sgds-change\", { detail: { value: this.value } });\n    this._updateCheckedRadio();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n  }\n\n  firstUpdated() {\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n  }\n\n  /** Gets and return the ValidityState object.  */\n  get validity(): ValidityState {\n    const hasMissingData = !((this.value && this.required) || !this.required);\n    const hasCustomError = this.customErrorMessage !== \"\";\n    return {\n      badInput: false,\n      customError: hasCustomError,\n      patternMismatch: false,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valid: hasMissingData ? false : true,\n      valueMissing: !hasMissingData\n    };\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity(): boolean {\n    const validity = this.validity;\n\n    this.invalid = !validity.valid;\n\n    if (!validity.valid) {\n      this._showNativeErrorMessage();\n    }\n\n    return !this.invalid;\n  }\n  /**@internal */\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    event.preventDefault();\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      return (radio.checked = radio === target);\n    });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    // preventDefault at the end to allow Tab\n    event.preventDefault();\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n    this._radios.forEach(radio => (radio.invalid = true));\n  }\n\n  private _showNativeErrorMessage() {\n    this.input.reportValidity();\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n    this.invalid = !this.validity.valid;\n    this._radios.forEach(radio => (radio.invalid = this.invalid));\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  render() {\n    const defaultSlot = html`\n      <slot\n        class=\"radio-container\"\n        @click=${this._handleRadioClick}\n        @keydown=${this._handleKeyDown}\n        @slotchange=${this._handleSlotChange}\n        role=\"presentation\"\n      ></slot>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <div class=\"label-hint-container\">\n          <label\n            class=${classMap({\n              \"form-label\": true,\n              required: this.required\n            })}\n          >\n            ${this.label}\n          </label>\n          ${this._renderHintText()}\n        </div>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n        />\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=\"radio-group-feedback\" tabindex=\"0\" class=\"invalid-feedback\">${this.invalidFeedback}</div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["feedbackStyles","formLabelStyles","radioGroupStyles","formHintStyles"],"mappings":"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"}
+{"version":3,"file":"sgds-radio-group.js","sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n *\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, radioGroupStyles];\n\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n  /**@internal */\n  @state() defaultValue = \"\";\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\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 input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.emit(\"sgds-change\", { detail: { value: this.value } });\n    this._updateCheckedRadio();\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _handleInvalidChange() {\n    this._radios.forEach(r => (r.invalid = this.invalid));\n  }\n\n  @state() private _isTouched = false;\n  /**\n   * radio requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n    this.addEventListener(\"sgds-blur\", () => {\n      this._isTouched = true;\n    });\n  }\n\n  firstUpdated(changedProperties) {\n    super.firstUpdated(changedProperties);\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n    if (this.value) {\n      this._updateInputValue(\"change\");\n    }\n  }\n\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    event.preventDefault();\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n\n    this._updateInputValue();\n\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      return (radio.checked = radio === target);\n    });\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private _updateInputValue(eventName = \"change\") {\n    this.input.value = this.value;\n    this.input.dispatchEvent(new InputEvent(eventName));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    this._updateInputValue();\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    // preventDefault at the end to allow Tab\n    event.preventDefault();\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n    this._disabledChildRadios();\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\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   * 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  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\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.setInvalid(false);\n    this._disabledChildRadios();\n  }\n\n  private _disabledChildRadios() {\n    if (this.disabled) {\n      const radios = this._radios;\n      radios.forEach(radio => (radio.disabled = this.disabled));\n    }\n  }\n\n  render() {\n    const defaultSlot = html`\n      <slot\n        class=\"radio-container\"\n        @click=${this._handleRadioClick}\n        @keydown=${this._handleKeyDown}\n        @slotchange=${this._handleSlotChange}\n        role=\"presentation\"\n      ></slot>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <div class=\"label-hint-container\">\n          <label\n            class=${classMap({\n              \"form-label\": true,\n              required: this.required\n            })}\n          >\n            ${this.label}\n          </label>\n          ${this._renderHintText()}\n        </div>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => super._mixinHandleChange(e)}\n          .value=${live(this.value)}\n        />\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=\"radio-group-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"names":["radioGroupStyles"],"mappings":"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"}

package/react/components/Radio/sgds-radio.cjs.js

@@ -9,10 +9,10 @@ var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
 var ifDefined_js = require('lit/directives/if-defined.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
+var formLabel = require('../../styles/form-label.cjs.js');
 var generateId = require('../../utils/generateId.cjs.js');
 var watch = require('../../utils/watch.cjs.js');
 var radio = require('./radio.cjs.js');
-var formLabel = require('../../styles/form-label.cjs.js');
 
 /**
  * @summary Radio allows the user to select one option from a set while seeing all available options.

package/react/components/Radio/sgds-radio.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-radio.cjs.js","sources":["../../../../src/components/Radio/sgds-radio.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport radioStyles from \"./radio.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n/**\n * @summary Radio allows the user to select one option from a set while seeing all available options.\n *\n * @slot default - The label of the radio input\n *\n * @event sgds-focus - Emitted when the control gains focus.\n * @event sgds-blur - Emitted when the control loses focus.\n */\nexport class SgdsRadio extends SgdsElement {\n  static styles = [...SgdsElement.styles, formLabelStyles, radioStyles];\n  /**\n   * Draws the radio in a checked state. When used with SgdsRadioGroup, the value prop of SgdsRadioGroup overrides the checked prop\n   */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The radio's value attribute. */\n  @property() value: string;\n\n  /** Disables the radio. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Marks the radio input as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  @query(\"input\")\n  private input: HTMLInputElement;\n\n  private radioId: string = genId(\"radio\");\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setInitialAttributes();\n    this.addEventListeners();\n  }\n\n  @watch(\"checked\")\n  handleCheckedChange() {\n    if (this.checked) {\n      this.input?.focus();\n    }\n    this.setAttribute(\"aria-checked\", this.checked ? \"true\" : \"false\");\n    this.setAttribute(\"tabindex\", this.checked ? \"0\" : \"-1\");\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n  }\n\n  private handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.checked = true;\n    }\n  }\n\n  private handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private addEventListeners() {\n    this.addEventListener(\"blur\", () => this.handleBlur());\n    this.addEventListener(\"click\", () => this.handleClick());\n    this.addEventListener(\"focus\", () => this.handleFocus());\n  }\n\n  private setInitialAttributes() {\n    this.setAttribute(\"role\", \"radio\");\n    this.setAttribute(\"tabindex\", \"-1\");\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n  }\n\n  render() {\n    return html`\n      <div class=\"form-check\">\n        <div class=\"form-check-input-container\">\n          <input\n            class=${classMap({\n              \"form-check-input\": true,\n              \"is-invalid\": this.invalid\n            })}\n            type=\"radio\"\n            id=${ifDefined(this.radioId)}\n            value=${ifDefined(this.value)}\n            ?checked=${this.checked}\n            ?disabled=${this.disabled}\n            aria-disabled=${this.disabled ? \"true\" : \"false\"}\n            aria-checked=${this.checked ? \"true\" : \"false\"}\n            @click=${this.handleClick}\n          />\n        </div>\n        <label for=\"${ifDefined(this.radioId)}\" aria-label=${ifDefined(this.ariaLabel)} class=\"form-check-label\">\n          <slot></slot>\n        </label>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsRadio;\n"],"names":["SgdsElement","genId","html","classMap","ifDefined","formLabelStyles","radioStyles","__decorate","property","query","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-radio.cjs.js","sources":["../../../../src/components/Radio/sgds-radio.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport radioStyles from \"./radio.css\";\n/**\n * @summary Radio allows the user to select one option from a set while seeing all available options.\n *\n * @slot default - The label of the radio input\n *\n * @event sgds-focus - Emitted when the control gains focus.\n * @event sgds-blur - Emitted when the control loses focus.\n */\nexport class SgdsRadio extends SgdsElement {\n  static styles = [...SgdsElement.styles, formLabelStyles, radioStyles];\n  /**\n   * Draws the radio in a checked state. When used with SgdsRadioGroup, the value prop of SgdsRadioGroup overrides the checked prop\n   */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The radio's value attribute. */\n  @property() value: string;\n\n  /** Disables the radio. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Marks the radio input as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  @query(\"input\")\n  private input: HTMLInputElement;\n\n  private radioId: string = genId(\"radio\");\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setInitialAttributes();\n    this.addEventListeners();\n  }\n\n  @watch(\"checked\")\n  handleCheckedChange() {\n    if (this.checked) {\n      this.input?.focus();\n    }\n    this.setAttribute(\"aria-checked\", this.checked ? \"true\" : \"false\");\n    this.setAttribute(\"tabindex\", this.checked ? \"0\" : \"-1\");\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n  }\n\n  private handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.checked = true;\n    }\n  }\n\n  private handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private addEventListeners() {\n    this.addEventListener(\"blur\", () => this.handleBlur());\n    this.addEventListener(\"click\", () => this.handleClick());\n    this.addEventListener(\"focus\", () => this.handleFocus());\n  }\n\n  private setInitialAttributes() {\n    this.setAttribute(\"role\", \"radio\");\n    this.setAttribute(\"tabindex\", \"-1\");\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n  }\n\n  render() {\n    return html`\n      <div class=\"form-check\">\n        <div class=\"form-check-input-container\">\n          <input\n            class=${classMap({\n              \"form-check-input\": true,\n              \"is-invalid\": this.invalid\n            })}\n            type=\"radio\"\n            id=${ifDefined(this.radioId)}\n            value=${ifDefined(this.value)}\n            ?checked=${this.checked}\n            ?disabled=${this.disabled}\n            aria-disabled=${this.disabled ? \"true\" : \"false\"}\n            aria-checked=${this.checked ? \"true\" : \"false\"}\n            @click=${this.handleClick}\n          />\n        </div>\n        <label for=\"${ifDefined(this.radioId)}\" aria-label=${ifDefined(this.ariaLabel)} class=\"form-check-label\">\n          <slot></slot>\n        </label>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsRadio;\n"],"names":["SgdsElement","genId","html","classMap","ifDefined","formLabelStyles","radioStyles","__decorate","property","query","watch"],"mappings":";;;;;;;;;;;;;;;;AASA;;;;;;;AAOG;AACG,MAAO,SAAU,SAAQA,sBAAW,CAAA;AAA1C,IAAA,WAAA,GAAA;;AAEE;;AAEG;QACyC,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAMhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAKpD,QAAA,IAAA,CAAA,OAAO,GAAWC,qBAAK,CAAC,OAAO,CAAC,CAAC;KAyE1C;IAvEC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAGD,mBAAmB,GAAA;;AACjB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAC;SACrB;AACD,QAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AACnE,QAAA,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC;KAC1D;IAGD,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KACtE;IAEO,UAAU,GAAA;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACxB;IAEO,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;KACF;IAEO,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACzB;IAEO,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;AACvD,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AACzD,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;KAC1D;IAEO,oBAAoB,GAAA;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACnC,QAAA,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;AACpC,QAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KACtE;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;;;AAIK,kBAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,kBAAkB,EAAE,IAAI;YACxB,YAAY,EAAE,IAAI,CAAC,OAAO;SAC3B,CAAC,CAAA;;AAEG,eAAA,EAAAC,sBAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AACpB,kBAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAClB,qBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACX,sBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;4BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;2BACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AACrC,mBAAA,EAAA,IAAI,CAAC,WAAW,CAAA;;;sBAGfA,sBAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAgB,aAAA,EAAAA,sBAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;;;;KAIjF,CAAC;KACH;;AA1FM,SAAA,CAAA,MAAM,GAAG,CAAC,GAAGJ,sBAAW,CAAC,MAAM,EAAEK,oBAAe,EAAEC,gBAAW,CAAvD,CAAyD;AAI1BC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhDD,gBAAA,CAAA;AAAX,IAAAC,sBAAQ,EAAE;AAAe,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGkBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpDD,gBAAA,CAAA;IADPE,mBAAK,CAAC,OAAO,CAAC;AACiB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAWhCF,gBAAA,CAAA;IADCG,WAAK,CAAC,SAAS,CAAC;AAOhB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,IAAA,CAAA,CAAA;AAGDH,gBAAA,CAAA;IADCG,WAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAGjD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,sBAAA,EAAA,IAAA,CAAA;;;;;"}

package/react/components/Radio/sgds-radio.js

@@ -5,10 +5,10 @@ import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import SgdsElement from '../../base/sgds-element.js';
+import css_248z from '../../styles/form-label.js';
 import genId from '../../utils/generateId.js';
 import { watch } from '../../utils/watch.js';
 import css_248z$1 from './radio.js';
-import css_248z from '../../styles/form-label.js';
 
 /**
  * @summary Radio allows the user to select one option from a set while seeing all available options.

package/react/components/Radio/sgds-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-radio.js","sources":["../../../../src/components/Radio/sgds-radio.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport radioStyles from \"./radio.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\n/**\n * @summary Radio allows the user to select one option from a set while seeing all available options.\n *\n * @slot default - The label of the radio input\n *\n * @event sgds-focus - Emitted when the control gains focus.\n * @event sgds-blur - Emitted when the control loses focus.\n */\nexport class SgdsRadio extends SgdsElement {\n  static styles = [...SgdsElement.styles, formLabelStyles, radioStyles];\n  /**\n   * Draws the radio in a checked state. When used with SgdsRadioGroup, the value prop of SgdsRadioGroup overrides the checked prop\n   */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The radio's value attribute. */\n  @property() value: string;\n\n  /** Disables the radio. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Marks the radio input as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  @query(\"input\")\n  private input: HTMLInputElement;\n\n  private radioId: string = genId(\"radio\");\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setInitialAttributes();\n    this.addEventListeners();\n  }\n\n  @watch(\"checked\")\n  handleCheckedChange() {\n    if (this.checked) {\n      this.input?.focus();\n    }\n    this.setAttribute(\"aria-checked\", this.checked ? \"true\" : \"false\");\n    this.setAttribute(\"tabindex\", this.checked ? \"0\" : \"-1\");\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n  }\n\n  private handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.checked = true;\n    }\n  }\n\n  private handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private addEventListeners() {\n    this.addEventListener(\"blur\", () => this.handleBlur());\n    this.addEventListener(\"click\", () => this.handleClick());\n    this.addEventListener(\"focus\", () => this.handleFocus());\n  }\n\n  private setInitialAttributes() {\n    this.setAttribute(\"role\", \"radio\");\n    this.setAttribute(\"tabindex\", \"-1\");\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n  }\n\n  render() {\n    return html`\n      <div class=\"form-check\">\n        <div class=\"form-check-input-container\">\n          <input\n            class=${classMap({\n              \"form-check-input\": true,\n              \"is-invalid\": this.invalid\n            })}\n            type=\"radio\"\n            id=${ifDefined(this.radioId)}\n            value=${ifDefined(this.value)}\n            ?checked=${this.checked}\n            ?disabled=${this.disabled}\n            aria-disabled=${this.disabled ? \"true\" : \"false\"}\n            aria-checked=${this.checked ? \"true\" : \"false\"}\n            @click=${this.handleClick}\n          />\n        </div>\n        <label for=\"${ifDefined(this.radioId)}\" aria-label=${ifDefined(this.ariaLabel)} class=\"form-check-label\">\n          <slot></slot>\n        </label>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsRadio;\n"],"names":["formLabelStyles","radioStyles"],"mappings":";;;;;;;;;;;;AASA;;;;;;;AAOG;AACG,MAAO,SAAU,SAAQ,WAAW,CAAA;AAA1C,IAAA,WAAA,GAAA;;AAEE;;AAEG;QACyC,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;;QAMhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAKpD,QAAA,IAAA,CAAA,OAAO,GAAW,KAAK,CAAC,OAAO,CAAC,CAAC;KAyE1C;IAvEC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAGD,mBAAmB,GAAA;;AACjB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAC;SACrB;AACD,QAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AACnE,QAAA,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC;KAC1D;IAGD,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KACtE;IAEO,UAAU,GAAA;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACxB;IAEO,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;KACF;IAEO,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACzB;IAEO,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;AACvD,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AACzD,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;KAC1D;IAEO,oBAAoB,GAAA;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACnC,QAAA,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;AACpC,QAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KACtE;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;;AAIK,kBAAA,EAAA,QAAQ,CAAC;AACf,YAAA,kBAAkB,EAAE,IAAI;YACxB,YAAY,EAAE,IAAI,CAAC,OAAO;SAC3B,CAAC,CAAA;;AAEG,eAAA,EAAA,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AACpB,kBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAClB,qBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACX,sBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;4BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;2BACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AACrC,mBAAA,EAAA,IAAI,CAAC,WAAW,CAAA;;;sBAGf,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAgB,aAAA,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;;;;KAIjF,CAAC;KACH;;AA1FM,SAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAe,EAAEC,UAAW,CAAvD,CAAyD;AAI1B,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhD,UAAA,CAAA;AAAX,IAAA,QAAQ,EAAE;AAAe,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGkB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpD,UAAA,CAAA;IADP,KAAK,CAAC,OAAO,CAAC;AACiB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAWhC,UAAA,CAAA;IADC,KAAK,CAAC,SAAS,CAAC;AAOhB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,IAAA,CAAA,CAAA;AAGD,UAAA,CAAA;IADC,KAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAGjD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,sBAAA,EAAA,IAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-radio.js","sources":["../../../../src/components/Radio/sgds-radio.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport radioStyles from \"./radio.css\";\n/**\n * @summary Radio allows the user to select one option from a set while seeing all available options.\n *\n * @slot default - The label of the radio input\n *\n * @event sgds-focus - Emitted when the control gains focus.\n * @event sgds-blur - Emitted when the control loses focus.\n */\nexport class SgdsRadio extends SgdsElement {\n  static styles = [...SgdsElement.styles, formLabelStyles, radioStyles];\n  /**\n   * Draws the radio in a checked state. When used with SgdsRadioGroup, the value prop of SgdsRadioGroup overrides the checked prop\n   */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The radio's value attribute. */\n  @property() value: string;\n\n  /** Disables the radio. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Marks the radio input as invalid. Replace the pseudo :invalid selector for absent in custom elements */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  @query(\"input\")\n  private input: HTMLInputElement;\n\n  private radioId: string = genId(\"radio\");\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setInitialAttributes();\n    this.addEventListeners();\n  }\n\n  @watch(\"checked\")\n  handleCheckedChange() {\n    if (this.checked) {\n      this.input?.focus();\n    }\n    this.setAttribute(\"aria-checked\", this.checked ? \"true\" : \"false\");\n    this.setAttribute(\"tabindex\", this.checked ? \"0\" : \"-1\");\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n  }\n\n  private handleBlur() {\n    this.emit(\"sgds-blur\");\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.checked = true;\n    }\n  }\n\n  private handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private addEventListeners() {\n    this.addEventListener(\"blur\", () => this.handleBlur());\n    this.addEventListener(\"click\", () => this.handleClick());\n    this.addEventListener(\"focus\", () => this.handleFocus());\n  }\n\n  private setInitialAttributes() {\n    this.setAttribute(\"role\", \"radio\");\n    this.setAttribute(\"tabindex\", \"-1\");\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n  }\n\n  render() {\n    return html`\n      <div class=\"form-check\">\n        <div class=\"form-check-input-container\">\n          <input\n            class=${classMap({\n              \"form-check-input\": true,\n              \"is-invalid\": this.invalid\n            })}\n            type=\"radio\"\n            id=${ifDefined(this.radioId)}\n            value=${ifDefined(this.value)}\n            ?checked=${this.checked}\n            ?disabled=${this.disabled}\n            aria-disabled=${this.disabled ? \"true\" : \"false\"}\n            aria-checked=${this.checked ? \"true\" : \"false\"}\n            @click=${this.handleClick}\n          />\n        </div>\n        <label for=\"${ifDefined(this.radioId)}\" aria-label=${ifDefined(this.ariaLabel)} class=\"form-check-label\">\n          <slot></slot>\n        </label>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsRadio;\n"],"names":["formLabelStyles","radioStyles"],"mappings":"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"}

package/react/components/Stepper/sgds-stepper.cjs.js

@@ -27,6 +27,7 @@ class SgdsStepper extends sgdsElement["default"] {
     constructor() {
         super(...arguments);
         /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.
+         * It is required to populate this array to properly render the stepper.
          */
         this.steps = [];
         /** The current state of active step. Defaults to 0 */

package/react/components/Stepper/sgds-stepper.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-stepper.cjs.js","sources":["../../../../src/components/Stepper/sgds-stepper.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nexport interface IStepMetaData {\n  component: unknown;\n  stepHeader: string;\n}\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n\n  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\n   */\n  @property({ type: Array })\n  steps: IStepMetaData[] = [];\n\n  /** The current state of active step. Defaults to 0 */\n  @property({ type: Number, reflect: true })\n  activeStep = 0;\n\n  /** The orientation of stepper. By default, the stepper is of horizontal orientation */\n  @property({ type: String, reflect: true }) orientation: StepperOrientation = \"horizontal\";\n\n  /** When true, the stepper's steps will be clickable */\n  @property({ type: Boolean, reflect: true }) clickable = false;\n\n  /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"activeStep\")\n  defaultActiveStep = 0;\n\n  /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n  public getComponent(step: number = this.activeStep) {\n    return this.steps[step].component;\n  }\n  /** Moves the active step forward one step */\n  public nextStep() {\n    this.emit(\"sgds-next-step\");\n    if (this.activeStep < this.steps.length - 1) {\n      this.activeStep++;\n    }\n  }\n\n  /** Moves the active step back one step */\n  public previousStep() {\n    this.emit(\"sgds-previous-step\");\n\n    if (this.activeStep > 0) {\n      this.activeStep--;\n    }\n  }\n\n  /** Changes the active step to the last step */\n  public lastStep() {\n    this.emit(\"sgds-last-step\");\n    if (this.activeStep !== this.steps.length - 1) {\n      this.activeStep = this.steps.length - 1;\n    }\n  }\n\n  /** Changes active step to the first step */\n  public firstStep() {\n    this.emit(\"sgds-first-step\");\n    if (this.activeStep > 0) {\n      this.activeStep = 0;\n    }\n  }\n\n  /** Resets the Stepper to its initial active step state */\n  public reset() {\n    this.emit(\"sgds-reset\");\n    this.activeStep = this.defaultActiveStep;\n  }\n\n  /**@internal */\n  _onStepperItemClick(index: number) {\n    //emit an event before moving to next step\n    if (this.activeStep > index) {\n      this.activeStep = index;\n    }\n  }\n\n  /**@internal */\n  @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n  _handleActiveStepChange() {\n    this.emit(\"sgds-arrived\");\n  }\n\n  /**@internal */\n  _handleKeyDown(event: KeyboardEvent, index: number) {\n    if (event.key === \"Enter\") {\n      this._onStepperItemClick(index);\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"stepper ${classMap({\n          [`${this.orientation}`]: this.orientation,\n          clickable: this.clickable\n        })}\"\n      >\n        ${this.steps.map(({ stepHeader: step }, index) => {\n          return html`\n            <div class=\"stepper-item-container\">\n              <div\n                class=\"stepper-item ${classMap({\n                  \"is-active\": this.activeStep === index,\n                  \"is-completed\": this.activeStep > index,\n                  \"is-clickable\": this.clickable && this.activeStep > index\n                })}\"\n                tabindex=${this.clickable && this.activeStep > index ? \"0\" : \"-1\"}\n                aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n                aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n                @click=\"${this.clickable ? () => this._onStepperItemClick(index) : null}\"\n                @keydown=${this.clickable ? (e: KeyboardEvent) => this._handleKeyDown(e, index) : null}\n              >\n                <div class=\"stepper-marker\">${index + 1}</div>\n                <div class=\"stepper-detail\">${step}</div>\n              </div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport default SgdsStepper;\n"],"names":["SgdsElement","html","classMap","stepperStyle","__decorate","property","defaultValue","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-stepper.cjs.js","sources":["../../../../src/components/Stepper/sgds-stepper.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nexport interface IStepMetaData {\n  component: unknown;\n  stepHeader: string;\n}\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n\n  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\n   * It is required to populate this array to properly render the stepper.\n   */\n  @property({ type: Array })\n  steps: IStepMetaData[] = [];\n\n  /** The current state of active step. Defaults to 0 */\n  @property({ type: Number, reflect: true })\n  activeStep = 0;\n\n  /** The orientation of stepper. By default, the stepper is of horizontal orientation */\n  @property({ type: String, reflect: true }) orientation: StepperOrientation = \"horizontal\";\n\n  /** When true, the stepper's steps will be clickable */\n  @property({ type: Boolean, reflect: true }) clickable = false;\n\n  /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"activeStep\")\n  defaultActiveStep = 0;\n\n  /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n  public getComponent(step: number = this.activeStep) {\n    return this.steps[step].component;\n  }\n  /** Moves the active step forward one step */\n  public nextStep() {\n    this.emit(\"sgds-next-step\");\n    if (this.activeStep < this.steps.length - 1) {\n      this.activeStep++;\n    }\n  }\n\n  /** Moves the active step back one step */\n  public previousStep() {\n    this.emit(\"sgds-previous-step\");\n\n    if (this.activeStep > 0) {\n      this.activeStep--;\n    }\n  }\n\n  /** Changes the active step to the last step */\n  public lastStep() {\n    this.emit(\"sgds-last-step\");\n    if (this.activeStep !== this.steps.length - 1) {\n      this.activeStep = this.steps.length - 1;\n    }\n  }\n\n  /** Changes active step to the first step */\n  public firstStep() {\n    this.emit(\"sgds-first-step\");\n    if (this.activeStep > 0) {\n      this.activeStep = 0;\n    }\n  }\n\n  /** Resets the Stepper to its initial active step state */\n  public reset() {\n    this.emit(\"sgds-reset\");\n    this.activeStep = this.defaultActiveStep;\n  }\n\n  /**@internal */\n  _onStepperItemClick(index: number) {\n    //emit an event before moving to next step\n    if (this.activeStep > index) {\n      this.activeStep = index;\n    }\n  }\n\n  /**@internal */\n  @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n  _handleActiveStepChange() {\n    this.emit(\"sgds-arrived\");\n  }\n\n  /**@internal */\n  _handleKeyDown(event: KeyboardEvent, index: number) {\n    if (event.key === \"Enter\") {\n      this._onStepperItemClick(index);\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"stepper ${classMap({\n          [`${this.orientation}`]: this.orientation,\n          clickable: this.clickable\n        })}\"\n      >\n        ${this.steps.map(({ stepHeader: step }, index) => {\n          return html`\n            <div class=\"stepper-item-container\">\n              <div\n                class=\"stepper-item ${classMap({\n                  \"is-active\": this.activeStep === index,\n                  \"is-completed\": this.activeStep > index,\n                  \"is-clickable\": this.clickable && this.activeStep > index\n                })}\"\n                tabindex=${this.clickable && this.activeStep > index ? \"0\" : \"-1\"}\n                aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n                aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n                @click=\"${this.clickable ? () => this._onStepperItemClick(index) : null}\"\n                @keydown=${this.clickable ? (e: KeyboardEvent) => this._handleKeyDown(e, index) : null}\n              >\n                <div class=\"stepper-marker\">${index + 1}</div>\n                <div class=\"stepper-detail\">${step}</div>\n              </div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport default SgdsStepper;\n"],"names":["SgdsElement","html","classMap","stepperStyle","__decorate","property","defaultValue","watch"],"mappings":"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"}

package/react/components/Stepper/sgds-stepper.js

@@ -23,6 +23,7 @@ class SgdsStepper extends SgdsElement {
     constructor() {
         super(...arguments);
         /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.
+         * It is required to populate this array to properly render the stepper.
          */
         this.steps = [];
         /** The current state of active step. Defaults to 0 */

package/react/components/Stepper/sgds-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-stepper.js","sources":["../../../../src/components/Stepper/sgds-stepper.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nexport interface IStepMetaData {\n  component: unknown;\n  stepHeader: string;\n}\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n\n  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\n   */\n  @property({ type: Array })\n  steps: IStepMetaData[] = [];\n\n  /** The current state of active step. Defaults to 0 */\n  @property({ type: Number, reflect: true })\n  activeStep = 0;\n\n  /** The orientation of stepper. By default, the stepper is of horizontal orientation */\n  @property({ type: String, reflect: true }) orientation: StepperOrientation = \"horizontal\";\n\n  /** When true, the stepper's steps will be clickable */\n  @property({ type: Boolean, reflect: true }) clickable = false;\n\n  /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"activeStep\")\n  defaultActiveStep = 0;\n\n  /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n  public getComponent(step: number = this.activeStep) {\n    return this.steps[step].component;\n  }\n  /** Moves the active step forward one step */\n  public nextStep() {\n    this.emit(\"sgds-next-step\");\n    if (this.activeStep < this.steps.length - 1) {\n      this.activeStep++;\n    }\n  }\n\n  /** Moves the active step back one step */\n  public previousStep() {\n    this.emit(\"sgds-previous-step\");\n\n    if (this.activeStep > 0) {\n      this.activeStep--;\n    }\n  }\n\n  /** Changes the active step to the last step */\n  public lastStep() {\n    this.emit(\"sgds-last-step\");\n    if (this.activeStep !== this.steps.length - 1) {\n      this.activeStep = this.steps.length - 1;\n    }\n  }\n\n  /** Changes active step to the first step */\n  public firstStep() {\n    this.emit(\"sgds-first-step\");\n    if (this.activeStep > 0) {\n      this.activeStep = 0;\n    }\n  }\n\n  /** Resets the Stepper to its initial active step state */\n  public reset() {\n    this.emit(\"sgds-reset\");\n    this.activeStep = this.defaultActiveStep;\n  }\n\n  /**@internal */\n  _onStepperItemClick(index: number) {\n    //emit an event before moving to next step\n    if (this.activeStep > index) {\n      this.activeStep = index;\n    }\n  }\n\n  /**@internal */\n  @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n  _handleActiveStepChange() {\n    this.emit(\"sgds-arrived\");\n  }\n\n  /**@internal */\n  _handleKeyDown(event: KeyboardEvent, index: number) {\n    if (event.key === \"Enter\") {\n      this._onStepperItemClick(index);\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"stepper ${classMap({\n          [`${this.orientation}`]: this.orientation,\n          clickable: this.clickable\n        })}\"\n      >\n        ${this.steps.map(({ stepHeader: step }, index) => {\n          return html`\n            <div class=\"stepper-item-container\">\n              <div\n                class=\"stepper-item ${classMap({\n                  \"is-active\": this.activeStep === index,\n                  \"is-completed\": this.activeStep > index,\n                  \"is-clickable\": this.clickable && this.activeStep > index\n                })}\"\n                tabindex=${this.clickable && this.activeStep > index ? \"0\" : \"-1\"}\n                aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n                aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n                @click=\"${this.clickable ? () => this._onStepperItemClick(index) : null}\"\n                @keydown=${this.clickable ? (e: KeyboardEvent) => this._handleKeyDown(e, index) : null}\n              >\n                <div class=\"stepper-marker\">${index + 1}</div>\n                <div class=\"stepper-detail\">${step}</div>\n              </div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-stepper.js","sources":["../../../../src/components/Stepper/sgds-stepper.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nexport interface IStepMetaData {\n  component: unknown;\n  stepHeader: string;\n}\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n\n  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\n   * It is required to populate this array to properly render the stepper.\n   */\n  @property({ type: Array })\n  steps: IStepMetaData[] = [];\n\n  /** The current state of active step. Defaults to 0 */\n  @property({ type: Number, reflect: true })\n  activeStep = 0;\n\n  /** The orientation of stepper. By default, the stepper is of horizontal orientation */\n  @property({ type: String, reflect: true }) orientation: StepperOrientation = \"horizontal\";\n\n  /** When true, the stepper's steps will be clickable */\n  @property({ type: Boolean, reflect: true }) clickable = false;\n\n  /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"activeStep\")\n  defaultActiveStep = 0;\n\n  /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n  public getComponent(step: number = this.activeStep) {\n    return this.steps[step].component;\n  }\n  /** Moves the active step forward one step */\n  public nextStep() {\n    this.emit(\"sgds-next-step\");\n    if (this.activeStep < this.steps.length - 1) {\n      this.activeStep++;\n    }\n  }\n\n  /** Moves the active step back one step */\n  public previousStep() {\n    this.emit(\"sgds-previous-step\");\n\n    if (this.activeStep > 0) {\n      this.activeStep--;\n    }\n  }\n\n  /** Changes the active step to the last step */\n  public lastStep() {\n    this.emit(\"sgds-last-step\");\n    if (this.activeStep !== this.steps.length - 1) {\n      this.activeStep = this.steps.length - 1;\n    }\n  }\n\n  /** Changes active step to the first step */\n  public firstStep() {\n    this.emit(\"sgds-first-step\");\n    if (this.activeStep > 0) {\n      this.activeStep = 0;\n    }\n  }\n\n  /** Resets the Stepper to its initial active step state */\n  public reset() {\n    this.emit(\"sgds-reset\");\n    this.activeStep = this.defaultActiveStep;\n  }\n\n  /**@internal */\n  _onStepperItemClick(index: number) {\n    //emit an event before moving to next step\n    if (this.activeStep > index) {\n      this.activeStep = index;\n    }\n  }\n\n  /**@internal */\n  @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n  _handleActiveStepChange() {\n    this.emit(\"sgds-arrived\");\n  }\n\n  /**@internal */\n  _handleKeyDown(event: KeyboardEvent, index: number) {\n    if (event.key === \"Enter\") {\n      this._onStepperItemClick(index);\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"stepper ${classMap({\n          [`${this.orientation}`]: this.orientation,\n          clickable: this.clickable\n        })}\"\n      >\n        ${this.steps.map(({ stepHeader: step }, index) => {\n          return html`\n            <div class=\"stepper-item-container\">\n              <div\n                class=\"stepper-item ${classMap({\n                  \"is-active\": this.activeStep === index,\n                  \"is-completed\": this.activeStep > index,\n                  \"is-clickable\": this.clickable && this.activeStep > index\n                })}\"\n                tabindex=${this.clickable && this.activeStep > index ? \"0\" : \"-1\"}\n                aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n                aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n                @click=\"${this.clickable ? () => this._onStepperItemClick(index) : null}\"\n                @keydown=${this.clickable ? (e: KeyboardEvent) => this._handleKeyDown(e, index) : null}\n              >\n                <div class=\"stepper-marker\">${index + 1}</div>\n                <div class=\"stepper-detail\">${step}</div>\n              </div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"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"}

package/react/components/Switch/sgds-switch.cjs.js

@@ -7,7 +7,6 @@ var tslib = require('tslib');
 var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
-var formCheckElement = require('../../base/form-check-element.cjs.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
 var defaultvalue = require('../../utils/defaultvalue.cjs.js');
 var generateId = require('../../utils/generateId.cjs.js');
@@ -95,7 +94,7 @@ class SgdsSwitch extends sgdsElement["default"] {
     `;
     }
 }
-SgdsSwitch.styles = [...formCheckElement.FormCheckElement.styles, formLabel["default"], _switch["default"]];
+SgdsSwitch.styles = [...sgdsElement["default"].styles, formLabel["default"], _switch["default"]];
 tslib.__decorate([
     decorators_js.property({ reflect: true, type: String })
 ], SgdsSwitch.prototype, "size", void 0);