@descope/web-components-ui 1.0.160 → 1.0.162

package/dist/index.esm.js

@@ -3127,18 +3127,17 @@ const ComboBoxMixin = (superclass) =>
     // so we override it to open inside the shadow DOM
     #overrideOverlaySettings() {
       const overlay = this.baseElement.shadowRoot.querySelector('vaadin-combo-box-overlay');
-
       overlay._attachOverlay = () => {
-        this.bringToFront();
+        overlay.bringToFront();
       };
-      overlay._detachOverlay = () => {};
-      overlay._enterModalState = () => {};
+      overlay._detachOverlay = () => { };
+      overlay._enterModalState = () => { };
     }
 
     init() {
       super.init?.();
 
-      this.#overrideOverlaySettings.bind(this);
+      this.#overrideOverlaySettings();
       observeChildren(this, this.#onChildrenChange.bind(this));
     }
   };
@@ -5935,7 +5934,7 @@ const globals = {
 const vars$o = getThemeVars(globals);
 
 const globalRefs$b = getThemeRefs(globals);
-const compVars$2 = ButtonClass.cssVarList;
+const compVars$3 = ButtonClass.cssVarList;
 
 const mode = {
   primary: globalRefs$b.colors.primary,
@@ -5945,7 +5944,7 @@ const mode = {
   surface: globalRefs$b.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$r);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$r);
 
 const verticalPaddingRatio = 3;
 const horizontalPaddingRatio = 2;
@@ -5953,88 +5952,88 @@ const horizontalPaddingRatio = 2;
 const button = {
   ...helperTheme$3,
 
-  [compVars$2.fontFamily]: globalRefs$b.fonts.font1.family,
+  [compVars$3.fontFamily]: globalRefs$b.fonts.font1.family,
 
-  [compVars$2.cursor]: 'pointer',
-  [compVars$2.hostHeight]: '3em',
+  [compVars$3.cursor]: 'pointer',
+  [compVars$3.hostHeight]: '3em',
 
-  [compVars$2.borderRadius]: globalRefs$b.radius.sm,
-  [compVars$2.borderWidth]: globalRefs$b.border.xs,
-  [compVars$2.borderStyle]: 'solid',
-  [compVars$2.borderColor]: 'transparent',
+  [compVars$3.borderRadius]: globalRefs$b.radius.sm,
+  [compVars$3.borderWidth]: globalRefs$b.border.xs,
+  [compVars$3.borderStyle]: 'solid',
+  [compVars$3.borderColor]: 'transparent',
 
-  [compVars$2.labelSpacing]: '0.25em',
+  [compVars$3.labelSpacing]: '0.25em',
 
-  [compVars$2.verticalPadding]: `calc(var(${compVars$2.fontSize}) / ${verticalPaddingRatio})`,
-  [compVars$2.horizontalPadding]: `calc(var(${compVars$2.fontSize}) / ${horizontalPaddingRatio})`,
+  [compVars$3.verticalPadding]: `calc(var(${compVars$3.fontSize}) / ${verticalPaddingRatio})`,
+  [compVars$3.horizontalPadding]: `calc(var(${compVars$3.fontSize}) / ${horizontalPaddingRatio})`,
 
-  [compVars$2.outlineWidth]: globals.border.sm,
-  [compVars$2.outlineOffset]: '0px', // keep `px` unit for external calc
-  [compVars$2.outlineStyle]: 'solid',
-  [compVars$2.outlineColor]: 'transparent',
+  [compVars$3.outlineWidth]: globals.border.sm,
+  [compVars$3.outlineOffset]: '0px', // keep `px` unit for external calc
+  [compVars$3.outlineStyle]: 'solid',
+  [compVars$3.outlineColor]: 'transparent',
 
   size: {
-    xs: { [compVars$2.fontSize]: '12px' },
-    sm: { [compVars$2.fontSize]: '14px' },
-    md: { [compVars$2.fontSize]: '16px' },
-    lg: { [compVars$2.fontSize]: '18px' },
+    xs: { [compVars$3.fontSize]: '12px' },
+    sm: { [compVars$3.fontSize]: '14px' },
+    md: { [compVars$3.fontSize]: '16px' },
+    lg: { [compVars$3.fontSize]: '18px' },
   },
 
   _fullWidth: {
-    [compVars$2.hostWidth]: '100%',
+    [compVars$3.hostWidth]: '100%',
   },
 
   _loading: {
-    [compVars$2.cursor]: 'wait',
-    [compVars$2.labelTextColor]: helperRefs$3.main,
+    [compVars$3.cursor]: 'wait',
+    [compVars$3.labelTextColor]: helperRefs$3.main,
   },
 
   variant: {
     contained: {
-      [compVars$2.labelTextColor]: helperRefs$3.contrast,
-      [compVars$2.backgroundColor]: helperRefs$3.main,
+      [compVars$3.labelTextColor]: helperRefs$3.contrast,
+      [compVars$3.backgroundColor]: helperRefs$3.main,
       _hover: {
-        [compVars$2.backgroundColor]: helperRefs$3.dark,
+        [compVars$3.backgroundColor]: helperRefs$3.dark,
         _loading: {
-          [compVars$2.backgroundColor]: helperRefs$3.main,
+          [compVars$3.backgroundColor]: helperRefs$3.main,
         },
       },
       _active: {
-        [compVars$2.backgroundColor]: helperRefs$3.main,
+        [compVars$3.backgroundColor]: helperRefs$3.main,
       },
     },
 
     outline: {
-      [compVars$2.labelTextColor]: helperRefs$3.main,
-      [compVars$2.borderColor]: 'currentColor',
+      [compVars$3.labelTextColor]: helperRefs$3.main,
+      [compVars$3.borderColor]: 'currentColor',
       _hover: {
-        [compVars$2.labelTextColor]: helperRefs$3.dark,
+        [compVars$3.labelTextColor]: helperRefs$3.dark,
       },
       _active: {
-        [compVars$2.labelTextColor]: helperRefs$3.main,
+        [compVars$3.labelTextColor]: helperRefs$3.main,
       },
     },
 
     link: {
-      [compVars$2.labelTextColor]: helperRefs$3.main,
+      [compVars$3.labelTextColor]: helperRefs$3.main,
       _hover: {
-        [compVars$2.labelTextColor]: helperRefs$3.dark,
-        [compVars$2.labelTextDecoration]: 'underline',
+        [compVars$3.labelTextColor]: helperRefs$3.dark,
+        [compVars$3.labelTextDecoration]: 'underline',
       },
       _active: {
-        [compVars$2.labelTextColor]: helperRefs$3.dark,
+        [compVars$3.labelTextColor]: helperRefs$3.dark,
       },
     },
   },
 
   _focused: {
-    [compVars$2.outlineColor]: globalRefs$b.colors.surface.main,
+    [compVars$3.outlineColor]: globalRefs$b.colors.surface.main,
   },
 };
 
 const vars$n = {
-  ...compVars$2,
-  ...helperVars$2,
+  ...compVars$3,
+  ...helperVars$3,
 };
 
 var button$1 = /*#__PURE__*/Object.freeze({
@@ -6395,7 +6394,7 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
 
 const globalRefs$6 = getThemeRefs(globals);
 
-const compVars$1 = ContainerClass.cssVarList;
+const compVars$2 = ContainerClass.cssVarList;
 
 const verticalAlignment = {
   start: { verticalAlignment: 'start' },
@@ -6409,7 +6408,7 @@ const horizontalAlignment = {
   end: { horizontalAlignment: 'end' },
 };
 
-const [helperTheme$2, helperRefs$2, helperVars$1] = createHelperVars(
+const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
   {
     verticalAlignment,
     horizontalAlignment,
@@ -6423,85 +6422,85 @@ const { shadowColor } = helperRefs$2;
 const container = {
   ...helperTheme$2,
 
-  [compVars$1.hostWidth]: '100%',
-  [compVars$1.boxShadow]: 'none',
-  [compVars$1.backgroundColor]: globalRefs$6.colors.surface.light,
-  [compVars$1.color]: globalRefs$6.colors.surface.contrast,
+  [compVars$2.hostWidth]: '100%',
+  [compVars$2.boxShadow]: 'none',
+  [compVars$2.backgroundColor]: globalRefs$6.colors.surface.light,
+  [compVars$2.color]: globalRefs$6.colors.surface.contrast,
 
   verticalPadding: {
-    sm: { [compVars$1.verticalPadding]: '5px' },
-    md: { [compVars$1.verticalPadding]: '10px' },
-    lg: { [compVars$1.verticalPadding]: '20px' },
+    sm: { [compVars$2.verticalPadding]: '5px' },
+    md: { [compVars$2.verticalPadding]: '10px' },
+    lg: { [compVars$2.verticalPadding]: '20px' },
   },
 
   horizontalPadding: {
-    sm: { [compVars$1.horizontalPadding]: '5px' },
-    md: { [compVars$1.horizontalPadding]: '10px' },
-    lg: { [compVars$1.horizontalPadding]: '20px' },
+    sm: { [compVars$2.horizontalPadding]: '5px' },
+    md: { [compVars$2.horizontalPadding]: '10px' },
+    lg: { [compVars$2.horizontalPadding]: '20px' },
   },
 
   direction: {
     row: {
-      [compVars$1.flexDirection]: 'row',
-      [compVars$1.alignItems]: helperRefs$2.verticalAlignment,
-      [compVars$1.justifyContent]: helperRefs$2.horizontalAlignment,
-      [compVars$1.flexWrap]: 'wrap',
+      [compVars$2.flexDirection]: 'row',
+      [compVars$2.alignItems]: helperRefs$2.verticalAlignment,
+      [compVars$2.justifyContent]: helperRefs$2.horizontalAlignment,
+      [compVars$2.flexWrap]: 'wrap',
       horizontalAlignment: {
         spaceBetween: {
-          [helperVars$1.horizontalAlignment]: 'space-between',
+          [helperVars$2.horizontalAlignment]: 'space-between',
         },
       },
     },
     column: {
-      [compVars$1.flexDirection]: 'column',
-      [compVars$1.alignItems]: helperRefs$2.horizontalAlignment,
-      [compVars$1.justifyContent]: helperRefs$2.verticalAlignment,
+      [compVars$2.flexDirection]: 'column',
+      [compVars$2.alignItems]: helperRefs$2.horizontalAlignment,
+      [compVars$2.justifyContent]: helperRefs$2.verticalAlignment,
       verticalAlignment: {
         spaceBetween: {
-          [helperVars$1.verticalAlignment]: 'space-between',
+          [helperVars$2.verticalAlignment]: 'space-between',
         },
       },
     },
   },
 
   spaceBetween: {
-    sm: { [compVars$1.gap]: '10px' },
-    md: { [compVars$1.gap]: '20px' },
-    lg: { [compVars$1.gap]: '30px' },
+    sm: { [compVars$2.gap]: '10px' },
+    md: { [compVars$2.gap]: '20px' },
+    lg: { [compVars$2.gap]: '30px' },
   },
 
   shadow: {
     sm: {
-      [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.sm} ${shadowColor}, ${globalRefs$6.shadow.narrow.sm} ${shadowColor}`,
+      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.sm} ${shadowColor}, ${globalRefs$6.shadow.narrow.sm} ${shadowColor}`,
     },
     md: {
-      [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.md} ${shadowColor}, ${globalRefs$6.shadow.narrow.md} ${shadowColor}`,
+      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.md} ${shadowColor}, ${globalRefs$6.shadow.narrow.md} ${shadowColor}`,
     },
     lg: {
-      [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.lg} ${shadowColor}, ${globalRefs$6.shadow.narrow.lg} ${shadowColor}`,
+      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.lg} ${shadowColor}, ${globalRefs$6.shadow.narrow.lg} ${shadowColor}`,
     },
     xl: {
-      [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
+      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
     },
     '2xl': {
-      [helperVars$1.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide['2xl']} ${shadowColor}`,
+      [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
+      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide['2xl']} ${shadowColor}`,
     },
   },
 
   borderRadius: {
-    sm: { [compVars$1.borderRadius]: globalRefs$6.radius.sm },
-    md: { [compVars$1.borderRadius]: globalRefs$6.radius.md },
-    lg: { [compVars$1.borderRadius]: globalRefs$6.radius.lg },
-    xl: { [compVars$1.borderRadius]: globalRefs$6.radius.xl },
-    '2xl': { [compVars$1.borderRadius]: globalRefs$6.radius['2xl'] },
-    '3xl': { [compVars$1.borderRadius]: globalRefs$6.radius['3xl'] },
+    sm: { [compVars$2.borderRadius]: globalRefs$6.radius.sm },
+    md: { [compVars$2.borderRadius]: globalRefs$6.radius.md },
+    lg: { [compVars$2.borderRadius]: globalRefs$6.radius.lg },
+    xl: { [compVars$2.borderRadius]: globalRefs$6.radius.xl },
+    '2xl': { [compVars$2.borderRadius]: globalRefs$6.radius['2xl'] },
+    '3xl': { [compVars$2.borderRadius]: globalRefs$6.radius['3xl'] },
   },
 };
 
 const vars$e = {
-  ...compVars$1,
-  ...helperVars$1,
+  ...compVars$2,
+  ...helperVars$2,
 };
 
 var container$1 = /*#__PURE__*/Object.freeze({
@@ -6664,9 +6663,9 @@ var link$1 = /*#__PURE__*/Object.freeze({
 });
 
 const globalRefs$3 = getThemeRefs(globals);
-const compVars = DividerClass.cssVarList;
+const compVars$1 = DividerClass.cssVarList;
 
-const [helperTheme$1, helperRefs$1, helperVars] = createHelperVars(
+const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
   {
     thickness: '2px',
     spacing: '10px',
@@ -6677,32 +6676,32 @@ const [helperTheme$1, helperRefs$1, helperVars] = createHelperVars(
 const divider = {
   ...helperTheme$1,
 
-  [compVars.alignItems]: 'center',
-  [compVars.flexDirection]: 'row',
-  [compVars.alignSelf]: 'stretch',
-  [compVars.hostWidth]: '100%',
-  [compVars.stripeColor]: globalRefs$3.colors.surface.main,
-  [compVars.stripeColorOpacity]: '0.5',
-  [compVars.stripeHorizontalThickness]: helperRefs$1.thickness,
-  [compVars.labelTextWidth]: 'fit-content',
-  [compVars.labelTextMaxWidth]: 'calc(100% - 100px)',
-  [compVars.labelTextHorizontalSpacing]: helperRefs$1.spacing,
+  [compVars$1.alignItems]: 'center',
+  [compVars$1.flexDirection]: 'row',
+  [compVars$1.alignSelf]: 'stretch',
+  [compVars$1.hostWidth]: '100%',
+  [compVars$1.stripeColor]: globalRefs$3.colors.surface.main,
+  [compVars$1.stripeColorOpacity]: '0.5',
+  [compVars$1.stripeHorizontalThickness]: helperRefs$1.thickness,
+  [compVars$1.labelTextWidth]: 'fit-content',
+  [compVars$1.labelTextMaxWidth]: 'calc(100% - 100px)',
+  [compVars$1.labelTextHorizontalSpacing]: helperRefs$1.spacing,
 
   _vertical: {
-    [compVars.minHeight]: '200px',
-    [compVars.flexDirection]: 'column',
-    [compVars.hostWidth]: 'fit-content',
-    [compVars.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
-    [compVars.stripeVerticalThickness]: helperRefs$1.thickness,
-    [compVars.labelTextWidth]: 'fit-content',
-    [compVars.labelTextMaxWidth]: '100%',
-    [compVars.labelTextVerticalSpacing]: helperRefs$1.spacing,
+    [compVars$1.minHeight]: '200px',
+    [compVars$1.flexDirection]: 'column',
+    [compVars$1.hostWidth]: 'fit-content',
+    [compVars$1.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
+    [compVars$1.stripeVerticalThickness]: helperRefs$1.thickness,
+    [compVars$1.labelTextWidth]: 'fit-content',
+    [compVars$1.labelTextMaxWidth]: '100%',
+    [compVars$1.labelTextVerticalSpacing]: helperRefs$1.spacing,
   },
 };
 
 const vars$9 = {
-  ...compVars,
-  ...helperVars,
+  ...compVars$1,
+  ...helperVars$1,
 };
 
 var divider$1 = /*#__PURE__*/Object.freeze({
@@ -6786,9 +6785,9 @@ var loaderLinear$1 = /*#__PURE__*/Object.freeze({
 });
 
 const globalRefs$1 = getThemeRefs(globals);
-const vars$6 = LoaderRadialClass.cssVarList;
+const compVars = LoaderRadialClass.cssVarList;
 
-const [helperTheme, helperRefs] = createHelperVars(
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
   {
     spinnerColor: globalRefs$1.colors.surface.contrast,
     mode: {
@@ -6806,29 +6805,33 @@ const [helperTheme, helperRefs] = createHelperVars(
 const loaderRadial = {
   ...helperTheme,
 
-  [vars$6.animationDuration]: '2s',
-  [vars$6.animationTimingFunction]: 'linear',
-  [vars$6.animationIterationCount]: 'infinite',
-  [vars$6.spinnerBorderStyle]: 'solid',
-  [vars$6.spinnerBorderWidth]: '0.2em',
-  [vars$6.spinnerBorderRadius]: '50%',
-  [vars$6.spinnerQuadrant1Color]: helperRefs.spinnerColor,
-  [vars$6.spinnerQuadrant2Color]: 'transparent',
-  [vars$6.spinnerQuadrant3Color]: helperRefs.spinnerColor,
-  [vars$6.spinnerQuadrant4Color]: 'transparent',
+  [compVars.animationDuration]: '2s',
+  [compVars.animationTimingFunction]: 'linear',
+  [compVars.animationIterationCount]: 'infinite',
+  [compVars.spinnerBorderStyle]: 'solid',
+  [compVars.spinnerBorderWidth]: '0.2em',
+  [compVars.spinnerBorderRadius]: '50%',
+  [compVars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
+  [compVars.spinnerQuadrant2Color]: 'transparent',
+  [compVars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
+  [compVars.spinnerQuadrant4Color]: 'transparent',
 
   size: {
-    xs: { [vars$6.spinnerSize]: '20px' },
-    sm: { [vars$6.spinnerSize]: '30px' },
-    md: { [vars$6.spinnerSize]: '40px' },
-    lg: { [vars$6.spinnerSize]: '60px' },
-    xl: { [vars$6.spinnerSize]: '80px' },
+    xs: { [compVars.spinnerSize]: '20px' },
+    sm: { [compVars.spinnerSize]: '30px' },
+    md: { [compVars.spinnerSize]: '40px' },
+    lg: { [compVars.spinnerSize]: '60px' },
+    xl: { [compVars.spinnerSize]: '80px' },
   },
 
   _hidden: {
-    [vars$6.hostDisplay]: 'none',
+    [compVars.hostDisplay]: 'none',
   },
 };
+const vars$6 = {
+  ...compVars,
+  ...helperVars,
+};
 
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,