@descope/web-components-ui 1.0.414-1 → 1.0.414-3

package/dist/index.esm.js

@@ -640,6 +640,8 @@ const booleanAttributesList = [
   'opening',
   'closing',
   'has-no-options',
+  'loading',
+  'allow-custom-value',
 ];
 
 const isBooleanAttribute = (attr) => {
@@ -1196,7 +1198,7 @@ const proxyInputMixin =
             forwardProps(this, [this.inputElement, ...proxyTargets], prop);
           });
 
-          this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
+          this.setSelectionRange = this.inputElement?.setSelectionRange?.bind(this.inputElement);
 
           forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
         });
@@ -2320,7 +2322,7 @@ const {
   checkboxLabel: checkboxLabel$1,
   requiredIndicator: requiredIndicator$b,
   helperText: helperText$a,
-  errorMessage: errorMessage$c,
+  errorMessage: errorMessage$d,
 } = {
   host: { selector: () => ':host' },
   requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
@@ -2339,7 +2341,7 @@ const CheckboxClass = compose(
       hostDirection: { ...host$n, property: 'direction' },
 
       fontSize: [host$n, checkboxElement, checkboxLabel$1],
-      fontFamily: [checkboxLabel$1, helperText$a, errorMessage$c],
+      fontFamily: [checkboxLabel$1, helperText$a, errorMessage$d],
 
       labelTextColor: { ...checkboxLabel$1, property: 'color' },
       labelSpacing: { ...checkboxLabel$1, property: 'padding-inline-start' },
@@ -2347,7 +2349,12 @@ const CheckboxClass = compose(
       labelFontWeight: { ...checkboxLabel$1, property: 'font-weight' },
       labelRequiredIndicator: { ...requiredIndicator$b, property: 'content' },
 
-      errorMessageTextColor: { ...errorMessage$c, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$d, property: 'color' },
+      errorMessageIcon: { ...errorMessage$d, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$d, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$d, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$d, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$d, property: 'background-position' },
 
       inputValueTextColor: { ...checkboxSurface, property: 'color' },
       inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
@@ -2440,7 +2447,7 @@ const {
   checkboxLabel,
   requiredIndicator: requiredIndicator$a,
   helperText: helperText$9,
-  errorMessage: errorMessage$b,
+  errorMessage: errorMessage$c,
 } = {
   host: { selector: () => ':host' },
   requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
@@ -2459,7 +2466,7 @@ const SwitchToggleClass = compose(
       hostDirection: { ...host$m, property: 'direction' },
 
       fontSize: [component, checkboxLabel, checkboxLabel],
-      fontFamily: [checkboxLabel, helperText$9, errorMessage$b],
+      fontFamily: [checkboxLabel, helperText$9, errorMessage$c],
 
       labelTextColor: { ...checkboxLabel, property: 'color' },
       labelSpacing: { ...checkboxLabel, property: 'padding-inline-start' },
@@ -2467,7 +2474,13 @@ const SwitchToggleClass = compose(
       labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
       labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
 
-      errorMessageTextColor: { ...errorMessage$b, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$c, property: 'color' },
+
+      errorMessageIcon: { ...errorMessage$c, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$c, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$c, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$c, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$c, property: 'background-position' },
 
       trackBorderWidth: { ...track, property: 'border-width' },
       trackBorderStyle: { ...track, property: 'border-style' },
@@ -2774,6 +2787,23 @@ const ComboBoxMixin = (superclass) =>
       this.renderItems();
     }
 
+    set renderer(fn) {
+      // fn takes (root, comboBox, model) as arguments
+      this.baseElement.renderer = fn;
+    }
+
+    get loading() {
+      return this.getAttribute('loading') === 'true';
+    }
+
+    set loading(val) {
+      if (val) {
+        this.setAttribute('loading', 'true');
+      } else {
+        this.removeAttribute('loading');
+      }
+    }
+
     get data() {
       if (this.#data) return this.#data;
 
@@ -2817,14 +2847,20 @@ const ComboBoxMixin = (superclass) =>
     }
 
     renderItems() {
-      const template = this.getItemsTemplate();
-      if (template) this.innerHTML = template;
+      if (this.#data || this.getAttribute('data')) {
+        const template = this.getItemsTemplate();
+        this.innerHTML = template;
+      }
     }
 
     handleSelectedItem() {
-      const currentSelected = this.baseElement.selectedItem?.['data-id'];
+      const { selectedItem } = this.baseElement;
+      const currentSelected = selectedItem?.['data-id'];
 
-      this.baseElement.selectedItem = undefined;
+      // If the selected item is still a child, there's no need to update the value
+      if (selectedItem && Array.from(this.children).includes(selectedItem)) {
+        return;
+      }
 
       // if previously selected item ID exists in current children, set it as selected
       if (currentSelected) {
@@ -2857,7 +2893,7 @@ const ComboBoxMixin = (superclass) =>
         value: {
           ...valueDescriptor,
           set(val) {
-            if (!comboBox.baseElement.items?.length) {
+            if (!comboBox.baseElement.items?.length && !comboBox.allowCustomValue) {
               return;
             }
 
@@ -2877,39 +2913,27 @@ const ComboBoxMixin = (superclass) =>
     // in order to avoid it, we are passing the children of this component
     // to the items & renderer props, so it will be used as the combo box items
     #onChildrenChange() {
-      const baseElement = this.shadowRoot.querySelector(this.baseSelector);
       const items = Array.from(this.children);
 
       // we want the data-name attribute to be accessible as an object attribute
-      if (items.length) {
-        items.forEach((node) => {
-          Object.defineProperty(node, 'data-name', {
-            value: node.getAttribute('data-name'),
-            configurable: true,
-            writable: true,
-          });
-          Object.defineProperty(node, 'data-id', {
-            value: node.getAttribute('data-id'),
-            configurable: true,
-            writable: true,
-          });
+      items.forEach((node) => {
+        Object.defineProperty(node, 'data-name', {
+          value: node.getAttribute('data-name'),
+          configurable: true,
+          writable: true,
         });
+        Object.defineProperty(node, 'data-id', {
+          value: node.getAttribute('data-id'),
+          configurable: true,
+          writable: true,
+        });
+      });
 
-        baseElement.items = items;
-
-        setTimeout(() => {
-          // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
-          this.handleSelectedItem();
-        }, 0);
-      }
-
-      // use vaadin combobox custom renderer to render options as HTML
-      // and not via default renderer, which renders only the data-name's value
-      // in its own HTML template
-      baseElement.renderer = (root, combo, model) => {
-        // eslint-disable-next-line no-param-reassign
-        root.innerHTML = model.item.outerHTML;
-      };
+      this.baseElement.items = items;
+      setTimeout(() => {
+        // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
+        this.handleSelectedItem();
+      }, 0);
     }
 
     // the default vaadin behavior is to attach the overlay to the body when opened
@@ -2924,6 +2948,16 @@ const ComboBoxMixin = (superclass) =>
       overlay._enterModalState = () => {};
     }
 
+    #overrideRenderer() {
+      // use vaadin combobox custom renderer to render options as HTML
+      // and not via default renderer, which renders only the data-name's value
+      // in its own HTML template
+      this.baseElement.renderer = (root, combo, model) => {
+        // eslint-disable-next-line no-param-reassign
+        root.innerHTML = model.item.outerHTML;
+      };
+    }
+
     init() {
       super.init?.();
 
@@ -2938,13 +2972,11 @@ const ComboBoxMixin = (superclass) =>
       };
 
       this.setComboBoxDescriptor();
-
       this.#overrideOverlaySettings();
+      this.#overrideRenderer();
 
-      this.renderItems();
-
+      // Set up observers - order matters here since renderItems can clear innerHTML
       observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
-
       observeChildren(this, this.#onChildrenChange.bind(this));
 
       this.setDefaultValue();
@@ -2977,16 +3009,38 @@ const ComboBoxMixin = (superclass) =>
     }
 
     setDefaultValue() {
-      this.value = this.defaultValue;
+      if (this.defaultValue) {
+        this.value = this.defaultValue;
+      }
     }
 
-    set value(val) {
-      if (val) {
-        const child = this.baseElement.items?.find((item) => item['data-id'] === val);
+    #getChildToSelect(val) {
+      return this.baseElement.items?.find((item) => item['data-id'] === val);
+    }
 
-        if (child) {
-          this.baseElement.selectedItem = child;
-        }
+    #preventSelectedItemChangeEventIfNeeded(val, selectedChild) {
+      // If the actual value didn't change, but the selected item did (the element changed),
+      // we want to stop the event propagation since it's not a real change
+      const shouldPreventItemChangeEvent =
+        val === this.value && selectedChild !== this.baseElement.selectedItem;
+      if (shouldPreventItemChangeEvent) {
+        this.baseElement.addEventListener(
+          'selected-item-changed',
+          (e) => {
+            e.stopImmediatePropagation();
+          },
+          { once: true, capture: true }
+        );
+      }
+    }
+
+    set value(val) {
+      const selectedChild = this.#getChildToSelect(val);
+      this.#preventSelectedItemChangeEventIfNeeded(val, selectedChild);
+      if (val && selectedChild) {
+        this.baseElement.selectedItem = selectedChild;
+      } else if (!selectedChild && this.allowCustomValue) {
+        this.baseElement.value = val;
       } else {
         this.baseElement.selectedItem = undefined;
       }
@@ -3013,7 +3067,7 @@ const {
   label: label$9,
   requiredIndicator: requiredIndicator$9,
   helperText: helperText$8,
-  errorMessage: errorMessage$a,
+  errorMessage: errorMessage$b,
 } = {
   host: { selector: () => ':host' },
   inputField: { selector: '::part(input-field)' },
@@ -3034,14 +3088,19 @@ const ComboBoxClass = compose(
       hostDirection: { ...host$k, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
       fontSize: [{}, host$k],
-      fontFamily: [label$9, placeholder$3, inputField$6, helperText$8, errorMessage$a],
+      fontFamily: [label$9, placeholder$3, inputField$6, helperText$8, errorMessage$b],
       labelFontSize: { ...label$9, property: 'font-size' },
       labelFontWeight: { ...label$9, property: 'font-weight' },
       labelTextColor: [
         { ...label$9, property: 'color' },
         { ...requiredIndicator$9, property: 'color' },
       ],
-      errorMessageTextColor: { ...errorMessage$a, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$b, property: 'color' },
+      errorMessageIcon: { ...errorMessage$b, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$b, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$b, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$b, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$b, property: 'background-position' },
       inputHeight: { ...inputField$6, property: 'height' },
       inputBackgroundColor: { ...inputField$6, property: 'background-color' },
       inputBorderColor: { ...inputField$6, property: 'border-color' },
@@ -3116,7 +3175,10 @@ const ComboBoxClass = compose(
     name: 'overlay',
     selector: '',
     mappings: {
-      backgroundColor: { selector: 'vaadin-combo-box-scroller' },
+      backgroundColor: [
+        { selector: 'vaadin-combo-box-scroller' },
+        { selector: 'vaadin-combo-box-overlay::part(overlay)' },
+      ],
       minHeight: { selector: 'vaadin-combo-box-overlay' },
       margin: { selector: 'vaadin-combo-box-overlay' },
       cursor: { selector: 'vaadin-combo-box-item' },
@@ -3129,6 +3191,24 @@ const ComboBoxClass = compose(
         property: 'padding-inline-start',
       },
       itemPaddingInlineEnd: { selector: 'vaadin-combo-box-item', property: 'padding-inline-end' },
+
+      loaderTop: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'top' },
+      loaderLeft: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'left' },
+      loaderRight: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'right' },
+      loaderMargin: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'margin' },
+      loaderWidth: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'width' },
+      loaderHeight: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'height' },
+      loaderBorder: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'border' },
+      loaderBorderColor: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'border-color',
+      },
+      loaderBorderRadius: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'border-radius',
+      },
+      contentHeight: { selector: 'vaadin-combo-box-overlay::part(content)', property: 'height' },
+      contentOpacity: { selector: 'vaadin-combo-box-overlay::part(content)', property: 'opacity' },
     },
     forward: {
       include: false,
@@ -3176,6 +3256,10 @@ const ComboBoxClass = compose(
       align-self: center;
     }
 
+    vaadin-combo-box[hide-toggle-button="true"]::part(toggle-button) {
+      display: none;
+    }
+
     vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
       opacity: 0;
     }
@@ -3190,7 +3274,7 @@ const ComboBoxClass = compose(
     // with the same name. Including it will cause Vaadin to calculate NaN size,
     // and reset items to an empty array, and opening the list box with no items
     // to display.
-    excludeAttrsSync: ['tabindex', 'size', 'data'],
+    excludeAttrsSync: ['tabindex', 'size', 'data', 'loading'],
     componentName: componentName$Z,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
@@ -3766,7 +3850,9 @@ class RawCalendar extends BaseInputClass$9 {
       this.monthInput.value = month;
       // For the yearInput we update the base element directly to properly trigger the change event
       // since this can be a custom value
-      this.yearInput.baseElement.value = year;
+      setTimeout(() => {
+        this.yearInput.baseElement.value = year;
+      });
     }
   }
 
@@ -3905,11 +3991,10 @@ class RawCalendar extends BaseInputClass$9 {
   }
 
   onMonthNamesChange() {
-    Array.from(this.monthInput?.children || []).forEach((child, index) => {
-      const month = this.monthNames[index];
-      child.setAttribute('data-name', month);
-      // eslint-disable-next-line no-param-reassign
-      child.textContent = month;
+    setTimeout(() => {
+      if (this.monthInput) {
+        this.monthInput.innerHTML = getMonthsOptions(this.monthNames);
+      }
     });
   }
 
@@ -4156,7 +4241,7 @@ const {
   input: input$1,
   inputMask,
   helperText: helperText$7,
-  errorMessage: errorMessage$9,
+  errorMessage: errorMessage$a,
   disabledPlaceholder,
   inputDisabled,
   inputIcon,
@@ -4189,7 +4274,7 @@ const {
 var textFieldMappings = {
   // we apply font-size also on the host so we can set its width with em
   fontSize: [{}, host$j],
-  fontFamily: [label$8, inputField$5, helperText$7, errorMessage$9],
+  fontFamily: [label$8, inputField$5, helperText$7, errorMessage$a],
 
   labelFontSize: { ...label$8, property: 'font-size' },
   labelFontWeight: { ...label$8, property: 'font-weight' },
@@ -4211,7 +4296,13 @@ var textFieldMappings = {
     { ...inputMask, property: 'background-color' },
   ],
 
-  errorMessageTextColor: { ...errorMessage$9, property: 'color' },
+  errorMessageTextColor: { ...errorMessage$a, property: 'color' },
+  errorMessageIcon: { ...errorMessage$a, property: 'background-image' },
+  errorMessageIconSize: { ...errorMessage$a, property: 'background-size' },
+  errorMessageIconPadding: { ...errorMessage$a, property: 'padding-inline-start' },
+  errorMessageIconRepeat: { ...errorMessage$a, property: 'background-repeat' },
+  errorMessageIconPosition: { ...errorMessage$a, property: 'background-position' },
+
   helperTextColor: { ...helperText$7, property: '-webkit-text-fill-color' },
 
   inputValueTextColor: [
@@ -5974,7 +6065,7 @@ const {
   requiredIndicator: requiredIndicator$7,
   internalWrapper: internalWrapper$1,
   focusedDigitField,
-  errorMessage: errorMessage$8,
+  errorMessage: errorMessage$9,
 } = {
   host: { selector: () => ':host' },
   focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
@@ -6000,7 +6091,12 @@ const PasscodeClass = compose(
         { ...requiredIndicator$7, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$8, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$9, property: 'color' },
+      errorMessageIcon: { ...errorMessage$9, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$9, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$9, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$9, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$9, property: 'background-position' },
       digitValueTextColor: {
         selector: TextFieldClass.componentName,
         property: textVars$2.inputValueTextColor,
@@ -6269,7 +6365,7 @@ const {
   revealButtonIcon,
   label: label$6,
   requiredIndicator: requiredIndicator$6,
-  errorMessage: errorMessage$7,
+  errorMessage: errorMessage$8,
   helperText: helperText$6,
 } = {
   host: { selector: () => ':host' },
@@ -6291,7 +6387,7 @@ const PasswordClass = compose(
       hostMinWidth: { ...host$e, property: 'min-width' },
       hostDirection: { ...host$e, property: 'direction' },
       fontSize: [{}, host$e],
-      fontFamily: [label$6, inputField$4, errorMessage$7, helperText$6],
+      fontFamily: [label$6, inputField$4, errorMessage$8, helperText$6],
       inputHeight: { ...inputField$4, property: 'height' },
       inputHorizontalPadding: [
         { ...inputElement$2, property: 'padding-left' },
@@ -6316,7 +6412,12 @@ const PasswordClass = compose(
         { ...requiredIndicator$6, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$7, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$8, property: 'color' },
+      errorMessageIcon: { ...errorMessage$8, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$8, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$8, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$8, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$8, property: 'background-position' },
 
       inputPlaceholderTextColor: [
         { ...inputElementPlaceholder, property: 'color' },
@@ -6668,7 +6769,7 @@ const {
   textArea: textArea$2,
   requiredIndicator: requiredIndicator$5,
   helperText: helperText$5,
-  errorMessage: errorMessage$6,
+  errorMessage: errorMessage$7,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -6687,13 +6788,18 @@ const TextAreaClass = compose(
       hostMinWidth: { ...host$d, property: 'min-width' },
       hostDirection: { ...host$d, property: 'direction' },
       fontSize: [host$d, textArea$2],
-      fontFamily: [label$5, inputField$3, helperText$5, errorMessage$6],
+      fontFamily: [label$5, inputField$3, helperText$5, errorMessage$7],
       labelTextColor: [
         { ...label$5, property: 'color' },
         { ...requiredIndicator$5, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$5, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$6, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$7, property: 'color' },
+      errorMessageIcon: { ...errorMessage$7, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$7, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$7, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$7, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$7, property: 'background-position' },
       inputBackgroundColor: { ...inputField$3, property: 'background-color' },
       inputValueTextColor: { ...textArea$2, property: 'color' },
       inputPlaceholderTextColor: { ...placeholder$1, property: 'color' },
@@ -8199,7 +8305,8 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$6 {
   }
 
   getRestrictedCountries() {
-    return this.getAttribute('restrict-countries')?.split(',') || [];
+    const attr = this.getAttribute('restrict-countries');
+    return attr ? attr.split(',') : [];
   }
 
   getCountryByDialCode(countryDialCode) {
@@ -8396,7 +8503,7 @@ const {
   countryCodeInput,
   phoneInput: phoneInput$1,
   separator: separator$1,
-  errorMessage: errorMessage$5,
+  errorMessage: errorMessage$6,
   helperText: helperText$4,
 } = {
   host: { selector: () => ':host' },
@@ -8428,7 +8535,7 @@ const PhoneFieldClass = compose(
       ],
       fontFamily: [
         label$4,
-        errorMessage$5,
+        errorMessage$6,
         helperText$4,
         {
           ...countryCodeInput,
@@ -8478,7 +8585,13 @@ const PhoneFieldClass = compose(
         { ...requiredIndicator$4, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$5, property: 'color' },
+
+      errorMessageTextColor: { ...errorMessage$6, property: 'color' },
+      errorMessageIcon: { ...errorMessage$6, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$6, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$6, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$6, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$6, property: 'background-position' },
 
       inputValueTextColor: [
         { ...phoneInput$1, property: textVars$1.inputValueTextColor },
@@ -8842,7 +8955,7 @@ const {
   inputField: inputField$1,
   inputFieldInternal,
   phoneInput,
-  errorMessage: errorMessage$4,
+  errorMessage: errorMessage$5,
   helperText: helperText$3,
 } = {
   host: { selector: () => ':host' },
@@ -8870,7 +8983,7 @@ const PhoneFieldInputBoxClass = compose(
           property: TextFieldClass.cssVarList.fontSize,
         },
       ],
-      fontFamily: [label$3, errorMessage$4, helperText$3],
+      fontFamily: [label$3, errorMessage$5, helperText$3],
       hostWidth: { ...host$b, property: 'width' },
       hostMinWidth: { ...host$b, property: 'min-width' },
       hostDirection: { ...host$b, property: 'direction' },
@@ -8895,7 +9008,13 @@ const PhoneFieldInputBoxClass = compose(
         { ...requiredIndicator$3, property: 'color' },
       ],
       labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
-      errorMessageTextColor: { ...errorMessage$4, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$5, property: 'color' },
+
+      errorMessageIcon: { ...errorMessage$5, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$5, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$5, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$5, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$5, property: 'background-position' },
 
       inputValueTextColor: { ...phoneInput, property: textVars.inputValueTextColor },
 
@@ -9313,7 +9432,7 @@ const {
   host: host$9,
   label: label$2,
   internalInputsWrapper,
-  errorMessage: errorMessage$3,
+  errorMessage: errorMessage$4,
   helperText: helperText$2,
   passwordInput,
   policyPreview,
@@ -9338,11 +9457,16 @@ const NewPasswordClass = compose(
           property: PasswordClass.cssVarList.fontSize,
         },
       ],
-      fontFamily: [label$2, errorMessage$3, helperText$2],
+      fontFamily: [label$2, errorMessage$4, helperText$2],
       labelFontSize: { ...label$2, property: 'font-size' },
       labelFontWeight: { ...label$2, property: 'font-weight' },
       labelTextColor: { ...label$2, property: 'color' },
-      errorMessageTextColor: { ...errorMessage$3, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$4, property: 'color' },
+      errorMessageIcon: { ...errorMessage$4, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$4, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$4, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$4, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$4, property: 'background-position' },
       hostWidth: { ...host$9, property: 'width' },
       hostMinWidth: { ...host$9, property: 'min-width' },
       hostDirection: [
@@ -9703,6 +9827,10 @@ class RawRecaptcha extends BaseClass$1 {
       return;
     }
 
+    this.toggleRecaptchaEles(enabled);
+  }
+
+  toggleRecaptchaEles(enabled) {
     if (enabled) {
       this.recaptchaEle.style.display = '';
       this.mockRecaptchaEle.style.display = 'none';
@@ -9767,6 +9895,7 @@ class RawRecaptcha extends BaseClass$1 {
       this.mockRecaptchaEle.style.display = 'none';
       this.badge.classList.add('hidden');
     } else {
+      this.toggleRecaptchaEles(this.enabled);
       this.badge.classList.remove('hidden');
     }
   }
@@ -10397,7 +10526,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
     }
   };
 
-const { host: host$7, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
+const { host: host$7, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$3 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -10414,7 +10543,12 @@ const buttonSelectionGroupMappings = {
     { ...requiredIndicator$1, property: 'color' },
   ],
   labelRequiredIndicator: { ...requiredIndicator$1, property: 'content' },
-  errorMessageTextColor: { ...errorMessage$2, property: 'color' },
+  errorMessageTextColor: { ...errorMessage$3, property: 'color' },
+  errorMessageIcon: { ...errorMessage$3, property: 'background-image' },
+  errorMessageIconSize: { ...errorMessage$3, property: 'background-size' },
+  errorMessageIconPadding: { ...errorMessage$3, property: 'padding-inline-start' },
+  errorMessageIconRepeat: { ...errorMessage$3, property: 'background-repeat' },
+  errorMessageIconPosition: { ...errorMessage$3, property: 'background-position' },
   itemsSpacing: { ...internalWrapper, property: 'gap' },
 };
 
@@ -12050,7 +12184,7 @@ const {
   label,
   requiredIndicator,
   helperText: helperText$1,
-  errorMessage: errorMessage$1,
+  errorMessage: errorMessage$2,
   chip,
   chipLabel,
   overflowChipFirstBorder,
@@ -12084,14 +12218,19 @@ const MultiSelectComboBoxClass = compose(
       // we apply font-size also on the host so we can set its width with em
       fontSize: [{}, host$5],
       chipFontSize: { ...chipLabel, property: 'font-size' },
-      fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
+      fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$2, chipLabel],
       labelFontSize: { ...label, property: 'font-size' },
       labelFontWeight: { ...label, property: 'font-weight' },
       labelTextColor: [
         { ...label, property: 'color' },
         { ...requiredIndicator, property: 'color' },
       ],
-      errorMessageTextColor: { ...errorMessage$1, property: 'color' },
+      errorMessageTextColor: { ...errorMessage$2, property: 'color' },
+      errorMessageIcon: { ...errorMessage$2, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage$2, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage$2, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage$2, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage$2, property: 'background-position' },
       inputHeight: { ...inputField, property: 'min-height' },
       inputBackgroundColor: { ...inputField, property: 'background-color' },
       inputBorderColor: { ...inputField, property: 'border-color' },
@@ -12800,6 +12939,9 @@ class MappingsFieldInternal extends BaseInputClass$2 {
       'invalid',
       'readonly',
       'disabled',
+      'st-error-message-icon',
+      'st-error-message-icon-size',
+      'st-error-message-icon-padding',
     ]);
   }
 
@@ -12840,7 +12982,16 @@ class MappingsFieldInternal extends BaseInputClass$2 {
     newMappingItem.setAttribute('bordered', 'true');
     this.mappingsContainerEle.appendChild(newMappingItem);
     forwardAttrs(this, newMappingItem, {
-      includeAttrs: ['size', 'full-width', 'separator', 'options', 'disabled'],
+      includeAttrs: [
+        'size',
+        'full-width',
+        'separator',
+        'options',
+        'disabled',
+        'st-error-message-icon',
+        'st-error-message-icon-size',
+        'st-error-message-icon-padding',
+      ],
     });
     // This needs to be done with the timeout, otherwise the validation is performed
     // before the new item is added and thus returns a wrong result
@@ -13073,6 +13224,9 @@ const customMixin$4 = (superclass) =>
           'invalid',
           'readonly',
           'disabled',
+          'st-error-message-icon',
+          'st-error-message-icon-size',
+          'st-error-message-icon-padding',
         ],
       });
 
@@ -13087,7 +13241,7 @@ const customMixin$4 = (superclass) =>
 const {
   host: host$3,
   helperText,
-  errorMessage,
+  errorMessage: errorMessage$1,
   mappingItem,
   labels,
   labelsText,
@@ -13117,7 +13271,7 @@ const MappingsFieldClass = compose(
       hostDirection: { ...host$3, property: 'direction' },
       // we apply font-size also on the host so we can set its width with em
       fontSize: [{}, host$3, { ...separator, property: 'margin-top' }],
-      fontFamily: [helperText, errorMessage, labels],
+      fontFamily: [helperText, errorMessage$1, labels],
       separatorFontSize: { ...separator, property: 'font-size' },
       labelsFontSize: { ...labelsText, property: 'font-size' },
       labelsLineHeight: [
@@ -13198,7 +13352,16 @@ customElements.define(componentName$h, MappingsFieldInternal);
 
 const componentName$f = getComponentName('mapping-item');
 
-const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
+const inputAttrs = [
+  'size',
+  'bordered',
+  'readonly',
+  'full-width',
+  'disabled',
+  'st-error-message-icon',
+  'st-error-message-icon-size',
+  'st-error-message-icon-padding',
+];
 
 const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$f, baseSelector: 'div' });
 
@@ -13961,9 +14124,10 @@ const customMixin$3 = (superclass) =>
     }
   };
 
-const { host, groupInput } = {
+const { host, groupInput, errorMessage } = {
   host: { selector: () => ':host' },
   groupInput: { selector: 'descope-text-field' },
+  errorMessage: { selector: '::part(error-message)' },
 };
 
 const SamlGroupMappingsClass = compose(
@@ -13972,6 +14136,11 @@ const SamlGroupMappingsClass = compose(
       hostWidth: { ...host, property: 'width' },
       hostDirection: { ...host, property: 'direction' },
       groupNameInputMarginBottom: { ...groupInput, property: 'margin-bottom' },
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
     },
   }),
   draggableMixin,
@@ -14917,6 +15086,9 @@ const attrsToSync$1 = [
   'answer-label',
   'answer-placeholder',
   'answer-data-errormessage-value-missing',
+  'st-error-message-icon',
+  'st-error-message-icon-size',
+  'st-error-message-icon-padding',
 ];
 
 const attrsToReRender$1 = ['count', 'questions'];
@@ -15145,6 +15317,9 @@ const textFieldsAttrs = [
   'size',
   'answer-placeholder',
   'answer-data-errormessage-value-missing',
+  'st-error-message-icon',
+  'st-error-message-icon-size',
+  'st-error-message-icon-padding',
 ];
 
 const textsAttrs = ['question-mode'];
@@ -15333,6 +15508,27 @@ const SecurityQuestionsVerifyClass = compose(
         selector: () => TextClass.componentName,
         property: 'cursor',
       },
+
+      errorMessageIcon: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessageIcon,
+      },
+      errorMessageIconSize: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessageSize,
+      },
+      errorMessageIconPadding: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessagePadding,
+      },
+      errorMessageIconRepeat: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessageRepeat,
+      },
+      errorMessageIconPosition: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessagePosition,
+      },
     },
   }),
   draggableMixin,
@@ -15359,6 +15555,9 @@ const attrs = {
     'readonly',
     'required',
     'st-host-direction',
+    'st-error-message-icon',
+    'st-error-message-icon-size',
+    'st-error-message-icon-padding',
   ],
   email: [
     'label',
@@ -15644,6 +15843,56 @@ const HybridFieldClass = compose(
         { selector: () => 'descope-phone-field', property: 'direction' },
         { selector: () => 'descope-phone-input-box-field', property: 'direction' },
       ],
+      errorMessageIcon: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIcon,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIcon,
+        },
+      ],
+      errorMessageIconSize: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconSize,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconSize,
+        },
+      ],
+      errorMessageIconPadding: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconPadding,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPadding,
+        },
+      ],
+      errorMessageIconRepeat: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconRepeat,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconRepeat,
+        },
+      ],
+      errorMessageIconPosition: [
+        {
+          selector: () => PhoneFieldClass.componentName,
+          property: PhoneFieldClass.cssVarList.errorMessageIconPosition,
+        },
+        {
+          selector: () => PhoneFieldInputBoxClass.componentName,
+          property: PhoneFieldInputBoxClass.cssVarList.errorMessageIconPosition,
+        },
+      ],
     },
   }),
   draggableMixin,
@@ -16266,6 +16515,12 @@ const [theme$1, refs, vars$R] = createHelperVars(
 
     overlayOpacity: '0.3',
 
+    errorMessageIcon: '',
+    errorMessageIconSize: '0',
+    errorMessageIconPadding: '0',
+    errorMessageIconPosition: '0 0.4em',
+    errorMessageIconRepeat: 'no-repeat',
+
     size: {
       xs: { fontSize: '12px', chipFontSize: '10px' },
       sm: { fontSize: '14px', chipFontSize: '12px' },
@@ -16397,6 +16652,13 @@ const textField = {
   [vars$Q.inputIconOffset]: globalRefs$w.spacing.md,
   [vars$Q.inputIconSize]: refs.inputIconSize,
   [vars$Q.inputIconColor]: refs.placeholderTextColor,
+
+  // error message icon
+  [vars$Q.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$Q.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$Q.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$Q.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$Q.errorMessageIconPosition]: refs.errorMessageIconPosition,
 };
 
 var textField$1 = /*#__PURE__*/Object.freeze({
@@ -16445,6 +16707,13 @@ const password = {
   [vars$P.placeholderOpacity]: refs.placeholderOpacity,
   [vars$P.inputVerticalAlignment]: refs.inputVerticalAlignment,
   [vars$P.valueInputHeight]: refs.valueInputHeight,
+
+  // error message icon
+  [vars$P.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$P.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$P.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$P.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$P.errorMessageIconPosition]: refs.errorMessageIconPosition,
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
@@ -16489,6 +16758,13 @@ const numberField = {
   [vars$O.inputVerticalAlignment]: refs.inputVerticalAlignment,
   [vars$O.valueInputHeight]: refs.valueInputHeight,
   [vars$O.valueInputMarginBottom]: refs.valueInputMarginBottom,
+
+  // error message icon
+  [vars$O.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$O.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$O.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$O.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$O.errorMessageIconPosition]: refs.errorMessageIconPosition,
 };
 
 var numberField$1 = /*#__PURE__*/Object.freeze({
@@ -16533,6 +16809,13 @@ const emailField = {
   [vars$N.inputVerticalAlignment]: refs.inputVerticalAlignment,
   [vars$N.valueInputHeight]: refs.valueInputHeight,
   [vars$N.valueInputMarginBottom]: refs.valueInputMarginBottom,
+
+  // error message icon
+  [vars$N.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$N.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$N.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$N.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$N.errorMessageIconPosition]: refs.errorMessageIconPosition,
 };
 
 var emailField$1 = /*#__PURE__*/Object.freeze({
@@ -16565,6 +16848,14 @@ const textArea = {
   [vars$M.inputOutlineOffset]: refs.outlineOffset,
   [vars$M.inputResizeType]: 'vertical',
   [vars$M.inputMinHeight]: '5em',
+
+  // error message icon
+  [vars$M.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$M.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$M.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$M.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$M.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   textAlign: {
     right: { [vars$M.inputTextAlign]: 'right' },
     left: { [vars$M.inputTextAlign]: 'left' },
@@ -16607,6 +16898,13 @@ const checkbox = {
   [vars$L.inputBackgroundColor]: refs.backgroundColor,
   [vars$L.inputSize]: checkboxSize,
   [vars$L.inputValueTextColor]: refs.valueTextColor,
+
+  // error message icon
+  [vars$L.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$L.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$L.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$L.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$L.errorMessageIconPosition]: refs.errorMessageIconPosition,
 };
 
 var checkbox$1 = /*#__PURE__*/Object.freeze({
@@ -16654,6 +16952,13 @@ const switchToggle = {
   [vars$K.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$K.errorMessageTextColor]: refs.errorMessageTextColor,
 
+  // error message icon
+  [vars$K.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$K.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$K.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$K.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$K.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   _checked: {
     [vars$K.trackBorderColor]: refs.borderColor,
     [vars$K.knobLeftOffset]: `calc(100% - var(${vars$K.knobSize}) - ${knobMargin})`,
@@ -17088,6 +17393,13 @@ const passcode = {
   [vars$B.focusedDigitFieldOutlineColor]: refs.outlineColor,
   [vars$B.digitSize]: refs.inputHeight,
 
+  // error message icon
+  [vars$B.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$B.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$B.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$B.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$B.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   size: {
     xs: { [vars$B.spinnerSize]: '15px' },
     sm: { [vars$B.spinnerSize]: '20px' },
@@ -17253,6 +17565,13 @@ const comboBox = {
   [vars$y.valueInputHeight]: refs.valueInputHeight,
   [vars$y.valueInputMarginBottom]: refs.valueInputMarginBottom,
 
+  // error message icon
+  [vars$y.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$y.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$y.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$y.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$y.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   _readonly: {
     [vars$y.inputDropdownButtonCursor]: 'default',
   },
@@ -17268,6 +17587,25 @@ const comboBox = {
   // Overlay direct theme:
   [vars$y.overlay.minHeight]: '400px',
   [vars$y.overlay.margin]: '0',
+
+  [vars$y.overlay.contentHeight]: '100%',
+  [vars$y.overlay.contentOpacity]: '1',
+  _loading: {
+    [vars$y.overlay.loaderTop]: '50%',
+    [vars$y.overlay.loaderLeft]: '50%',
+    [vars$y.overlay.loaderRight]: 'auto',
+    // Margin has to be negative to center the loader, "transform" can't be used because the animation uses it
+    // Margin has to be half of the width/height of the loader to center it
+    [vars$y.overlay.loaderMargin]: '-15px 0 0 -15px',
+    [vars$y.overlay.loaderWidth]: '30px',
+    [vars$y.overlay.loaderHeight]: '30px',
+    [vars$y.overlay.loaderBorder]: '2px solid transparent',
+    [vars$y.overlay
+      .loaderBorderColor]: `${globalRefs$m.colors.primary.highlight} ${globalRefs$m.colors.primary.highlight} ${globalRefs$m.colors.primary.main} ${globalRefs$m.colors.primary.main}`,
+    [vars$y.overlay.loaderBorderRadius]: '50%',
+    [vars$y.overlay.contentHeight]: '100px',
+    [vars$y.overlay.contentOpacity]: '0',
+  },
 };
 
 var comboBox$1 = /*#__PURE__*/Object.freeze({
@@ -17314,6 +17652,13 @@ const phoneField = {
   [vars$w.valueInputHeight]: refs.valueInputHeight,
   [vars$w.valueInputMarginBottom]: refs.valueInputMarginBottom,
 
+  // error message icon
+  [vars$w.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$w.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$w.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$w.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$w.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   // '@overlay': {
   // 	overlayItemBackgroundColor: 'red'
   // }
@@ -17358,6 +17703,13 @@ const phoneInputBoxField = {
   [vars$v.valueInputMarginBottom]: refs.valueInputMarginBottom,
   [vars$v.inputHorizontalPadding]: '0',
 
+  // error message icon
+  [vars$v.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$v.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$v.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$v.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$v.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   _fullWidth: {
     [vars$v.hostWidth]: refs.width,
   },
@@ -17387,6 +17739,13 @@ const newPassword = {
   [vars$u.policyPreviewPadding]: globalRefs$l.spacing.lg,
   [vars$u.valueInputHeight]: refs.valueInputHeight,
 
+  // error message icon
+  [vars$u.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$u.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$u.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$u.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$u.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.
     // That's why we fake the required indicator on each input.
@@ -17510,9 +17869,17 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.fontFamily]: refs.fontFamily,
   [vars.labelTextColor]: refs.labelTextColor,
   [vars.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
   [vars.itemsSpacing]: globalRefs$j.spacing.sm,
   [vars.hostWidth]: refs.width,
+
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+
+  // error message icon
+  [vars.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
 });
 
 const vars$r = ButtonSelectionGroupClass.cssVarList;
@@ -17711,6 +18078,13 @@ const multiSelectComboBox = {
   [vars$m.placeholderOpacity]: refs.placeholderOpacity,
   [vars$m.inputVerticalAlignment]: refs.inputVerticalAlignment,
 
+  // error message icon
+  [vars$m.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$m.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$m.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$m.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$m.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   labelType: {
     floating: {
       [vars$m.inputHorizontalPadding]: '0.25em',
@@ -17938,6 +18312,13 @@ const samlGroupMappings = {
   [vars$g.hostWidth]: refs.width,
   [vars$g.hostDirection]: refs.direction,
   [vars$g.groupNameInputMarginBottom]: '1em',
+
+  // error message icon
+  [vars$g.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$g.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$g.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$g.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$g.errorMessageIconPosition]: refs.errorMessageIconPosition,
 };
 
 var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
@@ -18143,6 +18524,11 @@ const radioGroup = {
   [vars$c.labelTextColor]: refs.labelTextColor,
   [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$c.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$c.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$c.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$c.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$c.errorMessageIconPosition]: refs.errorMessageIconPosition,
   [vars$c.helperTextColor]: refs.helperTextColor,
   [vars$c.itemsLabelColor]: globalRefs$7.colors.surface.contrast,
 
@@ -18560,6 +18946,13 @@ const vars$1 = HybridFieldClass.cssVarList;
 const hybridField = {
   [vars$1.hostDirection]: refs.direction,
 
+  // error message icon
+  [vars$1.errorMessageIcon]: refs.errorMessageIcon,
+  [vars$1.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars$1.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars$1.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars$1.errorMessageIconPosition]: refs.errorMessageIconPosition,
+
   _fullWidth: {
     [vars$1.hostWidth]: '100%',
   },