@descope/web-components-ui 1.0.212 → 1.0.214

package/dist/index.esm.js

@@ -966,6 +966,9 @@ const proxyInputMixin =
       // We do not want to show the default validity report tooltip
       // So we are overriding the reportValidity fn to show the input's error message
       reportValidity = () => {
+        // we want to update validity so in case the value was set programmatically, we won't get an error
+        this.inputElement.setCustomValidity('');
+        this.setCustomValidity('');
         if (!this.checkValidity()) {
           this.setAttribute('invalid', 'true');
           this.#handleErrorMessage();
@@ -1693,6 +1696,10 @@ const CheckboxClass = compose(
 				top: 0;
 				left: 0;
 			}
+
+      vaadin-text-field::part(label) {
+        width: calc(100% - var(${CheckboxClass.cssVarList.inputSize}))
+      }
 			${useHostExternalPadding(CheckboxClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
@@ -4790,7 +4797,7 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
 
     // override combo box setter to display dialCode value in input
     this.countryCodeInput.customValueTransformFn = (val) => {
-      const [, dialCode] = val.split(' ');
+      const [, dialCode] = val?.split?.(' ') || [];
       return dialCode;
     };
   }
@@ -4862,9 +4869,7 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
   }
 
   getCountryByDialCode(countryDialCode) {
-    return this.countryCodeInput.items?.find(
-      (c) => c.getAttribute('data-country-code') === countryDialCode
-    );
+    return this.countryCodeInput.items?.find((c) => c.getAttribute('data-id') === countryDialCode);
   }
 
   getCountryByCodeId(countryCode) {
@@ -7327,11 +7332,10 @@ const checkbox = {
   [vars$j.inputBorderColor]: refs.borderColor,
   [vars$j.inputBorderWidth]: refs.borderWidth,
   [vars$j.inputBorderStyle]: refs.borderStyle,
-  [vars$j.inputBackgroundColor]: refs.inputBackgroundColor,
+  [vars$j.inputBackgroundColor]: refs.backgroundColor,
   [vars$j.inputSize]: '2em',
 
   _checked: {
-    [vars$j.inputBackgroundColor]: refs.backgroundColor,
     [vars$j.inputValueTextColor]: refs.valueTextColor,
   },