@descope-ui/common 0.0.5 → 0.0.6

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.6](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.5...@descope-ui/common-0.0.6) (2025-03-03)
+
 ## [0.0.5](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.4...@descope-ui/common-0.0.5) (2025-02-26)
 
 ## [0.0.4](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.3...@descope-ui/common-0.0.4) (2025-02-17)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/common",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "dependencies": {
     "element-internals-polyfill": "^1.3.9",
     "color": "^4.2.3",

package/src/baseClasses/baseClasses/createCssVarImageClass.js

@@ -3,6 +3,7 @@ import { componentNameValidationMixin } from '../../componentsMixins/mixins/comp
 import { createStyleMixin } from '../../componentsMixins/mixins/createStyleMixin';
 import { draggableMixin } from '../../componentsMixins/mixins/draggableMixin';
 import { createBaseClass } from './createBaseClass';
+import { injectStyle } from '../../componentsHelpers';
 
 export const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
   let style;
@@ -15,8 +16,11 @@ export const createCssVarImageClass = ({ componentName, varName, fallbackVarName
     constructor() {
       super();
       this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
-				:host {
+			<div></div>
+			`;
+
+      injectStyle(`
+        :host {
 					display: inline-flex;
 				}
 				:host([draggable="true"]) > div {
@@ -30,9 +34,7 @@ export const createCssVarImageClass = ({ componentName, varName, fallbackVarName
 					margin: auto;
 					${getContent()}
 				}
-			</style>
-			<div></div>
-			`;
+          `, this)
     }
   }
 

package/src/componentsHelpers/index.js

@@ -93,3 +93,19 @@ export const forwardProps = (src, target, props = []) => {
 
   Object.defineProperties(target, config);
 };
+
+export 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;
+}

package/src/componentsMixins/mixins/createProxy.js

@@ -1,6 +1,6 @@
 import { createBaseClass } from '../../baseClasses';
 import { isFunction } from '../../utils';
-import { forwardProps, syncAttrs } from '../../componentsHelpers';
+import { forwardProps, injectStyle, syncAttrs } from '../../componentsHelpers';
 import { createDispatchEvent } from '../../componentsMixins/helpers/mixinsHelpers';
 
 export const createProxy = ({
@@ -20,7 +20,6 @@ export const createProxy = ({
 
     constructor() {
       super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
-			<style id="create-proxy">${(isFunction(style) ? style() : style) || ''}</style>
 			<${wrappedEleName}>
 			${slots
         .map(
@@ -31,6 +30,8 @@ export const createProxy = ({
         .join('')}
 			</${wrappedEleName}>
 		`;
+
+    injectStyle((isFunction(style) ? style() : style) || '', this);
     }
 
     init() {

package/src/componentsMixins/mixins/createStyleMixin/index.js

@@ -1,6 +1,6 @@
 import { BASE_THEME_SECTION, CSS_SELECTOR_SPECIFIER_MULTIPLY } from '../../../constants';
 import { kebabCaseJoin } from '../../../utils';
-import { getCssVarName, observeAttributes } from '../../../componentsHelpers';
+import { getCssVarName, injectStyle, observeAttributes } from '../../../componentsHelpers';
 import { componentsThemeManager } from '../../../themeHelpers';
 import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './helpers';
 
@@ -65,13 +65,11 @@ export 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)
         );
@@ -80,21 +78,18 @@ export 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(
@@ -110,31 +105,22 @@ export 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 });
         }
       }
 

package/src/sbHelpers.js

@@ -1,8 +1,13 @@
 export const withForm = (children) => {
   return `
+    <style nonce="${window.DESCOPE_NONCE}">
+      .form-actions {
+        margin-top: 6em
+      }
+    </style>
     <form onsubmit="event.preventDefault()">
       <div>${children}</div>
-      <div style="margin-top: 6em">
+      <div class="form-actions">
         <button type="submit" data-testid="submit-button">Submit</button>
       </div>
     </form>