@descope/web-components-ui 2.1.15 → 2.1.17

package/dist/index.esm.js

@@ -407,6 +407,10 @@ const injectStyle = (cssString, ref, { prepend = false } = {}) => {
     _ref.adoptedStyleSheets = adoptedStyleSheets;
   }
 
+  if(cssString && !style.cssRules[0]?.style){
+    console.warn(`No style rules were created, make sure the CSS is valid:\n "${cssString}"`);
+  }
+
   return style;
 };
 
@@ -1316,7 +1320,7 @@ const createStyleMixin$1 =
           if (elementId) {
             // basically this is enough to make the selector more specific
             // but just in case there is no id, we will also add the class multiple times
-            classSpecifier += `#${elementId}`;
+            classSpecifier += `#${CSS.escape(elementId)}`;
           }
 
           this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
@@ -1324,7 +1328,7 @@ const createStyleMixin$1 =
       }
 
       #setAttrOverride(attrName, value) {
-        const style = this.#overrideStyleEle?.cssRules[0]?.style;
+        const style = this.#overrideStyleEle.cssRules[0].style;
 
         if (!style) return;
 
@@ -2868,7 +2872,7 @@ const CheckboxClass = compose$1(
         content: none;
       }
     `,
-    excludeAttrsSync: ['label', 'tabindex'],
+    excludeAttrsSync: ['label', 'tabindex', 'style'],
     componentName: componentName$1j,
   })
 );
@@ -3018,7 +3022,7 @@ const SwitchToggleClass = compose$1(
 				content: '';
 			}
 		`,
-    excludeAttrsSync: ['label', 'tabindex'],
+    excludeAttrsSync: ['label', 'tabindex', 'style'],
     componentName: componentName$1i,
   })
 );
@@ -3411,7 +3415,7 @@ const createStyleMixin =
           if (elementId) {
             // basically this is enough to make the selector more specific
             // but just in case there is no id, we will also add the class multiple times
-            classSpecifier += `#${elementId}`;
+            classSpecifier += `#${CSS.escape(elementId)}`;
           }
 
           this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
@@ -3420,7 +3424,7 @@ const createStyleMixin =
 
 
       #setAttrOverride(attrName, value) {
-        const style = this.#overrideStyleEle?.cssRules[0]?.style;
+        const style = this.#overrideStyleEle.cssRules[0].style;
 
         if (!style) return;
 
@@ -5359,7 +5363,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', 'loading'],
+    excludeAttrsSync: ['tabindex', 'size', 'data', 'loading', 'style'],
     componentName: componentName$1e,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   }),
@@ -5580,7 +5584,7 @@ const IconClass = compose(
         display: inline-flex;
       }
       `,
-    excludeAttrsSync: ['tabindex', 'class'],
+    excludeAttrsSync: ['tabindex', 'class', 'style'],
     componentName: componentName$1c,
   }),
 );
@@ -5711,7 +5715,7 @@ const ButtonClass = compose(
         padding: 0;
 			}
 		`,
-    excludeAttrsSync: ['tabindex', 'class'],
+    excludeAttrsSync: ['tabindex', 'class', 'style'],
     componentName: componentName$1b,
   })
 );
@@ -8318,7 +8322,7 @@ const EmailFieldClass = compose$1(
         opacity: 0;
       }
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$15,
   })
 );
@@ -8442,7 +8446,7 @@ const NumberFieldClass = compose$1(
         opacity: 0;
       }
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$11,
   })
 );
@@ -8919,7 +8923,7 @@ const PasscodeClass = compose$1(
       ${resetInputLabelPosition('vaadin-text-field')}
 			${resetInputCursor('vaadin-text-field')}
     	`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$$,
   })
 );
@@ -9250,7 +9254,7 @@ const PasswordClass = compose$1(
         opacity: 0;
       }
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$_,
   })
 );
@@ -9339,7 +9343,7 @@ const TextAreaClass = compose$1(
 			${resetInputPlaceholder('vaadin-text-area', 'textarea')}
 			${resetInputCursor('vaadin-text-area')}
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$Z,
   })
 );
@@ -11277,7 +11281,7 @@ const PhoneFieldClass = compose$1(
 			}
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$X,
   })
 );
@@ -11786,7 +11790,7 @@ const PhoneFieldInputBoxClass = compose$1(
     ${resetInputLabelPosition('vaadin-text-field')}
     ${inputFloatingLabelStyle()}
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$V,
   })
 );
@@ -12291,7 +12295,7 @@ const NewPasswordClass = compose$1(
       display: none;
     }
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$S,
   })
 );
@@ -13447,7 +13451,7 @@ const ButtonSelectionGroupClass = compose$1(
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$O,
   })
 );
@@ -13723,7 +13727,7 @@ const ButtonMultiSelectionGroupClass = compose$1(
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$L,
   })
 );
@@ -15238,7 +15242,7 @@ const MultiSelectComboBoxClass = compose$1(
     // to display.
     // Note: we exclude `placeholder` because the vaadin component observes it and
     // tries to override it, causing us to lose the user set placeholder.
-    excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
+    excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder', 'style'],
     componentName: componentName$E,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
@@ -15492,7 +15496,7 @@ const NotificationCardClass = compose$1(
       width: 100%;
     }
     `,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$C,
   })
 );
@@ -15593,7 +15597,7 @@ const NotificationClass = compose$1(
 )(
   createProxy$1({
     wrappedEleName: 'vaadin-notification',
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$B,
   })
 );
@@ -16019,6 +16023,7 @@ const MappingsFieldClass = compose$1(
       'button-label',
       'options',
       'error-message',
+      'style',
     ],
     componentName: componentName$z,
   })
@@ -17012,6 +17017,7 @@ const SamlGroupMappingsClass = compose$1(
       'separator',
       'options',
       'error-message',
+      'style',
     ],
     componentName: componentName$t,
   })
@@ -17084,7 +17090,7 @@ const RadioButtonClass = compose$1(
   createProxy$1({
     slots: [''],
     wrappedEleName: 'vaadin-radio-button',
-    excludeAttrsSync: ['tabindex', 'data'],
+    excludeAttrsSync: ['tabindex', 'data', 'style'],
     includeForwardProps: ['checked', 'name', 'disabled'],
     componentName: componentName$s,
   })
@@ -17259,7 +17265,7 @@ const RadioGroupClass = compose$1(
     ${resetInputLabelPosition('vaadin-radio-group')}
     `,
 
-    excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
+    excludeAttrsSync: ['tabindex', 'size', 'data', 'direction', 'style'],
     componentName: componentName$r,
     includeForwardProps: ['value'],
   })
@@ -22343,7 +22349,7 @@ const AppsListClass = compose(
   createProxy({
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
-    excludeAttrsSync: ['tabindex', 'class', 'empty'],
+    excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
     componentName: componentName$c,
     style: () => `
       :host {
@@ -23074,7 +23080,7 @@ const AutocompleteFieldClass = compose(
       padding: 0;
     }
   `,
-    excludeAttrsSync: ['tabindex', 'error-message', 'label'],
+    excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
     componentName: componentName$a,
   }),
 );
@@ -23574,7 +23580,7 @@ const AddressFieldClass = compose(
     padding: 0;
   }
 `,
-    excludeAttrsSync: ['tabindex', 'error-message', 'label'],
+    excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
     componentName: componentName$8,
   }),
 );