@descope/web-components-ui 1.0.365 → 1.0.367

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