@descope/flow-components 2.0.439 → 2.0.440

package/dist/index.cjs.js

@@ -74530,6 +74530,22 @@ function requireIndex_cjs () {
 	  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';
 
@@ -75387,13 +75403,11 @@ function requireIndex_cjs () {
 	      }
 
 	      #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)
 	        );
@@ -75402,21 +75416,18 @@ function requireIndex_cjs () {
 
 	      #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(
@@ -75432,31 +75443,22 @@ function requireIndex_cjs () {
 	      }
 
 	      #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 });
 	        }
 	      }
 
@@ -75500,8 +75502,7 @@ function requireIndex_cjs () {
 	    constructor() {
 	      super();
 
-	      this.#styleEle = document.createElement('style');
-	      this.#styleEle.innerText = `* { cursor: inherit!important }`;
+	      injectStyle(`* { cursor: inherit!important }`, this);
 	    }
 
 	    #handleDraggableStyle(isDraggable) {
@@ -75750,7 +75751,6 @@ function requireIndex_cjs () {
 
 	    constructor() {
 	      super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
-			<style id="create-proxy">${(isFunction$1(style) ? style() : style) || ''}</style>
 			<${wrappedEleName}>
 			${slots
 	        .map(
@@ -75761,6 +75761,8 @@ function requireIndex_cjs () {
 	        .join('')}
 			</${wrappedEleName}>
 		`;
+
+	      injectStyle((isFunction$1(style) ? style() : style) || '', this);
 	    }
 
 	    init() {
@@ -76239,8 +76241,6 @@ function requireIndex_cjs () {
 	// 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);
 
@@ -76271,7 +76271,7 @@ function requireIndex_cjs () {
 	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,
@@ -76757,7 +76757,11 @@ function requireIndex_cjs () {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+		<slot></slot>
+	`;
+
+	    injectStyle(
+	      `
 			:host > slot {
 				box-sizing: border-box;
 				width: 100%;
@@ -76768,9 +76772,9 @@ function requireIndex_cjs () {
 			:host {
 				display: inline-block;
 			}
-		</style>
-		<slot></slot>
-	`;
+  `,
+	      this
+	    );
 	  }
 
 	  init() {
@@ -77547,7 +77551,7 @@ function requireIndex_cjs () {
         align-self: center;
       }
 		`,
-	    excludeAttrsSync: ['tabindex'],
+	    excludeAttrsSync: ['tabindex', 'style'],
 	    componentName: componentName$14,
 	  })
 	);
@@ -78952,7 +78956,11 @@ descope-boolean-field-internal {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+		<slot></slot>
+	`;
+
+	    injectStyle(
+	      `
 			:host > slot {
 				box-sizing: border-box;
 				width: 100%;
@@ -78963,9 +78971,9 @@ descope-boolean-field-internal {
 			:host {
 				display: inline-block;
 			}
-		</style>
-		<slot></slot>
-	`;
+  `,
+	      this
+	    );
 	  }
 	}
 
@@ -79145,13 +79153,17 @@ descope-boolean-field-internal {
 	    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%;
@@ -79160,9 +79172,9 @@ descope-boolean-field-internal {
 					margin: auto;
 					${getContent()}
 				}
-			</style>
-			<div></div>
-			`;
+        `,
+	        this
+	      );
 	    }
 	  }
 
@@ -79586,13 +79598,11 @@ descope-boolean-field-internal {
 	      }
 
 	      #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)
 	        );
@@ -79601,21 +79611,18 @@ descope-boolean-field-internal {
 
 	      #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(
@@ -79631,31 +79638,22 @@ descope-boolean-field-internal {
 	      }
 
 	      #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 });
 	        }
 	      }
 
@@ -80324,7 +80322,6 @@ descope-boolean-field-internal {
 
 	    constructor() {
 	      super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
-			<style id="create-proxy">${(isFunction(style) ? style() : style) || ''}</style>
 			<${wrappedEleName}>
 			${slots
 	        .map(
@@ -80335,6 +80332,8 @@ descope-boolean-field-internal {
 	        .join('')}
 			</${wrappedEleName}>
 		`;
+
+	    injectStyle((isFunction(style) ? style() : style) || '', this);
 	    }
 
 	    init() {
@@ -80605,9 +80604,6 @@ descope-boolean-field-internal {
 	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);
 
@@ -80638,7 +80634,7 @@ descope-boolean-field-internal {
 	const portalMixin =
 	  ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
 	  (superclass) => {
-	    const eleDisplayName = name || sanitizeSelector(selector);
+	    const eleDisplayName = name;
 
 	    const BaseClass = createStyleMixin({
 	      mappings,
@@ -80661,14 +80657,9 @@ descope-boolean-field-internal {
 	        // 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);
@@ -80784,7 +80775,10 @@ descope-boolean-field-internal {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
+    <slot part="text-wrapper"></slot>
+    `;
+
+	    injectStyle(`
       :host {
         display: inline-block;
         line-height: 1em;
@@ -80793,9 +80787,7 @@ descope-boolean-field-internal {
         width: 100%;
         display: inline-block;
       }
-    </style>
-    <slot part="text-wrapper"></slot>
-    `;
+    `, this);
 	  }
 
 	  get hideWhenEmpty() {
@@ -80962,7 +80954,11 @@ descope-boolean-field-internal {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
+    <div class="content"></div>
+    `;
+
+	    injectStyle(
+	      `
       :host {
         line-height: 1em;
         word-break: break-word;
@@ -80995,9 +80991,9 @@ descope-boolean-field-internal {
       s {
         color: currentColor;
       }
-    </style>
-    <div class="content"></div>
-    `;
+        `,
+	      this
+	    );
 
 	    this.#initProcessor();
 
@@ -81153,15 +81149,6 @@ descope-boolean-field-internal {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-		:host {
-			display: inline-block;
-      line-height: 1em;
-		}
-		:host a {
-			display: inline;
-		}
-		</style>
 		<div>
 			<descope-text>
 				<a>
@@ -81171,6 +81158,19 @@ descope-boolean-field-internal {
 		</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: {
@@ -81292,8 +81292,16 @@ descope-boolean-field-internal {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
-				:host {
+			<div>
+				<descope-text>
+					<slot></slot>
+				</descope-text>
+			</div>
+		`;
+
+	    injectStyle(
+	      `
+      	:host {
 					display: inline-block;
 				}
 				:host > div {
@@ -81316,13 +81324,9 @@ descope-boolean-field-internal {
 				:host([vertical="true"]) div {
 					width: fit-content;
 				}
-			</style>
-			<div>
-				<descope-text>
-					<slot></slot>
-				</descope-text>
-			</div>
-		`;
+          `,
+	      this
+	    );
 
 	    this.textComponent = this.shadowRoot.querySelector('descope-text');
 
@@ -81449,8 +81453,12 @@ descope-boolean-field-internal {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			@keyframes spin {
+		<div></div>
+	`;
+
+	    injectStyle(
+	      `
+    @keyframes spin {
 				0% { transform: rotate(0deg); }
 				100% { transform: rotate(360deg); }
 			}
@@ -81461,9 +81469,9 @@ descope-boolean-field-internal {
 			:host > div {
 				animation-name: spin;
 			}
-		</style>
-		<div></div>
-	`;
+        `,
+	      this
+	    );
 	  }
 	}
 
@@ -81504,6 +81512,32 @@ descope-boolean-field-internal {
 
 	    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 = `
@@ -81527,7 +81561,7 @@ descope-boolean-field-internal {
 	      super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
 	      if (attrName === 'digits') {
-	        this.style.setProperty('--passcode-digits-count', newValue);
+	        this.style['--passcode-digits-count'] = newValue;
 	      }
 	    }
 	  };
@@ -81738,8 +81772,12 @@ descope-boolean-field-internal {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			@keyframes tilt {
+		<div></div>
+	`;
+
+	    injectStyle(
+	      `
+    @keyframes tilt {
 				0% { transform: translateX(0); }
 				50% { transform: translateX(400%); }
 			}
@@ -81756,9 +81794,9 @@ descope-boolean-field-internal {
 			:host > div {
 				width: 100%;
 			}
-		</style>
-		<div></div>
-	`;
+        `,
+	      this
+	    );
 	  }
 	}
 
@@ -82786,17 +82824,21 @@ descope-boolean-field-internal {
 	    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() {
@@ -84307,6 +84349,7 @@ descope-boolean-field-internal {
 				flex: 0;
 				border: none;
 			}
+  
 			descope-combo-box {
 				flex-shrink: 0;
         min-width: 5.75em;
@@ -84453,7 +84496,6 @@ descope-boolean-field-internal {
 	} = {
 	  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)' },
@@ -84695,7 +84737,10 @@ descope-boolean-field-internal {
       <div class="label"></div>
       <ul></ul>
     </div>
-    <style>
+		`;
+
+	    injectStyle(
+	      `
       :host > div {
         width: 100%;
         display: flex;
@@ -84726,8 +84771,9 @@ descope-boolean-field-internal {
         width: 1em;
         text-align: center;
       }
-    </style>
-		`;
+        `,
+	      this
+	    );
 
 	    this.panel = this.shadowRoot.querySelector(':host > div');
 	    this.label = this.shadowRoot.querySelector('.label');
@@ -85086,7 +85132,7 @@ descope-boolean-field-internal {
       margin-top: 8px;
       display: flex;
     }
-    descope-policy-validation.hidden {
+    .hidden {
       display: none;
     }
 		`,
@@ -85172,8 +85218,22 @@ descope-boolean-field-internal {
 	    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 {
@@ -85194,19 +85254,9 @@ descope-boolean-field-internal {
 				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');
@@ -85469,7 +85519,13 @@ descope-boolean-field-internal {
 	    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%;
       }
@@ -85483,11 +85539,9 @@ descope-boolean-field-internal {
 				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'] });
@@ -85597,14 +85651,6 @@ descope-boolean-field-internal {
 	      super();
 
 	      this.innerHTML = `
-      <style>
-      slot {
-        box-sizing: border-box;
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-      }
-    </style>
     <slot part="wrapper"></slot>
       `;
 	    }
@@ -85891,6 +85937,13 @@ descope-boolean-field-internal {
 				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;
@@ -86224,7 +86277,14 @@ descope-boolean-field-internal {
 
 	      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';
@@ -86261,7 +86321,7 @@ descope-boolean-field-internal {
 	    },
 	    forward: {
 	      include: false,
-	      attributes: ['opened'],
+	      attributes: ['opened', 'style'],
 	    },
 	  }),
 	  draggableMixin$1,
@@ -86271,8 +86331,12 @@ descope-boolean-field-internal {
 	  createProxy$1({
 	    slots: [''],
 	    wrappedEleName: 'vaadin-dialog',
-	    style: () => ``,
-	    excludeAttrsSync: ['tabindex', 'opened'],
+	    style: () => `
+      vaaadin-dialog {
+        display: flex!important;
+      }
+    `,
+	    excludeAttrsSync: ['tabindex', 'opened', 'style'],
 	    componentName: componentName$v,
 	  })
 	);
@@ -86723,7 +86787,7 @@ descope-boolean-field-internal {
       }
     /*!css*/
 		`,
-	    excludeAttrsSync: ['columns', 'tabindex'],
+	    excludeAttrsSync: ['columns', 'tabindex', 'style'],
 	    componentName: componentName$u,
 	  })
 	);
@@ -87691,7 +87755,13 @@ descope-boolean-field-internal {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+		<div>
+      <slot></slot>
+		</div>
+		`;
+
+	    injectStyle(
+	      `
       :host {
         display: inline-flex;
       }
@@ -87701,11 +87771,9 @@ descope-boolean-field-internal {
         overflow: hidden;
         white-space: nowrap;
       }
-		</style>
-		<div>
-      <slot></slot>
-		</div>
-		`;
+      `,
+	      this
+	    );
 	  }
 	}
 
@@ -87817,8 +87885,16 @@ descope-boolean-field-internal {
 	    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;
 				}
 
@@ -87855,16 +87931,7 @@ descope-boolean-field-internal {
           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');
 
@@ -88186,8 +88253,27 @@ descope-boolean-field-internal {
 	    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;
 				}
 
@@ -88250,38 +88336,21 @@ descope-boolean-field-internal {
         :host([readonly="true"]) descope-button {
           visibility: hidden;
         }
-      </style>
+          `,
+	      this
+	    );
 
+	    this.deleteButton = this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]');
+	    this.editButton = this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]');
+	    this.badge = this.shadowRoot.querySelector('descope-badge');
+	    this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
+	    this.valueText = this.shadowRoot.querySelector('descope-text[data-id="value-text"]');
+	  }
 
-      <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.deleteButton = this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]');
-	    this.editButton = this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]');
-	    this.badge = this.shadowRoot.querySelector('descope-badge');
-	    this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
-	    this.valueText = this.shadowRoot.querySelector('descope-text[data-id="value-text"]');
-	  }
-
-	  onLabelChange() {
-	    this.labelText.innerText = this.label;
-	    this.labelText.setAttribute('title', this.label);
-	  }
+	  onLabelChange() {
+	    this.labelText.innerText = this.label;
+	    this.labelText.setAttribute('title', this.label);
+	  }
 
 	  onValueOrPlaceholderChange() {
 	    const text = this.value || this.placeholder;
@@ -88453,8 +88522,27 @@ descope-boolean-field-internal {
 	    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;
 				}
 
@@ -88514,26 +88602,9 @@ descope-boolean-field-internal {
           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');
@@ -88849,7 +88920,11 @@ descope-boolean-field-internal {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
+    <code class="hljs"></code>
+    `;
+
+	    injectStyle(
+	      `
       :host {
         display: inline-block;
         width: 100%;
@@ -88864,9 +88939,9 @@ descope-boolean-field-internal {
       pre {
         margin: 0;
       }
-    </style>
-    <code class="hljs"></code>
-    `;
+      `,
+	      this
+	    );
 	  }
 
 	  init() {
@@ -89075,7 +89150,6 @@ descope-boolean-field-internal {
 	const vars$g = CodeSnippetClass.cssVarList;
 
 	const light = {
-	  color1: '#fa0',
 	  color2: '#d73a49',
 	  color3: '#6f42c1',
 	  color4: '#005cc5',
@@ -89085,13 +89159,10 @@ descope-boolean-field-internal {
 	  color8: '#24292e',
 	  color9: '#735c0f',
 	  color10: '#f0fff4',
-	  color11: '#b31d28',
-	  color12: '#ffeef0',
 	  color13: '#032f62',
 	};
 
 	const dark = {
-	  color1: '#c9d1d9',
 	  color2: '#ff7b72',
 	  color3: '#d2a8ff',
 	  color4: '#79c0ff',
@@ -89101,8 +89172,6 @@ descope-boolean-field-internal {
 	  color8: '#c9d1d9',
 	  color9: '#735c0f',
 	  color10: '#f0fff4',
-	  color11: '#67060c',
-	  color12: '#ffeef0',
 	  color13: '#a5d6ff',
 	};
 
@@ -89706,8 +89775,7 @@ descope-boolean-field-internal {
 	};
 
 	const comboBoxItemTpl = ({ label, dataId, dataName }) => `
-	<div
-		style="display:flex; flex-direction: column;"
+	<div class="combo-box-item"
 		data-id="${dataId}"
 		data-name="${dataName}"
 	>
@@ -89895,13 +89963,30 @@ descope-boolean-field-internal {
 	    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 {
@@ -89944,23 +90029,15 @@ descope-boolean-field-internal {
         ${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) {
@@ -90743,7 +90820,18 @@ descope-boolean-field-internal {
 	    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;
@@ -90761,22 +90849,15 @@ descope-boolean-field-internal {
         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');
@@ -90980,14 +91061,14 @@ descope-boolean-field-internal {
 	      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() {
@@ -91441,22 +91522,23 @@ descope-boolean-field-internal {
 	      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
+	      );
 	    }
 	  };
 
@@ -91495,9 +91577,17 @@ descope-boolean-field-internal {
 	    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%;
@@ -91524,16 +91614,9 @@ descope-boolean-field-internal {
       ::slotted(:not([slot])) {
         width: 100%;
       }
-      /*!css*/
-		</style>
-
-    <div class="wrapper">
-    <slot></slot>
-    <slot name="empty-state">
-      No item...
-    </slot>
-    </div>
-	`;
+        `,
+	      this
+	    );
 	  }
 
 	  get items() {
@@ -91979,7 +92062,11 @@ descope-boolean-field-internal {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <div></div>
+		`;
+
+	    injectStyle(
+	      `
       :host {
         display: inline-flex;
       }
@@ -91988,10 +92075,9 @@ descope-boolean-field-internal {
         display: flex;
         flex-direction: column;
       }
-
-		</style>
-    <div></div>
-		`;
+        `,
+	      this
+	    );
 	  }
 
 	  get isReadOnly() {
@@ -92106,8 +92192,22 @@ descope-boolean-field-internal {
 	  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 {
@@ -92146,20 +92246,9 @@ descope-boolean-field-internal {
           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
+	    );
 	  }
 	}
 
@@ -92254,7 +92343,11 @@ descope-boolean-field-internal {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <div></div>
+		`;
+
+	    injectStyle(
+	      `
       :host {
         display: inline-flex;
       }
@@ -92263,10 +92356,9 @@ descope-boolean-field-internal {
         display: flex;
         flex-direction: column;
       }
-
-		</style>
-    <div></div>
-		`;
+    `,
+	      this
+	    );
 	  }
 
 	  get count() {
@@ -92508,7 +92600,11 @@ descope-boolean-field-internal {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <div></div>
+		`;
+
+	    injectStyle(
+	      `
       :host {
         display: inline-flex;
       }
@@ -92517,10 +92613,9 @@ descope-boolean-field-internal {
         display: flex;
         flex-direction: column;
       }
-
-		</style>
-    <div></div>
-		`;
+        `,
+	      this
+	    );
 	  }
 
 	  #renderQuestions() {
@@ -92802,8 +92897,16 @@ descope-boolean-field-internal {
 	    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;
@@ -92822,14 +92925,10 @@ descope-boolean-field-internal {
       }
       .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() {
@@ -93115,7 +93214,18 @@ descope-boolean-field-internal {
 	    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;
       }
@@ -93135,16 +93245,9 @@ descope-boolean-field-internal {
         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() {
@@ -93449,6 +93552,17 @@ descope-boolean-field-internal {
       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,
@@ -93738,18 +93852,6 @@ descope-boolean-field-internal {
 	    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>
@@ -93949,6 +94051,17 @@ descope-boolean-field-internal {
     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,
@@ -94136,7 +94249,15 @@ descope-boolean-field-internal {
 	    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;
       }
@@ -94162,13 +94283,9 @@ descope-boolean-field-internal {
       .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');