@descope/web-components-ui 1.0.365 → 1.0.366

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -641,7 +641,7 @@ const globals = {
641
641
  fonts,
642
642
  direction,
643
643
  };
644
- const vars$J = getThemeVars(globals);
644
+ const vars$M = getThemeVars(globals);
645
645
 
646
646
  const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
647
647
 
@@ -1148,7 +1148,7 @@ const createProxy = ({
1148
1148
  .map(
1149
1149
  (
1150
1150
  slot // when slot is an empty string, we will create the default slot (without a name)
1151
- ) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''} ></slot>`
1151
+ ) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''}></slot>`
1152
1152
  )
1153
1153
  .join('')}
1154
1154
  </${wrappedEleName}>
@@ -2656,9 +2656,9 @@ const createIcon = async (src) => {
2656
2656
 
2657
2657
  /* eslint-disable no-use-before-define */
2658
2658
 
2659
- const componentName$S = getComponentName('icon');
2659
+ const componentName$V = getComponentName('icon');
2660
2660
 
2661
- class RawIcon extends createBaseClass({ componentName: componentName$S, baseSelector: 'slot' }) {
2661
+ class RawIcon extends createBaseClass({ componentName: componentName$V, baseSelector: 'slot' }) {
2662
2662
  static get observedAttributes() {
2663
2663
  return ['src', 'fill-color'];
2664
2664
  }
@@ -2756,7 +2756,7 @@ const clickableMixin = (superclass) =>
2756
2756
  }
2757
2757
  };
2758
2758
 
2759
- const componentName$R = getComponentName('button');
2759
+ const componentName$U = getComponentName('button');
2760
2760
 
2761
2761
  const resetStyles = `
2762
2762
  :host {
@@ -2872,7 +2872,7 @@ const ButtonClass = compose(
2872
2872
  }
2873
2873
  `,
2874
2874
  excludeAttrsSync: ['tabindex'],
2875
- componentName: componentName$R,
2875
+ componentName: componentName$U,
2876
2876
  })
2877
2877
  );
2878
2878
 
@@ -2909,139 +2909,139 @@ loadingIndicatorStyles = `
2909
2909
  }
2910
2910
  `;
2911
2911
 
2912
- const globalRefs$s = getThemeRefs(globals);
2913
- const compVars$5 = ButtonClass.cssVarList;
2912
+ const globalRefs$v = getThemeRefs(globals);
2913
+ const compVars$6 = ButtonClass.cssVarList;
2914
2914
 
2915
2915
  const mode = {
2916
- primary: globalRefs$s.colors.primary,
2917
- secondary: globalRefs$s.colors.secondary,
2918
- success: globalRefs$s.colors.success,
2919
- error: globalRefs$s.colors.error,
2920
- surface: globalRefs$s.colors.surface,
2916
+ primary: globalRefs$v.colors.primary,
2917
+ secondary: globalRefs$v.colors.secondary,
2918
+ success: globalRefs$v.colors.success,
2919
+ error: globalRefs$v.colors.error,
2920
+ surface: globalRefs$v.colors.surface,
2921
2921
  };
2922
2922
 
2923
- const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$R);
2923
+ const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars({ mode }, componentName$U);
2924
2924
 
2925
2925
  const button = {
2926
- ...helperTheme$3,
2926
+ ...helperTheme$4,
2927
2927
 
2928
- [compVars$5.fontFamily]: globalRefs$s.fonts.font1.family,
2928
+ [compVars$6.fontFamily]: globalRefs$v.fonts.font1.family,
2929
2929
 
2930
- [compVars$5.cursor]: 'pointer',
2931
- [compVars$5.hostHeight]: '3em',
2932
- [compVars$5.hostWidth]: 'auto',
2933
- [compVars$5.hostDirection]: globalRefs$s.direction,
2930
+ [compVars$6.cursor]: 'pointer',
2931
+ [compVars$6.hostHeight]: '3em',
2932
+ [compVars$6.hostWidth]: 'auto',
2933
+ [compVars$6.hostDirection]: globalRefs$v.direction,
2934
2934
 
2935
- [compVars$5.borderRadius]: globalRefs$s.radius.sm,
2936
- [compVars$5.borderWidth]: globalRefs$s.border.xs,
2937
- [compVars$5.borderStyle]: 'solid',
2938
- [compVars$5.borderColor]: 'transparent',
2935
+ [compVars$6.borderRadius]: globalRefs$v.radius.sm,
2936
+ [compVars$6.borderWidth]: globalRefs$v.border.xs,
2937
+ [compVars$6.borderStyle]: 'solid',
2938
+ [compVars$6.borderColor]: 'transparent',
2939
2939
 
2940
- [compVars$5.labelSpacing]: '0.25em',
2940
+ [compVars$6.labelSpacing]: '0.25em',
2941
2941
 
2942
- [compVars$5.textAlign]: 'center', // default text align center
2942
+ [compVars$6.textAlign]: 'center', // default text align center
2943
2943
  textAlign: {
2944
- right: { [compVars$5.textAlign]: 'right' },
2945
- left: { [compVars$5.textAlign]: 'left' },
2946
- center: { [compVars$5.textAlign]: 'center' },
2944
+ right: { [compVars$6.textAlign]: 'right' },
2945
+ left: { [compVars$6.textAlign]: 'left' },
2946
+ center: { [compVars$6.textAlign]: 'center' },
2947
2947
  },
2948
2948
 
2949
- [compVars$5.verticalPadding]: '1em',
2950
- [compVars$5.horizontalPadding]: '0.875em',
2949
+ [compVars$6.verticalPadding]: '1em',
2950
+ [compVars$6.horizontalPadding]: '0.875em',
2951
2951
 
2952
- [compVars$5.outlineWidth]: globals.border.sm,
2953
- [compVars$5.outlineOffset]: '0px', // keep `px` unit for external calc
2954
- [compVars$5.outlineStyle]: 'solid',
2955
- [compVars$5.outlineColor]: 'transparent',
2952
+ [compVars$6.outlineWidth]: globals.border.sm,
2953
+ [compVars$6.outlineOffset]: '0px', // keep `px` unit for external calc
2954
+ [compVars$6.outlineStyle]: 'solid',
2955
+ [compVars$6.outlineColor]: 'transparent',
2956
2956
 
2957
- [compVars$5.iconSize]: '1.5em',
2958
- [compVars$5.iconColor]: 'currentColor',
2957
+ [compVars$6.iconSize]: '1.5em',
2958
+ [compVars$6.iconColor]: 'currentColor',
2959
2959
 
2960
2960
  size: {
2961
- xs: { [compVars$5.fontSize]: '12px' },
2962
- sm: { [compVars$5.fontSize]: '14px' },
2963
- md: { [compVars$5.fontSize]: '16px' },
2964
- lg: { [compVars$5.fontSize]: '18px' },
2961
+ xs: { [compVars$6.fontSize]: '12px' },
2962
+ sm: { [compVars$6.fontSize]: '14px' },
2963
+ md: { [compVars$6.fontSize]: '16px' },
2964
+ lg: { [compVars$6.fontSize]: '18px' },
2965
2965
  },
2966
2966
 
2967
2967
  _square: {
2968
- [compVars$5.hostHeight]: '3em',
2969
- [compVars$5.hostWidth]: '3em',
2970
- [compVars$5.verticalPadding]: '0',
2968
+ [compVars$6.hostHeight]: '3em',
2969
+ [compVars$6.hostWidth]: '3em',
2970
+ [compVars$6.verticalPadding]: '0',
2971
2971
  },
2972
2972
 
2973
2973
  _fullWidth: {
2974
- [compVars$5.hostWidth]: '100%',
2974
+ [compVars$6.hostWidth]: '100%',
2975
2975
  },
2976
2976
 
2977
2977
  _loading: {
2978
- [compVars$5.cursor]: 'wait',
2979
- [compVars$5.labelTextColor]: helperRefs$3.main,
2978
+ [compVars$6.cursor]: 'wait',
2979
+ [compVars$6.labelTextColor]: helperRefs$4.main,
2980
2980
  },
2981
2981
 
2982
2982
  _disabled: {
2983
- [helperVars$3.main]: globalRefs$s.colors.surface.light,
2984
- [helperVars$3.dark]: globalRefs$s.colors.surface.dark,
2985
- [helperVars$3.light]: globalRefs$s.colors.surface.light,
2986
- [helperVars$3.contrast]: globalRefs$s.colors.surface.main,
2987
- [compVars$5.iconColor]: globalRefs$s.colors.surface.main,
2983
+ [helperVars$4.main]: globalRefs$v.colors.surface.light,
2984
+ [helperVars$4.dark]: globalRefs$v.colors.surface.dark,
2985
+ [helperVars$4.light]: globalRefs$v.colors.surface.light,
2986
+ [helperVars$4.contrast]: globalRefs$v.colors.surface.main,
2987
+ [compVars$6.iconColor]: globalRefs$v.colors.surface.main,
2988
2988
  },
2989
2989
 
2990
2990
  variant: {
2991
2991
  contained: {
2992
- [compVars$5.labelTextColor]: helperRefs$3.contrast,
2993
- [compVars$5.backgroundColor]: helperRefs$3.main,
2992
+ [compVars$6.labelTextColor]: helperRefs$4.contrast,
2993
+ [compVars$6.backgroundColor]: helperRefs$4.main,
2994
2994
  _hover: {
2995
- [compVars$5.backgroundColor]: helperRefs$3.dark,
2995
+ [compVars$6.backgroundColor]: helperRefs$4.dark,
2996
2996
  _loading: {
2997
- [compVars$5.backgroundColor]: helperRefs$3.main,
2997
+ [compVars$6.backgroundColor]: helperRefs$4.main,
2998
2998
  },
2999
2999
  },
3000
3000
  _active: {
3001
- [compVars$5.backgroundColor]: helperRefs$3.main,
3001
+ [compVars$6.backgroundColor]: helperRefs$4.main,
3002
3002
  },
3003
3003
  },
3004
3004
 
3005
3005
  outline: {
3006
- [compVars$5.labelTextColor]: helperRefs$3.main,
3007
- [compVars$5.borderColor]: helperRefs$3.main,
3006
+ [compVars$6.labelTextColor]: helperRefs$4.main,
3007
+ [compVars$6.borderColor]: helperRefs$4.main,
3008
3008
  _hover: {
3009
- [compVars$5.labelTextColor]: helperRefs$3.dark,
3010
- [compVars$5.borderColor]: helperRefs$3.dark,
3009
+ [compVars$6.labelTextColor]: helperRefs$4.dark,
3010
+ [compVars$6.borderColor]: helperRefs$4.dark,
3011
3011
  },
3012
3012
  _active: {
3013
- [compVars$5.labelTextColor]: helperRefs$3.main,
3014
- [compVars$5.borderColor]: helperRefs$3.main,
3013
+ [compVars$6.labelTextColor]: helperRefs$4.main,
3014
+ [compVars$6.borderColor]: helperRefs$4.main,
3015
3015
  },
3016
3016
  },
3017
3017
 
3018
3018
  link: {
3019
- [compVars$5.labelTextColor]: helperRefs$3.main,
3020
- [compVars$5.horizontalPadding]: '0.125em',
3019
+ [compVars$6.labelTextColor]: helperRefs$4.main,
3020
+ [compVars$6.horizontalPadding]: '0.125em',
3021
3021
  _hover: {
3022
- [compVars$5.labelTextColor]: helperRefs$3.dark,
3023
- [compVars$5.labelTextDecoration]: 'underline',
3022
+ [compVars$6.labelTextColor]: helperRefs$4.dark,
3023
+ [compVars$6.labelTextDecoration]: 'underline',
3024
3024
  },
3025
3025
  _active: {
3026
- [compVars$5.labelTextColor]: helperRefs$3.main,
3026
+ [compVars$6.labelTextColor]: helperRefs$4.main,
3027
3027
  },
3028
3028
  },
3029
3029
  },
3030
3030
 
3031
3031
  _focused: {
3032
- [compVars$5.outlineColor]: helperRefs$3.light,
3032
+ [compVars$6.outlineColor]: helperRefs$4.light,
3033
3033
  },
3034
3034
  };
3035
3035
 
3036
- const vars$I = {
3037
- ...compVars$5,
3038
- ...helperVars$3,
3036
+ const vars$L = {
3037
+ ...compVars$6,
3038
+ ...helperVars$4,
3039
3039
  };
3040
3040
 
3041
3041
  var button$1 = /*#__PURE__*/Object.freeze({
3042
3042
  __proto__: null,
3043
3043
  default: button,
3044
- vars: vars$I
3044
+ vars: vars$L
3045
3045
  });
3046
3046
 
3047
3047
  const {
@@ -3301,11 +3301,11 @@ const inputFloatingLabelStyle = () => {
3301
3301
  `;
3302
3302
  };
3303
3303
 
3304
- const componentName$Q = getComponentName('text-field');
3304
+ const componentName$T = getComponentName('text-field');
3305
3305
 
3306
3306
  const observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];
3307
3307
 
3308
- const customMixin$a = (superclass) =>
3308
+ const customMixin$c = (superclass) =>
3309
3309
  class TextFieldClass extends superclass {
3310
3310
  static get observedAttributes() {
3311
3311
  return observedAttrs.concat(superclass.observedAttributes || []);
@@ -3389,7 +3389,7 @@ const TextFieldClass = compose(
3389
3389
  draggableMixin,
3390
3390
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
3391
3391
  componentNameValidationMixin,
3392
- customMixin$a
3392
+ customMixin$c
3393
3393
  )(
3394
3394
  createProxy({
3395
3395
  slots: ['prefix', 'suffix'],
@@ -3423,30 +3423,30 @@ const TextFieldClass = compose(
3423
3423
  }
3424
3424
  `,
3425
3425
  excludeAttrsSync: ['tabindex'],
3426
- componentName: componentName$Q,
3426
+ componentName: componentName$T,
3427
3427
  })
3428
3428
  );
3429
3429
 
3430
- const componentName$P = getComponentName('input-wrapper');
3431
- const globalRefs$r = getThemeRefs(globals);
3430
+ const componentName$S = getComponentName('input-wrapper');
3431
+ const globalRefs$u = getThemeRefs(globals);
3432
3432
 
3433
- const [theme$1, refs, vars$H] = createHelperVars(
3433
+ const [theme$1, refs, vars$K] = createHelperVars(
3434
3434
  {
3435
- labelTextColor: globalRefs$r.colors.surface.dark,
3435
+ labelTextColor: globalRefs$u.colors.surface.dark,
3436
3436
  labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
3437
3437
  labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
3438
- valueTextColor: globalRefs$r.colors.surface.contrast,
3439
- placeholderTextColor: globalRefs$r.colors.surface.dark,
3438
+ valueTextColor: globalRefs$u.colors.surface.contrast,
3439
+ placeholderTextColor: globalRefs$u.colors.surface.dark,
3440
3440
  requiredIndicator: "'*'",
3441
- helperTextColor: globalRefs$r.colors.surface.dark,
3442
- errorMessageTextColor: globalRefs$r.colors.error.main,
3443
- successMessageTextColor: globalRefs$r.colors.success.main,
3441
+ helperTextColor: globalRefs$u.colors.surface.dark,
3442
+ errorMessageTextColor: globalRefs$u.colors.error.main,
3443
+ successMessageTextColor: globalRefs$u.colors.success.main,
3444
3444
 
3445
- borderWidth: globalRefs$r.border.xs,
3446
- borderRadius: globalRefs$r.radius.xs,
3445
+ borderWidth: globalRefs$u.border.xs,
3446
+ borderRadius: globalRefs$u.radius.xs,
3447
3447
  borderColor: 'transparent',
3448
3448
 
3449
- outlineWidth: globalRefs$r.border.sm,
3449
+ outlineWidth: globalRefs$u.border.sm,
3450
3450
  outlineStyle: 'solid',
3451
3451
  outlineColor: 'transparent',
3452
3452
  outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -3458,11 +3458,11 @@ const [theme$1, refs, vars$H] = createHelperVars(
3458
3458
  horizontalPadding: '0.5em',
3459
3459
  verticalPadding: '0.5em',
3460
3460
 
3461
- backgroundColor: globalRefs$r.colors.surface.main,
3461
+ backgroundColor: globalRefs$u.colors.surface.main,
3462
3462
 
3463
- fontFamily: globalRefs$r.fonts.font1.family,
3463
+ fontFamily: globalRefs$u.fonts.font1.family,
3464
3464
 
3465
- direction: globalRefs$r.direction,
3465
+ direction: globalRefs$u.direction,
3466
3466
 
3467
3467
  overlayOpacity: '0.3',
3468
3468
 
@@ -3512,93 +3512,93 @@ const [theme$1, refs, vars$H] = createHelperVars(
3512
3512
  },
3513
3513
 
3514
3514
  _focused: {
3515
- outlineColor: globalRefs$r.colors.surface.light,
3515
+ outlineColor: globalRefs$u.colors.surface.light,
3516
3516
  _invalid: {
3517
- outlineColor: globalRefs$r.colors.error.main,
3517
+ outlineColor: globalRefs$u.colors.error.main,
3518
3518
  },
3519
3519
  },
3520
3520
 
3521
3521
  _bordered: {
3522
- outlineWidth: globalRefs$r.border.xs,
3523
- borderColor: globalRefs$r.colors.surface.light,
3522
+ outlineWidth: globalRefs$u.border.xs,
3523
+ borderColor: globalRefs$u.colors.surface.light,
3524
3524
  borderStyle: 'solid',
3525
3525
  _invalid: {
3526
- borderColor: globalRefs$r.colors.error.main,
3526
+ borderColor: globalRefs$u.colors.error.main,
3527
3527
  },
3528
3528
  },
3529
3529
 
3530
3530
  _disabled: {
3531
- labelTextColor: globalRefs$r.colors.surface.light,
3532
- borderColor: globalRefs$r.colors.surface.light,
3533
- valueTextColor: globalRefs$r.colors.surface.light,
3534
- placeholderTextColor: globalRefs$r.colors.surface.light,
3535
- helperTextColor: globalRefs$r.colors.surface.light,
3536
- backgroundColor: globalRefs$r.colors.surface.main,
3531
+ labelTextColor: globalRefs$u.colors.surface.light,
3532
+ borderColor: globalRefs$u.colors.surface.light,
3533
+ valueTextColor: globalRefs$u.colors.surface.light,
3534
+ placeholderTextColor: globalRefs$u.colors.surface.light,
3535
+ helperTextColor: globalRefs$u.colors.surface.light,
3536
+ backgroundColor: globalRefs$u.colors.surface.main,
3537
3537
  },
3538
3538
  },
3539
- componentName$P
3539
+ componentName$S
3540
3540
  );
3541
3541
 
3542
3542
  var inputWrapper = /*#__PURE__*/Object.freeze({
3543
3543
  __proto__: null,
3544
3544
  default: theme$1,
3545
3545
  refs: refs,
3546
- vars: vars$H
3546
+ vars: vars$K
3547
3547
  });
3548
3548
 
3549
- const globalRefs$q = getThemeRefs(globals);
3550
- const vars$G = TextFieldClass.cssVarList;
3549
+ const globalRefs$t = getThemeRefs(globals);
3550
+ const vars$J = TextFieldClass.cssVarList;
3551
3551
 
3552
3552
  const textField$1 = {
3553
- [vars$G.hostWidth]: refs.width,
3554
- [vars$G.hostMinWidth]: refs.minWidth,
3555
- [vars$G.hostDirection]: refs.direction,
3556
- [vars$G.fontSize]: refs.fontSize,
3557
- [vars$G.fontFamily]: refs.fontFamily,
3558
- [vars$G.labelFontSize]: refs.labelFontSize,
3559
- [vars$G.labelFontWeight]: refs.labelFontWeight,
3560
- [vars$G.labelTextColor]: refs.labelTextColor,
3561
- [vars$G.labelRequiredIndicator]: refs.requiredIndicator,
3562
- [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
3563
- [vars$G.inputValueTextColor]: refs.valueTextColor,
3564
- [vars$G.inputPlaceholderColor]: refs.placeholderTextColor,
3565
- [vars$G.inputBorderWidth]: refs.borderWidth,
3566
- [vars$G.inputBorderStyle]: refs.borderStyle,
3567
- [vars$G.inputBorderColor]: refs.borderColor,
3568
- [vars$G.inputBorderRadius]: refs.borderRadius,
3569
- [vars$G.inputOutlineWidth]: refs.outlineWidth,
3570
- [vars$G.inputOutlineStyle]: refs.outlineStyle,
3571
- [vars$G.inputOutlineColor]: refs.outlineColor,
3572
- [vars$G.inputOutlineOffset]: refs.outlineOffset,
3573
- [vars$G.inputBackgroundColor]: refs.backgroundColor,
3574
- [vars$G.inputHeight]: refs.inputHeight,
3575
- [vars$G.inputHorizontalPadding]: refs.horizontalPadding,
3576
- [vars$G.helperTextColor]: refs.helperTextColor,
3553
+ [vars$J.hostWidth]: refs.width,
3554
+ [vars$J.hostMinWidth]: refs.minWidth,
3555
+ [vars$J.hostDirection]: refs.direction,
3556
+ [vars$J.fontSize]: refs.fontSize,
3557
+ [vars$J.fontFamily]: refs.fontFamily,
3558
+ [vars$J.labelFontSize]: refs.labelFontSize,
3559
+ [vars$J.labelFontWeight]: refs.labelFontWeight,
3560
+ [vars$J.labelTextColor]: refs.labelTextColor,
3561
+ [vars$J.labelRequiredIndicator]: refs.requiredIndicator,
3562
+ [vars$J.errorMessageTextColor]: refs.errorMessageTextColor,
3563
+ [vars$J.inputValueTextColor]: refs.valueTextColor,
3564
+ [vars$J.inputPlaceholderColor]: refs.placeholderTextColor,
3565
+ [vars$J.inputBorderWidth]: refs.borderWidth,
3566
+ [vars$J.inputBorderStyle]: refs.borderStyle,
3567
+ [vars$J.inputBorderColor]: refs.borderColor,
3568
+ [vars$J.inputBorderRadius]: refs.borderRadius,
3569
+ [vars$J.inputOutlineWidth]: refs.outlineWidth,
3570
+ [vars$J.inputOutlineStyle]: refs.outlineStyle,
3571
+ [vars$J.inputOutlineColor]: refs.outlineColor,
3572
+ [vars$J.inputOutlineOffset]: refs.outlineOffset,
3573
+ [vars$J.inputBackgroundColor]: refs.backgroundColor,
3574
+ [vars$J.inputHeight]: refs.inputHeight,
3575
+ [vars$J.inputHorizontalPadding]: refs.horizontalPadding,
3576
+ [vars$J.helperTextColor]: refs.helperTextColor,
3577
3577
  textAlign: {
3578
- right: { [vars$G.inputTextAlign]: 'right' },
3579
- left: { [vars$G.inputTextAlign]: 'left' },
3580
- center: { [vars$G.inputTextAlign]: 'center' },
3578
+ right: { [vars$J.inputTextAlign]: 'right' },
3579
+ left: { [vars$J.inputTextAlign]: 'left' },
3580
+ center: { [vars$J.inputTextAlign]: 'center' },
3581
3581
  },
3582
- [vars$G.labelPosition]: refs.labelPosition,
3583
- [vars$G.labelTopPosition]: refs.labelTopPosition,
3584
- [vars$G.labelHorizontalPosition]: refs.labelHorizontalPosition,
3585
- [vars$G.inputTransformY]: refs.inputTransformY,
3586
- [vars$G.inputTransition]: refs.inputTransition,
3587
- [vars$G.marginInlineStart]: refs.marginInlineStart,
3588
- [vars$G.placeholderOpacity]: refs.placeholderOpacity,
3589
- [vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
3590
- [vars$G.valueInputHeight]: refs.valueInputHeight,
3591
- [vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
3592
- [vars$G.inputIconOffset]: globalRefs$q.spacing.md,
3593
- [vars$G.inputIconSize]: refs.inputIconSize,
3594
- [vars$G.inputIconColor]: refs.placeholderTextColor,
3582
+ [vars$J.labelPosition]: refs.labelPosition,
3583
+ [vars$J.labelTopPosition]: refs.labelTopPosition,
3584
+ [vars$J.labelHorizontalPosition]: refs.labelHorizontalPosition,
3585
+ [vars$J.inputTransformY]: refs.inputTransformY,
3586
+ [vars$J.inputTransition]: refs.inputTransition,
3587
+ [vars$J.marginInlineStart]: refs.marginInlineStart,
3588
+ [vars$J.placeholderOpacity]: refs.placeholderOpacity,
3589
+ [vars$J.inputVerticalAlignment]: refs.inputVerticalAlignment,
3590
+ [vars$J.valueInputHeight]: refs.valueInputHeight,
3591
+ [vars$J.valueInputMarginBottom]: refs.valueInputMarginBottom,
3592
+ [vars$J.inputIconOffset]: globalRefs$t.spacing.md,
3593
+ [vars$J.inputIconSize]: refs.inputIconSize,
3594
+ [vars$J.inputIconColor]: refs.placeholderTextColor,
3595
3595
  };
3596
3596
 
3597
3597
  var textField$2 = /*#__PURE__*/Object.freeze({
3598
3598
  __proto__: null,
3599
3599
  default: textField$1,
3600
3600
  textField: textField$1,
3601
- vars: vars$G
3601
+ vars: vars$J
3602
3602
  });
3603
3603
 
3604
3604
  const passwordDraggableMixin = (superclass) =>
@@ -3640,9 +3640,9 @@ const passwordDraggableMixin = (superclass) =>
3640
3640
  }
3641
3641
  };
3642
3642
 
3643
- const componentName$O = getComponentName('password');
3643
+ const componentName$R = getComponentName('password');
3644
3644
 
3645
- const customMixin$9 = (superclass) =>
3645
+ const customMixin$b = (superclass) =>
3646
3646
  class PasswordFieldMixinClass extends superclass {
3647
3647
  static get observedAttributes() {
3648
3648
  return ['manual-visibility-toggle'];
@@ -3795,7 +3795,7 @@ const PasswordClass = compose(
3795
3795
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
3796
3796
  componentNameValidationMixin,
3797
3797
  passwordDraggableMixin,
3798
- customMixin$9
3798
+ customMixin$b
3799
3799
  )(
3800
3800
  createProxy({
3801
3801
  slots: ['', 'suffix'],
@@ -3858,58 +3858,58 @@ const PasswordClass = compose(
3858
3858
  }
3859
3859
  `,
3860
3860
  excludeAttrsSync: ['tabindex'],
3861
- componentName: componentName$O,
3861
+ componentName: componentName$R,
3862
3862
  })
3863
3863
  );
3864
3864
 
3865
- const globalRefs$p = getThemeRefs(globals);
3866
- const vars$F = PasswordClass.cssVarList;
3865
+ const globalRefs$s = getThemeRefs(globals);
3866
+ const vars$I = PasswordClass.cssVarList;
3867
3867
 
3868
3868
  const password = {
3869
- [vars$F.hostWidth]: refs.width,
3870
- [vars$F.hostMinWidth]: refs.minWidth,
3871
- [vars$F.hostDirection]: refs.direction,
3872
- [vars$F.fontSize]: refs.fontSize,
3873
- [vars$F.fontFamily]: refs.fontFamily,
3874
- [vars$F.labelFontSize]: refs.labelFontSize,
3875
- [vars$F.labelFontWeight]: refs.labelFontWeight,
3876
- [vars$F.labelTextColor]: refs.labelTextColor,
3877
- [vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
3878
- [vars$F.inputHorizontalPadding]: refs.horizontalPadding,
3879
- [vars$F.inputHeight]: refs.inputHeight,
3880
- [vars$F.inputBackgroundColor]: refs.backgroundColor,
3881
- [vars$F.labelRequiredIndicator]: refs.requiredIndicator,
3882
- [vars$F.inputValueTextColor]: refs.valueTextColor,
3883
- [vars$F.inputPlaceholderTextColor]: refs.placeholderTextColor,
3884
- [vars$F.inputBorderWidth]: refs.borderWidth,
3885
- [vars$F.inputBorderStyle]: refs.borderStyle,
3886
- [vars$F.inputBorderColor]: refs.borderColor,
3887
- [vars$F.inputBorderRadius]: refs.borderRadius,
3888
- [vars$F.inputOutlineWidth]: refs.outlineWidth,
3889
- [vars$F.inputOutlineStyle]: refs.outlineStyle,
3890
- [vars$F.inputOutlineColor]: refs.outlineColor,
3891
- [vars$F.inputOutlineOffset]: refs.outlineOffset,
3892
- [vars$F.revealButtonOffset]: globalRefs$p.spacing.md,
3893
- [vars$F.revealButtonSize]: refs.toggleButtonSize,
3894
- [vars$F.revealButtonColor]: refs.placeholderTextColor,
3895
- [vars$F.labelPosition]: refs.labelPosition,
3896
- [vars$F.labelTopPosition]: refs.labelTopPosition,
3897
- [vars$F.labelHorizontalPosition]: refs.labelHorizontalPosition,
3898
- [vars$F.inputTransformY]: refs.inputTransformY,
3899
- [vars$F.inputTransition]: refs.inputTransition,
3900
- [vars$F.marginInlineStart]: refs.marginInlineStart,
3901
- [vars$F.placeholderOpacity]: refs.placeholderOpacity,
3902
- [vars$F.inputVerticalAlignment]: refs.inputVerticalAlignment,
3903
- [vars$F.valueInputHeight]: refs.valueInputHeight,
3869
+ [vars$I.hostWidth]: refs.width,
3870
+ [vars$I.hostMinWidth]: refs.minWidth,
3871
+ [vars$I.hostDirection]: refs.direction,
3872
+ [vars$I.fontSize]: refs.fontSize,
3873
+ [vars$I.fontFamily]: refs.fontFamily,
3874
+ [vars$I.labelFontSize]: refs.labelFontSize,
3875
+ [vars$I.labelFontWeight]: refs.labelFontWeight,
3876
+ [vars$I.labelTextColor]: refs.labelTextColor,
3877
+ [vars$I.errorMessageTextColor]: refs.errorMessageTextColor,
3878
+ [vars$I.inputHorizontalPadding]: refs.horizontalPadding,
3879
+ [vars$I.inputHeight]: refs.inputHeight,
3880
+ [vars$I.inputBackgroundColor]: refs.backgroundColor,
3881
+ [vars$I.labelRequiredIndicator]: refs.requiredIndicator,
3882
+ [vars$I.inputValueTextColor]: refs.valueTextColor,
3883
+ [vars$I.inputPlaceholderTextColor]: refs.placeholderTextColor,
3884
+ [vars$I.inputBorderWidth]: refs.borderWidth,
3885
+ [vars$I.inputBorderStyle]: refs.borderStyle,
3886
+ [vars$I.inputBorderColor]: refs.borderColor,
3887
+ [vars$I.inputBorderRadius]: refs.borderRadius,
3888
+ [vars$I.inputOutlineWidth]: refs.outlineWidth,
3889
+ [vars$I.inputOutlineStyle]: refs.outlineStyle,
3890
+ [vars$I.inputOutlineColor]: refs.outlineColor,
3891
+ [vars$I.inputOutlineOffset]: refs.outlineOffset,
3892
+ [vars$I.revealButtonOffset]: globalRefs$s.spacing.md,
3893
+ [vars$I.revealButtonSize]: refs.toggleButtonSize,
3894
+ [vars$I.revealButtonColor]: refs.placeholderTextColor,
3895
+ [vars$I.labelPosition]: refs.labelPosition,
3896
+ [vars$I.labelTopPosition]: refs.labelTopPosition,
3897
+ [vars$I.labelHorizontalPosition]: refs.labelHorizontalPosition,
3898
+ [vars$I.inputTransformY]: refs.inputTransformY,
3899
+ [vars$I.inputTransition]: refs.inputTransition,
3900
+ [vars$I.marginInlineStart]: refs.marginInlineStart,
3901
+ [vars$I.placeholderOpacity]: refs.placeholderOpacity,
3902
+ [vars$I.inputVerticalAlignment]: refs.inputVerticalAlignment,
3903
+ [vars$I.valueInputHeight]: refs.valueInputHeight,
3904
3904
  };
3905
3905
 
3906
3906
  var password$1 = /*#__PURE__*/Object.freeze({
3907
3907
  __proto__: null,
3908
3908
  default: password,
3909
- vars: vars$F
3909
+ vars: vars$I
3910
3910
  });
3911
3911
 
3912
- const componentName$N = getComponentName('number-field');
3912
+ const componentName$Q = getComponentName('number-field');
3913
3913
 
3914
3914
  const NumberFieldClass = compose(
3915
3915
  createStyleMixin({
@@ -3943,60 +3943,60 @@ const NumberFieldClass = compose(
3943
3943
  }
3944
3944
  `,
3945
3945
  excludeAttrsSync: ['tabindex'],
3946
- componentName: componentName$N,
3946
+ componentName: componentName$Q,
3947
3947
  })
3948
3948
  );
3949
3949
 
3950
- const vars$E = NumberFieldClass.cssVarList;
3950
+ const vars$H = NumberFieldClass.cssVarList;
3951
3951
 
3952
3952
  const numberField = {
3953
- [vars$E.hostWidth]: refs.width,
3954
- [vars$E.hostMinWidth]: refs.minWidth,
3955
- [vars$E.hostDirection]: refs.direction,
3956
- [vars$E.fontSize]: refs.fontSize,
3957
- [vars$E.fontFamily]: refs.fontFamily,
3958
- [vars$E.labelFontSize]: refs.labelFontSize,
3959
- [vars$E.labelFontWeight]: refs.labelFontWeight,
3960
- [vars$E.labelTextColor]: refs.labelTextColor,
3961
- [vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
3962
- [vars$E.inputValueTextColor]: refs.valueTextColor,
3963
- [vars$E.inputPlaceholderColor]: refs.placeholderTextColor,
3964
- [vars$E.inputBorderWidth]: refs.borderWidth,
3965
- [vars$E.inputBorderStyle]: refs.borderStyle,
3966
- [vars$E.inputBorderColor]: refs.borderColor,
3967
- [vars$E.inputBorderRadius]: refs.borderRadius,
3968
- [vars$E.inputOutlineWidth]: refs.outlineWidth,
3969
- [vars$E.inputOutlineStyle]: refs.outlineStyle,
3970
- [vars$E.inputOutlineColor]: refs.outlineColor,
3971
- [vars$E.inputOutlineOffset]: refs.outlineOffset,
3972
- [vars$E.inputBackgroundColor]: refs.backgroundColor,
3973
- [vars$E.labelRequiredIndicator]: refs.requiredIndicator,
3974
- [vars$E.inputHorizontalPadding]: refs.horizontalPadding,
3975
- [vars$E.inputHeight]: refs.inputHeight,
3976
- [vars$E.labelPosition]: refs.labelPosition,
3977
- [vars$E.labelTopPosition]: refs.labelTopPosition,
3978
- [vars$E.labelHorizontalPosition]: refs.labelHorizontalPosition,
3979
- [vars$E.inputTransformY]: refs.inputTransformY,
3980
- [vars$E.inputTransition]: refs.inputTransition,
3981
- [vars$E.marginInlineStart]: refs.marginInlineStart,
3982
- [vars$E.placeholderOpacity]: refs.placeholderOpacity,
3983
- [vars$E.inputVerticalAlignment]: refs.inputVerticalAlignment,
3984
- [vars$E.valueInputHeight]: refs.valueInputHeight,
3985
- [vars$E.valueInputMarginBottom]: refs.valueInputMarginBottom,
3953
+ [vars$H.hostWidth]: refs.width,
3954
+ [vars$H.hostMinWidth]: refs.minWidth,
3955
+ [vars$H.hostDirection]: refs.direction,
3956
+ [vars$H.fontSize]: refs.fontSize,
3957
+ [vars$H.fontFamily]: refs.fontFamily,
3958
+ [vars$H.labelFontSize]: refs.labelFontSize,
3959
+ [vars$H.labelFontWeight]: refs.labelFontWeight,
3960
+ [vars$H.labelTextColor]: refs.labelTextColor,
3961
+ [vars$H.errorMessageTextColor]: refs.errorMessageTextColor,
3962
+ [vars$H.inputValueTextColor]: refs.valueTextColor,
3963
+ [vars$H.inputPlaceholderColor]: refs.placeholderTextColor,
3964
+ [vars$H.inputBorderWidth]: refs.borderWidth,
3965
+ [vars$H.inputBorderStyle]: refs.borderStyle,
3966
+ [vars$H.inputBorderColor]: refs.borderColor,
3967
+ [vars$H.inputBorderRadius]: refs.borderRadius,
3968
+ [vars$H.inputOutlineWidth]: refs.outlineWidth,
3969
+ [vars$H.inputOutlineStyle]: refs.outlineStyle,
3970
+ [vars$H.inputOutlineColor]: refs.outlineColor,
3971
+ [vars$H.inputOutlineOffset]: refs.outlineOffset,
3972
+ [vars$H.inputBackgroundColor]: refs.backgroundColor,
3973
+ [vars$H.labelRequiredIndicator]: refs.requiredIndicator,
3974
+ [vars$H.inputHorizontalPadding]: refs.horizontalPadding,
3975
+ [vars$H.inputHeight]: refs.inputHeight,
3976
+ [vars$H.labelPosition]: refs.labelPosition,
3977
+ [vars$H.labelTopPosition]: refs.labelTopPosition,
3978
+ [vars$H.labelHorizontalPosition]: refs.labelHorizontalPosition,
3979
+ [vars$H.inputTransformY]: refs.inputTransformY,
3980
+ [vars$H.inputTransition]: refs.inputTransition,
3981
+ [vars$H.marginInlineStart]: refs.marginInlineStart,
3982
+ [vars$H.placeholderOpacity]: refs.placeholderOpacity,
3983
+ [vars$H.inputVerticalAlignment]: refs.inputVerticalAlignment,
3984
+ [vars$H.valueInputHeight]: refs.valueInputHeight,
3985
+ [vars$H.valueInputMarginBottom]: refs.valueInputMarginBottom,
3986
3986
  };
3987
3987
 
3988
3988
  var numberField$1 = /*#__PURE__*/Object.freeze({
3989
3989
  __proto__: null,
3990
3990
  default: numberField,
3991
- vars: vars$E
3991
+ vars: vars$H
3992
3992
  });
3993
3993
 
3994
- const componentName$M = getComponentName('email-field');
3994
+ const componentName$P = getComponentName('email-field');
3995
3995
 
3996
3996
  const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
3997
3997
  const defaultAutocomplete = 'username';
3998
3998
 
3999
- const customMixin$8 = (superclass) =>
3999
+ const customMixin$a = (superclass) =>
4000
4000
  class EmailFieldMixinClass extends superclass {
4001
4001
  init() {
4002
4002
  super.init?.();
@@ -4017,7 +4017,7 @@ const EmailFieldClass = compose(
4017
4017
  draggableMixin,
4018
4018
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
4019
4019
  componentNameValidationMixin,
4020
- customMixin$8
4020
+ customMixin$a
4021
4021
  )(
4022
4022
  createProxy({
4023
4023
  slots: ['', 'suffix'],
@@ -4048,55 +4048,55 @@ const EmailFieldClass = compose(
4048
4048
  }
4049
4049
  `,
4050
4050
  excludeAttrsSync: ['tabindex'],
4051
- componentName: componentName$M,
4051
+ componentName: componentName$P,
4052
4052
  })
4053
4053
  );
4054
4054
 
4055
- const vars$D = EmailFieldClass.cssVarList;
4055
+ const vars$G = EmailFieldClass.cssVarList;
4056
4056
 
4057
4057
  const emailField = {
4058
- [vars$D.hostWidth]: refs.width,
4059
- [vars$D.hostMinWidth]: refs.minWidth,
4060
- [vars$D.hostDirection]: refs.direction,
4061
- [vars$D.fontSize]: refs.fontSize,
4062
- [vars$D.fontFamily]: refs.fontFamily,
4063
- [vars$D.labelFontSize]: refs.labelFontSize,
4064
- [vars$D.labelFontWeight]: refs.labelFontWeight,
4065
- [vars$D.labelTextColor]: refs.labelTextColor,
4066
- [vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
4067
- [vars$D.inputValueTextColor]: refs.valueTextColor,
4068
- [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
4069
- [vars$D.inputPlaceholderColor]: refs.placeholderTextColor,
4070
- [vars$D.inputBorderWidth]: refs.borderWidth,
4071
- [vars$D.inputBorderStyle]: refs.borderStyle,
4072
- [vars$D.inputBorderColor]: refs.borderColor,
4073
- [vars$D.inputBorderRadius]: refs.borderRadius,
4074
- [vars$D.inputOutlineWidth]: refs.outlineWidth,
4075
- [vars$D.inputOutlineStyle]: refs.outlineStyle,
4076
- [vars$D.inputOutlineColor]: refs.outlineColor,
4077
- [vars$D.inputOutlineOffset]: refs.outlineOffset,
4078
- [vars$D.inputBackgroundColor]: refs.backgroundColor,
4079
- [vars$D.inputHorizontalPadding]: refs.horizontalPadding,
4080
- [vars$D.inputHeight]: refs.inputHeight,
4081
- [vars$D.labelPosition]: refs.labelPosition,
4082
- [vars$D.labelTopPosition]: refs.labelTopPosition,
4083
- [vars$D.labelHorizontalPosition]: refs.labelHorizontalPosition,
4084
- [vars$D.inputTransformY]: refs.inputTransformY,
4085
- [vars$D.inputTransition]: refs.inputTransition,
4086
- [vars$D.marginInlineStart]: refs.marginInlineStart,
4087
- [vars$D.placeholderOpacity]: refs.placeholderOpacity,
4088
- [vars$D.inputVerticalAlignment]: refs.inputVerticalAlignment,
4089
- [vars$D.valueInputHeight]: refs.valueInputHeight,
4090
- [vars$D.valueInputMarginBottom]: refs.valueInputMarginBottom,
4058
+ [vars$G.hostWidth]: refs.width,
4059
+ [vars$G.hostMinWidth]: refs.minWidth,
4060
+ [vars$G.hostDirection]: refs.direction,
4061
+ [vars$G.fontSize]: refs.fontSize,
4062
+ [vars$G.fontFamily]: refs.fontFamily,
4063
+ [vars$G.labelFontSize]: refs.labelFontSize,
4064
+ [vars$G.labelFontWeight]: refs.labelFontWeight,
4065
+ [vars$G.labelTextColor]: refs.labelTextColor,
4066
+ [vars$G.errorMessageTextColor]: refs.errorMessageTextColor,
4067
+ [vars$G.inputValueTextColor]: refs.valueTextColor,
4068
+ [vars$G.labelRequiredIndicator]: refs.requiredIndicator,
4069
+ [vars$G.inputPlaceholderColor]: refs.placeholderTextColor,
4070
+ [vars$G.inputBorderWidth]: refs.borderWidth,
4071
+ [vars$G.inputBorderStyle]: refs.borderStyle,
4072
+ [vars$G.inputBorderColor]: refs.borderColor,
4073
+ [vars$G.inputBorderRadius]: refs.borderRadius,
4074
+ [vars$G.inputOutlineWidth]: refs.outlineWidth,
4075
+ [vars$G.inputOutlineStyle]: refs.outlineStyle,
4076
+ [vars$G.inputOutlineColor]: refs.outlineColor,
4077
+ [vars$G.inputOutlineOffset]: refs.outlineOffset,
4078
+ [vars$G.inputBackgroundColor]: refs.backgroundColor,
4079
+ [vars$G.inputHorizontalPadding]: refs.horizontalPadding,
4080
+ [vars$G.inputHeight]: refs.inputHeight,
4081
+ [vars$G.labelPosition]: refs.labelPosition,
4082
+ [vars$G.labelTopPosition]: refs.labelTopPosition,
4083
+ [vars$G.labelHorizontalPosition]: refs.labelHorizontalPosition,
4084
+ [vars$G.inputTransformY]: refs.inputTransformY,
4085
+ [vars$G.inputTransition]: refs.inputTransition,
4086
+ [vars$G.marginInlineStart]: refs.marginInlineStart,
4087
+ [vars$G.placeholderOpacity]: refs.placeholderOpacity,
4088
+ [vars$G.inputVerticalAlignment]: refs.inputVerticalAlignment,
4089
+ [vars$G.valueInputHeight]: refs.valueInputHeight,
4090
+ [vars$G.valueInputMarginBottom]: refs.valueInputMarginBottom,
4091
4091
  };
4092
4092
 
4093
4093
  var emailField$1 = /*#__PURE__*/Object.freeze({
4094
4094
  __proto__: null,
4095
4095
  default: emailField,
4096
- vars: vars$D
4096
+ vars: vars$G
4097
4097
  });
4098
4098
 
4099
- const componentName$L = getComponentName('text-area');
4099
+ const componentName$O = getComponentName('text-area');
4100
4100
 
4101
4101
  const {
4102
4102
  host: host$k,
@@ -4172,49 +4172,49 @@ const TextAreaClass = compose(
4172
4172
  ${resetInputCursor('vaadin-text-area')}
4173
4173
  `,
4174
4174
  excludeAttrsSync: ['tabindex'],
4175
- componentName: componentName$L,
4175
+ componentName: componentName$O,
4176
4176
  })
4177
4177
  );
4178
4178
 
4179
- const vars$C = TextAreaClass.cssVarList;
4179
+ const vars$F = TextAreaClass.cssVarList;
4180
4180
 
4181
4181
  const textArea = {
4182
- [vars$C.hostWidth]: refs.width,
4183
- [vars$C.hostMinWidth]: refs.minWidth,
4184
- [vars$C.hostDirection]: refs.direction,
4185
- [vars$C.fontSize]: refs.fontSize,
4186
- [vars$C.fontFamily]: refs.fontFamily,
4187
- [vars$C.labelTextColor]: refs.labelTextColor,
4188
- [vars$C.labelRequiredIndicator]: refs.requiredIndicator,
4189
- [vars$C.errorMessageTextColor]: refs.errorMessageTextColor,
4190
- [vars$C.inputBackgroundColor]: refs.backgroundColor,
4191
- [vars$C.inputValueTextColor]: refs.valueTextColor,
4192
- [vars$C.inputPlaceholderTextColor]: refs.placeholderTextColor,
4193
- [vars$C.inputBorderRadius]: refs.borderRadius,
4194
- [vars$C.inputBorderWidth]: refs.borderWidth,
4195
- [vars$C.inputBorderStyle]: refs.borderStyle,
4196
- [vars$C.inputBorderColor]: refs.borderColor,
4197
- [vars$C.inputOutlineWidth]: refs.outlineWidth,
4198
- [vars$C.inputOutlineStyle]: refs.outlineStyle,
4199
- [vars$C.inputOutlineColor]: refs.outlineColor,
4200
- [vars$C.inputOutlineOffset]: refs.outlineOffset,
4201
- [vars$C.inputResizeType]: 'vertical',
4202
- [vars$C.inputMinHeight]: '5em',
4182
+ [vars$F.hostWidth]: refs.width,
4183
+ [vars$F.hostMinWidth]: refs.minWidth,
4184
+ [vars$F.hostDirection]: refs.direction,
4185
+ [vars$F.fontSize]: refs.fontSize,
4186
+ [vars$F.fontFamily]: refs.fontFamily,
4187
+ [vars$F.labelTextColor]: refs.labelTextColor,
4188
+ [vars$F.labelRequiredIndicator]: refs.requiredIndicator,
4189
+ [vars$F.errorMessageTextColor]: refs.errorMessageTextColor,
4190
+ [vars$F.inputBackgroundColor]: refs.backgroundColor,
4191
+ [vars$F.inputValueTextColor]: refs.valueTextColor,
4192
+ [vars$F.inputPlaceholderTextColor]: refs.placeholderTextColor,
4193
+ [vars$F.inputBorderRadius]: refs.borderRadius,
4194
+ [vars$F.inputBorderWidth]: refs.borderWidth,
4195
+ [vars$F.inputBorderStyle]: refs.borderStyle,
4196
+ [vars$F.inputBorderColor]: refs.borderColor,
4197
+ [vars$F.inputOutlineWidth]: refs.outlineWidth,
4198
+ [vars$F.inputOutlineStyle]: refs.outlineStyle,
4199
+ [vars$F.inputOutlineColor]: refs.outlineColor,
4200
+ [vars$F.inputOutlineOffset]: refs.outlineOffset,
4201
+ [vars$F.inputResizeType]: 'vertical',
4202
+ [vars$F.inputMinHeight]: '5em',
4203
4203
  textAlign: {
4204
- right: { [vars$C.inputTextAlign]: 'right' },
4205
- left: { [vars$C.inputTextAlign]: 'left' },
4206
- center: { [vars$C.inputTextAlign]: 'center' },
4204
+ right: { [vars$F.inputTextAlign]: 'right' },
4205
+ left: { [vars$F.inputTextAlign]: 'left' },
4206
+ center: { [vars$F.inputTextAlign]: 'center' },
4207
4207
  },
4208
4208
 
4209
4209
  _readonly: {
4210
- [vars$C.inputResizeType]: 'none',
4210
+ [vars$F.inputResizeType]: 'none',
4211
4211
  },
4212
4212
  };
4213
4213
 
4214
4214
  var textArea$1 = /*#__PURE__*/Object.freeze({
4215
4215
  __proto__: null,
4216
4216
  default: textArea,
4217
- vars: vars$C
4217
+ vars: vars$F
4218
4218
  });
4219
4219
 
4220
4220
  const createBaseInputClass = (...args) =>
@@ -4225,9 +4225,9 @@ const createBaseInputClass = (...args) =>
4225
4225
  inputEventsDispatchingMixin
4226
4226
  )(createBaseClass(...args));
4227
4227
 
4228
- const componentName$K = getComponentName('boolean-field-internal');
4228
+ const componentName$N = getComponentName('boolean-field-internal');
4229
4229
 
4230
- createBaseInputClass({ componentName: componentName$K, baseSelector: 'div' });
4230
+ createBaseInputClass({ componentName: componentName$N, baseSelector: 'div' });
4231
4231
 
4232
4232
  const booleanFieldMixin = (superclass) =>
4233
4233
  class BooleanFieldMixinClass extends superclass {
@@ -4236,14 +4236,14 @@ const booleanFieldMixin = (superclass) =>
4236
4236
 
4237
4237
  const template = document.createElement('template');
4238
4238
  template.innerHTML = `
4239
- <${componentName$K}
4239
+ <${componentName$N}
4240
4240
  tabindex="-1"
4241
4241
  slot="input"
4242
- ></${componentName$K}>
4242
+ ></${componentName$N}>
4243
4243
  `;
4244
4244
 
4245
4245
  this.baseElement.appendChild(template.content.cloneNode(true));
4246
- this.inputElement = this.shadowRoot.querySelector(componentName$K);
4246
+ this.inputElement = this.shadowRoot.querySelector(componentName$N);
4247
4247
  this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
4248
4248
 
4249
4249
  forwardAttrs(this, this.inputElement, {
@@ -4313,7 +4313,7 @@ descope-boolean-field-internal {
4313
4313
  }
4314
4314
  `;
4315
4315
 
4316
- const componentName$J = getComponentName('checkbox');
4316
+ const componentName$M = getComponentName('checkbox');
4317
4317
 
4318
4318
  const {
4319
4319
  host: host$j,
@@ -4419,51 +4419,51 @@ const CheckboxClass = compose(
4419
4419
  }
4420
4420
  `,
4421
4421
  excludeAttrsSync: ['label', 'tabindex'],
4422
- componentName: componentName$J,
4422
+ componentName: componentName$M,
4423
4423
  })
4424
4424
  );
4425
4425
 
4426
- const vars$B = CheckboxClass.cssVarList;
4426
+ const vars$E = CheckboxClass.cssVarList;
4427
4427
  const checkboxSize = '1.35em';
4428
4428
 
4429
4429
  const checkbox = {
4430
- [vars$B.hostWidth]: refs.width,
4431
- [vars$B.hostDirection]: refs.direction,
4432
- [vars$B.fontSize]: refs.fontSize,
4433
- [vars$B.fontFamily]: refs.fontFamily,
4434
- [vars$B.labelTextColor]: refs.labelTextColor,
4435
- [vars$B.labelRequiredIndicator]: refs.requiredIndicator,
4436
- [vars$B.labelFontWeight]: '400',
4437
- [vars$B.labelLineHeight]: checkboxSize,
4438
- [vars$B.labelSpacing]: '1em',
4439
- [vars$B.errorMessageTextColor]: refs.errorMessageTextColor,
4440
- [vars$B.inputOutlineWidth]: refs.outlineWidth,
4441
- [vars$B.inputOutlineOffset]: refs.outlineOffset,
4442
- [vars$B.inputOutlineColor]: refs.outlineColor,
4443
- [vars$B.inputOutlineStyle]: refs.outlineStyle,
4444
- [vars$B.inputBorderRadius]: refs.borderRadius,
4445
- [vars$B.inputBorderColor]: refs.borderColor,
4446
- [vars$B.inputBorderWidth]: refs.borderWidth,
4447
- [vars$B.inputBorderStyle]: refs.borderStyle,
4448
- [vars$B.inputBackgroundColor]: refs.backgroundColor,
4449
- [vars$B.inputSize]: checkboxSize,
4430
+ [vars$E.hostWidth]: refs.width,
4431
+ [vars$E.hostDirection]: refs.direction,
4432
+ [vars$E.fontSize]: refs.fontSize,
4433
+ [vars$E.fontFamily]: refs.fontFamily,
4434
+ [vars$E.labelTextColor]: refs.labelTextColor,
4435
+ [vars$E.labelRequiredIndicator]: refs.requiredIndicator,
4436
+ [vars$E.labelFontWeight]: '400',
4437
+ [vars$E.labelLineHeight]: checkboxSize,
4438
+ [vars$E.labelSpacing]: '1em',
4439
+ [vars$E.errorMessageTextColor]: refs.errorMessageTextColor,
4440
+ [vars$E.inputOutlineWidth]: refs.outlineWidth,
4441
+ [vars$E.inputOutlineOffset]: refs.outlineOffset,
4442
+ [vars$E.inputOutlineColor]: refs.outlineColor,
4443
+ [vars$E.inputOutlineStyle]: refs.outlineStyle,
4444
+ [vars$E.inputBorderRadius]: refs.borderRadius,
4445
+ [vars$E.inputBorderColor]: refs.borderColor,
4446
+ [vars$E.inputBorderWidth]: refs.borderWidth,
4447
+ [vars$E.inputBorderStyle]: refs.borderStyle,
4448
+ [vars$E.inputBackgroundColor]: refs.backgroundColor,
4449
+ [vars$E.inputSize]: checkboxSize,
4450
4450
 
4451
4451
  _checked: {
4452
- [vars$B.inputValueTextColor]: refs.valueTextColor,
4452
+ [vars$E.inputValueTextColor]: refs.valueTextColor,
4453
4453
  },
4454
4454
 
4455
4455
  _disabled: {
4456
- [vars$B.labelTextColor]: refs.labelTextColor,
4456
+ [vars$E.labelTextColor]: refs.labelTextColor,
4457
4457
  },
4458
4458
  };
4459
4459
 
4460
4460
  var checkbox$1 = /*#__PURE__*/Object.freeze({
4461
4461
  __proto__: null,
4462
4462
  default: checkbox,
4463
- vars: vars$B
4463
+ vars: vars$E
4464
4464
  });
4465
4465
 
4466
- const componentName$I = getComponentName('switch-toggle');
4466
+ const componentName$L = getComponentName('switch-toggle');
4467
4467
 
4468
4468
  const {
4469
4469
  host: host$i,
@@ -4595,82 +4595,82 @@ const SwitchToggleClass = compose(
4595
4595
  }
4596
4596
  `,
4597
4597
  excludeAttrsSync: ['label', 'tabindex'],
4598
- componentName: componentName$I,
4598
+ componentName: componentName$L,
4599
4599
  })
4600
4600
  );
4601
4601
 
4602
4602
  const knobMargin = '2px';
4603
4603
  const checkboxHeight = '1.25em';
4604
4604
 
4605
- const globalRefs$o = getThemeRefs(globals);
4606
- const vars$A = SwitchToggleClass.cssVarList;
4605
+ const globalRefs$r = getThemeRefs(globals);
4606
+ const vars$D = SwitchToggleClass.cssVarList;
4607
4607
 
4608
4608
  const switchToggle = {
4609
- [vars$A.hostWidth]: refs.width,
4610
- [vars$A.hostDirection]: refs.direction,
4611
- [vars$A.fontSize]: refs.fontSize,
4612
- [vars$A.fontFamily]: refs.fontFamily,
4613
-
4614
- [vars$A.inputOutlineWidth]: refs.outlineWidth,
4615
- [vars$A.inputOutlineOffset]: refs.outlineOffset,
4616
- [vars$A.inputOutlineColor]: refs.outlineColor,
4617
- [vars$A.inputOutlineStyle]: refs.outlineStyle,
4618
-
4619
- [vars$A.trackBorderStyle]: refs.borderStyle,
4620
- [vars$A.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
4621
- [vars$A.trackBorderColor]: refs.borderColor,
4622
- [vars$A.trackBackgroundColor]: refs.backgroundColor,
4623
- [vars$A.trackBorderRadius]: globalRefs$o.radius.md,
4624
- [vars$A.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
4625
- [vars$A.trackHeight]: checkboxHeight,
4626
-
4627
- [vars$A.knobSize]: `calc(1em - ${knobMargin})`,
4628
- [vars$A.knobRadius]: '50%',
4629
- [vars$A.knobTopOffset]: '1px',
4630
- [vars$A.knobLeftOffset]: knobMargin,
4631
- [vars$A.knobColor]: refs.labelTextColor,
4632
- [vars$A.knobTransitionDuration]: '0.3s',
4633
-
4634
- [vars$A.labelTextColor]: refs.labelTextColor,
4635
- [vars$A.labelFontWeight]: '400',
4636
- [vars$A.labelLineHeight]: '1.35em',
4637
- [vars$A.labelSpacing]: '1em',
4638
- [vars$A.labelRequiredIndicator]: refs.requiredIndicator,
4639
- [vars$A.errorMessageTextColor]: refs.errorMessageTextColor,
4609
+ [vars$D.hostWidth]: refs.width,
4610
+ [vars$D.hostDirection]: refs.direction,
4611
+ [vars$D.fontSize]: refs.fontSize,
4612
+ [vars$D.fontFamily]: refs.fontFamily,
4613
+
4614
+ [vars$D.inputOutlineWidth]: refs.outlineWidth,
4615
+ [vars$D.inputOutlineOffset]: refs.outlineOffset,
4616
+ [vars$D.inputOutlineColor]: refs.outlineColor,
4617
+ [vars$D.inputOutlineStyle]: refs.outlineStyle,
4618
+
4619
+ [vars$D.trackBorderStyle]: refs.borderStyle,
4620
+ [vars$D.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
4621
+ [vars$D.trackBorderColor]: refs.borderColor,
4622
+ [vars$D.trackBackgroundColor]: refs.backgroundColor,
4623
+ [vars$D.trackBorderRadius]: globalRefs$r.radius.md,
4624
+ [vars$D.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
4625
+ [vars$D.trackHeight]: checkboxHeight,
4626
+
4627
+ [vars$D.knobSize]: `calc(1em - ${knobMargin})`,
4628
+ [vars$D.knobRadius]: '50%',
4629
+ [vars$D.knobTopOffset]: '1px',
4630
+ [vars$D.knobLeftOffset]: knobMargin,
4631
+ [vars$D.knobColor]: refs.labelTextColor,
4632
+ [vars$D.knobTransitionDuration]: '0.3s',
4633
+
4634
+ [vars$D.labelTextColor]: refs.labelTextColor,
4635
+ [vars$D.labelFontWeight]: '400',
4636
+ [vars$D.labelLineHeight]: '1.35em',
4637
+ [vars$D.labelSpacing]: '1em',
4638
+ [vars$D.labelRequiredIndicator]: refs.requiredIndicator,
4639
+ [vars$D.errorMessageTextColor]: refs.errorMessageTextColor,
4640
4640
 
4641
4641
  _checked: {
4642
- [vars$A.trackBorderColor]: refs.borderColor,
4643
- [vars$A.knobLeftOffset]: `calc(100% - var(${vars$A.knobSize}) - ${knobMargin})`,
4644
- [vars$A.knobColor]: refs.valueTextColor,
4645
- [vars$A.knobTextColor]: refs.valueTextColor,
4642
+ [vars$D.trackBorderColor]: refs.borderColor,
4643
+ [vars$D.knobLeftOffset]: `calc(100% - var(${vars$D.knobSize}) - ${knobMargin})`,
4644
+ [vars$D.knobColor]: refs.valueTextColor,
4645
+ [vars$D.knobTextColor]: refs.valueTextColor,
4646
4646
  },
4647
4647
 
4648
4648
  _disabled: {
4649
- [vars$A.knobColor]: globalRefs$o.colors.surface.light,
4650
- [vars$A.trackBorderColor]: globalRefs$o.colors.surface.light,
4651
- [vars$A.trackBackgroundColor]: globalRefs$o.colors.surface.main,
4652
- [vars$A.labelTextColor]: refs.labelTextColor,
4649
+ [vars$D.knobColor]: globalRefs$r.colors.surface.light,
4650
+ [vars$D.trackBorderColor]: globalRefs$r.colors.surface.light,
4651
+ [vars$D.trackBackgroundColor]: globalRefs$r.colors.surface.main,
4652
+ [vars$D.labelTextColor]: refs.labelTextColor,
4653
4653
  _checked: {
4654
- [vars$A.knobColor]: globalRefs$o.colors.surface.light,
4655
- [vars$A.trackBackgroundColor]: globalRefs$o.colors.surface.main,
4654
+ [vars$D.knobColor]: globalRefs$r.colors.surface.light,
4655
+ [vars$D.trackBackgroundColor]: globalRefs$r.colors.surface.main,
4656
4656
  },
4657
4657
  },
4658
4658
 
4659
4659
  _invalid: {
4660
- [vars$A.trackBorderColor]: globalRefs$o.colors.error.main,
4661
- [vars$A.knobColor]: globalRefs$o.colors.error.main,
4660
+ [vars$D.trackBorderColor]: globalRefs$r.colors.error.main,
4661
+ [vars$D.knobColor]: globalRefs$r.colors.error.main,
4662
4662
  },
4663
4663
  };
4664
4664
 
4665
4665
  var switchToggle$1 = /*#__PURE__*/Object.freeze({
4666
4666
  __proto__: null,
4667
4667
  default: switchToggle,
4668
- vars: vars$A
4668
+ vars: vars$D
4669
4669
  });
4670
4670
 
4671
- const componentName$H = getComponentName('container');
4671
+ const componentName$K = getComponentName('container');
4672
4672
 
4673
- class RawContainer extends createBaseClass({ componentName: componentName$H, baseSelector: 'slot' }) {
4673
+ class RawContainer extends createBaseClass({ componentName: componentName$K, baseSelector: 'slot' }) {
4674
4674
  constructor() {
4675
4675
  super();
4676
4676
 
@@ -4723,9 +4723,9 @@ const ContainerClass = compose(
4723
4723
  componentNameValidationMixin
4724
4724
  )(RawContainer);
4725
4725
 
4726
- const globalRefs$n = getThemeRefs(globals);
4726
+ const globalRefs$q = getThemeRefs(globals);
4727
4727
 
4728
- const compVars$4 = ContainerClass.cssVarList;
4728
+ const compVars$5 = ContainerClass.cssVarList;
4729
4729
 
4730
4730
  const verticalAlignment = {
4731
4731
  start: { verticalAlignment: 'start' },
@@ -4739,108 +4739,108 @@ const horizontalAlignment = {
4739
4739
  end: { horizontalAlignment: 'end' },
4740
4740
  };
4741
4741
 
4742
- const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
4742
+ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars(
4743
4743
  {
4744
4744
  verticalAlignment,
4745
4745
  horizontalAlignment,
4746
4746
  shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
4747
4747
  },
4748
- componentName$H
4748
+ componentName$K
4749
4749
  );
4750
4750
 
4751
- const { shadowColor: shadowColor$1 } = helperRefs$2;
4751
+ const { shadowColor: shadowColor$2 } = helperRefs$3;
4752
4752
 
4753
4753
  const container = {
4754
- ...helperTheme$2,
4754
+ ...helperTheme$3,
4755
4755
 
4756
- [compVars$4.itemsGrow]: '0',
4757
- [compVars$4.hostWidth]: '100%',
4758
- [compVars$4.boxShadow]: 'none',
4759
- [compVars$4.backgroundColor]: globalRefs$n.colors.surface.main,
4760
- [compVars$4.color]: globalRefs$n.colors.surface.contrast,
4761
- [compVars$4.borderRadius]: '0px',
4762
- [compVars$4.hostDirection]: globalRefs$n.direction,
4756
+ [compVars$5.itemsGrow]: '0',
4757
+ [compVars$5.hostWidth]: '100%',
4758
+ [compVars$5.boxShadow]: 'none',
4759
+ [compVars$5.backgroundColor]: globalRefs$q.colors.surface.main,
4760
+ [compVars$5.color]: globalRefs$q.colors.surface.contrast,
4761
+ [compVars$5.borderRadius]: '0px',
4762
+ [compVars$5.hostDirection]: globalRefs$q.direction,
4763
4763
 
4764
4764
  verticalPadding: {
4765
- sm: { [compVars$4.verticalPadding]: '5px' },
4766
- md: { [compVars$4.verticalPadding]: '10px' },
4767
- lg: { [compVars$4.verticalPadding]: '20px' },
4765
+ sm: { [compVars$5.verticalPadding]: '5px' },
4766
+ md: { [compVars$5.verticalPadding]: '10px' },
4767
+ lg: { [compVars$5.verticalPadding]: '20px' },
4768
4768
  },
4769
4769
 
4770
4770
  horizontalPadding: {
4771
- sm: { [compVars$4.horizontalPadding]: '5px' },
4772
- md: { [compVars$4.horizontalPadding]: '10px' },
4773
- lg: { [compVars$4.horizontalPadding]: '20px' },
4771
+ sm: { [compVars$5.horizontalPadding]: '5px' },
4772
+ md: { [compVars$5.horizontalPadding]: '10px' },
4773
+ lg: { [compVars$5.horizontalPadding]: '20px' },
4774
4774
  },
4775
4775
 
4776
4776
  direction: {
4777
4777
  row: {
4778
- [compVars$4.flexDirection]: 'row',
4779
- [compVars$4.alignItems]: helperRefs$2.verticalAlignment,
4780
- [compVars$4.justifyContent]: helperRefs$2.horizontalAlignment,
4781
- [compVars$4.flexWrap]: 'wrap',
4778
+ [compVars$5.flexDirection]: 'row',
4779
+ [compVars$5.alignItems]: helperRefs$3.verticalAlignment,
4780
+ [compVars$5.justifyContent]: helperRefs$3.horizontalAlignment,
4781
+ [compVars$5.flexWrap]: 'wrap',
4782
4782
  horizontalAlignment: {
4783
4783
  spaceBetween: {
4784
- [helperVars$2.horizontalAlignment]: 'space-between',
4784
+ [helperVars$3.horizontalAlignment]: 'space-between',
4785
4785
  },
4786
4786
  },
4787
4787
  },
4788
4788
  column: {
4789
- [compVars$4.flexDirection]: 'column',
4790
- [compVars$4.alignItems]: helperRefs$2.horizontalAlignment,
4791
- [compVars$4.justifyContent]: helperRefs$2.verticalAlignment,
4789
+ [compVars$5.flexDirection]: 'column',
4790
+ [compVars$5.alignItems]: helperRefs$3.horizontalAlignment,
4791
+ [compVars$5.justifyContent]: helperRefs$3.verticalAlignment,
4792
4792
  verticalAlignment: {
4793
4793
  spaceBetween: {
4794
- [helperVars$2.verticalAlignment]: 'space-between',
4794
+ [helperVars$3.verticalAlignment]: 'space-between',
4795
4795
  },
4796
4796
  },
4797
4797
  },
4798
4798
  },
4799
4799
 
4800
4800
  spaceBetween: {
4801
- sm: { [compVars$4.gap]: '10px' },
4802
- md: { [compVars$4.gap]: '20px' },
4803
- lg: { [compVars$4.gap]: '30px' },
4801
+ sm: { [compVars$5.gap]: '10px' },
4802
+ md: { [compVars$5.gap]: '20px' },
4803
+ lg: { [compVars$5.gap]: '30px' },
4804
4804
  },
4805
4805
 
4806
4806
  shadow: {
4807
4807
  sm: {
4808
- [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.sm} ${shadowColor$1}`,
4808
+ [compVars$5.boxShadow]: `${globalRefs$q.shadow.wide.sm} ${shadowColor$2}, ${globalRefs$q.shadow.narrow.sm} ${shadowColor$2}`,
4809
4809
  },
4810
4810
  md: {
4811
- [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.md} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.md} ${shadowColor$1}`,
4811
+ [compVars$5.boxShadow]: `${globalRefs$q.shadow.wide.md} ${shadowColor$2}, ${globalRefs$q.shadow.narrow.md} ${shadowColor$2}`,
4812
4812
  },
4813
4813
  lg: {
4814
- [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.lg} ${shadowColor$1}`,
4814
+ [compVars$5.boxShadow]: `${globalRefs$q.shadow.wide.lg} ${shadowColor$2}, ${globalRefs$q.shadow.narrow.lg} ${shadowColor$2}`,
4815
4815
  },
4816
4816
  xl: {
4817
- [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$n.shadow.narrow.xl} ${shadowColor$1}`,
4817
+ [compVars$5.boxShadow]: `${globalRefs$q.shadow.wide.xl} ${shadowColor$2}, ${globalRefs$q.shadow.narrow.xl} ${shadowColor$2}`,
4818
4818
  },
4819
4819
  '2xl': {
4820
- [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
4821
- [compVars$4.boxShadow]: `${globalRefs$n.shadow.wide['2xl']} ${shadowColor$1}`,
4820
+ [helperVars$3.shadowColor]: '#00000050', // mimic daisyUI shadow settings
4821
+ [compVars$5.boxShadow]: `${globalRefs$q.shadow.wide['2xl']} ${shadowColor$2}`,
4822
4822
  },
4823
4823
  },
4824
4824
 
4825
4825
  borderRadius: {
4826
- sm: { [compVars$4.borderRadius]: globalRefs$n.radius.sm },
4827
- md: { [compVars$4.borderRadius]: globalRefs$n.radius.md },
4828
- lg: { [compVars$4.borderRadius]: globalRefs$n.radius.lg },
4829
- xl: { [compVars$4.borderRadius]: globalRefs$n.radius.xl },
4830
- '2xl': { [compVars$4.borderRadius]: globalRefs$n.radius['2xl'] },
4831
- '3xl': { [compVars$4.borderRadius]: globalRefs$n.radius['3xl'] },
4826
+ sm: { [compVars$5.borderRadius]: globalRefs$q.radius.sm },
4827
+ md: { [compVars$5.borderRadius]: globalRefs$q.radius.md },
4828
+ lg: { [compVars$5.borderRadius]: globalRefs$q.radius.lg },
4829
+ xl: { [compVars$5.borderRadius]: globalRefs$q.radius.xl },
4830
+ '2xl': { [compVars$5.borderRadius]: globalRefs$q.radius['2xl'] },
4831
+ '3xl': { [compVars$5.borderRadius]: globalRefs$q.radius['3xl'] },
4832
4832
  },
4833
4833
  };
4834
4834
 
4835
- const vars$z = {
4836
- ...compVars$4,
4837
- ...helperVars$2,
4835
+ const vars$C = {
4836
+ ...compVars$5,
4837
+ ...helperVars$3,
4838
4838
  };
4839
4839
 
4840
4840
  var container$1 = /*#__PURE__*/Object.freeze({
4841
4841
  __proto__: null,
4842
4842
  default: container,
4843
- vars: vars$z
4843
+ vars: vars$C
4844
4844
  });
4845
4845
 
4846
4846
  const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
@@ -4893,69 +4893,69 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
4893
4893
  return CssVarImageClass;
4894
4894
  };
4895
4895
 
4896
- const componentName$G = getComponentName('logo');
4896
+ const componentName$J = getComponentName('logo');
4897
4897
 
4898
4898
  const LogoClass = createCssVarImageClass({
4899
- componentName: componentName$G,
4899
+ componentName: componentName$J,
4900
4900
  varName: 'url',
4901
4901
  fallbackVarName: 'fallbackUrl',
4902
4902
  });
4903
4903
 
4904
- const vars$y = LogoClass.cssVarList;
4904
+ const vars$B = LogoClass.cssVarList;
4905
4905
 
4906
4906
  const logo$2 = {
4907
- [vars$y.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4907
+ [vars$B.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
4908
4908
  };
4909
4909
 
4910
4910
  var logo$3 = /*#__PURE__*/Object.freeze({
4911
4911
  __proto__: null,
4912
4912
  default: logo$2,
4913
- vars: vars$y
4913
+ vars: vars$B
4914
4914
  });
4915
4915
 
4916
- const componentName$F = getComponentName('totp-image');
4916
+ const componentName$I = getComponentName('totp-image');
4917
4917
 
4918
4918
  const TotpImageClass = createCssVarImageClass({
4919
- componentName: componentName$F,
4919
+ componentName: componentName$I,
4920
4920
  varName: 'url',
4921
4921
  fallbackVarName: 'fallbackUrl',
4922
4922
  });
4923
4923
 
4924
- const vars$x = TotpImageClass.cssVarList;
4924
+ const vars$A = TotpImageClass.cssVarList;
4925
4925
 
4926
4926
  const logo$1 = {
4927
- [vars$x.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4927
+ [vars$A.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
4928
4928
  };
4929
4929
 
4930
4930
  var totpImage = /*#__PURE__*/Object.freeze({
4931
4931
  __proto__: null,
4932
4932
  default: logo$1,
4933
- vars: vars$x
4933
+ vars: vars$A
4934
4934
  });
4935
4935
 
4936
- const componentName$E = getComponentName('notp-image');
4936
+ const componentName$H = getComponentName('notp-image');
4937
4937
 
4938
4938
  const NotpImageClass = createCssVarImageClass({
4939
- componentName: componentName$E,
4939
+ componentName: componentName$H,
4940
4940
  varName: 'url',
4941
4941
  fallbackVarName: 'fallbackUrl',
4942
4942
  });
4943
4943
 
4944
- const vars$w = NotpImageClass.cssVarList;
4944
+ const vars$z = NotpImageClass.cssVarList;
4945
4945
 
4946
4946
  const logo = {
4947
- [vars$w.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
4947
+ [vars$z.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
4948
4948
  };
4949
4949
 
4950
4950
  var notpImage = /*#__PURE__*/Object.freeze({
4951
4951
  __proto__: null,
4952
4952
  default: logo,
4953
- vars: vars$w
4953
+ vars: vars$z
4954
4954
  });
4955
4955
 
4956
- const componentName$D = getComponentName('text');
4956
+ const componentName$G = getComponentName('text');
4957
4957
 
4958
- class RawText extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > slot' }) {
4958
+ class RawText extends createBaseClass({ componentName: componentName$G, baseSelector: ':host > slot' }) {
4959
4959
  constructor() {
4960
4960
  super();
4961
4961
 
@@ -5012,95 +5012,95 @@ const TextClass = compose(
5012
5012
  componentNameValidationMixin
5013
5013
  )(RawText);
5014
5014
 
5015
- const globalRefs$m = getThemeRefs(globals);
5016
- const vars$v = TextClass.cssVarList;
5015
+ const globalRefs$p = getThemeRefs(globals);
5016
+ const vars$y = TextClass.cssVarList;
5017
5017
 
5018
5018
  const text$2 = {
5019
- [vars$v.hostDirection]: globalRefs$m.direction,
5020
- [vars$v.textLineHeight]: '1.35em',
5021
- [vars$v.textAlign]: 'left',
5022
- [vars$v.textColor]: globalRefs$m.colors.surface.dark,
5019
+ [vars$y.hostDirection]: globalRefs$p.direction,
5020
+ [vars$y.textLineHeight]: '1.35em',
5021
+ [vars$y.textAlign]: 'left',
5022
+ [vars$y.textColor]: globalRefs$p.colors.surface.dark,
5023
5023
 
5024
5024
  variant: {
5025
5025
  h1: {
5026
- [vars$v.fontSize]: globalRefs$m.typography.h1.size,
5027
- [vars$v.fontWeight]: globalRefs$m.typography.h1.weight,
5028
- [vars$v.fontFamily]: globalRefs$m.typography.h1.font,
5026
+ [vars$y.fontSize]: globalRefs$p.typography.h1.size,
5027
+ [vars$y.fontWeight]: globalRefs$p.typography.h1.weight,
5028
+ [vars$y.fontFamily]: globalRefs$p.typography.h1.font,
5029
5029
  },
5030
5030
  h2: {
5031
- [vars$v.fontSize]: globalRefs$m.typography.h2.size,
5032
- [vars$v.fontWeight]: globalRefs$m.typography.h2.weight,
5033
- [vars$v.fontFamily]: globalRefs$m.typography.h2.font,
5031
+ [vars$y.fontSize]: globalRefs$p.typography.h2.size,
5032
+ [vars$y.fontWeight]: globalRefs$p.typography.h2.weight,
5033
+ [vars$y.fontFamily]: globalRefs$p.typography.h2.font,
5034
5034
  },
5035
5035
  h3: {
5036
- [vars$v.fontSize]: globalRefs$m.typography.h3.size,
5037
- [vars$v.fontWeight]: globalRefs$m.typography.h3.weight,
5038
- [vars$v.fontFamily]: globalRefs$m.typography.h3.font,
5036
+ [vars$y.fontSize]: globalRefs$p.typography.h3.size,
5037
+ [vars$y.fontWeight]: globalRefs$p.typography.h3.weight,
5038
+ [vars$y.fontFamily]: globalRefs$p.typography.h3.font,
5039
5039
  },
5040
5040
  subtitle1: {
5041
- [vars$v.fontSize]: globalRefs$m.typography.subtitle1.size,
5042
- [vars$v.fontWeight]: globalRefs$m.typography.subtitle1.weight,
5043
- [vars$v.fontFamily]: globalRefs$m.typography.subtitle1.font,
5041
+ [vars$y.fontSize]: globalRefs$p.typography.subtitle1.size,
5042
+ [vars$y.fontWeight]: globalRefs$p.typography.subtitle1.weight,
5043
+ [vars$y.fontFamily]: globalRefs$p.typography.subtitle1.font,
5044
5044
  },
5045
5045
  subtitle2: {
5046
- [vars$v.fontSize]: globalRefs$m.typography.subtitle2.size,
5047
- [vars$v.fontWeight]: globalRefs$m.typography.subtitle2.weight,
5048
- [vars$v.fontFamily]: globalRefs$m.typography.subtitle2.font,
5046
+ [vars$y.fontSize]: globalRefs$p.typography.subtitle2.size,
5047
+ [vars$y.fontWeight]: globalRefs$p.typography.subtitle2.weight,
5048
+ [vars$y.fontFamily]: globalRefs$p.typography.subtitle2.font,
5049
5049
  },
5050
5050
  body1: {
5051
- [vars$v.fontSize]: globalRefs$m.typography.body1.size,
5052
- [vars$v.fontWeight]: globalRefs$m.typography.body1.weight,
5053
- [vars$v.fontFamily]: globalRefs$m.typography.body1.font,
5051
+ [vars$y.fontSize]: globalRefs$p.typography.body1.size,
5052
+ [vars$y.fontWeight]: globalRefs$p.typography.body1.weight,
5053
+ [vars$y.fontFamily]: globalRefs$p.typography.body1.font,
5054
5054
  },
5055
5055
  body2: {
5056
- [vars$v.fontSize]: globalRefs$m.typography.body2.size,
5057
- [vars$v.fontWeight]: globalRefs$m.typography.body2.weight,
5058
- [vars$v.fontFamily]: globalRefs$m.typography.body2.font,
5056
+ [vars$y.fontSize]: globalRefs$p.typography.body2.size,
5057
+ [vars$y.fontWeight]: globalRefs$p.typography.body2.weight,
5058
+ [vars$y.fontFamily]: globalRefs$p.typography.body2.font,
5059
5059
  },
5060
5060
  },
5061
5061
 
5062
5062
  mode: {
5063
5063
  primary: {
5064
- [vars$v.textColor]: globalRefs$m.colors.surface.contrast,
5064
+ [vars$y.textColor]: globalRefs$p.colors.surface.contrast,
5065
5065
  },
5066
5066
  secondary: {
5067
- [vars$v.textColor]: globalRefs$m.colors.surface.dark,
5067
+ [vars$y.textColor]: globalRefs$p.colors.surface.dark,
5068
5068
  },
5069
5069
  error: {
5070
- [vars$v.textColor]: globalRefs$m.colors.error.main,
5070
+ [vars$y.textColor]: globalRefs$p.colors.error.main,
5071
5071
  },
5072
5072
  success: {
5073
- [vars$v.textColor]: globalRefs$m.colors.success.main,
5073
+ [vars$y.textColor]: globalRefs$p.colors.success.main,
5074
5074
  },
5075
5075
  },
5076
5076
 
5077
5077
  textAlign: {
5078
- right: { [vars$v.textAlign]: 'right' },
5079
- left: { [vars$v.textAlign]: 'left' },
5080
- center: { [vars$v.textAlign]: 'center' },
5078
+ right: { [vars$y.textAlign]: 'right' },
5079
+ left: { [vars$y.textAlign]: 'left' },
5080
+ center: { [vars$y.textAlign]: 'center' },
5081
5081
  },
5082
5082
 
5083
5083
  _fullWidth: {
5084
- [vars$v.hostWidth]: '100%',
5084
+ [vars$y.hostWidth]: '100%',
5085
5085
  },
5086
5086
 
5087
5087
  _italic: {
5088
- [vars$v.fontStyle]: 'italic',
5088
+ [vars$y.fontStyle]: 'italic',
5089
5089
  },
5090
5090
 
5091
5091
  _uppercase: {
5092
- [vars$v.textTransform]: 'uppercase',
5092
+ [vars$y.textTransform]: 'uppercase',
5093
5093
  },
5094
5094
 
5095
5095
  _lowercase: {
5096
- [vars$v.textTransform]: 'lowercase',
5096
+ [vars$y.textTransform]: 'lowercase',
5097
5097
  },
5098
5098
  };
5099
5099
 
5100
5100
  var text$3 = /*#__PURE__*/Object.freeze({
5101
5101
  __proto__: null,
5102
5102
  default: text$2,
5103
- vars: vars$v
5103
+ vars: vars$y
5104
5104
  });
5105
5105
 
5106
5106
  const disableRules = [
@@ -5126,9 +5126,9 @@ const decodeHTML = (html) => {
5126
5126
 
5127
5127
  /* eslint-disable no-param-reassign */
5128
5128
 
5129
- const componentName$C = getComponentName('enriched-text');
5129
+ const componentName$F = getComponentName('enriched-text');
5130
5130
 
5131
- class EnrichedText extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
5131
+ class EnrichedText extends createBaseClass({ componentName: componentName$F, baseSelector: ':host > div' }) {
5132
5132
  #origLinkRenderer;
5133
5133
 
5134
5134
  #origEmRenderer;
@@ -5318,9 +5318,9 @@ const EnrichedTextClass = compose(
5318
5318
  componentNameValidationMixin
5319
5319
  )(EnrichedText);
5320
5320
 
5321
- const componentName$B = getComponentName('link');
5321
+ const componentName$E = getComponentName('link');
5322
5322
 
5323
- class RawLink extends createBaseClass({ componentName: componentName$B, baseSelector: ':host a' }) {
5323
+ class RawLink extends createBaseClass({ componentName: componentName$E, baseSelector: ':host a' }) {
5324
5324
  constructor() {
5325
5325
  super();
5326
5326
 
@@ -5384,38 +5384,38 @@ const LinkClass = compose(
5384
5384
  componentNameValidationMixin
5385
5385
  )(RawLink);
5386
5386
 
5387
- const globalRefs$l = getThemeRefs(globals);
5388
- const vars$u = LinkClass.cssVarList;
5387
+ const globalRefs$o = getThemeRefs(globals);
5388
+ const vars$x = LinkClass.cssVarList;
5389
5389
 
5390
5390
  const link$1 = {
5391
- [vars$u.hostDirection]: globalRefs$l.direction,
5392
- [vars$u.cursor]: 'pointer',
5391
+ [vars$x.hostDirection]: globalRefs$o.direction,
5392
+ [vars$x.cursor]: 'pointer',
5393
5393
 
5394
- [vars$u.textColor]: globalRefs$l.colors.primary.main,
5394
+ [vars$x.textColor]: globalRefs$o.colors.primary.main,
5395
5395
 
5396
5396
  textAlign: {
5397
- right: { [vars$u.textAlign]: 'right' },
5398
- left: { [vars$u.textAlign]: 'left' },
5399
- center: { [vars$u.textAlign]: 'center' },
5397
+ right: { [vars$x.textAlign]: 'right' },
5398
+ left: { [vars$x.textAlign]: 'left' },
5399
+ center: { [vars$x.textAlign]: 'center' },
5400
5400
  },
5401
5401
 
5402
5402
  _fullWidth: {
5403
- [vars$u.hostWidth]: '100%',
5403
+ [vars$x.hostWidth]: '100%',
5404
5404
  },
5405
5405
 
5406
5406
  _hover: {
5407
- [vars$u.textDecoration]: 'underline',
5407
+ [vars$x.textDecoration]: 'underline',
5408
5408
  },
5409
5409
 
5410
5410
  mode: {
5411
5411
  secondary: {
5412
- [vars$u.textColor]: globalRefs$l.colors.secondary.main,
5412
+ [vars$x.textColor]: globalRefs$o.colors.secondary.main,
5413
5413
  },
5414
5414
  error: {
5415
- [vars$u.textColor]: globalRefs$l.colors.error.main,
5415
+ [vars$x.textColor]: globalRefs$o.colors.error.main,
5416
5416
  },
5417
5417
  success: {
5418
- [vars$u.textColor]: globalRefs$l.colors.success.main,
5418
+ [vars$x.textColor]: globalRefs$o.colors.success.main,
5419
5419
  },
5420
5420
  },
5421
5421
  };
@@ -5423,41 +5423,41 @@ const link$1 = {
5423
5423
  var link$2 = /*#__PURE__*/Object.freeze({
5424
5424
  __proto__: null,
5425
5425
  default: link$1,
5426
- vars: vars$u
5426
+ vars: vars$x
5427
5427
  });
5428
5428
 
5429
- const globalRefs$k = getThemeRefs(globals);
5430
- const vars$t = EnrichedTextClass.cssVarList;
5429
+ const globalRefs$n = getThemeRefs(globals);
5430
+ const vars$w = EnrichedTextClass.cssVarList;
5431
5431
 
5432
5432
  const enrichedText = {
5433
- [vars$t.hostDirection]: globalRefs$k.direction,
5434
- [vars$t.hostWidth]: useVar(vars$v.hostWidth),
5433
+ [vars$w.hostDirection]: globalRefs$n.direction,
5434
+ [vars$w.hostWidth]: useVar(vars$y.hostWidth),
5435
5435
 
5436
- [vars$t.textLineHeight]: useVar(vars$v.textLineHeight),
5437
- [vars$t.textColor]: useVar(vars$v.textColor),
5438
- [vars$t.textAlign]: useVar(vars$v.textAlign),
5436
+ [vars$w.textLineHeight]: useVar(vars$y.textLineHeight),
5437
+ [vars$w.textColor]: useVar(vars$y.textColor),
5438
+ [vars$w.textAlign]: useVar(vars$y.textAlign),
5439
5439
 
5440
- [vars$t.fontSize]: useVar(vars$v.fontSize),
5441
- [vars$t.fontWeight]: useVar(vars$v.fontWeight),
5442
- [vars$t.fontFamily]: useVar(vars$v.fontFamily),
5440
+ [vars$w.fontSize]: useVar(vars$y.fontSize),
5441
+ [vars$w.fontWeight]: useVar(vars$y.fontWeight),
5442
+ [vars$w.fontFamily]: useVar(vars$y.fontFamily),
5443
5443
 
5444
- [vars$t.linkColor]: useVar(vars$u.textColor),
5445
- [vars$t.linkTextDecoration]: 'none',
5446
- [vars$t.linkHoverTextDecoration]: 'underline',
5444
+ [vars$w.linkColor]: useVar(vars$x.textColor),
5445
+ [vars$w.linkTextDecoration]: 'none',
5446
+ [vars$w.linkHoverTextDecoration]: 'underline',
5447
5447
 
5448
- [vars$t.fontWeightBold]: '900',
5449
- [vars$t.minWidth]: '0.25em',
5450
- [vars$t.minHeight]: '1.35em',
5448
+ [vars$w.fontWeightBold]: '900',
5449
+ [vars$w.minWidth]: '0.25em',
5450
+ [vars$w.minHeight]: '1.35em',
5451
5451
  };
5452
5452
 
5453
5453
  var enrichedText$1 = /*#__PURE__*/Object.freeze({
5454
5454
  __proto__: null,
5455
5455
  default: enrichedText,
5456
- vars: vars$t
5456
+ vars: vars$w
5457
5457
  });
5458
5458
 
5459
- const componentName$A = getComponentName('divider');
5460
- class RawDivider extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > div' }) {
5459
+ const componentName$D = getComponentName('divider');
5460
+ class RawDivider extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
5461
5461
  constructor() {
5462
5462
  super();
5463
5463
 
@@ -5556,65 +5556,65 @@ const DividerClass = compose(
5556
5556
  componentNameValidationMixin
5557
5557
  )(RawDivider);
5558
5558
 
5559
- const globalRefs$j = getThemeRefs(globals);
5560
- const compVars$3 = DividerClass.cssVarList;
5559
+ const globalRefs$m = getThemeRefs(globals);
5560
+ const compVars$4 = DividerClass.cssVarList;
5561
5561
 
5562
- const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
5562
+ const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
5563
5563
  {
5564
5564
  thickness: '2px',
5565
5565
  spacing: '10px',
5566
5566
  },
5567
- componentName$A
5567
+ componentName$D
5568
5568
  );
5569
5569
 
5570
5570
  const divider = {
5571
- ...helperTheme$1,
5571
+ ...helperTheme$2,
5572
5572
 
5573
- [compVars$3.hostDirection]: globalRefs$j.direction,
5574
- [compVars$3.alignItems]: 'center',
5575
- [compVars$3.flexDirection]: 'row',
5576
- [compVars$3.alignSelf]: 'stretch',
5577
- [compVars$3.hostWidth]: '100%',
5578
- [compVars$3.stripeColor]: globalRefs$j.colors.surface.light,
5579
- [compVars$3.stripeColorOpacity]: '0.5',
5580
- [compVars$3.stripeHorizontalThickness]: helperRefs$1.thickness,
5581
- [compVars$3.labelTextWidth]: 'fit-content',
5582
- [compVars$3.labelTextMaxWidth]: 'calc(100% - 100px)',
5583
- [compVars$3.labelTextHorizontalSpacing]: helperRefs$1.spacing,
5584
- [compVars$3.textAlign]: 'center',
5573
+ [compVars$4.hostDirection]: globalRefs$m.direction,
5574
+ [compVars$4.alignItems]: 'center',
5575
+ [compVars$4.flexDirection]: 'row',
5576
+ [compVars$4.alignSelf]: 'stretch',
5577
+ [compVars$4.hostWidth]: '100%',
5578
+ [compVars$4.stripeColor]: globalRefs$m.colors.surface.light,
5579
+ [compVars$4.stripeColorOpacity]: '0.5',
5580
+ [compVars$4.stripeHorizontalThickness]: helperRefs$2.thickness,
5581
+ [compVars$4.labelTextWidth]: 'fit-content',
5582
+ [compVars$4.labelTextMaxWidth]: 'calc(100% - 100px)',
5583
+ [compVars$4.labelTextHorizontalSpacing]: helperRefs$2.spacing,
5584
+ [compVars$4.textAlign]: 'center',
5585
5585
 
5586
5586
  _vertical: {
5587
- [compVars$3.minHeight]: '200px',
5588
- [compVars$3.flexDirection]: 'column',
5589
- [compVars$3.hostWidth]: 'fit-content',
5590
- [compVars$3.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
5591
- [compVars$3.stripeVerticalThickness]: helperRefs$1.thickness,
5592
- [compVars$3.labelTextWidth]: 'fit-content',
5593
- [compVars$3.labelTextMaxWidth]: '100%',
5594
- [compVars$3.labelTextVerticalSpacing]: helperRefs$1.spacing,
5587
+ [compVars$4.minHeight]: '200px',
5588
+ [compVars$4.flexDirection]: 'column',
5589
+ [compVars$4.hostWidth]: 'fit-content',
5590
+ [compVars$4.hostPadding]: `0 calc(${helperRefs$2.thickness} * 3)`,
5591
+ [compVars$4.stripeVerticalThickness]: helperRefs$2.thickness,
5592
+ [compVars$4.labelTextWidth]: 'fit-content',
5593
+ [compVars$4.labelTextMaxWidth]: '100%',
5594
+ [compVars$4.labelTextVerticalSpacing]: helperRefs$2.spacing,
5595
5595
  },
5596
5596
  };
5597
5597
 
5598
- const vars$s = {
5599
- ...compVars$3,
5600
- ...helperVars$1,
5598
+ const vars$v = {
5599
+ ...compVars$4,
5600
+ ...helperVars$2,
5601
5601
  };
5602
5602
 
5603
5603
  var divider$1 = /*#__PURE__*/Object.freeze({
5604
5604
  __proto__: null,
5605
5605
  default: divider,
5606
- vars: vars$s
5606
+ vars: vars$v
5607
5607
  });
5608
5608
 
5609
5609
  /* eslint-disable no-param-reassign */
5610
5610
 
5611
- const componentName$z = getComponentName('passcode-internal');
5611
+ const componentName$C = getComponentName('passcode-internal');
5612
5612
 
5613
- createBaseInputClass({ componentName: componentName$z, baseSelector: 'div' });
5613
+ createBaseInputClass({ componentName: componentName$C, baseSelector: 'div' });
5614
5614
 
5615
- const componentName$y = getComponentName('loader-radial');
5615
+ const componentName$B = getComponentName('loader-radial');
5616
5616
 
5617
- class RawLoaderRadial extends createBaseClass({ componentName: componentName$y, baseSelector: ':host > div' }) {
5617
+ class RawLoaderRadial extends createBaseClass({ componentName: componentName$B, baseSelector: ':host > div' }) {
5618
5618
  constructor() {
5619
5619
  super();
5620
5620
 
@@ -5658,11 +5658,11 @@ const LoaderRadialClass = compose(
5658
5658
  componentNameValidationMixin
5659
5659
  )(RawLoaderRadial);
5660
5660
 
5661
- const componentName$x = getComponentName('passcode');
5661
+ const componentName$A = getComponentName('passcode');
5662
5662
 
5663
5663
  const observedAttributes$3 = ['digits'];
5664
5664
 
5665
- const customMixin$7 = (superclass) =>
5665
+ const customMixin$9 = (superclass) =>
5666
5666
  class PasscodeMixinClass extends superclass {
5667
5667
  static get observedAttributes() {
5668
5668
  return observedAttributes$3.concat(superclass.observedAttributes || []);
@@ -5677,17 +5677,17 @@ const customMixin$7 = (superclass) =>
5677
5677
  const template = document.createElement('template');
5678
5678
 
5679
5679
  template.innerHTML = `
5680
- <${componentName$z}
5680
+ <${componentName$C}
5681
5681
  bordered="true"
5682
5682
  name="code"
5683
5683
  tabindex="-1"
5684
5684
  slot="input"
5685
- ><slot></slot></${componentName$z}>
5685
+ ><slot></slot></${componentName$C}>
5686
5686
  `;
5687
5687
 
5688
5688
  this.baseElement.appendChild(template.content.cloneNode(true));
5689
5689
 
5690
- this.inputElement = this.shadowRoot.querySelector(componentName$z);
5690
+ this.inputElement = this.shadowRoot.querySelector(componentName$C);
5691
5691
 
5692
5692
  forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
5693
5693
  }
@@ -5758,7 +5758,7 @@ const PasscodeClass = compose(
5758
5758
  draggableMixin,
5759
5759
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
5760
5760
  componentNameValidationMixin,
5761
- customMixin$7
5761
+ customMixin$9
5762
5762
  )(
5763
5763
  createProxy({
5764
5764
  slots: [],
@@ -5839,56 +5839,56 @@ const PasscodeClass = compose(
5839
5839
  ${resetInputCursor('vaadin-text-field')}
5840
5840
  `,
5841
5841
  excludeAttrsSync: ['tabindex'],
5842
- componentName: componentName$x,
5842
+ componentName: componentName$A,
5843
5843
  })
5844
5844
  );
5845
5845
 
5846
- const vars$r = PasscodeClass.cssVarList;
5846
+ const vars$u = PasscodeClass.cssVarList;
5847
5847
 
5848
5848
  const passcode = {
5849
- [vars$r.hostDirection]: refs.direction,
5850
- [vars$r.fontFamily]: refs.fontFamily,
5851
- [vars$r.fontSize]: refs.fontSize,
5852
- [vars$r.labelTextColor]: refs.labelTextColor,
5853
- [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
5854
- [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
5855
- [vars$r.digitValueTextColor]: refs.valueTextColor,
5856
- [vars$r.digitPadding]: '0',
5857
- [vars$r.digitTextAlign]: 'center',
5858
- [vars$r.digitSpacing]: '4px',
5859
- [vars$r.hostWidth]: refs.width,
5860
- [vars$r.digitOutlineColor]: 'transparent',
5861
- [vars$r.digitOutlineWidth]: refs.outlineWidth,
5862
- [vars$r.focusedDigitFieldOutlineColor]: refs.outlineColor,
5863
- [vars$r.digitSize]: refs.inputHeight,
5849
+ [vars$u.hostDirection]: refs.direction,
5850
+ [vars$u.fontFamily]: refs.fontFamily,
5851
+ [vars$u.fontSize]: refs.fontSize,
5852
+ [vars$u.labelTextColor]: refs.labelTextColor,
5853
+ [vars$u.labelRequiredIndicator]: refs.requiredIndicator,
5854
+ [vars$u.errorMessageTextColor]: refs.errorMessageTextColor,
5855
+ [vars$u.digitValueTextColor]: refs.valueTextColor,
5856
+ [vars$u.digitPadding]: '0',
5857
+ [vars$u.digitTextAlign]: 'center',
5858
+ [vars$u.digitSpacing]: '4px',
5859
+ [vars$u.hostWidth]: refs.width,
5860
+ [vars$u.digitOutlineColor]: 'transparent',
5861
+ [vars$u.digitOutlineWidth]: refs.outlineWidth,
5862
+ [vars$u.focusedDigitFieldOutlineColor]: refs.outlineColor,
5863
+ [vars$u.digitSize]: refs.inputHeight,
5864
5864
 
5865
5865
  size: {
5866
- xs: { [vars$r.spinnerSize]: '15px' },
5867
- sm: { [vars$r.spinnerSize]: '20px' },
5868
- md: { [vars$r.spinnerSize]: '20px' },
5869
- lg: { [vars$r.spinnerSize]: '20px' },
5866
+ xs: { [vars$u.spinnerSize]: '15px' },
5867
+ sm: { [vars$u.spinnerSize]: '20px' },
5868
+ md: { [vars$u.spinnerSize]: '20px' },
5869
+ lg: { [vars$u.spinnerSize]: '20px' },
5870
5870
  },
5871
5871
 
5872
5872
  _hideCursor: {
5873
- [vars$r.digitCaretTextColor]: 'transparent',
5873
+ [vars$u.digitCaretTextColor]: 'transparent',
5874
5874
  },
5875
5875
 
5876
5876
  _loading: {
5877
- [vars$r.overlayOpacity]: refs.overlayOpacity,
5877
+ [vars$u.overlayOpacity]: refs.overlayOpacity,
5878
5878
  },
5879
5879
  };
5880
5880
 
5881
5881
  var passcode$1 = /*#__PURE__*/Object.freeze({
5882
5882
  __proto__: null,
5883
5883
  default: passcode,
5884
- vars: vars$r
5884
+ vars: vars$u
5885
5885
  });
5886
5886
 
5887
- const componentName$w = getComponentName('loader-linear');
5887
+ const componentName$z = getComponentName('loader-linear');
5888
5888
 
5889
- class RawLoaderLinear extends createBaseClass({ componentName: componentName$w, baseSelector: ':host > div' }) {
5889
+ class RawLoaderLinear extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
5890
5890
  static get componentName() {
5891
- return componentName$w;
5891
+ return componentName$z;
5892
5892
  }
5893
5893
 
5894
5894
  constructor() {
@@ -5949,107 +5949,107 @@ const LoaderLinearClass = compose(
5949
5949
  componentNameValidationMixin
5950
5950
  )(RawLoaderLinear);
5951
5951
 
5952
- const globalRefs$i = getThemeRefs(globals);
5953
- const vars$q = LoaderLinearClass.cssVarList;
5952
+ const globalRefs$l = getThemeRefs(globals);
5953
+ const vars$t = LoaderLinearClass.cssVarList;
5954
5954
 
5955
5955
  const loaderLinear = {
5956
- [vars$q.hostDisplay]: 'inline-block',
5957
- [vars$q.hostWidth]: '100%',
5956
+ [vars$t.hostDisplay]: 'inline-block',
5957
+ [vars$t.hostWidth]: '100%',
5958
5958
 
5959
- [vars$q.barColor]: globalRefs$i.colors.surface.contrast,
5960
- [vars$q.barWidth]: '20%',
5959
+ [vars$t.barColor]: globalRefs$l.colors.surface.contrast,
5960
+ [vars$t.barWidth]: '20%',
5961
5961
 
5962
- [vars$q.barBackgroundColor]: globalRefs$i.colors.surface.light,
5963
- [vars$q.barBorderRadius]: '4px',
5962
+ [vars$t.barBackgroundColor]: globalRefs$l.colors.surface.light,
5963
+ [vars$t.barBorderRadius]: '4px',
5964
5964
 
5965
- [vars$q.animationDuration]: '2s',
5966
- [vars$q.animationTimingFunction]: 'linear',
5967
- [vars$q.animationIterationCount]: 'infinite',
5968
- [vars$q.verticalPadding]: '0.25em',
5965
+ [vars$t.animationDuration]: '2s',
5966
+ [vars$t.animationTimingFunction]: 'linear',
5967
+ [vars$t.animationIterationCount]: 'infinite',
5968
+ [vars$t.verticalPadding]: '0.25em',
5969
5969
 
5970
5970
  size: {
5971
- xs: { [vars$q.barHeight]: '2px' },
5972
- sm: { [vars$q.barHeight]: '4px' },
5973
- md: { [vars$q.barHeight]: '6px' },
5974
- lg: { [vars$q.barHeight]: '8px' },
5971
+ xs: { [vars$t.barHeight]: '2px' },
5972
+ sm: { [vars$t.barHeight]: '4px' },
5973
+ md: { [vars$t.barHeight]: '6px' },
5974
+ lg: { [vars$t.barHeight]: '8px' },
5975
5975
  },
5976
5976
 
5977
5977
  mode: {
5978
5978
  primary: {
5979
- [vars$q.barColor]: globalRefs$i.colors.primary.main,
5979
+ [vars$t.barColor]: globalRefs$l.colors.primary.main,
5980
5980
  },
5981
5981
  secondary: {
5982
- [vars$q.barColor]: globalRefs$i.colors.secondary.main,
5982
+ [vars$t.barColor]: globalRefs$l.colors.secondary.main,
5983
5983
  },
5984
5984
  },
5985
5985
 
5986
5986
  _hidden: {
5987
- [vars$q.hostDisplay]: 'none',
5987
+ [vars$t.hostDisplay]: 'none',
5988
5988
  },
5989
5989
  };
5990
5990
 
5991
5991
  var loaderLinear$1 = /*#__PURE__*/Object.freeze({
5992
5992
  __proto__: null,
5993
5993
  default: loaderLinear,
5994
- vars: vars$q
5994
+ vars: vars$t
5995
5995
  });
5996
5996
 
5997
- const globalRefs$h = getThemeRefs(globals);
5998
- const compVars$2 = LoaderRadialClass.cssVarList;
5997
+ const globalRefs$k = getThemeRefs(globals);
5998
+ const compVars$3 = LoaderRadialClass.cssVarList;
5999
5999
 
6000
- const [helperTheme, helperRefs, helperVars] = createHelperVars(
6000
+ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
6001
6001
  {
6002
- spinnerColor: globalRefs$h.colors.surface.contrast,
6002
+ spinnerColor: globalRefs$k.colors.surface.contrast,
6003
6003
  mode: {
6004
6004
  primary: {
6005
- spinnerColor: globalRefs$h.colors.primary.main,
6005
+ spinnerColor: globalRefs$k.colors.primary.main,
6006
6006
  },
6007
6007
  secondary: {
6008
- spinnerColor: globalRefs$h.colors.secondary.main,
6008
+ spinnerColor: globalRefs$k.colors.secondary.main,
6009
6009
  },
6010
6010
  },
6011
6011
  },
6012
- componentName$y
6012
+ componentName$B
6013
6013
  );
6014
6014
 
6015
6015
  const loaderRadial = {
6016
- ...helperTheme,
6016
+ ...helperTheme$1,
6017
6017
 
6018
- [compVars$2.animationDuration]: '2s',
6019
- [compVars$2.animationTimingFunction]: 'linear',
6020
- [compVars$2.animationIterationCount]: 'infinite',
6021
- [compVars$2.spinnerBorderStyle]: 'solid',
6022
- [compVars$2.spinnerBorderWidth]: '0.2em',
6023
- [compVars$2.spinnerBorderRadius]: '50%',
6024
- [compVars$2.spinnerQuadrant1Color]: helperRefs.spinnerColor,
6025
- [compVars$2.spinnerQuadrant2Color]: 'transparent',
6026
- [compVars$2.spinnerQuadrant3Color]: helperRefs.spinnerColor,
6027
- [compVars$2.spinnerQuadrant4Color]: 'transparent',
6018
+ [compVars$3.animationDuration]: '2s',
6019
+ [compVars$3.animationTimingFunction]: 'linear',
6020
+ [compVars$3.animationIterationCount]: 'infinite',
6021
+ [compVars$3.spinnerBorderStyle]: 'solid',
6022
+ [compVars$3.spinnerBorderWidth]: '0.2em',
6023
+ [compVars$3.spinnerBorderRadius]: '50%',
6024
+ [compVars$3.spinnerQuadrant1Color]: helperRefs$1.spinnerColor,
6025
+ [compVars$3.spinnerQuadrant2Color]: 'transparent',
6026
+ [compVars$3.spinnerQuadrant3Color]: helperRefs$1.spinnerColor,
6027
+ [compVars$3.spinnerQuadrant4Color]: 'transparent',
6028
6028
 
6029
6029
  size: {
6030
- xs: { [compVars$2.spinnerSize]: '20px' },
6031
- sm: { [compVars$2.spinnerSize]: '30px' },
6032
- md: { [compVars$2.spinnerSize]: '40px' },
6033
- lg: { [compVars$2.spinnerSize]: '60px' },
6034
- xl: { [compVars$2.spinnerSize]: '80px' },
6030
+ xs: { [compVars$3.spinnerSize]: '20px' },
6031
+ sm: { [compVars$3.spinnerSize]: '30px' },
6032
+ md: { [compVars$3.spinnerSize]: '40px' },
6033
+ lg: { [compVars$3.spinnerSize]: '60px' },
6034
+ xl: { [compVars$3.spinnerSize]: '80px' },
6035
6035
  },
6036
6036
 
6037
6037
  _hidden: {
6038
- [compVars$2.hostDisplay]: 'none',
6038
+ [compVars$3.hostDisplay]: 'none',
6039
6039
  },
6040
6040
  };
6041
- const vars$p = {
6042
- ...compVars$2,
6043
- ...helperVars,
6041
+ const vars$s = {
6042
+ ...compVars$3,
6043
+ ...helperVars$1,
6044
6044
  };
6045
6045
 
6046
6046
  var loaderRadial$1 = /*#__PURE__*/Object.freeze({
6047
6047
  __proto__: null,
6048
6048
  default: loaderRadial,
6049
- vars: vars$p
6049
+ vars: vars$s
6050
6050
  });
6051
6051
 
6052
- const componentName$v = getComponentName('combo-box');
6052
+ const componentName$y = getComponentName('combo-box');
6053
6053
 
6054
6054
  const ComboBoxMixin = (superclass) =>
6055
6055
  class ComboBoxMixinClass extends superclass {
@@ -6488,83 +6488,83 @@ const ComboBoxClass = compose(
6488
6488
  // and reset items to an empty array, and opening the list box with no items
6489
6489
  // to display.
6490
6490
  excludeAttrsSync: ['tabindex', 'size', 'data'],
6491
- componentName: componentName$v,
6491
+ componentName: componentName$y,
6492
6492
  includeForwardProps: ['items', 'renderer', 'selectedItem'],
6493
6493
  })
6494
6494
  );
6495
6495
 
6496
- const globalRefs$g = getThemeRefs(globals);
6497
- const vars$o = ComboBoxClass.cssVarList;
6496
+ const globalRefs$j = getThemeRefs(globals);
6497
+ const vars$r = ComboBoxClass.cssVarList;
6498
6498
 
6499
6499
  const comboBox = {
6500
- [vars$o.hostWidth]: refs.width,
6501
- [vars$o.hostDirection]: refs.direction,
6502
- [vars$o.fontSize]: refs.fontSize,
6503
- [vars$o.fontFamily]: refs.fontFamily,
6504
- [vars$o.labelFontSize]: refs.labelFontSize,
6505
- [vars$o.labelFontWeight]: refs.labelFontWeight,
6506
- [vars$o.labelTextColor]: refs.labelTextColor,
6507
- [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
6508
- [vars$o.inputBorderColor]: refs.borderColor,
6509
- [vars$o.inputBorderWidth]: refs.borderWidth,
6510
- [vars$o.inputBorderStyle]: refs.borderStyle,
6511
- [vars$o.inputBorderRadius]: refs.borderRadius,
6512
- [vars$o.inputOutlineColor]: refs.outlineColor,
6513
- [vars$o.inputOutlineOffset]: refs.outlineOffset,
6514
- [vars$o.inputOutlineWidth]: refs.outlineWidth,
6515
- [vars$o.inputOutlineStyle]: refs.outlineStyle,
6516
- [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
6517
- [vars$o.inputValueTextColor]: refs.valueTextColor,
6518
- [vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
6519
- [vars$o.inputBackgroundColor]: refs.backgroundColor,
6520
- [vars$o.inputHorizontalPadding]: refs.horizontalPadding,
6521
- [vars$o.inputHeight]: refs.inputHeight,
6522
- [vars$o.inputDropdownButtonColor]: globalRefs$g.colors.surface.dark,
6523
- [vars$o.inputDropdownButtonCursor]: 'pointer',
6524
- [vars$o.inputDropdownButtonSize]: refs.toggleButtonSize,
6525
- [vars$o.inputDropdownButtonOffset]: globalRefs$g.spacing.xs,
6526
- [vars$o.overlayItemPaddingInlineStart]: globalRefs$g.spacing.xs,
6527
- [vars$o.overlayItemPaddingInlineEnd]: globalRefs$g.spacing.lg,
6528
- [vars$o.labelPosition]: refs.labelPosition,
6529
- [vars$o.labelTopPosition]: refs.labelTopPosition,
6530
- [vars$o.labelHorizontalPosition]: refs.labelHorizontalPosition,
6531
- [vars$o.inputTransformY]: refs.inputTransformY,
6532
- [vars$o.inputTransition]: refs.inputTransition,
6533
- [vars$o.marginInlineStart]: refs.marginInlineStart,
6534
- [vars$o.placeholderOpacity]: refs.placeholderOpacity,
6535
- [vars$o.inputVerticalAlignment]: refs.inputVerticalAlignment,
6536
- [vars$o.valueInputHeight]: refs.valueInputHeight,
6537
- [vars$o.valueInputMarginBottom]: refs.valueInputMarginBottom,
6500
+ [vars$r.hostWidth]: refs.width,
6501
+ [vars$r.hostDirection]: refs.direction,
6502
+ [vars$r.fontSize]: refs.fontSize,
6503
+ [vars$r.fontFamily]: refs.fontFamily,
6504
+ [vars$r.labelFontSize]: refs.labelFontSize,
6505
+ [vars$r.labelFontWeight]: refs.labelFontWeight,
6506
+ [vars$r.labelTextColor]: refs.labelTextColor,
6507
+ [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
6508
+ [vars$r.inputBorderColor]: refs.borderColor,
6509
+ [vars$r.inputBorderWidth]: refs.borderWidth,
6510
+ [vars$r.inputBorderStyle]: refs.borderStyle,
6511
+ [vars$r.inputBorderRadius]: refs.borderRadius,
6512
+ [vars$r.inputOutlineColor]: refs.outlineColor,
6513
+ [vars$r.inputOutlineOffset]: refs.outlineOffset,
6514
+ [vars$r.inputOutlineWidth]: refs.outlineWidth,
6515
+ [vars$r.inputOutlineStyle]: refs.outlineStyle,
6516
+ [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
6517
+ [vars$r.inputValueTextColor]: refs.valueTextColor,
6518
+ [vars$r.inputPlaceholderTextColor]: refs.placeholderTextColor,
6519
+ [vars$r.inputBackgroundColor]: refs.backgroundColor,
6520
+ [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
6521
+ [vars$r.inputHeight]: refs.inputHeight,
6522
+ [vars$r.inputDropdownButtonColor]: globalRefs$j.colors.surface.dark,
6523
+ [vars$r.inputDropdownButtonCursor]: 'pointer',
6524
+ [vars$r.inputDropdownButtonSize]: refs.toggleButtonSize,
6525
+ [vars$r.inputDropdownButtonOffset]: globalRefs$j.spacing.xs,
6526
+ [vars$r.overlayItemPaddingInlineStart]: globalRefs$j.spacing.xs,
6527
+ [vars$r.overlayItemPaddingInlineEnd]: globalRefs$j.spacing.lg,
6528
+ [vars$r.labelPosition]: refs.labelPosition,
6529
+ [vars$r.labelTopPosition]: refs.labelTopPosition,
6530
+ [vars$r.labelHorizontalPosition]: refs.labelHorizontalPosition,
6531
+ [vars$r.inputTransformY]: refs.inputTransformY,
6532
+ [vars$r.inputTransition]: refs.inputTransition,
6533
+ [vars$r.marginInlineStart]: refs.marginInlineStart,
6534
+ [vars$r.placeholderOpacity]: refs.placeholderOpacity,
6535
+ [vars$r.inputVerticalAlignment]: refs.inputVerticalAlignment,
6536
+ [vars$r.valueInputHeight]: refs.valueInputHeight,
6537
+ [vars$r.valueInputMarginBottom]: refs.valueInputMarginBottom,
6538
6538
 
6539
6539
  _readonly: {
6540
- [vars$o.inputDropdownButtonCursor]: 'default',
6540
+ [vars$r.inputDropdownButtonCursor]: 'default',
6541
6541
  },
6542
6542
 
6543
6543
  // Overlay theme exposed via the component:
6544
- [vars$o.overlayFontSize]: refs.fontSize,
6545
- [vars$o.overlayFontFamily]: refs.fontFamily,
6546
- [vars$o.overlayCursor]: 'pointer',
6547
- [vars$o.overlayItemBoxShadow]: 'none',
6548
- [vars$o.overlayBackground]: refs.backgroundColor,
6549
- [vars$o.overlayTextColor]: refs.valueTextColor,
6544
+ [vars$r.overlayFontSize]: refs.fontSize,
6545
+ [vars$r.overlayFontFamily]: refs.fontFamily,
6546
+ [vars$r.overlayCursor]: 'pointer',
6547
+ [vars$r.overlayItemBoxShadow]: 'none',
6548
+ [vars$r.overlayBackground]: refs.backgroundColor,
6549
+ [vars$r.overlayTextColor]: refs.valueTextColor,
6550
6550
 
6551
6551
  // Overlay direct theme:
6552
- [vars$o.overlay.minHeight]: '400px',
6553
- [vars$o.overlay.margin]: '0',
6552
+ [vars$r.overlay.minHeight]: '400px',
6553
+ [vars$r.overlay.margin]: '0',
6554
6554
  };
6555
6555
 
6556
6556
  var comboBox$1 = /*#__PURE__*/Object.freeze({
6557
6557
  __proto__: null,
6558
6558
  comboBox: comboBox,
6559
6559
  default: comboBox,
6560
- vars: vars$o
6560
+ vars: vars$r
6561
6561
  });
6562
6562
 
6563
6563
  const observedAttributes$2 = ['src', 'alt'];
6564
6564
 
6565
- const componentName$u = getComponentName('image');
6565
+ const componentName$x = getComponentName('image');
6566
6566
 
6567
- const BaseClass$1 = createBaseClass({ componentName: componentName$u, baseSelector: ':host > img' });
6567
+ const BaseClass$1 = createBaseClass({ componentName: componentName$x, baseSelector: ':host > img' });
6568
6568
  class RawImage extends BaseClass$1 {
6569
6569
  static get observedAttributes() {
6570
6570
  return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
@@ -6604,14 +6604,14 @@ const ImageClass = compose(
6604
6604
  draggableMixin
6605
6605
  )(RawImage);
6606
6606
 
6607
- const vars$n = ImageClass.cssVarList;
6607
+ const vars$q = ImageClass.cssVarList;
6608
6608
 
6609
6609
  const image = {};
6610
6610
 
6611
6611
  var image$1 = /*#__PURE__*/Object.freeze({
6612
6612
  __proto__: null,
6613
6613
  default: image,
6614
- vars: vars$n
6614
+ vars: vars$q
6615
6615
  });
6616
6616
 
6617
6617
  var CountryCodes = [
@@ -7830,16 +7830,16 @@ var CountryCodes = [
7830
7830
  ].sort((a, b) => (a.name < b.name ? -1 : 1)),
7831
7831
  ];
7832
7832
 
7833
- const componentName$t = getComponentName('phone-field-internal');
7833
+ const componentName$w = getComponentName('phone-field-internal');
7834
7834
 
7835
- createBaseInputClass({ componentName: componentName$t, baseSelector: 'div' });
7835
+ createBaseInputClass({ componentName: componentName$w, baseSelector: 'div' });
7836
7836
 
7837
7837
  const textVars$1 = TextFieldClass.cssVarList;
7838
7838
  const comboVars = ComboBoxClass.cssVarList;
7839
7839
 
7840
- const componentName$s = getComponentName('phone-field');
7840
+ const componentName$v = getComponentName('phone-field');
7841
7841
 
7842
- const customMixin$6 = (superclass) =>
7842
+ const customMixin$8 = (superclass) =>
7843
7843
  class PhoneFieldMixinClass extends superclass {
7844
7844
  static get CountryCodes() {
7845
7845
  return CountryCodes;
@@ -7851,15 +7851,15 @@ const customMixin$6 = (superclass) =>
7851
7851
  const template = document.createElement('template');
7852
7852
 
7853
7853
  template.innerHTML = `
7854
- <${componentName$t}
7854
+ <${componentName$w}
7855
7855
  tabindex="-1"
7856
7856
  slot="input"
7857
- ></${componentName$t}>
7857
+ ></${componentName$w}>
7858
7858
  `;
7859
7859
 
7860
7860
  this.baseElement.appendChild(template.content.cloneNode(true));
7861
7861
 
7862
- this.inputElement = this.shadowRoot.querySelector(componentName$t);
7862
+ this.inputElement = this.shadowRoot.querySelector(componentName$w);
7863
7863
 
7864
7864
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
7865
7865
  includeAttrs: [
@@ -7997,7 +7997,7 @@ const PhoneFieldClass = compose(
7997
7997
  }),
7998
7998
  draggableMixin,
7999
7999
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
8000
- customMixin$6
8000
+ customMixin$8
8001
8001
  )(
8002
8002
  createProxy({
8003
8003
  slots: [],
@@ -8081,36 +8081,36 @@ const PhoneFieldClass = compose(
8081
8081
  ${resetInputLabelPosition('vaadin-text-field')}
8082
8082
  `,
8083
8083
  excludeAttrsSync: ['tabindex'],
8084
- componentName: componentName$s,
8084
+ componentName: componentName$v,
8085
8085
  })
8086
8086
  );
8087
8087
 
8088
- const vars$m = PhoneFieldClass.cssVarList;
8088
+ const vars$p = PhoneFieldClass.cssVarList;
8089
8089
 
8090
8090
  const phoneField = {
8091
- [vars$m.hostWidth]: refs.width,
8092
- [vars$m.hostDirection]: refs.direction,
8093
- [vars$m.fontSize]: refs.fontSize,
8094
- [vars$m.fontFamily]: refs.fontFamily,
8095
- [vars$m.labelTextColor]: refs.labelTextColor,
8096
- [vars$m.labelRequiredIndicator]: refs.requiredIndicator,
8097
- [vars$m.errorMessageTextColor]: refs.errorMessageTextColor,
8098
- [vars$m.inputValueTextColor]: refs.valueTextColor,
8099
- [vars$m.inputPlaceholderTextColor]: refs.placeholderTextColor,
8100
- [vars$m.inputBorderStyle]: refs.borderStyle,
8101
- [vars$m.inputBorderWidth]: refs.borderWidth,
8102
- [vars$m.inputBorderColor]: refs.borderColor,
8103
- [vars$m.inputBorderRadius]: refs.borderRadius,
8104
- [vars$m.inputOutlineStyle]: refs.outlineStyle,
8105
- [vars$m.inputOutlineWidth]: refs.outlineWidth,
8106
- [vars$m.inputOutlineColor]: refs.outlineColor,
8107
- [vars$m.inputOutlineOffset]: refs.outlineOffset,
8108
- [vars$m.phoneInputWidth]: refs.minWidth,
8109
- [vars$m.countryCodeInputWidth]: '5em',
8110
- [vars$m.countryCodeDropdownWidth]: '20em',
8111
- [vars$m.marginInlineStart]: '-0.25em',
8112
- [vars$m.valueInputHeight]: refs.valueInputHeight,
8113
- [vars$m.valueInputMarginBottom]: refs.valueInputMarginBottom,
8091
+ [vars$p.hostWidth]: refs.width,
8092
+ [vars$p.hostDirection]: refs.direction,
8093
+ [vars$p.fontSize]: refs.fontSize,
8094
+ [vars$p.fontFamily]: refs.fontFamily,
8095
+ [vars$p.labelTextColor]: refs.labelTextColor,
8096
+ [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
8097
+ [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
8098
+ [vars$p.inputValueTextColor]: refs.valueTextColor,
8099
+ [vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
8100
+ [vars$p.inputBorderStyle]: refs.borderStyle,
8101
+ [vars$p.inputBorderWidth]: refs.borderWidth,
8102
+ [vars$p.inputBorderColor]: refs.borderColor,
8103
+ [vars$p.inputBorderRadius]: refs.borderRadius,
8104
+ [vars$p.inputOutlineStyle]: refs.outlineStyle,
8105
+ [vars$p.inputOutlineWidth]: refs.outlineWidth,
8106
+ [vars$p.inputOutlineColor]: refs.outlineColor,
8107
+ [vars$p.inputOutlineOffset]: refs.outlineOffset,
8108
+ [vars$p.phoneInputWidth]: refs.minWidth,
8109
+ [vars$p.countryCodeInputWidth]: '5em',
8110
+ [vars$p.countryCodeDropdownWidth]: '20em',
8111
+ [vars$p.marginInlineStart]: '-0.25em',
8112
+ [vars$p.valueInputHeight]: refs.valueInputHeight,
8113
+ [vars$p.valueInputMarginBottom]: refs.valueInputMarginBottom,
8114
8114
 
8115
8115
  // '@overlay': {
8116
8116
  // overlayItemBackgroundColor: 'red'
@@ -8120,18 +8120,18 @@ const phoneField = {
8120
8120
  var phoneField$1 = /*#__PURE__*/Object.freeze({
8121
8121
  __proto__: null,
8122
8122
  default: phoneField,
8123
- vars: vars$m
8123
+ vars: vars$p
8124
8124
  });
8125
8125
 
8126
- const componentName$r = getComponentName('phone-field-internal-input-box');
8126
+ const componentName$u = getComponentName('phone-field-internal-input-box');
8127
8127
 
8128
- createBaseInputClass({ componentName: componentName$r, baseSelector: 'div' });
8128
+ createBaseInputClass({ componentName: componentName$u, baseSelector: 'div' });
8129
8129
 
8130
8130
  const textVars = TextFieldClass.cssVarList;
8131
8131
 
8132
- const componentName$q = getComponentName('phone-input-box-field');
8132
+ const componentName$t = getComponentName('phone-input-box-field');
8133
8133
 
8134
- const customMixin$5 = (superclass) =>
8134
+ const customMixin$7 = (superclass) =>
8135
8135
  class PhoneInputBoxFieldMixinClass extends superclass {
8136
8136
  static get CountryCodes() {
8137
8137
  return CountryCodes;
@@ -8143,15 +8143,15 @@ const customMixin$5 = (superclass) =>
8143
8143
  const template = document.createElement('template');
8144
8144
 
8145
8145
  template.innerHTML = `
8146
- <${componentName$r}
8146
+ <${componentName$u}
8147
8147
  tabindex="-1"
8148
8148
  slot="input"
8149
- ></${componentName$r}>
8149
+ ></${componentName$u}>
8150
8150
  `;
8151
8151
 
8152
8152
  this.baseElement.appendChild(template.content.cloneNode(true));
8153
8153
 
8154
- this.inputElement = this.shadowRoot.querySelector(componentName$r);
8154
+ this.inputElement = this.shadowRoot.querySelector(componentName$u);
8155
8155
 
8156
8156
  forwardAttrs(this.shadowRoot.host, this.inputElement, {
8157
8157
  includeAttrs: [
@@ -8253,7 +8253,7 @@ const PhoneFieldInputBoxClass = compose(
8253
8253
  }),
8254
8254
  draggableMixin,
8255
8255
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
8256
- customMixin$5
8256
+ customMixin$7
8257
8257
  )(
8258
8258
  createProxy({
8259
8259
  slots: [],
@@ -8328,68 +8328,68 @@ const PhoneFieldInputBoxClass = compose(
8328
8328
  ${inputFloatingLabelStyle()}
8329
8329
  `,
8330
8330
  excludeAttrsSync: ['tabindex'],
8331
- componentName: componentName$q,
8331
+ componentName: componentName$t,
8332
8332
  })
8333
8333
  );
8334
8334
 
8335
- const vars$l = PhoneFieldInputBoxClass.cssVarList;
8335
+ const vars$o = PhoneFieldInputBoxClass.cssVarList;
8336
8336
 
8337
8337
  const phoneInputBoxField = {
8338
- [vars$l.hostWidth]: '16em',
8339
- [vars$l.hostMinWidth]: refs.minWidth,
8340
- [vars$l.hostDirection]: refs.direction,
8341
- [vars$l.fontSize]: refs.fontSize,
8342
- [vars$l.fontFamily]: refs.fontFamily,
8343
- [vars$l.labelFontSize]: refs.labelFontSize,
8344
- [vars$l.labelFontWeight]: refs.labelFontWeight,
8345
- [vars$l.labelTextColor]: refs.labelTextColor,
8346
- [vars$l.labelRequiredIndicator]: refs.requiredIndicator,
8347
- [vars$l.errorMessageTextColor]: refs.errorMessageTextColor,
8348
- [vars$l.inputValueTextColor]: refs.valueTextColor,
8349
- [vars$l.inputPlaceholderTextColor]: refs.placeholderTextColor,
8350
- [vars$l.inputBorderStyle]: refs.borderStyle,
8351
- [vars$l.inputBorderWidth]: refs.borderWidth,
8352
- [vars$l.inputBorderColor]: refs.borderColor,
8353
- [vars$l.inputBorderRadius]: refs.borderRadius,
8354
- [vars$l.inputOutlineStyle]: refs.outlineStyle,
8355
- [vars$l.inputOutlineWidth]: refs.outlineWidth,
8356
- [vars$l.inputOutlineColor]: refs.outlineColor,
8357
- [vars$l.inputOutlineOffset]: refs.outlineOffset,
8358
- [vars$l.labelPosition]: refs.labelPosition,
8359
- [vars$l.labelTopPosition]: refs.labelTopPosition,
8360
- [vars$l.labelHorizontalPosition]: refs.labelHorizontalPosition,
8361
- [vars$l.inputTransformY]: refs.inputTransformY,
8362
- [vars$l.inputTransition]: refs.inputTransition,
8363
- [vars$l.marginInlineStart]: refs.marginInlineStart,
8364
- [vars$l.valueInputHeight]: refs.valueInputHeight,
8365
- [vars$l.valueInputMarginBottom]: refs.valueInputMarginBottom,
8366
- [vars$l.inputHorizontalPadding]: '0',
8338
+ [vars$o.hostWidth]: '16em',
8339
+ [vars$o.hostMinWidth]: refs.minWidth,
8340
+ [vars$o.hostDirection]: refs.direction,
8341
+ [vars$o.fontSize]: refs.fontSize,
8342
+ [vars$o.fontFamily]: refs.fontFamily,
8343
+ [vars$o.labelFontSize]: refs.labelFontSize,
8344
+ [vars$o.labelFontWeight]: refs.labelFontWeight,
8345
+ [vars$o.labelTextColor]: refs.labelTextColor,
8346
+ [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
8347
+ [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
8348
+ [vars$o.inputValueTextColor]: refs.valueTextColor,
8349
+ [vars$o.inputPlaceholderTextColor]: refs.placeholderTextColor,
8350
+ [vars$o.inputBorderStyle]: refs.borderStyle,
8351
+ [vars$o.inputBorderWidth]: refs.borderWidth,
8352
+ [vars$o.inputBorderColor]: refs.borderColor,
8353
+ [vars$o.inputBorderRadius]: refs.borderRadius,
8354
+ [vars$o.inputOutlineStyle]: refs.outlineStyle,
8355
+ [vars$o.inputOutlineWidth]: refs.outlineWidth,
8356
+ [vars$o.inputOutlineColor]: refs.outlineColor,
8357
+ [vars$o.inputOutlineOffset]: refs.outlineOffset,
8358
+ [vars$o.labelPosition]: refs.labelPosition,
8359
+ [vars$o.labelTopPosition]: refs.labelTopPosition,
8360
+ [vars$o.labelHorizontalPosition]: refs.labelHorizontalPosition,
8361
+ [vars$o.inputTransformY]: refs.inputTransformY,
8362
+ [vars$o.inputTransition]: refs.inputTransition,
8363
+ [vars$o.marginInlineStart]: refs.marginInlineStart,
8364
+ [vars$o.valueInputHeight]: refs.valueInputHeight,
8365
+ [vars$o.valueInputMarginBottom]: refs.valueInputMarginBottom,
8366
+ [vars$o.inputHorizontalPadding]: '0',
8367
8367
 
8368
8368
  _fullWidth: {
8369
- [vars$l.hostWidth]: refs.width,
8369
+ [vars$o.hostWidth]: refs.width,
8370
8370
  },
8371
8371
  };
8372
8372
 
8373
8373
  var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
8374
8374
  __proto__: null,
8375
8375
  default: phoneInputBoxField,
8376
- vars: vars$l
8376
+ vars: vars$o
8377
8377
  });
8378
8378
 
8379
- const componentName$p = getComponentName('new-password-internal');
8379
+ const componentName$s = getComponentName('new-password-internal');
8380
8380
 
8381
8381
  const interpolateString = (template, values) =>
8382
8382
  template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
8383
8383
 
8384
8384
  // eslint-disable-next-line max-classes-per-file
8385
8385
 
8386
- const componentName$o = getComponentName('policy-validation');
8386
+ const componentName$r = getComponentName('policy-validation');
8387
8387
 
8388
8388
  const overrideAttrs = ['data-password-policy-value-minlength'];
8389
8389
  const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
8390
8390
  const policyAttrs = ['label', 'value', ...dataAttrs];
8391
8391
 
8392
- class RawPolicyValidation extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > div' }) {
8392
+ class RawPolicyValidation extends createBaseClass({ componentName: componentName$r, baseSelector: ':host > div' }) {
8393
8393
  #availablePolicies;
8394
8394
 
8395
8395
  #activePolicies = [];
@@ -8597,11 +8597,11 @@ const PolicyValidationClass = compose(
8597
8597
  componentNameValidationMixin
8598
8598
  )(RawPolicyValidation);
8599
8599
 
8600
- const componentName$n = getComponentName('new-password');
8600
+ const componentName$q = getComponentName('new-password');
8601
8601
 
8602
8602
  const policyPreviewVars = PolicyValidationClass.cssVarList;
8603
8603
 
8604
- const customMixin$4 = (superclass) =>
8604
+ const customMixin$6 = (superclass) =>
8605
8605
  class NewPasswordMixinClass extends superclass {
8606
8606
  init() {
8607
8607
  super.init?.();
@@ -8609,17 +8609,17 @@ const customMixin$4 = (superclass) =>
8609
8609
  const template = document.createElement('template');
8610
8610
 
8611
8611
  template.innerHTML = `
8612
- <${componentName$p}
8612
+ <${componentName$s}
8613
8613
  name="new-password"
8614
8614
  tabindex="-1"
8615
8615
  slot="input"
8616
8616
  >
8617
- </${componentName$p}>
8617
+ </${componentName$s}>
8618
8618
  `;
8619
8619
 
8620
8620
  this.baseElement.appendChild(template.content.cloneNode(true));
8621
8621
 
8622
- this.inputElement = this.shadowRoot.querySelector(componentName$p);
8622
+ this.inputElement = this.shadowRoot.querySelector(componentName$s);
8623
8623
 
8624
8624
  forwardAttrs(this, this.inputElement, {
8625
8625
  includeAttrs: [
@@ -8704,7 +8704,7 @@ const NewPasswordClass = compose(
8704
8704
  }),
8705
8705
  draggableMixin,
8706
8706
  composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
8707
- customMixin$4
8707
+ customMixin$6
8708
8708
  )(
8709
8709
  createProxy({
8710
8710
  slots: [],
@@ -8763,40 +8763,40 @@ const NewPasswordClass = compose(
8763
8763
  }
8764
8764
  `,
8765
8765
  excludeAttrsSync: ['tabindex'],
8766
- componentName: componentName$n,
8766
+ componentName: componentName$q,
8767
8767
  })
8768
8768
  );
8769
8769
 
8770
- const globalRefs$f = getThemeRefs(globals);
8771
- const vars$k = NewPasswordClass.cssVarList;
8770
+ const globalRefs$i = getThemeRefs(globals);
8771
+ const vars$n = NewPasswordClass.cssVarList;
8772
8772
 
8773
8773
  const newPassword = {
8774
- [vars$k.hostWidth]: refs.width,
8775
- [vars$k.hostMinWidth]: refs.minWidth,
8776
- [vars$k.hostDirection]: refs.direction,
8777
- [vars$k.fontSize]: refs.fontSize,
8778
- [vars$k.fontFamily]: refs.fontFamily,
8779
- [vars$k.labelFontSize]: refs.labelFontSize,
8780
- [vars$k.labelFontWeight]: refs.labelFontWeight,
8781
- [vars$k.labelTextColor]: refs.labelTextColor,
8782
- [vars$k.spaceBetweenInputs]: '1em',
8783
- [vars$k.errorMessageTextColor]: refs.errorMessageTextColor,
8784
- [vars$k.policyPreviewBackgroundColor]: 'none',
8785
- [vars$k.policyPreviewPadding]: globalRefs$f.spacing.lg,
8786
- [vars$k.valueInputHeight]: refs.valueInputHeight,
8774
+ [vars$n.hostWidth]: refs.width,
8775
+ [vars$n.hostMinWidth]: refs.minWidth,
8776
+ [vars$n.hostDirection]: refs.direction,
8777
+ [vars$n.fontSize]: refs.fontSize,
8778
+ [vars$n.fontFamily]: refs.fontFamily,
8779
+ [vars$n.labelFontSize]: refs.labelFontSize,
8780
+ [vars$n.labelFontWeight]: refs.labelFontWeight,
8781
+ [vars$n.labelTextColor]: refs.labelTextColor,
8782
+ [vars$n.spaceBetweenInputs]: '1em',
8783
+ [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
8784
+ [vars$n.policyPreviewBackgroundColor]: 'none',
8785
+ [vars$n.policyPreviewPadding]: globalRefs$i.spacing.lg,
8786
+ [vars$n.valueInputHeight]: refs.valueInputHeight,
8787
8787
 
8788
8788
  _required: {
8789
8789
  // NewPassword doesn't pass `required` attribute to its Password components.
8790
8790
  // That's why we fake the required indicator on each input.
8791
8791
  // We do that by injecting `::after` element, and populating it with requiredIndicator content.
8792
- [vars$k.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
8792
+ [vars$n.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
8793
8793
  },
8794
8794
  };
8795
8795
 
8796
8796
  var newPassword$1 = /*#__PURE__*/Object.freeze({
8797
8797
  __proto__: null,
8798
8798
  default: newPassword,
8799
- vars: vars$k
8799
+ vars: vars$n
8800
8800
  });
8801
8801
 
8802
8802
  const getFileBase64 = (fileObj) => {
@@ -8811,7 +8811,7 @@ const getFilename = (fileObj) => {
8811
8811
  return fileObj.name.replace(/^.*\\/, '');
8812
8812
  };
8813
8813
 
8814
- const componentName$m = getComponentName('upload-file');
8814
+ const componentName$p = getComponentName('upload-file');
8815
8815
 
8816
8816
  const observedAttributes$1 = [
8817
8817
  'title',
@@ -8826,7 +8826,7 @@ const observedAttributes$1 = [
8826
8826
  'icon',
8827
8827
  ];
8828
8828
 
8829
- const BaseInputClass = createBaseInputClass({ componentName: componentName$m, baseSelector: ':host > div' });
8829
+ const BaseInputClass = createBaseInputClass({ componentName: componentName$p, baseSelector: ':host > div' });
8830
8830
 
8831
8831
  class RawUploadFile extends BaseInputClass {
8832
8832
  static get observedAttributes() {
@@ -9041,77 +9041,77 @@ const UploadFileClass = compose(
9041
9041
  componentNameValidationMixin
9042
9042
  )(RawUploadFile);
9043
9043
 
9044
- const vars$j = UploadFileClass.cssVarList;
9044
+ const vars$m = UploadFileClass.cssVarList;
9045
9045
 
9046
9046
  const uploadFile = {
9047
- [vars$j.hostDirection]: refs.direction,
9048
- [vars$j.labelTextColor]: refs.labelTextColor,
9049
- [vars$j.fontFamily]: refs.fontFamily,
9047
+ [vars$m.hostDirection]: refs.direction,
9048
+ [vars$m.labelTextColor]: refs.labelTextColor,
9049
+ [vars$m.fontFamily]: refs.fontFamily,
9050
9050
 
9051
- [vars$j.iconSize]: '2em',
9051
+ [vars$m.iconSize]: '2em',
9052
9052
 
9053
- [vars$j.hostPadding]: '0.75em',
9054
- [vars$j.gap]: '0.5em',
9053
+ [vars$m.hostPadding]: '0.75em',
9054
+ [vars$m.gap]: '0.5em',
9055
9055
 
9056
- [vars$j.fontSize]: '16px',
9057
- [vars$j.titleFontWeight]: '500',
9058
- [vars$j.lineHeight]: '1em',
9056
+ [vars$m.fontSize]: '16px',
9057
+ [vars$m.titleFontWeight]: '500',
9058
+ [vars$m.lineHeight]: '1em',
9059
9059
 
9060
- [vars$j.borderWidth]: refs.borderWidth,
9061
- [vars$j.borderColor]: refs.borderColor,
9062
- [vars$j.borderRadius]: refs.borderRadius,
9063
- [vars$j.borderStyle]: 'dashed',
9060
+ [vars$m.borderWidth]: refs.borderWidth,
9061
+ [vars$m.borderColor]: refs.borderColor,
9062
+ [vars$m.borderRadius]: refs.borderRadius,
9063
+ [vars$m.borderStyle]: 'dashed',
9064
9064
 
9065
9065
  _required: {
9066
- [vars$j.requiredIndicator]: refs.requiredIndicator,
9066
+ [vars$m.requiredIndicator]: refs.requiredIndicator,
9067
9067
  },
9068
9068
 
9069
9069
  size: {
9070
9070
  xs: {
9071
- [vars$j.hostHeight]: '196px',
9072
- [vars$j.hostWidth]: '200px',
9073
- [vars$j.titleFontSize]: '0.875em',
9074
- [vars$j.descriptionFontSize]: '0.875em',
9075
- [vars$j.lineHeight]: '1.25em',
9071
+ [vars$m.hostHeight]: '196px',
9072
+ [vars$m.hostWidth]: '200px',
9073
+ [vars$m.titleFontSize]: '0.875em',
9074
+ [vars$m.descriptionFontSize]: '0.875em',
9075
+ [vars$m.lineHeight]: '1.25em',
9076
9076
  },
9077
9077
  sm: {
9078
- [vars$j.hostHeight]: '216px',
9079
- [vars$j.hostWidth]: '230px',
9080
- [vars$j.titleFontSize]: '1em',
9081
- [vars$j.descriptionFontSize]: '0.875em',
9082
- [vars$j.lineHeight]: '1.25em',
9078
+ [vars$m.hostHeight]: '216px',
9079
+ [vars$m.hostWidth]: '230px',
9080
+ [vars$m.titleFontSize]: '1em',
9081
+ [vars$m.descriptionFontSize]: '0.875em',
9082
+ [vars$m.lineHeight]: '1.25em',
9083
9083
  },
9084
9084
  md: {
9085
- [vars$j.hostHeight]: '256px',
9086
- [vars$j.hostWidth]: '312px',
9087
- [vars$j.titleFontSize]: '1.125em',
9088
- [vars$j.descriptionFontSize]: '1em',
9089
- [vars$j.lineHeight]: '1.5em',
9085
+ [vars$m.hostHeight]: '256px',
9086
+ [vars$m.hostWidth]: '312px',
9087
+ [vars$m.titleFontSize]: '1.125em',
9088
+ [vars$m.descriptionFontSize]: '1em',
9089
+ [vars$m.lineHeight]: '1.5em',
9090
9090
  },
9091
9091
  lg: {
9092
- [vars$j.hostHeight]: '280px',
9093
- [vars$j.hostWidth]: '336px',
9094
- [vars$j.titleFontSize]: '1.125em',
9095
- [vars$j.descriptionFontSize]: '1.125em',
9096
- [vars$j.lineHeight]: '1.75em',
9092
+ [vars$m.hostHeight]: '280px',
9093
+ [vars$m.hostWidth]: '336px',
9094
+ [vars$m.titleFontSize]: '1.125em',
9095
+ [vars$m.descriptionFontSize]: '1.125em',
9096
+ [vars$m.lineHeight]: '1.75em',
9097
9097
  },
9098
9098
  },
9099
9099
 
9100
9100
  _fullWidth: {
9101
- [vars$j.hostWidth]: refs.width,
9101
+ [vars$m.hostWidth]: refs.width,
9102
9102
  },
9103
9103
  };
9104
9104
 
9105
9105
  var uploadFile$1 = /*#__PURE__*/Object.freeze({
9106
9106
  __proto__: null,
9107
9107
  default: uploadFile,
9108
- vars: vars$j
9108
+ vars: vars$m
9109
9109
  });
9110
9110
 
9111
- const componentName$l = getComponentName('button-selection-group-item');
9111
+ const componentName$o = getComponentName('button-selection-group-item');
9112
9112
 
9113
9113
  class RawSelectItem extends createBaseClass({
9114
- componentName: componentName$l,
9114
+ componentName: componentName$o,
9115
9115
  baseSelector: ':host > descope-button',
9116
9116
  }) {
9117
9117
  get size() {
@@ -9218,39 +9218,39 @@ const ButtonSelectionGroupItemClass = compose(
9218
9218
  componentNameValidationMixin
9219
9219
  )(RawSelectItem);
9220
9220
 
9221
- const globalRefs$e = getThemeRefs(globals);
9221
+ const globalRefs$h = getThemeRefs(globals);
9222
9222
 
9223
- const vars$i = ButtonSelectionGroupItemClass.cssVarList;
9223
+ const vars$l = ButtonSelectionGroupItemClass.cssVarList;
9224
9224
 
9225
9225
  const buttonSelectionGroupItem = {
9226
- [vars$i.hostDirection]: 'inherit',
9227
- [vars$i.backgroundColor]: globalRefs$e.colors.surface.main,
9228
- [vars$i.labelTextColor]: globalRefs$e.colors.surface.contrast,
9229
- [vars$i.borderColor]: globalRefs$e.colors.surface.light,
9230
- [vars$i.borderStyle]: 'solid',
9231
- [vars$i.borderRadius]: globalRefs$e.radius.sm,
9232
- [vars$i.outlineColor]: 'transparent',
9233
- [vars$i.borderWidth]: globalRefs$e.border.xs,
9226
+ [vars$l.hostDirection]: 'inherit',
9227
+ [vars$l.backgroundColor]: globalRefs$h.colors.surface.main,
9228
+ [vars$l.labelTextColor]: globalRefs$h.colors.surface.contrast,
9229
+ [vars$l.borderColor]: globalRefs$h.colors.surface.light,
9230
+ [vars$l.borderStyle]: 'solid',
9231
+ [vars$l.borderRadius]: globalRefs$h.radius.sm,
9232
+ [vars$l.outlineColor]: 'transparent',
9233
+ [vars$l.borderWidth]: globalRefs$h.border.xs,
9234
9234
 
9235
9235
  _hover: {
9236
- [vars$i.backgroundColor]: globalRefs$e.colors.surface.highlight,
9236
+ [vars$l.backgroundColor]: globalRefs$h.colors.surface.highlight,
9237
9237
  },
9238
9238
 
9239
9239
  _focused: {
9240
- [vars$i.outlineColor]: globalRefs$e.colors.surface.light,
9240
+ [vars$l.outlineColor]: globalRefs$h.colors.surface.light,
9241
9241
  },
9242
9242
 
9243
9243
  _selected: {
9244
- [vars$i.borderColor]: globalRefs$e.colors.surface.contrast,
9245
- [vars$i.backgroundColor]: globalRefs$e.colors.surface.contrast,
9246
- [vars$i.labelTextColor]: globalRefs$e.colors.surface.main,
9244
+ [vars$l.borderColor]: globalRefs$h.colors.surface.contrast,
9245
+ [vars$l.backgroundColor]: globalRefs$h.colors.surface.contrast,
9246
+ [vars$l.labelTextColor]: globalRefs$h.colors.surface.main,
9247
9247
  },
9248
9248
  };
9249
9249
 
9250
9250
  var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
9251
9251
  __proto__: null,
9252
9252
  default: buttonSelectionGroupItem,
9253
- vars: vars$i
9253
+ vars: vars$l
9254
9254
  });
9255
9255
 
9256
9256
  const createBaseButtonSelectionGroupInternalClass = (componentName) => {
@@ -9349,10 +9349,10 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
9349
9349
  return BaseButtonSelectionGroupInternalClass;
9350
9350
  };
9351
9351
 
9352
- const componentName$k = getComponentName('button-selection-group-internal');
9352
+ const componentName$n = getComponentName('button-selection-group-internal');
9353
9353
 
9354
9354
  class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
9355
- componentName$k
9355
+ componentName$n
9356
9356
  ) {
9357
9357
  getSelectedNode() {
9358
9358
  return this.items.find((item) => item.hasAttribute('selected'));
@@ -9584,7 +9584,7 @@ const buttonSelectionGroupStyles = `
9584
9584
  ${resetInputCursor('vaadin-text-field')}
9585
9585
  `;
9586
9586
 
9587
- const componentName$j = getComponentName('button-selection-group');
9587
+ const componentName$m = getComponentName('button-selection-group');
9588
9588
 
9589
9589
  const buttonSelectionGroupMixin = (superclass) =>
9590
9590
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -9593,19 +9593,19 @@ const buttonSelectionGroupMixin = (superclass) =>
9593
9593
  const template = document.createElement('template');
9594
9594
 
9595
9595
  template.innerHTML = `
9596
- <${componentName$k}
9596
+ <${componentName$n}
9597
9597
  name="button-selection-group"
9598
9598
  slot="input"
9599
9599
  tabindex="-1"
9600
9600
  part="internal-component"
9601
9601
  >
9602
9602
  <slot></slot>
9603
- </${componentName$k}>
9603
+ </${componentName$n}>
9604
9604
  `;
9605
9605
 
9606
9606
  this.baseElement.appendChild(template.content.cloneNode(true));
9607
9607
 
9608
- this.inputElement = this.shadowRoot.querySelector(componentName$k);
9608
+ this.inputElement = this.shadowRoot.querySelector(componentName$n);
9609
9609
 
9610
9610
  forwardAttrs(this, this.inputElement, {
9611
9611
  includeAttrs: ['size', 'default-value', 'allow-deselect'],
@@ -9630,11 +9630,11 @@ const ButtonSelectionGroupClass = compose(
9630
9630
  wrappedEleName: 'vaadin-text-field',
9631
9631
  style: () => buttonSelectionGroupStyles,
9632
9632
  excludeAttrsSync: ['tabindex'],
9633
- componentName: componentName$j,
9633
+ componentName: componentName$m,
9634
9634
  })
9635
9635
  );
9636
9636
 
9637
- const globalRefs$d = getThemeRefs(globals);
9637
+ const globalRefs$g = getThemeRefs(globals);
9638
9638
 
9639
9639
  const createBaseButtonSelectionGroupMappings = (vars) => ({
9640
9640
  [vars.hostDirection]: refs.direction,
@@ -9642,26 +9642,26 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
9642
9642
  [vars.labelTextColor]: refs.labelTextColor,
9643
9643
  [vars.labelRequiredIndicator]: refs.requiredIndicator,
9644
9644
  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
9645
- [vars.itemsSpacing]: globalRefs$d.spacing.sm,
9645
+ [vars.itemsSpacing]: globalRefs$g.spacing.sm,
9646
9646
  [vars.hostWidth]: refs.width,
9647
9647
  });
9648
9648
 
9649
- const vars$h = ButtonSelectionGroupClass.cssVarList;
9649
+ const vars$k = ButtonSelectionGroupClass.cssVarList;
9650
9650
 
9651
9651
  const buttonSelectionGroup = {
9652
- ...createBaseButtonSelectionGroupMappings(vars$h),
9652
+ ...createBaseButtonSelectionGroupMappings(vars$k),
9653
9653
  };
9654
9654
 
9655
9655
  var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
9656
9656
  __proto__: null,
9657
9657
  default: buttonSelectionGroup,
9658
- vars: vars$h
9658
+ vars: vars$k
9659
9659
  });
9660
9660
 
9661
- const componentName$i = getComponentName('button-multi-selection-group-internal');
9661
+ const componentName$l = getComponentName('button-multi-selection-group-internal');
9662
9662
 
9663
9663
  class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
9664
- componentName$i
9664
+ componentName$l
9665
9665
  ) {
9666
9666
  #getSelectedNodes() {
9667
9667
  return this.items.filter((item) => item.hasAttribute('selected'));
@@ -9764,7 +9764,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
9764
9764
  }
9765
9765
  }
9766
9766
 
9767
- const componentName$h = getComponentName('button-multi-selection-group');
9767
+ const componentName$k = getComponentName('button-multi-selection-group');
9768
9768
 
9769
9769
  const buttonMultiSelectionGroupMixin = (superclass) =>
9770
9770
  class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -9773,19 +9773,19 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
9773
9773
  const template = document.createElement('template');
9774
9774
 
9775
9775
  template.innerHTML = `
9776
- <${componentName$i}
9776
+ <${componentName$l}
9777
9777
  name="button-selection-group"
9778
9778
  slot="input"
9779
9779
  tabindex="-1"
9780
9780
  part="internal-component"
9781
9781
  >
9782
9782
  <slot></slot>
9783
- </${componentName$i}>
9783
+ </${componentName$l}>
9784
9784
  `;
9785
9785
 
9786
9786
  this.baseElement.appendChild(template.content.cloneNode(true));
9787
9787
 
9788
- this.inputElement = this.shadowRoot.querySelector(componentName$i);
9788
+ this.inputElement = this.shadowRoot.querySelector(componentName$l);
9789
9789
 
9790
9790
  forwardAttrs(this, this.inputElement, {
9791
9791
  includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
@@ -9810,25 +9810,25 @@ const ButtonMultiSelectionGroupClass = compose(
9810
9810
  wrappedEleName: 'vaadin-text-field',
9811
9811
  style: () => buttonSelectionGroupStyles,
9812
9812
  excludeAttrsSync: ['tabindex'],
9813
- componentName: componentName$h,
9813
+ componentName: componentName$k,
9814
9814
  })
9815
9815
  );
9816
9816
 
9817
- const vars$g = ButtonMultiSelectionGroupClass.cssVarList;
9817
+ const vars$j = ButtonMultiSelectionGroupClass.cssVarList;
9818
9818
 
9819
9819
  const buttonMultiSelectionGroup = {
9820
- ...createBaseButtonSelectionGroupMappings(vars$g),
9820
+ ...createBaseButtonSelectionGroupMappings(vars$j),
9821
9821
  };
9822
9822
 
9823
9823
  var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
9824
9824
  __proto__: null,
9825
9825
  default: buttonMultiSelectionGroup,
9826
- vars: vars$g
9826
+ vars: vars$j
9827
9827
  });
9828
9828
 
9829
- const componentName$g = getComponentName('modal');
9829
+ const componentName$j = getComponentName('modal');
9830
9830
 
9831
- const customMixin$3 = (superclass) =>
9831
+ const customMixin$5 = (superclass) =>
9832
9832
  class ModalMixinClass extends superclass {
9833
9833
  get opened() {
9834
9834
  return this.getAttribute('opened') === 'true';
@@ -9918,35 +9918,35 @@ const ModalClass = compose(
9918
9918
  }),
9919
9919
  draggableMixin,
9920
9920
  componentNameValidationMixin,
9921
- customMixin$3
9921
+ customMixin$5
9922
9922
  )(
9923
9923
  createProxy({
9924
9924
  slots: [''],
9925
9925
  wrappedEleName: 'vaadin-dialog',
9926
9926
  style: () => ``,
9927
9927
  excludeAttrsSync: ['tabindex', 'opened'],
9928
- componentName: componentName$g,
9928
+ componentName: componentName$j,
9929
9929
  })
9930
9930
  );
9931
9931
 
9932
- const globalRefs$c = getThemeRefs(globals);
9932
+ const globalRefs$f = getThemeRefs(globals);
9933
9933
 
9934
- const compVars$1 = ModalClass.cssVarList;
9934
+ const compVars$2 = ModalClass.cssVarList;
9935
9935
 
9936
9936
  const modal = {
9937
- [compVars$1.overlayBackgroundColor]: globalRefs$c.colors.surface.main,
9938
- [compVars$1.overlayShadow]: globalRefs$c.shadow.wide['2xl'],
9939
- [compVars$1.overlayWidth]: '540px',
9937
+ [compVars$2.overlayBackgroundColor]: globalRefs$f.colors.surface.main,
9938
+ [compVars$2.overlayShadow]: globalRefs$f.shadow.wide['2xl'],
9939
+ [compVars$2.overlayWidth]: '540px',
9940
9940
  };
9941
9941
 
9942
- const vars$f = {
9943
- ...compVars$1,
9942
+ const vars$i = {
9943
+ ...compVars$2,
9944
9944
  };
9945
9945
 
9946
9946
  var modal$1 = /*#__PURE__*/Object.freeze({
9947
9947
  __proto__: null,
9948
9948
  default: modal,
9949
- vars: vars$f
9949
+ vars: vars$i
9950
9950
  });
9951
9951
 
9952
9952
  const isValidDataType = (data) => {
@@ -10022,7 +10022,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
10022
10022
  `;
10023
10023
  };
10024
10024
 
10025
- const componentName$f = getComponentName('grid');
10025
+ const componentName$i = getComponentName('grid');
10026
10026
 
10027
10027
  const GridMixin = (superclass) =>
10028
10028
  class GridMixinClass extends superclass {
@@ -10376,52 +10376,52 @@ const GridClass = compose(
10376
10376
  /*!css*/
10377
10377
  `,
10378
10378
  excludeAttrsSync: ['columns', 'tabindex'],
10379
- componentName: componentName$f,
10379
+ componentName: componentName$i,
10380
10380
  })
10381
10381
  );
10382
10382
 
10383
- const globalRefs$b = getThemeRefs(globals);
10384
- const vars$e = GridClass.cssVarList;
10383
+ const globalRefs$e = getThemeRefs(globals);
10384
+ const vars$h = GridClass.cssVarList;
10385
10385
 
10386
10386
  const grid = {
10387
- [vars$e.hostWidth]: '100%',
10388
- [vars$e.hostHeight]: '100%',
10389
- [vars$e.hostMinHeight]: '400px',
10390
- [vars$e.fontWeight]: '400',
10391
- [vars$e.backgroundColor]: globalRefs$b.colors.surface.main,
10392
-
10393
- [vars$e.fontSize]: refs.fontSize,
10394
- [vars$e.fontFamily]: refs.fontFamily,
10395
-
10396
- [vars$e.sortIndicatorsColor]: globalRefs$b.colors.surface.light,
10397
- [vars$e.activeSortIndicator]: globalRefs$b.colors.surface.dark,
10398
- [vars$e.resizeHandleColor]: globalRefs$b.colors.surface.light,
10399
-
10400
- [vars$e.borderWidth]: refs.borderWidth,
10401
- [vars$e.borderStyle]: refs.borderStyle,
10402
- [vars$e.borderRadius]: refs.borderRadius,
10403
- [vars$e.borderColor]: 'transparent',
10404
-
10405
- [vars$e.headerRowTextColor]: globalRefs$b.colors.surface.dark,
10406
- [vars$e.separatorColor]: globalRefs$b.colors.surface.light,
10407
-
10408
- [vars$e.valueTextColor]: globalRefs$b.colors.surface.contrast,
10409
- [vars$e.selectedBackgroundColor]: globalRefs$b.colors.surface.highlight,
10410
- [vars$e.hostDirection]: globalRefs$b.direction,
10411
-
10412
- [vars$e.toggleDetailsPanelButtonSize]: '1em',
10413
- [vars$e.toggleDetailsPanelButtonOpenedColor]: globalRefs$b.colors.surface.contrast,
10414
- [vars$e.toggleDetailsPanelButtonClosedColor]: globalRefs$b.colors.surface.light,
10415
- [vars$e.toggleDetailsPanelButtonCursor]: 'pointer',
10416
- [vars$e.detailsPanelBackgroundColor]: globalRefs$b.colors.surface.highlight,
10417
- [vars$e.detailsPanelBorderTopColor]: globalRefs$b.colors.surface.light,
10418
- [vars$e.detailsPanelLabelsColor]: globalRefs$b.colors.surface.dark,
10419
- [vars$e.detailsPanelLabelsFontSize]: '0.8em',
10420
- [vars$e.detailsPanelItemsGap]: '2em',
10421
- [vars$e.detailsPanelPadding]: '12px 0',
10387
+ [vars$h.hostWidth]: '100%',
10388
+ [vars$h.hostHeight]: '100%',
10389
+ [vars$h.hostMinHeight]: '400px',
10390
+ [vars$h.fontWeight]: '400',
10391
+ [vars$h.backgroundColor]: globalRefs$e.colors.surface.main,
10392
+
10393
+ [vars$h.fontSize]: refs.fontSize,
10394
+ [vars$h.fontFamily]: refs.fontFamily,
10395
+
10396
+ [vars$h.sortIndicatorsColor]: globalRefs$e.colors.surface.light,
10397
+ [vars$h.activeSortIndicator]: globalRefs$e.colors.surface.dark,
10398
+ [vars$h.resizeHandleColor]: globalRefs$e.colors.surface.light,
10399
+
10400
+ [vars$h.borderWidth]: refs.borderWidth,
10401
+ [vars$h.borderStyle]: refs.borderStyle,
10402
+ [vars$h.borderRadius]: refs.borderRadius,
10403
+ [vars$h.borderColor]: 'transparent',
10404
+
10405
+ [vars$h.headerRowTextColor]: globalRefs$e.colors.surface.dark,
10406
+ [vars$h.separatorColor]: globalRefs$e.colors.surface.light,
10407
+
10408
+ [vars$h.valueTextColor]: globalRefs$e.colors.surface.contrast,
10409
+ [vars$h.selectedBackgroundColor]: globalRefs$e.colors.surface.highlight,
10410
+ [vars$h.hostDirection]: globalRefs$e.direction,
10411
+
10412
+ [vars$h.toggleDetailsPanelButtonSize]: '1em',
10413
+ [vars$h.toggleDetailsPanelButtonOpenedColor]: globalRefs$e.colors.surface.contrast,
10414
+ [vars$h.toggleDetailsPanelButtonClosedColor]: globalRefs$e.colors.surface.light,
10415
+ [vars$h.toggleDetailsPanelButtonCursor]: 'pointer',
10416
+ [vars$h.detailsPanelBackgroundColor]: globalRefs$e.colors.surface.highlight,
10417
+ [vars$h.detailsPanelBorderTopColor]: globalRefs$e.colors.surface.light,
10418
+ [vars$h.detailsPanelLabelsColor]: globalRefs$e.colors.surface.dark,
10419
+ [vars$h.detailsPanelLabelsFontSize]: '0.8em',
10420
+ [vars$h.detailsPanelItemsGap]: '2em',
10421
+ [vars$h.detailsPanelPadding]: '12px 0',
10422
10422
 
10423
10423
  _bordered: {
10424
- [vars$e.borderColor]: refs.borderColor,
10424
+ [vars$h.borderColor]: refs.borderColor,
10425
10425
  },
10426
10426
  };
10427
10427
 
@@ -10429,10 +10429,10 @@ var grid$1 = /*#__PURE__*/Object.freeze({
10429
10429
  __proto__: null,
10430
10430
  default: grid,
10431
10431
  grid: grid,
10432
- vars: vars$e
10432
+ vars: vars$h
10433
10433
  });
10434
10434
 
10435
- const componentName$e = getComponentName('notification-card');
10435
+ const componentName$h = getComponentName('notification-card');
10436
10436
 
10437
10437
  const notificationCardMixin = (superclass) =>
10438
10438
  class NotificationCardMixinClass extends superclass {
@@ -10540,54 +10540,54 @@ const NotificationCardClass = compose(
10540
10540
  }
10541
10541
  `,
10542
10542
  excludeAttrsSync: ['tabindex'],
10543
- componentName: componentName$e,
10543
+ componentName: componentName$h,
10544
10544
  })
10545
10545
  );
10546
10546
 
10547
- const globalRefs$a = getThemeRefs(globals);
10548
- const vars$d = NotificationCardClass.cssVarList;
10547
+ const globalRefs$d = getThemeRefs(globals);
10548
+ const vars$g = NotificationCardClass.cssVarList;
10549
10549
 
10550
- const shadowColor = '#00000020';
10550
+ const shadowColor$1 = '#00000020';
10551
10551
 
10552
10552
  const notification = {
10553
- [vars$d.hostMinWidth]: '415px',
10554
- [vars$d.fontFamily]: globalRefs$a.fonts.font1.family,
10555
- [vars$d.fontSize]: globalRefs$a.typography.body1.size,
10556
- [vars$d.backgroundColor]: globalRefs$a.colors.surface.main,
10557
- [vars$d.textColor]: globalRefs$a.colors.surface.contrast,
10558
- [vars$d.boxShadow]: `${globalRefs$a.shadow.wide.xl} ${shadowColor}, ${globalRefs$a.shadow.narrow.xl} ${shadowColor}`,
10559
- [vars$d.verticalPadding]: '0.625em',
10560
- [vars$d.horizontalPadding]: '1.5em',
10561
- [vars$d.borderRadius]: globalRefs$a.radius.xs,
10553
+ [vars$g.hostMinWidth]: '415px',
10554
+ [vars$g.fontFamily]: globalRefs$d.fonts.font1.family,
10555
+ [vars$g.fontSize]: globalRefs$d.typography.body1.size,
10556
+ [vars$g.backgroundColor]: globalRefs$d.colors.surface.main,
10557
+ [vars$g.textColor]: globalRefs$d.colors.surface.contrast,
10558
+ [vars$g.boxShadow]: `${globalRefs$d.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.xl} ${shadowColor$1}`,
10559
+ [vars$g.verticalPadding]: '0.625em',
10560
+ [vars$g.horizontalPadding]: '1.5em',
10561
+ [vars$g.borderRadius]: globalRefs$d.radius.xs,
10562
10562
 
10563
10563
  _bordered: {
10564
- [vars$d.borderWidth]: globalRefs$a.border.sm,
10565
- [vars$d.borderStyle]: 'solid',
10566
- [vars$d.borderColor]: 'transparent',
10564
+ [vars$g.borderWidth]: globalRefs$d.border.sm,
10565
+ [vars$g.borderStyle]: 'solid',
10566
+ [vars$g.borderColor]: 'transparent',
10567
10567
  },
10568
10568
 
10569
10569
  size: {
10570
- xs: { [vars$d.fontSize]: '12px' },
10571
- sm: { [vars$d.fontSize]: '14px' },
10572
- md: { [vars$d.fontSize]: '16px' },
10573
- lg: { [vars$d.fontSize]: '18px' },
10570
+ xs: { [vars$g.fontSize]: '12px' },
10571
+ sm: { [vars$g.fontSize]: '14px' },
10572
+ md: { [vars$g.fontSize]: '16px' },
10573
+ lg: { [vars$g.fontSize]: '18px' },
10574
10574
  },
10575
10575
 
10576
10576
  mode: {
10577
10577
  primary: {
10578
- [vars$d.backgroundColor]: globalRefs$a.colors.primary.main,
10579
- [vars$d.textColor]: globalRefs$a.colors.primary.contrast,
10580
- [vars$d.borderColor]: globalRefs$a.colors.primary.light,
10578
+ [vars$g.backgroundColor]: globalRefs$d.colors.primary.main,
10579
+ [vars$g.textColor]: globalRefs$d.colors.primary.contrast,
10580
+ [vars$g.borderColor]: globalRefs$d.colors.primary.light,
10581
10581
  },
10582
10582
  success: {
10583
- [vars$d.backgroundColor]: globalRefs$a.colors.success.main,
10584
- [vars$d.textColor]: globalRefs$a.colors.success.contrast,
10585
- [vars$d.borderColor]: globalRefs$a.colors.success.light,
10583
+ [vars$g.backgroundColor]: globalRefs$d.colors.success.main,
10584
+ [vars$g.textColor]: globalRefs$d.colors.success.contrast,
10585
+ [vars$g.borderColor]: globalRefs$d.colors.success.light,
10586
10586
  },
10587
10587
  error: {
10588
- [vars$d.backgroundColor]: globalRefs$a.colors.error.main,
10589
- [vars$d.textColor]: globalRefs$a.colors.error.contrast,
10590
- [vars$d.borderColor]: globalRefs$a.colors.error.light,
10588
+ [vars$g.backgroundColor]: globalRefs$d.colors.error.main,
10589
+ [vars$g.textColor]: globalRefs$d.colors.error.contrast,
10590
+ [vars$g.borderColor]: globalRefs$d.colors.error.light,
10591
10591
  },
10592
10592
  },
10593
10593
  };
@@ -10595,10 +10595,10 @@ const notification = {
10595
10595
  var notificationCard = /*#__PURE__*/Object.freeze({
10596
10596
  __proto__: null,
10597
10597
  default: notification,
10598
- vars: vars$d
10598
+ vars: vars$g
10599
10599
  });
10600
10600
 
10601
- const componentName$d = getComponentName('multi-select-combo-box');
10601
+ const componentName$g = getComponentName('multi-select-combo-box');
10602
10602
 
10603
10603
  const multiSelectComboBoxMixin = (superclass) =>
10604
10604
  class MultiSelectComboBoxMixinClass extends superclass {
@@ -11232,93 +11232,93 @@ const MultiSelectComboBoxClass = compose(
11232
11232
  // Note: we exclude `placeholder` because the vaadin component observes it and
11233
11233
  // tries to override it, causing us to lose the user set placeholder.
11234
11234
  excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
11235
- componentName: componentName$d,
11235
+ componentName: componentName$g,
11236
11236
  includeForwardProps: ['items', 'renderer', 'selectedItems'],
11237
11237
  })
11238
11238
  );
11239
11239
 
11240
- const globalRefs$9 = getThemeRefs(globals);
11241
- const vars$c = MultiSelectComboBoxClass.cssVarList;
11240
+ const globalRefs$c = getThemeRefs(globals);
11241
+ const vars$f = MultiSelectComboBoxClass.cssVarList;
11242
11242
 
11243
11243
  const multiSelectComboBox = {
11244
- [vars$c.hostWidth]: refs.width,
11245
- [vars$c.hostDirection]: refs.direction,
11246
- [vars$c.fontSize]: refs.fontSize,
11247
- [vars$c.fontFamily]: refs.fontFamily,
11248
- [vars$c.labelFontSize]: refs.labelFontSize,
11249
- [vars$c.labelFontWeight]: refs.labelFontWeight,
11250
- [vars$c.labelTextColor]: refs.labelTextColor,
11251
- [vars$c.errorMessageTextColor]: refs.errorMessageTextColor,
11252
- [vars$c.inputBorderColor]: refs.borderColor,
11253
- [vars$c.inputBorderWidth]: refs.borderWidth,
11254
- [vars$c.inputBorderStyle]: refs.borderStyle,
11255
- [vars$c.inputBorderRadius]: refs.borderRadius,
11256
- [vars$c.inputOutlineColor]: refs.outlineColor,
11257
- [vars$c.inputOutlineOffset]: refs.outlineOffset,
11258
- [vars$c.inputOutlineWidth]: refs.outlineWidth,
11259
- [vars$c.inputOutlineStyle]: refs.outlineStyle,
11260
- [vars$c.labelRequiredIndicator]: refs.requiredIndicator,
11261
- [vars$c.inputValueTextColor]: refs.valueTextColor,
11262
- [vars$c.inputPlaceholderTextColor]: refs.placeholderTextColor,
11263
- [vars$c.inputBackgroundColor]: refs.backgroundColor,
11264
- [vars$c.inputHorizontalPadding]: refs.horizontalPadding,
11265
- [vars$c.inputVerticalPadding]: refs.verticalPadding,
11266
- [vars$c.inputHeight]: refs.inputHeight,
11267
- [vars$c.inputDropdownButtonColor]: globalRefs$9.colors.surface.dark,
11268
- [vars$c.inputDropdownButtonCursor]: 'pointer',
11269
- [vars$c.inputDropdownButtonSize]: refs.toggleButtonSize,
11270
- [vars$c.inputDropdownButtonOffset]: globalRefs$9.spacing.xs,
11271
- [vars$c.overlayItemPaddingInlineStart]: globalRefs$9.spacing.xs,
11272
- [vars$c.overlayItemPaddingInlineEnd]: globalRefs$9.spacing.lg,
11273
- [vars$c.chipFontSize]: refs.chipFontSize,
11274
- [vars$c.chipTextColor]: globalRefs$9.colors.surface.contrast,
11275
- [vars$c.chipBackgroundColor]: globalRefs$9.colors.surface.light,
11276
- [vars$c.labelPosition]: refs.labelPosition,
11277
- [vars$c.labelTopPosition]: refs.labelTopPosition,
11278
- [vars$c.labelLeftPosition]: refs.labelLeftPosition,
11279
- [vars$c.labelHorizontalPosition]: refs.labelHorizontalPosition,
11280
- [vars$c.inputTransformY]: refs.inputTransformY,
11281
- [vars$c.inputTransition]: refs.inputTransition,
11282
- [vars$c.marginInlineStart]: refs.marginInlineStart,
11283
- [vars$c.placeholderOpacity]: refs.placeholderOpacity,
11284
- [vars$c.inputVerticalAlignment]: refs.inputVerticalAlignment,
11244
+ [vars$f.hostWidth]: refs.width,
11245
+ [vars$f.hostDirection]: refs.direction,
11246
+ [vars$f.fontSize]: refs.fontSize,
11247
+ [vars$f.fontFamily]: refs.fontFamily,
11248
+ [vars$f.labelFontSize]: refs.labelFontSize,
11249
+ [vars$f.labelFontWeight]: refs.labelFontWeight,
11250
+ [vars$f.labelTextColor]: refs.labelTextColor,
11251
+ [vars$f.errorMessageTextColor]: refs.errorMessageTextColor,
11252
+ [vars$f.inputBorderColor]: refs.borderColor,
11253
+ [vars$f.inputBorderWidth]: refs.borderWidth,
11254
+ [vars$f.inputBorderStyle]: refs.borderStyle,
11255
+ [vars$f.inputBorderRadius]: refs.borderRadius,
11256
+ [vars$f.inputOutlineColor]: refs.outlineColor,
11257
+ [vars$f.inputOutlineOffset]: refs.outlineOffset,
11258
+ [vars$f.inputOutlineWidth]: refs.outlineWidth,
11259
+ [vars$f.inputOutlineStyle]: refs.outlineStyle,
11260
+ [vars$f.labelRequiredIndicator]: refs.requiredIndicator,
11261
+ [vars$f.inputValueTextColor]: refs.valueTextColor,
11262
+ [vars$f.inputPlaceholderTextColor]: refs.placeholderTextColor,
11263
+ [vars$f.inputBackgroundColor]: refs.backgroundColor,
11264
+ [vars$f.inputHorizontalPadding]: refs.horizontalPadding,
11265
+ [vars$f.inputVerticalPadding]: refs.verticalPadding,
11266
+ [vars$f.inputHeight]: refs.inputHeight,
11267
+ [vars$f.inputDropdownButtonColor]: globalRefs$c.colors.surface.dark,
11268
+ [vars$f.inputDropdownButtonCursor]: 'pointer',
11269
+ [vars$f.inputDropdownButtonSize]: refs.toggleButtonSize,
11270
+ [vars$f.inputDropdownButtonOffset]: globalRefs$c.spacing.xs,
11271
+ [vars$f.overlayItemPaddingInlineStart]: globalRefs$c.spacing.xs,
11272
+ [vars$f.overlayItemPaddingInlineEnd]: globalRefs$c.spacing.lg,
11273
+ [vars$f.chipFontSize]: refs.chipFontSize,
11274
+ [vars$f.chipTextColor]: globalRefs$c.colors.surface.contrast,
11275
+ [vars$f.chipBackgroundColor]: globalRefs$c.colors.surface.light,
11276
+ [vars$f.labelPosition]: refs.labelPosition,
11277
+ [vars$f.labelTopPosition]: refs.labelTopPosition,
11278
+ [vars$f.labelLeftPosition]: refs.labelLeftPosition,
11279
+ [vars$f.labelHorizontalPosition]: refs.labelHorizontalPosition,
11280
+ [vars$f.inputTransformY]: refs.inputTransformY,
11281
+ [vars$f.inputTransition]: refs.inputTransition,
11282
+ [vars$f.marginInlineStart]: refs.marginInlineStart,
11283
+ [vars$f.placeholderOpacity]: refs.placeholderOpacity,
11284
+ [vars$f.inputVerticalAlignment]: refs.inputVerticalAlignment,
11285
11285
 
11286
11286
  labelType: {
11287
11287
  floating: {
11288
- [vars$c.inputHorizontalPadding]: '0.25em',
11288
+ [vars$f.inputHorizontalPadding]: '0.25em',
11289
11289
  _hasValue: {
11290
- [vars$c.inputHorizontalPadding]: '0.45em',
11290
+ [vars$f.inputHorizontalPadding]: '0.45em',
11291
11291
  },
11292
11292
  },
11293
11293
  },
11294
11294
 
11295
11295
  _readonly: {
11296
- [vars$c.inputDropdownButtonCursor]: 'default',
11296
+ [vars$f.inputDropdownButtonCursor]: 'default',
11297
11297
  },
11298
11298
 
11299
11299
  // Overlay theme exposed via the component:
11300
- [vars$c.overlayFontSize]: refs.fontSize,
11301
- [vars$c.overlayFontFamily]: refs.fontFamily,
11302
- [vars$c.overlayCursor]: 'pointer',
11303
- [vars$c.overlayItemBoxShadow]: 'none',
11304
- [vars$c.overlayBackground]: refs.backgroundColor,
11305
- [vars$c.overlayTextColor]: refs.valueTextColor,
11300
+ [vars$f.overlayFontSize]: refs.fontSize,
11301
+ [vars$f.overlayFontFamily]: refs.fontFamily,
11302
+ [vars$f.overlayCursor]: 'pointer',
11303
+ [vars$f.overlayItemBoxShadow]: 'none',
11304
+ [vars$f.overlayBackground]: refs.backgroundColor,
11305
+ [vars$f.overlayTextColor]: refs.valueTextColor,
11306
11306
 
11307
11307
  // Overlay direct theme:
11308
- [vars$c.overlay.minHeight]: '400px',
11309
- [vars$c.overlay.margin]: '0',
11308
+ [vars$f.overlay.minHeight]: '400px',
11309
+ [vars$f.overlay.margin]: '0',
11310
11310
  };
11311
11311
 
11312
11312
  var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
11313
11313
  __proto__: null,
11314
11314
  default: multiSelectComboBox,
11315
11315
  multiSelectComboBox: multiSelectComboBox,
11316
- vars: vars$c
11316
+ vars: vars$f
11317
11317
  });
11318
11318
 
11319
- const componentName$c = getComponentName('badge');
11319
+ const componentName$f = getComponentName('badge');
11320
11320
 
11321
- class RawBadge extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
11321
+ class RawBadge extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
11322
11322
  constructor() {
11323
11323
  super();
11324
11324
 
@@ -11369,66 +11369,66 @@ const BadgeClass = compose(
11369
11369
  componentNameValidationMixin
11370
11370
  )(RawBadge);
11371
11371
 
11372
- const globalRefs$8 = getThemeRefs(globals);
11373
- const vars$b = BadgeClass.cssVarList;
11372
+ const globalRefs$b = getThemeRefs(globals);
11373
+ const vars$e = BadgeClass.cssVarList;
11374
11374
 
11375
11375
  const badge$2 = {
11376
- [vars$b.hostWidth]: 'fit-content',
11377
- [vars$b.hostDirection]: globalRefs$8.direction,
11376
+ [vars$e.hostWidth]: 'fit-content',
11377
+ [vars$e.hostDirection]: globalRefs$b.direction,
11378
11378
 
11379
- [vars$b.textAlign]: 'center',
11379
+ [vars$e.textAlign]: 'center',
11380
11380
 
11381
- [vars$b.fontFamily]: globalRefs$8.fonts.font1.family,
11382
- [vars$b.fontWeight]: '400',
11381
+ [vars$e.fontFamily]: globalRefs$b.fonts.font1.family,
11382
+ [vars$e.fontWeight]: '400',
11383
11383
 
11384
- [vars$b.verticalPadding]: '0.25em',
11385
- [vars$b.horizontalPadding]: '0.5em',
11384
+ [vars$e.verticalPadding]: '0.25em',
11385
+ [vars$e.horizontalPadding]: '0.5em',
11386
11386
 
11387
- [vars$b.borderWidth]: globalRefs$8.border.xs,
11388
- [vars$b.borderRadius]: globalRefs$8.radius.xs,
11389
- [vars$b.borderColor]: 'transparent',
11390
- [vars$b.borderStyle]: 'solid',
11387
+ [vars$e.borderWidth]: globalRefs$b.border.xs,
11388
+ [vars$e.borderRadius]: globalRefs$b.radius.xs,
11389
+ [vars$e.borderColor]: 'transparent',
11390
+ [vars$e.borderStyle]: 'solid',
11391
11391
 
11392
11392
  _fullWidth: {
11393
- [vars$b.hostWidth]: '100%',
11393
+ [vars$e.hostWidth]: '100%',
11394
11394
  },
11395
11395
 
11396
11396
  size: {
11397
- xs: { [vars$b.fontSize]: '12px' },
11398
- sm: { [vars$b.fontSize]: '14px' },
11399
- md: { [vars$b.fontSize]: '16px' },
11400
- lg: { [vars$b.fontSize]: '18px' },
11397
+ xs: { [vars$e.fontSize]: '12px' },
11398
+ sm: { [vars$e.fontSize]: '14px' },
11399
+ md: { [vars$e.fontSize]: '16px' },
11400
+ lg: { [vars$e.fontSize]: '18px' },
11401
11401
  },
11402
11402
 
11403
11403
  mode: {
11404
11404
  default: {
11405
- [vars$b.textColor]: globalRefs$8.colors.surface.dark,
11405
+ [vars$e.textColor]: globalRefs$b.colors.surface.dark,
11406
11406
  _bordered: {
11407
- [vars$b.borderColor]: globalRefs$8.colors.surface.light,
11407
+ [vars$e.borderColor]: globalRefs$b.colors.surface.light,
11408
11408
  },
11409
11409
  },
11410
11410
  primary: {
11411
- [vars$b.textColor]: globalRefs$8.colors.primary.main,
11411
+ [vars$e.textColor]: globalRefs$b.colors.primary.main,
11412
11412
  _bordered: {
11413
- [vars$b.borderColor]: globalRefs$8.colors.primary.light,
11413
+ [vars$e.borderColor]: globalRefs$b.colors.primary.light,
11414
11414
  },
11415
11415
  },
11416
11416
  secondary: {
11417
- [vars$b.textColor]: globalRefs$8.colors.secondary.main,
11417
+ [vars$e.textColor]: globalRefs$b.colors.secondary.main,
11418
11418
  _bordered: {
11419
- [vars$b.borderColor]: globalRefs$8.colors.secondary.light,
11419
+ [vars$e.borderColor]: globalRefs$b.colors.secondary.light,
11420
11420
  },
11421
11421
  },
11422
11422
  error: {
11423
- [vars$b.textColor]: globalRefs$8.colors.error.main,
11423
+ [vars$e.textColor]: globalRefs$b.colors.error.main,
11424
11424
  _bordered: {
11425
- [vars$b.borderColor]: globalRefs$8.colors.error.light,
11425
+ [vars$e.borderColor]: globalRefs$b.colors.error.light,
11426
11426
  },
11427
11427
  },
11428
11428
  success: {
11429
- [vars$b.textColor]: globalRefs$8.colors.success.main,
11429
+ [vars$e.textColor]: globalRefs$b.colors.success.main,
11430
11430
  _bordered: {
11431
- [vars$b.borderColor]: globalRefs$8.colors.success.light,
11431
+ [vars$e.borderColor]: globalRefs$b.colors.success.light,
11432
11432
  },
11433
11433
  },
11434
11434
  },
@@ -11437,11 +11437,11 @@ const badge$2 = {
11437
11437
  var badge$3 = /*#__PURE__*/Object.freeze({
11438
11438
  __proto__: null,
11439
11439
  default: badge$2,
11440
- vars: vars$b
11440
+ vars: vars$e
11441
11441
  });
11442
11442
 
11443
- const componentName$b = getComponentName('avatar');
11444
- class RawAvatar extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > .wrapper' }) {
11443
+ const componentName$e = getComponentName('avatar');
11444
+ class RawAvatar extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > .wrapper' }) {
11445
11445
  constructor() {
11446
11446
  super();
11447
11447
 
@@ -11498,7 +11498,7 @@ class RawAvatar extends createBaseClass({ componentName: componentName$b, baseSe
11498
11498
  this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
11499
11499
 
11500
11500
  forwardAttrs(this, this.avatarComponent, {
11501
- includeAttrs: ['display-name', 'img'],
11501
+ includeAttrs: ['display-name', 'img', 'abbr'],
11502
11502
  mapAttrs: { 'display-name': 'name' },
11503
11503
  });
11504
11504
 
@@ -11527,7 +11527,10 @@ const { host: host$4, editableBadge, avatar: avatar$2 } = {
11527
11527
  const AvatarClass = compose(
11528
11528
  createStyleMixin({
11529
11529
  mappings: {
11530
- hostWidth: { ...host$4, property: 'width' },
11530
+ hostWidth: [
11531
+ { ...host$4, property: 'width' },
11532
+ { ...host$4, property: 'min-width' },
11533
+ ],
11531
11534
  hostHeight: { ...host$4, property: 'height' },
11532
11535
  cursor: [avatar$2, host$4],
11533
11536
  hostDirection: { ...host$4, property: 'direction' },
@@ -11542,58 +11545,58 @@ const AvatarClass = compose(
11542
11545
  componentNameValidationMixin
11543
11546
  )(RawAvatar);
11544
11547
 
11545
- const globalRefs$7 = getThemeRefs(globals);
11546
- const compVars = AvatarClass.cssVarList;
11548
+ const globalRefs$a = getThemeRefs(globals);
11549
+ const compVars$1 = AvatarClass.cssVarList;
11547
11550
 
11548
11551
  const avatar = {
11549
- [compVars.hostDirection]: globalRefs$7.direction,
11550
- [compVars.editableIconColor]: globalRefs$7.colors.surface.dark,
11551
- [compVars.editableBorderColor]: globalRefs$7.colors.surface.dark,
11552
- [compVars.editableBackgroundColor]: globalRefs$7.colors.surface.main,
11553
- [compVars.avatarTextColor]: globalRefs$7.colors.surface.main,
11554
- [compVars.avatarBackgroundColor]: globalRefs$7.colors.surface.dark,
11552
+ [compVars$1.hostDirection]: globalRefs$a.direction,
11553
+ [compVars$1.editableIconColor]: globalRefs$a.colors.surface.dark,
11554
+ [compVars$1.editableBorderColor]: globalRefs$a.colors.surface.dark,
11555
+ [compVars$1.editableBackgroundColor]: globalRefs$a.colors.surface.main,
11556
+ [compVars$1.avatarTextColor]: globalRefs$a.colors.surface.main,
11557
+ [compVars$1.avatarBackgroundColor]: globalRefs$a.colors.surface.dark,
11555
11558
 
11556
11559
  _editable: {
11557
- [compVars.cursor]: 'pointer',
11560
+ [compVars$1.cursor]: 'pointer',
11558
11561
  },
11559
11562
 
11560
11563
  size: {
11561
11564
  xs: {
11562
- [compVars.hostWidth]: '30px',
11563
- [compVars.hostHeight]: '30px',
11565
+ [compVars$1.hostWidth]: '30px',
11566
+ [compVars$1.hostHeight]: '30px',
11564
11567
  },
11565
11568
  sm: {
11566
- [compVars.hostWidth]: '40px',
11567
- [compVars.hostHeight]: '40px',
11569
+ [compVars$1.hostWidth]: '40px',
11570
+ [compVars$1.hostHeight]: '40px',
11568
11571
  },
11569
11572
  md: {
11570
- [compVars.hostWidth]: '60px',
11571
- [compVars.hostHeight]: '60px',
11573
+ [compVars$1.hostWidth]: '60px',
11574
+ [compVars$1.hostHeight]: '60px',
11572
11575
  },
11573
11576
  lg: {
11574
- [compVars.hostWidth]: '98px',
11575
- [compVars.hostHeight]: '98px',
11577
+ [compVars$1.hostWidth]: '98px',
11578
+ [compVars$1.hostHeight]: '98px',
11576
11579
  },
11577
11580
  },
11578
11581
  };
11579
11582
 
11580
- const vars$a = {
11581
- ...compVars,
11583
+ const vars$d = {
11584
+ ...compVars$1,
11582
11585
  };
11583
11586
 
11584
11587
  var avatar$1 = /*#__PURE__*/Object.freeze({
11585
11588
  __proto__: null,
11586
11589
  default: avatar,
11587
- vars: vars$a
11590
+ vars: vars$d
11588
11591
  });
11589
11592
 
11590
- const componentName$a = getComponentName('mappings-field-internal');
11593
+ const componentName$d = getComponentName('mappings-field-internal');
11591
11594
 
11592
- createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
11595
+ createBaseInputClass({ componentName: componentName$d, baseSelector: 'div' });
11593
11596
 
11594
- const componentName$9 = getComponentName('mappings-field');
11597
+ const componentName$c = getComponentName('mappings-field');
11595
11598
 
11596
- const customMixin$2 = (superclass) =>
11599
+ const customMixin$4 = (superclass) =>
11597
11600
  class MappingsFieldMixinClass extends superclass {
11598
11601
  get defaultValues() {
11599
11602
  const defaultValuesAttr = this.getAttribute('default-values');
@@ -11620,14 +11623,14 @@ const customMixin$2 = (superclass) =>
11620
11623
  const template = document.createElement('template');
11621
11624
 
11622
11625
  template.innerHTML = `
11623
- <${componentName$a}
11626
+ <${componentName$d}
11624
11627
  tabindex="-1"
11625
- ></${componentName$a}>
11628
+ ></${componentName$d}>
11626
11629
  `;
11627
11630
 
11628
11631
  this.baseElement.appendChild(template.content.cloneNode(true));
11629
11632
 
11630
- this.inputElement = this.shadowRoot.querySelector(componentName$a);
11633
+ this.inputElement = this.shadowRoot.querySelector(componentName$d);
11631
11634
 
11632
11635
  forwardAttrs(this, this.inputElement, {
11633
11636
  includeAttrs: [
@@ -11709,7 +11712,7 @@ const MappingsFieldClass = compose(
11709
11712
  proxyParentValidation: true,
11710
11713
  }),
11711
11714
  componentNameValidationMixin,
11712
- customMixin$2
11715
+ customMixin$4
11713
11716
  )(
11714
11717
  createProxy({
11715
11718
  slots: [],
@@ -11756,47 +11759,47 @@ const MappingsFieldClass = compose(
11756
11759
  'options',
11757
11760
  'error-message',
11758
11761
  ],
11759
- componentName: componentName$9,
11762
+ componentName: componentName$c,
11760
11763
  })
11761
11764
  );
11762
11765
 
11763
- const globalRefs$6 = getThemeRefs(globals);
11766
+ const globalRefs$9 = getThemeRefs(globals);
11764
11767
 
11765
- const vars$9 = MappingsFieldClass.cssVarList;
11768
+ const vars$c = MappingsFieldClass.cssVarList;
11766
11769
 
11767
11770
  const mappingsField = {
11768
- [vars$9.hostWidth]: refs.width,
11769
- [vars$9.hostDirection]: refs.direction,
11770
- [vars$9.fontSize]: refs.fontSize,
11771
- [vars$9.fontFamily]: refs.fontFamily,
11772
- [vars$9.separatorFontSize]: '14px',
11773
- [vars$9.labelsFontSize]: '14px',
11774
- [vars$9.labelsLineHeight]: '1',
11775
- [vars$9.labelsMarginBottom]: '6px',
11776
- [vars$9.labelTextColor]: refs.labelTextColor,
11777
- [vars$9.itemMarginBottom]: '1em',
11771
+ [vars$c.hostWidth]: refs.width,
11772
+ [vars$c.hostDirection]: refs.direction,
11773
+ [vars$c.fontSize]: refs.fontSize,
11774
+ [vars$c.fontFamily]: refs.fontFamily,
11775
+ [vars$c.separatorFontSize]: '14px',
11776
+ [vars$c.labelsFontSize]: '14px',
11777
+ [vars$c.labelsLineHeight]: '1',
11778
+ [vars$c.labelsMarginBottom]: '6px',
11779
+ [vars$c.labelTextColor]: refs.labelTextColor,
11780
+ [vars$c.itemMarginBottom]: '1em',
11778
11781
  // To be positioned correctly, the min width has to match the text field min width
11779
- [vars$9.valueLabelMinWidth]: refs.minWidth,
11782
+ [vars$c.valueLabelMinWidth]: refs.minWidth,
11780
11783
  // To be positioned correctly, the min width has to match the combo box field min width
11781
- [vars$9.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$6.border.xs})`,
11782
- [vars$9.separatorWidth]: '70px',
11783
- [vars$9.removeButtonWidth]: '60px',
11784
+ [vars$c.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs$9.border.xs})`,
11785
+ [vars$c.separatorWidth]: '70px',
11786
+ [vars$c.removeButtonWidth]: '60px',
11784
11787
  };
11785
11788
 
11786
11789
  var mappingsField$1 = /*#__PURE__*/Object.freeze({
11787
11790
  __proto__: null,
11788
11791
  default: mappingsField,
11789
11792
  mappingsField: mappingsField,
11790
- vars: vars$9
11793
+ vars: vars$c
11791
11794
  });
11792
11795
 
11793
11796
  var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
11794
11797
 
11795
11798
  var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
11796
11799
 
11797
- const componentName$8 = getComponentName('user-attribute');
11800
+ const componentName$b = getComponentName('user-attribute');
11798
11801
  class RawUserAttribute extends createBaseClass({
11799
- componentName: componentName$8,
11802
+ componentName: componentName$b,
11800
11803
  baseSelector: ':host > .root',
11801
11804
  }) {
11802
11805
  constructor() {
@@ -12026,32 +12029,32 @@ const UserAttributeClass = compose(
12026
12029
  componentNameValidationMixin
12027
12030
  )(RawUserAttribute);
12028
12031
 
12029
- const globalRefs$5 = getThemeRefs(globals);
12030
- const vars$8 = UserAttributeClass.cssVarList;
12032
+ const globalRefs$8 = getThemeRefs(globals);
12033
+ const vars$b = UserAttributeClass.cssVarList;
12031
12034
 
12032
12035
  const userAttribute = {
12033
- [vars$8.hostDirection]: globalRefs$5.direction,
12034
- [vars$8.labelTextWidth]: '150px',
12035
- [vars$8.valueTextWidth]: '200px',
12036
- [vars$8.badgeMaxWidth]: '85px',
12037
- [vars$8.itemsGap]: '16px',
12038
- [vars$8.hostMinWidth]: '530px',
12036
+ [vars$b.hostDirection]: globalRefs$8.direction,
12037
+ [vars$b.labelTextWidth]: '150px',
12038
+ [vars$b.valueTextWidth]: '200px',
12039
+ [vars$b.badgeMaxWidth]: '85px',
12040
+ [vars$b.itemsGap]: '16px',
12041
+ [vars$b.hostMinWidth]: '530px',
12039
12042
  _fullWidth: {
12040
- [vars$8.hostWidth]: '100%',
12043
+ [vars$b.hostWidth]: '100%',
12041
12044
  },
12042
12045
  };
12043
12046
 
12044
12047
  var userAttribute$1 = /*#__PURE__*/Object.freeze({
12045
12048
  __proto__: null,
12046
12049
  default: userAttribute,
12047
- vars: vars$8
12050
+ vars: vars$b
12048
12051
  });
12049
12052
 
12050
12053
  var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
12051
12054
 
12052
- const componentName$7 = getComponentName('user-auth-method');
12055
+ const componentName$a = getComponentName('user-auth-method');
12053
12056
  class RawUserAuthMethod extends createBaseClass({
12054
- componentName: componentName$7,
12057
+ componentName: componentName$a,
12055
12058
  baseSelector: ':host > .root',
12056
12059
  }) {
12057
12060
  constructor() {
@@ -12243,33 +12246,33 @@ const UserAuthMethodClass = compose(
12243
12246
  componentNameValidationMixin
12244
12247
  )(RawUserAuthMethod);
12245
12248
 
12246
- const globalRefs$4 = getThemeRefs(globals);
12247
- const vars$7 = UserAuthMethodClass.cssVarList;
12249
+ const globalRefs$7 = getThemeRefs(globals);
12250
+ const vars$a = UserAuthMethodClass.cssVarList;
12248
12251
 
12249
12252
  const userAuthMethod = {
12250
- [vars$7.hostDirection]: globalRefs$4.direction,
12251
- [vars$7.labelTextWidth]: '200px',
12252
- [vars$7.itemsGap]: '16px',
12253
- [vars$7.hostMinWidth]: '530px',
12254
- [vars$7.iconSize]: '24px',
12253
+ [vars$a.hostDirection]: globalRefs$7.direction,
12254
+ [vars$a.labelTextWidth]: '200px',
12255
+ [vars$a.itemsGap]: '16px',
12256
+ [vars$a.hostMinWidth]: '530px',
12257
+ [vars$a.iconSize]: '24px',
12255
12258
  _fullWidth: {
12256
- [vars$7.hostWidth]: '100%',
12259
+ [vars$a.hostWidth]: '100%',
12257
12260
  },
12258
12261
  };
12259
12262
 
12260
12263
  var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
12261
12264
  __proto__: null,
12262
12265
  default: userAuthMethod,
12263
- vars: vars$7
12266
+ vars: vars$a
12264
12267
  });
12265
12268
 
12266
- const componentName$6 = getComponentName('saml-group-mappings-internal');
12269
+ const componentName$9 = getComponentName('saml-group-mappings-internal');
12267
12270
 
12268
- createBaseInputClass({ componentName: componentName$6, baseSelector: '' });
12271
+ createBaseInputClass({ componentName: componentName$9, baseSelector: '' });
12269
12272
 
12270
- const componentName$5 = getComponentName('saml-group-mappings');
12273
+ const componentName$8 = getComponentName('saml-group-mappings');
12271
12274
 
12272
- const customMixin$1 = (superclass) =>
12275
+ const customMixin$3 = (superclass) =>
12273
12276
  class SamlGroupMappingsMixinClass extends superclass {
12274
12277
  init() {
12275
12278
  super.init?.();
@@ -12277,14 +12280,14 @@ const customMixin$1 = (superclass) =>
12277
12280
  const template = document.createElement('template');
12278
12281
 
12279
12282
  template.innerHTML = `
12280
- <${componentName$6}
12283
+ <${componentName$9}
12281
12284
  tabindex="-1"
12282
- ></${componentName$6}>
12285
+ ></${componentName$9}>
12283
12286
  `;
12284
12287
 
12285
12288
  this.baseElement.appendChild(template.content.cloneNode(true));
12286
12289
 
12287
- this.inputElement = this.shadowRoot.querySelector(componentName$6);
12290
+ this.inputElement = this.shadowRoot.querySelector(componentName$9);
12288
12291
 
12289
12292
  forwardAttrs(this, this.inputElement, {
12290
12293
  includeAttrs: [
@@ -12326,7 +12329,7 @@ const SamlGroupMappingsClass = compose(
12326
12329
  proxyParentValidation: true,
12327
12330
  }),
12328
12331
  componentNameValidationMixin,
12329
- customMixin$1
12332
+ customMixin$3
12330
12333
  )(
12331
12334
  createProxy({
12332
12335
  slots: [],
@@ -12361,61 +12364,61 @@ const SamlGroupMappingsClass = compose(
12361
12364
  'options',
12362
12365
  'error-message',
12363
12366
  ],
12364
- componentName: componentName$5,
12367
+ componentName: componentName$8,
12365
12368
  })
12366
12369
  );
12367
12370
 
12368
- const vars$6 = SamlGroupMappingsClass.cssVarList;
12371
+ const vars$9 = SamlGroupMappingsClass.cssVarList;
12369
12372
 
12370
12373
  const samlGroupMappings = {
12371
- [vars$6.hostWidth]: refs.width,
12372
- [vars$6.hostDirection]: refs.direction,
12373
- [vars$6.groupNameInputMarginBottom]: '1em',
12374
+ [vars$9.hostWidth]: refs.width,
12375
+ [vars$9.hostDirection]: refs.direction,
12376
+ [vars$9.groupNameInputMarginBottom]: '1em',
12374
12377
  };
12375
12378
 
12376
12379
  var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
12377
12380
  __proto__: null,
12378
12381
  default: samlGroupMappings,
12379
12382
  samlGroupMappings: samlGroupMappings,
12380
- vars: vars$6
12383
+ vars: vars$9
12381
12384
  });
12382
12385
 
12383
- const globalRefs$3 = getThemeRefs(globals);
12384
- const vars$5 = PolicyValidationClass.cssVarList;
12386
+ const globalRefs$6 = getThemeRefs(globals);
12387
+ const vars$8 = PolicyValidationClass.cssVarList;
12385
12388
 
12386
12389
  const policyValidation = {
12387
- [vars$5.fontFamily]: refs.fontFamily,
12388
- [vars$5.fontSize]: refs.labelFontSize,
12389
- [vars$5.textColor]: refs.labelTextColor,
12390
- [vars$5.borderWidth]: refs.borderWidth,
12391
- [vars$5.borderStyle]: refs.borderStyle,
12392
- [vars$5.borderColor]: refs.borderColor,
12393
- [vars$5.borderRadius]: globalRefs$3.radius.sm,
12394
- [vars$5.backgroundColor]: 'none',
12395
- [vars$5.padding]: '0px',
12396
- [vars$5.labelMargin]: globalRefs$3.spacing.sm,
12397
- [vars$5.itemsSpacing]: globalRefs$3.spacing.lg,
12398
- [vars$5.itemSymbolDefault]: "'\\2022'", // "•"
12399
- [vars$5.itemSymbolSuccess]: "'\\2713'", // "✓"
12400
- [vars$5.itemSymbolError]: "'\\2A09'", // "⨉"
12401
- [vars$5.itemSymbolSuccessColor]: globalRefs$3.colors.success.main,
12402
- [vars$5.itemSymbolErrorColor]: globalRefs$3.colors.error.main,
12390
+ [vars$8.fontFamily]: refs.fontFamily,
12391
+ [vars$8.fontSize]: refs.labelFontSize,
12392
+ [vars$8.textColor]: refs.labelTextColor,
12393
+ [vars$8.borderWidth]: refs.borderWidth,
12394
+ [vars$8.borderStyle]: refs.borderStyle,
12395
+ [vars$8.borderColor]: refs.borderColor,
12396
+ [vars$8.borderRadius]: globalRefs$6.radius.sm,
12397
+ [vars$8.backgroundColor]: 'none',
12398
+ [vars$8.padding]: '0px',
12399
+ [vars$8.labelMargin]: globalRefs$6.spacing.sm,
12400
+ [vars$8.itemsSpacing]: globalRefs$6.spacing.lg,
12401
+ [vars$8.itemSymbolDefault]: "'\\2022'", // "•"
12402
+ [vars$8.itemSymbolSuccess]: "'\\2713'", // "✓"
12403
+ [vars$8.itemSymbolError]: "'\\2A09'", // "⨉"
12404
+ [vars$8.itemSymbolSuccessColor]: globalRefs$6.colors.success.main,
12405
+ [vars$8.itemSymbolErrorColor]: globalRefs$6.colors.error.main,
12403
12406
  };
12404
12407
 
12405
12408
  var policyValidation$1 = /*#__PURE__*/Object.freeze({
12406
12409
  __proto__: null,
12407
12410
  default: policyValidation,
12408
- vars: vars$5
12411
+ vars: vars$8
12409
12412
  });
12410
12413
 
12411
- const vars$4 = IconClass.cssVarList;
12414
+ const vars$7 = IconClass.cssVarList;
12412
12415
 
12413
12416
  const icon = {};
12414
12417
 
12415
12418
  var icon$1 = /*#__PURE__*/Object.freeze({
12416
12419
  __proto__: null,
12417
12420
  default: icon,
12418
- vars: vars$4
12421
+ vars: vars$7
12419
12422
  });
12420
12423
 
12421
12424
  const decode = (input) => {
@@ -12428,9 +12431,9 @@ const tpl = (input, inline) => {
12428
12431
  return inline ? input : `<pre>${input}</pre>`;
12429
12432
  };
12430
12433
 
12431
- const componentName$4 = getComponentName('code-snippet');
12434
+ const componentName$7 = getComponentName('code-snippet');
12432
12435
 
12433
- let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > code' }) {
12436
+ let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > code' }) {
12434
12437
  static get observedAttributes() {
12435
12438
  return ['lang', 'inline'];
12436
12439
  }
@@ -12660,9 +12663,9 @@ const CodeSnippetClass = compose(
12660
12663
  componentNameValidationMixin
12661
12664
  )(CodeSnippet$1);
12662
12665
 
12663
- const globalRefs$2 = getThemeRefs(globals);
12666
+ const globalRefs$5 = getThemeRefs(globals);
12664
12667
 
12665
- const vars$3 = CodeSnippetClass.cssVarList;
12668
+ const vars$6 = CodeSnippetClass.cssVarList;
12666
12669
 
12667
12670
  const light = {
12668
12671
  color1: '#fa0',
@@ -12697,50 +12700,50 @@ const dark = {
12697
12700
  };
12698
12701
 
12699
12702
  const CodeSnippet = {
12700
- [vars$3.rootBgColor]: globalRefs$2.colors.surface.main,
12701
- [vars$3.rootTextColor]: globalRefs$2.colors.surface.contrast,
12702
- [vars$3.docTagTextColor]: light.color2,
12703
- [vars$3.keywordTextColor]: light.color2,
12704
- [vars$3.metaKeywordTextColor]: light.color2,
12705
- [vars$3.templateTagTextColor]: light.color2,
12706
- [vars$3.templateVariableTextColor]: light.color2,
12707
- [vars$3.typeTextColor]: light.color2,
12708
- [vars$3.variableLanguageTextColor]: light.color2,
12709
- [vars$3.titleTextColor]: light.color3,
12710
- [vars$3.titleClassTextColor]: light.color3,
12711
- [vars$3.titleClassInheritedTextColor]: light.color3,
12712
- [vars$3.titleFunctionTextColor]: light.color3,
12713
- [vars$3.attrTextColor]: light.color4,
12714
- [vars$3.attributeTextColor]: light.color4,
12715
- [vars$3.literalTextColor]: light.color4,
12716
- [vars$3.metaTextColor]: light.color4,
12717
- [vars$3.numberTextColor]: light.color4,
12718
- [vars$3.operatorTextColor]: light.color4,
12719
- [vars$3.variableTextColor]: light.color4,
12720
- [vars$3.selectorAttrTextColor]: light.color4,
12721
- [vars$3.selectorClassTextColor]: light.color4,
12722
- [vars$3.selectorIdTextColor]: light.color4,
12723
- [vars$3.regexpTextColor]: light.color13,
12724
- [vars$3.stringTextColor]: light.color13,
12725
- [vars$3.metaStringTextColor]: light.color13,
12726
- [vars$3.builtInTextColor]: light.color5,
12727
- [vars$3.symbolTextColor]: light.color5,
12728
- [vars$3.commentTextColor]: light.color6,
12729
- [vars$3.codeTextColor]: light.color6,
12730
- [vars$3.formulaTextColor]: light.color6,
12731
- [vars$3.nameTextColor]: light.color7,
12732
- [vars$3.quoteTextColor]: light.color7,
12733
- [vars$3.selectorTagTextColor]: light.color7,
12734
- [vars$3.selectorPseudoTextColor]: light.color7,
12735
- [vars$3.substTextColor]: light.color8,
12736
- [vars$3.sectionTextColor]: light.color4,
12737
- [vars$3.bulletTextColor]: light.color9,
12738
- [vars$3.emphasisTextColor]: light.color8,
12739
- [vars$3.strongTextColor]: light.color8,
12740
- [vars$3.additionTextColor]: light.color7,
12741
- [vars$3.additionBgColor]: light.color10,
12742
- [vars$3.deletionTextColor]: light.color2,
12743
- [vars$3.deletionBgColor]: light.color10,
12703
+ [vars$6.rootBgColor]: globalRefs$5.colors.surface.main,
12704
+ [vars$6.rootTextColor]: globalRefs$5.colors.surface.contrast,
12705
+ [vars$6.docTagTextColor]: light.color2,
12706
+ [vars$6.keywordTextColor]: light.color2,
12707
+ [vars$6.metaKeywordTextColor]: light.color2,
12708
+ [vars$6.templateTagTextColor]: light.color2,
12709
+ [vars$6.templateVariableTextColor]: light.color2,
12710
+ [vars$6.typeTextColor]: light.color2,
12711
+ [vars$6.variableLanguageTextColor]: light.color2,
12712
+ [vars$6.titleTextColor]: light.color3,
12713
+ [vars$6.titleClassTextColor]: light.color3,
12714
+ [vars$6.titleClassInheritedTextColor]: light.color3,
12715
+ [vars$6.titleFunctionTextColor]: light.color3,
12716
+ [vars$6.attrTextColor]: light.color4,
12717
+ [vars$6.attributeTextColor]: light.color4,
12718
+ [vars$6.literalTextColor]: light.color4,
12719
+ [vars$6.metaTextColor]: light.color4,
12720
+ [vars$6.numberTextColor]: light.color4,
12721
+ [vars$6.operatorTextColor]: light.color4,
12722
+ [vars$6.variableTextColor]: light.color4,
12723
+ [vars$6.selectorAttrTextColor]: light.color4,
12724
+ [vars$6.selectorClassTextColor]: light.color4,
12725
+ [vars$6.selectorIdTextColor]: light.color4,
12726
+ [vars$6.regexpTextColor]: light.color13,
12727
+ [vars$6.stringTextColor]: light.color13,
12728
+ [vars$6.metaStringTextColor]: light.color13,
12729
+ [vars$6.builtInTextColor]: light.color5,
12730
+ [vars$6.symbolTextColor]: light.color5,
12731
+ [vars$6.commentTextColor]: light.color6,
12732
+ [vars$6.codeTextColor]: light.color6,
12733
+ [vars$6.formulaTextColor]: light.color6,
12734
+ [vars$6.nameTextColor]: light.color7,
12735
+ [vars$6.quoteTextColor]: light.color7,
12736
+ [vars$6.selectorTagTextColor]: light.color7,
12737
+ [vars$6.selectorPseudoTextColor]: light.color7,
12738
+ [vars$6.substTextColor]: light.color8,
12739
+ [vars$6.sectionTextColor]: light.color4,
12740
+ [vars$6.bulletTextColor]: light.color9,
12741
+ [vars$6.emphasisTextColor]: light.color8,
12742
+ [vars$6.strongTextColor]: light.color8,
12743
+ [vars$6.additionTextColor]: light.color7,
12744
+ [vars$6.additionBgColor]: light.color10,
12745
+ [vars$6.deletionTextColor]: light.color2,
12746
+ [vars$6.deletionBgColor]: light.color10,
12744
12747
  /* purposely ignored */
12745
12748
  // [vars.charEscapeTextColor]: '',
12746
12749
  // [vars.linkTextColor]: '',
@@ -12752,50 +12755,50 @@ const CodeSnippet = {
12752
12755
 
12753
12756
  const codeSnippetDarkThemeOverrides = {
12754
12757
  codeSnippet: {
12755
- [vars$3.rootBgColor]: globalRefs$2.colors.surface.main,
12756
- [vars$3.rootTextColor]: globalRefs$2.colors.surface.contrast,
12757
- [vars$3.docTagTextColor]: dark.color2,
12758
- [vars$3.keywordTextColor]: dark.color2,
12759
- [vars$3.metaKeywordTextColor]: dark.color2,
12760
- [vars$3.templateTagTextColor]: dark.color2,
12761
- [vars$3.templateVariableTextColor]: dark.color2,
12762
- [vars$3.typeTextColor]: dark.color2,
12763
- [vars$3.variableLanguageTextColor]: dark.color2,
12764
- [vars$3.titleTextColor]: dark.color3,
12765
- [vars$3.titleClassTextColor]: dark.color3,
12766
- [vars$3.titleClassInheritedTextColor]: dark.color3,
12767
- [vars$3.titleFunctionTextColor]: dark.color3,
12768
- [vars$3.attrTextColor]: dark.color4,
12769
- [vars$3.attributeTextColor]: dark.color4,
12770
- [vars$3.literalTextColor]: dark.color4,
12771
- [vars$3.metaTextColor]: dark.color4,
12772
- [vars$3.numberTextColor]: dark.color4,
12773
- [vars$3.operatorTextColor]: dark.color4,
12774
- [vars$3.variableTextColor]: dark.color4,
12775
- [vars$3.selectorAttrTextColor]: dark.color4,
12776
- [vars$3.selectorClassTextColor]: dark.color4,
12777
- [vars$3.selectorIdTextColor]: dark.color4,
12778
- [vars$3.regexpTextColor]: dark.color13,
12779
- [vars$3.stringTextColor]: dark.color13,
12780
- [vars$3.metaStringTextColor]: dark.color13,
12781
- [vars$3.builtInTextColor]: dark.color5,
12782
- [vars$3.symbolTextColor]: dark.color5,
12783
- [vars$3.commentTextColor]: dark.color6,
12784
- [vars$3.codeTextColor]: dark.color6,
12785
- [vars$3.formulaTextColor]: dark.color6,
12786
- [vars$3.nameTextColor]: dark.color7,
12787
- [vars$3.quoteTextColor]: dark.color7,
12788
- [vars$3.selectorTagTextColor]: dark.color7,
12789
- [vars$3.selectorPseudoTextColor]: dark.color7,
12790
- [vars$3.substTextColor]: dark.color8,
12791
- [vars$3.sectionTextColor]: dark.color4,
12792
- [vars$3.bulletTextColor]: dark.color9,
12793
- [vars$3.emphasisTextColor]: dark.color8,
12794
- [vars$3.strongTextColor]: dark.color8,
12795
- [vars$3.additionTextColor]: dark.color7,
12796
- [vars$3.additionBgColor]: dark.color10,
12797
- [vars$3.deletionTextColor]: dark.color2,
12798
- [vars$3.deletionBgColor]: dark.color10,
12758
+ [vars$6.rootBgColor]: globalRefs$5.colors.surface.main,
12759
+ [vars$6.rootTextColor]: globalRefs$5.colors.surface.contrast,
12760
+ [vars$6.docTagTextColor]: dark.color2,
12761
+ [vars$6.keywordTextColor]: dark.color2,
12762
+ [vars$6.metaKeywordTextColor]: dark.color2,
12763
+ [vars$6.templateTagTextColor]: dark.color2,
12764
+ [vars$6.templateVariableTextColor]: dark.color2,
12765
+ [vars$6.typeTextColor]: dark.color2,
12766
+ [vars$6.variableLanguageTextColor]: dark.color2,
12767
+ [vars$6.titleTextColor]: dark.color3,
12768
+ [vars$6.titleClassTextColor]: dark.color3,
12769
+ [vars$6.titleClassInheritedTextColor]: dark.color3,
12770
+ [vars$6.titleFunctionTextColor]: dark.color3,
12771
+ [vars$6.attrTextColor]: dark.color4,
12772
+ [vars$6.attributeTextColor]: dark.color4,
12773
+ [vars$6.literalTextColor]: dark.color4,
12774
+ [vars$6.metaTextColor]: dark.color4,
12775
+ [vars$6.numberTextColor]: dark.color4,
12776
+ [vars$6.operatorTextColor]: dark.color4,
12777
+ [vars$6.variableTextColor]: dark.color4,
12778
+ [vars$6.selectorAttrTextColor]: dark.color4,
12779
+ [vars$6.selectorClassTextColor]: dark.color4,
12780
+ [vars$6.selectorIdTextColor]: dark.color4,
12781
+ [vars$6.regexpTextColor]: dark.color13,
12782
+ [vars$6.stringTextColor]: dark.color13,
12783
+ [vars$6.metaStringTextColor]: dark.color13,
12784
+ [vars$6.builtInTextColor]: dark.color5,
12785
+ [vars$6.symbolTextColor]: dark.color5,
12786
+ [vars$6.commentTextColor]: dark.color6,
12787
+ [vars$6.codeTextColor]: dark.color6,
12788
+ [vars$6.formulaTextColor]: dark.color6,
12789
+ [vars$6.nameTextColor]: dark.color7,
12790
+ [vars$6.quoteTextColor]: dark.color7,
12791
+ [vars$6.selectorTagTextColor]: dark.color7,
12792
+ [vars$6.selectorPseudoTextColor]: dark.color7,
12793
+ [vars$6.substTextColor]: dark.color8,
12794
+ [vars$6.sectionTextColor]: dark.color4,
12795
+ [vars$6.bulletTextColor]: dark.color9,
12796
+ [vars$6.emphasisTextColor]: dark.color8,
12797
+ [vars$6.strongTextColor]: dark.color8,
12798
+ [vars$6.additionTextColor]: dark.color7,
12799
+ [vars$6.additionBgColor]: dark.color10,
12800
+ [vars$6.deletionTextColor]: dark.color2,
12801
+ [vars$6.deletionBgColor]: dark.color10,
12799
12802
  },
12800
12803
  };
12801
12804
 
@@ -12803,12 +12806,12 @@ var codeSnippet = /*#__PURE__*/Object.freeze({
12803
12806
  __proto__: null,
12804
12807
  codeSnippetDarkThemeOverrides: codeSnippetDarkThemeOverrides,
12805
12808
  default: CodeSnippet,
12806
- vars: vars$3
12809
+ vars: vars$6
12807
12810
  });
12808
12811
 
12809
- const componentName$3 = getComponentName('radio-button');
12812
+ const componentName$6 = getComponentName('radio-button');
12810
12813
 
12811
- const customMixin = (superclass) =>
12814
+ const customMixin$2 = (superclass) =>
12812
12815
  class CustomMixin extends superclass {
12813
12816
  constructor() {
12814
12817
  super();
@@ -12864,18 +12867,18 @@ const RadioButtonClass = compose(
12864
12867
  }),
12865
12868
  composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
12866
12869
  componentNameValidationMixin,
12867
- customMixin
12870
+ customMixin$2
12868
12871
  )(
12869
12872
  createProxy({
12870
12873
  slots: [''],
12871
12874
  wrappedEleName: 'vaadin-radio-button',
12872
12875
  excludeAttrsSync: ['tabindex', 'data'],
12873
12876
  includeForwardProps: ['checked', 'name', 'disabled'],
12874
- componentName: componentName$3,
12877
+ componentName: componentName$6,
12875
12878
  })
12876
12879
  );
12877
12880
 
12878
- const componentName$2 = getComponentName('radio-group');
12881
+ const componentName$5 = getComponentName('radio-group');
12879
12882
 
12880
12883
  const RadioGroupMixin = (superclass) =>
12881
12884
  class RadioGroupMixinClass extends superclass {
@@ -12890,12 +12893,12 @@ const RadioGroupMixin = (superclass) =>
12890
12893
 
12891
12894
  // we are overriding vaadin children getter so it will run on our custom elements
12892
12895
  Object.defineProperty(this.baseElement, 'children', {
12893
- get: () => this.querySelectorAll(componentName$3),
12896
+ get: () => this.querySelectorAll(componentName$6),
12894
12897
  });
12895
12898
 
12896
12899
  // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
12897
12900
  this.baseElement.__filterRadioButtons = (nodes) => {
12898
- return nodes.filter((node) => node.localName === componentName$3);
12901
+ return nodes.filter((node) => node.localName === componentName$6);
12899
12902
  };
12900
12903
 
12901
12904
  // vaadin radio group missing some input properties
@@ -13045,38 +13048,38 @@ const RadioGroupClass = compose(
13045
13048
  `,
13046
13049
 
13047
13050
  excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
13048
- componentName: componentName$2,
13051
+ componentName: componentName$5,
13049
13052
  includeForwardProps: ['value'],
13050
13053
  })
13051
13054
  );
13052
13055
 
13053
- const vars$2 = RadioGroupClass.cssVarList;
13054
- const globalRefs$1 = getThemeRefs(globals);
13056
+ const vars$5 = RadioGroupClass.cssVarList;
13057
+ const globalRefs$4 = getThemeRefs(globals);
13055
13058
 
13056
13059
  const radioGroup = {
13057
- [vars$2.buttonsRowGap]: '9px',
13058
- [vars$2.hostWidth]: refs.width,
13059
- [vars$2.hostDirection]: refs.direction,
13060
- [vars$2.fontSize]: refs.fontSize,
13061
- [vars$2.fontFamily]: refs.fontFamily,
13062
- [vars$2.labelTextColor]: refs.labelTextColor,
13063
- [vars$2.labelRequiredIndicator]: refs.requiredIndicator,
13064
- [vars$2.errorMessageTextColor]: refs.errorMessageTextColor,
13065
- [vars$2.helperTextColor]: refs.helperTextColor,
13066
- [vars$2.itemsLabelColor]: globalRefs$1.colors.surface.contrast,
13060
+ [vars$5.buttonsRowGap]: '9px',
13061
+ [vars$5.hostWidth]: refs.width,
13062
+ [vars$5.hostDirection]: refs.direction,
13063
+ [vars$5.fontSize]: refs.fontSize,
13064
+ [vars$5.fontFamily]: refs.fontFamily,
13065
+ [vars$5.labelTextColor]: refs.labelTextColor,
13066
+ [vars$5.labelRequiredIndicator]: refs.requiredIndicator,
13067
+ [vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
13068
+ [vars$5.helperTextColor]: refs.helperTextColor,
13069
+ [vars$5.itemsLabelColor]: globalRefs$4.colors.surface.contrast,
13067
13070
 
13068
13071
  textAlign: {
13069
- right: { [vars$2.inputTextAlign]: 'right' },
13070
- left: { [vars$2.inputTextAlign]: 'left' },
13071
- center: { [vars$2.inputTextAlign]: 'center' },
13072
+ right: { [vars$5.inputTextAlign]: 'right' },
13073
+ left: { [vars$5.inputTextAlign]: 'left' },
13074
+ center: { [vars$5.inputTextAlign]: 'center' },
13072
13075
  },
13073
13076
 
13074
13077
  _fullWidth: {
13075
- [vars$2.buttonsSpacing]: 'space-between',
13078
+ [vars$5.buttonsSpacing]: 'space-between',
13076
13079
  },
13077
13080
 
13078
13081
  _disabled: {
13079
- [vars$2.itemsLabelColor]: globalRefs$1.colors.surface.light,
13082
+ [vars$5.itemsLabelColor]: globalRefs$4.colors.surface.light,
13080
13083
  },
13081
13084
  };
13082
13085
 
@@ -13084,24 +13087,24 @@ var radioGroup$1 = /*#__PURE__*/Object.freeze({
13084
13087
  __proto__: null,
13085
13088
  default: radioGroup,
13086
13089
  radioGroup: radioGroup,
13087
- vars: vars$2
13090
+ vars: vars$5
13088
13091
  });
13089
13092
 
13090
- const vars$1 = RadioButtonClass.cssVarList;
13091
- const globalRefs = getThemeRefs(globals);
13093
+ const vars$4 = RadioButtonClass.cssVarList;
13094
+ const globalRefs$3 = getThemeRefs(globals);
13092
13095
 
13093
13096
  const radioButton = {
13094
- [vars$1.fontFamily]: refs.fontFamily,
13095
- [vars$1.radioSize]: 'calc(1em + 6px)',
13096
- [vars$1.radioMargin]: 'auto 4px',
13097
- [vars$1.radioCheckedSize]: `calc(var(${vars$1.radioSize})/5)`,
13098
- [vars$1.radioCheckedColor]: globalRefs.colors.surface.light,
13099
- [vars$1.radioBackgroundColor]: globalRefs.colors.surface.light,
13100
- [vars$1.radioBorderColor]: 'none',
13101
- [vars$1.radioBorderWidth]: 0,
13097
+ [vars$4.fontFamily]: refs.fontFamily,
13098
+ [vars$4.radioSize]: 'calc(1em + 6px)',
13099
+ [vars$4.radioMargin]: 'auto 4px',
13100
+ [vars$4.radioCheckedSize]: `calc(var(${vars$4.radioSize})/5)`,
13101
+ [vars$4.radioCheckedColor]: globalRefs$3.colors.surface.light,
13102
+ [vars$4.radioBackgroundColor]: globalRefs$3.colors.surface.light,
13103
+ [vars$4.radioBorderColor]: 'none',
13104
+ [vars$4.radioBorderWidth]: 0,
13102
13105
 
13103
13106
  _checked: {
13104
- [vars$1.radioBackgroundColor]: globalRefs.colors.surface.contrast,
13107
+ [vars$4.radioBackgroundColor]: globalRefs$3.colors.surface.contrast,
13105
13108
  },
13106
13109
 
13107
13110
  _hover: {
@@ -13110,16 +13113,16 @@ const radioButton = {
13110
13113
 
13111
13114
  size: {
13112
13115
  xs: {
13113
- [vars$1.fontSize]: '12px',
13116
+ [vars$4.fontSize]: '12px',
13114
13117
  },
13115
13118
  sm: {
13116
- [vars$1.fontSize]: '14px',
13119
+ [vars$4.fontSize]: '14px',
13117
13120
  },
13118
13121
  md: {
13119
- [vars$1.fontSize]: '16px',
13122
+ [vars$4.fontSize]: '16px',
13120
13123
  },
13121
13124
  lg: {
13122
- [vars$1.fontSize]: '18px',
13125
+ [vars$4.fontSize]: '18px',
13123
13126
  },
13124
13127
  },
13125
13128
  };
@@ -13128,6 +13131,514 @@ var radioButton$1 = /*#__PURE__*/Object.freeze({
13128
13131
  __proto__: null,
13129
13132
  default: radioButton,
13130
13133
  radioButton: radioButton,
13134
+ vars: vars$4
13135
+ });
13136
+
13137
+ const activeableMixin = (superclass) =>
13138
+ class ActiveableMixinClass extends superclass {
13139
+ init() {
13140
+ super.init?.();
13141
+
13142
+ this.baseElement.addEventListener('mousedown', (e) => {
13143
+ e.preventDefault();
13144
+ this.setAttribute('active', 'true');
13145
+ window.addEventListener('mouseup', () => this.removeAttribute('active'), {
13146
+ once: true,
13147
+ });
13148
+ });
13149
+ }
13150
+ };
13151
+
13152
+ const componentName$4 = getComponentName('list-item');
13153
+
13154
+ const customMixin$1 = (superclass) =>
13155
+ class ListItemMixinClass extends superclass {
13156
+ constructor() {
13157
+ super();
13158
+
13159
+ this.attachShadow({ mode: 'open' }).innerHTML = `
13160
+ <style>
13161
+ /*css*/
13162
+ slot {
13163
+ width: 100%;
13164
+ display: flex;
13165
+ overflow: hidden;
13166
+ box-sizing: border-box;
13167
+ }
13168
+ :host {
13169
+ display: block;
13170
+ }
13171
+
13172
+ /*!css*/
13173
+ </style>
13174
+ <slot></slot>
13175
+ `;
13176
+ }
13177
+ };
13178
+
13179
+ const ListItemClass = compose(
13180
+ createStyleMixin({
13181
+ mappings: {
13182
+ padding: {},
13183
+ backgroundColor: {},
13184
+ borderColor: {},
13185
+ borderStyle: {},
13186
+ borderWidth: {},
13187
+ borderRadius: {},
13188
+ outline: {},
13189
+ cursor: {},
13190
+ gap: {},
13191
+ maxWidth: { selector: () => ':host' },
13192
+ alignItems: {},
13193
+ flexDirection: {},
13194
+ transition: {},
13195
+ },
13196
+ }),
13197
+ draggableMixin,
13198
+ componentNameValidationMixin,
13199
+ customMixin$1,
13200
+ activeableMixin
13201
+ )(createBaseClass({ componentName: componentName$4, baseSelector: 'slot' }));
13202
+
13203
+ const componentName$3 = getComponentName('list');
13204
+
13205
+ class RawList extends createBaseClass({ componentName: componentName$3, baseSelector: '.wrapper' }) {
13206
+ static get observedAttributes() {
13207
+ return ['variant'];
13208
+ }
13209
+
13210
+ constructor() {
13211
+ super();
13212
+
13213
+ this.attachShadow({ mode: 'open' }).innerHTML = `
13214
+ <style>
13215
+ /*css*/
13216
+ .wrapper {
13217
+ overflow: auto;
13218
+ display: grid;
13219
+ max-height: 100%;
13220
+ width: 100%;
13221
+ }
13222
+
13223
+ :host {
13224
+ display: inline-flex;
13225
+ width: 100%;
13226
+ }
13227
+ slot[name="empty-state"] {
13228
+ justify-content: center;
13229
+ align-items: center;
13230
+ display: flex;
13231
+ flex-grow: 1;
13232
+ }
13233
+
13234
+ :host slot[name="empty-state"] {
13235
+ display: none;
13236
+ }
13237
+ :host([empty]) slot[name="empty-state"] {
13238
+ display: flex;
13239
+ }
13240
+ ::slotted(:not([slot])) {
13241
+ width: 100%;
13242
+ }
13243
+ /*!css*/
13244
+ </style>
13245
+
13246
+ <div class="wrapper">
13247
+ <slot></slot>
13248
+ <slot name="empty-state">
13249
+ No item...
13250
+ </slot>
13251
+ </div>
13252
+ `;
13253
+ }
13254
+
13255
+ get items() {
13256
+ return this.shadowRoot.querySelector('slot').assignedElements();
13257
+ }
13258
+
13259
+ #handleEmptyState() {
13260
+ if (this.items.length === 0) {
13261
+ this.setAttribute('empty', 'true');
13262
+ } else {
13263
+ this.removeAttribute('empty');
13264
+ }
13265
+ }
13266
+
13267
+ get variant() {
13268
+ return this.getAttribute('variant') || 'list';
13269
+ }
13270
+
13271
+ #handleItemsVariant() {
13272
+ this.items.forEach((item) => {
13273
+ let listItem = item;
13274
+ if (listItem.localName !== ListItemClass.componentName) {
13275
+ listItem = item.querySelector(ListItemClass.componentName);
13276
+ }
13277
+
13278
+ const listItemVariant = this.variant === 'tiles' ? 'tile' : 'row';
13279
+ listItem.setAttribute('variant', listItemVariant);
13280
+ });
13281
+ }
13282
+
13283
+ init() {
13284
+ super.init?.();
13285
+
13286
+ // we want new items to get the size
13287
+ observeChildren(this, () => {
13288
+ this.#handleEmptyState();
13289
+ this.#handleItemsVariant();
13290
+ });
13291
+ }
13292
+
13293
+ attributeChangedCallback(name, oldValue, newValue) {
13294
+ super.attributeChangedCallback?.(name, oldValue, newValue);
13295
+
13296
+ if (newValue === oldValue) return;
13297
+
13298
+ if (name === 'variant') {
13299
+ this.#handleItemsVariant();
13300
+ }
13301
+ }
13302
+ }
13303
+
13304
+ const ListClass = compose(
13305
+ createStyleMixin({
13306
+ mappings: {
13307
+ hostWidth: { selector: () => ':host', property: 'width' },
13308
+ maxHeight: { selector: () => ':host' },
13309
+ minHeight: {},
13310
+ verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
13311
+ horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
13312
+ hostDirection: { selector: () => ':host', property: 'direction' },
13313
+ fontFamily: {},
13314
+ gap: {},
13315
+
13316
+ backgroundColor: {},
13317
+ borderRadius: {},
13318
+ borderColor: {},
13319
+ borderStyle: {},
13320
+ borderWidth: {},
13321
+
13322
+ boxShadow: {},
13323
+ gridTemplateColumns: {},
13324
+ maxItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'max-width' },
13325
+ minItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'min-width' },
13326
+ itemsHorizontalAlign: { selector: () => '::slotted(*)', property: 'justify-self' },
13327
+ emptyStateTextColor: { selector: () => 'slot[name="empty-state"]', property: 'color' },
13328
+ emptyStateTextFontFamily: {
13329
+ selector: () => 'slot[name="empty-state"]',
13330
+ property: 'font-family',
13331
+ },
13332
+ },
13333
+ }),
13334
+ draggableMixin,
13335
+ componentNameValidationMixin
13336
+ )(RawList);
13337
+
13338
+ const globalRefs$2 = getThemeRefs(globals);
13339
+
13340
+ const compVars = ListClass.cssVarList;
13341
+
13342
+ const [helperTheme, helperRefs, helperVars] = createHelperVars(
13343
+ { shadowColor: '#00000020' },
13344
+ componentName$3
13345
+ );
13346
+
13347
+ const { shadowColor } = helperRefs;
13348
+
13349
+ const list$1 = {
13350
+ ...helperTheme,
13351
+
13352
+ [compVars.hostWidth]: '100%',
13353
+ [compVars.backgroundColor]: globalRefs$2.colors.surface.main,
13354
+ [compVars.fontFamily]: globalRefs$2.fonts.font1.family,
13355
+ [compVars.borderColor]: globalRefs$2.colors.surface.light,
13356
+ [compVars.borderStyle]: 'solid',
13357
+ [compVars.borderWidth]: globalRefs$2.border.xs,
13358
+ [compVars.borderRadius]: globalRefs$2.radius.sm,
13359
+ [compVars.gap]: globalRefs$2.spacing.md,
13360
+ [compVars.verticalPadding]: globalRefs$2.spacing.lg,
13361
+ [compVars.horizontalPadding]: globalRefs$2.spacing.lg,
13362
+ [compVars.boxShadow]: `${globalRefs$2.shadow.wide.sm} ${shadowColor}, ${globalRefs$2.shadow.narrow.sm} ${shadowColor}`,
13363
+ [compVars.maxHeight]: '100%',
13364
+ [compVars.hostDirection]: globalRefs$2.direction,
13365
+ [compVars.minItemsWidth]: '150px',
13366
+
13367
+ _empty: {
13368
+ [compVars.minHeight]: '150px',
13369
+ [compVars.emptyStateTextColor]: globalRefs$2.colors.surface.dark,
13370
+ [compVars.emptyStateTextFontFamily]: globalRefs$2.fonts.font1.family,
13371
+ },
13372
+
13373
+ variant: {
13374
+ tiles: {
13375
+ [compVars.gridTemplateColumns]: `repeat(auto-fit, minmax(min(${useVar(
13376
+ compVars.minItemsWidth
13377
+ )}, 100%), 1fr))`,
13378
+ [compVars.maxItemsWidth]: '200px',
13379
+ [compVars.itemsHorizontalAlign]: 'center',
13380
+ },
13381
+ },
13382
+ };
13383
+
13384
+ const vars$3 = {
13385
+ ...compVars,
13386
+ ...helperVars,
13387
+ };
13388
+
13389
+ var list$2 = /*#__PURE__*/Object.freeze({
13390
+ __proto__: null,
13391
+ default: list$1,
13392
+ vars: vars$3
13393
+ });
13394
+
13395
+ const globalRefs$1 = getThemeRefs(globals);
13396
+
13397
+ const vars$2 = ListItemClass.cssVarList;
13398
+
13399
+ const list = {
13400
+ [vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
13401
+ [vars$2.padding]: globalRefs$1.spacing.lg,
13402
+ [vars$2.gap]: globalRefs$1.spacing.md,
13403
+ [vars$2.borderStyle]: 'solid',
13404
+ [vars$2.borderWidth]: globalRefs$1.border.xs,
13405
+ [vars$2.borderColor]: globalRefs$1.colors.surface.main,
13406
+ [vars$2.borderRadius]: globalRefs$1.radius.sm,
13407
+ [vars$2.cursor]: 'pointer',
13408
+ [vars$2.alignItems]: 'center',
13409
+ [vars$2.flexDirection]: 'row',
13410
+ [vars$2.transition]: 'border-color 0.2s, background-color 0.2s',
13411
+
13412
+ variant: {
13413
+ tile: {
13414
+ [vars$2.alignItems]: 'flex-start',
13415
+ [vars$2.flexDirection]: 'column',
13416
+ [vars$2.borderColor]: globalRefs$1.colors.surface.light,
13417
+ },
13418
+ },
13419
+
13420
+ _hover: {
13421
+ [vars$2.backgroundColor]: globalRefs$1.colors.surface.highlight,
13422
+ },
13423
+
13424
+ _active: {
13425
+ [vars$2.backgroundColor]: globalRefs$1.colors.surface.main,
13426
+ [vars$2.borderColor]: globalRefs$1.colors.primary.light,
13427
+ [vars$2.outline]: `1px solid ${globalRefs$1.colors.primary.light}`,
13428
+ },
13429
+ };
13430
+
13431
+ var listItem = /*#__PURE__*/Object.freeze({
13432
+ __proto__: null,
13433
+ default: list,
13434
+ vars: vars$2
13435
+ });
13436
+
13437
+ const defaultValidateSchema = () => true;
13438
+ const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
13439
+
13440
+ const createTemplate = (templateString) => {
13441
+ const template = document.createElement('template');
13442
+ template.innerHTML = templateString;
13443
+
13444
+ return template;
13445
+ };
13446
+
13447
+ const getTemplateContent = (templateOrString) => {
13448
+ if (typeof templateOrString === 'string') {
13449
+ return createTemplate(templateOrString).content;
13450
+ }
13451
+
13452
+ if (templateOrString instanceof HTMLTemplateElement) {
13453
+ return templateOrString.content;
13454
+ }
13455
+
13456
+ // eslint-disable-next-line no-console
13457
+ console.error('Invalid template', templateOrString);
13458
+ return null;
13459
+ };
13460
+
13461
+ const createDynamicDataMixin =
13462
+ ({
13463
+ itemRenderer = defaultItemRenderer,
13464
+ validateSchema = defaultValidateSchema,
13465
+ slotName,
13466
+ rerenderAttrsList = [],
13467
+ }) =>
13468
+ (superclass) =>
13469
+ class DynamicDataMixinClass extends superclass {
13470
+ #data = [];
13471
+
13472
+ // eslint-disable-next-line class-methods-use-this
13473
+ #validateSchema(data) {
13474
+ if (!validateSchema) return true;
13475
+
13476
+ const validation = validateSchema(data);
13477
+ if (validation === true) return true;
13478
+
13479
+ // eslint-disable-next-line no-console
13480
+ console.error('Data schema validation failed', validation || '');
13481
+
13482
+ return false;
13483
+ }
13484
+
13485
+ #removeOldItems() {
13486
+ const selector = slotName ? `*[slot="${slotName}"]` : ':not([slot])';
13487
+ this.baseElement.querySelectorAll(selector).forEach((item) => item.remove());
13488
+ }
13489
+
13490
+ #renderItems() {
13491
+ this.#removeOldItems();
13492
+ this.data.forEach((item, index) => {
13493
+ const content = getTemplateContent(itemRenderer(item, index, this));
13494
+ this.baseElement.appendChild(content?.cloneNode(true));
13495
+ });
13496
+ }
13497
+
13498
+ set data(value) {
13499
+ if (this.#validateSchema(value)) {
13500
+ this.#data = value;
13501
+ this.#renderItems();
13502
+ }
13503
+ }
13504
+
13505
+ get data() {
13506
+ return this.#data;
13507
+ }
13508
+
13509
+ init() {
13510
+ super.init?.();
13511
+
13512
+ if (rerenderAttrsList.length) {
13513
+ observeAttributes(this, () => this.#renderItems(), { includeAttrs: rerenderAttrsList });
13514
+ } else {
13515
+ this.#renderItems();
13516
+ }
13517
+ }
13518
+ };
13519
+
13520
+ const componentName$2 = getComponentName('apps-list');
13521
+
13522
+ const limitAbbreviation = (str, limit = 3) =>
13523
+ str
13524
+ .trim()
13525
+ .split(' ')
13526
+ .splice(0, limit)
13527
+ .map((s) => s[0]?.toUpperCase())
13528
+ .join('');
13529
+
13530
+ const itemRenderer = ({ name, icon, url }, _, ref) => `
13531
+ <a href="${url}" target="_blank" title="${url}">
13532
+ <descope-list-item>
13533
+ <descope-avatar
13534
+ img="${icon}"
13535
+ display-name="${name}"
13536
+ abbr=${limitAbbreviation(name)}
13537
+ size=${ref.size}
13538
+ ></descope-avatar>
13539
+ <descope-text
13540
+ variant="body1"
13541
+ mode="primary"
13542
+ >${name}</descope-text>
13543
+ </descope-list-item>
13544
+ </a>
13545
+ `;
13546
+
13547
+ const customMixin = (superclass) =>
13548
+ class AppsListMixinClass extends superclass {
13549
+ get size() {
13550
+ return this.getAttribute('size') || 'sm';
13551
+ }
13552
+ };
13553
+
13554
+ const AppsListClass = compose(
13555
+ createStyleMixin({
13556
+ mappings: {
13557
+ maxHeight: { selector: () => ':host' },
13558
+ minHeight: { selector: () => ':host' },
13559
+ hostDirection: { selector: () => ':host', property: 'direction' },
13560
+ itemsFontWeight: {
13561
+ selector: TextClass.componentName,
13562
+ property: TextClass.cssVarList.fontWeight,
13563
+ },
13564
+ itemsFontSize: {
13565
+ selector: TextClass.componentName,
13566
+ property: TextClass.cssVarList.fontSize,
13567
+ },
13568
+ itemsTextAlign: {
13569
+ selector: TextClass.componentName,
13570
+ property: TextClass.cssVarList.textAlign,
13571
+ },
13572
+ },
13573
+ }),
13574
+ createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size'] }),
13575
+ draggableMixin,
13576
+ componentNameValidationMixin,
13577
+ customMixin
13578
+ )(
13579
+ createProxy({
13580
+ slots: ['empty-state'],
13581
+ wrappedEleName: 'descope-list',
13582
+ excludeAttrsSync: ['tabindex', 'class'],
13583
+ componentName: componentName$2,
13584
+ style: () => `
13585
+ :host {
13586
+ width: 100%;
13587
+ display: inline-flex;
13588
+ }
13589
+
13590
+ descope-text::part(text-wrapper) {
13591
+ display: -webkit-box;
13592
+ -webkit-line-clamp: 2;
13593
+ -webkit-box-orient: vertical;
13594
+ overflow: hidden;
13595
+ }
13596
+
13597
+ a {
13598
+ text-decoration: none;
13599
+ }
13600
+
13601
+ descope-text {
13602
+ ${TextClass.cssVarList.hostDirection}: var(${AppsListClass.cssVarList.hostDirection});
13603
+ }
13604
+ `,
13605
+ })
13606
+ );
13607
+
13608
+ const vars$1 = AppsListClass.cssVarList;
13609
+ const globalRefs = getThemeRefs(globals);
13610
+
13611
+ const defaultHeight = '400px';
13612
+
13613
+ const appsList = {
13614
+ [vars$1.itemsFontWeight]: 'normal',
13615
+ [vars$1.itemsTextAlign]: 'start',
13616
+ [vars$1.hostDirection]: globalRefs.direction,
13617
+ [vars$1.maxHeight]: defaultHeight,
13618
+
13619
+ _empty: {
13620
+ [vars$1.minHeight]: defaultHeight,
13621
+ },
13622
+
13623
+ size: {
13624
+ xs: {
13625
+ [vars$1.itemsFontSize]: '14px',
13626
+ },
13627
+ sm: {
13628
+ [vars$1.itemsFontSize]: '14px',
13629
+ },
13630
+ md: {
13631
+ [vars$1.itemsFontSize]: '16px',
13632
+ },
13633
+ lg: {
13634
+ [vars$1.itemsFontSize]: '20px',
13635
+ },
13636
+ },
13637
+ };
13638
+
13639
+ var appsList$1 = /*#__PURE__*/Object.freeze({
13640
+ __proto__: null,
13641
+ default: appsList,
13131
13642
  vars: vars$1
13132
13643
  });
13133
13644
 
@@ -13176,6 +13687,9 @@ const components = {
13176
13687
  codeSnippet,
13177
13688
  radioGroup: radioGroup$1,
13178
13689
  radioButton: radioButton$1,
13690
+ list: list$2,
13691
+ listItem,
13692
+ appsList: appsList$1,
13179
13693
  };
13180
13694
 
13181
13695
  const theme = Object.keys(components).reduce(
@@ -13188,7 +13702,7 @@ const vars = Object.keys(components).reduce(
13188
13702
  );
13189
13703
 
13190
13704
  const defaultTheme = { globals, components: theme };
13191
- const themeVars = { globals: vars$J, components: vars };
13705
+ const themeVars = { globals: vars$M, components: vars };
13192
13706
 
13193
13707
  const colors = {
13194
13708
  surface: {
@@ -13528,6 +14042,7 @@ const NotificationClass = compose(
13528
14042
  })
13529
14043
  );
13530
14044
 
14045
+ exports.AppsListClass = AppsListClass;
13531
14046
  exports.AvatarClass = AvatarClass;
13532
14047
  exports.BadgeClass = BadgeClass;
13533
14048
  exports.ButtonClass = ButtonClass;
@@ -13543,6 +14058,8 @@ exports.EnrichedTextClass = EnrichedTextClass;
13543
14058
  exports.GridClass = GridClass;
13544
14059
  exports.ImageClass = ImageClass;
13545
14060
  exports.LinkClass = LinkClass;
14061
+ exports.ListClass = ListClass;
14062
+ exports.ListItemClass = ListItemClass;
13546
14063
  exports.LoaderLinearClass = LoaderLinearClass;
13547
14064
  exports.LoaderRadialClass = LoaderRadialClass;
13548
14065
  exports.LogoClass = LogoClass;