@descope/web-components-ui 1.31.0 → 1.33.0

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import '@vaadin/button';
-import merge from 'lodash.merge';
 import debounce from 'lodash.debounce';
+import merge from 'lodash.merge';
 import Color from 'color';
 import 'element-internals-polyfill';
 import DOMPurify from 'dompurify';
@@ -194,10 +194,6 @@ const forwardProps$3 = (src, target, props = []) => {
   Object.defineProperties(target, config);
 };
 
-const DESCOPE_PREFIX = 'descope';
-const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
-const BASE_THEME_SECTION = 'host';
-
 /**
  * Creates a debounced version of an async function that manages multiple pending promises and ensures proper error handling.
  * When multiple calls are made within the wait period, all pending promises will be resolved/rejected with the result/error
@@ -279,6 +275,10 @@ const compose =
 
 const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
 
+const DESCOPE_PREFIX = 'descope';
+const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
+const BASE_THEME_SECTION = 'host';
+
 const observeAttributes = (ele, callback, { excludeAttrs = [], includeAttrs = [] }) => {
   // sync all attrs on init
   const filteredAttrs = Array.from(ele.attributes)
@@ -372,6 +372,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';
 
@@ -959,13 +975,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)
         );
@@ -974,21 +988,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(
@@ -1004,31 +1015,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 });
         }
       }
 
@@ -1072,8 +1074,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) {
@@ -1322,7 +1323,6 @@ const createProxy$1 = ({
 
     constructor() {
       super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
-			<style id="create-proxy">${(isFunction$1(style) ? style() : style) || ''}</style>
 			<${wrappedEleName}>
 			${slots
         .map(
@@ -1333,6 +1333,8 @@ const createProxy$1 = ({
         .join('')}
 			</${wrappedEleName}>
 		`;
+
+      injectStyle((isFunction$1(style) ? style() : style) || '', this);
     }
 
     init() {
@@ -1811,8 +1813,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);
 
@@ -1843,7 +1843,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,
@@ -2329,7 +2329,11 @@ class RawIcon extends createBaseClass$1({ componentName: componentName$1b, baseS
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+		<slot></slot>
+	`;
+
+    injectStyle(
+      `
 			:host > slot {
 				box-sizing: border-box;
 				width: 100%;
@@ -2340,9 +2344,9 @@ class RawIcon extends createBaseClass$1({ componentName: componentName$1b, baseS
 			:host {
 				display: inline-block;
 			}
-		</style>
-		<slot></slot>
-	`;
+  `,
+      this
+    );
   }
 
   init() {
@@ -3158,8 +3162,12 @@ class RawLoaderLinear extends createBaseClass$1({ componentName: componentName$1
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			@keyframes tilt {
+		<div></div>
+	`;
+
+    injectStyle(
+      `
+    @keyframes tilt {
 				0% { transform: translateX(0); }
 				50% { transform: translateX(400%); }
 			}
@@ -3176,9 +3184,9 @@ class RawLoaderLinear extends createBaseClass$1({ componentName: componentName$1
 			:host > div {
 				width: 100%;
 			}
-		</style>
-		<div></div>
-	`;
+        `,
+      this
+    );
   }
 }
 
@@ -3221,8 +3229,12 @@ class RawLoaderRadial extends createBaseClass$1({ componentName: componentName$1
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			@keyframes spin {
+		<div></div>
+	`;
+
+    injectStyle(
+      `
+    @keyframes spin {
 				0% { transform: rotate(0deg); }
 				100% { transform: rotate(360deg); }
 			}
@@ -3233,9 +3245,9 @@ class RawLoaderRadial extends createBaseClass$1({ componentName: componentName$1
 			:host > div {
 				animation-name: spin;
 			}
-		</style>
-		<div></div>
-	`;
+        `,
+      this
+    );
   }
 }
 
@@ -3269,7 +3281,11 @@ class RawContainer extends createBaseClass$1({ componentName: componentName$14,
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+		<slot></slot>
+	`;
+
+    injectStyle(
+      `
 			:host > slot {
 				box-sizing: border-box;
 				width: 100%;
@@ -3280,9 +3296,9 @@ class RawContainer extends createBaseClass$1({ componentName: componentName$14,
 			:host {
 				display: inline-block;
 			}
-		</style>
-		<slot></slot>
-	`;
+  `,
+      this
+    );
   }
 }
 
@@ -3490,13 +3506,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)
         );
@@ -3505,21 +3519,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(
@@ -3535,31 +3546,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 });
         }
       }
 
@@ -4228,7 +4230,6 @@ const createProxy = ({
 
     constructor() {
       super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
-			<style id="create-proxy">${(isFunction(style) ? style() : style) || ''}</style>
 			<${wrappedEleName}>
 			${slots
         .map(
@@ -4239,6 +4240,8 @@ const createProxy = ({
         .join('')}
 			</${wrappedEleName}>
 		`;
+
+    injectStyle((isFunction(style) ? style() : style) || '', this);
     }
 
     init() {
@@ -4509,9 +4512,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);
 
@@ -4542,7 +4542,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,
@@ -4565,14 +4565,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);
@@ -5493,8 +5488,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}"
 	>
@@ -5682,13 +5676,30 @@ class RawCalendar extends BaseInputClass$b {
     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 {
@@ -5731,23 +5742,15 @@ class RawCalendar extends BaseInputClass$b {
         ${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) {
@@ -6552,7 +6555,7 @@ const TextFieldClass = compose$1(
         align-self: center;
       }
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName: componentName$11,
   })
 );
@@ -6722,7 +6725,18 @@ class RawDateFieldClass extends BaseInputClass$a {
     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;
@@ -6740,22 +6754,15 @@ class RawDateFieldClass extends BaseInputClass$a {
         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');
@@ -6959,14 +6966,14 @@ class RawDateFieldClass extends BaseInputClass$a {
       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() {
@@ -7378,7 +7385,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;
@@ -7387,9 +7397,7 @@ class RawText extends createBaseClass({
         width: 100%;
         display: inline-block;
       }
-    </style>
-    <slot part="text-wrapper"></slot>
-    `;
+    `, this);
   }
 
   get hideWhenEmpty() {
@@ -7436,8 +7444,16 @@ class RawDivider extends createBaseClass$1({ componentName: componentName$_, bas
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
-				:host {
+			<div>
+				<descope-text>
+					<slot></slot>
+				</descope-text>
+			</div>
+		`;
+
+    injectStyle(
+      `
+      	:host {
 					display: inline-block;
 				}
 				:host > div {
@@ -7460,13 +7476,9 @@ class RawDivider extends createBaseClass$1({ componentName: componentName$_, 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');
 
@@ -7616,15 +7628,6 @@ class RawLink extends createBaseClass$1({ componentName: componentName$Y, baseSe
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-		:host {
-			display: inline-block;
-      line-height: 1em;
-		}
-		:host a {
-			display: inline;
-		}
-		</style>
 		<div>
 			<descope-text>
 				<a>
@@ -7634,6 +7637,19 @@ class RawLink extends createBaseClass$1({ componentName: componentName$Y, 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: {
@@ -7688,13 +7704,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%;
@@ -7703,9 +7723,9 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
 					margin: auto;
 					${getContent()}
 				}
-			</style>
-			<div></div>
-			`;
+        `,
+        this
+      );
     }
   }
 
@@ -7810,25 +7830,6 @@ const sanitizeStr = (str) => {
   return str.replace(/\D/g, '') || '';
 };
 
-// During debounced input we hide the value with a mask.
-// This allows us to hide the multiple population of the first input
-// in case of an automated input (e.g. Safari OTP Autofill or paste).
-const createInputMaskStyle = () => {
-  const ele = document.createElement('style');
-  ele.id = 'input-mask';
-  ele.innerHTML = `vaadin-text-field::part(input-field)::before {
-    ${INPUT_MASK_FALLBACK_PROP}: '';
-    content: var(${INPUT_MASK_TEXT_PROP}, var(${INPUT_MASK_FALLBACK_PROP}));
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: var(${INPUT_MASK_DISPLAY_PROP}, none);
-    align-items: center;
-    justify-content: center;
-  }`;
-  return ele;
-};
-
 const toggleMaskVisibility = (input, value) => {
   if (value) {
     input.style.setProperty(INPUT_MASK_TEXT_PROP, `"${value}"`);
@@ -7869,27 +7870,6 @@ class PasscodeInternal extends BaseInputClass$9 {
 		<div class="loader-container">
       <descope-loader-radial size="xs" mode="primary"></descope-loader-radial>
     </div>
-		<style>
-			.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%);
-      }
-		</style>
 		`;
 
     this.wrapperEle = this.querySelector('.wrapper');
@@ -8001,7 +7981,23 @@ class PasscodeInternal extends BaseInputClass$9 {
 
   initInputs() {
     this.inputs.forEach((input) => {
-      input.shadowRoot.appendChild(createInputMaskStyle());
+      // During debounced input we hide the value with a mask.
+      // This allows us to hide the multiple population of the first input
+      // in case of an automated input (e.g. Safari OTP Autofill or paste).
+      injectStyle(
+        `
+        vaadin-text-field::part(input-field)::before {
+          ${INPUT_MASK_FALLBACK_PROP}: '';
+          content: var(${INPUT_MASK_TEXT_PROP}, var(${INPUT_MASK_FALLBACK_PROP}));
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          display: var(${INPUT_MASK_DISPLAY_PROP}, none);
+          align-items: center;
+          justify-content: center;
+        }`,
+        input
+      );
 
       const handleParseInput = (val) => {
         this.parseInputValue(input, val);
@@ -8089,6 +8085,32 @@ const customMixin$c = (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 = `
@@ -8112,7 +8134,7 @@ const customMixin$c = (superclass) =>
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
       if (attrName === 'digits') {
-        this.style.setProperty('--passcode-digits-count', newValue);
+        this.style['--passcode-digits-count'] = newValue;
       }
     }
   };
@@ -8629,7 +8651,11 @@ class EnrichedText extends createBaseClass$1({ componentName: componentName$Q, b
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
+    <div class="content"></div>
+    `;
+
+    injectStyle(
+      `
       :host {
         line-height: 1em;
         word-break: break-word;
@@ -8662,9 +8688,9 @@ class EnrichedText extends createBaseClass$1({ componentName: componentName$Q, b
       s {
         color: currentColor;
       }
-    </style>
-    <div class="content"></div>
-    `;
+        `,
+      this
+    );
 
     this.#initProcessor();
 
@@ -8916,17 +8942,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() {
@@ -10171,7 +10201,6 @@ const getCountryFlag = (code) =>
 
 const comboBoxItem = ({ code, dialCode, name: country }) => `
 	<div
-		style="display:flex; flex-direction: column;"
 		data-id="${dialCode}"
 		data-name="${code} ${dialCode} ${country}"
 		data-country-code="${code}"
@@ -10747,6 +10776,7 @@ const PhoneFieldClass = compose$1(
 				flex: 0;
 				border: none;
 			}
+  
 			descope-combo-box {
 				flex-shrink: 0;
         min-width: 5.75em;
@@ -11019,7 +11049,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)' },
@@ -11212,7 +11241,10 @@ class RawPolicyValidation extends createBaseClass$1({ componentName: componentNa
       <div class="label"></div>
       <ul></ul>
     </div>
-    <style>
+		`;
+
+    injectStyle(
+      `
       :host > div {
         width: 100%;
         display: flex;
@@ -11243,8 +11275,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');
@@ -11603,7 +11636,7 @@ const NewPasswordClass = compose$1(
       margin-top: 8px;
       display: flex;
     }
-    descope-policy-validation.hidden {
+    .hidden {
       display: none;
     }
 		`,
@@ -11675,11 +11708,11 @@ class NewPasswordInternal extends BaseInputClass$6 {
   }
 
   onHasConfirmChange(hasConfirm) {
-    this.confirmInput.style.display = hasConfirm ? '' : 'none';
+    this.confirmInput.classList.toggle('hidden', !hasConfirm);
   }
 
   onHasValidationChange(hasValidation) {
-    this.policyPanel.style.display = hasValidation ? '' : 'none';
+    this.policyPanel.classList.toggle('hidden', !hasValidation);
   }
 
   get hasValidation() {
@@ -11774,8 +11807,8 @@ class NewPasswordInternal extends BaseInputClass$6 {
   // indicator in case the root component is required
   handleIndicatorStyle() {
     this.inputs.forEach((input) => {
-      const styleTag = document.createElement('style');
-      styleTag.innerHTML = `
+      injectStyle(
+        `
 				:host ::part(required-indicator)::after {
 					content: var(${NewPasswordClass.cssVarList.inputsRequiredIndicator});
           width: 1em;
@@ -11784,8 +11817,9 @@ class NewPasswordInternal extends BaseInputClass$6 {
         :host ::part(required-indicator) {
           display: inline-flex;
         }
-				`;
-      input?.shadowRoot.appendChild(styleTag);
+				`,
+        input
+      );
     });
   }
 
@@ -11903,7 +11937,15 @@ class RawRecaptcha extends BaseClass$1 {
     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;
       }
@@ -11929,13 +11971,9 @@ class RawRecaptcha extends BaseClass$1 {
       .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');
@@ -12124,8 +12162,22 @@ class RawUploadFile extends BaseInputClass$5 {
     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 {
@@ -12146,19 +12198,9 @@ class RawUploadFile extends BaseInputClass$5 {
 				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');
@@ -12339,14 +12381,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>
       `;
     }
@@ -12633,6 +12667,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;
@@ -12744,7 +12785,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%;
       }
@@ -12758,11 +12805,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'] });
@@ -13182,7 +13227,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%;
@@ -13197,9 +13246,9 @@ let CodeSnippet$1 = class CodeSnippet extends createBaseClass$1({ componentName:
       pre {
         margin: 0;
       }
-    </style>
-    <code class="hljs"></code>
-    `;
+      `,
+      this
+    );
   }
 
   init() {
@@ -13831,7 +13880,7 @@ const GridClass = compose$1(
       }
     /*!css*/
 		`,
-    excludeAttrsSync: ['columns', 'tabindex'],
+    excludeAttrsSync: ['columns', 'tabindex', 'style'],
     componentName: componentName$u,
   })
 );
@@ -14499,7 +14548,13 @@ class RawBadge extends createBaseClass$1({ componentName: componentName$s, baseS
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+		<div>
+      <slot></slot>
+		</div>
+		`;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -14509,11 +14564,9 @@ class RawBadge extends createBaseClass$1({ componentName: componentName$s, baseS
         overflow: hidden;
         white-space: nowrap;
       }
-		</style>
-		<div>
-      <slot></slot>
-		</div>
-		`;
+      `,
+      this
+    );
   }
 }
 
@@ -14597,7 +14650,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';
@@ -14634,7 +14694,7 @@ const ModalClass = compose$1(
     },
     forward: {
       include: false,
-      attributes: ['opened'],
+      attributes: ['opened', 'style'],
     },
   }),
   draggableMixin$1,
@@ -14644,8 +14704,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$r,
   })
 );
@@ -15362,15 +15426,6 @@ class MappingItem extends BaseInputClass$3 {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-      <style>
-        .wrapper {
-          display: flex;
-        }
-        .separator {
-          text-align: center;
-          flex-shrink: 0;
-        }
-      </style>
       <div class="wrapper" part="wrapper">
         <descope-text-field required="true"></descope-text-field>
         <div class="separator" part="separator">${this.separator}</div>
@@ -15385,6 +15440,20 @@ class MappingItem extends BaseInputClass$3 {
         </descope-button>
       </div>
 	`;
+
+    injectStyle(
+      `
+        .wrapper {
+          display: flex;
+        }
+        .separator {
+          text-align: center;
+          flex-shrink: 0;
+        }
+    `,
+      this
+    );
+
     this.valueInput = this.shadowRoot.querySelector('descope-text-field');
     this.attributeInput = this.shadowRoot.querySelector('descope-combo-box');
     this.inputs = [this.valueInput, this.attributeInput];
@@ -15484,8 +15553,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;
 				}
 
@@ -15548,26 +15636,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"]');
@@ -15732,8 +15803,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;
 				}
 
@@ -15793,26 +15883,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');
@@ -16426,22 +16499,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
+      );
     }
   };
 
@@ -16480,9 +16554,17 @@ class RawList extends createBaseClass$1({ componentName: componentName$e, 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%;
@@ -16509,16 +16591,9 @@ class RawList extends createBaseClass$1({ componentName: componentName$e, baseSe
       ::slotted(:not([slot])) {
         width: 100%;
       }
-      /*!css*/
-		</style>
-
-    <div class="wrapper">
-    <slot></slot>
-    <slot name="empty-state">
-      No item...
-    </slot>
-    </div>
-	`;
+        `,
+      this
+    );
   }
 
   get items() {
@@ -16630,8 +16705,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;
 				}
 
@@ -16668,16 +16751,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');
 
@@ -16946,7 +17020,11 @@ class RawScopesList extends createBaseClass$1({ componentName: componentName$b,
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <div></div>
+		`;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -16955,10 +17033,9 @@ class RawScopesList extends createBaseClass$1({ componentName: componentName$b,
         display: flex;
         flex-direction: column;
       }
-
-		</style>
-    <div></div>
-		`;
+        `,
+      this
+    );
   }
 
   get isReadOnly() {
@@ -17058,8 +17135,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 {
@@ -17098,20 +17189,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
+    );
   }
 }
 
@@ -17172,7 +17252,11 @@ class RawSecurityQuestionsSetup extends createBaseClass$1({ componentName: compo
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <div></div>
+		`;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -17181,10 +17265,9 @@ class RawSecurityQuestionsSetup extends createBaseClass$1({ componentName: compo
         display: flex;
         flex-direction: column;
       }
-
-		</style>
-    <div></div>
-		`;
+    `,
+      this
+    );
   }
 
   get count() {
@@ -17413,7 +17496,11 @@ class RawSecurityQuestionsVerify extends createBaseClass$1({ componentName: comp
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <div></div>
+		`;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -17422,10 +17509,9 @@ class RawSecurityQuestionsVerify extends createBaseClass$1({ componentName: comp
         display: flex;
         flex-direction: column;
       }
-
-		</style>
-    <div></div>
-		`;
+        `,
+      this
+    );
   }
 
   #renderQuestions() {
@@ -17691,8 +17777,16 @@ class RawHybridField extends BaseClass {
     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;
@@ -17711,14 +17805,10 @@ class RawHybridField extends BaseClass {
       }
       .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() {
@@ -17983,7 +18073,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;
       }
@@ -18003,16 +18104,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() {
@@ -20697,7 +20791,6 @@ const globalRefs$a = getThemeRefs(globals$1);
 const vars$g = CodeSnippetClass.cssVarList;
 
 const light = {
-  color1: '#fa0',
   color2: '#d73a49',
   color3: '#6f42c1',
   color4: '#005cc5',
@@ -20707,13 +20800,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',
@@ -20723,8 +20813,6 @@ const dark = {
   color8: '#c9d1d9',
   color9: '#735c0f',
   color10: '#f0fff4',
-  color11: '#67060c',
-  color12: '#ffeef0',
   color13: '#a5d6ff',
 };
 
@@ -21416,18 +21504,6 @@ class AutocompleteFieldInternal extends BaseInputClass$1 {
     super();
 
     this.innerHTML = `
-    <style>
-      :host {
-        display: inline-block;
-        box-sizing: border-box;
-        user-select: none;
-        max-width: 100%;
-      }
-
-      :host ::slotted {
-        padding: 0;
-      }
-    </style>
     <div class="autocomplete-field">
       <descope-combo-box clear-button-visible="true" auto-open-disabled="true" has-dynamic-data="true" item-label-path="data-name" item-value-path="data-id" hide-toggle-button="true"></descope-combo-box>
     </div>
@@ -21731,6 +21807,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$2,
@@ -22020,18 +22107,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>
@@ -22231,6 +22306,17 @@ const AddressFieldClass = compose(
     line-height: unset;
     width: 100%;
   }
+
+  ${componentName$1} {
+    display: inline-block;
+    box-sizing: border-box;
+    user-select: none;
+    max-width: 100%;
+  }
+
+  ${componentName$1} ::slotted {
+    padding: 0;
+  }
 `,
     excludeAttrsSync: ['tabindex', 'error-message', 'label'],
     componentName,