@descope/web-components-ui 1.32.0 → 1.34.0

package/dist/cjs/index.cjs.js

@@ -296,6 +296,22 @@ const forwardProps$2 = (src, target, props = []) => {
   Object.defineProperties(target, config);
 };
 
+const injectStyle = (cssString, ref, {prepend = false} = {}) => {
+  const style = new CSSStyleSheet();
+  const _ref = ref?.shadowRoot || ref;
+  if (cssString) {
+    style.replaceSync(cssString);
+  }
+  if (_ref) {
+    const adoptedStyleSheets = [...(_ref.adoptedStyleSheets || [])];
+    adoptedStyleSheets[prepend ? 'unshift' : 'push'](style);
+
+    _ref.adoptedStyleSheets = adoptedStyleSheets;
+  }
+
+  return style;
+};
+
 class ComponentsThemeManager {
   static mountOnPropName = 'DescopeThemeManager';
 
@@ -1153,13 +1169,11 @@ const createStyleMixin$1 =
       }
 
       #onComponentThemeChange() {
-        this.#themeStyleEle.innerHTML = this.#componentTheme[this.#themeSection];
+        this.#themeStyleEle.replaceSync(this.#componentTheme[this.#themeSection]);
       }
 
       #createComponentTheme() {
-        this.#themeStyleEle = document.createElement('style');
-        this.#themeStyleEle.id = `style-mixin-theme__${componentName}`;
-        this.#rootElement.prepend(this.#themeStyleEle);
+        this.#themeStyleEle = injectStyle('', this.#rootElement, { prepend: true });
         this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(
           this.#onComponentThemeChange.bind(this)
         );
@@ -1168,21 +1182,18 @@ const createStyleMixin$1 =
 
       #createOverridesStyle() {
         if (this.#styleAttributes.length) {
-          this.#overrideStyleEle = document.createElement('style');
-          this.#overrideStyleEle.id = `style-mixin-overrides__${componentName}`;
-
           const classSpecifier = createClassSelectorSpecifier$1(
             componentName,
             CSS_SELECTOR_SPECIFIER_MULTIPLY$1
           );
 
-          this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
-          this.#rootElement.append(this.#overrideStyleEle);
+          this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
         }
       }
 
       #setAttrOverride(attrName, value) {
-        const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
+        const style = this.#overrideStyleEle?.cssRules[0].style;
+
         if (!style) return;
 
         const varName = getCssVarName$1(
@@ -1198,31 +1209,22 @@ const createStyleMixin$1 =
       }
 
       #updateOverridesStyle(attrs = []) {
-        let shouldUpdate = false;
-
         attrs.forEach((attr) => {
           if (this.#styleAttributes.includes(attr)) {
             this.#setAttrOverride(attr, this.getAttribute(attr));
-            shouldUpdate = true;
           }
         });
-
-        if (shouldUpdate) {
-          // we are rewriting the style back to the style tag
-          this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText;
-        }
       }
 
       #createMappingStyle() {
         if (Object.keys(mappings).length) {
-          const themeStyle = document.createElement('style');
-          themeStyle.id = `style-mixin-mappings__${componentName}`;
-          themeStyle.innerHTML = createStyle$1(
+          const style = createStyle$1(
             kebabCaseJoin$1(componentName, this.#componentNameSuffix),
             this.#baseSelector,
             mappings
           );
-          this.#rootElement.prepend(themeStyle);
+
+          injectStyle(style, this.#rootElement, { prepend: true });
         }
       }
 
@@ -1266,8 +1268,7 @@ const draggableMixin$1 = (superclass) =>
     constructor() {
       super();
 
-      this.#styleEle = document.createElement('style');
-      this.#styleEle.innerText = `* { cursor: inherit!important }`;
+      injectStyle(`* { cursor: inherit!important }`, this);
     }
 
     #handleDraggableStyle(isDraggable) {
@@ -1516,7 +1517,6 @@ const createProxy$1 = ({
 
     constructor() {
       super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
-			<style id="create-proxy">${(isFunction$1(style) ? style() : style) || ''}</style>
 			<${wrappedEleName}>
 			${slots
         .map(
@@ -1527,6 +1527,8 @@ const createProxy$1 = ({
         .join('')}
 			</${wrappedEleName}>
 		`;
+
+      injectStyle((isFunction$1(style) ? style() : style) || '', this);
     }
 
     init() {
@@ -2005,8 +2007,6 @@ const composedProxyInputMixin$1 = (proxyInputMixinConfig) =>
 // because of that, we are adding this separator that is also used as a differentiator
 const DISPLAY_NAME_SEPARATOR$1 = '_';
 
-const sanitizeSelector$1 = (selector) => selector.replace(/[^\w\s]/gi, '');
-
 const withWaitForShadowRoot$1 = (getRootElementFn) => async (that) => {
   const ele = await getRootElementFn(that);
 
@@ -2037,7 +2037,7 @@ const withWaitForShadowRoot$1 = (getRootElementFn) => async (that) => {
 const portalMixin$1 =
   ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
   (superclass) => {
-    const eleDisplayName = name || sanitizeSelector$1(selector);
+    const eleDisplayName = name;
 
     const BaseClass = createStyleMixin$1({
       mappings,
@@ -2523,7 +2523,11 @@ class RawIcon extends createBaseClass$1({ componentName: componentName$16, baseS
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+		<slot></slot>
+	`;
+
+    injectStyle(
+      `
 			:host > slot {
 				box-sizing: border-box;
 				width: 100%;
@@ -2534,9 +2538,9 @@ class RawIcon extends createBaseClass$1({ componentName: componentName$16, baseS
 			:host {
 				display: inline-block;
 			}
-		</style>
-		<slot></slot>
-	`;
+  `,
+      this
+    );
   }
 
   init() {
@@ -3313,7 +3317,7 @@ const TextFieldClass = compose$1(
         align-self: center;
       }
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$14,
   })
 );
@@ -4718,7 +4722,11 @@ class RawContainer extends createBaseClass$1({ componentName: componentName$X, b
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+		<slot></slot>
+	`;
+
+    injectStyle(
+      `
 			:host > slot {
 				box-sizing: border-box;
 				width: 100%;
@@ -4729,9 +4737,9 @@ class RawContainer extends createBaseClass$1({ componentName: componentName$X, b
 			:host {
 				display: inline-block;
 			}
-		</style>
-		<slot></slot>
-	`;
+  `,
+      this
+    );
   }
 }
 
@@ -4911,13 +4919,17 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
     constructor() {
       super();
       this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
+			<div></div>
+			`;
+
+      injectStyle(
+        `
 				:host {
 					display: inline-flex;
 				}
 				:host([draggable="true"]) > div {
 					pointer-events: none
-				}		
+				}
 				:host > div {
 					display: inline-block;
 					max-width: 100%;
@@ -4926,9 +4938,9 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
 					margin: auto;
 					${getContent()}
 				}
-			</style>
-			<div></div>
-			`;
+        `,
+        this
+      );
     }
   }
 
@@ -5352,13 +5364,11 @@ const createStyleMixin =
       }
 
       #onComponentThemeChange() {
-        this.#themeStyleEle.innerHTML = this.#componentTheme[this.#themeSection];
+        this.#themeStyleEle.replaceSync(this.#componentTheme[this.#themeSection]);
       }
 
       #createComponentTheme() {
-        this.#themeStyleEle = document.createElement('style');
-        this.#themeStyleEle.id = `style-mixin-theme__${componentName}`;
-        this.#rootElement.prepend(this.#themeStyleEle);
+        this.#themeStyleEle = injectStyle('', this.#rootElement, { prepend: true });
         this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(
           this.#onComponentThemeChange.bind(this)
         );
@@ -5367,21 +5377,18 @@ const createStyleMixin =
 
       #createOverridesStyle() {
         if (this.#styleAttributes.length) {
-          this.#overrideStyleEle = document.createElement('style');
-          this.#overrideStyleEle.id = `style-mixin-overrides__${componentName}`;
-
           const classSpecifier = createClassSelectorSpecifier(
             componentName,
             CSS_SELECTOR_SPECIFIER_MULTIPLY
           );
 
-          this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
-          this.#rootElement.append(this.#overrideStyleEle);
+          this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
         }
       }
 
       #setAttrOverride(attrName, value) {
-        const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
+        const style = this.#overrideStyleEle?.cssRules[0].style;
+
         if (!style) return;
 
         const varName = getCssVarName(
@@ -5397,31 +5404,22 @@ const createStyleMixin =
       }
 
       #updateOverridesStyle(attrs = []) {
-        let shouldUpdate = false;
-
         attrs.forEach((attr) => {
           if (this.#styleAttributes.includes(attr)) {
             this.#setAttrOverride(attr, this.getAttribute(attr));
-            shouldUpdate = true;
           }
         });
-
-        if (shouldUpdate) {
-          // we are rewriting the style back to the style tag
-          this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText;
-        }
       }
 
       #createMappingStyle() {
         if (Object.keys(mappings).length) {
-          const themeStyle = document.createElement('style');
-          themeStyle.id = `style-mixin-mappings__${componentName}`;
-          themeStyle.innerHTML = createStyle(
+          const style = createStyle(
             kebabCaseJoin(componentName, this.#componentNameSuffix),
             this.#baseSelector,
             mappings
           );
-          this.#rootElement.prepend(themeStyle);
+
+          injectStyle(style, this.#rootElement, { prepend: true });
         }
       }
 
@@ -6090,7 +6088,6 @@ const createProxy = ({
 
     constructor() {
       super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
-			<style id="create-proxy">${(isFunction(style) ? style() : style) || ''}</style>
 			<${wrappedEleName}>
 			${slots
         .map(
@@ -6101,6 +6098,8 @@ const createProxy = ({
         .join('')}
 			</${wrappedEleName}>
 		`;
+
+    injectStyle((isFunction(style) ? style() : style) || '', this);
     }
 
     init() {
@@ -6371,9 +6370,6 @@ const composedProxyInputMixin = (proxyInputMixinConfig) =>
 const DISPLAY_NAME_SEPARATOR = '_';
 const PORTAL_THEME_PREFIX = '@';
 
-
-const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
-
 const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
   const ele = await getRootElementFn(that);
 
@@ -6404,7 +6400,7 @@ const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
 const portalMixin =
   ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
   (superclass) => {
-    const eleDisplayName = name || sanitizeSelector(selector);
+    const eleDisplayName = name;
 
     const BaseClass = createStyleMixin({
       mappings,
@@ -6427,14 +6423,9 @@ const portalMixin =
         // we cannot use "this" before calling "super"
         const getRootElement = async (that) => {
           const baseEle = (that.shadowRoot || that).querySelector(that.baseSelector);
-          if (!selector) {
+          {
             return baseEle;
           }
-
-          // in case we have a selector, we should first wait for the base element shadow root
-          //  and then look for the internal element
-          const baseEleShadowRoot = await withWaitForShadowRoot(() => baseEle)(that);
-          return baseEleShadowRoot.querySelector(selector);
         };
 
         const getPortalElement = withWaitForShadowRoot(getRootElement);
@@ -6550,7 +6541,10 @@ class RawText extends createBaseClass({
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
+    <slot part="text-wrapper"></slot>
+    `;
+
+    injectStyle(`
       :host {
         display: inline-block;
         line-height: 1em;
@@ -6559,9 +6553,7 @@ class RawText extends createBaseClass({
         width: 100%;
         display: inline-block;
       }
-    </style>
-    <slot part="text-wrapper"></slot>
-    `;
+    `, this);
   }
 
   get hideWhenEmpty() {
@@ -6728,7 +6720,11 @@ class EnrichedText extends createBaseClass$1({ componentName: componentName$S, b
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
+    <div class="content"></div>
+    `;
+
+    injectStyle(
+      `
       :host {
         line-height: 1em;
         word-break: break-word;
@@ -6761,9 +6757,9 @@ class EnrichedText extends createBaseClass$1({ componentName: componentName$S, b
       s {
         color: currentColor;
       }
-    </style>
-    <div class="content"></div>
-    `;
+        `,
+      this
+    );
 
     this.#initProcessor();
 
@@ -6919,15 +6915,6 @@ class RawLink extends createBaseClass$1({ componentName: componentName$R, baseSe
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-		:host {
-			display: inline-block;
-      line-height: 1em;
-		}
-		:host a {
-			display: inline;
-		}
-		</style>
 		<div>
 			<descope-text>
 				<a>
@@ -6937,6 +6924,19 @@ class RawLink extends createBaseClass$1({ componentName: componentName$R, baseSe
 		</div>
 		`;
 
+    injectStyle(
+      `
+    :host {
+			display: inline-block;
+      line-height: 1em;
+		}
+		:host a {
+			display: inline;
+		}
+      `,
+      this
+    );
+
     forwardAttrs$1(this, this.shadowRoot.querySelector('a'), {
       includeAttrs: ['href', 'target', 'tooltip'],
       mapAttrs: {
@@ -7058,8 +7058,16 @@ class RawDivider extends createBaseClass$1({ componentName: componentName$Q, bas
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
-				:host {
+			<div>
+				<descope-text>
+					<slot></slot>
+				</descope-text>
+			</div>
+		`;
+
+    injectStyle(
+      `
+      	:host {
 					display: inline-block;
 				}
 				:host > div {
@@ -7082,13 +7090,9 @@ class RawDivider extends createBaseClass$1({ componentName: componentName$Q, bas
 				:host([vertical="true"]) div {
 					width: fit-content;
 				}
-			</style>
-			<div>
-				<descope-text>
-					<slot></slot>
-				</descope-text>
-			</div>
-		`;
+          `,
+      this
+    );
 
     this.textComponent = this.shadowRoot.querySelector('descope-text');
 
@@ -7215,8 +7219,12 @@ class RawLoaderRadial extends createBaseClass$1({ componentName: componentName$O
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			@keyframes spin {
+		<div></div>
+	`;
+
+    injectStyle(
+      `
+    @keyframes spin {
 				0% { transform: rotate(0deg); }
 				100% { transform: rotate(360deg); }
 			}
@@ -7227,9 +7235,9 @@ class RawLoaderRadial extends createBaseClass$1({ componentName: componentName$O
 			:host > div {
 				animation-name: spin;
 			}
-		</style>
-		<div></div>
-	`;
+        `,
+      this
+    );
   }
 }
 
@@ -7270,6 +7278,32 @@ const customMixin$b = (superclass) =>
 
     init() {
       super.init?.();
+
+      injectStyle(
+        `
+        .wrapper {
+          display: flex;
+          width: 100%;
+          justify-content: space-between;
+          direction: ltr;
+          position: relative;
+        }
+
+        descope-text-field {
+          direction: ltr;
+        }
+
+        .loader-container {
+          display: none;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+          `,
+        this
+      );
+
       const template = document.createElement('template');
 
       template.innerHTML = `
@@ -7293,7 +7327,7 @@ const customMixin$b = (superclass) =>
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
       if (attrName === 'digits') {
-        this.style.setProperty('--passcode-digits-count', newValue);
+        this.style['--passcode-digits-count'] = newValue;
       }
     }
   };
@@ -7504,8 +7538,12 @@ class RawLoaderLinear extends createBaseClass$1({ componentName: componentName$M
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			@keyframes tilt {
+		<div></div>
+	`;
+
+    injectStyle(
+      `
+    @keyframes tilt {
 				0% { transform: translateX(0); }
 				50% { transform: translateX(400%); }
 			}
@@ -7522,9 +7560,9 @@ class RawLoaderLinear extends createBaseClass$1({ componentName: componentName$M
 			:host > div {
 				width: 100%;
 			}
-		</style>
-		<div></div>
-	`;
+        `,
+      this
+    );
   }
 }
 
@@ -8552,17 +8590,21 @@ class RawImage extends BaseClass$2 {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			:host > img {
+		<img/>
+	`;
+
+    injectStyle(
+      `
+    :host > img {
 				width: 100%;
 				height: 100%
 			}
 			:host {
 				display: inline-flex;
 			}
-		</style>
-		<img/>
-	`;
+        `,
+      this
+    );
   }
 
   connectedCallback() {
@@ -10073,6 +10115,7 @@ const PhoneFieldClass = compose$1(
 				flex: 0;
 				border: none;
 			}
+  
 			descope-combo-box {
 				flex-shrink: 0;
         min-width: 5.75em;
@@ -10219,7 +10262,6 @@ const {
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
-  placeholder: { selector: '> input:placeholder-shown' },
   inputElement: { selector: 'input' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
   inputField: { selector: () => 'vaadin-text-field::part(input-field)' },
@@ -10461,7 +10503,10 @@ class RawPolicyValidation extends createBaseClass$1({ componentName: componentNa
       <div class="label"></div>
       <ul></ul>
     </div>
-    <style>
+		`;
+
+    injectStyle(
+      `
       :host > div {
         width: 100%;
         display: flex;
@@ -10492,8 +10537,9 @@ class RawPolicyValidation extends createBaseClass$1({ componentName: componentNa
         width: 1em;
         text-align: center;
       }
-    </style>
-		`;
+        `,
+      this
+    );
 
     this.panel = this.shadowRoot.querySelector(':host > div');
     this.label = this.shadowRoot.querySelector('.label');
@@ -10852,7 +10898,7 @@ const NewPasswordClass = compose$1(
       margin-top: 8px;
       display: flex;
     }
-    descope-policy-validation.hidden {
+    .hidden {
       display: none;
     }
 		`,
@@ -10938,8 +10984,22 @@ class RawUploadFile extends BaseInputClass$3 {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
-			:host {
+			<div>
+        <slot name="icon"></slot>
+				<div class="title">
+					<span class="title-text"></span>
+				</div>
+				<div class="description"></div>
+				<div class="button-wrapper">
+					<input type="file" tabindex="-1" aria-labelledby="button"/>
+					<descope-button id="button"></descope-button>
+				</div>
+			</div>
+		`;
+
+    injectStyle(
+      `
+      :host {
 				display: flex;
 			}
 			:host > div {
@@ -10960,19 +11020,9 @@ class RawUploadFile extends BaseInputClass$3 {
 				height: 100%;
 				opacity: 0;
 			}
-			</style>
-			<div>
-        <slot name="icon"></slot>
-				<div class="title">
-					<span class="title-text"></span>
-				</div>
-				<div class="description"></div>
-				<div class="button-wrapper">
-					<input type="file" tabindex="-1" aria-labelledby="button"/>
-					<descope-button id="button"></descope-button>
-				</div>
-			</div>
-		`;
+        `,
+      this
+    );
 
     this.wrapperEle = this.shadowRoot.querySelector('.wrapper');
     this.inputElement = this.shadowRoot.querySelector('input');
@@ -11235,7 +11285,13 @@ class RawSelectItem extends createBaseClass$1({
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <descope-button variant="${this.variant}" size="${this.size}" mode="primary">
+      <slot></slot>
+    </descope-button>
+	`;
+
+    injectStyle(
+      `
       descope-button {
         max-width: 100%;
       }
@@ -11249,11 +11305,9 @@ class RawSelectItem extends createBaseClass$1({
 				display: inline-block;
         max-width: 100%
 			}
-		</style>
-    <descope-button variant="${this.variant}" size="${this.size}" mode="primary">
-      <slot></slot>
-    </descope-button>
-	`;
+  `,
+      this
+    );
 
     forwardAttrs$1(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
     forwardAttrs$1(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
@@ -11363,14 +11417,6 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
       super();
 
       this.innerHTML = `
-      <style>
-      slot {
-        box-sizing: border-box;
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-      }
-    </style>
     <slot part="wrapper"></slot>
       `;
     }
@@ -11657,6 +11703,13 @@ const buttonSelectionGroupStyles = `
 				min-height: initial;
 			}
 
+      [part="internal-component"] slot {
+        box-sizing: border-box;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+			}
+
 			vaadin-text-field::part(input-field) {
 				background-color: transparent;
 				padding: 0;
@@ -11990,7 +12043,14 @@ const customMixin$7 = (superclass) =>
 
       overlay._attachOverlay = () => {
         overlay.bringToFront();
-        this.baseElement.setAttribute('style', 'display:flex!important;');
+        injectStyle(
+          `
+          :host {
+            display: flex!important;
+          }
+          `,
+          this.baseElement
+        );
       };
       overlay._detachOverlay = () => {
         this.baseElement.style.display = 'none';
@@ -12027,7 +12087,7 @@ const ModalClass = compose$1(
     },
     forward: {
       include: false,
-      attributes: ['opened'],
+      attributes: ['opened', 'style'],
     },
   }),
   draggableMixin$1,
@@ -12037,8 +12097,12 @@ const ModalClass = compose$1(
   createProxy$1({
     slots: [''],
     wrappedEleName: 'vaadin-dialog',
-    style: () => ``,
-    excludeAttrsSync: ['tabindex', 'opened'],
+    style: () => `
+      vaaadin-dialog {
+        display: flex!important;
+      }
+    `,
+    excludeAttrsSync: ['tabindex', 'opened', 'style'],
     componentName: componentName$v,
   })
 );
@@ -12489,7 +12553,7 @@ const GridClass = compose$1(
       }
     /*!css*/
 		`,
-    excludeAttrsSync: ['columns', 'tabindex'],
+    excludeAttrsSync: ['columns', 'tabindex', 'style'],
     componentName: componentName$u,
   })
 );
@@ -13457,7 +13521,13 @@ class RawBadge extends createBaseClass$1({ componentName: componentName$r, baseS
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+		<div>
+      <slot></slot>
+		</div>
+		`;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -13467,11 +13537,9 @@ class RawBadge extends createBaseClass$1({ componentName: componentName$r, baseS
         overflow: hidden;
         white-space: nowrap;
       }
-		</style>
-		<div>
-      <slot></slot>
-		</div>
-		`;
+      `,
+      this
+    );
   }
 }
 
@@ -13583,8 +13651,16 @@ class RawAvatar extends createBaseClass({
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
-				:host {
+      <div class="wrapper">
+        <vaadin-avatar></vaadin-avatar>
+        <div class="editableBadge">
+          <vaadin-icon icon="vaadin:pencil"></vaadin-icon>
+        </div>
+      </div>
+		`;
+
+    injectStyle(`
+        :host {
 					display: inline-flex;
 				}
 
@@ -13621,16 +13697,7 @@ class RawAvatar extends createBaseClass({
           width: 100%;
           height: 100%;
         }
-      </style>
-
-
-      <div class="wrapper">
-        <vaadin-avatar></vaadin-avatar>
-        <div class="editableBadge">
-          <vaadin-icon icon="vaadin:pencil"></vaadin-icon>
-        </div>
-      </div>
-		`;
+    `, this);
 
     this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
 
@@ -13952,8 +14019,27 @@ class RawUserAttribute extends createBaseClass$1({
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
-				:host {
+      <div class="root">
+        <div class="text-wrapper">
+          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary" class="label"></descope-text>
+          <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary" class="value"></descope-text>
+        </div>
+
+        <div class="btn-wrapper">
+          <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
+          <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
+            <vaadin-icon src=${editIcon}></vaadin-icon>
+          </descope-button>
+          <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
+            <vaadin-icon src=${deleteIcon}></vaadin-icon>
+          </descope-button>
+        </div
+      </div>
+		`;
+
+    injectStyle(
+      `
+      :host {
 					display: inline-flex;
 				}
 
@@ -14016,26 +14102,9 @@ class RawUserAttribute extends createBaseClass$1({
         :host([readonly="true"]) descope-button {
           visibility: hidden;
         }
-      </style>
-
-
-      <div class="root">
-        <div class="text-wrapper">
-          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary" class="label"></descope-text>
-          <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary" class="value"></descope-text>
-        </div>
-
-        <div class="btn-wrapper">
-          <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
-          <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
-            <vaadin-icon src=${editIcon}></vaadin-icon>
-          </descope-button>
-          <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
-            <vaadin-icon src=${deleteIcon}></vaadin-icon>
-          </descope-button>
-        </div
-      </div>
-		`;
+          `,
+      this
+    );
 
     this.deleteButton = this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]');
     this.editButton = this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]');
@@ -14219,8 +14288,27 @@ class RawUserAuthMethod extends createBaseClass$1({
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
-				:host {
+      <div class="root">
+        <div class="text-wrapper">
+          <slot name="method-icon"></slot>
+          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="primary"></descope-text>
+        </div>
+
+        <div class="btn-wrapper">
+          <descope-button size="sm" variant="link" mode="primary">
+            <slot name="button-icon"></slot>
+          </descope-button>
+          <div class="fulfilled-indicator">
+            <vaadin-icon src=${greenVIcon}></vaadin-icon>
+          </div>
+          <descope-button class="hidden-btn" size="sm" variant="link" mode="primary"></descope-button>
+        </div>
+      </div>
+		`;
+
+    injectStyle(
+      `
+      :host {
 					display: inline-flex;
 				}
 
@@ -14280,26 +14368,9 @@ class RawUserAuthMethod extends createBaseClass$1({
           display: inline-flex;
           align-items: center;
         }
-      </style>
-
-
-      <div class="root">
-        <div class="text-wrapper">
-          <slot name="method-icon"></slot>
-          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="primary"></descope-text>
-        </div>
-
-        <div class="btn-wrapper">
-          <descope-button size="sm" variant="link" mode="primary">
-            <slot name="button-icon"></slot>
-          </descope-button>
-          <div class="fulfilled-indicator">
-            <vaadin-icon src=${greenVIcon}></vaadin-icon>
-          </div>
-          <descope-button class="hidden-btn" size="sm" variant="link" mode="primary"></descope-button>
-        </div>
-      </div>
-		`;
+          `,
+      this
+    );
 
     this.button = this.shadowRoot.querySelector('descope-button');
     this.fulfilledIndicator = this.shadowRoot.querySelector('.fulfilled-indicator');
@@ -14615,7 +14686,11 @@ let CodeSnippet$1 = class CodeSnippet extends createBaseClass$1({ componentName:
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
+    <code class="hljs"></code>
+    `;
+
+    injectStyle(
+      `
       :host {
         display: inline-block;
         width: 100%;
@@ -14630,9 +14705,9 @@ let CodeSnippet$1 = class CodeSnippet extends createBaseClass$1({ componentName:
       pre {
         margin: 0;
       }
-    </style>
-    <code class="hljs"></code>
-    `;
+      `,
+      this
+    );
   }
 
   init() {
@@ -14841,7 +14916,6 @@ const globalRefs$a = getThemeRefs(globals$1);
 const vars$g = CodeSnippetClass.cssVarList;
 
 const light = {
-  color1: '#fa0',
   color2: '#d73a49',
   color3: '#6f42c1',
   color4: '#005cc5',
@@ -14851,13 +14925,10 @@ const light = {
   color8: '#24292e',
   color9: '#735c0f',
   color10: '#f0fff4',
-  color11: '#b31d28',
-  color12: '#ffeef0',
   color13: '#032f62',
 };
 
 const dark = {
-  color1: '#c9d1d9',
   color2: '#ff7b72',
   color3: '#d2a8ff',
   color4: '#79c0ff',
@@ -14867,8 +14938,6 @@ const dark = {
   color8: '#c9d1d9',
   color9: '#735c0f',
   color10: '#f0fff4',
-  color11: '#67060c',
-  color12: '#ffeef0',
   color13: '#a5d6ff',
 };
 
@@ -15472,8 +15541,7 @@ const getMaxDaysInMonth = (year, month) => {
 };
 
 const comboBoxItemTpl = ({ label, dataId, dataName }) => `
-	<div
-		style="display:flex; flex-direction: column;"
+	<div class="combo-box-item"
 		data-id="${dataId}"
 		data-name="${dataName}"
 	>
@@ -15661,13 +15729,30 @@ class RawCalendar extends BaseInputClass$2 {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
+    <div>
+      <nav class="nav top-nav">
+        <div class="nav-prev">
+        </div>
+        <div class="selectors"></div>
+        <div class="nav-next">
+        </div>
+      </nav>
+      <div class="calendar"></div>
+      <nav class="nav bottom-nav">
+        <descope-button class="cancel-button" variant="link" mode="primary">Cancel</descope-button>
+        <descope-button class="submit-button" variant="link" mode="primary" disabled="true">Done</descope-button>
+      </nav>
+    </div>
+  `;
+
+    injectStyle(
+      `
       :host {
         display: inline-block;
         box-sizing: border-box;
         max-width: 100%;
         user-select: none;
-         -webkit-user-select: none;
+        -webkit-user-select: none;
       }
 
       :host ::slotted {
@@ -15710,23 +15795,15 @@ class RawCalendar extends BaseInputClass$2 {
         ${ButtonClass.cssVarList.outlineWidth}: 0;
       }
 
+      .combo-box-item {
+        display:flex;
+        flex-direction: column;
+      }
+
       ${inputFloatingLabelStyle()}
-    </style>
-    <div>
-      <nav class="nav top-nav">
-        <div class="nav-prev">
-        </div>
-        <div class="selectors"></div>
-        <div class="nav-next">
-        </div>
-      </nav>
-      <div class="calendar"></div>
-      <nav class="nav bottom-nav">
-        <descope-button class="cancel-button" variant="link" mode="primary">Cancel</descope-button>
-        <descope-button class="submit-button" variant="link" mode="primary" disabled="true">Done</descope-button>
-      </nav>
-    </div>
-  `;
+      `,
+      this
+    );
   }
 
   set value(val) {
@@ -16509,7 +16586,18 @@ class RawDateFieldClass extends BaseInputClass$1 {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
+    <div>
+      <descope-text-field>
+        <span slot="suffix" class="toggle-calendar">
+          ${calendarIcon}
+        </span>
+      </descope-text-field>
+      <vaadin-popover></vaadin-popover>
+    </div>
+    `;
+
+    injectStyle(
+      `
       :host {
         display: inline-block;
         box-sizing: border-box;
@@ -16527,22 +16615,15 @@ class RawDateFieldClass extends BaseInputClass$1 {
         align-self: center;
         z-index: 1;
         height: 100%;
-        align-items: center;        
+        align-items: center;
       }
 
       :host([readonly="true"]) .toggle-calendar {
         pointer-events: none;
       }
-    </style>
-    <div>
-      <descope-text-field>
-        <span slot="suffix" class="toggle-calendar">
-          ${calendarIcon}
-        </span>
-      </descope-text-field>
-      <vaadin-popover></vaadin-popover>
-    </div>
-    `;
+        `,
+      this
+    );
 
     this.inputElement = this.shadowRoot.querySelector('descope-text-field');
     this.popoverToggleButton = this.inputElement.querySelector('.toggle-calendar');
@@ -16746,14 +16827,14 @@ class RawDateFieldClass extends BaseInputClass$1 {
       newOffset = Math.min(Math.abs(offset), availableLeft) * -1;
     }
 
-    this.#popoverPosStylesheet = document.createElement('style');
-    this.#popoverPosStylesheet.innerHTML = `
+    injectStyle(
+      `
       vaadin-popover-overlay::part(overlay) {
         transform: translateX(${newOffset}px);
       }
-    `;
-
-    popover.appendChild(this.#popoverPosStylesheet);
+    `,
+      popover
+    );
   }
 
   #getPopoverContent() {
@@ -17207,22 +17288,23 @@ const customMixin$3 = (superclass) =>
       super();
 
       this.attachShadow({ mode: 'open' }).innerHTML = `
-      <style>
-        /*css*/
-        slot {
-            width: 100%;
-            display: flex;
-            overflow: hidden;
-            box-sizing: border-box;
-        }
-        :host {
-          display: block;
-        }
-
-        /*!css*/
-      </style>
       <slot></slot>
     `;
+
+      injectStyle(
+        `
+      slot {
+          width: 100%;
+          display: flex;
+          overflow: hidden;
+          box-sizing: border-box;
+      }
+      :host {
+        display: block;
+      }
+        `,
+        this
+      );
     }
   };
 
@@ -17261,9 +17343,17 @@ class RawList extends createBaseClass$1({ componentName: componentName$d, baseSe
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-	    /*css*/
-      .wrapper {
+    <div class="wrapper">
+    <slot></slot>
+    <slot name="empty-state">
+      No item...
+    </slot>
+    </div>
+	`;
+
+    injectStyle(
+      `
+    .wrapper {
         overflow: auto;
         display: grid;
         max-height: 100%;
@@ -17290,16 +17380,9 @@ class RawList extends createBaseClass$1({ componentName: componentName$d, baseSe
       ::slotted(:not([slot])) {
         width: 100%;
       }
-      /*!css*/
-		</style>
-
-    <div class="wrapper">
-    <slot></slot>
-    <slot name="empty-state">
-      No item...
-    </slot>
-    </div>
-	`;
+        `,
+      this
+    );
   }
 
   get items() {
@@ -17745,7 +17828,11 @@ class RawScopesList extends createBaseClass$1({ componentName: componentName$b,
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <div></div>
+		`;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -17754,10 +17841,9 @@ class RawScopesList extends createBaseClass$1({ componentName: componentName$b,
         display: flex;
         flex-direction: column;
       }
-
-		</style>
-    <div></div>
-		`;
+        `,
+      this
+    );
   }
 
   get isReadOnly() {
@@ -17872,8 +17958,22 @@ class RawThirdPartyAppLogoClass extends createBaseClass$1({
   constructor() {
     super();
     this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
-				:host {
+			<div class="wrapper">
+        <div class="third-party-app-logo-wrapper">
+          <div class="third-party-app-logo"></div>
+        </div>
+        <div class="arrows">
+          <descope-icon src="${arrowsImg}"></descope-icon>
+        </div>
+        <div class="company-logo-wrapper">
+            <descope-logo></descope-logo>
+        </div>
+      </div>
+			`;
+
+    injectStyle(
+      `
+        :host {
 					display: inline-flex;
 				}
 				:host([draggable="true"]) > div {
@@ -17912,20 +18012,9 @@ class RawThirdPartyAppLogoClass extends createBaseClass$1({
           flex-shrink: 0;
           display: flex;
         }
-
-			</style>
-			<div class="wrapper">
-        <div class="third-party-app-logo-wrapper">
-          <div class="third-party-app-logo"></div>
-        </div>
-        <div class="arrows">
-          <descope-icon src="${arrowsImg}"></descope-icon>
-        </div>
-        <div class="company-logo-wrapper">
-            <descope-logo></descope-logo>
-        </div>
-      </div>
-			`;
+          `,
+      this
+    );
   }
 }
 
@@ -18020,7 +18109,11 @@ class RawSecurityQuestionsSetup extends createBaseClass$1({ componentName: compo
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <div></div>
+		`;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -18029,10 +18122,9 @@ class RawSecurityQuestionsSetup extends createBaseClass$1({ componentName: compo
         display: flex;
         flex-direction: column;
       }
-
-		</style>
-    <div></div>
-		`;
+    `,
+      this
+    );
   }
 
   get count() {
@@ -18274,7 +18366,11 @@ class RawSecurityQuestionsVerify extends createBaseClass$1({ componentName: comp
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <div></div>
+		`;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -18283,10 +18379,9 @@ class RawSecurityQuestionsVerify extends createBaseClass$1({ componentName: comp
         display: flex;
         flex-direction: column;
       }
-
-		</style>
-    <div></div>
-		`;
+        `,
+      this
+    );
   }
 
   #renderQuestions() {
@@ -18568,8 +18663,16 @@ class RawHybridField extends BaseClass$1 {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-		  :host {
+    <div class="wrapper">
+      <descope-email-field external-input="${this.isExternalInput}"></descope-email-field>
+      <descope-phone-field allow-alphanumeric-input="true"></descope-phone-field>
+      <descope-phone-input-box-field allow-alphanumeric-input="true"></descope-phone-input-box-field>
+    </div>
+		`;
+
+    injectStyle(
+      `
+      :host {
         display: inline-flex;
         box-sizing: border-box;
         padding: 0;
@@ -18588,14 +18691,10 @@ class RawHybridField extends BaseClass$1 {
       }
       .hidden {
         visibility: hidden;
-      }        
-		</style>
-    <div class="wrapper">
-      <descope-email-field external-input="${this.isExternalInput}"></descope-email-field>
-      <descope-phone-field allow-alphanumeric-input="true"></descope-phone-field>
-      <descope-phone-input-box-field allow-alphanumeric-input="true"></descope-phone-input-box-field>
-    </div>
-		`;
+      }
+      `,
+      this
+    );
   }
 
   get isExternalInput() {
@@ -18881,7 +18980,18 @@ class RawAlert extends createBaseClass$1({ componentName: componentName$6, baseS
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
+    <div>
+      <div class="icon"></div>
+      <div class="content">
+        <descope-enriched-text>
+          <slot></slot>
+        </descope-enriched-text>
+      </div>
+    </div>
+    `;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -18901,16 +19011,9 @@ class RawAlert extends createBaseClass$1({ componentName: componentName$6, baseS
         white-space: normal;
         overflow-wrap: break-word;
       }
-    </style>
-    <div>
-      <div class="icon"></div>
-      <div class="content">
-        <descope-enriched-text>
-          <slot></slot>
-        </descope-enriched-text>
-      </div>
-    </div>
-    `;
+      `,
+      this
+    );
   }
 
   init() {
@@ -19215,6 +19318,17 @@ const AutocompleteFieldClass = compose(
       line-height: unset;
       width: 100%;
     }
+
+    descope-autocomplete-field-internal {
+        display: inline-block;
+        box-sizing: border-box;
+        user-select: none;
+        max-width: 100%;
+      }
+
+    descope-autocomplete-field-internal ::slotted {
+      padding: 0;
+    }
   `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label'],
     componentName: componentName$4,
@@ -19504,18 +19618,6 @@ class RawAddressFieldInternal extends BaseInputClass {
     super();
 
     this.innerHTML = `
-    <style>
-      :host {
-        display: inline-block;
-        box-sizing: border-box;
-        user-select: none;
-        max-width: 100%;
-      }
-
-      :host ::slotted {
-        padding: 0;
-      }
-    </style>
     <div>
       <descope-autocomplete-field></descope-autocomplete-field>
     </div>
@@ -19715,6 +19817,17 @@ const AddressFieldClass = compose(
     line-height: unset;
     width: 100%;
   }
+
+  ${componentName$3} {
+    display: inline-block;
+    box-sizing: border-box;
+    user-select: none;
+    max-width: 100%;
+  }
+
+  ${componentName$3} ::slotted {
+    padding: 0;
+  }
 `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label'],
     componentName: componentName$2,
@@ -19902,7 +20015,15 @@ class RawRecaptcha extends BaseClass {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <div class="badge">
+      <span id="recaptcha"></span>
+      <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
+    </div>
+    <slot></slot>
+	`;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -19928,13 +20049,9 @@ class RawRecaptcha extends BaseClass {
       .hidden {
         display: none;
       }
-		</style>
-    <div class="badge">
-      <span id="recaptcha"></span>
-      <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
-    </div>
-    <slot></slot>
-	`;
+        `,
+      this
+    );
 
     this.recaptchaEle = this.baseElement.querySelector('#recaptcha');
     this.mockRecaptchaEle = this.baseElement.querySelector('img');