@descope/web-components-ui 1.0.223 → 1.0.224

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. package/dist/cjs/index.cjs.js +892 -627
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +982 -610
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/1000.js +1 -1
  6. package/dist/umd/1037.js +1 -1
  7. package/dist/umd/1419.js +360 -0
  8. package/dist/umd/1419.js.LICENSE.txt +23 -0
  9. package/dist/umd/1932.js +1 -1
  10. package/dist/umd/1990.js +2 -2
  11. package/dist/umd/2066.js +2 -0
  12. package/dist/umd/2066.js.LICENSE.txt +5 -0
  13. package/dist/umd/2873.js +738 -0
  14. package/dist/umd/2873.js.LICENSE.txt +21 -0
  15. package/dist/umd/3003.js +2 -0
  16. package/dist/umd/3003.js.LICENSE.txt +9 -0
  17. package/dist/umd/{9515.js → 3092.js} +88 -88
  18. package/dist/umd/3660.js +2 -2
  19. package/dist/umd/422.js +1 -1
  20. package/dist/umd/4222.js +2 -0
  21. package/dist/umd/{7196.js.LICENSE.txt → 4222.js.LICENSE.txt} +0 -18
  22. package/dist/umd/4447.js +2 -1
  23. package/dist/umd/4447.js.LICENSE.txt +5 -0
  24. package/dist/umd/4567.js +1 -0
  25. package/dist/umd/4746.js +123 -0
  26. package/dist/umd/4905.js +2 -0
  27. package/dist/umd/4905.js.LICENSE.txt +5 -0
  28. package/dist/umd/5977.js +289 -0
  29. package/dist/umd/5977.js.LICENSE.txt +17 -0
  30. package/dist/umd/6551.js +1 -0
  31. package/dist/umd/{7101.js → 6770.js} +5 -5
  32. package/dist/umd/{6116.js → 7514.js} +2 -2
  33. package/dist/umd/9189.js +2 -0
  34. package/dist/umd/9189.js.LICENSE.txt +5 -0
  35. package/dist/umd/9629.js +2 -0
  36. package/dist/umd/9629.js.LICENSE.txt +5 -0
  37. package/dist/umd/9671.js +1 -0
  38. package/dist/umd/9680.js +2 -0
  39. package/dist/umd/9680.js.LICENSE.txt +5 -0
  40. package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
  41. package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
  42. package/dist/umd/descope-combo-box-index-js.js +1 -1
  43. package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -0
  44. package/dist/umd/descope-grid-descope-grid-status-column-index-js.js +1 -0
  45. package/dist/umd/descope-grid-descope-grid-text-column-index-js.js +1 -0
  46. package/dist/umd/descope-grid-index-js.js +1 -0
  47. package/dist/umd/descope-text-area-index-js.js +1 -1
  48. package/dist/umd/index.js +1 -1
  49. package/package.json +2 -1
  50. package/src/components/descope-grid/GridClass.js +226 -0
  51. package/src/components/descope-grid/descope-grid-selection-column/index.js +68 -0
  52. package/src/components/descope-grid/descope-grid-status-column/index.js +34 -0
  53. package/src/components/descope-grid/descope-grid-text-column/index.js +11 -0
  54. package/src/components/descope-grid/helpers.js +9 -0
  55. package/src/components/descope-grid/index.js +10 -0
  56. package/src/index.js +1 -0
  57. package/src/theme/components/grid.js +38 -0
  58. package/src/theme/components/index.js +2 -0
  59. package/dist/umd/3952.js +0 -123
  60. package/dist/umd/4273.js +0 -289
  61. package/dist/umd/4273.js.LICENSE.txt +0 -33
  62. package/dist/umd/7196.js +0 -360
  63. /package/dist/umd/{7101.js.LICENSE.txt → 3092.js.LICENSE.txt} +0 -0
  64. /package/dist/umd/{3952.js.LICENSE.txt → 4746.js.LICENSE.txt} +0 -0
  65. /package/dist/umd/{9515.js.LICENSE.txt → 6770.js.LICENSE.txt} +0 -0
  66. /package/dist/umd/{6116.js.LICENSE.txt → 7514.js.LICENSE.txt} +0 -0
@@ -496,7 +496,7 @@ const globals = {
496
496
  shadow,
497
497
  fonts,
498
498
  };
499
- const vars$s = getThemeVars(globals);
499
+ const vars$t = getThemeVars(globals);
500
500
 
501
501
  const createCssVarFallback = (first, ...rest) =>
502
502
  `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
@@ -2362,7 +2362,7 @@ const clickableMixin = (superclass) =>
2362
2362
  }
2363
2363
  };
2364
2364
 
2365
- const componentName$x = getComponentName('button');
2365
+ const componentName$y = getComponentName('button');
2366
2366
 
2367
2367
  const resetStyles = `
2368
2368
  :host {
@@ -2400,7 +2400,7 @@ const iconStyles = `
2400
2400
 
2401
2401
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
2402
2402
 
2403
- const { host: host$f, label: label$9 } = {
2403
+ const { host: host$g, label: label$9 } = {
2404
2404
  host: { selector: () => ':host' },
2405
2405
  label: { selector: '::part(label)' },
2406
2406
  };
@@ -2410,7 +2410,7 @@ let loadingIndicatorStyles;
2410
2410
  const ButtonClass = compose(
2411
2411
  createStyleMixin({
2412
2412
  mappings: {
2413
- hostWidth: { ...host$f, property: 'width' },
2413
+ hostWidth: { ...host$g, property: 'width' },
2414
2414
  hostHeight: { property: 'height' },
2415
2415
  fontSize: {},
2416
2416
  fontFamily: {},
@@ -2459,7 +2459,7 @@ const ButtonClass = compose(
2459
2459
  }
2460
2460
  `,
2461
2461
  excludeAttrsSync: ['tabindex'],
2462
- componentName: componentName$x,
2462
+ componentName: componentName$y,
2463
2463
  })
2464
2464
  );
2465
2465
 
@@ -2496,30 +2496,30 @@ loadingIndicatorStyles = `
2496
2496
  }
2497
2497
  `;
2498
2498
 
2499
- const globalRefs$d = getThemeRefs(globals);
2499
+ const globalRefs$e = getThemeRefs(globals);
2500
2500
  const compVars$4 = ButtonClass.cssVarList;
2501
2501
 
2502
2502
  const mode = {
2503
- primary: globalRefs$d.colors.primary,
2504
- secondary: globalRefs$d.colors.secondary,
2505
- success: globalRefs$d.colors.success,
2506
- error: globalRefs$d.colors.error,
2507
- surface: globalRefs$d.colors.surface,
2503
+ primary: globalRefs$e.colors.primary,
2504
+ secondary: globalRefs$e.colors.secondary,
2505
+ success: globalRefs$e.colors.success,
2506
+ error: globalRefs$e.colors.error,
2507
+ surface: globalRefs$e.colors.surface,
2508
2508
  };
2509
2509
 
2510
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$x);
2510
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$y);
2511
2511
 
2512
2512
  const button = {
2513
2513
  ...helperTheme$3,
2514
2514
 
2515
- [compVars$4.fontFamily]: globalRefs$d.fonts.font1.family,
2515
+ [compVars$4.fontFamily]: globalRefs$e.fonts.font1.family,
2516
2516
 
2517
2517
  [compVars$4.cursor]: 'pointer',
2518
2518
  [compVars$4.hostHeight]: '3em',
2519
2519
  [compVars$4.hostWidth]: 'auto',
2520
2520
 
2521
- [compVars$4.borderRadius]: globalRefs$d.radius.sm,
2522
- [compVars$4.borderWidth]: globalRefs$d.border.xs,
2521
+ [compVars$4.borderRadius]: globalRefs$e.radius.sm,
2522
+ [compVars$4.borderWidth]: globalRefs$e.border.xs,
2523
2523
  [compVars$4.borderStyle]: 'solid',
2524
2524
  [compVars$4.borderColor]: 'transparent',
2525
2525
 
@@ -2555,10 +2555,10 @@ const button = {
2555
2555
  },
2556
2556
 
2557
2557
  _disabled: {
2558
- [helperVars$3.main]: globalRefs$d.colors.surface.main,
2559
- [helperVars$3.dark]: globalRefs$d.colors.surface.dark,
2560
- [helperVars$3.light]: globalRefs$d.colors.surface.light,
2561
- [helperVars$3.contrast]: globalRefs$d.colors.surface.contrast,
2558
+ [helperVars$3.main]: globalRefs$e.colors.surface.main,
2559
+ [helperVars$3.dark]: globalRefs$e.colors.surface.dark,
2560
+ [helperVars$3.light]: globalRefs$e.colors.surface.light,
2561
+ [helperVars$3.contrast]: globalRefs$e.colors.surface.contrast,
2562
2562
  },
2563
2563
 
2564
2564
  variant: {
@@ -2600,11 +2600,11 @@ const button = {
2600
2600
  },
2601
2601
 
2602
2602
  _focused: {
2603
- [compVars$4.outlineColor]: globalRefs$d.colors.surface.main,
2603
+ [compVars$4.outlineColor]: globalRefs$e.colors.surface.main,
2604
2604
  },
2605
2605
  };
2606
2606
 
2607
- const vars$r = {
2607
+ const vars$s = {
2608
2608
  ...compVars$4,
2609
2609
  ...helperVars$3,
2610
2610
  };
@@ -2612,10 +2612,10 @@ const vars$r = {
2612
2612
  var button$1 = /*#__PURE__*/Object.freeze({
2613
2613
  __proto__: null,
2614
2614
  default: button,
2615
- vars: vars$r
2615
+ vars: vars$s
2616
2616
  });
2617
2617
 
2618
- const { host: host$e, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$a, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$a } =
2618
+ const { host: host$f, label: label$8, placeholder: placeholder$2, requiredIndicator: requiredIndicator$a, inputField: inputField$5, input, helperText: helperText$8, errorMessage: errorMessage$a } =
2619
2619
  {
2620
2620
  host: { selector: () => ':host' },
2621
2621
  label: { selector: '::part(label)' },
@@ -2629,11 +2629,11 @@ const { host: host$e, label: label$8, placeholder: placeholder$2, requiredIndica
2629
2629
 
2630
2630
  var textFieldMappings = {
2631
2631
  // we apply font-size also on the host so we can set its width with em
2632
- fontSize: [{}, host$e],
2632
+ fontSize: [{}, host$f],
2633
2633
  fontFamily: [label$8, inputField$5, helperText$8, errorMessage$a],
2634
2634
 
2635
- hostWidth: { ...host$e, property: 'width' },
2636
- hostMinWidth: { ...host$e, property: 'min-width' },
2635
+ hostWidth: { ...host$f, property: 'width' },
2636
+ hostMinWidth: { ...host$f, property: 'min-width' },
2637
2637
 
2638
2638
  inputBackgroundColor: { ...inputField$5, property: 'background-color' },
2639
2639
 
@@ -2770,7 +2770,7 @@ const resetInputOverrides = (name, cssVarList) => `
2770
2770
  ${resetInputFieldUnderlayingBorder(name)}
2771
2771
  `;
2772
2772
 
2773
- const componentName$w = getComponentName('text-field');
2773
+ const componentName$x = getComponentName('text-field');
2774
2774
 
2775
2775
  const observedAttrs = ['type'];
2776
2776
 
@@ -2819,26 +2819,26 @@ const TextFieldClass = compose(
2819
2819
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
2820
2820
  `,
2821
2821
  excludeAttrsSync: ['tabindex'],
2822
- componentName: componentName$w,
2822
+ componentName: componentName$x,
2823
2823
  })
2824
2824
  );
2825
2825
 
2826
- const componentName$v = getComponentName('input-wrapper');
2827
- const globalRefs$c = getThemeRefs(globals);
2826
+ const componentName$w = getComponentName('input-wrapper');
2827
+ const globalRefs$d = getThemeRefs(globals);
2828
2828
 
2829
- const [theme$1, refs, vars$q] = createHelperVars(
2829
+ const [theme$1, refs, vars$r] = createHelperVars(
2830
2830
  {
2831
- labelTextColor: globalRefs$c.colors.surface.contrast,
2832
- valueTextColor: globalRefs$c.colors.surface.contrast,
2833
- placeholderTextColor: globalRefs$c.colors.surface.main,
2831
+ labelTextColor: globalRefs$d.colors.surface.contrast,
2832
+ valueTextColor: globalRefs$d.colors.surface.contrast,
2833
+ placeholderTextColor: globalRefs$d.colors.surface.main,
2834
2834
  requiredIndicator: "'*'",
2835
- errorMessageTextColor: globalRefs$c.colors.error.main,
2835
+ errorMessageTextColor: globalRefs$d.colors.error.main,
2836
2836
 
2837
- borderWidth: globalRefs$c.border.xs,
2838
- borderRadius: globalRefs$c.radius.xs,
2837
+ borderWidth: globalRefs$d.border.xs,
2838
+ borderRadius: globalRefs$d.radius.xs,
2839
2839
  borderColor: 'transparent',
2840
2840
 
2841
- outlineWidth: globalRefs$c.border.sm,
2841
+ outlineWidth: globalRefs$d.border.sm,
2842
2842
  outlineStyle: 'solid',
2843
2843
  outlineColor: 'transparent',
2844
2844
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -2849,9 +2849,9 @@ const [theme$1, refs, vars$q] = createHelperVars(
2849
2849
  horizontalPadding: '0.5em',
2850
2850
  verticalPadding: '0.5em',
2851
2851
 
2852
- backgroundColor: globalRefs$c.colors.surface.light,
2852
+ backgroundColor: globalRefs$d.colors.surface.light,
2853
2853
 
2854
- fontFamily: globalRefs$c.fonts.font1.family,
2854
+ fontFamily: globalRefs$d.fonts.font1.family,
2855
2855
 
2856
2856
  size: {
2857
2857
  xs: { fontSize: '12px' },
@@ -2865,69 +2865,69 @@ const [theme$1, refs, vars$q] = createHelperVars(
2865
2865
  },
2866
2866
 
2867
2867
  _focused: {
2868
- outlineColor: globalRefs$c.colors.surface.main,
2868
+ outlineColor: globalRefs$d.colors.surface.main,
2869
2869
  _invalid: {
2870
- outlineColor: globalRefs$c.colors.error.main,
2870
+ outlineColor: globalRefs$d.colors.error.main,
2871
2871
  },
2872
2872
  },
2873
2873
 
2874
2874
  _bordered: {
2875
- outlineWidth: globalRefs$c.border.xs,
2876
- borderColor: globalRefs$c.colors.surface.main,
2875
+ outlineWidth: globalRefs$d.border.xs,
2876
+ borderColor: globalRefs$d.colors.surface.main,
2877
2877
  borderStyle: 'solid',
2878
2878
  _invalid: {
2879
- borderColor: globalRefs$c.colors.error.main,
2879
+ borderColor: globalRefs$d.colors.error.main,
2880
2880
  },
2881
2881
  },
2882
2882
 
2883
2883
  _disabled: {
2884
- labelTextColor: globalRefs$c.colors.surface.main,
2885
- borderColor: globalRefs$c.colors.surface.main,
2886
- valueTextColor: globalRefs$c.colors.surface.dark,
2887
- placeholderTextColor: globalRefs$c.colors.surface.dark,
2888
- backgroundColor: globalRefs$c.colors.surface.main,
2884
+ labelTextColor: globalRefs$d.colors.surface.main,
2885
+ borderColor: globalRefs$d.colors.surface.main,
2886
+ valueTextColor: globalRefs$d.colors.surface.dark,
2887
+ placeholderTextColor: globalRefs$d.colors.surface.dark,
2888
+ backgroundColor: globalRefs$d.colors.surface.main,
2889
2889
  },
2890
2890
  },
2891
- componentName$v
2891
+ componentName$w
2892
2892
  );
2893
2893
 
2894
2894
  var inputWrapper = /*#__PURE__*/Object.freeze({
2895
2895
  __proto__: null,
2896
2896
  default: theme$1,
2897
2897
  refs: refs,
2898
- vars: vars$q
2898
+ vars: vars$r
2899
2899
  });
2900
2900
 
2901
- const vars$p = TextFieldClass.cssVarList;
2901
+ const vars$q = TextFieldClass.cssVarList;
2902
2902
 
2903
2903
  const textField = {
2904
- [vars$p.hostWidth]: refs.width,
2905
- [vars$p.hostMinWidth]: refs.minWidth,
2906
- [vars$p.fontSize]: refs.fontSize,
2907
- [vars$p.fontFamily]: refs.fontFamily,
2908
- [vars$p.labelTextColor]: refs.labelTextColor,
2909
- [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
2910
- [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
2911
- [vars$p.inputValueTextColor]: refs.valueTextColor,
2912
- [vars$p.inputPlaceholderColor]: refs.placeholderTextColor,
2913
- [vars$p.inputBorderWidth]: refs.borderWidth,
2914
- [vars$p.inputBorderStyle]: refs.borderStyle,
2915
- [vars$p.inputBorderColor]: refs.borderColor,
2916
- [vars$p.inputBorderRadius]: refs.borderRadius,
2917
- [vars$p.inputOutlineWidth]: refs.outlineWidth,
2918
- [vars$p.inputOutlineStyle]: refs.outlineStyle,
2919
- [vars$p.inputOutlineColor]: refs.outlineColor,
2920
- [vars$p.inputOutlineOffset]: refs.outlineOffset,
2921
- [vars$p.inputBackgroundColor]: refs.backgroundColor,
2922
- [vars$p.inputHeight]: refs.inputHeight,
2923
- [vars$p.inputHorizontalPadding]: refs.horizontalPadding,
2904
+ [vars$q.hostWidth]: refs.width,
2905
+ [vars$q.hostMinWidth]: refs.minWidth,
2906
+ [vars$q.fontSize]: refs.fontSize,
2907
+ [vars$q.fontFamily]: refs.fontFamily,
2908
+ [vars$q.labelTextColor]: refs.labelTextColor,
2909
+ [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
2910
+ [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
2911
+ [vars$q.inputValueTextColor]: refs.valueTextColor,
2912
+ [vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
2913
+ [vars$q.inputBorderWidth]: refs.borderWidth,
2914
+ [vars$q.inputBorderStyle]: refs.borderStyle,
2915
+ [vars$q.inputBorderColor]: refs.borderColor,
2916
+ [vars$q.inputBorderRadius]: refs.borderRadius,
2917
+ [vars$q.inputOutlineWidth]: refs.outlineWidth,
2918
+ [vars$q.inputOutlineStyle]: refs.outlineStyle,
2919
+ [vars$q.inputOutlineColor]: refs.outlineColor,
2920
+ [vars$q.inputOutlineOffset]: refs.outlineOffset,
2921
+ [vars$q.inputBackgroundColor]: refs.backgroundColor,
2922
+ [vars$q.inputHeight]: refs.inputHeight,
2923
+ [vars$q.inputHorizontalPadding]: refs.horizontalPadding,
2924
2924
  };
2925
2925
 
2926
2926
  var textField$1 = /*#__PURE__*/Object.freeze({
2927
2927
  __proto__: null,
2928
2928
  default: textField,
2929
2929
  textField: textField,
2930
- vars: vars$p
2930
+ vars: vars$q
2931
2931
  });
2932
2932
 
2933
2933
  const passwordDraggableMixin = (superclass) =>
@@ -2964,10 +2964,10 @@ const passwordDraggableMixin = (superclass) =>
2964
2964
  }
2965
2965
  };
2966
2966
 
2967
- const componentName$u = getComponentName('password');
2967
+ const componentName$v = getComponentName('password');
2968
2968
 
2969
2969
  const {
2970
- host: host$d,
2970
+ host: host$e,
2971
2971
  inputField: inputField$4,
2972
2972
  inputElement: inputElement$1,
2973
2973
  inputElementPlaceholder,
@@ -2993,9 +2993,9 @@ const {
2993
2993
  const PasswordClass = compose(
2994
2994
  createStyleMixin({
2995
2995
  mappings: {
2996
- hostWidth: { ...host$d, property: 'width' },
2997
- hostMinWidth: { ...host$d, property: 'min-width' },
2998
- fontSize: [{}, host$d],
2996
+ hostWidth: { ...host$e, property: 'width' },
2997
+ hostMinWidth: { ...host$e, property: 'min-width' },
2998
+ fontSize: [{}, host$e],
2999
2999
  fontFamily: [label$7, inputField$4, errorMessage$9, helperText$7],
3000
3000
  inputHeight: { ...inputField$4, property: 'height' },
3001
3001
  inputHorizontalPadding: [
@@ -3093,44 +3093,44 @@ const PasswordClass = compose(
3093
3093
  }
3094
3094
  `,
3095
3095
  excludeAttrsSync: ['tabindex'],
3096
- componentName: componentName$u,
3096
+ componentName: componentName$v,
3097
3097
  })
3098
3098
  );
3099
3099
 
3100
- const globalRefs$b = getThemeRefs(globals);
3101
- const vars$o = PasswordClass.cssVarList;
3100
+ const globalRefs$c = getThemeRefs(globals);
3101
+ const vars$p = PasswordClass.cssVarList;
3102
3102
 
3103
3103
  const password = {
3104
- [vars$o.hostWidth]: refs.width,
3105
- [vars$o.fontSize]: refs.fontSize,
3106
- [vars$o.fontFamily]: refs.fontFamily,
3107
- [vars$o.labelTextColor]: refs.labelTextColor,
3108
- [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
3109
- [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
3110
- [vars$o.inputHeight]: refs.inputHeight,
3111
- [vars$o.inputBackgroundColor]: refs.backgroundColor,
3112
- [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
3113
- [vars$o.inputValueTextColor]: refs.valueTextColor,
3114
- [vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
3115
- [vars$o.inputBorderWidth]: refs.borderWidth,
3116
- [vars$o.inputBorderStyle]: refs.borderStyle,
3117
- [vars$o.inputBorderColor]: refs.borderColor,
3118
- [vars$o.inputBorderRadius]: refs.borderRadius,
3119
- [vars$o.inputOutlineWidth]: refs.outlineWidth,
3120
- [vars$o.inputOutlineStyle]: refs.outlineStyle,
3121
- [vars$o.inputOutlineColor]: refs.outlineColor,
3122
- [vars$o.inputOutlineOffset]: refs.outlineOffset,
3123
- [vars$o.revealButtonOffset]: globalRefs$b.spacing.md,
3124
- [vars$o.revealButtonSize]: refs.toggleButtonSize,
3104
+ [vars$p.hostWidth]: refs.width,
3105
+ [vars$p.fontSize]: refs.fontSize,
3106
+ [vars$p.fontFamily]: refs.fontFamily,
3107
+ [vars$p.labelTextColor]: refs.labelTextColor,
3108
+ [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
3109
+ [vars$p.inputHorizontalPadding]: refs.horizontalPadding,
3110
+ [vars$p.inputHeight]: refs.inputHeight,
3111
+ [vars$p.inputBackgroundColor]: refs.backgroundColor,
3112
+ [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
3113
+ [vars$p.inputValueTextColor]: refs.valueTextColor,
3114
+ [vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
3115
+ [vars$p.inputBorderWidth]: refs.borderWidth,
3116
+ [vars$p.inputBorderStyle]: refs.borderStyle,
3117
+ [vars$p.inputBorderColor]: refs.borderColor,
3118
+ [vars$p.inputBorderRadius]: refs.borderRadius,
3119
+ [vars$p.inputOutlineWidth]: refs.outlineWidth,
3120
+ [vars$p.inputOutlineStyle]: refs.outlineStyle,
3121
+ [vars$p.inputOutlineColor]: refs.outlineColor,
3122
+ [vars$p.inputOutlineOffset]: refs.outlineOffset,
3123
+ [vars$p.revealButtonOffset]: globalRefs$c.spacing.md,
3124
+ [vars$p.revealButtonSize]: refs.toggleButtonSize,
3125
3125
  };
3126
3126
 
3127
3127
  var password$1 = /*#__PURE__*/Object.freeze({
3128
3128
  __proto__: null,
3129
3129
  default: password,
3130
- vars: vars$o
3130
+ vars: vars$p
3131
3131
  });
3132
3132
 
3133
- const componentName$t = getComponentName('number-field');
3133
+ const componentName$u = getComponentName('number-field');
3134
3134
 
3135
3135
  const NumberFieldClass = compose(
3136
3136
  createStyleMixin({
@@ -3155,42 +3155,42 @@ const NumberFieldClass = compose(
3155
3155
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
3156
3156
  `,
3157
3157
  excludeAttrsSync: ['tabindex'],
3158
- componentName: componentName$t,
3158
+ componentName: componentName$u,
3159
3159
  })
3160
3160
  );
3161
3161
 
3162
- const vars$n = NumberFieldClass.cssVarList;
3162
+ const vars$o = NumberFieldClass.cssVarList;
3163
3163
 
3164
3164
  const numberField = {
3165
- [vars$n.hostWidth]: refs.width,
3166
- [vars$n.hostMinWidth]: refs.minWidth,
3167
- [vars$n.fontSize]: refs.fontSize,
3168
- [vars$n.fontFamily]: refs.fontFamily,
3169
- [vars$n.labelTextColor]: refs.labelTextColor,
3170
- [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
3171
- [vars$n.inputValueTextColor]: refs.valueTextColor,
3172
- [vars$n.inputPlaceholderColor]: refs.placeholderTextColor,
3173
- [vars$n.inputBorderWidth]: refs.borderWidth,
3174
- [vars$n.inputBorderStyle]: refs.borderStyle,
3175
- [vars$n.inputBorderColor]: refs.borderColor,
3176
- [vars$n.inputBorderRadius]: refs.borderRadius,
3177
- [vars$n.inputOutlineWidth]: refs.outlineWidth,
3178
- [vars$n.inputOutlineStyle]: refs.outlineStyle,
3179
- [vars$n.inputOutlineColor]: refs.outlineColor,
3180
- [vars$n.inputOutlineOffset]: refs.outlineOffset,
3181
- [vars$n.inputBackgroundColor]: refs.backgroundColor,
3182
- [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
3183
- [vars$n.inputHorizontalPadding]: refs.horizontalPadding,
3184
- [vars$n.inputHeight]: refs.inputHeight,
3165
+ [vars$o.hostWidth]: refs.width,
3166
+ [vars$o.hostMinWidth]: refs.minWidth,
3167
+ [vars$o.fontSize]: refs.fontSize,
3168
+ [vars$o.fontFamily]: refs.fontFamily,
3169
+ [vars$o.labelTextColor]: refs.labelTextColor,
3170
+ [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
3171
+ [vars$o.inputValueTextColor]: refs.valueTextColor,
3172
+ [vars$o.inputPlaceholderColor]: refs.placeholderTextColor,
3173
+ [vars$o.inputBorderWidth]: refs.borderWidth,
3174
+ [vars$o.inputBorderStyle]: refs.borderStyle,
3175
+ [vars$o.inputBorderColor]: refs.borderColor,
3176
+ [vars$o.inputBorderRadius]: refs.borderRadius,
3177
+ [vars$o.inputOutlineWidth]: refs.outlineWidth,
3178
+ [vars$o.inputOutlineStyle]: refs.outlineStyle,
3179
+ [vars$o.inputOutlineColor]: refs.outlineColor,
3180
+ [vars$o.inputOutlineOffset]: refs.outlineOffset,
3181
+ [vars$o.inputBackgroundColor]: refs.backgroundColor,
3182
+ [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
3183
+ [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
3184
+ [vars$o.inputHeight]: refs.inputHeight,
3185
3185
  };
3186
3186
 
3187
3187
  var numberField$1 = /*#__PURE__*/Object.freeze({
3188
3188
  __proto__: null,
3189
3189
  default: numberField,
3190
- vars: vars$n
3190
+ vars: vars$o
3191
3191
  });
3192
3192
 
3193
- const componentName$s = getComponentName('email-field');
3193
+ const componentName$t = getComponentName('email-field');
3194
3194
 
3195
3195
  const customMixin$6 = (superclass) =>
3196
3196
  class EmailFieldMixinClass extends superclass {
@@ -3224,45 +3224,45 @@ const EmailFieldClass = compose(
3224
3224
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
3225
3225
  `,
3226
3226
  excludeAttrsSync: ['tabindex'],
3227
- componentName: componentName$s,
3227
+ componentName: componentName$t,
3228
3228
  })
3229
3229
  );
3230
3230
 
3231
- const vars$m = EmailFieldClass.cssVarList;
3231
+ const vars$n = EmailFieldClass.cssVarList;
3232
3232
 
3233
3233
  const emailField = {
3234
- [vars$m.hostWidth]: refs.width,
3235
- [vars$m.hostMinWidth]: refs.minWidth,
3236
- [vars$m.fontSize]: refs.fontSize,
3237
- [vars$m.fontFamily]: refs.fontFamily,
3238
- [vars$m.labelTextColor]: refs.labelTextColor,
3239
- [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
3240
- [vars$m.inputValueTextColor]: refs.valueTextColor,
3241
- [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
3242
- [vars$m.inputPlaceholderColor]: refs.placeholderTextColor,
3243
- [vars$m.inputBorderWidth]: refs.borderWidth,
3244
- [vars$m.inputBorderStyle]: refs.borderStyle,
3245
- [vars$m.inputBorderColor]: refs.borderColor,
3246
- [vars$m.inputBorderRadius]: refs.borderRadius,
3247
- [vars$m.inputOutlineWidth]: refs.outlineWidth,
3248
- [vars$m.inputOutlineStyle]: refs.outlineStyle,
3249
- [vars$m.inputOutlineColor]: refs.outlineColor,
3250
- [vars$m.inputOutlineOffset]: refs.outlineOffset,
3251
- [vars$m.inputBackgroundColor]: refs.backgroundColor,
3252
- [vars$m.inputHorizontalPadding]: refs.horizontalPadding,
3253
- [vars$m.inputHeight]: refs.inputHeight,
3234
+ [vars$n.hostWidth]: refs.width,
3235
+ [vars$n.hostMinWidth]: refs.minWidth,
3236
+ [vars$n.fontSize]: refs.fontSize,
3237
+ [vars$n.fontFamily]: refs.fontFamily,
3238
+ [vars$n.labelTextColor]: refs.labelTextColor,
3239
+ [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
3240
+ [vars$n.inputValueTextColor]: refs.valueTextColor,
3241
+ [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
3242
+ [vars$n.inputPlaceholderColor]: refs.placeholderTextColor,
3243
+ [vars$n.inputBorderWidth]: refs.borderWidth,
3244
+ [vars$n.inputBorderStyle]: refs.borderStyle,
3245
+ [vars$n.inputBorderColor]: refs.borderColor,
3246
+ [vars$n.inputBorderRadius]: refs.borderRadius,
3247
+ [vars$n.inputOutlineWidth]: refs.outlineWidth,
3248
+ [vars$n.inputOutlineStyle]: refs.outlineStyle,
3249
+ [vars$n.inputOutlineColor]: refs.outlineColor,
3250
+ [vars$n.inputOutlineOffset]: refs.outlineOffset,
3251
+ [vars$n.inputBackgroundColor]: refs.backgroundColor,
3252
+ [vars$n.inputHorizontalPadding]: refs.horizontalPadding,
3253
+ [vars$n.inputHeight]: refs.inputHeight,
3254
3254
  };
3255
3255
 
3256
3256
  var emailField$1 = /*#__PURE__*/Object.freeze({
3257
3257
  __proto__: null,
3258
3258
  default: emailField,
3259
- vars: vars$m
3259
+ vars: vars$n
3260
3260
  });
3261
3261
 
3262
- const componentName$r = getComponentName('text-area');
3262
+ const componentName$s = getComponentName('text-area');
3263
3263
 
3264
3264
  const {
3265
- host: host$c,
3265
+ host: host$d,
3266
3266
  label: label$6,
3267
3267
  placeholder: placeholder$1,
3268
3268
  inputField: inputField$3,
@@ -3284,9 +3284,9 @@ const {
3284
3284
  const TextAreaClass = compose(
3285
3285
  createStyleMixin({
3286
3286
  mappings: {
3287
- hostWidth: { ...host$c, property: 'width' },
3288
- hostMinWidth: { ...host$c, property: 'min-width' },
3289
- fontSize: [host$c, textArea$2],
3287
+ hostWidth: { ...host$d, property: 'width' },
3288
+ hostMinWidth: { ...host$d, property: 'min-width' },
3289
+ fontSize: [host$d, textArea$2],
3290
3290
  fontFamily: [label$6, inputField$3, helperText$6, errorMessage$8],
3291
3291
  labelTextColor: [
3292
3292
  { ...label$6, property: 'color' },
@@ -3332,48 +3332,48 @@ const TextAreaClass = compose(
3332
3332
  ${resetInputCursor('vaadin-text-area')}
3333
3333
  `,
3334
3334
  excludeAttrsSync: ['tabindex'],
3335
- componentName: componentName$r,
3335
+ componentName: componentName$s,
3336
3336
  })
3337
3337
  );
3338
3338
 
3339
- const globalRefs$a = getThemeRefs(globals);
3340
- const vars$l = TextAreaClass.cssVarList;
3339
+ const globalRefs$b = getThemeRefs(globals);
3340
+ const vars$m = TextAreaClass.cssVarList;
3341
3341
 
3342
3342
  const textArea = {
3343
- [vars$l.hostWidth]: refs.width,
3344
- [vars$l.hostMinWidth]: refs.minWidth,
3345
- [vars$l.fontSize]: refs.fontSize,
3346
- [vars$l.fontFamily]: refs.fontFamily,
3347
- [vars$l.labelTextColor]: refs.labelTextColor,
3348
- [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
3349
- [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
3350
- [vars$l.inputBackgroundColor]: refs.backgroundColor,
3351
- [vars$l.inputValueTextColor]: refs.valueTextColor,
3352
- [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
3353
- [vars$l.inputBorderRadius]: refs.borderRadius,
3354
- [vars$l.inputBorderWidth]: refs.borderWidth,
3355
- [vars$l.inputBorderStyle]: refs.borderStyle,
3356
- [vars$l.inputBorderColor]: refs.borderColor,
3357
- [vars$l.inputOutlineWidth]: refs.outlineWidth,
3358
- [vars$l.inputOutlineStyle]: refs.outlineStyle,
3359
- [vars$l.inputOutlineColor]: refs.outlineColor,
3360
- [vars$l.inputOutlineOffset]: refs.outlineOffset,
3361
- [vars$l.inputResizeType]: 'vertical',
3362
- [vars$l.inputMinHeight]: '5em',
3343
+ [vars$m.hostWidth]: refs.width,
3344
+ [vars$m.hostMinWidth]: refs.minWidth,
3345
+ [vars$m.fontSize]: refs.fontSize,
3346
+ [vars$m.fontFamily]: refs.fontFamily,
3347
+ [vars$m.labelTextColor]: refs.labelTextColor,
3348
+ [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
3349
+ [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
3350
+ [vars$m.inputBackgroundColor]: refs.backgroundColor,
3351
+ [vars$m.inputValueTextColor]: refs.valueTextColor,
3352
+ [vars$m.inputPlaceholderTextColor]: refs.placeholderTextColor,
3353
+ [vars$m.inputBorderRadius]: refs.borderRadius,
3354
+ [vars$m.inputBorderWidth]: refs.borderWidth,
3355
+ [vars$m.inputBorderStyle]: refs.borderStyle,
3356
+ [vars$m.inputBorderColor]: refs.borderColor,
3357
+ [vars$m.inputOutlineWidth]: refs.outlineWidth,
3358
+ [vars$m.inputOutlineStyle]: refs.outlineStyle,
3359
+ [vars$m.inputOutlineColor]: refs.outlineColor,
3360
+ [vars$m.inputOutlineOffset]: refs.outlineOffset,
3361
+ [vars$m.inputResizeType]: 'vertical',
3362
+ [vars$m.inputMinHeight]: '5em',
3363
3363
 
3364
3364
  _disabled: {
3365
- [vars$l.inputBackgroundColor]: globalRefs$a.colors.surface.light,
3365
+ [vars$m.inputBackgroundColor]: globalRefs$b.colors.surface.light,
3366
3366
  },
3367
3367
 
3368
3368
  _readonly: {
3369
- [vars$l.inputResizeType]: 'none',
3369
+ [vars$m.inputResizeType]: 'none',
3370
3370
  },
3371
3371
  };
3372
3372
 
3373
3373
  var textArea$1 = /*#__PURE__*/Object.freeze({
3374
3374
  __proto__: null,
3375
3375
  default: textArea,
3376
- vars: vars$l
3376
+ vars: vars$m
3377
3377
  });
3378
3378
 
3379
3379
  const createBaseInputClass = (...args) =>
@@ -3384,9 +3384,9 @@ const createBaseInputClass = (...args) =>
3384
3384
  inputEventsDispatchingMixin
3385
3385
  )(createBaseClass(...args));
3386
3386
 
3387
- const componentName$q = getComponentName('boolean-field-internal');
3387
+ const componentName$r = getComponentName('boolean-field-internal');
3388
3388
 
3389
- createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
3389
+ createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
3390
3390
 
3391
3391
  const booleanFieldMixin = (superclass) =>
3392
3392
  class BooleanFieldMixinClass extends superclass {
@@ -3395,14 +3395,14 @@ const booleanFieldMixin = (superclass) =>
3395
3395
 
3396
3396
  const template = document.createElement('template');
3397
3397
  template.innerHTML = `
3398
- <${componentName$q}
3398
+ <${componentName$r}
3399
3399
  tabindex="-1"
3400
3400
  slot="input"
3401
- ></${componentName$q}>
3401
+ ></${componentName$r}>
3402
3402
  `;
3403
3403
 
3404
3404
  this.baseElement.appendChild(template.content.cloneNode(true));
3405
- this.inputElement = this.shadowRoot.querySelector(componentName$q);
3405
+ this.inputElement = this.shadowRoot.querySelector(componentName$r);
3406
3406
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
3407
3407
 
3408
3408
  forwardAttrs(this, this.inputElement, {
@@ -3464,10 +3464,10 @@ descope-boolean-field-internal {
3464
3464
  }
3465
3465
  `;
3466
3466
 
3467
- const componentName$p = getComponentName('checkbox');
3467
+ const componentName$q = getComponentName('checkbox');
3468
3468
 
3469
3469
  const {
3470
- host: host$b,
3470
+ host: host$c,
3471
3471
  component: component$1,
3472
3472
  checkboxElement,
3473
3473
  checkboxSurface,
@@ -3489,9 +3489,9 @@ const {
3489
3489
  const CheckboxClass = compose(
3490
3490
  createStyleMixin({
3491
3491
  mappings: {
3492
- hostWidth: { ...host$b, property: 'width' },
3492
+ hostWidth: { ...host$c, property: 'width' },
3493
3493
 
3494
- fontSize: [host$b, checkboxElement, checkboxLabel$1],
3494
+ fontSize: [host$c, checkboxElement, checkboxLabel$1],
3495
3495
  fontFamily: [checkboxLabel$1, helperText$5, errorMessage$7],
3496
3496
 
3497
3497
  labelTextColor: { ...checkboxLabel$1, property: 'color' },
@@ -3561,53 +3561,53 @@ const CheckboxClass = compose(
3561
3561
  }
3562
3562
  `,
3563
3563
  excludeAttrsSync: ['label', 'tabindex'],
3564
- componentName: componentName$p,
3564
+ componentName: componentName$q,
3565
3565
  })
3566
3566
  );
3567
3567
 
3568
- const vars$k = CheckboxClass.cssVarList;
3568
+ const vars$l = CheckboxClass.cssVarList;
3569
3569
  const checkboxSize = '1.35em';
3570
3570
 
3571
3571
  const checkbox = {
3572
- [vars$k.hostWidth]: refs.width,
3573
- [vars$k.fontSize]: refs.fontSize,
3574
- [vars$k.fontFamily]: refs.fontFamily,
3575
- [vars$k.labelTextColor]: refs.labelTextColor,
3576
- [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
3577
- [vars$k.labelFontWeight]: '400',
3578
- [vars$k.labelLineHeight]: checkboxSize,
3579
- [vars$k.labelSpacing]: '1em',
3580
- [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
3581
- [vars$k.inputOutlineWidth]: refs.outlineWidth,
3582
- [vars$k.inputOutlineOffset]: refs.outlineOffset,
3583
- [vars$k.inputOutlineColor]: refs.outlineColor,
3584
- [vars$k.inputOutlineStyle]: refs.outlineStyle,
3585
- [vars$k.inputBorderRadius]: refs.borderRadius,
3586
- [vars$k.inputBorderColor]: refs.borderColor,
3587
- [vars$k.inputBorderWidth]: refs.borderWidth,
3588
- [vars$k.inputBorderStyle]: refs.borderStyle,
3589
- [vars$k.inputBackgroundColor]: refs.backgroundColor,
3590
- [vars$k.inputSize]: checkboxSize,
3572
+ [vars$l.hostWidth]: refs.width,
3573
+ [vars$l.fontSize]: refs.fontSize,
3574
+ [vars$l.fontFamily]: refs.fontFamily,
3575
+ [vars$l.labelTextColor]: refs.labelTextColor,
3576
+ [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
3577
+ [vars$l.labelFontWeight]: '400',
3578
+ [vars$l.labelLineHeight]: checkboxSize,
3579
+ [vars$l.labelSpacing]: '1em',
3580
+ [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
3581
+ [vars$l.inputOutlineWidth]: refs.outlineWidth,
3582
+ [vars$l.inputOutlineOffset]: refs.outlineOffset,
3583
+ [vars$l.inputOutlineColor]: refs.outlineColor,
3584
+ [vars$l.inputOutlineStyle]: refs.outlineStyle,
3585
+ [vars$l.inputBorderRadius]: refs.borderRadius,
3586
+ [vars$l.inputBorderColor]: refs.borderColor,
3587
+ [vars$l.inputBorderWidth]: refs.borderWidth,
3588
+ [vars$l.inputBorderStyle]: refs.borderStyle,
3589
+ [vars$l.inputBackgroundColor]: refs.backgroundColor,
3590
+ [vars$l.inputSize]: checkboxSize,
3591
3591
 
3592
3592
  _checked: {
3593
- [vars$k.inputValueTextColor]: refs.valueTextColor,
3593
+ [vars$l.inputValueTextColor]: refs.valueTextColor,
3594
3594
  },
3595
3595
 
3596
3596
  _disabled: {
3597
- [vars$k.labelTextColor]: refs.labelTextColor,
3597
+ [vars$l.labelTextColor]: refs.labelTextColor,
3598
3598
  },
3599
3599
  };
3600
3600
 
3601
3601
  var checkbox$1 = /*#__PURE__*/Object.freeze({
3602
3602
  __proto__: null,
3603
3603
  default: checkbox,
3604
- vars: vars$k
3604
+ vars: vars$l
3605
3605
  });
3606
3606
 
3607
- const componentName$o = getComponentName('switch-toggle');
3607
+ const componentName$p = getComponentName('switch-toggle');
3608
3608
 
3609
3609
  const {
3610
- host: host$a,
3610
+ host: host$b,
3611
3611
  component,
3612
3612
  checkboxElement: track,
3613
3613
  checkboxSurface: knob,
@@ -3629,7 +3629,7 @@ const {
3629
3629
  const SwitchToggleClass = compose(
3630
3630
  createStyleMixin({
3631
3631
  mappings: {
3632
- hostWidth: { ...host$a, property: 'width' },
3632
+ hostWidth: { ...host$b, property: 'width' },
3633
3633
 
3634
3634
  fontSize: [component, checkboxLabel, checkboxLabel],
3635
3635
  fontFamily: [checkboxLabel, helperText$4, errorMessage$6],
@@ -3723,82 +3723,82 @@ const SwitchToggleClass = compose(
3723
3723
  }
3724
3724
  `,
3725
3725
  excludeAttrsSync: ['label', 'tabindex'],
3726
- componentName: componentName$o,
3726
+ componentName: componentName$p,
3727
3727
  })
3728
3728
  );
3729
3729
 
3730
3730
  const knobMargin = '2px';
3731
3731
  const checkboxHeight = '1.25em';
3732
3732
 
3733
- const globalRefs$9 = getThemeRefs(globals);
3734
- const vars$j = SwitchToggleClass.cssVarList;
3733
+ const globalRefs$a = getThemeRefs(globals);
3734
+ const vars$k = SwitchToggleClass.cssVarList;
3735
3735
 
3736
3736
  const switchToggle = {
3737
- [vars$j.hostWidth]: refs.width,
3738
- [vars$j.fontSize]: refs.fontSize,
3739
- [vars$j.fontFamily]: refs.fontFamily,
3740
-
3741
- [vars$j.inputOutlineWidth]: refs.outlineWidth,
3742
- [vars$j.inputOutlineOffset]: refs.outlineOffset,
3743
- [vars$j.inputOutlineColor]: refs.outlineColor,
3744
- [vars$j.inputOutlineStyle]: refs.outlineStyle,
3745
-
3746
- [vars$j.trackBorderStyle]: refs.borderStyle,
3747
- [vars$j.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
3748
- [vars$j.trackBorderColor]: refs.borderColor,
3749
- [vars$j.trackBackgroundColor]: 'none',
3750
- [vars$j.trackBorderRadius]: globalRefs$9.radius.md,
3751
- [vars$j.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
3752
- [vars$j.trackHeight]: checkboxHeight,
3753
-
3754
- [vars$j.knobSize]: `calc(1em - ${knobMargin})`,
3755
- [vars$j.knobRadius]: '50%',
3756
- [vars$j.knobTopOffset]: '1px',
3757
- [vars$j.knobLeftOffset]: knobMargin,
3758
- [vars$j.knobColor]: refs.valueTextColor,
3759
- [vars$j.knobTransitionDuration]: '0.3s',
3760
-
3761
- [vars$j.labelTextColor]: refs.labelTextColor,
3762
- [vars$j.labelFontWeight]: '400',
3763
- [vars$j.labelLineHeight]: '1.35em',
3764
- [vars$j.labelSpacing]: '1em',
3765
- [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
3766
- [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
3737
+ [vars$k.hostWidth]: refs.width,
3738
+ [vars$k.fontSize]: refs.fontSize,
3739
+ [vars$k.fontFamily]: refs.fontFamily,
3740
+
3741
+ [vars$k.inputOutlineWidth]: refs.outlineWidth,
3742
+ [vars$k.inputOutlineOffset]: refs.outlineOffset,
3743
+ [vars$k.inputOutlineColor]: refs.outlineColor,
3744
+ [vars$k.inputOutlineStyle]: refs.outlineStyle,
3745
+
3746
+ [vars$k.trackBorderStyle]: refs.borderStyle,
3747
+ [vars$k.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
3748
+ [vars$k.trackBorderColor]: refs.borderColor,
3749
+ [vars$k.trackBackgroundColor]: 'none',
3750
+ [vars$k.trackBorderRadius]: globalRefs$a.radius.md,
3751
+ [vars$k.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
3752
+ [vars$k.trackHeight]: checkboxHeight,
3753
+
3754
+ [vars$k.knobSize]: `calc(1em - ${knobMargin})`,
3755
+ [vars$k.knobRadius]: '50%',
3756
+ [vars$k.knobTopOffset]: '1px',
3757
+ [vars$k.knobLeftOffset]: knobMargin,
3758
+ [vars$k.knobColor]: refs.valueTextColor,
3759
+ [vars$k.knobTransitionDuration]: '0.3s',
3760
+
3761
+ [vars$k.labelTextColor]: refs.labelTextColor,
3762
+ [vars$k.labelFontWeight]: '400',
3763
+ [vars$k.labelLineHeight]: '1.35em',
3764
+ [vars$k.labelSpacing]: '1em',
3765
+ [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
3766
+ [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
3767
3767
 
3768
3768
  _checked: {
3769
- [vars$j.trackBorderColor]: refs.borderColor,
3770
- [vars$j.trackBackgroundColor]: refs.backgroundColor,
3771
- [vars$j.knobLeftOffset]: `calc(100% - var(${vars$j.knobSize}) - ${knobMargin})`,
3772
- [vars$j.knobColor]: refs.valueTextColor,
3773
- [vars$j.knobTextColor]: refs.valueTextColor,
3769
+ [vars$k.trackBorderColor]: refs.borderColor,
3770
+ [vars$k.trackBackgroundColor]: refs.backgroundColor,
3771
+ [vars$k.knobLeftOffset]: `calc(100% - var(${vars$k.knobSize}) - ${knobMargin})`,
3772
+ [vars$k.knobColor]: refs.valueTextColor,
3773
+ [vars$k.knobTextColor]: refs.valueTextColor,
3774
3774
  },
3775
3775
 
3776
3776
  _disabled: {
3777
- [vars$j.knobColor]: globalRefs$9.colors.surface.light,
3778
- [vars$j.trackBorderColor]: globalRefs$9.colors.surface.main,
3779
- [vars$j.trackBackgroundColor]: globalRefs$9.colors.surface.main,
3780
- [vars$j.labelTextColor]: refs.labelTextColor,
3777
+ [vars$k.knobColor]: globalRefs$a.colors.surface.light,
3778
+ [vars$k.trackBorderColor]: globalRefs$a.colors.surface.main,
3779
+ [vars$k.trackBackgroundColor]: globalRefs$a.colors.surface.main,
3780
+ [vars$k.labelTextColor]: refs.labelTextColor,
3781
3781
  _checked: {
3782
- [vars$j.knobColor]: globalRefs$9.colors.surface.light,
3783
- [vars$j.trackBackgroundColor]: globalRefs$9.colors.surface.main,
3782
+ [vars$k.knobColor]: globalRefs$a.colors.surface.light,
3783
+ [vars$k.trackBackgroundColor]: globalRefs$a.colors.surface.main,
3784
3784
  },
3785
3785
  },
3786
3786
 
3787
3787
  _invalid: {
3788
- [vars$j.trackBorderColor]: globalRefs$9.colors.error.main,
3789
- [vars$j.knobColor]: globalRefs$9.colors.error.main,
3788
+ [vars$k.trackBorderColor]: globalRefs$a.colors.error.main,
3789
+ [vars$k.knobColor]: globalRefs$a.colors.error.main,
3790
3790
  },
3791
3791
  };
3792
3792
 
3793
3793
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
3794
3794
  __proto__: null,
3795
3795
  default: switchToggle,
3796
- vars: vars$j
3796
+ vars: vars$k
3797
3797
  });
3798
3798
 
3799
- const componentName$n = getComponentName('container');
3799
+ const componentName$o = getComponentName('container');
3800
3800
 
3801
- class RawContainer extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > slot' }) {
3801
+ class RawContainer extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > slot' }) {
3802
3802
  constructor() {
3803
3803
  super();
3804
3804
 
@@ -3850,7 +3850,7 @@ const ContainerClass = compose(
3850
3850
  componentNameValidationMixin
3851
3851
  )(RawContainer);
3852
3852
 
3853
- const globalRefs$8 = getThemeRefs(globals);
3853
+ const globalRefs$9 = getThemeRefs(globals);
3854
3854
 
3855
3855
  const compVars$3 = ContainerClass.cssVarList;
3856
3856
 
@@ -3872,7 +3872,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
3872
3872
  horizontalAlignment,
3873
3873
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
3874
3874
  },
3875
- componentName$n
3875
+ componentName$o
3876
3876
  );
3877
3877
 
3878
3878
  const { shadowColor } = helperRefs$2;
@@ -3882,8 +3882,8 @@ const container = {
3882
3882
 
3883
3883
  [compVars$3.hostWidth]: '100%',
3884
3884
  [compVars$3.boxShadow]: 'none',
3885
- [compVars$3.backgroundColor]: globalRefs$8.colors.surface.light,
3886
- [compVars$3.color]: globalRefs$8.colors.surface.contrast,
3885
+ [compVars$3.backgroundColor]: globalRefs$9.colors.surface.light,
3886
+ [compVars$3.color]: globalRefs$9.colors.surface.contrast,
3887
3887
  [compVars$3.borderRadius]: '0px',
3888
3888
 
3889
3889
  verticalPadding: {
@@ -3930,34 +3930,34 @@ const container = {
3930
3930
 
3931
3931
  shadow: {
3932
3932
  sm: {
3933
- [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${shadowColor}`,
3933
+ [compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.sm} ${shadowColor}, ${globalRefs$9.shadow.narrow.sm} ${shadowColor}`,
3934
3934
  },
3935
3935
  md: {
3936
- [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.md} ${shadowColor}, ${globalRefs$8.shadow.narrow.md} ${shadowColor}`,
3936
+ [compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.md} ${shadowColor}, ${globalRefs$9.shadow.narrow.md} ${shadowColor}`,
3937
3937
  },
3938
3938
  lg: {
3939
- [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${shadowColor}`,
3939
+ [compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.lg} ${shadowColor}, ${globalRefs$9.shadow.narrow.lg} ${shadowColor}`,
3940
3940
  },
3941
3941
  xl: {
3942
- [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${shadowColor}`,
3942
+ [compVars$3.boxShadow]: `${globalRefs$9.shadow.wide.xl} ${shadowColor}, ${globalRefs$9.shadow.narrow.xl} ${shadowColor}`,
3943
3943
  },
3944
3944
  '2xl': {
3945
3945
  [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
3946
- [compVars$3.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${shadowColor}`,
3946
+ [compVars$3.boxShadow]: `${globalRefs$9.shadow.wide['2xl']} ${shadowColor}`,
3947
3947
  },
3948
3948
  },
3949
3949
 
3950
3950
  borderRadius: {
3951
- sm: { [compVars$3.borderRadius]: globalRefs$8.radius.sm },
3952
- md: { [compVars$3.borderRadius]: globalRefs$8.radius.md },
3953
- lg: { [compVars$3.borderRadius]: globalRefs$8.radius.lg },
3954
- xl: { [compVars$3.borderRadius]: globalRefs$8.radius.xl },
3955
- '2xl': { [compVars$3.borderRadius]: globalRefs$8.radius['2xl'] },
3956
- '3xl': { [compVars$3.borderRadius]: globalRefs$8.radius['3xl'] },
3951
+ sm: { [compVars$3.borderRadius]: globalRefs$9.radius.sm },
3952
+ md: { [compVars$3.borderRadius]: globalRefs$9.radius.md },
3953
+ lg: { [compVars$3.borderRadius]: globalRefs$9.radius.lg },
3954
+ xl: { [compVars$3.borderRadius]: globalRefs$9.radius.xl },
3955
+ '2xl': { [compVars$3.borderRadius]: globalRefs$9.radius['2xl'] },
3956
+ '3xl': { [compVars$3.borderRadius]: globalRefs$9.radius['3xl'] },
3957
3957
  },
3958
3958
  };
3959
3959
 
3960
- const vars$i = {
3960
+ const vars$j = {
3961
3961
  ...compVars$3,
3962
3962
  ...helperVars$2,
3963
3963
  };
@@ -3965,7 +3965,7 @@ const vars$i = {
3965
3965
  var container$1 = /*#__PURE__*/Object.freeze({
3966
3966
  __proto__: null,
3967
3967
  default: container,
3968
- vars: vars$i
3968
+ vars: vars$j
3969
3969
  });
3970
3970
 
3971
3971
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4018,51 +4018,51 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
4018
4018
  return CssVarImageClass;
4019
4019
  };
4020
4020
 
4021
- const componentName$m = getComponentName('logo');
4021
+ const componentName$n = getComponentName('logo');
4022
4022
 
4023
4023
  const LogoClass = createCssVarImageClass({
4024
- componentName: componentName$m,
4024
+ componentName: componentName$n,
4025
4025
  varName: 'url',
4026
4026
  fallbackVarName: 'fallbackUrl',
4027
4027
  });
4028
4028
 
4029
- const vars$h = LogoClass.cssVarList;
4029
+ const vars$i = LogoClass.cssVarList;
4030
4030
 
4031
4031
  const logo$1 = {
4032
- [vars$h.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4032
+ [vars$i.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4033
4033
  };
4034
4034
 
4035
4035
  var logo$2 = /*#__PURE__*/Object.freeze({
4036
4036
  __proto__: null,
4037
4037
  default: logo$1,
4038
- vars: vars$h
4038
+ vars: vars$i
4039
4039
  });
4040
4040
 
4041
- const componentName$l = getComponentName('totp-image');
4041
+ const componentName$m = getComponentName('totp-image');
4042
4042
 
4043
4043
  const TotpImageClass = createCssVarImageClass({
4044
- componentName: componentName$l,
4044
+ componentName: componentName$m,
4045
4045
  varName: 'url',
4046
4046
  fallbackVarName: 'fallbackUrl',
4047
4047
  });
4048
4048
 
4049
- const vars$g = TotpImageClass.cssVarList;
4049
+ const vars$h = TotpImageClass.cssVarList;
4050
4050
 
4051
4051
  const logo = {
4052
- [vars$g.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4052
+ [vars$h.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4053
4053
  };
4054
4054
 
4055
4055
  var totpImage = /*#__PURE__*/Object.freeze({
4056
4056
  __proto__: null,
4057
4057
  default: logo,
4058
- vars: vars$g
4058
+ vars: vars$h
4059
4059
  });
4060
4060
 
4061
4061
  // eslint-disable-next-line max-classes-per-file
4062
4062
 
4063
- const componentName$k = getComponentName('text');
4063
+ const componentName$l = getComponentName('text');
4064
4064
 
4065
- class RawText extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > slot' }) {
4065
+ class RawText extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > slot' }) {
4066
4066
  constructor() {
4067
4067
  super();
4068
4068
 
@@ -4121,98 +4121,98 @@ const TextClass = compose(
4121
4121
  customTextMixin
4122
4122
  )(RawText);
4123
4123
 
4124
- const globalRefs$7 = getThemeRefs(globals);
4125
- const vars$f = TextClass.cssVarList;
4124
+ const globalRefs$8 = getThemeRefs(globals);
4125
+ const vars$g = TextClass.cssVarList;
4126
4126
 
4127
4127
  const text$2 = {
4128
- [vars$f.textLineHeight]: '1.35em',
4129
- [vars$f.textAlign]: 'left',
4130
- [vars$f.textColor]: globalRefs$7.colors.surface.dark,
4128
+ [vars$g.textLineHeight]: '1.35em',
4129
+ [vars$g.textAlign]: 'left',
4130
+ [vars$g.textColor]: globalRefs$8.colors.surface.dark,
4131
4131
  variant: {
4132
4132
  h1: {
4133
- [vars$f.fontSize]: globalRefs$7.typography.h1.size,
4134
- [vars$f.fontWeight]: globalRefs$7.typography.h1.weight,
4135
- [vars$f.fontFamily]: globalRefs$7.typography.h1.font,
4133
+ [vars$g.fontSize]: globalRefs$8.typography.h1.size,
4134
+ [vars$g.fontWeight]: globalRefs$8.typography.h1.weight,
4135
+ [vars$g.fontFamily]: globalRefs$8.typography.h1.font,
4136
4136
  },
4137
4137
  h2: {
4138
- [vars$f.fontSize]: globalRefs$7.typography.h2.size,
4139
- [vars$f.fontWeight]: globalRefs$7.typography.h2.weight,
4140
- [vars$f.fontFamily]: globalRefs$7.typography.h2.font,
4138
+ [vars$g.fontSize]: globalRefs$8.typography.h2.size,
4139
+ [vars$g.fontWeight]: globalRefs$8.typography.h2.weight,
4140
+ [vars$g.fontFamily]: globalRefs$8.typography.h2.font,
4141
4141
  },
4142
4142
  h3: {
4143
- [vars$f.fontSize]: globalRefs$7.typography.h3.size,
4144
- [vars$f.fontWeight]: globalRefs$7.typography.h3.weight,
4145
- [vars$f.fontFamily]: globalRefs$7.typography.h3.font,
4143
+ [vars$g.fontSize]: globalRefs$8.typography.h3.size,
4144
+ [vars$g.fontWeight]: globalRefs$8.typography.h3.weight,
4145
+ [vars$g.fontFamily]: globalRefs$8.typography.h3.font,
4146
4146
  },
4147
4147
  subtitle1: {
4148
- [vars$f.fontSize]: globalRefs$7.typography.subtitle1.size,
4149
- [vars$f.fontWeight]: globalRefs$7.typography.subtitle1.weight,
4150
- [vars$f.fontFamily]: globalRefs$7.typography.subtitle1.font,
4148
+ [vars$g.fontSize]: globalRefs$8.typography.subtitle1.size,
4149
+ [vars$g.fontWeight]: globalRefs$8.typography.subtitle1.weight,
4150
+ [vars$g.fontFamily]: globalRefs$8.typography.subtitle1.font,
4151
4151
  },
4152
4152
  subtitle2: {
4153
- [vars$f.fontSize]: globalRefs$7.typography.subtitle2.size,
4154
- [vars$f.fontWeight]: globalRefs$7.typography.subtitle2.weight,
4155
- [vars$f.fontFamily]: globalRefs$7.typography.subtitle2.font,
4153
+ [vars$g.fontSize]: globalRefs$8.typography.subtitle2.size,
4154
+ [vars$g.fontWeight]: globalRefs$8.typography.subtitle2.weight,
4155
+ [vars$g.fontFamily]: globalRefs$8.typography.subtitle2.font,
4156
4156
  },
4157
4157
  body1: {
4158
- [vars$f.fontSize]: globalRefs$7.typography.body1.size,
4159
- [vars$f.fontWeight]: globalRefs$7.typography.body1.weight,
4160
- [vars$f.fontFamily]: globalRefs$7.typography.body1.font,
4158
+ [vars$g.fontSize]: globalRefs$8.typography.body1.size,
4159
+ [vars$g.fontWeight]: globalRefs$8.typography.body1.weight,
4160
+ [vars$g.fontFamily]: globalRefs$8.typography.body1.font,
4161
4161
  },
4162
4162
  body2: {
4163
- [vars$f.fontSize]: globalRefs$7.typography.body2.size,
4164
- [vars$f.fontWeight]: globalRefs$7.typography.body2.weight,
4165
- [vars$f.fontFamily]: globalRefs$7.typography.body2.font,
4163
+ [vars$g.fontSize]: globalRefs$8.typography.body2.size,
4164
+ [vars$g.fontWeight]: globalRefs$8.typography.body2.weight,
4165
+ [vars$g.fontFamily]: globalRefs$8.typography.body2.font,
4166
4166
  },
4167
4167
  },
4168
4168
 
4169
4169
  mode: {
4170
4170
  primary: {
4171
- [vars$f.textColor]: globalRefs$7.colors.primary.main,
4171
+ [vars$g.textColor]: globalRefs$8.colors.primary.main,
4172
4172
  },
4173
4173
  secondary: {
4174
- [vars$f.textColor]: globalRefs$7.colors.secondary.main,
4174
+ [vars$g.textColor]: globalRefs$8.colors.secondary.main,
4175
4175
  },
4176
4176
  error: {
4177
- [vars$f.textColor]: globalRefs$7.colors.error.main,
4177
+ [vars$g.textColor]: globalRefs$8.colors.error.main,
4178
4178
  },
4179
4179
  success: {
4180
- [vars$f.textColor]: globalRefs$7.colors.success.main,
4180
+ [vars$g.textColor]: globalRefs$8.colors.success.main,
4181
4181
  },
4182
4182
  },
4183
4183
 
4184
4184
  textAlign: {
4185
- right: { [vars$f.textAlign]: 'right' },
4186
- left: { [vars$f.textAlign]: 'left' },
4187
- center: { [vars$f.textAlign]: 'center' },
4185
+ right: { [vars$g.textAlign]: 'right' },
4186
+ left: { [vars$g.textAlign]: 'left' },
4187
+ center: { [vars$g.textAlign]: 'center' },
4188
4188
  },
4189
4189
 
4190
4190
  _fullWidth: {
4191
- [vars$f.hostWidth]: '100%',
4191
+ [vars$g.hostWidth]: '100%',
4192
4192
  },
4193
4193
 
4194
4194
  _italic: {
4195
- [vars$f.fontStyle]: 'italic',
4195
+ [vars$g.fontStyle]: 'italic',
4196
4196
  },
4197
4197
 
4198
4198
  _uppercase: {
4199
- [vars$f.textTransform]: 'uppercase',
4199
+ [vars$g.textTransform]: 'uppercase',
4200
4200
  },
4201
4201
 
4202
4202
  _lowercase: {
4203
- [vars$f.textTransform]: 'lowercase',
4203
+ [vars$g.textTransform]: 'lowercase',
4204
4204
  },
4205
4205
  };
4206
4206
 
4207
4207
  var text$3 = /*#__PURE__*/Object.freeze({
4208
4208
  __proto__: null,
4209
4209
  default: text$2,
4210
- vars: vars$f
4210
+ vars: vars$g
4211
4211
  });
4212
4212
 
4213
- const componentName$j = getComponentName('link');
4213
+ const componentName$k = getComponentName('link');
4214
4214
 
4215
- class RawLink extends createBaseClass({ componentName: componentName$j, baseSelector: ':host a' }) {
4215
+ class RawLink extends createBaseClass({ componentName: componentName$k, baseSelector: ':host a' }) {
4216
4216
  constructor() {
4217
4217
  super();
4218
4218
 
@@ -4258,12 +4258,12 @@ const selectors$1 = {
4258
4258
  text: { selector: () => TextClass.componentName },
4259
4259
  };
4260
4260
 
4261
- const { anchor, text: text$1, host: host$9, wrapper: wrapper$1 } = selectors$1;
4261
+ const { anchor, text: text$1, host: host$a, wrapper: wrapper$1 } = selectors$1;
4262
4262
 
4263
4263
  const LinkClass = compose(
4264
4264
  createStyleMixin({
4265
4265
  mappings: {
4266
- hostWidth: { ...host$9, property: 'width' },
4266
+ hostWidth: { ...host$a, property: 'width' },
4267
4267
  textAlign: wrapper$1,
4268
4268
  textColor: [
4269
4269
  { ...anchor, property: 'color' },
@@ -4276,36 +4276,36 @@ const LinkClass = compose(
4276
4276
  componentNameValidationMixin
4277
4277
  )(RawLink);
4278
4278
 
4279
- const globalRefs$6 = getThemeRefs(globals);
4280
- const vars$e = LinkClass.cssVarList;
4279
+ const globalRefs$7 = getThemeRefs(globals);
4280
+ const vars$f = LinkClass.cssVarList;
4281
4281
 
4282
4282
  const link = {
4283
- [vars$e.cursor]: 'pointer',
4283
+ [vars$f.cursor]: 'pointer',
4284
4284
 
4285
- [vars$e.textColor]: globalRefs$6.colors.primary.main,
4285
+ [vars$f.textColor]: globalRefs$7.colors.primary.main,
4286
4286
 
4287
4287
  textAlign: {
4288
- right: { [vars$e.textAlign]: 'right' },
4289
- left: { [vars$e.textAlign]: 'left' },
4290
- center: { [vars$e.textAlign]: 'center' },
4288
+ right: { [vars$f.textAlign]: 'right' },
4289
+ left: { [vars$f.textAlign]: 'left' },
4290
+ center: { [vars$f.textAlign]: 'center' },
4291
4291
  },
4292
4292
 
4293
4293
  _fullWidth: {
4294
- [vars$e.hostWidth]: '100%',
4294
+ [vars$f.hostWidth]: '100%',
4295
4295
  },
4296
4296
 
4297
4297
  mode: {
4298
4298
  primary: {
4299
- [vars$e.textColor]: globalRefs$6.colors.primary.main,
4299
+ [vars$f.textColor]: globalRefs$7.colors.primary.main,
4300
4300
  },
4301
4301
  secondary: {
4302
- [vars$e.textColor]: globalRefs$6.colors.secondary.main,
4302
+ [vars$f.textColor]: globalRefs$7.colors.secondary.main,
4303
4303
  },
4304
4304
  error: {
4305
- [vars$e.textColor]: globalRefs$6.colors.error.main,
4305
+ [vars$f.textColor]: globalRefs$7.colors.error.main,
4306
4306
  },
4307
4307
  success: {
4308
- [vars$e.textColor]: globalRefs$6.colors.success.main,
4308
+ [vars$f.textColor]: globalRefs$7.colors.success.main,
4309
4309
  },
4310
4310
  },
4311
4311
  };
@@ -4313,11 +4313,11 @@ const link = {
4313
4313
  var link$1 = /*#__PURE__*/Object.freeze({
4314
4314
  __proto__: null,
4315
4315
  default: link,
4316
- vars: vars$e
4316
+ vars: vars$f
4317
4317
  });
4318
4318
 
4319
- const componentName$i = getComponentName('divider');
4320
- class RawDivider extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
4319
+ const componentName$j = getComponentName('divider');
4320
+ class RawDivider extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
4321
4321
  constructor() {
4322
4322
  super();
4323
4323
 
@@ -4362,7 +4362,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$i, baseS
4362
4362
  }
4363
4363
  }
4364
4364
 
4365
- const { host: host$8, before, after: after$1, text } = {
4365
+ const { host: host$9, before, after: after$1, text } = {
4366
4366
  host: { selector: () => ':host' },
4367
4367
  before: { selector: '::before' },
4368
4368
  after: { selector: '::after' },
@@ -4372,8 +4372,8 @@ const { host: host$8, before, after: after$1, text } = {
4372
4372
  const DividerClass = compose(
4373
4373
  createStyleMixin({
4374
4374
  mappings: {
4375
- hostWidth: { ...host$8, property: 'width' },
4376
- hostPadding: { ...host$8, property: 'padding' },
4375
+ hostWidth: { ...host$9, property: 'width' },
4376
+ hostPadding: { ...host$9, property: 'padding' },
4377
4377
 
4378
4378
  minHeight: {},
4379
4379
  alignItems: {},
@@ -4413,7 +4413,7 @@ const DividerClass = compose(
4413
4413
  componentNameValidationMixin
4414
4414
  )(RawDivider);
4415
4415
 
4416
- const globalRefs$5 = getThemeRefs(globals);
4416
+ const globalRefs$6 = getThemeRefs(globals);
4417
4417
  const compVars$2 = DividerClass.cssVarList;
4418
4418
 
4419
4419
  const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -4421,7 +4421,7 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
4421
4421
  thickness: '2px',
4422
4422
  spacing: '10px',
4423
4423
  },
4424
- componentName$i
4424
+ componentName$j
4425
4425
  );
4426
4426
 
4427
4427
  const divider = {
@@ -4431,7 +4431,7 @@ const divider = {
4431
4431
  [compVars$2.flexDirection]: 'row',
4432
4432
  [compVars$2.alignSelf]: 'stretch',
4433
4433
  [compVars$2.hostWidth]: '100%',
4434
- [compVars$2.stripeColor]: globalRefs$5.colors.surface.main,
4434
+ [compVars$2.stripeColor]: globalRefs$6.colors.surface.main,
4435
4435
  [compVars$2.stripeColorOpacity]: '0.5',
4436
4436
  [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
4437
4437
  [compVars$2.labelTextWidth]: 'fit-content',
@@ -4450,7 +4450,7 @@ const divider = {
4450
4450
  },
4451
4451
  };
4452
4452
 
4453
- const vars$d = {
4453
+ const vars$e = {
4454
4454
  ...compVars$2,
4455
4455
  ...helperVars$1,
4456
4456
  };
@@ -4458,16 +4458,16 @@ const vars$d = {
4458
4458
  var divider$1 = /*#__PURE__*/Object.freeze({
4459
4459
  __proto__: null,
4460
4460
  default: divider,
4461
- vars: vars$d
4461
+ vars: vars$e
4462
4462
  });
4463
4463
 
4464
4464
  /* eslint-disable no-param-reassign */
4465
4465
 
4466
- const componentName$h = getComponentName('passcode-internal');
4466
+ const componentName$i = getComponentName('passcode-internal');
4467
4467
 
4468
- createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
4468
+ createBaseInputClass({ componentName: componentName$i, baseSelector: 'div' });
4469
4469
 
4470
- const componentName$g = getComponentName('passcode');
4470
+ const componentName$h = getComponentName('passcode');
4471
4471
 
4472
4472
  const observedAttributes$3 = ['digits'];
4473
4473
 
@@ -4486,17 +4486,17 @@ const customMixin$5 = (superclass) =>
4486
4486
  const template = document.createElement('template');
4487
4487
 
4488
4488
  template.innerHTML = `
4489
- <${componentName$h}
4489
+ <${componentName$i}
4490
4490
  bordered="true"
4491
4491
  name="code"
4492
4492
  tabindex="-1"
4493
4493
  slot="input"
4494
- ><slot></slot></${componentName$h}>
4494
+ ><slot></slot></${componentName$i}>
4495
4495
  `;
4496
4496
 
4497
4497
  this.baseElement.appendChild(template.content.cloneNode(true));
4498
4498
 
4499
- this.inputElement = this.shadowRoot.querySelector(componentName$h);
4499
+ this.inputElement = this.shadowRoot.querySelector(componentName$i);
4500
4500
 
4501
4501
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
4502
4502
  }
@@ -4511,7 +4511,7 @@ const customMixin$5 = (superclass) =>
4511
4511
  };
4512
4512
 
4513
4513
  const {
4514
- host: host$7,
4514
+ host: host$8,
4515
4515
  digitField,
4516
4516
  label: label$5,
4517
4517
  requiredIndicator: requiredIndicator$5,
@@ -4533,9 +4533,9 @@ const textVars$2 = TextFieldClass.cssVarList;
4533
4533
  const PasscodeClass = compose(
4534
4534
  createStyleMixin({
4535
4535
  mappings: {
4536
- fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$7],
4536
+ fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$8],
4537
4537
  hostWidth: { property: 'width' },
4538
- fontFamily: [host$7, { ...label$5 }],
4538
+ fontFamily: [host$8, { ...label$5 }],
4539
4539
  labelTextColor: [
4540
4540
  { ...label$5, property: 'color' },
4541
4541
  { ...requiredIndicator$5, property: 'color' },
@@ -4634,44 +4634,44 @@ const PasscodeClass = compose(
4634
4634
  ${resetInputCursor('vaadin-text-field')}
4635
4635
  `,
4636
4636
  excludeAttrsSync: ['tabindex'],
4637
- componentName: componentName$g,
4637
+ componentName: componentName$h,
4638
4638
  })
4639
4639
  );
4640
4640
 
4641
- const vars$c = PasscodeClass.cssVarList;
4641
+ const vars$d = PasscodeClass.cssVarList;
4642
4642
 
4643
4643
  const passcode = {
4644
- [vars$c.fontFamily]: refs.fontFamily,
4645
- [vars$c.fontSize]: refs.fontSize,
4646
- [vars$c.labelTextColor]: refs.labelTextColor,
4647
- [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
4648
- [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
4649
- [vars$c.digitValueTextColor]: refs.valueTextColor,
4650
- [vars$c.digitPadding]: '0',
4651
- [vars$c.digitTextAlign]: 'center',
4652
- [vars$c.digitSpacing]: '4px',
4653
- [vars$c.hostWidth]: refs.width,
4654
- [vars$c.digitOutlineColor]: 'transparent',
4655
- [vars$c.digitOutlineWidth]: refs.outlineWidth,
4656
- [vars$c.focusedDigitFieldOutlineColor]: refs.outlineColor,
4657
- [vars$c.digitSize]: refs.inputHeight,
4644
+ [vars$d.fontFamily]: refs.fontFamily,
4645
+ [vars$d.fontSize]: refs.fontSize,
4646
+ [vars$d.labelTextColor]: refs.labelTextColor,
4647
+ [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
4648
+ [vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
4649
+ [vars$d.digitValueTextColor]: refs.valueTextColor,
4650
+ [vars$d.digitPadding]: '0',
4651
+ [vars$d.digitTextAlign]: 'center',
4652
+ [vars$d.digitSpacing]: '4px',
4653
+ [vars$d.hostWidth]: refs.width,
4654
+ [vars$d.digitOutlineColor]: 'transparent',
4655
+ [vars$d.digitOutlineWidth]: refs.outlineWidth,
4656
+ [vars$d.focusedDigitFieldOutlineColor]: refs.outlineColor,
4657
+ [vars$d.digitSize]: refs.inputHeight,
4658
4658
 
4659
4659
  _hideCursor: {
4660
- [vars$c.digitCaretTextColor]: 'transparent',
4660
+ [vars$d.digitCaretTextColor]: 'transparent',
4661
4661
  },
4662
4662
  };
4663
4663
 
4664
4664
  var passcode$1 = /*#__PURE__*/Object.freeze({
4665
4665
  __proto__: null,
4666
4666
  default: passcode,
4667
- vars: vars$c
4667
+ vars: vars$d
4668
4668
  });
4669
4669
 
4670
- const componentName$f = getComponentName('loader-linear');
4670
+ const componentName$g = getComponentName('loader-linear');
4671
4671
 
4672
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
4672
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
4673
4673
  static get componentName() {
4674
- return componentName$f;
4674
+ return componentName$g;
4675
4675
  }
4676
4676
 
4677
4677
  constructor() {
@@ -4707,18 +4707,18 @@ const selectors = {
4707
4707
  host: { selector: () => ':host' },
4708
4708
  };
4709
4709
 
4710
- const { after, host: host$6 } = selectors;
4710
+ const { after, host: host$7 } = selectors;
4711
4711
 
4712
4712
  const LoaderLinearClass = compose(
4713
4713
  createStyleMixin({
4714
4714
  mappings: {
4715
4715
  hostDisplay: {},
4716
- hostWidth: { ...host$6, property: 'width' },
4716
+ hostWidth: { ...host$7, property: 'width' },
4717
4717
  barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
4718
4718
  barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
4719
4719
  verticalPadding: [
4720
- { ...host$6, property: 'padding-top' },
4721
- { ...host$6, property: 'padding-bottom' },
4720
+ { ...host$7, property: 'padding-top' },
4721
+ { ...host$7, property: 'padding-bottom' },
4722
4722
  ],
4723
4723
  barBackgroundColor: { property: 'background-color' },
4724
4724
  barColor: { ...after, property: 'background-color' },
@@ -4732,54 +4732,54 @@ const LoaderLinearClass = compose(
4732
4732
  componentNameValidationMixin
4733
4733
  )(RawLoaderLinear);
4734
4734
 
4735
- const globalRefs$4 = getThemeRefs(globals);
4736
- const vars$b = LoaderLinearClass.cssVarList;
4735
+ const globalRefs$5 = getThemeRefs(globals);
4736
+ const vars$c = LoaderLinearClass.cssVarList;
4737
4737
 
4738
4738
  const loaderLinear = {
4739
- [vars$b.hostDisplay]: 'inline-block',
4740
- [vars$b.hostWidth]: '100%',
4739
+ [vars$c.hostDisplay]: 'inline-block',
4740
+ [vars$c.hostWidth]: '100%',
4741
4741
 
4742
- [vars$b.barColor]: globalRefs$4.colors.surface.contrast,
4743
- [vars$b.barWidth]: '20%',
4742
+ [vars$c.barColor]: globalRefs$5.colors.surface.contrast,
4743
+ [vars$c.barWidth]: '20%',
4744
4744
 
4745
- [vars$b.barBackgroundColor]: globalRefs$4.colors.surface.main,
4746
- [vars$b.barBorderRadius]: '4px',
4745
+ [vars$c.barBackgroundColor]: globalRefs$5.colors.surface.main,
4746
+ [vars$c.barBorderRadius]: '4px',
4747
4747
 
4748
- [vars$b.animationDuration]: '2s',
4749
- [vars$b.animationTimingFunction]: 'linear',
4750
- [vars$b.animationIterationCount]: 'infinite',
4751
- [vars$b.verticalPadding]: '0.25em',
4748
+ [vars$c.animationDuration]: '2s',
4749
+ [vars$c.animationTimingFunction]: 'linear',
4750
+ [vars$c.animationIterationCount]: 'infinite',
4751
+ [vars$c.verticalPadding]: '0.25em',
4752
4752
 
4753
4753
  size: {
4754
- xs: { [vars$b.barHeight]: '2px' },
4755
- sm: { [vars$b.barHeight]: '4px' },
4756
- md: { [vars$b.barHeight]: '6px' },
4757
- lg: { [vars$b.barHeight]: '8px' },
4754
+ xs: { [vars$c.barHeight]: '2px' },
4755
+ sm: { [vars$c.barHeight]: '4px' },
4756
+ md: { [vars$c.barHeight]: '6px' },
4757
+ lg: { [vars$c.barHeight]: '8px' },
4758
4758
  },
4759
4759
 
4760
4760
  mode: {
4761
4761
  primary: {
4762
- [vars$b.barColor]: globalRefs$4.colors.primary.main,
4762
+ [vars$c.barColor]: globalRefs$5.colors.primary.main,
4763
4763
  },
4764
4764
  secondary: {
4765
- [vars$b.barColor]: globalRefs$4.colors.secondary.main,
4765
+ [vars$c.barColor]: globalRefs$5.colors.secondary.main,
4766
4766
  },
4767
4767
  },
4768
4768
 
4769
4769
  _hidden: {
4770
- [vars$b.hostDisplay]: 'none',
4770
+ [vars$c.hostDisplay]: 'none',
4771
4771
  },
4772
4772
  };
4773
4773
 
4774
4774
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
4775
4775
  __proto__: null,
4776
4776
  default: loaderLinear,
4777
- vars: vars$b
4777
+ vars: vars$c
4778
4778
  });
4779
4779
 
4780
- const componentName$e = getComponentName('loader-radial');
4780
+ const componentName$f = getComponentName('loader-radial');
4781
4781
 
4782
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > div' }) {
4782
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
4783
4783
  constructor() {
4784
4784
  super();
4785
4785
 
@@ -4823,22 +4823,22 @@ const LoaderRadialClass = compose(
4823
4823
  componentNameValidationMixin
4824
4824
  )(RawLoaderRadial);
4825
4825
 
4826
- const globalRefs$3 = getThemeRefs(globals);
4826
+ const globalRefs$4 = getThemeRefs(globals);
4827
4827
  const compVars$1 = LoaderRadialClass.cssVarList;
4828
4828
 
4829
4829
  const [helperTheme, helperRefs, helperVars] = createHelperVars(
4830
4830
  {
4831
- spinnerColor: globalRefs$3.colors.surface.contrast,
4831
+ spinnerColor: globalRefs$4.colors.surface.contrast,
4832
4832
  mode: {
4833
4833
  primary: {
4834
- spinnerColor: globalRefs$3.colors.primary.main,
4834
+ spinnerColor: globalRefs$4.colors.primary.main,
4835
4835
  },
4836
4836
  secondary: {
4837
- spinnerColor: globalRefs$3.colors.secondary.main,
4837
+ spinnerColor: globalRefs$4.colors.secondary.main,
4838
4838
  },
4839
4839
  },
4840
4840
  },
4841
- componentName$e
4841
+ componentName$f
4842
4842
  );
4843
4843
 
4844
4844
  const loaderRadial = {
@@ -4867,7 +4867,7 @@ const loaderRadial = {
4867
4867
  [compVars$1.hostDisplay]: 'none',
4868
4868
  },
4869
4869
  };
4870
- const vars$a = {
4870
+ const vars$b = {
4871
4871
  ...compVars$1,
4872
4872
  ...helperVars,
4873
4873
  };
@@ -4875,10 +4875,10 @@ const vars$a = {
4875
4875
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
4876
4876
  __proto__: null,
4877
4877
  default: loaderRadial,
4878
- vars: vars$a
4878
+ vars: vars$b
4879
4879
  });
4880
4880
 
4881
- const componentName$d = getComponentName('combo-box');
4881
+ const componentName$e = getComponentName('combo-box');
4882
4882
 
4883
4883
  const ComboBoxMixin = (superclass) =>
4884
4884
  class ComboBoxMixinClass extends superclass {
@@ -5100,7 +5100,7 @@ const ComboBoxMixin = (superclass) =>
5100
5100
  };
5101
5101
 
5102
5102
  const {
5103
- host: host$5,
5103
+ host: host$6,
5104
5104
  inputField: inputField$2,
5105
5105
  inputElement,
5106
5106
  placeholder,
@@ -5124,9 +5124,9 @@ const {
5124
5124
  const ComboBoxClass = compose(
5125
5125
  createStyleMixin({
5126
5126
  mappings: {
5127
- hostWidth: { ...host$5, property: 'width' },
5127
+ hostWidth: { ...host$6, property: 'width' },
5128
5128
  // we apply font-size also on the host so we can set its width with em
5129
- fontSize: [{}, host$5],
5129
+ fontSize: [{}, host$6],
5130
5130
  fontFamily: [label$4, placeholder, inputField$2, helperText$3, errorMessage$4],
5131
5131
  labelTextColor: [
5132
5132
  { ...label$4, property: 'color' },
@@ -5229,66 +5229,66 @@ const ComboBoxClass = compose(
5229
5229
  // and reset items to an empty array, and opening the list box with no items
5230
5230
  // to display.
5231
5231
  excludeAttrsSync: ['tabindex', 'size', 'data'],
5232
- componentName: componentName$d,
5232
+ componentName: componentName$e,
5233
5233
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
5234
5234
  })
5235
5235
  );
5236
5236
 
5237
- const globalRefs$2 = getThemeRefs(globals);
5238
- const vars$9 = ComboBoxClass.cssVarList;
5237
+ const globalRefs$3 = getThemeRefs(globals);
5238
+ const vars$a = ComboBoxClass.cssVarList;
5239
5239
 
5240
5240
  const comboBox = {
5241
- [vars$9.hostWidth]: refs.width,
5242
- [vars$9.fontSize]: refs.fontSize,
5243
- [vars$9.fontFamily]: refs.fontFamily,
5244
- [vars$9.labelTextColor]: refs.labelTextColor,
5245
- [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
5246
- [vars$9.inputBorderColor]: refs.borderColor,
5247
- [vars$9.inputBorderWidth]: refs.borderWidth,
5248
- [vars$9.inputBorderStyle]: refs.borderStyle,
5249
- [vars$9.inputBorderRadius]: refs.borderRadius,
5250
- [vars$9.inputOutlineColor]: refs.outlineColor,
5251
- [vars$9.inputOutlineOffset]: refs.outlineOffset,
5252
- [vars$9.inputOutlineWidth]: refs.outlineWidth,
5253
- [vars$9.inputOutlineStyle]: refs.outlineStyle,
5254
- [vars$9.labelRequiredIndicator]: refs.requiredIndicator,
5255
- [vars$9.inputValueTextColor]: refs.valueTextColor,
5256
- [vars$9.inputPlaceholderTextColor]: refs.placeholderTextColor,
5257
- [vars$9.inputBackgroundColor]: refs.backgroundColor,
5258
- [vars$9.inputHorizontalPadding]: refs.horizontalPadding,
5259
- [vars$9.inputHeight]: refs.inputHeight,
5260
- [vars$9.inputDropdownButtonColor]: globalRefs$2.colors.surface.contrast,
5261
- [vars$9.inputDropdownButtonCursor]: 'pointer',
5262
- [vars$9.inputDropdownButtonSize]: refs.toggleButtonSize,
5263
- [vars$9.inputDropdownButtonOffset]: globalRefs$2.spacing.xs,
5241
+ [vars$a.hostWidth]: refs.width,
5242
+ [vars$a.fontSize]: refs.fontSize,
5243
+ [vars$a.fontFamily]: refs.fontFamily,
5244
+ [vars$a.labelTextColor]: refs.labelTextColor,
5245
+ [vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
5246
+ [vars$a.inputBorderColor]: refs.borderColor,
5247
+ [vars$a.inputBorderWidth]: refs.borderWidth,
5248
+ [vars$a.inputBorderStyle]: refs.borderStyle,
5249
+ [vars$a.inputBorderRadius]: refs.borderRadius,
5250
+ [vars$a.inputOutlineColor]: refs.outlineColor,
5251
+ [vars$a.inputOutlineOffset]: refs.outlineOffset,
5252
+ [vars$a.inputOutlineWidth]: refs.outlineWidth,
5253
+ [vars$a.inputOutlineStyle]: refs.outlineStyle,
5254
+ [vars$a.labelRequiredIndicator]: refs.requiredIndicator,
5255
+ [vars$a.inputValueTextColor]: refs.valueTextColor,
5256
+ [vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
5257
+ [vars$a.inputBackgroundColor]: refs.backgroundColor,
5258
+ [vars$a.inputHorizontalPadding]: refs.horizontalPadding,
5259
+ [vars$a.inputHeight]: refs.inputHeight,
5260
+ [vars$a.inputDropdownButtonColor]: globalRefs$3.colors.surface.contrast,
5261
+ [vars$a.inputDropdownButtonCursor]: 'pointer',
5262
+ [vars$a.inputDropdownButtonSize]: refs.toggleButtonSize,
5263
+ [vars$a.inputDropdownButtonOffset]: globalRefs$3.spacing.xs,
5264
5264
 
5265
5265
  _readonly: {
5266
- [vars$9.inputDropdownButtonCursor]: 'default',
5266
+ [vars$a.inputDropdownButtonCursor]: 'default',
5267
5267
  },
5268
5268
 
5269
5269
  // Overlay theme exposed via the component:
5270
- [vars$9.overlayFontSize]: refs.fontSize,
5271
- [vars$9.overlayFontFamily]: refs.fontFamily,
5272
- [vars$9.overlayCursor]: 'pointer',
5273
- [vars$9.overlayItemBoxShadow]: 'none',
5270
+ [vars$a.overlayFontSize]: refs.fontSize,
5271
+ [vars$a.overlayFontFamily]: refs.fontFamily,
5272
+ [vars$a.overlayCursor]: 'pointer',
5273
+ [vars$a.overlayItemBoxShadow]: 'none',
5274
5274
 
5275
5275
  // Overlay direct theme:
5276
- [vars$9.overlay.minHeight]: '400px',
5277
- [vars$9.overlay.margin]: '0',
5276
+ [vars$a.overlay.minHeight]: '400px',
5277
+ [vars$a.overlay.margin]: '0',
5278
5278
  };
5279
5279
 
5280
5280
  var comboBox$1 = /*#__PURE__*/Object.freeze({
5281
5281
  __proto__: null,
5282
5282
  comboBox: comboBox,
5283
5283
  default: comboBox,
5284
- vars: vars$9
5284
+ vars: vars$a
5285
5285
  });
5286
5286
 
5287
5287
  const observedAttributes$2 = ['src', 'alt'];
5288
5288
 
5289
- const componentName$c = getComponentName('image');
5289
+ const componentName$d = getComponentName('image');
5290
5290
 
5291
- const BaseClass$1 = createBaseClass({ componentName: componentName$c, baseSelector: ':host > img' });
5291
+ const BaseClass$1 = createBaseClass({ componentName: componentName$d, baseSelector: ':host > img' });
5292
5292
  class RawImage extends BaseClass$1 {
5293
5293
  static get observedAttributes() {
5294
5294
  return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
@@ -5328,14 +5328,14 @@ const ImageClass = compose(
5328
5328
  draggableMixin
5329
5329
  )(RawImage);
5330
5330
 
5331
- const vars$8 = ImageClass.cssVarList;
5331
+ const vars$9 = ImageClass.cssVarList;
5332
5332
 
5333
5333
  const image = {};
5334
5334
 
5335
5335
  var image$1 = /*#__PURE__*/Object.freeze({
5336
5336
  __proto__: null,
5337
5337
  default: image,
5338
- vars: vars$8
5338
+ vars: vars$9
5339
5339
  });
5340
5340
 
5341
5341
  var CountryCodes = [
@@ -6551,14 +6551,14 @@ var CountryCodes = [
6551
6551
  },
6552
6552
  ].sort((a, b) => (a.name < b.name ? -1 : 1));
6553
6553
 
6554
- const componentName$b = getComponentName('phone-field-internal');
6554
+ const componentName$c = getComponentName('phone-field-internal');
6555
6555
 
6556
- createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
6556
+ createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
6557
6557
 
6558
6558
  const textVars$1 = TextFieldClass.cssVarList;
6559
6559
  const comboVars = ComboBoxClass.cssVarList;
6560
6560
 
6561
- const componentName$a = getComponentName('phone-field');
6561
+ const componentName$b = getComponentName('phone-field');
6562
6562
 
6563
6563
  const customMixin$4 = (superclass) =>
6564
6564
  class PhoneFieldMixinClass extends superclass {
@@ -6572,15 +6572,15 @@ const customMixin$4 = (superclass) =>
6572
6572
  const template = document.createElement('template');
6573
6573
 
6574
6574
  template.innerHTML = `
6575
- <${componentName$b}
6575
+ <${componentName$c}
6576
6576
  tabindex="-1"
6577
6577
  slot="input"
6578
- ></${componentName$b}>
6578
+ ></${componentName$c}>
6579
6579
  `;
6580
6580
 
6581
6581
  this.baseElement.appendChild(template.content.cloneNode(true));
6582
6582
 
6583
- this.inputElement = this.shadowRoot.querySelector(componentName$b);
6583
+ this.inputElement = this.shadowRoot.querySelector(componentName$c);
6584
6584
 
6585
6585
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
6586
6586
  includeAttrs: [
@@ -6600,7 +6600,7 @@ const customMixin$4 = (superclass) =>
6600
6600
  };
6601
6601
 
6602
6602
  const {
6603
- host: host$4,
6603
+ host: host$5,
6604
6604
  label: label$3,
6605
6605
  requiredIndicator: requiredIndicator$3,
6606
6606
  inputField: inputField$1,
@@ -6625,7 +6625,7 @@ const PhoneFieldClass = compose(
6625
6625
  createStyleMixin({
6626
6626
  mappings: {
6627
6627
  fontSize: [
6628
- host$4,
6628
+ host$5,
6629
6629
  inputField$1,
6630
6630
  {
6631
6631
  selector: TextFieldClass.componentName,
@@ -6646,7 +6646,7 @@ const PhoneFieldClass = compose(
6646
6646
  },
6647
6647
  ],
6648
6648
  hostWidth: [
6649
- { ...host$4, property: 'width' },
6649
+ { ...host$5, property: 'width' },
6650
6650
  { ...phoneInput$1, property: 'width' },
6651
6651
  { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
6652
6652
  ],
@@ -6775,32 +6775,32 @@ const PhoneFieldClass = compose(
6775
6775
  }
6776
6776
  `,
6777
6777
  excludeAttrsSync: ['tabindex'],
6778
- componentName: componentName$a,
6778
+ componentName: componentName$b,
6779
6779
  })
6780
6780
  );
6781
6781
 
6782
- const vars$7 = PhoneFieldClass.cssVarList;
6782
+ const vars$8 = PhoneFieldClass.cssVarList;
6783
6783
 
6784
6784
  const phoneField = {
6785
- [vars$7.hostWidth]: refs.width,
6786
- [vars$7.fontSize]: refs.fontSize,
6787
- [vars$7.fontFamily]: refs.fontFamily,
6788
- [vars$7.labelTextColor]: refs.labelTextColor,
6789
- [vars$7.labelRequiredIndicator]: refs.requiredIndicator,
6790
- [vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
6791
- [vars$7.inputValueTextColor]: refs.valueTextColor,
6792
- [vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
6793
- [vars$7.inputBorderStyle]: refs.borderStyle,
6794
- [vars$7.inputBorderWidth]: refs.borderWidth,
6795
- [vars$7.inputBorderColor]: refs.borderColor,
6796
- [vars$7.inputBorderRadius]: refs.borderRadius,
6797
- [vars$7.inputOutlineStyle]: refs.outlineStyle,
6798
- [vars$7.inputOutlineWidth]: refs.outlineWidth,
6799
- [vars$7.inputOutlineColor]: refs.outlineColor,
6800
- [vars$7.inputOutlineOffset]: refs.outlineOffset,
6801
- [vars$7.phoneInputWidth]: refs.minWidth,
6802
- [vars$7.countryCodeInputWidth]: '5em',
6803
- [vars$7.countryCodeDropdownWidth]: '20em',
6785
+ [vars$8.hostWidth]: refs.width,
6786
+ [vars$8.fontSize]: refs.fontSize,
6787
+ [vars$8.fontFamily]: refs.fontFamily,
6788
+ [vars$8.labelTextColor]: refs.labelTextColor,
6789
+ [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
6790
+ [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
6791
+ [vars$8.inputValueTextColor]: refs.valueTextColor,
6792
+ [vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
6793
+ [vars$8.inputBorderStyle]: refs.borderStyle,
6794
+ [vars$8.inputBorderWidth]: refs.borderWidth,
6795
+ [vars$8.inputBorderColor]: refs.borderColor,
6796
+ [vars$8.inputBorderRadius]: refs.borderRadius,
6797
+ [vars$8.inputOutlineStyle]: refs.outlineStyle,
6798
+ [vars$8.inputOutlineWidth]: refs.outlineWidth,
6799
+ [vars$8.inputOutlineColor]: refs.outlineColor,
6800
+ [vars$8.inputOutlineOffset]: refs.outlineOffset,
6801
+ [vars$8.phoneInputWidth]: refs.minWidth,
6802
+ [vars$8.countryCodeInputWidth]: '5em',
6803
+ [vars$8.countryCodeDropdownWidth]: '20em',
6804
6804
 
6805
6805
  // '@overlay': {
6806
6806
  // overlayItemBackgroundColor: 'red'
@@ -6810,16 +6810,16 @@ const phoneField = {
6810
6810
  var phoneField$1 = /*#__PURE__*/Object.freeze({
6811
6811
  __proto__: null,
6812
6812
  default: phoneField,
6813
- vars: vars$7
6813
+ vars: vars$8
6814
6814
  });
6815
6815
 
6816
- const componentName$9 = getComponentName('phone-field-internal-input-box');
6816
+ const componentName$a = getComponentName('phone-field-internal-input-box');
6817
6817
 
6818
- createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
6818
+ createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
6819
6819
 
6820
6820
  const textVars = TextFieldClass.cssVarList;
6821
6821
 
6822
- const componentName$8 = getComponentName('phone-input-box-field');
6822
+ const componentName$9 = getComponentName('phone-input-box-field');
6823
6823
 
6824
6824
  const customMixin$3 = (superclass) =>
6825
6825
  class PhoneInputBoxFieldMixinClass extends superclass {
@@ -6833,15 +6833,15 @@ const customMixin$3 = (superclass) =>
6833
6833
  const template = document.createElement('template');
6834
6834
 
6835
6835
  template.innerHTML = `
6836
- <${componentName$9}
6836
+ <${componentName$a}
6837
6837
  tabindex="-1"
6838
6838
  slot="input"
6839
- ></${componentName$9}>
6839
+ ></${componentName$a}>
6840
6840
  `;
6841
6841
 
6842
6842
  this.baseElement.appendChild(template.content.cloneNode(true));
6843
6843
 
6844
- this.inputElement = this.shadowRoot.querySelector(componentName$9);
6844
+ this.inputElement = this.shadowRoot.querySelector(componentName$a);
6845
6845
 
6846
6846
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
6847
6847
  includeAttrs: [
@@ -6858,7 +6858,7 @@ const customMixin$3 = (superclass) =>
6858
6858
  }
6859
6859
  };
6860
6860
 
6861
- const { host: host$3, label: label$2, requiredIndicator: requiredIndicator$2, inputField, phoneInput, errorMessage: errorMessage$2, helperText: helperText$1 } = {
6861
+ const { host: host$4, label: label$2, requiredIndicator: requiredIndicator$2, inputField, phoneInput, errorMessage: errorMessage$2, helperText: helperText$1 } = {
6862
6862
  host: { selector: () => ':host' },
6863
6863
  label: { selector: '::part(label)' },
6864
6864
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -6872,7 +6872,7 @@ const PhoneFieldInputBoxClass = compose(
6872
6872
  createStyleMixin({
6873
6873
  mappings: {
6874
6874
  fontSize: [
6875
- host$3,
6875
+ host$4,
6876
6876
  inputField,
6877
6877
  {
6878
6878
  selector: TextFieldClass.componentName,
@@ -6880,8 +6880,8 @@ const PhoneFieldInputBoxClass = compose(
6880
6880
  },
6881
6881
  ],
6882
6882
  fontFamily: [label$2, errorMessage$2, helperText$1],
6883
- hostWidth: { ...host$3, property: 'width' },
6884
- hostMinWidth: { ...host$3, property: 'min-width' },
6883
+ hostWidth: { ...host$4, property: 'width' },
6884
+ hostMinWidth: { ...host$4, property: 'min-width' },
6885
6885
 
6886
6886
  inputBorderStyle: { ...inputField, property: 'border-style' },
6887
6887
  inputBorderWidth: { ...inputField, property: 'border-width' },
@@ -6973,44 +6973,44 @@ const PhoneFieldInputBoxClass = compose(
6973
6973
  }
6974
6974
  `,
6975
6975
  excludeAttrsSync: ['tabindex'],
6976
- componentName: componentName$8,
6976
+ componentName: componentName$9,
6977
6977
  })
6978
6978
  );
6979
6979
 
6980
- const vars$6 = PhoneFieldInputBoxClass.cssVarList;
6980
+ const vars$7 = PhoneFieldInputBoxClass.cssVarList;
6981
6981
 
6982
6982
  const phoneInputBoxField = {
6983
- [vars$6.hostWidth]: '16em',
6984
- [vars$6.hostMinWidth]: refs.minWidth,
6985
- [vars$6.fontSize]: refs.fontSize,
6986
- [vars$6.fontFamily]: refs.fontFamily,
6987
- [vars$6.labelTextColor]: refs.labelTextColor,
6988
- [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
6989
- [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
6990
- [vars$6.inputValueTextColor]: refs.valueTextColor,
6991
- [vars$6.inputPlaceholderTextColor]: refs.placeholderTextColor,
6992
- [vars$6.inputBorderStyle]: refs.borderStyle,
6993
- [vars$6.inputBorderWidth]: refs.borderWidth,
6994
- [vars$6.inputBorderColor]: refs.borderColor,
6995
- [vars$6.inputBorderRadius]: refs.borderRadius,
6996
- [vars$6.inputOutlineStyle]: refs.outlineStyle,
6997
- [vars$6.inputOutlineWidth]: refs.outlineWidth,
6998
- [vars$6.inputOutlineColor]: refs.outlineColor,
6999
- [vars$6.inputOutlineOffset]: refs.outlineOffset,
6983
+ [vars$7.hostWidth]: '16em',
6984
+ [vars$7.hostMinWidth]: refs.minWidth,
6985
+ [vars$7.fontSize]: refs.fontSize,
6986
+ [vars$7.fontFamily]: refs.fontFamily,
6987
+ [vars$7.labelTextColor]: refs.labelTextColor,
6988
+ [vars$7.labelRequiredIndicator]: refs.requiredIndicator,
6989
+ [vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
6990
+ [vars$7.inputValueTextColor]: refs.valueTextColor,
6991
+ [vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
6992
+ [vars$7.inputBorderStyle]: refs.borderStyle,
6993
+ [vars$7.inputBorderWidth]: refs.borderWidth,
6994
+ [vars$7.inputBorderColor]: refs.borderColor,
6995
+ [vars$7.inputBorderRadius]: refs.borderRadius,
6996
+ [vars$7.inputOutlineStyle]: refs.outlineStyle,
6997
+ [vars$7.inputOutlineWidth]: refs.outlineWidth,
6998
+ [vars$7.inputOutlineColor]: refs.outlineColor,
6999
+ [vars$7.inputOutlineOffset]: refs.outlineOffset,
7000
7000
  _fullWidth: {
7001
- [vars$6.hostWidth]: refs.width,
7001
+ [vars$7.hostWidth]: refs.width,
7002
7002
  },
7003
7003
  };
7004
7004
 
7005
7005
  var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
7006
7006
  __proto__: null,
7007
7007
  default: phoneInputBoxField,
7008
- vars: vars$6
7008
+ vars: vars$7
7009
7009
  });
7010
7010
 
7011
- const componentName$7 = getComponentName('new-password-internal');
7011
+ const componentName$8 = getComponentName('new-password-internal');
7012
7012
 
7013
- const componentName$6 = getComponentName('new-password');
7013
+ const componentName$7 = getComponentName('new-password');
7014
7014
 
7015
7015
  const customMixin$2 = (superclass) =>
7016
7016
  class NewPasswordMixinClass extends superclass {
@@ -7020,16 +7020,16 @@ const customMixin$2 = (superclass) =>
7020
7020
  const template = document.createElement('template');
7021
7021
 
7022
7022
  template.innerHTML = `
7023
- <${componentName$7}
7023
+ <${componentName$8}
7024
7024
  name="new-password"
7025
7025
  tabindex="-1"
7026
7026
  slot="input"
7027
- ></${componentName$7}>
7027
+ ></${componentName$8}>
7028
7028
  `;
7029
7029
 
7030
7030
  this.baseElement.appendChild(template.content.cloneNode(true));
7031
7031
 
7032
- this.inputElement = this.shadowRoot.querySelector(componentName$7);
7032
+ this.inputElement = this.shadowRoot.querySelector(componentName$8);
7033
7033
 
7034
7034
  forwardAttrs(this, this.inputElement, {
7035
7035
  includeAttrs: [
@@ -7050,7 +7050,7 @@ const customMixin$2 = (superclass) =>
7050
7050
  }
7051
7051
  };
7052
7052
 
7053
- const { host: host$2, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText } = {
7053
+ const { host: host$3, label: label$1, internalInputsWrapper, errorMessage: errorMessage$1, helperText } = {
7054
7054
  host: { selector: () => ':host' },
7055
7055
  label: { selector: '::part(label)' },
7056
7056
  internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
@@ -7062,7 +7062,7 @@ const NewPasswordClass = compose(
7062
7062
  createStyleMixin({
7063
7063
  mappings: {
7064
7064
  fontSize: [
7065
- host$2,
7065
+ host$3,
7066
7066
  {},
7067
7067
  {
7068
7068
  selector: PasswordClass.componentName,
@@ -7071,9 +7071,9 @@ const NewPasswordClass = compose(
7071
7071
  ],
7072
7072
  fontFamily: [label$1, errorMessage$1, helperText],
7073
7073
  errorMessageTextColor: { ...errorMessage$1, property: 'color' },
7074
- hostWidth: { ...host$2, property: 'width' },
7075
- hostMinWidth: { ...host$2, property: 'min-width' },
7076
- inputsRequiredIndicator: { ...host$2, property: 'content' },
7074
+ hostWidth: { ...host$3, property: 'width' },
7075
+ hostMinWidth: { ...host$3, property: 'min-width' },
7076
+ inputsRequiredIndicator: { ...host$3, property: 'content' },
7077
7077
  spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
7078
7078
  },
7079
7079
  }),
@@ -7128,32 +7128,32 @@ const NewPasswordClass = compose(
7128
7128
  },
7129
7129
  `,
7130
7130
  excludeAttrsSync: ['tabindex'],
7131
- componentName: componentName$6,
7131
+ componentName: componentName$7,
7132
7132
  })
7133
7133
  );
7134
7134
 
7135
- const vars$5 = NewPasswordClass.cssVarList;
7135
+ const vars$6 = NewPasswordClass.cssVarList;
7136
7136
 
7137
7137
  const newPassword = {
7138
- [vars$5.hostWidth]: refs.width,
7139
- [vars$5.hostMinWidth]: refs.minWidth,
7140
- [vars$5.fontSize]: refs.fontSize,
7141
- [vars$5.fontFamily]: refs.fontFamily,
7142
- [vars$5.spaceBetweenInputs]: '1em',
7143
- [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
7138
+ [vars$6.hostWidth]: refs.width,
7139
+ [vars$6.hostMinWidth]: refs.minWidth,
7140
+ [vars$6.fontSize]: refs.fontSize,
7141
+ [vars$6.fontFamily]: refs.fontFamily,
7142
+ [vars$6.spaceBetweenInputs]: '1em',
7143
+ [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
7144
7144
 
7145
7145
  _required: {
7146
7146
  // NewPassword doesn't pass `required` attribute to its Password components.
7147
7147
  // That's why we fake the required indicator on each input.
7148
7148
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
7149
- [vars$5.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
7149
+ [vars$6.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
7150
7150
  },
7151
7151
  };
7152
7152
 
7153
7153
  var newPassword$1 = /*#__PURE__*/Object.freeze({
7154
7154
  __proto__: null,
7155
7155
  default: newPassword,
7156
- vars: vars$5
7156
+ vars: vars$6
7157
7157
  });
7158
7158
 
7159
7159
  const getFileBase64 = (fileObj) => {
@@ -7168,7 +7168,7 @@ const getFilename = (fileObj) => {
7168
7168
  return fileObj.name.replace(/^.*\\/, '');
7169
7169
  };
7170
7170
 
7171
- const componentName$5 = getComponentName('upload-file');
7171
+ const componentName$6 = getComponentName('upload-file');
7172
7172
 
7173
7173
  const observedAttributes$1 = [
7174
7174
  'title',
@@ -7183,7 +7183,7 @@ const observedAttributes$1 = [
7183
7183
  'icon',
7184
7184
  ];
7185
7185
 
7186
- const BaseInputClass = createBaseInputClass({ componentName: componentName$5, baseSelector: ':host > div' });
7186
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$6, baseSelector: ':host > div' });
7187
7187
 
7188
7188
  class RawUploadFile extends BaseInputClass {
7189
7189
  static get observedAttributes() {
@@ -7354,7 +7354,7 @@ class RawUploadFile extends BaseInputClass {
7354
7354
  }
7355
7355
  }
7356
7356
 
7357
- const { host: host$1, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
7357
+ const { host: host$2, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
7358
7358
  host: { selector: () => ':host' },
7359
7359
  wrapper: { selector: () => ':host > div' },
7360
7360
  icon: { selector: () => '::slotted(*)' },
@@ -7373,8 +7373,8 @@ const UploadFileClass = compose(
7373
7373
  borderWidth: {},
7374
7374
  borderStyle: {},
7375
7375
  borderRadius: {},
7376
- hostHeight: { ...host$1, property: 'height' },
7377
- hostWidth: { ...host$1, property: 'width' },
7376
+ hostHeight: { ...host$2, property: 'height' },
7377
+ hostWidth: { ...host$2, property: 'width' },
7378
7378
  hostPadding: { property: 'padding' },
7379
7379
  gap: { ...wrapper },
7380
7380
  lineHeight: { ...wrapper, property: 'line-height' },
@@ -7393,76 +7393,76 @@ const UploadFileClass = compose(
7393
7393
  componentNameValidationMixin
7394
7394
  )(RawUploadFile);
7395
7395
 
7396
- const vars$4 = UploadFileClass.cssVarList;
7396
+ const vars$5 = UploadFileClass.cssVarList;
7397
7397
 
7398
7398
  const uploadFile = {
7399
- [vars$4.labelTextColor]: refs.labelTextColor,
7400
- [vars$4.fontFamily]: refs.fontFamily,
7399
+ [vars$5.labelTextColor]: refs.labelTextColor,
7400
+ [vars$5.fontFamily]: refs.fontFamily,
7401
7401
 
7402
- [vars$4.iconSize]: '2em',
7402
+ [vars$5.iconSize]: '2em',
7403
7403
 
7404
- [vars$4.hostPadding]: '0.75em',
7405
- [vars$4.gap]: '0.5em',
7404
+ [vars$5.hostPadding]: '0.75em',
7405
+ [vars$5.gap]: '0.5em',
7406
7406
 
7407
- [vars$4.fontSize]: '16px',
7408
- [vars$4.titleFontWeight]: '500',
7409
- [vars$4.lineHeight]: '1em',
7407
+ [vars$5.fontSize]: '16px',
7408
+ [vars$5.titleFontWeight]: '500',
7409
+ [vars$5.lineHeight]: '1em',
7410
7410
 
7411
- [vars$4.borderWidth]: refs.borderWidth,
7412
- [vars$4.borderColor]: refs.borderColor,
7413
- [vars$4.borderRadius]: refs.borderRadius,
7414
- [vars$4.borderStyle]: 'dashed',
7411
+ [vars$5.borderWidth]: refs.borderWidth,
7412
+ [vars$5.borderColor]: refs.borderColor,
7413
+ [vars$5.borderRadius]: refs.borderRadius,
7414
+ [vars$5.borderStyle]: 'dashed',
7415
7415
 
7416
7416
  _required: {
7417
- [vars$4.requiredIndicator]: refs.requiredIndicator,
7417
+ [vars$5.requiredIndicator]: refs.requiredIndicator,
7418
7418
  },
7419
7419
 
7420
7420
  size: {
7421
7421
  xs: {
7422
- [vars$4.hostHeight]: '196px',
7423
- [vars$4.hostWidth]: '200px',
7424
- [vars$4.titleFontSize]: '0.875em',
7425
- [vars$4.descriptionFontSize]: '0.875em',
7426
- [vars$4.lineHeight]: '1.25em',
7422
+ [vars$5.hostHeight]: '196px',
7423
+ [vars$5.hostWidth]: '200px',
7424
+ [vars$5.titleFontSize]: '0.875em',
7425
+ [vars$5.descriptionFontSize]: '0.875em',
7426
+ [vars$5.lineHeight]: '1.25em',
7427
7427
  },
7428
7428
  sm: {
7429
- [vars$4.hostHeight]: '216px',
7430
- [vars$4.hostWidth]: '230px',
7431
- [vars$4.titleFontSize]: '1em',
7432
- [vars$4.descriptionFontSize]: '0.875em',
7433
- [vars$4.lineHeight]: '1.25em',
7429
+ [vars$5.hostHeight]: '216px',
7430
+ [vars$5.hostWidth]: '230px',
7431
+ [vars$5.titleFontSize]: '1em',
7432
+ [vars$5.descriptionFontSize]: '0.875em',
7433
+ [vars$5.lineHeight]: '1.25em',
7434
7434
  },
7435
7435
  md: {
7436
- [vars$4.hostHeight]: '256px',
7437
- [vars$4.hostWidth]: '312px',
7438
- [vars$4.titleFontSize]: '1.125em',
7439
- [vars$4.descriptionFontSize]: '1em',
7440
- [vars$4.lineHeight]: '1.5em',
7436
+ [vars$5.hostHeight]: '256px',
7437
+ [vars$5.hostWidth]: '312px',
7438
+ [vars$5.titleFontSize]: '1.125em',
7439
+ [vars$5.descriptionFontSize]: '1em',
7440
+ [vars$5.lineHeight]: '1.5em',
7441
7441
  },
7442
7442
  lg: {
7443
- [vars$4.hostHeight]: '280px',
7444
- [vars$4.hostWidth]: '336px',
7445
- [vars$4.titleFontSize]: '1.125em',
7446
- [vars$4.descriptionFontSize]: '1.125em',
7447
- [vars$4.lineHeight]: '1.75em',
7443
+ [vars$5.hostHeight]: '280px',
7444
+ [vars$5.hostWidth]: '336px',
7445
+ [vars$5.titleFontSize]: '1.125em',
7446
+ [vars$5.descriptionFontSize]: '1.125em',
7447
+ [vars$5.lineHeight]: '1.75em',
7448
7448
  },
7449
7449
  },
7450
7450
 
7451
7451
  _fullWidth: {
7452
- [vars$4.hostWidth]: refs.width,
7452
+ [vars$5.hostWidth]: refs.width,
7453
7453
  },
7454
7454
  };
7455
7455
 
7456
7456
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
7457
7457
  __proto__: null,
7458
7458
  default: uploadFile,
7459
- vars: vars$4
7459
+ vars: vars$5
7460
7460
  });
7461
7461
 
7462
- const componentName$4 = getComponentName('button-selection-group-item');
7462
+ const componentName$5 = getComponentName('button-selection-group-item');
7463
7463
 
7464
7464
  class RawSelectItem extends createBaseClass({
7465
- componentName: componentName$4,
7465
+ componentName: componentName$5,
7466
7466
  baseSelector: ':host > descope-button',
7467
7467
  }) {
7468
7468
  get size() {
@@ -7556,38 +7556,38 @@ const ButtonSelectionGroupItemClass = compose(
7556
7556
  componentNameValidationMixin
7557
7557
  )(RawSelectItem);
7558
7558
 
7559
- const globalRefs$1 = getThemeRefs(globals);
7559
+ const globalRefs$2 = getThemeRefs(globals);
7560
7560
 
7561
- const vars$3 = ButtonSelectionGroupItemClass.cssVarList;
7561
+ const vars$4 = ButtonSelectionGroupItemClass.cssVarList;
7562
7562
 
7563
7563
  const buttonSelectionGroupItem = {
7564
- [vars$3.backgroundColor]: globalRefs$1.colors.surface.light,
7565
- [vars$3.labelTextColor]: globalRefs$1.colors.surface.contrast,
7566
- [vars$3.borderColor]: globalRefs$1.colors.surface.main,
7567
- [vars$3.borderStyle]: 'solid',
7568
- [vars$3.borderRadius]: globalRefs$1.radius.sm,
7564
+ [vars$4.backgroundColor]: globalRefs$2.colors.surface.light,
7565
+ [vars$4.labelTextColor]: globalRefs$2.colors.surface.contrast,
7566
+ [vars$4.borderColor]: globalRefs$2.colors.surface.main,
7567
+ [vars$4.borderStyle]: 'solid',
7568
+ [vars$4.borderRadius]: globalRefs$2.radius.sm,
7569
7569
 
7570
7570
  _hover: {
7571
- [vars$3.backgroundColor]: '#f4f5f5', // can we take it from the palette?
7571
+ [vars$4.backgroundColor]: '#f4f5f5', // can we take it from the palette?
7572
7572
  },
7573
7573
 
7574
7574
  _selected: {
7575
- [vars$3.borderColor]: globalRefs$1.colors.surface.contrast,
7576
- [vars$3.backgroundColor]: globalRefs$1.colors.surface.contrast,
7577
- [vars$3.labelTextColor]: globalRefs$1.colors.surface.light,
7575
+ [vars$4.borderColor]: globalRefs$2.colors.surface.contrast,
7576
+ [vars$4.backgroundColor]: globalRefs$2.colors.surface.contrast,
7577
+ [vars$4.labelTextColor]: globalRefs$2.colors.surface.light,
7578
7578
  },
7579
7579
  };
7580
7580
 
7581
7581
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
7582
7582
  __proto__: null,
7583
7583
  default: buttonSelectionGroupItem,
7584
- vars: vars$3
7584
+ vars: vars$4
7585
7585
  });
7586
7586
 
7587
- const componentName$3 = getComponentName('button-selection-group-internal');
7587
+ const componentName$4 = getComponentName('button-selection-group-internal');
7588
7588
 
7589
7589
  class ButtonSelectionGroupInternalClass extends createBaseInputClass({
7590
- componentName: componentName$3,
7590
+ componentName: componentName$4,
7591
7591
  baseSelector: 'slot',
7592
7592
  }) {
7593
7593
  constructor() {
@@ -7724,7 +7724,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
7724
7724
  }
7725
7725
  }
7726
7726
 
7727
- const componentName$2 = getComponentName('button-selection-group');
7727
+ const componentName$3 = getComponentName('button-selection-group');
7728
7728
 
7729
7729
  const customMixin$1 = (superclass) =>
7730
7730
  class ButtonSelectionGroupMixinClass extends superclass {
@@ -7799,18 +7799,18 @@ const customMixin$1 = (superclass) =>
7799
7799
  const template = document.createElement('template');
7800
7800
 
7801
7801
  template.innerHTML = `
7802
- <${componentName$3}
7802
+ <${componentName$4}
7803
7803
  name="button-selection-group"
7804
7804
  slot="input"
7805
7805
  tabindex="-1"
7806
7806
  >
7807
7807
  <slot></slot>
7808
- </${componentName$3}>
7808
+ </${componentName$4}>
7809
7809
  `;
7810
7810
 
7811
7811
  this.baseElement.appendChild(template.content.cloneNode(true));
7812
7812
 
7813
- this.inputElement = this.shadowRoot.querySelector(componentName$3);
7813
+ this.inputElement = this.shadowRoot.querySelector(componentName$4);
7814
7814
 
7815
7815
  forwardAttrs(this, this.inputElement, {
7816
7816
  includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -7829,7 +7829,7 @@ const customMixin$1 = (superclass) =>
7829
7829
  }
7830
7830
  };
7831
7831
 
7832
- const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
7832
+ const { host: host$1, label, requiredIndicator, internalWrapper, errorMessage } = {
7833
7833
  host: { selector: () => ':host' },
7834
7834
  label: { selector: '::part(label)' },
7835
7835
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -7840,8 +7840,8 @@ const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
7840
7840
  const ButtonSelectionGroupClass = compose(
7841
7841
  createStyleMixin({
7842
7842
  mappings: {
7843
- hostWidth: { ...host, property: 'width' },
7844
- fontFamily: host,
7843
+ hostWidth: { ...host$1, property: 'width' },
7844
+ fontFamily: host$1,
7845
7845
  labelTextColor: [
7846
7846
  { ...label, property: 'color' },
7847
7847
  { ...requiredIndicator, property: 'color' },
@@ -7913,29 +7913,29 @@ const ButtonSelectionGroupClass = compose(
7913
7913
  ${resetInputCursor('vaadin-text-field')}
7914
7914
  `,
7915
7915
  excludeAttrsSync: ['tabindex'],
7916
- componentName: componentName$2,
7916
+ componentName: componentName$3,
7917
7917
  })
7918
7918
  );
7919
7919
 
7920
- const globalRefs = getThemeRefs(globals);
7921
- const vars$2 = ButtonSelectionGroupClass.cssVarList;
7920
+ const globalRefs$1 = getThemeRefs(globals);
7921
+ const vars$3 = ButtonSelectionGroupClass.cssVarList;
7922
7922
 
7923
7923
  const buttonSelectionGroup = {
7924
- [vars$2.fontFamily]: refs.fontFamily,
7925
- [vars$2.labelTextColor]: refs.labelTextColor,
7926
- [vars$2.labelRequiredIndicator]: refs.requiredIndicator,
7927
- [vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
7928
- [vars$2.itemsSpacing]: globalRefs.spacing.sm,
7929
- [vars$2.hostWidth]: refs.width,
7924
+ [vars$3.fontFamily]: refs.fontFamily,
7925
+ [vars$3.labelTextColor]: refs.labelTextColor,
7926
+ [vars$3.labelRequiredIndicator]: refs.requiredIndicator,
7927
+ [vars$3.errorMessageTextColor]: refs.errorMessageTextColor,
7928
+ [vars$3.itemsSpacing]: globalRefs$1.spacing.sm,
7929
+ [vars$3.hostWidth]: refs.width,
7930
7930
  };
7931
7931
 
7932
7932
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
7933
7933
  __proto__: null,
7934
7934
  default: buttonSelectionGroup,
7935
- vars: vars$2
7935
+ vars: vars$3
7936
7936
  });
7937
7937
 
7938
- const componentName$1 = getComponentName('modal');
7938
+ const componentName$2 = getComponentName('modal');
7939
7939
 
7940
7940
  const customMixin = (superclass) =>
7941
7941
  class ModalMixinClass extends superclass {
@@ -8031,7 +8031,7 @@ const ModalClass = compose(
8031
8031
  wrappedEleName: 'vaadin-dialog',
8032
8032
  style: () => ``,
8033
8033
  excludeAttrsSync: ['tabindex', 'opened'],
8034
- componentName: componentName$1,
8034
+ componentName: componentName$2,
8035
8035
  })
8036
8036
  );
8037
8037
 
@@ -8044,13 +8044,277 @@ const modal = {
8044
8044
  [compVars.overlayWidth]: '700px',
8045
8045
  };
8046
8046
 
8047
- const vars$1 = {
8047
+ const vars$2 = {
8048
8048
  ...compVars,
8049
8049
  };
8050
8050
 
8051
8051
  var modal$1 = /*#__PURE__*/Object.freeze({
8052
8052
  __proto__: null,
8053
8053
  default: modal,
8054
+ vars: vars$2
8055
+ });
8056
+
8057
+ const isValidDataType = (data) => {
8058
+ const isValid = Array.isArray(data);
8059
+ if (!isValid) {
8060
+ // eslint-disable-next-line no-console
8061
+ console.error('data must be an array, received:', data);
8062
+ }
8063
+
8064
+ return isValid;
8065
+ };
8066
+
8067
+ const componentName$1 = getComponentName('grid');
8068
+
8069
+ const GridMixin = (superclass) =>
8070
+ class GridMixinClass extends superclass {
8071
+ #columns;
8072
+
8073
+ init() {
8074
+ super.init?.();
8075
+ this.handleColumns();
8076
+ this.forwardSelectedItemsChange();
8077
+ }
8078
+
8079
+ forwardSelectedItemsChange() {
8080
+ this.baseElement.addEventListener('selected-items-changed', (e) => {
8081
+ this.dispatchEvent(
8082
+ new CustomEvent('selected-items-changed', {
8083
+ bubbles: true,
8084
+ composed: true,
8085
+ detail: e.detail,
8086
+ })
8087
+ );
8088
+ });
8089
+ }
8090
+
8091
+ attributeChangedCallback(attrName, oldValue, newValue) {
8092
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
8093
+
8094
+ if (attrName === 'columns') {
8095
+ this.setColumnsDataFromAttr();
8096
+ }
8097
+ }
8098
+
8099
+ handleColumns() {
8100
+ if (this.columnsAttr) {
8101
+ this.setColumnsDataFromAttr();
8102
+ } else if (this.children.length) {
8103
+ this.setColumnsFromChildren();
8104
+ }
8105
+ }
8106
+
8107
+ setColumnsFromChildren() {
8108
+ this.#columns = Array.from(this.children).map((child) => {
8109
+ return {
8110
+ path: child.getAttribute('path'),
8111
+ header: child.getAttribute('header'),
8112
+ type: child.localName.match('^descope-grid-(\\w+)-column$')?.[1] || 'text',
8113
+
8114
+ attrs: ['frozen', 'resizable', 'auto-width', 'status'].reduce((acc, attrName) => {
8115
+ const attrVal = child.getAttribute(attrName);
8116
+
8117
+ if (attrVal) {
8118
+ acc[attrName] = attrVal;
8119
+ }
8120
+
8121
+ return acc;
8122
+ }, {}),
8123
+ };
8124
+ });
8125
+ }
8126
+
8127
+ get columnsAttr() {
8128
+ return this.getAttribute('columns');
8129
+ }
8130
+
8131
+ setColumnsDataFromAttr() {
8132
+ try {
8133
+ const data = JSON.parse(this.columnsAttr);
8134
+ if (isValidDataType(data)) {
8135
+ this.columns = data;
8136
+ }
8137
+ } catch (e) {
8138
+ // eslint-disable-next-line no-console
8139
+ console.error('could not parse data string from attribute "columns" -', e.message);
8140
+ }
8141
+ }
8142
+
8143
+ // eslint-disable-next-line class-methods-use-this
8144
+ #renderColumn = ({ path, header, type, attrs }) => {
8145
+ const colAttrs = Object.entries(attrs)
8146
+ .map(([key, value]) => `${key}="${value}"`)
8147
+ .join(' ');
8148
+
8149
+ const tagName = `descope-grid-${type}-column`;
8150
+
8151
+ return `<${tagName} header="${header}" path="${path}" ${colAttrs}></${tagName}>`;
8152
+ };
8153
+
8154
+ get renderColumn() {
8155
+ return this.#renderColumn;
8156
+ }
8157
+
8158
+ set renderColumn(renderFn) {
8159
+ this.#renderColumn = renderFn;
8160
+ this.renderColumns();
8161
+ }
8162
+
8163
+ getColumnsTemplate() {
8164
+ return this.#columns?.reduce?.(
8165
+ (acc, item) => acc + (this.renderColumn?.(item || {}) || ''),
8166
+ ''
8167
+ );
8168
+ }
8169
+
8170
+ renderColumns() {
8171
+ const template = this.getColumnsTemplate();
8172
+ if (template) this.innerHTML = template;
8173
+ }
8174
+
8175
+ get grid() {
8176
+ return this.shadowRoot.querySelector('vaadin-grid');
8177
+ }
8178
+
8179
+ get data() {
8180
+ return this.grid.items;
8181
+ }
8182
+
8183
+ set data(data) {
8184
+ if (isValidDataType(data) && this.grid.items !== data) {
8185
+ this.grid.items = data;
8186
+
8187
+ if (this.grid.selectedItems) {
8188
+ const itemsIds = new Set(
8189
+ this.grid.items.map((item) => item[this.uniqueColumnId] ?? item)
8190
+ );
8191
+ this.grid.selectedItems = this.grid.selectedItems.filter((selectedItem) =>
8192
+ itemsIds.has(selectedItem[this.uniqueColumnId] ?? selectedItem)
8193
+ );
8194
+ }
8195
+ }
8196
+ }
8197
+
8198
+ get columns() {
8199
+ return this.#columns;
8200
+ }
8201
+
8202
+ set columns(data) {
8203
+ this.#columns = data;
8204
+ this.renderColumns();
8205
+ }
8206
+
8207
+ get paths() {
8208
+ return this.columns.map((col) => col.path);
8209
+ }
8210
+
8211
+ get uniqueColumnId() {
8212
+ return this.getAttribute('unique-column-id');
8213
+ }
8214
+ };
8215
+
8216
+ const {
8217
+ host,
8218
+ headerRow,
8219
+ contentRow,
8220
+ firstRow,
8221
+ sortIndicators,
8222
+ activeSortIndicator,
8223
+ selectedRow,
8224
+ rowSeparator,
8225
+ resizeHandle,
8226
+ } = {
8227
+ host: { selector: () => 'vaadin-grid' },
8228
+ headerRow: { selector: () => '::part(header-cell)' },
8229
+ contentRow: { selector: () => '::part(cell)' },
8230
+ firstRow: { selector: () => '::part(first-header-row-cell)' },
8231
+ selectedRow: { selector: () => '::part(selected-row-cell)' },
8232
+ sortIndicators: { selector: () => 'vaadin-grid-sorter::part(indicators)' },
8233
+ activeSortIndicator: { selector: () => 'vaadin-grid-sorter[direction]' },
8234
+ rowSeparator: { selector: () => 'vaadin-grid::part(body-cell)' },
8235
+ resizeHandle: { selector: () => '::part(resize-handle)' },
8236
+ };
8237
+
8238
+ const GridClass = compose(
8239
+ createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
8240
+ createStyleMixin({
8241
+ mappings: {
8242
+ hostWidth: { selector: () => ':host', property: 'width' },
8243
+ hostHeight: { selector: () => ':host', property: 'height' },
8244
+ hostMinHeight: { selector: () => ':host', property: 'min-height' },
8245
+ fontFamily: [{ ...headerRow }, { ...contentRow }],
8246
+ fontSize: [{ ...headerRow }, { ...contentRow }],
8247
+ fontWeight: { ...contentRow },
8248
+ valueTextColor: { ...contentRow, property: 'color' },
8249
+ sortIndicatorsColor: { ...sortIndicators, property: 'color' },
8250
+ activeSortIndicator: { ...activeSortIndicator, property: 'color' },
8251
+ inputBorderColor: { ...host, property: 'border-color' },
8252
+ inputBorderWidth: { ...host, property: 'border-width' },
8253
+ inputBorderStyle: { ...host, property: 'border-style' },
8254
+ inputBorderRadius: { ...host, property: 'border-radius' },
8255
+ selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
8256
+ selectedTextColor: { ...selectedRow, property: 'color' },
8257
+ separatorColor: [
8258
+ { ...firstRow, property: 'border-bottom-color' },
8259
+ { ...rowSeparator, property: 'border-top-color' },
8260
+ ],
8261
+ resizeHandleColor: { ...resizeHandle, property: 'background-color' },
8262
+ },
8263
+ }),
8264
+ draggableMixin,
8265
+ componentNameValidationMixin,
8266
+ GridMixin
8267
+ )(
8268
+ createProxy({
8269
+ slots: [''],
8270
+ wrappedEleName: 'vaadin-grid',
8271
+ style: () => `
8272
+ vaadin-grid {
8273
+ overflow: hidden;
8274
+ height: 100%;
8275
+ min-height: 300px;
8276
+ }
8277
+ `,
8278
+ excludeAttrsSync: ['columns', 'tabindex'],
8279
+ componentName: componentName$1,
8280
+ })
8281
+ );
8282
+
8283
+ const globalRefs = getThemeRefs(globals);
8284
+ const vars$1 = GridClass.cssVarList;
8285
+
8286
+ const grid = {
8287
+ [vars$1.hostWidth]: '100%',
8288
+ [vars$1.hostHeight]: '100%',
8289
+ [vars$1.hostMinHeight]: '400px',
8290
+
8291
+ [vars$1.fontSize]: refs.fontSize,
8292
+ [vars$1.fontFamily]: refs.fontFamily,
8293
+
8294
+ [vars$1.sortIndicatorsColor]: globalRefs.colors.primary.main,
8295
+ [vars$1.activeSortIndicator]: globalRefs.colors.primary.main,
8296
+ [vars$1.resizeHandleColor]: globalRefs.colors.surface.main,
8297
+
8298
+ [vars$1.inputBorderWidth]: refs.borderWidth,
8299
+ [vars$1.inputBorderStyle]: refs.borderStyle,
8300
+ [vars$1.inputBorderRadius]: refs.borderRadius,
8301
+ [vars$1.inputBorderColor]: 'transparent',
8302
+
8303
+ [vars$1.separatorColor]: refs.borderColor,
8304
+
8305
+ [vars$1.valueTextColor]: globalRefs.colors.surface.contrast,
8306
+ [vars$1.selectedBackgroundColor]: globalRefs.colors.primary.main,
8307
+ [vars$1.selectedTextColor]: globalRefs.colors.primary.contrast,
8308
+
8309
+ _bordered: {
8310
+ [vars$1.inputBorderColor]: refs.borderColor,
8311
+ },
8312
+ };
8313
+
8314
+ var grid$1 = /*#__PURE__*/Object.freeze({
8315
+ __proto__: null,
8316
+ default: grid,
8317
+ grid: grid,
8054
8318
  vars: vars$1
8055
8319
  });
8056
8320
 
@@ -8082,6 +8346,7 @@ const components = {
8082
8346
  buttonSelectionGroupItem: buttonSelectionGroupItem$1,
8083
8347
  buttonSelectionGroup: buttonSelectionGroup$1,
8084
8348
  modal: modal$1,
8349
+ grid: grid$1,
8085
8350
  };
8086
8351
 
8087
8352
  const theme = Object.keys(components).reduce(
@@ -8094,7 +8359,7 @@ const vars = Object.keys(components).reduce(
8094
8359
  );
8095
8360
 
8096
8361
  const defaultTheme = { globals, components: theme };
8097
- const themeVars = { globals: vars$s, components: vars };
8362
+ const themeVars = { globals: vars$t, components: vars };
8098
8363
 
8099
8364
  const componentName = getComponentName('recaptcha');
8100
8365