@descope/web-components-ui 1.0.237 → 1.0.239

package/dist/cjs/index.cjs.js

@@ -2505,15 +2505,15 @@ loadingIndicatorStyles = `
 	}
 `;
 
-const globalRefs$g = getThemeRefs(globals);
+const globalRefs$h = getThemeRefs(globals);
 const compVars$4 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$g.colors.primary,
-  secondary: globalRefs$g.colors.secondary,
-  success: globalRefs$g.colors.success,
-  error: globalRefs$g.colors.error,
-  surface: globalRefs$g.colors.surface,
+  primary: globalRefs$h.colors.primary,
+  secondary: globalRefs$h.colors.secondary,
+  success: globalRefs$h.colors.success,
+  error: globalRefs$h.colors.error,
+  surface: globalRefs$h.colors.surface,
 };
 
 const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$B);
@@ -2521,15 +2521,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
 const button = {
   ...helperTheme$3,
 
-  [compVars$4.fontFamily]: globalRefs$g.fonts.font1.family,
+  [compVars$4.fontFamily]: globalRefs$h.fonts.font1.family,
 
   [compVars$4.cursor]: 'pointer',
   [compVars$4.hostHeight]: '3em',
   [compVars$4.hostWidth]: 'auto',
-  [compVars$4.hostDirection]: globalRefs$g.direction,
+  [compVars$4.hostDirection]: globalRefs$h.direction,
 
-  [compVars$4.borderRadius]: globalRefs$g.radius.sm,
-  [compVars$4.borderWidth]: globalRefs$g.border.xs,
+  [compVars$4.borderRadius]: globalRefs$h.radius.sm,
+  [compVars$4.borderWidth]: globalRefs$h.border.xs,
   [compVars$4.borderStyle]: 'solid',
   [compVars$4.borderColor]: 'transparent',
 
@@ -2565,10 +2565,10 @@ const button = {
   },
 
   _disabled: {
-    [helperVars$3.main]: globalRefs$g.colors.surface.main,
-    [helperVars$3.dark]: globalRefs$g.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$g.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$g.colors.surface.contrast,
+    [helperVars$3.main]: globalRefs$h.colors.surface.main,
+    [helperVars$3.dark]: globalRefs$h.colors.surface.dark,
+    [helperVars$3.light]: globalRefs$h.colors.surface.light,
+    [helperVars$3.contrast]: globalRefs$h.colors.surface.contrast,
   },
 
   variant: {
@@ -2610,7 +2610,7 @@ const button = {
   },
 
   _focused: {
-    [compVars$4.outlineColor]: globalRefs$g.colors.surface.main,
+    [compVars$4.outlineColor]: globalRefs$h.colors.surface.main,
   },
 };
 
@@ -2864,21 +2864,21 @@ const TextFieldClass = compose(
 );
 
 const componentName$z = getComponentName('input-wrapper');
-const globalRefs$f = getThemeRefs(globals);
+const globalRefs$g = getThemeRefs(globals);
 
 const [theme$1, refs, vars$t] = createHelperVars(
   {
-    labelTextColor: globalRefs$f.colors.surface.contrast,
-    valueTextColor: globalRefs$f.colors.surface.contrast,
-    placeholderTextColor: globalRefs$f.colors.surface.main,
+    labelTextColor: globalRefs$g.colors.surface.contrast,
+    valueTextColor: globalRefs$g.colors.surface.contrast,
+    placeholderTextColor: globalRefs$g.colors.surface.main,
     requiredIndicator: "'*'",
-    errorMessageTextColor: globalRefs$f.colors.error.main,
+    errorMessageTextColor: globalRefs$g.colors.error.main,
 
-    borderWidth: globalRefs$f.border.xs,
-    borderRadius: globalRefs$f.radius.xs,
+    borderWidth: globalRefs$g.border.xs,
+    borderRadius: globalRefs$g.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$f.border.sm,
+    outlineWidth: globalRefs$g.border.sm,
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -2889,11 +2889,11 @@ const [theme$1, refs, vars$t] = createHelperVars(
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$f.colors.surface.light,
+    backgroundColor: globalRefs$g.colors.surface.light,
 
-    fontFamily: globalRefs$f.fonts.font1.family,
+    fontFamily: globalRefs$g.fonts.font1.family,
 
-    direction: globalRefs$f.direction,
+    direction: globalRefs$g.direction,
 
     size: {
       xs: { fontSize: '12px' },
@@ -2907,27 +2907,27 @@ const [theme$1, refs, vars$t] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$f.colors.surface.main,
+      outlineColor: globalRefs$g.colors.surface.main,
       _invalid: {
-        outlineColor: globalRefs$f.colors.error.main,
+        outlineColor: globalRefs$g.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$f.border.xs,
-      borderColor: globalRefs$f.colors.surface.main,
+      outlineWidth: globalRefs$g.border.xs,
+      borderColor: globalRefs$g.colors.surface.main,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$f.colors.error.main,
+        borderColor: globalRefs$g.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$f.colors.surface.main,
-      borderColor: globalRefs$f.colors.surface.main,
-      valueTextColor: globalRefs$f.colors.surface.dark,
-      placeholderTextColor: globalRefs$f.colors.surface.dark,
-      backgroundColor: globalRefs$f.colors.surface.main,
+      labelTextColor: globalRefs$g.colors.surface.main,
+      borderColor: globalRefs$g.colors.surface.main,
+      valueTextColor: globalRefs$g.colors.surface.dark,
+      placeholderTextColor: globalRefs$g.colors.surface.dark,
+      backgroundColor: globalRefs$g.colors.surface.main,
     },
   },
   componentName$z
@@ -3142,7 +3142,7 @@ const PasswordClass = compose(
   })
 );
 
-const globalRefs$e = getThemeRefs(globals);
+const globalRefs$f = getThemeRefs(globals);
 const vars$r = PasswordClass.cssVarList;
 
 const password = {
@@ -3166,7 +3166,7 @@ const password = {
   [vars$r.inputOutlineStyle]: refs.outlineStyle,
   [vars$r.inputOutlineColor]: refs.outlineColor,
   [vars$r.inputOutlineOffset]: refs.outlineOffset,
-  [vars$r.revealButtonOffset]: globalRefs$e.spacing.md,
+  [vars$r.revealButtonOffset]: globalRefs$f.spacing.md,
   [vars$r.revealButtonSize]: refs.toggleButtonSize,
 };
 
@@ -3388,7 +3388,7 @@ const TextAreaClass = compose(
   })
 );
 
-const globalRefs$d = getThemeRefs(globals);
+const globalRefs$e = getThemeRefs(globals);
 const vars$o = TextAreaClass.cssVarList;
 
 const textArea = {
@@ -3415,7 +3415,7 @@ const textArea = {
   [vars$o.inputMinHeight]: '5em',
 
   _disabled: {
-    [vars$o.inputBackgroundColor]: globalRefs$d.colors.surface.light,
+    [vars$o.inputBackgroundColor]: globalRefs$e.colors.surface.light,
   },
 
   _readonly: {
@@ -3814,7 +3814,7 @@ const SwitchToggleClass = compose(
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 
-const globalRefs$c = getThemeRefs(globals);
+const globalRefs$d = getThemeRefs(globals);
 const vars$m = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
@@ -3832,7 +3832,7 @@ const switchToggle = {
   [vars$m.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
   [vars$m.trackBorderColor]: refs.borderColor,
   [vars$m.trackBackgroundColor]: 'none',
-  [vars$m.trackBorderRadius]: globalRefs$c.radius.md,
+  [vars$m.trackBorderRadius]: globalRefs$d.radius.md,
   [vars$m.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
   [vars$m.trackHeight]: checkboxHeight,
 
@@ -3859,19 +3859,19 @@ const switchToggle = {
   },
 
   _disabled: {
-    [vars$m.knobColor]: globalRefs$c.colors.surface.light,
-    [vars$m.trackBorderColor]: globalRefs$c.colors.surface.main,
-    [vars$m.trackBackgroundColor]: globalRefs$c.colors.surface.main,
+    [vars$m.knobColor]: globalRefs$d.colors.surface.light,
+    [vars$m.trackBorderColor]: globalRefs$d.colors.surface.main,
+    [vars$m.trackBackgroundColor]: globalRefs$d.colors.surface.main,
     [vars$m.labelTextColor]: refs.labelTextColor,
     _checked: {
-      [vars$m.knobColor]: globalRefs$c.colors.surface.light,
-      [vars$m.trackBackgroundColor]: globalRefs$c.colors.surface.main,
+      [vars$m.knobColor]: globalRefs$d.colors.surface.light,
+      [vars$m.trackBackgroundColor]: globalRefs$d.colors.surface.main,
     },
   },
 
   _invalid: {
-    [vars$m.trackBorderColor]: globalRefs$c.colors.error.main,
-    [vars$m.knobColor]: globalRefs$c.colors.error.main,
+    [vars$m.trackBorderColor]: globalRefs$d.colors.error.main,
+    [vars$m.knobColor]: globalRefs$d.colors.error.main,
   },
 };
 
@@ -3935,7 +3935,7 @@ const ContainerClass = compose(
   componentNameValidationMixin
 )(RawContainer);
 
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$c = getThemeRefs(globals);
 
 const compVars$3 = ContainerClass.cssVarList;
 
@@ -3967,8 +3967,8 @@ const container = {
 
   [compVars$3.hostWidth]: '100%',
   [compVars$3.boxShadow]: 'none',
-  [compVars$3.backgroundColor]: globalRefs$b.colors.surface.light,
-  [compVars$3.color]: globalRefs$b.colors.surface.contrast,
+  [compVars$3.backgroundColor]: globalRefs$c.colors.surface.light,
+  [compVars$3.color]: globalRefs$c.colors.surface.contrast,
   [compVars$3.borderRadius]: '0px',
 
   verticalPadding: {
@@ -4015,30 +4015,30 @@ const container = {
 
   shadow: {
     sm: {
-      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.sm} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.sm} ${shadowColor$1}`,
     },
     md: {
-      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.md} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.md} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.md} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.md} ${shadowColor$1}`,
     },
     lg: {
-      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.lg} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.lg} ${shadowColor$1}`,
     },
     xl: {
-      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$b.shadow.narrow.xl} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.xl} ${shadowColor$1}`,
     },
     '2xl': {
       [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$3.boxShadow]: `${globalRefs$b.shadow.wide['2xl']} ${shadowColor$1}`,
+      [compVars$3.boxShadow]: `${globalRefs$c.shadow.wide['2xl']} ${shadowColor$1}`,
     },
   },
 
   borderRadius: {
-    sm: { [compVars$3.borderRadius]: globalRefs$b.radius.sm },
-    md: { [compVars$3.borderRadius]: globalRefs$b.radius.md },
-    lg: { [compVars$3.borderRadius]: globalRefs$b.radius.lg },
-    xl: { [compVars$3.borderRadius]: globalRefs$b.radius.xl },
-    '2xl': { [compVars$3.borderRadius]: globalRefs$b.radius['2xl'] },
-    '3xl': { [compVars$3.borderRadius]: globalRefs$b.radius['3xl'] },
+    sm: { [compVars$3.borderRadius]: globalRefs$c.radius.sm },
+    md: { [compVars$3.borderRadius]: globalRefs$c.radius.md },
+    lg: { [compVars$3.borderRadius]: globalRefs$c.radius.lg },
+    xl: { [compVars$3.borderRadius]: globalRefs$c.radius.xl },
+    '2xl': { [compVars$3.borderRadius]: globalRefs$c.radius['2xl'] },
+    '3xl': { [compVars$3.borderRadius]: globalRefs$c.radius['3xl'] },
   },
 };
 
@@ -4207,64 +4207,64 @@ const TextClass = compose(
   customTextMixin
 )(RawText);
 
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$b = getThemeRefs(globals);
 const vars$i = TextClass.cssVarList;
 
 const text$2 = {
-  [vars$i.hostDirection]: globalRefs$a.direction,
+  [vars$i.hostDirection]: globalRefs$b.direction,
   [vars$i.textLineHeight]: '1.35em',
   [vars$i.textAlign]: 'left',
-  [vars$i.textColor]: globalRefs$a.colors.surface.dark,
+  [vars$i.textColor]: globalRefs$b.colors.surface.dark,
   variant: {
     h1: {
-      [vars$i.fontSize]: globalRefs$a.typography.h1.size,
-      [vars$i.fontWeight]: globalRefs$a.typography.h1.weight,
-      [vars$i.fontFamily]: globalRefs$a.typography.h1.font,
+      [vars$i.fontSize]: globalRefs$b.typography.h1.size,
+      [vars$i.fontWeight]: globalRefs$b.typography.h1.weight,
+      [vars$i.fontFamily]: globalRefs$b.typography.h1.font,
     },
     h2: {
-      [vars$i.fontSize]: globalRefs$a.typography.h2.size,
-      [vars$i.fontWeight]: globalRefs$a.typography.h2.weight,
-      [vars$i.fontFamily]: globalRefs$a.typography.h2.font,
+      [vars$i.fontSize]: globalRefs$b.typography.h2.size,
+      [vars$i.fontWeight]: globalRefs$b.typography.h2.weight,
+      [vars$i.fontFamily]: globalRefs$b.typography.h2.font,
     },
     h3: {
-      [vars$i.fontSize]: globalRefs$a.typography.h3.size,
-      [vars$i.fontWeight]: globalRefs$a.typography.h3.weight,
-      [vars$i.fontFamily]: globalRefs$a.typography.h3.font,
+      [vars$i.fontSize]: globalRefs$b.typography.h3.size,
+      [vars$i.fontWeight]: globalRefs$b.typography.h3.weight,
+      [vars$i.fontFamily]: globalRefs$b.typography.h3.font,
     },
     subtitle1: {
-      [vars$i.fontSize]: globalRefs$a.typography.subtitle1.size,
-      [vars$i.fontWeight]: globalRefs$a.typography.subtitle1.weight,
-      [vars$i.fontFamily]: globalRefs$a.typography.subtitle1.font,
+      [vars$i.fontSize]: globalRefs$b.typography.subtitle1.size,
+      [vars$i.fontWeight]: globalRefs$b.typography.subtitle1.weight,
+      [vars$i.fontFamily]: globalRefs$b.typography.subtitle1.font,
     },
     subtitle2: {
-      [vars$i.fontSize]: globalRefs$a.typography.subtitle2.size,
-      [vars$i.fontWeight]: globalRefs$a.typography.subtitle2.weight,
-      [vars$i.fontFamily]: globalRefs$a.typography.subtitle2.font,
+      [vars$i.fontSize]: globalRefs$b.typography.subtitle2.size,
+      [vars$i.fontWeight]: globalRefs$b.typography.subtitle2.weight,
+      [vars$i.fontFamily]: globalRefs$b.typography.subtitle2.font,
     },
     body1: {
-      [vars$i.fontSize]: globalRefs$a.typography.body1.size,
-      [vars$i.fontWeight]: globalRefs$a.typography.body1.weight,
-      [vars$i.fontFamily]: globalRefs$a.typography.body1.font,
+      [vars$i.fontSize]: globalRefs$b.typography.body1.size,
+      [vars$i.fontWeight]: globalRefs$b.typography.body1.weight,
+      [vars$i.fontFamily]: globalRefs$b.typography.body1.font,
     },
     body2: {
-      [vars$i.fontSize]: globalRefs$a.typography.body2.size,
-      [vars$i.fontWeight]: globalRefs$a.typography.body2.weight,
-      [vars$i.fontFamily]: globalRefs$a.typography.body2.font,
+      [vars$i.fontSize]: globalRefs$b.typography.body2.size,
+      [vars$i.fontWeight]: globalRefs$b.typography.body2.weight,
+      [vars$i.fontFamily]: globalRefs$b.typography.body2.font,
     },
   },
 
   mode: {
     primary: {
-      [vars$i.textColor]: globalRefs$a.colors.primary.main,
+      [vars$i.textColor]: globalRefs$b.colors.primary.main,
     },
     secondary: {
-      [vars$i.textColor]: globalRefs$a.colors.secondary.main,
+      [vars$i.textColor]: globalRefs$b.colors.secondary.main,
     },
     error: {
-      [vars$i.textColor]: globalRefs$a.colors.error.main,
+      [vars$i.textColor]: globalRefs$b.colors.error.main,
     },
     success: {
-      [vars$i.textColor]: globalRefs$a.colors.success.main,
+      [vars$i.textColor]: globalRefs$b.colors.success.main,
     },
   },
 
@@ -4364,14 +4364,14 @@ const LinkClass = compose(
   componentNameValidationMixin
 )(RawLink);
 
-const globalRefs$9 = getThemeRefs(globals);
+const globalRefs$a = getThemeRefs(globals);
 const vars$h = LinkClass.cssVarList;
 
 const link = {
-  [vars$h.hostDirection]: globalRefs$9.direction,
+  [vars$h.hostDirection]: globalRefs$a.direction,
   [vars$h.cursor]: 'pointer',
 
-  [vars$h.textColor]: globalRefs$9.colors.primary.main,
+  [vars$h.textColor]: globalRefs$a.colors.primary.main,
 
   textAlign: {
     right: { [vars$h.textAlign]: 'right' },
@@ -4385,16 +4385,16 @@ const link = {
 
   mode: {
     primary: {
-      [vars$h.textColor]: globalRefs$9.colors.primary.main,
+      [vars$h.textColor]: globalRefs$a.colors.primary.main,
     },
     secondary: {
-      [vars$h.textColor]: globalRefs$9.colors.secondary.main,
+      [vars$h.textColor]: globalRefs$a.colors.secondary.main,
     },
     error: {
-      [vars$h.textColor]: globalRefs$9.colors.error.main,
+      [vars$h.textColor]: globalRefs$a.colors.error.main,
     },
     success: {
-      [vars$h.textColor]: globalRefs$9.colors.success.main,
+      [vars$h.textColor]: globalRefs$a.colors.success.main,
     },
   },
 };
@@ -4505,7 +4505,7 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
-const globalRefs$8 = getThemeRefs(globals);
+const globalRefs$9 = getThemeRefs(globals);
 const compVars$2 = DividerClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -4519,12 +4519,12 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
 const divider = {
   ...helperTheme$1,
 
-  [compVars$2.hostDirection]: globalRefs$8.direction,
+  [compVars$2.hostDirection]: globalRefs$9.direction,
   [compVars$2.alignItems]: 'center',
   [compVars$2.flexDirection]: 'row',
   [compVars$2.alignSelf]: 'stretch',
   [compVars$2.hostWidth]: '100%',
-  [compVars$2.stripeColor]: globalRefs$8.colors.surface.main,
+  [compVars$2.stripeColor]: globalRefs$9.colors.surface.main,
   [compVars$2.stripeColorOpacity]: '0.5',
   [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
   [compVars$2.labelTextWidth]: 'fit-content',
@@ -4829,17 +4829,17 @@ const LoaderLinearClass = compose(
   componentNameValidationMixin
 )(RawLoaderLinear);
 
-const globalRefs$7 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 const vars$e = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
   [vars$e.hostDisplay]: 'inline-block',
   [vars$e.hostWidth]: '100%',
 
-  [vars$e.barColor]: globalRefs$7.colors.surface.contrast,
+  [vars$e.barColor]: globalRefs$8.colors.surface.contrast,
   [vars$e.barWidth]: '20%',
 
-  [vars$e.barBackgroundColor]: globalRefs$7.colors.surface.main,
+  [vars$e.barBackgroundColor]: globalRefs$8.colors.surface.main,
   [vars$e.barBorderRadius]: '4px',
 
   [vars$e.animationDuration]: '2s',
@@ -4856,10 +4856,10 @@ const loaderLinear = {
 
   mode: {
     primary: {
-      [vars$e.barColor]: globalRefs$7.colors.primary.main,
+      [vars$e.barColor]: globalRefs$8.colors.primary.main,
     },
     secondary: {
-      [vars$e.barColor]: globalRefs$7.colors.secondary.main,
+      [vars$e.barColor]: globalRefs$8.colors.secondary.main,
     },
   },
 
@@ -4920,18 +4920,18 @@ const LoaderRadialClass = compose(
   componentNameValidationMixin
 )(RawLoaderRadial);
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$7 = getThemeRefs(globals);
 const compVars$1 = LoaderRadialClass.cssVarList;
 
 const [helperTheme, helperRefs, helperVars] = createHelperVars(
   {
-    spinnerColor: globalRefs$6.colors.surface.contrast,
+    spinnerColor: globalRefs$7.colors.surface.contrast,
     mode: {
       primary: {
-        spinnerColor: globalRefs$6.colors.primary.main,
+        spinnerColor: globalRefs$7.colors.primary.main,
       },
       secondary: {
-        spinnerColor: globalRefs$6.colors.secondary.main,
+        spinnerColor: globalRefs$7.colors.secondary.main,
       },
     },
   },
@@ -5344,7 +5344,7 @@ const ComboBoxClass = compose(
   })
 );
 
-const globalRefs$5 = getThemeRefs(globals);
+const globalRefs$6 = getThemeRefs(globals);
 const vars$c = ComboBoxClass.cssVarList;
 
 const comboBox = {
@@ -5368,12 +5368,12 @@ const comboBox = {
   [vars$c.inputBackgroundColor]: refs.backgroundColor,
   [vars$c.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$c.inputHeight]: refs.inputHeight,
-  [vars$c.inputDropdownButtonColor]: globalRefs$5.colors.surface.contrast,
+  [vars$c.inputDropdownButtonColor]: globalRefs$6.colors.surface.contrast,
   [vars$c.inputDropdownButtonCursor]: 'pointer',
   [vars$c.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$c.inputDropdownButtonOffset]: globalRefs$5.spacing.xs,
-  [vars$c.overlayItemPaddingInlineStart]: globalRefs$5.spacing.xs,
-  [vars$c.overlayItemPaddingInlineEnd]: globalRefs$5.spacing.lg,
+  [vars$c.inputDropdownButtonOffset]: globalRefs$6.spacing.xs,
+  [vars$c.overlayItemPaddingInlineStart]: globalRefs$6.spacing.xs,
+  [vars$c.overlayItemPaddingInlineEnd]: globalRefs$6.spacing.lg,
 
   _readonly: {
     [vars$c.inputDropdownButtonCursor]: 'default',
@@ -7692,26 +7692,26 @@ const ButtonSelectionGroupItemClass = compose(
   componentNameValidationMixin
 )(RawSelectItem);
 
-const globalRefs$4 = getThemeRefs(globals);
+const globalRefs$5 = getThemeRefs(globals);
 
 const vars$6 = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
   [vars$6.hostDirection]: 'inherit',
-  [vars$6.backgroundColor]: globalRefs$4.colors.surface.light,
-  [vars$6.labelTextColor]: globalRefs$4.colors.surface.contrast,
-  [vars$6.borderColor]: globalRefs$4.colors.surface.main,
+  [vars$6.backgroundColor]: globalRefs$5.colors.surface.light,
+  [vars$6.labelTextColor]: globalRefs$5.colors.surface.contrast,
+  [vars$6.borderColor]: globalRefs$5.colors.surface.main,
   [vars$6.borderStyle]: 'solid',
-  [vars$6.borderRadius]: globalRefs$4.radius.sm,
+  [vars$6.borderRadius]: globalRefs$5.radius.sm,
 
   _hover: {
     [vars$6.backgroundColor]: '#f4f5f5', // can we take it from the palette?
   },
 
   _selected: {
-    [vars$6.borderColor]: globalRefs$4.colors.surface.contrast,
-    [vars$6.backgroundColor]: globalRefs$4.colors.surface.contrast,
-    [vars$6.labelTextColor]: globalRefs$4.colors.surface.light,
+    [vars$6.borderColor]: globalRefs$5.colors.surface.contrast,
+    [vars$6.backgroundColor]: globalRefs$5.colors.surface.contrast,
+    [vars$6.labelTextColor]: globalRefs$5.colors.surface.light,
   },
 };
 
@@ -8056,7 +8056,7 @@ const ButtonSelectionGroupClass = compose(
   })
 );
 
-const globalRefs$3 = getThemeRefs(globals);
+const globalRefs$4 = getThemeRefs(globals);
 const vars$5 = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
@@ -8065,7 +8065,7 @@ const buttonSelectionGroup = {
   [vars$5.labelTextColor]: refs.labelTextColor,
   [vars$5.labelRequiredIndicator]: refs.requiredIndicator,
   [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$5.itemsSpacing]: globalRefs$3.spacing.sm,
+  [vars$5.itemsSpacing]: globalRefs$4.spacing.sm,
   [vars$5.hostWidth]: refs.width,
 };
 
@@ -8153,7 +8153,10 @@ const ModalClass = compose(
         property: 'display',
         important: true,
       },
-      backgroundColor: { selector: () => '::part(content)', property: 'background-color' },
+      backgroundColor: [
+        { selector: () => '::part(content)', property: 'background-color' },
+        { selector: () => '::part(overlay)', property: 'background-color' },
+      ],
       width: { selector: () => '::part(overlay)', property: 'width' },
       shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
     },
@@ -8175,9 +8178,12 @@ const ModalClass = compose(
   })
 );
 
+const globalRefs$3 = getThemeRefs(globals);
+
 const compVars = ModalClass.cssVarList;
 
 const modal = {
+  [compVars.overlayBackgroundColor]: globalRefs$3.colors.surface.light,
   [compVars.overlayShadow]: 'none',
   [compVars.overlayWidth]: '700px',
 };
@@ -8364,6 +8370,7 @@ const GridMixin = (superclass) =>
 const {
   host,
   headerRow,
+  headerRowCell,
   contentRow,
   firstRow,
   sortIndicators,
@@ -8374,6 +8381,7 @@ const {
 } = {
   host: { selector: () => 'vaadin-grid' },
   headerRow: { selector: () => '::part(header-cell)' },
+  headerRowCell: { selector: () => 'vaadin-grid::part(header-cell)' },
   contentRow: { selector: () => '::part(cell)' },
   firstRow: { selector: () => '::part(first-header-row-cell)' },
   selectedRow: { selector: () => '::part(selected-row-cell)' },
@@ -8394,6 +8402,10 @@ const GridClass = compose(
       fontSize: [{ ...headerRow }, { ...contentRow }],
       fontWeight: { ...contentRow },
       valueTextColor: { ...contentRow, property: 'color' },
+      backgroundColor: [
+        { ...host, property: 'background-color' },
+        { ...contentRow, property: 'background-color' },
+      ],
       sortIndicatorsColor: { ...sortIndicators, property: 'color' },
       activeSortIndicator: { ...activeSortIndicator, property: 'color' },
       inputBorderColor: { ...host, property: 'border-color' },
@@ -8402,6 +8414,7 @@ const GridClass = compose(
       inputBorderRadius: { ...host, property: 'border-radius' },
       selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
       selectedTextColor: { ...selectedRow, property: 'color' },
+      headerRowTextColor: { ...headerRowCell, property: 'color' },
       separatorColor: [
         { ...firstRow, property: 'border-bottom-color' },
         { ...rowSeparator, property: 'border-top-color' },
@@ -8438,12 +8451,13 @@ const grid = {
   [vars$3.hostWidth]: '100%',
   [vars$3.hostHeight]: '100%',
   [vars$3.hostMinHeight]: '400px',
+  [vars$3.backgroundColor]: globalRefs$2.colors.surface.light,
 
   [vars$3.fontSize]: refs.fontSize,
   [vars$3.fontFamily]: refs.fontFamily,
 
-  [vars$3.sortIndicatorsColor]: globalRefs$2.colors.primary.main,
-  [vars$3.activeSortIndicator]: globalRefs$2.colors.primary.main,
+  [vars$3.sortIndicatorsColor]: globalRefs$2.colors.surface.main,
+  [vars$3.activeSortIndicator]: globalRefs$2.colors.surface.dark,
   [vars$3.resizeHandleColor]: globalRefs$2.colors.surface.main,
 
   [vars$3.inputBorderWidth]: refs.borderWidth,
@@ -8451,11 +8465,11 @@ const grid = {
   [vars$3.inputBorderRadius]: refs.borderRadius,
   [vars$3.inputBorderColor]: 'transparent',
 
-  [vars$3.separatorColor]: refs.borderColor,
+  [vars$3.headerRowTextColor]: globalRefs$2.colors.surface.dark,
+  [vars$3.separatorColor]: globalRefs$2.colors.surface.main,
 
   [vars$3.valueTextColor]: globalRefs$2.colors.surface.contrast,
-  [vars$3.selectedBackgroundColor]: globalRefs$2.colors.primary.main,
-  [vars$3.selectedTextColor]: globalRefs$2.colors.primary.contrast,
+  [vars$3.selectedBackgroundColor]: globalRefs$2.colors.primary.contrast,
 
   _bordered: {
     [vars$3.inputBorderColor]: refs.borderColor,
@@ -8593,9 +8607,9 @@ const notification = {
   [vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
   [vars$2.textColor]: globalRefs$1.colors.surface.contrast,
   [vars$2.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${shadowColor}`,
-  [vars$2.verticalPadding]: '0.45em',
-  [vars$2.horizontalPadding]: '1em',
-  [vars$2.borderRadius]: globalRefs$1.radius.md,
+  [vars$2.verticalPadding]: '0.625em',
+  [vars$2.horizontalPadding]: '1.5em',
+  [vars$2.borderRadius]: globalRefs$1.radius.xs,
 
   _bordered: {
     [vars$2.borderWidth]: globalRefs$1.border.sm,
@@ -8701,7 +8715,7 @@ const badge = {
   [vars$1.horizontalPadding]: '0.5em',
 
   [vars$1.borderWidth]: globalRefs.border.xs,
-  [vars$1.borderRadius]: globalRefs.radius.sm,
+  [vars$1.borderRadius]: globalRefs.radius.xs,
   [vars$1.borderColor]: 'transparent',
   [vars$1.borderStyle]: 'solid',
 
@@ -8736,9 +8750,9 @@ const badge = {
       },
     },
     error: {
-      [vars$1.borderColor]: globalRefs.colors.error.light,
+      [vars$1.textColor]: globalRefs.colors.error.main,
       _bordered: {
-        [vars$1.textColor]: globalRefs.colors.error.main,
+        [vars$1.borderColor]: globalRefs.colors.error.light,
       },
     },
     success: {