@descope-ui/common 0.0.9 → 0.0.11

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.11](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.10...@descope-ui/common-0.0.11) (2025-04-29)
+
+
+### Bug Fixes
+
+* CSSStyleSheet fallback for older browser ([#639](https://github.com/descope/web-components-ui/issues/639)) ([1ff86cc](https://github.com/descope/web-components-ui/commit/1ff86ccd6d5a00de025207d99f034772b92ac910))
+
+## [0.0.10](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.9...@descope-ui/common-0.0.10) (2025-04-16)
+
 ## [0.0.9](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.8...@descope-ui/common-0.0.9) (2025-03-06)
 
 ## [0.0.8](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.7...@descope-ui/common-0.0.8) (2025-03-05)

package/package.json

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

package/src/componentsHelpers/index.js

@@ -45,19 +45,19 @@ export const observeChildren = (ele, callback) => {
 
 const createSyncAttrsCb =
   (srcEle, targetEle, mapAttrs = {}) =>
-  (attrNames) => {
-    attrNames.forEach((attrName) => {
-      const targetAttrName = mapAttrs[attrName] || attrName;
-      const srcAttrVal = srcEle.getAttribute(attrName);
-      if (srcAttrVal !== null) {
-        if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
-          targetEle.setAttribute(targetAttrName, srcAttrVal);
+    (attrNames) => {
+      attrNames.forEach((attrName) => {
+        const targetAttrName = mapAttrs[attrName] || attrName;
+        const srcAttrVal = srcEle.getAttribute(attrName);
+        if (srcAttrVal !== null) {
+          if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
+            targetEle.setAttribute(targetAttrName, srcAttrVal);
+          }
+        } else {
+          targetEle.removeAttribute(targetAttrName);
         }
-      } else {
-        targetEle.removeAttribute(targetAttrName);
-      }
-    });
-  };
+      });
+    };
 
 export const syncAttrs = (ele1, ele2, options) => {
   observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
@@ -94,8 +94,16 @@ export const forwardProps = (src, target, props = []) => {
   Object.defineProperties(target, config);
 };
 
-export const injectStyle = (cssString, ref, {prepend = false} = {}) => {
-  const style = new CSSStyleSheet();
+export const injectStyle = (cssString, ref, { prepend = false } = {}) => {
+
+  let style;
+  try {
+    style = new CSSStyleSheet();
+  } catch (e) {
+    // fallback for browsers that don't support CSSStyleSheet
+    return generateStyleTagFallback(cssString, ref, { prepend });
+  }
+
   const _ref = ref?.shadowRoot || ref;
   if (cssString) {
     style.replaceSync(cssString);
@@ -109,3 +117,33 @@ export const injectStyle = (cssString, ref, {prepend = false} = {}) => {
 
   return style;
 }
+
+// we should mimic the CSSStyleSheet API for the fns we are using
+class CSSStyleSheetMock {
+  constructor(cssString, ref, { prepend = false } = {}) {
+    this.styleEle = document.createElement('style');
+    this.styleEle.textContent = cssString;
+    this.styleEle.setAttribute('nonce', window.DESCOPE_NONCE);
+    this.ref = ref?.shadowRoot || ref;
+
+    if (!this.ref) {
+      return
+    }
+
+    if (prepend) {
+      this.ref.prepend(this.styleEle);
+    } else {
+      this.ref.append(this.styleEle);
+    }
+  }
+
+  replaceSync(cssString) {
+    this.styleEle.textContent = cssString;
+  }
+
+  get cssRules() {
+    return this.styleEle.sheet?.cssRules;
+  }
+}
+
+const generateStyleTagFallback = (cssString, ref, { prepend = false } = {}) => new CSSStyleSheetMock(cssString, ref, { prepend });

package/src/componentsMixins/mixins/normalizeBooleanAttributesMixin.js

@@ -22,6 +22,7 @@ const booleanAttributesList = [
   'has-no-options',
   'loading',
   'allow-custom-value',
+  'collapsed',
 ];
 
 const isBooleanAttribute = (attr) => {