@descope/web-components-ui 2.1.15 → 2.1.17

package/dist/cjs/index.cjs.js

@@ -351,6 +351,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;
 };
 
@@ -1638,7 +1642,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);
@@ -1647,7 +1651,7 @@ const createStyleMixin$1 =
 
 
       #setAttrOverride(attrName, value) {
-        const style = this.#overrideStyleEle?.cssRules[0]?.style;
+        const style = this.#overrideStyleEle.cssRules[0].style;
 
         if (!style) return;
 
@@ -3144,7 +3148,7 @@ const IconClass = compose(
         display: inline-flex;
       }
       `,
-    excludeAttrsSync: ['tabindex', 'class'],
+    excludeAttrsSync: ['tabindex', 'class', 'style'],
     componentName: componentName$1e,
   }),
 );
@@ -3275,7 +3279,7 @@ const ButtonClass = compose(
         padding: 0;
 			}
 		`,
-    excludeAttrsSync: ['tabindex', 'class'],
+    excludeAttrsSync: ['tabindex', 'class', 'style'],
     componentName: componentName$1d,
   })
 );
@@ -3633,7 +3637,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);
@@ -3641,7 +3645,7 @@ const createStyleMixin =
       }
 
       #setAttrOverride(attrName, value) {
-        const style = this.#overrideStyleEle?.cssRules[0]?.style;
+        const style = this.#overrideStyleEle.cssRules[0].style;
 
         if (!style) return;
 
@@ -5701,7 +5705,7 @@ const PasswordClass = compose$1(
         opacity: 0;
       }
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$1a,
   })
 );
@@ -5794,7 +5798,7 @@ const NumberFieldClass = compose$1(
         opacity: 0;
       }
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$19,
   })
 );
@@ -5919,7 +5923,7 @@ const EmailFieldClass = compose$1(
         opacity: 0;
       }
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$18,
   })
 );
@@ -6058,7 +6062,7 @@ const TextAreaClass = compose$1(
 			${resetInputPlaceholder('vaadin-text-area', 'textarea')}
 			${resetInputCursor('vaadin-text-area')}
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$17,
   })
 );
@@ -6325,7 +6329,7 @@ const CheckboxClass = compose$1(
         content: none;
       }
     `,
-    excludeAttrsSync: ['label', 'tabindex'],
+    excludeAttrsSync: ['label', 'tabindex', 'style'],
     componentName: componentName$15,
   })
 );
@@ -6512,7 +6516,7 @@ const SwitchToggleClass = compose$1(
 				content: '';
 			}
 		`,
-    excludeAttrsSync: ['label', 'tabindex'],
+    excludeAttrsSync: ['label', 'tabindex', 'style'],
     componentName: componentName$14,
   })
 );
@@ -7882,7 +7886,7 @@ const PasscodeClass = compose$1(
       ${resetInputLabelPosition('vaadin-text-field')}
 			${resetInputCursor('vaadin-text-field')}
     	`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$V,
   })
 );
@@ -8760,7 +8764,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$T,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   }),
@@ -10508,7 +10512,7 @@ const PhoneFieldClass = compose$1(
 			}
       ${resetInputLabelPosition('vaadin-text-field')}
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$Q,
   })
 );
@@ -10791,7 +10795,7 @@ const PhoneFieldInputBoxClass = compose$1(
     ${resetInputLabelPosition('vaadin-text-field')}
     ${inputFloatingLabelStyle()}
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$O,
   })
 );
@@ -11346,7 +11350,7 @@ const NewPasswordClass = compose$1(
       display: none;
     }
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$L,
   })
 );
@@ -12234,7 +12238,7 @@ const ButtonSelectionGroupClass = compose$1(
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$H,
   })
 );
@@ -12423,7 +12427,7 @@ const ButtonMultiSelectionGroupClass = compose$1(
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$F,
   })
 );
@@ -13178,7 +13182,7 @@ const NotificationCardClass = compose$1(
       width: 100%;
     }
     `,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$C,
   })
 );
@@ -13893,7 +13897,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$B,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
@@ -14453,6 +14457,7 @@ const MappingsFieldClass = compose$1(
       'button-label',
       'options',
       'error-message',
+      'style',
     ],
     componentName: componentName$x,
   })
@@ -15152,6 +15157,7 @@ const SamlGroupMappingsClass = compose$1(
       'separator',
       'options',
       'error-message',
+      'style',
     ],
     componentName: componentName$t,
   })
@@ -15677,7 +15683,7 @@ const RadioButtonClass = compose$1(
   createProxy({
     slots: [''],
     wrappedEleName: 'vaadin-radio-button',
-    excludeAttrsSync: ['tabindex', 'data'],
+    excludeAttrsSync: ['tabindex', 'data', 'style'],
     includeForwardProps: ['checked', 'name', 'disabled'],
     componentName: componentName$r,
   })
@@ -15852,7 +15858,7 @@ const RadioGroupClass = compose$1(
     ${resetInputLabelPosition('vaadin-radio-group')}
     `,
 
-    excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
+    excludeAttrsSync: ['tabindex', 'size', 'data', 'direction', 'style'],
     componentName: componentName$q,
     includeForwardProps: ['value'],
   })
@@ -18163,7 +18169,7 @@ const AppsListClass = compose(
   createProxy$1({
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
-    excludeAttrsSync: ['tabindex', 'class', 'empty'],
+    excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
     componentName: componentName$n,
     style: () => `
       :host {
@@ -20360,7 +20366,7 @@ const AutocompleteFieldClass = compose(
       padding: 0;
     }
   `,
-    excludeAttrsSync: ['tabindex', 'error-message', 'label'],
+    excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
     componentName: componentName$c,
   }),
 );
@@ -20860,7 +20866,7 @@ const AddressFieldClass = compose(
     padding: 0;
   }
 `,
-    excludeAttrsSync: ['tabindex', 'error-message', 'label'],
+    excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
     componentName: componentName$a,
   }),
 );
@@ -23351,7 +23357,7 @@ const NotificationClass = compose$1(
 )(
   createProxy({
     wrappedEleName: 'vaadin-notification',
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName,
   })
 );