@descope/web-components-ui 2.1.16 → 2.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "2.1.16",
+  "version": "2.1.18",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -50,10 +50,10 @@
     "webpack": "^5.79.0",
     "webpack-cli": "^6.0.0",
     "webpack-dev-server": "^5.0.0",
-    "rollup-replace-plugin": "2.1.16",
-    "test-drivers": "2.1.16",
-    "webpack-extract-font-loader": "2.1.16",
-    "webpack-replace-plugin": "2.1.16"
+    "rollup-replace-plugin": "2.1.18",
+    "test-drivers": "2.1.18",
+    "webpack-extract-font-loader": "2.1.18",
+    "webpack-replace-plugin": "2.1.18"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -77,29 +77,29 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/common": "2.1.16",
-    "@descope-ui/descope-address-field": "2.1.16",
-    "@descope-ui/descope-apps-list": "2.1.16",
-    "@descope-ui/descope-autocomplete-field": "2.1.16",
-    "@descope-ui/descope-avatar": "2.1.16",
-    "@descope-ui/descope-badge": "2.1.16",
-    "@descope-ui/descope-button": "2.1.16",
-    "@descope-ui/descope-collapsible-container": "2.1.16",
-    "@descope-ui/descope-combo-box": "2.1.16",
-    "@descope-ui/descope-enriched-text": "2.1.16",
-    "@descope-ui/descope-icon": "2.1.16",
-    "@descope-ui/descope-image": "2.1.16",
-    "@descope-ui/descope-link": "2.1.16",
-    "@descope-ui/descope-list": "2.1.16",
-    "@descope-ui/descope-list-item": "2.1.16",
-    "@descope-ui/descope-outbound-app-button": "2.1.16",
-    "@descope-ui/descope-outbound-apps": "2.1.16",
-    "@descope-ui/descope-password-strength": "2.1.16",
-    "@descope-ui/descope-recovery-codes": "2.1.16",
-    "@descope-ui/descope-text": "2.1.16",
-    "@descope-ui/descope-timer": "2.1.16",
-    "@descope-ui/descope-timer-button": "2.1.16",
-    "@descope-ui/descope-trusted-devices": "2.1.16"
+    "@descope-ui/common": "2.1.18",
+    "@descope-ui/descope-address-field": "2.1.18",
+    "@descope-ui/descope-apps-list": "2.1.18",
+    "@descope-ui/descope-autocomplete-field": "2.1.18",
+    "@descope-ui/descope-avatar": "2.1.18",
+    "@descope-ui/descope-badge": "2.1.18",
+    "@descope-ui/descope-button": "2.1.18",
+    "@descope-ui/descope-collapsible-container": "2.1.18",
+    "@descope-ui/descope-combo-box": "2.1.18",
+    "@descope-ui/descope-enriched-text": "2.1.18",
+    "@descope-ui/descope-icon": "2.1.18",
+    "@descope-ui/descope-image": "2.1.18",
+    "@descope-ui/descope-link": "2.1.18",
+    "@descope-ui/descope-list": "2.1.18",
+    "@descope-ui/descope-list-item": "2.1.18",
+    "@descope-ui/descope-outbound-app-button": "2.1.18",
+    "@descope-ui/descope-outbound-apps": "2.1.18",
+    "@descope-ui/descope-password-strength": "2.1.18",
+    "@descope-ui/descope-recovery-codes": "2.1.18",
+    "@descope-ui/descope-text": "2.1.18",
+    "@descope-ui/descope-timer": "2.1.18",
+    "@descope-ui/descope-timer-button": "2.1.18",
+    "@descope-ui/descope-trusted-devices": "2.1.18"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/mixins/createStyleMixin/helpers.js

@@ -1,7 +1,17 @@
 import { camelCaseJoin, isFunction, kebabCase, kebabCaseJoin } from '../../helpers';
 import { getCssVarName } from '../../helpers/componentHelpers';
 
-const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+const getOverrideCssVarName = (origVarName) => `${origVarName}__override`;
+
+const createCssVar = (varName, fallback, createOverride = false) => {
+  const ret = `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+
+  if (!createOverride) return ret;
+
+  // we are generating an override css var to allow override with fallback to the default var
+  const overrideVarName = getOverrideCssVarName(varName);
+  return `var(${overrideVarName}, ${ret})`;
+};
 
 const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
   isFunction(relativeSelectorOrSelectorFn)
@@ -50,6 +60,7 @@ const getFallbackVarName = (origVarName, suffix = 'fallback') => kebabCaseJoin(o
 
 export const createStyle = (componentName, baseSelector, mappings) => {
   const style = new StyleBuilder();
+  // we generate all the fallback vars recursively
   const createFallbackVar = (fallback, origVarName) => {
     if (!fallback) return '';
     if (typeof fallback === 'string') return fallback;
@@ -69,7 +80,7 @@ export const createStyle = (componentName, baseSelector, mappings) => {
         style.add(
           createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
           isFunction(property) ? property() : property,
-          createCssVar(cssVarName, fallbackValue) + (important ? '!important' : '')
+          createCssVar(cssVarName, fallbackValue, true) + (important ? '!important' : '')
         );
       }
     );
@@ -96,6 +107,8 @@ export const createCssVarsList = (componentName, mappings) =>
     return Object.assign(
       acc,
       { [attr]: varName },
+      // we are exposing the override css var names, the convention is to add 'Override' suffix to the attribute name
+      { [attr + 'Override']: getOverrideCssVarName(varName) },
       getFallbackVarsNames(attr, varName, mappings[attr])
     );
   }, {});

package/src/mixins/createStyleMixin/index.js

@@ -87,7 +87,7 @@ export const createStyleMixin =
           if (elementId) {
             // basically this is enough to make the selector more specific
             // but just in case there is no id, we will also add the class multiple times
-            classSpecifier += `#${elementId}`;
+            classSpecifier += `#${CSS.escape(elementId)}`;
           }
 
           this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
@@ -95,7 +95,7 @@ export const createStyleMixin =
       }
 
       #setAttrOverride(attrName, value) {
-        const style = this.#overrideStyleEle?.cssRules[0]?.style;
+        const style = this.#overrideStyleEle.cssRules[0].style;
 
         if (!style) return;