@descope/web-components-ui 1.135.0 → 1.137.0

package/dist/index.esm.js

@@ -100,7 +100,7 @@ const toTitle = (str) =>
     .join(' ');
 
 const DESCOPE_PREFIX$1 = 'descope';
-const CSS_SELECTOR_SPECIFIER_MULTIPLY$1 = 3;
+const CSS_SELECTOR_SPECIFIER_MULTIPLY$1 = 5;
 const BASE_THEME_SECTION$1 = 'host';
 const PORTAL_THEME_PREFIX$1 = '@';
 
@@ -279,7 +279,7 @@ const compose =
 const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
 
 const DESCOPE_PREFIX = 'descope';
-const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
+const CSS_SELECTOR_SPECIFIER_MULTIPLY = 5;
 const BASE_THEME_SECTION = 'host';
 
 const observeAttributes = (
@@ -699,6 +699,241 @@ const createHelperVars$1 = (theme, prefix) => {
   return [res.theme, res.useVars, res.vars];
 };
 
+const colorGaps = {
+  darkLight: 0.4,
+  highlight: 0.8,
+  contrast: 1,
+  edgeColor: {
+    darkLight: 0.25,
+    highlight: 0.1,
+  },
+};
+
+const darken = (c, percentage) => c.darken(percentage).hex();
+
+const contrast = (c) => {
+  const isDark = c.isDark();
+  return c
+    .mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
+    .saturate(1)
+    .hex();
+};
+
+const lighten = (c, percentage) => {
+  const isDark = c.lightness() < 0.5;
+
+  if (isDark) {
+    return c.lightness(percentage * 100).hex();
+  }
+
+  return c.lighten(percentage).hex();
+};
+
+const isNearBlack = (color) => color.luminosity() < 0.01;
+const isNearWhite = (color) => color.luminosity() > 0.99;
+
+const generateDarkColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearWhite(color)
+      ? darken(color, colorGaps.edgeColor.darkLight)
+      : lighten(color, colorGaps.darkLight);
+  }
+
+  return isNearBlack(color)
+    ? lighten(color, colorGaps.edgeColor.darkLight)
+    : darken(color, colorGaps.darkLight);
+};
+
+const generateLightColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearBlack(color)
+      ? lighten(color, colorGaps.edgeColor.darkLight)
+      : darken(color, colorGaps.darkLight);
+  }
+
+  return isNearWhite(color)
+    ? darken(color, colorGaps.edgeColor.darkLight)
+    : lighten(color, colorGaps.darkLight);
+};
+
+const generateHighlightColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearBlack(color)
+      ? lighten(color, colorGaps.edgeColor.highlight)
+      : darken(color, colorGaps.highlight);
+  }
+
+  return isNearWhite(color)
+    ? darken(color, colorGaps.edgeColor.highlight)
+    : lighten(color, colorGaps.highlight);
+};
+
+const genColor = (color, theme) => {
+  const mainColor = new Color(color.main || color);
+
+  const res = {
+    main: mainColor.hex(),
+    dark: color.dark || generateDarkColor(mainColor, theme),
+    light: color.light || generateLightColor(mainColor, theme),
+    highlight: color.highlight || generateHighlightColor(mainColor, theme),
+    contrast: color.contrast || contrast(mainColor),
+  };
+
+  return res;
+};
+
+const genColors = (colors) => {
+  return Object.keys(colors).reduce((acc, colorName) => {
+    const currentColor = colors[colorName];
+
+    return Object.assign(acc, {
+      [colorName]: genColor(currentColor),
+    });
+  }, {});
+};
+
+const useHostExternalPadding = (cssVarList) => `
+    :host {
+        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))
+    }
+`;
+
+const resetInputFieldUnderlayingBorder = (name) => `
+    ${name}::part(input-field)::after {
+        border: none;
+    }
+`;
+
+const resetInitialHeight = (name) => `
+    ${name}::before {
+		height: unset;
+	}
+`;
+
+const resetInputElement = (name) => `
+    ${name} > input {
+        -webkit-mask-image: none;
+        min-height: 0;
+        box-sizing: border-box;
+    }
+`;
+
+const resetInputContainer = (name) => `
+    ${name} {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+    }
+`;
+
+const resetInputField = (name) => `
+    ${name}::part(input-field) {
+        overflow: hidden;
+        padding: 0;
+        box-shadow: none;
+    }
+`;
+
+const resetInputCursor = (name) => `
+    ${name} > label,
+    ${name}::part(label),
+    ${name}::part(required-indicator) {
+        cursor: pointer;
+    }
+`;
+
+const resetInputPlaceholder = (name, ele = 'input') => `
+    ${name}[disabled] > ${ele}:placeholder-shown,
+	${name}[readonly] > ${ele}:placeholder-shown {
+		opacity: 1;
+	}
+`;
+
+const resetInputAutoFill = (name, cssVarList) => `
+    ${name} input:-webkit-autofill,
+    ${name} input:-webkit-autofill::first-line,
+    ${name} input:-webkit-autofill:hover,
+    ${name} input:-webkit-autofill:active,
+    ${name} input:-webkit-autofill:focus {
+        -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});
+        box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;
+    }
+`;
+
+const resetInputFieldDefaultWidth = () => `
+    :host {
+        --vaadin-field-default-width: auto;
+        box-sizing: border-box;
+    }
+`;
+
+const resetInputReadonlyStyle = (name) => `
+    ${name}::part(input-field)::after {
+        opacity: 0;
+    }
+`;
+
+const resetInputFieldInvalidBackgroundColor = (name) => `
+    ${name}::part(input-field)::after {
+        background: none;
+    }
+`;
+
+const resetInputOverrides = (name, cssVarList) => `
+    ${resetInputContainer(name)}
+    ${resetInputCursor(name)}
+    ${resetInputPlaceholder(name)}
+    ${resetInputField(name)}
+    ${resetInputAutoFill(name, cssVarList)}
+    ${resetInputFieldInvalidBackgroundColor(name)}
+    ${resetInitialHeight(name)}
+    ${resetInputElement(name)}
+    ${resetInputFieldUnderlayingBorder(name)}
+`;
+
+// This function is used to support RTL correctly for input components.
+// It also fixes the error message to be displayed LTR since we currently
+// don't support RTL for error messages.
+const resetInputLabelPosition = (name) => `
+    :host ::part(error-message) {
+      direction: ltr;
+    }
+    :host([required]) ::part(required-indicator) {
+      width: 1em;
+      display: inline-flex;
+    }
+    :host([required]) ::part(required-indicator)::after {
+      position: static;
+    }
+    :host([has-label]) ::part(label) {
+      padding-right: 0;
+      padding-bottom: 0;
+      display: flex;
+      width: 100%;
+    }
+    ${name} [slot="label"] {
+      max-width: calc(100% - 1em);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-bottom: 0.5em;
+    }
+`;
+
+const inputFloatingLabelStyle = () => {
+  return `
+  :host([label-type="floating"]) {
+    position: relative;
+  }
+  :host([label-type="floating"][has-label]) > ::part(label) {
+    z-index: 1;
+    padding: 0;
+    width: auto;
+  }
+  `;
+};
+
 const getVarName = (path) => getCssVarName$1(DESCOPE_PREFIX$1, ...path);
 
 // lodash.set alternative
@@ -761,6 +996,15 @@ const globalsThemeToStyle = (theme, themeName = '') => {
   return `*[data-theme="${themeName}"] {${style}}`;
 };
 
+function splitAmpersands(str) {
+  const match = str.match(/^(&+)?(.*)$/);
+  return [match[1] || '', match[2] || ''];
+}
+
+// st attributes are also using selector multiplication
+// so we need to limit the multiplication
+const MAX_SELECTOR_MULTIPLY = 3;
+
 const componentsThemeToStyleObj = (componentsTheme) =>
   transformTheme(componentsTheme, [], (path, val) => {
     const [component, ...restPath] = path;
@@ -785,11 +1029,22 @@ const componentsThemeToStyleObj = (componentsTheme) =>
     // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
     // starts with underscore -> attribute selector
     const attrsSelector = restPath.reduce((acc, section, idx) => {
-      if (section.startsWith('_')) return `${acc}[${kebabCase$1(section.replace(/^_/, ''))}="true"]`;
+      const [ampersands, content] = splitAmpersands(section);
+      const selectorMultiplier = Math.min(
+        ampersands.length + 1, // if there are no & we need to multiply by 1
+        MAX_SELECTOR_MULTIPLY
+      );
+
+      if (content.startsWith('_'))
+        return acc + `[${kebabCase$1(content.replace(/^_/, ''))}="true"]`.repeat(selectorMultiplier);
 
       const nextSection = restPath[idx + 1];
 
-      if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
+      if (
+        typeof nextSection !== 'string' ||
+        nextSection.startsWith('_') ||
+        nextSection.startsWith('&')
+      ) {
         // eslint-disable-next-line no-console
         console.error(
           'theme generator',
@@ -798,7 +1053,12 @@ const componentsThemeToStyleObj = (componentsTheme) =>
         return acc;
       }
 
-      return `${acc}[${kebabCase$1(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+      return (
+        acc +
+        `[${kebabCase$1(content)}="${restPath.splice(idx + 1, 1).join('')}"]`.repeat(
+          selectorMultiplier
+        )
+      );
     }, '');
 
     const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
@@ -832,7 +1092,9 @@ const createComponentsTheme = (componentsTheme) => {
     return Object.assign(acc, {
       [componentName]: Object.keys(componentThemes).reduce(
         (res, theme) =>
-          Object.assign(res, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
+          Object.assign(res, {
+            [theme]: componentsThemeToStyle(componentThemes[theme]),
+          }),
         {}
       ),
     });
@@ -970,7 +1232,7 @@ const createCssVarsList$1 = (componentName, mappings) =>
 // on some cases we need a selector to be more specific than another
 // for this we have this fn that generate a class selector multiple times
 const createClassSelectorSpecifier$1 = (className, numOfRepeats) =>
-  Array(numOfRepeats).fill(`.${className}`).join('');
+  `.${className}`.repeat(numOfRepeats);
 
 const STYLE_OVERRIDE_ATTR_PREFIX$1 = 'st';
 
@@ -1046,10 +1308,16 @@ const createStyleMixin$1 =
 
       #createOverridesStyle() {
         if (this.#styleAttributes.length) {
-          const classSpecifier = createClassSelectorSpecifier$1(
+          let classSpecifier = createClassSelectorSpecifier$1(
             componentName,
             CSS_SELECTOR_SPECIFIER_MULTIPLY$1
           );
+          const elementId = this.getAttribute('id');
+          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}`;
+          }
 
           this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
         }
@@ -2434,148 +2702,6 @@ const booleanFieldMixin = (superclass) =>
     }
   };
 
-const useHostExternalPadding = (cssVarList) => `
-    :host {
-        padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))
-    }
-`;
-
-const resetInputFieldUnderlayingBorder = (name) => `
-    ${name}::part(input-field)::after {
-        border: none;
-    }
-`;
-
-const resetInitialHeight = (name) => `
-    ${name}::before {
-		height: unset;
-	}
-`;
-
-const resetInputElement = (name) => `
-    ${name} > input {
-        -webkit-mask-image: none;
-        min-height: 0;
-        box-sizing: border-box;
-    }
-`;
-
-const resetInputContainer = (name) => `
-    ${name} {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-    }
-`;
-
-const resetInputField = (name) => `
-    ${name}::part(input-field) {
-        overflow: hidden;
-        padding: 0;
-        box-shadow: none;
-    }
-`;
-
-const resetInputCursor = (name) => `
-    ${name} > label,
-    ${name}::part(label),
-    ${name}::part(required-indicator) {
-        cursor: pointer;
-    }
-`;
-
-const resetInputPlaceholder = (name, ele = 'input') => `
-    ${name}[disabled] > ${ele}:placeholder-shown,
-	${name}[readonly] > ${ele}:placeholder-shown {
-		opacity: 1;
-	}
-`;
-
-const resetInputAutoFill = (name, cssVarList) => `
-    ${name} input:-webkit-autofill,
-    ${name} input:-webkit-autofill::first-line,
-    ${name} input:-webkit-autofill:hover,
-    ${name} input:-webkit-autofill:active,
-    ${name} input:-webkit-autofill:focus {
-        -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});
-        box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;
-    }
-`;
-
-const resetInputFieldDefaultWidth = () => `
-    :host {
-        --vaadin-field-default-width: auto;
-        box-sizing: border-box;
-    }
-`;
-
-const resetInputReadonlyStyle = (name) => `
-    ${name}::part(input-field)::after {
-        opacity: 0;
-    }
-`;
-
-const resetInputFieldInvalidBackgroundColor = (name) => `
-    ${name}::part(input-field)::after {
-        background: none;
-    }
-`;
-
-const resetInputOverrides = (name, cssVarList) => `
-    ${resetInputContainer(name)}
-    ${resetInputCursor(name)}
-    ${resetInputPlaceholder(name)}
-    ${resetInputField(name)}
-    ${resetInputAutoFill(name, cssVarList)}
-    ${resetInputFieldInvalidBackgroundColor(name)}
-    ${resetInitialHeight(name)}
-    ${resetInputElement(name)}
-    ${resetInputFieldUnderlayingBorder(name)}
-`;
-
-// This function is used to support RTL correctly for input components.
-// It also fixes the error message to be displayed LTR since we currently
-// don't support RTL for error messages.
-const resetInputLabelPosition = (name) => `
-    :host ::part(error-message) {
-      direction: ltr;
-    }
-    :host([required]) ::part(required-indicator) {
-      width: 1em;
-      display: inline-flex;
-    }
-    :host([required]) ::part(required-indicator)::after {
-      position: static;
-    }
-    :host([has-label]) ::part(label) {
-      padding-right: 0;
-      padding-bottom: 0;
-      display: flex;
-      width: 100%;
-    }
-    ${name} [slot="label"] {
-      max-width: calc(100% - 1em);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      padding-bottom: 0.5em;
-    }
-`;
-
-const inputFloatingLabelStyle = () => {
-  return `
-  :host([label-type="floating"]) {
-    position: relative;
-  }
-  :host([label-type="floating"][has-label]) > ::part(label) {
-    z-index: 1;
-    padding: 0;
-    width: auto;
-  }
-  `;
-};
-
 var commonStyles = `
 :host {
 	display: inline-flex;
@@ -3190,8 +3316,7 @@ const createCssVarsList = (componentName, mappings) =>
 
 // on some cases we need a selector to be more specific than another
 // for this we have this fn that generate a class selector multiple times
-const createClassSelectorSpecifier = (className, numOfRepeats) =>
-  Array(numOfRepeats).fill(`.${className}`).join('');
+const createClassSelectorSpecifier = (className, numOfRepeats) => `.${className}`.repeat(numOfRepeats);
 
 const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
 
@@ -3278,20 +3403,24 @@ const createStyleMixin =
 
       #createOverridesStyle() {
         if (this.#styleAttributes.length) {
-          const classSpecifier = createClassSelectorSpecifier(
+          let classSpecifier = createClassSelectorSpecifier(
             componentName,
-            CSS_SELECTOR_SPECIFIER_MULTIPLY,
+            CSS_SELECTOR_SPECIFIER_MULTIPLY
           );
+          const elementId = this.getAttribute('id');
+          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}`;
+          }
 
-          this.#overrideStyleEle = injectStyle(
-            `:host(${classSpecifier}) {}`,
-            this.#rootElement,
-          );
+          this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
         }
       }
 
+
       #setAttrOverride(attrName, value) {
-        const style = this.#overrideStyleEle?.cssRules[0].style;
+        const style = this.#overrideStyleEle?.cssRules[0]?.style;
 
         if (!style) return;
 
@@ -19128,99 +19257,6 @@ const HcaptchaClass = compose$1(
 
 customElements.define(componentName$g, HcaptchaClass);
 
-const colorGaps = {
-  darkLight: 0.4,
-  highlight: 0.8,
-  contrast: 1,
-  edgeColor: {
-    darkLight: 0.25,
-    highlight: 0.1,
-  },
-};
-
-const darken = (c, percentage) => c.darken(percentage).hex();
-
-const contrast = (c) => {
-  const isDark = c.isDark();
-  return c
-    .mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
-    .saturate(1)
-    .hex();
-};
-
-const lighten = (c, percentage) => {
-  const isDark = c.lightness() < 0.5;
-
-  if (isDark) {
-    return c.lightness(percentage * 100).hex();
-  }
-
-  return c.lighten(percentage).hex();
-};
-
-const isNearBlack = (color) => color.luminosity() < 0.01;
-const isNearWhite = (color) => color.luminosity() > 0.99;
-
-const generateDarkColor = (color, theme) => {
-  if (theme === 'dark') {
-    return isNearWhite(color)
-      ? darken(color, colorGaps.edgeColor.darkLight)
-      : lighten(color, colorGaps.darkLight);
-  }
-
-  return isNearBlack(color)
-    ? lighten(color, colorGaps.edgeColor.darkLight)
-    : darken(color, colorGaps.darkLight);
-};
-
-const generateLightColor = (color, theme) => {
-  if (theme === 'dark') {
-    return isNearBlack(color)
-      ? lighten(color, colorGaps.edgeColor.darkLight)
-      : darken(color, colorGaps.darkLight);
-  }
-
-  return isNearWhite(color)
-    ? darken(color, colorGaps.edgeColor.darkLight)
-    : lighten(color, colorGaps.darkLight);
-};
-
-const generateHighlightColor = (color, theme) => {
-  if (theme === 'dark') {
-    return isNearBlack(color)
-      ? lighten(color, colorGaps.edgeColor.highlight)
-      : darken(color, colorGaps.highlight);
-  }
-
-  return isNearWhite(color)
-    ? darken(color, colorGaps.edgeColor.highlight)
-    : lighten(color, colorGaps.highlight);
-};
-
-const genColor = (color, theme) => {
-  const mainColor = new Color(color.main || color);
-
-  const res = {
-    main: mainColor.hex(),
-    dark: color.dark || generateDarkColor(mainColor, theme),
-    light: color.light || generateLightColor(mainColor, theme),
-    highlight: color.highlight || generateHighlightColor(mainColor, theme),
-    contrast: color.contrast || contrast(mainColor),
-  };
-
-  return res;
-};
-
-const genColors = (colors) => {
-  return Object.keys(colors).reduce((acc, colorName) => {
-    const currentColor = colors[colorName];
-
-    return Object.assign(acc, {
-      [colorName]: genColor(currentColor),
-    });
-  }, {});
-};
-
 const direction$1 = 'ltr';
 
 const colors$2 = genColors({
@@ -20357,7 +20393,8 @@ const container = {
     },
   },
 
-  borderRadius: {
+  // we must add & to override the root container style (applied via the styles page)
+  '&borderRadius': {
     sm: { [compVars$8.borderRadius]: globalRefs$B.radius.sm },
     md: { [compVars$8.borderRadius]: globalRefs$B.radius.md },
     lg: { [compVars$8.borderRadius]: globalRefs$B.radius.lg },