@govtechsg/sgds-web-component 2.1.0 → 2.1.2

package/index.umd.js

@@ -4864,12 +4864,14 @@
           @keydown=${this._handleKeyDown}
           @invalid=${(e) => this._handleInvalid(e)}
         />
-        <label for="${this._inputId}" aria-label=${ifDefined(this.ariaLabel)} class="form-check-label"
-          ><slot></slot
-        ></label>
-        ${this.hasFeedback
+        <div class="form-check-label-container">
+          <label for="${this._inputId}" aria-label=${ifDefined(this.ariaLabel)} class="form-check-label"
+            ><slot></slot
+          ></label>
+          ${this.hasFeedback && this.invalid
             ? html$1 `<div id="${this._inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
             : nothing}
+        </div>
       </div>
     `;
       }
@@ -4920,9 +4922,9 @@
       watch("checked", { waitUntilFirstUpdate: true })
   ], FormCheckElement.prototype, "handleStateChange", null);
 
-  var css_248z$M = css`:host([checked]) .form-check{--sgds-form-border-color:var(--sgds-form-bg);--sgds-form-bg:var(--sgds-info-filled)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:block;margin-bottom:var(--sgds-spacer-2);min-height:2rem}.form-check .form-check-input{margin-right:var(--sgds-form-input-margin-right)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:contain;border:var(--sgds-form-border-width) solid var(--sgds-border-color);flex-shrink:0;height:1.125em;margin-top:.4375em;vertical-align:top;width:1.125em}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input:focus{border-color:var(--sgds-form-border-color);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-bg);border-color:var(--sgds-form-border-color)}.form-check-input:disabled{border-color:var(--sgds-border-color);cursor:not-allowed;filter:none;opacity:var(--sgds-disabled-opacity)}.form-check-input.is-invalid{border-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:checked{background-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-check-input.is-invalid~.form-check-label{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-block;margin-bottom:0;margin-right:var(--sgds-form-inline-margin-right);vertical-align:text-top}:host([last-of-type]) .form-check{margin-bottom:0}.form-check-input:checked[type=checkbox]{--sgds-radio-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E")}`;
+  var css_248z$M = css`:host([checked]) .form-check{--sgds-form-border-color:var(--sgds-form-bg);--sgds-form-bg:var(--sgds-info-filled)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:flex;margin-bottom:var(--sgds-spacer-2);min-height:2rem}.form-check .form-check-input{margin-right:var(--sgds-form-input-margin-right)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:contain;border:var(--sgds-form-border-width) solid var(--sgds-border-color);flex-shrink:0;height:1.125em;margin-top:.4375em;vertical-align:top;width:1.125em}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input:focus{border-color:var(--sgds-form-border-color);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-bg);border-color:var(--sgds-form-border-color)}.form-check-input:disabled{border-color:var(--sgds-border-color);cursor:not-allowed;filter:none;opacity:var(--sgds-disabled-opacity)}.form-check-input.is-invalid{border-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:checked{background-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-check-input.is-invalid~.form-check-label-container>.form-check-label{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-flex;margin-bottom:0;margin-right:var(--sgds-form-inline-margin-right);vertical-align:text-top}:host([last-of-type]) .form-check{margin-bottom:0}.form-check-input:checked[type=checkbox]{--sgds-radio-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E")}`;
 
-  var css_248z$L = css`.invalid-feedback{color:var(--sgds-form-invalid-color);display:none;font-size:var(--sgds-form-feedback-font-size);width:100%}.is-invalid~.invalid-feedback,.was-validated :invalid~.invalid-feedback{display:block}`;
+  var css_248z$L = css`.invalid-feedback{color:var(--sgds-form-invalid-color);font-size:var(--sgds-form-feedback-font-size);width:100%}`;
 
   var css_248z$K = css`.form-label{color:var(--sgds-form-label-color);font-weight:var(--sgds-form-label-font-weight);margin-bottom:0}.form-label.required:after{color:var(--sgds-danger);content:"*"}.form-check-label{color:var(--sgds-form-label-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed;opacity:var(--sgds-disabled-opacity)}`;
 
@@ -4943,7 +4945,7 @@
   }
   SgdsCheckbox.styles = [...FormCheckElement.styles, css_248z$L, css_248z$K, css_248z$M];
 
-  var css_248z$J = css`:host([checked]){--sgds-form-bg:var(--sgds-info-filled);--sgds-form-border-color:var(--sgds-form-bg)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:block;margin-bottom:var(--sgds-spacer-2);min-height:2rem}.form-check .form-check-input{margin-right:var(--sgds-form-input-margin-right)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:contain;border:var(--sgds-form-border-width) solid var(--sgds-border-color);flex-shrink:0;height:1.125em;margin-top:.4375em;vertical-align:top;width:1.125em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:focus{border-color:var(--sgds-form-border-color);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-bg);border-color:var(--sgds-form-border-color)}.form-check-input:checked[type=radio],.form-check-input[checked][type=radio]{--sgds-radio-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E")}.form-check-input:disabled{border-color:var(--sgds-form-border-color);cursor:not-allowed;filter:none;opacity:var(--sgds-disabled-opacity)}.form-check-input.is-invalid,.form-check-input:invalid{border-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:checked,.form-check-input:invalid:checked{background-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:focus,.form-check-input:invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-check-input.is-invalid~.form-check-label,.form-check-input:invalid~.form-check-label{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-block;margin-bottom:0;margin-right:var(--sgds-form-inline-margin-right)}:host([last-of-type]) .form-check{margin-bottom:0}`;
+  var css_248z$J = css`:host([checked]){--sgds-form-bg:var(--sgds-info-filled);--sgds-form-border-color:var(--sgds-form-bg)}:host(:focus-visible){outline:none}input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.form-check{display:flex;margin-bottom:var(--sgds-spacer-2);min-height:2rem}.form-check .form-check-input{margin-right:var(--sgds-form-input-margin-right)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:contain;border:var(--sgds-form-border-width) solid var(--sgds-border-color);flex-shrink:0;height:1.125em;margin-top:.4375em;vertical-align:top;width:1.125em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:focus{border-color:var(--sgds-form-border-color);box-shadow:var(--sgds-form-focus-box-shadow);outline:0}.form-check-input:checked,.form-check-input[checked]{background-color:var(--sgds-form-bg);border-color:var(--sgds-form-border-color)}.form-check-input:checked[type=radio],.form-check-input[checked][type=radio]{--sgds-radio-bg-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E")}.form-check-input:disabled{border-color:var(--sgds-form-border-color);cursor:not-allowed;filter:none;opacity:var(--sgds-disabled-opacity)}.form-check-input.is-invalid,.form-check-input:invalid{border-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:checked,.form-check-input:invalid:checked{background-color:var(--sgds-form-invalid-color)}.form-check-input.is-invalid:focus,.form-check-input:invalid:focus{box-shadow:var(--sgds-form-focus-invalid-box-shadow)}.form-check-input.is-invalid~.form-check-label,.form-check-input:invalid~.form-check-label{color:var(--sgds-form-invalid-color)}.form-check-inline{display:inline-block;margin-bottom:0;margin-right:var(--sgds-form-inline-margin-right)}:host([last-of-type]) .form-check{margin-bottom:0}`;
 
   /**
    * @summary Radio allows the user to select one option from a set while seeing all available options.
@@ -9642,7 +9644,7 @@
       ${this._renderFeedback()} `;
       }
       _renderFeedback() {
-          return this.hasFeedback
+          return this.hasFeedback && this.invalid
               ? html `<div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
               : "";
       }
@@ -23261,7 +23263,7 @@
           tabindex="-1"
           @invalid=${(e) => this._handleInvalid(e)}
         />
-        ${this.hasFeedback ? html$1 `<div class="invalid-feedback">${this.invalidFeedback}</div>` : ""}
+        ${this.hasFeedback && this.invalid ? html$1 `<div class="invalid-feedback">${this.invalidFeedback}</div>` : ""}
       </fieldset>
     `;
       }
@@ -24595,7 +24597,7 @@
       >
       </textarea>
 
-      ${this.hasFeedback
+      ${this.hasFeedback && this.invalid
             ? html `<div id="${this.textareaId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>`
             : ""}
     `;