@descope/flow-components 2.1.9 → 2.1.11

package/dist/index.cjs.js

@@ -4396,7 +4396,7 @@ function requireColor () {
 	return color;
 }
 
-/*! @license DOMPurify 3.2.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.6/LICENSE */
+/*! @license DOMPurify 3.2.7 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.7/LICENSE */
 
 var purify_cjs;
 var hasRequiredPurify_cjs;
@@ -4432,12 +4432,18 @@ function requirePurify_cjs () {
 	  };
 	}
 	if (!apply) {
-	  apply = function apply(fun, thisValue, args) {
-	    return fun.apply(thisValue, args);
+	  apply = function apply(func, thisArg) {
+	    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+	      args[_key - 2] = arguments[_key];
+	    }
+	    return func.apply(thisArg, args);
 	  };
 	}
 	if (!construct) {
-	  construct = function construct(Func, args) {
+	  construct = function construct(Func) {
+	    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+	      args[_key2 - 1] = arguments[_key2];
+	    }
 	    return new Func(...args);
 	  };
 	}
@@ -4466,8 +4472,8 @@ function requirePurify_cjs () {
 	    if (thisArg instanceof RegExp) {
 	      thisArg.lastIndex = 0;
 	    }
-	    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-	      args[_key - 1] = arguments[_key];
+	    for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+	      args[_key3 - 1] = arguments[_key3];
 	    }
 	    return apply(func, thisArg, args);
 	  };
@@ -4478,12 +4484,12 @@ function requirePurify_cjs () {
 	 * @param func - The constructor function to be wrapped and called.
 	 * @returns A new function that constructs an instance of the given constructor function with the provided arguments.
 	 */
-	function unconstruct(func) {
+	function unconstruct(Func) {
 	  return function () {
-	    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-	      args[_key2] = arguments[_key2];
+	    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+	      args[_key4] = arguments[_key4];
 	    }
-	    return construct(func, args);
+	    return construct(Func, args);
 	  };
 	}
 	/**
@@ -4582,8 +4588,8 @@ function requirePurify_cjs () {
 	  return fallbackValue;
 	}
 
-	const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']);
-	const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);
+	const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'search', 'section', 'select', 'shadow', 'slot', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']);
+	const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'enterkeyhint', 'exportparts', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'inputmode', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'part', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'slot', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);
 	const svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']);
 	// List of SVG elements that are disallowed by default.
 	// We still need to know them so that we can do namespace
@@ -4596,7 +4602,7 @@ function requirePurify_cjs () {
 	const mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']);
 	const text = freeze(['#text']);
 
-	const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']);
+	const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'exportparts', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inert', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'part', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'slot', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']);
 	const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']);
 	const mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']);
 	const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);
@@ -4704,7 +4710,7 @@ function requirePurify_cjs () {
 	function createDOMPurify() {
 	  let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();
 	  const DOMPurify = root => createDOMPurify(root);
-	  DOMPurify.version = '3.2.6';
+	  DOMPurify.version = '3.2.7';
 	  DOMPurify.removed = [];
 	  if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document || !window.Element) {
 	    // Not running in a browser, provide a factory function
@@ -5401,7 +5407,7 @@ function requirePurify_cjs () {
 	      // First condition does a very basic check if a) it's basically a valid custom element tagname AND
 	      // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
 	      // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck
-	      _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) ||
+	      _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName, lcTag)) ||
 	      // Alternative, second condition checks if it's an `is`-attribute, AND
 	      // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
 	      lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value))) ; else {
@@ -5480,7 +5486,12 @@ function requirePurify_cjs () {
 	        value = SANITIZE_NAMED_PROPS_PREFIX + value;
 	      }
 	      /* Work around a security issue with comments inside attributes */
-	      if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|title)/i, value)) {
+	      if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|title|textarea)/i, value)) {
+	        _removeAttribute(name, currentNode);
+	        continue;
+	      }
+	      /* Make sure we cannot easily use animated hrefs, even if animations are allowed */
+	      if (lcName === 'attributename' && stringMatch(value, 'href')) {
 	        _removeAttribute(name, currentNode);
 	        continue;
 	      }
@@ -77427,7 +77438,7 @@ function requireIndex_cjs () {
 	var zxcvbnEnPackage__namespace = /*#__PURE__*/_interopNamespaceDefault(zxcvbnEnPackage);
 
 	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 = '@';
 
@@ -77594,7 +77605,7 @@ function requireIndex_cjs () {
 	};
 
 	const DESCOPE_PREFIX = 'descope';
-	const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
+	const CSS_SELECTOR_SPECIFIER_MULTIPLY = 5;
 	const BASE_THEME_SECTION = 'host';
 
 	const kebabCase = (str) =>
@@ -78038,6 +78049,241 @@ function requireIndex_cjs () {
 	  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
@@ -78100,6 +78346,15 @@ function requireIndex_cjs () {
 	  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;
@@ -78124,11 +78379,22 @@ function requireIndex_cjs () {
 	    // 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',
@@ -78137,7 +78403,12 @@ function requireIndex_cjs () {
 	        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})` : ''}`;
@@ -78171,7 +78442,9 @@ function requireIndex_cjs () {
 	    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]),
+	          }),
 	        {}
 	      ),
 	    });
@@ -78207,99 +78480,6 @@ function requireIndex_cjs () {
 	  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 direction$1 = 'ltr';
 
 	const colors$2 = genColors({
@@ -78769,8 +78949,7 @@ function requireIndex_cjs () {
 
 	// 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('');
+	const createClassSelectorSpecifier$1 = (className, numOfRepeats) => `.${className}`.repeat(numOfRepeats);
 
 	const STYLE_OVERRIDE_ATTR_PREFIX$1 = 'st';
 
@@ -78857,18 +79036,22 @@ function requireIndex_cjs () {
 
 	      #createOverridesStyle() {
 	        if (this.#styleAttributes.length) {
-	          const classSpecifier = createClassSelectorSpecifier$1(
+	          let classSpecifier = createClassSelectorSpecifier$1(
 	            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;
 
@@ -80772,7 +80955,7 @@ function requireIndex_cjs () {
 	// 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('');
+	  `.${className}`.repeat(numOfRepeats);
 
 	const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
 
@@ -80848,10 +81031,16 @@ function requireIndex_cjs () {
 
 	      #createOverridesStyle() {
 	        if (this.#styleAttributes.length) {
-	          const classSpecifier = createClassSelectorSpecifier(
+	          let classSpecifier = createClassSelectorSpecifier(
 	            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);
 	        }
@@ -82274,148 +82463,6 @@ function requireIndex_cjs () {
 	  inputIconColor: { ...inputIcon, property: 'color' },
 	};
 
-	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 componentName$1c = getComponentName$1('text-field');
 
 	const observedAttrs$4 = ['type', 'label-type', 'copy-to-clipboard'];
@@ -84129,7 +84176,8 @@ descope-boolean-field-internal {
 	    },
 	  },
 
-	  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 },
@@ -100800,9 +100848,24 @@ descope-boolean-field-internal {
 	index_cjs$4.getThemeRefs = getThemeRefs;
 	index_cjs$4.getThemeVars = getThemeVars;
 	index_cjs$4.globalsThemeToStyle = globalsThemeToStyle;
+	index_cjs$4.inputFloatingLabelStyle = inputFloatingLabelStyle;
+	index_cjs$4.resetInitialHeight = resetInitialHeight;
+	index_cjs$4.resetInputAutoFill = resetInputAutoFill;
+	index_cjs$4.resetInputContainer = resetInputContainer;
+	index_cjs$4.resetInputCursor = resetInputCursor;
+	index_cjs$4.resetInputElement = resetInputElement;
+	index_cjs$4.resetInputField = resetInputField;
+	index_cjs$4.resetInputFieldDefaultWidth = resetInputFieldDefaultWidth;
+	index_cjs$4.resetInputFieldInvalidBackgroundColor = resetInputFieldInvalidBackgroundColor;
+	index_cjs$4.resetInputFieldUnderlayingBorder = resetInputFieldUnderlayingBorder;
+	index_cjs$4.resetInputLabelPosition = resetInputLabelPosition;
+	index_cjs$4.resetInputOverrides = resetInputOverrides;
+	index_cjs$4.resetInputPlaceholder = resetInputPlaceholder;
+	index_cjs$4.resetInputReadonlyStyle = resetInputReadonlyStyle;
 	index_cjs$4.themeToCSSVarsObj = themeToCSSVarsObj;
 	index_cjs$4.themeToStyle = themeToStyle;
 	index_cjs$4.themeVars = themeVars;
+	index_cjs$4.useHostExternalPadding = useHostExternalPadding;
 	index_cjs$4.useVar = useVar;
 	
 	return index_cjs$4;