@descope/web-components-ui 1.0.294 → 1.0.295

Sign up to get free protection for your applications and to get access to all the features.
@@ -630,7 +630,7 @@ const globals = {
630
630
  fonts,
631
631
  direction,
632
632
  };
633
- const vars$D = getThemeVars(globals);
633
+ const vars$E = getThemeVars(globals);
634
634
 
635
635
  const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
636
636
 
@@ -2576,7 +2576,7 @@ const clickableMixin = (superclass) =>
2576
2576
  }
2577
2577
  };
2578
2578
 
2579
- const componentName$M = getComponentName('button');
2579
+ const componentName$N = getComponentName('button');
2580
2580
 
2581
2581
  const resetStyles = `
2582
2582
  :host {
@@ -2614,7 +2614,7 @@ const iconStyles = `
2614
2614
 
2615
2615
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
2616
2616
 
2617
- const { host: host$m, label: label$a } = {
2617
+ const { host: host$n, label: label$a } = {
2618
2618
  host: { selector: () => ':host' },
2619
2619
  label: { selector: '::part(label)' },
2620
2620
  };
@@ -2626,7 +2626,7 @@ const ButtonClass = compose(
2626
2626
  mappings: {
2627
2627
  hostWidth: { property: 'width' },
2628
2628
  hostHeight: { property: 'height' },
2629
- hostDirection: { ...host$m, property: 'direction' },
2629
+ hostDirection: { ...host$n, property: 'direction' },
2630
2630
  fontSize: {},
2631
2631
  fontFamily: {},
2632
2632
 
@@ -2678,7 +2678,7 @@ const ButtonClass = compose(
2678
2678
  }
2679
2679
  `,
2680
2680
  excludeAttrsSync: ['tabindex'],
2681
- componentName: componentName$M,
2681
+ componentName: componentName$N,
2682
2682
  })
2683
2683
  );
2684
2684
 
@@ -2715,31 +2715,31 @@ loadingIndicatorStyles = `
2715
2715
  }
2716
2716
  `;
2717
2717
 
2718
- const globalRefs$m = getThemeRefs(globals);
2718
+ const globalRefs$n = getThemeRefs(globals);
2719
2719
  const compVars$5 = ButtonClass.cssVarList;
2720
2720
 
2721
2721
  const mode = {
2722
- primary: globalRefs$m.colors.primary,
2723
- secondary: globalRefs$m.colors.secondary,
2724
- success: globalRefs$m.colors.success,
2725
- error: globalRefs$m.colors.error,
2726
- surface: globalRefs$m.colors.surface,
2722
+ primary: globalRefs$n.colors.primary,
2723
+ secondary: globalRefs$n.colors.secondary,
2724
+ success: globalRefs$n.colors.success,
2725
+ error: globalRefs$n.colors.error,
2726
+ surface: globalRefs$n.colors.surface,
2727
2727
  };
2728
2728
 
2729
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$M);
2729
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$N);
2730
2730
 
2731
2731
  const button = {
2732
2732
  ...helperTheme$3,
2733
2733
 
2734
- [compVars$5.fontFamily]: globalRefs$m.fonts.font1.family,
2734
+ [compVars$5.fontFamily]: globalRefs$n.fonts.font1.family,
2735
2735
 
2736
2736
  [compVars$5.cursor]: 'pointer',
2737
2737
  [compVars$5.hostHeight]: '3em',
2738
2738
  [compVars$5.hostWidth]: 'auto',
2739
- [compVars$5.hostDirection]: globalRefs$m.direction,
2739
+ [compVars$5.hostDirection]: globalRefs$n.direction,
2740
2740
 
2741
- [compVars$5.borderRadius]: globalRefs$m.radius.sm,
2742
- [compVars$5.borderWidth]: globalRefs$m.border.xs,
2741
+ [compVars$5.borderRadius]: globalRefs$n.radius.sm,
2742
+ [compVars$5.borderWidth]: globalRefs$n.border.xs,
2743
2743
  [compVars$5.borderStyle]: 'solid',
2744
2744
  [compVars$5.borderColor]: 'transparent',
2745
2745
 
@@ -2782,10 +2782,10 @@ const button = {
2782
2782
  },
2783
2783
 
2784
2784
  _disabled: {
2785
- [helperVars$3.main]: globalRefs$m.colors.surface.light,
2786
- [helperVars$3.dark]: globalRefs$m.colors.surface.dark,
2787
- [helperVars$3.light]: globalRefs$m.colors.surface.light,
2788
- [helperVars$3.contrast]: globalRefs$m.colors.surface.main,
2785
+ [helperVars$3.main]: globalRefs$n.colors.surface.light,
2786
+ [helperVars$3.dark]: globalRefs$n.colors.surface.dark,
2787
+ [helperVars$3.light]: globalRefs$n.colors.surface.light,
2788
+ [helperVars$3.contrast]: globalRefs$n.colors.surface.main,
2789
2789
  },
2790
2790
 
2791
2791
  variant: {
@@ -2833,7 +2833,7 @@ const button = {
2833
2833
  },
2834
2834
  };
2835
2835
 
2836
- const vars$C = {
2836
+ const vars$D = {
2837
2837
  ...compVars$5,
2838
2838
  ...helperVars$3,
2839
2839
  };
@@ -2841,11 +2841,11 @@ const vars$C = {
2841
2841
  var button$1 = /*#__PURE__*/Object.freeze({
2842
2842
  __proto__: null,
2843
2843
  default: button,
2844
- vars: vars$C
2844
+ vars: vars$D
2845
2845
  });
2846
2846
 
2847
2847
  const {
2848
- host: host$l,
2848
+ host: host$m,
2849
2849
  label: label$9,
2850
2850
  placeholder: placeholder$3,
2851
2851
  requiredIndicator: requiredIndicator$b,
@@ -2870,12 +2870,12 @@ const {
2870
2870
 
2871
2871
  var textFieldMappings = {
2872
2872
  // we apply font-size also on the host so we can set its width with em
2873
- fontSize: [{}, host$l],
2873
+ fontSize: [{}, host$m],
2874
2874
  fontFamily: [label$9, inputField$6, helperText$a, errorMessage$c],
2875
2875
 
2876
- hostWidth: { ...host$l, property: 'width' },
2877
- hostMinWidth: { ...host$l, property: 'min-width' },
2878
- hostDirection: { ...host$l, property: 'direction' },
2876
+ hostWidth: { ...host$m, property: 'width' },
2877
+ hostMinWidth: { ...host$m, property: 'min-width' },
2878
+ hostDirection: { ...host$m, property: 'direction' },
2879
2879
 
2880
2880
  inputBackgroundColor: { ...inputField$6, property: 'background-color' },
2881
2881
 
@@ -3049,7 +3049,7 @@ const resetInputLabelPosition = (name) => `
3049
3049
  }
3050
3050
  `;
3051
3051
 
3052
- const componentName$L = getComponentName('text-field');
3052
+ const componentName$M = getComponentName('text-field');
3053
3053
 
3054
3054
  const observedAttrs = ['type'];
3055
3055
 
@@ -3099,29 +3099,29 @@ const TextFieldClass = compose(
3099
3099
  ${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
3100
3100
  `,
3101
3101
  excludeAttrsSync: ['tabindex'],
3102
- componentName: componentName$L,
3102
+ componentName: componentName$M,
3103
3103
  })
3104
3104
  );
3105
3105
 
3106
- const componentName$K = getComponentName('input-wrapper');
3107
- const globalRefs$l = getThemeRefs(globals);
3106
+ const componentName$L = getComponentName('input-wrapper');
3107
+ const globalRefs$m = getThemeRefs(globals);
3108
3108
 
3109
- const [theme$1, refs, vars$B] = createHelperVars(
3109
+ const [theme$1, refs, vars$C] = createHelperVars(
3110
3110
  {
3111
- labelTextColor: globalRefs$l.colors.surface.dark,
3111
+ labelTextColor: globalRefs$m.colors.surface.dark,
3112
3112
  labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
3113
- valueTextColor: globalRefs$l.colors.surface.contrast,
3114
- placeholderTextColor: globalRefs$l.colors.surface.dark,
3113
+ valueTextColor: globalRefs$m.colors.surface.contrast,
3114
+ placeholderTextColor: globalRefs$m.colors.surface.dark,
3115
3115
  requiredIndicator: "'*'",
3116
- helperTextColor: globalRefs$l.colors.surface.dark,
3117
- errorMessageTextColor: globalRefs$l.colors.error.main,
3118
- successMessageTextColor: globalRefs$l.colors.success.main,
3116
+ helperTextColor: globalRefs$m.colors.surface.dark,
3117
+ errorMessageTextColor: globalRefs$m.colors.error.main,
3118
+ successMessageTextColor: globalRefs$m.colors.success.main,
3119
3119
 
3120
- borderWidth: globalRefs$l.border.xs,
3121
- borderRadius: globalRefs$l.radius.xs,
3120
+ borderWidth: globalRefs$m.border.xs,
3121
+ borderRadius: globalRefs$m.radius.xs,
3122
3122
  borderColor: 'transparent',
3123
3123
 
3124
- outlineWidth: globalRefs$l.border.sm,
3124
+ outlineWidth: globalRefs$m.border.sm,
3125
3125
  outlineStyle: 'solid',
3126
3126
  outlineColor: 'transparent',
3127
3127
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -3132,11 +3132,11 @@ const [theme$1, refs, vars$B] = createHelperVars(
3132
3132
  horizontalPadding: '0.5em',
3133
3133
  verticalPadding: '0.5em',
3134
3134
 
3135
- backgroundColor: globalRefs$l.colors.surface.main,
3135
+ backgroundColor: globalRefs$m.colors.surface.main,
3136
3136
 
3137
- fontFamily: globalRefs$l.fonts.font1.family,
3137
+ fontFamily: globalRefs$m.fonts.font1.family,
3138
3138
 
3139
- direction: globalRefs$l.direction,
3139
+ direction: globalRefs$m.direction,
3140
3140
 
3141
3141
  overlayOpacity: '0.3',
3142
3142
 
@@ -3152,77 +3152,77 @@ const [theme$1, refs, vars$B] = createHelperVars(
3152
3152
  },
3153
3153
 
3154
3154
  _focused: {
3155
- outlineColor: globalRefs$l.colors.surface.light,
3155
+ outlineColor: globalRefs$m.colors.surface.light,
3156
3156
  _invalid: {
3157
- outlineColor: globalRefs$l.colors.error.main,
3157
+ outlineColor: globalRefs$m.colors.error.main,
3158
3158
  },
3159
3159
  },
3160
3160
 
3161
3161
  _bordered: {
3162
- outlineWidth: globalRefs$l.border.xs,
3163
- borderColor: globalRefs$l.colors.surface.light,
3162
+ outlineWidth: globalRefs$m.border.xs,
3163
+ borderColor: globalRefs$m.colors.surface.light,
3164
3164
  borderStyle: 'solid',
3165
3165
  _invalid: {
3166
- borderColor: globalRefs$l.colors.error.main,
3166
+ borderColor: globalRefs$m.colors.error.main,
3167
3167
  },
3168
3168
  },
3169
3169
 
3170
3170
  _disabled: {
3171
- labelTextColor: globalRefs$l.colors.surface.light,
3172
- borderColor: globalRefs$l.colors.surface.light,
3173
- valueTextColor: globalRefs$l.colors.surface.light,
3174
- placeholderTextColor: globalRefs$l.colors.surface.light,
3175
- helperTextColor: globalRefs$l.colors.surface.light,
3176
- backgroundColor: globalRefs$l.colors.surface.main,
3171
+ labelTextColor: globalRefs$m.colors.surface.light,
3172
+ borderColor: globalRefs$m.colors.surface.light,
3173
+ valueTextColor: globalRefs$m.colors.surface.light,
3174
+ placeholderTextColor: globalRefs$m.colors.surface.light,
3175
+ helperTextColor: globalRefs$m.colors.surface.light,
3176
+ backgroundColor: globalRefs$m.colors.surface.main,
3177
3177
  },
3178
3178
  },
3179
- componentName$K
3179
+ componentName$L
3180
3180
  );
3181
3181
 
3182
3182
  var inputWrapper = /*#__PURE__*/Object.freeze({
3183
3183
  __proto__: null,
3184
3184
  default: theme$1,
3185
3185
  refs: refs,
3186
- vars: vars$B
3186
+ vars: vars$C
3187
3187
  });
3188
3188
 
3189
- const vars$A = TextFieldClass.cssVarList;
3190
-
3191
- const textField = {
3192
- [vars$A.hostWidth]: refs.width,
3193
- [vars$A.hostMinWidth]: refs.minWidth,
3194
- [vars$A.hostDirection]: refs.direction,
3195
- [vars$A.fontSize]: refs.fontSize,
3196
- [vars$A.fontFamily]: refs.fontFamily,
3197
- [vars$A.labelTextColor]: refs.labelTextColor,
3198
- [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
3199
- [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
3200
- [vars$A.inputValueTextColor]: refs.valueTextColor,
3201
- [vars$A.inputPlaceholderColor]: refs.placeholderTextColor,
3202
- [vars$A.inputBorderWidth]: refs.borderWidth,
3203
- [vars$A.inputBorderStyle]: refs.borderStyle,
3204
- [vars$A.inputBorderColor]: refs.borderColor,
3205
- [vars$A.inputBorderRadius]: refs.borderRadius,
3206
- [vars$A.inputOutlineWidth]: refs.outlineWidth,
3207
- [vars$A.inputOutlineStyle]: refs.outlineStyle,
3208
- [vars$A.inputOutlineColor]: refs.outlineColor,
3209
- [vars$A.inputOutlineOffset]: refs.outlineOffset,
3210
- [vars$A.inputBackgroundColor]: refs.backgroundColor,
3211
- [vars$A.inputHeight]: refs.inputHeight,
3212
- [vars$A.inputHorizontalPadding]: refs.horizontalPadding,
3213
- [vars$A.helperTextColor]: refs.helperTextColor,
3189
+ const vars$B = TextFieldClass.cssVarList;
3190
+
3191
+ const textField$1 = {
3192
+ [vars$B.hostWidth]: refs.width,
3193
+ [vars$B.hostMinWidth]: refs.minWidth,
3194
+ [vars$B.hostDirection]: refs.direction,
3195
+ [vars$B.fontSize]: refs.fontSize,
3196
+ [vars$B.fontFamily]: refs.fontFamily,
3197
+ [vars$B.labelTextColor]: refs.labelTextColor,
3198
+ [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
3199
+ [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
3200
+ [vars$B.inputValueTextColor]: refs.valueTextColor,
3201
+ [vars$B.inputPlaceholderColor]: refs.placeholderTextColor,
3202
+ [vars$B.inputBorderWidth]: refs.borderWidth,
3203
+ [vars$B.inputBorderStyle]: refs.borderStyle,
3204
+ [vars$B.inputBorderColor]: refs.borderColor,
3205
+ [vars$B.inputBorderRadius]: refs.borderRadius,
3206
+ [vars$B.inputOutlineWidth]: refs.outlineWidth,
3207
+ [vars$B.inputOutlineStyle]: refs.outlineStyle,
3208
+ [vars$B.inputOutlineColor]: refs.outlineColor,
3209
+ [vars$B.inputOutlineOffset]: refs.outlineOffset,
3210
+ [vars$B.inputBackgroundColor]: refs.backgroundColor,
3211
+ [vars$B.inputHeight]: refs.inputHeight,
3212
+ [vars$B.inputHorizontalPadding]: refs.horizontalPadding,
3213
+ [vars$B.helperTextColor]: refs.helperTextColor,
3214
3214
  textAlign: {
3215
- right: { [vars$A.inputTextAlign]: 'right' },
3216
- left: { [vars$A.inputTextAlign]: 'left' },
3217
- center: { [vars$A.inputTextAlign]: 'center' },
3215
+ right: { [vars$B.inputTextAlign]: 'right' },
3216
+ left: { [vars$B.inputTextAlign]: 'left' },
3217
+ center: { [vars$B.inputTextAlign]: 'center' },
3218
3218
  },
3219
3219
  };
3220
3220
 
3221
- var textField$1 = /*#__PURE__*/Object.freeze({
3221
+ var textField$2 = /*#__PURE__*/Object.freeze({
3222
3222
  __proto__: null,
3223
- default: textField,
3224
- textField: textField,
3225
- vars: vars$A
3223
+ default: textField$1,
3224
+ textField: textField$1,
3225
+ vars: vars$B
3226
3226
  });
3227
3227
 
3228
3228
  const passwordDraggableMixin = (superclass) =>
@@ -3259,10 +3259,10 @@ const passwordDraggableMixin = (superclass) =>
3259
3259
  }
3260
3260
  };
3261
3261
 
3262
- const componentName$J = getComponentName('password');
3262
+ const componentName$K = getComponentName('password');
3263
3263
 
3264
3264
  const {
3265
- host: host$k,
3265
+ host: host$l,
3266
3266
  inputField: inputField$5,
3267
3267
  inputElement: inputElement$2,
3268
3268
  inputElementPlaceholder,
@@ -3288,10 +3288,10 @@ const {
3288
3288
  const PasswordClass = compose(
3289
3289
  createStyleMixin({
3290
3290
  mappings: {
3291
- hostWidth: { ...host$k, property: 'width' },
3292
- hostMinWidth: { ...host$k, property: 'min-width' },
3293
- hostDirection: { ...host$k, property: 'direction' },
3294
- fontSize: [{}, host$k],
3291
+ hostWidth: { ...host$l, property: 'width' },
3292
+ hostMinWidth: { ...host$l, property: 'min-width' },
3293
+ hostDirection: { ...host$l, property: 'direction' },
3294
+ fontSize: [{}, host$l],
3295
3295
  fontFamily: [label$8, inputField$5, errorMessage$b, helperText$9],
3296
3296
  inputHeight: { ...inputField$5, property: 'height' },
3297
3297
  inputHorizontalPadding: [
@@ -3388,46 +3388,46 @@ const PasswordClass = compose(
3388
3388
  }
3389
3389
  `,
3390
3390
  excludeAttrsSync: ['tabindex'],
3391
- componentName: componentName$J,
3391
+ componentName: componentName$K,
3392
3392
  })
3393
3393
  );
3394
3394
 
3395
- const globalRefs$k = getThemeRefs(globals);
3396
- const vars$z = PasswordClass.cssVarList;
3395
+ const globalRefs$l = getThemeRefs(globals);
3396
+ const vars$A = PasswordClass.cssVarList;
3397
3397
 
3398
3398
  const password = {
3399
- [vars$z.hostWidth]: refs.width,
3400
- [vars$z.hostDirection]: refs.direction,
3401
- [vars$z.fontSize]: refs.fontSize,
3402
- [vars$z.fontFamily]: refs.fontFamily,
3403
- [vars$z.labelTextColor]: refs.labelTextColor,
3404
- [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
3405
- [vars$z.inputHorizontalPadding]: refs.horizontalPadding,
3406
- [vars$z.inputHeight]: refs.inputHeight,
3407
- [vars$z.inputBackgroundColor]: refs.backgroundColor,
3408
- [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
3409
- [vars$z.inputValueTextColor]: refs.valueTextColor,
3410
- [vars$z.inputPlaceholderTextColor]: refs.placeholderTextColor,
3411
- [vars$z.inputBorderWidth]: refs.borderWidth,
3412
- [vars$z.inputBorderStyle]: refs.borderStyle,
3413
- [vars$z.inputBorderColor]: refs.borderColor,
3414
- [vars$z.inputBorderRadius]: refs.borderRadius,
3415
- [vars$z.inputOutlineWidth]: refs.outlineWidth,
3416
- [vars$z.inputOutlineStyle]: refs.outlineStyle,
3417
- [vars$z.inputOutlineColor]: refs.outlineColor,
3418
- [vars$z.inputOutlineOffset]: refs.outlineOffset,
3419
- [vars$z.revealButtonOffset]: globalRefs$k.spacing.md,
3420
- [vars$z.revealButtonSize]: refs.toggleButtonSize,
3421
- [vars$z.revealButtonColor]: refs.placeholderTextColor,
3399
+ [vars$A.hostWidth]: refs.width,
3400
+ [vars$A.hostDirection]: refs.direction,
3401
+ [vars$A.fontSize]: refs.fontSize,
3402
+ [vars$A.fontFamily]: refs.fontFamily,
3403
+ [vars$A.labelTextColor]: refs.labelTextColor,
3404
+ [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
3405
+ [vars$A.inputHorizontalPadding]: refs.horizontalPadding,
3406
+ [vars$A.inputHeight]: refs.inputHeight,
3407
+ [vars$A.inputBackgroundColor]: refs.backgroundColor,
3408
+ [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
3409
+ [vars$A.inputValueTextColor]: refs.valueTextColor,
3410
+ [vars$A.inputPlaceholderTextColor]: refs.placeholderTextColor,
3411
+ [vars$A.inputBorderWidth]: refs.borderWidth,
3412
+ [vars$A.inputBorderStyle]: refs.borderStyle,
3413
+ [vars$A.inputBorderColor]: refs.borderColor,
3414
+ [vars$A.inputBorderRadius]: refs.borderRadius,
3415
+ [vars$A.inputOutlineWidth]: refs.outlineWidth,
3416
+ [vars$A.inputOutlineStyle]: refs.outlineStyle,
3417
+ [vars$A.inputOutlineColor]: refs.outlineColor,
3418
+ [vars$A.inputOutlineOffset]: refs.outlineOffset,
3419
+ [vars$A.revealButtonOffset]: globalRefs$l.spacing.md,
3420
+ [vars$A.revealButtonSize]: refs.toggleButtonSize,
3421
+ [vars$A.revealButtonColor]: refs.placeholderTextColor,
3422
3422
  };
3423
3423
 
3424
3424
  var password$1 = /*#__PURE__*/Object.freeze({
3425
3425
  __proto__: null,
3426
3426
  default: password,
3427
- vars: vars$z
3427
+ vars: vars$A
3428
3428
  });
3429
3429
 
3430
- const componentName$I = getComponentName('number-field');
3430
+ const componentName$J = getComponentName('number-field');
3431
3431
 
3432
3432
  const NumberFieldClass = compose(
3433
3433
  createStyleMixin({
@@ -3453,43 +3453,43 @@ const NumberFieldClass = compose(
3453
3453
  ${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
3454
3454
  `,
3455
3455
  excludeAttrsSync: ['tabindex'],
3456
- componentName: componentName$I,
3456
+ componentName: componentName$J,
3457
3457
  })
3458
3458
  );
3459
3459
 
3460
- const vars$y = NumberFieldClass.cssVarList;
3460
+ const vars$z = NumberFieldClass.cssVarList;
3461
3461
 
3462
3462
  const numberField = {
3463
- [vars$y.hostWidth]: refs.width,
3464
- [vars$y.hostMinWidth]: refs.minWidth,
3465
- [vars$y.hostDirection]: refs.direction,
3466
- [vars$y.fontSize]: refs.fontSize,
3467
- [vars$y.fontFamily]: refs.fontFamily,
3468
- [vars$y.labelTextColor]: refs.labelTextColor,
3469
- [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
3470
- [vars$y.inputValueTextColor]: refs.valueTextColor,
3471
- [vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
3472
- [vars$y.inputBorderWidth]: refs.borderWidth,
3473
- [vars$y.inputBorderStyle]: refs.borderStyle,
3474
- [vars$y.inputBorderColor]: refs.borderColor,
3475
- [vars$y.inputBorderRadius]: refs.borderRadius,
3476
- [vars$y.inputOutlineWidth]: refs.outlineWidth,
3477
- [vars$y.inputOutlineStyle]: refs.outlineStyle,
3478
- [vars$y.inputOutlineColor]: refs.outlineColor,
3479
- [vars$y.inputOutlineOffset]: refs.outlineOffset,
3480
- [vars$y.inputBackgroundColor]: refs.backgroundColor,
3481
- [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
3482
- [vars$y.inputHorizontalPadding]: refs.horizontalPadding,
3483
- [vars$y.inputHeight]: refs.inputHeight,
3463
+ [vars$z.hostWidth]: refs.width,
3464
+ [vars$z.hostMinWidth]: refs.minWidth,
3465
+ [vars$z.hostDirection]: refs.direction,
3466
+ [vars$z.fontSize]: refs.fontSize,
3467
+ [vars$z.fontFamily]: refs.fontFamily,
3468
+ [vars$z.labelTextColor]: refs.labelTextColor,
3469
+ [vars$z.errorMessageTextColor]: refs.errorMessageTextColor,
3470
+ [vars$z.inputValueTextColor]: refs.valueTextColor,
3471
+ [vars$z.inputPlaceholderColor]: refs.placeholderTextColor,
3472
+ [vars$z.inputBorderWidth]: refs.borderWidth,
3473
+ [vars$z.inputBorderStyle]: refs.borderStyle,
3474
+ [vars$z.inputBorderColor]: refs.borderColor,
3475
+ [vars$z.inputBorderRadius]: refs.borderRadius,
3476
+ [vars$z.inputOutlineWidth]: refs.outlineWidth,
3477
+ [vars$z.inputOutlineStyle]: refs.outlineStyle,
3478
+ [vars$z.inputOutlineColor]: refs.outlineColor,
3479
+ [vars$z.inputOutlineOffset]: refs.outlineOffset,
3480
+ [vars$z.inputBackgroundColor]: refs.backgroundColor,
3481
+ [vars$z.labelRequiredIndicator]: refs.requiredIndicator,
3482
+ [vars$z.inputHorizontalPadding]: refs.horizontalPadding,
3483
+ [vars$z.inputHeight]: refs.inputHeight,
3484
3484
  };
3485
3485
 
3486
3486
  var numberField$1 = /*#__PURE__*/Object.freeze({
3487
3487
  __proto__: null,
3488
3488
  default: numberField,
3489
- vars: vars$y
3489
+ vars: vars$z
3490
3490
  });
3491
3491
 
3492
- const componentName$H = getComponentName('email-field');
3492
+ const componentName$I = getComponentName('email-field');
3493
3493
 
3494
3494
  const customMixin$7 = (superclass) =>
3495
3495
  class EmailFieldMixinClass extends superclass {
@@ -3524,46 +3524,46 @@ const EmailFieldClass = compose(
3524
3524
  ${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}
3525
3525
  `,
3526
3526
  excludeAttrsSync: ['tabindex'],
3527
- componentName: componentName$H,
3527
+ componentName: componentName$I,
3528
3528
  })
3529
3529
  );
3530
3530
 
3531
- const vars$x = EmailFieldClass.cssVarList;
3531
+ const vars$y = EmailFieldClass.cssVarList;
3532
3532
 
3533
3533
  const emailField = {
3534
- [vars$x.hostWidth]: refs.width,
3535
- [vars$x.hostMinWidth]: refs.minWidth,
3536
- [vars$x.hostDirection]: refs.direction,
3537
- [vars$x.fontSize]: refs.fontSize,
3538
- [vars$x.fontFamily]: refs.fontFamily,
3539
- [vars$x.labelTextColor]: refs.labelTextColor,
3540
- [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
3541
- [vars$x.inputValueTextColor]: refs.valueTextColor,
3542
- [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
3543
- [vars$x.inputPlaceholderColor]: refs.placeholderTextColor,
3544
- [vars$x.inputBorderWidth]: refs.borderWidth,
3545
- [vars$x.inputBorderStyle]: refs.borderStyle,
3546
- [vars$x.inputBorderColor]: refs.borderColor,
3547
- [vars$x.inputBorderRadius]: refs.borderRadius,
3548
- [vars$x.inputOutlineWidth]: refs.outlineWidth,
3549
- [vars$x.inputOutlineStyle]: refs.outlineStyle,
3550
- [vars$x.inputOutlineColor]: refs.outlineColor,
3551
- [vars$x.inputOutlineOffset]: refs.outlineOffset,
3552
- [vars$x.inputBackgroundColor]: refs.backgroundColor,
3553
- [vars$x.inputHorizontalPadding]: refs.horizontalPadding,
3554
- [vars$x.inputHeight]: refs.inputHeight,
3534
+ [vars$y.hostWidth]: refs.width,
3535
+ [vars$y.hostMinWidth]: refs.minWidth,
3536
+ [vars$y.hostDirection]: refs.direction,
3537
+ [vars$y.fontSize]: refs.fontSize,
3538
+ [vars$y.fontFamily]: refs.fontFamily,
3539
+ [vars$y.labelTextColor]: refs.labelTextColor,
3540
+ [vars$y.errorMessageTextColor]: refs.errorMessageTextColor,
3541
+ [vars$y.inputValueTextColor]: refs.valueTextColor,
3542
+ [vars$y.labelRequiredIndicator]: refs.requiredIndicator,
3543
+ [vars$y.inputPlaceholderColor]: refs.placeholderTextColor,
3544
+ [vars$y.inputBorderWidth]: refs.borderWidth,
3545
+ [vars$y.inputBorderStyle]: refs.borderStyle,
3546
+ [vars$y.inputBorderColor]: refs.borderColor,
3547
+ [vars$y.inputBorderRadius]: refs.borderRadius,
3548
+ [vars$y.inputOutlineWidth]: refs.outlineWidth,
3549
+ [vars$y.inputOutlineStyle]: refs.outlineStyle,
3550
+ [vars$y.inputOutlineColor]: refs.outlineColor,
3551
+ [vars$y.inputOutlineOffset]: refs.outlineOffset,
3552
+ [vars$y.inputBackgroundColor]: refs.backgroundColor,
3553
+ [vars$y.inputHorizontalPadding]: refs.horizontalPadding,
3554
+ [vars$y.inputHeight]: refs.inputHeight,
3555
3555
  };
3556
3556
 
3557
3557
  var emailField$1 = /*#__PURE__*/Object.freeze({
3558
3558
  __proto__: null,
3559
3559
  default: emailField,
3560
- vars: vars$x
3560
+ vars: vars$y
3561
3561
  });
3562
3562
 
3563
- const componentName$G = getComponentName('text-area');
3563
+ const componentName$H = getComponentName('text-area');
3564
3564
 
3565
3565
  const {
3566
- host: host$j,
3566
+ host: host$k,
3567
3567
  label: label$7,
3568
3568
  placeholder: placeholder$2,
3569
3569
  inputField: inputField$4,
@@ -3585,10 +3585,10 @@ const {
3585
3585
  const TextAreaClass = compose(
3586
3586
  createStyleMixin({
3587
3587
  mappings: {
3588
- hostWidth: { ...host$j, property: 'width' },
3589
- hostMinWidth: { ...host$j, property: 'min-width' },
3590
- hostDirection: { ...host$j, property: 'direction' },
3591
- fontSize: [host$j, textArea$2],
3588
+ hostWidth: { ...host$k, property: 'width' },
3589
+ hostMinWidth: { ...host$k, property: 'min-width' },
3590
+ hostDirection: { ...host$k, property: 'direction' },
3591
+ fontSize: [host$k, textArea$2],
3592
3592
  fontFamily: [label$7, inputField$4, helperText$8, errorMessage$a],
3593
3593
  labelTextColor: [
3594
3594
  { ...label$7, property: 'color' },
@@ -3636,49 +3636,49 @@ const TextAreaClass = compose(
3636
3636
  ${resetInputCursor('vaadin-text-area')}
3637
3637
  `,
3638
3638
  excludeAttrsSync: ['tabindex'],
3639
- componentName: componentName$G,
3639
+ componentName: componentName$H,
3640
3640
  })
3641
3641
  );
3642
3642
 
3643
- const vars$w = TextAreaClass.cssVarList;
3643
+ const vars$x = TextAreaClass.cssVarList;
3644
3644
 
3645
3645
  const textArea = {
3646
- [vars$w.hostWidth]: refs.width,
3647
- [vars$w.hostMinWidth]: refs.minWidth,
3648
- [vars$w.hostDirection]: refs.direction,
3649
- [vars$w.fontSize]: refs.fontSize,
3650
- [vars$w.fontFamily]: refs.fontFamily,
3651
- [vars$w.labelTextColor]: refs.labelTextColor,
3652
- [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
3653
- [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
3654
- [vars$w.inputBackgroundColor]: refs.backgroundColor,
3655
- [vars$w.inputValueTextColor]: refs.valueTextColor,
3656
- [vars$w.inputPlaceholderTextColor]: refs.placeholderTextColor,
3657
- [vars$w.inputBorderRadius]: refs.borderRadius,
3658
- [vars$w.inputBorderWidth]: refs.borderWidth,
3659
- [vars$w.inputBorderStyle]: refs.borderStyle,
3660
- [vars$w.inputBorderColor]: refs.borderColor,
3661
- [vars$w.inputOutlineWidth]: refs.outlineWidth,
3662
- [vars$w.inputOutlineStyle]: refs.outlineStyle,
3663
- [vars$w.inputOutlineColor]: refs.outlineColor,
3664
- [vars$w.inputOutlineOffset]: refs.outlineOffset,
3665
- [vars$w.inputResizeType]: 'vertical',
3666
- [vars$w.inputMinHeight]: '5em',
3646
+ [vars$x.hostWidth]: refs.width,
3647
+ [vars$x.hostMinWidth]: refs.minWidth,
3648
+ [vars$x.hostDirection]: refs.direction,
3649
+ [vars$x.fontSize]: refs.fontSize,
3650
+ [vars$x.fontFamily]: refs.fontFamily,
3651
+ [vars$x.labelTextColor]: refs.labelTextColor,
3652
+ [vars$x.labelRequiredIndicator]: refs.requiredIndicator,
3653
+ [vars$x.errorMessageTextColor]: refs.errorMessageTextColor,
3654
+ [vars$x.inputBackgroundColor]: refs.backgroundColor,
3655
+ [vars$x.inputValueTextColor]: refs.valueTextColor,
3656
+ [vars$x.inputPlaceholderTextColor]: refs.placeholderTextColor,
3657
+ [vars$x.inputBorderRadius]: refs.borderRadius,
3658
+ [vars$x.inputBorderWidth]: refs.borderWidth,
3659
+ [vars$x.inputBorderStyle]: refs.borderStyle,
3660
+ [vars$x.inputBorderColor]: refs.borderColor,
3661
+ [vars$x.inputOutlineWidth]: refs.outlineWidth,
3662
+ [vars$x.inputOutlineStyle]: refs.outlineStyle,
3663
+ [vars$x.inputOutlineColor]: refs.outlineColor,
3664
+ [vars$x.inputOutlineOffset]: refs.outlineOffset,
3665
+ [vars$x.inputResizeType]: 'vertical',
3666
+ [vars$x.inputMinHeight]: '5em',
3667
3667
  textAlign: {
3668
- right: { [vars$w.inputTextAlign]: 'right' },
3669
- left: { [vars$w.inputTextAlign]: 'left' },
3670
- center: { [vars$w.inputTextAlign]: 'center' },
3668
+ right: { [vars$x.inputTextAlign]: 'right' },
3669
+ left: { [vars$x.inputTextAlign]: 'left' },
3670
+ center: { [vars$x.inputTextAlign]: 'center' },
3671
3671
  },
3672
3672
 
3673
3673
  _readonly: {
3674
- [vars$w.inputResizeType]: 'none',
3674
+ [vars$x.inputResizeType]: 'none',
3675
3675
  },
3676
3676
  };
3677
3677
 
3678
3678
  var textArea$1 = /*#__PURE__*/Object.freeze({
3679
3679
  __proto__: null,
3680
3680
  default: textArea,
3681
- vars: vars$w
3681
+ vars: vars$x
3682
3682
  });
3683
3683
 
3684
3684
  const createBaseInputClass = (...args) =>
@@ -3689,9 +3689,9 @@ const createBaseInputClass = (...args) =>
3689
3689
  inputEventsDispatchingMixin
3690
3690
  )(createBaseClass(...args));
3691
3691
 
3692
- const componentName$F = getComponentName('boolean-field-internal');
3692
+ const componentName$G = getComponentName('boolean-field-internal');
3693
3693
 
3694
- createBaseInputClass({ componentName: componentName$F, baseSelector: 'div' });
3694
+ createBaseInputClass({ componentName: componentName$G, baseSelector: 'div' });
3695
3695
 
3696
3696
  const booleanFieldMixin = (superclass) =>
3697
3697
  class BooleanFieldMixinClass extends superclass {
@@ -3700,14 +3700,14 @@ const booleanFieldMixin = (superclass) =>
3700
3700
 
3701
3701
  const template = document.createElement('template');
3702
3702
  template.innerHTML = `
3703
- <${componentName$F}
3703
+ <${componentName$G}
3704
3704
  tabindex="-1"
3705
3705
  slot="input"
3706
- ></${componentName$F}>
3706
+ ></${componentName$G}>
3707
3707
  `;
3708
3708
 
3709
3709
  this.baseElement.appendChild(template.content.cloneNode(true));
3710
- this.inputElement = this.shadowRoot.querySelector(componentName$F);
3710
+ this.inputElement = this.shadowRoot.querySelector(componentName$G);
3711
3711
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
3712
3712
 
3713
3713
  forwardAttrs(this, this.inputElement, {
@@ -3777,10 +3777,10 @@ descope-boolean-field-internal {
3777
3777
  }
3778
3778
  `;
3779
3779
 
3780
- const componentName$E = getComponentName('checkbox');
3780
+ const componentName$F = getComponentName('checkbox');
3781
3781
 
3782
3782
  const {
3783
- host: host$i,
3783
+ host: host$j,
3784
3784
  component: component$1,
3785
3785
  checkboxElement,
3786
3786
  checkboxSurface,
@@ -3802,10 +3802,10 @@ const {
3802
3802
  const CheckboxClass = compose(
3803
3803
  createStyleMixin({
3804
3804
  mappings: {
3805
- hostWidth: { ...host$i, property: 'width' },
3806
- hostDirection: { ...host$i, property: 'direction' },
3805
+ hostWidth: { ...host$j, property: 'width' },
3806
+ hostDirection: { ...host$j, property: 'direction' },
3807
3807
 
3808
- fontSize: [host$i, checkboxElement, checkboxLabel$1],
3808
+ fontSize: [host$j, checkboxElement, checkboxLabel$1],
3809
3809
  fontFamily: [checkboxLabel$1, helperText$7, errorMessage$9],
3810
3810
 
3811
3811
  labelTextColor: { ...checkboxLabel$1, property: 'color' },
@@ -3883,54 +3883,54 @@ const CheckboxClass = compose(
3883
3883
  }
3884
3884
  `,
3885
3885
  excludeAttrsSync: ['label', 'tabindex'],
3886
- componentName: componentName$E,
3886
+ componentName: componentName$F,
3887
3887
  })
3888
3888
  );
3889
3889
 
3890
- const vars$v = CheckboxClass.cssVarList;
3890
+ const vars$w = CheckboxClass.cssVarList;
3891
3891
  const checkboxSize = '1.35em';
3892
3892
 
3893
3893
  const checkbox = {
3894
- [vars$v.hostWidth]: refs.width,
3895
- [vars$v.hostDirection]: refs.direction,
3896
- [vars$v.fontSize]: refs.fontSize,
3897
- [vars$v.fontFamily]: refs.fontFamily,
3898
- [vars$v.labelTextColor]: refs.labelTextColor,
3899
- [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
3900
- [vars$v.labelFontWeight]: '400',
3901
- [vars$v.labelLineHeight]: checkboxSize,
3902
- [vars$v.labelSpacing]: '1em',
3903
- [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
3904
- [vars$v.inputOutlineWidth]: refs.outlineWidth,
3905
- [vars$v.inputOutlineOffset]: refs.outlineOffset,
3906
- [vars$v.inputOutlineColor]: refs.outlineColor,
3907
- [vars$v.inputOutlineStyle]: refs.outlineStyle,
3908
- [vars$v.inputBorderRadius]: refs.borderRadius,
3909
- [vars$v.inputBorderColor]: refs.borderColor,
3910
- [vars$v.inputBorderWidth]: refs.borderWidth,
3911
- [vars$v.inputBorderStyle]: refs.borderStyle,
3912
- [vars$v.inputBackgroundColor]: refs.backgroundColor,
3913
- [vars$v.inputSize]: checkboxSize,
3894
+ [vars$w.hostWidth]: refs.width,
3895
+ [vars$w.hostDirection]: refs.direction,
3896
+ [vars$w.fontSize]: refs.fontSize,
3897
+ [vars$w.fontFamily]: refs.fontFamily,
3898
+ [vars$w.labelTextColor]: refs.labelTextColor,
3899
+ [vars$w.labelRequiredIndicator]: refs.requiredIndicator,
3900
+ [vars$w.labelFontWeight]: '400',
3901
+ [vars$w.labelLineHeight]: checkboxSize,
3902
+ [vars$w.labelSpacing]: '1em',
3903
+ [vars$w.errorMessageTextColor]: refs.errorMessageTextColor,
3904
+ [vars$w.inputOutlineWidth]: refs.outlineWidth,
3905
+ [vars$w.inputOutlineOffset]: refs.outlineOffset,
3906
+ [vars$w.inputOutlineColor]: refs.outlineColor,
3907
+ [vars$w.inputOutlineStyle]: refs.outlineStyle,
3908
+ [vars$w.inputBorderRadius]: refs.borderRadius,
3909
+ [vars$w.inputBorderColor]: refs.borderColor,
3910
+ [vars$w.inputBorderWidth]: refs.borderWidth,
3911
+ [vars$w.inputBorderStyle]: refs.borderStyle,
3912
+ [vars$w.inputBackgroundColor]: refs.backgroundColor,
3913
+ [vars$w.inputSize]: checkboxSize,
3914
3914
 
3915
3915
  _checked: {
3916
- [vars$v.inputValueTextColor]: refs.valueTextColor,
3916
+ [vars$w.inputValueTextColor]: refs.valueTextColor,
3917
3917
  },
3918
3918
 
3919
3919
  _disabled: {
3920
- [vars$v.labelTextColor]: refs.labelTextColor,
3920
+ [vars$w.labelTextColor]: refs.labelTextColor,
3921
3921
  },
3922
3922
  };
3923
3923
 
3924
3924
  var checkbox$1 = /*#__PURE__*/Object.freeze({
3925
3925
  __proto__: null,
3926
3926
  default: checkbox,
3927
- vars: vars$v
3927
+ vars: vars$w
3928
3928
  });
3929
3929
 
3930
- const componentName$D = getComponentName('switch-toggle');
3930
+ const componentName$E = getComponentName('switch-toggle');
3931
3931
 
3932
3932
  const {
3933
- host: host$h,
3933
+ host: host$i,
3934
3934
  component,
3935
3935
  checkboxElement: track,
3936
3936
  checkboxSurface: knob,
@@ -3952,8 +3952,8 @@ const {
3952
3952
  const SwitchToggleClass = compose(
3953
3953
  createStyleMixin({
3954
3954
  mappings: {
3955
- hostWidth: { ...host$h, property: 'width' },
3956
- hostDirection: { ...host$h, property: 'direction' },
3955
+ hostWidth: { ...host$i, property: 'width' },
3956
+ hostDirection: { ...host$i, property: 'direction' },
3957
3957
 
3958
3958
  fontSize: [component, checkboxLabel, checkboxLabel],
3959
3959
  fontFamily: [checkboxLabel, helperText$6, errorMessage$8],
@@ -4059,82 +4059,82 @@ const SwitchToggleClass = compose(
4059
4059
  }
4060
4060
  `,
4061
4061
  excludeAttrsSync: ['label', 'tabindex'],
4062
- componentName: componentName$D,
4062
+ componentName: componentName$E,
4063
4063
  })
4064
4064
  );
4065
4065
 
4066
4066
  const knobMargin = '2px';
4067
4067
  const checkboxHeight = '1.25em';
4068
4068
 
4069
- const globalRefs$j = getThemeRefs(globals);
4070
- const vars$u = SwitchToggleClass.cssVarList;
4069
+ const globalRefs$k = getThemeRefs(globals);
4070
+ const vars$v = SwitchToggleClass.cssVarList;
4071
4071
 
4072
4072
  const switchToggle = {
4073
- [vars$u.hostWidth]: refs.width,
4074
- [vars$u.hostDirection]: refs.direction,
4075
- [vars$u.fontSize]: refs.fontSize,
4076
- [vars$u.fontFamily]: refs.fontFamily,
4077
-
4078
- [vars$u.inputOutlineWidth]: refs.outlineWidth,
4079
- [vars$u.inputOutlineOffset]: refs.outlineOffset,
4080
- [vars$u.inputOutlineColor]: refs.outlineColor,
4081
- [vars$u.inputOutlineStyle]: refs.outlineStyle,
4082
-
4083
- [vars$u.trackBorderStyle]: refs.borderStyle,
4084
- [vars$u.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
4085
- [vars$u.trackBorderColor]: refs.borderColor,
4086
- [vars$u.trackBackgroundColor]: refs.backgroundColor,
4087
- [vars$u.trackBorderRadius]: globalRefs$j.radius.md,
4088
- [vars$u.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
4089
- [vars$u.trackHeight]: checkboxHeight,
4090
-
4091
- [vars$u.knobSize]: `calc(1em - ${knobMargin})`,
4092
- [vars$u.knobRadius]: '50%',
4093
- [vars$u.knobTopOffset]: '1px',
4094
- [vars$u.knobLeftOffset]: knobMargin,
4095
- [vars$u.knobColor]: refs.labelTextColor,
4096
- [vars$u.knobTransitionDuration]: '0.3s',
4097
-
4098
- [vars$u.labelTextColor]: refs.labelTextColor,
4099
- [vars$u.labelFontWeight]: '400',
4100
- [vars$u.labelLineHeight]: '1.35em',
4101
- [vars$u.labelSpacing]: '1em',
4102
- [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
4103
- [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
4073
+ [vars$v.hostWidth]: refs.width,
4074
+ [vars$v.hostDirection]: refs.direction,
4075
+ [vars$v.fontSize]: refs.fontSize,
4076
+ [vars$v.fontFamily]: refs.fontFamily,
4077
+
4078
+ [vars$v.inputOutlineWidth]: refs.outlineWidth,
4079
+ [vars$v.inputOutlineOffset]: refs.outlineOffset,
4080
+ [vars$v.inputOutlineColor]: refs.outlineColor,
4081
+ [vars$v.inputOutlineStyle]: refs.outlineStyle,
4082
+
4083
+ [vars$v.trackBorderStyle]: refs.borderStyle,
4084
+ [vars$v.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
4085
+ [vars$v.trackBorderColor]: refs.borderColor,
4086
+ [vars$v.trackBackgroundColor]: refs.backgroundColor,
4087
+ [vars$v.trackBorderRadius]: globalRefs$k.radius.md,
4088
+ [vars$v.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
4089
+ [vars$v.trackHeight]: checkboxHeight,
4090
+
4091
+ [vars$v.knobSize]: `calc(1em - ${knobMargin})`,
4092
+ [vars$v.knobRadius]: '50%',
4093
+ [vars$v.knobTopOffset]: '1px',
4094
+ [vars$v.knobLeftOffset]: knobMargin,
4095
+ [vars$v.knobColor]: refs.labelTextColor,
4096
+ [vars$v.knobTransitionDuration]: '0.3s',
4097
+
4098
+ [vars$v.labelTextColor]: refs.labelTextColor,
4099
+ [vars$v.labelFontWeight]: '400',
4100
+ [vars$v.labelLineHeight]: '1.35em',
4101
+ [vars$v.labelSpacing]: '1em',
4102
+ [vars$v.labelRequiredIndicator]: refs.requiredIndicator,
4103
+ [vars$v.errorMessageTextColor]: refs.errorMessageTextColor,
4104
4104
 
4105
4105
  _checked: {
4106
- [vars$u.trackBorderColor]: refs.borderColor,
4107
- [vars$u.knobLeftOffset]: `calc(100% - var(${vars$u.knobSize}) - ${knobMargin})`,
4108
- [vars$u.knobColor]: refs.valueTextColor,
4109
- [vars$u.knobTextColor]: refs.valueTextColor,
4106
+ [vars$v.trackBorderColor]: refs.borderColor,
4107
+ [vars$v.knobLeftOffset]: `calc(100% - var(${vars$v.knobSize}) - ${knobMargin})`,
4108
+ [vars$v.knobColor]: refs.valueTextColor,
4109
+ [vars$v.knobTextColor]: refs.valueTextColor,
4110
4110
  },
4111
4111
 
4112
4112
  _disabled: {
4113
- [vars$u.knobColor]: globalRefs$j.colors.surface.light,
4114
- [vars$u.trackBorderColor]: globalRefs$j.colors.surface.light,
4115
- [vars$u.trackBackgroundColor]: globalRefs$j.colors.surface.main,
4116
- [vars$u.labelTextColor]: refs.labelTextColor,
4113
+ [vars$v.knobColor]: globalRefs$k.colors.surface.light,
4114
+ [vars$v.trackBorderColor]: globalRefs$k.colors.surface.light,
4115
+ [vars$v.trackBackgroundColor]: globalRefs$k.colors.surface.main,
4116
+ [vars$v.labelTextColor]: refs.labelTextColor,
4117
4117
  _checked: {
4118
- [vars$u.knobColor]: globalRefs$j.colors.surface.light,
4119
- [vars$u.trackBackgroundColor]: globalRefs$j.colors.surface.main,
4118
+ [vars$v.knobColor]: globalRefs$k.colors.surface.light,
4119
+ [vars$v.trackBackgroundColor]: globalRefs$k.colors.surface.main,
4120
4120
  },
4121
4121
  },
4122
4122
 
4123
4123
  _invalid: {
4124
- [vars$u.trackBorderColor]: globalRefs$j.colors.error.main,
4125
- [vars$u.knobColor]: globalRefs$j.colors.error.main,
4124
+ [vars$v.trackBorderColor]: globalRefs$k.colors.error.main,
4125
+ [vars$v.knobColor]: globalRefs$k.colors.error.main,
4126
4126
  },
4127
4127
  };
4128
4128
 
4129
4129
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
4130
4130
  __proto__: null,
4131
4131
  default: switchToggle,
4132
- vars: vars$u
4132
+ vars: vars$v
4133
4133
  });
4134
4134
 
4135
- const componentName$C = getComponentName('container');
4135
+ const componentName$D = getComponentName('container');
4136
4136
 
4137
- class RawContainer extends createBaseClass({ componentName: componentName$C, baseSelector: 'slot' }) {
4137
+ class RawContainer extends createBaseClass({ componentName: componentName$D, baseSelector: 'slot' }) {
4138
4138
  constructor() {
4139
4139
  super();
4140
4140
 
@@ -4187,7 +4187,7 @@ const ContainerClass = compose(
4187
4187
  componentNameValidationMixin
4188
4188
  )(RawContainer);
4189
4189
 
4190
- const globalRefs$i = getThemeRefs(globals);
4190
+ const globalRefs$j = getThemeRefs(globals);
4191
4191
 
4192
4192
  const compVars$4 = ContainerClass.cssVarList;
4193
4193
 
@@ -4209,7 +4209,7 @@ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
4209
4209
  horizontalAlignment,
4210
4210
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
4211
4211
  },
4212
- componentName$C
4212
+ componentName$D
4213
4213
  );
4214
4214
 
4215
4215
  const { shadowColor: shadowColor$1 } = helperRefs$2;
@@ -4219,10 +4219,10 @@ const container = {
4219
4219
 
4220
4220
  [compVars$4.hostWidth]: '100%',
4221
4221
  [compVars$4.boxShadow]: 'none',
4222
- [compVars$4.backgroundColor]: globalRefs$i.colors.surface.main,
4223
- [compVars$4.color]: globalRefs$i.colors.surface.contrast,
4222
+ [compVars$4.backgroundColor]: globalRefs$j.colors.surface.main,
4223
+ [compVars$4.color]: globalRefs$j.colors.surface.contrast,
4224
4224
  [compVars$4.borderRadius]: '0px',
4225
- [compVars$4.hostDirection]: globalRefs$i.direction,
4225
+ [compVars$4.hostDirection]: globalRefs$j.direction,
4226
4226
 
4227
4227
  verticalPadding: {
4228
4228
  sm: { [compVars$4.verticalPadding]: '5px' },
@@ -4268,34 +4268,34 @@ const container = {
4268
4268
 
4269
4269
  shadow: {
4270
4270
  sm: {
4271
- [compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.sm} ${shadowColor$1}`,
4271
+ [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.sm} ${shadowColor$1}`,
4272
4272
  },
4273
4273
  md: {
4274
- [compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.md} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.md} ${shadowColor$1}`,
4274
+ [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.md} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.md} ${shadowColor$1}`,
4275
4275
  },
4276
4276
  lg: {
4277
- [compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.lg} ${shadowColor$1}`,
4277
+ [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.lg} ${shadowColor$1}`,
4278
4278
  },
4279
4279
  xl: {
4280
- [compVars$4.boxShadow]: `${globalRefs$i.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$i.shadow.narrow.xl} ${shadowColor$1}`,
4280
+ [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$j.shadow.narrow.xl} ${shadowColor$1}`,
4281
4281
  },
4282
4282
  '2xl': {
4283
4283
  [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
4284
- [compVars$4.boxShadow]: `${globalRefs$i.shadow.wide['2xl']} ${shadowColor$1}`,
4284
+ [compVars$4.boxShadow]: `${globalRefs$j.shadow.wide['2xl']} ${shadowColor$1}`,
4285
4285
  },
4286
4286
  },
4287
4287
 
4288
4288
  borderRadius: {
4289
- sm: { [compVars$4.borderRadius]: globalRefs$i.radius.sm },
4290
- md: { [compVars$4.borderRadius]: globalRefs$i.radius.md },
4291
- lg: { [compVars$4.borderRadius]: globalRefs$i.radius.lg },
4292
- xl: { [compVars$4.borderRadius]: globalRefs$i.radius.xl },
4293
- '2xl': { [compVars$4.borderRadius]: globalRefs$i.radius['2xl'] },
4294
- '3xl': { [compVars$4.borderRadius]: globalRefs$i.radius['3xl'] },
4289
+ sm: { [compVars$4.borderRadius]: globalRefs$j.radius.sm },
4290
+ md: { [compVars$4.borderRadius]: globalRefs$j.radius.md },
4291
+ lg: { [compVars$4.borderRadius]: globalRefs$j.radius.lg },
4292
+ xl: { [compVars$4.borderRadius]: globalRefs$j.radius.xl },
4293
+ '2xl': { [compVars$4.borderRadius]: globalRefs$j.radius['2xl'] },
4294
+ '3xl': { [compVars$4.borderRadius]: globalRefs$j.radius['3xl'] },
4295
4295
  },
4296
4296
  };
4297
4297
 
4298
- const vars$t = {
4298
+ const vars$u = {
4299
4299
  ...compVars$4,
4300
4300
  ...helperVars$2,
4301
4301
  };
@@ -4303,7 +4303,7 @@ const vars$t = {
4303
4303
  var container$1 = /*#__PURE__*/Object.freeze({
4304
4304
  __proto__: null,
4305
4305
  default: container,
4306
- vars: vars$t
4306
+ vars: vars$u
4307
4307
  });
4308
4308
 
4309
4309
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4356,71 +4356,71 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
4356
4356
  return CssVarImageClass;
4357
4357
  };
4358
4358
 
4359
- const componentName$B = getComponentName('logo');
4359
+ const componentName$C = getComponentName('logo');
4360
4360
 
4361
4361
  const LogoClass = createCssVarImageClass({
4362
- componentName: componentName$B,
4362
+ componentName: componentName$C,
4363
4363
  varName: 'url',
4364
4364
  fallbackVarName: 'fallbackUrl',
4365
4365
  });
4366
4366
 
4367
- const vars$s = LogoClass.cssVarList;
4367
+ const vars$t = LogoClass.cssVarList;
4368
4368
 
4369
4369
  const logo$2 = {
4370
- [vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4370
+ [vars$t.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4371
4371
  };
4372
4372
 
4373
4373
  var logo$3 = /*#__PURE__*/Object.freeze({
4374
4374
  __proto__: null,
4375
4375
  default: logo$2,
4376
- vars: vars$s
4376
+ vars: vars$t
4377
4377
  });
4378
4378
 
4379
- const componentName$A = getComponentName('totp-image');
4379
+ const componentName$B = getComponentName('totp-image');
4380
4380
 
4381
4381
  const TotpImageClass = createCssVarImageClass({
4382
- componentName: componentName$A,
4382
+ componentName: componentName$B,
4383
4383
  varName: 'url',
4384
4384
  fallbackVarName: 'fallbackUrl',
4385
4385
  });
4386
4386
 
4387
- const vars$r = TotpImageClass.cssVarList;
4387
+ const vars$s = TotpImageClass.cssVarList;
4388
4388
 
4389
4389
  const logo$1 = {
4390
- [vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4390
+ [vars$s.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4391
4391
  };
4392
4392
 
4393
4393
  var totpImage = /*#__PURE__*/Object.freeze({
4394
4394
  __proto__: null,
4395
4395
  default: logo$1,
4396
- vars: vars$r
4396
+ vars: vars$s
4397
4397
  });
4398
4398
 
4399
- const componentName$z = getComponentName('notp-image');
4399
+ const componentName$A = getComponentName('notp-image');
4400
4400
 
4401
4401
  const NotpImageClass = createCssVarImageClass({
4402
- componentName: componentName$z,
4402
+ componentName: componentName$A,
4403
4403
  varName: 'url',
4404
4404
  fallbackVarName: 'fallbackUrl',
4405
4405
  });
4406
4406
 
4407
- const vars$q = NotpImageClass.cssVarList;
4407
+ const vars$r = NotpImageClass.cssVarList;
4408
4408
 
4409
4409
  const logo = {
4410
- [vars$q.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
4410
+ [vars$r.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
4411
4411
  };
4412
4412
 
4413
4413
  var notpImage = /*#__PURE__*/Object.freeze({
4414
4414
  __proto__: null,
4415
4415
  default: logo,
4416
- vars: vars$q
4416
+ vars: vars$r
4417
4417
  });
4418
4418
 
4419
4419
  // eslint-disable-next-line max-classes-per-file
4420
4420
 
4421
- const componentName$y = getComponentName('text');
4421
+ const componentName$z = getComponentName('text');
4422
4422
 
4423
- class RawText extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > slot' }) {
4423
+ class RawText extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > slot' }) {
4424
4424
  constructor() {
4425
4425
  super();
4426
4426
 
@@ -4480,99 +4480,99 @@ const TextClass = compose(
4480
4480
  customTextMixin
4481
4481
  )(RawText);
4482
4482
 
4483
- const globalRefs$h = getThemeRefs(globals);
4484
- const vars$p = TextClass.cssVarList;
4483
+ const globalRefs$i = getThemeRefs(globals);
4484
+ const vars$q = TextClass.cssVarList;
4485
4485
 
4486
4486
  const text$2 = {
4487
- [vars$p.hostDirection]: globalRefs$h.direction,
4488
- [vars$p.textLineHeight]: '1.35em',
4489
- [vars$p.textAlign]: 'left',
4490
- [vars$p.textColor]: globalRefs$h.colors.surface.dark,
4487
+ [vars$q.hostDirection]: globalRefs$i.direction,
4488
+ [vars$q.textLineHeight]: '1.35em',
4489
+ [vars$q.textAlign]: 'left',
4490
+ [vars$q.textColor]: globalRefs$i.colors.surface.dark,
4491
4491
  variant: {
4492
4492
  h1: {
4493
- [vars$p.fontSize]: globalRefs$h.typography.h1.size,
4494
- [vars$p.fontWeight]: globalRefs$h.typography.h1.weight,
4495
- [vars$p.fontFamily]: globalRefs$h.typography.h1.font,
4493
+ [vars$q.fontSize]: globalRefs$i.typography.h1.size,
4494
+ [vars$q.fontWeight]: globalRefs$i.typography.h1.weight,
4495
+ [vars$q.fontFamily]: globalRefs$i.typography.h1.font,
4496
4496
  },
4497
4497
  h2: {
4498
- [vars$p.fontSize]: globalRefs$h.typography.h2.size,
4499
- [vars$p.fontWeight]: globalRefs$h.typography.h2.weight,
4500
- [vars$p.fontFamily]: globalRefs$h.typography.h2.font,
4498
+ [vars$q.fontSize]: globalRefs$i.typography.h2.size,
4499
+ [vars$q.fontWeight]: globalRefs$i.typography.h2.weight,
4500
+ [vars$q.fontFamily]: globalRefs$i.typography.h2.font,
4501
4501
  },
4502
4502
  h3: {
4503
- [vars$p.fontSize]: globalRefs$h.typography.h3.size,
4504
- [vars$p.fontWeight]: globalRefs$h.typography.h3.weight,
4505
- [vars$p.fontFamily]: globalRefs$h.typography.h3.font,
4503
+ [vars$q.fontSize]: globalRefs$i.typography.h3.size,
4504
+ [vars$q.fontWeight]: globalRefs$i.typography.h3.weight,
4505
+ [vars$q.fontFamily]: globalRefs$i.typography.h3.font,
4506
4506
  },
4507
4507
  subtitle1: {
4508
- [vars$p.fontSize]: globalRefs$h.typography.subtitle1.size,
4509
- [vars$p.fontWeight]: globalRefs$h.typography.subtitle1.weight,
4510
- [vars$p.fontFamily]: globalRefs$h.typography.subtitle1.font,
4508
+ [vars$q.fontSize]: globalRefs$i.typography.subtitle1.size,
4509
+ [vars$q.fontWeight]: globalRefs$i.typography.subtitle1.weight,
4510
+ [vars$q.fontFamily]: globalRefs$i.typography.subtitle1.font,
4511
4511
  },
4512
4512
  subtitle2: {
4513
- [vars$p.fontSize]: globalRefs$h.typography.subtitle2.size,
4514
- [vars$p.fontWeight]: globalRefs$h.typography.subtitle2.weight,
4515
- [vars$p.fontFamily]: globalRefs$h.typography.subtitle2.font,
4513
+ [vars$q.fontSize]: globalRefs$i.typography.subtitle2.size,
4514
+ [vars$q.fontWeight]: globalRefs$i.typography.subtitle2.weight,
4515
+ [vars$q.fontFamily]: globalRefs$i.typography.subtitle2.font,
4516
4516
  },
4517
4517
  body1: {
4518
- [vars$p.fontSize]: globalRefs$h.typography.body1.size,
4519
- [vars$p.fontWeight]: globalRefs$h.typography.body1.weight,
4520
- [vars$p.fontFamily]: globalRefs$h.typography.body1.font,
4518
+ [vars$q.fontSize]: globalRefs$i.typography.body1.size,
4519
+ [vars$q.fontWeight]: globalRefs$i.typography.body1.weight,
4520
+ [vars$q.fontFamily]: globalRefs$i.typography.body1.font,
4521
4521
  },
4522
4522
  body2: {
4523
- [vars$p.fontSize]: globalRefs$h.typography.body2.size,
4524
- [vars$p.fontWeight]: globalRefs$h.typography.body2.weight,
4525
- [vars$p.fontFamily]: globalRefs$h.typography.body2.font,
4523
+ [vars$q.fontSize]: globalRefs$i.typography.body2.size,
4524
+ [vars$q.fontWeight]: globalRefs$i.typography.body2.weight,
4525
+ [vars$q.fontFamily]: globalRefs$i.typography.body2.font,
4526
4526
  },
4527
4527
  },
4528
4528
 
4529
4529
  mode: {
4530
4530
  primary: {
4531
- [vars$p.textColor]: globalRefs$h.colors.surface.contrast,
4531
+ [vars$q.textColor]: globalRefs$i.colors.surface.contrast,
4532
4532
  },
4533
4533
  secondary: {
4534
- [vars$p.textColor]: globalRefs$h.colors.surface.dark,
4534
+ [vars$q.textColor]: globalRefs$i.colors.surface.dark,
4535
4535
  },
4536
4536
  error: {
4537
- [vars$p.textColor]: globalRefs$h.colors.error.main,
4537
+ [vars$q.textColor]: globalRefs$i.colors.error.main,
4538
4538
  },
4539
4539
  success: {
4540
- [vars$p.textColor]: globalRefs$h.colors.success.main,
4540
+ [vars$q.textColor]: globalRefs$i.colors.success.main,
4541
4541
  },
4542
4542
  },
4543
4543
 
4544
4544
  textAlign: {
4545
- right: { [vars$p.textAlign]: 'right' },
4546
- left: { [vars$p.textAlign]: 'left' },
4547
- center: { [vars$p.textAlign]: 'center' },
4545
+ right: { [vars$q.textAlign]: 'right' },
4546
+ left: { [vars$q.textAlign]: 'left' },
4547
+ center: { [vars$q.textAlign]: 'center' },
4548
4548
  },
4549
4549
 
4550
4550
  _fullWidth: {
4551
- [vars$p.hostWidth]: '100%',
4551
+ [vars$q.hostWidth]: '100%',
4552
4552
  },
4553
4553
 
4554
4554
  _italic: {
4555
- [vars$p.fontStyle]: 'italic',
4555
+ [vars$q.fontStyle]: 'italic',
4556
4556
  },
4557
4557
 
4558
4558
  _uppercase: {
4559
- [vars$p.textTransform]: 'uppercase',
4559
+ [vars$q.textTransform]: 'uppercase',
4560
4560
  },
4561
4561
 
4562
4562
  _lowercase: {
4563
- [vars$p.textTransform]: 'lowercase',
4563
+ [vars$q.textTransform]: 'lowercase',
4564
4564
  },
4565
4565
  };
4566
4566
 
4567
4567
  var text$3 = /*#__PURE__*/Object.freeze({
4568
4568
  __proto__: null,
4569
4569
  default: text$2,
4570
- vars: vars$p
4570
+ vars: vars$q
4571
4571
  });
4572
4572
 
4573
- const componentName$x = getComponentName('link');
4573
+ const componentName$y = getComponentName('link');
4574
4574
 
4575
- class RawLink extends createBaseClass({ componentName: componentName$x, baseSelector: ':host a' }) {
4575
+ class RawLink extends createBaseClass({ componentName: componentName$y, baseSelector: ':host a' }) {
4576
4576
  constructor() {
4577
4577
  super();
4578
4578
 
@@ -4618,12 +4618,12 @@ const selectors$2 = {
4618
4618
  text: { selector: () => TextClass.componentName },
4619
4619
  };
4620
4620
 
4621
- const { anchor, text: text$1, host: host$g, wrapper: wrapper$1 } = selectors$2;
4621
+ const { anchor, text: text$1, host: host$h, wrapper: wrapper$1 } = selectors$2;
4622
4622
 
4623
4623
  const LinkClass = compose(
4624
4624
  createStyleMixin({
4625
4625
  mappings: {
4626
- hostWidth: { ...host$g, property: 'width' },
4626
+ hostWidth: { ...host$h, property: 'width' },
4627
4627
  hostDirection: { ...text$1, property: 'direction' },
4628
4628
  textAlign: wrapper$1,
4629
4629
  textColor: [
@@ -4637,37 +4637,37 @@ const LinkClass = compose(
4637
4637
  componentNameValidationMixin
4638
4638
  )(RawLink);
4639
4639
 
4640
- const globalRefs$g = getThemeRefs(globals);
4641
- const vars$o = LinkClass.cssVarList;
4640
+ const globalRefs$h = getThemeRefs(globals);
4641
+ const vars$p = LinkClass.cssVarList;
4642
4642
 
4643
4643
  const link = {
4644
- [vars$o.hostDirection]: globalRefs$g.direction,
4645
- [vars$o.cursor]: 'pointer',
4644
+ [vars$p.hostDirection]: globalRefs$h.direction,
4645
+ [vars$p.cursor]: 'pointer',
4646
4646
 
4647
- [vars$o.textColor]: globalRefs$g.colors.primary.main,
4647
+ [vars$p.textColor]: globalRefs$h.colors.primary.main,
4648
4648
 
4649
4649
  textAlign: {
4650
- right: { [vars$o.textAlign]: 'right' },
4651
- left: { [vars$o.textAlign]: 'left' },
4652
- center: { [vars$o.textAlign]: 'center' },
4650
+ right: { [vars$p.textAlign]: 'right' },
4651
+ left: { [vars$p.textAlign]: 'left' },
4652
+ center: { [vars$p.textAlign]: 'center' },
4653
4653
  },
4654
4654
 
4655
4655
  _fullWidth: {
4656
- [vars$o.hostWidth]: '100%',
4656
+ [vars$p.hostWidth]: '100%',
4657
4657
  },
4658
4658
 
4659
4659
  mode: {
4660
4660
  primary: {
4661
- [vars$o.textColor]: globalRefs$g.colors.primary.main,
4661
+ [vars$p.textColor]: globalRefs$h.colors.primary.main,
4662
4662
  },
4663
4663
  secondary: {
4664
- [vars$o.textColor]: globalRefs$g.colors.secondary.main,
4664
+ [vars$p.textColor]: globalRefs$h.colors.secondary.main,
4665
4665
  },
4666
4666
  error: {
4667
- [vars$o.textColor]: globalRefs$g.colors.error.main,
4667
+ [vars$p.textColor]: globalRefs$h.colors.error.main,
4668
4668
  },
4669
4669
  success: {
4670
- [vars$o.textColor]: globalRefs$g.colors.success.main,
4670
+ [vars$p.textColor]: globalRefs$h.colors.success.main,
4671
4671
  },
4672
4672
  },
4673
4673
  };
@@ -4675,11 +4675,11 @@ const link = {
4675
4675
  var link$1 = /*#__PURE__*/Object.freeze({
4676
4676
  __proto__: null,
4677
4677
  default: link,
4678
- vars: vars$o
4678
+ vars: vars$p
4679
4679
  });
4680
4680
 
4681
- const componentName$w = getComponentName('divider');
4682
- class RawDivider extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
4681
+ const componentName$x = getComponentName('divider');
4682
+ class RawDivider extends createBaseClass({ componentName: componentName$x, baseSelector: ':host > div' }) {
4683
4683
  constructor() {
4684
4684
  super();
4685
4685
 
@@ -4725,7 +4725,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$w, baseS
4725
4725
  }
4726
4726
 
4727
4727
  const textVars$3 = TextClass.cssVarList;
4728
- const { host: host$f, before, after: after$1, text } = {
4728
+ const { host: host$g, before, after: after$1, text } = {
4729
4729
  host: { selector: () => ':host' },
4730
4730
  before: { selector: '::before' },
4731
4731
  after: { selector: '::after' },
@@ -4735,8 +4735,8 @@ const { host: host$f, before, after: after$1, text } = {
4735
4735
  const DividerClass = compose(
4736
4736
  createStyleMixin({
4737
4737
  mappings: {
4738
- hostWidth: { ...host$f, property: 'width' },
4739
- hostPadding: { ...host$f, property: 'padding' },
4738
+ hostWidth: { ...host$g, property: 'width' },
4739
+ hostPadding: { ...host$g, property: 'padding' },
4740
4740
  hostDirection: { ...text, property: 'direction' },
4741
4741
 
4742
4742
  minHeight: {},
@@ -4778,7 +4778,7 @@ const DividerClass = compose(
4778
4778
  componentNameValidationMixin
4779
4779
  )(RawDivider);
4780
4780
 
4781
- const globalRefs$f = getThemeRefs(globals);
4781
+ const globalRefs$g = getThemeRefs(globals);
4782
4782
  const compVars$3 = DividerClass.cssVarList;
4783
4783
 
4784
4784
  const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -4786,18 +4786,18 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
4786
4786
  thickness: '2px',
4787
4787
  spacing: '10px',
4788
4788
  },
4789
- componentName$w
4789
+ componentName$x
4790
4790
  );
4791
4791
 
4792
4792
  const divider = {
4793
4793
  ...helperTheme$1,
4794
4794
 
4795
- [compVars$3.hostDirection]: globalRefs$f.direction,
4795
+ [compVars$3.hostDirection]: globalRefs$g.direction,
4796
4796
  [compVars$3.alignItems]: 'center',
4797
4797
  [compVars$3.flexDirection]: 'row',
4798
4798
  [compVars$3.alignSelf]: 'stretch',
4799
4799
  [compVars$3.hostWidth]: '100%',
4800
- [compVars$3.stripeColor]: globalRefs$f.colors.surface.light,
4800
+ [compVars$3.stripeColor]: globalRefs$g.colors.surface.light,
4801
4801
  [compVars$3.stripeColorOpacity]: '0.5',
4802
4802
  [compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
4803
4803
  [compVars$3.labelTextWidth]: 'fit-content',
@@ -4817,7 +4817,7 @@ const divider = {
4817
4817
  },
4818
4818
  };
4819
4819
 
4820
- const vars$n = {
4820
+ const vars$o = {
4821
4821
  ...compVars$3,
4822
4822
  ...helperVars$1,
4823
4823
  };
@@ -4825,18 +4825,18 @@ const vars$n = {
4825
4825
  var divider$1 = /*#__PURE__*/Object.freeze({
4826
4826
  __proto__: null,
4827
4827
  default: divider,
4828
- vars: vars$n
4828
+ vars: vars$o
4829
4829
  });
4830
4830
 
4831
4831
  /* eslint-disable no-param-reassign */
4832
4832
 
4833
- const componentName$v = getComponentName('passcode-internal');
4833
+ const componentName$w = getComponentName('passcode-internal');
4834
4834
 
4835
- createBaseInputClass({ componentName: componentName$v, baseSelector: 'div' });
4835
+ createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
4836
4836
 
4837
- const componentName$u = getComponentName('loader-radial');
4837
+ const componentName$v = getComponentName('loader-radial');
4838
4838
 
4839
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$u, baseSelector: ':host > div' }) {
4839
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$v, baseSelector: ':host > div' }) {
4840
4840
  constructor() {
4841
4841
  super();
4842
4842
 
@@ -4880,7 +4880,7 @@ const LoaderRadialClass = compose(
4880
4880
  componentNameValidationMixin
4881
4881
  )(RawLoaderRadial);
4882
4882
 
4883
- const componentName$t = getComponentName('passcode');
4883
+ const componentName$u = getComponentName('passcode');
4884
4884
 
4885
4885
  const observedAttributes$3 = ['digits'];
4886
4886
 
@@ -4899,17 +4899,17 @@ const customMixin$6 = (superclass) =>
4899
4899
  const template = document.createElement('template');
4900
4900
 
4901
4901
  template.innerHTML = `
4902
- <${componentName$v}
4902
+ <${componentName$w}
4903
4903
  bordered="true"
4904
4904
  name="code"
4905
4905
  tabindex="-1"
4906
4906
  slot="input"
4907
- ><slot></slot></${componentName$v}>
4907
+ ><slot></slot></${componentName$w}>
4908
4908
  `;
4909
4909
 
4910
4910
  this.baseElement.appendChild(template.content.cloneNode(true));
4911
4911
 
4912
- this.inputElement = this.shadowRoot.querySelector(componentName$v);
4912
+ this.inputElement = this.shadowRoot.querySelector(componentName$w);
4913
4913
 
4914
4914
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
4915
4915
  }
@@ -4924,7 +4924,7 @@ const customMixin$6 = (superclass) =>
4924
4924
  };
4925
4925
 
4926
4926
  const {
4927
- host: host$e,
4927
+ host: host$f,
4928
4928
  digitField,
4929
4929
  label: label$6,
4930
4930
  requiredIndicator: requiredIndicator$6,
@@ -4947,10 +4947,10 @@ const loaderVars = LoaderRadialClass.cssVarList;
4947
4947
  const PasscodeClass = compose(
4948
4948
  createStyleMixin({
4949
4949
  mappings: {
4950
- fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$e],
4950
+ fontSize: [{ ...digitField, property: textVars$2.fontSize }, host$f],
4951
4951
  hostWidth: { property: 'width' },
4952
- hostDirection: { ...host$e, property: 'direction' },
4953
- fontFamily: [host$e, { ...label$6 }],
4952
+ hostDirection: { ...host$f, property: 'direction' },
4953
+ fontFamily: [host$f, { ...label$6 }],
4954
4954
  labelTextColor: [
4955
4955
  { ...label$6, property: 'color' },
4956
4956
  { ...requiredIndicator$6, property: 'color' },
@@ -5056,56 +5056,56 @@ const PasscodeClass = compose(
5056
5056
  ${resetInputCursor('vaadin-text-field')}
5057
5057
  `,
5058
5058
  excludeAttrsSync: ['tabindex'],
5059
- componentName: componentName$t,
5059
+ componentName: componentName$u,
5060
5060
  })
5061
5061
  );
5062
5062
 
5063
- const vars$m = PasscodeClass.cssVarList;
5063
+ const vars$n = PasscodeClass.cssVarList;
5064
5064
 
5065
5065
  const passcode = {
5066
- [vars$m.hostDirection]: refs.direction,
5067
- [vars$m.fontFamily]: refs.fontFamily,
5068
- [vars$m.fontSize]: refs.fontSize,
5069
- [vars$m.labelTextColor]: refs.labelTextColor,
5070
- [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
5071
- [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
5072
- [vars$m.digitValueTextColor]: refs.valueTextColor,
5073
- [vars$m.digitPadding]: '0',
5074
- [vars$m.digitTextAlign]: 'center',
5075
- [vars$m.digitSpacing]: '4px',
5076
- [vars$m.hostWidth]: refs.width,
5077
- [vars$m.digitOutlineColor]: 'transparent',
5078
- [vars$m.digitOutlineWidth]: refs.outlineWidth,
5079
- [vars$m.focusedDigitFieldOutlineColor]: refs.outlineColor,
5080
- [vars$m.digitSize]: refs.inputHeight,
5066
+ [vars$n.hostDirection]: refs.direction,
5067
+ [vars$n.fontFamily]: refs.fontFamily,
5068
+ [vars$n.fontSize]: refs.fontSize,
5069
+ [vars$n.labelTextColor]: refs.labelTextColor,
5070
+ [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
5071
+ [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
5072
+ [vars$n.digitValueTextColor]: refs.valueTextColor,
5073
+ [vars$n.digitPadding]: '0',
5074
+ [vars$n.digitTextAlign]: 'center',
5075
+ [vars$n.digitSpacing]: '4px',
5076
+ [vars$n.hostWidth]: refs.width,
5077
+ [vars$n.digitOutlineColor]: 'transparent',
5078
+ [vars$n.digitOutlineWidth]: refs.outlineWidth,
5079
+ [vars$n.focusedDigitFieldOutlineColor]: refs.outlineColor,
5080
+ [vars$n.digitSize]: refs.inputHeight,
5081
5081
 
5082
5082
  size: {
5083
- xs: { [vars$m.spinnerSize]: '15px' },
5084
- sm: { [vars$m.spinnerSize]: '20px' },
5085
- md: { [vars$m.spinnerSize]: '20px' },
5086
- lg: { [vars$m.spinnerSize]: '20px' },
5083
+ xs: { [vars$n.spinnerSize]: '15px' },
5084
+ sm: { [vars$n.spinnerSize]: '20px' },
5085
+ md: { [vars$n.spinnerSize]: '20px' },
5086
+ lg: { [vars$n.spinnerSize]: '20px' },
5087
5087
  },
5088
5088
 
5089
5089
  _hideCursor: {
5090
- [vars$m.digitCaretTextColor]: 'transparent',
5090
+ [vars$n.digitCaretTextColor]: 'transparent',
5091
5091
  },
5092
5092
 
5093
5093
  _loading: {
5094
- [vars$m.overlayOpacity]: refs.overlayOpacity,
5094
+ [vars$n.overlayOpacity]: refs.overlayOpacity,
5095
5095
  },
5096
5096
  };
5097
5097
 
5098
5098
  var passcode$1 = /*#__PURE__*/Object.freeze({
5099
5099
  __proto__: null,
5100
5100
  default: passcode,
5101
- vars: vars$m
5101
+ vars: vars$n
5102
5102
  });
5103
5103
 
5104
- const componentName$s = getComponentName('loader-linear');
5104
+ const componentName$t = getComponentName('loader-linear');
5105
5105
 
5106
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$s, baseSelector: ':host > div' }) {
5106
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$t, baseSelector: ':host > div' }) {
5107
5107
  static get componentName() {
5108
- return componentName$s;
5108
+ return componentName$t;
5109
5109
  }
5110
5110
 
5111
5111
  constructor() {
@@ -5141,18 +5141,18 @@ const selectors$1 = {
5141
5141
  host: { selector: () => ':host' },
5142
5142
  };
5143
5143
 
5144
- const { after, host: host$d } = selectors$1;
5144
+ const { after, host: host$e } = selectors$1;
5145
5145
 
5146
5146
  const LoaderLinearClass = compose(
5147
5147
  createStyleMixin({
5148
5148
  mappings: {
5149
5149
  hostDisplay: {},
5150
- hostWidth: { ...host$d, property: 'width' },
5150
+ hostWidth: { ...host$e, property: 'width' },
5151
5151
  barHeight: [{ property: 'height' }, { ...after, property: 'height' }],
5152
5152
  barBorderRadius: [{ property: 'border-radius' }, { ...after, property: 'border-radius' }],
5153
5153
  verticalPadding: [
5154
- { ...host$d, property: 'padding-top' },
5155
- { ...host$d, property: 'padding-bottom' },
5154
+ { ...host$e, property: 'padding-top' },
5155
+ { ...host$e, property: 'padding-bottom' },
5156
5156
  ],
5157
5157
  barBackgroundColor: { property: 'background-color' },
5158
5158
  barColor: { ...after, property: 'background-color' },
@@ -5166,67 +5166,67 @@ const LoaderLinearClass = compose(
5166
5166
  componentNameValidationMixin
5167
5167
  )(RawLoaderLinear);
5168
5168
 
5169
- const globalRefs$e = getThemeRefs(globals);
5170
- const vars$l = LoaderLinearClass.cssVarList;
5169
+ const globalRefs$f = getThemeRefs(globals);
5170
+ const vars$m = LoaderLinearClass.cssVarList;
5171
5171
 
5172
5172
  const loaderLinear = {
5173
- [vars$l.hostDisplay]: 'inline-block',
5174
- [vars$l.hostWidth]: '100%',
5173
+ [vars$m.hostDisplay]: 'inline-block',
5174
+ [vars$m.hostWidth]: '100%',
5175
5175
 
5176
- [vars$l.barColor]: globalRefs$e.colors.surface.contrast,
5177
- [vars$l.barWidth]: '20%',
5176
+ [vars$m.barColor]: globalRefs$f.colors.surface.contrast,
5177
+ [vars$m.barWidth]: '20%',
5178
5178
 
5179
- [vars$l.barBackgroundColor]: globalRefs$e.colors.surface.light,
5180
- [vars$l.barBorderRadius]: '4px',
5179
+ [vars$m.barBackgroundColor]: globalRefs$f.colors.surface.light,
5180
+ [vars$m.barBorderRadius]: '4px',
5181
5181
 
5182
- [vars$l.animationDuration]: '2s',
5183
- [vars$l.animationTimingFunction]: 'linear',
5184
- [vars$l.animationIterationCount]: 'infinite',
5185
- [vars$l.verticalPadding]: '0.25em',
5182
+ [vars$m.animationDuration]: '2s',
5183
+ [vars$m.animationTimingFunction]: 'linear',
5184
+ [vars$m.animationIterationCount]: 'infinite',
5185
+ [vars$m.verticalPadding]: '0.25em',
5186
5186
 
5187
5187
  size: {
5188
- xs: { [vars$l.barHeight]: '2px' },
5189
- sm: { [vars$l.barHeight]: '4px' },
5190
- md: { [vars$l.barHeight]: '6px' },
5191
- lg: { [vars$l.barHeight]: '8px' },
5188
+ xs: { [vars$m.barHeight]: '2px' },
5189
+ sm: { [vars$m.barHeight]: '4px' },
5190
+ md: { [vars$m.barHeight]: '6px' },
5191
+ lg: { [vars$m.barHeight]: '8px' },
5192
5192
  },
5193
5193
 
5194
5194
  mode: {
5195
5195
  primary: {
5196
- [vars$l.barColor]: globalRefs$e.colors.primary.main,
5196
+ [vars$m.barColor]: globalRefs$f.colors.primary.main,
5197
5197
  },
5198
5198
  secondary: {
5199
- [vars$l.barColor]: globalRefs$e.colors.secondary.main,
5199
+ [vars$m.barColor]: globalRefs$f.colors.secondary.main,
5200
5200
  },
5201
5201
  },
5202
5202
 
5203
5203
  _hidden: {
5204
- [vars$l.hostDisplay]: 'none',
5204
+ [vars$m.hostDisplay]: 'none',
5205
5205
  },
5206
5206
  };
5207
5207
 
5208
5208
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
5209
5209
  __proto__: null,
5210
5210
  default: loaderLinear,
5211
- vars: vars$l
5211
+ vars: vars$m
5212
5212
  });
5213
5213
 
5214
- const globalRefs$d = getThemeRefs(globals);
5214
+ const globalRefs$e = getThemeRefs(globals);
5215
5215
  const compVars$2 = LoaderRadialClass.cssVarList;
5216
5216
 
5217
5217
  const [helperTheme, helperRefs, helperVars] = createHelperVars(
5218
5218
  {
5219
- spinnerColor: globalRefs$d.colors.surface.contrast,
5219
+ spinnerColor: globalRefs$e.colors.surface.contrast,
5220
5220
  mode: {
5221
5221
  primary: {
5222
- spinnerColor: globalRefs$d.colors.primary.main,
5222
+ spinnerColor: globalRefs$e.colors.primary.main,
5223
5223
  },
5224
5224
  secondary: {
5225
- spinnerColor: globalRefs$d.colors.secondary.main,
5225
+ spinnerColor: globalRefs$e.colors.secondary.main,
5226
5226
  },
5227
5227
  },
5228
5228
  },
5229
- componentName$u
5229
+ componentName$v
5230
5230
  );
5231
5231
 
5232
5232
  const loaderRadial = {
@@ -5255,7 +5255,7 @@ const loaderRadial = {
5255
5255
  [compVars$2.hostDisplay]: 'none',
5256
5256
  },
5257
5257
  };
5258
- const vars$k = {
5258
+ const vars$l = {
5259
5259
  ...compVars$2,
5260
5260
  ...helperVars,
5261
5261
  };
@@ -5263,10 +5263,10 @@ const vars$k = {
5263
5263
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
5264
5264
  __proto__: null,
5265
5265
  default: loaderRadial,
5266
- vars: vars$k
5266
+ vars: vars$l
5267
5267
  });
5268
5268
 
5269
- const componentName$r = getComponentName('combo-box');
5269
+ const componentName$s = getComponentName('combo-box');
5270
5270
 
5271
5271
  const ComboBoxMixin = (superclass) =>
5272
5272
  class ComboBoxMixinClass extends superclass {
@@ -5492,7 +5492,7 @@ const ComboBoxMixin = (superclass) =>
5492
5492
  };
5493
5493
 
5494
5494
  const {
5495
- host: host$c,
5495
+ host: host$d,
5496
5496
  inputField: inputField$3,
5497
5497
  inputElement: inputElement$1,
5498
5498
  placeholder: placeholder$1,
@@ -5518,10 +5518,10 @@ const {
5518
5518
  const ComboBoxClass = compose(
5519
5519
  createStyleMixin({
5520
5520
  mappings: {
5521
- hostWidth: { ...host$c, property: 'width' },
5522
- hostDirection: { ...host$c, property: 'direction' },
5521
+ hostWidth: { ...host$d, property: 'width' },
5522
+ hostDirection: { ...host$d, property: 'direction' },
5523
5523
  // we apply font-size also on the host so we can set its width with em
5524
- fontSize: [{}, host$c],
5524
+ fontSize: [{}, host$d],
5525
5525
  fontFamily: [label$5, placeholder$1, inputField$3, helperText$5, errorMessage$6],
5526
5526
  labelTextColor: [
5527
5527
  { ...label$5, property: 'color' },
@@ -5649,71 +5649,71 @@ const ComboBoxClass = compose(
5649
5649
  // and reset items to an empty array, and opening the list box with no items
5650
5650
  // to display.
5651
5651
  excludeAttrsSync: ['tabindex', 'size', 'data'],
5652
- componentName: componentName$r,
5652
+ componentName: componentName$s,
5653
5653
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
5654
5654
  })
5655
5655
  );
5656
5656
 
5657
- const globalRefs$c = getThemeRefs(globals);
5658
- const vars$j = ComboBoxClass.cssVarList;
5657
+ const globalRefs$d = getThemeRefs(globals);
5658
+ const vars$k = ComboBoxClass.cssVarList;
5659
5659
 
5660
5660
  const comboBox = {
5661
- [vars$j.hostWidth]: refs.width,
5662
- [vars$j.hostDirection]: refs.direction,
5663
- [vars$j.fontSize]: refs.fontSize,
5664
- [vars$j.fontFamily]: refs.fontFamily,
5665
- [vars$j.labelTextColor]: refs.labelTextColor,
5666
- [vars$j.errorMessageTextColor]: refs.errorMessageTextColor,
5667
- [vars$j.inputBorderColor]: refs.borderColor,
5668
- [vars$j.inputBorderWidth]: refs.borderWidth,
5669
- [vars$j.inputBorderStyle]: refs.borderStyle,
5670
- [vars$j.inputBorderRadius]: refs.borderRadius,
5671
- [vars$j.inputOutlineColor]: refs.outlineColor,
5672
- [vars$j.inputOutlineOffset]: refs.outlineOffset,
5673
- [vars$j.inputOutlineWidth]: refs.outlineWidth,
5674
- [vars$j.inputOutlineStyle]: refs.outlineStyle,
5675
- [vars$j.labelRequiredIndicator]: refs.requiredIndicator,
5676
- [vars$j.inputValueTextColor]: refs.valueTextColor,
5677
- [vars$j.inputPlaceholderTextColor]: refs.placeholderTextColor,
5678
- [vars$j.inputBackgroundColor]: refs.backgroundColor,
5679
- [vars$j.inputHorizontalPadding]: refs.horizontalPadding,
5680
- [vars$j.inputHeight]: refs.inputHeight,
5681
- [vars$j.inputDropdownButtonColor]: globalRefs$c.colors.surface.dark,
5682
- [vars$j.inputDropdownButtonCursor]: 'pointer',
5683
- [vars$j.inputDropdownButtonSize]: refs.toggleButtonSize,
5684
- [vars$j.inputDropdownButtonOffset]: globalRefs$c.spacing.xs,
5685
- [vars$j.overlayItemPaddingInlineStart]: globalRefs$c.spacing.xs,
5686
- [vars$j.overlayItemPaddingInlineEnd]: globalRefs$c.spacing.lg,
5661
+ [vars$k.hostWidth]: refs.width,
5662
+ [vars$k.hostDirection]: refs.direction,
5663
+ [vars$k.fontSize]: refs.fontSize,
5664
+ [vars$k.fontFamily]: refs.fontFamily,
5665
+ [vars$k.labelTextColor]: refs.labelTextColor,
5666
+ [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
5667
+ [vars$k.inputBorderColor]: refs.borderColor,
5668
+ [vars$k.inputBorderWidth]: refs.borderWidth,
5669
+ [vars$k.inputBorderStyle]: refs.borderStyle,
5670
+ [vars$k.inputBorderRadius]: refs.borderRadius,
5671
+ [vars$k.inputOutlineColor]: refs.outlineColor,
5672
+ [vars$k.inputOutlineOffset]: refs.outlineOffset,
5673
+ [vars$k.inputOutlineWidth]: refs.outlineWidth,
5674
+ [vars$k.inputOutlineStyle]: refs.outlineStyle,
5675
+ [vars$k.labelRequiredIndicator]: refs.requiredIndicator,
5676
+ [vars$k.inputValueTextColor]: refs.valueTextColor,
5677
+ [vars$k.inputPlaceholderTextColor]: refs.placeholderTextColor,
5678
+ [vars$k.inputBackgroundColor]: refs.backgroundColor,
5679
+ [vars$k.inputHorizontalPadding]: refs.horizontalPadding,
5680
+ [vars$k.inputHeight]: refs.inputHeight,
5681
+ [vars$k.inputDropdownButtonColor]: globalRefs$d.colors.surface.dark,
5682
+ [vars$k.inputDropdownButtonCursor]: 'pointer',
5683
+ [vars$k.inputDropdownButtonSize]: refs.toggleButtonSize,
5684
+ [vars$k.inputDropdownButtonOffset]: globalRefs$d.spacing.xs,
5685
+ [vars$k.overlayItemPaddingInlineStart]: globalRefs$d.spacing.xs,
5686
+ [vars$k.overlayItemPaddingInlineEnd]: globalRefs$d.spacing.lg,
5687
5687
 
5688
5688
  _readonly: {
5689
- [vars$j.inputDropdownButtonCursor]: 'default',
5689
+ [vars$k.inputDropdownButtonCursor]: 'default',
5690
5690
  },
5691
5691
 
5692
5692
  // Overlay theme exposed via the component:
5693
- [vars$j.overlayFontSize]: refs.fontSize,
5694
- [vars$j.overlayFontFamily]: refs.fontFamily,
5695
- [vars$j.overlayCursor]: 'pointer',
5696
- [vars$j.overlayItemBoxShadow]: 'none',
5697
- [vars$j.overlayBackground]: refs.backgroundColor,
5698
- [vars$j.overlayTextColor]: refs.valueTextColor,
5693
+ [vars$k.overlayFontSize]: refs.fontSize,
5694
+ [vars$k.overlayFontFamily]: refs.fontFamily,
5695
+ [vars$k.overlayCursor]: 'pointer',
5696
+ [vars$k.overlayItemBoxShadow]: 'none',
5697
+ [vars$k.overlayBackground]: refs.backgroundColor,
5698
+ [vars$k.overlayTextColor]: refs.valueTextColor,
5699
5699
 
5700
5700
  // Overlay direct theme:
5701
- [vars$j.overlay.minHeight]: '400px',
5702
- [vars$j.overlay.margin]: '0',
5701
+ [vars$k.overlay.minHeight]: '400px',
5702
+ [vars$k.overlay.margin]: '0',
5703
5703
  };
5704
5704
 
5705
5705
  var comboBox$1 = /*#__PURE__*/Object.freeze({
5706
5706
  __proto__: null,
5707
5707
  comboBox: comboBox,
5708
5708
  default: comboBox,
5709
- vars: vars$j
5709
+ vars: vars$k
5710
5710
  });
5711
5711
 
5712
5712
  const observedAttributes$2 = ['src', 'alt'];
5713
5713
 
5714
- const componentName$q = getComponentName('image');
5714
+ const componentName$r = getComponentName('image');
5715
5715
 
5716
- const BaseClass$1 = createBaseClass({ componentName: componentName$q, baseSelector: ':host > img' });
5716
+ const BaseClass$1 = createBaseClass({ componentName: componentName$r, baseSelector: ':host > img' });
5717
5717
  class RawImage extends BaseClass$1 {
5718
5718
  static get observedAttributes() {
5719
5719
  return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
@@ -5753,14 +5753,14 @@ const ImageClass = compose(
5753
5753
  draggableMixin
5754
5754
  )(RawImage);
5755
5755
 
5756
- const vars$i = ImageClass.cssVarList;
5756
+ const vars$j = ImageClass.cssVarList;
5757
5757
 
5758
5758
  const image = {};
5759
5759
 
5760
5760
  var image$1 = /*#__PURE__*/Object.freeze({
5761
5761
  __proto__: null,
5762
5762
  default: image,
5763
- vars: vars$i
5763
+ vars: vars$j
5764
5764
  });
5765
5765
 
5766
5766
  var CountryCodes = [
@@ -6979,14 +6979,14 @@ var CountryCodes = [
6979
6979
  ].sort((a, b) => (a.name < b.name ? -1 : 1)),
6980
6980
  ];
6981
6981
 
6982
- const componentName$p = getComponentName('phone-field-internal');
6982
+ const componentName$q = getComponentName('phone-field-internal');
6983
6983
 
6984
- createBaseInputClass({ componentName: componentName$p, baseSelector: 'div' });
6984
+ createBaseInputClass({ componentName: componentName$q, baseSelector: 'div' });
6985
6985
 
6986
6986
  const textVars$1 = TextFieldClass.cssVarList;
6987
6987
  const comboVars = ComboBoxClass.cssVarList;
6988
6988
 
6989
- const componentName$o = getComponentName('phone-field');
6989
+ const componentName$p = getComponentName('phone-field');
6990
6990
 
6991
6991
  const customMixin$5 = (superclass) =>
6992
6992
  class PhoneFieldMixinClass extends superclass {
@@ -7000,15 +7000,15 @@ const customMixin$5 = (superclass) =>
7000
7000
  const template = document.createElement('template');
7001
7001
 
7002
7002
  template.innerHTML = `
7003
- <${componentName$p}
7003
+ <${componentName$q}
7004
7004
  tabindex="-1"
7005
7005
  slot="input"
7006
- ></${componentName$p}>
7006
+ ></${componentName$q}>
7007
7007
  `;
7008
7008
 
7009
7009
  this.baseElement.appendChild(template.content.cloneNode(true));
7010
7010
 
7011
- this.inputElement = this.shadowRoot.querySelector(componentName$p);
7011
+ this.inputElement = this.shadowRoot.querySelector(componentName$q);
7012
7012
 
7013
7013
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
7014
7014
  includeAttrs: [
@@ -7028,7 +7028,7 @@ const customMixin$5 = (superclass) =>
7028
7028
  };
7029
7029
 
7030
7030
  const {
7031
- host: host$b,
7031
+ host: host$c,
7032
7032
  label: label$4,
7033
7033
  requiredIndicator: requiredIndicator$4,
7034
7034
  inputField: inputField$2,
@@ -7053,7 +7053,7 @@ const PhoneFieldClass = compose(
7053
7053
  createStyleMixin({
7054
7054
  mappings: {
7055
7055
  fontSize: [
7056
- host$b,
7056
+ host$c,
7057
7057
  inputField$2,
7058
7058
  {
7059
7059
  selector: TextFieldClass.componentName,
@@ -7074,11 +7074,11 @@ const PhoneFieldClass = compose(
7074
7074
  },
7075
7075
  ],
7076
7076
  hostWidth: [
7077
- { ...host$b, property: 'width' },
7077
+ { ...host$c, property: 'width' },
7078
7078
  { ...phoneInput$1, property: 'width' },
7079
7079
  { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },
7080
7080
  ],
7081
- hostDirection: { ...host$b, property: 'direction' },
7081
+ hostDirection: { ...host$c, property: 'direction' },
7082
7082
 
7083
7083
  inputBorderStyle: [
7084
7084
  { ...inputField$2, property: 'border-style' },
@@ -7204,33 +7204,33 @@ const PhoneFieldClass = compose(
7204
7204
  ${resetInputLabelPosition('vaadin-text-field')}
7205
7205
  `,
7206
7206
  excludeAttrsSync: ['tabindex'],
7207
- componentName: componentName$o,
7207
+ componentName: componentName$p,
7208
7208
  })
7209
7209
  );
7210
7210
 
7211
- const vars$h = PhoneFieldClass.cssVarList;
7211
+ const vars$i = PhoneFieldClass.cssVarList;
7212
7212
 
7213
7213
  const phoneField = {
7214
- [vars$h.hostWidth]: refs.width,
7215
- [vars$h.hostDirection]: refs.direction,
7216
- [vars$h.fontSize]: refs.fontSize,
7217
- [vars$h.fontFamily]: refs.fontFamily,
7218
- [vars$h.labelTextColor]: refs.labelTextColor,
7219
- [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
7220
- [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
7221
- [vars$h.inputValueTextColor]: refs.valueTextColor,
7222
- [vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
7223
- [vars$h.inputBorderStyle]: refs.borderStyle,
7224
- [vars$h.inputBorderWidth]: refs.borderWidth,
7225
- [vars$h.inputBorderColor]: refs.borderColor,
7226
- [vars$h.inputBorderRadius]: refs.borderRadius,
7227
- [vars$h.inputOutlineStyle]: refs.outlineStyle,
7228
- [vars$h.inputOutlineWidth]: refs.outlineWidth,
7229
- [vars$h.inputOutlineColor]: refs.outlineColor,
7230
- [vars$h.inputOutlineOffset]: refs.outlineOffset,
7231
- [vars$h.phoneInputWidth]: refs.minWidth,
7232
- [vars$h.countryCodeInputWidth]: '5em',
7233
- [vars$h.countryCodeDropdownWidth]: '20em',
7214
+ [vars$i.hostWidth]: refs.width,
7215
+ [vars$i.hostDirection]: refs.direction,
7216
+ [vars$i.fontSize]: refs.fontSize,
7217
+ [vars$i.fontFamily]: refs.fontFamily,
7218
+ [vars$i.labelTextColor]: refs.labelTextColor,
7219
+ [vars$i.labelRequiredIndicator]: refs.requiredIndicator,
7220
+ [vars$i.errorMessageTextColor]: refs.errorMessageTextColor,
7221
+ [vars$i.inputValueTextColor]: refs.valueTextColor,
7222
+ [vars$i.inputPlaceholderTextColor]: refs.placeholderTextColor,
7223
+ [vars$i.inputBorderStyle]: refs.borderStyle,
7224
+ [vars$i.inputBorderWidth]: refs.borderWidth,
7225
+ [vars$i.inputBorderColor]: refs.borderColor,
7226
+ [vars$i.inputBorderRadius]: refs.borderRadius,
7227
+ [vars$i.inputOutlineStyle]: refs.outlineStyle,
7228
+ [vars$i.inputOutlineWidth]: refs.outlineWidth,
7229
+ [vars$i.inputOutlineColor]: refs.outlineColor,
7230
+ [vars$i.inputOutlineOffset]: refs.outlineOffset,
7231
+ [vars$i.phoneInputWidth]: refs.minWidth,
7232
+ [vars$i.countryCodeInputWidth]: '5em',
7233
+ [vars$i.countryCodeDropdownWidth]: '20em',
7234
7234
 
7235
7235
  // '@overlay': {
7236
7236
  // overlayItemBackgroundColor: 'red'
@@ -7240,16 +7240,16 @@ const phoneField = {
7240
7240
  var phoneField$1 = /*#__PURE__*/Object.freeze({
7241
7241
  __proto__: null,
7242
7242
  default: phoneField,
7243
- vars: vars$h
7243
+ vars: vars$i
7244
7244
  });
7245
7245
 
7246
- const componentName$n = getComponentName('phone-field-internal-input-box');
7246
+ const componentName$o = getComponentName('phone-field-internal-input-box');
7247
7247
 
7248
- createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
7248
+ createBaseInputClass({ componentName: componentName$o, baseSelector: 'div' });
7249
7249
 
7250
7250
  const textVars = TextFieldClass.cssVarList;
7251
7251
 
7252
- const componentName$m = getComponentName('phone-input-box-field');
7252
+ const componentName$n = getComponentName('phone-input-box-field');
7253
7253
 
7254
7254
  const customMixin$4 = (superclass) =>
7255
7255
  class PhoneInputBoxFieldMixinClass extends superclass {
@@ -7263,15 +7263,15 @@ const customMixin$4 = (superclass) =>
7263
7263
  const template = document.createElement('template');
7264
7264
 
7265
7265
  template.innerHTML = `
7266
- <${componentName$n}
7266
+ <${componentName$o}
7267
7267
  tabindex="-1"
7268
7268
  slot="input"
7269
- ></${componentName$n}>
7269
+ ></${componentName$o}>
7270
7270
  `;
7271
7271
 
7272
7272
  this.baseElement.appendChild(template.content.cloneNode(true));
7273
7273
 
7274
- this.inputElement = this.shadowRoot.querySelector(componentName$n);
7274
+ this.inputElement = this.shadowRoot.querySelector(componentName$o);
7275
7275
 
7276
7276
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
7277
7277
  includeAttrs: [
@@ -7288,7 +7288,7 @@ const customMixin$4 = (superclass) =>
7288
7288
  }
7289
7289
  };
7290
7290
 
7291
- const { host: host$a, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
7291
+ const { host: host$b, label: label$3, requiredIndicator: requiredIndicator$3, inputField: inputField$1, phoneInput, errorMessage: errorMessage$4, helperText: helperText$3 } = {
7292
7292
  host: { selector: () => ':host' },
7293
7293
  label: { selector: '::part(label)' },
7294
7294
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -7302,7 +7302,7 @@ const PhoneFieldInputBoxClass = compose(
7302
7302
  createStyleMixin({
7303
7303
  mappings: {
7304
7304
  fontSize: [
7305
- host$a,
7305
+ host$b,
7306
7306
  inputField$1,
7307
7307
  {
7308
7308
  selector: TextFieldClass.componentName,
@@ -7310,9 +7310,9 @@ const PhoneFieldInputBoxClass = compose(
7310
7310
  },
7311
7311
  ],
7312
7312
  fontFamily: [label$3, errorMessage$4, helperText$3],
7313
- hostWidth: { ...host$a, property: 'width' },
7314
- hostMinWidth: { ...host$a, property: 'min-width' },
7315
- hostDirection: { ...host$a, property: 'direction' },
7313
+ hostWidth: { ...host$b, property: 'width' },
7314
+ hostMinWidth: { ...host$b, property: 'min-width' },
7315
+ hostDirection: { ...host$b, property: 'direction' },
7316
7316
 
7317
7317
  inputBorderStyle: { ...inputField$1, property: 'border-style' },
7318
7318
  inputBorderWidth: { ...inputField$1, property: 'border-width' },
@@ -7404,56 +7404,56 @@ const PhoneFieldInputBoxClass = compose(
7404
7404
  ${resetInputLabelPosition('vaadin-text-field')}
7405
7405
  `,
7406
7406
  excludeAttrsSync: ['tabindex'],
7407
- componentName: componentName$m,
7407
+ componentName: componentName$n,
7408
7408
  })
7409
7409
  );
7410
7410
 
7411
- const vars$g = PhoneFieldInputBoxClass.cssVarList;
7411
+ const vars$h = PhoneFieldInputBoxClass.cssVarList;
7412
7412
 
7413
7413
  const phoneInputBoxField = {
7414
- [vars$g.hostWidth]: '16em',
7415
- [vars$g.hostMinWidth]: refs.minWidth,
7416
- [vars$g.hostDirection]: refs.direction,
7417
- [vars$g.fontSize]: refs.fontSize,
7418
- [vars$g.fontFamily]: refs.fontFamily,
7419
- [vars$g.labelTextColor]: refs.labelTextColor,
7420
- [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
7421
- [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
7422
- [vars$g.inputValueTextColor]: refs.valueTextColor,
7423
- [vars$g.inputPlaceholderTextColor]: refs.placeholderTextColor,
7424
- [vars$g.inputBorderStyle]: refs.borderStyle,
7425
- [vars$g.inputBorderWidth]: refs.borderWidth,
7426
- [vars$g.inputBorderColor]: refs.borderColor,
7427
- [vars$g.inputBorderRadius]: refs.borderRadius,
7428
- [vars$g.inputOutlineStyle]: refs.outlineStyle,
7429
- [vars$g.inputOutlineWidth]: refs.outlineWidth,
7430
- [vars$g.inputOutlineColor]: refs.outlineColor,
7431
- [vars$g.inputOutlineOffset]: refs.outlineOffset,
7414
+ [vars$h.hostWidth]: '16em',
7415
+ [vars$h.hostMinWidth]: refs.minWidth,
7416
+ [vars$h.hostDirection]: refs.direction,
7417
+ [vars$h.fontSize]: refs.fontSize,
7418
+ [vars$h.fontFamily]: refs.fontFamily,
7419
+ [vars$h.labelTextColor]: refs.labelTextColor,
7420
+ [vars$h.labelRequiredIndicator]: refs.requiredIndicator,
7421
+ [vars$h.errorMessageTextColor]: refs.errorMessageTextColor,
7422
+ [vars$h.inputValueTextColor]: refs.valueTextColor,
7423
+ [vars$h.inputPlaceholderTextColor]: refs.placeholderTextColor,
7424
+ [vars$h.inputBorderStyle]: refs.borderStyle,
7425
+ [vars$h.inputBorderWidth]: refs.borderWidth,
7426
+ [vars$h.inputBorderColor]: refs.borderColor,
7427
+ [vars$h.inputBorderRadius]: refs.borderRadius,
7428
+ [vars$h.inputOutlineStyle]: refs.outlineStyle,
7429
+ [vars$h.inputOutlineWidth]: refs.outlineWidth,
7430
+ [vars$h.inputOutlineColor]: refs.outlineColor,
7431
+ [vars$h.inputOutlineOffset]: refs.outlineOffset,
7432
7432
  _fullWidth: {
7433
- [vars$g.hostWidth]: refs.width,
7433
+ [vars$h.hostWidth]: refs.width,
7434
7434
  },
7435
7435
  };
7436
7436
 
7437
7437
  var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
7438
7438
  __proto__: null,
7439
7439
  default: phoneInputBoxField,
7440
- vars: vars$g
7440
+ vars: vars$h
7441
7441
  });
7442
7442
 
7443
- const componentName$l = getComponentName('new-password-internal');
7443
+ const componentName$m = getComponentName('new-password-internal');
7444
7444
 
7445
7445
  const interpolateString = (template, values) =>
7446
7446
  template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
7447
7447
 
7448
7448
  // eslint-disable-next-line max-classes-per-file
7449
7449
 
7450
- const componentName$k = getComponentName('policy-validation');
7450
+ const componentName$l = getComponentName('policy-validation');
7451
7451
 
7452
7452
  const overrideAttrs = ['data-password-policy-value-minlength'];
7453
7453
  const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
7454
7454
  const policyAttrs = ['label', 'value', ...dataAttrs];
7455
7455
 
7456
- class RawPolicyValidation extends createBaseClass({ componentName: componentName$k, baseSelector: ':host > div' }) {
7456
+ class RawPolicyValidation extends createBaseClass({ componentName: componentName$l, baseSelector: ':host > div' }) {
7457
7457
  #availablePolicies;
7458
7458
 
7459
7459
  #activePolicies = [];
@@ -7626,7 +7626,7 @@ class RawPolicyValidation extends createBaseClass({ componentName: componentName
7626
7626
  }
7627
7627
  }
7628
7628
 
7629
- const { host: host$9, item, symbolDefault, symbolSuccess, symbolError } = {
7629
+ const { host: host$a, item, symbolDefault, symbolSuccess, symbolError } = {
7630
7630
  host: { selector: () => ':host > div' },
7631
7631
  item: { selector: () => '.item' },
7632
7632
  symbolDefault: { selector: () => '.item[data-valid="none"]::before' },
@@ -7642,13 +7642,13 @@ const PolicyValidationClass = compose(
7642
7642
  fontSize: {},
7643
7643
  fontFamily: {},
7644
7644
  padding: {},
7645
- borderWidth: { ...host$9, property: 'border-width' },
7646
- borderStyle: { ...host$9, property: 'border-style' },
7647
- borderColor: { ...host$9, property: 'border-color' },
7648
- borderRadius: { ...host$9, property: 'border-radius' },
7649
- backgroundColor: { ...host$9, property: 'background-color' },
7645
+ borderWidth: { ...host$a, property: 'border-width' },
7646
+ borderStyle: { ...host$a, property: 'border-style' },
7647
+ borderColor: { ...host$a, property: 'border-color' },
7648
+ borderRadius: { ...host$a, property: 'border-radius' },
7649
+ backgroundColor: { ...host$a, property: 'background-color' },
7650
7650
  textColor: { property: 'color' },
7651
- labelMargin: { ...host$9, property: 'gap' },
7651
+ labelMargin: { ...host$a, property: 'gap' },
7652
7652
  itemsSpacing: { ...item, property: 'line-height' },
7653
7653
  itemSymbolSuccessColor: { ...symbolSuccess, property: 'color' },
7654
7654
  itemSymbolErrorColor: { ...symbolError, property: 'color' },
@@ -7661,7 +7661,7 @@ const PolicyValidationClass = compose(
7661
7661
  componentNameValidationMixin
7662
7662
  )(RawPolicyValidation);
7663
7663
 
7664
- const componentName$j = getComponentName('new-password');
7664
+ const componentName$k = getComponentName('new-password');
7665
7665
 
7666
7666
  const policyPreviewVars = PolicyValidationClass.cssVarList;
7667
7667
 
@@ -7673,16 +7673,16 @@ const customMixin$3 = (superclass) =>
7673
7673
  const template = document.createElement('template');
7674
7674
 
7675
7675
  template.innerHTML = `
7676
- <${componentName$l}
7676
+ <${componentName$m}
7677
7677
  name="new-password"
7678
7678
  tabindex="-1"
7679
7679
  slot="input"
7680
- ></${componentName$l}>
7680
+ ></${componentName$m}>
7681
7681
  `;
7682
7682
 
7683
7683
  this.baseElement.appendChild(template.content.cloneNode(true));
7684
7684
 
7685
- this.inputElement = this.shadowRoot.querySelector(componentName$l);
7685
+ this.inputElement = this.shadowRoot.querySelector(componentName$m);
7686
7686
 
7687
7687
  forwardAttrs(this, this.inputElement, {
7688
7688
  includeAttrs: [
@@ -7709,7 +7709,7 @@ const customMixin$3 = (superclass) =>
7709
7709
  };
7710
7710
 
7711
7711
  const {
7712
- host: host$8,
7712
+ host: host$9,
7713
7713
  label: label$2,
7714
7714
  internalInputsWrapper,
7715
7715
  errorMessage: errorMessage$3,
@@ -7730,7 +7730,7 @@ const NewPasswordClass = compose(
7730
7730
  createStyleMixin({
7731
7731
  mappings: {
7732
7732
  fontSize: [
7733
- host$8,
7733
+ host$9,
7734
7734
  {},
7735
7735
  {
7736
7736
  selector: PasswordClass.componentName,
@@ -7739,13 +7739,13 @@ const NewPasswordClass = compose(
7739
7739
  ],
7740
7740
  fontFamily: [label$2, errorMessage$3, helperText$2],
7741
7741
  errorMessageTextColor: { ...errorMessage$3, property: 'color' },
7742
- hostWidth: { ...host$8, property: 'width' },
7743
- hostMinWidth: { ...host$8, property: 'min-width' },
7742
+ hostWidth: { ...host$9, property: 'width' },
7743
+ hostMinWidth: { ...host$9, property: 'min-width' },
7744
7744
  hostDirection: [
7745
- { ...host$8, property: 'direction' },
7745
+ { ...host$9, property: 'direction' },
7746
7746
  { ...passwordInput, property: PasswordClass.cssVarList.hostDirection },
7747
7747
  ],
7748
- inputsRequiredIndicator: { ...host$8, property: 'content' },
7748
+ inputsRequiredIndicator: { ...host$9, property: 'content' },
7749
7749
  spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
7750
7750
  policyPreviewBackgroundColor: {
7751
7751
  ...policyPreview,
@@ -7814,36 +7814,36 @@ const NewPasswordClass = compose(
7814
7814
  }
7815
7815
  `,
7816
7816
  excludeAttrsSync: ['tabindex'],
7817
- componentName: componentName$j,
7817
+ componentName: componentName$k,
7818
7818
  })
7819
7819
  );
7820
7820
 
7821
- const globalRefs$b = getThemeRefs(globals);
7822
- const vars$f = NewPasswordClass.cssVarList;
7821
+ const globalRefs$c = getThemeRefs(globals);
7822
+ const vars$g = NewPasswordClass.cssVarList;
7823
7823
 
7824
7824
  const newPassword = {
7825
- [vars$f.hostWidth]: refs.width,
7826
- [vars$f.hostMinWidth]: refs.minWidth,
7827
- [vars$f.hostDirection]: refs.direction,
7828
- [vars$f.fontSize]: refs.fontSize,
7829
- [vars$f.fontFamily]: refs.fontFamily,
7830
- [vars$f.spaceBetweenInputs]: '1em',
7831
- [vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
7832
- [vars$f.policyPreviewBackgroundColor]: 'none',
7833
- [vars$f.policyPreviewPadding]: globalRefs$b.spacing.lg,
7825
+ [vars$g.hostWidth]: refs.width,
7826
+ [vars$g.hostMinWidth]: refs.minWidth,
7827
+ [vars$g.hostDirection]: refs.direction,
7828
+ [vars$g.fontSize]: refs.fontSize,
7829
+ [vars$g.fontFamily]: refs.fontFamily,
7830
+ [vars$g.spaceBetweenInputs]: '1em',
7831
+ [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
7832
+ [vars$g.policyPreviewBackgroundColor]: 'none',
7833
+ [vars$g.policyPreviewPadding]: globalRefs$c.spacing.lg,
7834
7834
 
7835
7835
  _required: {
7836
7836
  // NewPassword doesn't pass `required` attribute to its Password components.
7837
7837
  // That's why we fake the required indicator on each input.
7838
7838
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
7839
- [vars$f.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
7839
+ [vars$g.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
7840
7840
  },
7841
7841
  };
7842
7842
 
7843
7843
  var newPassword$1 = /*#__PURE__*/Object.freeze({
7844
7844
  __proto__: null,
7845
7845
  default: newPassword,
7846
- vars: vars$f
7846
+ vars: vars$g
7847
7847
  });
7848
7848
 
7849
7849
  const getFileBase64 = (fileObj) => {
@@ -7858,7 +7858,7 @@ const getFilename = (fileObj) => {
7858
7858
  return fileObj.name.replace(/^.*\\/, '');
7859
7859
  };
7860
7860
 
7861
- const componentName$i = getComponentName('upload-file');
7861
+ const componentName$j = getComponentName('upload-file');
7862
7862
 
7863
7863
  const observedAttributes$1 = [
7864
7864
  'title',
@@ -7873,7 +7873,7 @@ const observedAttributes$1 = [
7873
7873
  'icon',
7874
7874
  ];
7875
7875
 
7876
- const BaseInputClass = createBaseInputClass({ componentName: componentName$i, baseSelector: ':host > div' });
7876
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$j, baseSelector: ':host > div' });
7877
7877
 
7878
7878
  class RawUploadFile extends BaseInputClass {
7879
7879
  static get observedAttributes() {
@@ -8045,7 +8045,7 @@ class RawUploadFile extends BaseInputClass {
8045
8045
  }
8046
8046
 
8047
8047
  const buttonVars = ButtonClass.cssVarList;
8048
- const { host: host$7, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
8048
+ const { host: host$8, wrapper, icon, title, description, requiredIndicator: requiredIndicator$2 } = {
8049
8049
  host: { selector: () => ':host' },
8050
8050
  wrapper: { selector: () => ':host > div' },
8051
8051
  icon: { selector: () => '::slotted(*)' },
@@ -8064,11 +8064,11 @@ const UploadFileClass = compose(
8064
8064
  borderWidth: {},
8065
8065
  borderStyle: {},
8066
8066
  borderRadius: {},
8067
- hostHeight: { ...host$7, property: 'height' },
8068
- hostWidth: { ...host$7, property: 'width' },
8067
+ hostHeight: { ...host$8, property: 'height' },
8068
+ hostWidth: { ...host$8, property: 'width' },
8069
8069
  hostPadding: { property: 'padding' },
8070
8070
  hostDirection: [
8071
- { ...host$7, property: 'direction' },
8071
+ { ...host$8, property: 'direction' },
8072
8072
  { selector: () => ButtonClass.componentName, property: buttonVars.hostDirection },
8073
8073
  ],
8074
8074
  gap: { ...wrapper },
@@ -8088,77 +8088,77 @@ const UploadFileClass = compose(
8088
8088
  componentNameValidationMixin
8089
8089
  )(RawUploadFile);
8090
8090
 
8091
- const vars$e = UploadFileClass.cssVarList;
8091
+ const vars$f = UploadFileClass.cssVarList;
8092
8092
 
8093
8093
  const uploadFile = {
8094
- [vars$e.hostDirection]: refs.direction,
8095
- [vars$e.labelTextColor]: refs.labelTextColor,
8096
- [vars$e.fontFamily]: refs.fontFamily,
8094
+ [vars$f.hostDirection]: refs.direction,
8095
+ [vars$f.labelTextColor]: refs.labelTextColor,
8096
+ [vars$f.fontFamily]: refs.fontFamily,
8097
8097
 
8098
- [vars$e.iconSize]: '2em',
8098
+ [vars$f.iconSize]: '2em',
8099
8099
 
8100
- [vars$e.hostPadding]: '0.75em',
8101
- [vars$e.gap]: '0.5em',
8100
+ [vars$f.hostPadding]: '0.75em',
8101
+ [vars$f.gap]: '0.5em',
8102
8102
 
8103
- [vars$e.fontSize]: '16px',
8104
- [vars$e.titleFontWeight]: '500',
8105
- [vars$e.lineHeight]: '1em',
8103
+ [vars$f.fontSize]: '16px',
8104
+ [vars$f.titleFontWeight]: '500',
8105
+ [vars$f.lineHeight]: '1em',
8106
8106
 
8107
- [vars$e.borderWidth]: refs.borderWidth,
8108
- [vars$e.borderColor]: refs.borderColor,
8109
- [vars$e.borderRadius]: refs.borderRadius,
8110
- [vars$e.borderStyle]: 'dashed',
8107
+ [vars$f.borderWidth]: refs.borderWidth,
8108
+ [vars$f.borderColor]: refs.borderColor,
8109
+ [vars$f.borderRadius]: refs.borderRadius,
8110
+ [vars$f.borderStyle]: 'dashed',
8111
8111
 
8112
8112
  _required: {
8113
- [vars$e.requiredIndicator]: refs.requiredIndicator,
8113
+ [vars$f.requiredIndicator]: refs.requiredIndicator,
8114
8114
  },
8115
8115
 
8116
8116
  size: {
8117
8117
  xs: {
8118
- [vars$e.hostHeight]: '196px',
8119
- [vars$e.hostWidth]: '200px',
8120
- [vars$e.titleFontSize]: '0.875em',
8121
- [vars$e.descriptionFontSize]: '0.875em',
8122
- [vars$e.lineHeight]: '1.25em',
8118
+ [vars$f.hostHeight]: '196px',
8119
+ [vars$f.hostWidth]: '200px',
8120
+ [vars$f.titleFontSize]: '0.875em',
8121
+ [vars$f.descriptionFontSize]: '0.875em',
8122
+ [vars$f.lineHeight]: '1.25em',
8123
8123
  },
8124
8124
  sm: {
8125
- [vars$e.hostHeight]: '216px',
8126
- [vars$e.hostWidth]: '230px',
8127
- [vars$e.titleFontSize]: '1em',
8128
- [vars$e.descriptionFontSize]: '0.875em',
8129
- [vars$e.lineHeight]: '1.25em',
8125
+ [vars$f.hostHeight]: '216px',
8126
+ [vars$f.hostWidth]: '230px',
8127
+ [vars$f.titleFontSize]: '1em',
8128
+ [vars$f.descriptionFontSize]: '0.875em',
8129
+ [vars$f.lineHeight]: '1.25em',
8130
8130
  },
8131
8131
  md: {
8132
- [vars$e.hostHeight]: '256px',
8133
- [vars$e.hostWidth]: '312px',
8134
- [vars$e.titleFontSize]: '1.125em',
8135
- [vars$e.descriptionFontSize]: '1em',
8136
- [vars$e.lineHeight]: '1.5em',
8132
+ [vars$f.hostHeight]: '256px',
8133
+ [vars$f.hostWidth]: '312px',
8134
+ [vars$f.titleFontSize]: '1.125em',
8135
+ [vars$f.descriptionFontSize]: '1em',
8136
+ [vars$f.lineHeight]: '1.5em',
8137
8137
  },
8138
8138
  lg: {
8139
- [vars$e.hostHeight]: '280px',
8140
- [vars$e.hostWidth]: '336px',
8141
- [vars$e.titleFontSize]: '1.125em',
8142
- [vars$e.descriptionFontSize]: '1.125em',
8143
- [vars$e.lineHeight]: '1.75em',
8139
+ [vars$f.hostHeight]: '280px',
8140
+ [vars$f.hostWidth]: '336px',
8141
+ [vars$f.titleFontSize]: '1.125em',
8142
+ [vars$f.descriptionFontSize]: '1.125em',
8143
+ [vars$f.lineHeight]: '1.75em',
8144
8144
  },
8145
8145
  },
8146
8146
 
8147
8147
  _fullWidth: {
8148
- [vars$e.hostWidth]: refs.width,
8148
+ [vars$f.hostWidth]: refs.width,
8149
8149
  },
8150
8150
  };
8151
8151
 
8152
8152
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
8153
8153
  __proto__: null,
8154
8154
  default: uploadFile,
8155
- vars: vars$e
8155
+ vars: vars$f
8156
8156
  });
8157
8157
 
8158
- const componentName$h = getComponentName('button-selection-group-item');
8158
+ const componentName$i = getComponentName('button-selection-group-item');
8159
8159
 
8160
8160
  class RawSelectItem extends createBaseClass({
8161
- componentName: componentName$h,
8161
+ componentName: componentName$i,
8162
8162
  baseSelector: ':host > descope-button',
8163
8163
  }) {
8164
8164
  get size() {
@@ -8265,39 +8265,39 @@ const ButtonSelectionGroupItemClass = compose(
8265
8265
  componentNameValidationMixin
8266
8266
  )(RawSelectItem);
8267
8267
 
8268
- const globalRefs$a = getThemeRefs(globals);
8268
+ const globalRefs$b = getThemeRefs(globals);
8269
8269
 
8270
- const vars$d = ButtonSelectionGroupItemClass.cssVarList;
8270
+ const vars$e = ButtonSelectionGroupItemClass.cssVarList;
8271
8271
 
8272
8272
  const buttonSelectionGroupItem = {
8273
- [vars$d.hostDirection]: 'inherit',
8274
- [vars$d.backgroundColor]: globalRefs$a.colors.surface.main,
8275
- [vars$d.labelTextColor]: globalRefs$a.colors.surface.contrast,
8276
- [vars$d.borderColor]: globalRefs$a.colors.surface.light,
8277
- [vars$d.borderStyle]: 'solid',
8278
- [vars$d.borderRadius]: globalRefs$a.radius.sm,
8279
- [vars$d.outlineColor]: 'transparent',
8280
- [vars$d.borderWidth]: globalRefs$a.border.xs,
8273
+ [vars$e.hostDirection]: 'inherit',
8274
+ [vars$e.backgroundColor]: globalRefs$b.colors.surface.main,
8275
+ [vars$e.labelTextColor]: globalRefs$b.colors.surface.contrast,
8276
+ [vars$e.borderColor]: globalRefs$b.colors.surface.light,
8277
+ [vars$e.borderStyle]: 'solid',
8278
+ [vars$e.borderRadius]: globalRefs$b.radius.sm,
8279
+ [vars$e.outlineColor]: 'transparent',
8280
+ [vars$e.borderWidth]: globalRefs$b.border.xs,
8281
8281
 
8282
8282
  _hover: {
8283
- [vars$d.backgroundColor]: globalRefs$a.colors.surface.highlight,
8283
+ [vars$e.backgroundColor]: globalRefs$b.colors.surface.highlight,
8284
8284
  },
8285
8285
 
8286
8286
  _focused: {
8287
- [vars$d.outlineColor]: globalRefs$a.colors.surface.light,
8287
+ [vars$e.outlineColor]: globalRefs$b.colors.surface.light,
8288
8288
  },
8289
8289
 
8290
8290
  _selected: {
8291
- [vars$d.borderColor]: globalRefs$a.colors.surface.contrast,
8292
- [vars$d.backgroundColor]: globalRefs$a.colors.surface.contrast,
8293
- [vars$d.labelTextColor]: globalRefs$a.colors.surface.main,
8291
+ [vars$e.borderColor]: globalRefs$b.colors.surface.contrast,
8292
+ [vars$e.backgroundColor]: globalRefs$b.colors.surface.contrast,
8293
+ [vars$e.labelTextColor]: globalRefs$b.colors.surface.main,
8294
8294
  },
8295
8295
  };
8296
8296
 
8297
8297
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
8298
8298
  __proto__: null,
8299
8299
  default: buttonSelectionGroupItem,
8300
- vars: vars$d
8300
+ vars: vars$e
8301
8301
  });
8302
8302
 
8303
8303
  const createBaseButtonSelectionGroupInternalClass = (componentName) => {
@@ -8396,10 +8396,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
8396
8396
  return BaseButtonSelectionGroupInternalClass;
8397
8397
  };
8398
8398
 
8399
- const componentName$g = getComponentName('button-selection-group-internal');
8399
+ const componentName$h = getComponentName('button-selection-group-internal');
8400
8400
 
8401
8401
  class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
8402
- componentName$g
8402
+ componentName$h
8403
8403
  ) {
8404
8404
  getSelectedNode() {
8405
8405
  return this.items.find((item) => item.hasAttribute('selected'));
@@ -8555,7 +8555,7 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
8555
8555
  }
8556
8556
  };
8557
8557
 
8558
- const { host: host$6, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
8558
+ const { host: host$7, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, errorMessage: errorMessage$2 } = {
8559
8559
  host: { selector: () => ':host' },
8560
8560
  label: { selector: '::part(label)' },
8561
8561
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
@@ -8564,9 +8564,9 @@ const { host: host$6, label: label$1, requiredIndicator: requiredIndicator$1, in
8564
8564
  };
8565
8565
 
8566
8566
  const buttonSelectionGroupMappings = {
8567
- hostWidth: { ...host$6, property: 'width' },
8568
- hostDirection: { ...host$6, property: 'direction' },
8569
- fontFamily: host$6,
8567
+ hostWidth: { ...host$7, property: 'width' },
8568
+ hostDirection: { ...host$7, property: 'direction' },
8569
+ fontFamily: host$7,
8570
8570
  labelTextColor: [
8571
8571
  { ...label$1, property: 'color' },
8572
8572
  { ...requiredIndicator$1, property: 'color' },
@@ -8631,7 +8631,7 @@ const buttonSelectionGroupStyles = `
8631
8631
  ${resetInputCursor('vaadin-text-field')}
8632
8632
  `;
8633
8633
 
8634
- const componentName$f = getComponentName('button-selection-group');
8634
+ const componentName$g = getComponentName('button-selection-group');
8635
8635
 
8636
8636
  const buttonSelectionGroupMixin = (superclass) =>
8637
8637
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -8640,19 +8640,19 @@ const buttonSelectionGroupMixin = (superclass) =>
8640
8640
  const template = document.createElement('template');
8641
8641
 
8642
8642
  template.innerHTML = `
8643
- <${componentName$g}
8643
+ <${componentName$h}
8644
8644
  name="button-selection-group"
8645
8645
  slot="input"
8646
8646
  tabindex="-1"
8647
8647
  part="internal-component"
8648
8648
  >
8649
8649
  <slot></slot>
8650
- </${componentName$g}>
8650
+ </${componentName$h}>
8651
8651
  `;
8652
8652
 
8653
8653
  this.baseElement.appendChild(template.content.cloneNode(true));
8654
8654
 
8655
- this.inputElement = this.shadowRoot.querySelector(componentName$g);
8655
+ this.inputElement = this.shadowRoot.querySelector(componentName$h);
8656
8656
 
8657
8657
  forwardAttrs(this, this.inputElement, {
8658
8658
  includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -8677,11 +8677,11 @@ const ButtonSelectionGroupClass = compose(
8677
8677
  wrappedEleName: 'vaadin-text-field',
8678
8678
  style: () => buttonSelectionGroupStyles,
8679
8679
  excludeAttrsSync: ['tabindex'],
8680
- componentName: componentName$f,
8680
+ componentName: componentName$g,
8681
8681
  })
8682
8682
  );
8683
8683
 
8684
- const globalRefs$9 = getThemeRefs(globals);
8684
+ const globalRefs$a = getThemeRefs(globals);
8685
8685
 
8686
8686
  const createBaseButtonSelectionGroupMappings = (vars) => ({
8687
8687
  [vars.hostDirection]: refs.direction,
@@ -8689,26 +8689,26 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
8689
8689
  [vars.labelTextColor]: refs.labelTextColor,
8690
8690
  [vars.labelRequiredIndicator]: refs.requiredIndicator,
8691
8691
  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
8692
- [vars.itemsSpacing]: globalRefs$9.spacing.sm,
8692
+ [vars.itemsSpacing]: globalRefs$a.spacing.sm,
8693
8693
  [vars.hostWidth]: refs.width,
8694
8694
  });
8695
8695
 
8696
- const vars$c = ButtonSelectionGroupClass.cssVarList;
8696
+ const vars$d = ButtonSelectionGroupClass.cssVarList;
8697
8697
 
8698
8698
  const buttonSelectionGroup = {
8699
- ...createBaseButtonSelectionGroupMappings(vars$c),
8699
+ ...createBaseButtonSelectionGroupMappings(vars$d),
8700
8700
  };
8701
8701
 
8702
8702
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
8703
8703
  __proto__: null,
8704
8704
  default: buttonSelectionGroup,
8705
- vars: vars$c
8705
+ vars: vars$d
8706
8706
  });
8707
8707
 
8708
- const componentName$e = getComponentName('button-multi-selection-group-internal');
8708
+ const componentName$f = getComponentName('button-multi-selection-group-internal');
8709
8709
 
8710
8710
  class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
8711
- componentName$e
8711
+ componentName$f
8712
8712
  ) {
8713
8713
  #getSelectedNodes() {
8714
8714
  return this.items.filter((item) => item.hasAttribute('selected'));
@@ -8811,7 +8811,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
8811
8811
  }
8812
8812
  }
8813
8813
 
8814
- const componentName$d = getComponentName('button-multi-selection-group');
8814
+ const componentName$e = getComponentName('button-multi-selection-group');
8815
8815
 
8816
8816
  const buttonMultiSelectionGroupMixin = (superclass) =>
8817
8817
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -8820,19 +8820,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
8820
8820
  const template = document.createElement('template');
8821
8821
 
8822
8822
  template.innerHTML = `
8823
- <${componentName$e}
8823
+ <${componentName$f}
8824
8824
  name="button-selection-group"
8825
8825
  slot="input"
8826
8826
  tabindex="-1"
8827
8827
  part="internal-component"
8828
8828
  >
8829
8829
  <slot></slot>
8830
- </${componentName$e}>
8830
+ </${componentName$f}>
8831
8831
  `;
8832
8832
 
8833
8833
  this.baseElement.appendChild(template.content.cloneNode(true));
8834
8834
 
8835
- this.inputElement = this.shadowRoot.querySelector(componentName$e);
8835
+ this.inputElement = this.shadowRoot.querySelector(componentName$f);
8836
8836
 
8837
8837
  forwardAttrs(this, this.inputElement, {
8838
8838
  includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -8857,23 +8857,23 @@ const ButtonMultiSelectionGroupClass = compose(
8857
8857
  wrappedEleName: 'vaadin-text-field',
8858
8858
  style: () => buttonSelectionGroupStyles,
8859
8859
  excludeAttrsSync: ['tabindex'],
8860
- componentName: componentName$d,
8860
+ componentName: componentName$e,
8861
8861
  })
8862
8862
  );
8863
8863
 
8864
- const vars$b = ButtonMultiSelectionGroupClass.cssVarList;
8864
+ const vars$c = ButtonMultiSelectionGroupClass.cssVarList;
8865
8865
 
8866
8866
  const buttonMultiSelectionGroup = {
8867
- ...createBaseButtonSelectionGroupMappings(vars$b),
8867
+ ...createBaseButtonSelectionGroupMappings(vars$c),
8868
8868
  };
8869
8869
 
8870
8870
  var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
8871
8871
  __proto__: null,
8872
8872
  default: buttonMultiSelectionGroup,
8873
- vars: vars$b
8873
+ vars: vars$c
8874
8874
  });
8875
8875
 
8876
- const componentName$c = getComponentName('modal');
8876
+ const componentName$d = getComponentName('modal');
8877
8877
 
8878
8878
  const customMixin$2 = (superclass) =>
8879
8879
  class ModalMixinClass extends superclass {
@@ -8972,28 +8972,28 @@ const ModalClass = compose(
8972
8972
  wrappedEleName: 'vaadin-dialog',
8973
8973
  style: () => ``,
8974
8974
  excludeAttrsSync: ['tabindex', 'opened'],
8975
- componentName: componentName$c,
8975
+ componentName: componentName$d,
8976
8976
  })
8977
8977
  );
8978
8978
 
8979
- const globalRefs$8 = getThemeRefs(globals);
8979
+ const globalRefs$9 = getThemeRefs(globals);
8980
8980
 
8981
8981
  const compVars$1 = ModalClass.cssVarList;
8982
8982
 
8983
8983
  const modal = {
8984
- [compVars$1.overlayBackgroundColor]: globalRefs$8.colors.surface.main,
8985
- [compVars$1.overlayShadow]: globalRefs$8.shadow.wide['2xl'],
8984
+ [compVars$1.overlayBackgroundColor]: globalRefs$9.colors.surface.main,
8985
+ [compVars$1.overlayShadow]: globalRefs$9.shadow.wide['2xl'],
8986
8986
  [compVars$1.overlayWidth]: '540px',
8987
8987
  };
8988
8988
 
8989
- const vars$a = {
8989
+ const vars$b = {
8990
8990
  ...compVars$1,
8991
8991
  };
8992
8992
 
8993
8993
  var modal$1 = /*#__PURE__*/Object.freeze({
8994
8994
  __proto__: null,
8995
8995
  default: modal,
8996
- vars: vars$a
8996
+ vars: vars$b
8997
8997
  });
8998
8998
 
8999
8999
  const isValidDataType = (data) => {
@@ -9006,7 +9006,7 @@ const isValidDataType = (data) => {
9006
9006
  return isValid;
9007
9007
  };
9008
9008
 
9009
- const componentName$b = getComponentName('grid');
9009
+ const componentName$c = getComponentName('grid');
9010
9010
 
9011
9011
  const GridMixin = (superclass) =>
9012
9012
  class GridMixinClass extends superclass {
@@ -9166,7 +9166,7 @@ const GridMixin = (superclass) =>
9166
9166
  };
9167
9167
 
9168
9168
  const {
9169
- host: host$5,
9169
+ host: host$6,
9170
9170
  headerRow,
9171
9171
  headerRowCell,
9172
9172
  contentRow,
@@ -9201,15 +9201,15 @@ const GridClass = compose(
9201
9201
  fontWeight: { ...contentRow },
9202
9202
  valueTextColor: { ...contentRow, property: 'color' },
9203
9203
  backgroundColor: [
9204
- { ...host$5, property: 'background-color' },
9204
+ { ...host$6, property: 'background-color' },
9205
9205
  { ...contentRow, property: 'background-color' },
9206
9206
  ],
9207
9207
  sortIndicatorsColor: { ...sortIndicators, property: 'color' },
9208
9208
  activeSortIndicator: { ...activeSortIndicator, property: 'color' },
9209
- borderColor: { ...host$5, property: 'border-color' },
9210
- borderWidth: { ...host$5, property: 'border-width' },
9211
- borderStyle: { ...host$5, property: 'border-style' },
9212
- borderRadius: { ...host$5, property: 'border-radius' },
9209
+ borderColor: { ...host$6, property: 'border-color' },
9210
+ borderWidth: { ...host$6, property: 'border-width' },
9211
+ borderStyle: { ...host$6, property: 'border-style' },
9212
+ borderRadius: { ...host$6, property: 'border-radius' },
9213
9213
  selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
9214
9214
  headerRowTextColor: { ...headerRowCell, property: 'color' },
9215
9215
  separatorColor: [
@@ -9242,40 +9242,40 @@ const GridClass = compose(
9242
9242
  }
9243
9243
  `,
9244
9244
  excludeAttrsSync: ['columns', 'tabindex'],
9245
- componentName: componentName$b,
9245
+ componentName: componentName$c,
9246
9246
  })
9247
9247
  );
9248
9248
 
9249
- const globalRefs$7 = getThemeRefs(globals);
9250
- const vars$9 = GridClass.cssVarList;
9249
+ const globalRefs$8 = getThemeRefs(globals);
9250
+ const vars$a = GridClass.cssVarList;
9251
9251
 
9252
9252
  const grid = {
9253
- [vars$9.hostWidth]: '100%',
9254
- [vars$9.hostHeight]: '100%',
9255
- [vars$9.hostMinHeight]: '400px',
9256
- [vars$9.fontWeight]: '400',
9257
- [vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
9253
+ [vars$a.hostWidth]: '100%',
9254
+ [vars$a.hostHeight]: '100%',
9255
+ [vars$a.hostMinHeight]: '400px',
9256
+ [vars$a.fontWeight]: '400',
9257
+ [vars$a.backgroundColor]: globalRefs$8.colors.surface.main,
9258
9258
 
9259
- [vars$9.fontSize]: refs.fontSize,
9260
- [vars$9.fontFamily]: refs.fontFamily,
9259
+ [vars$a.fontSize]: refs.fontSize,
9260
+ [vars$a.fontFamily]: refs.fontFamily,
9261
9261
 
9262
- [vars$9.sortIndicatorsColor]: globalRefs$7.colors.surface.light,
9263
- [vars$9.activeSortIndicator]: globalRefs$7.colors.surface.dark,
9264
- [vars$9.resizeHandleColor]: globalRefs$7.colors.surface.light,
9262
+ [vars$a.sortIndicatorsColor]: globalRefs$8.colors.surface.light,
9263
+ [vars$a.activeSortIndicator]: globalRefs$8.colors.surface.dark,
9264
+ [vars$a.resizeHandleColor]: globalRefs$8.colors.surface.light,
9265
9265
 
9266
- [vars$9.borderWidth]: refs.borderWidth,
9267
- [vars$9.borderStyle]: refs.borderStyle,
9268
- [vars$9.borderRadius]: refs.borderRadius,
9269
- [vars$9.borderColor]: 'transparent',
9266
+ [vars$a.borderWidth]: refs.borderWidth,
9267
+ [vars$a.borderStyle]: refs.borderStyle,
9268
+ [vars$a.borderRadius]: refs.borderRadius,
9269
+ [vars$a.borderColor]: 'transparent',
9270
9270
 
9271
- [vars$9.headerRowTextColor]: globalRefs$7.colors.surface.dark,
9272
- [vars$9.separatorColor]: globalRefs$7.colors.surface.light,
9271
+ [vars$a.headerRowTextColor]: globalRefs$8.colors.surface.dark,
9272
+ [vars$a.separatorColor]: globalRefs$8.colors.surface.light,
9273
9273
 
9274
- [vars$9.valueTextColor]: globalRefs$7.colors.surface.contrast,
9275
- [vars$9.selectedBackgroundColor]: globalRefs$7.colors.surface.highlight,
9274
+ [vars$a.valueTextColor]: globalRefs$8.colors.surface.contrast,
9275
+ [vars$a.selectedBackgroundColor]: globalRefs$8.colors.surface.highlight,
9276
9276
 
9277
9277
  _bordered: {
9278
- [vars$9.borderColor]: refs.borderColor,
9278
+ [vars$a.borderColor]: refs.borderColor,
9279
9279
  },
9280
9280
  };
9281
9281
 
@@ -9283,10 +9283,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
9283
9283
  __proto__: null,
9284
9284
  default: grid,
9285
9285
  grid: grid,
9286
- vars: vars$9
9286
+ vars: vars$a
9287
9287
  });
9288
9288
 
9289
- const componentName$a = getComponentName('notification-card');
9289
+ const componentName$b = getComponentName('notification-card');
9290
9290
 
9291
9291
  const notificationCardMixin = (superclass) =>
9292
9292
  class NotificationCardMixinClass extends superclass {
@@ -9394,54 +9394,54 @@ const NotificationCardClass = compose(
9394
9394
  }
9395
9395
  `,
9396
9396
  excludeAttrsSync: ['tabindex'],
9397
- componentName: componentName$a,
9397
+ componentName: componentName$b,
9398
9398
  })
9399
9399
  );
9400
9400
 
9401
- const globalRefs$6 = getThemeRefs(globals);
9402
- const vars$8 = NotificationCardClass.cssVarList;
9401
+ const globalRefs$7 = getThemeRefs(globals);
9402
+ const vars$9 = NotificationCardClass.cssVarList;
9403
9403
 
9404
9404
  const shadowColor = '#00000020';
9405
9405
 
9406
9406
  const notification = {
9407
- [vars$8.hostMinWidth]: '415px',
9408
- [vars$8.fontFamily]: globalRefs$6.fonts.font1.family,
9409
- [vars$8.fontSize]: globalRefs$6.typography.body1.size,
9410
- [vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
9411
- [vars$8.textColor]: globalRefs$6.colors.surface.contrast,
9412
- [vars$8.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
9413
- [vars$8.verticalPadding]: '0.625em',
9414
- [vars$8.horizontalPadding]: '1.5em',
9415
- [vars$8.borderRadius]: globalRefs$6.radius.xs,
9407
+ [vars$9.hostMinWidth]: '415px',
9408
+ [vars$9.fontFamily]: globalRefs$7.fonts.font1.family,
9409
+ [vars$9.fontSize]: globalRefs$7.typography.body1.size,
9410
+ [vars$9.backgroundColor]: globalRefs$7.colors.surface.main,
9411
+ [vars$9.textColor]: globalRefs$7.colors.surface.contrast,
9412
+ [vars$9.boxShadow]: `${globalRefs$7.shadow.wide.xl} ${shadowColor}, ${globalRefs$7.shadow.narrow.xl} ${shadowColor}`,
9413
+ [vars$9.verticalPadding]: '0.625em',
9414
+ [vars$9.horizontalPadding]: '1.5em',
9415
+ [vars$9.borderRadius]: globalRefs$7.radius.xs,
9416
9416
 
9417
9417
  _bordered: {
9418
- [vars$8.borderWidth]: globalRefs$6.border.sm,
9419
- [vars$8.borderStyle]: 'solid',
9420
- [vars$8.borderColor]: 'transparent',
9418
+ [vars$9.borderWidth]: globalRefs$7.border.sm,
9419
+ [vars$9.borderStyle]: 'solid',
9420
+ [vars$9.borderColor]: 'transparent',
9421
9421
  },
9422
9422
 
9423
9423
  size: {
9424
- xs: { [vars$8.fontSize]: '12px' },
9425
- sm: { [vars$8.fontSize]: '14px' },
9426
- md: { [vars$8.fontSize]: '16px' },
9427
- lg: { [vars$8.fontSize]: '18px' },
9424
+ xs: { [vars$9.fontSize]: '12px' },
9425
+ sm: { [vars$9.fontSize]: '14px' },
9426
+ md: { [vars$9.fontSize]: '16px' },
9427
+ lg: { [vars$9.fontSize]: '18px' },
9428
9428
  },
9429
9429
 
9430
9430
  mode: {
9431
9431
  primary: {
9432
- [vars$8.backgroundColor]: globalRefs$6.colors.primary.main,
9433
- [vars$8.textColor]: globalRefs$6.colors.primary.contrast,
9434
- [vars$8.borderColor]: globalRefs$6.colors.primary.light,
9432
+ [vars$9.backgroundColor]: globalRefs$7.colors.primary.main,
9433
+ [vars$9.textColor]: globalRefs$7.colors.primary.contrast,
9434
+ [vars$9.borderColor]: globalRefs$7.colors.primary.light,
9435
9435
  },
9436
9436
  success: {
9437
- [vars$8.backgroundColor]: globalRefs$6.colors.success.main,
9438
- [vars$8.textColor]: globalRefs$6.colors.success.contrast,
9439
- [vars$8.borderColor]: globalRefs$6.colors.success.light,
9437
+ [vars$9.backgroundColor]: globalRefs$7.colors.success.main,
9438
+ [vars$9.textColor]: globalRefs$7.colors.success.contrast,
9439
+ [vars$9.borderColor]: globalRefs$7.colors.success.light,
9440
9440
  },
9441
9441
  error: {
9442
- [vars$8.backgroundColor]: globalRefs$6.colors.error.main,
9443
- [vars$8.textColor]: globalRefs$6.colors.error.contrast,
9444
- [vars$8.borderColor]: globalRefs$6.colors.error.light,
9442
+ [vars$9.backgroundColor]: globalRefs$7.colors.error.main,
9443
+ [vars$9.textColor]: globalRefs$7.colors.error.contrast,
9444
+ [vars$9.borderColor]: globalRefs$7.colors.error.light,
9445
9445
  },
9446
9446
  },
9447
9447
  };
@@ -9449,10 +9449,10 @@ const notification = {
9449
9449
  var notificationCard = /*#__PURE__*/Object.freeze({
9450
9450
  __proto__: null,
9451
9451
  default: notification,
9452
- vars: vars$8
9452
+ vars: vars$9
9453
9453
  });
9454
9454
 
9455
- const componentName$9 = getComponentName('multi-select-combo-box');
9455
+ const componentName$a = getComponentName('multi-select-combo-box');
9456
9456
 
9457
9457
  const multiSelectComboBoxMixin = (superclass) =>
9458
9458
  class MultiSelectComboBoxMixinClass extends superclass {
@@ -9840,7 +9840,7 @@ const multiSelectComboBoxMixin = (superclass) =>
9840
9840
  };
9841
9841
 
9842
9842
  const {
9843
- host: host$4,
9843
+ host: host$5,
9844
9844
  inputField,
9845
9845
  inputElement,
9846
9846
  placeholder,
@@ -9878,10 +9878,10 @@ const {
9878
9878
  const MultiSelectComboBoxClass = compose(
9879
9879
  createStyleMixin({
9880
9880
  mappings: {
9881
- hostWidth: { ...host$4, property: 'width' },
9882
- hostDirection: { ...host$4, property: 'direction' },
9881
+ hostWidth: { ...host$5, property: 'width' },
9882
+ hostDirection: { ...host$5, property: 'direction' },
9883
9883
  // we apply font-size also on the host so we can set its width with em
9884
- fontSize: [{}, host$4],
9884
+ fontSize: [{}, host$5],
9885
9885
  chipFontSize: { ...chipLabel, property: 'font-size' },
9886
9886
  fontFamily: [label, placeholder, inputField, helperText$1, errorMessage$1, chipLabel],
9887
9887
  labelTextColor: [
@@ -10056,73 +10056,73 @@ const MultiSelectComboBoxClass = compose(
10056
10056
  // Note: we exclude `placeholder` because the vaadin component observes it and
10057
10057
  // tries to override it, causing us to lose the user set placeholder.
10058
10058
  excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
10059
- componentName: componentName$9,
10059
+ componentName: componentName$a,
10060
10060
  includeForwardProps: ['items', 'renderer', 'selectedItems'],
10061
10061
  })
10062
10062
  );
10063
10063
 
10064
- const globalRefs$5 = getThemeRefs(globals);
10065
- const vars$7 = MultiSelectComboBoxClass.cssVarList;
10064
+ const globalRefs$6 = getThemeRefs(globals);
10065
+ const vars$8 = MultiSelectComboBoxClass.cssVarList;
10066
10066
 
10067
10067
  const multiSelectComboBox = {
10068
- [vars$7.hostWidth]: refs.width,
10069
- [vars$7.hostDirection]: refs.direction,
10070
- [vars$7.fontSize]: refs.fontSize,
10071
- [vars$7.fontFamily]: refs.fontFamily,
10072
- [vars$7.labelTextColor]: refs.labelTextColor,
10073
- [vars$7.errorMessageTextColor]: refs.errorMessageTextColor,
10074
- [vars$7.inputBorderColor]: refs.borderColor,
10075
- [vars$7.inputBorderWidth]: refs.borderWidth,
10076
- [vars$7.inputBorderStyle]: refs.borderStyle,
10077
- [vars$7.inputBorderRadius]: refs.borderRadius,
10078
- [vars$7.inputOutlineColor]: refs.outlineColor,
10079
- [vars$7.inputOutlineOffset]: refs.outlineOffset,
10080
- [vars$7.inputOutlineWidth]: refs.outlineWidth,
10081
- [vars$7.inputOutlineStyle]: refs.outlineStyle,
10082
- [vars$7.labelRequiredIndicator]: refs.requiredIndicator,
10083
- [vars$7.inputValueTextColor]: refs.valueTextColor,
10084
- [vars$7.inputPlaceholderTextColor]: refs.placeholderTextColor,
10085
- [vars$7.inputBackgroundColor]: refs.backgroundColor,
10086
- [vars$7.inputHorizontalPadding]: refs.horizontalPadding,
10087
- [vars$7.inputVerticalPadding]: refs.verticalPadding,
10088
- [vars$7.inputHeight]: refs.inputHeight,
10089
- [vars$7.inputDropdownButtonColor]: globalRefs$5.colors.surface.dark,
10090
- [vars$7.inputDropdownButtonCursor]: 'pointer',
10091
- [vars$7.inputDropdownButtonSize]: refs.toggleButtonSize,
10092
- [vars$7.inputDropdownButtonOffset]: globalRefs$5.spacing.xs,
10093
- [vars$7.overlayItemPaddingInlineStart]: globalRefs$5.spacing.xs,
10094
- [vars$7.overlayItemPaddingInlineEnd]: globalRefs$5.spacing.lg,
10095
- [vars$7.chipFontSize]: refs.chipFontSize,
10096
- [vars$7.chipTextColor]: globalRefs$5.colors.surface.contrast,
10097
- [vars$7.chipBackgroundColor]: globalRefs$5.colors.surface.light,
10068
+ [vars$8.hostWidth]: refs.width,
10069
+ [vars$8.hostDirection]: refs.direction,
10070
+ [vars$8.fontSize]: refs.fontSize,
10071
+ [vars$8.fontFamily]: refs.fontFamily,
10072
+ [vars$8.labelTextColor]: refs.labelTextColor,
10073
+ [vars$8.errorMessageTextColor]: refs.errorMessageTextColor,
10074
+ [vars$8.inputBorderColor]: refs.borderColor,
10075
+ [vars$8.inputBorderWidth]: refs.borderWidth,
10076
+ [vars$8.inputBorderStyle]: refs.borderStyle,
10077
+ [vars$8.inputBorderRadius]: refs.borderRadius,
10078
+ [vars$8.inputOutlineColor]: refs.outlineColor,
10079
+ [vars$8.inputOutlineOffset]: refs.outlineOffset,
10080
+ [vars$8.inputOutlineWidth]: refs.outlineWidth,
10081
+ [vars$8.inputOutlineStyle]: refs.outlineStyle,
10082
+ [vars$8.labelRequiredIndicator]: refs.requiredIndicator,
10083
+ [vars$8.inputValueTextColor]: refs.valueTextColor,
10084
+ [vars$8.inputPlaceholderTextColor]: refs.placeholderTextColor,
10085
+ [vars$8.inputBackgroundColor]: refs.backgroundColor,
10086
+ [vars$8.inputHorizontalPadding]: refs.horizontalPadding,
10087
+ [vars$8.inputVerticalPadding]: refs.verticalPadding,
10088
+ [vars$8.inputHeight]: refs.inputHeight,
10089
+ [vars$8.inputDropdownButtonColor]: globalRefs$6.colors.surface.dark,
10090
+ [vars$8.inputDropdownButtonCursor]: 'pointer',
10091
+ [vars$8.inputDropdownButtonSize]: refs.toggleButtonSize,
10092
+ [vars$8.inputDropdownButtonOffset]: globalRefs$6.spacing.xs,
10093
+ [vars$8.overlayItemPaddingInlineStart]: globalRefs$6.spacing.xs,
10094
+ [vars$8.overlayItemPaddingInlineEnd]: globalRefs$6.spacing.lg,
10095
+ [vars$8.chipFontSize]: refs.chipFontSize,
10096
+ [vars$8.chipTextColor]: globalRefs$6.colors.surface.contrast,
10097
+ [vars$8.chipBackgroundColor]: globalRefs$6.colors.surface.light,
10098
10098
 
10099
10099
  _readonly: {
10100
- [vars$7.inputDropdownButtonCursor]: 'default',
10100
+ [vars$8.inputDropdownButtonCursor]: 'default',
10101
10101
  },
10102
10102
 
10103
10103
  // Overlay theme exposed via the component:
10104
- [vars$7.overlayFontSize]: refs.fontSize,
10105
- [vars$7.overlayFontFamily]: refs.fontFamily,
10106
- [vars$7.overlayCursor]: 'pointer',
10107
- [vars$7.overlayItemBoxShadow]: 'none',
10108
- [vars$7.overlayBackground]: refs.backgroundColor,
10109
- [vars$7.overlayTextColor]: refs.valueTextColor,
10104
+ [vars$8.overlayFontSize]: refs.fontSize,
10105
+ [vars$8.overlayFontFamily]: refs.fontFamily,
10106
+ [vars$8.overlayCursor]: 'pointer',
10107
+ [vars$8.overlayItemBoxShadow]: 'none',
10108
+ [vars$8.overlayBackground]: refs.backgroundColor,
10109
+ [vars$8.overlayTextColor]: refs.valueTextColor,
10110
10110
 
10111
10111
  // Overlay direct theme:
10112
- [vars$7.overlay.minHeight]: '400px',
10113
- [vars$7.overlay.margin]: '0',
10112
+ [vars$8.overlay.minHeight]: '400px',
10113
+ [vars$8.overlay.margin]: '0',
10114
10114
  };
10115
10115
 
10116
10116
  var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
10117
10117
  __proto__: null,
10118
10118
  default: multiSelectComboBox,
10119
10119
  multiSelectComboBox: multiSelectComboBox,
10120
- vars: vars$7
10120
+ vars: vars$8
10121
10121
  });
10122
10122
 
10123
- const componentName$8 = getComponentName('badge');
10123
+ const componentName$9 = getComponentName('badge');
10124
10124
 
10125
- class RawBadge extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > div' }) {
10125
+ class RawBadge extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > div' }) {
10126
10126
  constructor() {
10127
10127
  super();
10128
10128
 
@@ -10173,79 +10173,79 @@ const BadgeClass = compose(
10173
10173
  componentNameValidationMixin
10174
10174
  )(RawBadge);
10175
10175
 
10176
- const globalRefs$4 = getThemeRefs(globals);
10177
- const vars$6 = BadgeClass.cssVarList;
10176
+ const globalRefs$5 = getThemeRefs(globals);
10177
+ const vars$7 = BadgeClass.cssVarList;
10178
10178
 
10179
- const badge$1 = {
10180
- [vars$6.hostWidth]: 'fit-content',
10181
- [vars$6.hostDirection]: globalRefs$4.direction,
10179
+ const badge$2 = {
10180
+ [vars$7.hostWidth]: 'fit-content',
10181
+ [vars$7.hostDirection]: globalRefs$5.direction,
10182
10182
 
10183
- [vars$6.textAlign]: 'center',
10183
+ [vars$7.textAlign]: 'center',
10184
10184
 
10185
- [vars$6.fontFamily]: globalRefs$4.fonts.font1.family,
10186
- [vars$6.fontWeight]: '400',
10185
+ [vars$7.fontFamily]: globalRefs$5.fonts.font1.family,
10186
+ [vars$7.fontWeight]: '400',
10187
10187
 
10188
- [vars$6.verticalPadding]: '0.25em',
10189
- [vars$6.horizontalPadding]: '0.5em',
10188
+ [vars$7.verticalPadding]: '0.25em',
10189
+ [vars$7.horizontalPadding]: '0.5em',
10190
10190
 
10191
- [vars$6.borderWidth]: globalRefs$4.border.xs,
10192
- [vars$6.borderRadius]: globalRefs$4.radius.xs,
10193
- [vars$6.borderColor]: 'transparent',
10194
- [vars$6.borderStyle]: 'solid',
10191
+ [vars$7.borderWidth]: globalRefs$5.border.xs,
10192
+ [vars$7.borderRadius]: globalRefs$5.radius.xs,
10193
+ [vars$7.borderColor]: 'transparent',
10194
+ [vars$7.borderStyle]: 'solid',
10195
10195
 
10196
10196
  _fullWidth: {
10197
- [vars$6.hostWidth]: '100%',
10197
+ [vars$7.hostWidth]: '100%',
10198
10198
  },
10199
10199
 
10200
10200
  size: {
10201
- xs: { [vars$6.fontSize]: '12px' },
10202
- sm: { [vars$6.fontSize]: '14px' },
10203
- md: { [vars$6.fontSize]: '16px' },
10204
- lg: { [vars$6.fontSize]: '18px' },
10201
+ xs: { [vars$7.fontSize]: '12px' },
10202
+ sm: { [vars$7.fontSize]: '14px' },
10203
+ md: { [vars$7.fontSize]: '16px' },
10204
+ lg: { [vars$7.fontSize]: '18px' },
10205
10205
  },
10206
10206
 
10207
10207
  mode: {
10208
10208
  default: {
10209
- [vars$6.textColor]: globalRefs$4.colors.surface.dark,
10209
+ [vars$7.textColor]: globalRefs$5.colors.surface.dark,
10210
10210
  _bordered: {
10211
- [vars$6.borderColor]: globalRefs$4.colors.surface.light,
10211
+ [vars$7.borderColor]: globalRefs$5.colors.surface.light,
10212
10212
  },
10213
10213
  },
10214
10214
  primary: {
10215
- [vars$6.textColor]: globalRefs$4.colors.primary.main,
10215
+ [vars$7.textColor]: globalRefs$5.colors.primary.main,
10216
10216
  _bordered: {
10217
- [vars$6.borderColor]: globalRefs$4.colors.primary.light,
10217
+ [vars$7.borderColor]: globalRefs$5.colors.primary.light,
10218
10218
  },
10219
10219
  },
10220
10220
  secondary: {
10221
- [vars$6.textColor]: globalRefs$4.colors.secondary.main,
10221
+ [vars$7.textColor]: globalRefs$5.colors.secondary.main,
10222
10222
  _bordered: {
10223
- [vars$6.borderColor]: globalRefs$4.colors.secondary.light,
10223
+ [vars$7.borderColor]: globalRefs$5.colors.secondary.light,
10224
10224
  },
10225
10225
  },
10226
10226
  error: {
10227
- [vars$6.textColor]: globalRefs$4.colors.error.main,
10227
+ [vars$7.textColor]: globalRefs$5.colors.error.main,
10228
10228
  _bordered: {
10229
- [vars$6.borderColor]: globalRefs$4.colors.error.light,
10229
+ [vars$7.borderColor]: globalRefs$5.colors.error.light,
10230
10230
  },
10231
10231
  },
10232
10232
  success: {
10233
- [vars$6.textColor]: globalRefs$4.colors.success.main,
10233
+ [vars$7.textColor]: globalRefs$5.colors.success.main,
10234
10234
  _bordered: {
10235
- [vars$6.borderColor]: globalRefs$4.colors.success.light,
10235
+ [vars$7.borderColor]: globalRefs$5.colors.success.light,
10236
10236
  },
10237
10237
  },
10238
10238
  },
10239
10239
  };
10240
10240
 
10241
- var badge$2 = /*#__PURE__*/Object.freeze({
10241
+ var badge$3 = /*#__PURE__*/Object.freeze({
10242
10242
  __proto__: null,
10243
- default: badge$1,
10244
- vars: vars$6
10243
+ default: badge$2,
10244
+ vars: vars$7
10245
10245
  });
10246
10246
 
10247
- const componentName$7 = getComponentName('avatar');
10248
- class RawAvatar extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > .wrapper' }) {
10247
+ const componentName$8 = getComponentName('avatar');
10248
+ class RawAvatar extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > .wrapper' }) {
10249
10249
  constructor() {
10250
10250
  super();
10251
10251
 
@@ -10320,7 +10320,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$7, baseSe
10320
10320
  }
10321
10321
  }
10322
10322
 
10323
- const { host: host$3, editableBadge, avatar: avatar$2 } = {
10323
+ const { host: host$4, editableBadge, avatar: avatar$2 } = {
10324
10324
  host: { selector: () => ':host' },
10325
10325
  editableBadge: { selector: '> .editableBadge' },
10326
10326
  avatar: { selector: 'vaadin-avatar' },
@@ -10329,10 +10329,10 @@ const { host: host$3, editableBadge, avatar: avatar$2 } = {
10329
10329
  const AvatarClass = compose(
10330
10330
  createStyleMixin({
10331
10331
  mappings: {
10332
- hostWidth: { ...host$3, property: 'width' },
10333
- hostHeight: { ...host$3, property: 'height' },
10334
- cursor: [avatar$2, host$3],
10335
- hostDirection: { ...host$3, property: 'direction' },
10332
+ hostWidth: { ...host$4, property: 'width' },
10333
+ hostHeight: { ...host$4, property: 'height' },
10334
+ cursor: [avatar$2, host$4],
10335
+ hostDirection: { ...host$4, property: 'direction' },
10336
10336
  avatarTextColor: { ...avatar$2, property: 'color' },
10337
10337
  avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
10338
10338
  editableIconColor: { ...editableBadge, property: 'color' },
@@ -10344,16 +10344,16 @@ const AvatarClass = compose(
10344
10344
  componentNameValidationMixin
10345
10345
  )(RawAvatar);
10346
10346
 
10347
- const globalRefs$3 = getThemeRefs(globals);
10347
+ const globalRefs$4 = getThemeRefs(globals);
10348
10348
  const compVars = AvatarClass.cssVarList;
10349
10349
 
10350
10350
  const avatar = {
10351
- [compVars.hostDirection]: globalRefs$3.direction,
10352
- [compVars.editableIconColor]: globalRefs$3.colors.surface.dark,
10353
- [compVars.editableBorderColor]: globalRefs$3.colors.surface.dark,
10354
- [compVars.editableBackgroundColor]: globalRefs$3.colors.surface.main,
10355
- [compVars.avatarTextColor]: globalRefs$3.colors.surface.main,
10356
- [compVars.avatarBackgroundColor]: globalRefs$3.colors.surface.dark,
10351
+ [compVars.hostDirection]: globalRefs$4.direction,
10352
+ [compVars.editableIconColor]: globalRefs$4.colors.surface.dark,
10353
+ [compVars.editableBorderColor]: globalRefs$4.colors.surface.dark,
10354
+ [compVars.editableBackgroundColor]: globalRefs$4.colors.surface.main,
10355
+ [compVars.avatarTextColor]: globalRefs$4.colors.surface.main,
10356
+ [compVars.avatarBackgroundColor]: globalRefs$4.colors.surface.dark,
10357
10357
 
10358
10358
  _editable: {
10359
10359
  [compVars.cursor]: 'pointer',
@@ -10379,21 +10379,21 @@ const avatar = {
10379
10379
  },
10380
10380
  };
10381
10381
 
10382
- const vars$5 = {
10382
+ const vars$6 = {
10383
10383
  ...compVars,
10384
10384
  };
10385
10385
 
10386
10386
  var avatar$1 = /*#__PURE__*/Object.freeze({
10387
10387
  __proto__: null,
10388
10388
  default: avatar,
10389
- vars: vars$5
10389
+ vars: vars$6
10390
10390
  });
10391
10391
 
10392
- const componentName$6 = getComponentName('mappings-field-internal');
10392
+ const componentName$7 = getComponentName('mappings-field-internal');
10393
10393
 
10394
- createBaseInputClass({ componentName: componentName$6, baseSelector: 'div' });
10394
+ createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
10395
10395
 
10396
- const componentName$5 = getComponentName('mappings-field');
10396
+ const componentName$6 = getComponentName('mappings-field');
10397
10397
 
10398
10398
  const customMixin$1 = (superclass) =>
10399
10399
  class MappingsFieldMixinClass extends superclass {
@@ -10422,14 +10422,14 @@ const customMixin$1 = (superclass) =>
10422
10422
  const template = document.createElement('template');
10423
10423
 
10424
10424
  template.innerHTML = `
10425
- <${componentName$6}
10425
+ <${componentName$7}
10426
10426
  tabindex="-1"
10427
- ></${componentName$6}>
10427
+ ></${componentName$7}>
10428
10428
  `;
10429
10429
 
10430
10430
  this.baseElement.appendChild(template.content.cloneNode(true));
10431
10431
 
10432
- this.inputElement = this.shadowRoot.querySelector(componentName$6);
10432
+ this.inputElement = this.shadowRoot.querySelector(componentName$7);
10433
10433
 
10434
10434
  forwardAttrs(this, this.inputElement, {
10435
10435
  includeAttrs: [
@@ -10456,7 +10456,7 @@ const customMixin$1 = (superclass) =>
10456
10456
  };
10457
10457
 
10458
10458
  const {
10459
- host: host$2,
10459
+ host: host$3,
10460
10460
  helperText,
10461
10461
  errorMessage,
10462
10462
  mappingItem,
@@ -10484,10 +10484,10 @@ const {
10484
10484
  const MappingsFieldClass = compose(
10485
10485
  createStyleMixin({
10486
10486
  mappings: {
10487
- hostWidth: { ...host$2, property: 'width' },
10488
- hostDirection: { ...host$2, property: 'direction' },
10487
+ hostWidth: { ...host$3, property: 'width' },
10488
+ hostDirection: { ...host$3, property: 'direction' },
10489
10489
  // we apply font-size also on the host so we can set its width with em
10490
- fontSize: [{}, host$2, { ...separator, property: 'margin-top' }],
10490
+ fontSize: [{}, host$3, { ...separator, property: 'margin-top' }],
10491
10491
  fontFamily: [helperText, errorMessage, labels],
10492
10492
  separatorFontSize: { ...separator, property: 'font-size' },
10493
10493
  labelsFontSize: { ...labelsText, property: 'font-size' },
@@ -10558,51 +10558,47 @@ const MappingsFieldClass = compose(
10558
10558
  'options',
10559
10559
  'error-message',
10560
10560
  ],
10561
- componentName: componentName$5,
10561
+ componentName: componentName$6,
10562
10562
  })
10563
10563
  );
10564
10564
 
10565
- const globalRefs$2 = getThemeRefs(globals);
10565
+ const globalRefs$3 = getThemeRefs(globals);
10566
10566
 
10567
- const vars$4 = MappingsFieldClass.cssVarList;
10567
+ const vars$5 = MappingsFieldClass.cssVarList;
10568
10568
 
10569
10569
  const mappingsField = {
10570
- [vars$4.hostWidth]: refs.width,
10571
- [vars$4.hostDirection]: refs.direction,
10572
- [vars$4.fontSize]: refs.fontSize,
10573
- [vars$4.fontFamily]: refs.fontFamily,
10574
- [vars$4.separatorFontSize]: '14px',
10575
- [vars$4.labelsFontSize]: '14px',
10576
- [vars$4.labelsLineHeight]: '1',
10577
- [vars$4.labelsMarginBottom]: '6px',
10578
- [vars$4.labelTextColor]: refs.labelTextColor,
10579
- [vars$4.itemMarginBottom]: '1em',
10570
+ [vars$5.hostWidth]: refs.width,
10571
+ [vars$5.hostDirection]: refs.direction,
10572
+ [vars$5.fontSize]: refs.fontSize,
10573
+ [vars$5.fontFamily]: refs.fontFamily,
10574
+ [vars$5.separatorFontSize]: '14px',
10575
+ [vars$5.labelsFontSize]: '14px',
10576
+ [vars$5.labelsLineHeight]: '1',
10577
+ [vars$5.labelsMarginBottom]: '6px',
10578
+ [vars$5.labelTextColor]: refs.labelTextColor,
10579
+ [vars$5.itemMarginBottom]: '1em',
10580
10580
  // To be positioned correctly, the min width has to match the text field min width
10581
- [vars$4.valueLabelMinWidth]: refs.minWidth,
10581
+ [vars$5.valueLabelMinWidth]: refs.minWidth,
10582
10582
  // To be positioned correctly, the min width has to match the combo box field min width
10583
- [vars$4.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$2.border.xs})`,
10584
- [vars$4.separatorWidth]: '70px',
10585
- [vars$4.removeButtonWidth]: '60px',
10583
+ [vars$5.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$3.border.xs})`,
10584
+ [vars$5.separatorWidth]: '70px',
10585
+ [vars$5.removeButtonWidth]: '60px',
10586
10586
  };
10587
10587
 
10588
10588
  var mappingsField$1 = /*#__PURE__*/Object.freeze({
10589
10589
  __proto__: null,
10590
10590
  default: mappingsField,
10591
10591
  mappingsField: mappingsField,
10592
- vars: vars$4
10592
+ vars: vars$5
10593
10593
  });
10594
10594
 
10595
- function deleteIcon() {
10596
- return (new DOMParser().parseFromString("<svg width=\"14\" height=\"18\" viewBox=\"0 0 14 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z\" fill=\"currentcolor\"/>\n</svg>\n", 'image/svg+xml')).firstChild;
10597
- }
10595
+ var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
10598
10596
 
10599
- function editIcon() {
10600
- return (new DOMParser().parseFromString("<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10.0002 0.992149C10.0002 1.01615 10.0002 1.01615 10.0002 1.01615L8.22419 3.00815H2.99219C2.46419 3.00815 2.00819 3.44015 2.00819 3.99215V12.0082C2.00819 12.5362 2.44019 12.9922 2.99219 12.9922H5.53619C5.84819 13.0402 6.16019 13.0402 6.47219 12.9922H11.0082C11.5362 12.9922 11.9922 12.5602 11.9922 12.0082V7.78416L13.9362 5.62415L14.0082 5.67215V11.9842C14.0082 13.6642 12.6642 15.0082 11.0082 15.0082H3.01619C1.33619 15.0082 -0.0078125 13.6642 -0.0078125 11.9842V3.99215C-0.0078125 2.33615 1.33619 0.992149 3.01619 0.992149H10.0002ZM11.2722 2.62415L12.6162 4.11215L7.72019 9.68016C7.50419 9.92016 6.83219 10.2322 5.68019 10.6162C5.65619 10.6402 5.60819 10.6402 5.56019 10.6162C5.46419 10.5922 5.39219 10.4722 5.44019 10.3762C5.75219 9.24816 6.04019 8.55216 6.25619 8.31216L11.2722 2.62415ZM11.9202 1.85615L13.2882 0.320149C13.6482 -0.0878516 14.2722 -0.111852 14.6802 0.272149C15.0882 0.632149 15.1122 1.28015 14.7522 1.68815L13.2642 3.36815L11.9202 1.85615Z\" fill=\"currentcolor\"/>\n</svg>\n", 'image/svg+xml')).firstChild;
10601
- }
10597
+ var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
10602
10598
 
10603
- const componentName$4 = getComponentName('user-attribute');
10599
+ const componentName$5 = getComponentName('user-attribute');
10604
10600
  class RawUserAttribute extends createBaseClass({
10605
- componentName: componentName$4,
10601
+ componentName: componentName$5,
10606
10602
  baseSelector: ':host > .root',
10607
10603
  }) {
10608
10604
  constructor() {
@@ -10653,6 +10649,10 @@ class RawUserAttribute extends createBaseClass({
10653
10649
  margin-inline-end: 10px;
10654
10650
  }
10655
10651
 
10652
+ .hidden {
10653
+ visibility: hidden;
10654
+ }
10655
+
10656
10656
  descope-text[data-id="label-text"].required:after {
10657
10657
  content: '*';
10658
10658
  color: var(${TextClass.cssVarList.textColor});
@@ -10746,6 +10746,7 @@ class RawUserAttribute extends createBaseClass({
10746
10746
  this.onIsRequiredChange();
10747
10747
  this.onBadgeLabelChange();
10748
10748
  this.onBadgeTooltipTextChange();
10749
+ this.handleDeleteButtonVisibility();
10749
10750
 
10750
10751
  this.deleteButton.addEventListener('click', () =>
10751
10752
  this.dispatchEvent(new CustomEvent('delete-clicked', { bubbles: true, composed: true }))
@@ -10767,6 +10768,10 @@ class RawUserAttribute extends createBaseClass({
10767
10768
  ].concat(super.observedAttributes);
10768
10769
  }
10769
10770
 
10771
+ handleDeleteButtonVisibility() {
10772
+ this.deleteButton.classList.toggle('hidden', this.isRequired || !this.value);
10773
+ }
10774
+
10770
10775
  attributeChangedCallback(name, oldValue, newValue) {
10771
10776
  super.attributeChangedCallback?.(name, oldValue, newValue);
10772
10777
 
@@ -10785,10 +10790,14 @@ class RawUserAttribute extends createBaseClass({
10785
10790
  } else if (name === 'badge-tooltip-text') {
10786
10791
  this.onBadgeTooltipTextChange();
10787
10792
  }
10793
+
10794
+ if (name === 'value' || name === 'required') {
10795
+ this.handleDeleteButtonVisibility();
10796
+ }
10788
10797
  }
10789
10798
  }
10790
10799
 
10791
- const { host: host$1, textFields, buttons, badge, labelText, valueText, textWrapper } = {
10800
+ const { host: host$2, textFields, buttons: buttons$1, badge: badge$1, labelText, valueText, textWrapper: textWrapper$1 } = {
10792
10801
  host: { selector: () => ':host' },
10793
10802
  textFields: { selector: 'descope-text' },
10794
10803
  valueText: { selector: 'descope-text[data-id="value-text"]' },
@@ -10799,44 +10808,259 @@ const { host: host$1, textFields, buttons, badge, labelText, valueText, textWrap
10799
10808
  };
10800
10809
 
10801
10810
  const UserAttributeClass = compose(
10811
+ createStyleMixin({
10812
+ mappings: {
10813
+ hostWidth: { ...host$2, property: 'width' },
10814
+ hostMinWidth: { ...host$2, property: 'min-width' },
10815
+ hostDirection: [
10816
+ { ...host$2, property: 'direction' },
10817
+ { ...textFields, property: TextClass.cssVarList.hostDirection },
10818
+ { ...buttons$1, property: ButtonClass.cssVarList.hostDirection },
10819
+ { ...badge$1, property: BadgeClass.cssVarList.hostDirection },
10820
+ ],
10821
+ labelTextWidth: { ...labelText, property: 'width' },
10822
+ valueTextWidth: { ...valueText, property: 'width' },
10823
+ badgeMaxWidth: { ...badge$1, property: 'max-width' },
10824
+ itemsGap: [{ property: 'gap' }, { ...textWrapper$1, property: 'gap' }],
10825
+ },
10826
+ }),
10827
+ draggableMixin,
10828
+ componentNameValidationMixin
10829
+ )(RawUserAttribute);
10830
+
10831
+ const globalRefs$2 = getThemeRefs(globals);
10832
+ const vars$4 = UserAttributeClass.cssVarList;
10833
+
10834
+ const userAttribute = {
10835
+ [vars$4.hostDirection]: globalRefs$2.direction,
10836
+ [vars$4.labelTextWidth]: '150px',
10837
+ [vars$4.valueTextWidth]: '200px',
10838
+ [vars$4.badgeMaxWidth]: '85px',
10839
+ [vars$4.itemsGap]: '16px',
10840
+ [vars$4.hostMinWidth]: '530px',
10841
+ _fullWidth: {
10842
+ [vars$4.hostWidth]: '100%',
10843
+ },
10844
+ };
10845
+
10846
+ var userAttribute$1 = /*#__PURE__*/Object.freeze({
10847
+ __proto__: null,
10848
+ default: userAttribute,
10849
+ vars: vars$4
10850
+ });
10851
+
10852
+ var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
10853
+
10854
+ const componentName$4 = getComponentName('user-auth-method');
10855
+ class RawUserAuthMethod extends createBaseClass({
10856
+ componentName: componentName$4,
10857
+ baseSelector: ':host > .root',
10858
+ }) {
10859
+ constructor() {
10860
+ super();
10861
+
10862
+ this.attachShadow({ mode: 'open' }).innerHTML = `
10863
+ <style>
10864
+ :host {
10865
+ display: inline-flex;
10866
+ }
10867
+
10868
+ vaadin-icon {
10869
+ color: currentcolor;
10870
+ }
10871
+
10872
+ .root {
10873
+ display: flex;
10874
+ width: 100%;
10875
+ height: 100%;
10876
+ align-items: center;
10877
+ }
10878
+
10879
+ .btn-wrapper {
10880
+ display: flex;
10881
+ justify-content: space-between;
10882
+ align-items: center;
10883
+ flex-grow: 0;
10884
+ }
10885
+
10886
+ .text-wrapper {
10887
+ display: flex;
10888
+ align-items: center;
10889
+ flex-grow: 1;
10890
+ }
10891
+
10892
+ descope-text::part(text-wrapper) {
10893
+ text-overflow: ellipsis;
10894
+ overflow: hidden;
10895
+ white-space: nowrap;
10896
+ width: initial;
10897
+ }
10898
+
10899
+ descope-text {
10900
+ display: inline-flex;
10901
+ }
10902
+
10903
+ .fulfilled-indicator {
10904
+ width: 1em;
10905
+ height: 1em;
10906
+ display: flex;
10907
+ align-items: center;
10908
+ padding-inline-end: 1em;
10909
+ }
10910
+
10911
+ .hidden {
10912
+ display: none;
10913
+ }
10914
+
10915
+ .hidden-btn {
10916
+ width: 0;
10917
+ }
10918
+
10919
+ slot[name="method-icon"]{
10920
+ display: inline-flex;
10921
+ align-items: center;
10922
+ }
10923
+ </style>
10924
+
10925
+
10926
+ <div class="root">
10927
+ <div class="text-wrapper">
10928
+ <slot name="method-icon"></slot>
10929
+ <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="primary"></descope-text>
10930
+ </div>
10931
+
10932
+ <div class="btn-wrapper">
10933
+ <descope-button size="sm" variant="link" mode="primary">
10934
+ <slot name="button-icon"></slot>
10935
+ </descope-button>
10936
+ <div class="fulfilled-indicator">
10937
+ <vaadin-icon src=${greenVIcon}></vaadin-icon>
10938
+ </div>
10939
+ <descope-button class="hidden-btn"size="sm" variant="link" mode="primary"></descope-button>
10940
+ </div>
10941
+ </div>
10942
+ `;
10943
+
10944
+ this.button = this.shadowRoot.querySelector('descope-button');
10945
+ this.fulfilledIndicator = this.shadowRoot.querySelector('.fulfilled-indicator');
10946
+ this.labelText = this.shadowRoot.querySelector('descope-text[data-id="label-text"]');
10947
+ }
10948
+
10949
+ onLabelChange() {
10950
+ this.labelText.innerText = this.label;
10951
+ this.labelText.setAttribute('title', this.label);
10952
+ }
10953
+
10954
+ onButtonLabelChange() {
10955
+ let textSpanEle = this.button.querySelector('span');
10956
+
10957
+ if (this.buttonLabel) {
10958
+ if (!textSpanEle) {
10959
+ textSpanEle = document.createElement('span');
10960
+ this.button.appendChild(textSpanEle);
10961
+ }
10962
+ textSpanEle.innerText = this.buttonLabel;
10963
+ } else if (textSpanEle) {
10964
+ this.button.removeChild(textSpanEle);
10965
+ }
10966
+ }
10967
+
10968
+ onFulfilledChange() {
10969
+ this.button.classList.toggle('hidden', this.isFulfilled);
10970
+ this.fulfilledIndicator.classList.toggle('hidden', !this.isFulfilled);
10971
+ }
10972
+
10973
+ get label() {
10974
+ return this.getAttribute('label') || '';
10975
+ }
10976
+
10977
+ get buttonLabel() {
10978
+ return this.getAttribute('button-label') || '';
10979
+ }
10980
+
10981
+ get isFulfilled() {
10982
+ return this.getAttribute('fulfilled') === 'true';
10983
+ }
10984
+
10985
+ init() {
10986
+ this.onLabelChange();
10987
+ this.onButtonLabelChange();
10988
+ this.onFulfilledChange();
10989
+
10990
+ this.button.addEventListener('click', () =>
10991
+ this.dispatchEvent(new CustomEvent('button-clicked', { bubbles: true, composed: true }))
10992
+ );
10993
+ }
10994
+
10995
+ static get observedAttributes() {
10996
+ return ['label', 'fulfilled'].concat(super.observedAttributes);
10997
+ }
10998
+
10999
+ attributeChangedCallback(name, oldValue, newValue) {
11000
+ super.attributeChangedCallback?.(name, oldValue, newValue);
11001
+ if (oldValue === newValue) {
11002
+ return;
11003
+ }
11004
+
11005
+ if (name === 'label') {
11006
+ this.onLabelChange();
11007
+ } else if (name === 'fulfilled') {
11008
+ this.onFulfilledChange();
11009
+ } else if (name === 'button-label') {
11010
+ this.onButtonLabelChange();
11011
+ }
11012
+ }
11013
+ }
11014
+
11015
+ const { host: host$1, textField, buttons, badge, textWrapper, methodIconSlot } = {
11016
+ host: { selector: () => ':host' },
11017
+ textField: { selector: 'descope-text' },
11018
+ buttons: { selector: 'descope-button' },
11019
+ badge: { selector: 'descope-badge' },
11020
+ textWrapper: { selector: ' .text-wrapper' },
11021
+ methodIconSlot: { selector: 'slot[name="method-icon"]' },
11022
+ };
11023
+
11024
+ const UserAuthMethodClass = compose(
10802
11025
  createStyleMixin({
10803
11026
  mappings: {
10804
11027
  hostWidth: { ...host$1, property: 'width' },
10805
11028
  hostMinWidth: { ...host$1, property: 'min-width' },
10806
11029
  hostDirection: [
10807
11030
  { ...host$1, property: 'direction' },
10808
- { ...textFields, property: TextClass.cssVarList.hostDirection },
11031
+ { ...textField, property: TextClass.cssVarList.hostDirection },
10809
11032
  { ...buttons, property: ButtonClass.cssVarList.hostDirection },
10810
11033
  { ...badge, property: BadgeClass.cssVarList.hostDirection },
10811
11034
  ],
10812
- labelTextWidth: { ...labelText, property: 'width' },
10813
- valueTextWidth: { ...valueText, property: 'width' },
10814
- badgeMaxWidth: { ...badge, property: 'max-width' },
11035
+ labelTextWidth: { ...textField, property: 'width' },
10815
11036
  itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
11037
+ iconSize: [
11038
+ { ...methodIconSlot, property: 'width' },
11039
+ { ...methodIconSlot, property: 'height' },
11040
+ ],
10816
11041
  },
10817
11042
  }),
10818
11043
  draggableMixin,
10819
11044
  componentNameValidationMixin
10820
- )(RawUserAttribute);
11045
+ )(RawUserAuthMethod);
10821
11046
 
10822
11047
  const globalRefs$1 = getThemeRefs(globals);
10823
- const vars$3 = UserAttributeClass.cssVarList;
11048
+ const vars$3 = UserAuthMethodClass.cssVarList;
10824
11049
 
10825
- const userAttribute = {
11050
+ const userAuthMethod = {
10826
11051
  [vars$3.hostDirection]: globalRefs$1.direction,
10827
- [vars$3.labelTextWidth]: '150px',
10828
- [vars$3.valueTextWidth]: '200px',
10829
- [vars$3.badgeMaxWidth]: '85px',
11052
+ [vars$3.labelTextWidth]: '200px',
10830
11053
  [vars$3.itemsGap]: '16px',
10831
11054
  [vars$3.hostMinWidth]: '530px',
11055
+ [vars$3.iconSize]: '24px',
10832
11056
  _fullWidth: {
10833
11057
  [vars$3.hostWidth]: '100%',
10834
11058
  },
10835
11059
  };
10836
11060
 
10837
- var userAttribute$1 = /*#__PURE__*/Object.freeze({
11061
+ var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
10838
11062
  __proto__: null,
10839
- default: userAttribute,
11063
+ default: userAuthMethod,
10840
11064
  vars: vars$3
10841
11065
  });
10842
11066
 
@@ -10987,7 +11211,7 @@ var policyValidation$1 = /*#__PURE__*/Object.freeze({
10987
11211
 
10988
11212
  const components = {
10989
11213
  button: button$1,
10990
- textField: textField$1,
11214
+ textField: textField$2,
10991
11215
  password: password$1,
10992
11216
  numberField: numberField$1,
10993
11217
  emailField: emailField$1,
@@ -11018,10 +11242,11 @@ const components = {
11018
11242
  grid: grid$1,
11019
11243
  notificationCard,
11020
11244
  multiSelectComboBox: multiSelectComboBox$1,
11021
- badge: badge$2,
11245
+ badge: badge$3,
11022
11246
  avatar: avatar$1,
11023
11247
  mappingsField: mappingsField$1,
11024
11248
  userAttribute: userAttribute$1,
11249
+ userAuthMethod: userAuthMethod$1,
11025
11250
  samlGroupMappings: samlGroupMappings$1,
11026
11251
  policyValidation: policyValidation$1,
11027
11252
  };
@@ -11036,7 +11261,7 @@ const vars = Object.keys(components).reduce(
11036
11261
  );
11037
11262
 
11038
11263
  const defaultTheme = { globals, components: theme };
11039
- const themeVars = { globals: vars$D, components: vars };
11264
+ const themeVars = { globals: vars$E, components: vars };
11040
11265
 
11041
11266
  const colors = {
11042
11267
  surface: {
@@ -11375,6 +11600,7 @@ exports.TextFieldClass = TextFieldClass;
11375
11600
  exports.TotpImageClass = TotpImageClass;
11376
11601
  exports.UploadFileClass = UploadFileClass;
11377
11602
  exports.UserAttributeClass = UserAttributeClass;
11603
+ exports.UserAuthMethodClass = UserAuthMethodClass;
11378
11604
  exports.componentsThemeManager = componentsThemeManager;
11379
11605
  exports.createComponentsTheme = createComponentsTheme;
11380
11606
  exports.createHelperVars = createHelperVars;